@finema/core 2.17.0 → 2.17.2

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 +5 -5
  4. package/dist/runtime/components/FlexDeck/index.vue +79 -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 +104 -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.0",
3
+ "version": "2.17.2",
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.0";
6
+ const version = "2.17.2";
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
 
@@ -91,7 +90,7 @@ const module = defineNuxtModule({
91
90
  _nuxt.options.colorMode = {
92
91
  preference: "light"
93
92
  };
94
- _nuxt.options.appConfig.ui = defu({
93
+ _nuxt.options.appConfig.ui = {
95
94
  colors: {
96
95
  primary: "main",
97
96
  secondary: "secondary",
@@ -101,8 +100,9 @@ const module = defineNuxtModule({
101
100
  warning: "warning",
102
101
  error: "error",
103
102
  neutral: "slate"
104
- }
105
- }, theme);
103
+ },
104
+ ...theme
105
+ };
106
106
  _nuxt.options.build = defu(
107
107
  {
108
108
  transpile: [
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,29 @@ 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
+ return {
98
+ query: {
99
+ ...props.options?.pageOptions?.request?.params || {},
100
+ page: page2
101
+ }
102
+ };
103
+ };
104
+ useWatchChange(() => props.options?.pageOptions?.request?.params, () => {
105
+ if (props.options?.isPreventRouteChange) return;
106
+ router.replace({
107
+ query: props.options?.pageOptions?.request?.params || {}
108
+ });
109
+ });
103
110
  const pageBetween = computed(() => {
104
111
  const length = props.options.rawData?.length;
105
112
  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,17 @@ 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
+ return {
130
+ query: {
131
+ ...props.options?.pageOptions?.request?.params || {},
132
+ page: page2
133
+ }
134
+ };
135
+ };
126
136
  watch(
127
137
  q,
128
138
  _debounce((value) => {
@@ -132,6 +142,12 @@ watch(
132
142
  useWatchChange(() => props.options?.pageOptions?.currentPage, (value) => {
133
143
  page.value = value;
134
144
  });
145
+ useWatchChange(() => props.options?.pageOptions?.request?.params, () => {
146
+ if (props.options?.isPreventRouteChange) return;
147
+ router.replace({
148
+ query: props.options?.pageOptions?.request?.params || {}
149
+ });
150
+ });
135
151
  const pageBetween = computed(() => {
136
152
  const rawDataLength = props.options.rawData?.length;
137
153
  const pageOpts = props.options.pageOptions;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@finema/core",
3
- "version": "2.17.0",
3
+ "version": "2.17.2",
4
4
  "repository": "https://gitlab.finema.co/finema/ui-kit",
5
5
  "license": "MIT",
6
6
  "author": "Finema Dev Core Team",