@finema/core 2.49.0 → 2.50.0

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "2.49.0",
+  "version": "2.50.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.49.0";
+const version = "2.50.0";
 
 const nuxtAppOptions = {
   head: {

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

@@ -1,114 +1,114 @@
 <template>
-  <div
-    v-if="!isHideCaption"
-    class="mb-4 text-gray-500"
-  >
-    <span class="font-bold">ผลลัพธ์ทั้งหมด:</span>
-    จำนวน
-    <span class="font-bold">{{ pageOptions?.totalCount || rawData.length || 0 }}</span>
-    รายการ
-  </div>
-  <UTable
-    :loading="status.isLoading"
-    :columns="uTableCompatibleColumns"
-    :data="rawData"
-    v-bind="$attrs"
-  >
-    <template #loading-state>
-      <div class="flex h-60 items-center justify-center">
-        <Icon
-          name="i-svg-spinners:180-ring-with-bg"
-          class="text-primary size-8"
-        />
-      </div>
-    </template>
-    <template #empty-state>
-      <Empty />
-    </template>
-    <template
-      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 : 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) of $slots"
-      #[slotName]="slotProps"
-    >
-      <slot
-        :name="slotName"
-        v-bind="slotProps || {}"
-      />
-    </template>
-  </UTable>
-  <div
-    v-if="!isHidePagination && pageOptions"
-    :class="theme.paginationContainer({})"
-  >
-    <p
-      :class="theme.paginationInfo({})"
-    >
-      {{ pageBetween }} รายการ จากทั้งหมด {{ totalCountWithComma }} รายการ
-    </p>
-    <Pagination
-      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>
+  <div
+    :class="theme.rootWrapper({
+  class: [ui?.rootWrapper]
+})"
+  >
+    <Pagination
+      v-if="!options.isHidePagination && !options.isHidePaginationTop"
+      :options="options"
+      :ui="ui"
+      :page="page"
+      :page-limit="pageLimit"
+      class="border-b border-[#EAECF0]"
+      @pageChange="onPageChange"
+      @search="emits('search')"
+      @pageLimitChange="changePageLimit"
+    />
+    <UTable
+      :loading="options.status.isLoading"
+      :columns="uTableCompatibleColumns"
+      :data="options.rawData"
+      v-bind="$attrs"
+    >
+      <template #loading-state>
+        <Loader
+          :loading="true"
+        />
+      </template>
+      <template #empty>
+        <slot
+          v-if="options.status.isLoading"
+          name="loading"
+        >
+          <Loader
+            :loading="true"
+          />
+        </slot>
+        <slot
+          v-else-if="options.status.isError"
+          name="error"
+        >
+          <div
+            class="
+              text-error-400 flex h-[200px] items-center justify-center text-2xl
+            "
+          >
+            {{ StringHelper.getError(options.status.errorData) }}
+          </div>
+        </slot>
+
+        <slot
+          v-else
+          name="error"
+        >
+          <Empty />
+        </slot>
+      </template>
+      <template
+        v-for="column in options.columns.filter((item) => !!item.type)"
+        #[`${column.accessorKey}-cell`]="{ row }"
+        :key="column.accessorKey"
+      >
+        <component
+          :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) of $slots"
+        #[slotName]="slotProps"
+      >
+        <slot
+          :name="slotName"
+          v-bind="slotProps || {}"
+        />
+      </template>
+    </UTable>
+    <Pagination
+      v-if="!options.isHidePagination && !options.isHidePaginationBottom"
+      :options="options"
+      :ui="ui"
+      :page="page"
+      :page-limit="pageLimit"
+      class="rounded-b-lg border-t border-[#EAECF0]"
+      @pageChange="onPageChange"
+      @search="emits('search')"
+      @pageLimitChange="changePageLimit"
+    />
+  </div>
 </template>
 
 <script setup>
-import { computed } from "vue";
+import { computed, ref } from "vue";
 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, useUiConfig, watch } from "#imports";
+import { updateAppConfig, useAppConfig, useUiConfig, useWatchChange } 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 Pagination from "./Pagination.vue";
 import { tableTheme } from "#core/theme/table";
