@gspa/ui 0.1.3 → 0.2.0

package/dist/components/FileUpload.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),F=require("class-variance-authority"),z=require("../utils/cn.cjs"),m=require("./Icon.cjs"),C=require("./CircularProgress.cjs"),M={class:"ui-surface-strong w-full"},T=["multiple","accept"],q={class:"ui-surface-strong flex items-center justify-center px-4 py-3"},j={class:"rounded-full p-2 mr-3"},O={class:"flex flex-col"},U={class:"text-xs ui-text"},$={key:0,class:"ml-2"},A={key:1,class:"mt-4 space-y-2"},L={class:"flex items-center space-x-3"},P={class:"flex flex-col"},G={class:"text-sm font-medium ui-text"},K={class:"flex items-center space-x-3"},W={class:"ui-success-soft rounded-md p-2"},H={class:"flex flex-col"},J={class:"text-sm font-medium ui-text"},Q={class:"text-xs ui-text"},R=["onClick"],X={__name:"FileUpload",props:{multiple:Boolean,accept:String,maxSize:Number,maxFiles:Number,variant:{type:String,default:"dashed",validator:l=>["default","dashed"].includes(l)}},emits:["files-selected","file-removed"],setup(l,{emit:x}){const a=l,u=x,s=e.ref([]),i=e.ref(!1),p=e.ref(null),c=e.ref([]),y=F.cva("border-2 border-dashed rounded-xl cursor-pointer transition-all duration-300 ease-in-out shadow-sm",{variants:{variant:{default:"ui-border-strong  hover:border-(--ui-border-strong) hover:bg-(--ui-surface) focus-within:ring-2 focus-within:ring-(--ui-primary)",dashed:"border-(--ui-primary-soft) hover:border-(--ui-primary-soft) hover:bg-(--ui-primary-soft) focus-within:ring-2 focus-within:ring-(--ui-primary)"}}}),_=e.computed(()=>z.cn(y({variant:a.variant}),{"border-(--ui-success) ui-success-soft shadow-md":s.value.length>0&&!i.value,"border-(--ui-primary) ui-primary-soft ring-4 ring-(--ui-primary) shadow-lg":i.value,"border-(--ui-success) ui-success-soft ring-4 ring-(--ui-success) shadow-lg":s.value.length>0&&i.value})),k=r=>{r.preventDefault(),i.value=!1;const o=Array.from(r.dataTransfer.files);f(o)},N=r=>{r.preventDefault()},b=r=>{r.preventDefault(),i.value=!0},V=r=>{r.preventDefault(),i.value=!1},E=()=>{p.value?.click()},w=r=>{const o=Array.from(r.target.files);f(o)},f=r=>{const o=r.filter(t=>!(a.maxSize&&t.size>a.maxSize));if(o.length===0)return;if(a.maxFiles){const t=s.value.length+c.value.length;if(t>=a.maxFiles)return;const d=a.maxFiles-t;o.splice(d)}const n=o.map(t=>e.reactive({file:t,progress:0,uploading:!0}));c.value.push(...n),n.forEach(t=>{const d=2e3+Math.random()*2e3,h=50,D=100/(d/h),S=setInterval(()=>{t.progress+=D,t.progress>=100&&(t.progress=100,t.uploading=!1,clearInterval(S),setTimeout(()=>{a.multiple?(s.value.push(t.file),u("files-selected",s.value)):(s.value=[t.file],u("files-selected",t.file)),c.value.splice(c.value.indexOf(t),1)},450))},h)})},B=r=>{s.value.splice(r,1),a.multiple?u("file-removed",s.value):u("file-removed",s.value.length>0?s.value[0]:null)},g=r=>{if(r===0)return"0 Bytes";const o=1024,n=["Bytes","KB","MB","GB"],t=Math.floor(Math.log(r)/Math.log(o));return parseFloat((r/Math.pow(o,t)).toFixed(2))+" "+n[t]},v=r=>r<40?{row:"border-red-500 bg-red-50",text:"text-red-700"}:r<80?{row:"border-orange-500 bg-orange-50",text:"text-orange-700"}:{row:"border-green-500 bg-green-50",text:"text-green-700"};return(r,o)=>(e.openBlock(),e.createElementBlock("div",M,[!s.value.length||l.multiple?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(_.value),onDrop:k,onDragover:N,onDragenter:b,onDragleave:V,onClick:E},[e.createElementVNode("input",{ref_key:"fileInput",ref:p,type:"file",multiple:l.multiple,accept:l.accept,class:"hidden",onChange:w},null,40,T),e.createElementVNode("div",q,[e.createElementVNode("div",j,[e.createVNode(m.default,{icon:"upload",class:"h-6 w-6 ui-text"})]),e.createElementVNode("div",O,[o[0]||(o[0]=e.createElementVNode("p",{class:"text-sm font-medium ui-text"},[e.createElementVNode("span",{class:"ui-primary font-semibold"},"Click to upload"),e.createTextVNode(" or drag and drop ")],-1)),e.createElementVNode("p",U,[e.createTextVNode(e.toDisplayString(l.maxSize?`Up to ${g(l.maxSize)}`:"No size limit")+" ",1),l.accept?(e.openBlock(),e.createElementBlock("span",$,"• "+e.toDisplayString(l.accept),1)):e.createCommentVNode("",!0)])])])],34)):e.createCommentVNode("",!0),s.value.length>0||c.value.length>0?(e.openBlock(),e.createElementBlock("div",A,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(c.value,(n,t)=>(e.openBlock(),e.createElementBlock("div",{key:`uploading-${t}`,class:e.normalizeClass(["flex items-center justify-between p-3 border rounded-lg shadow-sm transition-colors duration-300",v(n.progress).row])},[e.createElementVNode("div",L,[e.createVNode(C.default,{value:n.progress,max:100,size:"sm","dynamic-color":!0,class:"shrink-0"},null,8,["value"]),e.createElementVNode("div",P,[e.createElementVNode("span",G,e.toDisplayString(n.file.name),1),e.createElementVNode("span",{class:e.normalizeClass(["text-xs font-medium",v(n.progress).text])}," Uploading... "+e.toDisplayString(Math.round(n.progress))+"% ",3)])])],2))),128)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.value,(n,t)=>(e.openBlock(),e.createElementBlock("div",{key:`uploaded-${t}`,class:"flex items-center justify-between p-3 ui-surface border ui-border-strong rounded-lg shadow-sm hover:shadow-md transition-shadow"},[e.createElementVNode("div",K,[e.createElementVNode("div",W,[e.createVNode(m.default,{icon:"file",class:"h-5 w-5 ui-text"})]),e.createElementVNode("div",H,[e.createElementVNode("span",J,e.toDisplayString(n.name),1),e.createElementVNode("span",Q,e.toDisplayString(g(n.size)),1)])]),e.createElementVNode("button",{class:"ui-text hover:text-(--ui-danger) hover:bg-(--ui-danger-soft) rounded-full p-1 transition-colors",onClick:d=>B(t)},[e.createVNode(m.default,{icon:"x",class:"h-4 w-4"})],8,R)]))),128))])):e.createCommentVNode("",!0)]))}};exports.default=X;

