@finema/core 1.4.115 → 1.4.116

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 (69) 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 +75 -75
  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 +222 -222
  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/index.vue +83 -83
  21. package/dist/runtime/components/Form/InputNumber/index.vue +27 -27
  22. package/dist/runtime/components/Form/InputRadio/index.vue +27 -27
  23. package/dist/runtime/components/Form/InputSelect/index.vue +36 -36
  24. package/dist/runtime/components/Form/InputStatic/index.vue +16 -16
  25. package/dist/runtime/components/Form/InputTags/index.vue +145 -134
  26. package/dist/runtime/components/Form/InputText/index.vue +67 -67
  27. package/dist/runtime/components/Form/InputTextarea/index.vue +25 -25
  28. package/dist/runtime/components/Form/InputToggle/index.vue +14 -14
  29. package/dist/runtime/components/Form/InputUploadDropzone/index.vue +206 -206
  30. package/dist/runtime/components/Form/InputUploadDropzoneAuto/index.vue +341 -333
  31. package/dist/runtime/components/Form/InputUploadDropzoneAuto/types.d.ts +2 -1
  32. package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/{Item.vue → ItemUpload.vue} +241 -260
  33. package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/ItemView.vue +89 -0
  34. package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/index.vue +164 -140
  35. package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/types.d.ts +4 -3
  36. package/dist/runtime/components/Form/InputUploadDropzoneImageAutoMultiple/{item.vue → ItemUpload.vue} +161 -179
  37. package/dist/runtime/components/Form/InputUploadDropzoneImageAutoMultiple/ItemView.vue +64 -0
  38. package/dist/runtime/components/Form/InputUploadDropzoneImageAutoMultiple/index.vue +172 -148
  39. package/dist/runtime/components/Form/InputUploadDropzoneImageAutoMultiple/types.d.ts +4 -3
  40. package/dist/runtime/components/Form/InputUploadFileClassic/index.vue +95 -95
  41. package/dist/runtime/components/Form/InputUploadFileClassicAuto/index.vue +151 -143
  42. package/dist/runtime/components/Form/InputUploadFileClassicAuto/types.d.ts +2 -1
  43. package/dist/runtime/components/Form/InputUploadImageAuto/index.vue +219 -222
  44. package/dist/runtime/components/Form/InputUploadImageAuto/types.d.ts +2 -1
  45. package/dist/runtime/components/Form/InputWYSIWYG/index.vue +53 -53
  46. package/dist/runtime/components/Form/index.vue +6 -6
  47. package/dist/runtime/components/Form/types.d.ts +6 -0
  48. package/dist/runtime/components/Icon.vue +23 -23
  49. package/dist/runtime/components/Image.vue +36 -36
  50. package/dist/runtime/components/Loader.vue +27 -27
  51. package/dist/runtime/components/Modal/index.vue +146 -146
  52. package/dist/runtime/components/QRCode.vue +22 -22
  53. package/dist/runtime/components/SimplePagination.vue +96 -96
  54. package/dist/runtime/components/Slideover/index.vue +110 -110
  55. package/dist/runtime/components/Table/Base.vue +139 -139
  56. package/dist/runtime/components/Table/ColumnDate.vue +16 -16
  57. package/dist/runtime/components/Table/ColumnDateTime.vue +18 -18
  58. package/dist/runtime/components/Table/ColumnImage.vue +15 -15
  59. package/dist/runtime/components/Table/ColumnNumber.vue +14 -14
  60. package/dist/runtime/components/Table/ColumnText.vue +25 -25
  61. package/dist/runtime/components/Table/Simple.vue +69 -69
  62. package/dist/runtime/components/Table/index.vue +65 -65
  63. package/dist/runtime/components/Tabs/index.vue +64 -64
  64. package/dist/runtime/helpers/apiListHelper.d.ts +0 -1
  65. package/dist/runtime/helpers/apiObjectHelper.d.ts +0 -1
  66. package/dist/runtime/helpers/apiPageHelper.d.ts +0 -1
  67. package/dist/runtime/helpers/componentHelper.d.ts +6 -0
  68. package/dist/runtime/helpers/componentHelper.mjs +15 -0
  69. package/package.json +92 -92
