@finema/core 1.4.220 → 2.1.0

package/dist/runtime/components/Loader.vue

@@ -1,27 +1,29 @@
-<template>
-  <div
-    v-if="isLoading"
-    :class="[
-      'flex  w-full items-center justify-center',
-      $attrs.class,
-      {
-        'min-h-[200px]': !$attrs.class,
-      },
-    ]"
-  >
-    <UIcon name="i-svg-spinners:180-ring-with-bg" class="text-primary text-4xl" dynamic />
-  </div>
-  <slot v-else />
-</template>
-<script lang="ts" setup>
-defineOptions({
-  inheritAttrs: false,
-})
-
-defineProps({
-  isLoading: {
-    type: Boolean,
-    default: true,
-  },
-})
-</script>
+<template>
+  <div
+    v-if="loading"
+    :class="theme.base({
+  class: [ui?.base, props.class]
+})"
+  >
+    <Icon
+      :name="icon"
+      :class="[theme.icon({
+  class: [ui?.icon]
+})]"
+    />
+  </div>
+  <slot v-else />
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { loaderTheme } from "#core/theme/loader";
+import { useUiConfig } from "#core/composables/useConfig";
+const props = defineProps({
+  loading: { type: Boolean, required: false, default: true },
+  icon: { type: String, required: false, default: "i-svg-spinners:180-ring-with-bg" },
+  ui: { type: null, required: false },
+  class: { type: null, required: false }
+});
+const theme = computed(() => useUiConfig(loaderTheme, "loader")());
+</script>

package/dist/runtime/components/Loader.vue.d.ts

@@ -0,0 +1,22 @@
+import { loaderTheme } from '#core/theme/loader';
+type __VLS_Props = {
+    loading?: boolean;
+    icon?: string;
+    ui?: typeof loaderTheme['slots'];
+    class?: any;
+};
+declare var __VLS_5: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    loading: boolean;
+    icon: string;
+}, {}, {}, {}, 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;
+    };
+};

package/dist/runtime/components/{LogItem.vue → Log/LogItem.vue}

@@ -1,43 +1,46 @@
-<template>
-  <div>
-    <div class="mb-2 flex items-center justify-between">
-      <p v-if="title" class="font-semibold">{{ title }}</p>
-      <Icon
-        class="cursor-pointer"
-        :name="isShow ? 'heroicons:minus' : 'heroicons:plus'"
-        @click="isShow = !isShow"
-      />
-    </div>
-    <VCodeBlock
-      v-show="isShow"
-      :code="getCode"
-      max-height="500"
-      :browser-window="true"
-      :indent="2"
-      lang="json"
-      highlightjs
-    />
-  </div>
-</template>
-<script lang="ts" setup>
-import { computed, ref } from 'vue'
-import { VCodeBlock } from '@wdns/vue-code-block'
-
-const props = defineProps<{
-  data?: any
-  title?: string
-}>()
-
-const isShow = ref(true)
-
-const getCode = computed(() => {
-  try {
-    return JSON.stringify(props.data)
-  } catch (e) {
-    return JSON.stringify('{}')
-  }
-})
-</script>
+<template>
+  <div class="text-xs">
+    <div class="mb-2 flex items-center justify-between">
+      <p
+        class="font-semibold"
+      >
+        {{ title || "Log" }}
+      </p>
+      <Icon
+        class="cursor-pointer"
+        :name="isShow ? 'heroicons:minus' : 'heroicons:plus'"
+        @click="isShow = !isShow"
+      />
+    </div>
+    <VCodeBlock
+      v-show="isShow"
+      :code="getCode"
+      max-height="500"
+      :browser-window="false"
+      :indent="2"
+      lang="json"
+      highlightjs
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed, ref } from "vue";
+import { VCodeBlock } from "@wdns/vue-code-block";
+const props = defineProps({
+  data: { type: null, required: false },
+  title: { type: String, required: false }
+});
+const isShow = ref(true);
+const getCode = computed(() => {
+  try {
+    return JSON.stringify(props.data);
+  } catch (e) {
+    return JSON.stringify("{}");
+  }
+});
+</script>
+
 <style>
 .hljs-string{white-space:break-spaces}
-</style>
+</style>

