@fiscozen/card-list 1.1.2 → 1.2.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @fiscozen/card-list
 
+## 1.2.1
+
+### Patch Changes
+
+- Updated dependencies [5be1040]
+  - @fiscozen/container@0.5.0
+  - @fiscozen/button@3.1.1
+  - @fiscozen/dropdown@1.0.10
+
+## 1.2.0
+
+### Minor Changes
+
+- b717ba3: FzCardList / FzCardListItem: support an optional `icon` on the `badge` object.
+
+  When provided it is forwarded to `FzBadge.leftIcon`, rendering a Font Awesome
+  icon to the left of the badge text. Existing badge usages without `icon` are
+  unchanged. Works across the three internal rendering variants (no-action,
+  single-link action, multi-actions dropdown).
+
 ## 1.1.2
 
 ### Patch Changes

package/dist/card-list.js

@@ -1,10 +1,10 @@
-import { defineComponent as w, resolveDirective as b, createBlock as l, openBlock as e, unref as i, withCtx as s, withDirectives as I, createCommentVNode as f, createElementBlock as g, createTextVNode as y, toDisplayString as k, createVNode as o, Fragment as F, renderList as O, computed as z, useId as N, createElementVNode as p } from "vue";
+import { defineComponent as b, resolveDirective as w, createBlock as l, openBlock as e, unref as i, withCtx as s, withDirectives as I, createCommentVNode as f, createElementBlock as g, createTextVNode as y, toDisplayString as k, createVNode as o, Fragment as F, renderList as O, computed as z, useId as N, createElementVNode as E } from "vue";
 import { FzBadge as B } from "@fiscozen/badge";
 import { FzContainer as h } from "@fiscozen/container";
 import { FzDivider as T } from "@fiscozen/divider";
 import { FzIcon as D } from "@fiscozen/icons";
