@fiscozen/input 0.1.16 → 1.0.0-next.0

package/dist/src/types.d.ts

@@ -0,0 +1,247 @@
+import { IconButtonVariant } from '@fiscozen/button';
+import { IconSize, IconVariant } from '@fiscozen/icons';
+
+export type InputEnvironment = "backoffice" | "frontoffice";
+type FzInputProps = {
+    /**
+     * Text label displayed above the input field. Overridden by label slot if provided.
+     */
+    label?: string;
+    /**
+     * 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";
+    /**
+     * Placeholder text shown when input is empty. Behavior differs based on variant.
+     */
+    placeholder?: string;
+    /**
+     * Marks input as required. Adds asterisk to label and sets native required attribute.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Disables input interaction and applies disabled styling
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Shows error state with red border and enables errorMessage slot display
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Font Awesome icon name displayed on the left side of input
+     */
+    leftIcon?: string;
+    /**
+     * Visual style variant for left icon (solid, regular, light, etc.)
+     */
+    leftIconVariant?: IconVariant;
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * 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";
+    /**
+     * Shows success checkmark icon on the right when true. Takes precedence over rightIcon
+     * @default false
+     */
+    valid?: boolean;
+    /**
+     * 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;
+    /**
+     * Native name attribute for form submission and identification
+     */
+    name?: string;
+    /**
+     * Native readonly attribute. Prevents user input while keeping field focusable
+     * @default false
+     */
+    readonly?: boolean;
+    /**
+     * Native maxlength attribute. Limits maximum number of characters
+     */
+    maxlength?: number;
+    /**
+     * Additional CSS classes applied to left icon container
+     */
+    leftIconClass?: string;
+};
+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;
+    /**
+     * 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/useInputStyle.d.ts

@@ -0,0 +1,27 @@
+import { ToRefs, Ref, ComputedRef } from 'vue';
+import { FzInputProps, InputEnvironment } from './types';
+
+/**
+ * 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: ComputedRef<(string | undefined)[]>;
+    computedLabelClass: ComputedRef<string[]>;
+    staticInputClass: 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-ad2af2dd]{display:flex}.fz-container--vertical[data-v-ad2af2dd]{flex-direction:column}.fz-container--horizontal[data-v-ad2af2dd]{flex-direction:row;flex-wrap:nowrap}.fz-container.align-items-start[data-v-ad2af2dd]{align-items:flex-start}.fz-container.align-items-center[data-v-ad2af2dd]{align-items:center}.fz-container.align-items-end[data-v-ad2af2dd]{align-items:flex-end}.fz-container.align-items-stretch[data-v-ad2af2dd]{align-items:stretch}.fz-container.align-items-baseline[data-v-ad2af2dd]{align-items:baseline}.fz-container--horizontal.layout-expand-first[data-v-ad2af2dd]>*:first-child{flex-grow:1}.fz-container--horizontal.layout-expand-all[data-v-ad2af2dd]>*{flex-grow:1}.fz-container--horizontal.layout-space-between[data-v-ad2af2dd]{justify-content:space-between}.fz-container--vertical.gap-main-content-sm[data-v-ad2af2dd]>p+p{margin-top:calc((0px - var(--main-content-sm, 32px)) + var(--paragraph-gap, 8px))}.fz-container--vertical.gap-main-content-base[data-v-ad2af2dd]>p+p{margin-top:calc((0px - var(--main-content-base, 48px)) + var(--paragraph-gap, 8px))}.fz-container--vertical.gap-main-content-lg[data-v-ad2af2dd]>p+p{margin-top:calc((0px - var(--main-content-lg, 64px)) + var(--paragraph-gap, 8px))}.fz-container--vertical.gap-section-content-none[data-v-ad2af2dd]>p+p{margin-top:calc((0px - var(--section-content-none, 0px)) + var(--paragraph-gap, 8px))}.fz-container--vertical.gap-section-content-xs[data-v-ad2af2dd]>p+p{margin-top:calc((0px - var(--section-content-xs, 8px)) + var(--paragraph-gap, 8px))}.fz-container--vertical.gap-section-content-sm[data-v-ad2af2dd]>p+p{margin-top:calc((0px - var(--section-content-sm, 16px)) + var(--paragraph-gap, 8px))}.fz-container--vertical.gap-section-content-base[data-v-ad2af2dd]>p+p{margin-top:calc((0px - var(--section-content-base, 24px)) + var(--paragraph-gap, 8px))}.fz-container--vertical.gap-section-content-lg[data-v-ad2af2dd]>p+p{margin-top:calc((0px - var(--section-content-lg, 32px)) + var(--paragraph-gap, 8px))}.fz-container--horizontal[data-v-ad2af2dd]>p+p{margin-top:0}.fz-button-group[data-v-00e5427e]>*:nth-child(1):nth-last-child(2),.fz-button-group[data-v-00e5427e]>*:nth-child(1):nth-last-child(2)~*{flex-basis:50%;flex-grow:0;flex-shrink:1}.fz-button-group[data-v-00e5427e]>*:nth-child(1):nth-last-child(3),.fz-button-group[data-v-00e5427e]>*:nth-child(1):nth-last-child(3)~*{flex-basis:33.333%;flex-grow:0;flex-shrink:1}.fz-button-group.fz-button-group--md[data-v-00e5427e]{justify-content:flex-end!important}.fz-button-group.fz-button-group--md[data-v-00e5427e]>*{flex-basis:initial!important;flex-grow:0!important;flex-shrink:0!important}.fz-button-group[data-v-00e5427e]>.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.16",
+  "version": "1.0.0-next.0",
   "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/button": "^0.1.12",
-    "@fiscozen/icons": "^0.1.28"
+    "@fiscozen/button": "^1.0.1-next.1",
+    "@fiscozen/composables": "^0.1.39-next.0",
+    "@fiscozen/icons": "^0.1.36"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",
@@ -29,9 +29,9 @@
     "vite-plugin-dts": "^3.8.3",
     "vitest": "^1.2.0",
     "vue-tsc": "^1.8.25",
-    "@fiscozen/tsconfig": "^0.1.0",
+    "@fiscozen/prettier-config": "^0.1.0",
     "@fiscozen/eslint-config": "^0.1.0",
-    "@fiscozen/prettier-config": "^0.1.0"
+    "@fiscozen/tsconfig": "^0.1.0"
   },
   "license": "MIT",
   "scripts": {