@finema/core 2.52.2 → 2.52.4

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 (35) hide show
  1. package/dist/module.json +1 -1
  2. package/dist/module.mjs +1 -1
  3. package/dist/runtime/components/Form/FieldWrapper.vue +13 -13
  4. package/dist/runtime/components/Form/Fields.vue +13 -13
  5. package/dist/runtime/components/Form/InputCheckbox/index.vue +18 -18
  6. package/dist/runtime/components/Form/InputComponent/index.vue +1 -1
  7. package/dist/runtime/components/Form/InputMonth/index.vue +51 -51
  8. package/dist/runtime/components/Form/InputNumber/index.vue +20 -20
  9. package/dist/runtime/components/Form/InputSelectMultiple/index.vue +43 -43
  10. package/dist/runtime/components/Form/InputTags/index.vue +23 -23
  11. package/dist/runtime/components/Form/InputTextarea/index.vue +18 -18
  12. package/dist/runtime/components/Form/InputToggle/index.vue +17 -17
  13. package/dist/runtime/components/Form/InputUploadDropzone/index.vue +30 -30
  14. package/dist/runtime/components/Form/InputUploadDropzoneAuto/index.vue +50 -50
  15. package/dist/runtime/components/Form/fileState/EmptyState.vue +21 -21
  16. package/dist/runtime/components/Form/fileState/FailedState.vue +33 -33
  17. package/dist/runtime/components/Form/fileState/LoadingState.vue +24 -24
  18. package/dist/runtime/components/Form/fileState/PreviewModal.vue +23 -23
  19. package/dist/runtime/components/Form/index.vue +5 -5
  20. package/dist/runtime/components/Image.vue +28 -28
  21. package/dist/runtime/components/Log/index.vue +17 -17
  22. package/dist/runtime/components/Table/Base.vue +89 -94
  23. package/dist/runtime/components/Table/Base.vue.d.ts +1 -1
  24. package/dist/runtime/components/Table/ColumnDate.vue +1 -1
  25. package/dist/runtime/components/Table/ColumnDateTime.vue +1 -1
  26. package/dist/runtime/components/Table/ColumnImage.vue +4 -4
  27. package/dist/runtime/components/Table/ColumnText.vue +1 -1
  28. package/dist/runtime/components/Table/Pagination.vue +33 -23
  29. package/dist/runtime/components/Table/Pagination.vue.d.ts +1 -1
  30. package/dist/runtime/components/Table/index.vue +27 -30
  31. package/dist/runtime/components/Table/index.vue.d.ts +1 -1
  32. package/dist/runtime/server/tsconfig.json +3 -3
  33. package/dist/runtime/theme/table.d.ts +1 -0
  34. package/dist/runtime/theme/table.js +2 -1
  35. package/package.json +2 -2
@@ -1,54 +1,54 @@
1
1
  <template>
