@gspa/ui 0.1.3 → 0.1.4

package/dist/components/DataTableCell.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("vue"),u=require("class-variance-authority"),d=require("../utils/cn.cjs"),m={__name:"DataTableCell",props:{item:{type:Object,required:!0},column:{type:Object,required:!0},value:{type:[String,Number,Boolean,Object,Array],default:null},align:{type:String,default:"left",validator:a=>["left","center","right"].includes(a)},width:{type:String,default:null},padding:{type:String,default:"normal",validator:a=>["compact","normal","comfortable"].includes(a)},textSize:{type:String,default:"md",validator:a=>["xs","sm","md","base","lg"].includes(a)},textColor:{type:String,default:null}},setup(a){const t=a,n=l.computed(()=>{const e=t.value??o();return t.column.formatter?t.column.formatter(e,t.item):e}),o=()=>t.column.accessor?t.column.accessor(t.item):t.column.key.split(".").reduce((e,r)=>e?.[r],t.item),i=u.cva("whitespace-nowrap ui-text",{variants:{align:{left:"text-left",center:"text-center",right:"text-right"},padding:{compact:"px-4 py-2",normal:"px-6 py-4",comfortable:"px-8 py-6"},textSize:{xs:"text-xs",sm:"text-sm",base:"text-base",lg:"text-lg"}},defaultVariants:{align:"left",padding:"normal",textSize:"md"}}),c=l.computed(()=>{const e=t.align||t.column.align||"left",r=t.textColor?`text-${t.textColor}`:"ui-text",s=t.width?`w-${t.width}`:"";return d.cn(i({align:e,padding:t.padding,textSize:t.textSize}),r,s,t.column.cellClasses)});return(e,r)=>(l.openBlock(),l.createElementBlock("td",{class:l.normalizeClass(c.value)},[l.renderSlot(e.$slots,"default",{},()=>[l.createTextVNode(l.toDisplayString(n.value),1)])],2))}};exports.default=m;

package/dist/components/DataTableCell.js

@@ -0,0 +1,95 @@
+import { computed as r, createElementBlock as u, openBlock as m, normalizeClass as d, renderSlot as p, createTextVNode as x, toDisplayString as f } from "vue";
+import { cva as g } from "class-variance-authority";
+import { cn as y } from "../utils/cn.js";
+const v = {
+  __name: "DataTableCell",
+  props: {
+    item: {
+      type: Object,
+      required: !0
+    },
+    column: {
+      type: Object,
+      required: !0
+    },
+    value: {
+      type: [String, Number, Boolean, Object, Array],
+      default: null
+    },
+    align: {
+      type: String,
+      default: "left",
+      validator: (l) => ["left", "center", "right"].includes(l)
+    },
+    width: {
+      type: String,
+      default: null
+    },
+    padding: {
+      type: String,
+      default: "normal",
+      validator: (l) => ["compact", "normal", "comfortable"].includes(l)
+    },
+    textSize: {
+      type: String,
+      default: "md",
+      validator: (l) => ["xs", "sm", "md", "base", "lg"].includes(l)
+    },
+    textColor: {
+      type: String,
+      default: null
+    }
+  },
+  setup(l) {
+    const t = l, n = r(() => {
+      const e = t.value ?? o();
+      return t.column.formatter ? t.column.formatter(e, t.item) : e;
+    }), o = () => t.column.accessor ? t.column.accessor(t.item) : t.column.key.split(".").reduce((e, a) => e?.[a], t.item), i = g("whitespace-nowrap ui-text", {
+      variants: {
+        align: {
+          left: "text-left",
+          center: "text-center",
+          right: "text-right"
+        },
+        padding: {
+          compact: "px-4 py-2",
+          normal: "px-6 py-4",
+          comfortable: "px-8 py-6"
+        },
+        textSize: {
+          xs: "text-xs",
+          sm: "text-sm",
+          base: "text-base",
+          lg: "text-lg"
+        }
+      },
+      defaultVariants: {
+        align: "left",
+        padding: "normal",
+        textSize: "md"
+      }
+    }), c = r(() => {
+      const e = t.align || t.column.align || "left", a = t.textColor ? `text-${t.textColor}` : "ui-text", s = t.width ? `w-${t.width}` : "";
+      return y(
+        i({
+          align: e,
+          padding: t.padding,
+          textSize: t.textSize
+        }),
+        a,
+        s,
+        t.column.cellClasses
+      );
+    });
+    return (e, a) => (m(), u("td", {
+      class: d(c.value)
+    }, [
+      p(e.$slots, "default", {}, () => [
+        x(f(n.value), 1)
+      ])
+    ], 2));
+  }
+};
+export {
+  v as default
+};

