@finema/core 1.4.99 → 1.4.101

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 (60) hide show
  1. package/README.md +60 -60
  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 +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 +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 +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 +192 -177
  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/date_range_time_field.types.d.ts +17 -0
  21. package/dist/runtime/components/Form/InputDateTimeRange/date_range_time_field.types.mjs +0 -0
  22. package/dist/runtime/components/Form/InputDateTimeRange/index.vue +83 -0
  23. package/dist/runtime/components/Form/InputNumber/index.vue +27 -27
  24. package/dist/runtime/components/Form/InputRadio/index.vue +27 -27
  25. package/dist/runtime/components/Form/InputSelect/index.vue +36 -36
  26. package/dist/runtime/components/Form/InputStatic/index.vue +16 -16
  27. package/dist/runtime/components/Form/InputText/index.vue +67 -67
  28. package/dist/runtime/components/Form/InputTextarea/index.vue +25 -25
  29. package/dist/runtime/components/Form/InputToggle/index.vue +14 -14
  30. package/dist/runtime/components/Form/InputUploadDropzone/index.vue +206 -202
  31. package/dist/runtime/components/Form/InputUploadDropzoneAuto/index.vue +333 -336
  32. package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/Item.vue +260 -265
  33. package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/index.vue +140 -142
  34. package/dist/runtime/components/Form/InputUploadDropzoneImageAutoMultiple/index.vue +148 -150
  35. package/dist/runtime/components/Form/InputUploadDropzoneImageAutoMultiple/item.vue +167 -179
  36. package/dist/runtime/components/Form/InputUploadFileClassic/index.vue +95 -96
  37. package/dist/runtime/components/Form/InputUploadFileClassicAuto/index.vue +143 -143
  38. package/dist/runtime/components/Form/index.vue +6 -6
  39. package/dist/runtime/components/Form/types.d.ts +4 -1
  40. package/dist/runtime/components/Form/types.mjs +2 -0
  41. package/dist/runtime/components/Icon.vue +23 -23
  42. package/dist/runtime/components/Image.vue +36 -36
  43. package/dist/runtime/components/Loader.vue +27 -27
  44. package/dist/runtime/components/Modal/index.vue +146 -146
  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/composables/useForm.d.ts +1 -1
  57. package/dist/runtime/helpers/apiPageHelper.d.ts +1 -1
  58. package/dist/runtime/utils/TimeHelper.d.ts +4 -0
  59. package/dist/runtime/utils/TimeHelper.mjs +16 -0
  60. package/package.json +88 -89
