@finema/core 1.4.217 → 1.4.218

package/dist/runtime/components/Log.vue

@@ -1,22 +1,22 @@
-<template>
-  <TeleportSafe v-if="isDevEnv" to="#dev-logs">
-    <LogItem v-if="typeof data !== 'undefined'" :data="data" :title="title" />
-    <LogItem
-      v-for="(item, index) in dataItems"
-      :key="index"
-      :data="item"
-      :title="`${title} #${index + 1}`"
-    />
-  </TeleportSafe>
-</template>
-<script lang="ts" setup>
-import LogItem from './LogItem.vue'
-
-defineProps<{
-  data?: any
-  dataItems?: any[]
-  title?: string
-}>()
-
-const isDevEnv = process.env.NODE_ENV === 'development'
-</script>
+<template>
+  <TeleportSafe v-if="isDevEnv" to="#dev-logs">
+    <LogItem v-if="typeof data !== 'undefined'" :data="data" :title="title" />
+    <LogItem
+      v-for="(item, index) in dataItems"
+      :key="index"
+      :data="item"
+      :title="`${title} #${index + 1}`"
+    />
+  </TeleportSafe>
+</template>
+<script lang="ts" setup>
+import LogItem from './LogItem.vue'
+
+defineProps<{
+  data?: any
+  dataItems?: any[]
+  title?: string
+}>()
+
+const isDevEnv = process.env.NODE_ENV === 'development'
+</script>

package/dist/runtime/components/LogItem.vue

@@ -1,43 +1,43 @@
-<template>
-  <div>
-    <div class="mb-2 flex items-center justify-between">
-      <p v-if="title" class="font-semibold">{{ title }}</p>
-      <Icon
-        class="cursor-pointer"
-        :name="isShow ? 'heroicons:minus' : 'heroicons:plus'"
-        @click="isShow = !isShow"
-      />
-    </div>
-    <VCodeBlock
-      v-show="isShow"
-      :code="getCode"
-      max-height="500"
-      :browser-window="true"
-      :indent="2"
-      lang="json"
-      highlightjs
-    />
-  </div>
-</template>
-<script lang="ts" setup>
-import { computed, ref } from 'vue'
-import { VCodeBlock } from '@wdns/vue-code-block'
-
-const props = defineProps<{
-  data?: any
-  title?: string
-}>()
-
-const isShow = ref(true)
-
-const getCode = computed(() => {
-  try {
-    return JSON.stringify(props.data)
-  } catch (e) {
-    return JSON.stringify('{}')
-  }
-})
-</script>
+<template>
+  <div>
+    <div class="mb-2 flex items-center justify-between">
+      <p v-if="title" class="font-semibold">{{ title }}</p>
+      <Icon
+        class="cursor-pointer"
+        :name="isShow ? 'heroicons:minus' : 'heroicons:plus'"
+        @click="isShow = !isShow"
+      />
+    </div>
+    <VCodeBlock
+      v-show="isShow"
+      :code="getCode"
+      max-height="500"
+      :browser-window="true"
+      :indent="2"
+      lang="json"
+      highlightjs
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import { VCodeBlock } from '@wdns/vue-code-block'
+
+const props = defineProps<{
+  data?: any
+  title?: string
+}>()
+
+const isShow = ref(true)
+
+const getCode = computed(() => {
+  try {
+    return JSON.stringify(props.data)
+  } catch (e) {
+    return JSON.stringify('{}')
+  }
+})
+</script>
 <style>
 .hljs-string{white-space:break-spaces}
-</style>
+</style>

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