package/dist/components/DataTableFilters.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),v=require("./Button.cjs"),H=require("./Select.cjs"),g=require("class-variance-authority"),d=require("../utils/cn.cjs"),c=require("./Icon.cjs"),J={class:"bg-white border-b border-gray-200"},X={key:0,class:"flex-1 min-w-80 max-w-md"},Y={class:"relative group"},Z=["model-value","placeholder"],_={key:1,class:"min-w-36"},K={class:"relative"},ee=["value"],te={key:3,class:"flex items-center gap-2"},ae={class:"flex items-center gap-3 ml-auto"},le={class:"grid grid-cols-1 lg:grid-cols-3 gap-6"},se={class:"flex items-center justify-between"},oe={class:"flex items-center gap-3"},re={class:"relative flex-1"},ne=["model-value","placeholder","onInput"],ce={class:"relative flex-1"},de=["model-value","placeholder","onInput"],ie=["onClick"],ue={class:"flex items-center gap-3 flex-wrap"},me=["onClick"],pe={key:2,class:"px-6 py-3 bg-gray-50 border-t border-gray-200"},fe={class:"flex items-center justify-between"},ye={class:"flex items-center gap-4"},ve={class:"text-sm text-gray-600"},ge={class:"font-medium"},he={__name:"DataTableFilters",props:{searchQuery:{type:String,default:""},searchPlaceholder:{type:String,default:"Search..."},selectedStatus:{type:String,default:""},statusOptions:{type:Array,default:()=>[]},showDateFilter:{type:Boolean,default:!1},dateFrom:{type:String,default:""},dateTo:{type:String,default:""},dateFilters:{type:Array,default:()=>[],validator:o=>o.every(i=>Object.prototype.hasOwnProperty.call(i,"key")&&Object.prototype.hasOwnProperty.call(i,"label")&&Object.prototype.hasOwnProperty.call(i,"from")&&Object.prototype.hasOwnProperty.call(i,"to"))},showExport:{type:Boolean,default:!1},showAdd:{type:Boolean,default:!1},showTableInfo:{type:Boolean,default:!0},showSearch:{type:Boolean,default:!0},showFilters:{type:Boolean,default:!0},totalItems:{type:Number,default:0},itemLabel:{type:String,default:"items"},variant:{type:String,default:"default",validator:o=>["default","minimal","bordered"].includes(o)},padding:{type:String,default:"normal",validator:o=>["compact","normal","comfortable"].includes(o)}},emits:["update:searchQuery","update:selectedStatus","update:dateFrom","update:dateTo","update:dateFilters","export","add","clear-filters"],setup(o,{emit:i}){const s=o,n=i,m=e.ref(!1),V=g.cva("flex flex-wrap items-center gap-4",{variants:{variant:{default:"bg-white",minimal:"bg-transparent",bordered:"bg-gray-50"},padding:{compact:"px-4 py-3",normal:"px-6 py-4",comfortable:"px-8 py-6"}},defaultVariants:{variant:"default",padding:"normal"}}),p=g.cva("border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all text-sm",{variants:{size:{sm:"px-2 py-1.5",md:"px-3 py-2.5",lg:"px-4 py-3"}},defaultVariants:{size:"md"}}),f=g.cva("rounded-lg flex items-center font-medium transition-all",{variants:{variant:{default:"text-gray-700 hover:text-gray-900 border border-gray-200 hover:bg-gray-50 hover:border-gray-300 bg-white",primary:"text-white bg-blue-600 hover:bg-blue-700 border border-blue-600 shadow-sm",success:"text-white bg-green-600 hover:bg-green-700 border border-green-600 shadow-sm",ghost:"text-gray-600 hover:text-gray-800 hover:bg-gray-100"},size:{sm:"px-2 py-1.5 text-xs",md:"px-3 py-2 text-sm",lg:"px-4 py-2.5 text-sm"}},defaultVariants:{variant:"default",size:"md"}}),y=l=>!!(l.from||l.to),w=l=>{const t=[...s.dateFilters],a=t.findIndex(r=>r.key===l);a>=0&&(t[a]={...t[a],from:"",to:""},n("update:dateFilters",t))},N=l=>`text-xs px-2 py-1 rounded ${y(l)?"bg-blue-100 text-blue-700":"bg-gray-100 text-gray-600"}`,B=()=>{m.value=!m.value},h=(l,t,a)=>{const r=[...s.dateFilters],u=r.findIndex(G=>G.key===l);u>=0&&(r[u]={...r[u],[t]:a},n("update:dateFilters",r))},b=e.computed(()=>{const l=s.searchQuery,t=s.selectedStatus,a=s.dateFrom||s.dateTo,r=s.dateFilters.some(u=>u.from||u.to);return l||t||a||r}),k=e.computed(()=>{let l=0;return s.searchQuery&&l++,s.selectedStatus&&l++,(s.dateFrom||s.dateTo)&&l++,l+=s.dateFilters.filter(t=>t.from||t.to).length,l}),x=e.computed(()=>{const l=[];if(s.searchQuery&&s.searchQuery.trim()&&l.push({key:"search",label:"Search",value:`"${s.searchQuery}"`,icon:"magnifying-glass"}),s.selectedStatus){const t=s.statusOptions.find(a=>a.value===s.selectedStatus);l.push({key:"status",label:"Status",value:t?.label||s.selectedStatus,icon:"filter"})}if(s.dateFrom||s.dateTo){let t="";s.dateFrom&&s.dateTo?t=`${s.dateFrom} to ${s.dateTo}`:s.dateFrom?t=`From ${s.dateFrom}`:s.dateTo&&(t=`Until ${s.dateTo}`),t&&l.push({key:"date",label:"Date Range",value:t,icon:"calendar"})}return s.dateFilters.forEach(t=>{if(t.from||t.to){let a="";t.from&&t.to?a=`${t.from} to ${t.to}`:t.from?a=`From ${t.from}`:t.to&&(a=`Until ${t.to}`),a&&l.push({key:`date-${t.key}`,label:t.label,value:a,icon:"calendar"})}}),l}),E=e.computed(()=>d.cn(V({variant:s.variant,padding:s.padding}))),S=e.computed(()=>"absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400 group-hover:text-gray-600 transition-colors"),F=e.computed(()=>d.cn(p({size:"md"}),"w-full pl-10 pr-10 hover:border-gray-300")),z=e.computed(()=>"absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 p-1 hover:bg-gray-100 rounded-full transition-all"),$=e.computed(()=>d.cn(p({size:"md"}),"w-full pr-8 appearance-none hover:border-gray-300")),T=e.computed(()=>{const l=m.value||b.value;return d.cn(f({variant:l?"primary":"default",size:"lg"}),"gap-2")}),D=e.computed(()=>"bg-white text-blue-600 text-xs px-1.5 py-0.5 rounded-full min-w-[20px] text-center font-semibold"),I=e.computed(()=>"px-6 py-4 border-t border-gray-100 bg-gray-50"),C=e.computed(()=>d.cn(p({size:"md"}),"pl-10 pr-3")),A=e.computed(()=>"text-sm font-semibold text-gray-700"),O=e.computed(()=>"text-gray-500 text-sm font-medium"),Q=e.computed(()=>"text-gray-400 hover:text-gray-600 p-1.5 hover:bg-gray-200 rounded-full transition-all"),L=e.computed(()=>d.cn(f({variant:"ghost",size:"md"}))),j=e.computed(()=>d.cn(f({variant:"default",size:"lg"}))),P=e.computed(()=>"px-6 py-3 bg-blue-50 border-t border-blue-100"),q=e.computed(()=>"text-sm font-semibold text-blue-800"),R=e.computed(()=>"flex items-center gap-1.5 bg-white border border-blue-200 text-blue-800 px-3 py-1.5 rounded-full text-sm font-medium"),M=e.computed(()=>"text-blue-600 hover:text-blue-800 ml-1 hover:bg-blue-100 rounded-full p-0.5 transition-all"),U=()=>{n("update:searchQuery",""),n("update:selectedStatus",""),n("update:dateFrom",""),n("update:dateTo","");const l=s.dateFilters.map(t=>({...t,from:"",to:""}));n("update:dateFilters",l),n("clear-filters")},W=l=>{switch(l){case"search":n("update:searchQuery","");break;case"status":n("update:selectedStatus","");break;case"date":n("update:dateFrom",""),n("update:dateTo","");break;default:if(l.startsWith("date-")){const t=l.replace("date-",""),a=s.dateFilters.map(r=>r.key===t?{...r,from:"",to:""}:r);n("update:dateFilters",a)}break}};return(l,t)=>(e.openBlock(),e.createElementBlock("div",J,[e.createElementVNode("div",{class:e.normalizeClass(E.value)},[o.showSearch?(e.openBlock(),e.createElementBlock("div",X,[e.createElementVNode("div",Y,[e.createVNode(c.default,{icon:"magnifying-glass",class:e.normalizeClass(S.value)},null,8,["class"]),e.createElementVNode("input",{"model-value":o.searchQuery,placeholder:o.searchPlaceholder,class:e.normalizeClass(F.value),onInput:t[0]||(t[0]=a=>l.$emit("update:searchQuery",a.target.value))},null,42,Z),o.searchQuery?(e.openBlock(),e.createElementBlock("button",{key:0,class:e.normalizeClass(z.value),onClick:t[1]||(t[1]=a=>l.$emit("update:searchQuery",""))},[e.createVNode(c.default,{icon:"xmark",class:"w-3 h-3"})],2)):e.createCommentVNode("",!0)])])):e.createCommentVNode("",!0),o.showFilters&&o.statusOptions.length>0?(e.openBlock(),e.createElementBlock("div",_,[e.createElementVNode("div",K,[e.createVNode(H.default,{"model-value":o.selectedStatus,class:e.normalizeClass($.value),onChange:t[2]||(t[2]=a=>l.$emit("update:selectedStatus",a.target.value))},{default:e.withCtx(()=>[t[5]||(t[5]=e.createElementVNode("option",{value:""}," All Status ",-1)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.statusOptions,a=>(e.openBlock(),e.createElementBlock("option",{key:a.value,value:a.value},e.toDisplayString(a.label),9,ee))),128))]),_:1},8,["model-value","class"]),e.createVNode(c.default,{icon:"chevron-down",class:"absolute right-2 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none"})])])):e.createCommentVNode("",!0),o.showFilters?(e.openBlock(),e.createElementBlock("button",{key:2,class:e.normalizeClass(T.value),onClick:B},[e.createVNode(c.default,{icon:"filter",class:"w-4 h-4"}),t[6]||(t[6]=e.createTextVNode(" Filters ",-1)),k.value>0?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(D.value)},e.toDisplayString(k.value),3)):e.createCommentVNode("",!0),e.createVNode(c.default,{icon:m.value?"chevron-up":"chevron-down",class:"w-4 h-4 ml-1"},null,8,["icon"])],2)):e.createCommentVNode("",!0),l.$slots.filters?(e.openBlock(),e.createElementBlock("div",te,[e.renderSlot(l.$slots,"filters")])):e.createCommentVNode("",!0),e.createElementVNode("div",ae,[b.value?(e.openBlock(),e.createBlock(v.default,{key:0,class:e.normalizeClass(L.value),onClick:U},{default:e.withCtx(()=>[e.createVNode(c.default,{icon:"rotate-left",class:"w-4 h-4 mr-2"}),t[7]||(t[7]=e.createTextVNode(" Clear All ",-1))]),_:1},8,["class"])):e.createCommentVNode("",!0),o.showExport?(e.openBlock(),e.createBlock(v.default,{key:1,class:e.normalizeClass(j.value),onClick:t[3]||(t[3]=a=>l.$emit("export"))},{default:e.withCtx(()=>[e.createVNode(c.default,{icon:"download",class:"w-4 h-4 mr-2"}),t[8]||(t[8]=e.createTextVNode(" Export ",-1))]),_:1},8,["class"])):e.createCommentVNode("",!0),e.renderSlot(l.$slots,"actions",{},()=>[o.showAdd?(e.openBlock(),e.createBlock(v.default,{key:0,variant:"success",size:"lg",onClick:t[4]||(t[4]=a=>l.$emit("add"))},{default:e.withCtx(()=>[e.createVNode(c.default,{icon:"plus",class:"w-4 h-4 mr-2"}),t[9]||(t[9]=e.createTextVNode(" Add ",-1))]),_:1})):e.createCommentVNode("",!0)])])],2),o.showFilters&&m.value&&o.dateFilters.length>0?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(I.value)},[e.createElementVNode("div",le,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.dateFilters,a=>(e.openBlock(),e.createElementBlock("div",{key:a.key,class:"space-y-3"},[e.createElementVNode("div",se,[e.createElementVNode("label",{class:e.normalizeClass(A.value)},e.toDisplayString(a.label),3),e.createElementVNode("span",{class:e.normalizeClass(N(a))},e.toDisplayString(y(a)?"Active":"Inactive"),3)]),e.createElementVNode("div",oe,[e.createElementVNode("div",re,[e.createVNode(c.default,{icon:"calendar",class:"absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400"}),e.createElementVNode("input",{type:"date","model-value":a.from,class:e.normalizeClass(C.value),placeholder:`From ${a.label}`,onInput:r=>h(a.key,"from",r.target.value)},null,42,ne)]),e.createElementVNode("span",{class:e.normalizeClass(O.value)},"to",2),e.createElementVNode("div",ce,[e.createVNode(c.default,{icon:"calendar",class:"absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400"}),e.createElementVNode("input",{type:"date","model-value":a.to,class:e.normalizeClass(C.value),placeholder:`To ${a.label}`,onInput:r=>h(a.key,"to",r.target.value)},null,42,de)]),y(a)?(e.openBlock(),e.createElementBlock("button",{key:0,class:e.normalizeClass(Q.value),title:"Clear this filter",onClick:r=>w(a.key)},[e.createVNode(c.default,{icon:"xmark",class:"w-4 h-4"})],10,ie)):e.createCommentVNode("",!0)])]))),128))])],2)):e.createCommentVNode("",!0),o.showFilters&&x.value.length>0?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(P.value)},[e.createElementVNode("div",ue,[e.createElementVNode("span",{class:e.normalizeClass(q.value)},"Active filters:",2),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(x.value,a=>(e.openBlock(),e.createElementBlock("div",{key:a.key,class:e.normalizeClass(R.value)},[e.createVNode(c.default,{icon:a.icon,class:"w-3 h-3"},null,8,["icon"]),e.createElementVNode("span",null,e.toDisplayString(a.label)+": "+e.toDisplayString(a.value),1),e.createElementVNode("button",{class:e.normalizeClass(M.value),onClick:r=>W(a.key)},[e.createVNode(c.default,{icon:"xmark",class:"w-3 h-3"})],10,me)],2))),128))])],2)):e.createCommentVNode("",!0),o.showTableInfo?(e.openBlock(),e.createElementBlock("div",pe,[e.createElementVNode("div",fe,[e.createElementVNode("div",ye,[e.createElementVNode("span",ve,[e.createElementVNode("span",ge,e.toDisplayString(o.totalItems||0),1),e.createTextVNode(" "+e.toDisplayString(o.itemLabel||"items")+" found ",1)])])])])):e.createCommentVNode("",!0)]))}};exports.default=he;

