@finema/core 1.4.85 → 1.4.87

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 (48) hide show
  1. package/README.md +63 -63
  2. package/dist/module.json +1 -1
  3. package/dist/module.mjs +1 -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 +53 -53
  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 +76 -76
  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 +77 -77
  15. package/dist/runtime/components/FlexDeck/index.vue +59 -59
  16. package/dist/runtime/components/Form/FieldWrapper.vue +23 -23
  17. package/dist/runtime/components/Form/Fields.vue +160 -160
  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/InputNumber/index.vue +27 -27
  21. package/dist/runtime/components/Form/InputRadio/index.vue +27 -27
  22. package/dist/runtime/components/Form/InputSelect/index.vue +36 -36
  23. package/dist/runtime/components/Form/InputStatic/index.vue +16 -16
  24. package/dist/runtime/components/Form/InputText/index.vue +67 -67
  25. package/dist/runtime/components/Form/InputTextarea/index.vue +25 -25
  26. package/dist/runtime/components/Form/InputToggle/index.vue +14 -14
  27. package/dist/runtime/components/Form/InputUploadDropzone/index.vue +158 -158
  28. package/dist/runtime/components/Form/InputUploadDropzoneAuto/index.vue +243 -243
  29. package/dist/runtime/components/Form/InputUploadFileClassic/index.vue +101 -101
  30. package/dist/runtime/components/Form/InputUploadFileClassicAuto/index.vue +174 -174
  31. package/dist/runtime/components/Form/index.vue +6 -6
  32. package/dist/runtime/components/Icon.vue +23 -23
  33. package/dist/runtime/components/Image.vue +36 -36
  34. package/dist/runtime/components/Loader.vue +27 -14
  35. package/dist/runtime/components/Modal/index.vue +146 -146
  36. package/dist/runtime/components/SimplePagination.vue +96 -96
  37. package/dist/runtime/components/Slideover/index.vue +110 -110
  38. package/dist/runtime/components/Table/Base.vue +139 -139
  39. package/dist/runtime/components/Table/ColumnDate.vue +16 -16
  40. package/dist/runtime/components/Table/ColumnDateTime.vue +18 -18
  41. package/dist/runtime/components/Table/ColumnImage.vue +15 -15
  42. package/dist/runtime/components/Table/ColumnNumber.vue +14 -14
  43. package/dist/runtime/components/Table/ColumnText.vue +25 -25
  44. package/dist/runtime/components/Table/Simple.vue +64 -64
  45. package/dist/runtime/components/Table/index.vue +60 -60
  46. package/dist/runtime/components/Tabs/index.vue +64 -64
  47. package/dist/runtime/ui.css +32 -32
  48. package/package.json +84 -84