-const emits = defineEmits(["pageChange"]);
+const emits = defineEmits(["pageChange", "search"]);
 const props = defineProps({
-  status: {
-    type: Object,
-    required: true
-  },
-  pageOptions: {
-    type: Object,
-    required: false
-  },
-  columns: {
-    type: Array,
-    // This resolves to TableColumn[]
-    required: true
-  },
-  rawData: {
-    type: Array,
-    required: true
-  },
-  isHidePagination: {
-    type: Boolean,
-    default: false
-  },
-  isHideCaption: {
-    type: Boolean,
-    default: false
-  }
+  options: { type: Object, required: true },
+  ui: { type: null, required: false }
 });
 const columnTypeComponents = {
   [COLUMN_TYPES.NUMBER]: ColumnNumber,
@@ -117,39 +117,39 @@ const columnTypeComponents = {
   [COLUMN_TYPES.DATE]: ColumnDate,
   [COLUMN_TYPES.TEXT]: ColumnText
 };
-const page = ref(props.pageOptions?.currentPage || 1);
 const theme = computed(() => useUiConfig(tableTheme, "table")());
+const config = useAppConfig();
+const page = ref(props.options.pageOptions?.currentPage || 1);
+const pageLimit = ref(props.options.pageOptions?.limit || config.core.limit_per_page);
 const uTableCompatibleColumns = computed(
-  () => props.columns.map((col) => ({
+  () => props.options.columns.map((col) => ({
     ...col,
     key: col.accessorKey
     // Use accessorKey for UTable's key property
   }))
 );
+const transformValue = (column, row) => {
+  return column.cell ? column.cell({
+    row
+  }) : row.getValue(column.accessorKey);
+};
 useWatchChange(
-  () => props.pageOptions?.currentPage,
+  () => props.options.pageOptions?.currentPage,
   (value) => {
     page.value = value;
   }
 );
-const pageBetween = computed(() => {
-  const length = props.rawData?.length;
-  if (length === 0) {
-    return "0";
-  }
-  const start = (props.pageOptions.currentPage - 1) * props.pageOptions.limit + 1;
-  const end = start + length - 1;
-  return `${start} - ${end}`;
-});
-const transformValue = (column, row) => {
-  return column.cell ? column.cell({
-    row
-  }) : row.getValue(column.accessorKey);
+const onPageChange = (newPage) => {
+  page.value = newPage;
+  emits("pageChange", newPage);
+};
+const changePageLimit = (limit) => {
+  pageLimit.value = limit;
+  updateAppConfig({
+    core: {
+      limit_per_page: limit
+    }
+  });
+  emits("search");
 };
-const totalCountWithComma = computed(() => {
-  return !props.pageOptions?.totalCount ? "0" : NumberHelper.withComma(props.pageOptions.totalCount);
-});
-watch(page, () => {
-  emits("pageChange", page.value);
-});
 </script>

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

@@ -1,67 +1,26 @@
-import { type PropType } from 'vue';
-import { type ITableOptions } from '#core/components/Table/types';
-declare var __VLS_25: string | number, __VLS_26: any;
+import { type ISimpleTableOptions, type ITableOptions } from '#core/components/Table/types';
+import { tableTheme } from '#core/theme/table';
+type __VLS_Props = {
+    options: ITableOptions<any> | ISimpleTableOptions<any>;
+    ui?: typeof tableTheme['slots'];
+};
+declare var __VLS_22: {}, __VLS_29: {}, __VLS_31: {}, __VLS_45: string | number, __VLS_46: any;
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_25>]?: (props: typeof __VLS_26) => any;
+    [K in NonNullable<typeof __VLS_45>]?: (props: typeof __VLS_46) => any;
+} & {
+    loading?: (props: typeof __VLS_22) => any;
+} & {
+    error?: (props: typeof __VLS_29) => any;
+} & {
+    error?: (props: typeof __VLS_31) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    status: {
-        type: PropType<ITableOptions["status"]>;
-        required: true;
-    };
-    pageOptions: {
-        type: PropType<ITableOptions["pageOptions"]>;
-        required: false;
-    };
-    columns: {
-        type: PropType<ITableOptions["columns"]>;
-        required: true;
-    };
-    rawData: {
-        type: PropType<ITableOptions["rawData"]>;
-        required: true;
-    };
-    isHidePagination: {
-        type: PropType<ITableOptions["isHidePagination"]>;
-        default: boolean;
-    };
-    isHideCaption: {
-        type: PropType<ITableOptions["isHideCaption"]>;
-        default: boolean;
-    };
-}>, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    search: (...args: any[]) => void;
     pageChange: (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    status: {
-        type: PropType<ITableOptions["status"]>;
-        required: true;
-    };
-    pageOptions: {
-        type: PropType<ITableOptions["pageOptions"]>;
-        required: false;
-    };
-    columns: {
-        type: PropType<ITableOptions["columns"]>;
-        required: true;
-    };
-    rawData: {
-        type: PropType<ITableOptions["rawData"]>;
-        required: true;
-    };
-    isHidePagination: {
-        type: PropType<ITableOptions["isHidePagination"]>;
-        default: boolean;
-    };
-    isHideCaption: {
-        type: PropType<ITableOptions["isHideCaption"]>;
-        default: boolean;
-    };
-}>> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSearch?: ((...args: any[]) => any) | undefined;
     onPageChange?: ((...args: any[]) => any) | undefined;
-}>, {
-    isHidePagination: boolean | undefined;
-    isHideCaption: boolean | undefined;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -0,0 +1,131 @@
+<template>
+  <div
+    :class="theme.paginationContainer({
+  class: [ui?.paginationContainer]
+})"
+  >
+    <div
+      :class="theme.paginationInfoWrapper({
+  class: [ui?.paginationInfoWrapper]
+})"
+    >
+      <USelect
+        v-if="options.pageOptions && !options.isHideLimitSelect"
+        size="lg"
+        trailing="รายการ"
+        :class="theme.paginationLimitSelect({
+  class: [ui?.paginationLimitSelect, 'cursor-pointer']
+})"
+        :items="pageLimitItems"
+        :model-value="pageLimit"
+        @update:modelValue="emits('pageLimitChange', $event)"
+      >
+        <template #default="{ modelValue }">
+          <p
+            :class="theme.paginationLimitSelectLabel({
+  class: [ui?.paginationLimitSelectLabel]
+})"
+          >
+            {{ modelValue }}  รายการ
+          </p>
+        </template>
+      </USelect>
+      <p
+        :class="theme.paginationInfo({
+  class: [ui?.paginationInfo, '']
+})"
+      >
+        <span v-if="options.pageOptions">{{ pageBetween }} จากทั้งหมด {{ totalCountWithComma }}</span>
+        <span v-else>ทั้งหมด {{ options.rawData.length }} รายการ</span>
+      </p>
+    </div>
+
+    <UPagination
+      v-if="options.pageOptions && options.pageOptions.totalPage > 1"
+      :page="page"
+      :default-page="options.pageOptions?.currentPage || 1"
+      :items-per-page="options.pageOptions.limit"
+      :total="options.pageOptions.totalCount"
+      :to="options.isRouteChange ? to : void 0"
+      show-edges
+      variant="outline"
+      color="neutral"
+      active-color="neutral"
+      active-variant="subtle"
+      @update:page="emits('pageChange', $event)"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed, NumberHelper, useUiConfig } from "#imports";
+import UPagination from "#ui/components/Pagination";
+import USelect from "#ui/components/Select";
+import { tableTheme } from "../../theme/table";
+const emits = defineEmits(["pageChange", "search", "pageLimitChange"]);
+const props = defineProps({
+  page: { type: Number, required: true },
+  pageLimit: { type: Number, required: true },
+  options: { type: Object, required: true },
+  ui: { type: null, required: false }
+});
+const pageLimitItems = [
+  {
+    label: "10",
+    value: 10
+  },
+  {
+    label: "20",
+    value: 20
+  },
+  {
+    label: "30",
+    value: 30
+  },
+  {
+    label: "50",
+    value: 50
+  },
+  {
+    label: "100",
+    value: 100
+  }
+];
+const theme = computed(() => useUiConfig(tableTheme, "table")());
+const pageBetween = computed(() => {
+  const rawDataLength = props.options.rawData?.length;
+  const pageOpts = props.options.pageOptions;
+  if (!rawDataLength || !pageOpts) {
+    return "0";
+  }
+  const currentPage = pageOpts.currentPage || 1;
+  const limit = pageOpts.limit;
+  if (limit <= 0) {
+    return "0";
+  }
+  const start = (currentPage - 1) * limit + 1;
+  const end = start + rawDataLength - 1;
+  return `${start} - ${end}`;
+});
+const totalCountWithComma = computed(() => {
+  const total = props.options.pageOptions?.totalCount;
+  if (!total || total <= 0) {
+    return "0";
+  }
+  return NumberHelper.withComma(total);
+});
+const to = (page) => {
+  const params = props.options.pageOptions?.request?.params || {};
+  const cleanParams = Object.fromEntries(
+    Object.entries(params).filter(
+      ([key, value]) => value !== null && value !== void 0 && value !== ""
+    )
+  );
+  return {
+    query: {
+      ...cleanParams,
+      page
+    }
+  };
+};
+</script>

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

