@finema/core 1.4.195 → 1.4.197

package/dist/module.json

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

package/dist/module.mjs

@@ -2,7 +2,7 @@ import { defineNuxtModule, createResolver, installModule, addPlugin, addComponen
 import { defu } from 'defu';
 
 const name = "@finema/core";
-const version = "1.4.195";
+const version = "1.4.197";
 
 const colorModeOptions = {
   preference: "light"

package/dist/runtime/components/Empty.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="flex flex-col items-center justify-center py-6 text-gray-400">
+    <Icon :name="icon" class="text-[100px]" />
+    <p class="mt-4" v-html="message" />
+  </div>
+</template>
+<script lang="ts" setup>
+withDefaults(
+  defineProps<{
+    message: any
+    icon: string
+  }>(),
+  {
+    message: 'ไม่พบข้อมูล!',
+    icon: 'ph:table-thin',
+  }
+)
+</script>

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

@@ -6,9 +6,7 @@
     รายการ
   </div>
   <slot v-if="!status.isLoading && rawData.length === 0" name="empty-state">
-    <div class="min-h-60">
-      <p class="text-center text-sm italic">ไม่พบข้อมูล!</p>
-    </div>
+    <Empty />
   </slot>
 
   <div
@@ -56,6 +54,7 @@ import { useElementVisibility } from '@vueuse/core'
 import { StringHelper } from '#core/utils/StringHelper'
 import { ref, useWatchTrue, watch } from '#imports'
 import type { IFlexDeckOptions } from '#core/components/FlexDeck/types'
+import Empty from '#core/components/Empty.vue'
 
 const emits = defineEmits(['pageChange'])
 

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

@@ -12,9 +12,7 @@
       </div>
     </template>
     <template #empty-state>
-      <div class="flex flex-col items-center justify-center gap-3 py-6">
-        <span class="text-sm italic">ไม่พบข้อมูล!</span>
-      </div>
+      <Empty />
     </template>
     <template v-for="column in columns" #[`${column.key}-data`]="{ row }" :key="column.key">
       <ColumnNumber
@@ -61,7 +59,7 @@
     </template>
   </UTable>
   <div v-if="pageOptions" class="mt-4 flex justify-between px-3">
-    <p class="text-xs text-gray-500">
+    <p class="text-sm text-gray-500">
       ผลลัพธ์ {{ pageBetween }} ของ {{ totalCountWithComma }} รายการ
     </p>
     <UPagination
@@ -87,6 +85,7 @@ 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'
 

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

@@ -21,7 +21,10 @@ export const table = {
     padding: "px-3 py-4",
     color: "text-gray-500 dark:text-gray-400",
     font: "",
-    size: "text-sm"
+    size: "text-base"
+  },
+  progress: {
+    wrapper: "absolute inset-x-0 p-0"
   },
   default: {
     sortButton: {

package/dist/runtime/ui.config/table.ts~

@@ -0,0 +1,48 @@
+import type { DeepPartial } from '#ui/types'
+import type * as config from '#ui/ui.config'
+
+export const table: DeepPartial<(typeof config)['table']> = {
+  wrapper: 'relative overflow-x-auto bg-white rounded-lg',
+  base: 'min-w-full table-fixed',
+  divide: 'divide-y divide-y-2 divide-gray-300 dark:divide-gray-700',
+  thead: '',
+  tbody: 'divide-y divide-gray-200 dark:divide-gray-800',
+  tr: {
+    base: 'even:bg-gray-50',
+    selected: 'bg-gray-50 dark:bg-gray-800/50',
+    active: 'hover:bg-gray-50 dark:hover:bg-gray-800/50 cursor-pointer',
+  },
+  th: {
+    base: 'text-left rtl:text-right',
+    padding: 'px-3 py-3.5',
+    color: 'text-gray-700 dark:text-white',
+    font: 'font-normal',
+    size: 'text-sm',
+  },
+  td: {
+    base: 'whitespace-nowrap',
+    padding: 'px-3 py-4',
+    color: 'text-gray-500 dark:text-gray-400',
+    font: '',
+    size: 'text-sm',
+  },
+  progress: {
+    wrapper: 'absolute inset-x-0 p-0',
+  },
+  default: {
+    sortButton: {
+      icon: 'i-heroicons-arrows-up-down-20-solid',
+      trailing: true,
+      square: true,
+      color: 'gray',
+      variant: 'ghost',
+      class: '-m-1.5 text-gray-700 font-normal',
+    },
+    loadingState: {
+      label: 'กำลังโหลด...',
+    },
+    emptyState: {
+      label: 'ไม่พบข้อมูล',
+    },
+  },
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "1.4.195",
+  "version": "1.4.197",
   "repository": "https://gitlab.finema.co/finema/ui-kit",
   "license": "MIT",
   "author": "Finema Dev Core Team",

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

@@ -1,159 +0,0 @@
-<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>
-      <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="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-xs 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 ColumnDate from '#core/components/Table/ColumnDate.vue'
-import ColumnText from '#core/components/Table/ColumnText.vue'
-
-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)
-
-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>