@fiscozen/input 1.0.0-next.1 → 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,30 @@
+# @fiscozen/input
+
+## 1.0.0
+
+### Major Changes
+
+- **LIB-1898: Redesign completo di FzInput.** Floating label, nuova API per gli slot, e introduzione di FzCurrencyInput.
+
+### Modifiche dalla versione 0.1.17
+
+#### Nuove funzionalità
+- Floating label con supporto per tutti i tipi di input (email, telefono, URL)
+- Nuovo componente **FzCurrencyInput** con formattazione automatica, supporto per valori negativi, gestione min/max, e step con `forceStep`
+- Secondo pulsante icona a destra (`rightIconLast`) con gestione accessibilità
+- Prop `environment` per sostituire la deprecata prop `size`
+- Prop `autocomplete` per il controllo dell'autocompletamento
+- Slot `left-icon` per FzCurrencyInput
+
+#### Miglioramenti
+- Gestione migliorata degli eventi di tastiera: il tasto Enter ora consente il submit del form
+- Gestione incolla migliorata per FzCurrencyInput con supporto formati italiani
+- Prevenzione delle race condition negli aggiornamenti del model
+- Click sulle icone disabilitato quando l'input è `disabled` o `readonly`
+- Miglioramento accessibilità con `aria-labelledby` e `aria-describedby`
+
+### Patch Changes
+
+- Updated dependencies
+  - @fiscozen/button@1.0.1
+  - @fiscozen/composables@1.0.1

package/dist/input.js

@@ -6462,17 +6462,18 @@ const P4 = {
   md: "backoffice",
   lg: "frontoffice"
 };
-function V8(e) {
-  const a = Date.now() - 16e11, t = Math.random().toString(36).slice(2, 7);
-  return `${e}-${a}-${t}`;
+let V8 = 0;
+function H8(e) {
+  const a = Date.now() - 16e11;
+  return `${e}-${a}-${++V8}`;
 }
-function H8() {
-  return V8("fz-input");
+function _8() {
+  return H8("fz-input");
 }
-const _8 = { class: "fz-input w-full flex flex-col gap-8" }, W8 = ["id", "for"], q8 = ["tabindex"], Y8 = { class: "flex flex-col justify-around min-w-0 grow" }, G8 = {
+const W8 = { class: "fz-input w-full flex flex-col gap-8" }, q8 = ["id", "for"], Y8 = ["tabindex"], G8 = { class: "flex flex-col justify-around min-w-0 grow" }, X8 = {
   key: 0,
   class: "text-xs text-grey-300 grow-0 overflow-hidden text-ellipsis whitespace-nowrap"
-}, X8 = ["type", "required", "disabled", "readonly", "placeholder", "id", "pattern", "name", "maxlength", "autocomplete", "aria-required", "aria-invalid", "aria-disabled", "aria-labelledby", "aria-describedby"], K8 = { class: "flex items-center gap-4" }, Q8 = ["id"], Z8 = ["id"], J8 = /* @__PURE__ */ o1({
+}, K8 = ["type", "required", "disabled", "readonly", "placeholder", "id", "pattern", "name", "maxlength", "autocomplete", "aria-required", "aria-invalid", "aria-disabled", "aria-labelledby", "aria-describedby"], Q8 = { class: "flex items-center gap-4" }, Z8 = ["id"], J8 = ["id"], el = /* @__PURE__ */ o1({
   __name: "FzInput",
   props: /* @__PURE__ */ u2({
     label: {},
@@ -6537,7 +6538,7 @@ const _8 = { class: "fz-input w-full flex flex-col gap-8" }, W8 = ["id", "for"],
       },
       { immediate: !0 }
     );
-    const c = x(() => n.environment ? n.environment : n.size ? P4[n.size] : "frontoffice"), r = D4(e, "modelValue"), i = g1(null), l = g1(null), s = H8(), o = g1(!1), {
+    const c = x(() => n.environment ? n.environment : n.size ? P4[n.size] : "frontoffice"), r = D4(e, "modelValue"), i = g1(null), l = g1(null), s = _8(), o = g1(!1), {
       staticContainerClass: d,
       computedContainerClass: g,
       computedLabelClass: L,
@@ -6590,14 +6591,14 @@ const _8 = { class: "fz-input w-full flex flex-col gap-8" }, W8 = ["id", "for"],
     return a({
       inputRef: l,
       containerRef: i
-    }), (M, $) => (S(), H("div", _8, [
+    }), (M, $) => (S(), H("div", W8, [
       _(M.$slots, "label", {}, () => [
         e.label ? (S(), H("label", {
           key: 0,
           id: `${w(s)}-label`,
           class: O(w(L)),
           for: w(s)
-        }, H1(e.label) + H1(e.required ? " *" : ""), 11, W8)) : j("", !0)
+        }, H1(e.label) + H1(e.required ? " *" : ""), 11, q8)) : j("", !0)
       ]),
       u1("div", {
         class: O([w(d), w(g)]),
@@ -6622,8 +6623,8 @@ const _8 = { class: "fz-input w-full flex flex-col gap-8" }, W8 = ["id", "for"],
             onKeydown: $[0] || ($[0] = (n1) => s1.value ? (M1) => m(M1, "fzinput:left-icon-click") : void 0)
           }, null, 8, ["name", "variant", "role", "aria-label", "aria-disabled", "tabindex", "class"])) : j("", !0)
         ]),
-        u1("div", Y8, [
-          w(h) ? j("", !0) : (S(), H("span", G8, H1(e.placeholder), 1)),
+        u1("div", G8, [
+          w(h) ? j("", !0) : (S(), H("span", X8, H1(e.placeholder), 1)),
           Je(u1("input", I2({
             type: e.type,
             required: e.required,
@@ -6651,12 +6652,12 @@ const _8 = { class: "fz-input w-full flex flex-col gap-8" }, W8 = ["id", "for"],
             onFocus: $[3] || ($[3] = (n1) => {
               o.value = !0, M.$emit("focus", n1);
             })
-          }), null, 16, X8), [
+          }), null, 16, K8), [
             [e3, r.value]
           ])
         ]),
         _(M.$slots, "right-icon", {}, () => [
-          u1("div", K8, [
+          u1("div", Q8, [
             e.secondRightIcon && !e.secondRightIconButton ? (S(), q(w(Y), {
               key: 0,
               name: e.secondRightIcon,
@@ -6716,7 +6717,7 @@ const _8 = { class: "fz-input w-full flex flex-col gap-8" }, W8 = ["id", "for"],
             })) : j("", !0)
           ])
         ])
-      ], 42, q8),
+      ], 42, Y8),
       e.error && M.$slots.errorMessage ? (S(), H("div", {
         key: 0,
         id: `${w(s)}-error`,
@@ -6735,14 +6736,14 @@ const _8 = { class: "fz-input w-full flex flex-col gap-8" }, W8 = ["id", "for"],
         }, [
           _(M.$slots, "errorMessage")
         ], 2)
-      ], 12, Q8)) : M.$slots.helpText ? (S(), H("span", {
+      ], 12, Z8)) : M.$slots.helpText ? (S(), H("span", {
         key: 1,
         id: `${w(s)}-help`,
         class: O([w(D)]),
         style: a4({ width: w(p) })
       }, [
         _(M.$slots, "helpText")
-      ], 14, Z8)) : j("", !0)
+      ], 14, J8)) : j("", !0)
     ]));
   }
 }), Z = (e, a) => {
@@ -6768,7 +6769,7 @@ const _8 = { class: "fz-input w-full flex flex-col gap-8" }, W8 = ["id", "for"],
   return n !== 0 && (t = Math.abs(n) >= e / 2 ? a + c - n : a - n), t;
 }, f1 = (e, a, t) => Math.max(e, Math.min(a, t));
 new DOMRect(0, 0, window.innerWidth, window.innerHeight);
