@finema/core 1.4.110 → 1.4.112

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (58) hide show
  1. package/README.md +60 -60
  2. package/dist/module.json +1 -1
  3. package/dist/module.mjs +6 -1
  4. package/dist/runtime/components/Alert.vue +48 -48
  5. package/dist/runtime/components/Avatar.vue +27 -27
  6. package/dist/runtime/components/Badge.vue +11 -11
  7. package/dist/runtime/components/Breadcrumb.vue +44 -44
  8. package/dist/runtime/components/Button/Group.vue +37 -37
  9. package/dist/runtime/components/Button/index.vue +75 -75
  10. package/dist/runtime/components/Card.vue +38 -38
  11. package/dist/runtime/components/Core.vue +13 -13
  12. package/dist/runtime/components/Dialog/index.vue +108 -108
  13. package/dist/runtime/components/Dropdown/index.vue +70 -70
  14. package/dist/runtime/components/FlexDeck/Base.vue +90 -90
  15. package/dist/runtime/components/FlexDeck/index.vue +66 -66
  16. package/dist/runtime/components/Form/FieldWrapper.vue +23 -23
  17. package/dist/runtime/components/Form/Fields.vue +222 -222
  18. package/dist/runtime/components/Form/InputCheckbox/index.vue +21 -21
  19. package/dist/runtime/components/Form/InputDateTime/index.vue +60 -60
  20. package/dist/runtime/components/Form/InputDateTimeRange/index.vue +83 -83
  21. package/dist/runtime/components/Form/InputNumber/index.vue +27 -27
  22. package/dist/runtime/components/Form/InputRadio/index.vue +27 -27
  23. package/dist/runtime/components/Form/InputSelect/index.vue +36 -36
  24. package/dist/runtime/components/Form/InputStatic/index.vue +16 -16
  25. package/dist/runtime/components/Form/InputTags/index.vue +134 -134
  26. package/dist/runtime/components/Form/InputText/index.vue +67 -67
  27. package/dist/runtime/components/Form/InputTextarea/index.vue +25 -25
  28. package/dist/runtime/components/Form/InputToggle/index.vue +14 -14
  29. package/dist/runtime/components/Form/InputUploadDropzone/index.vue +206 -206
  30. package/dist/runtime/components/Form/InputUploadDropzoneAuto/index.vue +333 -333
  31. package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/Item.vue +260 -260
  32. package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/index.vue +140 -140
  33. package/dist/runtime/components/Form/InputUploadDropzoneImageAutoMultiple/index.vue +148 -148
  34. package/dist/runtime/components/Form/InputUploadDropzoneImageAutoMultiple/item.vue +179 -179
  35. package/dist/runtime/components/Form/InputUploadFileClassic/index.vue +95 -95
  36. package/dist/runtime/components/Form/InputUploadFileClassicAuto/index.vue +143 -143
  37. package/dist/runtime/components/Form/InputUploadImageAuto/index.vue +222 -222
  38. package/dist/runtime/components/Form/InputWYSIWYG/index.vue +55 -40
  39. package/dist/runtime/components/Form/index.vue +6 -6
  40. package/dist/runtime/components/Icon.vue +23 -23
  41. package/dist/runtime/components/Image.vue +36 -36
  42. package/dist/runtime/components/Loader.vue +27 -27
  43. package/dist/runtime/components/Modal/index.vue +146 -146
  44. package/dist/runtime/components/QRCode.vue +22 -22
  45. package/dist/runtime/components/SimplePagination.vue +96 -96
  46. package/dist/runtime/components/Slideover/index.vue +110 -110
  47. package/dist/runtime/components/Table/Base.vue +139 -139
  48. package/dist/runtime/components/Table/ColumnDate.vue +16 -16
  49. package/dist/runtime/components/Table/ColumnDateTime.vue +18 -18
  50. package/dist/runtime/components/Table/ColumnImage.vue +15 -15
  51. package/dist/runtime/components/Table/ColumnNumber.vue +14 -14
  52. package/dist/runtime/components/Table/ColumnText.vue +25 -25
  53. package/dist/runtime/components/Table/Simple.vue +69 -69
  54. package/dist/runtime/components/Table/index.vue +65 -65
  55. package/dist/runtime/components/Tabs/index.vue +64 -64
  56. package/dist/runtime/quill.plugin.d.ts +2 -0
  57. package/dist/runtime/quill.plugin.mjs +5 -0
  58. package/package.json +92 -92
