@finema/core 1.4.120 → 1.4.122

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "1.4.120",
+  "version": "1.4.122",
   "configKey": "core",
   "compatibility": {
     "nuxt": "^3.7.4"

package/dist/module.mjs

@@ -1,7 +1,7 @@
 import { defineNuxtModule, createResolver, installModule, addPlugin, addComponentsDir, addImportsDir } from '@nuxt/kit';
 
 const name = "@finema/core";
-const version = "1.4.120";
+const version = "1.4.122";
 
 const colors = {
   black: "#20243E",

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

@@ -1,18 +1,31 @@
 <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
+    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 v-if="pageOptions" class="mt-4 flex justify-between px-3">
+
+  <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>
@@ -33,8 +46,9 @@
 
 <script lang="ts" setup>
 import { computed, type PropType } from 'vue'
+import { useElementVisibility } from '@vueuse/core'
 import { StringHelper } from '#core/utils/StringHelper'
-import { ref, watch } from '#imports'
+import { ref, useWatchTrue, watch } from '#imports'
 import type { IFlexDeckOptions } from '#core/components/FlexDeck/types'
 
 const emits = defineEmits(['pageChange'])
@@ -56,15 +70,29 @@ const props = defineProps({
     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,
+  },
   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
 
@@ -84,7 +112,26 @@ const totalCountWithComma = computed((): string => {
     : StringHelper.withComma(props.pageOptions!.totalCount)
 })
 
+const totalInnerRawData = computed((): number => {
+  return innerRawData.value?.length || 0
+})
+
+useWatchTrue(
+  () => props.status.isSuccess,
+  () => {
+    innerRawData.value = [...(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

@@ -12,7 +12,9 @@
       :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"
     >

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

@@ -11,4 +11,5 @@ export interface IFlexDeckOptions<T = object> {
     isHideBottomPagination?: boolean;
     isHideTopPagination?: boolean;
     isSimplePagination?: boolean;
+    isEnableInfiniteScroll?: boolean;
 }

package/dist/runtime/composables/useNotification.d.ts

@@ -1,7 +1,24 @@
+import type { NotificationAction, NotificationColor } from '#ui/types/notification';
+import type { Avatar } from '#ui/types/avatar';
+import type { Button } from '#ui/types/button';
+export interface INotification {
+    id: string;
+    title: string;
+    description?: string;
+    icon?: string;
+    avatar?: Avatar;
+    closeButton?: Button;
+    timeout: number;
+    actions?: NotificationAction[];
+    click?: Function;
+    callback?: Function;
+    color?: NotificationColor;
+    ui?: any;
+}
 export declare const useNotification: () => {
-    info: (notification: UNotification) => void;
-    success: (notification: UNotification) => void;
-    warning: (notification: UNotification) => void;
-    error: (notification: UNotification) => void;
+    info: (notification: Partial<INotification>) => void;
+    success: (notification: Partial<INotification>) => void;
+    warning: (notification: Partial<INotification>) => void;
+    error: (notification: Partial<INotification>) => void;
     remove: any;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "1.4.120",
+  "version": "1.4.122",
   "repository": "https://gitlab.finema.co/finema/ui-kit",
   "license": "MIT",
   "author": "Finema Dev Core Team",
@@ -88,5 +88,5 @@
   "workspaces": [
     "./*"
   ],
-  "packageManager": "yarn@4.1.1"
+  "packageManager": "yarn@4.2.2"
 }