@finema/core 1.3.10 → 1.3.12

package/dist/module.json

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

package/dist/module.mjs

@@ -2,7 +2,7 @@ import { defineNuxtModule, createResolver, installModule, addPlugin, addComponen
 import { merge } from 'lodash-es';
 
 const name = "@finema/core";
-const version = "1.3.10";
+const version = "1.3.12";
 
 const colors = {
   black: "#20243E",
@@ -68,7 +68,10 @@ const colors = {
 };
 
 const ui = {
-  safelistColors: ["secondary"]
+  safelistColors: ["secondary"],
+  icons: {
+    dynamic: true
+  }
 };
 
 const _merge = merge;

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

@@ -28,6 +28,12 @@
           v-bind="option.props"
           v-on="option.on ?? {}"
         />
+        <FormInputTextarea
+          v-if="option.type === INPUT_TYPES.TEXTAREA"
+          :form="form"
+          v-bind="option.props"
+          v-on="option.on ?? {}"
+        />
         <FormInputToggle
           v-if="option.type === INPUT_TYPES.TOGGLE"
           :form="form"
@@ -40,6 +46,12 @@
           v-bind="option.props"
           v-on="option.on ?? {}"
         />
+        <FormInputRadio
+          v-if="option.type === INPUT_TYPES.RADIO"
+          :form="form"
+          v-bind="option.props"
+          v-on="option.on ?? {}"
+        />
         <FormInputCheckbox
           v-if="option.type === INPUT_TYPES.CHECKBOX"
           :form="form"

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

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

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

@@ -0,0 +1,27 @@
+<template>
+  <FieldWrapper v-bind="wrapperProps">
+    <URadioGroup
+      v-model="value"
+      :options="options"
+      :disabled="disabled"
+      :required="isRequired"
+      value-attribute="value"
+      option-attribute="label"
+      :icon="icon"
+      :color="color"
+      :size="size"
+      :ui="ui"
+      :ui-menu="uiMenu"
+    />
+  </FieldWrapper>
+</template>
+
+<script lang="ts" setup>
+import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
+import { useFieldHOC } from '#core/composables/useForm'
+import { type ISelectFieldProps } from '#core/components/Form/InputSelect/types'
+
+const props = withDefaults(defineProps<ISelectFieldProps>(), {})
+
+const { value, wrapperProps, disabled, handleChange, isRequired } = useFieldHOC<any>(props)
+</script>

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

@@ -0,0 +1,12 @@
+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;
+}>;

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

@@ -1,11 +1,37 @@
 <template>
-  <div>
-    <USelect v-bind="$attrs" />
-  </div>
+  <FieldWrapper v-bind="wrapperProps">
+    <USelectMenu
+      v-model="value"
+      searchable
+      :options="options"
+      :placeholder="placeholder || label"
+      :disabled="disabled"
+      :loading="isLoading"
+      :searchable-placeholder="searchablePlaceholder"
+      value-attribute="value"
+      option-attribute="label"
+      :required="isRequired"
+      :icon="icon"
+      :color="color"
+      :size="size"
+      :ui="ui"
+      :ui-menu="uiMenu"
+    >
+      <template #label>
+        <span v-if="value" class="truncate">
+          {{ options.find((item) => item.value === value)?.label || value }}
+        </span>
+      </template>
+    </USelectMenu>
+  </FieldWrapper>
 </template>
 
 <script lang="ts" setup>
-defineOptions({
-  inheritAttrs: true,
-})
+import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
+import { useFieldHOC } from '#core/composables/useForm'
+import { type ISelectFieldProps } from '#core/components/Form/InputSelect/types'
+
+const props = withDefaults(defineProps<ISelectFieldProps>(), {})
+
+const { value, wrapperProps, disabled, handleChange, isRequired } = useFieldHOC<any>(props)
 </script>

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

@@ -0,0 +1,15 @@
+import type { IFieldProps, IFormFieldBase, INPUT_TYPES } from '#core/components/Form/types';
+import { type IOption } from '#core/types/common';
+export interface ISelectFieldProps extends IFieldProps {
+    color?: string;
+    icon?: string;
+    size?: string;
+    searchablePlaceholder?: string;
+    loading?: boolean;
+    ui?: object | any;
+    uiMenu?: object | any;
+    options: IOption[];
+}
+export type ISelectField = IFormFieldBase<INPUT_TYPES.SELECT, ISelectFieldProps, {
+    change?: (value: string) => void;
+}>;

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

@@ -0,0 +1,29 @@
+<template>
+  <FieldWrapper v-bind="wrapperProps">
+    <UTextarea
+      v-model="value"
+      :disabled="disabled"
+      :name="name"
+      :resize="resize"
+      :placeholder="placeholder ?? props.label"
+      :autofocus="!!autoFocus"
+      :autoresize="autoresize"
+      :rows="rows"
+      :color="color"
+      :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 emits = defineEmits<{
+  (event: 'change', value: string): void
+  (event: 'blur', value: string): void
+}>()
+
+const { value, wrapperProps, disabled, handleChange } = useFieldHOC<string>(props)
+</script>

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

@@ -0,0 +1,12 @@
+import { type IFieldProps, type IFormFieldBase, type INPUT_TYPES } from '#core/components/Form/types';
+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;
+}>;

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

@@ -2,13 +2,20 @@ import { type Component } from '@nuxt/schema';
 import { type FormContext, type RuleExpression } 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';
 export declare const enum INPUT_TYPES {
     TEXT = "TEXT",
+    TEXTAREA = "TEXTAREA",
     PASSWORD = "PASSWORD",
     EMAIL = "EMAIL",
     STATIC = "STATIC",
     TOGGLE = "TOGGLE",
     SELECT = "SELECT",
+    RADIO = "RADIO",
     CHECKBOX = "CHECKBOX"
 }
 export interface IOption {
@@ -46,4 +53,4 @@ export interface IFormFieldBase<I extends INPUT_TYPES, P extends object = never,
     props: IFieldProps & P;
     on?: O;
 }
-export type IFormField = ITextField | IStaticField;
+export type IFormField = ITextField | IStaticField | ICheckboxField | IRadioField | ISelectField | IToggleField | ITextareaField;

package/dist/runtime/components/Form/types.mjs

@@ -1,10 +1,12 @@
 export var INPUT_TYPES = /* @__PURE__ */ ((INPUT_TYPES2) => {
   INPUT_TYPES2["TEXT"] = "TEXT";
+  INPUT_TYPES2["TEXTAREA"] = "TEXTAREA";
   INPUT_TYPES2["PASSWORD"] = "PASSWORD";
   INPUT_TYPES2["EMAIL"] = "EMAIL";
   INPUT_TYPES2["STATIC"] = "STATIC";
   INPUT_TYPES2["TOGGLE"] = "TOGGLE";
   INPUT_TYPES2["SELECT"] = "SELECT";
+  INPUT_TYPES2["RADIO"] = "RADIO";
   INPUT_TYPES2["CHECKBOX"] = "CHECKBOX";
   return INPUT_TYPES2;
 })(INPUT_TYPES || {});

package/dist/runtime/types/common.d.ts

@@ -2,7 +2,7 @@ export interface IError {
     code: string;
     message: any;
 }
-export interface IOption {
+export interface IOption extends Record<string, any> {
     value: any;
     label: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "1.3.10",
+  "version": "1.3.12",
   "repository": "https://gitlab.finema.co/finema/ui-kit",
   "license": "MIT",
   "author": "Finema Development Team",

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

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