@finema/core 2.49.1 → 2.51.0

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

@@ -1,114 +1,114 @@
 <template>
   <div
-    v-if="!isHideCaption"
-    class="mb-4 text-gray-500"
+    :class="theme.rootWrapper({
+  class: [ui?.rootWrapper]
+})"
   >
-    <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({})"
+    <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"
     >
-      {{ pageBetween }} รายการ จากทั้งหมด {{ totalCountWithComma }} รายการ
-    </p>
+      <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="pageOptions.totalPage > 1"
-      v-model:page="page"
-      :default-page="pageOptions?.currentPage || 1"
-      :items-per-page="pageOptions.limit"
-      :total="pageOptions.totalCount"
-      @update:page="onPageChange"
+      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/ColumnDate.vue

@@ -1,5 +1,5 @@
 <template>
-  {{ getValue || "-" }}
+  {{ getValue || "-" }}
 </template>
 
 <script setup>

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

@@ -1,5 +1,5 @@
 <template>
-  {{ getValue || "-" }}
+  {{ getValue || "-" }}
 </template>
 
 <script setup>

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

@@ -1,8 +1,8 @@
 <template>
-  <Image
-    class="h-12 rounded"
-    :src="getValue"
-  />
+  <Image
+    class="h-12 rounded"
+    :src="getValue"
+  />
 </template>
 
 <script setup>

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

@@ -1,5 +1,5 @@
 <template>
-  {{ getValue }}
+  {{ getValue }}
 </template>
 
 <script setup>

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,12 +1,12 @@
 <template>
   <Base
     v-bind="$attrs"
-    :columns="options.columns"
+    :options="{
+  ...options,
+  pageOptions,
+  isHideLimitSelect: true
+}"
     :raw-data="itemsByPage"
-    :status="options.status"
-    :page-options="pageOptions"
-    :is-hide-pagination="options.isHidePagination"
-    :is-hide-caption="options.isHideCaption"
     @page-change="onPageChange"
   >
     <template
@@ -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,15 @@
-import { type PropType } from 'vue';
 import type { ISimpleTableOptions } from '#core/components/Table/types';
-type __VLS_Slots = {
-    'empty-state': () => any;
-    'loading-state': () => any;
+import type { tableTheme } from '../../theme/table.js';
+import type { TableSlots } from '@nuxt/ui';
+type __VLS_Props = {
+    options: ISimpleTableOptions<any>;
+    ui?: typeof tableTheme['slots'];
 };
-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>;
+type __VLS_Slots = Slot;
+type Slot = TableSlots<any> & {
+    error: (props?: Record<string, any>) => 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 & {