-const el = {
+const al = {
   blue: {
     50: {
       value: "#eff1ff",
@@ -7602,8 +7603,8 @@ const el = {
     }
   }
 }, e4 = {
-  global: el
-}, al = [
+  global: al
+}, tl = [
   "blue",
   "purple",
   "orange",
@@ -7611,17 +7612,17 @@ const el = {
   "yellow",
   "grey",
   "core"
-], tl = {
-  safeColorNames: al
-}, nl = [
+], nl = {
+  safeColorNames: tl
+}, cl = [
   "error",
   "warning",
   "success",
   "info"
-], cl = {
-  semanticColorNames: nl
-}, rl = tl.safeColorNames, ll = cl.semanticColorNames, L1 = {};
-rl.forEach((e) => {
+], rl = {
+  semanticColorNames: cl
+}, ll = nl.safeColorNames, il = rl.semanticColorNames, L1 = {};
+ll.forEach((e) => {
   const a = e4.global[e];
   a && Object.keys(a).forEach((t) => {
     var c;
@@ -7630,7 +7631,7 @@ rl.forEach((e) => {
   });
 });
 const $4 = e4.global.semantic;
-$4 && ll.forEach((e) => {
+$4 && il.forEach((e) => {
   const a = $4[e];
   a && typeof a == "object" && Object.keys(a).forEach((t) => {
     var c;
@@ -7645,7 +7646,7 @@ Object.entries(e4.global.breakpoint).reduce(
   (e, [a, t]) => (e[a] = t.value, e),
   {}
 );
-const il = { class: "flex items-center gap-4" }, ol = { class: "flex flex-col justify-between items-center" }, fl = /* @__PURE__ */ o1({
+const ol = { class: "flex items-center gap-4" }, sl = { class: "flex flex-col justify-between items-center" }, ul = /* @__PURE__ */ o1({
   __name: "FzCurrencyInput",
   props: /* @__PURE__ */ u2({
     modelValue: {},
@@ -7932,7 +7933,7 @@ const il = { class: "flex items-center gap-4" }, ol = { class: "flex flex-col ju
     ), a({
       inputRef: r,
       containerRef: c
-    }), (u, m) => (S(), q(J8, I2({
+    }), (u, m) => (S(), q(el, I2({
       ref_key: "fzInputRef",
       ref: t
     }, l, {
@@ -7951,7 +7952,7 @@ const il = { class: "flex items-center gap-4" }, ol = { class: "flex flex-col ju
         _(u.$slots, "left-icon")
       ]),
       "right-icon": N1(() => [
-        u1("div", il, [
+        u1("div", ol, [
           l.valid ? (S(), q(w(Y), {
             key: 0,
             name: "check",
@@ -7959,7 +7960,7 @@ const il = { class: "flex items-center gap-4" }, ol = { class: "flex flex-col ju
             class: "text-semantic-success",
             "aria-hidden": "true"
           })) : j("", !0),
-          u1("div", ol, [
+          u1("div", sl, [
             P1(w(Y), {
               name: "angle-up",
               size: "xs",
@@ -8000,7 +8001,7 @@ const il = { class: "flex items-center gap-4" }, ol = { class: "flex flex-col ju
   }
 });
 export {
-  fl as FzCurrencyInput,
-  J8 as FzInput,
+  ul as FzCurrencyInput,
+  el as FzInput,
   P4 as sizeToEnvironmentMapping
 };