@@ -0,0 +1,18 @@
+import { type ISimpleTableOptions, type ITableOptions } from '#imports';
+import { tableTheme } from '../../theme/table.js';
+type __VLS_Props = {
+    page: number;
+    pageLimit: number;
+    options: ITableOptions<any> | ISimpleTableOptions<any>;
+    ui?: typeof tableTheme['slots'];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    search: () => any;
+    pageChange: (page: number) => any;
+    pageLimitChange: (limit: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSearch?: (() => any) | undefined;
+    onPageChange?: ((page: number) => any) | undefined;
+    onPageLimitChange?: ((limit: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -1,24 +1,24 @@
 <template>
-  <Base
-    v-bind="$attrs"
-    :columns="options.columns"
-    :raw-data="itemsByPage"
-    :status="options.status"
-    :page-options="pageOptions"
-    :is-hide-pagination="options.isHidePagination"
-    :is-hide-caption="options.isHideCaption"
-    @page-change="onPageChange"
-  >
-    <template
-      v-for="(_, slot) of $slots"
-      #[slot]="slotProps"
-    >
-      <slot
-        :name="slot"
-        v-bind="slotProps || {}"
-      />
-    </template>
-  </Base>
+  <Base
+    v-bind="$attrs"
+    :options="{
+  ...options,
+  pageOptions,
+  isHideLimitSelect: true
+}"
+    :raw-data="itemsByPage"
+    @page-change="onPageChange"
+  >
+    <template
+      v-for="(_, slot) of $slots"
+      #[slot]="slotProps"
+    >
+      <slot
+        :name="slot"
+        v-bind="slotProps || {}"
+      />
+    </template>
+  </Base>
 </template>
 
 <script setup>
@@ -27,10 +27,8 @@ import Base from "#core/components/Table/Base.vue";
 import { initPageOptions } from "#core/composables/loaderPage";
 import { useCoreConfig } from "#core/composables/useConfig";
 const props = defineProps({
-  options: {
-    type: Object,
-    required: true
-  }
+  options: { type: Object, required: true },
+  ui: { type: null, required: false }
 });
 defineSlots();
 const currentPage = ref(1);

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

@@ -1,20 +1,13 @@
-import { type PropType } from 'vue';
 import type { ISimpleTableOptions } from '#core/components/Table/types';
+type __VLS_Props = {
+    options: ISimpleTableOptions<any>;
+    ui?: any;
+};
 type __VLS_Slots = {
     'empty-state': () => any;
     'loading-state': () => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    options: {
-        type: PropType<ISimpleTableOptions<any>>;
-        required: true;
-    };
-}>, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    options: {
-        type: PropType<ISimpleTableOptions<any>>;
-        required: true;
-    };
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -12,172 +12,45 @@
         :placeholder="options.searchPlaceholder || '\u0E04\u0E49\u0E19\u0E2B\u0E32....'"
       />
     </div>
-    <UTable
+    <Base
       v-bind="$attrs"
-      :loading="options.status.isLoading"
-      :data="options.rawData"
-      :columns="options.columns"
-      :ui="ui"
+      :options="options"
+      @page-change="onPageChange"
+      @search="emits('search', q)"
     >
-      <template #empty>
-        <slot
-          v-if="options.status.isLoading"
-          name="loading"
-        >
-          <Loader
-            :loading="true"
-          />
-        </slot>
-        <slot
-          v-else-if="options.status.isError"
-          name="error"
-        >
-          <div
-            class="
-              text-error-400 flex h-[200px] items-center justify-center text-2xl
-            "
-          >
-            {{ StringHelper.getError(options.status.errorData) }}
-          </div>
-        </slot>
-
-        <slot
-          v-else
-          name="error"
-        >
-          <Empty />
-        </slot>
-      </template>
-      <template
-        v-for="column in options.columns.filter((item) => !!item.type)"
-        #[`${column.accessorKey}-cell`]="{ row }"
-        :key="column.accessorKey"
-      >
-        <component
-          :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) of $slots"
-        #[slotName]="slotProps"
+        v-for="(_, slot) of $slots"
+        #[slot]="slotProps"
       >
         <slot
-          :name="slotName"
+          :name="slot"
           v-bind="slotProps || {}"
         />
       </template>
-    </UTable>
-
-    <div
-      v-if="!options.isHidePagination"
-      :class="theme.paginationContainer({
-  class: [ui?.paginationContainer]
-})"
-    >
-      <p
-        :class="theme.paginationInfo({
-  class: [ui?.paginationInfo]
-})"
-      >
-        {{ pageBetween }} รายการ จากทั้งหมด {{ totalCountWithComma }} รายการ
-      </p>
-      <Pagination
-        v-if="options.pageOptions.totalPage > 1"
-        v-model:page="page"
-        :default-page="options.pageOptions?.currentPage || 1"
-        :items-per-page="options.pageOptions.limit"
-        :total="options.pageOptions.totalCount"
-        :to="options.isRouteChange ? to : void 0"
-        @update:page="onPageChange"
-      />
-    </div>
+    </Base>
   </div>
 </template>
 
 <script setup>
 import { computed } from "vue";
