@finema/core 1.4.115 → 1.4.116

package/dist/runtime/components/Form/InputTags/index.vue

@@ -1,134 +1,145 @@
-<template>
-  <FieldWrapper v-bind="wrapperProps">
-    <div
-      :class="[
-        ui.base,
-        ui.border,
-        ui.shadow,
-        ui.padding,
-        {
-          [ui.stages.default]: !wrapperProps.errorMessage,
-          [ui.stages.error]: wrapperProps.errorMessage,
-        },
-      ]"
-    >
-      <p
-        v-if="wrapperProps.placeholder && !innerValue && (!value || value.length === 0)"
-        :class="[ui.placeholder]"
-        @click="focusInput"
-      >
-        {{ wrapperProps.placeholder }}
-      </p>
-      <div :class="[ui.innerWrapper]">
-        <Badge
-          v-for="(text, index) in value"
-          :key="index"
-          :size="ui.tag.size || (ui.default.tag.size as any)"
-          :color="ui.tag.color || (ui.default.tag.color as any)"
-          :variant="ui.tag.variant || (ui.default.tag.variant as any)"
-          :ui="badgeUi"
-        >
-          {{ tagPrefix + text }}
-        </Badge>
-        <input
-          ref="inputRef"
-          v-model="innerValue"
-          :class="[ui.input]"
-          :disabled="wrapperProps.isDisabled"
-          :name="name"
-          :readonly="isReadonly"
-          :autofocus="!!autoFocus"
-          @blur="onBlur"
-          @keyup.delete="onDelete"
-          @keyup.enter="onEnter"
-          @keyup.space="onSpace"
-        />
-      </div>
-    </div>
-  </FieldWrapper>
-</template>
-
-<script lang="ts" setup>
-import { ref, toRef, useUI, useUiConfig } from '#imports'
-import { type ITagsFieldProps } from '#core/components/Form/InputTags/types'
-import { tags } from '#core/ui.config'
-import { useFieldHOC } from '#core/composables/useForm'
-import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
-
-const config = useUiConfig<typeof tags>(tags, 'tags')
-
-const props = withDefaults(defineProps<ITagsFieldProps>(), {
-  tagPrefix: '#',
-})
-
-const emits = defineEmits(['change', 'blur'])
-
-const { value, wrapperProps } = useFieldHOC<string[]>(props)
-
-const { ui } = useUI('tags', toRef(props, 'ui'), config)
-
-const inputRef = ref<HTMLInputElement | null>(null)
-const innerValue = ref<string>('')
-const backspaceCount = ref<number>(0)
-
-const operateValue = (input: string) => {
-  const tagSet = splitBySpace(input)
-
-  if (value.value && value.value.length > 0) {
-    value.value = [...value.value, ...tagSet]
-  } else {
-    value.value = tagSet
-  }
-
-  innerValue.value = ''
-
-  emits('change', value.value)
-}
-
-const onBlur = (e: FocusEvent) => {
-  const eventValue = e.target as HTMLInputElement
-
-  if (!eventValue.value || eventValue.value === '') return
-
-  operateValue(eventValue.value)
-
-  emits('blur', eventValue.value)
-}
-
-const onDelete = (e: KeyboardEvent) => {
-  if (e.key === 'Backspace') {
-    if (innerValue.value === '') {
-      backspaceCount.value += 1
-    } else {
-      backspaceCount.value = 0
-    }
-
-    if (backspaceCount.value >= 2 && value.value.length > 0) {
-      value.value.pop()
-      backspaceCount.value = 0
-    }
-  }
-}
-
-const onEnter = (e: KeyboardEvent) => {
-  if (e.key === 'Enter') {
-    operateValue(innerValue.value)
-  }
-}
-
-const onSpace = (e: KeyboardEvent) => {
-  if (e.key === ' ') {
-    operateValue(innerValue.value)
-  }
-}
-
-const splitBySpace = (input: string): string[] => {
-  const spited = input.split(' ')
-
-  return spited.filter((item) => item !== '')
-}
-
-const focusInput = () => {
-  inputRef.value?.focus()
-}
-</script>
+<template>
+  <FieldWrapper v-bind="wrapperProps">
+    <div
+      :class="[
+        ui.base,
+        ui.border,
+        ui.shadow,
+        ui.padding,
+        {
+          [ui.stages.default]: !wrapperProps.errorMessage,
+          [ui.stages.error]: wrapperProps.errorMessage,
+        },
+      ]"
+    >
+      <p
+        v-if="wrapperProps.placeholder && !innerValue && (!value || value.length === 0)"
+        :class="[ui.placeholder]"
+        @click="focusInput"
+      >
+        {{ wrapperProps.placeholder }}
+      </p>
+      <div :class="[ui.innerWrapper]">
+        <Badge
+          v-for="(text, index) in value"
+          :key="index"
+          :size="ui.tag.size || (ui.default.tag.size as any)"
+          :color="ui.tag.color || (ui.default.tag.color as any)"
+          :variant="ui.tag.variant || (ui.default.tag.variant as any)"
+          :ui="badgeUi"
+        >
+          <div class="flex items-center gap-x-0.5">
+            {{ tagPrefix + text }}
+            <Icon
+              name="i-heroicons:x-circle-20-solid"
+              class="size-4 cursor-pointer"
+              @click="onClickDelete(index)"
+            />
+          </div>
+        </Badge>
+        <input
+          ref="inputRef"
+          v-model="innerValue"
+          :class="[ui.input]"
+          :disabled="wrapperProps.isDisabled"
+          :name="name"
+          :readonly="isReadonly"
+          :autofocus="!!autoFocus"
+          @blur="onBlur"
+          @keyup.delete="onDelete"
+          @keyup.enter="onEnter"
+          @keyup.space="onSpace"
+        />
+      </div>
+    </div>
+  </FieldWrapper>
+</template>
+
+<script lang="ts" setup>
+import { ref, toRef, useUI, useUiConfig } from '#imports'
+import { type ITagsFieldProps } from '#core/components/Form/InputTags/types'
+import { tags } from '#core/ui.config'
+import { useFieldHOC } from '#core/composables/useForm'
+import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
+
+const config = useUiConfig<typeof tags>(tags, 'tags')
+
+const props = withDefaults(defineProps<ITagsFieldProps>(), {
+  tagPrefix: '#',
+})
+
+const emits = defineEmits(['change', 'blur'])
+
+const { value, wrapperProps } = useFieldHOC<string[]>(props)
+
+const { ui } = useUI('tags', toRef(props, 'ui'), config)
+
+const inputRef = ref<HTMLInputElement | null>(null)
+const innerValue = ref<string>('')
+const backspaceCount = ref<number>(0)
+
+const operateValue = (input: string) => {
+  const tagSet = splitBySpace(input)
+
+  if (value.value && value.value.length > 0) {
+    value.value = [...value.value, ...tagSet]
+  } else {
+    value.value = tagSet
+  }
+
+  innerValue.value = ''
+
+  emits('change', value.value)
+}
+
+const onBlur = (e: FocusEvent) => {
+  const eventValue = e.target as HTMLInputElement
+
+  if (!eventValue.value || eventValue.value === '') return
+
+  operateValue(eventValue.value)
+
+  emits('blur', eventValue.value)
+}
+
+const onDelete = (e: KeyboardEvent) => {
+  if (e.key === 'Backspace') {
+    if (innerValue.value === '') {
+      backspaceCount.value += 1
+    } else {
+      backspaceCount.value = 0
+    }
+
+    if (backspaceCount.value >= 2 && value.value.length > 0) {
+      value.value = value.value.slice(0, value.value.length - 1)
+      backspaceCount.value = 0
+    }
+  }
+}
+
+const onClickDelete = (index: number) => {
+  value.value = value.value.filter((_, i) => i !== index)
+}
+
+const onEnter = (e: KeyboardEvent) => {
+  if (e.key === 'Enter') {
+    operateValue(innerValue.value)
+  }
+}
+
+const onSpace = (e: KeyboardEvent) => {
+  if (e.key === ' ') {
+    operateValue(innerValue.value)
+  }
+}
+
+const splitBySpace = (input: string): string[] => {
+  const spited = input.split(' ')
+
+  return spited.filter((item) => item !== '')
+}
+
+const focusInput = () => {
+  inputRef.value?.focus()
+}
+</script>

