Skip to content

Commit 74b8caa

Browse files
webdevnerdstuffwebdevnerdstuff
committed
[DEV] adding more fields
1 parent cfe501c commit 74b8caa

File tree

11 files changed

+361
-17
lines changed

11 files changed

+361
-17
lines changed

‎src/plugin/VStepperForm.vue

Lines changed: 47 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,22 @@
2626

2727
<v-container v-else>
2828

29+
<!-- ================================================== Checkbox -->
30+
<Fields.VSFCheckbox
31+
v-if="field.type === 'checkbox'"
32+
v-model="modelValue[field.name]"
33+
:field="field"
34+
:settings="settings"
35+
/>
36+
37+
<!-- ================================================== Radio & Fancy Radio -->
38+
<Fields.VSFRadio
39+
v-if="field.type === 'radio'"
40+
v-model="modelValue[field.name]"
41+
:field="field"
42+
:settings="settings"
43+
/>
44+
2945
<Fields.VSFFancyRadio
3046
v-if="field.type === 'fancyRadio'"
3147
v-model="modelValue[field.name]"
@@ -34,20 +50,37 @@
3450
@update:modelValue="callback()"
3551
/>
3652

37-
<Fields.VSFCheckbox
38-
v-if="field.type === 'checkbox'"
53+
<!-- ================================================== Select -->
54+
<Fields.VSFSelect
55+
v-if="field.type === 'select'"
3956
v-model="modelValue[field.name]"
4057
:field="field"
4158
:settings="settings"
4259
/>
4360

44-
<Fields.VSFRadio
45-
v-if="field.type === 'radio'"
61+
<Fields.VSFAutocomplete
62+
v-if="field.type === 'autocomplete'"
4663
v-model="modelValue[field.name]"
4764
:field="field"
4865
:settings="settings"
4966
/>
5067

68+
<Fields.VSFCombobox
69+
v-if="field.type === 'combobox'"
70+
v-model="modelValue[field.name]"
71+
:field="field"
72+
:settings="settings"
73+
/>
74+
75+
<!-- ================================================== Switch -->
76+
<Fields.VSFSwitch
77+
v-if="field.type === 'switch'"
78+
v-model="modelValue[field.name]"
79+
:field="field"
80+
:settings="settings"
81+
/>
82+
83+
<!-- ================================================== Text Field -->
5184
<Fields.VSFTextField
5285
v-if="field.type === 'text' || field.type === 'textField' || field.type === 'number'"
5386
v-model="modelValue[field.name]"
@@ -56,34 +89,32 @@
5689
@update:modelValue="callback()"
5790
/>
5891

92+
<!-- ========================= Color Field -->
93+
<Fields.VSFColorField
94+
v-if="field.type === 'color'"
95+
v-model="modelValue[field.name]"
96+
:field="field"
97+
:settings="settings"
98+
/>
99+
100+
<!-- ========================= File Input -->
59101
<Fields.VSFFileInput
60102
v-if="field.type === 'file'"
61103
v-model="modelValue[field.name]"
62104
:field="field"
63105
:settings="settings"
64106
/>
65107

108+
<!-- ================================================== Textarea -->
66109
<Fields.VSFTextarea
67110
v-if="field.type === 'textarea'"
68111
v-model="modelValue[field.name]"
69112
:field="field"
70113
:settings="settings"
71114
/>
72115

