@finema/core 1.4.219 → 2.1.0

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

@@ -1,68 +1,68 @@
 <template>
-  <div v-if="!isHideCaption || !isHideBottomPagination" class="mb-4 text-gray-500">
+  <div
+    v-if="!isHideCaption || !isHideBottomPagination"
+    class="mb-4 text-gray-500"
+  >
     <span class="font-bold">ผลลัพธ์ทั้งหมด:</span>
     จำนวน
     <span class="font-bold">{{ pageOptions?.totalCount || 0 }}</span>
     รายการ
   </div>
-  <UTable :loading="status.isLoading" :columns="columns" :rows="rawData" v-bind="$attrs">
+  <UTable
+    :loading="status.isLoading"
+    :columns="uTableCompatibleColumns"
+    :rows="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" />
+        <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" #[`${column.key}-data`]="{ row }" :key="column.key">
-      <ColumnNumber
-        v-if="column.type === COLUMN_TYPES.NUMBER"
-        :value="transformValue(column, row)"
-        :column="column"
-        :class="column.class"
-        :row="row"
-      />
-      <ColumnImage
-        v-else-if="column.type === COLUMN_TYPES.IMAGE"
-        :value="transformValue(column, row)"
-        :column="column"
-        :class="column.class"
-        :row="row"
-      />
-      <ColumnDateTime
-        v-else-if="column.type === COLUMN_TYPES.DATE_TIME"
-        :value="transformValue(column, row)"
-        :column="column"
-        :class="column.class"
-        :row="row"
-      />
-      <ColumnDate
-        v-else-if="column.type === COLUMN_TYPES.DATE"
+    <template
+      v-for="column in columns"
+      #[`${column.accessorKey}-data`]="{ 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"
-        :class="column.class"
         :row="row"
       />
-      <component
-        :is="column.component"
-        v-else-if="column.type === COLUMN_TYPES.COMPONENT"
+      <ColumnText
+        v-else
         :value="transformValue(column, row)"
         :column="column"
-        :class="column.class"
         :row="row"
       />
-      <ColumnText v-else :value="transformValue(column, row)" :column="column" :row="row" />
     </template>
 
-    <template v-for="(_, slot) of $slots" #[slot]="scope">
-      <slot :name="slot" v-bind="scope" />
+    <template
+      v-for="(_, slotName) in $slots"
+      #[slotName]="scope"
+    >
+      <slot
+        :name="slotName"
+        v-bind="scope"
+      />
     </template>
   </UTable>
-  <div v-if="pageOptions" class="mt-4 flex justify-between px-3">
+  <div
+    v-if="pageOptions"
+    class="mt-4 flex justify-between px-3"
+  >
     <p class="text-sm text-gray-500">
       ผลลัพธ์ {{ pageBetween }} ของ {{ totalCountWithComma }} รายการ
     </p>
-    <UPagination
+    <Pagination
       v-if="pageOptions.totalPage > 1 && !isSimplePagination && !isHideBottomPagination"
       v-model="page"
       :page-count="pageOptions.limit"
