@finema/core 2.49.1 → 2.51.0

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/server/tsconfig.json

@@ -1,3 +1,3 @@
-{
-  "extends": "../../../.nuxt/tsconfig.server.json",
-}
+{
+  "extends": "../../../.nuxt/tsconfig.server.json",
+}

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.1",
+  "version": "2.51.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",