package/dist/components/FileUpload.js

@@ -0,0 +1,195 @@
+import { ref as v, computed as L, createElementBlock as l, openBlock as u, createCommentVNode as h, normalizeClass as x, createElementVNode as s, createVNode as g, createTextVNode as z, toDisplayString as f, Fragment as D, renderList as S, reactive as G } from "vue";
+import { cva as K } from "class-variance-authority";
+import { cn as P } from "../utils/cn.js";
+import _ from "./Icon.js";
+import W from "./CircularProgress.js";
+const q = { class: "ui-surface-strong w-full" }, H = ["multiple", "accept"], J = { class: "ui-surface-strong flex items-center justify-center px-4 py-3" }, Q = { class: "rounded-full p-2 mr-3" }, R = { class: "flex flex-col" }, X = { class: "text-xs ui-text" }, Y = {
+  key: 0,
+  class: "ml-2"
+}, Z = {
+  key: 1,
+  class: "mt-4 space-y-2"
+}, I = { class: "flex items-center space-x-3" }, ee = { class: "flex flex-col" }, te = { class: "text-sm font-medium ui-text" }, se = { class: "flex items-center space-x-3" }, re = { class: "ui-success-soft rounded-md p-2" }, oe = { class: "flex flex-col" }, ie = { class: "text-sm font-medium ui-text" }, ae = { class: "text-xs ui-text" }, ne = ["onClick"], me = {
+  __name: "FileUpload",
+  props: {
+    multiple: Boolean,
+    accept: String,
+    maxSize: Number,
+    // in bytes
+    maxFiles: Number,
+    // maximum number of files
+    variant: {
+      type: String,
+      default: "dashed",
+      validator: (a) => ["default", "dashed"].includes(a)
+    }
+  },
+  emits: ["files-selected", "file-removed"],
+  setup(a, { emit: C }) {
+    const n = a, p = C, r = v([]), c = v(!1), b = v(null), d = v([]), B = K(
+      "border-2 border-dashed rounded-xl cursor-pointer transition-all duration-300 ease-in-out shadow-sm",
+      {
+        variants: {
+          variant: {
+            default: "ui-border-strong  hover:border-(--ui-border-strong) hover:bg-(--ui-surface) focus-within:ring-2 focus-within:ring-(--ui-primary)",
+            dashed: "border-(--ui-primary-soft) hover:border-(--ui-primary-soft) hover:bg-(--ui-primary-soft) focus-within:ring-2 focus-within:ring-(--ui-primary)"
+          }
+        }
+      }
+    ), M = L(
+      () => P(
+        B({ variant: n.variant }),
+        {
+          "border-(--ui-success) ui-success-soft shadow-md": r.value.length > 0 && !c.value,
+          "border-(--ui-primary) ui-primary-soft ring-4 ring-(--ui-primary) shadow-lg": c.value,
+          "border-(--ui-success) ui-success-soft ring-4 ring-(--ui-success) shadow-lg": r.value.length > 0 && c.value
+        }
+      )
+    ), N = (t) => {
+      t.preventDefault(), c.value = !1;
+      const o = Array.from(t.dataTransfer.files);
+      y(o);
+    }, $ = (t) => {
+      t.preventDefault();
+    }, T = (t) => {
+      t.preventDefault(), c.value = !0;
+    }, V = (t) => {
+      t.preventDefault(), c.value = !1;
+    }, E = () => {
+      b.value?.click();
+    }, U = (t) => {
+      const o = Array.from(t.target.files);
+      y(o);
+    }, y = (t) => {
+      const o = t.filter((e) => !(n.maxSize && e.size > n.maxSize));
+      if (o.length === 0) return;
+      if (n.maxFiles) {
+        const e = r.value.length + d.value.length;
+        if (e >= n.maxFiles)
+          return;
+        const m = n.maxFiles - e;
+        o.splice(m);
+      }
+      const i = o.map((e) => G({
+        file: e,
+        progress: 0,
+        uploading: !0
+      }));
+      d.value.push(...i), i.forEach((e) => {
+        const m = 2e3 + Math.random() * 2e3, k = 50, O = 100 / (m / k), A = setInterval(() => {
+          e.progress += O, e.progress >= 100 && (e.progress = 100, e.uploading = !1, clearInterval(A), setTimeout(() => {
+            n.multiple ? (r.value.push(e.file), p("files-selected", r.value)) : (r.value = [e.file], p("files-selected", e.file)), d.value.splice(d.value.indexOf(e), 1);
+          }, 450));
+        }, k);
+      });
+    }, j = (t) => {
+      r.value.splice(t, 1), n.multiple ? p("file-removed", r.value) : p("file-removed", r.value.length > 0 ? r.value[0] : null);
+    }, w = (t) => {
+      if (t === 0) return "0 Bytes";
+      const o = 1024, i = ["Bytes", "KB", "MB", "GB"], e = Math.floor(Math.log(t) / Math.log(o));
+      return parseFloat((t / Math.pow(o, e)).toFixed(2)) + " " + i[e];
+    }, F = (t) => t < 40 ? {
+      row: "border-red-500 bg-red-50",
+      text: "text-red-700"
+    } : t < 80 ? {
+      row: "border-orange-500 bg-orange-50",
+      text: "text-orange-700"
+    } : {
+      row: "border-green-500 bg-green-50",
+      text: "text-green-700"
+    };
+    return (t, o) => (u(), l("div", q, [
+      !r.value.length || a.multiple ? (u(), l("div", {
+        key: 0,
+        class: x(M.value),
+        onDrop: N,
+        onDragover: $,
+        onDragenter: T,
+        onDragleave: V,
+        onClick: E
+      }, [
+        s("input", {
+          ref_key: "fileInput",
+          ref: b,
+          type: "file",
+          multiple: a.multiple,
+          accept: a.accept,
+          class: "hidden",
+          onChange: U
+        }, null, 40, H),
+        s("div", J, [
+          s("div", Q, [
+            g(_, {
+              icon: "upload",
+              class: "h-6 w-6 ui-text"
+            })
+          ]),
+          s("div", R, [
+            o[0] || (o[0] = s("p", { class: "text-sm font-medium ui-text" }, [
+              s("span", { class: "ui-primary font-semibold" }, "Click to upload"),
+              z(" or drag and drop ")
+            ], -1)),
+            s("p", X, [
+              z(f(a.maxSize ? `Up to ${w(a.maxSize)}` : "No size limit") + " ", 1),
+              a.accept ? (u(), l("span", Y, "• " + f(a.accept), 1)) : h("", !0)
+            ])
+          ])
+        ])
+      ], 34)) : h("", !0),
+      r.value.length > 0 || d.value.length > 0 ? (u(), l("div", Z, [
+        (u(!0), l(D, null, S(d.value, (i, e) => (u(), l("div", {
+          key: `uploading-${e}`,
+          class: x([
+            "flex items-center justify-between p-3 border rounded-lg shadow-sm transition-colors duration-300",
+            F(i.progress).row
+          ])
+        }, [
+          s("div", I, [
+            g(W, {
+              value: i.progress,
+              max: 100,
+              size: "sm",
+              "dynamic-color": !0,
+              class: "shrink-0"
+            }, null, 8, ["value"]),
+            s("div", ee, [
+              s("span", te, f(i.file.name), 1),
+              s("span", {
+                class: x(["text-xs font-medium", F(i.progress).text])
+              }, " Uploading... " + f(Math.round(i.progress)) + "% ", 3)
+            ])
+          ])
+        ], 2))), 128)),
+        (u(!0), l(D, null, S(r.value, (i, e) => (u(), l("div", {
+          key: `uploaded-${e}`,
+          class: "flex items-center justify-between p-3 ui-surface border ui-border-strong rounded-lg shadow-sm hover:shadow-md transition-shadow"
+        }, [
+          s("div", se, [
+            s("div", re, [
+              g(_, {
+                icon: "file",
+                class: "h-5 w-5 ui-text"
+              })
+            ]),
+            s("div", oe, [
+              s("span", ie, f(i.name), 1),
+              s("span", ae, f(w(i.size)), 1)
+            ])
+          ]),
+          s("button", {
+            class: "ui-text hover:text-(--ui-danger) hover:bg-(--ui-danger-soft) rounded-full p-1 transition-colors",
+            onClick: (m) => j(e)
+          }, [
+            g(_, {
+              icon: "x",
+              class: "h-4 w-4"
+            })
+          ], 8, ne)
+        ]))), 128))
+      ])) : h("", !0)
+    ]));
+  }
+};
+export {
+  me as default
+};