2
- <FieldWrapper v-bind="wrapperProps">
3
- <div
4
- ref="dropzoneRef"
5
- :class="theme.base()"
6
- >
7
- <div :class="theme.wrapper()">
8
- <!-- Empty State -->
9
- <EmptyState
10
- v-if="uploadState.isEmpty.value"
11
- :theme="theme"
12
- :select-file-label="selectFileLabel"
13
- :select-file-sub-label="selectFileSubLabel"
14
- :placeholder="placeholder"
15
- @open-file="uploadState.handleOpenFile"
16
- />
17
-
18
- <!-- Loading State -->
19
- <LoadingState
20
- v-if="uploadState.isUploading.value"
21
- :theme="theme"
22
- :selected-file="uploadState.selectedFile.value"
23
- :percent="uploadState.percent.value"
24
- :uploading-label="uploadingLabel"
25
- />
26
-
27
- <!-- Success State -->
28
- <SuccessState
29
- v-if="uploadState.isSuccess.value"
30
- :theme="theme"
31
- :value="value"
32
- :disabled="wrapperProps.disabled"
33
- :readonly="wrapperProps.readonly"
34
- @preview="uploadState.handlePreview"
35
- @download="handleDownloadFile"
36
- @delete="uploadState.handleDeleteFile"
37
- />
38
-
39
- <!-- Failed State -->
40
- <FailedState
41
- v-if="uploadState.isError.value"
42
- :theme="theme"
43
- :selected-file="uploadState.selectedFile.value"
44
- :upload-failed-label="uploadFailedLabel"
45
- :retry-label="retryLabel"
46
- @retry="uploadState.handleRetryUpload"
47
- @delete="uploadState.handleDeleteFile"
48
- />
49
- </div>
50
- </div>
51
- </FieldWrapper>
2
+ <FieldWrapper v-bind="wrapperProps">
3
+ <div
4
+ ref="dropzoneRef"
5
+ :class="theme.base()"
6
+ >
7
+ <div :class="theme.wrapper()">
8
+ <!-- Empty State -->
9
+ <EmptyState
10
+ v-if="uploadState.isEmpty.value"
11
+ :theme="theme"
12
+ :select-file-label="selectFileLabel"
13
+ :select-file-sub-label="selectFileSubLabel"
14
+ :placeholder="placeholder"
15
+ @open-file="uploadState.handleOpenFile"
16
+ />
17
+
18
+ <!-- Loading State -->
19
+ <LoadingState
20
+ v-if="uploadState.isUploading.value"
21
+ :theme="theme"
22
+ :selected-file="uploadState.selectedFile.value"
23
+ :percent="uploadState.percent.value"
24
+ :uploading-label="uploadingLabel"
25
+ />
26
+
27
+ <!-- Success State -->
28
+ <SuccessState
29
+ v-if="uploadState.isSuccess.value"
30
+ :theme="theme"
31
+ :value="value"
32
+ :disabled="wrapperProps.disabled"
33
+ :readonly="wrapperProps.readonly"
34
+ @preview="uploadState.handlePreview"
35
+ @download="handleDownloadFile"
36
+ @delete="uploadState.handleDeleteFile"
37
+ />
38
+
39
+ <!-- Failed State -->
40
+ <FailedState
41
+ v-if="uploadState.isError.value"
42
+ :theme="theme"
43
+ :selected-file="uploadState.selectedFile.value"
44
+ :upload-failed-label="uploadFailedLabel"
45
+ :retry-label="retryLabel"
46
+ @retry="uploadState.handleRetryUpload"
47
+ @delete="uploadState.handleDeleteFile"
48
+ />
49
+ </div>
50
+ </div>
51
+ </FieldWrapper>
52
52
  </template>
53
53
 
54
54
  <script setup>
@@ -1,25 +1,25 @@
1
1
  <template>
2
- <div :class="theme.placeholderWrapper()">
3
- <Icon
4
- :name="icons.uploadIcon"
5
- :class="theme.labelIcon()"
6
- />
7
- <div :class="theme.labelWrapper()">
8
- <p
9
- class="text-primary cursor-pointer font-bold"
10
- @click="$emit('openFile')"
11
- >
12
- {{ selectFileLabel }}
13
- </p>
14
- <p>{{ selectFileSubLabel }}</p>
15
- </div>
16
- <p
17
- v-if="placeholder"
18
- :class="theme.placeholder()"
19
- >
20
- {{ placeholder }}
21
- </p>
22
- </div>
2
+ <div :class="theme.placeholderWrapper()">
3
+ <Icon
4
+ :name="icons.uploadIcon"
5
+ :class="theme.labelIcon()"
6
+ />
7
+ <div :class="theme.labelWrapper()">
8
+ <p
9
+ class="text-primary cursor-pointer font-bold"
10
+ @click="$emit('openFile')"
11
+ >
12
+ {{ selectFileLabel }}
13
+ </p>
14
+ <p>{{ selectFileSubLabel }}</p>
15
+ </div>
16
+ <p
17
+ v-if="placeholder"
18
+ :class="theme.placeholder()"
19
+ >
20
+ {{ placeholder }}
21
+ </p>
22
+ </div>
23
23
  </template>
24
24
 
25
25
  <script setup>
@@ -1,37 +1,37 @@
1
1
  <template>
