@finema/core 1.4.220 → 2.1.0

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

@@ -1,68 +1,135 @@
-<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="defu(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 { 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'
-import { defu } from 'defu'
-
-const props = withDefaults(defineProps<ITextFieldProps>(), {})
-
-const { value, wrapperProps } = useFieldHOC<string>(props)
-
-const isShowPassword = ref(false)
-</script>
+<template>
+  <FieldWrapper v-bind="wrapperProps">
+    <Input
+      v-if="type === 'password'"
+      v-maska="activeMaskOptions"
+      :model-value="value"
+      :disabled="wrapperProps.disabled"
+      :leading-icon="leadingIcon"
+      :trailing-icon="trailingIcon"
+      :loading="loading"
+      :loading-icon="loadingIcon"
+      :name="name"
+      :placeholder="wrapperProps.placeholder"
+      :type="isShowPassword ? 'text' : 'password'"
+      :autofocus="!!autoFocus"
+      :icon="icon"
+      :readonly="readonly"
+      :ui="defu(ui, { icon: { trailing: { pointer: '' } } })"
+      @update:model-value="onChange"
+    >
+      <template #trailing>
+        <Button
+          color="neutral"
+          variant="link"
+          :icon="isShowPassword ? 'i-heroicons-eye-slash' : 'i-heroicons-eye'"
+          :padded="false"
+          @click="isShowPassword = !isShowPassword"
+        />
+      </template>
+    </Input>
+    <Input
+      v-else
+      v-maska="activeMaskOptions"
+      :model-value="value"
+      :disabled="wrapperProps.disabled"
+      :leading-icon="leadingIcon"
+      :trailing-icon="trailingIcon"
+      :loading="loading"
+      :loading-icon="loadingIcon"
+      :name="name"
+      :placeholder="wrapperProps.placeholder"
+      :type="type"
+      :autofocus="!!autoFocus"
+      :icon="icon"
+      :readonly="readonly"
+      :ui="ui"
+      @update:model-value="onChange"
+    />
+  </FieldWrapper>
+</template>
+
+<script setup>
+import { vMaska } from "maska/vue";
+import { defu } from "defu";
+import { ref, computed } from "#imports";
+import { useFieldHOC } from "#core/composables/useForm";
+import FieldWrapper from "#core/components/Form/FieldWrapper.vue";
+const emits = defineEmits(["change"]);
+const props = defineProps({
+  type: { type: String, required: false, default: "text" },
+  leadingIcon: { type: null, required: false },
+  trailingIcon: { type: null, required: false },
+  loading: { type: Boolean, required: false },
+  loadingIcon: { type: null, required: false },
+  icon: { type: String, required: false },
+  mask: { type: [String, Array, Function, null], required: false },
+  maskOptions: { type: Object, required: false },
+  maskTokens: { type: null, required: false },
+  maskEager: { type: Boolean, required: false },
+  maskTokensReplace: { type: Boolean, required: false },
+  maskReversed: { type: Boolean, required: false },
+  form: { type: Object, required: false },
+  name: { type: String, required: true },
+  errorMessage: { type: String, required: false },
+  label: { type: null, required: false },
+  description: { type: String, required: false },
+  hint: { type: String, required: false },
+  rules: { type: null, required: false },
+  autoFocus: { type: Boolean, required: false },
+  placeholder: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  required: { type: Boolean, required: false },
+  help: { type: String, required: false },
+  ui: { type: null, required: false }
+});
+const {
+  value,
+  wrapperProps,
+  handleChange
+} = useFieldHOC(props);
+const isShowPassword = ref(false);
+const onChange = (value2) => {
+  handleChange(value2);
+  emits("change", value2);
+};
+const activeMaskOptions = computed(() => {
+  if (props.maskOptions && Object.keys(props.maskOptions).length > 0) {
+    if (typeof props.maskOptions.mask === "string" && Object.keys(props.maskOptions).length === 1) {
+      return props.maskOptions.mask;
+    }
+    return props.maskOptions;
+  }
+  const options = {};
+  let hasIndividualProps = false;
+  if (props.mask !== void 0) {
+    options.mask = props.mask;
+    hasIndividualProps = true;
+  }
+  if (props.maskTokens !== void 0) {
+    options.tokens = props.maskTokens;
+    hasIndividualProps = true;
+  }
+  if (props.maskEager !== void 0) {
+    options.eager = props.maskEager;
+    hasIndividualProps = true;
+  }
+  if (props.maskReversed !== void 0) {
+    options.reversed = props.maskReversed;
+    hasIndividualProps = true;
+  }
+  if (props.maskTokensReplace !== void 0) {
+    options.tokensReplace = props.maskTokensReplace;
+    hasIndividualProps = true;
+  }
+  if (hasIndividualProps) {
+    const keys = Object.keys(options);
+    if (keys.length === 1 && keys[0] === "mask" && typeof options.mask === "string") {
+      return options.mask;
+    }
+    return options;
+  }
+  return void 0;
+});
+</script>

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

