@finema/core 1.4.5 → 1.4.7

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "1.4.5",
+  "version": "1.4.7",
   "configKey": "core",
   "compatibility": {
     "nuxt": "^3.7.4"

package/dist/module.mjs

@@ -2,7 +2,7 @@ import { defineNuxtModule, createResolver, installModule, addPlugin, addComponen
 import 'lodash-es';
 
 const name = "@finema/core";
-const version = "1.4.5";
+const version = "1.4.7";
 
 const colors = {
   black: "#20243E",
@@ -87,6 +87,7 @@ const _deepMerge = (target, ...sources) => {
 };
 
 const pagination = {
+  wrapper: "flex items-center space-x-1",
   default: {
     activeButton: {
       color: "primary",

package/dist/runtime/components/QRCode.vue

@@ -0,0 +1,21 @@
+<template>
+  <QrcodeVue :value="value" :level="level" :render-as="renderAs" class="h-[350px] w-[350px]" />
+</template>
+<script lang="ts" setup>
+import QrcodeVue from 'qrcode.vue'
+
+defineProps({
+  value: {
+    type: String,
+    required: true,
+  },
+  level: {
+    type: String,
+    default: 'M',
+  },
+  renderAs: {
+    type: String,
+    default: 'svg',
+  },
+})
+</script>

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

@@ -0,0 +1,92 @@
+<template>
+  <UTable :loading="status.isLoading" :columns="columns" :rows="rawData" v-bind="$attrs">
+    <template #empty-state>
+      <div class="flex flex-col items-center justify-center gap-3 py-6">
+        <span class="text-sm italic">ไม่พบข้อมูล!</span>
+      </div>
+    </template>
+    <template v-for="column in columns" #[`${column.key}-data`]="{ row }" :key="column.key">
+      <ColumnNumber
+        v-if="column.type === COLUMN_TYPES.NUMBER"
+        :value="row[column.key]"
+        :column="column"
+        :row="row"
+      />
+      <ColumnImage
+        v-if="column.type === COLUMN_TYPES.IMAGE"
+        :value="row[column.key]"
+        :column="column"
+        :row="row"
+      />
+      <template v-else>
+        <span :title="row[column.key]">{{ row[column.key] ?? '-' }}</span>
+      </template>
+    </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">
+    <p class="text-xs text-gray-500">
+      ผลลัพธ์ {{ pageBetween }} ของ {{ totalCountWithComma }} รายการ
+    </p>
+    <UPagination
+      v-if="pageOptions.totalPage > 1"
+      v-model="page"
+      :page-count="pageOptions.limit"
+      :total="pageOptions.totalCount"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+import { COLUMN_TYPES, 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'
+
+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,
+  },
+})
+
+const page = ref(props.pageOptions?.currentPage || 1)
+
+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 totalCountWithComma = computed((): string => {
+  return !props.pageOptions.totalCount ? '0' : StringHelper.withComma(props.pageOptions.totalCount)
+})
+
+watch(page, () => {
+  emits('pageChange', page.value)
+})
+</script>

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

@@ -0,0 +1,53 @@
+<template>
+  <Base
+    v-bind="$attrs"
+    :columns="options.columns"
+    :raw-data="itemsByPage"
+    :status="options.status"
+    :page-options="pageOptions"
+    @page-change="onPageChange"
+  />
+</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'
+
+const props = defineProps({
+  options: { type: Object as PropType<ISimpleTableOptions>, required: true },
+})
+
+const currentPage = ref(1)
+
+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>

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

@@ -1,66 +1,27 @@
 <template>
   <div>
-    <div
-      v-if="options.isEnabledSearch"
-      class="flex border-b border-gray-200 py-3.5 dark:border-gray-700"
-    >
-      <UInput v-model="q" placeholder="Search..." />
-    </div>
-    <UTable
-      :loading="options.status.isLoading"
-      :columns="options.columns"
-      :rows="options.rawData"
-      v-bind="$attrs"
-    >
-      <template #empty-state>
-        <div class="flex flex-col items-center justify-center gap-3 py-6">
-          <span class="text-sm italic">ไม่พบข้อมูล!</span>
-        </div>
-      </template>
-      <template
-        v-for="column in options.columns"
-        #[`${column.key}-data`]="{ row }"
-        :key="column.key"
-      >
-        <ColumnNumber
-          v-if="column.type === COLUMN_TYPES.NUMBER"
-          :value="row[column.key]"
-          :column="column"
-          :row="row"
-        />
-        <ColumnImage
-          v-if="column.type === COLUMN_TYPES.IMAGE"
-          :value="row[column.key]"
-          :column="column"
-          :row="row"
-        />
-        <template v-else>
-          <span :title="row[column.key]">{{ row[column.key] ?? '-' }}</span>
-        </template>
-      </template>
-      <template v-for="(_, slot) of $slots" #[slot]="scope">
-        <slot :name="slot" v-bind="scope" />
-      </template>
-    </UTable>
-    <div class="mt-4 flex justify-between">
-      <p class="text-xs text-gray-500">
-        ผลลัพธ์ {{ pageBetween }} ของ {{ totalCountWithComma }} รายการ
-      </p>
-      <UPagination
-        v-if="options.pageOptions.totalPage > 1"
-        v-model="page"
-        :page-count="options.pageOptions.totalPage"
-        :total="options.pageOptions.totalCount"
+    <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"
+      @page-change="onPageChange"
+    />
   </div>
 </template>
 <script lang="ts" setup>
-import { computed, type PropType } from 'vue'
-import { COLUMN_TYPES, type ITableOptions } from '#core/components/Table/types'
-import { _debounce, ref, StringHelper, watch } from '#imports'
-import ColumnNumber from '#core/components/Table/ColumnNumber.vue'
-import ColumnImage from '#core/components/Table/ColumnImage.vue'
+import { type PropType } from 'vue'
+import { type ITableOptions } from '#core/components/Table/types'
+import { _debounce, ref, watch } from '#imports'
+import Base from '#core/components/Table/Base.vue'
 
 const emits = defineEmits<{
   (event: 'pageChange', page: number): void
@@ -69,16 +30,10 @@ const emits = defineEmits<{
 
 const props = defineProps({
   options: { type: Object as PropType<ITableOptions>, required: true },
-  class: {
-    type: [String, Array, Object] as PropType<any>,
-    default: undefined,
-  },
 })
 
 const q = ref(props.options?.pageOptions.search ?? '')
 
-const page = ref(props.options?.pageOptions.currentPage)
-
 watch(
   q,
   _debounce((value) => {
@@ -86,26 +41,7 @@ watch(
   }, 500)
 )
 
-watch(page, () => {
-  emits('pageChange', page.value)
-})
-
-const pageBetween = computed((): string => {
-  const length = props.options?.rawData?.length
-
-  if (length === 0) {
-    return '0'
-  }
-
-  const start = (props.options.pageOptions.currentPage - 1) * props.options.pageOptions.limit + 1
-  const end = start + length - 1
-
-  return `${start} - ${end}`
-})
-
-const totalCountWithComma = computed((): string => {
-  return !props.options.pageOptions.totalCount
-    ? '0'
-    : StringHelper.withComma(props.options.pageOptions.totalCount)
-})
+const onPageChange = (page: number) => {
+  emits('pageChange', page)
+}
 </script>

package/dist/runtime/components/Table/types.d.ts

@@ -16,7 +16,7 @@ export interface IColumn {
     class?: string;
     type?: COLUMN_TYPES;
 }
-export interface IRowItem<T = object> {
+export interface IRowItem {
     value: string | any;
     type?: COLUMN_TYPES;
     title?: string;
@@ -25,34 +25,29 @@ export interface IRowItem<T = object> {
     props?: Record<string, any>;
     on?: Record<string, any>;
 }
-export type IRow<T = object> = Record<number, IRowItem<T>>;
-export interface ITableOptions<T = object> {
+export type IRow = Record<number, IRowItem>;
+export interface IBaseTableOptions<T = object> {
     rawData: T[];
     primary: string;
-    isHideBottomPagination?: boolean;
-    isHideTopPagination?: boolean;
-    isNotChangeRoute: boolean;
     status: IStatus;
-    pageOptions: IPageOptions;
     columns: IColumn[];
-    isHideToolbar?: boolean;
-    isEnabledSearch?: boolean;
     isShowCheckbox?: boolean;
-    deleteStatus?: IStatus;
     onRowClick?: (index: number, columns: Array<{
         value: string;
     }>) => void;
     onCheckBoxClick?: (index: number[]) => void;
     disabledCheckIndexes?: number[];
 }
-export interface ISimpleTableOptions<T = object> {
-    rawData: T[];
-    primary: string;
-    status: IStatus;
-    columns: IColumn[];
+export interface ITableOptions<T = object> extends IBaseTableOptions<T> {
+    pageOptions: IPageOptions;
+    isHideToolbar?: boolean;
+    isEnabledSearch?: boolean;
+    searchPlaceholder?: string;
+    deleteStatus?: IStatus;
     isHideBottomPagination?: boolean;
-    onRowClick?: (index: number, columns: Array<{
-        value: string;
-    }>) => void;
-    onCheckBoxClick?: (index: number[]) => void;
+    isHideTopPagination?: boolean;
+    isNotChangeRoute: boolean;
+}
+export interface ISimpleTableOptions<T = object> extends IBaseTableOptions<T> {
+    limit?: number;
 }

package/dist/runtime/composables/useConfig.mjs

@@ -2,7 +2,7 @@ import { mergeConfig } from "#ui/utils";
 import { core } from "#core/core.config";
 import appConfig from "#build/app.config";
 export const useCoreConfig = () => {
-  return mergeConfig(appConfig.core.strategy, appConfig.core, core);
+  return mergeConfig("override", appConfig.core, core);
 };
 export const useUiConfig = (config, name) => {
   return mergeConfig(appConfig.ui.strategy, appConfig.ui[name], config);

package/dist/runtime/composables/useTable.d.ts

@@ -7,12 +7,12 @@ export interface IUseTable<T = object> {
     columns: () => IColumn[];
     options?: (() => Partial<ITableOptions<T>>) | Partial<ITableOptions<T>>;
 }
-export interface IUseSimpleTable<T = object> {
+export interface IUseTableSimple<T = object> {
     items: () => T[];
     status?: () => IStatus;
     columns: () => IColumn[];
     options?: (() => Partial<ISimpleTableOptions<T>>) | Partial<ISimpleTableOptions<T>>;
 }
 export declare const useTable: <T = object>(options: IUseTable<T>) => ComputedRef<ITableOptions<T>>;
-export declare const useSimpleTable: <T = object>(options: IUseSimpleTable<T>) => ComputedRef<ISimpleTableOptions<T>>;
+export declare const useTableSimple: <T = object>(options: IUseTableSimple<T>) => ComputedRef<ISimpleTableOptions<T>>;
 export declare const createTableOptions: <T = object>(repo: IUsePageLoader<T>, columns: IColumn[], rows: IRow[], options: ITableOptions<T>) => ITableOptions<T>;

package/dist/runtime/composables/useTable.mjs

@@ -9,7 +9,7 @@ export const useTable = (options) => computed(() => {
     typeof options.options === "function" ? options.options() : options.options ?? {}
   );
 });
-export const useSimpleTable = (options) => computed(() => {
+export const useTableSimple = (options) => computed(() => {
   const config = useCoreConfig();
   return {
     items: options.items(),

package/dist/runtime/ui.config/pagination.mjs

@@ -1,4 +1,5 @@
 export const pagination = {
+  wrapper: "flex items-center space-x-1",
   default: {
     activeButton: {
       color: "primary",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "1.4.5",
+  "version": "1.4.7",
   "repository": "https://gitlab.finema.co/finema/ui-kit",
   "license": "MIT",
   "author": "Finema Dev Core Team",
@@ -45,6 +45,7 @@
     "lodash-es": "^4.17.21",
     "nuxt-security": "^1.0.0",
     "pinia": "^2.1.7",
+    "qrcode.vue": "^3.4.1",
     "url-join": "^5.0.0",
     "zod": "^3.22.4",
     "zod-i18n-map": "^2.23.0"