@@ -1,146 +1,146 @@
-<template>
-  <UModal
-    v-bind="attrs"
-    :model-value="modelValue"
-    :class="$props.class"
-    :overlay="overlay"
-    :transition="transition"
-    :prevent-close="preventClose"
-    :fullscreen="fullscreen"
-    :initial-focus="modalWrapper"
-    :ui="ui"
-    @update:model-value="$emit('update:modelValue', $event)"
-  >
-    <div
-      v-if="title"
-      :class="[ui.header, { 'flex items-center justify-between': !isHideCloseBtn }]"
-    >
-      <h1 class="text-lg font-semibold">{{ title }}</h1>
-      <Icon
-        v-if="!isHideCloseBtn"
-        name="i-heroicons-x-mark"
-        class="size-6 cursor-pointer opacity-50"
-        @click="close"
-      />
-    </div>
-
-    <div
-      v-if="(!title && !isHideCloseBtn && preventClose) || fullscreen"
-      class="absolute right-0 m-4"
-    >
-      <Icon
-        v-if="!isHideCloseBtn"
-        name="i-heroicons-x-mark"
-        class="size-6 cursor-pointer opacity-50"
-        @click="close"
-      />
-    </div>
-
-    <div ref="modalWrapper" :class="[ui.innerWrapper]">
-      <slot />
-    </div>
-  </UModal>
-</template>
-
-<script lang="ts" setup>
-import { type PropType, defineShortcuts, ref, toRef, watch } from '#imports'
-import { useUI } from '#ui/composables/useUI'
-import { modal } from '#core/ui.config'
-import { useUiConfig } from '#core/composables/useConfig'
-import type { Strategy } from '#ui/types'
-
-const config = useUiConfig<typeof modal>(modal, 'modal')
-
-const props = defineProps({
-  modelValue: {
-    type: Boolean,
-    default: false,
-  },
-  overlay: {
-    type: Boolean,
-    default: true,
-  },
-  transition: {
-    type: Boolean,
-    default: true,
-  },
-  preventClose: {
-    type: Boolean,
-    default: false,
-  },
-  fullscreen: {
-    type: Boolean,
-    default: false,
-  },
-  scrollable: {
-    type: Boolean,
-    default: false,
-  },
-  title: {
-    type: String,
-    default: '',
-  },
-  isHideCloseBtn: {
-    type: Boolean,
-    default: false,
-  },
-  size: {
-    type: String as PropType<keyof typeof modal.size>,
-    default: () => modal.default.size,
-  },
-  position: {
-    type: String as PropType<keyof typeof modal.position>,
-    default: () => modal.default.position,
-  },
-  fixHeightSize: {
-    type: String as PropType<keyof typeof modal.fixHeightSize>,
-    default: () => modal.default.fixHeightSize,
-  },
-  class: {
-    type: [String, Array, Object] as PropType<any>,
-    default: undefined,
-  },
-  ui: {
-    type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
-    default: undefined,
-  },
-})
-
-const emits = defineEmits(['update:modelValue'])
-
-defineShortcuts({
-  escape: {
-    usingInput: true,
-    handler: () => {
-      if (props.preventClose) return
-      emits('update:modelValue', false)
-    },
-  },
-})
-
-const modalWrapper = ref<HTMLElement | null>(null)
-
-const close = () => {
-  emits('update:modelValue', false)
-}
-
-const { ui, attrs } = useUI('modal', toRef(props, 'ui'), config, toRef(props, 'class'))
-
-watch(
-  () => props.modelValue,
-  () => {
-    if (props.modelValue) {
-      const size = config.size[props.size]
-      const fixHeightSize = config.fixHeightSize[props.fixHeightSize]
-      const position = config.position[props.position]
-
-      ui.value.width = size
-      ui.value.container = position
-
-      if (props.scrollable) {
-        ui.value.height = fixHeightSize
-      }
-    }
-  }
-)
-</script>
+<template>
+  <UModal
+    v-bind="attrs"
+    :model-value="modelValue"
+    :class="$props.class"
+    :overlay="overlay"
+    :transition="transition"
+    :prevent-close="preventClose"
+    :fullscreen="fullscreen"
+    :initial-focus="modalWrapper"
+    :ui="ui"
+    @update:model-value="$emit('update:modelValue', $event)"
+  >
+    <div
+      v-if="title"
+      :class="[ui.header, { 'flex items-center justify-between': !isHideCloseBtn }]"
+    >
+      <h1 class="text-lg font-semibold">{{ title }}</h1>
+      <Icon
+        v-if="!isHideCloseBtn"
+        name="i-heroicons-x-mark"
+        class="size-6 cursor-pointer opacity-50"
+        @click="close"
+      />
+    </div>
+
+    <div
+      v-if="(!title && !isHideCloseBtn && preventClose) || fullscreen"
+      class="absolute right-0 m-4"
+    >
+      <Icon
+        v-if="!isHideCloseBtn"
+        name="i-heroicons-x-mark"
+        class="size-6 cursor-pointer opacity-50"
+        @click="close"
+      />
+    </div>
+
+    <div ref="modalWrapper" :class="[ui.innerWrapper]">
+      <slot />
+    </div>
+  </UModal>
+</template>
+
+<script lang="ts" setup>
+import { type PropType, defineShortcuts, ref, toRef, watch } from '#imports'
+import { useUI } from '#ui/composables/useUI'
+import { modal } from '#core/ui.config'
+import { useUiConfig } from '#core/composables/useConfig'
+import type { Strategy } from '#ui/types'
+
+const config = useUiConfig<typeof modal>(modal, 'modal')
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  overlay: {
+    type: Boolean,
+    default: true,
+  },
+  transition: {
+    type: Boolean,
+    default: true,
+  },
+  preventClose: {
+    type: Boolean,
+    default: false,
+  },
+  fullscreen: {
+    type: Boolean,
+    default: false,
+  },
+  scrollable: {
+    type: Boolean,
+    default: false,
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  isHideCloseBtn: {
+    type: Boolean,
+    default: false,
+  },
+  size: {
+    type: String as PropType<keyof typeof modal.size>,
+    default: () => modal.default.size,
+  },
+  position: {
+    type: String as PropType<keyof typeof modal.position>,
+    default: () => modal.default.position,
+  },
+  fixHeightSize: {
+    type: String as PropType<keyof typeof modal.fixHeightSize>,
+    default: () => modal.default.fixHeightSize,
+  },
+  class: {
+    type: [String, Array, Object] as PropType<any>,
+    default: undefined,
+  },
+  ui: {
+    type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+    default: undefined,
+  },
+})
+
+const emits = defineEmits(['update:modelValue'])
+
+defineShortcuts({
+  escape: {
+    usingInput: true,
+    handler: () => {
+      if (props.preventClose) return
+      emits('update:modelValue', false)
+    },
+  },
+})
+
+const modalWrapper = ref<HTMLElement | null>(null)
+
+const close = () => {
+  emits('update:modelValue', false)
+}
+
+const { ui, attrs } = useUI('modal', toRef(props, 'ui'), config, toRef(props, 'class'))
+
+watch(
+  () => props.modelValue,
+  () => {
+    if (props.modelValue) {
+      const size = config.size[props.size]
+      const fixHeightSize = config.fixHeightSize[props.fixHeightSize]
+      const position = config.position[props.position]
+
+      ui.value.width = size
+      ui.value.container = position
+
+      if (props.scrollable) {
+        ui.value.height = fixHeightSize
+      }
+    }
+  }
+)
+</script>

