@finema/core 3.14.5 → 3.14.7
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/dist/module.json +1 -1
- package/dist/module.mjs +1 -1
- package/dist/runtime/components/Form/InputDateTime/date_time_field.types.d.ts +1 -0
- package/dist/runtime/components/Form/InputDateTime/index.vue +29 -105
- package/dist/runtime/components/Form/InputDateTimeRange/index.vue +1 -0
- package/dist/runtime/components/Form/InputSelect/index.vue +2 -0
- package/dist/runtime/components/Form/InputSelect/types.d.ts +1 -0
- package/dist/runtime/components/Form/InputSelectMultiple/index.vue +2 -1
- package/package.json +1 -1
package/dist/module.json
CHANGED
package/dist/module.mjs
CHANGED
|
@@ -17,6 +17,7 @@ export interface IDateTimeFieldProps extends IFieldProps {
|
|
|
17
17
|
readMode?: boolean;
|
|
18
18
|
classReadMode?: string;
|
|
19
19
|
clearable?: boolean;
|
|
20
|
+
autoApply?: boolean;
|
|
20
21
|
}
|
|
21
22
|
export type IDateTimeField = IFormFieldBase<INPUT_TYPES.DATE_TIME | INPUT_TYPES.DATE, IDateTimeFieldProps, {
|
|
22
23
|
change: (value: string) => void;
|
|
@@ -1,98 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<FieldWrapper v-bind="wrapperProps">
|
|
3
|
-
<!-- <Drawer
|
|
4
|
-
v-if="isMobile"
|
|
5
|
-
v-model:open="isShowModal"
|
|
6
|
-
>
|
|
7
|
-
<Input
|
|
8
|
-
v-if="!readMode"
|
|
9
|
-
:trailing-icon="innerValue ? undefined : 'i-heroicons-calendar-days'"
|
|
10
|
-
type="text"
|
|
11
|
-
:disabled="wrapperProps.disabled"
|
|
12
|
-
:model-value="format(innerValue)"
|
|
13
|
-
:placeholder="wrapperProps.placeholder"
|
|
14
|
-
:readonly="true"
|
|
15
|
-
:ui="{
|
|
16
|
-
base: 'cursor-pointer select-none',
|
|
17
|
-
trailingIcon: 'cursor-pointer',
|
|
18
|
-
}"
|
|
19
|
-
>
|
|
20
|
-
<template #trailing>
|
|
21
|
-
<Icon
|
|
22
|
-
v-if="clearable && value"
|
|
23
|
-
:name="clearIcon"
|
|
24
|
-
:class="theme.clearIcon({
|
|
25
|
-
class: [ui?.clearIcon, 'mr-0 cursor-pointer'],
|
|
26
|
-
})"
|
|
27
|
-
@click.stop="value = null"
|
|
28
|
-
/>
|
|
29
|
-
</template>
|
|
30
|
-
</Input>
|
|
31
|
-
<div
|
|
32
|
-
v-else
|
|
33
|
-
class="cursor-pointer rounded-md px-2 py-1 hover:bg-gray-100"
|
|
34
|
-
:class="classReadMode"
|
|
35
|
-
>
|
|
36
|
-
{{ innerValue ? format(innerValue) : 'None' }}
|
|
37
|
-
</div>
|
|
38
|
-
|
|
39
|
-
<template #content>
|
|
40
|
-
<Datepicker
|
|
41
|
-
inline
|
|
42
|
-
:model-value="innerValue"
|
|
43
|
-
:disabled="wrapperProps.disabled"
|
|
44
|
-
:cancel-text="appConfig.core?.locale === 'th' ? 'ยกเลิก' : 'Cancel'"
|
|
45
|
-
:select-text="appConfig.core?.locale === 'th' ? 'ตกลง' : 'Select'"
|
|
46
|
-
:locale="appConfig.core?.locale"
|
|
47
|
-
:enable-time-picker="!disabledTime"
|
|
48
|
-
:placeholder="wrapperProps.placeholder"
|
|
49
|
-
:format="(format as any)"
|
|
50
|
-
:min-date="minDate"
|
|
51
|
-
:max-date="maxDate"
|
|
52
|
-
:min-time="minTime"
|
|
53
|
-
:max-time="maxTime"
|
|
54
|
-
:six-weeks="true"
|
|
55
|
-
:start-time="startTime"
|
|
56
|
-
:required="required"
|
|
57
|
-
:flow="['calendar', 'time']"
|
|
58
|
-
@update:model-value="onInput"
|
|
59
|
-
>
|
|
60
|
-
<template #action-row="{ internalModelValue, selectDate, closePicker }">
|
|
61
|
-
<div class="flex w-full items-center justify-between">
|
|
62
|
-
<p>
|
|
63
|
-
{{ format(internalModelValue as any) }}
|
|
64
|
-
</p>
|
|
65
|
-
|
|
66
|
-
<div class="flex items-center space-x-2">
|
|
67
|
-
<Button
|
|
68
|
-
color="neutral"
|
|
69
|
-
variant="subtle"
|
|
70
|
-
@click="closePicker; isShowModal = false"
|
|
71
|
-
>
|
|
72
|
-
{{ appConfig.core?.locale === 'th' ? 'ยกเลิก' : 'Cancel' }}
|
|
73
|
-
</Button> <Button
|
|
74
|
-
@click="selectDate; isShowModal = false"
|
|
75
|
-
>
|
|
76
|
-
{{ appConfig.core?.locale === 'th' ? 'ตกลง' : 'Select' }}
|
|
77
|
-
</Button>
|
|
78
|
-
</div>
|
|
79
|
-
</div>
|
|
80
|
-
</template>
|
|
81
|
-
<template
|
|
82
|
-
v-if="appConfig.core?.locale === 'th' && appConfig.core?.is_thai_year"
|
|
83
|
-
#year="{ value }"
|
|
84
|
-
>
|
|
85
|
-
{{ value + 543 }}
|
|
86
|
-
</template>
|
|
87
|
-
<template
|
|
88
|
-
v-if="appConfig.core?.locale === 'th' && appConfig.core?.is_thai_year"
|
|
89
|
-
#year-overlay-value="{ value }"
|
|
90
|
-
>
|
|
91
|
-
{{ value + 543 }}
|
|
92
|
-
</template>
|
|
93
|
-
</Datepicker>
|
|
94
|
-
</template>
|
|
95
|
-
</Drawer> -->
|
|
96
3
|
<Datepicker
|
|
97
4
|
:model-value="innerValue"
|
|
98
5
|
:disabled="wrapperProps.disabled"
|
|
@@ -100,6 +7,7 @@
|
|
|
100
7
|
:select-text="appConfig.core?.locale === 'th' ? '\u0E15\u0E01\u0E25\u0E07' : 'Select'"
|
|
101
8
|
:locale="appConfig.core?.locale"
|
|
102
9
|
:enable-time-picker="!disabledTime"
|
|
10
|
+
:auto-apply="autoApply && disabledTime"
|
|
103
11
|
:placeholder="wrapperProps.placeholder"
|
|
104
12
|
:format="format"
|
|
105
13
|
:min-date="minDate"
|
|
@@ -151,9 +59,11 @@
|
|
|
151
59
|
<Icon
|
|
152
60
|
v-if="clearable"
|
|
153
61
|
:name="clearIcon"
|
|
154
|
-
:class="
|
|
155
|
-
|
|
156
|
-
|
|
62
|
+
:class="
|
|
63
|
+
theme.clearIcon({
|
|
64
|
+
class: [ui?.clearIcon]
|
|
65
|
+
})
|
|
66
|
+
"
|
|
157
67
|
@click.stop="clear"
|
|
158
68
|
/>
|
|
159
69
|
</template>
|
|
@@ -164,7 +74,16 @@
|
|
|
164
74
|
<script setup>
|
|
165
75
|
import Datepicker from "@vuepic/vue-datepicker";
|
|
166
76
|
import FieldWrapper from "#core/components/Form/FieldWrapper.vue";
|
|
167
|
-
import {
|
|
77
|
+
import {
|
|
78
|
+
computed,
|
|
79
|
+
TimeHelper,
|
|
80
|
+
useAppConfig,
|
|
81
|
+
useFieldHOC,
|
|
82
|
+
useUiConfig,
|
|
83
|
+
ref,
|
|
84
|
+
watch,
|
|
85
|
+
onMounted
|
|
86
|
+
} from "#imports";
|
|
168
87
|
import "@vuepic/vue-datepicker/dist/main.css";
|
|
169
88
|
import { dateTimeTheme } from "#core/theme/dateTime";
|
|
170
89
|
import { breakpointsTailwind, useBreakpoints } from "@vueuse/core";
|
|
@@ -182,6 +101,7 @@ const props = defineProps({
|
|
|
182
101
|
readMode: { type: Boolean, required: false },
|
|
183
102
|
classReadMode: { type: String, required: false },
|
|
184
103
|
clearable: { type: Boolean, required: false, default: true },
|
|
104
|
+
autoApply: { type: Boolean, required: false },
|
|
185
105
|
form: { type: Object, required: false },
|
|
186
106
|
name: { type: String, required: true },
|
|
187
107
|
errorMessage: { type: String, required: false },
|
|
@@ -215,15 +135,19 @@ const initializeValue = () => {
|
|
|
215
135
|
innerValue.value = void 0;
|
|
216
136
|
}
|
|
217
137
|
};
|
|
218
|
-
watch(
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
138
|
+
watch(
|
|
139
|
+
value,
|
|
140
|
+
(newValue) => {
|
|
141
|
+
if (newValue) {
|
|
142
|
+
innerValue.value = typeof newValue === "string" ? new Date(newValue) : newValue;
|
|
143
|
+
} else {
|
|
144
|
+
innerValue.value = void 0;
|
|
145
|
+
}
|
|
146
|
+
},
|
|
147
|
+
{
|
|
148
|
+
immediate: false
|
|
223
149
|
}
|
|
224
|
-
|
|
225
|
-
immediate: false
|
|
226
|
-
});
|
|
150
|
+
);
|
|
227
151
|
onMounted(() => {
|
|
228
152
|
initializeValue();
|
|
229
153
|
});
|
|
@@ -83,6 +83,7 @@ const props = defineProps({
|
|
|
83
83
|
readMode: { type: Boolean, required: false },
|
|
84
84
|
classReadMode: { type: String, required: false },
|
|
85
85
|
clearable: { type: Boolean, required: false },
|
|
86
|
+
autoApply: { type: Boolean, required: false },
|
|
86
87
|
form: { type: Object, required: false },
|
|
87
88
|
name: { type: String, required: true },
|
|
88
89
|
errorMessage: { type: String, required: false },
|
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
label-key="label"
|
|
13
13
|
:icon="icon"
|
|
14
14
|
:ui="ui"
|
|
15
|
+
:ignore-filter="ignoreFilter"
|
|
15
16
|
:leading-icon="options.find((item) => item.value === value)?.icon"
|
|
16
17
|
:avatar="options.find((item) => item.value === value)?.avatar"
|
|
17
18
|
@update:modelValue="onChange"
|
|
@@ -65,6 +66,7 @@ const emits = defineEmits([
|
|
|
65
66
|
]);
|
|
66
67
|
const props = defineProps({
|
|
67
68
|
icon: { type: String, required: false },
|
|
69
|
+
ignoreFilter: { type: Boolean, required: false },
|
|
68
70
|
trailingIcon: { type: String, required: false },
|
|
69
71
|
clearIcon: { type: String, required: false, default: "ph:x-circle-fill" },
|
|
70
72
|
selectedIcon: { type: String, required: false },
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
label-key="label"
|
|
14
14
|
:icon="icon"
|
|
15
15
|
:ui="ui"
|
|
16
|
-
:ignore-filter="
|
|
16
|
+
:ignore-filter="ignoreFilter"
|
|
17
17
|
@update:model-value="onChange"
|
|
18
18
|
@update:searchTerm="onSearch"
|
|
19
19
|
>
|
|
@@ -86,6 +86,7 @@ const emits = defineEmits([
|
|
|
86
86
|
]);
|
|
87
87
|
const props = defineProps({
|
|
88
88
|
icon: { type: String, required: false },
|
|
89
|
+
ignoreFilter: { type: Boolean, required: false },
|
|
89
90
|
trailingIcon: { type: String, required: false },
|
|
90
91
|
clearIcon: { type: String, required: false, default: "ph:x-circle-fill" },
|
|
91
92
|
selectedIcon: { type: String, required: false },
|