package/dist/components/DataTableFilters.js

@@ -0,0 +1,519 @@
+import { ref as oe, computed as o, createElementBlock as u, openBlock as n, createElementVNode as r, createCommentVNode as p, normalizeClass as i, createVNode as c, withCtx as w, Fragment as S, renderList as $, toDisplayString as f, createTextVNode as x, renderSlot as z, createBlock as T } from "vue";
+import I from "./Button.js";
+import ne from "./Select.js";
+import { cva as B } from "class-variance-authority";
+import { cn as y } from "../utils/cn.js";
+import v from "./Icon.js";
+const ie = { class: "bg-white border-b border-gray-200" }, de = {
+  key: 0,
+  class: "flex-1 min-w-80 max-w-md"
+}, ue = { class: "relative group" }, ce = ["model-value", "placeholder"], me = {
+  key: 1,
+  class: "min-w-36"
+}, pe = { class: "relative" }, ve = ["value"], fe = {
+  key: 3,
+  class: "flex items-center gap-2"
+}, ye = { class: "flex items-center gap-3 ml-auto" }, ge = { class: "grid grid-cols-1 lg:grid-cols-3 gap-6" }, he = { class: "flex items-center justify-between" }, be = { class: "flex items-center gap-3" }, xe = { class: "relative flex-1" }, we = ["model-value", "placeholder", "onInput"], ke = { class: "relative flex-1" }, Fe = ["model-value", "placeholder", "onInput"], Ce = ["onClick"], Se = { class: "flex items-center gap-3 flex-wrap" }, $e = ["onClick"], Te = {
+  key: 2,
+  class: "px-6 py-3 bg-gray-50 border-t border-gray-200"
+}, Ie = { class: "flex items-center justify-between" }, Be = { class: "flex items-center gap-4" }, Ve = { class: "text-sm text-gray-600" }, De = { class: "font-medium" }, Le = {
+  __name: "DataTableFilters",
+  props: {
+    searchQuery: {
+      type: String,
+      default: ""
+    },
+    searchPlaceholder: {
+      type: String,
+      default: "Search..."
+    },
+    selectedStatus: {
+      type: String,
+      default: ""
+    },
+    statusOptions: {
+      type: Array,
+      default: () => []
+    },
+    // Legacy props for backward compatibility
+    showDateFilter: {
+      type: Boolean,
+      default: !1
+    },
+    dateFrom: {
+      type: String,
+      default: ""
+    },
+    dateTo: {
+      type: String,
+      default: ""
+    },
+    // Dynamic date filters prop (NO active property required)
+    dateFilters: {
+      type: Array,
+      default: () => [],
+      validator: (l) => l.every(
+        (g) => Object.prototype.hasOwnProperty.call(g, "key") && Object.prototype.hasOwnProperty.call(g, "label") && Object.prototype.hasOwnProperty.call(g, "from") && Object.prototype.hasOwnProperty.call(g, "to")
+      )
+    },
+    showExport: {
+      type: Boolean,
+      default: !1
+    },
+    showAdd: {
+      type: Boolean,
+      default: !1
+    },
+    showTableInfo: {
+      type: Boolean,
+      default: !0
+    },
+    showSearch: {
+      type: Boolean,
+      default: !0
+    },
+    showFilters: {
+      type: Boolean,
+      default: !0
+    },
+    totalItems: {
+      type: Number,
+      default: 0
+    },
+    itemLabel: {
+      type: String,
+      default: "items"
+    },
+    variant: {
+      type: String,
+      default: "default",
+      validator: (l) => ["default", "minimal", "bordered"].includes(l)
+    },
+    padding: {
+      type: String,
+      default: "normal",
+      validator: (l) => ["compact", "normal", "comfortable"].includes(l)
+    }
+  },
+  emits: [
+    "update:searchQuery",
+    "update:selectedStatus",
+    "update:dateFrom",
+    "update:dateTo",
+    "update:dateFilters",
+    "export",
+    "add",
+    "clear-filters"
+  ],
+  setup(l, { emit: g }) {
+    const s = l, m = g, b = oe(!1), j = B("flex flex-wrap items-center gap-4", {
+      variants: {
+        variant: {
+          default: "bg-white",
+          minimal: "bg-transparent",
+          bordered: "bg-gray-50"
+        },
+        padding: {
+          compact: "px-4 py-3",
+          normal: "px-6 py-4",
+          comfortable: "px-8 py-6"
+        }
+      },
+      defaultVariants: {
+        variant: "default",
+        padding: "normal"
+      }
+    }), k = B("border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all text-sm", {
+      variants: {
+        size: {
+          sm: "px-2 py-1.5",
+          md: "px-3 py-2.5",
+          lg: "px-4 py-3"
+        }
+      },
+      defaultVariants: {
+        size: "md"
+      }
+    }), F = B("rounded-lg flex items-center font-medium transition-all", {
+      variants: {
+        variant: {
+          default: "text-gray-700 hover:text-gray-900 border border-gray-200 hover:bg-gray-50 hover:border-gray-300 bg-white",
+          primary: "text-white bg-blue-600 hover:bg-blue-700 border border-blue-600 shadow-sm",
+          success: "text-white bg-green-600 hover:bg-green-700 border border-green-600 shadow-sm",
+          ghost: "text-gray-600 hover:text-gray-800 hover:bg-gray-100"
+        },
+        size: {
+          sm: "px-2 py-1.5 text-xs",
+          md: "px-3 py-2 text-sm",
+          lg: "px-4 py-2.5 text-sm"
+        }
+      },
+      defaultVariants: {
+        variant: "default",
+        size: "md"
+      }
+    }), C = (a) => !!(a.from || a.to), E = (a) => {
+      const e = [...s.dateFilters], t = e.findIndex((d) => d.key === a);
+      t >= 0 && (e[t] = {
+        ...e[t],
+        from: "",
+        to: ""
+      }, m("update:dateFilters", e));
+    }, L = (a) => `text-xs px-2 py-1 rounded ${C(a) ? "bg-blue-100 text-blue-700" : "bg-gray-100 text-gray-600"}`, P = () => {
+      b.value = !b.value;
+    }, V = (a, e, t) => {
+      const d = [...s.dateFilters], h = d.findIndex((re) => re.key === a);
+      h >= 0 && (d[h] = {
+        ...d[h],
+        [e]: t
+      }, m("update:dateFilters", d));
+    }, D = o(() => {
+      const a = s.searchQuery, e = s.selectedStatus, t = s.dateFrom || s.dateTo, d = s.dateFilters.some((h) => h.from || h.to);
+      return a || e || t || d;
+    }), A = o(() => {
+      let a = 0;
+      return s.searchQuery && a++, s.selectedStatus && a++, (s.dateFrom || s.dateTo) && a++, a += s.dateFilters.filter((e) => e.from || e.to).length, a;
+    }), O = o(() => {
+      const a = [];
+      if (s.searchQuery && s.searchQuery.trim() && a.push({
+        key: "search",
+        label: "Search",
+        value: `"${s.searchQuery}"`,
+        icon: "magnifying-glass"
+      }), s.selectedStatus) {
+        const e = s.statusOptions.find((t) => t.value === s.selectedStatus);
+        a.push({
+          key: "status",
+          label: "Status",
+          value: e?.label || s.selectedStatus,
+          icon: "filter"
+        });
+      }
+      if (s.dateFrom || s.dateTo) {
+        let e = "";
+        s.dateFrom && s.dateTo ? e = `${s.dateFrom} to ${s.dateTo}` : s.dateFrom ? e = `From ${s.dateFrom}` : s.dateTo && (e = `Until ${s.dateTo}`), e && a.push({
+          key: "date",
+          label: "Date Range",
+          value: e,
+          icon: "calendar"
+        });
+      }
+      return s.dateFilters.forEach((e) => {
+        if (e.from || e.to) {
+          let t = "";
+          e.from && e.to ? t = `${e.from} to ${e.to}` : e.from ? t = `From ${e.from}` : e.to && (t = `Until ${e.to}`), t && a.push({
+            key: `date-${e.key}`,
+            label: e.label,
+            value: t,
+            icon: "calendar"
+          });
+        }
+      }), a;
+    }), N = o(
+      () => y(j({
+        variant: s.variant,
+        padding: s.padding
+      }))
+    ), R = o(
+      () => "absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400 group-hover:text-gray-600 transition-colors"
+    ), U = o(
+      () => y(
+        k({ size: "md" }),
+        "w-full pl-10 pr-10 hover:border-gray-300"
+      )
+    ), W = o(
+      () => "absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 p-1 hover:bg-gray-100 rounded-full transition-all"
+    ), q = o(
+      () => y(
+        k({ size: "md" }),
+        "w-full pr-8 appearance-none hover:border-gray-300"
+      )
+    ), G = o(() => {
+      const a = b.value || D.value;
+      return y(
+        F({
+          variant: a ? "primary" : "default",
+          size: "lg"
+        }),
+        "gap-2"
+      );
+    }), H = o(
+      () => "bg-white text-blue-600 text-xs px-1.5 py-0.5 rounded-full min-w-[20px] text-center font-semibold"
+    ), J = o(
+      () => "px-6 py-4 border-t border-gray-100 bg-gray-50"
+    ), Q = o(
+      () => y(k({ size: "md" }), "pl-10 pr-3")
+    ), M = o(
+      () => "text-sm font-semibold text-gray-700"
+    ), X = o(
+      () => "text-gray-500 text-sm font-medium"
+    ), Y = o(
+      () => "text-gray-400 hover:text-gray-600 p-1.5 hover:bg-gray-200 rounded-full transition-all"
+    ), Z = o(
+      () => y(F({ variant: "ghost", size: "md" }))
+    ), _ = o(
+      () => y(F({ variant: "default", size: "lg" }))
+    ), K = o(
+      () => "px-6 py-3 bg-blue-50 border-t border-blue-100"
+    ), ee = o(
+      () => "text-sm font-semibold text-blue-800"
+    ), te = o(
+      () => "flex items-center gap-1.5 bg-white border border-blue-200 text-blue-800 px-3 py-1.5 rounded-full text-sm font-medium"
+    ), ae = o(
+      () => "text-blue-600 hover:text-blue-800 ml-1 hover:bg-blue-100 rounded-full p-0.5 transition-all"
+    ), se = () => {
+      m("update:searchQuery", ""), m("update:selectedStatus", ""), m("update:dateFrom", ""), m("update:dateTo", "");
+      const a = s.dateFilters.map((e) => ({
+        ...e,
+        from: "",
+        to: ""
+      }));
+      m("update:dateFilters", a), m("clear-filters");
+    }, le = (a) => {
+      switch (a) {
+        case "search":
+          m("update:searchQuery", "");
+          break;
+        case "status":
+          m("update:selectedStatus", "");
+          break;
+        case "date":
+          m("update:dateFrom", ""), m("update:dateTo", "");
+          break;
+        default:
+          if (a.startsWith("date-")) {
+            const e = a.replace("date-", ""), t = s.dateFilters.map(
+              (d) => d.key === e ? { ...d, from: "", to: "" } : d
+            );
+            m("update:dateFilters", t);
+          }
+          break;
+      }
+    };
+    return (a, e) => (n(), u("div", ie, [
+      r("div", {
+        class: i(N.value)
+      }, [
+        l.showSearch ? (n(), u("div", de, [
+          r("div", ue, [
+            c(v, {
+              icon: "magnifying-glass",
+              class: i(R.value)
+            }, null, 8, ["class"]),
+            r("input", {
+              "model-value": l.searchQuery,
+              placeholder: l.searchPlaceholder,
+              class: i(U.value),
+              onInput: e[0] || (e[0] = (t) => a.$emit("update:searchQuery", t.target.value))
+            }, null, 42, ce),
+            l.searchQuery ? (n(), u("button", {
+              key: 0,
+              class: i(W.value),
+              onClick: e[1] || (e[1] = (t) => a.$emit("update:searchQuery", ""))
+            }, [
+              c(v, {
+                icon: "xmark",
+                class: "w-3 h-3"
+              })
+            ], 2)) : p("", !0)
+          ])
+        ])) : p("", !0),
+        l.showFilters && l.statusOptions.length > 0 ? (n(), u("div", me, [
+          r("div", pe, [
+            c(ne, {
+              "model-value": l.selectedStatus,
+              class: i(q.value),
+              onChange: e[2] || (e[2] = (t) => a.$emit("update:selectedStatus", t.target.value))
+            }, {
+              default: w(() => [
+                e[5] || (e[5] = r("option", { value: "" }, " All Status ", -1)),
+                (n(!0), u(S, null, $(l.statusOptions, (t) => (n(), u("option", {
+                  key: t.value,
+                  value: t.value
+                }, f(t.label), 9, ve))), 128))
+              ]),
+              _: 1
+            }, 8, ["model-value", "class"]),
+            c(v, {
+              icon: "chevron-down",
+              class: "absolute right-2 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none"
+            })
+          ])
+        ])) : p("", !0),
+        l.showFilters ? (n(), u("button", {
+          key: 2,
+          class: i(G.value),
+          onClick: P
+        }, [
+          c(v, {
+            icon: "filter",
+            class: "w-4 h-4"
+          }),
+          e[6] || (e[6] = x(" Filters ", -1)),
+          A.value > 0 ? (n(), u("span", {
+            key: 0,
+            class: i(H.value)
+          }, f(A.value), 3)) : p("", !0),
+          c(v, {
+            icon: b.value ? "chevron-up" : "chevron-down",
+            class: "w-4 h-4 ml-1"
+          }, null, 8, ["icon"])
+        ], 2)) : p("", !0),
+        a.$slots.filters ? (n(), u("div", fe, [
+          z(a.$slots, "filters")
+        ])) : p("", !0),
+        r("div", ye, [
+          D.value ? (n(), T(I, {
+            key: 0,
+            class: i(Z.value),
+            onClick: se
+          }, {
+            default: w(() => [
+              c(v, {
+                icon: "rotate-left",
+                class: "w-4 h-4 mr-2"
+              }),
+              e[7] || (e[7] = x(" Clear All ", -1))
+            ]),
+            _: 1
+          }, 8, ["class"])) : p("", !0),
+          l.showExport ? (n(), T(I, {
+            key: 1,
+            class: i(_.value),
+            onClick: e[3] || (e[3] = (t) => a.$emit("export"))
+          }, {
+            default: w(() => [
+              c(v, {
+                icon: "download",
+                class: "w-4 h-4 mr-2"
+              }),
+              e[8] || (e[8] = x(" Export ", -1))
+            ]),
+            _: 1
+          }, 8, ["class"])) : p("", !0),
+          z(a.$slots, "actions", {}, () => [
+            l.showAdd ? (n(), T(I, {
+              key: 0,
+              variant: "success",
+              size: "lg",
+              onClick: e[4] || (e[4] = (t) => a.$emit("add"))
+            }, {
+              default: w(() => [
+                c(v, {
+                  icon: "plus",
+                  class: "w-4 h-4 mr-2"
+                }),
+                e[9] || (e[9] = x(" Add ", -1))
+              ]),
+              _: 1
+            })) : p("", !0)
+          ])
+        ])
+      ], 2),
+      l.showFilters && b.value && l.dateFilters.length > 0 ? (n(), u("div", {
+        key: 0,
+        class: i(J.value)
+      }, [
+        r("div", ge, [
+          (n(!0), u(S, null, $(l.dateFilters, (t) => (n(), u("div", {
+            key: t.key,
+            class: "space-y-3"
+          }, [
+            r("div", he, [
+              r("label", {
+                class: i(M.value)
+              }, f(t.label), 3),
+              r("span", {
+                class: i(L(t))
+              }, f(C(t) ? "Active" : "Inactive"), 3)
+            ]),
+            r("div", be, [
+              r("div", xe, [
+                c(v, {
+                  icon: "calendar",
+                  class: "absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400"
+                }),
+                r("input", {
+                  type: "date",
+                  "model-value": t.from,
+                  class: i(Q.value),
+                  placeholder: `From ${t.label}`,
+                  onInput: (d) => V(t.key, "from", d.target.value)
+                }, null, 42, we)
+              ]),
+              r("span", {
+                class: i(X.value)
+              }, "to", 2),
+              r("div", ke, [
+                c(v, {
+                  icon: "calendar",
+                  class: "absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400"
+                }),
+                r("input", {
+                  type: "date",
+                  "model-value": t.to,
+                  class: i(Q.value),
+                  placeholder: `To ${t.label}`,
+                  onInput: (d) => V(t.key, "to", d.target.value)
+                }, null, 42, Fe)
+              ]),
+              C(t) ? (n(), u("button", {
+                key: 0,
+                class: i(Y.value),
+                title: "Clear this filter",
+                onClick: (d) => E(t.key)
+              }, [
+                c(v, {
+                  icon: "xmark",
+                  class: "w-4 h-4"
+                })
+              ], 10, Ce)) : p("", !0)
+            ])
+          ]))), 128))
+        ])
+      ], 2)) : p("", !0),
+      l.showFilters && O.value.length > 0 ? (n(), u("div", {
+        key: 1,
+        class: i(K.value)
+      }, [
+        r("div", Se, [
+          r("span", {
+            class: i(ee.value)
+          }, "Active filters:", 2),
+          (n(!0), u(S, null, $(O.value, (t) => (n(), u("div", {
+            key: t.key,
+            class: i(te.value)
+          }, [
+            c(v, {
+              icon: t.icon,
+              class: "w-3 h-3"
+            }, null, 8, ["icon"]),
+            r("span", null, f(t.label) + ": " + f(t.value), 1),
+            r("button", {
+              class: i(ae.value),
+              onClick: (d) => le(t.key)
+            }, [
+              c(v, {
+                icon: "xmark",
+                class: "w-3 h-3"
+              })
+            ], 10, $e)
+          ], 2))), 128))
+        ])
+      ], 2)) : p("", !0),
+      l.showTableInfo ? (n(), u("div", Te, [
+        r("div", Ie, [
+          r("div", Be, [
+            r("span", Ve, [
+              r("span", De, f(l.totalItems || 0), 1),
+              x(" " + f(l.itemLabel || "items") + " found ", 1)
+            ])
+          ])
+        ])
+      ])) : p("", !0)
+    ]));
+  }
+};
+export {
+  Le as default
+};