-import { FzIconDropdown as E } from "@fiscozen/dropdown";
-const V = ["id"], A = /* @__PURE__ */ w({
+import { FzIconDropdown as V } from "@fiscozen/dropdown";
+const M = ["id"], A = /* @__PURE__ */ b({
   __name: "FzCardTitle",
   props: {
     showIndicator: { type: Boolean },
@@ -13,7 +13,7 @@ const V = ["id"], A = /* @__PURE__ */ w({
   },
   setup(t) {
     return (m, r) => {
-      const d = b("color"), a = b("bold");
+      const d = w("color"), a = w("bold");
       return e(), l(i(h), {
         horizontal: "",
         gap: "xs",
@@ -34,7 +34,7 @@ const V = ["id"], A = /* @__PURE__ */ w({
             id: t.titleId
           }, [
             y(k(t.title), 1)
-          ], 8, V)), [
+          ], 8, M)), [
             [a]
           ])
         ]),
@@ -42,10 +42,10 @@ const V = ["id"], A = /* @__PURE__ */ w({
       });
     };
   }
-}), M = {
+}), K = {
   key: 0,
   class: "text-base whitespace-nowrap"
-}, x = /* @__PURE__ */ w({
+}, x = /* @__PURE__ */ b({
   __name: "FzCardHeader",
   props: {
     hasTitleOnly: { type: Boolean },
@@ -56,7 +56,7 @@ const V = ["id"], A = /* @__PURE__ */ w({
   },
   setup(t) {
     return (m, r) => {
-      const d = b("bold"), a = b("color");
+      const d = w("bold"), a = w("color");
       return t.hasTitleOnly ? (e(), l(i(h), {
         key: 0,
         horizontal: "",
@@ -85,7 +85,7 @@ const V = ["id"], A = /* @__PURE__ */ w({
             title: t.title,
             "title-id": t.titleId
           }, null, 8, ["show-indicator", "title", "title-id"]),
-          t.value ? I((e(), g("p", M, [
+          t.value ? I((e(), g("p", K, [
             y(k(t.value), 1)
           ])), [
             [d],
@@ -96,7 +96,7 @@ const V = ["id"], A = /* @__PURE__ */ w({
       }));
     };
   }
-}), $ = /* @__PURE__ */ w({
+}), $ = /* @__PURE__ */ b({
   __name: "FzCardFooter",
   props: {
     descriptions: {}
@@ -104,7 +104,7 @@ const V = ["id"], A = /* @__PURE__ */ w({
   setup(t) {
     return (m, r) => {
       var u;
-      const d = b("small"), a = b("color");
+      const d = w("small"), a = w("color");
       return (u = t.descriptions) != null && u.length ? (e(), l(i(h), {
         key: 0,
         gap: "none"
@@ -121,10 +121,10 @@ const V = ["id"], A = /* @__PURE__ */ w({
       })) : f("", !0);
     };
   }
-}), K = {
+}), H = {
   class: "inline-flex shrink-0 text-inherit",
   "aria-hidden": "true"
-}, H = /* @__PURE__ */ w({
+}, P = /* @__PURE__ */ b({
   __name: "FzCardActionLink",
   props: {
     action: {},
@@ -149,7 +149,7 @@ const V = ["id"], A = /* @__PURE__ */ w({
       }
     }
     return (v, C) => {
-      const L = b("color");
+      const L = w("color");
       return e(), g(F, null, [
         o(i(h), {
           gap: "xs",
@@ -168,6 +168,7 @@ const V = ["id"], A = /* @__PURE__ */ w({
               default: s(() => [
                 t.badge ? (e(), l(i(B), {
                   key: 0,
+                  "left-icon": t.badge.icon,
                   tone: t.badge.tone,
                   variant: "text"
                 }, {
@@ -175,7 +176,7 @@ const V = ["id"], A = /* @__PURE__ */ w({
                     y(k(t.badge.text), 1)
                   ]),
                   _: 1
-                }, 8, ["tone"])) : a.value ? (e(), l(x, {
+                }, 8, ["left-icon", "tone"])) : a.value ? (e(), l(x, {
                   key: 1,
                   "has-title-only": "",
                   "show-indicator": t.showIndicator,
@@ -191,7 +192,7 @@ const V = ["id"], A = /* @__PURE__ */ w({
                   class: "shrink-0 ml-auto"
                 }, {
                   default: s(() => [
-                    p("span", K, [
+                    E("span", H, [
                       I(o(i(D), {
                         name: "chevron-right",
                         size: "md",
@@ -221,7 +222,7 @@ const V = ["id"], A = /* @__PURE__ */ w({
       ], 64);
     };
   }
-}), P = /* @__PURE__ */ w({
+}), R = /* @__PURE__ */ b({
   __name: "FzCardMultiActions",
   props: {
     actions: {},
@@ -252,6 +253,7 @@ const V = ["id"], A = /* @__PURE__ */ w({
             default: s(() => [
               t.badge ? (e(), l(i(B), {
                 key: 0,
+                "left-icon": t.badge.icon,
                 tone: t.badge.tone,
                 variant: "text"
               }, {
@@ -259,7 +261,7 @@ const V = ["id"], A = /* @__PURE__ */ w({
                   y(k(t.badge.text), 1)
                 ]),
                 _: 1
-              }, 8, ["tone"])) : a.value ? (e(), l(x, {
+              }, 8, ["left-icon", "tone"])) : a.value ? (e(), l(x, {
                 key: 1,
                 "has-title-only": "",
                 "show-indicator": t.showIndicator,
@@ -273,7 +275,7 @@ const V = ["id"], A = /* @__PURE__ */ w({
                 class: "shrink-0 ml-auto"
               }, {
                 default: s(() => [
-                  o(i(E), {
+                  o(i(V), {
                     actions: t.actions,
                     iconName: "ellipsis-vertical",
                     variant: "invisible",
@@ -299,7 +301,7 @@ const V = ["id"], A = /* @__PURE__ */ w({
       o(i(T), { margin: "none" })
     ], 64));
   }
-}), R = /* @__PURE__ */ w({
+}), S = /* @__PURE__ */ b({
   __name: "FzCardNoAction",
   props: {
     badge: {},
@@ -324,6 +326,7 @@ const V = ["id"], A = /* @__PURE__ */ w({
           }, {
             default: s(() => [
               o(i(B), {
+                "left-icon": t.badge.icon,
                 tone: t.badge.tone,
                 variant: "text"
               }, {
@@ -331,7 +334,7 @@ const V = ["id"], A = /* @__PURE__ */ w({
                   y(k(t.badge.text), 1)
                 ]),
                 _: 1
-              }, 8, ["tone"])
+              }, 8, ["left-icon", "tone"])
             ]),
             _: 1
           })) : f("", !0),
@@ -347,7 +350,7 @@ const V = ["id"], A = /* @__PURE__ */ w({
       o(i(T), { margin: "none" })
     ], 64));
   }
-}), S = /* @__PURE__ */ w({
+}), j = /* @__PURE__ */ b({
   __name: "FzCardListItem",
   props: {
     badge: {},
@@ -365,14 +368,14 @@ const V = ["id"], A = /* @__PURE__ */ w({
         return ((n = r.actions) == null ? void 0 : n.filter((c) => c.type !== "section")) ?? [];
       }
     ), u = z(() => a.value.length ? a.value.length === 1 && a.value[0].type === "link" ? "link" : "actions" : "none");
-    return (n, c) => u.value === "none" ? (e(), l(R, {
+    return (n, c) => u.value === "none" ? (e(), l(S, {
       key: 0,
       badge: t.badge,
       title: t.title,
       "show-indicator": t.showIndicator,
       value: t.value,
       descriptions: t.descriptions
-    }, null, 8, ["badge", "title", "show-indicator", "value", "descriptions"])) : u.value === "link" ? (e(), l(H, {
+    }, null, 8, ["badge", "title", "show-indicator", "value", "descriptions"])) : u.value === "link" ? (e(), l(P, {
       key: 1,
       badge: t.badge,
       title: t.title,
@@ -381,7 +384,7 @@ const V = ["id"], A = /* @__PURE__ */ w({
       descriptions: t.descriptions,
       action: a.value[0],
       "onFzaction:click": c[0] || (c[0] = (v) => d("fzaction:click", 0, v))
-    }, null, 8, ["badge", "title", "show-indicator", "value", "descriptions", "action"])) : (e(), l(P, {
+    }, null, 8, ["badge", "title", "show-indicator", "value", "descriptions", "action"])) : (e(), l(R, {
       key: 2,
       badge: t.badge,
       title: t.title,
@@ -392,7 +395,7 @@ const V = ["id"], A = /* @__PURE__ */ w({
       "onFzaction:click": c[1] || (c[1] = (v, C) => d("fzaction:click", v, C))
     }, null, 8, ["badge", "title", "show-indicator", "value", "descriptions", "actions"]));
   }
-}), W = /* @__PURE__ */ w({
+}), X = /* @__PURE__ */ b({
   __name: "FzCardList",
   props: {
     items: {}
@@ -405,7 +408,7 @@ const V = ["id"], A = /* @__PURE__ */ w({
     }
     return (a, u) => (e(), l(i(h), { gap: "xs" }, {
       default: s(() => [
-        (e(!0), g(F, null, O(t.items, (n, c) => (e(), l(S, {
+        (e(!0), g(F, null, O(t.items, (n, c) => (e(), l(j, {
           key: c,
           badge: n.badge,
           title: n.title,
@@ -421,6 +424,6 @@ const V = ["id"], A = /* @__PURE__ */ w({
   }
 });
 export {
-  W as FzCardList,
-  S as FzCardListItem
+  X as FzCardList,
+  j as FzCardListItem
 };

package/dist/card-list.umd.cjs

@@ -1 +1 @@
-(function(l,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("@fiscozen/badge"),require("@fiscozen/container"),require("@fiscozen/divider"),require("@fiscozen/icons"),require("@fiscozen/dropdown")):typeof define=="function"&&define.amd?define(["exports","vue","@fiscozen/badge","@fiscozen/container","@fiscozen/divider","@fiscozen/icons","@fiscozen/dropdown"],t):(l=typeof globalThis<"u"?globalThis:l||self,t(l.FzCardList={},l.Vue,l.badge,l.container,l.divider,l.icons,l.dropdown))})(this,function(l,t,k,r,w,z,C){"use strict";const x=["id"],B=t.defineComponent({__name:"FzCardTitle",props:{showIndicator:{type:Boolean},title:{},titleId:{}},setup(e){return(f,c)=>{const a=t.resolveDirective("color"),n=t.resolveDirective("bold");return t.openBlock(),t.createBlock(t.unref(r.FzContainer),{horizontal:"",gap:"xs",alignItems:"center",class:"min-w-0"},{default:t.withCtx(()=>[e.showIndicator?t.withDirectives((t.openBlock(),t.createBlock(t.unref(z.FzIcon),{key:0,name:"circle-small",size:"xs",variant:"fas"},null,512)),[[a,void 0,"blue"]]):t.createCommentVNode("",!0),t.withDirectives((t.openBlock(),t.createElementBlock("p",{class:"min-w-0 flex-1 truncate",id:e.titleId},[t.createTextVNode(t.toDisplayString(e.title),1)],8,x)),[[n]])]),_:1})}}}),b={key:0,class:"text-base whitespace-nowrap"},h=t.defineComponent({__name:"FzCardHeader",props:{hasTitleOnly:{type:Boolean},value:{},showIndicator:{type:Boolean},title:{},titleId:{}},setup(e){return(f,c)=>{const a=t.resolveDirective("bold"),n=t.resolveDirective("color");return e.hasTitleOnly?(t.openBlock(),t.createBlock(t.unref(r.FzContainer),{key:0,horizontal:"",gap:"xs",alignItems:"center",class:"min-w-0 flex-1"},{default:t.withCtx(()=>[t.createVNode(B,{"show-indicator":e.showIndicator,title:e.title,"title-id":e.titleId},null,8,["show-indicator","title","title-id"])]),_:1})):(t.openBlock(),t.createBlock(t.unref(r.FzContainer),{key:1,horizontal:"",gap:"sm",alignItems:"center",layout:"space-between"},{default:t.withCtx(()=>[t.createVNode(B,{"show-indicator":e.showIndicator,title:e.title,"title-id":e.titleId},null,8,["show-indicator","title","title-id"]),e.value?t.withDirectives((t.openBlock(),t.createElementBlock("p",b,[t.createTextVNode(t.toDisplayString(e.value),1)])),[[a],[n,void 0,"blue"]]):t.createCommentVNode("",!0)]),_:1}))}}}),g=t.defineComponent({__name:"FzCardFooter",props:{descriptions:{}},setup(e){return(f,c)=>{var d;const a=t.resolveDirective("small"),n=t.resolveDirective("color");return(d=e.descriptions)!=null&&d.length?(t.openBlock(),t.createBlock(t.unref(r.FzContainer),{key:0,gap:"none"},{default:t.withCtx(()=>[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e.descriptions,(i,o)=>t.withDirectives((t.openBlock(),t.createElementBlock("p",{key:o},[t.createTextVNode(t.toDisplayString(i),1)])),[[a],[n,void 0,"grey"]])),128))]),_:1})):t.createCommentVNode("",!0)}}}),p={class:"inline-flex shrink-0 text-inherit","aria-hidden":"true"},I=t.defineComponent({__name:"FzCardActionLink",props:{action:{},hasTitleOnly:{type:Boolean},value:{},showIndicator:{type:Boolean},title:{},titleId:{},descriptions:{},badge:{}},emits:["fzaction:click"],setup(e,{emit:f}){const c=e,a=f,n=t.computed(()=>!c.badge&&!c.value),d=t.computed(()=>!c.action),i=t.useId();function o(s){if(!d.value){if(s instanceof KeyboardEvent){if(s.key!=="Enter"&&s.key!==" ")return;s.preventDefault()}s.stopPropagation(),a("fzaction:click",c.action)}}return(s,m)=>{const u=t.resolveDirective("color");return t.openBlock(),t.createElementBlock(t.Fragment,null,[t.createVNode(t.unref(r.FzContainer),{gap:"xs",role:"button",tabindex:"0","aria-labelledby":t.unref(i),class:"p-8 hover:bg-semantic-info-50 hover:rounded cursor-pointer focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-200 focus-visible:rounded",onClick:o,onKeydown:o},{default:t.withCtx(()=>[t.createVNode(t.unref(r.FzContainer),{horizontal:"",alignItems:"center"},{default:t.withCtx(()=>[e.badge?(t.openBlock(),t.createBlock(t.unref(k.FzBadge),{key:0,tone:e.badge.tone,variant:"text"},{default:t.withCtx(()=>[t.createTextVNode(t.toDisplayString(e.badge.text),1)]),_:1},8,["tone"])):n.value?(t.openBlock(),t.createBlock(h,{key:1,"has-title-only":"","show-indicator":e.showIndicator,title:e.title,"title-id":t.unref(i)},null,8,["show-indicator","title","title-id"])):t.createCommentVNode("",!0),d.value?t.createCommentVNode("",!0):(t.openBlock(),t.createBlock(t.unref(r.FzContainer),{key:2,horizontal:"",gap:"xs",alignItems:"center",layout:"expand-last",class:"shrink-0 ml-auto"},{default:t.withCtx(()=>[t.createElementVNode("span",p,[t.withDirectives(t.createVNode(t.unref(z.FzIcon),{name:"chevron-right",size:"md",variant:"far"},null,512),[[u,void 0,"grey"]])])]),_:1}))]),_:1}),n.value?t.createCommentVNode("",!0):(t.openBlock(),t.createBlock(h,{key:0,"show-indicator":e.showIndicator,title:e.title,value:e.value,"title-id":t.unref(i)},null,8,["show-indicator","title","value","title-id"])),t.createVNode(g,{descriptions:e.descriptions},null,8,["descriptions"])]),_:1},8,["aria-labelledby"]),t.createVNode(t.unref(w.FzDivider),{margin:"none"})],64)}}}),F=t.defineComponent({__name:"FzCardMultiActions",props:{actions:{},hasTitleOnly:{type:Boolean},value:{},showIndicator:{type:Boolean},title:{},titleId:{},descriptions:{},badge:{}},emits:["fzaction:click"],setup(e,{emit:f}){const c=e,a=f,n=t.computed(()=>!c.badge&&!c.value);function d(i,o){a("fzaction:click",i,o)}return(i,o)=>(t.openBlock(),t.createElementBlock(t.Fragment,null,[t.createVNode(t.unref(r.FzContainer),{gap:"xs",class:"p-8 hover:bg-semantic-info-50 hover:rounded"},{default:t.withCtx(()=>[t.createVNode(t.unref(r.FzContainer),{horizontal:"",alignItems:"center"},{default:t.withCtx(()=>[e.badge?(t.openBlock(),t.createBlock(t.unref(k.FzBadge),{key:0,tone:e.badge.tone,variant:"text"},{default:t.withCtx(()=>[t.createTextVNode(t.toDisplayString(e.badge.text),1)]),_:1},8,["tone"])):n.value?(t.openBlock(),t.createBlock(h,{key:1,"has-title-only":"","show-indicator":e.showIndicator,title:e.title},null,8,["show-indicator","title"])):t.createCommentVNode("",!0),t.createVNode(t.unref(r.FzContainer),{horizontal:"",gap:"xs",alignItems:"center",layout:"expand-last",class:"shrink-0 ml-auto"},{default:t.withCtx(()=>[t.createVNode(t.unref(C.FzIconDropdown),{actions:e.actions,iconName:"ellipsis-vertical",variant:"invisible","aria-label":"Mostra azioni","onFzaction:click":d},null,8,["actions"])]),_:1})]),_:1}),n.value?t.createCommentVNode("",!0):(t.openBlock(),t.createBlock(h,{key:0,"show-indicator":e.showIndicator,title:e.title,value:e.value},null,8,["show-indicator","title","value"])),t.createVNode(g,{descriptions:e.descriptions},null,8,["descriptions"])]),_:1}),t.createVNode(t.unref(w.FzDivider),{margin:"none"})],64))}}),N=t.defineComponent({__name:"FzCardNoAction",props:{badge:{},hasTitleOnly:{type:Boolean},value:{},showIndicator:{type:Boolean},title:{},titleId:{},descriptions:{}},setup(e){return(f,c)=>(t.openBlock(),t.createElementBlock(t.Fragment,null,[t.createVNode(t.unref(r.FzContainer),{gap:"xs",class:"p-8"},{default:t.withCtx(()=>[e.badge?(t.openBlock(),t.createBlock(t.unref(r.FzContainer),{key:0,horizontal:"",alignItems:"center"},{default:t.withCtx(()=>[t.createVNode(t.unref(k.FzBadge),{tone:e.badge.tone,variant:"text"},{default:t.withCtx(()=>[t.createTextVNode(t.toDisplayString(e.badge.text),1)]),_:1},8,["tone"])]),_:1})):t.createCommentVNode("",!0),t.createVNode(h,{"show-indicator":e.showIndicator,title:e.title,value:e.value},null,8,["show-indicator","title","value"]),t.createVNode(g,{descriptions:e.descriptions},null,8,["descriptions"])]),_:1}),t.createVNode(t.unref(w.FzDivider),{margin:"none"})],64))}}),y=t.defineComponent({__name:"FzCardListItem",props:{badge:{},title:{},value:{},descriptions:{},showIndicator:{type:Boolean},actions:{}},emits:["fzaction:click"],setup(e,{emit:f}){const c=e,a=f,n=t.computed(()=>{var i;return((i=c.actions)==null?void 0:i.filter(o=>o.type!=="section"))??[]}),d=t.computed(()=>n.value.length?n.value.length===1&&n.value[0].type==="link"?"link":"actions":"none");return(i,o)=>d.value==="none"?(t.openBlock(),t.createBlock(N,{key:0,badge:e.badge,title:e.title,"show-indicator":e.showIndicator,value:e.value,descriptions:e.descriptions},null,8,["badge","title","show-indicator","value","descriptions"])):d.value==="link"?(t.openBlock(),t.createBlock(I,{key:1,badge:e.badge,title:e.title,"show-indicator":e.showIndicator,value:e.value,descriptions:e.descriptions,action:n.value[0],"onFzaction:click":o[0]||(o[0]=s=>a("fzaction:click",0,s))},null,8,["badge","title","show-indicator","value","descriptions","action"])):(t.openBlock(),t.createBlock(F,{key:2,badge:e.badge,title:e.title,"show-indicator":e.showIndicator,value:e.value,descriptions:e.descriptions,actions:e.actions,"onFzaction:click":o[1]||(o[1]=(s,m)=>a("fzaction:click",s,m))},null,8,["badge","title","show-indicator","value","descriptions","actions"]))}}),V=t.defineComponent({__name:"FzCardList",props:{items:{}},emits:["fzaction:click"],setup(e,{emit:f}){const c=f;function a(n,d,i){c("fzaction:click",n,d,i)}return(n,d)=>(t.openBlock(),t.createBlock(t.unref(r.FzContainer),{gap:"xs"},{default:t.withCtx(()=>[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e.items,(i,o)=>(t.openBlock(),t.createBlock(y,{key:o,badge:i.badge,title:i.title,value:i.value,descriptions:i.descriptions,showIndicator:i.showIndicator,actions:i.actions,"onFzaction:click":(s,m)=>a(o,s,m)},null,8,["badge","title","value","descriptions","showIndicator","actions","onFzaction:click"]))),128))]),_:1}))}});l.FzCardList=V,l.FzCardListItem=y,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})});
+(function(l,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("@fiscozen/badge"),require("@fiscozen/container"),require("@fiscozen/divider"),require("@fiscozen/icons"),require("@fiscozen/dropdown")):typeof define=="function"&&define.amd?define(["exports","vue","@fiscozen/badge","@fiscozen/container","@fiscozen/divider","@fiscozen/icons","@fiscozen/dropdown"],t):(l=typeof globalThis<"u"?globalThis:l||self,t(l.FzCardList={},l.Vue,l.badge,l.container,l.divider,l.icons,l.dropdown))})(this,function(l,t,k,r,w,z,C){"use strict";const x=["id"],B=t.defineComponent({__name:"FzCardTitle",props:{showIndicator:{type:Boolean},title:{},titleId:{}},setup(e){return(f,c)=>{const a=t.resolveDirective("color"),n=t.resolveDirective("bold");return t.openBlock(),t.createBlock(t.unref(r.FzContainer),{horizontal:"",gap:"xs",alignItems:"center",class:"min-w-0"},{default:t.withCtx(()=>[e.showIndicator?t.withDirectives((t.openBlock(),t.createBlock(t.unref(z.FzIcon),{key:0,name:"circle-small",size:"xs",variant:"fas"},null,512)),[[a,void 0,"blue"]]):t.createCommentVNode("",!0),t.withDirectives((t.openBlock(),t.createElementBlock("p",{class:"min-w-0 flex-1 truncate",id:e.titleId},[t.createTextVNode(t.toDisplayString(e.title),1)],8,x)),[[n]])]),_:1})}}}),b={key:0,class:"text-base whitespace-nowrap"},h=t.defineComponent({__name:"FzCardHeader",props:{hasTitleOnly:{type:Boolean},value:{},showIndicator:{type:Boolean},title:{},titleId:{}},setup(e){return(f,c)=>{const a=t.resolveDirective("bold"),n=t.resolveDirective("color");return e.hasTitleOnly?(t.openBlock(),t.createBlock(t.unref(r.FzContainer),{key:0,horizontal:"",gap:"xs",alignItems:"center",class:"min-w-0 flex-1"},{default:t.withCtx(()=>[t.createVNode(B,{"show-indicator":e.showIndicator,title:e.title,"title-id":e.titleId},null,8,["show-indicator","title","title-id"])]),_:1})):(t.openBlock(),t.createBlock(t.unref(r.FzContainer),{key:1,horizontal:"",gap:"sm",alignItems:"center",layout:"space-between"},{default:t.withCtx(()=>[t.createVNode(B,{"show-indicator":e.showIndicator,title:e.title,"title-id":e.titleId},null,8,["show-indicator","title","title-id"]),e.value?t.withDirectives((t.openBlock(),t.createElementBlock("p",b,[t.createTextVNode(t.toDisplayString(e.value),1)])),[[a],[n,void 0,"blue"]]):t.createCommentVNode("",!0)]),_:1}))}}}),g=t.defineComponent({__name:"FzCardFooter",props:{descriptions:{}},setup(e){return(f,c)=>{var d;const a=t.resolveDirective("small"),n=t.resolveDirective("color");return(d=e.descriptions)!=null&&d.length?(t.openBlock(),t.createBlock(t.unref(r.FzContainer),{key:0,gap:"none"},{default:t.withCtx(()=>[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e.descriptions,(i,o)=>t.withDirectives((t.openBlock(),t.createElementBlock("p",{key:o},[t.createTextVNode(t.toDisplayString(i),1)])),[[a],[n,void 0,"grey"]])),128))]),_:1})):t.createCommentVNode("",!0)}}}),I={class:"inline-flex shrink-0 text-inherit","aria-hidden":"true"},F=t.defineComponent({__name:"FzCardActionLink",props:{action:{},hasTitleOnly:{type:Boolean},value:{},showIndicator:{type:Boolean},title:{},titleId:{},descriptions:{},badge:{}},emits:["fzaction:click"],setup(e,{emit:f}){const c=e,a=f,n=t.computed(()=>!c.badge&&!c.value),d=t.computed(()=>!c.action),i=t.useId();function o(s){if(!d.value){if(s instanceof KeyboardEvent){if(s.key!=="Enter"&&s.key!==" ")return;s.preventDefault()}s.stopPropagation(),a("fzaction:click",c.action)}}return(s,m)=>{const u=t.resolveDirective("color");return t.openBlock(),t.createElementBlock(t.Fragment,null,[t.createVNode(t.unref(r.FzContainer),{gap:"xs",role:"button",tabindex:"0","aria-labelledby":t.unref(i),class:"p-8 hover:bg-semantic-info-50 hover:rounded cursor-pointer focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-200 focus-visible:rounded",onClick:o,onKeydown:o},{default:t.withCtx(()=>[t.createVNode(t.unref(r.FzContainer),{horizontal:"",alignItems:"center"},{default:t.withCtx(()=>[e.badge?(t.openBlock(),t.createBlock(t.unref(k.FzBadge),{key:0,"left-icon":e.badge.icon,tone:e.badge.tone,variant:"text"},{default:t.withCtx(()=>[t.createTextVNode(t.toDisplayString(e.badge.text),1)]),_:1},8,["left-icon","tone"])):n.value?(t.openBlock(),t.createBlock(h,{key:1,"has-title-only":"","show-indicator":e.showIndicator,title:e.title,"title-id":t.unref(i)},null,8,["show-indicator","title","title-id"])):t.createCommentVNode("",!0),d.value?t.createCommentVNode("",!0):(t.openBlock(),t.createBlock(t.unref(r.FzContainer),{key:2,horizontal:"",gap:"xs",alignItems:"center",layout:"expand-last",class:"shrink-0 ml-auto"},{default:t.withCtx(()=>[t.createElementVNode("span",I,[t.withDirectives(t.createVNode(t.unref(z.FzIcon),{name:"chevron-right",size:"md",variant:"far"},null,512),[[u,void 0,"grey"]])])]),_:1}))]),_:1}),n.value?t.createCommentVNode("",!0):(t.openBlock(),t.createBlock(h,{key:0,"show-indicator":e.showIndicator,title:e.title,value:e.value,"title-id":t.unref(i)},null,8,["show-indicator","title","value","title-id"])),t.createVNode(g,{descriptions:e.descriptions},null,8,["descriptions"])]),_:1},8,["aria-labelledby"]),t.createVNode(t.unref(w.FzDivider),{margin:"none"})],64)}}}),p=t.defineComponent({__name:"FzCardMultiActions",props:{actions:{},hasTitleOnly:{type:Boolean},value:{},showIndicator:{type:Boolean},title:{},titleId:{},descriptions:{},badge:{}},emits:["fzaction:click"],setup(e,{emit:f}){const c=e,a=f,n=t.computed(()=>!c.badge&&!c.value);function d(i,o){a("fzaction:click",i,o)}return(i,o)=>(t.openBlock(),t.createElementBlock(t.Fragment,null,[t.createVNode(t.unref(r.FzContainer),{gap:"xs",class:"p-8 hover:bg-semantic-info-50 hover:rounded"},{default:t.withCtx(()=>[t.createVNode(t.unref(r.FzContainer),{horizontal:"",alignItems:"center"},{default:t.withCtx(()=>[e.badge?(t.openBlock(),t.createBlock(t.unref(k.FzBadge),{key:0,"left-icon":e.badge.icon,tone:e.badge.tone,variant:"text"},{default:t.withCtx(()=>[t.createTextVNode(t.toDisplayString(e.badge.text),1)]),_:1},8,["left-icon","tone"])):n.value?(t.openBlock(),t.createBlock(h,{key:1,"has-title-only":"","show-indicator":e.showIndicator,title:e.title},null,8,["show-indicator","title"])):t.createCommentVNode("",!0),t.createVNode(t.unref(r.FzContainer),{horizontal:"",gap:"xs",alignItems:"center",layout:"expand-last",class:"shrink-0 ml-auto"},{default:t.withCtx(()=>[t.createVNode(t.unref(C.FzIconDropdown),{actions:e.actions,iconName:"ellipsis-vertical",variant:"invisible","aria-label":"Mostra azioni","onFzaction:click":d},null,8,["actions"])]),_:1})]),_:1}),n.value?t.createCommentVNode("",!0):(t.openBlock(),t.createBlock(h,{key:0,"show-indicator":e.showIndicator,title:e.title,value:e.value},null,8,["show-indicator","title","value"])),t.createVNode(g,{descriptions:e.descriptions},null,8,["descriptions"])]),_:1}),t.createVNode(t.unref(w.FzDivider),{margin:"none"})],64))}}),N=t.defineComponent({__name:"FzCardNoAction",props:{badge:{},hasTitleOnly:{type:Boolean},value:{},showIndicator:{type:Boolean},title:{},titleId:{},descriptions:{}},setup(e){return(f,c)=>(t.openBlock(),t.createElementBlock(t.Fragment,null,[t.createVNode(t.unref(r.FzContainer),{gap:"xs",class:"p-8"},{default:t.withCtx(()=>[e.badge?(t.openBlock(),t.createBlock(t.unref(r.FzContainer),{key:0,horizontal:"",alignItems:"center"},{default:t.withCtx(()=>[t.createVNode(t.unref(k.FzBadge),{"left-icon":e.badge.icon,tone:e.badge.tone,variant:"text"},{default:t.withCtx(()=>[t.createTextVNode(t.toDisplayString(e.badge.text),1)]),_:1},8,["left-icon","tone"])]),_:1})):t.createCommentVNode("",!0),t.createVNode(h,{"show-indicator":e.showIndicator,title:e.title,value:e.value},null,8,["show-indicator","title","value"]),t.createVNode(g,{descriptions:e.descriptions},null,8,["descriptions"])]),_:1}),t.createVNode(t.unref(w.FzDivider),{margin:"none"})],64))}}),y=t.defineComponent({__name:"FzCardListItem",props:{badge:{},title:{},value:{},descriptions:{},showIndicator:{type:Boolean},actions:{}},emits:["fzaction:click"],setup(e,{emit:f}){const c=e,a=f,n=t.computed(()=>{var i;return((i=c.actions)==null?void 0:i.filter(o=>o.type!=="section"))??[]}),d=t.computed(()=>n.value.length?n.value.length===1&&n.value[0].type==="link"?"link":"actions":"none");return(i,o)=>d.value==="none"?(t.openBlock(),t.createBlock(N,{key:0,badge:e.badge,title:e.title,"show-indicator":e.showIndicator,value:e.value,descriptions:e.descriptions},null,8,["badge","title","show-indicator","value","descriptions"])):d.value==="link"?(t.openBlock(),t.createBlock(F,{key:1,badge:e.badge,title:e.title,"show-indicator":e.showIndicator,value:e.value,descriptions:e.descriptions,action:n.value[0],"onFzaction:click":o[0]||(o[0]=s=>a("fzaction:click",0,s))},null,8,["badge","title","show-indicator","value","descriptions","action"])):(t.openBlock(),t.createBlock(p,{key:2,badge:e.badge,title:e.title,"show-indicator":e.showIndicator,value:e.value,descriptions:e.descriptions,actions:e.actions,"onFzaction:click":o[1]||(o[1]=(s,m)=>a("fzaction:click",s,m))},null,8,["badge","title","show-indicator","value","descriptions","actions"]))}}),V=t.defineComponent({__name:"FzCardList",props:{items:{}},emits:["fzaction:click"],setup(e,{emit:f}){const c=f;function a(n,d,i){c("fzaction:click",n,d,i)}return(n,d)=>(t.openBlock(),t.createBlock(t.unref(r.FzContainer),{gap:"xs"},{default:t.withCtx(()=>[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e.items,(i,o)=>(t.openBlock(),t.createBlock(y,{key:o,badge:i.badge,title:i.title,value:i.value,descriptions:i.descriptions,showIndicator:i.showIndicator,actions:i.actions,"onFzaction:click":(s,m)=>a(o,s,m)},null,8,["badge","title","value","descriptions","showIndicator","actions","onFzaction:click"]))),128))]),_:1}))}});l.FzCardList=V,l.FzCardListItem=y,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})});

package/dist/src/components/types.d.ts

@@ -5,6 +5,11 @@ import { FzCardListItemAction } from '../types';
 export type FzCardBadge = {
     text: string;
     tone: FzBadgeTone;
+    /**
+     * Optional Font Awesome icon name rendered to the left of the badge text.
+     * Forwarded to `FzBadge.leftIcon`.
+     */
+    icon?: string;
 };
 export interface FzCardTitleProps {
     showIndicator?: boolean;

package/dist/src/types.d.ts

@@ -25,6 +25,11 @@ export interface FzCardListItemProps {
          * Tone of the badge.
          */
         tone: FzBadgeTone;
+        /**
+         * Optional Font Awesome icon name rendered to the left of the badge text.
+         * Forwarded to `FzBadge.leftIcon`.
+         */
+        icon?: string;
     };
     /**
      * Main title of the item, displayed in bold.

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@fiscozen/card-list",
-  "version": "1.1.2",
+  "version": "1.2.1",
   "description": "Design System CardList component",
   "main": "src/index.ts",
   "type": "module",
   "keywords": [],
   "author": "Francesca Vago",
   "dependencies": {
+    "@fiscozen/button": "3.1.1",
+    "@fiscozen/dropdown": "1.0.10",
+    "@fiscozen/container": "0.5.0",
     "@fiscozen/action": "3.0.1",
     "@fiscozen/badge": "3.0.1",
-    "@fiscozen/button": "3.1.0",
-    "@fiscozen/divider": "1.0.1",
-    "@fiscozen/container": "0.4.2",
-    "@fiscozen/dropdown": "1.0.9"
+    "@fiscozen/divider": "1.0.1"
   },
   "peerDependencies": {
     "tailwindcss": "^3.4.1",

package/src/__tests__/FzCardListItem.spec.ts

@@ -326,6 +326,57 @@ describe("FzCardListItem", () => {
         expect(badge.props("tone")).toBe("success");
         expect(badge.props("variant")).toBe("text");
       });
+
+      it("should forward badge.icon to FzBadge.leftIcon when provided", async () => {
+        const wrapper = mount(FzCardListItem, {
+          props: {
+            title: "Item",
+            badge: { text: "In revisione", tone: "warning", icon: "clock" },
+          },
+        });
+        await wrapper.vm.$nextTick();
+        const badge = wrapper.findComponent({ name: "FzBadge" });
+        expect(badge.exists()).toBe(true);
+        expect(badge.props("leftIcon")).toBe("clock");
+      });
+
+      it("should omit leftIcon when badge.icon is not provided", async () => {
+        const wrapper = mount(FzCardListItem, {
+          props: {
+            title: "Item",
+            badge: { text: "Tag", tone: "success" },
+          },
+        });
+        await wrapper.vm.$nextTick();
+        const badge = wrapper.findComponent({ name: "FzBadge" });
+        expect(badge.props("leftIcon")).toBeUndefined();
+      });
+
+      it("should forward badge.icon through the link-action variant", async () => {
+        const wrapper = mount(FzCardListItem, {
+          props: {
+            title: "Item",
+            actions: [linkAction],
+            badge: { text: "In revisione", tone: "warning", icon: "clock" },
+          },
+        });
+        await wrapper.vm.$nextTick();
+        const badge = wrapper.findComponent({ name: "FzBadge" });
+        expect(badge.props("leftIcon")).toBe("clock");
+      });
+
+      it("should forward badge.icon through the multi-actions variant", async () => {
+        const wrapper = mount(FzCardListItem, {
+          props: {
+            title: "Item",
+            actions: [linkAction, linkAction],
+            badge: { text: "In revisione", tone: "warning", icon: "clock" },
+          },
+        });
+        await wrapper.vm.$nextTick();
+        const badge = wrapper.findComponent({ name: "FzBadge" });
+        expect(badge.props("leftIcon")).toBe("clock");
+      });
     });
   });
 

package/src/components/FzCardActionLink.vue

@@ -46,7 +46,7 @@ function handleRowInteraction(e: MouseEvent | KeyboardEvent) {
     -->
     <FzContainer horizontal alignItems="center">
       <!-- Badge -->
-      <FzBadge v-if="badge" :tone="badge.tone" variant="text">
+      <FzBadge v-if="badge" :left-icon="badge.icon" :tone="badge.tone" variant="text">
         {{ badge.text }}
       </FzBadge>
       <!-- Title only (inline with action) -->

package/src/components/FzCardMultiActions.vue

@@ -30,7 +30,7 @@ function emitActionClick(actionIndex: number, action: FzActionProps) {
     -->
     <FzContainer horizontal alignItems="center">
       <!-- Badge -->
-      <FzBadge v-if="badge" :tone="badge.tone" variant="text">
+      <FzBadge v-if="badge" :left-icon="badge.icon" :tone="badge.tone" variant="text">
         {{ badge.text }}
       </FzBadge>
       <!-- Title only (inline with actions) -->

package/src/components/FzCardNoAction.vue

@@ -13,7 +13,7 @@ const props = defineProps<FzCardNoActionProps>();
   <FzContainer gap="xs" class="p-8">
     <FzContainer v-if="badge" horizontal alignItems="center">
       <!-- Badge -->
-      <FzBadge :tone="badge.tone" variant="text">
+      <FzBadge :left-icon="badge.icon" :tone="badge.tone" variant="text">
         {{ badge.text }}
       </FzBadge>
     </FzContainer>

package/src/components/types.ts

@@ -5,6 +5,11 @@ import type { FzCardListItemAction } from "../types";
 export type FzCardBadge = {
   text: string;
   tone: FzBadgeTone;
+  /**
+   * Optional Font Awesome icon name rendered to the left of the badge text.
+   * Forwarded to `FzBadge.leftIcon`.
+   */
+  icon?: string;
 };
 
 export interface FzCardTitleProps {

package/src/types.ts

@@ -27,6 +27,11 @@ export interface FzCardListItemProps {
      * Tone of the badge.
      */
     tone: FzBadgeTone;
+    /**
+     * Optional Font Awesome icon name rendered to the left of the badge text.
+     * Forwarded to `FzBadge.leftIcon`.
+     */
+    icon?: string;
   };
   /**
    * Main title of the item, displayed in bold.