@finema/core 1.4.122 → 1.4.124

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "1.4.122",
+  "version": "1.4.124",
   "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.122";
+const version = "1.4.124";
 
 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="max-w-screen mb-4 h-[800px] max-h-screen w-[600px] overflow-auto rounded-lg border opacity-80 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

@@ -119,7 +119,13 @@ const totalInnerRawData = computed((): number => {
 useWatchTrue(
   () => props.status.isSuccess,
   () => {
-    innerRawData.value = [...(innerRawData.value || []), ...props.rawData]
+    if (props.isEnableInfiniteScroll) {
+      innerRawData.value = [...(innerRawData.value || []), ...props.rawData]
+
+      return
+    }
+
+    innerRawData.value = props.rawData
   }
 )
 

package/dist/runtime/components/Log.vue

@@ -0,0 +1,47 @@
+<template>
+  <TeleportSafe v-if="isDevEnv" to="#dev-logs">
+    <VCodeBlock
+      v-if="data"
+      :code="JSON.stringify(data)"
+      max-height="500"
+      :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="500"
+      :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>
+<style>
+.hljs-string{white-space:break-spaces}
+</style>

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.122",
+  "version": "1.4.124",
   "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",