@finema/core 1.3.2 → 1.3.5

package/dist/runtime/components/Form/Fields.vue

@@ -1,41 +1,41 @@
-<template>
-  <div class="fields">
-    <template v-for="(option, index) in options" :key="option.props.name + index + option.type">
-      <div v-if="!option.isHide" :class="option.class">
-        <FormInputStatic
-          v-if="option.type === INPUT_TYPES.STATIC"
-          :form="form"
-          v-bind="option.props"
-          v-on="option.on ?? {}"
-        />
-        <FormInputText
-          v-if="option.type === INPUT_TYPES.TEXT"
-          :form="form"
-          v-bind="option.props"
-          v-on="option.on ?? {}"
-        />
-        <FormInputToggle
-          v-if="option.type === INPUT_TYPES.TOGGLE"
-          :form="form"
-          v-bind="option.props"
-          v-on="option.on ?? {}"
-        />
-        <FormInputSelect
-          v-if="option.type === INPUT_TYPES.SELECT"
-          :form="form"
-          v-bind="option.props"
-          v-on="option.on ?? {}"
-        />
-      </div>
-    </template>
-  </div>
-</template>
-<script lang="ts" setup>
-import { type FormContext } from 'vee-validate'
-import { type IFormField, INPUT_TYPES } from '#core/components/Form/types'
-
-defineProps<{
-  form?: FormContext
-  options: IFormField[]
-}>()
-</script>
+<template>
+  <div class="fields">
+    <template v-for="(option, index) in options" :key="option.props.name + index + option.type">
+      <div v-if="!option.isHide" :class="option.class">
+        <FormInputStatic
+          v-if="option.type === INPUT_TYPES.STATIC"
+          :form="form"
+          v-bind="option.props"
+          v-on="option.on ?? {}"
+        />
+        <FormInputText
+          v-if="option.type === INPUT_TYPES.TEXT"
+          :form="form"
+          v-bind="option.props"
+          v-on="option.on ?? {}"
+        />
+        <FormInputToggle
+          v-if="option.type === INPUT_TYPES.TOGGLE"
+          :form="form"
+          v-bind="option.props"
+          v-on="option.on ?? {}"
+        />
+        <FormInputSelect
+          v-if="option.type === INPUT_TYPES.SELECT"
+          :form="form"
+          v-bind="option.props"
+          v-on="option.on ?? {}"
+        />
+      </div>
+    </template>
+  </div>
+</template>
+<script lang="ts" setup>
+import { type FormContext } from 'vee-validate'
+import { type IFormField, INPUT_TYPES } from '#core/components/Form/types'
+
+defineProps<{
+  form?: FormContext
+  options: IFormField[]
+}>()
+</script>

package/dist/runtime/components/Form/InputSelect/SelectMenu.vue

@@ -1,11 +1,11 @@
-<template>
-  <div>
-    <USelectMenu v-bind="$attrs" />
-  </div>
-</template>
-
-<script lang="ts" setup>
-defineOptions({
-  inheritAttrs: true,
-})
-</script>
+<template>
+  <div>
+    <USelectMenu v-bind="$attrs" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineOptions({
+  inheritAttrs: true,
+})
+</script>

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

@@ -1,11 +1,11 @@
-<template>
-  <div>
-    <USelect v-bind="$attrs" />
-  </div>
-</template>
-
-<script lang="ts" setup>
-defineOptions({
-  inheritAttrs: true,
-})
-</script>
+<template>
+  <div>
+    <USelect v-bind="$attrs" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineOptions({
+  inheritAttrs: true,
+})
+</script>

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

@@ -1,16 +1,16 @@
-<template>
-  <FieldWrapper v-bind="wrapperProps" :is-required="false">
-    <p class="form-control-static">
-      {{ !value || value.length === 0 ? '-' : value }}
-    </p>
-  </FieldWrapper>
-</template>
-<script lang="ts" setup>
-import { type IStaticFieldProps } from '#core/components/Form/InputStatic/types'
-import { useFieldHOC } from '#core/composables/useForm'
-import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
-
-const props = withDefaults(defineProps<IStaticFieldProps>(), {})
-
-const { value, label, wrapperProps, disabled } = useFieldHOC<string>(props)
-</script>
+<template>
+  <FieldWrapper v-bind="wrapperProps" :is-required="false">
+    <p class="form-control-static">
+      {{ !value || value.length === 0 ? '-' : value }}
+    </p>
+  </FieldWrapper>
+</template>
+<script lang="ts" setup>
+import { type IStaticFieldProps } from '#core/components/Form/InputStatic/types'
+import { useFieldHOC } from '#core/composables/useForm'
+import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
+
+const props = withDefaults(defineProps<IStaticFieldProps>(), {})
+
+const { value, label, wrapperProps, disabled } = useFieldHOC<string>(props)
+</script>

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

