@finema/core 1.4.219 → 2.1.0

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

@@ -1,11 +1,17 @@
 <template>
-  <div v-if="!isHideCaption || !isHideBottomPagination" class="mb-4 text-gray-500">
+  <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">
+  <slot
+    v-if="!status.isLoading && rawData.length === 0"
+    name="empty-state"
+  >
     <Empty />
   </slot>
 
@@ -19,25 +25,39 @@
   </div>
 
   <div :class="containerClass">
-    <slot v-for="(row, index) in innerRawData" :key="index" :row="row" />
+    <slot
+      v-for="(row, index) in innerRawData"
+      :key="index"
+      :row="row"
+    />
     <div ref="bottomEdgeElement" />
   </div>
 
-  <slot v-if="status.isLoading" name="loading-state">
+  <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" />
+      <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">
+  <div
+    v-if="pageOptions && !isEnableInfiniteScroll"
+    class="mt-4 flex justify-between px-3"
+  >
     <p class="text-xs text-gray-500">
       ผลลัพธ์ {{ pageBetween }} ของ {{ totalCountWithComma }} รายการ
     </p>
-    <UPagination
+    <Pagination
       v-if="pageOptions.totalPage > 1 && !isSimplePagination && !isHideBottomPagination"
-      v-model="page"
-      :page-count="pageOptions.limit"
+      :default-page="pageOptions?.currentPage || 1"
+      :items-per-page="pageOptions.limit"
       :total="pageOptions.totalCount"
+      @update:page="emits('pageChange', $event)"
     />
     <SimplePagination
       v-if="pageOptions.totalPage > 1 && isSimplePagination"
@@ -48,112 +68,87 @@
   </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'])
-
+<script setup>
+import { computed } from "vue";
+import { useElementVisibility } from "@vueuse/core";
+import { StringHelper } from "#core/utils/StringHelper";
+import { ref, useWatchChange, useWatchTrue, watch } from "#imports";
+import Empty from "#core/components/Empty.vue";
+const emits = defineEmits(["pageChange"]);
 const props = defineProps({
   status: {
-    type: Object as PropType<IFlexDeckOptions['status']>,
-    required: true,
+    type: Object,
+    required: true
   },
   pageOptions: {
-    type: Object as PropType<IFlexDeckOptions['pageOptions']>,
-    required: false,
+    type: Object,
+    required: false
   },
   rawData: {
-    type: Array as PropType<IFlexDeckOptions['rawData']>,
-    required: true,
+    type: Array,
+    required: true
   },
   isSimplePagination: {
-    type: Boolean as PropType<IFlexDeckOptions['isSimplePagination']>,
-    default: false,
+    type: Boolean,
+    default: false
   },
   isHideTopPagination: {
-    type: Boolean as PropType<IFlexDeckOptions['isHideTopPagination']>,
-    default: false,
+    type: Boolean,
+    default: false
   },
   isHideBottomPagination: {
-    type: Boolean as PropType<IFlexDeckOptions['isHideBottomPagination']>,
-    default: false,
+    type: Boolean,
+    default: false
   },
   isEnableInfiniteScroll: {
-    type: Boolean as PropType<IFlexDeckOptions['isEnableInfiniteScroll']>,
-    default: false,
+    type: Boolean,
+    default: false
   },
   isHideCaption: {
-    type: Boolean as PropType<IFlexDeckOptions['isHideCaption']>,
-    default: false,
+    type: Boolean,
+    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
-
+  containerClass: { type: [String, Array, Object] }
+});
+const bottomEdgeElement = ref(null);
+const page = ref(props.pageOptions?.currentPage || 1);
+const innerRawData = ref([]);
+const targetElement = useElementVisibility(bottomEdgeElement);
+const pageBetween = computed(() => {
+  const length = props.rawData?.length;
   if (length === 0) {
-    return '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
-})
-
+  const start = (props.pageOptions.currentPage - 1) * props.pageOptions.limit + 1;
+  const end = start + length - 1;
+  return `${start} - ${end}`;
+});
+const totalCountWithComma = computed(() => {
+  return !props.pageOptions.totalCount ? "0" : StringHelper.withComma(props.pageOptions.totalCount);
+});
+const totalInnerRawData = computed(() => {
+  return innerRawData.value?.length || 0;
+});
 useWatchChange(
   () => props.pageOptions?.currentPage,
-  (value: number) => {
-    page.value = value
+  (value) => {
+    page.value = value;
   }
-)
-
+);
 useWatchTrue(
   () => props.status.isSuccess,
   () => {
     if (props.isEnableInfiniteScroll) {
-      innerRawData.value = [...(innerRawData.value || []), ...props.rawData]
-
-      return
+      innerRawData.value = [...innerRawData.value || [], ...props.rawData];
+      return;
     }
-
-    innerRawData.value = props.rawData
+    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++
+  if (props.status.isLoading || !props.isEnableInfiniteScroll) return;
+  if (page.value < props.pageOptions.totalPage && value) {
+    page.value++;
   }
-})
+});
 </script>

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