@@ -1,66 +1,66 @@
1
- <template>
2
- <div>
3
- <div v-if="options.isEnabledSearch" class="mb-4 flex justify-end">
4
- <UInput
5
- v-model="q"
6
- icon="i-heroicons-magnifying-glass"
7
- :placeholder="options.searchPlaceholder || 'ค้นหา...'"
8
- />
9
- </div>
10
- <Base
11
- :raw-data="options.rawData"
12
- :status="options.status"
13
- :page-options="options.pageOptions"
14
- :is-simple-pagination="isShowSimplePagination"
15
- :is-hide-bottom-pagination="options.isHideBottomPagination"
16
- :container-class="containerClass"
17
- @page-change="onPageChange"
18
- >
19
- <template v-for="(_, slot) of $slots" #[slot]="slotProps">
20
- <slot :name="slot" v-bind="slotProps || {}" />
21
- </template>
22
- </Base>
23
- </div>
24
- </template>
25
- <script lang="ts" setup>
26
- import { type PropType } from 'vue'
27
- import { _debounce, computed, ref, watch } from '#imports'
28
- import { useCoreConfig } from '#core/composables/useConfig'
29
- import Base from '#core/components/FlexDeck/Base.vue'
30
- import type { IFlexDeckOptions } from '#core/components/FlexDeck/types'
31
-
32
- defineSlots<{
33
- default: (props: { row: any }) => any
34
- 'empty-state': () => any
35
- 'loading-state': () => any
36
- }>()
37
-
38
- const emits = defineEmits<{
39
- (event: 'pageChange', page: number): void
40
- (event: 'search', q: string): void
41
- }>()
42
-
43
- const props = defineProps({
44
- options: { type: Object as PropType<IFlexDeckOptions>, required: true },
45
- containerClass: { type: [String, Array, Object], default: '' },
46
- })
47
-
48
- const coreConfig = useCoreConfig()
49
-
50
- const q = ref(props.options?.pageOptions.search ?? '')
51
-
52
- const isShowSimplePagination = computed(
53
- (): boolean => props.options.isSimplePagination ?? coreConfig.is_simple_pagination
54
- )
55
-
56
- watch(
57
- q,
58
- _debounce((value) => {
59
- emits('search', value)
60
- }, 500)
61
- )
62
-
63
- const onPageChange = (page: number) => {
64
- emits('pageChange', page)
65
- }
66
- </script>
1
+ <template>
2
+ <div>
3
+ <div v-if="options.isEnabledSearch" class="mb-4 flex justify-end">
4
+ <UInput
5
+ v-model="q"
6
+ icon="i-heroicons-magnifying-glass"
7
+ :placeholder="options.searchPlaceholder || 'ค้นหา...'"
8
+ />
9
+ </div>
10
+ <Base
11
+ :raw-data="options.rawData"
12
+ :status="options.status"
13
+ :page-options="options.pageOptions"
14
+ :is-simple-pagination="isShowSimplePagination"
15
+ :is-hide-bottom-pagination="options.isHideBottomPagination"
16
+ :container-class="containerClass"
17
+ @page-change="onPageChange"
18
+ >
19
+ <template v-for="(_, slot) of $slots" #[slot]="slotProps">
20
+ <slot :name="slot" v-bind="slotProps || {}" />
21
+ </template>
22
+ </Base>
23
+ </div>
24
+ </template>
25
+ <script lang="ts" setup>
26
+ import { type PropType } from 'vue'
27
+ import { _debounce, computed, ref, watch } from '#imports'
28
+ import { useCoreConfig } from '#core/composables/useConfig'
29
+ import Base from '#core/components/FlexDeck/Base.vue'
30
+ import type { IFlexDeckOptions } from '#core/components/FlexDeck/types'
31
+
32
+ defineSlots<{
33
+ default: (props: { row: any }) => any
34
+ 'empty-state': () => any
35
+ 'loading-state': () => any
36
+ }>()
37
+
38
+ const emits = defineEmits<{
39
+ (event: 'pageChange', page: number): void
40
+ (event: 'search', q: string): void
41
+ }>()
42
+
43
+ const props = defineProps({
44
+ options: { type: Object as PropType<IFlexDeckOptions>, required: true },
45
+ containerClass: { type: [String, Array, Object], default: '' },
46
+ })
47
+
48
+ const coreConfig = useCoreConfig()
49
+
50
+ const q = ref(props.options?.pageOptions.search ?? '')
51
+
52
+ const isShowSimplePagination = computed(
53
+ (): boolean => props.options.isSimplePagination ?? coreConfig.is_simple_pagination
54
+ )
55
+
56
+ watch(
57
+ q,
58
+ _debounce((value) => {
59
+ emits('search', value)
60
+ }, 500)
61
+ )
62
+
63
+ const onPageChange = (page: number) => {
64
+ emits('pageChange', page)
65
+ }
66
+ </script>
@@ -1,23 +1,23 @@
1
- <template>
2
- <UFormGroup
3
- :label="label"
4
- :name="name"
5
- :description="description"
6
- :hint="hint"
7
- :size="size as FormGroupSize"
8
- :data-testid="name"
9
- :help="help"
10
- :error="errorMessage"
11
- :required="!!isRequired"
12
- :ui="containerUi"
13
- >
14
- <slot />
15
- </UFormGroup>
16
- </template>
17
-
18
- <script lang="ts" setup>
19
- import { type IFieldProps } from '#core/components/Form/types'
20
- import type { FormGroupSize } from '#ui/types'
21
-
22
- defineProps<IFieldProps>()
23
- </script>
1
+ <template>
2
+ <UFormGroup
3
+ :label="label"
4
+ :name="name"
5
+ :description="description"
6
+ :hint="hint"
7
+ :size="size as FormGroupSize"
8
+ :data-testid="name"
9
+ :help="help"
10
+ :error="errorMessage"
11
+ :required="!!isRequired"
12
+ :ui="containerUi"
13
+ >
14
+ <slot />
15
+ </UFormGroup>
16
+ </template>
17
+
18
+ <script lang="ts" setup>
19
+ import { type IFieldProps } from '#core/components/Form/types'
20
+ import type { FormGroupSize } from '#ui/types'
21
+
22
+ defineProps<IFieldProps>()
23
+ </script>
@@ -1,222 +1,222 @@
1
- <template>
2
- <div :class="['fields', $props.class]">
3
- <template
4
- v-for="(option, index) in options.filter((item) => !item.isHide)"
5
- :key="option.props.name + index + option.type"
6
- >
7
- <FormInputStatic
8
- v-if="option.type === INPUT_TYPES.STATIC"
9
- :class="option.class"
10
- :form="form"
11
- v-bind="getFieldBinding(option)"
12
- v-on="option.on ?? {}"
13
- />
14
- <FormInputText
15
- v-else-if="option.type === INPUT_TYPES.TEXT"
16
- :class="option.class"
17
- :form="form"
18
- v-bind="getFieldBinding(option)"
19
- v-on="option.on ?? {}"
20
- />
21
- <FormInputNumber
22
- v-else-if="option.type === INPUT_TYPES.NUMBER"
23
- :class="option.class"
24
- :form="form"
25
- v-bind="getFieldBinding(option)"
26
- v-on="option.on ?? {}"
27
- />
28
- <FormInputText
29
- v-else-if="option.type === INPUT_TYPES.PASSWORD"
30
- :class="option.class"
31
- type="password"
32
- :form="form"
33
- v-bind="getFieldBinding(option)"
34
- v-on="option.on ?? {}"
35
- />
36
- <FormInputText
37
- v-else-if="option.type === INPUT_TYPES.EMAIL"
38
- :class="option.class"
39
- type="email"
40
- :form="form"
41
- v-bind="getFieldBinding(option)"
42
- v-on="option.on ?? {}"
43
- />
44
- <FormInputTextarea
45
- v-else-if="option.type === INPUT_TYPES.TEXTAREA"
46
- :class="option.class"
47
- :form="form"
48
- v-bind="getFieldBinding(option)"
49
- v-on="option.on ?? {}"
50
- />
51
- <FormInputToggle
52
- v-else-if="option.type === INPUT_TYPES.TOGGLE"
53
- :class="option.class"
54
- :form="form"
55
- v-bind="getFieldBinding(option)"
56
- v-on="option.on ?? {}"
57
- />
58
- <FormInputSelect
59
- v-else-if="option.type === INPUT_TYPES.SELECT"
60
- :class="option.class"
61
- :form="form"
62
- :options="option.props.options"
63
- v-bind="getFieldBinding(option)"
64
- v-on="option.on ?? {}"
65
- />
66
- <FormInputRadio
67
- v-else-if="option.type === INPUT_TYPES.RADIO"
68
- :class="option.class"
69
- :form="form"
70
- :options="option.props.options"
71
- v-bind="getFieldBinding(option)"
72
- v-on="option.on ?? {}"
73
- />
74
- <FormInputCheckbox
75
- v-else-if="option.type === INPUT_TYPES.CHECKBOX"
76
- :class="option.class"
77
- :form="form"
78
- v-bind="getFieldBinding(option)"
79
- v-on="option.on ?? {}"
80
- />
81
- <FormInputDateTime
82
- v-else-if="option.type === INPUT_TYPES.DATE_TIME"
83
- :class="option.class"
84
- :form="form"
85
- v-bind="getFieldBinding(option)"
86
- v-on="option.on ?? {}"
87
- />
88
- <FormInputDateTime
89
- v-else-if="option.type === INPUT_TYPES.DATE"
90
- :class="option.class"
91
- :form="form"
92
- v-bind="getFieldBinding(option)"
93
- :disabled-time="true"
94
- v-on="option.on ?? {}"
95
- />
96
- <FormInputDateTimeRange
97
- v-else-if="option.type === INPUT_TYPES.DATE_TIME_RANGE"
98
- :class="option.class"
99
- :form="form"
100
- v-bind="getFieldBinding(option)"
101
- v-on="option.on ?? {}"
102
- />
103
- <FormInputDateTimeRange
104
- v-else-if="option.type === INPUT_TYPES.DATE_RANGE"
105
- :class="option.class"
106
- :form="form"
107
- :disabled-time="true"
108
- v-bind="getFieldBinding(option)"
109
- v-on="option.on ?? {}"
110
- />
111
- <FormInputUploadFileClassic
112
- v-else-if="option.type === INPUT_TYPES.UPLOAD_FILE_CLASSIC"
113
- :class="option.class"
114
- :form="form"
115
- v-bind="getFieldBinding(option)"
116
- v-on="option.on ?? {}"
117
- />
118
- <FormInputUploadFileClassicAuto
119
- v-else-if="option.type === INPUT_TYPES.UPLOAD_FILE_CLASSIC_AUTO"
120
- :class="option.class"
121
- :form="form"
122
- :request-options="option.props.requestOptions"
123
- v-bind="getFieldBinding(option)"
124
- v-on="option.on ?? {}"
125
- />
126
- <FormInputUploadImageAuto
127
- v-else-if="option.type === INPUT_TYPES.UPLOAD_IMAGE_AUTO"
128
- :class="option.class"
129
- :form="form"
130
- :request-options="option.props.requestOptions"
131
- v-bind="getFieldBinding(option)"
132
- v-on="option.on ?? {}"
133
- />
134
- <FormInputUploadDropzone
135
- v-else-if="option.type === INPUT_TYPES.UPLOAD_DROPZONE"
136
- :class="option.class"
137
- :form="form"
138
- v-bind="getFieldBinding(option)"
139
- v-on="option.on ?? {}"
140
- />
141
- <FormInputUploadDropzoneAuto
142
- v-else-if="option.type === INPUT_TYPES.UPLOAD_DROPZONE_AUTO"
143
- :class="option.class"
144
- :form="form"
145
- :request-options="option.props.requestOptions"
146
- v-bind="getFieldBinding(option)"
147
- v-on="option.on ?? {}"
148
- />
149
- <FormInputUploadDropzoneAutoMultiple
150
- v-else-if="option.type === INPUT_TYPES.UPLOAD_DROPZONE_AUTO_MULTIPLE"
151
- :class="option.class"
152
- :form="form"
153
- :request-options="option.props.requestOptions"
154
- v-bind="getFieldBinding(option)"
155
- v-on="option.on ?? {}"
156
- />
157
- <FormInputUploadDropzoneImageAutoMultiple
158
- v-else-if="option.type === INPUT_TYPES.UPLOAD_DROPZONE_IMAGE_AUTO_MULTIPLE"
159
- :class="option.class"
160
- :form="form"
161
- :request-options="option.props.requestOptions"
162
- v-bind="getFieldBinding(option)"
163
- v-on="option.on ?? {}"
164
- />
165
- <FormInputWYSIWYG
166
- v-else-if="option.type === INPUT_TYPES.WYSIWYG"
167
- :class="option.class"
168
- :form="form"
169
- v-bind="getFieldBinding(option)"
170
- v-on="option.on ?? {}"
171
- />
172
- <FormInputTags
173
- v-else-if="option.type === INPUT_TYPES.TAGS"
174
- :class="option.class"
175
- :form="form"
176
- v-bind="getFieldBinding(option)"
177
- v-on="option.on ?? {}"
178
- />
179
- <component
180
- :is="option.component"
181
- v-else-if="option.type === INPUT_TYPES.COMPONENT"
182
- :class="option.class"
183
- :form="form"
184
- v-bind="getFieldBinding(option)"
185
- v-on="option.on ?? {}"
186
- />
187
- </template>
188
- </div>
189
- </template>
190
- <script lang="ts" setup>
191
- import { type FormContext } from 'vee-validate'
192
- import { type IFormField, INPUT_TYPES } from '#core/components/Form/types'
193
-
194
- const props = withDefaults(
195
- defineProps<{
196
- form?: FormContext
197
- options: IFormField[]
198
- orientation?: 'horizontal' | 'vertical'
199
- class?: any
200
- }>(),
201
- {
202
- class: 'space-y-4',
203
- orientation: 'vertical',
204
- }
205
- )
206
-
207
- const getFieldBinding = (field: IFormField) => {
208
- if (props.orientation === 'horizontal') {
209
- return {
210
- ...field.props,
211
- containerUi: {
212
- ...field.props.containerUi,
213
- wrapper:
214
- 'lg:grid lg:grid-cols-3 lg:gap-4 lg:items-start ' + field.props.containerUi?.wrapper,
215
- container: 'lg:col-span-2 ' + field.props.containerUi?.container,
216
- },
217
- }
218
- }
219
-
220
- return field.props
221
- }
222
- </script>
1
+ <template>
2
+ <div :class="['fields', $props.class]">
3
+ <template
4
+ v-for="(option, index) in options.filter((item) => !item.isHide)"
5
+ :key="option.props.name + index + option.type"
6
+ >
7
+ <FormInputStatic
8
+ v-if="option.type === INPUT_TYPES.STATIC"
9
+ :class="option.class"
10
+ :form="form"
11
+ v-bind="getFieldBinding(option)"
12
+ v-on="option.on ?? {}"
13
+ />
14
+ <FormInputText
15
+ v-else-if="option.type === INPUT_TYPES.TEXT"
16
+ :class="option.class"
17
+ :form="form"
18
+ v-bind="getFieldBinding(option)"
19
+ v-on="option.on ?? {}"
20
+ />
21
+ <FormInputNumber
22
+ v-else-if="option.type === INPUT_TYPES.NUMBER"
23
+ :class="option.class"
24
+ :form="form"
25
+ v-bind="getFieldBinding(option)"
26
+ v-on="option.on ?? {}"
27
+ />
28
+ <FormInputText
29
+ v-else-if="option.type === INPUT_TYPES.PASSWORD"
30
+ :class="option.class"
31
+ type="password"
32
+ :form="form"
33
+ v-bind="getFieldBinding(option)"
34
+ v-on="option.on ?? {}"
35
+ />
36
+ <FormInputText
37
+ v-else-if="option.type === INPUT_TYPES.EMAIL"
38
+ :class="option.class"
39
+ type="email"
40
+ :form="form"
41
+ v-bind="getFieldBinding(option)"
42
+ v-on="option.on ?? {}"
43
+ />
44
+ <FormInputTextarea
45
+ v-else-if="option.type === INPUT_TYPES.TEXTAREA"
46
+ :class="option.class"
47
+ :form="form"
48
+ v-bind="getFieldBinding(option)"
49
+ v-on="option.on ?? {}"
50
+ />
51
+ <FormInputToggle
52
+ v-else-if="option.type === INPUT_TYPES.TOGGLE"
53
+ :class="option.class"
54
+ :form="form"
55
+ v-bind="getFieldBinding(option)"
56
+ v-on="option.on ?? {}"
57
+ />
58
+ <FormInputSelect
59
+ v-else-if="option.type === INPUT_TYPES.SELECT"
60
+ :class="option.class"
61
+ :form="form"
62
+ :options="option.props.options"
63
+ v-bind="getFieldBinding(option)"
64
+ v-on="option.on ?? {}"
65
+ />
66
+ <FormInputRadio
67
+ v-else-if="option.type === INPUT_TYPES.RADIO"
68
+ :class="option.class"
69
+ :form="form"
70
+ :options="option.props.options"
71
+ v-bind="getFieldBinding(option)"
72
+ v-on="option.on ?? {}"
73
+ />
74
+ <FormInputCheckbox
75
+ v-else-if="option.type === INPUT_TYPES.CHECKBOX"
76
+ :class="option.class"
77
+ :form="form"
78
+ v-bind="getFieldBinding(option)"
79
+ v-on="option.on ?? {}"
80
+ />
81
+ <FormInputDateTime
82
+ v-else-if="option.type === INPUT_TYPES.DATE_TIME"
83
+ :class="option.class"
84
+ :form="form"
85
+ v-bind="getFieldBinding(option)"
86
+ v-on="option.on ?? {}"
87
+ />
88
+ <FormInputDateTime
89
+ v-else-if="option.type === INPUT_TYPES.DATE"
90
+ :class="option.class"
91
+ :form="form"
92
+ v-bind="getFieldBinding(option)"
93
+ :disabled-time="true"
94
+ v-on="option.on ?? {}"
95
+ />
96
+ <FormInputDateTimeRange
97
+ v-else-if="option.type === INPUT_TYPES.DATE_TIME_RANGE"
98
+ :class="option.class"
99
+ :form="form"
100
+ v-bind="getFieldBinding(option)"
101
+ v-on="option.on ?? {}"
102
+ />
103
+ <FormInputDateTimeRange
104
+ v-else-if="option.type === INPUT_TYPES.DATE_RANGE"
105
+ :class="option.class"
106
+ :form="form"
107
+ :disabled-time="true"
108
+ v-bind="getFieldBinding(option)"
109
+ v-on="option.on ?? {}"
110
+ />
111
+ <FormInputUploadFileClassic
112
+ v-else-if="option.type === INPUT_TYPES.UPLOAD_FILE_CLASSIC"
113
+ :class="option.class"
114
+ :form="form"
115
+ v-bind="getFieldBinding(option)"
116
+ v-on="option.on ?? {}"
117
+ />
118
+ <FormInputUploadFileClassicAuto
119
+ v-else-if="option.type === INPUT_TYPES.UPLOAD_FILE_CLASSIC_AUTO"
120
+ :class="option.class"
121
+ :form="form"
122
+ :request-options="option.props.requestOptions"
123
+ v-bind="getFieldBinding(option)"
124
+ v-on="option.on ?? {}"
125
+ />
126
+ <FormInputUploadImageAuto
127
+ v-else-if="option.type === INPUT_TYPES.UPLOAD_IMAGE_AUTO"
128
+ :class="option.class"
129
+ :form="form"
130
+ :request-options="option.props.requestOptions"
131
+ v-bind="getFieldBinding(option)"
132
+ v-on="option.on ?? {}"
133
+ />
134
+ <FormInputUploadDropzone
135
+ v-else-if="option.type === INPUT_TYPES.UPLOAD_DROPZONE"
136
+ :class="option.class"
137
+ :form="form"
138
+ v-bind="getFieldBinding(option)"
139
+ v-on="option.on ?? {}"
140
+ />
141
+ <FormInputUploadDropzoneAuto
142
+ v-else-if="option.type === INPUT_TYPES.UPLOAD_DROPZONE_AUTO"
143
+ :class="option.class"
144
+ :form="form"
145
+ :request-options="option.props.requestOptions"
146
+ v-bind="getFieldBinding(option)"
147
+ v-on="option.on ?? {}"
148
+ />
149
+ <FormInputUploadDropzoneAutoMultiple
150
+ v-else-if="option.type === INPUT_TYPES.UPLOAD_DROPZONE_AUTO_MULTIPLE"
151
+ :class="option.class"
152
+ :form="form"
153
+ :request-options="option.props.requestOptions"
154
+ v-bind="getFieldBinding(option)"
155
+ v-on="option.on ?? {}"
156
+ />
157
+ <FormInputUploadDropzoneImageAutoMultiple
158
+ v-else-if="option.type === INPUT_TYPES.UPLOAD_DROPZONE_IMAGE_AUTO_MULTIPLE"
159
+ :class="option.class"
160
+ :form="form"
161
+ :request-options="option.props.requestOptions"
162
+ v-bind="getFieldBinding(option)"
163
+ v-on="option.on ?? {}"
164
+ />
165
+ <FormInputWYSIWYG
166
+ v-else-if="option.type === INPUT_TYPES.WYSIWYG"
167
+ :class="option.class"
168
+ :form="form"
169
+ v-bind="getFieldBinding(option)"
170
+ v-on="option.on ?? {}"
171
+ />
172
+ <FormInputTags
173
+ v-else-if="option.type === INPUT_TYPES.TAGS"
174
+ :class="option.class"
175
+ :form="form"
176
+ v-bind="getFieldBinding(option)"
177
+ v-on="option.on ?? {}"
178
+ />
179
+ <component
180
+ :is="option.component"
181
+ v-else-if="option.type === INPUT_TYPES.COMPONENT"
182
+ :class="option.class"
183
+ :form="form"
184
+ v-bind="getFieldBinding(option)"
185
+ v-on="option.on ?? {}"
186
+ />
187
+ </template>
188
+ </div>
189
+ </template>
190
+ <script lang="ts" setup>
191
+ import { type FormContext } from 'vee-validate'
192
+ import { type IFormField, INPUT_TYPES } from '#core/components/Form/types'
193
+
194
+ const props = withDefaults(
195
+ defineProps<{
196
+ form?: FormContext
197
+ options: IFormField[]
198
+ orientation?: 'horizontal' | 'vertical'
199
+ class?: any
200
+ }>(),
201
+ {
202
+ class: 'space-y-4',
203
+ orientation: 'vertical',
204
+ }
205
+ )
206
+
207
+ const getFieldBinding = (field: IFormField) => {
208
+ if (props.orientation === 'horizontal') {
209
+ return {
210
+ ...field.props,
211
+ containerUi: {
212
+ ...field.props.containerUi,
213
+ wrapper:
214
+ 'lg:grid lg:grid-cols-3 lg:gap-4 lg:items-start ' + field.props.containerUi?.wrapper,
215
+ container: 'lg:col-span-2 ' + field.props.containerUi?.container,
216
+ },
217
+ }
218
+ }
219
+
220
+ return field.props
221
+ }
222
+ </script>
@@ -1,21 +1,21 @@
1
- <template>
2
- <FieldWrapper v-bind="wrapperProps" label="">
3
- <UCheckbox
4
- v-model="value"
5
- :disabled="wrapperProps.isDisabled"
6
- :name="name"
7
- :label="props.label"
8
- :required="isRequired"
9
- :ui="ui"
10
- />
11
- </FieldWrapper>
12
- </template>
13
- <script lang="ts" setup>
14
- import { useFieldHOC } from '#core/composables/useForm'
15
- import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
16
- import { type ICheckboxFieldProps } from '#core/components/Form/InputCheckbox/types'
17
-
18
- const props = withDefaults(defineProps<ICheckboxFieldProps>(), {})
19
-
20
- const { value, wrapperProps } = useFieldHOC<boolean>(props)
21
- </script>
1
+ <template>
2
+ <FieldWrapper v-bind="wrapperProps" label="">
3
+ <UCheckbox
4
+ v-model="value"
5
+ :disabled="wrapperProps.isDisabled"
6
+ :name="name"
7
+ :label="props.label"
8
+ :required="isRequired"
9
+ :ui="ui"
10
+ />
11
+ </FieldWrapper>
12
+ </template>
13
+ <script lang="ts" setup>
14
+ import { useFieldHOC } from '#core/composables/useForm'
15
+ import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
16
+ import { type ICheckboxFieldProps } from '#core/components/Form/InputCheckbox/types'
17
+
18
+ const props = withDefaults(defineProps<ICheckboxFieldProps>(), {})
19
+
20
+ const { value, wrapperProps } = useFieldHOC<boolean>(props)
21
+ </script>