@@ -1,28 +1,30 @@
-<template>
-  <FieldWrapper v-bind="wrapperProps">
-    <UInput
-      v-model="value"
-      :disabled="disabled"
-      :name="name"
-      :placeholder="placeholder ?? props.label"
-      :type="isShowPassword ? 'text' : props.type || 'text'"
-      :autofocus="!!autoFocus"
-    />
-  </FieldWrapper>
-</template>
-<script lang="ts" setup>
-import { 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'
-
-const props = withDefaults(defineProps<ITextFieldProps>(), {})
-const emits = defineEmits<{
-  (event: 'change', value: string): void
-  (event: 'blur', value: string): void
-}>()
-
-const { value, wrapperProps, disabled, handleChange } = useFieldHOC<string>(props)
-
-const isShowPassword = ref(false)
-</script>
+<template>
+  <FieldWrapper v-bind="wrapperProps">
+    <UInput
+      v-model="value"
+      :disabled="disabled"
+      :name="name"
+      :placeholder="placeholder ?? props.label"
+      :type="isShowPassword ? 'text' : props.type || 'text'"
+      :autofocus="!!autoFocus"
+      :color="color"
+      :ui="ui"
+    />
+  </FieldWrapper>
+</template>
+<script lang="ts" setup>
+import { 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'
+
+const props = withDefaults(defineProps<ITextFieldProps>(), {})
+const emits = defineEmits<{
+  (event: 'change', value: string): void
+  (event: 'blur', value: string): void
+}>()
+
+const { value, wrapperProps, disabled, handleChange } = useFieldHOC<string>(props)
+
+const isShowPassword = ref(false)
+</script>

package/dist/runtime/components/Form/InputText/types.d.ts

@@ -3,6 +3,8 @@ export interface ITextFieldProps extends IFieldProps {
     type?: 'text' | 'password' | 'email';
     prependIcon?: any;
     appendIcon?: any;
+    color?: string;
+    ui?: object | any;
 }
 export type ITextField = IFormFieldBase<INPUT_TYPES.TEXT | INPUT_TYPES.PASSWORD, ITextFieldProps, {
     change?: (value: string) => void;

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

@@ -1,14 +1,14 @@
-<template>
-  <FieldWrapper v-bind="wrapperProps">
-    <UToggle v-model="value" :disabled="disabled" :name="name" />
-  </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, disabled, handleChange } = useFieldHOC<boolean>(props)
-</script>
+<template>
+  <FieldWrapper v-bind="wrapperProps">
+    <UToggle v-model="value" :disabled="disabled" :name="name" />
+  </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, disabled, handleChange } = useFieldHOC<boolean>(props)
+</script>

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

@@ -1,6 +1,6 @@
-<template>
-  <form class="form">
-    <slot />
-  </form>
-</template>
-<script lang="ts" setup></script>
+<template>
+  <form class="form">
+    <slot />
+  </form>
+</template>
+<script lang="ts" setup></script>

package/dist/runtime/components/Loader.vue

@@ -1,6 +1,6 @@
-<template>
-  <div>
-    <UIcon name="i-heroicons-arrow-path w-12 h-12 animate-spin" />
-  </div>
-</template>
-<script lang="ts" setup></script>
+<template>
+  <div>
+    <UIcon name="i-heroicons-arrow-path w-12 h-12 animate-spin" />
+  </div>
+</template>
+<script lang="ts" setup></script>

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

@@ -1,145 +1,145 @@
-<template>
-  <UModal
-    v-bind="attrs"
-    :model-value="modelValue"
-    :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-xl font-medium">{{ title }}</h1>
-      <Icon
-        v-if="!isHideCloseBtn"
-        name="i-heroicons-x-mark"
-        class="h-6 w-6 cursor-pointer"
-        @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="h-6 w-6 cursor-pointer"
-        @click="close"
-      />
-    </div>
-
-    <div ref="modalWrapper" :class="['overflow-y-auto', ui.innerWrapper]">
-      <slot />
-    </div>
-  </UModal>
-</template>
-
-<script lang="ts" setup>
-import { type PropType, defineShortcuts, ref, toRef, watch } from '#imports'
-import type { Strategy } from '#core/types/utils'
-import { useUI } from '#ui/composables/useUI'
-import { modal } from '#core/ui.config'
-import { useUiConfig } from '#core/composables/useConfig'
-
-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"
+    :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-xl font-medium">{{ title }}</h1>
+      <Icon
+        v-if="!isHideCloseBtn"
+        name="i-heroicons-x-mark"
+        class="h-6 w-6 cursor-pointer"
+        @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="h-6 w-6 cursor-pointer"
+        @click="close"
+      />
+    </div>
+
+    <div ref="modalWrapper" :class="['overflow-y-auto', ui.innerWrapper]">
+      <slot />
+    </div>
+  </UModal>
+</template>
+
+<script lang="ts" setup>
+import { type PropType, defineShortcuts, ref, toRef, watch } from '#imports'
+import type { Strategy } from '#core/types/utils'
+import { useUI } from '#ui/composables/useUI'
+import { modal } from '#core/ui.config'
+import { useUiConfig } from '#core/composables/useConfig'
+
+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>