package/dist/components/FilterDrawer.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),m=require("./Icon.cjs"),P={key:0,class:"fixed inset-0 z-[70]"},Y={class:"absolute right-0 top-0 h-full w-full sm:w-[520px] ui-surface border-l ui-border-strong shadow-2xl flex flex-col"},G={class:"px-2 py-2 border-b ui-border-strong"},H={class:"flex items-center gap-3 ui-text"},J={class:"flex-1 overflow-auto"},Q=["onClick"],W={class:"text-base ui-text font-medium flex items-center gap-1"},X={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"},Z={class:"flex items-center gap-2"},ee=["onClick"],te={key:0,class:"ui-surface-muted px-4 pb-3"},le={class:"flex items-center gap-2 py-2"},oe={class:"text-sm font-semibold ui-text"},ne=["value"],re={key:0,class:"flex items-center gap-2 border-b border-(--ui-primary) pb-1.5 mb-2"},ae={key:1,class:"space-y-2"},se=["checked","onChange"],ue={class:"grid grid-cols-2 gap-1.5"},ce=["onClick"],ie={key:2,class:"space-y-2"},de={key:0,class:"grid grid-cols-2 gap-2"},pe=["value","step","placeholder","onInput"],me=["value","step","placeholder","onInput"],ve=["value","type","step","placeholder","onInput"],ye={key:3,class:"space-y-2"},ke={key:0,class:"flex flex-wrap gap-1.5"},be=["onClick"],xe=["onClick"],ge={class:"space-y-1.5 max-h-56 overflow-auto"},he=["checked","onChange"],fe={key:4,class:"space-y-1.5 max-h-56 overflow-auto"},Ve=["checked","onChange"],Ee={class:"px-5 py-4 border-t ui-border-strong"},_e={class:"flex gap-6 text-sm mb-4 ui-text"},Ne=["checked"],we=["checked"],Be={class:"flex gap-3"},Ce={__name:"FilterDrawer",props:{open:{type:Boolean,default:!1},fields:{type:Array,default:()=>[]},modelValue:{type:Object,default:()=>({logic:"all",rules:[]})}},emits:["close","update:modelValue","apply"],setup(N,{emit:$}){const v=N,y=$,h=e.ref(""),k=e.ref(""),u=e.ref("equals"),b=e.ref(""),i=e.ref(""),d=e.ref(""),c=e.ref("all"),r=e.ref([]);e.watch(()=>v.modelValue,l=>{c.value=l?.logic||"all",r.value=Array.isArray(l?.rules)?[...l.rules]:[]},{immediate:!0,deep:!0});const D=e.computed(()=>{const l=h.value.trim().toLowerCase();return l?v.fields.filter(o=>String(o.label).toLowerCase().includes(l)):v.fields}),f=l=>r.value.filter(o=>o.field===l).length,w=l=>{r.value=r.value.filter(o=>o.field!==l)},p=l=>r.value.find(o=>o.field===l),x=l=>{const o=p(l);return o?Array.isArray(o.value)?o.value:o.value==null?[]:[o.value]:[]},F=(l,o)=>{const t=(l.options||[]).find(n=>String(n.value)===String(o));return t?t.label:o},M=[{value:"equals",label:"Is"},{value:"not_equals",label:"Is not"},{value:"contains",label:"Contains"}],O=[{value:"equals",label:"Is"},{value:"not_equals",label:"Is not"},{value:"gte",label:"At least"},{value:"lte",label:"At most"},{value:"between",label:"Between"}],V=l=>l.type==="number"||l.type==="text"?!0:!["date","multiselect","multi","select"].includes(l.type)&&!(l.options||[]).length,L=l=>l.type==="date"?!0:!V(l),A=l=>l.type==="number"?O:M,E=l=>{const o=[{value:"today",label:"Today"},{value:"yesterday",label:"Yesterday"},{value:"overdue",label:"Overdue"},{value:"today_overdue",label:"Today + Overdue"}],t=Array.isArray(l.options)&&l.options.length>0?l.options:l.type==="date"?o:[],n=b.value.trim().toLowerCase();return n?t.filter(a=>String(a.label).toLowerCase().includes(n)):t},I=l=>{const o=k.value===l?"":l;k.value=o,b.value="";const t=p(l);u.value=t?.operator||"equals"},B=l=>{c.value=l},C=(l,o)=>r.value.some(t=>t.field===l&&String(t.value)===String(o)),R=(l,o)=>x(l).map(String).includes(String(o)),T=(l,o)=>{const t=x(l.key),a=t.map(String).includes(String(o))?t.filter(s=>String(s)!==String(o)):[...t,o];r.value=r.value.filter(s=>s.field!==l.key),a.length>0&&r.value.push({id:`${l.key}-${Date.now()}-${Math.random().toString(36).slice(2,7)}`,field:l.key,label:l.label,operator:"in",value:a})},_=(l,o)=>{const t=r.value.findIndex(n=>n.field===l.key&&String(n.value)===String(o));if(t>=0){r.value.splice(t,1);return}r.value.push({id:`${l.key}-${Date.now()}-${Math.random().toString(36).slice(2,7)}`,field:l.key,label:l.label,operator:u.value,value:o})},q=l=>{const o=p(l);return!o||o.operator==="between"?"":o.value??""},j=(l,o)=>{const t=l.type==="number"?o.trim():o;r.value=r.value.filter(n=>n.field!==l.key),t!==""&&r.value.push({id:`${l.key}-${Date.now()}-${Math.random().toString(36).slice(2,7)}`,field:l.key,label:l.label,operator:u.value,value:t})},g=(l,o)=>{const t=p(l);return!t||t.operator!=="between"||typeof t.value!="object"||t.value===null?"":t.value[o]??""},S=(l,o,t)=>{const n={from:g(l.key,"from"),to:g(l.key,"to")};n[o]=t.trim(),r.value=r.value.filter(a=>a.field!==l.key),!(!n.from&&!n.to)&&r.value.push({id:`${l.key}-${Date.now()}-${Math.random().toString(36).slice(2,7)}`,field:l.key,label:l.label,operator:"between",value:n})};e.watch(u,l=>{const o=k.value;if(!o)return;const t=v.fields.find(s=>s.key===o);if(!t||!V(t))return;const n=p(o);if(!n)return;if(r.value=r.value.filter(s=>s.field!==o),l==="between"&&t.type==="number"){const s=typeof n.value=="object"&&n.value!==null?{from:n.value.from??"",to:n.value.to??""}:{from:n.value??"",to:""};if(!s.from&&!s.to)return;r.value.push({...n,operator:"between",value:s});return}const a=typeof n.value=="object"&&n.value!==null?n.value.from??n.value.to??"":n.value;a!==""&&r.value.push({...n,operator:l,value:a})});const U=l=>{!i.value&&!d.value||(r.value=r.value.filter(o=>o.field!==l.key),r.value.push({id:`${l.key}-${Date.now()}`,field:l.key,label:l.label,operator:"between",value:{from:i.value,to:d.value}}))},z=()=>{const l={logic:c.value,rules:r.value};y("update:modelValue",l),y("apply",l),y("close")},K=()=>{r.value=[],c.value="all",i.value="",d.value="",y("update:modelValue",{logic:"all",rules:[]})};return(l,o)=>N.open?(e.openBlock(),e.createElementBlock("div",P,[e.createElementVNode("div",{class:"absolute inset-0 bg-black/35",onClick:o[0]||(o[0]=t=>l.$emit("close"))}),e.createElementVNode("aside",Y,[e.createElementVNode("div",{class:"px-4 py-3 flex items-center justify-between border-b ui-border-strong"},[o[9]||(o[9]=e.createElementVNode("h2",{class:"text-xl font-semibold ui-text"},"Filter",-1)),e.createElementVNode("button",{class:"ui-primary font-semibold",onClick:K},"Reset")]),e.createElementVNode("div",G,[e.createElementVNode("div",H,[e.createVNode(m.default,{icon:"search",class:"w-4 h-4 ui-primary"}),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":o[1]||(o[1]=t=>h.value=t),placeholder:"Filter Search",class:"w-full bg-transparent outline-none text-base placeholder:ui-text"},null,512),[[e.vModelText,h.value]])])]),e.createElementVNode("div",J,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(D.value,t=>(e.openBlock(),e.createElementBlock("div",{key:t.key,class:"border-b ui-border-strong"},[e.createElementVNode("button",{class:"w-full px-4 py-2.5 flex items-center justify-between text-left hover:bg-(--ui-surface-muted)",onClick:n=>I(t.key)},[e.createElementVNode("span",W,[e.createTextVNode(e.toDisplayString(t.label)+" ",1),f(t.key)>0?(e.openBlock(),e.createElementBlock("span",X,e.toDisplayString(f(t.key)),1)):e.createCommentVNode("",!0)]),e.createElementVNode("span",Z,[f(t.key)>0?(e.openBlock(),e.createElementBlock("button",{key:0,class:"h-5 min-w-7 px-1 rounded-full border ui-border-strong inline-flex items-center justify-center ui-text/80 hover:ui-primary hover:border-(--ui-primary)",onClick:e.withModifiers(n=>w(t.key),["stop"]),title:"Clear filter"},[e.createVNode(m.default,{icon:"xmark",class:"w-2.5 h-2.5"})],8,ee)):e.createCommentVNode("",!0),e.createVNode(m.default,{icon:"chevron-right",class:"w-4 h-4 ui-primary"})])],8,Q),k.value===t.key?(e.openBlock(),e.createElementBlock("div",te,[e.createElementVNode("div",le,[e.createElementVNode("span",oe,e.toDisplayString(t.label),1),e.withDirectives(e.createElementVNode("select",{"onUpdate:modelValue":o[2]||(o[2]=n=>u.value=n),class:"ml-auto rounded-md ui-surface border ui-border-strong px-3 py-2 text-sm ui-text"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(A(t),n=>(e.openBlock(),e.createElementBlock("option",{key:n.value,value:n.value},e.toDisplayString(n.label),9,ne))),128))],512),[[e.vModelSelect,u.value]])]),L(t)?(e.openBlock(),e.createElementBlock("div",re,[e.createVNode(m.default,{icon:"search",class:"w-4 h-4 ui-primary"}),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":o[3]||(o[3]=n=>b.value=n),placeholder:"Search",class:"w-full bg-transparent outline-none text-sm ui-text"},null,512),[[e.vModelText,b.value]])])):e.createCommentVNode("",!0),t.type==="date"?(e.openBlock(),e.createElementBlock("div",ae,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(E(t),n=>(e.openBlock(),e.createElementBlock("label",{key:String(n.value),class:"flex items-center gap-2 text-sm ui-text cursor-pointer py-0.5"},[e.createElementVNode("input",{type:"checkbox",checked:C(t.key,n.value),onChange:a=>_(t,n.value)},null,40,se),e.createElementVNode("span",null,e.toDisplayString(n.label),1)]))),128)),e.createElementVNode("div",ue,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":o[4]||(o[4]=n=>i.value=n),type:"date",class:"w-full ui-surface border ui-border-strong rounded-md px-2 py-1 text-sm ui-text"},null,512),[[e.vModelText,i.value]]),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":o[5]||(o[5]=n=>d.value=n),type:"date",class:"w-full ui-surface border ui-border-strong rounded-md px-2 py-1 text-sm ui-text"},null,512),[[e.vModelText,d.value]])]),e.createElementVNode("button",{class:"px-3 py-1.5 rounded-md ui-primary-bg text-white text-sm",onClick:n=>U(t)},"Apply Date Range",8,ce)])):V(t)?(e.openBlock(),e.createElementBlock("div",ie,[u.value==="between"&&t.type==="number"?(e.openBlock(),e.createElementBlock("div",de,[e.createElementVNode("input",{value:g(t.key,"from"),type:"number",step:t.step||"any",placeholder:t.minLabel||"Min",class:"w-full ui-surface border ui-border-strong rounded-md px-3 py-2 text-sm ui-text",onInput:n=>S(t,"from",n.target.value)},null,40,pe),e.createElementVNode("input",{value:g(t.key,"to"),type:"number",step:t.step||"any",placeholder:t.maxLabel||"Max",class:"w-full ui-surface border ui-border-strong rounded-md px-3 py-2 text-sm ui-text",onInput:n=>S(t,"to",n.target.value)},null,40,me)])):(e.openBlock(),e.createElementBlock("input",{key:1,value:q(t.key),type:t.type==="number"?"number":"text",step:t.type==="number"?t.step||"any":void 0,placeholder:t.placeholder||`Enter ${t.label}`,class:"w-full ui-surface border ui-border-strong rounded-md px-3 py-2 text-sm ui-text",onInput:n=>j(t,n.target.value)},null,40,ve))])):t.type==="multiselect"||t.type==="select"&&t.multiple?(e.openBlock(),e.createElementBlock("div",ye,[x(t.key).length>0?(e.openBlock(),e.createElementBlock("div",ke,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(x(t.key),n=>(e.openBlock(),e.createElementBlock("span",{key:`${t.key}-${n}`,class:"inline-flex items-center gap-1 px-2 py-1 rounded-md text-xs border ui-border-strong ui-text"},[e.createTextVNode(e.toDisplayString(F(t,n))+" ",1),e.createElementVNode("button",{class:"ui-text-soft hover:ui-primary",onClick:a=>_(t,n)},[e.createVNode(m.default,{icon:"xmark",class:"w-3 h-3"})],8,be)]))),128)),e.createElementVNode("button",{class:"text-xs ui-primary hover:underline ml-1",onClick:n=>w(t.key)}," Clear all ",8,xe)])):e.createCommentVNode("",!0),e.createElementVNode("div",ge,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(E(t),n=>(e.openBlock(),e.createElementBlock("label",{key:String(n.value),class:"flex items-center gap-2 text-sm ui-text cursor-pointer py-0.5"},[e.createElementVNode("input",{type:"checkbox",checked:R(t.key,n.value),onChange:a=>T(t,n.value)},null,40,he),e.createElementVNode("span",null,e.toDisplayString(n.label),1)]))),128))])])):(e.openBlock(),e.createElementBlock("div",fe,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(E(t),n=>(e.openBlock(),e.createElementBlock("label",{key:String(n.value),class:"flex items-center gap-2 text-sm ui-text cursor-pointer py-0.5"},[e.createElementVNode("input",{type:"checkbox",checked:C(t.key,n.value),onChange:a=>_(t,n.value)},null,40,Ve),e.createElementVNode("span",null,e.toDisplayString(n.label),1)]))),128))]))])):e.createCommentVNode("",!0)]))),128))]),e.createElementVNode("div",Ee,[e.createElementVNode("div",_e,[e.createElementVNode("button",{class:"flex items-center gap-2",onClick:o[6]||(o[6]=t=>B("any"))},[e.createElementVNode("input",{type:"checkbox",checked:c.value==="any",class:"accent-(--ui-primary)"},null,8,Ne),o[10]||(o[10]=e.createTextVNode(" Any of these ",-1))]),e.createElementVNode("button",{class:"flex items-center gap-2",onClick:o[7]||(o[7]=t=>B("all"))},[e.createElementVNode("input",{type:"checkbox",checked:c.value==="all",class:"accent-(--ui-primary)"},null,8,we),o[11]||(o[11]=e.createTextVNode(" All of these ",-1))])]),e.createElementVNode("div",Be,[e.createElementVNode("button",{class:"px-5 py-2 rounded-lg ui-primary-bg text-white text-sm",onClick:z},"Find"),e.createElementVNode("button",{class:"px-5 py-2 rounded-lg border border-(--ui-primary) ui-primary text-sm",onClick:o[8]||(o[8]=t=>l.$emit("close"))},"Cancel")])])])])):e.createCommentVNode("",!0)}};exports.default=Ce;

package/dist/components/FilterDrawer.js

@@ -0,0 +1,412 @@
+import { ref as c, watch as N, computed as se, createElementBlock as o, createCommentVNode as y, openBlock as a, createElementVNode as n, createVNode as k, withDirectives as f, vModelText as D, Fragment as m, renderList as b, createTextVNode as F, toDisplayString as p, withModifiers as ne, vModelSelect as re } from "vue";
+import _ from "./Icon.js";
+const oe = {
+  key: 0,
+  class: "fixed inset-0 z-[70]"
+}, ae = { class: "absolute right-0 top-0 h-full w-full sm:w-[520px] ui-surface border-l ui-border-strong shadow-2xl flex flex-col" }, ue = { class: "px-2 py-2 border-b ui-border-strong" }, ie = { class: "flex items-center gap-3 ui-text" }, ce = { class: "flex-1 overflow-auto" }, pe = ["onClick"], de = { class: "text-base ui-text font-medium flex items-center gap-1" }, ve = {
+  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 = { class: "flex items-center gap-2" }, me = ["onClick"], be = {
+  key: 0,
+  class: "ui-surface-muted px-4 pb-3"
+}, xe = { class: "flex items-center gap-2 py-2" }, ge = { class: "text-sm font-semibold ui-text" }, he = ["value"], ke = {
+  key: 0,
+  class: "flex items-center gap-2 border-b border-(--ui-primary) pb-1.5 mb-2"
+}, fe = {
+  key: 1,
+  class: "space-y-2"
+}, _e = ["checked", "onChange"], we = { class: "grid grid-cols-2 gap-1.5" }, Ce = ["onClick"], $e = {
+  key: 2,
+  class: "space-y-2"
+}, Se = {
+  key: 0,
+  class: "grid grid-cols-2 gap-2"
+}, Ve = ["value", "step", "placeholder", "onInput"], Oe = ["value", "step", "placeholder", "onInput"], De = ["value", "type", "step", "placeholder", "onInput"], Fe = {
+  key: 3,
+  class: "space-y-2"
+}, Ae = {
+  key: 0,
+  class: "flex flex-wrap gap-1.5"
+}, Re = ["onClick"], Ie = ["onClick"], Me = { class: "space-y-1.5 max-h-56 overflow-auto" }, Le = ["checked", "onChange"], je = {
+  key: 4,
+  class: "space-y-1.5 max-h-56 overflow-auto"
+}, qe = ["checked", "onChange"], Te = { class: "px-5 py-4 border-t ui-border-strong" }, Ue = { class: "flex gap-6 text-sm mb-4 ui-text" }, Be = ["checked"], Ne = ["checked"], Ee = { class: "flex gap-3" }, Ye = {
+  __name: "FilterDrawer",
+  props: {
+    open: { type: Boolean, default: !1 },
+    fields: { type: Array, default: () => [] },
+    modelValue: { type: Object, default: () => ({ logic: "all", rules: [] }) }
+  },
+  emits: ["close", "update:modelValue", "apply"],
+  setup(j, { emit: E }) {
+    const w = j, C = E, A = c(""), $ = c(""), d = c("equals"), S = c(""), x = c(""), g = c(""), v = c("all"), r = c([]);
+    N(() => w.modelValue, (t) => {
+      v.value = t?.logic || "all", r.value = Array.isArray(t?.rules) ? [...t.rules] : [];
+    }, { immediate: !0, deep: !0 });
+    const z = se(() => {
+      const t = A.value.trim().toLowerCase();
+      return t ? w.fields.filter((l) => String(l.label).toLowerCase().includes(t)) : w.fields;
+    }), R = (t) => r.value.filter((l) => l.field === t).length, q = (t) => {
+      r.value = r.value.filter((l) => l.field !== t);
+    }, h = (t) => r.value.find((l) => l.field === t), V = (t) => {
+      const l = h(t);
+      return l ? Array.isArray(l.value) ? l.value : l.value == null ? [] : [l.value] : [];
+    }, K = (t, l) => {
+      const e = (t.options || []).find((s) => String(s.value) === String(l));
+      return e ? e.label : l;
+    }, Y = [
+      { value: "equals", label: "Is" },
+      { value: "not_equals", label: "Is not" },
+      { value: "contains", label: "Contains" }
+    ], G = [
+      { value: "equals", label: "Is" },
+      { value: "not_equals", label: "Is not" },
+      { value: "gte", label: "At least" },
+      { value: "lte", label: "At most" },
+      { value: "between", label: "Between" }
+    ], I = (t) => t.type === "number" || t.type === "text" ? !0 : !["date", "multiselect", "multi", "select"].includes(t.type) && !(t.options || []).length, H = (t) => t.type === "date" ? !0 : !I(t), J = (t) => t.type === "number" ? G : Y, M = (t) => {
+      const l = [
+        { value: "today", label: "Today" },
+        { value: "yesterday", label: "Yesterday" },
+        { value: "overdue", label: "Overdue" },
+        { value: "today_overdue", label: "Today + Overdue" }
+      ], e = Array.isArray(t.options) && t.options.length > 0 ? t.options : t.type === "date" ? l : [], s = S.value.trim().toLowerCase();
+      return s ? e.filter((u) => String(u.label).toLowerCase().includes(s)) : e;
+    }, P = (t) => {
+      const l = $.value === t ? "" : t;
+      $.value = l, S.value = "";
+      const e = h(t);
+      d.value = e?.operator || "equals";
+    }, T = (t) => {
+      v.value = t;
+    }, U = (t, l) => r.value.some((e) => e.field === t && String(e.value) === String(l)), Q = (t, l) => V(t).map(String).includes(String(l)), W = (t, l) => {
+      const e = V(t.key), u = e.map(String).includes(String(l)) ? e.filter((i) => String(i) !== String(l)) : [...e, l];
+      r.value = r.value.filter((i) => i.field !== t.key), u.length > 0 && r.value.push({
+        id: `${t.key}-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,
+        field: t.key,
+        label: t.label,
+        operator: "in",
+        value: u
+      });
+    }, L = (t, l) => {
+      const e = r.value.findIndex((s) => s.field === t.key && String(s.value) === String(l));
+      if (e >= 0) {
+        r.value.splice(e, 1);
+        return;
+      }
+      r.value.push({
+        id: `${t.key}-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,
+        field: t.key,
+        label: t.label,
+        operator: d.value,
+        value: l
+      });
+    }, X = (t) => {
+      const l = h(t);
+      return !l || l.operator === "between" ? "" : l.value ?? "";
+    }, Z = (t, l) => {
+      const e = t.type === "number" ? l.trim() : l;
+      r.value = r.value.filter((s) => s.field !== t.key), e !== "" && r.value.push({
+        id: `${t.key}-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,
+        field: t.key,
+        label: t.label,
+        operator: d.value,
+        value: e
+      });
+    }, O = (t, l) => {
+      const e = h(t);
+      return !e || e.operator !== "between" || typeof e.value != "object" || e.value === null ? "" : e.value[l] ?? "";
+    }, B = (t, l, e) => {
+      const s = {
+        from: O(t.key, "from"),
+        to: O(t.key, "to")
+      };
+      s[l] = e.trim(), r.value = r.value.filter((u) => u.field !== t.key), !(!s.from && !s.to) && r.value.push({
+        id: `${t.key}-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,
+        field: t.key,
+        label: t.label,
+        operator: "between",
+        value: s
+      });
+    };
+    N(d, (t) => {
+      const l = $.value;
+      if (!l) return;
+      const e = w.fields.find((i) => i.key === l);
+      if (!e || !I(e)) return;
+      const s = h(l);
+      if (!s) return;
+      if (r.value = r.value.filter((i) => i.field !== l), t === "between" && e.type === "number") {
+        const i = typeof s.value == "object" && s.value !== null ? {
+          from: s.value.from ?? "",
+          to: s.value.to ?? ""
+        } : { from: s.value ?? "", to: "" };
+        if (!i.from && !i.to) return;
+        r.value.push({
+          ...s,
+          operator: "between",
+          value: i
+        });
+        return;
+      }
+      const u = typeof s.value == "object" && s.value !== null ? s.value.from ?? s.value.to ?? "" : s.value;
+      u !== "" && r.value.push({
+        ...s,
+        operator: t,
+        value: u
+      });
+    });
+    const ee = (t) => {
+      !x.value && !g.value || (r.value = r.value.filter((l) => l.field !== t.key), r.value.push({
+        id: `${t.key}-${Date.now()}`,
+        field: t.key,
+        label: t.label,
+        operator: "between",
+        value: { from: x.value, to: g.value }
+      }));
+    }, te = () => {
+      const t = { logic: v.value, rules: r.value };
+      C("update:modelValue", t), C("apply", t), C("close");
+    }, le = () => {
+      r.value = [], v.value = "all", x.value = "", g.value = "", C("update:modelValue", { logic: "all", rules: [] });
+    };
+    return (t, l) => j.open ? (a(), o("div", oe, [
+      n("div", {
+        class: "absolute inset-0 bg-black/35",
+        onClick: l[0] || (l[0] = (e) => t.$emit("close"))
+      }),
+      n("aside", ae, [
+        n("div", { class: "px-4 py-3 flex items-center justify-between border-b ui-border-strong" }, [
+          l[9] || (l[9] = n("h2", { class: "text-xl font-semibold ui-text" }, "Filter", -1)),
+          n("button", {
+            class: "ui-primary font-semibold",
+            onClick: le
+          }, "Reset")
+        ]),
+        n("div", ue, [
+          n("div", ie, [
+            k(_, {
+              icon: "search",
+              class: "w-4 h-4 ui-primary"
+            }),
+            f(n("input", {
+              "onUpdate:modelValue": l[1] || (l[1] = (e) => A.value = e),
+              placeholder: "Filter Search",
+              class: "w-full bg-transparent outline-none text-base placeholder:ui-text"
+            }, null, 512), [
+              [D, A.value]
+            ])
+          ])
+        ]),
+        n("div", ce, [
+          (a(!0), o(m, null, b(z.value, (e) => (a(), o("div", {
+            key: e.key,
+            class: "border-b ui-border-strong"
+          }, [
+            n("button", {
+              class: "w-full px-4 py-2.5 flex items-center justify-between text-left hover:bg-(--ui-surface-muted)",
+              onClick: (s) => P(e.key)
+            }, [
+              n("span", de, [
+                F(p(e.label) + " ", 1),
+                R(e.key) > 0 ? (a(), o("span", ve, p(R(e.key)), 1)) : y("", !0)
+              ]),
+              n("span", ye, [
+                R(e.key) > 0 ? (a(), o("button", {
+                  key: 0,
+                  class: "h-5 min-w-7 px-1 rounded-full border ui-border-strong inline-flex items-center justify-center ui-text/80 hover:ui-primary hover:border-(--ui-primary)",
+                  onClick: ne((s) => q(e.key), ["stop"]),
+                  title: "Clear filter"
+                }, [
+                  k(_, {
+                    icon: "xmark",
+                    class: "w-2.5 h-2.5"
+                  })
+                ], 8, me)) : y("", !0),
+                k(_, {
+                  icon: "chevron-right",
+                  class: "w-4 h-4 ui-primary"
+                })
+              ])
+            ], 8, pe),
+            $.value === e.key ? (a(), o("div", be, [
+              n("div", xe, [
+                n("span", ge, p(e.label), 1),
+                f(n("select", {
+                  "onUpdate:modelValue": l[2] || (l[2] = (s) => d.value = s),
+                  class: "ml-auto rounded-md ui-surface border ui-border-strong px-3 py-2 text-sm ui-text"
+                }, [
+                  (a(!0), o(m, null, b(J(e), (s) => (a(), o("option", {
+                    key: s.value,
+                    value: s.value
+                  }, p(s.label), 9, he))), 128))
+                ], 512), [
+                  [re, d.value]
+                ])
+              ]),
+              H(e) ? (a(), o("div", ke, [
+                k(_, {
+                  icon: "search",
+                  class: "w-4 h-4 ui-primary"
+                }),
+                f(n("input", {
+                  "onUpdate:modelValue": l[3] || (l[3] = (s) => S.value = s),
+                  placeholder: "Search",
+                  class: "w-full bg-transparent outline-none text-sm ui-text"
+                }, null, 512), [
+                  [D, S.value]
+                ])
+              ])) : y("", !0),
+              e.type === "date" ? (a(), o("div", fe, [
+                (a(!0), o(m, null, b(M(e), (s) => (a(), o("label", {
+                  key: String(s.value),
+                  class: "flex items-center gap-2 text-sm ui-text cursor-pointer py-0.5"
+                }, [
+                  n("input", {
+                    type: "checkbox",
+                    checked: U(e.key, s.value),
+                    onChange: (u) => L(e, s.value)
+                  }, null, 40, _e),
+                  n("span", null, p(s.label), 1)
+                ]))), 128)),
+                n("div", we, [
+                  f(n("input", {
+                    "onUpdate:modelValue": l[4] || (l[4] = (s) => x.value = s),
+                    type: "date",
+                    class: "w-full ui-surface border ui-border-strong rounded-md px-2 py-1 text-sm ui-text"
+                  }, null, 512), [
+                    [D, x.value]
+                  ]),
+                  f(n("input", {
+                    "onUpdate:modelValue": l[5] || (l[5] = (s) => g.value = s),
+                    type: "date",
+                    class: "w-full ui-surface border ui-border-strong rounded-md px-2 py-1 text-sm ui-text"
+                  }, null, 512), [
+                    [D, g.value]
+                  ])
+                ]),
+                n("button", {
+                  class: "px-3 py-1.5 rounded-md ui-primary-bg text-white text-sm",
+                  onClick: (s) => ee(e)
+                }, "Apply Date Range", 8, Ce)
+              ])) : I(e) ? (a(), o("div", $e, [
+                d.value === "between" && e.type === "number" ? (a(), o("div", Se, [
+                  n("input", {
+                    value: O(e.key, "from"),
+                    type: "number",
+                    step: e.step || "any",
+                    placeholder: e.minLabel || "Min",
+                    class: "w-full ui-surface border ui-border-strong rounded-md px-3 py-2 text-sm ui-text",
+                    onInput: (s) => B(e, "from", s.target.value)
+                  }, null, 40, Ve),
+                  n("input", {
+                    value: O(e.key, "to"),
+                    type: "number",
+                    step: e.step || "any",
+                    placeholder: e.maxLabel || "Max",
+                    class: "w-full ui-surface border ui-border-strong rounded-md px-3 py-2 text-sm ui-text",
+                    onInput: (s) => B(e, "to", s.target.value)
+                  }, null, 40, Oe)
+                ])) : (a(), o("input", {
+                  key: 1,
+                  value: X(e.key),
+                  type: e.type === "number" ? "number" : "text",
+                  step: e.type === "number" ? e.step || "any" : void 0,
+                  placeholder: e.placeholder || `Enter ${e.label}`,
+                  class: "w-full ui-surface border ui-border-strong rounded-md px-3 py-2 text-sm ui-text",
+                  onInput: (s) => Z(e, s.target.value)
+                }, null, 40, De))
+              ])) : e.type === "multiselect" || e.type === "select" && e.multiple ? (a(), o("div", Fe, [
+                V(e.key).length > 0 ? (a(), o("div", Ae, [
+                  (a(!0), o(m, null, b(V(e.key), (s) => (a(), o("span", {
+                    key: `${e.key}-${s}`,
+                    class: "inline-flex items-center gap-1 px-2 py-1 rounded-md text-xs border ui-border-strong ui-text"
+                  }, [
+                    F(p(K(e, s)) + " ", 1),
+                    n("button", {
+                      class: "ui-text-soft hover:ui-primary",
+                      onClick: (u) => L(e, s)
+                    }, [
+                      k(_, {
+                        icon: "xmark",
+                        class: "w-3 h-3"
+                      })
+                    ], 8, Re)
+                  ]))), 128)),
+                  n("button", {
+                    class: "text-xs ui-primary hover:underline ml-1",
+                    onClick: (s) => q(e.key)
+                  }, " Clear all ", 8, Ie)
+                ])) : y("", !0),
+                n("div", Me, [
+                  (a(!0), o(m, null, b(M(e), (s) => (a(), o("label", {
+                    key: String(s.value),
+                    class: "flex items-center gap-2 text-sm ui-text cursor-pointer py-0.5"
+                  }, [
+                    n("input", {
+                      type: "checkbox",
+                      checked: Q(e.key, s.value),
+                      onChange: (u) => W(e, s.value)
+                    }, null, 40, Le),
+                    n("span", null, p(s.label), 1)
+                  ]))), 128))
+                ])
+              ])) : (a(), o("div", je, [
+                (a(!0), o(m, null, b(M(e), (s) => (a(), o("label", {
+                  key: String(s.value),
+                  class: "flex items-center gap-2 text-sm ui-text cursor-pointer py-0.5"
+                }, [
+                  n("input", {
+                    type: "checkbox",
+                    checked: U(e.key, s.value),
+                    onChange: (u) => L(e, s.value)
+                  }, null, 40, qe),
+                  n("span", null, p(s.label), 1)
+                ]))), 128))
+              ]))
+            ])) : y("", !0)
+          ]))), 128))
+        ]),
+        n("div", Te, [
+          n("div", Ue, [
+            n("button", {
+              class: "flex items-center gap-2",
+              onClick: l[6] || (l[6] = (e) => T("any"))
+            }, [
+              n("input", {
+                type: "checkbox",
+                checked: v.value === "any",
+                class: "accent-(--ui-primary)"
+              }, null, 8, Be),
+              l[10] || (l[10] = F(" Any of these ", -1))
+            ]),
+            n("button", {
+              class: "flex items-center gap-2",
+              onClick: l[7] || (l[7] = (e) => T("all"))
+            }, [
+              n("input", {
+                type: "checkbox",
+                checked: v.value === "all",
+                class: "accent-(--ui-primary)"
+              }, null, 8, Ne),
+              l[11] || (l[11] = F(" All of these ", -1))
+            ])
+          ]),
+          n("div", Ee, [
+            n("button", {
+              class: "px-5 py-2 rounded-lg ui-primary-bg text-white text-sm",
+              onClick: te
+            }, "Find"),
+            n("button", {
+              class: "px-5 py-2 rounded-lg border border-(--ui-primary) ui-primary text-sm",
+              onClick: l[8] || (l[8] = (e) => t.$emit("close"))
+            }, "Cancel")
+          ])
+        ])
+      ])
+    ])) : y("", !0);
+  }
+};
+export {
+  Ye as default
+};