package/dist/components/DataTableHeader.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),n=require("./Typography.cjs"),r=require("class-variance-authority"),s=require("../utils/cn.cjs"),p={class:"flex items-start justify-between"},f={key:0,class:"flex items-center gap-2"},v={__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 l=t,i=r.cva("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"}}),o=r.cva("font-semibold ui-text",{variants:{size:{sm:"text-base",md:"text-lg",lg:"text-xl"}},defaultVariants:{size:"md"}}),d=r.cva("ui-text mt-1",{variants:{size:{sm:"text-xs",md:"text-sm",lg:"text-base"}},defaultVariants:{size:"md"}}),c=e.computed(()=>s.cn(i({variant:l.variant,padding:l.padding}))),u=e.computed(()=>s.cn(o({size:"md"}))),m=e.computed(()=>s.cn(d({size:"md"})));return(a,g)=>t.title||t.description||a.$slots.header?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(c.value)},[e.renderSlot(a.$slots,"header",{},()=>[e.createElementVNode("div",p,[e.createElementVNode("div",null,[t.title?(e.openBlock(),e.createBlock(n.default,{key:0,class:e.normalizeClass(u.value)},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.title),1)]),_:1},8,["class"])):e.createCommentVNode("",!0),t.description?(e.openBlock(),e.createBlock(n.default,{key:1,class:e.normalizeClass(m.value)},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.description),1)]),_:1},8,["class"])):e.createCommentVNode("",!0)]),a.$slots.filters?(e.openBlock(),e.createElementBlock("div",f,[e.renderSlot(a.$slots,"filters")])):e.createCommentVNode("",!0)])])],2)):e.createCommentVNode("",!0)}};exports.default=v;