@@ -77,85 +77,90 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import { COLUMN_TYPES, type IColumn, type ITableOptions } from '#core/components/Table/types'
-import ColumnNumber from '#core/components/Table/ColumnNumber.vue'
-import ColumnImage from '#core/components/Table/ColumnImage.vue'
-import { computed, type PropType } from 'vue'
-import { StringHelper } from '#core/utils/StringHelper'
-import { ref, 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'
-
-const emits = defineEmits(['pageChange'])
-
+<script setup>
+import { computed } 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 { StringHelper } from "#core/utils/StringHelper";
+import { ref, 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";
+const emits = defineEmits(["pageChange"]);
 const props = defineProps({
   status: {
-    type: Object as PropType<ITableOptions['status']>,
-    required: true,
+    type: Object,
+    required: true
   },
   pageOptions: {
-    type: Object as PropType<ITableOptions['pageOptions']>,
-    required: false,
+    type: Object,
+    required: false
   },
   columns: {
-    type: Array as PropType<ITableOptions['columns']>,
-    required: true,
+    type: Array,
+    // This resolves to TableColumn[]
+    required: true
   },
   rawData: {
-    type: Array as PropType<ITableOptions['rawData']>,
-    required: true,
+    type: Array,
+    required: true
   },
   isSimplePagination: {
-    type: Boolean as PropType<ITableOptions['isSimplePagination']>,
-    default: false,
+    type: Boolean,
+    default: false
   },
   isHideBottomPagination: {
-    type: Boolean as PropType<ITableOptions['isHideBottomPagination']>,
-    default: false,
+    type: Boolean,
+    default: false
   },
   isHideCaption: {
-    type: Boolean as PropType<ITableOptions['isHideCaption']>,
-    default: false,
-  },
-})
-
-const page = ref(props.pageOptions?.currentPage || 1)
-
+    type: Boolean,
+    default: false
+  }
+});
+const page = ref(props.pageOptions?.currentPage || 1);
+const uTableCompatibleColumns = computed(
+  () => props.columns.map((col) => ({
+    ...col,
+    key: col.accessorKey
+    // Use accessorKey for UTable's key property
+    // label: col.label || col.accessorKey // Optional: ensure label if not present, UTable uses key as fallback for header
+  }))
+);
+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: number) => {
-    page.value = value
+  (value) => {
+    page.value = value;
   }
-)
-
-const pageBetween = computed((): string => {
-  const length = props.rawData?.length
-
+);
+const pageBetween = computed(() => {
+  const length = props.rawData?.length;
   if (length === 0) {
-    return '0'
+    return "0";
   }
-
-  const start = (props.pageOptions!.currentPage - 1) * props.pageOptions!.limit + 1
-  const end = start + length - 1
-
-  return `${start} - ${end}`
-})
-
-const transformValue = (column: IColumn, row: any) => {
-  return column.transform ? column.transform(row[column.key], row, column) : row[column.key]
-}
-
-const totalCountWithComma = computed((): string => {
-  return !props.pageOptions!.totalCount
-    ? '0'
-    : StringHelper.withComma(props.pageOptions!.totalCount)
-})
-
+  const start = (props.pageOptions.currentPage - 1) * props.pageOptions.limit + 1;
+  const end = start + length - 1;
+  return `${start} - ${end}`;
+});
+const transformValue = (column, row) => {
+  const value = row[column.accessorKey];
+  return column.transform ? column.transform(value, row, column) : value;
+};
+const totalCountWithComma = computed(() => {
+  return !props.pageOptions?.totalCount ? "0" : StringHelper.withComma(props.pageOptions.totalCount);
+});
 watch(page, () => {
-  emits('pageChange', page.value)
-})
+  emits("pageChange", page.value);
+});
 </script>

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