@@ -0,0 +1,5 @@
+import type { ITextFieldProps } from '#core/components/Form/InputText/types';
+declare const _default: import("vue").DefineComponent<ITextFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
+    type: "text" | "password" | "email";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -1,18 +1,19 @@
-import { type IFieldProps, type IFormFieldBase, type INPUT_TYPES } from '#core/components/Form/types';
 import type { MaskInputOptions, MaskType } from 'maska';
+import type { IFieldProps, IFormFieldBase, INPUT_TYPES } from '#core/components/Form/types';
 export interface ITextFieldProps extends IFieldProps {
     type?: 'text' | 'password' | 'email';
     leadingIcon?: any;
     trailingIcon?: any;
+    loading?: boolean;
+    loadingIcon?: any;
     icon?: string;
     mask?: MaskType;
     maskOptions?: MaskInputOptions;
-    maskTokens?: string;
+    maskTokens?: MaskInputOptions['tokens'];
     maskEager?: boolean;
     maskTokensReplace?: boolean;
     maskReversed?: boolean;
 }
 export type ITextField = IFormFieldBase<INPUT_TYPES.TEXT | INPUT_TYPES.PASSWORD | INPUT_TYPES.EMAIL, ITextFieldProps, {
     change?: (value: string) => void;
-    blur?: (value: string) => void;
 }>;

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

@@ -1,25 +1,57 @@
-<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">
+    <Textarea
+      :model-value="value"
+      :disabled="wrapperProps.disabled"
+      :name="name"
+      :resize="resize"
+      :placeholder="wrapperProps.placeholder"
+      :autofocus="!!autoFocus"
+      :autoresize="autoresize"
+      :rows="rows"
+      :maxrows="maxrows"
+      :loading="loading"
+      :loading-icon="loadingIcon"
+      :readonly="readonly"
+      :ui="ui"
+      @update:model-value="onChange"
+    />
+  </FieldWrapper>
+</template>
+
+<script setup>
+import { useFieldHOC } from "#core/composables/useForm";
+import FieldWrapper from "#core/components/Form/FieldWrapper.vue";
+const emits = defineEmits(["change"]);
+const props = defineProps({
+  autoresize: { type: Boolean, required: false },
+  resize: { type: Boolean, required: false },
+  rows: { type: Number, required: false },
+  maxrows: { type: Number, required: false },
+  loading: { type: Boolean, required: false },
+  loadingIcon: { type: null, required: false },
+  form: { type: Object, required: false },
+  name: { type: String, required: true },
+  errorMessage: { type: String, required: false },
+  label: { type: null, required: false },
+  description: { type: String, required: false },
+  hint: { type: String, required: false },
+  rules: { type: null, required: false },
+  autoFocus: { type: Boolean, required: false },
+  placeholder: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  required: { type: Boolean, required: false },
+  help: { type: String, required: false },
+  ui: { type: null, required: false }
+});
+const {
+  value,
+  wrapperProps,
+  handleChange
+} = useFieldHOC(props);
+const onChange = (value2) => {
+  handleChange(value2);
+  emits("change", value2);
+};
+</script>

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

@@ -0,0 +1,3 @@
+import type { ITextareaFieldProps } from '#core/components/Form/InputTextarea/types';
+declare const _default: import("vue").DefineComponent<ITextareaFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -1,7 +1,12 @@
-import { type IFieldProps, type IFormFieldBase, type INPUT_TYPES } from '#core/components/Form/types';
+import type { IFieldProps, IFormFieldBase, INPUT_TYPES } from '#core/components/Form/types';
 export interface ITextareaFieldProps extends IFieldProps {
     autoresize?: boolean;
     resize?: boolean;
     rows?: number;
+    maxrows?: number;
+    loading?: boolean;
+    loadingIcon?: any;
 }
-export type ITextareaField = IFormFieldBase<INPUT_TYPES.TEXTAREA, ITextareaFieldProps, never>;
+export type ITextareaField = IFormFieldBase<INPUT_TYPES.TEXTAREA, ITextareaFieldProps, {
+    change?: (value: string) => void;
+}>;

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

