@finema/core 1.4.219 → 2.1.0

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

@@ -1,27 +1,51 @@
 <template>
-  <FieldWrapper v-bind="wrapperProps">
-    <UToggle
+  <FieldWrapper
+    v-bind="wrapperProps"
+    label=""
+    description=""
+  >
+    <Switch
       :model-value="value"
-      :disabled="wrapperProps.isDisabled"
+      :disabled="wrapperProps.disabled"
       :name="name"
       :ui="ui"
+      :label="label"
+      :description="description"
+      :loading="loading"
+      :loading-icon="loadingIcon"
       @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 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

@@ -3,4 +3,3 @@
     <slot />
   </form>
 </template>
-<script lang="ts" setup></script>

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 })
+  <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>
 
-const getSrc = computed(() => {
-  if (isLoading.value) {
-    return props.loadingSrc
-  }
-
-  if (error.value) {
-    return props.errorSrc
-  }
+    <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>
 
-  return props.src
-})
+<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;
+    };
+};

package/dist/runtime/components/Loader.vue

@@ -1,27 +1,29 @@
 <template>
   <div
-    v-if="isLoading"
-    :class="[
-      'flex  w-full items-center justify-center',
-      $attrs.class,
-      {
-        'min-h-[200px]': !$attrs.class,
-      },
-    ]"
+    v-if="loading"
+    :class="theme.base({
+  class: [ui?.base, props.class]
+})"
   >
-    <UIcon name="i-svg-spinners:180-ring-with-bg" class="text-primary text-4xl" dynamic />
+    <Icon
+      :name="icon"
+      :class="[theme.icon({
+  class: [ui?.icon]
+})]"
+    />
   </div>
   <slot v-else />
 </template>
-<script lang="ts" setup>
-defineOptions({
-  inheritAttrs: false,
-})
 
-defineProps({
-  isLoading: {
-    type: Boolean,
-    default: true,
-  },
-})
+<script setup>
+import { computed } from "vue";
+import { loaderTheme } from "#core/theme/loader";
+import { useUiConfig } from "#core/composables/useConfig";
+const props = defineProps({
+  loading: { type: Boolean, required: false, default: true },
+  icon: { type: String, required: false, default: "i-svg-spinners:180-ring-with-bg" },
+  ui: { type: null, required: false },
+  class: { type: null, required: false }
+});
+const theme = computed(() => useUiConfig(loaderTheme, "loader")());
 </script>

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

@@ -0,0 +1,22 @@
+import { loaderTheme } from '#core/theme/loader';
+type __VLS_Props = {
+    loading?: boolean;
+    icon?: string;
+    ui?: typeof loaderTheme['slots'];
+    class?: any;
+};
+declare var __VLS_5: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    loading: boolean;
+    icon: string;
+}, {}, {}, {}, 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;
+    };
+};

package/dist/runtime/components/{LogItem.vue → Log/LogItem.vue}

@@ -1,7 +1,11 @@
 <template>
-  <div>
+  <div class="text-xs">
     <div class="mb-2 flex items-center justify-between">
-      <p v-if="title" class="font-semibold">{{ title }}</p>
+      <p
+        class="font-semibold"
+      >
+        {{ title || "Log" }}
+      </p>
       <Icon
         class="cursor-pointer"
         :name="isShow ? 'heroicons:minus' : 'heroicons:plus'"
@@ -12,32 +16,31 @@
       v-show="isShow"
       :code="getCode"
       max-height="500"
-      :browser-window="true"
+      :browser-window="false"
       :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)
 
+<script setup>
+import { computed, ref } from "vue";
+import { VCodeBlock } from "@wdns/vue-code-block";
+const props = defineProps({
+  data: { type: null, required: false },
+  title: { type: String, required: false }
+});
+const isShow = ref(true);
 const getCode = computed(() => {
   try {
-    return JSON.stringify(props.data)
+    return JSON.stringify(props.data);
   } catch (e) {
-    return JSON.stringify('{}')
+    return JSON.stringify("{}");
   }
-})
+});
 </script>
+
 <style>
 .hljs-string{white-space:break-spaces}
 </style>

package/dist/runtime/components/Log/LogItem.vue.d.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    data?: any;
+    title?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,28 @@
+<template>
+  <DevOnly>
+    <TeleportSafe
+      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>
+  </DevOnly>
+</template>
+
+<script setup>
+import LogItem from "./LogItem.vue";
+defineProps({
+  data: { type: null, required: false },
+  dataItems: { type: Array, required: false },
+  title: { type: String, required: false }
+});
+</script>

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

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    data?: any;
+    dataItems?: any[];
+    title?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;