package/dist/runtime/components/Form/InputText/index.vue

@@ -1,67 +1,67 @@
-<template>
-  <FieldWrapper v-bind="wrapperProps">
-    <UInput
-      v-if="type === 'password'"
-      v-model="value"
-      v-maska:[maskOptions]
-      :data-maska="mask"
-      :data-maska-tokens="maskTokens"
-      :data-maska-tokens-replace="maskTokensReplace"
-      :data-maska-reversed="maskReversed"
-      :data-maska-eager="maskEager"
-      :disabled="wrapperProps.isDisabled"
-      :leading-icon="leadingIcon"
-      :trailing-icon="trailingIcon"
-      :name="name"
-      :placeholder="wrapperProps.placeholder"
-      :type="isShowPassword ? 'text' : 'password'"
-      :autofocus="!!autoFocus"
-      :icon="icon"
-      :readonly="isReadonly"
-      :ui="_deepMerge({}, ui, { icon: { trailing: { pointer: '' } } })"
-    >
-      <template #trailing>
-        <UButton
-          color="gray"
-          variant="link"
-          :icon="isShowPassword ? 'i-heroicons-eye-slash' : 'i-heroicons-eye'"
-          :padded="false"
-          @click="isShowPassword = !isShowPassword"
-        />
-      </template>
-    </UInput>
-    <UInput
-      v-else
-      v-model="value"
-      v-maska:[maskOptions]
-      :data-maska="mask"
-      :data-maska-tokens="maskTokens"
-      :data-maska-tokens-replace="maskTokensReplace"
-      :data-maska-reversed="maskReversed"
-      :data-maska-eager="maskEager"
-      :disabled="wrapperProps.isDisabled"
-      :leading-icon="leadingIcon"
-      :trailing-icon="trailingIcon"
-      :name="name"
-      :placeholder="wrapperProps.placeholder"
-      :type="type || 'text'"
-      :autofocus="!!autoFocus"
-      :icon="icon"
-      :readonly="isReadonly"
-      :ui="ui"
-    />
-  </FieldWrapper>
-</template>
-<script lang="ts" setup>
-import { _deepMerge, ref } from '#imports'
-import { type ITextFieldProps } from '#core/components/Form/InputText/types'
-import { useFieldHOC } from '#core/composables/useForm'
-import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
-import { vMaska } from 'maska'
-
-const props = withDefaults(defineProps<ITextFieldProps>(), {})
-
-const { value, wrapperProps } = useFieldHOC<string>(props)
-
-const isShowPassword = ref(false)
-</script>
+<template>
+  <FieldWrapper v-bind="wrapperProps">
+    <UInput
+      v-if="type === 'password'"
+      v-model="value"
+      v-maska:[maskOptions]
+      :data-maska="mask"
+      :data-maska-tokens="maskTokens"
+      :data-maska-tokens-replace="maskTokensReplace"
+      :data-maska-reversed="maskReversed"
+      :data-maska-eager="maskEager"
+      :disabled="wrapperProps.isDisabled"
+      :leading-icon="leadingIcon"
+      :trailing-icon="trailingIcon"
+      :name="name"
+      :placeholder="wrapperProps.placeholder"
+      :type="isShowPassword ? 'text' : 'password'"
+      :autofocus="!!autoFocus"
+      :icon="icon"
+      :readonly="isReadonly"
+      :ui="_deepMerge({}, ui, { icon: { trailing: { pointer: '' } } })"
+    >
+      <template #trailing>
+        <UButton
+          color="gray"
+          variant="link"
+          :icon="isShowPassword ? 'i-heroicons-eye-slash' : 'i-heroicons-eye'"
+          :padded="false"
+          @click="isShowPassword = !isShowPassword"
+        />
+      </template>
+    </UInput>
+    <UInput
+      v-else
+      v-model="value"
+      v-maska:[maskOptions]
+      :data-maska="mask"
+      :data-maska-tokens="maskTokens"
+      :data-maska-tokens-replace="maskTokensReplace"
+      :data-maska-reversed="maskReversed"
+      :data-maska-eager="maskEager"
+      :disabled="wrapperProps.isDisabled"
+      :leading-icon="leadingIcon"
+      :trailing-icon="trailingIcon"
+      :name="name"
+      :placeholder="wrapperProps.placeholder"
+      :type="type || 'text'"
+      :autofocus="!!autoFocus"
+      :icon="icon"
+      :readonly="isReadonly"
+      :ui="ui"
+    />
+  </FieldWrapper>
+</template>
+<script lang="ts" setup>
+import { _deepMerge, ref } from '#imports'
+import { type ITextFieldProps } from '#core/components/Form/InputText/types'
+import { useFieldHOC } from '#core/composables/useForm'
+import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
+import { vMaska } from 'maska'
+
+const props = withDefaults(defineProps<ITextFieldProps>(), {})
+
+const { value, wrapperProps } = useFieldHOC<string>(props)
+
+const isShowPassword = ref(false)
+</script>

