@finema/core 2.17.1 → 2.17.3

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 (10) hide show
  1. package/dist/module.d.mts +0 -1
  2. package/dist/module.json +1 -1
  3. package/dist/module.mjs +1 -2
  4. package/dist/runtime/components/FlexDeck/index.vue +85 -72
  5. package/dist/runtime/components/FlexDeck/types.d.ts +0 -1
  6. package/dist/runtime/components/Table/Base.vue +2 -12
  7. package/dist/runtime/components/Table/Base.vue.d.ts +0 -9
  8. package/dist/runtime/components/Table/Simple.vue +1 -5
  9. package/dist/runtime/components/Table/index.vue +116 -88
  10. package/package.json +1 -1
package/dist/module.d.mts CHANGED
@@ -12,7 +12,6 @@ declare const core: {
12
12
  is_thai_month: boolean;
13
13
  site_name: string;
14
14
  color: string;
15
- is_simple_pagination: boolean;
16
15
  time_zone: string;
17
16
  };
18
17
 
package/dist/module.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@finema/core",
3
- "version": "2.17.1",
3
+ "version": "2.17.3",
4
4
  "configKey": "core",
5
5
  "builder": {
6
6
  "@nuxt/module-builder": "1.0.1",
package/dist/module.mjs CHANGED
@@ -3,7 +3,7 @@ import defu from 'defu';
3
3
  import * as theme from '../dist/runtime/theme/index.js';
4
4
 
5
5
  const name = "@finema/core";
6
- const version = "2.17.1";
6
+ const version = "2.17.3";
7
7
 
8
8
  const nuxtAppOptions = {
9
9
  head: {
@@ -59,7 +59,6 @@ const core = {
59
59
  is_thai_month: false,
60
60
  site_name: "",
61
61
  color: "#3675FB",
62
- is_simple_pagination: false,
63
62
  time_zone: "Asia/Bangkok"
64
63
  };
65
64
 
package/dist/runtime/components/FlexDeck/index.vue CHANGED
@@ -1,79 +1,74 @@
1
1
  <template>
2
- <div>
3
- <div
4
- v-if="options.isEnabledSearch"
5
- class="mb-4 flex justify-end"
6
- >
7
- <Input
8
- v-model="q"
9
- icon="i-heroicons-magnifying-glass"
10
- :placeholder="options.searchPlaceholder || '\u0E04\u0E49\u0E19\u0E2B\u0E32...'"
11
- />
12
- </div>
13
-
14
- <slot
15
- v-if="options.status.isSuccess && options.rawData.length === 0"
16
- name="empty-state"
17
- >
18
- <Empty />
19
- </slot>
20
-
21
- <div
22
- v-if="options.pageOptions && options.isEnableInfiniteScroll"
23
- class="mb-4 flex items-center justify-end"
24
- >
25
- <p class="text-xs text-gray-500">
26
- {{ totalInnerRawData }} รายการ จากทั้งหมด {{ totalCountWithComma }} รายการ
27
- </p>
28
- </div>
29
-
30
- <div :class="containerClass">
31
- <slot
32
- v-for="(row, index) in displayData"
33
- :key="index"
34
- :row="row"
35
- />
36
- <div ref="bottomEdgeElement" />
37
- </div>
38
-
39
- <slot
40
- v-if="options.status.isLoading"
41
- name="loading-state"
42
- >
43
- <Loader
44
- :loading="true"
45
- />
46
- </slot>
47
-
48
- <div
49
- v-if="options.pageOptions && !options.isEnableInfiniteScroll && !options.isHidePagination"
50
- class="mt-4 flex justify-between px-3"
51
- >
52
- <p class="text-xs text-gray-500">
53
- {{ pageBetween }} รายการ จากทั้งหมด {{ totalCountWithComma }} รายการ
54
- </p>
55
- <Pagination
56
- v-if="options.pageOptions.totalPage > 1 && !isShowSimplePagination"
57
- :default-page="options.pageOptions?.currentPage || 1"
58
- :items-per-page="options.pageOptions.limit"
59
- :total="options.pageOptions.totalCount"
60
- @update:page="onPageChange"
61
- />
62
- <SimplePagination
63
- v-if="options.pageOptions.totalPage > 1 && isShowSimplePagination"
64
- v-model="page"
65
- :page-count="options.pageOptions.limit"
66
- :total="options.pageOptions.totalCount"
67
- />
68
- </div>
69
- </div>
2
+ <div>
3
+ <div
4
+ v-if="options.isEnabledSearch"
5
+ class="mb-4 flex justify-end"
6
+ >
7
+ <Input
8
+ v-model="q"
9
+ icon="i-heroicons-magnifying-glass"
10
+ :placeholder="options.searchPlaceholder || '\u0E04\u0E49\u0E19\u0E2B\u0E32...'"
11
+ />
12
+ </div>
13
+
14
+ <slot
15
+ v-if="options.status.isSuccess && options.rawData.length === 0"
16
+ name="empty-state"
17
+ >
18
+ <Empty />
19
+ </slot>
20
+
21
+ <div
22
+ v-if="options.pageOptions && options.isEnableInfiniteScroll"
23
+ class="mb-4 flex items-center justify-end"
24
+ >
25
+ <p class="text-xs text-gray-500">
26
+ {{ totalInnerRawData }} รายการ จากทั้งหมด {{ totalCountWithComma }} รายการ
27
+ </p>
28
+ </div>
29
+
30
+ <div :class="containerClass">
31
+ <slot
32
+ v-for="(row, index) in displayData"
33
+ :key="index"
34
+ :row="row"
35
+ />
36
+ <div ref="bottomEdgeElement" />
37
+ </div>
38
+
39
+ <slot
40
+ v-if="options.status.isLoading"
41
+ name="loading-state"
42
+ >
43
+ <Loader
44
+ :loading="true"
45
+ />
46
+ </slot>
47
+
48
+ <div
49
+ v-if="options.pageOptions && !options.isEnableInfiniteScroll && !options.isHidePagination"
50
+ class="mt-4 flex justify-between px-3"
51
+ >
52
+ <p class="text-xs text-gray-500">
53
+ {{ pageBetween }} รายการ จากทั้งหมด {{ totalCountWithComma }} รายการ
54
+ </p>
55
+ <Pagination
56
+ v-if="options.pageOptions.totalPage > 1 && !isShowSimplePagination"
57
+ :to="options.isPreventRouteChange ? void 0 : to"
58
+ :default-page="options.pageOptions?.currentPage || 1"
59
+ :items-per-page="options.pageOptions.limit"
60
+ :total="options.pageOptions.totalCount"
61
+ @update:page="onPageChange"
62
+ />
63
+ </div>
64
+ </div>
70
65
  </template>
71
66
 
72
67
  <script setup>
73
68
  import { computed, ref, watch } from "vue";
74
69
  import { useElementVisibility } from "@vueuse/core";
75
70
  import { StringHelper } from "#core/utils/StringHelper";
76
- import { _debounce, useWatchChange, useWatchTrue } from "#imports";
71
+ import { _debounce, useRouter, useWatchChange, useWatchTrue } from "#imports";
77
72
  import { useCoreConfig } from "#core/composables/useConfig";
78
73
  import Empty from "#core/components/Empty.vue";
79
74
  defineSlots();
@@ -89,17 +84,35 @@ const props = defineProps({
89
84
  }
90
85
  });
91
86
  const coreConfig = useCoreConfig();
87
+ const router = useRouter();
92
88
  const q = ref(props.options?.pageOptions.search ?? "");
93
89
  const bottomEdgeElement = ref(null);
94
90
  const page = ref(props.options.pageOptions?.currentPage || 1);
95
91
  const innerRawData = ref([]);
96
92
  const targetElement = useElementVisibility(bottomEdgeElement);
97
- const isShowSimplePagination = computed(
98
- () => props.options.isSimplePagination ?? coreConfig.is_simple_pagination
99
- );
100
93
  const displayData = computed(() => {
101
94
  return props.options.isEnableInfiniteScroll ? innerRawData.value : props.options.rawData;
102
95
  });
96
+ const to = (page2) => {
97
+ const params = props.options?.pageOptions?.request?.params || {};
98
+ const cleanParams = Object.fromEntries(
99
+ Object.entries(params).filter(
100
+ ([key, value]) => value !== null && value !== void 0 && value !== ""
101
+ )
102
+ );
103
+ return {
104
+ query: {
105
+ ...cleanParams,
106
+ page: page2
107
+ }
108
+ };
109
+ };
110
+ useWatchChange(() => props.options?.pageOptions?.request?.params, () => {
111
+ if (props.options?.isPreventRouteChange) return;
112
+ router.replace({
113
+ query: props.options?.pageOptions?.request?.params || {}
114
+ });
115
+ });
103
116
  const pageBetween = computed(() => {
104
117
  const length = props.options.rawData?.length;
105
118
  if (length === 0) {
package/dist/runtime/components/FlexDeck/types.d.ts CHANGED
@@ -8,6 +8,5 @@ export interface IFlexDeckOptions<T = object> {
8
8
  searchPlaceholder?: string;
9
9
  isPreventRouteChange: boolean;
10
10
  isHidePagination?: boolean;
11
- isSimplePagination?: boolean;
12
11
  isEnableInfiniteScroll?: boolean;
13
12
  }
package/dist/runtime/components/Table/Base.vue CHANGED
@@ -1,6 +1,6 @@
1
1
  <template>
2
2
  <div
3
- v-if="!isHideCaption || !isHideBottomPagination"
3
+ v-if="!isHideCaption"
4
4
  class="mb-4 text-gray-500"
5
5
  >
6
6
  <span class="font-bold">ผลลัพธ์ทั้งหมด:</span>
@@ -63,13 +63,7 @@
63
63
  ผลลัพธ์ {{ pageBetween }} ของ {{ totalCountWithComma }} รายการ
64
64
  </p>
65
65
  <Pagination
66
- v-if="pageOptions.totalPage > 1 && !isSimplePagination && !isHideBottomPagination"
67
- v-model="page"
68
- :page-count="pageOptions.limit"
69
- :total="pageOptions.totalCount"
70
- />
71
- <SimplePagination
72
- v-if="pageOptions.totalPage > 1 && isSimplePagination"
66
+ v-if="pageOptions.totalPage > 1 && !isHidePagination"
73
67
  v-model="page"
74
68
  :page-count="pageOptions.limit"
75
69
  :total="pageOptions.totalCount"
@@ -109,10 +103,6 @@ const props = defineProps({
109
103
  type: Array,
110
104
  required: true
111
105
  },
112
- isSimplePagination: {
113
- type: Boolean,
114
- default: false
115
- },
116
106
  isHidePagination: {
117
107
  type: Boolean,
118
108
  default: false
package/dist/runtime/components/Table/Base.vue.d.ts CHANGED
@@ -21,10 +21,6 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
21
21
  type: PropType<ITableOptions["rawData"]>;
22
22
  required: true;
23
23
  };
24
- isSimplePagination: {
25
- type: PropType<ITableOptions["isSimplePagination"]>;
26
- default: boolean;
27
- };
28
24
  isHidePagination: {
29
25
  type: PropType<ITableOptions["isHidePagination"]>;
30
26
  default: boolean;
@@ -52,10 +48,6 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
52
48
  type: PropType<ITableOptions["rawData"]>;
53
49
  required: true;
54
50
  };
55
- isSimplePagination: {
56
- type: PropType<ITableOptions["isSimplePagination"]>;
57
- default: boolean;
58
- };
59
51
  isHidePagination: {
60
52
  type: PropType<ITableOptions["isHidePagination"]>;
61
53
  default: boolean;
@@ -68,7 +60,6 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
68
60
  onPageChange?: ((...args: any[]) => any) | undefined;
69
61
  }>, {
70
62
  isHidePagination: boolean | undefined;
71
- isSimplePagination: boolean | undefined;
72
63
  isHideCaption: boolean | undefined;
73
64
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
74
65
  declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
package/dist/runtime/components/Table/Simple.vue CHANGED
@@ -5,7 +5,6 @@
5
5
  :raw-data="itemsByPage"
6
6
  :status="options.status"
7
7
  :page-options="pageOptions"
8
- :is-simple-pagination="isShowSimplePagination"
9
8
  :is-hide-pagination="options.isHidePagination"
10
9
  :is-hide-caption="options.isHideCaption"
11
10
  @page-change="onPageChange"
@@ -36,9 +35,6 @@ const props = defineProps({
36
35
  });
37
36
  const currentPage = ref(1);
38
37
  const coreConfig = useCoreConfig();
39
- const isShowSimplePagination = computed(
40
- () => props.options.isSimplePagination ?? coreConfig.is_simple_pagination ?? false
41
- );
42
38
  const pageOptions = computed(() => {
43
39
  if (!props.options?.limit) {
44
40
  return void 0;
@@ -48,7 +44,7 @@ const pageOptions = computed(() => {
48
44
  return {
49
45
  ...initPageOptions({
50
46
  limit,
51
- primary: props.options.primary
47
+ primary: coreConfig.default_primary_key
52
48
  }),
53
49
  totalCount,
54
50
  totalPage: Math.ceil(totalCount / limit),
package/dist/runtime/components/Table/index.vue CHANGED
@@ -1,103 +1,104 @@
1
1
  <template>
2
- <div ref="tableContainer">
3
- <div
4
- v-if="options.isEnabledSearch"
2
+ <div ref="tableContainer">
3
+ <div
4
+ v-if="options.isEnabledSearch"
5
5
  :class="theme.searchContainer({
6
6
  class: [ui?.searchContainer]
7
- })"
8
- >
9
- <Input
10
- v-model="q"
11
- icon="i-heroicons-magnifying-glass"
12
- :placeholder="options.searchPlaceholder || '\u0E04\u0E49\u0E19\u0E2B\u0E32....'"
13
- />
14
- </div>
15
- <UTable
16
- v-bind="$attrs"
17
- :loading="options.status.isLoading"
18
- :data="options.rawData"
19
- :columns="options.columns"
20
- >
21
- <template #empty>
22
- <slot
23
- v-if="options.status.isLoading"
24
- name="loading"
25
- >
26
- <Loader
27
- :loading="true"
28
- />
29
- </slot>
30
- <slot
31
- v-else-if="options.status.isError"
32
- name="error"
33
- >
34
- <div
35
- class="flex h-[200px] items-center justify-center text-2xl text-error-400"
36
- >
37
- {{ StringHelper.getError(options.status.errorData) }}
38
- </div>
39
- </slot>
40
-
41
- <slot
42
- v-else
43
- name="error"
44
- >
45
- <Empty />
46
- </slot>
47
- </template>
48
- <template
49
- v-for="column in options.columns.filter((item) => !!item.type)"
50
- #[`${column.accessorKey}-cell`]="{ row }"
51
- :key="column.accessorKey"
52
- >
53
- <component
54
- :is="column.type === COLUMN_TYPES.COMPONENT ? column.component : columnTypeComponents[column.type]"
55
- v-if="column.type === COLUMN_TYPES.COMPONENT || columnTypeComponents[column.type]"
56
- :value="transformValue(column, row)"
57
- :column="column"
58
- :row="row"
59
- />
60
- </template>
61
- <template
62
- v-for="(_, slotName) of $slots"
63
- #[slotName]="slotProps"
64
- >
65
- <slot
66
- :name="slotName"
67
- v-bind="slotProps || {}"
68
- />
69
- </template>
70
- </UTable>
71
-
72
- <div
73
- v-if="!options.isHidePagination"
7
+ })"
8
+ >
9
+ <Input
10
+ v-model="q"
11
+ icon="i-heroicons-magnifying-glass"
12
+ :placeholder="options.searchPlaceholder || '\u0E04\u0E49\u0E19\u0E2B\u0E32....'"
13
+ />
14
+ </div>
15
+ <UTable
16
+ v-bind="$attrs"
17
+ :loading="options.status.isLoading"
18
+ :data="options.rawData"
19
+ :columns="options.columns"
20
+ >
21
+ <template #empty>
22
+ <slot
23
+ v-if="options.status.isLoading"
24
+ name="loading"
25
+ >
26
+ <Loader
27
+ :loading="true"
28
+ />
29
+ </slot>
30
+ <slot
31
+ v-else-if="options.status.isError"
32
+ name="error"
33
+ >
34
+ <div
35
+ class="flex h-[200px] items-center justify-center text-2xl text-error-400"
36
+ >
37
+ {{ StringHelper.getError(options.status.errorData) }}
38
+ </div>
39
+ </slot>
40
+
41
+ <slot
42
+ v-else
43
+ name="error"
44
+ >
45
+ <Empty />
46
+ </slot>
47
+ </template>
48
+ <template
49
+ v-for="column in options.columns.filter((item) => !!item.type)"
50
+ #[`${column.accessorKey}-cell`]="{ row }"
51
+ :key="column.accessorKey"
52
+ >
53
+ <component
54
+ :is="column.type === COLUMN_TYPES.COMPONENT ? column.component : columnTypeComponents[column.type]"
55
+ v-if="column.type === COLUMN_TYPES.COMPONENT || columnTypeComponents[column.type]"
56
+ :value="transformValue(column, row)"
57
+ :column="column"
58
+ :row="row"
59
+ />
60
+ </template>
61
+ <template
62
+ v-for="(_, slotName) of $slots"
63
+ #[slotName]="slotProps"
64
+ >
65
+ <slot
66
+ :name="slotName"
67
+ v-bind="slotProps || {}"
68
+ />
69
+ </template>
70
+ </UTable>
71
+
72
+ <div
73
+ v-if="!options.isHidePagination"
74
74
  :class="theme.paginationContainer({
75
75
  class: [ui?.paginationContainer]
76
- })"
77
- >
78
- <p
76
+ })"
77
+ >
78
+ <p
79
79
  :class="theme.paginationInfo({
80
80
  class: [ui?.paginationInfo]
81
- })"
82
- >
83
- {{ pageBetween }} รายการ จากทั้งหมด {{ totalCountWithComma }} รายการ
84
- </p>
85
- <Pagination
86
- v-if="options.pageOptions.totalPage > 1"
87
- v-model:page="page"
88
- :default-page="options.pageOptions?.currentPage || 1"
89
- :items-per-page="options.pageOptions.limit"
90
- :total="options.pageOptions.totalCount"
91
- @update:page="onPageChange"
92
- />
93
- </div>
94
- </div>
81
+ })"
82
+ >
83
+ {{ pageBetween }} รายการ จากทั้งหมด {{ totalCountWithComma }} รายการ
84
+ </p>
85
+ <Pagination
86
+ v-if="options.pageOptions.totalPage > 1"
87
+ v-model:page="page"
88
+ :default-page="options.pageOptions?.currentPage || 1"
89
+ :items-per-page="options.pageOptions.limit"
90
+ :total="options.pageOptions.totalCount"
91
+ :to="options.isPreventRouteChange ? void 0 : to"
92
+ @update:page="onPageChange"
93
+ />
94
+ </div>
95
+ </div>
95
96
  </template>
96
97
 
97
98
  <script setup>
98
99
  import { computed } from "vue";
99
100
  import { COLUMN_TYPES } from "#core/components/Table/types";
100
- import { _debounce, ref, useUiConfig, watch, useWatchChange } from "#imports";
101
+ import { _debounce, ref, useUiConfig, watch, useWatchChange, useRouter } from "#imports";
101
102
  import { StringHelper } from "#core/utils/StringHelper";
102
103
  import ColumnDate from "#core/components/Table/ColumnDate.vue";
103
104
  import ColumnDateTime from "#core/components/Table/ColumnDateTime.vue";
@@ -121,8 +122,23 @@ const props = defineProps({
121
122
  });
122
123
  const page = ref(props.options?.pageOptions?.currentPage || 1);
123
124
  const tableContainer = ref();
125
+ const router = useRouter();
124
126
  const theme = computed(() => useUiConfig(tableTheme, "table")());
125
127
  const q = ref(props.options?.pageOptions.search ?? "");
128
+ const to = (page2) => {
129
+ const params = props.options?.pageOptions?.request?.params || {};
130
+ const cleanParams = Object.fromEntries(
131
+ Object.entries(params).filter(
132
+ ([key, value]) => value !== null && value !== void 0 && value !== ""
133
+ )
134
+ );
135
+ return {
136
+ query: {
137
+ ...cleanParams,
138
+ page: page2
139
+ }
140
+ };
141
+ };
126
142
  watch(
127
143
  q,
128
144
  _debounce((value) => {
@@ -132,6 +148,18 @@ watch(
132
148
  useWatchChange(() => props.options?.pageOptions?.currentPage, (value) => {
133
149
  page.value = value;
134
150
  });
151
+ useWatchChange(() => props.options?.pageOptions?.request?.params, () => {
152
+ if (props.options?.isPreventRouteChange) return;
153
+ const params = props.options?.pageOptions?.request?.params || {};
154
+ const cleanParams = Object.fromEntries(
155
+ Object.entries(params).filter(
156
+ ([key, value]) => value !== null && value !== void 0 && value !== ""
157
+ )
158
+ );
159
+ router.replace({
160
+ query: cleanParams
161
+ });
162
+ });
135
163
  const pageBetween = computed(() => {
136
164
  const rawDataLength = props.options.rawData?.length;
137
165
  const pageOpts = props.options.pageOptions;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@finema/core",
3
- "version": "2.17.1",
3
+ "version": "2.17.3",
4
4
  "repository": "https://gitlab.finema.co/finema/ui-kit",
5
5
  "license": "MIT",
6
6
  "author": "Finema Dev Core Team",