@finema/core 2.31.2 → 2.32.0

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "2.31.2",
+  "version": "2.32.0",
   "configKey": "core",
   "builder": {
     "@nuxt/module-builder": "1.0.2",

package/dist/module.mjs

@@ -4,7 +4,7 @@ import * as lodash from 'lodash-es';
 import * as theme from '../dist/runtime/theme/index.js';
 
 const name = "@finema/core";
-const version = "2.31.2";
+const version = "2.32.0";
 
 const nuxtAppOptions = {
   head: {

package/dist/runtime/components/Table/Base.vue

@@ -5,13 +5,13 @@
   >
     <span class="font-bold">ผลลัพธ์ทั้งหมด:</span>
     จำนวน
-    <span class="font-bold">{{ pageOptions?.totalCount || 0 }}</span>
+    <span class="font-bold">{{ pageOptions?.totalCount || rawData.length || 0 }}</span>
     รายการ
   </div>
   <UTable
     :loading="status.isLoading"
     :columns="uTableCompatibleColumns"
-    :rows="rawData"
+    :data="rawData"
     v-bind="$attrs"
   >
     <template #loading-state>
@@ -26,47 +26,44 @@
       <Empty />
     </template>
     <template
-      v-for="column in columns"
-      #[`${column.accessorKey}-data`]="{ row }"
+      v-for="column in columns.filter((item) => !!item.type)"
+      #[`${column.accessorKey}-cell`]="{ row }"
       :key="column.accessorKey"
     >
       <component
-        :is="column.type === COLUMN_TYPES.COMPONENT ? column.component : column.type ? columnTypeComponents[column.type] : void 0"
-        v-if="column.type === COLUMN_TYPES.COMPONENT || column.type && columnTypeComponents[column.type]"
-        :value="transformValue(column, row)"
-        :column="column"
-        :row="row"
-      />
-      <ColumnText
-        v-else
+        :is="column.type === COLUMN_TYPES.COMPONENT ? column.component : columnTypeComponents[column.type]"
+        v-if="column.type === COLUMN_TYPES.COMPONENT || columnTypeComponents[column.type]"
         :value="transformValue(column, row)"
         :column="column"
         :row="row"
       />
     </template>
-
     <template
-      v-for="(_, slotName) in $slots"
-      #[slotName]="scope"
+      v-for="(_, slotName) of $slots"
+      #[slotName]="slotProps"
     >
       <slot
         :name="slotName"
-        v-bind="scope"
+        v-bind="slotProps || {}"
       />
     </template>
   </UTable>
   <div
-    v-if="pageOptions"
-    class="mt-4 flex justify-between px-3"
+    v-if="!isHidePagination && pageOptions"
+    :class="theme.paginationContainer({})"
   >
-    <p class="text-sm text-gray-500">
-      ผลลัพธ์ {{ pageBetween }} ของ {{ totalCountWithComma }} รายการ
+    <p
+      :class="theme.paginationInfo({})"
+    >
+      {{ pageBetween }} รายการ จากทั้งหมด {{ totalCountWithComma }} รายการ
     </p>
     <Pagination
-      v-if="pageOptions.totalPage > 1 && !isHidePagination"
-      v-model="page"
-      :page-count="pageOptions.limit"
+      v-if="pageOptions.totalPage > 1"
+      v-model:page="page"
+      :default-page="pageOptions?.currentPage || 1"
+      :items-per-page="pageOptions.limit"
       :total="pageOptions.totalCount"
+      @update:page="onPageChange"
     />
   </div>
 </template>
@@ -77,13 +74,21 @@ import { COLUMN_TYPES } from "#core/components/Table/types";
 import ColumnNumber from "#core/components/Table/ColumnNumber.vue";
 import ColumnImage from "#core/components/Table/ColumnImage.vue";
 import { NumberHelper } from "#core/utils/NumberHelper";
-import { ref, watch } from "#imports";
+import { ref, useUiConfig, watch } from "#imports";
 import ColumnDateTime from "#core/components/Table/ColumnDateTime.vue";
 import Empty from "#core/components/Empty.vue";
 import ColumnDate from "#core/components/Table/ColumnDate.vue";
 import ColumnText from "#core/components/Table/ColumnText.vue";
 import { useWatchChange } from "#core/composables/useWatch";
 import UTable from "#ui/components/Table";
+import { tableTheme } from "#core/theme/table";
+const columnTypeComponents = {
+  [COLUMN_TYPES.NUMBER]: ColumnNumber,
+  [COLUMN_TYPES.IMAGE]: ColumnImage,
+  [COLUMN_TYPES.DATE_TIME]: ColumnDateTime,
+  [COLUMN_TYPES.DATE]: ColumnDate,
+  [COLUMN_TYPES.TEXT]: ColumnText
+};
 const emits = defineEmits(["pageChange"]);
 const props = defineProps({
   status: {
@@ -113,6 +118,7 @@ const props = defineProps({
   }
 });
 const page = ref(props.pageOptions?.currentPage || 1);
+const theme = computed(() => useUiConfig(tableTheme, "table")());
 const uTableCompatibleColumns = computed(
   () => props.columns.map((col) => ({
     ...col,
@@ -120,13 +126,6 @@ const uTableCompatibleColumns = computed(
     // Use accessorKey for UTable's key property
   }))
 );
-const columnTypeComponents = {
-  [COLUMN_TYPES.NUMBER]: ColumnNumber,
-  [COLUMN_TYPES.IMAGE]: ColumnImage,
-  [COLUMN_TYPES.DATE_TIME]: ColumnDateTime,
-  [COLUMN_TYPES.DATE]: ColumnDate,
-  [COLUMN_TYPES.TEXT]: ColumnText
-};
 useWatchChange(
   () => props.pageOptions?.currentPage,
   (value) => {
@@ -143,8 +142,9 @@ const pageBetween = computed(() => {
   return `${start} - ${end}`;
 });
 const transformValue = (column, row) => {
-  const value = row[column.accessorKey];
-  return column.transform ? column.transform(value, row, column) : value;
+  return column.cell ? column.cell({
+    row
+  }) : row.getValue(column.accessorKey);
 };
 const totalCountWithComma = computed(() => {
   return !props.pageOptions?.totalCount ? "0" : NumberHelper.withComma(props.pageOptions.totalCount);

package/dist/runtime/components/Table/Base.vue.d.ts

@@ -1,8 +1,8 @@
 import { type PropType } from 'vue';
 import { type ITableOptions } from '#core/components/Table/types';
-declare var __VLS_29: string | number, __VLS_30: any;
+declare var __VLS_25: string | number, __VLS_26: any;
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_29>]?: (props: typeof __VLS_30) => any;
+    [K in NonNullable<typeof __VLS_25>]?: (props: typeof __VLS_26) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     status: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "2.31.2",
+  "version": "2.32.0",
   "repository": "https://gitlab.finema.co/finema/ui-kit",
   "license": "MIT",
   "author": "Finema Dev Core Team",