@@ -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>
@@ -8,7 +8,6 @@ export interface IListRunLoaderOptions<T, D = Record<string, any>> {
8
8
  data?: D;
9
9
  }
10
10
  export interface IListLoaderOptions<T, O> {
11
- prefix?: string;
12
11
  url: string;
13
12
  primary?: string;
14
13
  mockItems?: T[];
@@ -10,7 +10,6 @@ export interface IObjectRunLoaderOptions<T, D = Record<string, any>> {
10
10
  data?: D;
11
11
  }
12
12
  export interface IObjectLoaderOptions<T, B, O> {
13
- prefix?: string;
14
13
  url: string;
15
14
  method: Method;
16
15
  primary?: string;
@@ -29,7 +29,6 @@ export interface IPageAddLoaderOptions<D = Record<string, any>> {
29
29
  data?: D;
30
30
  }
31
31
  export interface IPageLoaderOptions<T> {
32
- prefix?: string;
33
32
  baseURL: string;
34
33
  primary?: string;
35
34
  isMock?: boolean;
@@ -3,6 +3,7 @@ export declare const checkMaxSize: (file: File, acceptFileSize?: number) => bool
3
3
  export declare const checkFileType: (file: File, acceptFileType: string | string[]) => boolean;
4
4
  export declare const generateURL: (file: File) => string;
5
5
  export declare const isImage: (file: File) => boolean;
6
+ export declare const isImageFromPath: (path?: string) => boolean;
6
7
  export declare const useFileAllocate: (selectedFile: Ref<File | undefined | null>, props: {
7
8
  accept?: string | string[];
8
9
  maxSize?: number;
@@ -15,6 +16,11 @@ export declare const useFileAllocate: (selectedFile: Ref<File | undefined | null
15
16
  isAcceptFileUseMb: any;
16
17
  acceptFile: any;
17
18
  };
19
+ export declare const useFileSize: (size?: number) => {
20
+ isSelectedFileUseMb: any;
21
+ selectedFileSizeKb: any;
22
+ selectedFileSizeMb: any;
23
+ };
18
24
  export declare const useFileProgress: () => {
19
25
  percent: any;
20
26
  onUploadProgress: (progressEvent: ProgressEvent) => void;
@@ -38,6 +38,11 @@ export const generateURL = (file) => {
38
38
  export const isImage = (file) => {
39
39
  return file.type.startsWith("image/");
40
40
  };
41
+ export const isImageFromPath = (path = "") => {
42
+ const imageExtensions = [".jpg", ".jpeg", ".png", ".gif", ".bmp", ".webp"];
43
+ const extension = path.toLowerCase().substring(path.lastIndexOf("."));
44
+ return imageExtensions.includes(extension);
45
+ };
41
46
  export const useFileAllocate = (selectedFile, props) => {
42
47
  const selectedFileSizeKb = computed(() => ((selectedFile.value?.size || 0) / 1e3).toFixed(2));
43
48
  const selectedFileSizeMb = computed(
@@ -60,6 +65,16 @@ export const useFileAllocate = (selectedFile, props) => {
60
65
  acceptFile
61
66
  };
62
67
  };
68
+ export const useFileSize = (size = 0) => {
69
+ const isSelectedFileUseMb = computed(() => size / 1e3 > 1024);
70
+ const selectedFileSizeKb = computed(() => (size / 1e3).toFixed(2));
71
+ const selectedFileSizeMb = computed(() => (size / 1e3 / 1e3).toFixed(2));
72
+ return {
73
+ isSelectedFileUseMb,
74
+ selectedFileSizeKb,
75
+ selectedFileSizeMb
76
+ };
77
+ };
63
78
  export const useFileProgress = () => {
64
79
  const percent = ref(0);
65
80
  const onUploadProgress = (progressEvent) => {