@@ -1,27 +1,51 @@
-<template>
-  <FieldWrapper v-bind="wrapperProps">
-    <UToggle
-      :model-value="value"
-      :disabled="wrapperProps.isDisabled"
-      :name="name"
-      :ui="ui"
-      @update:modelValue="onChange"
-    />
-  </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 emit = defineEmits(['change'])
-
-const props = withDefaults(defineProps<IToggleFieldProps>(), {})
-const { value, wrapperProps } = useFieldHOC<boolean>(props)
-
-const onChange = (bool: boolean) => {
-  emit('change', bool)
-  value.value = bool
-}
-</script>
+<template>
+  <FieldWrapper
+    v-bind="wrapperProps"
+    label=""
+    description=""
+  >
+    <Switch
+      :model-value="value"
+      :disabled="wrapperProps.disabled"
+      :name="name"
+      :ui="ui"
+      :label="label"
+      :description="description"
+      :loading="loading"
+      :loading-icon="loadingIcon"
+      @update:modelValue="onChange"
+    />
+  </FieldWrapper>
+</template>
+
+<script setup>
+import { useFieldHOC } from "#core/composables/useForm";
+import FieldWrapper from "#core/components/Form/FieldWrapper.vue";
+const emit = defineEmits(["change"]);
+const props = defineProps({
+  loading: { type: Boolean, required: false },
+  loadingIcon: { type: null, required: false },
+  label: { type: String, required: false },
+  description: { type: String, required: false },
+  form: { type: Object, required: false },
+  name: { type: String, required: true },
+  errorMessage: { type: String, required: false },
+  hint: { type: String, required: false },
+  rules: { type: null, required: false },
+  autoFocus: { type: Boolean, required: false },
+  placeholder: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  required: { type: Boolean, required: false },
+  help: { type: String, required: false },
+  ui: { type: null, required: false }
+});
+const {
+  value,
+  wrapperProps
+} = useFieldHOC(props);
+const onChange = (bool) => {
+  emit("change", bool);
+  value.value = bool;
+};
+</script>

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