73-
<!-- TODO: Select Field -->
74-
<!-- TODO: Color Picker Field -->
75116
<!-- TODO: User Select Field -->
76-
<!-- TODO: Autocomplete Field -->
77117
<!-- TODO: Date Field -->
78-
<!-- TODO: Combobox Field (tbd) -->
79-
80-
<Fields.VSFSwitch
81-
v-if="field.type === 'switch'"
82-
v-model="modelValue[field.name]"
83-
:field="field"
84-
:settings="settings"
85-
/>
86-
87118
</v-container>
88119
</template>
89120
</div>

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

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<template>
2+
<v-autocomplete
3+
v-model="modelValue"
4+
v-bind="boundSettings"
5+
:items="(field.items as any)"
6+
:required="field.required"
7+
>
8+
<template #label>
9+
<FieldLabel
10+
:label="field.label"
11+
:required="field.required"
12+
/>
13+
</template>
14+
</v-autocomplete>
15+
</template>
16+
17+
18+
<script lang="ts" setup>
19+
import type {
20+
VSFAutocompleteProps,
21+
} from './index';
22+
import FieldLabel from '@/plugin/components/shared/FieldLabel.vue';
23+
import { useBindingSettings } from '@/plugin/composables/bindings';
24+
25+
26+
const modelValue = defineModel<any>();
27+
const { field, settings } = defineProps<VSFAutocompleteProps>();
28+
29+
// const { field, settings } = toRefs(props);
30+
31+
// console.group('VSFAutocomplete');
32+
// console.log('field', field);
33+
// console.log('settings', settings);
34+
// console.groupEnd();
35+
36+
37+
// Bound Settings //
38+
const bindSettings = computed(() => ({
39+
...field,
40+
color: field.color || settings?.color,
41+
density: field.density || settings?.density,
42+
}));
43+
44+
const boundSettings = computed(() => useBindingSettings(bindSettings.value));
45+
</script>
46+
47+
<style lang="scss" scoped></style>

‎src/plugin/components/fields/VSFAutocomplete/index.ts

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import type { VAutocomplete } from 'vuetify/components';
2+
import type {
3+
Field,
4+
SharedProps,
5+
} from '@/plugin/types';
6+
import type VSFAutocomplete from './VSFAutocomplete.vue';
7+
8+
9+
// TODO: Check for more props that are not part of the Field type
10+
interface InternalField extends Omit<Field,
11+
'inline' | 'inlineSpacing' | 'labelPositionLeft'
12+
> {
13+
density?: VAutocomplete['density'];
14+
closeText?: VAutocomplete['closeText'];
15+
closableChips?: VAutocomplete['closableChips'];
16+
items?: VAutocomplete['items'];
17+
variant?: VAutocomplete['variant'];
18+
}
19+
20+
export interface VSFAutocompleteProps extends SharedProps {
21+
field: InternalField;
22+
}
23+
24+
export type VSFSelect = InstanceType<typeof VSFAutocomplete>;
25+
26+
export default VSFAutocomplete;

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

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<template>
2+
<VColorField
3+
v-model="modelValue"
4+
v-bind="boundSettings"
5+
:required="field.required"
6+
>
7+
<template #label>
8+
<FieldLabel
9+
:label="field.label"
10+
:required="field.required"
11+
/>
12+
</template>
13+
</VColorField>
14+
</template>
15+
16+
17+
<script lang="ts" setup>
18+
import type {
19+
VSFColorFieldProps,
20+
} from './index';
21+
import FieldLabel from '@/plugin/components/shared/FieldLabel.vue';
22+
import { useBindingSettings } from '@/plugin/composables/bindings';
23+
import VColorField from '@wdns/vuetify-color-field';
24+
25+
26+
const modelValue = defineModel<any>();
27+
const { field, settings } = defineProps<VSFColorFieldProps>();
28+
29+
// console.group('VSFTextarea');
30+
// console.log('field', field);
31+
// console.log('settings', settings);
32+
// console.groupEnd();
33+
34+
35+
// Bound Settings //
36+
const bindSettings = reactive({
37+
...field,
38+
color: field.color || settings?.color,
39+
density: field.density || settings?.density,
40+
type: 'text',
41+
});
42+
43+
const boundSettings = computed(() => useBindingSettings(bindSettings));
44+
</script>
45+
46+
<style lang="scss" scoped></style>

