@fiscozen/input 0.1.17 → 1.0.0-next.1

package/dist/src/types.d.ts

@@ -1,111 +1,253 @@
-import { IconVariant } from '@fiscozen/icons';
+import { IconButtonVariant } from '@fiscozen/button';
+import { IconSize, IconVariant } from '@fiscozen/icons';
 
+export type InputEnvironment = "backoffice" | "frontoffice";
 type FzInputProps = {
     /**
-     * The label displayed on top of the input
+     * Text label displayed above the input field. Overridden by label slot if provided.
      */
-    label: string;
+    label?: string;
     /**
-     * The size of the input
+     * Environment determining input size and styling
+     * @default 'frontoffice'
+     */
+    environment?: InputEnvironment;
+    /**
+     * Visual size affecting height, padding, and text size
+     *
+     * @deprecated Use the 'environment' prop instead. This prop will be removed in a future version.
+     * Size values map to environments: sm/md → backoffice, lg → frontoffice
      */
     size?: "sm" | "md" | "lg";
     /**
-     * The placeholder displayed in the input
+     * Placeholder text shown when input is empty. Behavior differs based on variant.
      */
     placeholder?: string;
     /**
-     * If set to true, the input is required
+     * Marks input as required. Adds asterisk to label and sets native required attribute.
+     * @default false
      */
     required?: boolean;
     /**
-     * If set to true, the input is disabled
+     * Disables input interaction and applies disabled styling
+     * @default false
      */
     disabled?: boolean;
     /**
-     * If set to true, the input is in error state
+     * Shows error state with red border and enables errorMessage slot display
+     * @default false
      */
     error?: boolean;
     /**
-     * Left icon name
+     * Font Awesome icon name displayed on the left side of input
      */
     leftIcon?: string;
     /**
-     * Left icon variant
+     * Visual style variant for left icon (solid, regular, light, etc.)
      */
     leftIconVariant?: IconVariant;
     /**
-     * Right icon name
+     * Button variant for left icon when rendered as clickable button
+     */
+    leftIconButtonVariant?: IconButtonVariant;
+    /**
+     * Accessible label for left icon when clickable. Required for screen reader accessibility.
+     */
+    leftIconAriaLabel?: string;
+    /**
+     * Font Awesome icon name displayed on the right side of input
      */
     rightIcon?: string;
     /**
-     * Right icon variant
+     * Additional CSS classes applied to right icon container
+     */
+    rightIconClass?: string;
+    /**
+     * Size override for right icon. If not provided, uses input size mapping.
+     * @deprecated This prop is deprecated and will be removed in a future version.
+     * Icons now have a fixed size of "md". This prop will be ignored.
+     */
+    rightIconSize?: IconSize;
+    /**
+     * Visual style variant for right icon (solid, regular, light, etc.)
      */
     rightIconVariant?: IconVariant;
     /**
-     * The input type
+     * Renders right icon as clickable button instead of static icon
+     * @default false
+     */
+    rightIconButton?: boolean;
+    /**
+     * Button variant for right icon when rightIconButton is true
+     * @default 'invisible'
+     */
+    rightIconButtonVariant?: IconButtonVariant;
+    /**
+     * Accessible label for right icon when clickable. Required for screen reader accessibility.
+     */
+    rightIconAriaLabel?: string;
+    /**
+     * Font Awesome icon name displayed as second icon on the right side of input.
+     * Priority order: secondRightIcon > rightIcon > valid
+     */
+    secondRightIcon?: string;
+    /**
+     * Additional CSS classes applied to second right icon container
+     */
+    secondRightIconClass?: string;
+    /**
+     * Visual style variant for second right icon (solid, regular, light, etc.)
+     */
+    secondRightIconVariant?: IconVariant;
+    /**
+     * Renders second right icon as clickable button instead of static icon
+     * @default false
+     */
+    secondRightIconButton?: boolean;
+    /**
+     * Button variant for second right icon when secondRightIconButton is true
+     * @default 'invisible'
+     */
+    secondRightIconButtonVariant?: IconButtonVariant;
+    /**
+     * Accessible label for second right icon when clickable. Required for screen reader accessibility.
+     */
+    secondRightIconAriaLabel?: string;
+    /**
+     * Native HTML input type. Determines keyboard layout and validation behavior
+     * @default 'text'
      */
     type?: "text" | "password" | "email" | "number" | "tel" | "url";
     /**
-     * If set to true, the input is valid
+     * Shows success checkmark icon on the right when true. Takes precedence over rightIcon
+     * @default false
      */
     valid?: boolean;
     /**
-     * Pattern to validate the input
+     * Visual presentation style. 'floating-label' moves placeholder above input when focused/filled
+     * @default 'normal'
+     */
+    variant?: 'normal' | 'floating-label';
+    /**
+     * HTML5 pattern attribute for native browser validation
      */
     pattern?: string;
     /**
-     * Defines the textarea key in a form
+     * Native name attribute for form submission and identification
      */
     name?: string;
     /**
-     * native readonly input value
+     * Native readonly attribute. Prevents user input while keeping field focusable
+     * @default false
      */
     readonly?: boolean;
     /**
-     * native maxlength input value
+     * Native maxlength attribute. Limits maximum number of characters
      */
     maxlength?: number;
     /**
-     * right icon class
+     * Native autocomplete attribute. Controls browser autocomplete and suggestions.
+     * When false, sets autocomplete="off" to disable browser autocomplete.
+     * @default false
      */
-    rightIconClass?: string;
+    autocomplete?: boolean;
     /**
-     * left icon class
+     * Additional CSS classes applied to left icon container
      */
     leftIconClass?: string;
 };