@@ -0,0 +1,3 @@
+import type { IToggleFieldProps } from '#core/components/Form/InputToggle/types';
+declare const _default: import("vue").DefineComponent<IToggleFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -1,5 +1,9 @@
-import { type IFieldProps, type IFormFieldBase, type INPUT_TYPES } from '#core/components/Form/types';
+import type { IFieldProps, IFormFieldBase, INPUT_TYPES } from '#core/components/Form/types';
 export interface IToggleFieldProps extends IFieldProps {
+    loading?: boolean;
+    loadingIcon?: any;
+    label?: string;
+    description?: string;
 }
 export type IToggleField = IFormFieldBase<INPUT_TYPES.TOGGLE, IToggleFieldProps, {
     change?: (value: boolean) => void;

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

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

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

@@ -0,0 +1,12 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,25 +1,13 @@
-import { type Component } from '@nuxt/schema';
-import { type FormContext } from 'vee-validate';
-import { type ITextField } from '#core/components/Form/InputText/types';
-import { type IStaticField } from '#core/components/Form/InputStatic/types';
-import { type ICheckboxField } from '#core/components/Form/InputCheckbox/types';
-import { type IRadioField } from '#core/components/Form/InputRadio/types';
-import { type ISelectField } from '#core/components/Form/InputSelect/types';
-import { type IToggleField } from '#core/components/Form/InputToggle/types';
-import { type ITextareaField } from '#core/components/Form/InputTextarea/types';
-import { type IDateTimeField } from '#core/components/Form/InputDateTime/date_time_field.types';
-import { type IDateTimeRangeField } from '#core/components/Form/InputDateTimeRange/date_range_time_field.types';
-import { type IUploadFileClassicField } from '#core/components/Form/InputUploadFileClassic/types';
-import { type IUploadFileField } from '#core/components/Form/InputUploadFileClassicAuto/types';
-import { type IUploadImageAutoField } from '#core/components/Form/InputUploadImageAuto/types';
-import { type IUploadDropzoneField } from '#core/components/Form/InputUploadDropzone/types';
-import { type IUploadDropzoneAutoField } from '#core/components/Form/InputUploadDropzoneAuto/types';
-import type { INumberField } from '#core/components/Form/InputNumber/types';
-import type { IUploadDropzoneAutoMultipleField } from '#core/components/Form/InputUploadDropzoneAutoMultiple/types';
-import type { IUploadDropzoneImageAutoMultipleField } from '#core/components/Form/InputUploadDropzoneImageAutoMultiple/types';
-import type { IWYSIWYGField } from '#core/components/Form/InputWYSIWYG/types';
-import type { ITagsField } from '#core/components/Form/InputTags/types';
+import type { Component } from '@nuxt/schema';
+import type { FormContext } from 'vee-validate';
+import type { ITextField } from '#core/components/Form/InputText/types';
+import type { ITextareaField } from '#core/components/Form/InputTextarea/types';
+import type { IToggleField } from '#core/components/Form/InputToggle/types';
+import type { ISelectField } from '#core/components/Form/InputSelect/types';
+import type { ICheckboxField } from '#core/components/Form/InputCheckbox/types';
 import type { ISelectMultipleField } from '#core/components/Form/InputSelectMultiple/types';
+import type { INumberField } from '#core/components/Form/InputNumber/types';
+import type { IDateTimeField } from '#core/components/Form/InputDateTime/date_time_field.types';
 export declare const enum INPUT_TYPES {
     TEXT = "TEXT",
     NUMBER = "NUMBER",
@@ -54,16 +42,14 @@ export interface IFieldProps {
     label?: string | any;
     description?: string;
     hint?: string;
-    size?: string;
     rules?: any;
     autoFocus?: boolean;
     placeholder?: string;
-    isDisabled?: boolean;
-    isReadonly?: boolean;
-    isRequired?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
     help?: string;
     ui?: object | any;
-    containerUi?: object | any;
 }
 export interface IFormFieldBase<I extends INPUT_TYPES, P extends IFieldProps, O> {
     type: I;
@@ -74,7 +60,7 @@ export interface IFormFieldBase<I extends INPUT_TYPES, P extends IFieldProps, O>
     props: P;
     on?: O;
 }
-export type IFormField = ITextField | INumberField | IStaticField | ICheckboxField | IRadioField | ISelectField | ISelectMultipleField | IToggleField | ITextareaField | IDateTimeField | IDateTimeRangeField | IUploadFileClassicField | IUploadFileField | IUploadImageAutoField | IUploadDropzoneField | IUploadDropzoneAutoField | IUploadDropzoneAutoMultipleField | IUploadDropzoneImageAutoMultipleField | IWYSIWYGField | ITagsField | IFormFieldBase<INPUT_TYPES.COMPONENT, any, any>;
+export type IFormField = ITextField | INumberField | ITextareaField | IToggleField | ISelectField | ICheckboxField | ISelectMultipleField | IDateTimeField | IFormFieldBase<INPUT_TYPES.COMPONENT, any, any>;
 export interface IFileValue {
     url: string;
     path?: string;

package/dist/runtime/components/Image.vue

@@ -1,36 +1,51 @@
-<template>
-  <img :src="getSrc" />
-</template>
-<script lang="ts" setup>
-import { useImage } from '@vueuse/core'
-import { computed } from 'vue'
-
-const props = defineProps({
-  src: {
-    type: String,
-    required: true,
-  },
-  loadingSrc: {
-    type: String,
-    default: '',
-  },
-  errorSrc: {
-    type: String,
-    default: '',
-  },
-})
-
-const { isLoading, error } = useImage({ src: props.src })
-
-const getSrc = computed(() => {
-  if (isLoading.value) {
-    return props.loadingSrc
-  }
-
-  if (error.value) {
-    return props.errorSrc
-  }
-
-  return props.src
-})
-</script>
+<template>
+  <UseImage v-bind="$props">
+    <template #loading>
+      <slot name="loading">
+        <div
+          class="w-full h-full flex justify-center items-center"
+        >
+          <Loader
+            :loading="true"
+          />
+        </div>
+      </slot>
+    </template>
+
+    <template #error>
+      <slot name="error">
+        <div
+          class="w-full h-full flex justify-center items-center"
+        >
+          <p class="text-error-400">
+            <Icon
+              name="i-heroicons:exclamation-circle-solid"
+              class="text-error-400 size-8"
+            />
+          </p>
+        </div>
+      </slot>
+    </template>
+  </UseImage>
+</template>
+
+<script setup>
+import { UseImage } from "@vueuse/components";
+defineSlots();
+defineProps({
+  src: { type: String, required: true },
+  srcset: { type: String, required: false },
+  sizes: { type: String, required: false },
+  alt: { type: String, required: false },
+  class: { type: String, required: false },
+  loading: { type: null, required: false },
+  crossorigin: { type: String, required: false },
+  referrerPolicy: { type: null, required: false },
+  width: { type: null, required: false },
+  height: { type: null, required: false },
+  decoding: { type: null, required: false },
+  fetchPriority: { type: null, required: false },
+  ismap: { type: null, required: false },
+  usemap: { type: null, required: false }
+});
+</script>

package/dist/runtime/components/Image.vue.d.ts

@@ -0,0 +1,13 @@
+import type { UseImageOptions } from '@vueuse/core';
+type __VLS_Slots = {
+    loading: () => any;
+    error: () => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<UseImageOptions, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UseImageOptions> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};