@finema/core 1.4.85 → 1.4.86
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.
- package/README.md +63 -63
- package/dist/module.json +1 -1
- package/dist/module.mjs +1 -1
- package/dist/runtime/components/Alert.vue +48 -48
- package/dist/runtime/components/Avatar.vue +27 -27
- package/dist/runtime/components/Badge.vue +53 -53
- package/dist/runtime/components/Breadcrumb.vue +44 -44
- package/dist/runtime/components/Button/Group.vue +37 -37
- package/dist/runtime/components/Button/index.vue +76 -76
- package/dist/runtime/components/Card.vue +38 -38
- package/dist/runtime/components/Core.vue +13 -13
- package/dist/runtime/components/Dialog/index.vue +108 -108
- package/dist/runtime/components/Dropdown/index.vue +70 -70
- package/dist/runtime/components/FlexDeck/Base.vue +77 -77
- package/dist/runtime/components/FlexDeck/index.vue +59 -59
- package/dist/runtime/components/Form/FieldWrapper.vue +23 -23
- package/dist/runtime/components/Form/Fields.vue +160 -160
- package/dist/runtime/components/Form/InputCheckbox/index.vue +21 -21
- package/dist/runtime/components/Form/InputDateTime/index.vue +60 -60
- package/dist/runtime/components/Form/InputNumber/index.vue +27 -27
- package/dist/runtime/components/Form/InputRadio/index.vue +27 -27
- package/dist/runtime/components/Form/InputSelect/index.vue +36 -36
- package/dist/runtime/components/Form/InputStatic/index.vue +16 -16
- package/dist/runtime/components/Form/InputText/index.vue +67 -67
- package/dist/runtime/components/Form/InputTextarea/index.vue +25 -25
- package/dist/runtime/components/Form/InputToggle/index.vue +14 -14
- package/dist/runtime/components/Form/InputUploadDropzone/index.vue +158 -158
- package/dist/runtime/components/Form/InputUploadDropzoneAuto/index.vue +243 -243
- package/dist/runtime/components/Form/InputUploadFileClassic/index.vue +101 -101
- package/dist/runtime/components/Form/InputUploadFileClassicAuto/index.vue +174 -174
- package/dist/runtime/components/Form/index.vue +6 -6
- package/dist/runtime/components/Icon.vue +23 -23
- package/dist/runtime/components/Image.vue +36 -36
- package/dist/runtime/components/Loader.vue +29 -14
- package/dist/runtime/components/Modal/index.vue +146 -146
- package/dist/runtime/components/SimplePagination.vue +96 -96
- package/dist/runtime/components/Slideover/index.vue +110 -110
- package/dist/runtime/components/Table/Base.vue +139 -139
- package/dist/runtime/components/Table/ColumnDate.vue +16 -16
- package/dist/runtime/components/Table/ColumnDateTime.vue +18 -18
- package/dist/runtime/components/Table/ColumnImage.vue +15 -15
- package/dist/runtime/components/Table/ColumnNumber.vue +14 -14
- package/dist/runtime/components/Table/ColumnText.vue +25 -25
- package/dist/runtime/components/Table/Simple.vue +64 -64
- package/dist/runtime/components/Table/index.vue +60 -60
- package/dist/runtime/components/Tabs/index.vue +64 -64
- package/dist/runtime/ui.css +32 -32
- 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>
|