@gspa/ui 0.1.1 → 0.1.4

package/dist/components/DataTableHeader.js

@@ -0,0 +1,116 @@
+import { computed as r, createElementBlock as o, createCommentVNode as a, openBlock as s, normalizeClass as i, renderSlot as c, createElementVNode as m, createBlock as u, withCtx as f, createTextVNode as p, toDisplayString as g } from "vue";
+import v from "./Typography.js";
+import { cva as l } from "class-variance-authority";
+import { cn as n } from "../utils/cn.js";
+const z = { class: "flex items-start justify-between" }, C = {
+  key: 0,
+  class: "flex items-center gap-2"
+}, D = {
+  __name: "DataTableHeader",
+  props: {
+    title: {
+      type: String,
+      default: null
+    },
+    description: {
+      type: String,
+      default: null
+    },
+    variant: {
+      type: String,
+      default: "default",
+      validator: (t) => ["default", "minimal", "bordered"].includes(t)
+    },
+    padding: {
+      type: String,
+      default: "normal",
+      validator: (t) => ["compact", "normal", "comfortable"].includes(t)
+    }
+  },
+  setup(t) {
+    const d = t, b = l("border ui-border-strong rounded-2xl", {
+      variants: {
+        variant: {
+          default: "ui-border-strong",
+          minimal: "bg-transparent border-none",
+          bordered: "border-2 ui-border-strong"
+        },
+        padding: {
+          compact: "px-4 py-2",
+          normal: "px-6 py-4",
+          comfortable: "px-8 py-6"
+        }
+      },
+      defaultVariants: {
+        variant: "default",
+        padding: "normal"
+      }
+    }), x = l("font-semibold ui-text", {
+      variants: {
+        size: {
+          sm: "text-base",
+          md: "text-lg",
+          lg: "text-xl"
+        }
+      },
+      defaultVariants: {
+        size: "md"
+      }
+    }), y = l("ui-text mt-1", {
+      variants: {
+        size: {
+          sm: "text-xs",
+          md: "text-sm",
+          lg: "text-base"
+        }
+      },
+      defaultVariants: {
+        size: "md"
+      }
+    }), V = r(
+      () => n(b({
+        variant: d.variant,
+        padding: d.padding
+      }))
+    ), h = r(
+      () => n(x({ size: "md" }))
+    ), k = r(
+      () => n(y({ size: "md" }))
+    );
+    return (e, S) => t.title || t.description || e.$slots.header ? (s(), o("div", {
+      key: 0,
+      class: i(V.value)
+    }, [
+      c(e.$slots, "header", {}, () => [
+        m("div", z, [
+          m("div", null, [
+            t.title ? (s(), u(v, {
+              key: 0,
+              class: i(h.value)
+            }, {
+              default: f(() => [
+                p(g(t.title), 1)
+              ]),
+              _: 1
+            }, 8, ["class"])) : a("", !0),
+            t.description ? (s(), u(v, {
+              key: 1,
+              class: i(k.value)
+            }, {
+              default: f(() => [
+                p(g(t.description), 1)
+              ]),
+              _: 1
+            }, 8, ["class"])) : a("", !0)
+          ]),
+          e.$slots.filters ? (s(), o("div", C, [
+            c(e.$slots, "filters")
+          ])) : a("", !0)
+        ])
+      ])
+    ], 2)) : a("", !0);
+  }
+};
+export {
+  D as default
+};