@@ -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>
@@ -1,60 +1,60 @@
1
- <template>
2
- <FieldWrapper v-bind="wrapperProps">
3
- <Datepicker
4
- :model-value="value"
5
- :disabled="wrapperProps.isDisabled"
6
- cancel-text="ยกเลิก"
7
- select-text="เลือก"
8
- locale="th"
9
- :enable-time-picker="!disabledTime"
10
- :placeholder="wrapperProps.placeholder"
11
- :format="format"
12
- :min-date="minDate"
13
- :max-date="maxDate"
14
- :min-time="minTime"
15
- :max-time="maxTime"
16
- :start-time="startTime"
17
- :required="isRequired"
18
- time-picker-inline
19
- @update:model-value="onInput"
20
- >
21
- <template #dp-input="{ value: innerValue }">
22
- <UInput
23
- :trailing-icon="innerValue ? undefined : 'i-heroicons-calendar-days'"
24
- type="text"
25
- :value="innerValue"
26
- :placeholder="wrapperProps.placeholder"
27
- :readonly="true"
28
- input-class="cursor-pointer select-none"
29
- />
30
- </template>
31
- </Datepicker>
32
- </FieldWrapper>
33
- </template>
34
- <script lang="ts" setup>
35
- import Datepicker from '@vuepic/vue-datepicker'
36
- import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
37
- import { type IDateTimeFieldProps } from '#core/components/Form/InputDateTime/date_time_field.types'
38
- import { TimeHelper, useFieldHOC } from '#imports'
39
- import '@vuepic/vue-datepicker/dist/main.css'
40
-
41
- const props = withDefaults(defineProps<IDateTimeFieldProps>(), {})
42
-
43
- const { value, wrapperProps } = useFieldHOC<string>(props)
44
-
45
- const format = (date: Date) => {
46
- if (props.disabledTime) {
47
- return TimeHelper.displayDate(date)
48
- }
49
-
50
- return TimeHelper.displayDateTime(date)
51
- }
52
-
53
- const onInput = (_value: any) => {
54
- if (props.disabledTime && !props.isReturnISO) {
55
- value.value = TimeHelper.getDateFormTime(_value)
56
- } else {
57
- value.value = _value
58
- }
59
- }
60
- </script>
1
+ <template>
2
+ <FieldWrapper v-bind="wrapperProps">
3
+ <Datepicker
4
+ :model-value="value"
5
+ :disabled="wrapperProps.isDisabled"
6
+ cancel-text="ยกเลิก"
7
+ select-text="เลือก"
8
+ locale="th"
9
+ :enable-time-picker="!disabledTime"
10
+ :placeholder="wrapperProps.placeholder"
11
+ :format="format"
12
+ :min-date="minDate"
13
+ :max-date="maxDate"
14
+ :min-time="minTime"
15
+ :max-time="maxTime"
16
+ :start-time="startTime"
17
+ :required="isRequired"
18
+ time-picker-inline
19
+ @update:model-value="onInput"
20
+ >
21
+ <template #dp-input="{ value: innerValue }">
22
+ <UInput
23
+ :trailing-icon="innerValue ? undefined : 'i-heroicons-calendar-days'"
24
+ type="text"
25
+ :value="innerValue"
26
+ :placeholder="wrapperProps.placeholder"
27
+ :readonly="true"
28
+ input-class="cursor-pointer select-none"
29
+ />
30
+ </template>
31
+ </Datepicker>
32
+ </FieldWrapper>
33
+ </template>
34
+ <script lang="ts" setup>
35
+ import Datepicker from '@vuepic/vue-datepicker'
36
+ import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
37
+ import { type IDateTimeFieldProps } from '#core/components/Form/InputDateTime/date_time_field.types'
38
+ import { TimeHelper, useFieldHOC } from '#imports'
39
+ import '@vuepic/vue-datepicker/dist/main.css'
40
+
41
+ const props = withDefaults(defineProps<IDateTimeFieldProps>(), {})
42
+
43
+ const { value, wrapperProps } = useFieldHOC<string>(props)
44
+
45
+ const format = (date: Date) => {
46
+ if (props.disabledTime) {
47
+ return TimeHelper.displayDate(date)
48
+ }
49
+
50
+ return TimeHelper.displayDateTime(date)
51
+ }
52
+
53
+ const onInput = (_value: any) => {
54
+ if (props.disabledTime && !props.isReturnISO) {
55
+ value.value = TimeHelper.getDateFormTime(_value)
56
+ } else {
57
+ value.value = _value
58
+ }
59
+ }
60
+ </script>
@@ -1,27 +1,27 @@
1
- <template>
2
- <FieldWrapper v-bind="wrapperProps">
3
- <UInput
4
- v-model.number="value"
5
- type="number"
6
- :disabled="wrapperProps.isDisabled"
7
- :leading-icon="leadingIcon"
8
- :trailing-icon="trailingIcon"
9
- :name="name"
10
- :placeholder="wrapperProps.placeholder"
11
- :autofocus="!!autoFocus"
12
- :icon="icon"
13
- :readonly="isReadonly"
14
- :ui="_deepMerge({}, ui, { icon: { trailing: { pointer: '' } } })"
15
- />
16
- </FieldWrapper>
17
- </template>
18
- <script lang="ts" setup>
19
- import { _deepMerge } from '#imports'
20
- import { useFieldHOC } from '#core/composables/useForm'
21
- import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
22
- import type { INumberFieldProps } from '#core/components/Form/InputNumber/types'
23
-
24
- const props = withDefaults(defineProps<INumberFieldProps>(), {})
25
-
26
- const { value, wrapperProps } = useFieldHOC<number>(props)
27
- </script>
1
+ <template>
2
+ <FieldWrapper v-bind="wrapperProps">
3
+ <UInput
4
+ v-model.number="value"
5
+ type="number"
6
+ :disabled="wrapperProps.isDisabled"
7
+ :leading-icon="leadingIcon"
8
+ :trailing-icon="trailingIcon"
9
+ :name="name"
10
+ :placeholder="wrapperProps.placeholder"
11
+ :autofocus="!!autoFocus"
12
+ :icon="icon"
13
+ :readonly="isReadonly"
14
+ :ui="_deepMerge({}, ui, { icon: { trailing: { pointer: '' } } })"
15
+ />
16
+ </FieldWrapper>
17
+ </template>
18
+ <script lang="ts" setup>
19
+ import { _deepMerge } from '#imports'
20
+ import { useFieldHOC } from '#core/composables/useForm'
21
+ import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
22
+ import type { INumberFieldProps } from '#core/components/Form/InputNumber/types'
23
+
24
+ const props = withDefaults(defineProps<INumberFieldProps>(), {})
25
+
26
+ const { value, wrapperProps } = useFieldHOC<number>(props)
27
+ </script>
@@ -1,27 +1,27 @@
1
- <template>
2
- <FieldWrapper v-bind="wrapperProps">
3
- <URadioGroup
4
- v-model="value"
5
- :options="options"
6
- :disabled="wrapperProps.isDisabled"
7
- :required="isRequired"
8
- value-attribute="value"
9
- option-attribute="label"
10
- :icon="icon"
11
- :color="color"
12
- :size="size"
13
- :ui="ui"
14
- :ui-menu="uiMenu"
15
- />
16
- </FieldWrapper>
17
- </template>
18
-
19
- <script lang="ts" setup>
20
- import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
21
- import { useFieldHOC } from '#core/composables/useForm'
22
- import { type ISelectFieldProps } from '#core/components/Form/InputSelect/types'
23
-
24
- const props = withDefaults(defineProps<ISelectFieldProps>(), {})
25
-
26
- const { value, wrapperProps } = useFieldHOC<any>(props)
27
- </script>
1
+ <template>
2
+ <FieldWrapper v-bind="wrapperProps">
3
+ <URadioGroup
4
+ v-model="value"
5
+ :options="options"
6
+ :disabled="wrapperProps.isDisabled"
7
+ :required="isRequired"
8
+ value-attribute="value"
9
+ option-attribute="label"
10
+ :icon="icon"
11
+ :color="color"
12
+ :size="size"
13
+ :ui="ui"
14
+ :ui-menu="uiMenu"
15
+ />
16
+ </FieldWrapper>
17
+ </template>
18
+
19
+ <script lang="ts" setup>
20
+ import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
21
+ import { useFieldHOC } from '#core/composables/useForm'
22
+ import { type ISelectFieldProps } from '#core/components/Form/InputSelect/types'
23
+
24
+ const props = withDefaults(defineProps<ISelectFieldProps>(), {})
25
+
26
+ const { value, wrapperProps } = useFieldHOC<any>(props)
27
+ </script>
@@ -1,36 +1,36 @@
1
- <template>
2
- <FieldWrapper v-bind="wrapperProps">
3
- <USelectMenu
4
- v-model="value"
5
- searchable
6
- :options="options"
7
- :placeholder="placeholder || label"
8
- :disabled="wrapperProps.isDisabled"
9
- :loading="loading"
10
- :searchable-placeholder="searchablePlaceholder"
11
- value-attribute="value"
12
- option-attribute="label"
13
- :icon="icon"
14
- :color="color"
15
- :size="size"
16
- :ui="ui"
17
- :ui-menu="uiMenu"
18
- >
19
- <template #label>
20
- <span v-if="value" class="truncate">
21
- {{ options.find((item) => item.value === value)?.label || value }}
22
- </span>
23
- </template>
24
- </USelectMenu>
25
- </FieldWrapper>
26
- </template>
27
-
28
- <script lang="ts" setup>
29
- import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
30
- import { useFieldHOC } from '#core/composables/useForm'
31
- import { type ISelectFieldProps } from '#core/components/Form/InputSelect/types'
32
-
33
- const props = withDefaults(defineProps<ISelectFieldProps>(), {})
34
-
35
- const { value, wrapperProps } = useFieldHOC<any>(props)
36
- </script>
1
+ <template>
2
+ <FieldWrapper v-bind="wrapperProps">
3
+ <USelectMenu
4
+ v-model="value"
5
+ searchable
6
+ :options="options"
7
+ :placeholder="placeholder || label"
8
+ :disabled="wrapperProps.isDisabled"
9
+ :loading="loading"
10
+ :searchable-placeholder="searchablePlaceholder"
11
+ value-attribute="value"
12
+ option-attribute="label"
13
+ :icon="icon"
14
+ :color="color"
15
+ :size="size"
16
+ :ui="ui"
17
+ :ui-menu="uiMenu"
18
+ >
19
+ <template #label>
20
+ <span v-if="value" class="truncate">
21
+ {{ options.find((item) => item.value === value)?.label || value }}
22
+ </span>
23
+ </template>
24
+ </USelectMenu>
25
+ </FieldWrapper>
26
+ </template>
27
+
28
+ <script lang="ts" setup>
29
+ import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
30
+ import { useFieldHOC } from '#core/composables/useForm'
31
+ import { type ISelectFieldProps } from '#core/components/Form/InputSelect/types'
32
+
33
+ const props = withDefaults(defineProps<ISelectFieldProps>(), {})
34
+
35
+ const { value, wrapperProps } = useFieldHOC<any>(props)
36
+ </script>
@@ -1,16 +1,16 @@
1
- <template>
2
- <FieldWrapper v-bind="wrapperProps" :is-required="false">
3
- <p class="form-control-static">
4
- {{ !value || value.length === 0 ? '-' : value }}
5
- </p>
6
- </FieldWrapper>
7
- </template>
8
- <script lang="ts" setup>
9
- import { type IStaticFieldProps } from '#core/components/Form/InputStatic/types'
10
- import { useFieldHOC } from '#core/composables/useForm'
11
- import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
12
-
13
- const props = withDefaults(defineProps<IStaticFieldProps>(), {})
14
-
15
- const { value, wrapperProps } = useFieldHOC<string>(props)
16
- </script>
1
+ <template>
2
+ <FieldWrapper v-bind="wrapperProps" :is-required="false">
3
+ <p class="form-control-static">
4
+ {{ !value || value.length === 0 ? '-' : value }}
5
+ </p>
6
+ </FieldWrapper>
7
+ </template>
8
+ <script lang="ts" setup>
9
+ import { type IStaticFieldProps } from '#core/components/Form/InputStatic/types'
10
+ import { useFieldHOC } from '#core/composables/useForm'
11
+ import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
12
+
13
+ const props = withDefaults(defineProps<IStaticFieldProps>(), {})
14
+
15
+ const { value, wrapperProps } = useFieldHOC<string>(props)
16
+ </script>
@@ -1,67 +1,67 @@
1
- <template>
2
- <FieldWrapper v-bind="wrapperProps">
3
- <UInput
4
- v-if="type === 'password'"
5
- v-model="value"
6
- v-maska:[maskOptions]
7
- :data-maska="mask"
8
- :data-maska-tokens="maskTokens"
9
- :data-maska-tokens-replace="maskTokensReplace"
10
- :data-maska-reversed="maskReversed"
11
- :data-maska-eager="maskEager"
12
- :disabled="wrapperProps.isDisabled"
13
- :leading-icon="leadingIcon"
14
- :trailing-icon="trailingIcon"
15
- :name="name"
16
- :placeholder="wrapperProps.placeholder"
17
- :type="isShowPassword ? 'text' : 'password'"
18
- :autofocus="!!autoFocus"
19
- :icon="icon"
20
- :readonly="isReadonly"
21
- :ui="_deepMerge({}, ui, { icon: { trailing: { pointer: '' } } })"
22
- >
23
- <template #trailing>
24
- <UButton
25
- color="gray"
26
- variant="link"
27
- :icon="isShowPassword ? 'i-heroicons-eye-slash' : 'i-heroicons-eye'"
28
- :padded="false"
29
- @click="isShowPassword = !isShowPassword"
30
- />
31
- </template>
32
- </UInput>
33
- <UInput
34
- v-else
35
- v-model="value"
36
- v-maska:[maskOptions]
37
- :data-maska="mask"
38
- :data-maska-tokens="maskTokens"
39
- :data-maska-tokens-replace="maskTokensReplace"
40
- :data-maska-reversed="maskReversed"
41
- :data-maska-eager="maskEager"
42
- :disabled="wrapperProps.isDisabled"
43
- :leading-icon="leadingIcon"
44
- :trailing-icon="trailingIcon"
45
- :name="name"
46
- :placeholder="wrapperProps.placeholder"
47
- :type="type || 'text'"
48
- :autofocus="!!autoFocus"
49
- :icon="icon"
50
- :readonly="isReadonly"
51
- :ui="ui"
52
- />
53
- </FieldWrapper>
54
- </template>
55
- <script lang="ts" setup>
56
- import { _deepMerge, ref } from '#imports'
57
- import { type ITextFieldProps } from '#core/components/Form/InputText/types'
58
- import { useFieldHOC } from '#core/composables/useForm'
59
- import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
60
- import { vMaska } from 'maska'
61
-
62
- const props = withDefaults(defineProps<ITextFieldProps>(), {})
63
-
64
- const { value, wrapperProps } = useFieldHOC<string>(props)
65
-
66
- const isShowPassword = ref(false)
67
- </script>
1
+ <template>
2
+ <FieldWrapper v-bind="wrapperProps">
3
+ <UInput
4
+ v-if="type === 'password'"
5
+ v-model="value"
6
+ v-maska:[maskOptions]
7
+ :data-maska="mask"
8
+ :data-maska-tokens="maskTokens"
9
+ :data-maska-tokens-replace="maskTokensReplace"
10
+ :data-maska-reversed="maskReversed"
11
+ :data-maska-eager="maskEager"
12
+ :disabled="wrapperProps.isDisabled"
13
+ :leading-icon="leadingIcon"
14
+ :trailing-icon="trailingIcon"
15
+ :name="name"
16
+ :placeholder="wrapperProps.placeholder"
17
+ :type="isShowPassword ? 'text' : 'password'"
18
+ :autofocus="!!autoFocus"
19
+ :icon="icon"
20
+ :readonly="isReadonly"
21
+ :ui="_deepMerge({}, ui, { icon: { trailing: { pointer: '' } } })"
22
+ >
23
+ <template #trailing>
24
+ <UButton
25
+ color="gray"
26
+ variant="link"
27
+ :icon="isShowPassword ? 'i-heroicons-eye-slash' : 'i-heroicons-eye'"
28
+ :padded="false"
29
+ @click="isShowPassword = !isShowPassword"
30
+ />
31
+ </template>
32
+ </UInput>
33
+ <UInput
34
+ v-else
35
+ v-model="value"
36
+ v-maska:[maskOptions]
37
+ :data-maska="mask"
38
+ :data-maska-tokens="maskTokens"
39
+ :data-maska-tokens-replace="maskTokensReplace"
40
+ :data-maska-reversed="maskReversed"
41
+ :data-maska-eager="maskEager"
42
+ :disabled="wrapperProps.isDisabled"
43
+ :leading-icon="leadingIcon"
44
+ :trailing-icon="trailingIcon"
45
+ :name="name"
46
+ :placeholder="wrapperProps.placeholder"
47
+ :type="type || 'text'"
48
+ :autofocus="!!autoFocus"
49
+ :icon="icon"
50
+ :readonly="isReadonly"
51
+ :ui="ui"
52
+ />
53
+ </FieldWrapper>
54
+ </template>
55
+ <script lang="ts" setup>
56
+ import { _deepMerge, ref } from '#imports'
57
+ import { type ITextFieldProps } from '#core/components/Form/InputText/types'
58
+ import { useFieldHOC } from '#core/composables/useForm'
59
+ import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
60
+ import { vMaska } from 'maska'
61
+
62
+ const props = withDefaults(defineProps<ITextFieldProps>(), {})
63
+
64
+ const { value, wrapperProps } = useFieldHOC<string>(props)
65
+
66
+ const isShowPassword = ref(false)
67
+ </script>
@@ -1,25 +1,25 @@
1
- <template>
2
- <FieldWrapper v-bind="wrapperProps">
3
- <UTextarea
4
- v-model="value"
5
- :disabled="wrapperProps.isDisabled"
6
- :name="name"
7
- :resize="resize"
8
- :placeholder="wrapperProps.placeholder"
9
- :autofocus="!!autoFocus"
10
- :autoresize="autoresize"
11
- :rows="rows"
12
- :readonly="isReadonly"
13
- :ui="ui"
14
- />
15
- </FieldWrapper>
16
- </template>
17
- <script lang="ts" setup>
18
- import { useFieldHOC } from '#core/composables/useForm'
19
- import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
20
- import { type ITextareaFieldProps } from '#core/components/Form/InputTextarea/types'
21
-
22
- const props = withDefaults(defineProps<ITextareaFieldProps>(), {})
23
-
24
- const { value, wrapperProps } = useFieldHOC<string>(props)
25
- </script>
1
+ <template>
2
+ <FieldWrapper v-bind="wrapperProps">
3
+ <UTextarea
4
+ v-model="value"
5
+ :disabled="wrapperProps.isDisabled"
6
+ :name="name"
7
+ :resize="resize"
8
+ :placeholder="wrapperProps.placeholder"
9
+ :autofocus="!!autoFocus"
10
+ :autoresize="autoresize"
11
+ :rows="rows"
12
+ :readonly="isReadonly"
13
+ :ui="ui"
14
+ />
15
+ </FieldWrapper>
16
+ </template>
17
+ <script lang="ts" setup>
18
+ import { useFieldHOC } from '#core/composables/useForm'
19
+ import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
20
+ import { type ITextareaFieldProps } from '#core/components/Form/InputTextarea/types'
21
+
22
+ const props = withDefaults(defineProps<ITextareaFieldProps>(), {})
23
+
24
+ const { value, wrapperProps } = useFieldHOC<string>(props)
25
+ </script>
@@ -1,14 +1,14 @@
1
- <template>
2
- <FieldWrapper v-bind="wrapperProps">
3
- <UToggle v-model="value" :disabled="wrapperProps.isDisabled" :name="name" :ui="ui" />
4
- </FieldWrapper>
5
- </template>
6
-
7
- <script lang="ts" setup>
8
- import { useFieldHOC } from '#core/composables/useForm'
9
- import { type IToggleFieldProps } from '#core/components/Form/InputToggle/types'
10
- import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
11
-
12
- const props = withDefaults(defineProps<IToggleFieldProps>(), {})
13
- const { value, wrapperProps } = useFieldHOC<boolean>(props)
14
- </script>
1
+ <template>
2
+ <FieldWrapper v-bind="wrapperProps">
3
+ <UToggle v-model="value" :disabled="wrapperProps.isDisabled" :name="name" :ui="ui" />
4
+ </FieldWrapper>
5
+ </template>
6
+
7
+ <script lang="ts" setup>
8
+ import { useFieldHOC } from '#core/composables/useForm'
9
+ import { type IToggleFieldProps } from '#core/components/Form/InputToggle/types'
10
+ import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
11
+
12
+ const props = withDefaults(defineProps<IToggleFieldProps>(), {})
13
+ const { value, wrapperProps } = useFieldHOC<boolean>(props)
14
+ </script>