@finema/core 1.3.40 → 1.4.2

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "1.3.40",
+  "version": "1.4.2",
   "configKey": "core",
   "compatibility": {
     "nuxt": "^3.7.4"

package/dist/module.mjs

@@ -1,8 +1,8 @@
 import { defineNuxtModule, createResolver, installModule, addPlugin, addComponentsDir, addImportsDir } from '@nuxt/kit';
-import { merge } from 'lodash-es';
+import 'lodash-es';
 
 const name = "@finema/core";
-const version = "1.3.40";
+const version = "1.4.2";
 
 const colors = {
   black: "#20243E",
@@ -67,7 +67,6 @@ const colors = {
   }
 };
 
-const _merge = merge;
 const isObj = (item) => item && typeof item === "object" && !Array.isArray(item);
 const _deepMerge = (target, ...sources) => {
   if (!sources.length)
@@ -171,6 +170,112 @@ const alert = {
   }
 };
 
+const button = {
+  default: {
+    size: "md",
+    variant: "solid",
+    color: "primary",
+    loadingIcon: "i-heroicons-arrow-path-20-solid"
+  }
+};
+
+const buttonGroup = {};
+
+const colorModeOptions = {
+  preference: "light"
+};
+const veeValidateNuxtOptions = {
+  // disable or enable auto imports
+  autoImports: true,
+  // Use different names for components
+  componentNames: {
+    Form: "VForm",
+    Field: "VField",
+    FieldArray: "VFieldArray",
+    ErrorMessage: "VErrorMessage"
+  }
+};
+const nuxtSecurityOptions = {
+  headers: {
+    xXSSProtection: "1; mode=block",
+    crossOriginEmbedderPolicy: "unsafe-none",
+    contentSecurityPolicy: {
+      "img-src": ["*", "'self'", "data:", "https"],
+      "script-src": [
+        "'self'",
+        "'unsafe-inline'",
+        "https://www.google-analytics.com",
+        "https://www.googletagmanager.com",
+        "https://fonts.googleapis.com",
+        "https://cdnjs.cloudflare.com"
+      ],
+      "script-src-attr": [
+        "'unsafe-inline'",
+        "https://www.google-analytics.com",
+        "https://www.googletagmanager.com",
+        "https://fonts.googleapis.com",
+        "https://cdnjs.cloudflare.com"
+      ]
+    }
+  }
+};
+const nuxtAppOptions = {
+  head: {
+    htmlAttrs: {
+      lang: "en"
+    },
+    meta: [
+      { charset: "utf-8" },
+      {
+        name: "viewport",
+        content: "width=device-width, initial-scale=1"
+      },
+      {
+        id: "description",
+        name: "description",
+        content: ""
+      },
+      {
+        name: "format-detection",
+        content: "telephone=no"
+      }
+    ],
+    link: [
+      {
+        rel: "preconnect",
+        href: "https://fonts.googleapis.com"
+      },
+      {
+        rel: "preconnect",
+        href: "https://fonts.gstatic.com",
+        crossorigin: ""
+      },
+      {
+        rel: "dns-prefetch",
+        href: "https://www.google-analytics.com/"
+      },
+      {
+        rel: "preconnect",
+        href: "https://www.google-analytics.com/",
+        crossorigin: ""
+      },
+      {
+        rel: "icon",
+        type: "image/x-icon",
+        href: "/favicon.ico"
+      }
+    ]
+  }
+};
+const nuxtRunTimeConfigOptions = {
+  public: {
+    baseAPI: process.env.APP_BASE_API,
+    baseAPIMock: process.env.APP_BASE_API_MOCK,
+    baseInternalAPI: process.env.APP_BASE_INTERNAL_API,
+    port: process.env.PORT || "3000"
+  }
+};
+
 const module = defineNuxtModule({
   meta: {
     name,
@@ -203,122 +308,31 @@ const module = defineNuxtModule({
       };
     });
     await installModule("@nuxt/ui", {
-      safelistColors: ["success", "secondary", "info", "danger", "warning"]
+      safelistColors: ["secondary", "success", "info", "danger", "warning"]
     });
-    nuxt.options.appConfig.ui = _merge(nuxt.options.appConfig.ui || {}, {
-      table,
-      pagination,
-      alert
-    });
-    nuxt.options.appConfig.ui.strategy = "override";
-    nuxt.options.runtimeConfig = _deepMerge(
-      {},
-      {
-        public: {
-          baseAPI: process.env.APP_BASE_API,
-          baseAPIMock: process.env.APP_BASE_API_MOCK,
-          baseInternalAPI: process.env.APP_BASE_INTERNAL_API,
-          port: process.env.PORT || "3000"
-        }
-      },
-      nuxt.options.runtimeConfig
-    );
-    nuxt.options.app = _deepMerge(
+    nuxt.options.appConfig.ui = _deepMerge(
       {},
       {
-        head: {
-          htmlAttrs: {
-            lang: "en"
-          },
-          meta: [
-            { charset: "utf-8" },
-            {
-              name: "viewport",
-              content: "width=device-width, initial-scale=1"
-            },
-            {
-              id: "description",
-              name: "description",
-              content: ""
-            },
-            {
-              name: "format-detection",
-              content: "telephone=no"
-            }
-          ],
-          link: [
-            {
-              rel: "preconnect",
-              href: "https://fonts.googleapis.com"
-            },
-            {
-              rel: "preconnect",
-              href: "https://fonts.gstatic.com",
-              crossorigin: ""
-            },
-            {
-              rel: "dns-prefetch",
-              href: "https://www.google-analytics.com/"
-            },
-            {
-              rel: "preconnect",
-              href: "https://www.google-analytics.com/",
-              crossorigin: ""
-            },
-            {
-              rel: "icon",
-              type: "image/x-icon",
-              href: "/favicon.ico"
-            }
-          ]
-        }
+        table,
+        pagination,
+        alert,
+        button,
+        buttonGroup
       },
-      nuxt.options.app
+      nuxt.options.appConfig.ui
     );
-    nuxt.options.colorMode = _deepMerge(
+    nuxt.options.appConfig.ui.strategy = "override";
+    nuxt.options.app = _deepMerge({}, nuxtAppOptions, nuxt.options.app);
+    nuxt.options.colorMode = _deepMerge({}, colorModeOptions, nuxt.options.colorMode);
+    nuxt.options.devtools = _deepMerge({}, { enabled: true }, nuxt.options.devtools);
+    nuxt.options.runtimeConfig = _deepMerge(
       {},
-      {
-        preference: "light"
-      },
-      nuxt.options.colorMode
+      nuxtRunTimeConfigOptions,
+      nuxt.options.runtimeConfig
     );
-    nuxt.options.devtools = _deepMerge({}, { enabled: true }, nuxt.options.devtools);
     await installModule("@pinia/nuxt");
-    await installModule("@vee-validate/nuxt", {
-      // disable or enable auto imports
-      autoImports: true,
-      // Use different names for components
-      componentNames: {
-        Form: "VForm",
-        Field: "VField",
-        FieldArray: "VFieldArray",
-        ErrorMessage: "VErrorMessage"
-      }
-    });
-    await installModule("nuxt-security", {
-      headers: {
-        xXSSProtection: "1; mode=block",
-        crossOriginEmbedderPolicy: "unsafe-none",
-        contentSecurityPolicy: {
-          "img-src": ["*", "'self'", "data:", "https"],
-          "script-src": [
-            "'self'",
-            "'unsafe-inline'",
-            "https://www.google-analytics.com",
-            "https://www.googletagmanager.com",
-            "https://fonts.googleapis.com",
-            "https://cdnjs.cloudflare.com"
-          ],
-          "script-src-attr": [
-            "'unsafe-inline'",
-            "https://www.google-analytics.com",
-            "https://www.googletagmanager.com",
-            "https://fonts.googleapis.com",
-            "https://cdnjs.cloudflare.com"
-          ]
-        }
-      }
-    });
+    await installModule("@vee-validate/nuxt", veeValidateNuxtOptions);
+    await installModule("nuxt-security", nuxtSecurityOptions);
     addPlugin({
       src: resolve(runtimeDir, "plugin")
     });

package/dist/runtime/components/Alert.vue

@@ -1,61 +1,49 @@
-<template>
-  <UAlert v-bind="$props">
-    <template #title><slot name="title" /></template>
-    <template #description><slot name="description" /></template>
-  </UAlert>
-</template>
-<script lang="ts" setup>
-import { type PropType } from 'vue'
-import { type AlertColor, type AlertVariant, type Avatar, type Button } from '#ui/types'
-import type { Strategy } from '#core/types/utils'
-import { alert } from '#ui/ui.config'
-// @ts-expect-error
-import appConfig from '#build/app.config'
-
-defineProps({
-  title: {
-    type: String,
-    required: true,
-  },
-  description: {
-    type: String,
-    default: null,
-  },
-  icon: {
-    type: String,
-  },
-  avatar: {
-    type: Object as PropType<Avatar>,
-    default: null,
-  },
-  closeButton: {
-    type: Object as PropType<Button>,
-  },
-  actions: {
-    // eslint-disable-next-line @typescript-eslint/ban-types
-    type: Array as PropType<Array<Button & { click?: Function }>>,
-  },
-  color: {
-    type: String as PropType<AlertColor>,
-    validator(value: string) {
-      return [...appConfig.ui.colors, ...Object.keys(alert.color)].includes(value)
-    },
-  },
-  variant: {
-    type: String as PropType<AlertVariant>,
-    validator(value: string) {
-      return [
-        ...Object.keys(alert.variant),
-        ...Object.values(alert.color).flatMap((value) => Object.keys(value)),
-      ].includes(value)
-    },
-  },
-  class: {
-    type: [String, Object, Array] as PropType<any>,
-  },
-  ui: {
-    type: Object as PropType<Partial<typeof alert> & { strategy?: Strategy }>,
-    default: () => ({}),
-  },
-})
-</script>
+<template>
+  <UAlert v-bind="$props">
+    <template #title><slot name="title" :title="title" /></template>
+    <template #description><slot name="description" :description="description" /></template>
+  </UAlert>
+</template>
+<script lang="ts" setup>
+import { type PropType } from 'vue'
+import { type AlertColor, type AlertVariant, type Avatar, type Button } from '#ui/types'
+import type { Strategy } from '#core/types/utils'
+import { type alert } from '#ui/ui.config'
+
+defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  description: {
+    type: String,
+    default: null,
+  },
+  icon: {
+    type: String,
+  },
+  avatar: {
+    type: Object as PropType<Avatar>,
+    default: null,
+  },
+  closeButton: {
+    type: Object as PropType<Button>,
+  },
+  actions: {
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    type: Array as PropType<Array<Button & { click?: Function }>>,
+  },
+  color: {
+    type: String as PropType<AlertColor>,
+  },
+  variant: {
+    type: String as PropType<AlertVariant>,
+  },
+  class: {
+    type: [String, Object, Array] as PropType<any>,
+  },
+  ui: {
+    type: Object as PropType<Partial<typeof alert> & { strategy?: Strategy }>,
+  },
+})
+</script>

package/dist/runtime/components/Button/Group.vue

@@ -1,24 +1,16 @@
 <template>
-  <UButtonGroup
-    v-bind="attrs"
-    :class="$props.class"
-    :size="size"
-    :orientation="orientation"
-    :ui="ui"
-  >
+  <UButtonGroup v-bind="$props">
     <slot />
   </UButtonGroup>
 </template>
 
 <script lang="ts" setup>
-import { type PropType, useUiConfig, useUI, toRef } from '#imports'
-import { button, buttonGroup } from '#core/ui.config'
+import { type PropType } from '#imports'
 import { type ButtonSize } from '#ui/types/button'
 import { type Strategy } from '#core/types/utils'
+import { type buttonGroup, button } from '#ui/ui.config'
 
-const config = useUiConfig<typeof buttonGroup>(buttonGroup, 'buttonGroup')
-
-const props = defineProps({
+defineProps({
   size: {
     type: String as PropType<ButtonSize>,
     default: () => button.default.size,
@@ -38,10 +30,8 @@ const props = defineProps({
     default: undefined,
   },
   ui: {
-    type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+    type: Object as PropType<Partial<typeof buttonGroup> & { strategy?: Strategy }>,
     default: undefined,
   },
 })
-
-const { ui, attrs } = useUI('buttonGroup', toRef(props, 'ui'), config, toRef(props, 'class'))
 </script>

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

@@ -1,65 +1,34 @@
 <template>
-  <UButton
-    v-bind="attrs"
-    :class="$props.class"
-    :label="label"
-    :type="type"
-    :block="block"
-    :loading="loading"
-    :disabled="disabled"
-    :padded="padded"
-    :size="size"
-    :color="color"
-    :variant="variant"
-    :icon="icon"
-    :loading-icon="loadingIcon"
-    :leading-icon="leadingIcon"
-    :trailing-icon="trailingIcon"
-    :trailing="trailing"
-    :leading="leading"
-    :square="square"
-    :truncate="truncate"
-    :ui="ui"
-  >
-    <template #leading><slot name="leading" /></template>
-
+  <UButton v-bind="$props">
+    <template #leading><slot name="leading" :disabled="disabled" :loading="loading" /></template>
     <slot />
-    <template #trailing><slot name="trailing" /></template>
+    <template #trailing><slot name="trailing" :disabled="disabled" :loading="loading" /></template>
   </UButton>
 </template>
 
 <script lang="ts" setup>
-import { useUiConfig, toRef, type PropType, useUI } from '#imports'
-import { button } from '#core/ui.config'
+import { type PropType } from '#imports'
 import { type ButtonSize, type ButtonColor, type ButtonVariant } from '#ui/types/button'
 import { type Strategy } from '#core/types/utils'
+import { type button } from '#ui/ui.config'
+import { UButton } from '#components'
 
-const config = useUiConfig<typeof button>(button, 'button')
-
-defineOptions({
-  inheritAttrs: true,
-})
-
-const props = defineProps({
+defineProps({
+  ...UButton.props,
   label: {
     type: String,
-    default: '',
   },
   type: {
     type: String as PropType<'button' | 'submit' | 'reset'>,
-    default: 'button',
   },
   block: {
     type: Boolean,
-    default: false,
   },
   loading: {
     type: Boolean,
-    default: false,
   },
   disabled: {
     type: Boolean,
-    default: false,
   },
   padded: {
     type: Boolean,
@@ -67,60 +36,42 @@ const props = defineProps({
   },
   size: {
     type: String as PropType<ButtonSize>,
-    default: () => button.default.size,
-    validator(value: string) {
-      return Object.keys(button.size).includes(value)
-    },
   },
   color: {
     type: String as PropType<ButtonColor>,
-    default: () => button.default.color,
   },
   variant: {
     type: String as PropType<ButtonVariant>,
-    default: () => button.default.variant,
   },
   loadingIcon: {
     type: String,
-    default: () => button.default.loadingIcon,
   },
   icon: {
     type: String,
-    default: null,
   },
   leadingIcon: {
     type: String,
-    default: null,
   },
   trailingIcon: {
     type: String,
-    default: null,
   },
   trailing: {
     type: Boolean,
-    default: false,
   },
   leading: {
     type: Boolean,
-    default: false,
   },
   square: {
     type: Boolean,
-    default: false,
   },
   truncate: {
     type: Boolean,
-    default: false,
   },
   class: {
     type: [String, Array, Object] as PropType<any>,
-    default: undefined,
   },
   ui: {
-    type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
-    default: undefined,
+    type: Object as PropType<Partial<typeof button & { strategy?: Strategy }>>,
   },
 })
-
-const { ui, attrs } = useUI('button', toRef(props, 'ui'), config, toRef(props, 'class'))
 </script>

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

@@ -2,6 +2,10 @@
   <UFormGroup
     :label="label"
     :name="name"
+    :description="description"
+    :hint="hint"
+    :size="size"
+    :data-testid="name"
     :help="help"
     :error="errorMessage"
     :required="!!isRequired"
@@ -10,7 +14,7 @@
   </UFormGroup>
 </template>
 <script lang="ts" setup>
-import { type IFieldWrapperProps } from '#core/composables/useForm'
+import { type IFieldProps } from '#core/components/Form/types'
 
-defineProps<IFieldWrapperProps>()
+defineProps<IFieldProps>()
 </script>

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

@@ -2,11 +2,10 @@
   <FieldWrapper v-bind="wrapperProps" label="">
     <UCheckbox
       v-model="value"
-      :disabled="disabled"
+      :disabled="wrapperProps.isDisabled"
       :name="name"
       :label="props.label"
       :required="isRequired"
-      :color="color"
       :ui="ui"
     />
   </FieldWrapper>
@@ -18,5 +17,5 @@ import { type ICheckboxFieldProps } from '#core/components/Form/InputCheckbox/ty
 
 const props = withDefaults(defineProps<ICheckboxFieldProps>(), {})
 
-const { value, wrapperProps, disabled, handleChange, isRequired } = useFieldHOC<boolean>(props)
+const { value, wrapperProps } = useFieldHOC<boolean>(props)
 </script>

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

@@ -1,8 +1,4 @@
 import { type IFieldProps, type IFormFieldBase, type INPUT_TYPES } from '#core/components/Form/types';
 export interface ICheckboxFieldProps extends IFieldProps {
-    color?: string;
-    ui?: object | any;
 }
-export type ICheckboxField = IFormFieldBase<INPUT_TYPES.CHECKBOX, ICheckboxFieldProps, {
-    change?: (value: string) => void;
-}>;
+export type ICheckboxField = IFormFieldBase<INPUT_TYPES.CHECKBOX, ICheckboxFieldProps, never>;

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

@@ -2,7 +2,7 @@
   <FieldWrapper v-bind="wrapperProps">
     <Datepicker
       v-model="value"
-      :disabled="disabled"
+      :disabled="wrapperProps.isDisabled"
       cancel-text="ยกเลิก"
       select-text="เลือก"
       locale="th"
@@ -12,7 +12,6 @@
       :min-date="minDate"
       :max-date="maxDate"
       :required="isRequired"
-      @change="handleChange"
     />
   </FieldWrapper>
 </template>
@@ -24,9 +23,8 @@ import { TimeHelper, useFieldHOC } from '#imports'
 import '@vuepic/vue-datepicker/dist/main.css'
 
 const props = withDefaults(defineProps<IDateTimeFieldProps>(), {})
-const emits = defineEmits<(event: 'change', value: string) => void>()
 
-const { value, wrapperProps, onChange, disabled } = useFieldHOC<string>(props)
+const { value, wrapperProps } = useFieldHOC<string>(props)
 
 const format = (date: Date) => {
   if (props.disabledTime) {
@@ -35,11 +33,4 @@ const format = (date: Date) => {
 
   return TimeHelper.getDateTimeFormTime(date as any)
 }
-
-const handleChange = (e: InputEvent) => {
-  onChange(e)
-  const target = e.target as HTMLInputElement
-
-  emits('change', target?.value)
-}
 </script>

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

@@ -3,7 +3,7 @@
     <URadioGroup
       v-model="value"
       :options="options"
-      :disabled="disabled"
+      :disabled="wrapperProps.isDisabled"
       :required="isRequired"
       value-attribute="value"
       option-attribute="label"
@@ -23,5 +23,5 @@ import { type ISelectFieldProps } from '#core/components/Form/InputSelect/types'
 
 const props = withDefaults(defineProps<ISelectFieldProps>(), {})
 
-const { value, wrapperProps, disabled, handleChange, isRequired } = useFieldHOC<any>(props)
+const { value, wrapperProps } = useFieldHOC<any>(props)
 </script>

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

@@ -1,12 +1,8 @@
 import type { IFieldProps, IFormFieldBase, INPUT_TYPES } from '#core/components/Form/types';
 import { type IOption } from '#core/types/common';
 export interface IRadioFieldProps extends IFieldProps {
-    color?: string;
     icon?: string;
     size?: string;
-    ui?: object | any;
     options: IOption[];
 }
-export type IRadioField = IFormFieldBase<INPUT_TYPES.RADIO, IRadioFieldProps, {
-    change?: (value: string) => void;
-}>;
+export type IRadioField = IFormFieldBase<INPUT_TYPES.RADIO, IRadioFieldProps, never>;

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

@@ -5,8 +5,8 @@
       searchable
       :options="options"
       :placeholder="placeholder || label"
-      :disabled="disabled"
-      :loading="isLoading"
+      :disabled="wrapperProps.isDisabled"
+      :loading="loading"
       :searchable-placeholder="searchablePlaceholder"
       value-attribute="value"
       option-attribute="label"
@@ -33,5 +33,5 @@ import { type ISelectFieldProps } from '#core/components/Form/InputSelect/types'
 
 const props = withDefaults(defineProps<ISelectFieldProps>(), {})
 
-const { value, wrapperProps, disabled, handleChange, isRequired } = useFieldHOC<any>(props)
+const { value, wrapperProps } = useFieldHOC<any>(props)
 </script>

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

@@ -6,7 +6,6 @@ export interface ISelectFieldProps extends IFieldProps {
     size?: string;
     searchablePlaceholder?: string;
     loading?: boolean;
-    ui?: object | any;
     uiMenu?: object | any;
     options: IOption[];
 }

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

@@ -12,5 +12,5 @@ import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
 
 const props = withDefaults(defineProps<IStaticFieldProps>(), {})
 
-const { value, label, wrapperProps, disabled } = useFieldHOC<string>(props)
+const { value, wrapperProps } = useFieldHOC<string>(props)
 </script>

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

@@ -1,4 +1,4 @@
 import { type IFieldProps, type IFormFieldBase, type INPUT_TYPES } from '#core/components/Form/types';
 export interface IStaticFieldProps extends IFieldProps {
 }
-export type IStaticField = IFormFieldBase<INPUT_TYPES.STATIC, IStaticFieldProps>;
+export type IStaticField = IFormFieldBase<INPUT_TYPES.STATIC, IStaticFieldProps, never>;

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

@@ -2,12 +2,12 @@
   <FieldWrapper v-bind="wrapperProps">
     <UInput
       v-model="value"
-      :disabled="disabled"
+      :disabled="wrapperProps.isDisabled"
       :name="name"
       :placeholder="placeholder ?? props.label"
       :type="isShowPassword ? 'text' : props.type || 'text'"
       :autofocus="!!autoFocus"
-      :color="color"
+      :icon="icon"
       :ui="ui"
     />
   </FieldWrapper>
@@ -19,12 +19,8 @@ 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 { value, wrapperProps } = useFieldHOC<string>(props)
 
 const isShowPassword = ref(false)
 </script>

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

@@ -3,10 +3,9 @@ export interface ITextFieldProps extends IFieldProps {
     type?: 'text' | 'password' | 'email';
     prependIcon?: any;
     appendIcon?: any;
-    color?: string;
-    ui?: object | any;
+    icon?: string;
 }
-export type ITextField = IFormFieldBase<INPUT_TYPES.TEXT | INPUT_TYPES.PASSWORD, ITextFieldProps, {
+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

@@ -2,14 +2,13 @@
   <FieldWrapper v-bind="wrapperProps">
     <UTextarea
       v-model="value"
-      :disabled="disabled"
+      :disabled="wrapperProps.isDisabled"
       :name="name"
       :resize="resize"
       :placeholder="placeholder ?? props.label"
       :autofocus="!!autoFocus"
       :autoresize="autoresize"
       :rows="rows"
-      :color="color"
       :ui="ui"
     />
   </FieldWrapper>
@@ -20,10 +19,6 @@ import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
 import { type ITextareaFieldProps } from '#core/components/Form/InputTextarea/types'
 
 const props = withDefaults(defineProps<ITextareaFieldProps>(), {})
-const emits = defineEmits<{
-  (event: 'change', value: string): void
-  (event: 'blur', value: string): void
-}>()
 
-const { value, wrapperProps, disabled, handleChange } = useFieldHOC<string>(props)
+const { value, wrapperProps } = useFieldHOC<string>(props)
 </script>

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

@@ -3,10 +3,5 @@ export interface ITextareaFieldProps extends IFieldProps {
     autoresize?: boolean;
     resize?: boolean;
     rows?: number;
-    color?: string;
-    ui?: object | any;
 }
-export type ITextareaField = IFormFieldBase<INPUT_TYPES.TEXTAREA, ITextareaFieldProps, {
-    change?: (value: string) => void;
-    blur?: (value: string) => void;
-}>;
+export type ITextareaField = IFormFieldBase<INPUT_TYPES.TEXTAREA, ITextareaFieldProps, never>;

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

@@ -1,6 +1,6 @@
 <template>
   <FieldWrapper v-bind="wrapperProps">
-    <UToggle v-model="value" :disabled="disabled" :name="name" :color="color" :ui="ui" />
+    <UToggle v-model="value" :disabled="wrapperProps.isDisabled" :name="name" :ui="ui" />
   </FieldWrapper>
 </template>
 
@@ -10,5 +10,5 @@ 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)
+const { value, wrapperProps } = useFieldHOC<boolean>(props)
 </script>

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

@@ -1,8 +1,4 @@
 import { type IFieldProps, type IFormFieldBase, type INPUT_TYPES } from '#core/components/Form/types';
 export interface IToggleFieldProps extends IFieldProps {
-    color?: string;
-    ui?: object | any;
 }
-export type IToggleField = IFormFieldBase<INPUT_TYPES.TOGGLE, IToggleFieldProps, {
-    change?: (value: string) => void;
-}>;
+export type IToggleField = IFormFieldBase<INPUT_TYPES.TOGGLE, IToggleFieldProps, never>;

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

@@ -24,23 +24,22 @@ export declare const enum INPUT_TYPES {
 export interface IFieldProps {
     form?: FormContext;
     name: string;
+    errorMessage?: string;
     label?: string | any;
+    description?: string;
+    hint?: string;
+    size?: string;
     rules?: any;
     autoFocus?: boolean;
     class?: any;
     classInner?: any;
-    classInputInner?: any;
     placeholder?: string;
     isDisabled?: boolean;
     isRequired?: boolean;
-    isLoading?: boolean;
     help?: string;
-    isHideLabel?: boolean;
-    customErrorMessage?: string | any;
-    transform?: (value: any, oldValue: any, e: InputEvent) => any;
-    getInstance?: (el: HTMLElement) => void;
+    ui?: object | any;
 }
-export interface IFormFieldBase<I extends INPUT_TYPES, P, O> {
+export interface IFormFieldBase<I extends INPUT_TYPES, P extends IFieldProps, O> {
     type: I;
     component?: Component;
     class?: any;

package/dist/runtime/composables/useForm.d.ts

@@ -1,24 +1,8 @@
-import { type DefineComponent, type ComputedRef } from 'vue';
+import { type ComputedRef } from 'vue';
 import { type FieldContext, type FieldOptions } from 'vee-validate';
-import { type IFormField } from '#core/components/Form/types';
-export interface IFieldWrapperProps {
-    errorMessage?: string;
-    label?: string | any;
-    className?: any;
-    classInner?: any;
-    classInputInner?: any;
-    isRequired?: boolean;
-    isHideLabel?: boolean;
-    customErrorMessage?: string | DefineComponent;
-    name: string;
-    help?: string;
-}
+import { type IFieldProps, type IFormField } from '#core/components/Form/types';
 interface IFieldContext<TValue> extends FieldContext<TValue> {
-    isRequired: boolean;
-    onChange: (e: InputEvent) => void;
-    fieldClassName: ComputedRef<any[]>;
-    disabled: boolean;
-    wrapperProps: ComputedRef<IFieldWrapperProps>;
+    wrapperProps: ComputedRef<IFieldProps>;
 }
 export declare const useFieldHOC: <TValue = unknown>(newFormProps: IFieldProps, opts?: Partial<FieldOptions<TValue>> | undefined) => IFieldContext<TValue>;
 export declare const createFormFields: (fields: () => IFormField[]) => any;

package/dist/runtime/composables/useForm.mjs

@@ -6,38 +6,11 @@ export const useFieldHOC = (newFormProps, opts) => {
     form: newFormProps.form,
     ...opts
   });
-  const onChange = (e) => {
-    const target = e.target;
-    const newValue = newFormProps.transform ? newFormProps.transform(target.value, field.value, e) : target.value;
-    target.value = newValue;
-    field.handleChange(newValue);
-  };
-  const fieldClassName = computed(() => {
-    return [
-      "form-control peer",
-      {
-        "input-error": !field.meta.valid && field.meta.dirty,
-        "input-success": field.meta.valid && field.meta.dirty
-      }
-    ];
-  });
   return {
     ...field,
-    isRequired: !!newFormProps.isRequired,
-    onChange,
-    fieldClassName,
-    disabled: !!newFormProps.isDisabled,
     wrapperProps: computed(() => ({
-      label: newFormProps.label,
-      errorMessage: field.errorMessage.value,
-      className: newFormProps.class,
-      classInner: newFormProps.classInner,
-      classInputInner: newFormProps.classInputInner,
-      isRequired: newFormProps.isRequired,
-      isHideLabel: newFormProps.isHideLabel,
-      customErrorMessage: newFormProps.customErrorMessage,
-      name: newFormProps.name,
-      help: newFormProps.help
+      ...newFormProps,
+      errorMessage: field.errorMessage.value
     }))
   };
 };

package/dist/runtime/ui.config/button.d.ts

@@ -1 +1,3 @@
-export declare const button: any;
+import type { DeepPartial } from '#ui/types';
+import type * as config from '#ui/ui.config';
+export declare const button: DeepPartial<(typeof config)['button']>;

package/dist/runtime/ui.config/button.mjs

@@ -1,6 +1,4 @@
-import { button as inheritButton } from "#ui/ui.config";
 export const button = {
-  ...inheritButton,
   default: {
     size: "md",
     variant: "solid",

package/dist/runtime/ui.config/buttonGroup.d.ts

@@ -1 +1,3 @@
-export declare const buttonGroup: any;
+import type { DeepPartial } from '#ui/types';
+import type * as config from '#ui/ui.config';
+export declare const buttonGroup: DeepPartial<(typeof config)['buttonGroup']>;

package/dist/runtime/ui.config/buttonGroup.mjs

@@ -1,8 +1 @@
-import { buttonGroup as inheritButtonGroup } from "#ui/ui.config";
-export const buttonGroup = {
-  ...inheritButtonGroup,
-  default: {
-    size: "md",
-    orientation: "horizontal"
-  }
-};
+export const buttonGroup = {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "1.3.40",
+  "version": "1.4.2",
   "repository": "https://gitlab.finema.co/finema/ui-kit",
   "license": "MIT",
   "author": "Finema Dev Core Team",
@@ -39,7 +39,7 @@
     "@vee-validate/nuxt": "^4.12.3",
     "@vee-validate/zod": "^4.12.3",
     "@vuepic/vue-datepicker": "^7.4.0",
-    "axios": "^1.5.1",
+    "axios": "^1.6.2",
     "date-fns": "^3.0.6",
     "i18next": "^23.7.11",
     "lodash-es": "^4.17.21",
@@ -63,7 +63,7 @@
     "eslint": "^8.56.0",
     "husky": "^8.0.3",
     "lint-staged": "^15.2.0",
-    "nuxt": "^3.7.4",
+    "nuxt": "^3.8.2",
     "prettier": "^3.1.1",
     "release-it": "^17.0.1",
     "sass": "^1.69.5",