-import { COLUMN_TYPES } from "#core/components/Table/types";
-import { _debounce, ref, useUiConfig, watch, useWatchChange, useRouter } from "#imports";
-import { NumberHelper } from "#core/utils/NumberHelper";
-import ColumnDate from "#core/components/Table/ColumnDate.vue";
-import ColumnDateTime from "#core/components/Table/ColumnDateTime.vue";
-import ColumnImage from "#core/components/Table/ColumnImage.vue";
-import ColumnText from "#core/components/Table/ColumnText.vue";
-import ColumnNumber from "#core/components/Table/ColumnNumber.vue";
+import { _debounce, ref, useUiConfig, watch } from "#imports";
 import { tableTheme } from "#core/theme/table";
-import UTable from "#ui/components/Table";
+import Base from "#core/components/Table/Base.vue";
 const emits = defineEmits(["pageChange", "search"]);
 const props = defineProps({
   options: { type: Object, required: true },
   ui: { type: null, required: false }
 });
 defineSlots();
-const columnTypeComponents = {
-  [COLUMN_TYPES.NUMBER]: ColumnNumber,
-  [COLUMN_TYPES.IMAGE]: ColumnImage,
-  [COLUMN_TYPES.DATE_TIME]: ColumnDateTime,
-  [COLUMN_TYPES.DATE]: ColumnDate,
-  [COLUMN_TYPES.TEXT]: ColumnText
-};
-const page = ref(props.options?.pageOptions?.currentPage || 1);
 const tableContainer = ref();