2
- <div :class="theme.onFailedWrapper()">
3
- <div :class="theme.onFailedFailedImgWrapper()">
4
- <Icon
5
- :name="getFileIcon(selectedFile)"
6
- :class="theme.onFailedFailedIconClass()"
7
- />
8
- </div>
9
- <div :class="theme.onFailedTextWrapper()">
10
- <div class="truncate">
11
- <h1 class="truncate font-bold">
12
- {{ selectedFile.name }}
13
- </h1>
14
- <p class="text-error truncate font-light">
15
- {{ uploadFailedLabel }}
16
- </p>
17
- <Button
18
- variant="link"
19
- :icon="icons.actionRetryIcon"
20
- :class="theme.actionRetryBtnClass()"
21
- color="primary"
22
- @click="$emit('retry')"
23
- >
24
- {{ retryLabel }}
25
- </Button>
26
- </div>
27
- <Icon
28
- :name="icons.actionDeleteIcon"
29
- :class="theme.actionDeleteIconClass()"
30
- title="ลบไฟล์"
31
- @click="$emit('delete')"
32
- />
33
- </div>
34
- </div>
2
+ <div :class="theme.onFailedWrapper()">
3
+ <div :class="theme.onFailedFailedImgWrapper()">
4
+ <Icon
5
+ :name="getFileIcon(selectedFile)"
6
+ :class="theme.onFailedFailedIconClass()"
7
+ />
8
+ </div>
9
+ <div :class="theme.onFailedTextWrapper()">
10
+ <div class="truncate">
11
+ <h1 class="truncate font-bold">
12
+ {{ selectedFile.name }}
13
+ </h1>
14
+ <p class="text-error truncate font-light">
15
+ {{ uploadFailedLabel }}
16
+ </p>
17
+ <Button
18
+ variant="link"
19
+ :icon="icons.actionRetryIcon"
20
+ :class="theme.actionRetryBtnClass()"
21
+ color="primary"
22
+ @click="$emit('retry')"
23
+ >
24
+ {{ retryLabel }}
25
+ </Button>
26
+ </div>
27
+ <Icon
28
+ :name="icons.actionDeleteIcon"
29
+ :class="theme.actionDeleteIconClass()"
30
+ title="ลบไฟล์"
31
+ @click="$emit('delete')"
32
+ />
33
+ </div>
34
+ </div>
35
35
  </template>
36
36
 
37
37
  <script setup>
@@ -1,28 +1,28 @@
1
1
  <template>
2
- <div :class="theme.onLoadingWrapper()">
3
- <div :class="theme.onLoadingPlaceholderWrapper()">
4
- <Icon
5
- :name="getFileIcon(selectedFile)"
6
- :class="theme.onLoadingPlaceholderIconClass()"
7
- />
8
- </div>
9
- <div :class="theme.onLoadingTextWrapper()">
10
- <div class="truncate">
11
- <h1 class="truncate font-bold">
12
- {{ selectedFile.name }}
13
- </h1>
14
- <p class="truncate font-light text-gray-400">
15
- {{ getFileSize(selectedFile) }} - {{ percent }}% {{ uploadingLabel }}
16
- </p>
17
- </div>
18
- <div>
19
- <Icon
20
- :name="icons.loadingIcon"
21
- :class="theme.onLoadingLoadingIconClass()"
22
- />
23
- </div>
24
- </div>
25
- </div>
2
+ <div :class="theme.onLoadingWrapper()">
3
+ <div :class="theme.onLoadingPlaceholderWrapper()">
4
+ <Icon
5
+ :name="getFileIcon(selectedFile)"
6
+ :class="theme.onLoadingPlaceholderIconClass()"
7
+ />
8
+ </div>
9
+ <div :class="theme.onLoadingTextWrapper()">
10
+ <div class="truncate">
11
+ <h1 class="truncate font-bold">
12
+ {{ selectedFile.name }}
13
+ </h1>
14
+ <p class="truncate font-light text-gray-400">
15
+ {{ getFileSize(selectedFile) }} - {{ percent }}% {{ uploadingLabel }}
16
+ </p>
17
+ </div>
18
+ <div>
19
+ <Icon
20
+ :name="icons.loadingIcon"
21
+ :class="theme.onLoadingLoadingIconClass()"
22
+ />
23
+ </div>
24
+ </div>
25
+ </div>
26
26
  </template>
27
27
 
28
28
  <script setup>
@@ -1,29 +1,29 @@
1
1
  <template>
