@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,25 +1,25 @@
1
- <template>{{ getValue }}</template>
2
- <script lang="ts" setup>
3
- import { computed } from 'vue'
4
- import { type IColumn } from '#core/components/Table/types'
5
- import { StringHelper } from '#imports'
6
-
7
- const props = defineProps<{
8
- value: any
9
- row: any
10
- column: IColumn<{
11
- max?: number
12
- }>
13
- }>()
14
-
15
- const getValue = computed<string>(() => {
16
- const value = props.value
17
- const max = props.column.props?.max
18
-
19
- if (max) {
20
- return StringHelper.truncate(value, max)
21
- }
22
-
23
- return value ?? '-'
24
- })
25
- </script>
1
+ <template>{{ getValue }}</template>
2
+ <script lang="ts" setup>
3
+ import { computed } from 'vue'
4
+ import { type IColumn } from '#core/components/Table/types'
5
+ import { StringHelper } from '#imports'
6
+
7
+ const props = defineProps<{
8
+ value: any
9
+ row: any
10
+ column: IColumn<{
11
+ max?: number
12
+ }>
13
+ }>()
14
+
15
+ const getValue = computed<string>(() => {
16
+ const value = props.value
17
+ const max = props.column.props?.max
18
+
19
+ if (max) {
20
+ return StringHelper.truncate(value, max)
21
+ }
22
+
23
+ return value ?? '-'
24
+ })
25
+ </script>
@@ -1,69 +1,69 @@
1
- <template>
2
- <Base
3
- v-bind="$attrs"
4
- :columns="options.columns"
5
- :raw-data="itemsByPage"
6
- :status="options.status"
7
- :page-options="pageOptions"
8
- :is-simple-pagination="isShowSimplePagination"
9
- :is-hide-bottom-pagination="options.isHideBottomPagination"
10
- @page-change="onPageChange"
11
- >
12
- <template v-for="(_, slot) of $slots" #[slot]="slotProps">
13
- <slot :name="slot" v-bind="slotProps || {}" />
14
- </template>
15
- </Base>
16
- </template>
17
- <script lang="ts" setup>
18
- import { computed, type PropType, ref } from 'vue'
19
- import { type ISimpleTableOptions } from '#core/components/Table/types'
20
- import Base from '#core/components/Table/Base.vue'
21
- import { initPageOptions } from '#core/composables/loaderPage'
22
- import { useCoreConfig } from '#core/composables/useConfig'
23
-
24
- defineSlots<{
25
- 'empty-state': () => any
26
- 'loading-state': () => any
27
- }>()
28
-
29
- const props = defineProps({
30
- options: { type: Object as PropType<ISimpleTableOptions>, required: true },
31
- })
32
-
33
- const currentPage = ref(1)
34
- const coreConfig = useCoreConfig()
35
- const isShowSimplePagination = computed(
36
- (): boolean => props.options.isSimplePagination ?? coreConfig.is_simple_pagination
37
- )
38
-
39
- const pageOptions = computed(() => {
40
- if (!props.options?.limit) {
41
- return undefined
42
- }
43
-
44
- return {
45
- ...initPageOptions({
46
- limit: props.options.limit,
47
- primary: props.options.primary,
48
- }),
49
- totalCount: props.options.rawData.length,
50
- totalPage: Math.ceil(props.options.rawData.length / props.options.limit),
51
- currentPage: currentPage.value,
52
- }
53
- })
54
-
55
- const onPageChange = (page: number) => {
56
- currentPage.value = page
57
- }
58
-
59
- const itemsByPage = computed(() => {
60
- if (!pageOptions.value) {
61
- return props.options?.rawData
62
- }
63
-
64
- const start = (pageOptions.value.currentPage - 1) * pageOptions.value.limit
65
- const end = start + pageOptions.value.limit
66
-
67
- return props.options?.rawData.slice(start, end)
68
- })
69
- </script>
1
+ <template>
2
+ <Base
3
+ v-bind="$attrs"
4
+ :columns="options.columns"
5
+ :raw-data="itemsByPage"
6
+ :status="options.status"
7
+ :page-options="pageOptions"
8
+ :is-simple-pagination="isShowSimplePagination"
9
+ :is-hide-bottom-pagination="options.isHideBottomPagination"
10
+ @page-change="onPageChange"
11
+ >
12
+ <template v-for="(_, slot) of $slots" #[slot]="slotProps">
13
+ <slot :name="slot" v-bind="slotProps || {}" />
14
+ </template>
15
+ </Base>
16
+ </template>
17
+ <script lang="ts" setup>
18
+ import { computed, type PropType, ref } from 'vue'
19
+ import { type ISimpleTableOptions } from '#core/components/Table/types'
20
+ import Base from '#core/components/Table/Base.vue'
21
+ import { initPageOptions } from '#core/composables/loaderPage'
22
+ import { useCoreConfig } from '#core/composables/useConfig'
23
+
24
+ defineSlots<{
25
+ 'empty-state': () => any
26
+ 'loading-state': () => any
27
+ }>()
28
+
29
+ const props = defineProps({
30
+ options: { type: Object as PropType<ISimpleTableOptions>, required: true },
31
+ })
32
+
33
+ const currentPage = ref(1)
34
+ const coreConfig = useCoreConfig()
35
+ const isShowSimplePagination = computed(
36
+ (): boolean => props.options.isSimplePagination ?? coreConfig.is_simple_pagination
37
+ )
38
+
39
+ const pageOptions = computed(() => {
40
+ if (!props.options?.limit) {
41
+ return undefined
42
+ }
43
+
44
+ return {
45
+ ...initPageOptions({
46
+ limit: props.options.limit,
47
+ primary: props.options.primary,
48
+ }),
49
+ totalCount: props.options.rawData.length,
50
+ totalPage: Math.ceil(props.options.rawData.length / props.options.limit),
51
+ currentPage: currentPage.value,
52
+ }
53
+ })
54
+
55
+ const onPageChange = (page: number) => {
56
+ currentPage.value = page
57
+ }
58
+
59
+ const itemsByPage = computed(() => {
60
+ if (!pageOptions.value) {
61
+ return props.options?.rawData
62
+ }
63
+
64
+ const start = (pageOptions.value.currentPage - 1) * pageOptions.value.limit
65
+ const end = start + pageOptions.value.limit
66
+
67
+ return props.options?.rawData.slice(start, end)
68
+ })
69
+ </script>
@@ -1,65 +1,65 @@
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
- v-bind="$attrs"
12
- :columns="options.columns"
13
- :raw-data="options.rawData"
14
- :status="options.status"
15
- :page-options="options.pageOptions"
16
- :is-simple-pagination="isShowSimplePagination"
17
- :is-hide-bottom-pagination="options.isHideBottomPagination"
18
- @page-change="onPageChange"
19
- >
20
- <template v-for="(_, slot) of $slots" #[slot]="slotProps">
21
- <slot :name="slot" v-bind="slotProps || {}" />
22
- </template>
23
- </Base>
24
- </div>
25
- </template>
26
- <script lang="ts" setup>
27
- import { type PropType } from 'vue'
28
- import { type ITableOptions } from '#core/components/Table/types'
29
- import { _debounce, computed, ref, watch } from '#imports'
30
- import { useCoreConfig } from '#core/composables/useConfig'
31
- import Base from '#core/components/Table/Base.vue'
32
-
33
- defineSlots<{
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<ITableOptions>, required: true },
45
- })
46
-
47
- const coreConfig = useCoreConfig()
48
-
49
- const q = ref(props.options?.pageOptions.search ?? '')
50
-
51
- const isShowSimplePagination = computed(
52
- (): boolean => props.options.isSimplePagination ?? coreConfig.is_simple_pagination
53
- )
54
-
55
- watch(
56
- q,
57
- _debounce((value) => {
58
- emits('search', value)
59
- }, 500)
60
- )
61
-
62
- const onPageChange = (page: number) => {
63
- emits('pageChange', page)
64
- }
65
- </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
+ v-bind="$attrs"
12
+ :columns="options.columns"
13
+ :raw-data="options.rawData"
14
+ :status="options.status"
15
+ :page-options="options.pageOptions"
16
+ :is-simple-pagination="isShowSimplePagination"
17
+ :is-hide-bottom-pagination="options.isHideBottomPagination"
18
+ @page-change="onPageChange"
19
+ >
20
+ <template v-for="(_, slot) of $slots" #[slot]="slotProps">
21
+ <slot :name="slot" v-bind="slotProps || {}" />
22
+ </template>
23
+ </Base>
24
+ </div>
25
+ </template>
26
+ <script lang="ts" setup>
27
+ import { type PropType } from 'vue'
28
+ import { type ITableOptions } from '#core/components/Table/types'
29
+ import { _debounce, computed, ref, watch } from '#imports'
30
+ import { useCoreConfig } from '#core/composables/useConfig'
31
+ import Base from '#core/components/Table/Base.vue'
32
+
33
+ defineSlots<{
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<ITableOptions>, required: true },
45
+ })
46
+
47
+ const coreConfig = useCoreConfig()
48
+
49
+ const q = ref(props.options?.pageOptions.search ?? '')
50
+
51
+ const isShowSimplePagination = computed(
52
+ (): boolean => props.options.isSimplePagination ?? coreConfig.is_simple_pagination
53
+ )
54
+
55
+ watch(
56
+ q,
57
+ _debounce((value) => {
58
+ emits('search', value)
59
+ }, 500)
60
+ )
61
+
62
+ const onPageChange = (page: number) => {
63
+ emits('pageChange', page)
64
+ }
65
+ </script>
@@ -1,64 +1,64 @@
1
- <template>
2
- <UTabs
3
- v-bind="attrs"
4
- :model-value="modelValue"
5
- :class="$props.class"
6
- :items="items"
7
- :orientation="orientation"
8
- :default-index="defaultIndex"
9
- :ui="ui"
10
- @change="change"
11
- >
12
- <template #default="{ item, index, selected }">
13
- <slot name="default" :item="item" :index="index" :selected="selected" />
14
- </template>
15
-
16
- <template #item="{ item, index, selected }">
17
- <slot name="item" :item="item" :index="index" :selected="selected" />
18
- </template>
19
- </UTabs>
20
- </template>
21
-
22
- <script setup lang="ts">
23
- import { useUiConfig, type PropType, useUI, toRef } from '#imports'
24
- import { tabs } from '#core/ui.config'
25
- import type { Strategy, TabItem } from '#ui/types'
26
-
27
- const config = useUiConfig<typeof tabs>(tabs, 'tabs')
28
-
29
- const props = defineProps({
30
- modelValue: {
31
- type: Number,
32
- default: undefined,
33
- },
34
- items: {
35
- type: Array as PropType<TabItem[]>,
36
- default: () => [],
37
- },
38
- orientation: {
39
- type: String as PropType<'horizontal' | 'vertical'>,
40
- default: 'horizontal',
41
- validator: (value: string) => ['horizontal', 'vertical'].includes(value),
42
- },
43
- defaultIndex: {
44
- type: Number,
45
- default: 0,
46
- },
47
- class: {
48
- type: [String, Object, Array] as PropType<any>,
49
- default: () => '',
50
- },
51
- ui: {
52
- type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
53
- default: () => ({}),
54
- },
55
- })
56
-
57
- const emits = defineEmits(['update:modelValue', 'change'])
58
-
59
- const change = (index: number) => {
60
- emits('change', index)
61
- }
62
-
63
- const { ui, attrs } = useUI('tabs', toRef(props, 'ui'), config, toRef(props, 'class'))
64
- </script>
1
+ <template>
2
+ <UTabs
3
+ v-bind="attrs"
4
+ :model-value="modelValue"
5
+ :class="$props.class"
6
+ :items="items"
7
+ :orientation="orientation"
8
+ :default-index="defaultIndex"
9
+ :ui="ui"
10
+ @change="change"
11
+ >
12
+ <template #default="{ item, index, selected }">
13
+ <slot name="default" :item="item" :index="index" :selected="selected" />
14
+ </template>
15
+
16
+ <template #item="{ item, index, selected }">
17
+ <slot name="item" :item="item" :index="index" :selected="selected" />
18
+ </template>
19
+ </UTabs>
20
+ </template>
21
+
22
+ <script setup lang="ts">
23
+ import { useUiConfig, type PropType, useUI, toRef } from '#imports'
24
+ import { tabs } from '#core/ui.config'
25
+ import type { Strategy, TabItem } from '#ui/types'
26
+
27
+ const config = useUiConfig<typeof tabs>(tabs, 'tabs')
28
+
29
+ const props = defineProps({
30
+ modelValue: {
31
+ type: Number,
32
+ default: undefined,
33
+ },
34
+ items: {
35
+ type: Array as PropType<TabItem[]>,
36
+ default: () => [],
37
+ },
38
+ orientation: {
39
+ type: String as PropType<'horizontal' | 'vertical'>,
40
+ default: 'horizontal',
41
+ validator: (value: string) => ['horizontal', 'vertical'].includes(value),
42
+ },
43
+ defaultIndex: {
44
+ type: Number,
45
+ default: 0,
46
+ },
47
+ class: {
48
+ type: [String, Object, Array] as PropType<any>,
49
+ default: () => '',
50
+ },
51
+ ui: {
52
+ type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
53
+ default: () => ({}),
54
+ },
55
+ })
56
+
57
+ const emits = defineEmits(['update:modelValue', 'change'])
58
+
59
+ const change = (index: number) => {
60
+ emits('change', index)
61
+ }
62
+
63
+ const { ui, attrs } = useUI('tabs', toRef(props, 'ui'), config, toRef(props, 'class'))
64
+ </script>
@@ -4,6 +4,6 @@ import { type IFieldProps, type IFormField } from '../components/Form/types';
4
4
  interface IFieldContext<TValue> extends FieldContext<TValue> {
5
5
  wrapperProps: ComputedRef<IFieldProps>;
6
6
  }
