@finema/core 2.15.1 → 2.15.2

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "2.15.1",
+  "version": "2.15.2",
   "configKey": "core",
   "builder": {
     "@nuxt/module-builder": "1.0.1",

package/dist/module.mjs

@@ -3,7 +3,7 @@ import defu from 'defu';
 import * as theme from '../dist/runtime/theme/index.js';
 
 const name = "@finema/core";
-const version = "2.15.1";
+const version = "2.15.2";
 
 const nuxtAppOptions = {
   head: {

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

@@ -10,34 +10,72 @@
         :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"
+
+    <slot
+      v-if="options.status.isSuccess && options.rawData.length === 0"
+      name="empty-state"
+    >
+      <Empty />
+    </slot>
+
+    <div
+      v-if="options.pageOptions && options.isEnableInfiniteScroll"
+      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 displayData"
+        :key="index"
+        :row="row"
+      />
+      <div ref="bottomEdgeElement" />
+    </div>
+
+    <slot
+      v-if="options.status.isLoading"
+      name="loading-state"
+    >
+      <Loader
+        :loading="true"
+      />
+    </slot>
+
+    <div
+      v-if="options.pageOptions && !options.isEnableInfiniteScroll && !options.isHidePagination"
+      class="mt-4 flex justify-between px-3"
     >
-      <template
-        v-for="(_, slot) of $slots"
-        #[slot]="slotProps"
-      >
-        <slot
-          :name="slot"
-          v-bind="slotProps || {}"
-        />
-      </template>
-    </Base>
+      <p class="text-xs text-gray-500">
+        {{ pageBetween }} รายการ จากทั้งหมด {{ totalCountWithComma }} รายการ
+      </p>
+      <Pagination
+        v-if="options.pageOptions.totalPage > 1 && !isShowSimplePagination"
+        :default-page="options.pageOptions?.currentPage || 1"
+        :items-per-page="options.pageOptions.limit"
+        :total="options.pageOptions.totalCount"
+        @update:page="onPageChange"
+      />
+      <SimplePagination
+        v-if="options.pageOptions.totalPage > 1 && isShowSimplePagination"
+        v-model="page"
+        :page-count="options.pageOptions.limit"
+        :total="options.pageOptions.totalCount"
+      />
+    </div>
   </div>
 </template>
 
 <script setup>
-import { _debounce, computed, ref, watch } from "#imports";
+import { computed, ref, watch } from "vue";
+import { useElementVisibility } from "@vueuse/core";
+import { StringHelper } from "#core/utils/StringHelper";
+import { _debounce, useWatchChange, useWatchTrue } from "#imports";
 import { useCoreConfig } from "#core/composables/useConfig";
-import Base from "#core/components/FlexDeck/Base.vue";
+import Empty from "#core/components/Empty.vue";
 defineSlots();
 const emits = defineEmits(["pageChange", "search"]);
 const props = defineProps({
@@ -52,16 +90,60 @@ const props = defineProps({
 });
 const coreConfig = useCoreConfig();
 const q = ref(props.options?.pageOptions.search ?? "");
+const bottomEdgeElement = ref(null);
+const page = ref(props.options.pageOptions?.currentPage || 1);
+const innerRawData = ref([]);
+const targetElement = useElementVisibility(bottomEdgeElement);
 const isShowSimplePagination = computed(
   () => props.options.isSimplePagination ?? coreConfig.is_simple_pagination
 );
+const displayData = computed(() => {
+  return props.options.isEnableInfiniteScroll ? innerRawData.value : props.options.rawData;
+});
+const pageBetween = computed(() => {
+  const length = props.options.rawData?.length;
+  if (length === 0) {
+    return "0";
+  }
+  const start = (props.options.pageOptions.currentPage - 1) * props.options.pageOptions.limit + 1;
+  const end = start + length - 1;
+  return `${start} - ${end}`;
+});
+const totalCountWithComma = computed(() => {
+  return !props.options.pageOptions.totalCount ? "0" : StringHelper.withComma(props.options.pageOptions.totalCount);
+});
+const totalInnerRawData = computed(() => {
+  return innerRawData.value?.length || 0;
+});
 watch(
   q,
   _debounce((value) => {
     emits("search", value);
   }, 500)
 );
-const onPageChange = (page) => {
-  emits("pageChange", page);
+useWatchChange(
+  () => props.options.pageOptions?.currentPage,
+  (value) => {
+    page.value = value;
+  }
+);
+useWatchTrue(
+  () => props.options.status.isSuccess,
+  () => {
+    if (props.options.isEnableInfiniteScroll) {
+      innerRawData.value = [...innerRawData.value || [], ...props.options.rawData];
+      return;
+    }
+    innerRawData.value = props.options.rawData;
+  }
+);
+watch(targetElement, (value) => {
+  if (props.options.status.isLoading || !props.options.isEnableInfiniteScroll) return;
+  if (page.value < props.options.pageOptions.totalPage && value) {
+    page.value++;
+  }
+});
+const onPageChange = (page2) => {
+  emits("pageChange", page2);
 };
 </script>

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

@@ -1,8 +1,9 @@
-import type { PropType } from 'vue';
+import { type PropType } from 'vue';
 import type { IFlexDeckOptions } from '#core/components/FlexDeck/types';
 type __VLS_Slots = {
     'default': (props: {
         row: any;
+        key?: number | string;
     }) => any;
     'empty-state': () => any;
     'loading-state': () => any;

package/dist/runtime/components/FlexDeck/types.d.ts

@@ -4,13 +4,10 @@ export interface IFlexDeckOptions<T = object> {
     primary: string;
     status: IStatus;
     pageOptions: IPageOptions;
-    isHideToolbar?: boolean;
     isEnabledSearch?: boolean;
     searchPlaceholder?: string;
     isPreventRouteChange: boolean;
-    isHideCaption?: boolean;
-    isHideBottomPagination?: boolean;
-    isHideTopPagination?: boolean;
+    isHidePagination?: boolean;
     isSimplePagination?: boolean;
     isEnableInfiniteScroll?: boolean;
 }

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

@@ -67,9 +67,9 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
 }>> & Readonly<{
     onPageChange?: ((...args: any[]) => any) | undefined;
 }>, {
-    isHideCaption: boolean | undefined;
-    isSimplePagination: boolean | undefined;
     isHidePagination: boolean | undefined;
+    isSimplePagination: boolean | undefined;
+    isHideCaption: boolean | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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

@@ -12,27 +12,6 @@
         :placeholder="options.searchPlaceholder || '\u0E04\u0E49\u0E19\u0E2B\u0E32....'"
       />
     </div>
-    <div
-      v-if="!options.isHideCaption || !options.isHidePagination"
-      :class="theme.captionContainer({
-  class: [ui?.captionContainer]
-})"
-    >
-      <span
-        :class="theme.captionBoldText({
-  class: [ui?.captionBoldText]
-})"
-      >
-        ผลลัพธ์ทั้งหมด:</span>
-      จำนวน
-      <span
-        :class="theme.captionBoldText({
-  class: [ui?.captionBoldText]
-})"
-      >{{ options.pageOptions?.totalCount || 0 }}</span>
-      รายการ
-    </div>
-
     <UTable
       v-bind="$attrs"
       :loading="options.status.isLoading"
@@ -104,6 +83,7 @@
         {{ pageBetween }} รายการ จากทั้งหมด {{ totalCountWithComma }} รายการ
       </p>
       <Pagination
+        v-if="options.pageOptions.totalPage > 1"
         v-model:page="page"
         :default-page="options.pageOptions?.currentPage || 1"
         :items-per-page="options.pageOptions.limit"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "2.15.1",
+  "version": "2.15.2",
   "repository": "https://gitlab.finema.co/finema/ui-kit",
   "license": "MIT",
   "author": "Finema Dev Core Team",
@@ -28,7 +28,7 @@
     "dev": "nuxi dev playground -o",
     "dev:build": "nuxi build playground",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
-    "release": "npm run prepack && changelogen --release && npm publish && git push --follow-tags",
+    "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
     "lint": "eslint .",
     "lint:fix": "eslint --fix .",
     "test": "vitest run",

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

@@ -1,156 +0,0 @@
-<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 rawData"
-      :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="size-8 text-primary"
-      />
-    </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

@@ -1,103 +0,0 @@
-import { type PropType } from 'vue';
-import type { IFlexDeckOptions } from '#core/components/FlexDeck/types';
-declare var __VLS_1: {}, __VLS_6: {
-    key: number;
-    row: object;
-}, __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, {
-    pageChange: (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<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)[];
-    };
-}>> & Readonly<{
-    onPageChange?: ((...args: any[]) => any) | undefined;
-}>, {
-    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;
-    };
-};