@@ -0,0 +1,47 @@
+import { type PropType } from 'vue';
+import { type ITableOptions } from '#core/components/Table/types';
+declare var __VLS_20: any, __VLS_21: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_20>]?: (props: typeof __VLS_21) => 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;
+    };
+    isSimplePagination: {
+        type: PropType<ITableOptions["isSimplePagination"]>;
+        default: boolean;
+    };
+    isHideBottomPagination: {
+        type: PropType<ITableOptions["isHideBottomPagination"]>;
+        default: boolean;
+    };
+    isHideCaption: {
+        type: PropType<ITableOptions["isHideCaption"]>;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
+    isHideCaption: boolean | undefined;
+    isHideBottomPagination: boolean | undefined;
+    isSimplePagination: boolean | undefined;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,16 +1,14 @@
 <template>
-  {{ getValue || '-' }}
+  {{ getValue || "-" }}
 </template>
-<script lang="ts" setup>
-import { computed } from 'vue'
-import { type IColumn } from '#core/components/Table/types'
-import { TimeHelper } from '#core/utils/TimeHelper'
 
-const props = defineProps<{
-  value: any
-  row: any
-  column: IColumn
-}>()
-
-const getValue = computed<string>(() => TimeHelper.displayDate(props.value))
+<script setup>
+import { computed } from "vue";
+import { TimeHelper } from "#core/utils/TimeHelper";
+const props = defineProps({
+  value: { type: null, required: true },
+  row: { type: null, required: true },
+  column: { type: null, required: true }
+});
+const getValue = computed(() => TimeHelper.displayDate(props.value));
 </script>

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

@@ -0,0 +1,8 @@
+import type { TableColumn } from '@nuxt/ui';
+type __VLS_Props = {
+    value: any;
+    row: any;
+    column: TableColumn<any>;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -1,18 +1,16 @@
 <template>
-  {{ getValue || '-' }}
+  {{ getValue || "-" }}
 </template>
-<script lang="ts" setup>
-import { computed } from 'vue'
-import { type IColumn } from '#core/components/Table/types'
-import { TimeHelper } from '#core/utils/TimeHelper'
-
-const props = defineProps<{
-  value: any
-  row: any
-  column: IColumn
-}>()
 
+<script setup>
+import { computed } from "vue";
+import { TimeHelper } from "#core/utils/TimeHelper";
+const props = defineProps({
+  value: { type: null, required: true },
+  row: { type: null, required: true },
+  column: { type: null, required: true }
+});
 const getValue = computed(() => {
-  return TimeHelper.displayDateTime(props.value)
-})
+  return TimeHelper.displayDateTime(props.value);
+});
 </script>

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

@@ -0,0 +1,8 @@
+import type { TableColumn } from '@nuxt/ui';
+type __VLS_Props = {
+    value: any;
+    row: any;
+    column: TableColumn<any>;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -1,15 +1,16 @@
 <template>
-  <Image class="h-12" :src="getValue" />
+  <Image
+    class="h-12 rounded"
+    :src="getValue"
+  />
 </template>
-<script lang="ts" setup>
-import { computed } from 'vue'
-import { type IColumn } from '#core/components/Table/types'
 
-const props = defineProps<{
-  value: any
-  row: any
-  column: IColumn
-}>()
-
-const getValue = computed(() => props.value)
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  value: { type: null, required: true },
+  row: { type: null, required: true },
+  column: { type: null, required: true }
+});
+const getValue = computed(() => props.value);
 </script>

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