7
- export declare const useFieldHOC: <TValue = unknown>(newFormProps: IFieldProps, opts?: Partial<FieldOptions<TValue>> | undefined) => IFieldContext<TValue>;
7
+ export declare const useFieldHOC: <TValue = unknown>(newFormProps: IFieldProps, opts?: Partial<FieldOptions<TValue>>) => IFieldContext<TValue>;
8
8
  export declare const createFormFields: (fields: () => IFormField[]) => any;
9
9
  export {};
@@ -85,5 +85,5 @@ export interface IUsePageLoader<T> {
85
85
  export declare const apiAddHelper: <T>(state: () => IAPIAddState<T>, onUpdateStatus: (status: IStatus) => void, onUpdateOptions: (options: IAPIOptions) => void, onUpdateData: (data: any) => void, onUpdateItems: (data: any[]) => void, data: any, opts: IPageLoaderOptions<any> & IPageFetchLoaderOptions) => Promise<void>;
86
86
  export declare const apiDeleteHelper: <T>(state: () => IAPIDeleteState<T>, onUpdateStatus: (status: IStatus) => void, onUpdateOptions: (options: IAPIOptions) => void, _onUpdateData: (data: T) => void, onUpdateItems: (data: T[]) => void, id: string | number, opts: IPageLoaderOptions<any> & IPageDeleteLoaderOptions) => Promise<void>;
87
87
  export declare const apiFetchHelper: <T>(state: () => IAPIFetchState<T>, onUpdateStatus: (status: IStatus) => void, onUpdateOptions: (options: IPageOptions) => void, onUpdateItems: (items: T[]) => void, page: number, query: string, opts: IPageLoaderOptions<T> & IPageFetchLoaderOptions<any>) => Promise<void>;
88
- export declare const apiFindHelper: <T>(state: () => IAPIFindState<T>, onUpdateStatus: (status: IStatus) => void, onUpdateOptions: (options: IAPIOptions) => void, onUpdateData: (data: any) => void, id: string | number, opts: IPageLoaderOptions<T> & IPageFindLoaderOptions<Record<string, any>>) => Promise<void>;
88
+ export declare const apiFindHelper: <T>(state: () => IAPIFindState<T>, onUpdateStatus: (status: IStatus) => void, onUpdateOptions: (options: IAPIOptions) => void, onUpdateData: (data: any) => void, id: string | number, opts: IPageLoaderOptions<T> & IPageFindLoaderOptions) => Promise<void>;
89
89
  export declare const updateHelper: <T>(state: () => IAPIUpdateState<T>, onUpdateStatus: (status: IStatus) => void, onUpdateOptions: (options: IAPIOptions) => void, onUpdateData: (data: T) => void, _onUpdateItems: (data: T[]) => void, onUpdateOldData: (data: T) => void, id: string | number, data: any, opts: IPageLoaderOptions<any> & IPageUpdateLoaderOptions) => Promise<void>;
@@ -2,6 +2,10 @@ export declare class TimeHelper {
2
2
  static thaiFormat: (dateStr: Date, formatStr: string) => string;
3
3
  static displayDate: (time: string | Date) => string;
4
4
  static displayDateTime: (time: string | Date) => string;
5
+ static displayDateRange: (startDate: Date | string, endDate: Date | string) => {
6
+ startDate: Date | string;
7
+ endDate: Date | string;
8
+ };
5
9
  static toUTC: (time: string | Date) => string;
6
10
  static toLocal: (time: string | Date) => string;
7
11
  static getCurrentDate: () => string;
@@ -36,6 +36,22 @@ export class TimeHelper {
36
36
  const newTime = TimeHelper.thaiFormat(parsedTime, dateTimeFormatDisplay);
37
37
  return isValid(parsedTime) ? newTime : time;
38
38
  };
39
+ static displayDateRange = (startDate, endDate) => {
40
+ if (!startDate || !endDate) {
41
+ return {
42
+ startDate,
43
+ endDate
44
+ };
45
+ }
46
+ const parsedStartDate = isDate(startDate) ? startDate : new Date(startDate);
47
+ const parsedEndDate = isDate(endDate) ? endDate : new Date(endDate);
48
+ const newStartDate = TimeHelper.thaiFormat(parsedStartDate, dateFormatDisplay);
49
+ const newEndDate = TimeHelper.thaiFormat(parsedEndDate, dateFormatDisplay);
50
+ return {
51
+ startDate: isValid(parsedStartDate) ? newStartDate : startDate,
52
+ endDate: isValid(parsedEndDate) ? newEndDate : endDate
53
+ };
54
+ };
39
55
  static toUTC = (time) => {
40
56
  if (!time) {
41
57
  return time;