2
- <Modal
3
- :close="{ onClick: () => emits('close', false) }"
4
- :dismissible="false"
5
- :title="value?.name"
2
+ <Modal
3
+ :close="{ onClick: () => emits('close', false) }"
4
+ :dismissible="false"
5
+ :title="value?.name"
6
6
  :ui="{
7
7
  content: 'max-w-3xl'
8
- }"
9
- >
10
- <template #body>
11
- <div class="flex justify-center">
12
- <img
13
- v-if="value && isImageFromPath(value.path)"
14
- :src="value.url"
15
- alt="img-preview"
16
- class="max-h-96 max-w-full rounded-lg"
17
- />
18
- <video
19
- v-else-if="value && isVideoFromPath(value.path)"
20
- :src="value.url"
21
- controls
22
- class="max-h-96 max-w-full"
23
- />
24
- </div>
25
- </template>
26
- </Modal>
8
+ }"
9
+ >
10
+ <template #body>
11
+ <div class="flex justify-center">
12
+ <img
13
+ v-if="value && isImageFromPath(value.path)"
14
+ :src="value.url"
15
+ alt="img-preview"
16
+ class="max-h-96 max-w-full rounded-lg"
17
+ />
18
+ <video
19
+ v-else-if="value && isVideoFromPath(value.path)"
20
+ :src="value.url"
21
+ controls
22
+ class="max-h-96 max-w-full"
23
+ />
24
+ </div>
25
+ </template>
26
+ </Modal>
27
27
  </template>
28
28
 
29
29
  <script setup>
@@ -1,5 +1,5 @@
1
- <template>
2
- <form class="form">
3
- <slot />
4
- </form>
5
- </template>
1
+ <template>
2
+ <form class="form">
3
+ <slot />
4
+ </form>
5
+ </template>
@@ -1,32 +1,32 @@
1
1
  <template>
2
- <UseImage v-bind="$props">
3
- <template #loading>
4
- <slot name="loading">
5
- <div
6
- class="flex h-full w-full items-center justify-center"
7
- >
8
- <Loader
9
- :loading="true"
10
- />
11
- </div>
12
- </slot>
13
- </template>
14
-
15
- <template #error>
16
- <slot name="error">
17
- <div
18
- class="flex h-full w-full items-center justify-center"
19
- >
20
- <p class="text-error-400">
21
- <Icon
22
- name="i-heroicons:exclamation-circle-solid"
23
- class="text-error-400 size-8"
24
- />
25
- </p>
26
- </div>
27
- </slot>
28
- </template>
29
- </UseImage>
2
+ <UseImage v-bind="$props">
3
+ <template #loading>
4
+ <slot name="loading">
5
+ <div
6
+ class="flex h-full w-full items-center justify-center"
7
+ >
8
+ <Loader
9
+ :loading="true"
10
+ />
11
+ </div>
12
+ </slot>
13
+ </template>
14
+
15
+ <template #error>
16
+ <slot name="error">
17
+ <div
18
+ class="flex h-full w-full items-center justify-center"
19
+ >
20
+ <p class="text-error-400">
21
+ <Icon
22
+ name="i-heroicons:exclamation-circle-solid"
23
+ class="text-error-400 size-8"
24
+ />
25
+ </p>
26
+ </div>
27
+ </slot>
28
+ </template>
29
+ </UseImage>
30
30
  </template>
31
31
 
32
32
  <script setup>
@@ -1,21 +1,21 @@
1
1
  <template>
2
- <DevOnly>
3
- <TeleportSafe
4
- to="#dev-logs"
5
- >
6
- <LogItem
7
- v-if="typeof data !== 'undefined'"
8
- :data="data"
9
- :title="title"
10
- />
11
- <LogItem
12
- v-for="(item, index) in dataItems"
13
- :key="index"
14
- :data="item"
15
- :title="`${title} #${index + 1}`"
16
- />
17
- </TeleportSafe>
18
- </DevOnly>
2
+ <DevOnly>
3
+ <TeleportSafe
4
+ to="#dev-logs"
5
+ >
6
+ <LogItem
7
+ v-if="typeof data !== 'undefined'"
8
+ :data="data"
9
+ :title="title"
10
+ />
11
+ <LogItem
12
+ v-for="(item, index) in dataItems"
13
+ :key="index"
14
+ :data="item"
15
+ :title="`${title} #${index + 1}`"
16
+ />
17
+ </TeleportSafe>
18
+ </DevOnly>
19
19
  </template>