@@ -0,0 +1,8 @@
+import type { TableColumn } from '@nuxt/ui';
+type __VLS_Props = {
+    value: any;
+    row: any;
+    column: TableColumn<any>;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -1,14 +1,14 @@
-<template>{{ getValue }}</template>
-<script lang="ts" setup>
-import { StringHelper } from '../../utils/StringHelper'
-import { computed } from 'vue'
-import { type IColumn } from '#core/components/Table/types'
+<template>
+  {{ getValue }}
+</template>
 
-const props = defineProps<{
-  value: any
-  row: any
-  column: IColumn
-}>()
-
-const getValue = computed(() => StringHelper.withComma(props.value))
+<script setup>
+import { computed } from "vue";
+import { StringHelper } from "../../utils/StringHelper";
+const props = defineProps({
+  value: { type: null, required: true },
+  row: { type: null, required: true },
+  column: { type: null, required: true }
+});
+const getValue = computed(() => StringHelper.withComma(props.value));
 </script>

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

@@ -0,0 +1,8 @@
+import type { TableColumn } from '@nuxt/ui';
+type __VLS_Props = {
+    value: any;
+    row: any;
+    column: TableColumn<any>;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -1,29 +1,24 @@
-<template>{{ getValue }}</template>
-<script lang="ts" setup>
-import { computed } from 'vue'
-import { type IColumn } from '#core/components/Table/types'
-import { StringHelper } from '#imports'
-
-const props = defineProps<{
-  value: any
-  row: any
-  column: IColumn<{
-    max?: number
-  }>
-}>()
-
-const getValue = computed<string>(() => {
-  const value = props.value
-  const max = props.column.props?.max
+<template>
+  {{ getValue }}
+</template>
 
+<script setup>
+import { computed } from "vue";
+import { StringHelper } from "#imports";
+const props = defineProps({
+  value: { type: null, required: true },
+  row: { type: null, required: true },
+  column: { type: null, required: true }
+});
+const getValue = computed(() => {
+  const value = props.value;
+  const max = props.column?.meta?.max;
   if (max) {
-    return StringHelper.truncate(value, max)
+    return StringHelper.truncate(value, max);
   }
-
-  if (typeof value === 'string') {
-    return value || '-'
+  if (typeof value === "string") {
+    return value || "-";
   }
-
-  return value ?? '-'
-})
+  return value ?? "-";
+});
 </script>

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

@@ -0,0 +1,8 @@
+import type { TableColumn } from '@nuxt/ui';
+type __VLS_Props = {
+    value: any;
+    row: any;
+    column: TableColumn<any>;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -10,61 +10,60 @@
     :is-hide-caption="options.isHideCaption"
     @page-change="onPageChange"
   >
-    <template v-for="(_, slot) of $slots" #[slot]="slotProps">
-      <slot :name="slot" v-bind="slotProps || {}" />
+    <template
+      v-for="(_, slot) of $slots"
+      #[slot]="slotProps"
+    >
+      <slot
+        :name="slot"
+        v-bind="slotProps || {}"
+      />
     </template>
   </Base>
 </template>
-<script lang="ts" setup>
-import { computed, type PropType, ref } from 'vue'
-import { type ISimpleTableOptions } from '#core/components/Table/types'
-import Base from '#core/components/Table/Base.vue'
-import { initPageOptions } from '#core/composables/loaderPage'
-import { useCoreConfig } from '#core/composables/useConfig'
-
-defineSlots<{
-  'empty-state': () => any
-  'loading-state': () => any
-}>()
 
+<script setup>
+import { computed, ref } from "vue";
+import Base from "#core/components/Table/Base.vue";
+import { initPageOptions } from "#core/composables/loaderPage";
+import { useCoreConfig } from "#core/composables/useConfig";
+defineSlots();
 const props = defineProps({
-  options: { type: Object as PropType<ISimpleTableOptions>, required: true },
-})
-
-const currentPage = ref(1)
-const coreConfig = useCoreConfig()
+  options: {
+    type: Object,
+    required: true
+  }
+});
+const currentPage = ref(1);
+const coreConfig = useCoreConfig();
 const isShowSimplePagination = computed(
-  (): boolean => props.options.isSimplePagination ?? coreConfig.is_simple_pagination
-)
-
+  () => props.options.isSimplePagination ?? coreConfig.is_simple_pagination ?? false
+);
 const pageOptions = computed(() => {
   if (!props.options?.limit) {
-    return undefined
+    return void 0;
   }
-
+  const totalCount = props.options.rawData.length;
+  const limit = props.options.limit;
   return {
     ...initPageOptions({
-      limit: props.options.limit,
-      primary: props.options.primary,
+      limit,
+      primary: props.options.primary
     }),
-    totalCount: props.options.rawData.length,
-    totalPage: Math.ceil(props.options.rawData.length / props.options.limit),
-    currentPage: currentPage.value,
-  }
-})
-
-const onPageChange = (page: number) => {
-  currentPage.value = page
-}
-
+    totalCount,
+    totalPage: Math.ceil(totalCount / limit),
+    currentPage: currentPage.value
+  };
+});
+const onPageChange = (page) => {
+  currentPage.value = page;
+};
 const itemsByPage = computed(() => {
   if (!pageOptions.value) {
-    return props.options?.rawData
+    return props.options?.rawData;
   }
-
-  const start = (pageOptions.value.currentPage - 1) * pageOptions.value.limit
-  const end = start + pageOptions.value.limit
-
-  return props.options?.rawData.slice(start, end)
-})
+  const start = (pageOptions.value.currentPage - 1) * pageOptions.value.limit;
+  const end = start + pageOptions.value.limit;
+  return props.options?.rawData.slice(start, end);
+});
 </script>

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

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