@finema/core 1.4.1 → 1.4.2

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "1.4.1",
+  "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.4.1";
+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)
@@ -182,6 +181,101 @@ const button = {
 
 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,
@@ -216,122 +310,29 @@ const module = defineNuxtModule({
     await installModule("@nuxt/ui", {
       safelistColors: ["secondary", "success", "info", "danger", "warning"]
     });
-    nuxt.options.appConfig.ui = _merge(nuxt.options.appConfig.ui || {}, {
-      table,
-      pagination,
-      alert,
-      button,
-      buttonGroup
-    });
-    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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "repository": "https://gitlab.finema.co/finema/ui-kit",
   "license": "MIT",
   "author": "Finema Dev Core Team",