20
20
 
21
21
  <script setup>
@@ -1,103 +1,96 @@
1
1
  <template>
2
- <div
3
- :class="theme.rootWrapper({
4
- class: [ui?.rootWrapper]
5
- })"
6
- >
7
- <Pagination
8
- v-if="!options.isHidePagination && !options.isHidePaginationTop"
9
- :options="options"
10
- :ui="ui"
11
- :page="page"
12
- :page-limit="pageLimit"
13
- class="border-b border-[#EAECF0]"
14
- @pageChange="onPageChange"
15
- @search="emits('search')"
16
- @pageLimitChange="changePageLimit"
17
- />
18
- <UTable
19
- :loading="options.status.isLoading"
20
- :columns="uTableCompatibleColumns"
21
- :data="options.rawData"
22
- v-bind="$attrs"
23
- >
24
- <template #loading>
25
- <Loader
26
- :loading="true"
27
- />
28
- </template>
29
- <template #empty>
30
- <slot
31
- v-if="options.status.isLoading"
32
- name="loading"
33
- >
34
- <Loader
35
- :loading="true"
36
- />
37
- </slot>
38
- <slot
39
- v-else-if="options.status.isError"
40
- name="error"
41
- >
42
- <div
43
- class="
44
- text-error-400 flex h-[200px] items-center justify-center text-2xl
45
- "
46
- >
47
- {{ StringHelper.getError(options.status.errorData) }}
48
- </div>
49
- </slot>
50
-
51
- <slot
52
- v-else
53
- name="error"
54
- >
55
- <Empty />
56
- </slot>
57
- </template>
58
- <template
59
- v-for="column in options.columns.filter((item) => !!item.type)"
60
- #[`${column.accessorKey}-cell`]="{ row }"
61
- :key="column.accessorKey"
62
- >
63
- <component
64
- :is="column.type === COLUMN_TYPES.COMPONENT ? column.component : columnTypeComponents[column.type]"
65
- v-if="column.type === COLUMN_TYPES.COMPONENT || columnTypeComponents[column.type]"
66
- :value="transformValue(column, row)"
67
- :column="column"
68
- :row="row"
69
- />
70
- </template>
71
- <template
72
- v-for="(_, slotName) of $slots"
73
- #[slotName]="slotProps"
74
- >
75
- <slot
76
- :name="slotName"
77
- v-bind="slotProps || {}"
78
- />
79
- </template>
80
- </UTable>
81
- <Pagination
82
- v-if="!options.isHidePagination && !options.isHidePaginationBottom"
83
- :options="options"
84
- :ui="ui"
85
- :page="page"
86
- :page-limit="pageLimit"
87
- class="rounded-b-lg border-t border-[#EAECF0]"
88
- @pageChange="onPageChange"
89
- @search="emits('search')"
90
- @pageLimitChange="changePageLimit"
91
- />
92
- </div>
2
+ <div
3
+ :class="
4
+ theme.rootWrapper({
5
+ class: [ui?.rootWrapper]
6
+ })
7
+ "
8
+ >
9
+ <Pagination
10
+ v-if="!options.isHidePagination && !options.isHidePaginationTop"
11
+ :options="options"
12
+ :ui="ui"
13
+ :page="page"
14
+ :page-limit="pageLimit"
15
+ class="border-b border-[#EAECF0]"
16
+ @pageChange="onPageChange"
17
+ @search="emits('search')"
18
+ @pageLimitChange="changePageLimit"
19
+ />
20
+ <UTable
21
+ :loading="options.status.isLoading"
22
+ :columns="uTableCompatibleColumns"
23
+ :data="options.rawData"
24
+ v-bind="$attrs"
25
+ :ui="ui"
26
+ >
27
+ <template #loading>
28
+ <Loader :loading="true" />
29
+ </template>
30
+ <template #empty>
31
+ <slot v-if="options.status.isLoading" name="loading">
32
+ <Loader :loading="true" />
33
+ </slot>
34
+ <slot v-else-if="options.status.isError" name="error">
35
+ <div
36
+ class="text-error-400 flex h-[200px] items-center justify-center text-2xl"
37
+ >
38
+ {{ StringHelper.getError(options.status.errorData) }}
39
+ </div>
40
+ </slot>
41
+
42
+ <slot v-else name="error">
43
+ <Empty />
44
+ </slot>
45
+ </template>
46
+ <template
47
+ v-for="column in options.columns.filter((item) => !!item.type)"
48
+ #[`${column.accessorKey}-cell`]="{ row }"
49
+ :key="column.accessorKey"
50
+ >
51
+ <component
52
+ :is="
53
+ column.type === COLUMN_TYPES.COMPONENT ? column.component : columnTypeComponents[column.type]
54
+ "
55
+ v-if="
56
+ column.type === COLUMN_TYPES.COMPONENT || columnTypeComponents[column.type]
57
+ "
58
+ :value="transformValue(column, row)"
59
+ :column="column"
60
+ :row="row"
61
+ />
62
+ </template>
63
+ <template v-for="(_, slotName) of $slots" #[slotName]="slotProps">
64
+ <slot :name="slotName" v-bind="slotProps || {}" />
65
+ </template>
66
+ </UTable>
67
+ <Pagination
68
+ v-if="!options.isHidePagination && !options.isHidePaginationBottom"
69
+ :options="options"
70
+ :ui="ui"
71
+ :page="page"
72
+ :page-limit="pageLimit"
73
+ class="rounded-b-lg border-t border-[#EAECF0]"
74
+ @pageChange="onPageChange"
75
+ @search="emits('search')"
76
+ @pageLimitChange="changePageLimit"
77
+ />
78
+ </div>
93
79
  </template>
