Skip to content

Commit 7fbd538

Browse files
webdevnerdstuffwebdevnerdstuff
committed
[DEV] Adding conditional funcctionality
1 parent e61f5a5 commit 7fbd538

File tree

15 files changed

+54
-132
lines changed

15 files changed

+54
-132
lines changed

‎.husky/pre-commit

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
#!/usr/bin/env sh
2-
. "$(dirname -- "$0")/_/husky.sh"
32

43
# npx lint-staged && npm run test:build
54
npx lint-staged

‎src/plugin/VStepperForm.vue

Lines changed: 38 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@
6262
:index="getIndex(i)"
6363
:page="page"
6464
:settings="settings"
65+
@callback="callbacks"
6566
@next="validatePage(next)"
6667
/>
6768
<PageReviewContainer
@@ -110,6 +111,7 @@
110111
import { AllProps } from './utils/props';
111112
import { useDisplay } from 'vuetify';
112113
import {
114+
Field,
113115
Page,
114116
Props,
115117
Settings,
@@ -124,7 +126,7 @@ import { globalOptions } from './';
124126
import PageContainer from './components/shared/PageContainer.vue';
125127
import PageReviewContainer from './components/shared/PageReviewContainer.vue';
126128
import { useMergeProps } from './composables/helpers';
127-
// import { watchDeep } from '@vueuse/core';
129+
import { watchDeep } from '@vueuse/core';
128130
129131
130132
const attrs = useAttrs();
@@ -136,10 +138,9 @@ const injectedOptions = inject(globalOptions, {});
136138
// -------------------------------------------------- Props //
137139
const props = withDefaults(defineProps<Props>(), AllProps);
138140
139-
140141
const stepperProps = reactive<Settings>(useMergeProps(attrs, injectedOptions, props));
141142
const { direction, pages, title, width } = toRefs(props);
142-
143+
const originalPages = JSON.parse(JSON.stringify(pages.value));
143144
144145
const settings = ref<Settings>({
145146
altLabels: stepperProps.altLabels,
@@ -183,25 +184,31 @@ console.log('settings.value', settings.value);
183184
184185
// -------------------------------------------------- Mounted //
185186
onMounted(() => {
186-
// callback();
187+
whenCallback();
188+
187189
summaryColumnErrorCheck();
188190
});
189191
190192
191193
// -------------------------------------------------- Data //
192194
const modelValue = defineModel<any>();
193-
const stepperModel = ref(1);
194-
const { sm } = useDisplay();
195-
const transition = computed(() => stepperProps.transition);
196-
const formCompleted = ref(false);
197195
196+
watchDeep(modelValue, () => {
197+
callbacks();
198+
});
199+
200+
const stepperModel = ref(1);
198201
199202
watch(stepperModel, () => {
200203
if (stepperModel.value === pages.value.length) {
201204
formCompleted.value = true;
202205
}
203206
});
204207
208+
const { sm } = useDisplay();
209+
const transition = computed(() => stepperProps.transition);
210+
const formCompleted = ref(false);
211+
205212
206213
// -------------------------------------------------- Stepper Action //
207214
const stepperActionsDisabled = computed(() => {
@@ -265,29 +272,33 @@ function validatePage(event: () => void): void {
265272
nextPage(event);
266273
}
267274
268-
// watch(() => fields.value, () => {
269-
// console.log('xxxxxxxxxxxxx fields update', fields.value);
270-
// }), {
271-
// deep: true,
272-
// };
273275
274-
// watchDeep(fields.value, () => {
275-
// console.log('xxxxxxxxxxxxx fields update', fields.value);
276-
// });
277276
278277
279-
// function callback() {
280-
// Object.values(fields.value).forEach((field) => {
281-
// if (field.when) {
282-
// const response = field.when(modelValue.value);
283-
// const fieldIdx = fields.value.findIndex((f) => f.name === field.name);
278+
function callbacks() {
279+
whenCallback();
280+
}
281+
282+
284283
285-
// if (fields.value[fieldIdx]) {
286-
// fields.value[fieldIdx].disabled = response;
287-
// }
288-
// }
289-
// });
290-
// }
284+
285+
286+
function whenCallback() {
287+
Object.values(pages.value).forEach((page: Page, pageIdx: number) => {
288+
Object.values(page.fields as Field[]).forEach((field: Field, fieldIdx) => {
289+
if (field.when) {
290+
const enabledField: boolean = field.when(modelValue.value);
291+
const indexPage = pages.value[pageIdx];
292+
293+
if (indexPage?.fields[fieldIdx]) {
294+
indexPage.fields[fieldIdx].type = enabledField ? originalPages[pageIdx].fields[fieldIdx].type : 'hidden';
295+
296+
// TODO: Update validation //
297+
}
298+
}
299+
});
300+
});
301+
}
291302
292303
293304
// ------------------------------------------------ Submit Form //

‎src/plugin/components/fields/VSFAutocomplete/VSFAutocomplete.vue

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -32,13 +32,8 @@ const { field, settings } = defineProps<VSFAutocompleteProps>();
3232
// Auto Paging //
3333
useAutoPage({ emit, field, modelValue, settings });
3434
35-
// console.group('VSFAutocomplete');
36-
// console.log('field', field);
37-
// console.log('settings', settings);
38-
// console.groupEnd();
3935
40-
41-
// Bound Settings //
36+
// -------------------------------------------------- Bound Settings //
4237
const bindSettings = computed(() => ({
4338
...field,
4439
color: field.color || settings?.color,

‎src/plugin/components/fields/VSFCheckbox/VSFCheckbox.vue

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -74,15 +74,8 @@ const { field, settings } = defineProps<VSFCheckboxProps>();
7474
// Auto Paging //
7575
useAutoPage({ emit, field, modelValue, settings });
7676
77-
// console.group('VSFCheckbox');
78-
// console.log('field', field);
79-
// console.log('settings', settings);
80-
// console.groupEnd();
8177
82-
83-
84-
85-
// Bound Settings //
78+
// -------------------------------------------------- Bound Settings //
8679
const bindSettings = reactive({
8780
...field,
8881
color: field.color || settings?.color,
@@ -93,7 +86,7 @@ const bindSettings = reactive({
9386
const boundSettings = computed(() => useBindingSettings(bindSettings));
9487
9588
96-
// Styles //
89+
// -------------------------------------------------- Styles //
9790
const inputControlContainerStyle = computed<CSSProperties>(() => {
9891
const useInlineSpacing = field.labelPositionLeft;
9992
@@ -105,7 +98,7 @@ const inputControlContainerStyle = computed<CSSProperties>(() => {
10598
});
10699
107100
108-
// Inline Checkboxes //
101+
// -------------------------------------------------- Inline Checkboxes //
109102
const checkboxContainerStyle = computed<CSSProperties>(() => ({
110103
'display': field.inline ? 'flex' : undefined,
111104
}));
@@ -120,8 +113,6 @@ const checkboxStyle = computed<CSSProperties>(() => {
120113
121114
return styles as CSSProperties;
122115
});
123-
124-
125116
</script>
126117

127118
<style lang="scss" scoped></style>

‎src/plugin/components/fields/VSFColorField/VSFColorField.vue

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -28,16 +28,12 @@ const emit = defineEmits(['next']);
2828
const modelValue = defineModel<any>();
2929
const { field, settings } = defineProps<VSFColorFieldProps>();
3030
31+
3132
// Auto Paging //
3233
useAutoPage({ emit, field, modelValue, settings });
3334
34-
// console.group('VSFTextarea');
35-
// console.log('field', field);
36-
// console.log('settings', settings);
37-
// console.groupEnd();
38-
3935
40-
// Bound Settings //
36+
// -------------------------------------------------- Bound Settings //
4137
const bindSettings = reactive({
4238
...field,
4339
color: field.color || settings?.color,

‎src/plugin/components/fields/VSFCombobox/VSFCombobox.vue

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -32,13 +32,8 @@ const { field, settings } = defineProps<VSFComboboxProps>();
3232
// Auto Paging //
3333
useAutoPage({ emit, field, modelValue, settings });
3434
35-
// console.group('VSFTextField');
36-
// console.log('field', field);
37-
// console.log('settings', settings);
38-
// console.groupEnd();
3935
40-
41-
// Bound Settings //
36+
// -------------------------------------------------- Bound Settings //
4237
const bindSettings = computed(() => ({
4338
...field,
4439
color: field.color || settings?.color,

‎src/plugin/components/fields/VSFFancyRadio/VSFFancyRadio.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ const emit = defineEmits(['next']);
7474
const modelValue = defineModel<any>();
7575
const { field, settings } = defineProps<VSFFancyRadioProps>();
7676
77-
console.log('field', field);
77+
// console.log('field', field);
7878
7979
8080
// Auto Paging //

‎src/plugin/components/fields/VSFFileInput/VSFFileInput.vue

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -31,13 +31,8 @@ const { field, settings } = defineProps<VFileInputProps>();
3131
// Auto Paging //
3232
useAutoPage({ emit, field, modelValue, settings });
3333
34-
// console.group('VSFFileInput');
35-
// console.log('field', field);
36-
// console.log('settings', settings);
37-
// console.groupEnd();
3834
39-
40-
// Bound Settings //
35+
// -------------------------------------------------- Bound Settings //
4136
const bindSettings = reactive({
4237
...field,
4338
color: field.color || settings?.color,

‎src/plugin/components/fields/VSFRadio/VSFRadio.vue

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -67,12 +67,6 @@ const { field, settings } = defineProps<VSFRadioProps>();
6767
// Auto Paging //
6868
useAutoPage({ emit, field, modelValue, settings });
6969
70-
// console.group('VSFRadio');
71-
// console.log('field', field);
72-
// console.log('settings', settings);
73-
// console.groupEnd();
74-
75-
7670
const hasErrors = computed(() => {
7771
let err = field?.error;
7872
@@ -81,7 +75,7 @@ const hasErrors = computed(() => {
8175
return err;
8276
});
8377
84-
// Bound Settings //
78+
// -------------------------------------------------- Bound Settings //
8579
const bindSettings = reactive({
8680
...field,
8781
color: field.color || settings?.color,

‎src/plugin/components/fields/VSFSelect/VSFSelect.vue

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -32,13 +32,8 @@ const { field, settings } = defineProps<VSFSelectProps>();
3232
// Auto Paging //
3333
useAutoPage({ emit, field, modelValue, settings });
3434
35-
// console.group('VSFTextField');
36-
// console.log('field', field);
37-
// console.log('settings', settings);
38-
// console.groupEnd();
3935
40-
41-
// Bound Settings //
36+
// -------------------------------------------------- Bound Settings //
4237
const bindSettings = computed(() => ({
4338
...field,
4439
color: field.color || settings?.color,

‎src/plugin/components/fields/VSFSwitch/VSFSwitch.vue

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -30,13 +30,8 @@ const { field, settings } = defineProps<VSFSwitchProps>();
3030
// Auto Paging //
3131
useAutoPage({ emit, field, modelValue, settings });
3232
33-
// console.group('VSFSwitch');
34-
// console.log('field', field);
35-
// console.log('settings', settings);
36-
// console.groupEnd();
3733
38-
39-
// Bound Settings //
34+
// -------------------------------------------------- Bound Settings //
4035
const bindSettings = reactive({
4136
...field,
4237
color: field.color || settings?.color,

‎src/plugin/components/fields/VSFTextField/VSFTextField.vue

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -64,13 +64,7 @@ function checkForErrors(param = 'update') {
6464
}
6565
}
6666
67-
// console.group('VSFTextField');
68-
// console.log('field', field);
69-
// console.log('settings', settings);
70-
// console.groupEnd();
71-
72-
73-
// Bound Settings //
67+
// -------------------------------------------------- Bound Settings //
7468
const bindSettings = computed(() => ({
7569
...field,
7670
color: field.color || settings?.color,

‎src/plugin/components/fields/VSFTextarea/VSFTextarea.vue

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -31,13 +31,8 @@ const { field, settings } = defineProps<VSFTextareaProps>();
3131
// Auto Paging //
3232
useAutoPage({ emit, field, modelValue, settings });
3333
34-
// console.group('VSFTextarea');
35-
// console.log('field', field);
36-
// console.log('settings', settings);
37-
// console.groupEnd();
3834
39-
40-
// Bound Settings //
35+
// -------------------------------------------------- Bound Settings //
4136
const bindSettings = reactive({
4237
...field,
4338
color: field.color || settings?.color,

‎src/plugin/components/shared/PageContainer.vue

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,6 @@
5757
:field="field"
5858
:settings="settings"
5959
@next="nextPage"
60-
@update:modelValue="callback()"
6160
/>
6261

6362
<!-- ================================================== Select -->
@@ -100,7 +99,6 @@
10099
:field="field"
101100
:settings="settings"
102101
@next="nextPage"
103-
@update:modelValue="callback()"
104102
/>
105103

106104
<!-- ========================= Color Field -->
@@ -192,10 +190,6 @@ console.groupEnd();
192190
const modelValue = defineModel<any>();
193191
194192
195-
function callback() {
196-
console.log('callback');
197-
}
198-
199193
function nextPage(field: Field) {
200194
const fieldIndex = page.fields.findIndex((f) => f.name === field.name);
201195

0 commit comments

Comments
 (0)