@flyanra/vue-core 0.4.0 → 1.0.0

package/dist/types/components/basic/fly-button/FlyButton.types.d.ts

@@ -1,5 +1,5 @@
 import type { ButtonType, ElButton, UseTooltipProps } from 'element-plus';
-import type { T_FlyIconTypes } from '../../general/fly-icon/FlyIcon.types';
+import type { T_FlyIconV2Props } from '../../general';
 export type FlyButtonIconPosition = 'left' | 'right';
 export type FlyButtonSizes = InstanceType<typeof ElButton>['$props']['size'];
 export type FlyButtonTypes = ButtonType;
@@ -12,9 +12,8 @@ export type FlyButtonProps = {
      */
     clipRound?: boolean;
     full?: boolean;
-    icon?: string | object;
+    icon?: T_FlyIconV2Props['icon'];
     iconPosition?: FlyButtonIconPosition;
-    iconType?: T_FlyIconTypes;
     imageUrl?: string;
     label?: string;
     size?: FlyButtonSizes;

package/dist/types/components/form/form.utils.d.ts

@@ -1,4 +1,4 @@
-import type { Composer } from 'vue-i18n';
+import type { FormInstance } from 'element-plus';
 export type ValidateFieldsError = {
     [K: string]: {
         message?: string;
@@ -7,4 +7,5 @@ export type ValidateFieldsError = {
 /**
  * @returns Translated error message based on active locale
  */
-export declare function formFieldErrorMessageFormatter(errors: ValidateFieldsError, composer?: Composer): string;
+export declare function formFieldErrorMessageFormatter(errors: ValidateFieldsError): string;
+export declare function genericFormValidator(formRef: FormInstance): Promise<true>;

package/dist/types/components/form/index.d.ts

@@ -1 +1,5 @@
-export {};
+export * from './input-renderers/form-item-renderer';
+export * from './input-renderers/input-renderer';
+export type { T_InputRendererBase } from './input-renderers/input-renderer.types';
+export * from './input-validators';
+export * from './form.utils';

package/dist/types/components/form/input-renderers/boolean/FlyBoolean.vue.d.ts

@@ -5,11 +5,11 @@ type __VLS_Props = {
     input?: T_InputBoolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    change: (v: T_InputBooleanValues) => any;
     "update:modelValue": (v: T_InputBooleanValues) => any;
+    change: (v: T_InputBooleanValues) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onChange?: ((v: T_InputBooleanValues) => any) | undefined;
     "onUpdate:modelValue"?: ((v: T_InputBooleanValues) => any) | undefined;
+    onChange?: ((v: T_InputBooleanValues) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/types/components/form/input-renderers/date-time/FlyDateTime.vue.d.ts

@@ -6,14 +6,14 @@ type __VLS_Props = {
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     focus: () => any;
-    blur: () => any;
-    change: (v: T_DateTimeValues) => any;
     "update:modelValue": (v: T_DateTimeValues) => any;
+    change: (v: T_DateTimeValues) => any;
+    blur: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onFocus?: (() => any) | undefined;
-    onBlur?: (() => any) | undefined;
-    onChange?: ((v: T_DateTimeValues) => any) | undefined;
     "onUpdate:modelValue"?: ((v: T_DateTimeValues) => any) | undefined;
+    onChange?: ((v: T_DateTimeValues) => any) | undefined;
+    onBlur?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/types/components/form/input-renderers/form-item-renderer/FlyFormItemRenderer.vue.d.ts

@@ -6,14 +6,14 @@ type __VLS_Props = {
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     focus: () => any;
-    blur: () => any;
-    change: (value: unknown) => any;
     "update:modelValue": (value: unknown) => any;
+    change: (value: unknown) => any;
+    blur: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onFocus?: (() => any) | undefined;
-    onBlur?: (() => any) | undefined;
-    onChange?: ((value: unknown) => any) | undefined;
     "onUpdate:modelValue"?: ((value: unknown) => any) | undefined;
+    onChange?: ((value: unknown) => any) | undefined;
+    onBlur?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/types/components/form/input-renderers/form-item-renderer/index.d.ts

@@ -0,0 +1,3 @@
+import FlyFormItemRenderer from './FlyFormItemRenderer.vue';
+export default FlyFormItemRenderer;
+export { FlyFormItemRenderer };

package/dist/types/components/form/input-renderers/form-schema-renderer/FlyFormSchemaRenderer.utils.d.ts

@@ -1,11 +1,14 @@
-import type { FormInstance, FormItemRule } from 'element-plus';
-import type { Composer } from 'vue-i18n';
+import type { FormItemRule } from 'element-plus';
 import type { T_FormSchemaLookupData, T_InputSchema, T_InputSchemaSelect, T_InputSchemaValueUnit } from '../form-schema.types';
 import type { T_InputRendererBase } from '../input-renderer.types';
 import type { T_InputSelectOption } from '../select/FlySelect.types';
 export declare function getValidatorsFromInputFields(fields: T_InputRendererBase[]): Record<string, FormItemRule[]>;
-export declare function genericFormValidator(formRef: FormInstance): Promise<true>;
-export declare function generateInputFromFormSchema(field: T_InputSchema, lookupData?: T_FormSchemaLookupData): (import("../input-renderer.types").T_DynamicInputPropsBase & import("../number/FlyNumber.types").T_InputNumber & {
+export declare function generateInputFromFormSchema(field: T_InputSchema, lookupData?: T_FormSchemaLookupData): (import("../input-renderer.types").T_DynamicInputPropsBase & import("../boolean/FlyBoolean.types").T_InputBoolean & {
+    type: "boolean";
+    placeholder?: string;
+}) | (import("../input-renderer.types").T_DynamicInputPropsBase & import("../date-time/FlyDateTime.types").T_InputDateTime & {
+    type: "dateTime";
+}) | (import("../input-renderer.types").T_DynamicInputPropsBase & import("../number/FlyNumber.types").T_InputNumber & {
     type: "number";
 }) | (import("../input-renderer.types").T_DynamicInputPropsBase & import("../select/FlySelect.types").T_InputSelect & {
     type: "select";
@@ -13,11 +16,6 @@ export declare function generateInputFromFormSchema(field: T_InputSchema, lookup
     type: "text" | "textarea";
 }) | (import("../input-renderer.types").T_DynamicInputPropsBase & import("../value-unit/FlyValueUnit.types").T_InputValueUnit & {
     type: "valueUnit";
-}) | (import("../input-renderer.types").T_DynamicInputPropsBase & import("../date-time/FlyDateTime.types").T_InputDateTime & {
-    type: "dateTime";
-}) | (import("../input-renderer.types").T_DynamicInputPropsBase & import("../boolean/FlyBoolean.types").T_InputBoolean & {
-    type: "boolean";
-    placeholder?: string;
 }) | undefined;
-export declare function generateFormRule(field: T_InputSchema, composer?: Composer): FormItemRule[];
+export declare function generateFormRule(field: T_InputSchema): FormItemRule[];
 export declare function generateSelectOptionsFromSchema(field: T_InputSchemaSelect | T_InputSchemaValueUnit, lookupData?: T_FormSchemaLookupData): T_InputSelectOption[];

package/dist/types/components/form/input-renderers/input-renderer/FlyInputRenderer.vue.d.ts

@@ -1,18 +1,18 @@
 import type { T_InputRendererBase } from '../input-renderer.types';
 type __VLS_Props = {
-    modelValue: unknown;
+    modelValue?: unknown;
     input: T_InputRendererBase;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     focus: () => any;
-    blur: () => any;
-    change: (v: unknown) => any;
     "update:modelValue": (v: unknown) => any;
+    change: (v: unknown) => any;
+    blur: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onFocus?: (() => any) | undefined;
-    onBlur?: (() => any) | undefined;
-    onChange?: ((v: unknown) => any) | undefined;
     "onUpdate:modelValue"?: ((v: unknown) => any) | undefined;
+    onChange?: ((v: unknown) => any) | undefined;
+    onBlur?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/types/components/form/input-renderers/input-renderer/index.d.ts

@@ -0,0 +1,3 @@
+import FlyInputRenderer from './FlyInputRenderer.vue';
+export default FlyInputRenderer;
+export { FlyInputRenderer };

package/dist/types/components/form/input-renderers/input-renderer.utils.d.ts

@@ -1,2 +1,2 @@
 import type { T_InputTypes } from './input-renderer.types';
-export declare function getInputDisplayValue(v: unknown, inputType: T_InputTypes): string;
+export declare function getInputDisplayValue(v: unknown, inputType: T_InputTypes): string | number;

package/dist/types/components/form/input-renderers/number/FlyNumber.vue.d.ts

@@ -6,14 +6,14 @@ type __VLS_Props = {
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     focus: () => any;
-    blur: () => any;
-    change: (v: T_InputTextValues) => any;
     "update:modelValue": (v: T_InputTextValues) => any;
+    change: (v: T_InputTextValues) => any;
+    blur: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onFocus?: (() => any) | undefined;
-    onBlur?: (() => any) | undefined;
-    onChange?: ((v: T_InputTextValues) => any) | undefined;
     "onUpdate:modelValue"?: ((v: T_InputTextValues) => any) | undefined;
+    onChange?: ((v: T_InputTextValues) => any) | undefined;
+    onBlur?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/types/components/form/input-renderers/select/FlySelect.vue.d.ts

@@ -6,14 +6,14 @@ type __VLS_Props = {
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     focus: () => any;
-    blur: () => any;
-    change: (v: T_InputSelectValue) => any;
     "update:modelValue": (v: T_InputSelectValue) => any;
+    change: (v: T_InputSelectValue) => any;
+    blur: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onFocus?: (() => any) | undefined;
-    onBlur?: (() => any) | undefined;
-    onChange?: ((v: T_InputSelectValue) => any) | undefined;
     "onUpdate:modelValue"?: ((v: T_InputSelectValue) => any) | undefined;
+    onChange?: ((v: T_InputSelectValue) => any) | undefined;
+    onBlur?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/types/components/form/input-renderers/text/FlyText.vue.d.ts

@@ -6,14 +6,14 @@ type __VLS_Props = {
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     focus: () => any;
-    blur: () => any;
-    change: (v: T_InputTextValues) => any;
     "update:modelValue": (v: T_InputTextValues) => any;
+    change: (v: T_InputTextValues) => any;
+    blur: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onFocus?: (() => any) | undefined;
-    onBlur?: (() => any) | undefined;
-    onChange?: ((v: T_InputTextValues) => any) | undefined;
     "onUpdate:modelValue"?: ((v: T_InputTextValues) => any) | undefined;
+    onChange?: ((v: T_InputTextValues) => any) | undefined;
+    onBlur?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/types/components/form/input-renderers/value-unit/FlyValueUnit.vue.d.ts

@@ -6,14 +6,14 @@ type __VLS_Props = {
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     focus: () => any;
-    blur: () => any;
-    change: (v: T_ValueUnitValue) => any;
     "update:modelValue": (v: T_ValueUnitValue) => any;
+    change: (v: T_ValueUnitValue) => any;
+    blur: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onFocus?: (() => any) | undefined;
-    onBlur?: (() => any) | undefined;
-    onChange?: ((v: T_ValueUnitValue) => any) | undefined;
     "onUpdate:modelValue"?: ((v: T_ValueUnitValue) => any) | undefined;
+    onChange?: ((v: T_ValueUnitValue) => any) | undefined;
+    onBlur?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/types/components/form/input-validators.d.ts

@@ -1,13 +1,12 @@
 import type { FormItemRule } from 'element-plus';
-import type { Composer } from 'vue-i18n';
 import { type checkInputRange } from '../../utils/validators';
 type InputTriggers = 'blur' | 'change';
-export declare const requiredField: (fieldLabel?: string, trigger?: InputTriggers, useRequiredMessage?: boolean, composer?: Composer) => FormItemRule;
+export declare const requiredField: (fieldLabel?: string, trigger?: InputTriggers, useRequiredMessage?: boolean) => FormItemRule;
 export declare const checkInputRangeValidator: (validator: ReturnType<typeof checkInputRange>, trigger?: InputTriggers) => FormItemRule;
-export declare const requiredFieldNumber: (languageKey?: string, trigger?: InputTriggers, composer?: Composer) => FormItemRule;
-export declare const requiredFieldNumberSelect: (label?: string, trigger?: InputTriggers, useRequiredMessage?: boolean, composer?: Composer) => FormItemRule;
+export declare const requiredFieldNumber: (languageKey?: string, trigger?: InputTriggers) => FormItemRule;
+export declare const requiredFieldNumberSelect: (label?: string, trigger?: InputTriggers, useRequiredMessage?: boolean) => FormItemRule;
 export declare const requiredFieldValueUnit: (label: string | undefined, trigger: InputTriggers | undefined, useRequiredMessage: boolean | undefined, required: boolean | undefined, options: {
     valueType?: "text" | "number";
-}, composer?: Composer) => FormItemRule;
-export declare const requiredFieldArray: (label?: string, trigger?: InputTriggers, useRequiredMessage?: boolean, composer?: Composer) => FormItemRule;
+}) => FormItemRule;
+export declare const requiredFieldArray: (label?: string, trigger?: InputTriggers, useRequiredMessage?: boolean) => FormItemRule;
 export {};

package/dist/types/components/general/fly-icon-v2/FlyIconV2.types.d.ts

@@ -0,0 +1,5 @@
+import { type Component } from 'vue';
+export type T_FlyIconV2Props = {
+    icon: Component;
+    size?: string | number;
+};

package/dist/types/components/general/fly-icon-v2/FlyIconV2.vue.d.ts

@@ -0,0 +1,4 @@
+import type { T_FlyIconV2Props } from './FlyIconV2.types';
+declare const __VLS_export: import("vue").DefineComponent<T_FlyIconV2Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<T_FlyIconV2Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/types/components/general/fly-icon-v2/index.d.ts

@@ -0,0 +1,4 @@
+import FlyIconV2 from './FlyIconV2.vue';
+export default FlyIconV2;
+export { FlyIconV2 };
+export type { T_FlyIconV2Props } from './FlyIconV2.types.ts';

package/dist/types/components/general/index.d.ts

@@ -1,2 +1,4 @@
 export { default as FlyIcon } from './fly-icon';
 export type * from './fly-icon';
+export { default as T_FlyIconV2 } from './fly-icon-v2';
+export type * from './fly-icon-v2';

package/dist/types/components/index.d.ts

@@ -2,3 +2,4 @@ export * from './navigation';
 export * from './basic';
 export * from './feedback';
 export * from './general';
+export * from './form';

package/dist/types/components/navigation/menu/fly-mini-sidebar/FlyMiniSidebar.types.d.ts

@@ -1,7 +1,7 @@
-import type { T_FlyIconProps } from '../../../general/fly-icon';
+import type { T_FlyIconV2Props } from '../../../general/fly-icon-v2/FlyIconV2.types';
 export type T_FlyMiniSidebarItem = {
     key: string | number;
     label: string;
     path: string;
-    icon: T_FlyIconProps;
+    icon: T_FlyIconV2Props['icon'];
 };

package/dist/types/components/navigation/menu/fly-sidebar/FlySidebar.types.d.ts

@@ -1,8 +1,8 @@
-import type { T_FlyIconProps } from '../../../general/fly-icon/FlyIcon.types';
+import type { T_FlyIconV2Props } from '../../../general';
 export type T_FlySidebarBase = {
     index: string;
     label?: string;
-    icon?: T_FlyIconProps;
+    icon?: T_FlyIconV2Props['icon'];
     disabled?: boolean;
 };
 export type T_FlySidebarItem = T_FlySidebarBase & {

package/dist/types/composables/UseLocaleInjector.d.ts

@@ -1,6 +1,8 @@
+import type { Locale } from '@flyanra/js-utils/locales';
 import type { ComposerTranslation } from 'vue-i18n';
 type T_LocaleInjector = {
     t: ComposerTranslation;
+    locale: Locale;
 };
 export declare function UseLocaleInjector(): T_LocaleInjector;
 export {};

package/dist/types/composables/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/utils/validators.d.ts

@@ -1,9 +1,8 @@
 import type { FormItemRule } from 'element-plus';
-import type { Composer } from 'vue-i18n';
-export declare const isRequiredError: (languageKey: string, composer?: Composer) => string;
+export declare const isRequiredError: (languageKey: string) => string;
 type RangeObject = {
     min?: number;
     max?: number;
 };
-export declare const checkInputRange: (languageKey: string | undefined, range: RangeObject, valueTypeLanguageKey?: string, errorMessage?: string, composer?: Composer) => FormItemRule["validator"];
+export declare const checkInputRange: (languageKey: string | undefined, range: RangeObject, valueTypeLanguageKey?: string, errorMessage?: string) => FormItemRule["validator"];
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flyanra/vue-core",
-  "version": "0.4.0",
+  "version": "1.0.0",
   "private": false,
   "description": "Source-distributed Vue component library for Vite and Nuxt consumers.",
   "sideEffects": false,
@@ -30,6 +30,14 @@
       "types": "./dist/types/components/*/index.d.ts",
       "import": "./src/components/*/index.ts"
     },
+    "./composables": {
+      "types": "./dist/types/composables/index.d.ts",
+      "import": "./src/composables/index.ts"
+    },
+    "./composables/*": {
+      "types": "./dist/types/composables/*/index.d.ts",
+      "import": "./src/composables/*/index.ts"
+    },
     "./package.json": "./package.json"
   },
   "types": "./dist/types/index.d.ts",
@@ -76,11 +84,11 @@
       "eslint --fix"
     ]
   },
-  "dependencies": {},
   "devDependencies": {
     "@changesets/cli": "^2.30.0",
     "@eslint/js": "^10.0.1",
     "@flyanra/js-utils": "^1.3.2",
+    "@iconify-json/ri": "^1.2.10",
     "@jamescoyle/vue-icon": "^0.1.2",
     "@mdi/js": "^7.4.47",
     "@remixicon/vue": "^4.9.0",
@@ -104,7 +112,7 @@
     "globals": "^17.5.0",
     "husky": "^9.1.7",
     "lint-staged": "^16.4.0",
-    "lodash": "^4.18.1",
+    "lodash-es": "^4.18.1",
     "maska": "^3.2.0",
     "playwright": "^1.59.1",
     "prettier": "^3.8.3",
@@ -115,6 +123,7 @@
     "tailwindcss": "^4.2.2",
     "typescript": "~6.0.2",
     "typescript-eslint": "^8.58.2",
+    "unplugin-icons": "^23.0.1",
     "vite": "^8.0.4",
     "vitest": "^4.1.4",
     "vue": "^3.5.32",
@@ -126,7 +135,6 @@
     "@flyanra/js-utils": "^1.3.2",
     "@jamescoyle/vue-icon": "^0.1.2",
     "element-plus": "^2.13.7",
-    "lodash": "^4.18.1",
     "maska": "^3.2.0",
     "vue": "^3.5.32",
     "vue-i18n": "^11.4.0"

package/src/components/basic/fly-button/FlyButton.types.ts

@@ -1,6 +1,6 @@
 import type { ButtonType, ElButton, UseTooltipProps } from 'element-plus'
 
-import type { T_FlyIconTypes } from '../../general/fly-icon/FlyIcon.types'
+import type { T_FlyIconV2Props } from '../../general'
 
 export type FlyButtonIconPosition = 'left' | 'right'
 
@@ -16,9 +16,8 @@ export type FlyButtonProps = {
    */
   clipRound?: boolean
   full?: boolean
-  icon?: string | object
+  icon?: T_FlyIconV2Props['icon']
   iconPosition?: FlyButtonIconPosition
-  iconType?: T_FlyIconTypes
   imageUrl?: string
   label?: string
   size?: FlyButtonSizes

package/src/components/basic/fly-button/FlyButton.vue

@@ -13,18 +13,16 @@
         :class="[{ active, 'aspect-1': aspect1 }]"
         @click="handleClick"
       >
-        <FlyIcon
+        <FlyIconV2
           v-if="icon && resolvedIconPosition === 'left'"
-          :type="iconType"
           :icon="icon"
           :class="[{ 'left-icon': slots.default }]"
         />
 
         <slot></slot>
 
-        <FlyIcon
+        <FlyIconV2
           v-if="icon && resolvedIconPosition === 'right'"
-          :type="iconType"
           :icon="icon"
           :class="[{ 'right-icon': slots.default }]"
         />
@@ -42,10 +40,10 @@ import { computed, useAttrs, useSlots } from 'vue'
 
 import { ElButton } from 'element-plus'
 
-import { isEmpty } from 'lodash'
+import { isEmpty } from 'lodash-es'
 
 import FlyTooltip from '../../feedback/tooltip/FlyTooltip.vue'
-import FlyIcon from '../../general/fly-icon/FlyIcon.vue'
+import FlyIconV2 from '../../general/fly-icon-v2/FlyIconV2.vue'
 
 import './FlyButton.element.scss'
 import type { FlyButtonIconPosition, FlyButtonProps } from './FlyButton.types'

package/src/components/feedback/tooltip/FlyInfoTooltip.vue

@@ -10,6 +10,7 @@
         <FlyIcon class="tw-cursor-pointer" :icon="mdiInformationSlabBoxOutline" />
       </slot>
       <template #content>
+        <!-- eslint-disable-next-line vue/no-v-html -->
         <div v-if="html" v-html="DOMPurify.sanitize(content)"></div>
         <slot v-else></slot>
       </template>

package/src/components/form/form.utils.ts

@@ -1,15 +1,16 @@
-import type { Composer } from 'vue-i18n'
+import type { FormInstance } from 'element-plus'
+
+import { UseLocaleInjector } from '../../composables/UseLocaleInjector'
 
 export type ValidateFieldsError = { [K: string]: { message?: string }[] }
 
 /**
  * @returns Translated error message based on active locale
  */
-export function formFieldErrorMessageFormatter(errors: ValidateFieldsError, composer?: Composer) {
+export function formFieldErrorMessageFormatter(errors: ValidateFieldsError) {
+  const { t, locale } = UseLocaleInjector()
   const keys = Object.keys(errors)
 
-  const t = composer?.t
-
   if (keys.length) {
     const requiredFieldNames: (string | undefined)[] = []
     const otherErrors: (string | undefined)[] = []
@@ -30,7 +31,7 @@ export function formFieldErrorMessageFormatter(errors: ValidateFieldsError, comp
     const otherErrorsLength = otherErrors.length
 
     if (requiredFieldsLength >= 1) {
-      const joinedList = new Intl.ListFormat(composer?.locale.value || 'en', {
+      const joinedList = new Intl.ListFormat(locale, {
         style: 'long',
         type: 'conjunction'
       }).format(requiredFieldNames.filter((item): item is string => Boolean(item)))
@@ -55,3 +56,17 @@ export function formFieldErrorMessageFormatter(errors: ValidateFieldsError, comp
 
   return t ? t('validation.someInputsInvalid') : 'validation.someInputsInvalid'
 }
+
+export async function genericFormValidator(formRef: FormInstance): Promise<true> {
+  return new Promise((resolve, reject) => {
+    formRef.validate((valid, errors) => {
+      if (!valid) {
+        if (errors) {
+          return reject(formFieldErrorMessageFormatter(errors))
+        }
+      } else {
+        return resolve(true)
+      }
+    })
+  })
+}

package/src/components/form/index.ts

@@ -0,0 +1,6 @@
+export * from './input-renderers/form-item-renderer'
+export * from './input-renderers/input-renderer'
+
+export type { T_InputRendererBase } from './input-renderers/input-renderer.types'
+export * from './input-validators'
+export * from './form.utils'

package/src/components/form/input-renderers/boolean/FlyBoolean.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, watch } from 'vue'
 
 import { ElSwitch } from 'element-plus'
 
@@ -26,10 +26,23 @@ const props = defineProps<{
 
 const inputProxy = computed({
   get: () => {
-    return props.modelValue
+    return Boolean(props.modelValue)
   },
   set: (v) => {
-    emit('update:modelValue', v)
+    emit('update:modelValue', Boolean(v))
   }
 })
+
+watch(
+  () => props.modelValue,
+  () => {
+    const parsed = Boolean(props.modelValue)
+    if (parsed !== props.modelValue) {
+      emit('update:modelValue', parsed)
+    }
+  },
+  {
+    immediate: true
+  }
+)
 </script>

package/src/components/form/input-renderers/form-item-renderer/index.ts

@@ -0,0 +1,4 @@
+import FlyFormItemRenderer from './FlyFormItemRenderer.vue'
+
+export default FlyFormItemRenderer
+export { FlyFormItemRenderer }

package/src/components/form/input-renderers/form-schema-renderer/FlyFormSchemaRenderer.utils.ts

@@ -1,9 +1,6 @@
-import type { FormInstance, FormItemRule } from 'element-plus'
-
-import type { Composer } from 'vue-i18n'
+import type { FormItemRule } from 'element-plus'
 
 import { checkInputRange } from '../../../../utils/validators'
-import { formFieldErrorMessageFormatter } from '../../form.utils'
 import {
   checkInputRangeValidator,
   requiredField,
@@ -35,20 +32,6 @@ export function getValidatorsFromInputFields(fields: T_InputRendererBase[]) {
   return validators
 }
 
-export async function genericFormValidator(formRef: FormInstance): Promise<true> {
-  return new Promise((resolve, reject) => {
-    formRef.validate((valid, errors) => {
-      if (!valid) {
-        if (errors) {
-          return reject(formFieldErrorMessageFormatter(errors))
-        }
-      } else {
-        return resolve(true)
-      }
-    })
-  })
-}
-
 export function generateInputFromFormSchema(
   field: T_InputSchema,
   lookupData?: T_FormSchemaLookupData
@@ -156,14 +139,14 @@ export function generateInputFromFormSchema(
   }
 }
 
-export function generateFormRule(field: T_InputSchema, composer?: Composer): FormItemRule[] {
+export function generateFormRule(field: T_InputSchema): FormItemRule[] {
   const validations = field.validation
   const rules: FormItemRule[] = []
 
   if (validations?.required) {
     switch (field.type) {
       case 'text': {
-        rules.push(requiredField(field.label, 'blur', true, composer))
+        rules.push(requiredField(field.label, 'blur', true))
 
         if (field.validation?.minLength || field.validation?.maxLength) {
           rules.push(
@@ -175,8 +158,7 @@ export function generateFormRule(field: T_InputSchema, composer?: Composer): For
                   max: field.validation?.maxLength
                 },
                 undefined,
-                undefined,
-                composer
+                undefined
               ),
               'blur'
             )
@@ -187,20 +169,20 @@ export function generateFormRule(field: T_InputSchema, composer?: Composer): For
       }
 
       case 'dateTime': {
-        rules.push(requiredField(field.label, 'blur', true, composer))
+        rules.push(requiredField(field.label, 'blur', true))
         break
       }
 
       case 'number': {
-        rules.push(requiredFieldNumber(field.label, 'change', composer))
+        rules.push(requiredFieldNumber(field.label, 'change'))
         break
       }
 
       case 'select': {
         if (field.config.multiple) {
-          rules.push(requiredFieldArray(field.label, 'change', true, composer))
+          rules.push(requiredFieldArray(field.label, 'change', true))
         } else {
-          rules.push(requiredField(field.label, 'change', true, composer))
+          rules.push(requiredField(field.label, 'change', true))
         }
         break
       }
@@ -208,19 +190,12 @@ export function generateFormRule(field: T_InputSchema, composer?: Composer): For
       case 'valueUnit': {
         if (field.config.valueType === 'text') {
           rules.push(
-            requiredFieldValueUnit(
-              field.label,
-              'change',
-              undefined,
-              undefined,
-              {
-                valueType: 'text'
-              },
-              composer
-            )
+            requiredFieldValueUnit(field.label, 'change', undefined, undefined, {
+              valueType: 'text'
+            })
           )
         } else {
-          rules.push(requiredFieldNumberSelect(field.label, 'change', true, composer))
+          rules.push(requiredFieldNumberSelect(field.label, 'change', true))
         }
       }
     }

package/src/components/form/input-renderers/form-schema-renderer/UseFormSchemaRenderer.ts

@@ -2,14 +2,14 @@ import { type Ref, computed, ref, watch } from 'vue'
 
 import type { FormInstance } from 'element-plus'
 
-import { defaultsDeep } from 'lodash'
+import { defaultsDeep } from 'lodash-es'
 
+import { genericFormValidator } from '../../form.utils'
 import type { T_FormSchemaLookupData, T_InputSchema } from '../form-schema.types'
 import type { T_FormSchemaRendererConfig, T_InputRendererBase } from '../input-renderer.types'
 
 import {
   generateInputFromFormSchema,
-  genericFormValidator,
   getValidatorsFromInputFields
 } from './FlyFormSchemaRenderer.utils'
 

package/src/components/form/input-renderers/input-renderer/FlyInputRenderer.vue

@@ -33,7 +33,7 @@ const emit = defineEmits<{
 }>()
 
 defineProps<{
-  modelValue: unknown
+  modelValue?: unknown
   input: T_InputRendererBase
 }>()
 

package/src/components/form/input-renderers/input-renderer/index.ts

@@ -0,0 +1,4 @@
+import FlyInputRenderer from './FlyInputRenderer.vue'
+
+export default FlyInputRenderer
+export { FlyInputRenderer }

package/src/components/form/input-renderers/input-renderer.utils.ts

@@ -1,18 +1,18 @@
-import { isNil } from 'lodash'
+import { isNil } from 'lodash-es'
 
 import type { T_InputTypes } from './input-renderer.types'
 
 export function getInputDisplayValue(v: unknown, inputType: T_InputTypes) {
   switch (inputType) {
     case 'number':
-      if (v === null || v === undefined) return ''
-      return String(v)
+      if (isNil(v)) return ''
+      return Number(v)
 
     case 'text':
     default:
       if (isNil(v)) {
         return ''
       }
-      return typeof v === 'string' ? v : String(v)
+      return String(v)
   }
 }

package/src/components/form/input-renderers/number/FlyNumber.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, watch } from 'vue'
 
 import { ElInput } from 'element-plus'
 
@@ -41,8 +41,24 @@ const inputProxy = computed({
   },
   set: (v) => {
     const parsed = displayToNumber(v)
+
     emit('update:modelValue', parsed)
     emit('change', parsed)
   }
 })
+
+watch(
+  () => props.modelValue,
+  () => {
+    const parsed = displayToNumber(props.modelValue)
+
+    if (parsed !== props.modelValue) {
+      emit('update:modelValue', parsed)
+      emit('change', parsed)
+    }
+  },
+  {
+    immediate: true
+  }
+)
 </script>

package/src/components/form/input-renderers/select/FlySelect.utils.ts

@@ -1,4 +1,4 @@
-import { isArray, isObject } from 'lodash'
+import { isArray, isObject } from 'lodash-es'
 
 import type {
   T_InputLabelValue,

package/src/components/form/input-renderers/text/FlyText.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, watch } from 'vue'
 
 import { ElInput } from 'element-plus'
 
@@ -53,4 +53,18 @@ const inputProxy = computed({
 function castValue(v: unknown) {
   return v ? String(v) : ''
 }
+
+watch(
+  () => props.modelValue,
+  () => {
+    const parsed = castValue(props.modelValue)
+
+    if (parsed !== props.modelValue) {
+      emit('update:modelValue', parsed)
+    }
+  },
+  {
+    immediate: true
+  }
+)
 </script>

package/src/components/form/input-renderers/value-unit/FlyValueUnit.vue

@@ -59,12 +59,13 @@ const options = computed(() => normalizeSelectOptionsToDict(props.input?.config?
 
 const valueTypeIsString = computed(() => props.input?.config?.valueType === 'text')
 
-const valueProxy = computed<string>({
+const valueProxy = computed({
   get: () => {
-    return getInputDisplayValue(
+    const v = getInputDisplayValue(
       props.modelValue?.value,
       valueTypeIsString.value ? 'text' : 'number'
     )
+    return v
   },
   set: (v) => {
     emit('update:modelValue', getValue(v))
@@ -85,7 +86,7 @@ function ensure(): NonNullable<T_ValueUnitValue> {
   }
 }
 
-function getValue(v: string) {
+function getValue(v: string | number) {
   const base = ensure()
   const parsed = valueTypeIsString.value ? v : displayToNumber(v)
 

package/src/components/form/input-validators.ts

@@ -1,35 +1,23 @@
 import type { FormItemRule } from 'element-plus'
 
-import { isNil } from 'lodash'
-import type { Composer } from 'vue-i18n'
+import { isNil } from 'lodash-es'
 
+import { UseLocaleInjector } from '../../composables/UseLocaleInjector'
 import { type checkInputRange, isRequiredError } from '../../utils/validators'
 
 import type { T_ValueUnitValue } from './input-renderers/value-unit/FlyValueUnit.types'
 
 type InputTriggers = 'blur' | 'change'
 
-// type Validator = (
-//   languageKey?: string,
-//   trigger?: InputTriggers,
-//   useRequiredMessage?: boolean,
-//   required?: boolean,
-//   options?: {
-//     valueType?: 'text' | 'number'
-//   },
-//   composer?: Composer
-// ) => FormItemRule
-
 export const requiredField = (
   fieldLabel = 'validation.field',
   trigger: InputTriggers = 'blur',
-  useRequiredMessage = true,
-  composer?: Composer
+  useRequiredMessage = true
 ): FormItemRule => {
   return {
     required: true,
     trigger: trigger,
-    message: useRequiredMessage ? isRequiredError(fieldLabel, composer) : fieldLabel
+    message: useRequiredMessage ? isRequiredError(fieldLabel) : fieldLabel
   }
 }
 
@@ -43,10 +31,10 @@ export const checkInputRangeValidator = (
 
 export const requiredFieldNumber = (
   languageKey = 'validation.field',
-  trigger: InputTriggers = 'change',
-  composer?: Composer
+  trigger: InputTriggers = 'change'
 ): FormItemRule => {
-  const t = composer?.t
+  const { t } = UseLocaleInjector()
+
   return {
     type: 'number',
     required: true,
@@ -62,19 +50,11 @@ export const requiredFieldNumber = (
 export const requiredFieldNumberSelect = (
   label = 'validation.field',
   trigger: InputTriggers = 'blur',
-  useRequiredMessage = true,
-  composer?: Composer
+  useRequiredMessage = true
 ): FormItemRule =>
-  requiredFieldValueUnit(
-    label,
-    trigger,
-    useRequiredMessage,
-    true,
-    {
-      valueType: 'number'
-    },
-    composer
-  )
+  requiredFieldValueUnit(label, trigger, useRequiredMessage, true, {
+    valueType: 'number'
+  })
 
 export const requiredFieldValueUnit = (
   label = 'validation.field',
@@ -83,8 +63,7 @@ export const requiredFieldValueUnit = (
   required = true,
   options: {
     valueType?: 'text' | 'number'
-  },
-  composer?: Composer
+  }
 ): FormItemRule => ({
   required: required,
   trigger: trigger,
@@ -101,7 +80,7 @@ export const requiredFieldValueUnit = (
         )) ||
       !value
     ) {
-      return callback(new Error(useRequiredMessage ? isRequiredError(label, composer) : label))
+      return callback(new Error(useRequiredMessage ? isRequiredError(label) : label))
     }
 
     return callback()
@@ -111,11 +90,10 @@ export const requiredFieldValueUnit = (
 export const requiredFieldArray = (
   label = 'validation.field',
   trigger: InputTriggers = 'change',
-  useRequiredMessage = true,
-  composer?: Composer
+  useRequiredMessage = true
 ): FormItemRule => ({
   type: 'array',
   required: true,
   trigger: trigger,
-  message: useRequiredMessage ? isRequiredError(label, composer) : label
+  message: useRequiredMessage ? isRequiredError(label) : label
 })

package/src/components/general/fly-icon-v2/FlyIconV2.types.ts

@@ -0,0 +1,6 @@
+import { type Component } from 'vue'
+
+export type T_FlyIconV2Props = {
+  icon: Component
+  size?: string | number
+}

package/src/components/general/fly-icon-v2/FlyIconV2.vue

@@ -0,0 +1,17 @@
+<template>
+  <component
+    :is="icon"
+    class="fly-icon"
+    :style="{
+      fontSize: typeof size === 'number' ? `${size}px` : size
+    }"
+  />
+</template>
+
+<script setup lang="ts">
+import type { T_FlyIconV2Props } from './FlyIconV2.types'
+
+defineProps<T_FlyIconV2Props>()
+</script>
+
+<style lang="scss" scoped></style>

package/src/components/general/fly-icon-v2/index.ts

@@ -0,0 +1,6 @@
+import FlyIconV2 from './FlyIconV2.vue'
+
+export default FlyIconV2
+export { FlyIconV2 }
+
+export type { T_FlyIconV2Props } from './FlyIconV2.types.ts'

package/src/components/general/index.ts

@@ -1,2 +1,5 @@
 export { default as FlyIcon } from './fly-icon'
 export type * from './fly-icon'
+
+export { default as T_FlyIconV2 } from './fly-icon-v2'
+export type * from './fly-icon-v2'

package/src/components/index.ts

@@ -3,3 +3,5 @@ export * from './navigation'
 export * from './basic'
 export * from './feedback'
 export * from './general'
+
+export * from './form'

package/src/components/navigation/menu/fly-mini-sidebar/FlyMiniSidebar.types.ts

@@ -1,8 +1,8 @@
-import type { T_FlyIconProps } from '../../../general/fly-icon'
+import type { T_FlyIconV2Props } from '../../../general/fly-icon-v2/FlyIconV2.types'
 
 export type T_FlyMiniSidebarItem = {
   key: string | number
   label: string
   path: string
-  icon: T_FlyIconProps
+  icon: T_FlyIconV2Props['icon']
 }

package/src/components/navigation/menu/fly-mini-sidebar/FlyMiniSidebarItem.vue

@@ -1,7 +1,7 @@
 <template>
   <router-link :to="menu.path" class="anra-sidebar-item" active-class="anra-sidebar-item--active">
     <span class="anra-sidebar-item__icon">
-      <FlyIcon :icon="menu.icon.icon" :type="menu.icon.type" />
+      <FlyIconV2 :icon="menu.icon" />
     </span>
 
     <span class="anra-sidebar-item__label">{{ menu.label }}</span>
@@ -9,7 +9,7 @@
 </template>
 
 <script setup lang="ts">
-import FlyIcon from '../../../general/fly-icon/FlyIcon.vue'
+import FlyIconV2 from '../../../general/fly-icon-v2/FlyIconV2.vue'
 
 import type { T_FlyMiniSidebarItem } from './FlyMiniSidebar.types'
 

package/src/components/navigation/menu/fly-sidebar/FlySidebar.types.ts

@@ -1,9 +1,9 @@
-import type { T_FlyIconProps } from '../../../general/fly-icon/FlyIcon.types'
+import type { T_FlyIconV2Props } from '../../../general'
 
 export type T_FlySidebarBase = {
   index: string
   label?: string
-  icon?: T_FlyIconProps
+  icon?: T_FlyIconV2Props['icon']
   disabled?: boolean
 }
 

package/src/components/navigation/menu/fly-sidebar/FlySidebar.vue

@@ -12,19 +12,20 @@
     </el-scrollbar>
 
     <div class="fly_sidebar__collapse-trigger" role="button" @click="toggleCollapse">
-      <FlyIcon :icon="isCollapsed ? mdiChevronRight : mdiChevronLeft" type="mdi" />
+      <FlyIconV2 :icon="isCollapsed ? IconMdiChevronRight : IconMdiChevronLeft" />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import IconMdiChevronLeft from '~icons/mdi/chevron-left'
+import IconMdiChevronRight from '~icons/mdi/chevron-right'
+
 import { ref } from 'vue'
 
 import { ElMenu, ElScrollbar } from 'element-plus'
 
-import { mdiChevronLeft, mdiChevronRight } from '@mdi/js'
-
-import FlyIcon from '../../../general/fly-icon/FlyIcon.vue'
+import FlyIconV2 from '../../../general/fly-icon-v2/FlyIconV2.vue'
 
 import './FlySidebar.element.scss'
 import type { T_FlySidebarProps } from './FlySidebar.types'

package/src/components/navigation/menu/fly-sidebar/FlySidebarNode.vue

@@ -2,7 +2,7 @@
   <el-menu-item v-if="node.type === 'item'" :index="node.index" :disabled="node.disabled">
     <template v-if="node.icon">
       <i class="el-icon">
-        <FlyIcon :icon="node.icon.icon" :type="node.icon.type" />
+        <FlyIconV2 :icon="node.icon" />
       </i>
     </template>
 
@@ -15,7 +15,7 @@
     <template #title>
       <template v-if="node.icon">
         <i class="el-icon">
-          <FlyIcon :icon="node.icon.icon" :type="node.icon.type" />
+          <FlyIconV2 :icon="node.icon" />
         </i>
       </template>
 
@@ -37,7 +37,7 @@
 <script lang="ts" setup>
 import { ElMenuItem, ElMenuItemGroup, ElSubMenu } from 'element-plus'
 
-import FlyIcon from '../../../general/fly-icon/FlyIcon.vue'
+import FlyIconV2 from '../../../general/fly-icon-v2/FlyIconV2.vue'
 
 import type { T_FlySidebarNode } from './FlySidebar.types'
 

package/src/styles/element/overrides/form.scss

@@ -2,11 +2,28 @@
 @use 'element-plus/theme-chalk/src/form-item.scss';
 @use 'element-plus/theme-chalk/src/input.scss';
 @use 'element-plus/theme-chalk/src/input-number.scss';
+@use 'element-plus/theme-chalk/src/input-tag.scss';
 @use './select.scss';
 @use './radio.scss';
 @use 'element-plus/theme-chalk/src/checkbox.scss';
 @use './date-time.scss';
 @use 'element-plus/theme-chalk/src/switch.scss';
+@use 'element-plus/theme-chalk/src/icon.scss';
+
+:root {
+  .el-input,
+  .el-textarea,
+  .el-date-editor {
+    --el-input-border-color: var(--anra-form-input-border);
+  }
+  .el-input-tag,
+  .el-select {
+    --el-border-color: var(--anra-form-input-border);
+  }
+  .el-switch__core {
+    --el-switch-border-color: var(--anra-form-input-border);
+  }
+}
 
 .el-form-item {
   &__error,
@@ -62,7 +79,6 @@
 
 .el-select__wrapper {
   --el-fill-color-blank: var(--anra-bg-20);
-  --el-border-color: var(--anra-form-input-border);
 
   &.is-disabled {
     background-color: var(--anra-disabled-bg);