@finema/core 1.4.121 → 1.4.123

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "1.4.121",
+  "version": "1.4.123",
   "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.121";
+const version = "1.4.123";
 
 const colors = {
   black: "#20243E",

package/dist/runtime/components/Core.vue

@@ -2,12 +2,36 @@
   <NuxtLoadingIndicator :color="color" />
   <Dialog />
   <UNotifications />
+  <div v-if="isDevEnv" class="fixed bottom-4 right-4 z-50">
+    <div class="flex flex-col items-end justify-end">
+      <div
+        v-show="isShowDevTools"
+        class="mb-4 size-[600px] overflow-auto rounded-lg border shadow-2xl"
+      >
+        <p class="p-3 text-lg font-semibold">Debug Tools</p>
+        <hr />
+        <div id="dev-logs" class="flex flex-col space-y-3 p-3" />
+      </div>
+      <Button
+        :icon="isShowDevTools ? 'heroicons:x-mark' : 'heroicons:information-circle'"
+        color="info"
+        square
+        :ui="{ rounded: 'rounded-full' }"
+        @click="isShowDevTools = !isShowDevTools"
+      />
+    </div>
+  </div>
 </template>
 <script lang="ts" setup>
+import { defineProps, ref } from 'vue'
+
 defineProps({
   color: {
     type: String,
     default: '#3675FB',
   },
 })
+
+const isShowDevTools = ref(false)
+const isDevEnv = process.env.NODE_ENV === 'development'
 </script>

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,32 @@ const totalCountWithComma = computed((): string => {
     : StringHelper.withComma(props.pageOptions!.totalCount)
 })
 
+const totalInnerRawData = computed((): number => {
+  return innerRawData.value?.length || 0
+})
+
+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>

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/components/Log.vue

@@ -0,0 +1,44 @@
+<template>
+  <TeleportSafe v-if="isDevEnv" to="#dev-logs">
+    <VCodeBlock
+      v-if="data"
+      :code="JSON.stringify(data)"
+      max-height="400"
+      :browser-window="true"
+      :indent="2"
+      lang="json"
+      highlightjs
+    >
+      <template #label>
+        <span v-if="title" class="font-semibold">{{ title }}</span>
+      </template>
+    </VCodeBlock>
+
+    <VCodeBlock
+      v-for="(item, index) in dataItems"
+      :key="index"
+      :code="JSON.stringify(item)"
+      max-height="400"
+      :browser-window="true"
+      :indent="2"
+      lang="json"
+      highlightjs
+    >
+      <template #label>
+        <span v-if="title" class="font-semibold">{{ title }} #{{ index + 1 }} </span>
+      </template>
+    </VCodeBlock>
+  </TeleportSafe>
+</template>
+<script lang="ts" setup>
+import { defineProps } from 'vue'
+import { VCodeBlock } from '@wdns/vue-code-block'
+
+defineProps<{
+  data?: any
+  dataItems?: any[]
+  title?: string
+}>()
+
+const isDevEnv = process.env.NODE_ENV === 'development'
+</script>

package/dist/runtime/components/TeleportSafe.vue

@@ -0,0 +1,40 @@
+<template>
+  <Teleport v-if="isShow" :to="target" :disabled="!target || disabled">
+    <slot />
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+
+const props = defineProps<{ to: string; disabled?: boolean }>()
+
+const target = ref<Element | null>(null)
+const isShow = ref(false)
+
+onBeforeUnmount(() => {
+  isShow.value = false
+})
+
+onMounted(() => {
+  isShow.value = true
+
+  const observer = new MutationObserver((mutationList, observer) => {
+    for (const mutation of mutationList) {
+      if (mutation.type !== 'childList') continue
+      const el = document.querySelector(props.to)
+      if (!el) continue
+      target.value = el
+      observer.disconnect()
+
+      break
+    }
+  })
+
+  observer.observe(document, { childList: true, subtree: true })
+
+  return () => {
+    observer.disconnect()
+  }
+})
+</script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "1.4.121",
+  "version": "1.4.123",
   "repository": "https://gitlab.finema.co/finema/ui-kit",
   "license": "MIT",
   "author": "Finema Dev Core Team",
@@ -42,6 +42,7 @@
     "@vee-validate/zod": "^4.12.6",
     "@vuepic/vue-datepicker": "^8.2.0",
     "@vueup/vue-quill": "^1.2.0",
+    "@wdns/vue-code-block": "^2.3.2",
     "axios": "^1.6.8",
     "date-fns": "^3.3.1",
     "i18next": "^23.10.1",
@@ -49,6 +50,7 @@
     "nuxt-lodash": "^2.5.3",
     "nuxt-security": "^1.2.2",
     "pinia": "^2.1.7",
+    "prismjs": "^1.29.0",
     "qrcode.vue": "^3.4.1",
     "url-join": "^5.0.0",
     "zod": "^3.22.4",
@@ -63,6 +65,7 @@
     "@nuxt/test-utils": "^3.12.0",
     "@release-it/conventional-changelog": "^8.0.1",
     "@types/node": "^20.10.17",
+    "@types/prismjs": "^1",
     "@types/quill": "^2",
     "@vue/test-utils": "^2.4.3",
     "changelogen": "^0.5.5",
@@ -88,5 +91,5 @@
   "workspaces": [
     "./*"
   ],
-  "packageManager": "yarn@4.1.1"
+  "packageManager": "yarn@4.2.2"
 }