@finema/core 1.4.220 → 2.1.0

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

@@ -1,159 +1,154 @@
-<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>
+    <Pagination
+      v-if="pageOptions.totalPage > 1 && !isSimplePagination && !isHideBottomPagination"
+      :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"
+      v-model="page"
+      :page-count="pageOptions.limit"
+      :total="pageOptions.totalCount"
+    />
+  </div>
+</template>
+
+<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,
+    required: true
+  },
+  pageOptions: {
+    type: Object,
+    required: false
+  },
+  rawData: {
+    type: Array,
+    required: true
+  },
+  isSimplePagination: {
+    type: Boolean,
+    default: false
+  },
+  isHideTopPagination: {
+    type: Boolean,
+    default: false
+  },
+  isHideBottomPagination: {
+    type: Boolean,
+    default: false
+  },
+  isEnableInfiniteScroll: {
+    type: Boolean,
+    default: false
+  },
+  isHideCaption: {
+    type: Boolean,
+    default: false
+  },
+  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";
+  }
+  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) => {
+    page.value = value;
+  }
+);
+useWatchTrue(
+  () => props.status.isSuccess,
+  () => {
+    if (props.isEnableInfiniteScroll) {
+      innerRawData.value = [...innerRawData.value || [], ...props.rawData];
+      return;
+    }
+    innerRawData.value = props.rawData;
+  }
+);
+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/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,68 +1,67 @@
-<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"
+    >
+      <Input
+        v-model="q"
+        icon="i-heroicons-magnifying-glass"
+        :placeholder="options.searchPlaceholder || '\u0E04\u0E49\u0E19\u0E2B\u0E32...'"
+      />
+    </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 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,
+    required: true
+  },
+  containerClass: {
+    type: [String, Array, Object],
+    default: ""
+  }
+});
+const coreConfig = useCoreConfig();
+const q = ref(props.options?.pageOptions.search ?? "");
+const isShowSimplePagination = computed(
+  () => props.options.isSimplePagination ?? coreConfig.is_simple_pagination
+);
+watch(
+  q,
+  _debounce((value) => {
+    emits("search", value);
+  }, 500)
+);
+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
-    :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>
+  <FormField
+    :label="label"
+    :name="name"
+    :description="description"
+    :hint="hint"
+    :data-testid="name"
+    :help="help"
+    :error="errorMessage"
+    :required="!!required"
+    :ui="containerUi"
+  >
+    <slot />
+  </FormField>
+</template>
+
+<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;
+    };
+};