package/dist/runtime/components/Log/LogItem.vue.d.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    data?: any;
+    title?: string;
+};
+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/Log/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <DevOnly>
+    <TeleportSafe
+      to="#dev-logs"
+    >
+      <LogItem
+        v-if="typeof data !== 'undefined'"
+        :data="data"
+        :title="title"
+      />
+      <LogItem
+        v-for="(item, index) in dataItems"
+        :key="index"
+        :data="item"
+        :title="`${title} #${index + 1}`"
+      />
+    </TeleportSafe>
+  </DevOnly>
+</template>
+
+<script setup>
+import LogItem from "./LogItem.vue";
+defineProps({
+  data: { type: null, required: false },
+  dataItems: { type: Array, required: false },
+  title: { type: String, required: false }
+});
+</script>

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

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    data?: any;
+    dataItems?: any[];
+    title?: string;
+};
+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/Base.vue

@@ -1,161 +1,166 @@
-<template>
-  <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">
-    <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" #[`${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"
-        :value="transformValue(column, row)"
-        :column="column"
-        :class="column.class"
-        :row="row"
-      />
-      <component
-        :is="column.component"
-        v-else-if="column.type === COLUMN_TYPES.COMPONENT"
-        :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>
-  </UTable>
-  <div v-if="pageOptions" class="mt-4 flex justify-between px-3">
-    <p class="text-sm text-gray-500">
-      ผลลัพธ์ {{ pageBetween }} ของ {{ totalCountWithComma }} รายการ
-    </p>
-    <UPagination
-      v-if="pageOptions.totalPage > 1 && !isSimplePagination && !isHideBottomPagination"
-      v-model="page"
-      :page-count="pageOptions.limit"
-      :total="pageOptions.totalCount"
-    />
-    <SimplePagination
-      v-if="pageOptions.totalPage > 1 && isSimplePagination"
-      v-model="page"
-      :page-count="pageOptions.limit"
-      :total="pageOptions.totalCount"
-    />
-  </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'])
-
-const props = defineProps({
-  status: {
-    type: Object as PropType<ITableOptions['status']>,
-    required: true,
-  },
-  pageOptions: {
-    type: Object as PropType<ITableOptions['pageOptions']>,
-    required: false,
-  },
-  columns: {
-    type: Array as PropType<ITableOptions['columns']>,
-    required: true,
-  },
-  rawData: {
-    type: Array as PropType<ITableOptions['rawData']>,
-    required: true,
-  },
-  isSimplePagination: {
-    type: Boolean as PropType<ITableOptions['isSimplePagination']>,
-    default: false,
-  },
-  isHideBottomPagination: {
-    type: Boolean as PropType<ITableOptions['isHideBottomPagination']>,
-    default: false,
-  },
-  isHideCaption: {
-    type: Boolean as PropType<ITableOptions['isHideCaption']>,
-    default: false,
-  },
-})
-
-const page = ref(props.pageOptions?.currentPage || 1)
-
-useWatchChange(
-  () => props.pageOptions?.currentPage,
-  (value: number) => {
-    page.value = value
-  }
-)
-
-const pageBetween = computed((): string => {
-  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: 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)
-})
-
-watch(page, () => {
-  emits('pageChange', page.value)
-})
-</script>
+<template>
+  <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="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"
+        />
+      </div>
+    </template>
+    <template #empty-state>
+      <Empty />
+    </template>
+    <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"
+        :row="row"
+      />
+      <ColumnText
+        v-else
+        :value="transformValue(column, row)"
+        :column="column"
+        :row="row"
+      />
+    </template>
+
+    <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"
+  >
+    <p class="text-sm text-gray-500">
+      ผลลัพธ์ {{ pageBetween }} ของ {{ totalCountWithComma }} รายการ
+    </p>
+    <Pagination
+      v-if="pageOptions.totalPage > 1 && !isSimplePagination && !isHideBottomPagination"
+      v-model="page"
+      :page-count="pageOptions.limit"
+      :total="pageOptions.totalCount"
+    />
+    <SimplePagination
+      v-if="pageOptions.totalPage > 1 && isSimplePagination"
+      v-model="page"
+      :page-count="pageOptions.limit"
+      :total="pageOptions.totalCount"
+    />
+  </div>
+</template>
+
+<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,
+    required: true
+  },
+  pageOptions: {
+    type: Object,
+    required: false
+  },
+  columns: {
+    type: Array,
+    // This resolves to TableColumn[]
+    required: true
+  },
+  rawData: {
+    type: Array,
+    required: true
+  },
+  isSimplePagination: {
+    type: Boolean,
+    default: false
+  },
+  isHideBottomPagination: {
+    type: Boolean,
+    default: false
+  },
+  isHideCaption: {
+    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) => {
+    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) => {
+  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);
+});
+</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 || '-' }}
-</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>
+<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(() => 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;