package/dist/components/DataTablePagination.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),N=require("./Label.cjs"),S=require("./Option.cjs"),h=require("./Select.cjs"),u=require("class-variance-authority"),c=require("../utils/cn.cjs"),w={class:"flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between"},B={key:0,class:"text-sm ui-text text-center lg:text-left"},z={key:1,class:"text-sm ui-text text-center lg:text-left"},E={key:2,class:"flex items-center justify-center gap-4 lg:justify-start"},$={key:3,class:"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between lg:w-auto lg:justify-end"},j={class:"flex items-center justify-center gap-2 sm:justify-start"},q={class:"flex items-center justify-center gap-1 sm:gap-2 flex-wrap"},D=["disabled"],M=["disabled"],L={class:"hidden md:flex items-center gap-1 ui-border-strong"},O=["onClick"],F=["disabled"],I=["disabled"],T={class:"text-sm ui-text text-center sm:text-left sm:ml-2"},A={__name:"DataTablePagination",props:{currentPage:{type:Number,required:!0},totalPages:{type:Number,required:!0},total:{type:Number,required:!0},pageSize:{type:Number,required:!0},showPagination:{type:Boolean,default:!0},selectable:{type:Boolean,default:!1},selectedCount:{type:Number,default:0},pageSizeOptions:{type:Array,default:()=>[5,10,25,50,100]},maxVisiblePages:{type:Number,default:7},variant:{type:String,default:"default",validator:t=>["default","minimal","bordered"].includes(t)},padding:{type:String,default:"normal",validator:t=>["compact","normal","comfortable"].includes(t)}},emits:["update:currentPage","update:pageSize"],setup(t){const l=t,f=u.cva("border ui-border-strong rounded-2xl",{variants:{variant:{default:"bg-(--ui-bg) ",minimal:"bg-transparent ui-border-strong ",bordered:"bg-(--ui-bg) border-2 ui-border-strong "},padding:{compact:"px-4 py-2",normal:"px-6 py-4",comfortable:"px-8 py-6"}},defaultVariants:{variant:"default",padding:"normal"}}),b=u.cva("text-sm font-medium border rounded-md transition-colors duration-200",{variants:{state:{active:"ui-text border-(--ui-border-strong) bg-(--ui-primary-soft) ui-primary",inactive:"bg-(--ui-bg)  ui-text ui-border-strong  hover:text-(--ui-text)",disabled:"bg-(--ui-bg)  ui-text ui-border-strong  cursor-not-allowed"},size:{sm:"px-2 py-1",md:"px-3 py-2",lg:"px-4 py-3"}},defaultVariants:{state:"inactive",size:"md"}}),p=u.cva("ui-text",{variants:{size:{sm:"text-sm",md:"text-base",lg:"text-lg"}},defaultVariants:{size:"md"}}),v=u.cva("border ui-border-strong  rounded-md focus:outline-none focus:ring-2 focus:ring-(--ui-primary) text-sm min-w-[60px] focus:border-transparent",{variants:{size:{sm:"px-2 py-1",md:"px-3 py-2",lg:"px-4 py-3"}},defaultVariants:{size:"sm"}}),x=e.computed(()=>(l.currentPage-1)*l.pageSize+1),y=e.computed(()=>Math.min(l.currentPage*l.pageSize,l.total)),k=e.computed(()=>{const r=[],a=l.totalPages,n=l.currentPage,o=l.maxVisiblePages;if(a<=o)for(let i=1;i<=a;i++)r.push(i);else{const i=Math.floor(o/2);let d=Math.max(1,n-i),m=Math.min(a,d+o-1);m-d+1<o&&(d=Math.max(1,m-o+1));for(let g=d;g<=m;g++)r.push(g)}return r}),P=e.computed(()=>c.cn(f({variant:l.variant,padding:l.padding}))),V=e.computed(()=>c.cn(p({size:"md"}))),C=e.computed(()=>c.cn(v({size:"sm"}))),s=(r,a)=>{let n="inactive";return a?n="disabled":r&&(n="active"),c.cn(b({state:n,size:"md"}))};return(r,a)=>t.showPagination||r.$slots.footer?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(P.value)},[e.createElementVNode("div",w,[t.selectable&&t.selectedCount>0?(e.openBlock(),e.createElementBlock("div",B,e.toDisplayString(t.selectedCount)+" of "+e.toDisplayString(t.total)+" selected ",1)):(e.openBlock(),e.createElementBlock("div",z," Showing "+e.toDisplayString(x.value)+" to "+e.toDisplayString(y.value)+" of "+e.toDisplayString(t.total)+" entries ",1)),r.$slots.footer?(e.openBlock(),e.createElementBlock("div",E,[e.renderSlot(r.$slots,"footer")])):e.createCommentVNode("",!0),t.showPagination?(e.openBlock(),e.createElementBlock("div",$,[e.createElementVNode("div",j,[e.createVNode(N.default,{for:"pageSize",class:e.normalizeClass(V.value),inline:!0},{default:e.withCtx(()=>[...a[5]||(a[5]=[e.createTextVNode("Show:",-1)])]),_:1},8,["class"]),e.createVNode(h.default,{id:"pageSize","model-value":t.pageSize.toString(),class:e.normalizeClass(C.value),"onUpdate:modelValue":a[0]||(a[0]=n=>r.$emit("update:pageSize",parseInt(n)))},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.pageSizeOptions,n=>(e.openBlock(),e.createBlock(S.default,{key:n,value:n.toString(),label:n.toString()},null,8,["value","label"]))),128))]),_:1},8,["model-value","class"])]),e.createElementVNode("div",q,[e.createElementVNode("button",{disabled:t.currentPage===1,class:e.normalizeClass([s(!1,t.currentPage===1),"hidden sm:inline-flex"]),title:"First page",onClick:a[1]||(a[1]=n=>r.$emit("update:currentPage",1))},[...a[6]||(a[6]=[e.createElementVNode("svg",{class:"w-4 h-4",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"m18.75 4.5-7.5 7.5 7.5 7.5m-6-15L5.25 12l7.5 7.5"})],-1)])],10,D),e.createElementVNode("button",{disabled:t.currentPage===1,class:e.normalizeClass(s(!1,t.currentPage===1)),title:"Previous page",onClick:a[2]||(a[2]=n=>r.$emit("update:currentPage",t.currentPage-1))},[...a[7]||(a[7]=[e.createElementVNode("svg",{class:"w-4 h-4",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M15.75 19.5L8.25 12l7.5-7.5"})],-1)])],10,M),e.createElementVNode("div",L,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(k.value,n=>(e.openBlock(),e.createElementBlock("button",{key:n,class:e.normalizeClass(s(n===t.currentPage,!1)),onClick:o=>r.$emit("update:currentPage",n)},e.toDisplayString(n),11,O))),128))]),e.createElementVNode("button",{disabled:t.currentPage===t.totalPages,class:e.normalizeClass(s(!1,t.currentPage===t.totalPages)),title:"Next page",onClick:a[3]||(a[3]=n=>r.$emit("update:currentPage",t.currentPage+1))},[...a[8]||(a[8]=[e.createElementVNode("svg",{class:"w-4 h-4",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"m8.25 4.5 7.5 7.5-7.5 7.5"})],-1)])],10,F),e.createElementVNode("button",{disabled:t.currentPage===t.totalPages,class:e.normalizeClass([s(!1,t.currentPage===t.totalPages),"hidden sm:inline-flex"]),title:"Last page",onClick:a[4]||(a[4]=n=>r.$emit("update:currentPage",t.totalPages))},[...a[9]||(a[9]=[e.createElementVNode("svg",{class:"w-4 h-4",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"m5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5"})],-1)])],10,I)]),e.createElementVNode("div",T," Page "+e.toDisplayString(t.currentPage)+" of "+e.toDisplayString(t.totalPages),1)])):e.createCommentVNode("",!0)])],2)):e.createCommentVNode("",!0)}};exports.default=A;

package/dist/components/DataTablePagination.js

@@ -0,0 +1,290 @@
+import { computed as g, createElementBlock as o, createCommentVNode as y, openBlock as n, normalizeClass as l, createElementVNode as s, toDisplayString as d, renderSlot as L, createVNode as P, withCtx as k, createTextVNode as I, Fragment as w, renderList as h, createBlock as D } from "vue";
+import E from "./Label.js";
+import F from "./Option.js";
+import O from "./Select.js";
+import { cva as b } from "class-variance-authority";
+import { cn as v } from "../utils/cn.js";
+const T = { class: "flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between" }, A = {
+  key: 0,
+  class: "text-sm ui-text text-center lg:text-left"
+}, U = {
+  key: 1,
+  class: "text-sm ui-text text-center lg:text-left"
+}, G = {
+  key: 2,
+  class: "flex items-center justify-center gap-4 lg:justify-start"
+}, H = {
+  key: 3,
+  class: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between lg:w-auto lg:justify-end"
+}, J = { class: "flex items-center justify-center gap-2 sm:justify-start" }, K = { class: "flex items-center justify-center gap-1 sm:gap-2 flex-wrap" }, Q = ["disabled"], R = ["disabled"], W = { class: "hidden md:flex items-center gap-1 ui-border-strong" }, X = ["onClick"], Y = ["disabled"], Z = ["disabled"], _ = { class: "text-sm ui-text text-center sm:text-left sm:ml-2" }, ne = {
+  __name: "DataTablePagination",
+  props: {
+    currentPage: {
+      type: Number,
+      required: !0
+    },
+    totalPages: {
+      type: Number,
+      required: !0
+    },
+    total: {
+      type: Number,
+      required: !0
+    },
+    pageSize: {
+      type: Number,
+      required: !0
+    },
+    showPagination: {
+      type: Boolean,
+      default: !0
+    },
+    selectable: {
+      type: Boolean,
+      default: !1
+    },
+    selectedCount: {
+      type: Number,
+      default: 0
+    },
+    pageSizeOptions: {
+      type: Array,
+      default: () => [5, 10, 25, 50, 100]
+    },
+    maxVisiblePages: {
+      type: Number,
+      default: 7
+    },
+    variant: {
+      type: String,
+      default: "default",
+      validator: (e) => ["default", "minimal", "bordered"].includes(e)
+    },
+    padding: {
+      type: String,
+      default: "normal",
+      validator: (e) => ["compact", "normal", "comfortable"].includes(e)
+    }
+  },
+  emits: ["update:currentPage", "update:pageSize"],
+  setup(e) {
+    const i = e, C = b("border ui-border-strong rounded-2xl", {
+      variants: {
+        variant: {
+          default: "bg-(--ui-bg) ",
+          minimal: "bg-transparent ui-border-strong ",
+          bordered: "bg-(--ui-bg) border-2 ui-border-strong "
+        },
+        padding: {
+          compact: "px-4 py-2",
+          normal: "px-6 py-4",
+          comfortable: "px-8 py-6"
+        }
+      },
+      defaultVariants: {
+        variant: "default",
+        padding: "normal"
+      }
+    }), S = b("text-sm font-medium border rounded-md transition-colors duration-200", {
+      variants: {
+        state: {
+          active: "ui-text border-(--ui-border-strong) bg-(--ui-primary-soft) ui-primary",
+          inactive: "bg-(--ui-bg)  ui-text ui-border-strong  hover:text-(--ui-text)",
+          disabled: "bg-(--ui-bg)  ui-text ui-border-strong  cursor-not-allowed"
+        },
+        size: {
+          sm: "px-2 py-1",
+          md: "px-3 py-2",
+          lg: "px-4 py-3"
+        }
+      },
+      defaultVariants: {
+        state: "inactive",
+        size: "md"
+      }
+    }), z = b("ui-text", {
+      variants: {
+        size: {
+          sm: "text-sm",
+          md: "text-base",
+          lg: "text-lg"
+        }
+      },
+      defaultVariants: {
+        size: "md"
+      }
+    }), V = b("border ui-border-strong  rounded-md focus:outline-none focus:ring-2 focus:ring-(--ui-primary) text-sm min-w-[60px] focus:border-transparent", {
+      variants: {
+        size: {
+          sm: "px-2 py-1",
+          md: "px-3 py-2",
+          lg: "px-4 py-3"
+        }
+      },
+      defaultVariants: {
+        size: "sm"
+      }
+    }), $ = g(() => (i.currentPage - 1) * i.pageSize + 1), j = g(() => Math.min(i.currentPage * i.pageSize, i.total)), B = g(() => {
+      const r = [], t = i.totalPages, a = i.currentPage, u = i.maxVisiblePages;
+      if (t <= u)
+        for (let c = 1; c <= t; c++)
+          r.push(c);
+      else {
+        const c = Math.floor(u / 2);
+        let f = Math.max(1, a - c), x = Math.min(t, f + u - 1);
+        x - f + 1 < u && (f = Math.max(1, x - u + 1));
+        for (let p = f; p <= x; p++)
+          r.push(p);
+      }
+      return r;
+    }), N = g(
+      () => v(C({
+        variant: i.variant,
+        padding: i.padding
+      }))
+    ), M = g(
+      () => v(z({ size: "md" }))
+    ), q = g(
+      () => v(V({ size: "sm" }))
+    ), m = (r, t) => {
+      let a = "inactive";
+      return t ? a = "disabled" : r && (a = "active"), v(S({
+        state: a,
+        size: "md"
+      }));
+    };
+    return (r, t) => e.showPagination || r.$slots.footer ? (n(), o("div", {
+      key: 0,
+      class: l(N.value)
+    }, [
+      s("div", T, [
+        e.selectable && e.selectedCount > 0 ? (n(), o("div", A, d(e.selectedCount) + " of " + d(e.total) + " selected ", 1)) : (n(), o("div", U, " Showing " + d($.value) + " to " + d(j.value) + " of " + d(e.total) + " entries ", 1)),
+        r.$slots.footer ? (n(), o("div", G, [
+          L(r.$slots, "footer")
+        ])) : y("", !0),
+        e.showPagination ? (n(), o("div", H, [
+          s("div", J, [
+            P(E, {
+              for: "pageSize",
+              class: l(M.value),
+              inline: !0
+            }, {
+              default: k(() => [...t[5] || (t[5] = [
+                I("Show:", -1)
+              ])]),
+              _: 1
+            }, 8, ["class"]),
+            P(O, {
+              id: "pageSize",
+              "model-value": e.pageSize.toString(),
+              class: l(q.value),
+              "onUpdate:modelValue": t[0] || (t[0] = (a) => r.$emit("update:pageSize", parseInt(a)))
+            }, {
+              default: k(() => [
+                (n(!0), o(w, null, h(e.pageSizeOptions, (a) => (n(), D(F, {
+                  key: a,
+                  value: a.toString(),
+                  label: a.toString()
+                }, null, 8, ["value", "label"]))), 128))
+              ]),
+              _: 1
+            }, 8, ["model-value", "class"])
+          ]),
+          s("div", K, [
+            s("button", {
+              disabled: e.currentPage === 1,
+              class: l([m(!1, e.currentPage === 1), "hidden sm:inline-flex"]),
+              title: "First page",
+              onClick: t[1] || (t[1] = (a) => r.$emit("update:currentPage", 1))
+            }, [...t[6] || (t[6] = [
+              s("svg", {
+                class: "w-4 h-4",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                "stroke-width": "1.5",
+                stroke: "currentColor"
+              }, [
+                s("path", {
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round",
+                  d: "m18.75 4.5-7.5 7.5 7.5 7.5m-6-15L5.25 12l7.5 7.5"
+                })
+              ], -1)
+            ])], 10, Q),
+            s("button", {
+              disabled: e.currentPage === 1,
+              class: l(m(!1, e.currentPage === 1)),
+              title: "Previous page",
+              onClick: t[2] || (t[2] = (a) => r.$emit("update:currentPage", e.currentPage - 1))
+            }, [...t[7] || (t[7] = [
+              s("svg", {
+                class: "w-4 h-4",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                "stroke-width": "1.5",
+                stroke: "currentColor"
+              }, [
+                s("path", {
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round",
+                  d: "M15.75 19.5L8.25 12l7.5-7.5"
+                })
+              ], -1)
+            ])], 10, R),
+            s("div", W, [
+              (n(!0), o(w, null, h(B.value, (a) => (n(), o("button", {
+                key: a,
+                class: l(m(a === e.currentPage, !1)),
+                onClick: (u) => r.$emit("update:currentPage", a)
+              }, d(a), 11, X))), 128))
+            ]),
+            s("button", {
+              disabled: e.currentPage === e.totalPages,
+              class: l(m(!1, e.currentPage === e.totalPages)),
+              title: "Next page",
+              onClick: t[3] || (t[3] = (a) => r.$emit("update:currentPage", e.currentPage + 1))
+            }, [...t[8] || (t[8] = [
+              s("svg", {
+                class: "w-4 h-4",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                "stroke-width": "1.5",
+                stroke: "currentColor"
+              }, [
+                s("path", {
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round",
+                  d: "m8.25 4.5 7.5 7.5-7.5 7.5"
+                })
+              ], -1)
+            ])], 10, Y),
+            s("button", {
+              disabled: e.currentPage === e.totalPages,
+              class: l([m(!1, e.currentPage === e.totalPages), "hidden sm:inline-flex"]),
+              title: "Last page",
+              onClick: t[4] || (t[4] = (a) => r.$emit("update:currentPage", e.totalPages))
+            }, [...t[9] || (t[9] = [
+              s("svg", {
+                class: "w-4 h-4",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                "stroke-width": "1.5",
+                stroke: "currentColor"
+              }, [
+                s("path", {
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round",
+                  d: "m5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5"
+                })
+              ], -1)
+            ])], 10, Z)
+          ]),
+          s("div", _, " Page " + d(e.currentPage) + " of " + d(e.totalPages), 1)
+        ])) : y("", !0)
+      ])
+    ], 2)) : y("", !0);
+  }
+};
+export {
+  ne as default
+};

package/dist/components/DataTableRow.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),d=require("class-variance-authority"),s=require("../utils/cn.cjs"),w=require("./Checkbox.cjs"),B=require("./DataTableCell.cjs"),S={__name:"DataTableRow",props:{item:{type:Object,required:!0},columns:{type:Array,required:!0},index:{type:Number,required:!0},selectable:{type:Boolean,default:!1},isSelected:{type:Boolean,default:!1},striped:{type:Boolean,default:!0},hoverable:{type:Boolean,default:!0},clickableRows:{type:Boolean,default:!1},density:{type:String,default:"normal",validator:a=>["compact","normal","comfortable"].includes(a)},variant:{type:String,default:"default",validator:a=>["default","bordered","minimal"].includes(a)},rowClass:{type:[String,Array,Object],default:""}},emits:["toggle-selection","row-click"],setup(a,{emit:u}){const l=a,f=u,m=d.cva("transition-colors",{variants:{striped:{true:"odd:bg-[color:color-mix(in oklab, var(--ui-primary-soft) 72%, var(--ui-surface) 28%)] even:bg-(--ui-surface-soft)",false:""},hoverable:{true:"hover:bg-[color:color-mix(in oklab, var(--ui-primary-soft), transparent 20%)]",false:""},clickable:{true:"cursor-pointer hover:bg-[color:color-mix(in oklab, var(--ui-primary-soft), transparent 20%)]",false:""},selected:{true:"ui-primary-soft border-l-2 border-(--ui-primary)",false:""},variant:{default:"border-b border-(--ui-border-strong) ",bordered:"border-b border-(--ui-border-strong) ",minimal:"border-b border-(--ui-border-strong) "}},compoundVariants:[{hoverable:!0,clickable:!0,class:"hover:bg-(--ui-surface)"}],defaultVariants:{striped:!1,hoverable:!0,clickable:!1,selected:!1,variant:"default"}}),c=d.cva("whitespace-nowrap text-sm ui-text",{variants:{density:{compact:"px-4 py-2",normal:"px-6 py-4",comfortable:"px-8 py-6"},align:{left:"text-left",center:"text-center",right:"text-right"}},defaultVariants:{density:"normal",align:"left"}}),i=r=>typeof r=="string"?r:r?.key||r?.field||"unknown",n=(r,o)=>{const t=i(o);return typeof o=="object"&&o.accessor?o.accessor(r):t&&t.includes(".")?t.split(".").reduce((C,h)=>C?.[h],r):r?.[t]},b=(r,o)=>{const t=n(r,o);return typeof o=="object"&&o.formatter?o.formatter(t,r):t==null?"":t instanceof Date?t.toLocaleDateString():Array.isArray(t)?t.join(", "):t},y=()=>{l.clickableRows&&f("row-click",{item:l.item,index:l.index})},g=r=>typeof r=="object"&&r.align?r.align:"left",v=e.computed(()=>s.cn(m({striped:l.striped,hoverable:l.hoverable&&!l.clickableRows,clickable:l.clickableRows,selected:l.isSelected,variant:l.variant}),l.rowClass)),p=()=>({compact:"sm",normal:"md",comfortable:"lg"})[l.density]||"md",k=e.computed(()=>s.cn(c({density:l.density}),"w-12")),x=e.computed(()=>s.cn(c({density:l.density,align:"right"}),"font-medium"));return(r,o)=>(e.openBlock(),e.createElementBlock("tr",{class:e.normalizeClass(v.value),onClick:y},[a.selectable?(e.openBlock(),e.createElementBlock("td",{key:0,class:e.normalizeClass(k.value)},[e.createVNode(w.default,{"model-value":a.isSelected,"onUpdate:modelValue":o[0]||(o[0]=t=>r.$emit("toggle-selection",a.item))},null,8,["model-value"])],2)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.columns,t=>(e.openBlock(),e.createBlock(B.default,{key:i(t),item:a.item,column:t,value:n(a.item,t),align:g(t),padding:a.density,"text-size":p(),"text-color":t.textColor},{default:e.withCtx(()=>[e.renderSlot(r.$slots,`cell-${i(t)}`,{item:a.item,value:n(a.item,t),column:t,index:a.index},()=>[e.createTextVNode(e.toDisplayString(b(a.item,t)),1)])]),_:2},1032,["item","column","value","align","padding","text-size","text-color"]))),128)),r.$slots.actions?(e.openBlock(),e.createElementBlock("td",{key:1,class:e.normalizeClass(x.value)},[e.renderSlot(r.$slots,"actions",{item:a.item,index:a.index})],2)):e.createCommentVNode("",!0)],2))}};exports.default=S;

package/dist/components/DataTableRow.js

@@ -0,0 +1,199 @@
+import { computed as c, createElementBlock as o, openBlock as i, normalizeClass as d, createCommentVNode as m, createVNode as j, Fragment as z, renderList as R, createBlock as A, withCtx as D, renderSlot as b, createTextVNode as N, toDisplayString as q } from "vue";
+import { cva as y } from "class-variance-authority";
+import { cn as u } from "../utils/cn.js";
+import T from "./Checkbox.js";
+import L from "./DataTableCell.js";
+const G = {
+  __name: "DataTableRow",
+  props: {
+    item: {
+      type: Object,
+      required: !0
+    },
+    columns: {
+      type: Array,
+      required: !0
+    },
+    index: {
+      type: Number,
+      required: !0
+    },
+    selectable: {
+      type: Boolean,
+      default: !1
+    },
+    isSelected: {
+      type: Boolean,
+      default: !1
+    },
+    striped: {
+      type: Boolean,
+      default: !0
+    },
+    hoverable: {
+      type: Boolean,
+      default: !0
+    },
+    clickableRows: {
+      type: Boolean,
+      default: !1
+    },
+    density: {
+      type: String,
+      default: "normal",
+      validator: (r) => ["compact", "normal", "comfortable"].includes(r)
+    },
+    variant: {
+      type: String,
+      default: "default",
+      validator: (r) => ["default", "bordered", "minimal"].includes(r)
+    },
+    rowClass: {
+      type: [String, Array, Object],
+      default: ""
+    }
+  },
+  emits: ["toggle-selection", "row-click"],
+  setup(r, { emit: g }) {
+    const a = r, v = g, p = y(
+      "transition-colors",
+      {
+        variants: {
+          striped: {
+            true: "odd:bg-[color:color-mix(in oklab, var(--ui-primary-soft) 72%, var(--ui-surface) 28%)] even:bg-(--ui-surface-soft)",
+            false: ""
+          },
+          hoverable: {
+            true: "hover:bg-[color:color-mix(in oklab, var(--ui-primary-soft), transparent 20%)]",
+            false: ""
+          },
+          clickable: {
+            true: "cursor-pointer hover:bg-[color:color-mix(in oklab, var(--ui-primary-soft), transparent 20%)]",
+            false: ""
+          },
+          selected: {
+            true: "ui-primary-soft border-l-2 border-(--ui-primary)",
+            false: ""
+          },
+          variant: {
+            default: "border-b border-(--ui-border-strong) ",
+            bordered: "border-b border-(--ui-border-strong) ",
+            minimal: "border-b border-(--ui-border-strong) "
+          }
+        },
+        compoundVariants: [
+          {
+            hoverable: !0,
+            clickable: !0,
+            class: "hover:bg-(--ui-surface)"
+          }
+        ],
+        defaultVariants: {
+          striped: !1,
+          hoverable: !0,
+          clickable: !1,
+          selected: !1,
+          variant: "default"
+        }
+      }
+    ), f = y("whitespace-nowrap text-sm ui-text", {
+      variants: {
+        density: {
+          compact: "px-4 py-2",
+          normal: "px-6 py-4",
+          comfortable: "px-8 py-6"
+        },
+        align: {
+          left: "text-left",
+          center: "text-center",
+          right: "text-right"
+        }
+      },
+      defaultVariants: {
+        density: "normal",
+        align: "left"
+      }
+    }), s = (t) => typeof t == "string" ? t : t?.key || t?.field || "unknown", n = (t, l) => {
+      const e = s(l);
+      return typeof l == "object" && l.accessor ? l.accessor(t) : e && e.includes(".") ? e.split(".").reduce((B, $) => B?.[$], t) : t?.[e];
+    }, k = (t, l) => {
+      const e = n(t, l);
+      return typeof l == "object" && l.formatter ? l.formatter(e, t) : e == null ? "" : e instanceof Date ? e.toLocaleDateString() : Array.isArray(e) ? e.join(", ") : e;
+    }, x = () => {
+      a.clickableRows && v("row-click", { item: a.item, index: a.index });
+    }, C = (t) => typeof t == "object" && t.align ? t.align : "left", w = c(
+      () => u(p({
+        striped: a.striped,
+        hoverable: a.hoverable && !a.clickableRows,
+        clickable: a.clickableRows,
+        selected: a.isSelected,
+        variant: a.variant
+      }), a.rowClass)
+    ), h = () => ({
+      compact: "sm",
+      normal: "md",
+      comfortable: "lg"
+    })[a.density] || "md", V = c(
+      () => u(
+        f({ density: a.density }),
+        "w-12"
+      )
+    ), S = c(
+      () => u(
+        f({
+          density: a.density,
+          align: "right"
+        }),
+        "font-medium"
+      )
+    );
+    return (t, l) => (i(), o("tr", {
+      class: d(w.value),
+      onClick: x
+    }, [
+      r.selectable ? (i(), o("td", {
+        key: 0,
+        class: d(V.value)
+      }, [
+        j(T, {
+          "model-value": r.isSelected,
+          "onUpdate:modelValue": l[0] || (l[0] = (e) => t.$emit("toggle-selection", r.item))
+        }, null, 8, ["model-value"])
+      ], 2)) : m("", !0),
+      (i(!0), o(z, null, R(r.columns, (e) => (i(), A(L, {
+        key: s(e),
+        item: r.item,
+        column: e,
+        value: n(r.item, e),
+        align: C(e),
+        padding: r.density,
+        "text-size": h(),
+        "text-color": e.textColor
+      }, {
+        default: D(() => [
+          b(t.$slots, `cell-${s(e)}`, {
+            item: r.item,
+            value: n(r.item, e),
+            column: e,
+            index: r.index
+          }, () => [
+            N(q(k(r.item, e)), 1)
+          ])
+        ]),
+        _: 2
+      }, 1032, ["item", "column", "value", "align", "padding", "text-size", "text-color"]))), 128)),
+      t.$slots.actions ? (i(), o("td", {
+        key: 1,
+        class: d(S.value)
+      }, [
+        b(t.$slots, "actions", {
+          item: r.item,
+          index: r.index
+        })
+      ], 2)) : m("", !0)
+    ], 2));
+  }
+};
+export {
+  G as default
+};

package/dist/components/DataTableToolBar.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),w=require("./Button.cjs"),V=require("./Icon.cjs"),_=require("./FilterDrawer.cjs"),f=require("class-variance-authority"),c=require("../utils/cn.cjs"),ee=require("../_plugin-vue_export-helper-BHFhmbuH.cjs"),te={class:"flex flex-col rounded-2xl mb-2 px-2"},oe={class:"flex items-center gap-3"},le={key:0,class:"flex items-center gap-3"},ne={class:"text-sm ui-text"},re={class:"flex items-center gap-2"},ae={class:"flex items-center gap-3"},se=["title","onClick"],ie={key:1,class:"relative"},ue={class:"p-3"},de={class:"space-y-1"},ce={class:"flex items-center gap-2 cursor-pointer w-full"},me=["checked","onChange"],fe=["disabled"],pe={key:3,class:"flex items-center gap-2"},ve={key:4,class:"relative"},ge=["value","placeholder"],be={key:0,class:"inline-flex items-center justify-center min-w-5 h-5 rounded-full text-xs ui-primary-bg text-white px-1"},ye={key:7,class:"flex items-center gap-2"},ke={key:1,class:"mt-2 px-3 py-2 border ui-border-strong rounded-lg flex flex-wrap items-center gap-2 ui-surface"},he=["onClick"],Be=[{key:"delete",label:"Delete",icon:{render(){return e.h("svg",{fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor"},[e.h("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"})])}},variant:"danger"},{key:"edit",label:"Edit",icon:{render(){return e.h("svg",{fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor"},[e.h("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"})])}},variant:"primary"}],Ce={name:"DataTableToolBar"},xe=Object.assign(Ce,{props:{selectedItems:{type:Array,default:()=>[]},totalItems:{type:Number,default:0},itemLabel:{type:String,default:"items"},showTableInfo:{type:Boolean,default:!1},showItemCount:{type:Boolean,default:!1},bulkActions:{type:Array,default:()=>Be},showDensityToggle:{type:Boolean,default:!0},showColumnToggle:{type:Boolean,default:!0},showRefresh:{type:Boolean,default:!0},showSearch:{type:Boolean,default:!0},searchQuery:{type:String,default:""},searchPlaceholder:{type:String,default:"Search..."},addButton:{type:Object,default:()=>({})},isRefreshing:{type:Boolean,default:!1},density:{type:String,default:"compact",validator:o=>["compact","normal","comfortable"].includes(o)},toggleableColumns:{type:Array,default:()=>[]},visibleColumns:{type:Array,default:()=>[]},variant:{type:String,default:"default",validator:o=>["default","minimal","bordered"].includes(o)},padding:{type:String,default:"normal",validator:o=>["compact","normal","comfortable"].includes(o)},themeScope:{type:String,default:"default",validator:o=>["default","module"].includes(o)},activeFilters:{type:Array,default:()=>[]},enableFilters:{type:Boolean,default:!1},filterFields:{type:Array,default:()=>[]},filterRules:{type:Object,default:()=>({logic:"all",rules:[]})},defaultFilterRules:{type:Object,default:()=>({logic:"all",rules:[]})}},emits:["bulk-action","update:density","toggle-column","refresh","update:search-query","add","add-button-click","update:filterRules"],setup(o,{emit:E}){const r=o,s=E,i=e.ref(!1),p=e.ref(!1),g=e.ref(!1),u=e.ref(null),v=e.ref(null),b=e.ref({}),y=e.computed(()=>r.selectedItems.length),k=e.computed(()=>Object.keys(r.addButton||{}).length>0),N=e.computed(()=>k.value?r.addButton.permission===void 0?!0:typeof r.addButton.permission=="function"?r.addButton.permission():!!r.addButton.permission:!1),h=e.computed(()=>!k.value||!N.value?!1:typeof r.addButton.visible=="function"?r.addButton.visible():r.addButton.visible===void 0?!0:!!r.addButton.visible),B=e.computed(()=>h.value?typeof r.addButton.disabled=="function"?r.addButton.disabled():!!r.addButton.disabled:!0),S=e.computed(()=>r.addButton.tooltip||r.addButton.label||"Add new item"),A=[{value:"compact",label:"Compact",icon:["fas","minus"]},{value:"normal",label:"Normal",icon:["fas","bars"]},{value:"comfortable",label:"Comfortable",icon:["fas","bars-staggered"]}],R=f.cva("flex items-center justify-between border ui-border-strong rounded-2xl",{variants:{variant:{default:"ui-border-strong",minimal:"bg-transparent ui-border-strong",bordered:" ui-border-strong"},padding:{compact:"p-2",normal:"p-4",comfortable:"p-6"}},defaultVariants:{variant:"default",padding:"normal"}}),F=f.cva("px-3 py-1.5 text-sm font-medium rounded-md flex items-center gap-1 transition-colors ",{variants:{variant:{danger:"ui-danger ui-danger-bg hover:bg-(--ui-danger-soft) border border-(--ui-danger-soft)",primary:"ui-primary ui-primary-soft hover:bg-(--ui-primary-soft) border border-(--ui-primary-soft)",secondary:"ui-text ui-bg hover:bg-(--ui-bg) border ui-border-strong"}},defaultVariants:{variant:"secondary"}}),$=f.cva("p-2 border ui-border-strong  transition-colors ",{variants:{active:{true:"ui-primary-soft ui-primary border-(--ui-primary-soft)",false:"ui-surface ui-text hover:bg-(--ui-surface)"},position:{first:"rounded-l-md border-r-0",middle:"border-x-0",last:"rounded-r-md border-l-0"}},defaultVariants:{active:!1,position:"middle"}}),z=f.cva("px-3 py-2 text-sm border ui-border-strong rounded-md flex items-center gap-2 transition-colors ",{variants:{state:{normal:"ui-text hover:text-(--ui-text) hover:bg-(--ui-surface)",refreshing:"ui-text opacity-75 cursor-not-allowed"}},defaultVariants:{state:"normal"}}),D=e.computed(()=>c.cn(R({variant:r.variant,padding:r.padding}),r.themeScope==="module"&&"kv-module-themed-toolbar")),T=e.computed(()=>"text-md ui-text"),L=e.computed(()=>"flex items-center"),I=e.computed(()=>"flex items-center gap-2 px-3 py-2 text-sm ui-text hover:text-(--ui-text) border ui-border-strong rounded-md  hover:brightness-105 transition-colors focus:outline-none focus:ring-2 focus:ring-(--ui-primary) focus:ring-offset-1"),M=e.computed(()=>"ui-bg  rounded-lg shadow-lg z-[9999] max-h-64 overflow-y-auto"),j=e.computed(()=>"text-xs font-medium ui-text uppercase tracking-wider mb-2 border-b ui-border-strong pb-2"),q=e.computed(()=>"py-1 hover:bg-(--ui-surface) rounded transition-colors"),O=e.computed(()=>"w-4 h-4 rounded ui-border-strong ui-primary focus:ring-(--ui-primary) focus:ring-2 focus:ring-offset-1"),H=e.computed(()=>"text-sm ui-text flex-1 select-none"),P=e.computed(()=>"w-72 pl-9 pr-3 py-2 text-sm border ui-border-strong rounded-md ui-surface ui-text placeholder:text-(--ui-text-muted) focus:outline-none focus:ring-2 focus:ring-(--ui-primary) focus:border-transparent transition-all"),d=()=>{if(!u.value)return;const t=u.value.getBoundingClientRect(),l=224,a=Math.max(12,t.right-l);b.value={position:"fixed",top:`${t.bottom+6}px`,left:`${a}px`,width:`${l}px`,zIndex:9999}},C=t=>{u.value&&v.value&&!u.value.contains(t.target)&&!v.value.contains(t.target)&&(i.value=!1)},Q=()=>{i.value=!i.value,i.value&&d()},U=t=>c.cn(F({variant:t.variant||"secondary"})),Z=t=>{let l="middle";return t==="compact"?l="first":t==="comfortable"&&(l="last"),c.cn($({active:r.density===t,position:l}))},G=()=>c.cn(z({state:r.isRefreshing?"refreshing":"normal"})),J=()=>c.cn("w-4 h-4",{"animate-spin":r.isRefreshing}),K=t=>r.visibleColumns.includes(t),W=(t,l)=>{s("toggle-column",{column:t,visible:l})},X=()=>{B.value||(s("add"),s("add-button-click",r.addButton),typeof r.addButton.onClick=="function"&&r.addButton.onClick())},x=e.computed(()=>(r.filterRules?.rules||[]).map(t=>({id:t.id,label:t.label,value:typeof t.value=="object"?`${t.value.from||""}${t.value.from||t.value.to?" to ":""}${t.value.to||""}`:String(t.value??"")}))),Y=t=>{const l=Array.isArray(r.filterRules?.rules)?r.filterRules.rules:[];s("update:filterRules",{logic:r.filterRules?.logic||"all",rules:l.filter(a=>a.id!==t)})};return e.watch(()=>r.defaultFilterRules,t=>{if(g.value||!r.enableFilters)return;const l=Array.isArray(t?.rules)?t.rules:[];l.length!==0&&(s("update:filterRules",{logic:t?.logic||"all",rules:l}),g.value=!0)},{immediate:!0,deep:!0}),e.onMounted(()=>{document.addEventListener("click",C),window.addEventListener("scroll",d,!0),window.addEventListener("resize",d)}),e.onUnmounted(()=>{document.removeEventListener("click",C),window.removeEventListener("scroll",d,!0),window.removeEventListener("resize",d)}),(t,l)=>{const a=e.resolveComponent("font-awesome-icon");return e.openBlock(),e.createElementBlock("div",te,[e.createElementVNode("div",{class:e.normalizeClass(D.value)},[e.createElementVNode("div",oe,[y.value>0?(e.openBlock(),e.createElementBlock("div",le,[e.createElementVNode("span",ne,e.toDisplayString(y.value)+" selected ",1),e.createElementVNode("div",re,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.bulkActions,n=>(e.openBlock(),e.createBlock(w.default,{key:n.key,class:e.normalizeClass(U(n)),onClick:m=>t.$emit("bulk-action",{action:n.key,items:o.selectedItems})},{default:e.withCtx(()=>[n.icon?(e.openBlock(),e.createBlock(a,{key:0,icon:n.icon,class:"w-4 h-4"},null,8,["icon"])):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString(n.label),1)]),_:2},1032,["class","onClick"]))),128))])])):o.showItemCount&&o.totalItems>0?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(T.value)},e.toDisplayString(o.totalItems)+" "+e.toDisplayString(o.itemLabel),3)):e.createCommentVNode("",!0)]),e.createElementVNode("div",ae,[o.showDensityToggle?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(L.value)},[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(A,n=>e.createElementVNode("button",{key:n.value,class:e.normalizeClass(Z(n.value)),title:n.label,type:"button",onClick:m=>t.$emit("update:density",n.value)},[e.createVNode(a,{icon:n.icon,class:"w-4 h-4"},null,8,["icon"])],10,se)),64))],2)):e.createCommentVNode("",!0),o.showColumnToggle?(e.openBlock(),e.createElementBlock("div",ie,[e.createElementVNode("button",{ref_key:"columnToggleButton",ref:u,class:e.normalizeClass(I.value),type:"button",onClick:e.withModifiers(Q,["stop"])},[e.createVNode(a,{icon:"columns",class:"w-4 h-4"}),l[7]||(l[7]=e.createElementVNode("span",null,"Columns",-1))],2),(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.withDirectives(e.createElementVNode("div",{ref_key:"columnMenu",ref:v,class:e.normalizeClass(M.value),style:e.normalizeStyle(b.value),onClick:l[0]||(l[0]=e.withModifiers(()=>{},["stop"]))},[e.createElementVNode("div",ue,[e.createElementVNode("div",{class:e.normalizeClass(j.value)}," Show Columns ",2),e.createElementVNode("div",de,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.toggleableColumns,n=>(e.openBlock(),e.createElementBlock("div",{key:n.key,class:e.normalizeClass(q.value)},[e.createElementVNode("label",ce,[e.createElementVNode("input",{type:"checkbox",checked:K(n.key),class:e.normalizeClass(O.value),onChange:m=>W(n.key,m.target.checked)},null,42,me),e.createElementVNode("span",{class:e.normalizeClass(H.value)},e.toDisplayString(n.label),3)])],2))),128))])])],6),[[e.vShow,i.value]])]))])):e.createCommentVNode("",!0),o.showRefresh?(e.openBlock(),e.createElementBlock("button",{key:2,disabled:o.isRefreshing,class:e.normalizeClass(G()),type:"button",onClick:l[1]||(l[1]=n=>t.$emit("refresh"))},[e.createVNode(a,{icon:"sync",class:e.normalizeClass(J())},null,8,["class"]),l[8]||(l[8]=e.createElementVNode("span",null,"Refresh",-1))],10,fe)):e.createCommentVNode("",!0),t.$slots.actions?(e.openBlock(),e.createElementBlock("div",pe,[e.renderSlot(t.$slots,"actions",{},void 0,!0)])):e.createCommentVNode("",!0),o.showSearch?(e.openBlock(),e.createElementBlock("div",ve,[e.createVNode(a,{icon:"search",class:"pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 ui-text-soft"}),e.createElementVNode("input",{value:o.searchQuery,type:"text",placeholder:o.searchPlaceholder,class:e.normalizeClass(P.value),onInput:l[2]||(l[2]=n=>t.$emit("update:search-query",n.target.value))},null,42,ge)])):e.createCommentVNode("",!0),h.value?(e.openBlock(),e.createBlock(w.default,{key:5,variant:o.addButton.variant||"success",disabled:B.value,title:S.value,onClick:X},{default:e.withCtx(()=>[e.createVNode(V.default,{icon:o.addButton.icon||"plus"},null,8,["icon"]),e.createElementVNode("span",null,e.toDisplayString(o.addButton.label||"Add"),1)]),_:1},8,["variant","disabled","title"])):e.createCommentVNode("",!0),o.enableFilters?(e.openBlock(),e.createElementBlock("button",{key:6,class:"px-3 py-2 text-sm border ui-border-strong rounded-md hover:bg-(--ui-surface) flex items-center gap-2",onClick:l[3]||(l[3]=n=>p.value=!0)},[e.createVNode(a,{icon:"filter"}),l[9]||(l[9]=e.createTextVNode(" Filter ",-1)),(o.filterRules.rules||[]).length?(e.openBlock(),e.createElementBlock("span",be,e.toDisplayString((o.filterRules.rules||[]).length),1)):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),t.$slots["actions-after-add"]?(e.openBlock(),e.createElementBlock("div",ye,[e.renderSlot(t.$slots,"actions-after-add",{},void 0,!0)])):e.createCommentVNode("",!0)])],2),o.enableFilters?(e.openBlock(),e.createBlock(_.default,{key:0,open:p.value,fields:o.filterFields,"model-value":o.filterRules,"onUpdate:modelValue":l[4]||(l[4]=n=>t.$emit("update:filterRules",n)),onClose:l[5]||(l[5]=n=>p.value=!1)},null,8,["open","fields","model-value"])):e.createCommentVNode("",!0),(o.enableFilters?x.value.length>0:o.activeFilters.length>0)?(e.openBlock(),e.createElementBlock("div",ke,[l[10]||(l[10]=e.createElementVNode("span",{class:"text-sm ui-text-soft"},"Filters:",-1)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.enableFilters?x.value:o.activeFilters,n=>(e.openBlock(),e.createElementBlock("span",{key:n.id||`${n.label}-${n.value}`,class:"inline-flex items-center gap-1 px-2 py-1 rounded-md text-sm border ui-border-strong ui-text"},[e.createTextVNode(e.toDisplayString(n.label)+": "+e.toDisplayString(n.value)+" ",1),o.enableFilters&&n.id?(e.openBlock(),e.createElementBlock("button",{key:0,class:"ml-1 ui-text-soft hover:ui-primary",onClick:m=>Y(n.id)},[e.createVNode(V.default,{icon:"xmark",class:"w-3 h-3"})],8,he)):e.createCommentVNode("",!0)]))),128)),o.enableFilters?(e.openBlock(),e.createElementBlock("button",{key:0,class:"ml-1 px-2 py-1 text-sm border border-(--ui-primary) rounded-md ui-primary hover:bg-(--ui-primary-soft)",onClick:l[6]||(l[6]=n=>t.$emit("update:filterRules",{logic:o.defaultFilterRules?.logic||"all",rules:o.defaultFilterRules?.rules||[]}))}," Clear filter ")):e.createCommentVNode("",!0),e.renderSlot(t.$slots,"active-filter-actions",{},void 0,!0)])):e.createCommentVNode("",!0)])}}}),we=ee._export_sfc(xe,[["__scopeId","data-v-b6fc1eb4"]]);exports.default=we;