@@ -1,143 +1,143 @@
1
- <template>
2
- <FieldWrapper v-bind="wrapperProps">
3
- <div :class="[ui.base]">
4
- <input
5
- ref="fileInput"
6
- type="file"
7
- class="hidden"
8
- :name="name"
9
- :accept="fileAllocate.acceptFile.value"
10
- :disabled="isDisabled"
11
- @change="handleChange"
12
- />
13
- <div :class="[ui.wrapper]">
14
- <div :class="[ui.selectFileBox]">
15
- <Button size="2xs" @click="handleOpenFile">{{ selectFileLabel }}</Button>
16
- <p :class="ui.placeholder">
17
- {{ selectedFile?.name ?? placeholder ?? 'ยังไม่ได้เลือกไฟล์' }}
18
- </p>
19
- <Badge v-if="selectedFile" size="xs" variant="outline">
20
- {{
21
- fileAllocate.isSelectedFileUseMb.value
22
- ? `${fileAllocate.selectedFileSizeMb.value} MB`
23
- : `${fileAllocate.selectedFileSizeKb.value} KB`
24
- }}
25
- </Badge>
26
- </div>
27
- <div v-if="selectedFile">
28
- <Icon
29
- v-if="upload.status.value.isSuccess"
30
- name="heroicons:check-circle-20-solid"
31
- class="text-success"
32
- />
33
- <Icon
34
- v-if="upload.status.value.isError"
35
- name="heroicons:x-circle-20-solid"
36
- class="text-danger"
37
- />
38
- <Icon
39
- v-if="upload.status.value.isLoading"
40
- name="i-svg-spinners:180-ring-with-bg"
41
- class="text-primary"
42
- />
43
- </div>
44
- </div>
45
- </div>
46
- <img v-if="imagePreviewURL && value" :src="imagePreviewURL" alt="" :class="ui.previewURL" />
47
- </FieldWrapper>
48
- </template>
49
-
50
- <script lang="tsx" setup>
51
- import { _get, ref, StringHelper, toRef, useUI, useUiConfig, useWatchTrue } from '#imports'
52
- import { type IUploadFileProps } from './types'
53
- import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
54
- import { useFieldHOC } from '#core/composables/useForm'
55
- import { type IUploadRequest, useUploadLoader } from '#core/composables/useUpload'
56
- import { uploadFileInputClassicAuto } from '#core/ui.config'
57
- import i18next from 'i18next'
58
- import { checkMaxSize, useFileAllocate, useFileProgress } from '#core/helpers/componentHelper'
59
-
60
- const config = useUiConfig<typeof uploadFileInputClassicAuto>(
61
- uploadFileInputClassicAuto,
62
- 'uploadFileInputClassicAuto'
63
- )
64
-
65
- const emits = defineEmits(['success'])
66
- const props = withDefaults(defineProps<IUploadFileProps>(), {
67
- bodyKey: 'file',
68
- responseKey: 'url',
69
- selectFileLabel: 'เลือกไฟล์',
70
- })
71
-
72
- const { wrapperProps, setErrors, value } = useFieldHOC<string>(props)
73
-
74
- const request: IUploadRequest = {
75
- pathURL: props.uploadPathURL,
76
- requestOptions: props.requestOptions,
77
- }
78
-
79
- const upload = useUploadLoader(request)
80
-
81
- const fileInput = ref<HTMLInputElement>()
82
- const selectedFile = ref<File | undefined>()
83
-
84
- const fileAllocate = useFileAllocate(selectedFile, props)
85
- const { onUploadProgress, onDownloadProgress, percent } = useFileProgress()
86
- const { ui } = useUI('uploadFileInputClassicAuto', toRef(props, 'ui'), config)
87
-
88
- const handleOpenFile = () => {
89
- fileInput.value?.click()
90
- }
91
-
92
- const handleChange = (e: Event) => {
93
- const file = (e.target as HTMLInputElement).files?.[0]
94
- const result = handleCheckFileCondition(file)
95
-
96
- if (result && file) {
97
- selectedFile.value = file
98
- const formData = new FormData()
99
-
100
- formData.append(props.bodyKey, file)
101
- upload.run(formData, { data: { onUploadProgress, onDownloadProgress } })
102
- }
103
- }
104
-
105
- const handleCheckFileCondition = (file: File | undefined): boolean => {
106
- if (!file) return false
107
-
108
- const maxSize = checkMaxSize(file, fileAllocate.acceptFileSizeKb.value)
109
-
110
- if (!maxSize) {
111
- if (fileAllocate.isAcceptFileUseMb.value) {
112
- setErrors(
113
- i18next.t('custom:invalid_file_size_mb', { size: fileAllocate.acceptFileSizeMb.value })
114
- )
115
- } else {
116
- setErrors(
117
- i18next.t('custom:invalid_file_size_kb', { size: fileAllocate.acceptFileSizeKb.value })
118
- )
119
- }
120
-
121
- return false
122
- }
123
-
124
- setErrors('')
125
-
126
- return true
127
- }
128
-
129
- useWatchTrue(
130
- () => upload.status.value.isSuccess,
131
- () => {
132
- value.value = _get(upload.data.value, props.responseKey)
133
- emits('success', upload.data.value)
134
- }
135
- )
136
-
137
- useWatchTrue(
138
- () => upload.status.value.isError,
139
- () => {
140
- setErrors(StringHelper.getError(upload.status.value.errorData))
141
- }
142
- )
143
- </script>
1
+ <template>
2
+ <FieldWrapper v-bind="wrapperProps">
3
+ <div :class="[ui.base]">
4
+ <input
5
+ ref="fileInput"
6
+ type="file"
7
+ class="hidden"
8
+ :name="name"
9
+ :accept="fileAllocate.acceptFile.value"
10
+ :disabled="isDisabled"
11
+ @change="handleChange"
12
+ />
13
+ <div :class="[ui.wrapper]">
14
+ <div :class="[ui.selectFileBox]">
15
+ <Button size="2xs" @click="handleOpenFile">{{ selectFileLabel }}</Button>
16
+ <p :class="ui.placeholder">
17
+ {{ selectedFile?.name ?? placeholder ?? 'ยังไม่ได้เลือกไฟล์' }}
18
+ </p>
19
+ <Badge v-if="selectedFile" size="xs" variant="outline">
20
+ {{
21
+ fileAllocate.isSelectedFileUseMb.value
22
+ ? `${fileAllocate.selectedFileSizeMb.value} MB`
23
+ : `${fileAllocate.selectedFileSizeKb.value} KB`
24
+ }}
25
+ </Badge>
26
+ </div>
27
+ <div v-if="selectedFile">
28
+ <Icon
29
+ v-if="upload.status.value.isSuccess"
30
+ name="heroicons:check-circle-20-solid"
31
+ class="text-success"
32
+ />
33
+ <Icon
34
+ v-if="upload.status.value.isError"
35
+ name="heroicons:x-circle-20-solid"
36
+ class="text-danger"
37
+ />
38
+ <Icon
39
+ v-if="upload.status.value.isLoading"
40
+ name="i-svg-spinners:180-ring-with-bg"
41
+ class="text-primary"
42
+ />
43
+ </div>
44
+ </div>
45
+ </div>
46
+ <img v-if="imagePreviewURL && value" :src="imagePreviewURL" alt="" :class="ui.previewURL" />
47
+ </FieldWrapper>
48
+ </template>
49
+
50
+ <script lang="tsx" setup>
51
+ import { _get, ref, StringHelper, toRef, useUI, useUiConfig, useWatchTrue } from '#imports'
52
+ import { type IUploadFileProps } from './types'
53
+ import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
54
+ import { useFieldHOC } from '#core/composables/useForm'
55
+ import { type IUploadRequest, useUploadLoader } from '#core/composables/useUpload'
56
+ import { uploadFileInputClassicAuto } from '#core/ui.config'
57
+ import i18next from 'i18next'
58
+ import { checkMaxSize, useFileAllocate, useFileProgress } from '#core/helpers/componentHelper'
59
+
60
+ const config = useUiConfig<typeof uploadFileInputClassicAuto>(
61
+ uploadFileInputClassicAuto,
62
+ 'uploadFileInputClassicAuto'
63
+ )
64
+
65
+ const emits = defineEmits(['success'])
66
+ const props = withDefaults(defineProps<IUploadFileProps>(), {
67
+ bodyKey: 'file',
68
+ responseKey: 'url',
69
+ selectFileLabel: 'เลือกไฟล์',
70
+ })
71
+
72
+ const { wrapperProps, setErrors, value } = useFieldHOC<string>(props)
73
+
74
+ const request: IUploadRequest = {
75
+ pathURL: props.uploadPathURL,
76
+ requestOptions: props.requestOptions,
77
+ }
78
+
79
+ const upload = useUploadLoader(request)
80
+
81
+ const fileInput = ref<HTMLInputElement>()
82
+ const selectedFile = ref<File | undefined>()
83
+
84
+ const fileAllocate = useFileAllocate(selectedFile, props)
85
+ const { onUploadProgress, onDownloadProgress, percent } = useFileProgress()
86
+ const { ui } = useUI('uploadFileInputClassicAuto', toRef(props, 'ui'), config)
87
+
88
+ const handleOpenFile = () => {
89
+ fileInput.value?.click()
90
+ }
91
+
92
+ const handleChange = (e: Event) => {
93
+ const file = (e.target as HTMLInputElement).files?.[0]
94
+ const result = handleCheckFileCondition(file)
95
+
96
+ if (result && file) {
97
+ selectedFile.value = file
98
+ const formData = new FormData()
99
+
100
+ formData.append(props.bodyKey, file)
101
+ upload.run(formData, { data: { onUploadProgress, onDownloadProgress } })
102
+ }
103
+ }
104
+
105
+ const handleCheckFileCondition = (file: File | undefined): boolean => {
106
+ if (!file) return false
107
+
108
+ const maxSize = checkMaxSize(file, fileAllocate.acceptFileSizeKb.value)
109
+
110
+ if (!maxSize) {
111
+ if (fileAllocate.isAcceptFileUseMb.value) {
112
+ setErrors(
113
+ i18next.t('custom:invalid_file_size_mb', { size: fileAllocate.acceptFileSizeMb.value })
114
+ )
115
+ } else {
116
+ setErrors(
117
+ i18next.t('custom:invalid_file_size_kb', { size: fileAllocate.acceptFileSizeKb.value })
118
+ )
119
+ }
120
+
121
+ return false
122
+ }
123
+
124
+ setErrors('')
125
+
126
+ return true
127
+ }
128
+
129
+ useWatchTrue(
130
+ () => upload.status.value.isSuccess,
131
+ () => {
132
+ value.value = _get(upload.data.value, props.responseKey)
133
+ emits('success', upload.data.value)
134
+ }
135
+ )
136
+
137
+ useWatchTrue(
138
+ () => upload.status.value.isError,
139
+ () => {
140
+ setErrors(StringHelper.getError(upload.status.value.errorData))
141
+ }
142
+ )
143
+ </script>
@@ -1,6 +1,6 @@
1
- <template>
2
- <form class="form">
3
- <slot />
4
- </form>
5
- </template>
6
- <script lang="ts" setup></script>
1
+ <template>
2
+ <form class="form">
3
+ <slot />
4
+ </form>
5
+ </template>
6
+ <script lang="ts" setup></script>
@@ -8,6 +8,7 @@ import { type ISelectField } from '#core/components/Form/InputSelect/types';
8
8
  import { type IToggleField } from '#core/components/Form/InputToggle/types';