94
80
 
95
81
  <script setup>
96
82
  import { computed, ref } from "vue";
97
- import { COLUMN_TYPES } from "#core/components/Table/types";
83
+ import {
84
+ COLUMN_TYPES
85
+ } from "#core/components/Table/types";
98
86
  import ColumnNumber from "#core/components/Table/ColumnNumber.vue";
99
87
  import ColumnImage from "#core/components/Table/ColumnImage.vue";
100
- import { updateAppConfig, useAppConfig, useUiConfig, useWatchChange } from "#imports";
88
+ import {
89
+ updateAppConfig,
90
+ useAppConfig,
91
+ useUiConfig,
92
+ useWatchChange
93
+ } from "#imports";
101
94
  import ColumnDateTime from "#core/components/Table/ColumnDateTime.vue";
102
95
  import Empty from "#core/components/Empty.vue";
103
96
  import ColumnDate from "#core/components/Table/ColumnDate.vue";
@@ -120,7 +113,9 @@ const columnTypeComponents = {
120
113
  const theme = computed(() => useUiConfig(tableTheme, "table")());
121
114
  const config = useAppConfig();
122
115
  const page = ref(props.options.pageOptions?.currentPage || 1);
123
- const pageLimit = ref(props.options.pageOptions?.limit || config.core.limit_per_page);
116
+ const pageLimit = ref(
117
+ props.options.pageOptions?.limit || config.core.limit_per_page
118
+ );
124
119
  const uTableCompatibleColumns = computed(
125
120
  () => props.options.columns.map((col) => ({
126
121
  ...col,
@@ -2,7 +2,7 @@ import { type ISimpleTableOptions, type ITableOptions } from '#core/components/T
2
2
  import { tableTheme } from '#core/theme/table';
3
3
  type __VLS_Props = {
4
4
  options: ITableOptions<any> & ISimpleTableOptions<any>;
5
- ui?: typeof tableTheme['slots'];
5
+ ui?: (typeof tableTheme)['slots'];
6
6
  };
7
7
  declare var __VLS_22: {}, __VLS_29: {}, __VLS_31: {}, __VLS_45: string | number, __VLS_46: any;
8
8
  type __VLS_Slots = {} & {
@@ -1,5 +1,5 @@
1
1
  <template>
2
- {{ getValue || "-" }}
2
+ {{ getValue || "-" }}
3
3
  </template>
4
4
 
5
5
  <script setup>