@finema/core 1.4.217 → 1.4.218

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

@@ -1,161 +1,161 @@
-<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="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>

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.displayDate(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.displayDate(props.value))
+</script>

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

@@ -1,18 +1,18 @@
-<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 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>

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

@@ -1,15 +1,15 @@
-<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" :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/ColumnText.vue

@@ -1,29 +1,29 @@
-<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 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>

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

@@ -1,70 +1,70 @@
-<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 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>