-const router = useRouter();
-const theme = computed(() => useUiConfig(tableTheme, "table")());
 const q = ref(props.options?.pageOptions.search ?? "");
-const to = (page2) => {
-  const params = props.options?.pageOptions?.request?.params || {};
-  const cleanParams = Object.fromEntries(
-    Object.entries(params).filter(
-      ([key, value]) => value !== null && value !== void 0 && value !== ""
-    )
-  );
-  return {
-    query: {
-      ...cleanParams,
-      page: page2
-    }
-  };
-};
+const theme = computed(() => useUiConfig(tableTheme, "table")());
 watch(
   q,
   _debounce((value) => {
     emits("search", value);
   }, 500)
 );
-useWatchChange(() => props.options?.pageOptions?.currentPage, (value) => {
-  page.value = value;
-});
-const pageBetween = computed(() => {
-  const rawDataLength = props.options.rawData?.length;
-  const pageOpts = props.options.pageOptions;
-  if (!rawDataLength || !pageOpts) {
-    return "0";
-  }
-  const currentPage = pageOpts.currentPage || 1;
-  const limit = pageOpts.limit;
-  if (limit <= 0) {
-    return "0";
-  }
-  const start = (currentPage - 1) * limit + 1;
-  const end = start + rawDataLength - 1;
-  return `${start} - ${end}`;
-});
-const totalCountWithComma = computed(() => {
-  const total = props.options.pageOptions?.totalCount;
-  if (!total || total <= 0) {
-    return "0";
-  }
-  return NumberHelper.withComma(total);
-});
-const transformValue = (column, row) => {
-  return column.cell ? column.cell({
-    row
-  }) : row.getValue(column.accessorKey);
-};
 const onPageChange = (newPage) => {
   if (tableContainer.value) {
     const rect = tableContainer.value.getBoundingClientRect();

package/dist/runtime/components/Table/types.d.ts

@@ -20,6 +20,9 @@ export interface IBaseTableOptions<T extends Record<string, any> = Record<string
     status: IStatus;
     columns: TableColumn<T>[];
     isHidePagination?: boolean;
+    isHidePaginationTop?: boolean;
+    isHidePaginationBottom?: boolean;
+    isHideLimitSelect?: boolean;
     isHideCaption?: boolean;
 }
 export interface ITableOptions<T extends Record<string, any> = Record<string, any>> extends IBaseTableOptions<T> {

package/dist/runtime/theme/dialog.js

@@ -17,7 +17,7 @@ export const dialogTheme = {
       "md:!top-[50%] md:!left-[50%] md:!bottom-auto md:!right-auto",
       "md:w-[90vw] md:max-w-[500px]",
       "md:translate-x-[-50%] md:translate-y-[-50%]",
-      "md:rounded-lg md:space-x-4"
+      "md:!rounded-lg md:space-x-4"
     ],
     overlay: "fixed inset-0 bg-black/50 backdrop-blur",
     iconWrapper: "rounded-full size-[48px] flex justify-center items-center",

package/dist/runtime/theme/pagination.d.ts

@@ -4,5 +4,7 @@ export declare const paginationTheme: {
         prev: string;
         next: string;
         last: string;
+        item: string;
+        ellipsis: string;
     };
 };

package/dist/runtime/theme/pagination.js

@@ -1,8 +1,10 @@
 export const paginationTheme = {
   slots: {
-    first: "disabled:hidden",
-    prev: "disabled:hidden",
-    next: "disabled:hidden",
-    last: "disabled:hidden"
+    first: "hidden",
+    prev: "",
+    next: "",
+    last: "hidden",
+    item: "max-sm:!hidden",
+    ellipsis: "max-sm:!hidden"
   }
 };

package/dist/runtime/theme/table.d.ts

@@ -1,12 +1,16 @@
 export declare const tableTheme: {
     slots: {
         root: string;
+        rootWrapper: string;
         searchContainer: string;
         captionContainer: string;
         captionBoldText: string;
         errorMessage: string;
         paginationContainer: string;
+        paginationInfoWrapper: string;
         paginationInfo: string;
+        paginationLimitSelect: string;
+        paginationLimitSelectLabel: string;
         thead: string;
         th: string;
         td: string;

package/dist/runtime/theme/table.js

@@ -1,15 +1,19 @@
 export const tableTheme = {
   slots: {
-    root: "rounded-t-md rounded-b-md bg-white",
+    root: "bg-white",
+    rootWrapper: "rounded-t-lg rounded-b-lg border-1 border-[#EAECF0]",
     searchContainer: "mb-4 flex justify-end",
     captionContainer: "hidden mb-4 text-gray-500",
     captionBoldText: "font-bold",
     errorMessage: "text-error-400 text-2xl h-[200px] flex justify-center items-center",
-    paginationContainer: "mt-4 flex justify-between px-3 items-center flex-col lg:flex-row gap-4",
-    paginationInfo: "text-sm text-gray-600",
+    paginationContainer: "flex justify-between items-center flex-row md:flex-col lg:flex-row gap-4 px-4 py-3 bg-[#F2F4F7]",
+    paginationInfoWrapper: "flex items-center justify-between gap-4",
+    paginationInfo: "text-sm font-bold text-gray-600",
+    paginationLimitSelect: "max-sm:!hidden min-w-[120px]",
+    paginationLimitSelectLabel: "font-bold text-gray-600",
     thead: "bg-primary",
-    th: "text-[#222222] bg-white whitespace-nowrap",
-    td: "text-[#222222]"
+    th: "text-[#475467] bg-white whitespace-nowrap font-medium text-xs",
+    td: "text-[#475467]"
   },
   variants: {
     pinned: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "2.49.0",
+  "version": "2.50.0",
   "repository": "https://gitlab.finema.co/finema/ui-kit",
   "license": "MIT",
   "author": "Finema Dev Core Team",
@@ -28,7 +28,7 @@
   ],
   "scripts": {
     "prepack": "nuxt-module-build build",
-    "dev": "nuxi dev playground -o",
+    "dev": "bun run dev:prepare && nuxi dev playground -o",
     "dev:build": "nuxi build playground",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
     "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
@@ -72,7 +72,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.26.0",
-    "@finema/eslint-config": "^2.0.3",
+    "@finema/eslint-config": "^2.0.4",
     "@nuxt/devtools": "^2.6.0",
     "@nuxt/eslint-config": "^1.4.1",
     "@nuxt/module-builder": "^1.0.2",