@finema/core 1.4.21 → 1.4.22

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

@@ -1,110 +1,110 @@
-<template>
-  <USlideover
-    v-bind="attrs"
-    :model-value="modelValue"
-    :class="$props.class"
-    :prevent-close="preventClose"
-    :overlay="overlay"
-    :transition="transition"
-    :side="side"
-    :initial-focus="emptyFocusRef"
-    :ui="ui"
-    @update:model-value="$emit('update:modelValue', $event)"
-  >
-    <div v-if="!isHideCloseBtn && preventClose" class="absolute right-0 m-4">
-      <Icon
-        v-if="!isHideCloseBtn"
-        name="i-heroicons-x-mark"
-        class="h-6 w-6 cursor-pointer"
-        @click="close"
-      />
-    </div>
-
-    <div :class="['overflow-y-auto', ui.bodyWrapper]">
-      <slot />
-    </div>
-  </USlideover>
-
-  <div ref="emptyFocusRef" />
-</template>
-
-<script lang="ts" setup>
-import { ref, type PropType, toRef, defineShortcuts, watch } from '#imports'
-import type { Strategy } from '#core/types/utils'
-import { useUI } from '#ui/composables/useUI'
-import { slideover } from '#core/ui.config'
-import { useUiConfig } from '#core/composables/useConfig'
-
-const config = useUiConfig<typeof slideover>(slideover, 'slideover')
-
-const props = defineProps({
-  modelValue: {
-    type: Boolean as PropType<boolean>,
-    default: false,
-  },
-  side: {
-    type: String as PropType<'left' | 'right'>,
-    default: 'right',
-    validator: (value: string) => ['left', 'right'].includes(value),
-  },
-  overlay: {
-    type: Boolean,
-    default: true,
-  },
-  preventClose: {
-    type: Boolean,
-    default: false,
-  },
-  isHideCloseBtn: {
-    type: Boolean,
-    default: false,
-  },
-  transition: {
-    type: Boolean,
-    default: true,
-  },
-  size: {
-    type: String as PropType<keyof typeof slideover.size>,
-    default: () => slideover.default.size,
-  },
-  class: {
-    type: [String, Array, Object] as PropType<any>,
-    default: undefined,
-  },
-  ui: {
-    type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
-    default: undefined,
-  },
-})
-
-const emits = defineEmits(['update:modelValue'])
-
-const emptyFocusRef = ref<HTMLElement | null>(null)
-
-defineShortcuts({
-  escape: {
-    usingInput: true,
-    handler: () => {
-      if (props.preventClose) return
-      emits('update:modelValue', false)
-    },
-  },
-})
-
-const close = () => {
-  emits('update:modelValue', false)
-}
-
-const { ui, attrs } = useUI('slideover', toRef(props, 'ui'), config, toRef(props, 'class'))
-
-watch(
-  () => props.modelValue,
-  () => {
-    if (props.modelValue) {
-      const size = config.size[props.size]
-
-      ui.value.width = size
-    }
-  }
-)
-</script>
+<template>
+  <USlideover
+    v-bind="attrs"
+    :model-value="modelValue"
+    :class="$props.class"
+    :prevent-close="preventClose"
+    :overlay="overlay"
+    :transition="transition"
+    :side="side"
+    :initial-focus="emptyFocusRef"
+    :ui="ui"
+    @update:model-value="$emit('update:modelValue', $event)"
+  >
+    <div v-if="!isHideCloseBtn && preventClose" class="absolute right-0 m-4">
+      <Icon
+        v-if="!isHideCloseBtn"
+        name="i-heroicons-x-mark"
+        class="h-6 w-6 cursor-pointer"
+        @click="close"
+      />
+    </div>
+
+    <div :class="['overflow-y-auto', ui.bodyWrapper]">
+      <slot />
+    </div>
+  </USlideover>
+
+  <div ref="emptyFocusRef" />
+</template>
+
+<script lang="ts" setup>
+import { ref, type PropType, toRef, defineShortcuts, watch } from '#imports'
+import type { Strategy } from '#core/types/utils'
+import { useUI } from '#ui/composables/useUI'
+import { slideover } from '#core/ui.config'
+import { useUiConfig } from '#core/composables/useConfig'
+
+const config = useUiConfig<typeof slideover>(slideover, 'slideover')
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean as PropType<boolean>,
+    default: false,
+  },
+  side: {
+    type: String as PropType<'left' | 'right'>,
+    default: 'right',
+    validator: (value: string) => ['left', 'right'].includes(value),
+  },
+  overlay: {
+    type: Boolean,
+    default: true,
+  },
+  preventClose: {
+    type: Boolean,
+    default: false,
+  },
+  isHideCloseBtn: {
+    type: Boolean,
+    default: false,
+  },
+  transition: {
+    type: Boolean,
+    default: true,
+  },
+  size: {
+    type: String as PropType<keyof typeof slideover.size>,
+    default: () => slideover.default.size,
+  },
+  class: {
+    type: [String, Array, Object] as PropType<any>,
+    default: undefined,
+  },
+  ui: {
+    type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+    default: undefined,
+  },
+})
+
+const emits = defineEmits(['update:modelValue'])
+
+const emptyFocusRef = ref<HTMLElement | null>(null)
+
+defineShortcuts({
+  escape: {
+    usingInput: true,
+    handler: () => {
+      if (props.preventClose) return
+      emits('update:modelValue', false)
+    },
+  },
+})
+
+const close = () => {
+  emits('update:modelValue', false)
+}
+
+const { ui, attrs } = useUI('slideover', toRef(props, 'ui'), config, toRef(props, 'class'))
+
+watch(
+  () => props.modelValue,
+  () => {
+    if (props.modelValue) {
+      const size = config.size[props.size]
+
+      ui.value.width = size
+    }
+  }
+)
+</script>

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

