@finema/core 1.4.217 → 1.4.218

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

@@ -1,159 +1,159 @@
-<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>
-  <slot v-if="!status.isLoading && rawData.length === 0" name="empty-state">
-    <Empty />
-  </slot>
-
-  <div
-    v-if="pageOptions && isEnableInfiniteScroll && !isHideTopPagination"
-    class="mb-4 flex items-center justify-end"
-  >
-    <p class="text-xs text-gray-500">
-      ผลลัพธ์ {{ totalInnerRawData }} ของ {{ totalCountWithComma }} รายการ
-    </p>
-  </div>
-
-  <div :class="containerClass">
-    <slot v-for="(row, index) in innerRawData" :key="index" :row="row" />
-    <div ref="bottomEdgeElement" />
-  </div>
-
-  <slot v-if="status.isLoading" name="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>
-  </slot>
-
-  <div v-if="pageOptions && !isEnableInfiniteScroll" 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 { computed, type PropType } from 'vue'
-import { useElementVisibility } from '@vueuse/core'
-import { StringHelper } from '#core/utils/StringHelper'
-import { ref, useWatchChange, useWatchTrue, watch } from '#imports'
-import type { IFlexDeckOptions } from '#core/components/FlexDeck/types'
-import Empty from '#core/components/Empty.vue'
-
-const emits = defineEmits(['pageChange'])
-
-const props = defineProps({
-  status: {
-    type: Object as PropType<IFlexDeckOptions['status']>,
-    required: true,
-  },
-  pageOptions: {
-    type: Object as PropType<IFlexDeckOptions['pageOptions']>,
-    required: false,
-  },
-  rawData: {
-    type: Array as PropType<IFlexDeckOptions['rawData']>,
-    required: true,
-  },
-  isSimplePagination: {
-    type: Boolean as PropType<IFlexDeckOptions['isSimplePagination']>,
-    default: false,
-  },
-  isHideTopPagination: {
-    type: Boolean as PropType<IFlexDeckOptions['isHideTopPagination']>,
-    default: false,
-  },
-  isHideBottomPagination: {
-    type: Boolean as PropType<IFlexDeckOptions['isHideBottomPagination']>,
-    default: false,
-  },
-  isEnableInfiniteScroll: {
-    type: Boolean as PropType<IFlexDeckOptions['isEnableInfiniteScroll']>,
-    default: false,
-  },
-  isHideCaption: {
-    type: Boolean as PropType<IFlexDeckOptions['isHideCaption']>,
-    default: false,
-  },
-  containerClass: { type: [String, Array, Object] },
-})
-
-const bottomEdgeElement = ref<HTMLElement | null>(null)
-
-const page = ref(props.pageOptions?.currentPage || 1)
-
-const innerRawData = ref<object[]>([])
-
-const targetElement = useElementVisibility(bottomEdgeElement)
-
-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)
-})
-
-const totalInnerRawData = computed((): number => {
-  return innerRawData.value?.length || 0
-})
-
-useWatchChange(
-  () => props.pageOptions?.currentPage,
-  (value: number) => {
-    page.value = value
-  }
-)
-
-useWatchTrue(
-  () => props.status.isSuccess,
-  () => {
-    if (props.isEnableInfiniteScroll) {
-      innerRawData.value = [...(innerRawData.value || []), ...props.rawData]
-
-      return
-    }
-
-    innerRawData.value = props.rawData
-  }
-)
-
-watch(page, () => {
-  emits('pageChange', page.value)
-})
-
-watch(targetElement, (value) => {
-  if (props.status.isLoading || !props.isEnableInfiniteScroll) return
-
-  if (page.value < props.pageOptions!.totalPage && value) {
-    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>
+  <slot v-if="!status.isLoading && rawData.length === 0" name="empty-state">
+    <Empty />
+  </slot>
+
+  <div
+    v-if="pageOptions && isEnableInfiniteScroll && !isHideTopPagination"
+    class="mb-4 flex items-center justify-end"
+  >
+    <p class="text-xs text-gray-500">
+      ผลลัพธ์ {{ totalInnerRawData }} ของ {{ totalCountWithComma }} รายการ
+    </p>
+  </div>
+
+  <div :class="containerClass">
+    <slot v-for="(row, index) in innerRawData" :key="index" :row="row" />
+    <div ref="bottomEdgeElement" />
+  </div>
+
+  <slot v-if="status.isLoading" name="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>
+  </slot>
+
+  <div v-if="pageOptions && !isEnableInfiniteScroll" 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 { computed, type PropType } from 'vue'
+import { useElementVisibility } from '@vueuse/core'
+import { StringHelper } from '#core/utils/StringHelper'
+import { ref, useWatchChange, useWatchTrue, watch } from '#imports'
+import type { IFlexDeckOptions } from '#core/components/FlexDeck/types'
+import Empty from '#core/components/Empty.vue'
+
+const emits = defineEmits(['pageChange'])
+
+const props = defineProps({
+  status: {
+    type: Object as PropType<IFlexDeckOptions['status']>,
+    required: true,
+  },
+  pageOptions: {
+    type: Object as PropType<IFlexDeckOptions['pageOptions']>,
+    required: false,
+  },
+  rawData: {
+    type: Array as PropType<IFlexDeckOptions['rawData']>,
+    required: true,
+  },
+  isSimplePagination: {
+    type: Boolean as PropType<IFlexDeckOptions['isSimplePagination']>,
+    default: false,
+  },
+  isHideTopPagination: {
+    type: Boolean as PropType<IFlexDeckOptions['isHideTopPagination']>,
+    default: false,
+  },
+  isHideBottomPagination: {
+    type: Boolean as PropType<IFlexDeckOptions['isHideBottomPagination']>,
+    default: false,
+  },
+  isEnableInfiniteScroll: {
+    type: Boolean as PropType<IFlexDeckOptions['isEnableInfiniteScroll']>,
+    default: false,
+  },
+  isHideCaption: {
+    type: Boolean as PropType<IFlexDeckOptions['isHideCaption']>,
+    default: false,
+  },
+  containerClass: { type: [String, Array, Object] },
+})
+
+const bottomEdgeElement = ref<HTMLElement | null>(null)
+
+const page = ref(props.pageOptions?.currentPage || 1)
+
+const innerRawData = ref<object[]>([])
+
+const targetElement = useElementVisibility(bottomEdgeElement)
+
+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)
+})
+
+const totalInnerRawData = computed((): number => {
+  return innerRawData.value?.length || 0
+})
+
+useWatchChange(
+  () => props.pageOptions?.currentPage,
+  (value: number) => {
+    page.value = value
+  }
+)
+
+useWatchTrue(
+  () => props.status.isSuccess,
+  () => {
+    if (props.isEnableInfiniteScroll) {
+      innerRawData.value = [...(innerRawData.value || []), ...props.rawData]
+
+      return
+    }
+
+    innerRawData.value = props.rawData
+  }
+)
+
+watch(page, () => {
+  emits('pageChange', page.value)
+})
+
+watch(targetElement, (value) => {
+  if (props.status.isLoading || !props.isEnableInfiniteScroll) return
+
+  if (page.value < props.pageOptions!.totalPage && value) {
+    page.value++
+  }
+})
+</script>

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