9
9
  import { type ITextareaField } from '#core/components/Form/InputTextarea/types';
10
10
  import { type IDateTimeField } from '#core/components/Form/InputDateTime/date_time_field.types';
11
+ import { type IDateTimeRangeField } from '~/src/runtime/components/Form/InputDateTimeRange/date_range_time_field.types';
11
12
  import { type IUploadFileClassicField } from '#core/components/Form/InputUploadFileClassic/types';
12
13
  import { type IUploadFileField } from '#core/components/Form/InputUploadFileClassicAuto/types';
13
14
  import { type IUploadDropzoneField } from '#core/components/Form/InputUploadDropzone/types';
@@ -28,6 +29,8 @@ export declare const enum INPUT_TYPES {
28
29
  CHECKBOX = "CHECKBOX",
29
30
  DATE_TIME = "DATE_TIME",
30
31
  DATE = "DATE",
32
+ DATE_RANGE = "DATE_RANGE",
33
+ DATE_TIME_RANGE = "DATE_TIME_RANGE",
31
34
  UPLOAD_FILE_CLASSIC = "UPLOAD_FILE_CLASSIC",
32
35
  UPLOAD_FILE_CLASSIC_AUTO = "UPLOAD_FILE_CLASSIC_AUTO",
33
36
  UPLOAD_DROPZONE = "UPLOAD_DROPZONE",
@@ -62,4 +65,4 @@ export interface IFormFieldBase<I extends INPUT_TYPES, P extends IFieldProps, O>
62
65
  props: P;
63
66
  on?: O;
64
67
  }