@@ -37,10 +37,12 @@
         :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>
@@ -97,14 +99,16 @@ const pageBetween = computed((): string => {
     return '0'
   }
 
-  const start = (props.pageOptions.currentPage - 1) * props.pageOptions.limit + 1
+  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)
+  return !props.pageOptions!.totalCount
+    ? '0'
+    : StringHelper.withComma(props.pageOptions!.totalCount)
 })
 
 watch(page, () => {

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

@@ -1,16 +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<string>(() => TimeHelper.getDateFormTime(props.value))
-</script>
+<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.getDateFormTime(props.value))
+</script>

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

@@ -1,30 +1,30 @@
-<template>
-  <p :title="`${getValue.date} ${getValue.time}`" class="flex flex-col whitespace-nowrap px-4">
-    <span>
-      {{ getValue.date }}
-    </span>
-    <span class="text-gray text-xs">
-      {{ getValue.time }}
-    </span>
-  </p>
-</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<{ date: string; time: string }>(() => {
-  return props.value
-    ? {
-        date: TimeHelper.getDateFormTime(props.value),
-        time: TimeHelper.getTimeFormTime(props.value),
-      }
-    : { date: '-', time: '-' }
-})
-</script>
+<template>
+  <p :title="`${getValue.date} ${getValue.time}`" class="flex flex-col whitespace-nowrap px-4">
+    <span>
+      {{ getValue.date }}
+    </span>
+    <span class="text-gray text-xs">
+      {{ getValue.time }}
+    </span>
+  </p>
+</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<{ date: string; time: string }>(() => {
+  return props.value
+    ? {
+        date: TimeHelper.getDateFormTime(props.value),
+        time: TimeHelper.getTimeFormTime(props.value),
+      }
+    : { date: '-', time: '-' }
+})
+</script>

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

@@ -1,13 +1,13 @@
-<template><img 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><img 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>

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 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>

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

@@ -1,53 +1,57 @@
-<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>
+<template>
+  <Base
+    v-bind="$attrs"
+    :columns="options.columns"
+    :raw-data="itemsByPage"
+    :status="options.status"
+    :page-options="pageOptions"
+    @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'
+
+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,47 +1,51 @@
-<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"
-      @page-change="onPageChange"
-    />
-  </div>
-</template>
-<script lang="ts" setup>
-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
-  (event: 'search', q: string): void
-}>()
-
-const props = defineProps({
-  options: { type: Object as PropType<ITableOptions>, required: true },
-})
-
-const q = ref(props.options?.pageOptions.search ?? '')
-
-watch(
-  q,
-  _debounce((value) => {
-    emits('search', value)
-  }, 500)
-)
-
-const onPageChange = (page: number) => {
-  emits('pageChange', page)
-}
-</script>
+<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"
+      @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, ref, watch } from '#imports'
+import Base from '#core/components/Table/Base.vue'
+
+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 q = ref(props.options?.pageOptions.search ?? '')
+
+watch(
+  q,
+  _debounce((value) => {
+    emits('search', value)
+  }, 500)
+)
+
+const onPageChange = (page: number) => {
+  emits('pageChange', page)
+}
+</script>

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

@@ -31,7 +31,6 @@ export interface IBaseTableOptions<T = object> {
     primary: string;
     status: IStatus;
     columns: IColumn[];
-    isShowCheckbox?: boolean;
     onRowClick?: (index: number, columns: Array<{
         value: string;
     }>) => void;