package/dist/runtime/components/Form/InputTextarea/index.vue

@@ -1,25 +1,25 @@
-<template>
-  <FieldWrapper v-bind="wrapperProps">
-    <UTextarea
-      v-model="value"
-      :disabled="wrapperProps.isDisabled"
-      :name="name"
-      :resize="resize"
-      :placeholder="wrapperProps.placeholder"
-      :autofocus="!!autoFocus"
-      :autoresize="autoresize"
-      :rows="rows"
-      :readonly="isReadonly"
-      :ui="ui"
-    />
-  </FieldWrapper>
-</template>
-<script lang="ts" setup>
-import { useFieldHOC } from '#core/composables/useForm'
-import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
-import { type ITextareaFieldProps } from '#core/components/Form/InputTextarea/types'
-
-const props = withDefaults(defineProps<ITextareaFieldProps>(), {})
-
-const { value, wrapperProps } = useFieldHOC<string>(props)
-</script>
+<template>
+  <FieldWrapper v-bind="wrapperProps">
+    <UTextarea
+      v-model="value"
+      :disabled="wrapperProps.isDisabled"
+      :name="name"
+      :resize="resize"
+      :placeholder="wrapperProps.placeholder"
+      :autofocus="!!autoFocus"
+      :autoresize="autoresize"
+      :rows="rows"
+      :readonly="isReadonly"
+      :ui="ui"
+    />
+  </FieldWrapper>
+</template>
+<script lang="ts" setup>
+import { useFieldHOC } from '#core/composables/useForm'
+import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
+import { type ITextareaFieldProps } from '#core/components/Form/InputTextarea/types'
+
+const props = withDefaults(defineProps<ITextareaFieldProps>(), {})
+
+const { value, wrapperProps } = useFieldHOC<string>(props)
+</script>

package/dist/runtime/components/Form/InputToggle/index.vue

@@ -1,14 +1,14 @@
-<template>
-  <FieldWrapper v-bind="wrapperProps">
-    <UToggle v-model="value" :disabled="wrapperProps.isDisabled" :name="name" :ui="ui" />
-  </FieldWrapper>
-</template>
-
-<script lang="ts" setup>
-import { useFieldHOC } from '#core/composables/useForm'
-import { type IToggleFieldProps } from '#core/components/Form/InputToggle/types'
-import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
-
-const props = withDefaults(defineProps<IToggleFieldProps>(), {})
-const { value, wrapperProps } = useFieldHOC<boolean>(props)
-</script>
+<template>
+  <FieldWrapper v-bind="wrapperProps">
+    <UToggle v-model="value" :disabled="wrapperProps.isDisabled" :name="name" :ui="ui" />
+  </FieldWrapper>
+</template>
+
+<script lang="ts" setup>
+import { useFieldHOC } from '#core/composables/useForm'
+import { type IToggleFieldProps } from '#core/components/Form/InputToggle/types'
+import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
+
+const props = withDefaults(defineProps<IToggleFieldProps>(), {})
+const { value, wrapperProps } = useFieldHOC<boolean>(props)
+</script>