‎src/plugin/components/fields/VSFColorField/index.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import type { VColorField } from '@wdns/vuetify-color-field';
2+
import type {
3+
Field,
4+
SharedProps,
5+
} from '@/plugin/types';
6+
import type VSFColorField from './VSFColorField.vue';
7+
8+
9+
// TODO: Check for more props that are not part of the Field type
10+
interface InternalField extends Omit<Field,
11+
'inline' | 'inlineSpacing' | 'labelPositionLeft'
12+
> {
13+
density?: typeof VColorField['density'];
14+
variant?: typeof VColorField['variant'];
15+
}
16+
17+
export interface VSFColorFieldProps extends SharedProps {
18+
field: InternalField;
19+
}
20+
21+
export type VSFColorField = InstanceType<typeof VSFColorField>;
22+
23+
export default VSFColorField;

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

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<template>
2+
<v-combobox
3+
v-model="modelValue"
4+
v-bind="boundSettings"
5+
:items="(field.items as any)"
6+
:required="field.required"
7+
>
8+
<template #label>
9+
<FieldLabel
10+
:label="field.label"
11+
:required="field.required"
12+
/>
13+
</template>
14+
</v-combobox>
15+
</template>
16+
17+
18+
<script lang="ts" setup>
19+
import type {
20+
VSFComboboxProps,
21+
} from './index';
22+
import FieldLabel from '@/plugin/components/shared/FieldLabel.vue';
23+
import { useBindingSettings } from '@/plugin/composables/bindings';
24+
25+
26+
const modelValue = defineModel<any>();
27+
const { field, settings } = defineProps<VSFComboboxProps>();
28+
29+
// const { field, settings } = toRefs(props);
30+
31+
// console.group('VSFTextField');
32+
// console.log('field', field);
33+
// console.log('settings', settings);
34+
// console.groupEnd();
35+
36+
37+
// Bound Settings //
38+
const bindSettings = computed(() => ({
39+
...field,
40+
color: field.color || settings?.color,
41+
density: field.density || settings?.density,
42+
}));
43+
44+
const boundSettings = computed(() => useBindingSettings(bindSettings.value));
45+
</script>
46+
47+
<style lang="scss" scoped></style>

‎src/plugin/components/fields/VSFCombobox/index.ts

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import type { VCombobox } from 'vuetify/components';
2+
import type {
3+
Field,
4+
SharedProps,
5+
} from '@/plugin/types';
6+
import type VSFCombobox from './VSFCombobox.vue';
7+
8+
9+
// TODO: Check for more props that are not part of the Field type
10+
interface InternalField extends Omit<Field,
11+
'inline' | 'inlineSpacing' | 'labelPositionLeft'
12+
> {
13+
density?: VCombobox['density'];
14+
closeText?: VCombobox['closeText'];
15+
closableChips?: VCombobox['closableChips'];
16+
items?: VCombobox['items'];
17+
variant?: VCombobox['variant'];
18+
}
19+
20+
export interface VSFComboboxProps extends SharedProps {
21+
field: InternalField;
22+
}
23+
24+
export type VSFSelect = InstanceType<typeof VSFCombobox>;
25+
26+
export default VSFCombobox;

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

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<template>
2+
<v-select
3+
v-model="modelValue"
4+
v-bind="boundSettings"
5+
:items="(field.items as any)"
6+
:required="field.required"
7+
>
8+
<template #label>
9+
<FieldLabel
10+
:label="field.label"
11+
:required="field.required"
12+
/>
13+
</template>
14+
</v-select>
15+
</template>
16+
17+
18+
<script lang="ts" setup>
19+
import type {
20+
VSFSelectProps,
21+
} from './index';
22+
import FieldLabel from '@/plugin/components/shared/FieldLabel.vue';
23+
import { useBindingSettings } from '@/plugin/composables/bindings';
24+
25+
26+
const modelValue = defineModel<any>();
27+
const { field, settings } = defineProps<VSFSelectProps>();
28+
29+
// const { field, settings } = toRefs(props);
30+
31+
// console.group('VSFTextField');
32+
// console.log('field', field);
33+
// console.log('settings', settings);
34+
// console.groupEnd();
35+
36+
37+
// Bound Settings //
38+
const bindSettings = computed(() => ({
39+
...field,
40+
color: field.color || settings?.color,
41+
density: field.density || settings?.density,
42+
}));
43+
44+
const boundSettings = computed(() => useBindingSettings(bindSettings.value));
45+
</script>
46+
47+
<style lang="scss" scoped></style>

0 commit comments

Comments
 (0)