@fiscozen/input 3.2.0 → 3.3.0

package/dist/src/FzCurrencyInput.vue.d.ts

@@ -55,6 +55,8 @@ declare function __VLS_template(): {
                 readonly disableEmphasisReset?: boolean | undefined;
                 readonly maxlength?: number | undefined;
                 readonly autocomplete?: boolean | undefined;
+                readonly clearable?: boolean | undefined;
+                readonly clearAriaLabel?: string | undefined;
                 readonly leftIconClass?: string | undefined;
                 readonly onFocus?: ((event: FocusEvent) => any) | undefined;
                 readonly onBlur?: ((event: FocusEvent) => any) | undefined;
@@ -63,6 +65,7 @@ declare function __VLS_template(): {
                 readonly "onFzinput:second-right-icon-click"?: (() => any) | undefined;
                 readonly "onUpdate:highlighted"?: ((value: boolean) => any) | undefined;
                 readonly "onUpdate:aiReasoning"?: ((value: boolean) => any) | undefined;
+                readonly "onFzinput:clear"?: (() => any) | undefined;
                 readonly "onUpdate:modelValue"?: ((value: string) => any) | undefined;
             } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
             $attrs: {
@@ -80,7 +83,7 @@ declare function __VLS_template(): {
             $root: import('vue').ComponentPublicInstance | null;
             $parent: import('vue').ComponentPublicInstance | null;
             $host: Element | null;
-            $emit: ((event: "focus", event: FocusEvent) => void) & ((event: "blur", event: FocusEvent) => void) & ((event: "fzinput:left-icon-click") => void) & ((event: "fzinput:right-icon-click") => void) & ((event: "fzinput:second-right-icon-click") => void) & ((event: "update:highlighted", value: boolean) => void) & ((event: "update:aiReasoning", value: boolean) => void) & ((event: "update:modelValue", value: string) => void);
+            $emit: ((event: "focus", event: FocusEvent) => void) & ((event: "blur", event: FocusEvent) => void) & ((event: "fzinput:left-icon-click") => void) & ((event: "fzinput:right-icon-click") => void) & ((event: "fzinput:second-right-icon-click") => void) & ((event: "update:highlighted", value: boolean) => void) & ((event: "update:aiReasoning", value: boolean) => void) & ((event: "fzinput:clear") => void) & ((event: "update:modelValue", value: string) => void);
             $el: any;
             $options: import('vue').ComponentOptionsBase<Readonly<{
                 modelValue?: string;
@@ -92,6 +95,7 @@ declare function __VLS_template(): {
                 "onFzinput:second-right-icon-click"?: (() => any) | undefined;
                 "onUpdate:highlighted"?: ((value: boolean) => any) | undefined;
                 "onUpdate:aiReasoning"?: ((value: boolean) => any) | undefined;
+                "onFzinput:clear"?: (() => any) | undefined;
                 "onUpdate:modelValue"?: ((value: string) => any) | undefined;
             }>, {
                 inputRef: import('vue').Ref<HTMLInputElement | null, HTMLInputElement | null>;
@@ -104,6 +108,7 @@ declare function __VLS_template(): {
                 "fzinput:second-right-icon-click": () => any;
                 "update:highlighted": (value: boolean) => any;
                 "update:aiReasoning": (value: boolean) => any;
+                "fzinput:clear": () => any;
                 "update:modelValue": (value: string) => any;
             }, string, {
                 variant: "normal" | "floating-label";
@@ -118,6 +123,8 @@ declare function __VLS_template(): {
                 aiReasoningDescription: string;
                 disableEmphasisReset: boolean;
                 autocomplete: boolean;
+                clearable: boolean;
+                clearAriaLabel: string;
             }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
                 beforeCreate?: (() => void) | (() => void)[];
                 created?: (() => void) | (() => void)[];
@@ -151,6 +158,8 @@ declare function __VLS_template(): {
             aiReasoningDescription: string;
             disableEmphasisReset: boolean;
             autocomplete: boolean;
+            clearable: boolean;
+            clearAriaLabel: string;
         }> & Omit<Readonly<{
             modelValue?: string;
         } & import('./types').FzInputProps> & Readonly<{
@@ -161,8 +170,9 @@ declare function __VLS_template(): {
             "onFzinput:second-right-icon-click"?: (() => any) | undefined;
             "onUpdate:highlighted"?: ((value: boolean) => any) | undefined;
             "onUpdate:aiReasoning"?: ((value: boolean) => any) | undefined;
+            "onFzinput:clear"?: (() => any) | undefined;
             "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-        }>, "inputRef" | "containerRef" | ("variant" | "type" | "environment" | "rightIconButtonVariant" | "secondRightIconButtonVariant" | "error" | "highlighted" | "highlightedDescription" | "aiReasoning" | "aiReasoningDescription" | "disableEmphasisReset" | "autocomplete")> & import('vue').ShallowUnwrapRef<{
+        }>, "inputRef" | "containerRef" | ("variant" | "type" | "environment" | "rightIconButtonVariant" | "secondRightIconButtonVariant" | "error" | "highlighted" | "highlightedDescription" | "aiReasoning" | "aiReasoningDescription" | "disableEmphasisReset" | "autocomplete" | "clearable" | "clearAriaLabel")> & import('vue').ShallowUnwrapRef<{
             inputRef: import('vue').Ref<HTMLInputElement | null, HTMLInputElement | null>;
             containerRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
         }> & {} & import('vue').ComponentCustomProperties & {} & {
@@ -189,8 +199,10 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
     containerRef: import('vue').ComputedRef<HTMLElement | null | undefined>;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: string | number | null | undefined) => any;
+    "fzcurrencyinput:clear": () => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | number | null | undefined) => any) | undefined;
+    "onFzcurrencyinput:clear"?: (() => any) | undefined;
 }>, {
     minimumFractionDigits: number;
     maximumFractionDigits: number;
@@ -240,6 +252,8 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
             readonly disableEmphasisReset?: boolean | undefined;
             readonly maxlength?: number | undefined;
             readonly autocomplete?: boolean | undefined;
+            readonly clearable?: boolean | undefined;
+            readonly clearAriaLabel?: string | undefined;
             readonly leftIconClass?: string | undefined;
             readonly onFocus?: ((event: FocusEvent) => any) | undefined;
             readonly onBlur?: ((event: FocusEvent) => any) | undefined;
@@ -248,6 +262,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
             readonly "onFzinput:second-right-icon-click"?: (() => any) | undefined;
             readonly "onUpdate:highlighted"?: ((value: boolean) => any) | undefined;
             readonly "onUpdate:aiReasoning"?: ((value: boolean) => any) | undefined;
+            readonly "onFzinput:clear"?: (() => any) | undefined;
             readonly "onUpdate:modelValue"?: ((value: string) => any) | undefined;
         } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
         $attrs: {
@@ -265,7 +280,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
         $root: import('vue').ComponentPublicInstance | null;
         $parent: import('vue').ComponentPublicInstance | null;
         $host: Element | null;
-        $emit: ((event: "focus", event: FocusEvent) => void) & ((event: "blur", event: FocusEvent) => void) & ((event: "fzinput:left-icon-click") => void) & ((event: "fzinput:right-icon-click") => void) & ((event: "fzinput:second-right-icon-click") => void) & ((event: "update:highlighted", value: boolean) => void) & ((event: "update:aiReasoning", value: boolean) => void) & ((event: "update:modelValue", value: string) => void);
+        $emit: ((event: "focus", event: FocusEvent) => void) & ((event: "blur", event: FocusEvent) => void) & ((event: "fzinput:left-icon-click") => void) & ((event: "fzinput:right-icon-click") => void) & ((event: "fzinput:second-right-icon-click") => void) & ((event: "update:highlighted", value: boolean) => void) & ((event: "update:aiReasoning", value: boolean) => void) & ((event: "fzinput:clear") => void) & ((event: "update:modelValue", value: string) => void);
         $el: any;
         $options: import('vue').ComponentOptionsBase<Readonly<{
             modelValue?: string;
@@ -277,6 +292,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
             "onFzinput:second-right-icon-click"?: (() => any) | undefined;
             "onUpdate:highlighted"?: ((value: boolean) => any) | undefined;
             "onUpdate:aiReasoning"?: ((value: boolean) => any) | undefined;
+            "onFzinput:clear"?: (() => any) | undefined;
             "onUpdate:modelValue"?: ((value: string) => any) | undefined;
         }>, {
             inputRef: import('vue').Ref<HTMLInputElement | null, HTMLInputElement | null>;
@@ -289,6 +305,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
             "fzinput:second-right-icon-click": () => any;
             "update:highlighted": (value: boolean) => any;
             "update:aiReasoning": (value: boolean) => any;
+            "fzinput:clear": () => any;
             "update:modelValue": (value: string) => any;
         }, string, {
             variant: "normal" | "floating-label";
@@ -303,6 +320,8 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
             aiReasoningDescription: string;
             disableEmphasisReset: boolean;
             autocomplete: boolean;
+            clearable: boolean;
+            clearAriaLabel: string;
         }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
             beforeCreate?: (() => void) | (() => void)[];
             created?: (() => void) | (() => void)[];
@@ -336,6 +355,8 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
         aiReasoningDescription: string;
         disableEmphasisReset: boolean;
         autocomplete: boolean;
+        clearable: boolean;
+        clearAriaLabel: string;
     }> & Omit<Readonly<{
         modelValue?: string;
     } & import('./types').FzInputProps> & Readonly<{
@@ -346,8 +367,9 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
         "onFzinput:second-right-icon-click"?: (() => any) | undefined;
         "onUpdate:highlighted"?: ((value: boolean) => any) | undefined;
         "onUpdate:aiReasoning"?: ((value: boolean) => any) | undefined;
+        "onFzinput:clear"?: (() => any) | undefined;
         "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-    }>, "inputRef" | "containerRef" | ("variant" | "type" | "environment" | "rightIconButtonVariant" | "secondRightIconButtonVariant" | "error" | "highlighted" | "highlightedDescription" | "aiReasoning" | "aiReasoningDescription" | "disableEmphasisReset" | "autocomplete")> & import('vue').ShallowUnwrapRef<{
+    }>, "inputRef" | "containerRef" | ("variant" | "type" | "environment" | "rightIconButtonVariant" | "secondRightIconButtonVariant" | "error" | "highlighted" | "highlightedDescription" | "aiReasoning" | "aiReasoningDescription" | "disableEmphasisReset" | "autocomplete" | "clearable" | "clearAriaLabel")> & import('vue').ShallowUnwrapRef<{
         inputRef: import('vue').Ref<HTMLInputElement | null, HTMLInputElement | null>;
         containerRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
     }> & {} & import('vue').ComponentCustomProperties & {} & {

package/dist/src/FzInput.vue.d.ts

@@ -37,6 +37,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
     "fzinput:second-right-icon-click": () => any;
     "update:highlighted": (value: boolean) => any;
     "update:aiReasoning": (value: boolean) => any;
+    "fzinput:clear": () => any;
     "update:modelValue": (value: string) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onFocus?: ((event: FocusEvent) => any) | undefined;
@@ -46,6 +47,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
     "onFzinput:second-right-icon-click"?: (() => any) | undefined;
     "onUpdate:highlighted"?: ((value: boolean) => any) | undefined;
     "onUpdate:aiReasoning"?: ((value: boolean) => any) | undefined;
+    "onFzinput:clear"?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
     variant: "normal" | "floating-label";
@@ -60,6 +62,8 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
     aiReasoningDescription: string;
     disableEmphasisReset: boolean;
     autocomplete: boolean;
+    clearable: boolean;
+    clearAriaLabel: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     containerRef: HTMLDivElement;
     inputRef: HTMLInputElement;

package/dist/src/types.d.ts

@@ -183,6 +183,17 @@ type FzInputProps = {
      * @default false
      */
     autocomplete?: boolean;
+    /**
+     * Shows a clear (×) button when the input has a value.
+     * Clicking it clears the model and emits `fzinput:clear`.
+     * @default false
+     */
+    clearable?: boolean;
+    /**
+     * Accessible label for the clear button.
+     * @default 'Cancella'
+     */
+    clearAriaLabel?: string;
     /**
      * Additional CSS classes applied to left icon container
      */

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@fiscozen/input",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Design System Input component",
   "main": "src/index.ts",
   "type": "module",
   "keywords": [],
   "author": "Cristian Barraco",
   "dependencies": {
+    "@fiscozen/button": "3.0.0",
     "@fiscozen/alert": "3.0.0",
-    "@fiscozen/composables": "1.0.3",
-    "@fiscozen/button": "3.0.0"
+    "@fiscozen/composables": "1.0.3"
   },
   "peerDependencies": {
     "tailwindcss": "^3.4.1",
     "vue": "^3.4.13",
-    "@fiscozen/icons": "^1.0.3"
+    "@fiscozen/icons": "^1.0.4"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",
@@ -32,9 +32,9 @@
     "vite-plugin-dts": "^4.5.0",
     "vitest": "^4.1.1",
     "vue-tsc": "^2.2.12",
-    "@fiscozen/prettier-config": "^0.1.0",
     "@fiscozen/eslint-config": "^0.1.0",
-    "@fiscozen/tsconfig": "^0.1.0"
+    "@fiscozen/tsconfig": "^0.1.0",
+    "@fiscozen/prettier-config": "^0.1.0"
   },
   "license": "MIT",
   "scripts": {

package/src/FzCurrencyInput.vue

@@ -41,6 +41,12 @@ const props = withDefaults(defineProps<FzCurrencyInputProps>(), {
   step: 1,
 });
 
+// DOM events (@focus, @blur, @keydown, …) propagate via v-bind fallthrough on the
+// inner FzInput. @update:modelValue is handled by defineModel. Only custom events
+// emitted explicitly by this component need to be declared here.
+const emit = defineEmits<{
+  "fzcurrencyinput:clear": [];
+}>();
 const model = defineModel<FzCurrencyInputProps["modelValue"]>();
 
 let isInternalUpdate = false;
@@ -730,6 +736,7 @@ defineExpose({
     @focus="handleFocus"
     @blur="handleBlur"
     @paste="handlePaste"
+    @fzinput:clear="emit('fzcurrencyinput:clear')"
   >
     <template v-if="$slots.label" #label>
       <slot name="label"></slot>