-interface FzCurrencyInputProps extends Omit<FzInputProps, "type" | "modelValue"> {
-    /**
-     * Is set to true, an empty string will be casted to null
+interface FzCurrencyInputProps extends Omit<FzInputProps, "type" | "modelValue" | "rightIcon" | "rightIconSize" | "rightIconVariant" | "rightIconButton" | "rightIconButtonVariant" | "rightIconAriaLabel" | "rightIconClass" | "secondRightIcon" | "secondRightIconClass" | "secondRightIconVariant" | "secondRightIconButton" | "secondRightIconButtonVariant" | "secondRightIconAriaLabel"> {
+    /**
+     * The v-model value.
+     *
+     * **Type assertion**: This prop accepts `number | string | undefined | null` as input,
+     * but the component **always emits** `number | undefined | null` (never `string`).
+     * Strings are automatically parsed (Italian format: "1.234,56" → 1234.56) and converted
+     * to numbers internally.
+     *
+     * **nullOnEmpty**: When `nullOnEmpty` is `true`, empty input emits `null` instead of `undefined`.
+     *
+     * **Deprecation**: String values are deprecated and will be removed in a future version.
+     * A console warning is shown when strings are used. Please use `number | undefined | null` instead
+     * for type safety and future compatibility.
+     *
+     * @example
+     * ```vue
+     * <!-- ✅ Recommended: number | undefined | null -->
+     * <script setup>
+     * const amount = ref<number | undefined>(undefined);
+     * </script>
+     * <template>
+     *   <FzCurrencyInput v-model="amount" />
+     * </template>
+     *
+     * <!-- ✅ With nullOnEmpty: number | null -->
+     * <script setup>
+     * const amount = ref<number | null>(null);
+     * </script>
+     * <template>
+     *   <FzCurrencyInput v-model="amount" :nullOnEmpty="true" />
+     * </template>
+     *
+     * <!-- ⚠️ Deprecated: string (still works but shows warning) -->
+     * <script setup>
+     * const amount = ref<string>("1234,56");
+     * </script>
+     * <template>
+     *   <FzCurrencyInput v-model="amount" />
+     * </template>
+     * ```
+     */
+    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;
     /**
-     * Minimum number of decimal places allowed, set null to allow arbitrary decimal values length
-     * note that limits from Intl.NumberFormat still apply
-     * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#digit_options
+     * 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 number of decimal places allowed, set null to allow arbitrary decimal values length
-     * note that limits from Intl.NumberFormat still apply
-     * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#digit_options
+     * 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 number value
+     * Minimum allowed value. Values below this are clamped to min
      */
     min?: number;
     /**
-     * Maximum number value
+     * Maximum allowed value. Values above this are clamped to max
      */
     max?: number;
     /**
-     * Quantized step
+     * Step increment for arrow buttons. When forceStep is true, values are rounded to nearest step multiple
+     * @default 1
      */
     step?: number;
     /**
-     * Allow only mutiples of step
+     * 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/useInputStyle.d.ts

@@ -1,12 +1,27 @@
-import { Ref } from 'vue';
-import { FzInputProps } from './types';
+import { ToRefs, Ref, ComputedRef } from 'vue';
+import { FzInputProps, InputEnvironment } from './types';
 
-export default function useInputStyle(props: FzInputProps, container: Ref<HTMLElement | null>): {
+/**
+ * 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 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>): {
     staticContainerClass: string;
-    computedContainerClass: import('vue').ComputedRef<string[]>;
-    computedLabelClass: import('vue').ComputedRef<string[]>;
+    computedContainerClass: ComputedRef<(string | undefined)[]>;
+    computedLabelClass: ComputedRef<string[]>;
     staticInputClass: string;
-    computedHelpClass: import('vue').ComputedRef<string[]>;
-    computedErrorClass: import('vue').ComputedRef<string[]>;
-    containerWidth: import('vue').ComputedRef<string>;
+    computedInputClass: ComputedRef<string[]>;
+    computedHelpClass: ComputedRef<string[]>;
+    computedErrorClass: ComputedRef<string[]>;
+    containerWidth: ComputedRef<string>;
+    showNormalPlaceholder: ComputedRef<boolean>;
 };

package/dist/src/utils.d.ts

@@ -0,0 +1,21 @@
+import { InputEnvironment } from './types';
+
+type InputSize = "sm" | "md" | "lg";
+/**
+ * Maps deprecated InputSize to InputEnvironment
+ *
+ * Used for backward compatibility when size prop is provided instead of environment.
+ * Size values map to environments: sm/md → backoffice, lg → frontoffice
+ */
+export declare const sizeToEnvironmentMapping: Record<InputSize, InputEnvironment>;
+/**
+ * Generates a unique ID for input components.
+ *
+ * @returns Unique input ID with "fz-input" prefix
+ *
+ * @example
+ * generateInputId() // "fz-input-97123456-a8d3k"
+ * generateInputId() // "fz-input-97123457-k2m9p"
+ */
+export declare function generateInputId(): string;
+export {};

package/dist/style.css

@@ -0,0 +1 @@
+.fz-icon-button-wrapper[data-v-b4be112d]>button{gap:0!important;min-width:0!important}.fz-icon-button-wrapper--backoffice[data-v-b4be112d]>button{padding-left:5px;padding-right:5px}.fz-icon-button-wrapper--frontoffice[data-v-b4be112d]>button{padding-left:11px;padding-right:11px}.fz-container[data-v-8c40daeb]{display:flex}.fz-container--vertical[data-v-8c40daeb]{flex-direction:column}.fz-container--horizontal[data-v-8c40daeb]{flex-direction:row;flex-wrap:nowrap}.fz-container.align-items-start[data-v-8c40daeb]{align-items:flex-start}.fz-container.align-items-center[data-v-8c40daeb]{align-items:center}.fz-container.align-items-end[data-v-8c40daeb]{align-items:flex-end}.fz-container.align-items-stretch[data-v-8c40daeb]{align-items:stretch}.fz-container.align-items-baseline[data-v-8c40daeb]{align-items:baseline}.fz-container--horizontal.layout-expand-first[data-v-8c40daeb]>*:first-child{flex-grow:1}.fz-container--horizontal.layout-expand-all[data-v-8c40daeb]>*{flex-grow:1}.fz-container--horizontal.layout-space-between[data-v-8c40daeb]{justify-content:space-between}.fz-container--horizontal.layout-expand-last[data-v-8c40daeb]>*:last-child{flex-grow:1}.fz-container--vertical.gap-main-content-sm[data-v-8c40daeb]>p+p{margin-top:calc((0px - var(--main-content-sm, 32px)) + var(--paragraph-gap, 8px))}.fz-container--vertical.gap-main-content-base[data-v-8c40daeb]>p+p{margin-top:calc((0px - var(--main-content-base, 48px)) + var(--paragraph-gap, 8px))}.fz-container--vertical.gap-main-content-lg[data-v-8c40daeb]>p+p{margin-top:calc((0px - var(--main-content-lg, 64px)) + var(--paragraph-gap, 8px))}.fz-container--vertical.gap-section-content-none[data-v-8c40daeb]>p+p{margin-top:calc((0px - var(--section-content-none, 0px)) + var(--paragraph-gap, 8px))}.fz-container--vertical.gap-section-content-xs[data-v-8c40daeb]>p+p{margin-top:calc((0px - var(--section-content-xs, 8px)) + var(--paragraph-gap, 8px))}.fz-container--vertical.gap-section-content-sm[data-v-8c40daeb]>p+p{margin-top:calc((0px - var(--section-content-sm, 16px)) + var(--paragraph-gap, 8px))}.fz-container--vertical.gap-section-content-base[data-v-8c40daeb]>p+p{margin-top:calc((0px - var(--section-content-base, 24px)) + var(--paragraph-gap, 8px))}.fz-container--vertical.gap-section-content-lg[data-v-8c40daeb]>p+p{margin-top:calc((0px - var(--section-content-lg, 32px)) + var(--paragraph-gap, 8px))}.fz-container--horizontal[data-v-8c40daeb]>p+p{margin-top:0}.fz-button-group[data-v-79dd8b6f]>*:nth-child(1):nth-last-child(2),.fz-button-group[data-v-79dd8b6f]>*:nth-child(1):nth-last-child(2)~*{flex-basis:50%;flex-grow:0;flex-shrink:1}.fz-button-group[data-v-79dd8b6f]>*:nth-child(1):nth-last-child(3),.fz-button-group[data-v-79dd8b6f]>*:nth-child(1):nth-last-child(3)~*{flex-basis:33.333%;flex-grow:0;flex-shrink:1}.fz-button-group[data-v-79dd8b6f]>.fz-icon-button-wrapper{flex-basis:initial!important;flex-grow:0!important;flex-shrink:0!important}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fiscozen/input",
-  "version": "0.1.17",
+  "version": "1.0.0-next.1",
   "description": "Design System Input component",
   "main": "src/index.ts",
   "type": "module",
@@ -9,9 +9,9 @@
   "peerDependencies": {
     "tailwindcss": "^3.4.1",
     "vue": "^3.4.13",
-    "@fiscozen/composables": "^0.1.36",
-    "@fiscozen/icons": "^0.1.28",
-    "@fiscozen/button": "^0.1.13"
+    "@fiscozen/icons": "^0.1.36",
+    "@fiscozen/composables": "^1.0.0",
+    "@fiscozen/button": "^1.0.1-next.1"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",