@@ -1,68 +1,68 @@
-<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
-      :raw-data="options.rawData"
-      :status="options.status"
-      :page-options="options.pageOptions"
-      :is-simple-pagination="isShowSimplePagination"
-      :is-hide-top-pagination="options.isHideTopPagination"
-      :is-hide-bottom-pagination="options.isHideBottomPagination"
-      :is-enable-infinite-scroll="options.isEnableInfiniteScroll"
-      :container-class="containerClass"
-      @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 { _debounce, computed, ref, watch } from '#imports'
-import { useCoreConfig } from '#core/composables/useConfig'
-import Base from '#core/components/FlexDeck/Base.vue'
-import type { IFlexDeckOptions } from '#core/components/FlexDeck/types'
-
-defineSlots<{
-  default: (props: { row: any }) => any
-  'empty-state': () => any
-  'loading-state': () => any
-}>()
-
-const emits = defineEmits<{
-  (event: 'pageChange', page: number): void
-  (event: 'search', q: string): void
-}>()
-
-const props = defineProps({
-  options: { type: Object as PropType<IFlexDeckOptions>, required: true },
-  containerClass: { type: [String, Array, Object], default: '' },
-})
-
-const coreConfig = useCoreConfig()
-
-const q = ref(props.options?.pageOptions.search ?? '')
-
-const isShowSimplePagination = computed(
-  (): boolean => props.options.isSimplePagination ?? coreConfig.is_simple_pagination
-)
-
-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
+      :raw-data="options.rawData"
+      :status="options.status"
+      :page-options="options.pageOptions"
+      :is-simple-pagination="isShowSimplePagination"
+      :is-hide-top-pagination="options.isHideTopPagination"
+      :is-hide-bottom-pagination="options.isHideBottomPagination"
+      :is-enable-infinite-scroll="options.isEnableInfiniteScroll"
+      :container-class="containerClass"
+      @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 { _debounce, computed, ref, watch } from '#imports'
+import { useCoreConfig } from '#core/composables/useConfig'
+import Base from '#core/components/FlexDeck/Base.vue'
+import type { IFlexDeckOptions } from '#core/components/FlexDeck/types'
+
+defineSlots<{
+  default: (props: { row: any }) => any
+  'empty-state': () => any
+  'loading-state': () => any
+}>()
+
+const emits = defineEmits<{
+  (event: 'pageChange', page: number): void
+  (event: 'search', q: string): void
+}>()
+
+const props = defineProps({
+  options: { type: Object as PropType<IFlexDeckOptions>, required: true },
+  containerClass: { type: [String, Array, Object], default: '' },
+})
+
+const coreConfig = useCoreConfig()
+
+const q = ref(props.options?.pageOptions.search ?? '')
+
+const isShowSimplePagination = computed(
+  (): boolean => props.options.isSimplePagination ?? coreConfig.is_simple_pagination
+)
+
+watch(
+  q,
+  _debounce((value) => {
+    emits('search', value)
+  }, 500)
+)
+
+const onPageChange = (page: number) => {
+  emits('pageChange', page)
+}
+</script>

package/dist/runtime/components/Form/FieldWrapper.vue

@@ -1,23 +1,23 @@
-<template>
-  <UFormGroup
-    :label="label"
-    :name="name"
-    :description="description"
-    :hint="hint"
-    :size="size as FormGroupSize"
-    :data-testid="name"
-    :help="help"
-    :error="errorMessage"
-    :required="!!isRequired"
-    :ui="containerUi"
-  >
-    <slot />
-  </UFormGroup>
-</template>
-
-<script lang="ts" setup>
-import { type IFieldProps } from '#core/components/Form/types'
-import type { FormGroupSize } from '#ui/types'
-
-defineProps<IFieldProps>()
-</script>
+<template>
+  <UFormGroup
+    :label="label"
+    :name="name"
+    :description="description"
+    :hint="hint"
+    :size="size as FormGroupSize"
+    :data-testid="name"
+    :help="help"
+    :error="errorMessage"
+    :required="!!isRequired"
+    :ui="containerUi"
+  >
+    <slot />
+  </UFormGroup>
+</template>
+
+<script lang="ts" setup>
+import { type IFieldProps } from '#core/components/Form/types'
+import type { FormGroupSize } from '#ui/types'
+
+defineProps<IFieldProps>()
+</script>