@finema/core 1.4.99 → 1.4.100

package/dist/runtime/components/Card.vue

@@ -1,38 +1,38 @@
-<template>
-  <UCard v-bind="attrs" :class="$props.class" :as="as" :ui="ui">
-    <template #header>
-      <slot name="header" />
-    </template>
-
-    <slot />
-
-    <template #footer>
-      <slot name="footer" />
-    </template>
-  </UCard>
-</template>
-
-<script setup lang="ts">
-import { useUiConfig, type PropType, useUI, toRef } from '#imports'
-import { card } from '#core/ui.config'
-import type { Strategy } from '#ui/types'
-
-const config = useUiConfig<typeof card>(card, 'card')
-
-const props = defineProps({
-  as: {
-    type: String,
-    default: 'div',
-  },
-  class: {
-    type: [String, Object, Array] as PropType<any>,
-    default: () => '',
-  },
-  ui: {
-    type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
-    default: () => ({}),
-  },
-})
-
-const { ui, attrs } = useUI('card', toRef(props, 'ui'), config, toRef(props, 'class'))
-</script>
+<template>
+  <UCard v-bind="attrs" :class="$props.class" :as="as" :ui="ui">
+    <template #header>
+      <slot name="header" />
+    </template>
+
+    <slot />
+
+    <template #footer>
+      <slot name="footer" />
+    </template>
+  </UCard>
+</template>
+
+<script setup lang="ts">
+import { useUiConfig, type PropType, useUI, toRef } from '#imports'
+import { card } from '#core/ui.config'
+import type { Strategy } from '#ui/types'
+
+const config = useUiConfig<typeof card>(card, 'card')
+
+const props = defineProps({
+  as: {
+    type: String,
+    default: 'div',
+  },
+  class: {
+    type: [String, Object, Array] as PropType<any>,
+    default: () => '',
+  },
+  ui: {
+    type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+    default: () => ({}),
+  },
+})
+
+const { ui, attrs } = useUI('card', toRef(props, 'ui'), config, toRef(props, 'class'))
+</script>

package/dist/runtime/components/Core.vue

@@ -1,13 +1,13 @@
-<template>
-  <NuxtLoadingIndicator :color="color" />
-  <Dialog />
-  <UNotifications />
-</template>
-<script lang="ts" setup>
-defineProps({
-  color: {
-    type: String,
-    default: '#3675FB',
-  },
-})
-</script>
+<template>
+  <NuxtLoadingIndicator :color="color" />
+  <Dialog />
+  <UNotifications />
+</template>
+<script lang="ts" setup>
+defineProps({
+  color: {
+    type: String,
+    default: '#3675FB',
+  },
+})
+</script>

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