65
- export type IFormField = ITextField | INumberField | IStaticField | ICheckboxField | IRadioField | ISelectField | IToggleField | ITextareaField | IDateTimeField | IUploadFileClassicField | IUploadFileField | IUploadDropzoneField | IUploadDropzoneAutoField | IUploadDropzoneAutoMultipleField | IUploadDropzoneImageAutoMultipleField;
68
+ export type IFormField = ITextField | INumberField | IStaticField | ICheckboxField | IRadioField | ISelectField | IToggleField | ITextareaField | IDateTimeField | IDateTimeRangeField | IUploadFileClassicField | IUploadFileField | IUploadDropzoneField | IUploadDropzoneAutoField | IUploadDropzoneAutoMultipleField | IUploadDropzoneImageAutoMultipleField;
@@ -11,6 +11,8 @@ export var INPUT_TYPES = /* @__PURE__ */ ((INPUT_TYPES2) => {
11
11
  INPUT_TYPES2["CHECKBOX"] = "CHECKBOX";
12
12
  INPUT_TYPES2["DATE_TIME"] = "DATE_TIME";
13
13
  INPUT_TYPES2["DATE"] = "DATE";
14
+ INPUT_TYPES2["DATE_RANGE"] = "DATE_RANGE";
15
+ INPUT_TYPES2["DATE_TIME_RANGE"] = "DATE_TIME_RANGE";
14
16
  INPUT_TYPES2["UPLOAD_FILE_CLASSIC"] = "UPLOAD_FILE_CLASSIC";
15
17
  INPUT_TYPES2["UPLOAD_FILE_CLASSIC_AUTO"] = "UPLOAD_FILE_CLASSIC_AUTO";
16
18
  INPUT_TYPES2["UPLOAD_DROPZONE"] = "UPLOAD_DROPZONE";
@@ -1,23 +1,23 @@
1
- <template>
2
- <UIcon :name="name" :dynamic="dynamicValue" />
3
- </template>
4
-
5
- <script lang="ts" setup>
6
- import { computed, useUiConfig } from '#imports'
7
- import { icon } from '#core/ui.config'
8
-
9
- const props = defineProps({
10
- name: {
11
- type: String,
12
- required: true,
13
- },
14
- dynamic: {
15
- type: Boolean,
16
- default: false,
17
- },
18
- })
19
-
20
- const config = useUiConfig<typeof icon>(icon, 'icon')
21
-
22
- const dynamicValue = computed(() => props.dynamic || config.dynamic)
23
- </script>
1
+ <template>
2
+ <UIcon :name="name" :dynamic="dynamicValue" />
3
+ </template>
4
+
5
+ <script lang="ts" setup>
6
+ import { computed, useUiConfig } from '#imports'
7
+ import { icon } from '#core/ui.config'
8
+
9
+ const props = defineProps({
10
+ name: {
11
+ type: String,
12
+ required: true,
13
+ },
14
+ dynamic: {
15
+ type: Boolean,
16
+ default: false,
17
+ },
18
+ })
19
+
20
+ const config = useUiConfig<typeof icon>(icon, 'icon')
21
+
22
+ const dynamicValue = computed(() => props.dynamic || config.dynamic)
23
+ </script>
@@ -1,36 +1,36 @@
1
- <template>
2
- <img :src="getSrc" />
3
- </template>
4
- <script lang="ts" setup>
5
- import { useImage } from '@vueuse/core'
6
- import { computed } from 'vue'
7
-
8
- const props = defineProps({
9
- src: {
10
- type: String,
11
- required: true,
12
- },
13
- loadingSrc: {
14
- type: String,
15
- default: '',
16
- },
17
- errorSrc: {
18
- type: String,
19
- default: '',
20
- },
21
- })
22
-
23
- const { isLoading, error } = useImage({ src: props.src })
24
-
25
- const getSrc = computed(() => {
26
- if (isLoading.value) {
27
- return props.loadingSrc
28
- }
29
-
30
- if (error.value) {
31
- return props.errorSrc
32
- }
33
-
34
- return props.src
35
- })
36
- </script>
1
+ <template>
2
+ <img :src="getSrc" />
3
+ </template>
4
+ <script lang="ts" setup>
5
+ import { useImage } from '@vueuse/core'
6
+ import { computed } from 'vue'
7
+
8
+ const props = defineProps({
9
+ src: {
10
+ type: String,
11
+ required: true,
12
+ },
13
+ loadingSrc: {
14
+ type: String,
15
+ default: '',
16
+ },
17
+ errorSrc: {
18
+ type: String,
19
+ default: '',
20
+ },
21
+ })
22
+
23
+ const { isLoading, error } = useImage({ src: props.src })
24
+
25
+ const getSrc = computed(() => {
26
+ if (isLoading.value) {
27
+ return props.loadingSrc
28
+ }
29
+
30
+ if (error.value) {
31
+ return props.errorSrc
32
+ }
33
+
34
+ return props.src
35
+ })
36
+ </script>
@@ -1,27 +1,27 @@
1
- <template>
2
- <div
3
- v-if="isLoading"
4
- :class="[
5
- 'flex items-center justify-center',
6
- $attrs.class,
7
- {
8
- 'min-h-[200px]': !$attrs.class,
9
- },
10
- ]"
11
- >
12
- <UIcon name="i-svg-spinners:180-ring-with-bg" class="text-primary text-4xl" dynamic />
13
- </div>
14
- <slot v-else />
15
- </template>
16
- <script lang="ts" setup>
17
- defineOptions({
18
- inheritAttrs: false,
19
- })
20
-
21
- defineProps({
22
- isLoading: {
23
- type: Boolean,
24
- default: true,
25
- },
26
- })
27
- </script>
1
+ <template>
2
+ <div
3
+ v-if="isLoading"
4
+ :class="[
5
+ 'flex items-center justify-center',
6
+ $attrs.class,
7
+ {
8
+ 'min-h-[200px]': !$attrs.class,
9
+ },
10
+ ]"
11
+ >
12
+ <UIcon name="i-svg-spinners:180-ring-with-bg" class="text-primary text-4xl" dynamic />
13
+ </div>
14
+ <slot v-else />
15
+ </template>
16
+ <script lang="ts" setup>
17
+ defineOptions({
18
+ inheritAttrs: false,
19
+ })
20
+
21
+ defineProps({
22
+ isLoading: {
23
+ type: Boolean,
24
+ default: true,
25
+ },
26
+ })
27
+ </script>