@finema/core 1.4.220 → 2.1.0

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

@@ -1,18 +1,16 @@
-<template>
-  {{ 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(() => {
-  return TimeHelper.displayDateTime(props.value)
-})
-</script>
+<template>
+  {{ getValue || "-" }}
+</template>
+
+<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);
+});
+</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" />
-</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>
+<template>
+  <Image
+    class="h-12 rounded"
+    :src="getValue"
+  />
+</template>
+
+<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'
-
-const props = defineProps<{
-  value: any
-  row: any
-  column: IColumn
-}>()
-
-const getValue = computed(() => StringHelper.withComma(props.value))
-</script>
+<template>
+  {{ getValue }}
+</template>
+
+<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
-
-  if (max) {
-    return StringHelper.truncate(value, max)
-  }
-
-  if (typeof value === 'string') {
-    return value || '-'
-  }
-
-  return value ?? '-'
-})
-</script>
+<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);
+  }
+  if (typeof value === "string") {
+    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

@@ -1,70 +1,69 @@
-<template>
-  <Base
-    v-bind="$attrs"
-    :columns="options.columns"
-    :raw-data="itemsByPage"
-    :status="options.status"
-    :page-options="pageOptions"
-    :is-simple-pagination="isShowSimplePagination"
-    :is-hide-bottom-pagination="options.isHideBottomPagination"
-    :is-hide-caption="options.isHideCaption"
-    @page-change="onPageChange"
-  >
-    <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
-}>()
-
-const props = defineProps({
-  options: { type: Object as PropType<ISimpleTableOptions>, required: true },
-})
-
-const currentPage = ref(1)
-const coreConfig = useCoreConfig()
-const isShowSimplePagination = computed(
-  (): boolean => props.options.isSimplePagination ?? coreConfig.is_simple_pagination
-)
-
-const pageOptions = computed(() => {
-  if (!props.options?.limit) {
-    return undefined
-  }
-
-  return {
-    ...initPageOptions({
-      limit: props.options.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
-}
-
-const itemsByPage = computed(() => {
-  if (!pageOptions.value) {
-    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)
-})
-</script>
+<template>
+  <Base
+    v-bind="$attrs"
+    :columns="options.columns"
+    :raw-data="itemsByPage"
+    :status="options.status"
+    :page-options="pageOptions"
+    :is-simple-pagination="isShowSimplePagination"
+    :is-hide-bottom-pagination="options.isHideBottomPagination"
+    :is-hide-caption="options.isHideCaption"
+    @page-change="onPageChange"
+  >
+    <template
+      v-for="(_, slot) of $slots"
+      #[slot]="slotProps"
+    >
+      <slot
+        :name="slot"
+        v-bind="slotProps || {}"
+      />
+    </template>
+  </Base>
+</template>
+
+<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,
+    required: true
+  }
+});
+const currentPage = ref(1);
+const coreConfig = useCoreConfig();
+const isShowSimplePagination = computed(
+  () => props.options.isSimplePagination ?? coreConfig.is_simple_pagination ?? false
+);
+const pageOptions = computed(() => {
+  if (!props.options?.limit) {
+    return void 0;
+  }
+  const totalCount = props.options.rawData.length;
+  const limit = props.options.limit;
+  return {
+    ...initPageOptions({
+      limit,
+      primary: props.options.primary
+    }),
+    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;
+  }
+  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;
+    };
+};

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

@@ -1,65 +1,178 @@
-<template>
-  <div>
-    <div v-if="options.isEnabledSearch" class="mb-4 flex justify-end">
-      <UInput
-        v-model="q"
-        icon="i-heroicons-magnifying-glass"
-        :placeholder="options.searchPlaceholder || 'ค้นหา....'"
-      />
-    </div>
-    <Base
-      v-bind="$attrs"
-      :columns="options.columns"
-      :raw-data="options.rawData"
-      :status="options.status"
-      :page-options="options.pageOptions"
-      :is-simple-pagination="isShowSimplePagination"
-      :is-hide-bottom-pagination="options.isHideBottomPagination"
-      @page-change="onPageChange"
-    >
-      <template v-for="(_, slot) of $slots" #[slot]="slotProps">
-        <slot :name="slot" v-bind="slotProps || {}" />
-      </template>
-    </Base>
-  </div>
-</template>
-<script lang="ts" setup>
-import { type PropType } from 'vue'
-import { type ITableOptions } from '#core/components/Table/types'
-import { _debounce, computed, ref, watch } from '#imports'
-import { useCoreConfig } from '#core/composables/useConfig'
-import Base from '#core/components/Table/Base.vue'
-
-defineSlots<{
-  'empty-state': () => any
-  'loading-state': () => any
-}>()
-
-const emits = defineEmits<{
-  (event: 'pageChange', page: number): void
-  (event: 'search', q: string): void
-}>()
-
-const props = defineProps({
-  options: { type: Object as PropType<ITableOptions>, required: true },
-})
-
-const coreConfig = useCoreConfig()
-
-const q = ref(props.options?.pageOptions.search ?? '')
-
-const isShowSimplePagination = computed(
-  (): boolean => props.options.isSimplePagination ?? coreConfig.is_simple_pagination
-)
-
-watch(
-  q,
-  _debounce((value) => {
-    emits('search', value)
-  }, 500)
-)
-
-const onPageChange = (page: number) => {
-  emits('pageChange', page)
-}
-</script>
+<template>
+  <div>
+    <div
+      v-if="options.isEnabledSearch"
+      :class="theme.searchContainer({
+  class: [ui?.searchContainer]
+})"
+    >
+      <Input
+        v-model="q"
+        icon="i-heroicons-magnifying-glass"
+        :placeholder="options.searchPlaceholder || '\u0E04\u0E49\u0E19\u0E2B\u0E32....'"
+      />
+    </div>
+    <div
+      v-if="!options.isHideCaption || !options.isHideBottomPagination"
+      :class="theme.captionContainer({
+  class: [ui?.captionContainer]
+})"
+    >
+      <span
+        :class="theme.captionBoldText({
+  class: [ui?.captionBoldText]
+})"
+      >
+        ผลลัพธ์ทั้งหมด:</span>
+      จำนวน
+      <span
+        :class="theme.captionBoldText({
+  class: [ui?.captionBoldText]
+})"
+      >{{ options.pageOptions?.totalCount || 0 }}</span>
+      รายการ
+    </div>
+
+    <UTable
+      v-bind="$attrs"
+      :loading="options.status.isLoading"
+      :data="options.rawData"
+      :columns="options.columns"
+    >
+      <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 text-2xl h-[200px] flex justify-center items-center"
+          >
+            {{ 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>
+
+    <div
+      :class="theme.paginationContainer({
+  class: [ui?.paginationContainer]
+})"
+    >
+      <p
+        :class="theme.paginationInfo({
+  class: [ui?.paginationInfo]
+})"
+      >
+        ผลลัพธ์ {{ pageBetween }} ของ {{ totalCountWithComma }} รายการ
+      </p>
+      <Pagination
+        v-model:page="page"
+        :default-page="options.pageOptions?.currentPage || 1"
+        :items-per-page="options.pageOptions.limit"
+        :total="options.pageOptions.totalCount"
+        @update:page="emits('pageChange', $event)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { COLUMN_TYPES } from "#core/components/Table/types";
+import { _debounce, ref, useUiConfig, watch, useWatchChange } from "#imports";
+import { StringHelper } from "#core/utils/StringHelper";
+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 { tableTheme } from "#core/theme/table";
+import UTable from "#ui/components/Table";
+const columnTypeComponents = {
+  [COLUMN_TYPES.NUMBER]: ColumnNumber,
+  [COLUMN_TYPES.IMAGE]: ColumnImage,
+  [COLUMN_TYPES.DATE_TIME]: ColumnDateTime,
+  [COLUMN_TYPES.DATE]: ColumnDate,
+  [COLUMN_TYPES.TEXT]: ColumnText
+};
+defineSlots();
+const emits = defineEmits(["pageChange", "search"]);
+const props = defineProps({
+  options: { type: Object, required: true },
+  ui: { type: null, required: false }
+});
+const page = ref(props.options?.pageOptions?.currentPage || 1);
+const theme = computed(() => useUiConfig(tableTheme, "table")());
+const q = ref(props.options?.pageOptions.search ?? "");
+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 StringHelper.withComma(total);
+});
+const transformValue = (column, row) => {
+  return column.cell ? column.cell({ row }) : row.getValue(column.accessorKey);
+};
+</script>

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

@@ -0,0 +1,25 @@
+import type { TableSlots } from '@nuxt/ui';
+import type { ITableOptions } from '#core/components/Table/types';
+import { tableTheme } from '#core/theme/table';
+type Slot = TableSlots<any> & {
+    error: (props?: Record<string, any>) => any;
+};
+type __VLS_Slots = Slot;
+type __VLS_Props = {
+    options: ITableOptions;
+    ui?: typeof tableTheme['slots'];
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    search: (q: string) => any;
+    pageChange: (page: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSearch?: ((q: string) => any) | undefined;
+    onPageChange?: ((page: number) => any) | undefined;
+}>, {}, {}, {}, {}, 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 & {
+    new (): {
+        $slots: S;
+    };
+};