@@ -1,108 +1,108 @@
-<template>
-  <Modal
-    v-if="dialog.meta?.type"
-    v-model="dialog.isShow"
-    :ui="{
-      innerWrapper: 'p-6',
-    }"
-    is-hide-close-btn
-    prevent-close
-  >
-    <UNotification
-      :ui="{
-        padding: '',
-        shadow: '',
-        ring: '',
-        icon: {
-          base: 'flex-shrink-0 w-10 h-10',
-        },
-      }"
-      :icon="getIcon"
-      :description="dialog.meta?.description"
-      :timeout="0"
-      :title="dialog.meta?.title"
-      :color="getColor"
-      close-button=""
-    />
-    <div :class="[uiConfig.actionGroup.wrapper]">
-      <Button
-        v-if="dialog.meta?.isShowCancelBtn"
-        :color="uiConfig.actionGroup.cancelColor"
-        :variant="uiConfig.actionGroup.cancelVariant"
-        type="button"
-        @click="dialog.closeDialogCancel"
-      >
-        {{ dialog.meta?.cancelText || 'ยกเลิก' }}
-      </Button>
-      <Button
-        :color="uiConfig.actionGroup.confirmColor"
-        :variant="uiConfig.actionGroup.confirmVariant"
-        :class="[
-          {
-            'btn-success': dialog.meta?.type === DialogType.SUCCESS,
-            'btn-danger': dialog.meta?.type === DialogType.ERROR,
-            'btn-info': dialog.meta?.type === DialogType.INFO,
-            'btn-warning': dialog.meta?.type === DialogType.WARNING,
-            'mr-3': dialog.meta.isShowCancelBtn,
-          },
-        ]"
-        @click="dialog.closeDialogProceed"
-      >
-        {{ dialog.meta?.confirmText || 'ตกลง' }}
-      </Button>
-    </div>
-  </Modal>
-</template>
-<script lang="tsx" setup>
-import { DialogType, useDialog } from '#core/composables/useDialog'
-import { computed } from 'vue'
-import { useUiConfig } from '#core/composables/useConfig'
-import { notification } from '#core/ui.config/notification'
-
-const dialog = useDialog()
-const uiConfig = useUiConfig<typeof notification>(notification, 'notification')
-
-const getColor = computed(() => {
-  if (dialog.meta?.type === DialogType.SUCCESS) {
-    return 'success'
-  }
-
-  if (dialog.meta?.type === DialogType.ERROR) {
-    return 'danger'
-  }
-
-  if (dialog.meta?.type === DialogType.INFO) {
-    return 'info'
-  }
-
-  if (dialog.meta?.type === DialogType.WARNING) {
-    return 'warning'
-  }
-
-  return ''
-})
-
-const getIcon = computed(() => {
-  if (dialog.meta?.isHideIcon) {
-    return ''
-  }
-
-  if (dialog.meta?.type === DialogType.SUCCESS) {
-    return 'i-heroicons-check-circle'
-  }
-
-  if (dialog.meta?.type === DialogType.ERROR) {
-    return 'i-heroicons-x-circle'
-  }
-
-  if (dialog.meta?.type === DialogType.INFO) {
-    return 'i-heroicons-information-circle'
-  }
-
-  if (dialog.meta?.type === DialogType.WARNING) {
-    return 'i-heroicons-exclamation-circle'
-  }
-
-  return ''
-})
-</script>
+<template>
+  <Modal
+    v-if="dialog.meta?.type"
+    v-model="dialog.isShow"
+    :ui="{
+      innerWrapper: 'p-6',
+    }"
+    is-hide-close-btn
+    prevent-close
+  >
+    <UNotification
+      :ui="{
+        padding: '',
+        shadow: '',
+        ring: '',
+        icon: {
+          base: 'flex-shrink-0 w-10 h-10',
+        },
+      }"
+      :icon="getIcon"
+      :description="dialog.meta?.description"
+      :timeout="0"
+      :title="dialog.meta?.title"
+      :color="getColor"
+      close-button=""
+    />
+    <div :class="[uiConfig.actionGroup.wrapper]">
+      <Button
+        v-if="dialog.meta?.isShowCancelBtn"
+        :color="uiConfig.actionGroup.cancelColor"
+        :variant="uiConfig.actionGroup.cancelVariant"
+        type="button"
+        @click="dialog.closeDialogCancel"
+      >
+        {{ dialog.meta?.cancelText || 'ยกเลิก' }}
+      </Button>
+      <Button
+        :color="uiConfig.actionGroup.confirmColor"
+        :variant="uiConfig.actionGroup.confirmVariant"
+        :class="[
+          {
+            'btn-success': dialog.meta?.type === DialogType.SUCCESS,
+            'btn-danger': dialog.meta?.type === DialogType.ERROR,
+            'btn-info': dialog.meta?.type === DialogType.INFO,
+            'btn-warning': dialog.meta?.type === DialogType.WARNING,
+            'mr-3': dialog.meta.isShowCancelBtn,
+          },
+        ]"
+        @click="dialog.closeDialogProceed"
+      >
+        {{ dialog.meta?.confirmText || 'ตกลง' }}
+      </Button>
+    </div>
+  </Modal>
+</template>
+<script lang="tsx" setup>
+import { DialogType, useDialog } from '#core/composables/useDialog'
+import { computed } from 'vue'
+import { useUiConfig } from '#core/composables/useConfig'
+import { notification } from '#core/ui.config/notification'
+
+const dialog = useDialog()
+const uiConfig = useUiConfig<typeof notification>(notification, 'notification')
+
+const getColor = computed(() => {
+  if (dialog.meta?.type === DialogType.SUCCESS) {
+    return 'success'
+  }
+
+  if (dialog.meta?.type === DialogType.ERROR) {
+    return 'danger'
+  }
+
+  if (dialog.meta?.type === DialogType.INFO) {
+    return 'info'
+  }
+
+  if (dialog.meta?.type === DialogType.WARNING) {
+    return 'warning'
+  }
+
+  return ''
+})
+
+const getIcon = computed(() => {
+  if (dialog.meta?.isHideIcon) {
+    return ''
+  }
+
+  if (dialog.meta?.type === DialogType.SUCCESS) {
+    return 'i-heroicons-check-circle'
+  }
+
+  if (dialog.meta?.type === DialogType.ERROR) {
+    return 'i-heroicons-x-circle'
+  }
+
+  if (dialog.meta?.type === DialogType.INFO) {
+    return 'i-heroicons-information-circle'
+  }
+
+  if (dialog.meta?.type === DialogType.WARNING) {
+    return 'i-heroicons-exclamation-circle'
+  }
+
+  return ''
+})
+</script>

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