@@ -0,0 +1,63 @@
+import { type PropType } from 'vue';
+import type { IFlexDeckOptions } from '#core/components/FlexDeck/types';
+declare var __VLS_1: {}, __VLS_6: {
+    key: any;
+    row: any;
+}, __VLS_8: {};
+type __VLS_Slots = {} & {
+    'empty-state'?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_6) => any;
+} & {
+    'loading-state'?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    status: {
+        type: PropType<IFlexDeckOptions["status"]>;
+        required: true;
+    };
+    pageOptions: {
+        type: PropType<IFlexDeckOptions["pageOptions"]>;
+        required: false;
+    };
+    rawData: {
+        type: PropType<IFlexDeckOptions["rawData"]>;
+        required: true;
+    };
+    isSimplePagination: {
+        type: PropType<IFlexDeckOptions["isSimplePagination"]>;
+        default: boolean;
+    };
+    isHideTopPagination: {
+        type: PropType<IFlexDeckOptions["isHideTopPagination"]>;
+        default: boolean;
+    };
+    isHideBottomPagination: {
+        type: PropType<IFlexDeckOptions["isHideBottomPagination"]>;
+        default: boolean;
+    };
+    isEnableInfiniteScroll: {
+        type: PropType<IFlexDeckOptions["isEnableInfiniteScroll"]>;
+        default: boolean;
+    };
+    isHideCaption: {
+        type: PropType<IFlexDeckOptions["isHideCaption"]>;
+        default: boolean;
+    };
+    containerClass: {
+        type: (ArrayConstructor | ObjectConstructor | StringConstructor)[];
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
+    isHideCaption: boolean | undefined;
+    isHideBottomPagination: boolean | undefined;
+    isHideTopPagination: boolean | undefined;
+    isSimplePagination: boolean | undefined;
+    isEnableInfiniteScroll: boolean | undefined;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,10 +1,13 @@
 <template>
   <div>
-    <div v-if="options.isEnabledSearch" class="mb-4 flex justify-end">
-      <UInput
+    <div
+      v-if="options.isEnabledSearch"
+      class="mb-4 flex justify-end"
+    >
+      <Input
         v-model="q"
         icon="i-heroicons-magnifying-glass"
-        :placeholder="options.searchPlaceholder || 'ค้นหา...'"
+        :placeholder="options.searchPlaceholder || '\u0E04\u0E49\u0E19\u0E2B\u0E32...'"
       />
     </div>
     <Base
@@ -18,51 +21,47 @@
       :container-class="containerClass"
       @page-change="onPageChange"
     >
-      <template v-for="(_, slot) of $slots" #[slot]="slotProps">
-        <slot :name="slot" v-bind="slotProps || {}" />
+      <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
-}>()
 
+<script setup>
+import { _debounce, computed, ref, watch } from "#imports";
+import { useCoreConfig } from "#core/composables/useConfig";
+import Base from "#core/components/FlexDeck/Base.vue";
+defineSlots();
+const emits = defineEmits(["pageChange", "search"]);
 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 ?? '')
-
+  options: {
+    type: Object,
+    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
-)
-
+  () => props.options.isSimplePagination ?? coreConfig.is_simple_pagination
+);
 watch(
   q,
   _debounce((value) => {
-    emits('search', value)
+    emits("search", value);
   }, 500)
-)
-
-const onPageChange = (page: number) => {
-  emits('pageChange', page)
-}
+);
+const onPageChange = (page) => {
+  emits("pageChange", page);
+};
 </script>

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

@@ -0,0 +1,43 @@
+import type { PropType } from 'vue';
+import type { IFlexDeckOptions } from '#core/components/FlexDeck/types';
+type __VLS_Slots = {
+    'default': (props: {
+        row: any;
+    }) => any;
+    'empty-state': () => any;
+    'loading-state': () => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    options: {
+        type: PropType<IFlexDeckOptions>;
+        required: true;
+    };
+    containerClass: {
+        type: (ArrayConstructor | ObjectConstructor | StringConstructor)[];
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    search: (q: string) => any;
+    pageChange: (page: number) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    options: {
+        type: PropType<IFlexDeckOptions>;
+        required: true;
+    };
+    containerClass: {
+        type: (ArrayConstructor | ObjectConstructor | StringConstructor)[];
+        default: string;
+    };
+}>> & Readonly<{
+    onSearch?: ((q: string) => any) | undefined;
+    onPageChange?: ((page: number) => any) | undefined;
+}>, {
+    containerClass: string | Record<string, any> | unknown[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,23 +1,35 @@
 <template>
-  <UFormGroup
+  <FormField
     :label="label"
     :name="name"
     :description="description"
     :hint="hint"
-    :size="size as FormGroupSize"
     :data-testid="name"
     :help="help"
     :error="errorMessage"
-    :required="!!isRequired"
+    :required="!!required"
     :ui="containerUi"
   >
     <slot />
-  </UFormGroup>
+  </FormField>
 </template>
 
-<script lang="ts" setup>
-import { type IFieldProps } from '#core/components/Form/types'
-import type { FormGroupSize } from '#ui/types'
-
-defineProps<IFieldProps>()
+<script setup>
+defineProps({
+  form: { type: Object, required: false },
+  name: { type: String, required: true },
+  errorMessage: { type: String, required: false },
+  label: { type: null, required: false },
+  description: { type: String, required: false },
+  hint: { type: String, required: false },
+  rules: { type: null, required: false },
+  autoFocus: { type: Boolean, required: false },
+  placeholder: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  required: { type: Boolean, required: false },
+  help: { type: String, required: false },
+  ui: { type: null, required: false },
+  containerUi: { type: null, required: false }
+});
 </script>

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

@@ -0,0 +1,16 @@
+import type { IFieldProps } from '#core/components/Form/types';
+type __VLS_Props = IFieldProps & {
+    containerUi?: any;
+};
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};