package/dist/runtime/components/OTPInput.vue

@@ -1,127 +1,127 @@
-<template>
-  <div :class="containerClass">
-    <input
-      v-for="(_, index) in length"
-      :key="index"
-      :ref="(el) => setInputRef(index, el)"
-      v-model="otp[index]"
-      :type="isPassword ? 'password' : 'text'"
-      :class="inputClass"
-      maxlength="1"
-      :autofocus="autoFocus && index === 0"
-      @input="handleInput(index)"
-      @focus="handleFocus($event)"
-      @paste="handlePaste"
-      @keydown="handleKeydown(index, $event)"
-    />
-  </div>
-</template>
-<script lang="ts" setup>
-import { type Ref, ref } from 'vue'
-import { watch } from '#imports'
-
-const emits = defineEmits(['update:modelValue'])
-const props = defineProps({
-  length: {
-    type: Number,
-    required: true,
-  },
-  autoFocus: {
-    type: Boolean,
-    default: false,
-  },
-  isPassword: {
-    type: Boolean,
-    default: false,
-  },
-  isOnlyNumber: {
-    type: Boolean,
-    default: false,
-  },
-  modelValue: {
-    type: String,
-    default: '',
-  },
-  containerClass: {
-    type: String,
-    default: 'flex space-x-3',
-  },
-  inputClass: {
-    type: String,
-    default:
-      'h-12 w-12 relative flex flex-col items-center justify-center text-center ' +
-      'disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 form-input ' +
-      'rounded-md placeholder-gray-400 text-sm px-3.5 py-2.5 shadow-sm bg-white text-gray-900 ' +
-      'ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-primary-500',
-  },
-})
-
-const otp: Ref<string[]> = ref(Array(props.length).fill(''))
-const inputRefs: Ref<HTMLInputElement[]> = ref([])
-
-const setInputRef = (index: number, el: HTMLInputElement) => {
-  if (el) {
-    inputRefs.value[index] = el
-  }
-}
-
-const focusNext = (index: number): void => {
-  if (index < props.length - 1) {
-    inputRefs.value[index + 1].focus()
-  }
-}
-
-const focusPrevious = (index: number): void => {
-  if (index > 0) {
-    inputRefs.value[index - 1].focus()
-  }
-}
-
-const isNumeric = (str: string): boolean => {
-  return /^\d+$/.test(str)
-}
-
-const handleInput = (index: number): void => {
-  if (props.isOnlyNumber && !isNumeric(otp.value[index])) {
-    otp.value[index] = ''
-
-    return
-  }
-
-  if (otp.value[index].length === 1) {
-    focusNext(index)
-  }
-}
-
-const handleFocus = (event: FocusEvent): void => {
-  const target = event.target as HTMLInputElement
-
-  target.select()
-}
-
-const handlePaste = (event: ClipboardEvent): void => {
-  const paste = event.clipboardData?.getData('text') || ''
-
-  if (paste.length === props.length) {
-    paste.split('').forEach((char, idx) => {
-      otp.value[idx] = char
-    })
-
-    focusNext(paste.length - 2)
-  }
-}
-
-const handleKeydown = (index: number, event: KeyboardEvent): void => {
-  // Focus the previous field if backspace is pressed on an empty field
-  if (event.key === 'Backspace' && otp.value[index] === '') {
-    focusPrevious(index)
-  }
-}
-
-watch(
-  () => otp.value.join(''),
-  (newValue) => {
-    emits('update:modelValue', newValue)
-  }
-)
-</script>
+<template>
+  <div :class="containerClass">
+    <input
+      v-for="(_, index) in length"
+      :key="index"
+      :ref="(el) => setInputRef(index, el)"
+      v-model="otp[index]"
+      :type="isPassword ? 'password' : 'text'"
+      :class="inputClass"
+      maxlength="1"
+      :autofocus="autoFocus && index === 0"
+      @input="handleInput(index)"
+      @focus="handleFocus($event)"
+      @paste="handlePaste"
+      @keydown="handleKeydown(index, $event)"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+import { type Ref, ref } from 'vue'
+import { watch } from '#imports'
+
+const emits = defineEmits(['update:modelValue'])
+const props = defineProps({
+  length: {
+    type: Number,
+    required: true,
+  },
+  autoFocus: {
+    type: Boolean,
+    default: false,
+  },
+  isPassword: {
+    type: Boolean,
+    default: false,
+  },
+  isOnlyNumber: {
+    type: Boolean,
+    default: false,
+  },
+  modelValue: {
+    type: String,
+    default: '',
+  },
+  containerClass: {
+    type: String,
+    default: 'flex space-x-3',
+  },
+  inputClass: {
+    type: String,
+    default:
+      'h-12 w-12 relative flex flex-col items-center justify-center text-center ' +
+      'disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 form-input ' +
+      'rounded-md placeholder-gray-400 text-sm px-3.5 py-2.5 shadow-sm bg-white text-gray-900 ' +
+      'ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-primary-500',
+  },
+})
+
+const otp: Ref<string[]> = ref(Array(props.length).fill(''))
+const inputRefs: Ref<HTMLInputElement[]> = ref([])
+
+const setInputRef = (index: number, el: HTMLInputElement) => {
+  if (el) {
+    inputRefs.value[index] = el
+  }
+}
+
+const focusNext = (index: number): void => {
+  if (index < props.length - 1) {
+    inputRefs.value[index + 1].focus()
+  }
+}
+
+const focusPrevious = (index: number): void => {
+  if (index > 0) {
+    inputRefs.value[index - 1].focus()
+  }
+}
+
+const isNumeric = (str: string): boolean => {
+  return /^\d+$/.test(str)
+}
+
+const handleInput = (index: number): void => {
+  if (props.isOnlyNumber && !isNumeric(otp.value[index])) {
+    otp.value[index] = ''
+
+    return
+  }
+
+  if (otp.value[index].length === 1) {
+    focusNext(index)
+  }
+}
+
+const handleFocus = (event: FocusEvent): void => {
+  const target = event.target as HTMLInputElement
+
+  target.select()
+}
+
+const handlePaste = (event: ClipboardEvent): void => {
+  const paste = event.clipboardData?.getData('text') || ''
+
+  if (paste.length === props.length) {
+    paste.split('').forEach((char, idx) => {
+      otp.value[idx] = char
+    })
+
+    focusNext(paste.length - 2)
+  }
+}
+
+const handleKeydown = (index: number, event: KeyboardEvent): void => {
+  // Focus the previous field if backspace is pressed on an empty field
+  if (event.key === 'Backspace' && otp.value[index] === '') {
+    focusPrevious(index)
+  }
+}
+
+watch(
+  () => otp.value.join(''),
+  (newValue) => {
+    emits('update:modelValue', newValue)
+  }
+)
+</script>