@@ -1,70 +1,70 @@
-<template>
-  <UDropdown
-    v-bind="attrs"
-    :class="$props.class"
-    :items="items"
-    :mode="mode"
-    :open-delay="openDelay"
-    :close-delay="closeDelay"
-    :popper="{ placement: placement, arrow: arrow, offsetDistance: offset }"
-    :ui="ui"
-  >
-    <slot />
-
-    <template v-for="(_, slot) of $slots" #[slot]="slotProps">
-      <slot :name="slot" v-bind="slotProps || {}" />
-    </template>
-  </UDropdown>
-</template>
-
-<script lang="ts" setup>
-import { type PropType, useUiConfig, useUI, toRef } from '#imports'
-import { dropdown } from '#ui/ui.config'
-import { DropdownPlacementArray, type DropdownPlacement } from './types'
-import type { DropdownItem, Strategy } from '#ui/types'
-
-const config = useUiConfig<typeof dropdown>(dropdown, 'dropdown')
-
-const props = defineProps({
-  items: {
-    type: Array as PropType<DropdownItem[][]>,
-    default: () => [],
-  },
-  mode: {
-    type: String as PropType<'click' | 'hover'>,
-    default: 'click',
-    validator: (value: string) => ['click', 'hover'].includes(value),
-  },
-  arrow: {
-    type: Boolean,
-    default: false,
-  },
-  offset: {
-    type: Number,
-    default: 10,
-  },
-  openDelay: {
-    type: Number,
-    default: 0,
-  },
-  closeDelay: {
-    type: Number,
-    default: 0,
-  },
-  placement: {
-    type: String as PropType<DropdownPlacement>,
-    default: 'bottom-start',
-    validator: (value: DropdownPlacement) => DropdownPlacementArray.includes(value),
-  },
-  class: {
-    type: [String, Array, Object] as PropType<any>,
-    default: () => '',
-  },
-  ui: {
-    type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
-    default: () => ({}),
-  },
-})
-
-const { ui, attrs } = useUI('dropdown', toRef(props, 'ui'), config, toRef(props, 'class'))
-</script>
+<template>
+  <UDropdown
+    v-bind="attrs"
+    :class="$props.class"
+    :items="items"
+    :mode="mode"
+    :open-delay="openDelay"
+    :close-delay="closeDelay"
+    :popper="{ placement: placement, arrow: arrow, offsetDistance: offset }"
+    :ui="ui"
+  >
+    <slot />
+
+    <template v-for="(_, slot) of $slots" #[slot]="slotProps">
+      <slot :name="slot" v-bind="slotProps || {}" />
+    </template>
+  </UDropdown>
+</template>
+
+<script lang="ts" setup>
+import { type PropType, useUiConfig, useUI, toRef } from '#imports'
+import { dropdown } from '#ui/ui.config'
+import { DropdownPlacementArray, type DropdownPlacement } from './types'
+import type { DropdownItem, Strategy } from '#ui/types'
+
+const config = useUiConfig<typeof dropdown>(dropdown, 'dropdown')
+
+const props = defineProps({
+  items: {
+    type: Array as PropType<DropdownItem[][]>,
+    default: () => [],
+  },
+  mode: {
+    type: String as PropType<'click' | 'hover'>,
+    default: 'click',
+    validator: (value: string) => ['click', 'hover'].includes(value),
+  },
+  arrow: {
+    type: Boolean,
+    default: false,
+  },
+  offset: {
+    type: Number,
+    default: 10,
+  },
+  openDelay: {
+    type: Number,
+    default: 0,
+  },
+  closeDelay: {
+    type: Number,
+    default: 0,
+  },
+  placement: {
+    type: String as PropType<DropdownPlacement>,
+    default: 'bottom-start',
+    validator: (value: DropdownPlacement) => DropdownPlacementArray.includes(value),
+  },
+  class: {
+    type: [String, Array, Object] as PropType<any>,
+    default: () => '',
+  },
+  ui: {
+    type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+    default: () => ({}),
+  },
+})
+
+const { ui, attrs } = useUI('dropdown', toRef(props, 'ui'), config, toRef(props, 'class'))
+</script>

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

@@ -1,90 +1,90 @@
-<template>
-  <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>
-  <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>
-  </slot>
-  <div v-if="status.isSuccess" :class="containerClass">
-    <slot v-for="(row, index) in rawData" :key="index" :row="row" />
-  </div>
-  <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 { computed, type PropType } from 'vue'
-import { StringHelper } from '#core/utils/StringHelper'
-import { ref, watch } from '#imports'
-import type { IFlexDeckOptions } from '#core/components/FlexDeck/types'
-
-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,
-  },
-  isHideBottomPagination: {
-    type: Boolean as PropType<IFlexDeckOptions['isHideBottomPagination']>,
-    default: false,
-  },
-  containerClass: { type: [String, Array, Object] },
-})
-
-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>
+<template>
+  <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>
+  <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>
+  </slot>
+  <div v-if="status.isSuccess" :class="containerClass">
+    <slot v-for="(row, index) in rawData" :key="index" :row="row" />
+  </div>
+  <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 { computed, type PropType } from 'vue'
+import { StringHelper } from '#core/utils/StringHelper'
+import { ref, watch } from '#imports'
+import type { IFlexDeckOptions } from '#core/components/FlexDeck/types'
+
+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,
+  },
+  isHideBottomPagination: {
+    type: Boolean as PropType<IFlexDeckOptions['isHideBottomPagination']>,
+    default: false,
+  },
+  containerClass: { type: [String, Array, Object] },
+})
+
+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>