@fiscozen/input 3.4.4 → 3.5.0

package/dist/src/types.d.ts

@@ -1,7 +1,37 @@
 import { IconButtonVariant } from '@fiscozen/button';
 import { IconSize, IconVariant } from '@fiscozen/icons';
 export type InputEnvironment = "backoffice" | "frontoffice";
-type FzInputProps = {
+/**
+ * Input type. Native HTML types render the corresponding `<input type>`;
+ * `currency` renders a text input with locale-aware currency formatting,
+ * validation and step controls (see FzInput docs).
+ */
+export type FzInputType = "text" | "password" | "email" | "number" | "tel" | "url" | "search" | "file" | "currency";
+/**
+ * Exposed instance shape of FzInput (template ref type).
+ * Use this instead of `InstanceType<typeof FzInput>`: FzInput is a generic
+ * component, so its type is a call signature and InstanceType does not apply.
+ */
+export interface FzInputInstance {
+    inputRef: HTMLInputElement | null;
+    containerRef: HTMLElement | null;
+}
+/**
+ * Maps the input `type` to the v-model value type.
+ *
+ * - `type="currency"` → `number | null | undefined` (numbers in, numbers out)
+ * - any other type → `string | undefined`
+ *
+ * The conditional is deliberately non-distributive (`[TType] extends ["currency"]`):
+ * when `type` is bound dynamically the inferred type parameter is the whole
+ * `FzInputType` union and the model falls back to `string` — only a literal
+ * `type="currency"` switches the v-model to numbers. At runtime a dynamic
+ * "currency" type still behaves numerically.
+ */
+export type FzInputModelValue<TType extends FzInputType = FzInputType> = [
+    TType
+] extends ["currency"] ? number | null | undefined : string | undefined;
+type FzInputProps<TType extends FzInputType = FzInputType> = {
     /**
      * Custom DOM id for the underlying `<input>`. When provided, the same value is
      * used for the `<label>`'s `for` attribute so the label-input binding stays
@@ -119,10 +149,12 @@ type FzInputProps = {
      */
     secondRightIconAriaLabel?: string;
     /**
-     * Native HTML input type. Determines keyboard layout and validation behavior
+     * Input type. Native HTML types determine keyboard layout and validation behavior.
+     * `currency` enables locale-aware currency formatting with step controls;
+     * with `type="currency"` the v-model is `number | null | undefined` instead of `string`.
      * @default 'text'
      */
-    type?: "text" | "password" | "email" | "number" | "tel" | "url";
+    type?: TType;
     /**
      * Shows success checkmark icon on the right when true. Takes precedence over rightIcon
      * @default false
@@ -204,8 +236,69 @@ type FzInputProps = {
      * Additional CSS classes applied to left icon container
      */
     leftIconClass?: string;
+    /**
+     * Minimum allowed value. For `type="currency"` values below this are clamped to min;
+     * for `type="number"` it is forwarded to the native `min` attribute.
+     */
+    min?: number;
+    /**
+     * Maximum allowed value. For `type="currency"` values above this are clamped to max;
+     * for `type="number"` it is forwarded to the native `max` attribute.
+     */
+    max?: number;
+    /**
+     * Step increment for the up/down arrow controls shown with `type="currency"` and
+     * `type="number"`. For `type="number"` it is also forwarded to the native `step` attribute.
+     * When forceStep is true (currency only), values are rounded to the nearest step multiple.
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Enforces quantization for `type="currency"`: values are automatically rounded
+     * to the nearest step multiple
+     * @default false
+     */
+    forceStep?: boolean;
+    /**
+     * Minimum decimal places in formatted output (`type="currency"` only)
+     * @default 2
+     * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#digit_options
+     */
+    minimumFractionDigits?: number;
+    /**
+     * Maximum decimal places in formatted output (`type="currency"` only)
+     * @default 2
+     * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#digit_options
+     */
+    maximumFractionDigits?: number;
+    /**
+     * Converts empty input to null instead of undefined (`type="currency"` only).
+     * When true, empty input will emit null instead of undefined.
+     * @default false
+     */
+    nullOnEmpty?: boolean;
+    /**
+     * Converts empty input to 0 instead of undefined (`type="currency"` only).
+     * When true, empty input will emit 0 instead of undefined.
+     * @default false
+     */
+    zeroOnEmpty?: boolean;
+    /**
+     * Custom accessible label for the step up button shown with `type="currency"`
+     * and `type="number"`. If not provided, uses a default label based on step.
+     */
+    stepUpAriaLabel?: string;
+    /**
+     * Custom accessible label for the step down button shown with `type="currency"`
+     * and `type="number"`. If not provided, uses a default label based on step.
+     */
+    stepDownAriaLabel?: string;
 };
-interface FzCurrencyInputProps extends Omit<FzInputProps, "type" | "modelValue" | "rightIcon" | "rightIconSize" | "rightIconVariant" | "rightIconButton" | "rightIconButtonVariant" | "rightIconAriaLabel" | "rightIconClass" | "secondRightIcon" | "secondRightIconClass" | "secondRightIconVariant" | "secondRightIconButton" | "secondRightIconButtonVariant" | "secondRightIconAriaLabel"> {
+/**
+ * @deprecated FzCurrencyInput is deprecated: use `FzInput` with `type="currency"` instead.
+ * This interface is kept for backwards compatibility until the migration is complete.
+ */
+interface FzCurrencyInputProps extends Omit<FzInputProps<"currency">, "type" | "modelValue" | "rightIcon" | "rightIconSize" | "rightIconVariant" | "rightIconButton" | "rightIconButtonVariant" | "rightIconAriaLabel" | "rightIconClass" | "secondRightIcon" | "secondRightIconClass" | "secondRightIconVariant" | "secondRightIconButton" | "secondRightIconButtonVariant" | "secondRightIconAriaLabel"> {
     /**
      * The v-model value.
      *
@@ -248,55 +341,5 @@ interface FzCurrencyInputProps extends Omit<FzInputProps, "type" | "modelValue"
      * ```
      */
     modelValue?: number | string | undefined | null;
-    /**
-     * Converts empty input to null instead of undefined.
-     * When true, empty input (v-model undefined) will emit null instead of undefined.
-     * @default false
-     */
-    nullOnEmpty?: boolean;
-    /**
-     * Converts empty input to 0 instead of undefined.
-     * When true, empty input (v-model undefined) will emit 0 instead of undefined.
-     * @default false
-     */
-    zeroOnEmpty?: boolean;
-    /**
-     * Minimum decimal places in formatted output
-     * @default 2
-     * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#digit_options
-     */
-    minimumFractionDigits?: number;
-    /**
-     * Maximum decimal places in formatted output
-     * @default 2
-     * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#digit_options
-     */
-    maximumFractionDigits?: number;
-    /**
-     * Minimum allowed value. Values below this are clamped to min
-     */
-    min?: number;
-    /**
-     * Maximum allowed value. Values above this are clamped to max
-     */
-    max?: number;
-    /**
-     * Step increment for arrow buttons. When forceStep is true, values are rounded to nearest step multiple
-     * @default 1
-     */
-    step?: number;
-    /**
-     * Enforces quantization: values are automatically rounded to nearest step multiple
-     * @default false
-     */
-    forceStep?: boolean;
-    /**
-     * Custom accessible label for step up button. If not provided, uses default label.
-     */
-    stepUpAriaLabel?: string;
-    /**
-     * Custom accessible label for step down button. If not provided, uses default label.
-     */
-    stepDownAriaLabel?: string;
 }
 export { FzInputProps, FzCurrencyInputProps };

package/dist/src/useCurrencyInput.d.ts

@@ -0,0 +1,59 @@
+import { ComputedRef, Ref } from 'vue';
+/**
+ * Subset of FzInput props the currency behavior depends on.
+ * Matches the prop names/semantics of the former FzCurrencyInput component.
+ */
+export interface UseCurrencyInputProps {
+    /** Minimum allowed value. Values below this are clamped to min */
+    min?: number;
+    /** Maximum allowed value. Values above this are clamped to max */
+    max?: number;
+    /** Step increment for arrow buttons. When forceStep is true, values are rounded to nearest step multiple */
+    step?: number;
+    /** Enforces quantization: values are automatically rounded to nearest step multiple */
+    forceStep?: boolean;
+    /** Minimum decimal places in formatted output */
+    minimumFractionDigits?: number;
+    /** Maximum decimal places in formatted output */
+    maximumFractionDigits?: number;
+    /** Converts empty input to null instead of undefined */
+    nullOnEmpty?: boolean;
+    /** Converts empty input to 0 instead of undefined */
+    zeroOnEmpty?: boolean;
+    /** Native readonly attribute */
+    readonly?: boolean;
+    /** Disables input interaction */
+    disabled?: boolean;
+}
+export interface UseCurrencyInputOptions {
+    /** Reactive props object (the component's props proxy) */
+    props: UseCurrencyInputProps;
+    /**
+     * The numeric v-model ref. Accepts `number | string | null | undefined` for
+     * retrocompatibility, but the composable always writes `number | null | undefined`.
+     */
+    model: Ref<number | string | null | undefined>;
+    /** Whether currency behavior is active (i.e. FzInput type === "currency") */
+    enabled: ComputedRef<boolean>;
+}
+/**
+ * Currency input behavior for FzInput with `type="currency"`.
+ *
+ * Manages a display string (`displayValue`) bound to the native input and keeps it
+ * in sync with the numeric v-model: number formatting via Intl.NumberFormat with
+ * Italian locale separators, input normalization/filtering, min/max clamping and
+ * step quantization. Formatting and quantization happen on blur; while focused the
+ * raw value is shown for editing.
+ *
+ * Ported from the FzCurrencyInput component, which is now a thin deprecated
+ * wrapper around `<FzInput type="currency">`.
+ */
+export default function useCurrencyInput(options: UseCurrencyInputOptions): {
+    displayValue: Ref<string | undefined, string | undefined>;
+    handleDisplayUpdate: (newValue: string | undefined) => void;
+    handleKeydown: (e: KeyboardEvent) => void;
+    handlePaste: (e: ClipboardEvent) => void;
+    handleFocus: () => void;
+    handleBlur: () => void;
+    stepBy: (direction: 1 | -1) => void;
+};

package/dist/src/useInputStyle.d.ts

@@ -1,19 +1,25 @@
 import { ToRefs, Ref, ComputedRef } from 'vue';
 import { FzInputProps, InputEnvironment } from './types';
+/**
+ * The subset of FzInput props that drive styling. Styling is independent of the
+ * input `type`, so this is intentionally decoupled from `FzInputProps<TType>`'s
+ * generic parameter — only these visual-state props are read here.
+ */
+type FzInputStyleProps = Pick<FzInputProps, "variant" | "disabled" | "readonly" | "error" | "highlighted" | "aiReasoning">;
 /**
  * Composable for managing FzInput component styles and computed classes
  *
  * Handles dynamic styling based on props, environment, variant, and state.
  * Returns computed classes for container, label, input, help text, and error messages.
  *
- * @param props - Reactive props from FzInput component
+ * @param props - Reactive styling props from FzInput component
  * @param container - Reference to container DOM element
  * @param model - Reactive model value (string | undefined)
  * @param effectiveEnvironment - Computed effective environment (backoffice | frontoffice)
  * @param isFocused - Reactive flag indicating if input is focused
  * @returns Object containing computed classes and style-related properties
  */
-export default function useInputStyle(props: ToRefs<FzInputProps>, container: Ref<HTMLElement | null>, model: Ref<string | undefined>, effectiveEnvironment: ComputedRef<InputEnvironment>, isFocused: Ref<boolean>): {
+export default function useInputStyle(props: ToRefs<FzInputStyleProps>, container: Ref<HTMLElement | null>, model: Ref<string | undefined>, effectiveEnvironment: ComputedRef<InputEnvironment>, isFocused: Ref<boolean>): {
     staticContainerClass: string;
     computedContainerClass: ComputedRef<string[]>;
     computedLabelClass: ComputedRef<string[]>;
@@ -23,3 +29,4 @@ export default function useInputStyle(props: ToRefs<FzInputProps>, container: Re
     computedErrorClass: ComputedRef<string[]>;
     showNormalPlaceholder: ComputedRef<boolean>;
 };
+export {};

package/dist/src/utils.d.ts

@@ -1,5 +1,19 @@
 import { InputEnvironment } from './types';
 type InputSize = "sm" | "md" | "lg";
+/**
+ * Whether `text` matches the native floating-point grammar exactly (no
+ * trimming: padded or grouped content is rejected by some browsers and
+ * blanked out by others, so it cannot be considered natively safe).
+ */
+export declare const isNativeFloatString: (text: string) => boolean;
+/**
+ * Parses clipboard text into a finite number, accepting the same formats as
+ * currency-mode paste (Italian "1.234,56", comma decimals, padded whitespace).
+ *
+ * @returns The parsed number, or null when the text cannot be interpreted as
+ * a finite number
+ */
+export declare const parseClipboardNumber: (text: string) => number | null;
 /**
  * Maps deprecated InputSize to InputEnvironment
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fiscozen/input",
-  "version": "3.4.4",
+  "version": "3.5.0",
   "description": "Design System Input component",
   "main": "src/index.ts",
   "type": "module",
@@ -32,9 +32,9 @@
     "vite-plugin-dts": "^4.5.0",
     "vitest": "^4.1.1",
     "vue-tsc": "^2.2.12",
+    "@fiscozen/tsconfig": "^0.1.0",
     "@fiscozen/prettier-config": "^0.1.0",
-    "@fiscozen/eslint-config": "^0.1.0",
-    "@fiscozen/tsconfig": "^0.1.0"
+    "@fiscozen/eslint-config": "^0.1.0"
   },
   "license": "MIT",
   "scripts": {