@wishbone-media/spark 1.0.0 → 1.1.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { ref as ke, reactive as Tt, watch as et, onMounted as Yt, nextTick as dr, onUnmounted as Fn, openBlock as C, createElementBlock as P, createElementVNode as T, Fragment as ze, renderList as rt, toDisplayString as we, createTextVNode as Ue, createCommentVNode as pe, withDirectives as en, vModelText as go, vModelSelect as va, vShow as fr, computed as te, shallowRef as ya, getCurrentScope as ba, onScopeDispose as xa, shallowReadonly as dn, unref as ne, resolveComponent as Ze, normalizeClass as Ee, createVNode as se, renderSlot as Ge, createBlock as Me, resolveDynamicComponent as yt, markRaw as wn, Transition as pr, withCtx as Se, normalizeProps as wa, mergeProps as kt, Teleport as mr, TransitionGroup as En, inject as io, onUpdated as gr, provide as Sa, useSlots as lo, resolveDirective as ka, normalizeStyle as Oo, withModifiers as Qe, toHandlers as hr, h as as } from "vue";
+import { ref as ke, reactive as Tt, watch as et, onMounted as Yt, nextTick as dr, onUnmounted as Fn, openBlock as C, createElementBlock as P, createElementVNode as T, Fragment as ze, renderList as rt, toDisplayString as we, createTextVNode as Ue, createCommentVNode as pe, withDirectives as en, vModelText as go, vModelSelect as va, vShow as fr, computed as te, shallowRef as ya, getCurrentScope as ba, onScopeDispose as xa, shallowReadonly as dn, unref as ne, resolveComponent as Ge, normalizeClass as Ee, createVNode as se, renderSlot as Ze, createBlock as Me, resolveDynamicComponent as yt, markRaw as wn, Transition as pr, withCtx as Se, normalizeProps as wa, mergeProps as kt, Teleport as mr, TransitionGroup as En, inject as io, onUpdated as gr, provide as Sa, useSlots as lo, resolveDirective as ka, normalizeStyle as Oo, withModifiers as Qe, toHandlers as hr, h as as } from "vue";
 import { icon as Ut, library as vr } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon as Mn } from "@fortawesome/vue-fontawesome";
 import { faArrowUpRightFromSquare as Ca, faCopy as Ea, faCircleDot as yr, faEyeDropper as br, faAnglesLeft as xr, faAnglesRight as wr, faStar as Ta, faSpinnerThird as Sr, faCircle as _a, faFile as Po, faCalendar as kr, faArrowUp as Cr, faArrowDown as Er, faPlus as Tr, faCircleCheck as $a, faInbox as La, faCloudArrowUp as Ma, faCloudDownload as Oa, faBolt as Pa, faUndo as Aa, faLock as Ra, faEyeSlash as Ia, faEye as Fa, faSignOut as Da, faXmark as Ao, faTrash as _r, faTimes as ja, faStreetView as Va, faSortUp as Ha, faSortDown as za, faSort as Ba, faScaleBalanced as Na, faSatelliteDish as qa, faLayerPlus as Wa, faLaptopMobile as Ua, faInfoCircle as Za, faGripDotsVertical as $r, faGearComplex as Ga, faFlag as Ya, faFaceSmileWink as Xa, faFaceSmileRelaxed as Ka, faExclamationTriangle as Ja, faEllipsisVertical as Qa, faEllipsis as ei, faEdit as ti, faComments as ni, faCircleXmark as oi, faCircleUser as si, faChevronUp as ri, faChevronRight as Lr, faChevronLeft as Mr, faChevronDown as Or, faCheckCircle as ai, faCheck as Ro, faBullhorn as ii, faBellRing as li, faBarsSort as ci, faArrowRightToLine as ui, faArrowLeftToLine as di } from "@fortawesome/pro-regular-svg-icons";
@@ -1716,7 +1716,7 @@ const Xl = { class: "flex items-center" }, Kl = { class: "shrink-0 self-start" }
       info: "text-blue-400 hover:bg-blue-100"
     })[t.type]);
     return (s, c) => {
-      const l = Ze("font-awesome-icon");
+      const l = Ge("font-awesome-icon");
       return C(), P("div", {
         class: Ee(["rounded-md border p-4", n.value])
       }, [
@@ -1728,7 +1728,7 @@ const Xl = { class: "flex items-center" }, Kl = { class: "shrink-0 self-start" }
             }, null, 8, ["icon", "class"])
           ]),
           T("div", Jl, [
-            Ge(s.$slots, "default")
+            Ze(s.$slots, "default")
           ]),
           e.closeable ? (C(), P("div", Ql, [
             T("div", ec, [
@@ -1888,7 +1888,7 @@ const Xl = { class: "flex items-center" }, Kl = { class: "shrink-0 self-start" }
       n("select", c);
     };
     return (c, l) => {
-      const u = Ze("font-awesome-icon");
+      const u = Ge("font-awesome-icon");
       return C(), P("div", tc, [
         T("div", nc, [
           T("div", oc, [
@@ -1927,12 +1927,12 @@ const Xl = { class: "flex items-center" }, Kl = { class: "shrink-0 self-start" }
           ]),
           T("div", pc, [
             c.$slots.bottom || e.bottomSlot ? (C(), P("div", mc, [
-              Ge(c.$slots, "bottom", {}, () => [
+              Ze(c.$slots, "bottom", {}, () => [
                 e.bottomSlot ? (C(), Me(yt(e.bottomSlot), { key: 0 })) : pe("", !0)
               ])
             ])) : pe("", !0),
             c.$slots.footer || e.footerSlot ? (C(), P("div", gc, [
-              Ge(c.$slots, "footer", {}, () => [
+              Ze(c.$slots, "footer", {}, () => [
                 e.footerSlot ? (C(), Me(yt(e.footerSlot), { key: 0 })) : pe("", !0)
               ])
             ])) : pe("", !0)
@@ -2551,7 +2551,7 @@ const nt = new yc(), Xp = {
       n("select", a);
     };
     return (a, s) => {
-      const c = Ze("font-awesome-icon");
+      const c = Ge("font-awesome-icon");
       return C(), P("div", Cc, [
         T("div", Ec, [
           T("div", Tc, [
@@ -2707,7 +2707,7 @@ const nt = new yc(), Xp = {
       disabled: e.disabled,
       onClick: u[0] || (u[0] = (d) => l.$emit("click"))
     }, [
-      Ge(l.$slots, "default")
+      Ze(l.$slots, "default")
     ], 10, Hc));
   }
 }, sa = {
@@ -2726,7 +2726,7 @@ const nt = new yc(), Xp = {
       ref: t,
       class: "inline-flex rounded-md shadow-xs"
     }, [
-      Ge(s.$slots, "default")
+      Ze(s.$slots, "default")
     ], 512));
   }
 }, zc = { class: "flex min-w-0 items-center gap-3" }, Bc = {
@@ -2770,8 +2770,8 @@ const nt = new yc(), Xp = {
       default: ""
     },
     // Default header: main heading text. Renders the header without needing
-    // the #header slot; combine with backTo and the title-extra/nav/meta/actions
-    // slots. The #header slot overrides the default header entirely.
+    // the #header slot; combine with backTo and the named/catch-all slots.
+    // The #header slot overrides the default header entirely.
     title: {
       type: String,
       default: null
@@ -2784,7 +2784,7 @@ const nt = new yc(), Xp = {
   },
   setup(e, { expose: t }) {
     const n = e, o = lo(), r = bt(), a = ke(null), s = te(
-      () => !!(n.title || n.backTo || o["title-extra"] || o.nav || o.meta || o.actions)
+      () => !!(n.title || n.backTo || o["title-extra"] || o.nav || o["header-left"] || o["header-right"] || o.actions)
     );
     function c() {
       a.value && (a.value.scrollTop = 0);
@@ -2796,7 +2796,7 @@ const nt = new yc(), Xp = {
         key: 0,
         class: Ee(["border-b border-gray-300 px-[30px] py-5", n.headerClass])
       }, [
-        Ge(l.$slots, "header")
+        Ze(l.$slots, "header")
       ], 2)) : s.value ? (C(), P("div", {
         key: 1,
         class: Ee([
@@ -2820,14 +2820,15 @@ const nt = new yc(), Xp = {
             _: 1
           })) : pe("", !0),
           n.title ? (C(), P("h3", Bc, we(n.title), 1)) : pe("", !0),
-          Ge(l.$slots, "title-extra"),
+          Ze(l.$slots, "title-extra"),
           l.$slots.nav ? (C(), P("div", Nc, [
-            Ge(l.$slots, "nav")
-          ])) : pe("", !0)
+            Ze(l.$slots, "nav")
+          ])) : pe("", !0),
+          Ze(l.$slots, "header-left")
         ]),
-        l.$slots.meta || l.$slots.actions ? (C(), P("div", qc, [
-          Ge(l.$slots, "meta"),
-          Ge(l.$slots, "actions")
+        l.$slots["header-right"] || l.$slots.actions ? (C(), P("div", qc, [
+          Ze(l.$slots, "header-right"),
+          Ze(l.$slots, "actions")
         ])) : pe("", !0)
       ], 2)) : pe("", !0),
       T("div", {
@@ -2840,7 +2841,7 @@ const nt = new yc(), Xp = {
           n.bodyClass
         ])
       }, [
-        Ge(l.$slots, "default")
+        Ze(l.$slots, "default")
       ], 2)
     ], 2));
   }
@@ -2948,7 +2949,7 @@ const nt = new yc(), Xp = {
       }
     }
     return (p, w) => {
-      const m = Ze("font-awesome-icon"), v = ka("spark-tooltip");
+      const m = Ge("font-awesome-icon"), v = ka("spark-tooltip");
       return en((C(), Me(yt(g.value ? "a" : "span"), {
         href: i.value || void 0,
         target: g.value && e.openNew ? "_blank" : void 0,
@@ -2961,7 +2962,7 @@ const nt = new yc(), Xp = {
             key: 0,
             icon: e.icon
           }, null, 8, ["icon"])) : pe("", !0),
-          Ge(p.$slots, "default", {}, () => [
+          Ze(p.$slots, "default", {}, () => [
             Ue(we(e.label), 1)
           ]),
           e.copyToClipboard ? (C(), Me(m, {
@@ -6153,7 +6154,7 @@ const qe = { Plugins: { Hash: Kn }, version: "6.1.14", openers: /* @__PURE__ */
       ref_key: "containerRef",
       ref: n
     }, [
-      Ge(a.$slots, "default")
+      Ze(a.$slots, "default")
     ], 512));
   }
 }, ru = ["innerHTML"], au = { key: 1 }, em = {
@@ -6255,7 +6256,7 @@ const qe = { Plugins: { Hash: Kn }, version: "6.1.14", openers: /* @__PURE__ */
         onFocusin: p,
         onFocusout: w
       }, [
-        Ge(y.$slots, "default")
+        Ze(y.$slots, "default")
       ], 544),
       (C(), Me(mr, { to: "body" }, [
         se(pr, { name: "spark-tooltip" }, {
@@ -6270,7 +6271,7 @@ const qe = { Plugins: { Hash: Kn }, version: "6.1.14", openers: /* @__PURE__ */
               onMouseenter: m,
               onMouseleave: v
             }, [
-              Ge(y.$slots, "content", {}, () => [
+              Ze(y.$slots, "content", {}, () => [
                 e.html ? (C(), P("span", {
                   key: 0,
                   innerHTML: e.content
@@ -6459,7 +6460,7 @@ const qe = { Plugins: { Hash: Kn }, version: "6.1.14", openers: /* @__PURE__ */
       selectedFile: s,
       uploading: c
     }), (v, y) => {
-      const b = Ze("FormKit"), x = Ze("font-awesome-icon");
+      const b = Ge("FormKit"), x = Ge("font-awesome-icon");
       return C(), P("div", null, [
         e.label ? (C(), P("label", iu, we(e.label), 1)) : pe("", !0),
         e.variant === "dashed" ? (C(), P("div", {
@@ -6684,7 +6685,7 @@ const qe = { Plugins: { Hash: Kn }, version: "6.1.14", openers: /* @__PURE__ */
       }
     }
     return (h, p) => {
-      const w = Ze("font-awesome-icon"), m = Ze("FormKit");
+      const w = Ge("font-awesome-icon"), m = Ge("FormKit");
       return C(), P("div", null, [
         e.label ? (C(), P("label", gu, we(e.label), 1)) : pe("", !0),
         e.modelValue ? (C(), Me(su, {
@@ -6825,7 +6826,7 @@ const qe = { Plugins: { Hash: Kn }, version: "6.1.14", openers: /* @__PURE__ */
       danger: "text-red-400"
     })[t.type]);
     return (l, u) => {
-      const d = Ze("font-awesome-icon");
+      const d = Ge("font-awesome-icon");
       return C(), P("div", wu, [
         a.value ? (C(), P("div", {
           key: 0,
@@ -7180,7 +7181,7 @@ const It = new Cu(), Eu = { class: "fixed inset-0 z-10 w-screen overflow-y-auto"
     return (v, y) => (C(), P("nav", {
       class: Ee(g.value)
     }, [
-      a.value === "custom" ? Ge(v.$slots, "default", {
+      a.value === "custom" ? Ze(v.$slots, "default", {
         key: 0,
         items: s.value,
         activeId: c.value,
@@ -7778,7 +7779,7 @@ const Uu = (e) => {
       () => n.sparkTable.params.page < Bt(n.sparkTable.response.meta, "last_page", 1)
     ), u = te(() => n.sparkTable.params.page > 1);
     return (d, g) => {
-      const i = Ze("font-awesome-icon");
+      const i = Ge("font-awesome-icon");
       return C(), P("div", null, [
         T("div", dd, [
           c.value.length > 1 ? (C(), P("div", fd, [
@@ -7845,7 +7846,7 @@ const Uu = (e) => {
       });
     };
     return (s, c) => {
-      const l = Ze("FormKit");
+      const l = Ge("FormKit");
       return C(), P("div", hd, [
         se(l, {
           "model-value": e.sparkTable.params.limit,
@@ -7877,7 +7878,7 @@ const Uu = (e) => {
       key: 0,
       class: Ee(r.value)
     }, [
-      Ge(a.$slots, "default")
+      Ze(a.$slots, "default")
     ], 2)) : pe("", !0);
   }
 }, bd = { class: "spark-table-search" }, xd = {
@@ -7919,7 +7920,7 @@ const Uu = (e) => {
         s && s !== n.value ? n.value = s : !s && n.value && (n.value = "");
       }
     ), (s, c) => {
-      const l = Ze("FormKit");
+      const l = Ge("FormKit");
       return C(), P("div", bd, [
         se(l, kt({
           modelValue: n.value,
@@ -7966,7 +7967,7 @@ const Uu = (e) => {
         s != null && s !== "" ? n.value !== s && (n.value = s) : n.value && (n.value = "");
       }
     ), (s, c) => {
-      const l = Ze("FormKit");
+      const l = Ge("FormKit");
       return C(), P("div", Sd, [
         se(l, kt({
           modelValue: n.value,
@@ -8070,7 +8071,7 @@ const Uu = (e) => {
         } else s && s !== n.value && (n.value = s);
       }
     ), (s, c) => {
-      const l = Ze("FormKit");
+      const l = Ge("FormKit");
       return C(), P("div", Ld, [
         (C(), Me(l, kt({
           key: a.value,
@@ -8126,7 +8127,7 @@ const Uu = (e) => {
       t.sparkTable.methods.applyParams({ ...l, page: 1 });
     };
     return (o, r) => {
-      const a = Ze("font-awesome-icon");
+      const a = Ge("font-awesome-icon");
       return C(), P("div", Pd, [
         se(pt, {
           variant: "secondary",
@@ -8457,7 +8458,7 @@ const Uu = (e) => {
       sparkTable: i,
       table: c
     }), (m, v) => {
-      const y = Ze("font-awesome-icon");
+      const y = Ge("font-awesome-icon");
       return C(), P("div", {
         class: "spark-table",
         style: Oo(r.value)
@@ -8473,7 +8474,7 @@ const Uu = (e) => {
               "spark-table": i,
               config: b.config
             }, null, 8, ["class", "spark-table", "config"]))), 128)),
-            Ge(m.$slots, "header", {
+            Ze(m.$slots, "header", {
               sparkTable: i,
               loading: l.value,
               error: u.value
@@ -8515,7 +8516,7 @@ const Uu = (e) => {
                 "spark-table": i,
                 onPaginate: i.methods.applyParams
               }, null, 8, ["spark-table", "onPaginate"]),
-              Ge(m.$slots, "footer", {
+              Ze(m.$slots, "footer", {
                 sparkTable: i,
                 loading: l.value,
                 error: u.value
@@ -9133,7 +9134,7 @@ const fm = [
       );
     }, p = te(() => n.mainNavStore.state.hidden ? ["w-0 overflow-hidden"] : [n.mainNavStore.state.collapsed ? "w-[80px]" : "w-[240px]"]), w = te(() => n.mainNavStore.state.hidden ? ["pl-2.5"] : [n.mainNavStore.state.collapsed ? "pl-[80px]" : "pl-[240px]"]);
     return (m, v) => {
-      const y = Ze("font-awesome-icon"), b = Ze("router-view");
+      const y = Ge("font-awesome-icon"), b = Ge("router-view");
       return C(), P(ze, null, [
         T("div", {
           class: Ee([p.value, "fixed inset-y-0 flex transition-all z-100"])
@@ -9225,7 +9226,7 @@ const fm = [
                     ], 10, ff)
                   ]))), 128))
                 ])) : pe("", !0),
-                Ge(m.$slots, "sidebar-footer"),
+                Ze(m.$slots, "sidebar-footer"),
                 T("a", {
                   class: "font-medium grid place-content-center gap-x-3 rounded-md h-10 p-2.5 text-gray-800 text-[13px] hover:bg-gray-100 transition-all duration-300 ease-in-out",
                   href: "#",
@@ -9246,7 +9247,7 @@ const fm = [
           T("div", mf, [
             T("div", gf, [
               T("div", hf, [
-                Ge(m.$slots, "header-left", {}, () => [
+                Ze(m.$slots, "header-left", {}, () => [
                   T("div", vf, [
                     se(y, {
                       icon: ne(Re).farBarsSort,
@@ -9255,7 +9256,7 @@ const fm = [
                     }, null, 8, ["icon"])
                   ])
                 ]),
-                Ge(m.$slots, "header-center", {}, () => [
+                Ze(m.$slots, "header-center", {}, () => [
                   i.value ? (C(), P("div", {
                     key: 0,
                     class: "absolute left-1/2 -translate-x-1/2 cursor-pointer h-9 flex items-center",
@@ -9270,7 +9271,7 @@ const fm = [
                   ])) : pe("", !0)
                 ]),
                 T("div", bf, [
-                  Ge(m.$slots, "header-right", {}, () => [
+                  Ze(m.$slots, "header-right", {}, () => [
                     e.appStore.state.showAppSelector ? (C(), P("button", {
                       key: 0,
                       class: "rounded-sm bg-white w-[42px] h-[42px] ring-1 ring-inset ring-gray-300",
@@ -9307,7 +9308,7 @@ const fm = [
   }
 }, wf = {}, Sf = { class: "h-full" };
 function kf(e, t) {
-  const n = Ze("router-view");
+  const n = Ge("router-view");
   return C(), P("main", Sf, [
     se(n)
   ]);
@@ -9359,7 +9360,7 @@ const mm = /* @__PURE__ */ ln(wf, [["render", kf]]), Cf = { class: "h-full grid
       }
     };
     return (u, d) => {
-      const g = Ze("FormKit"), i = Ze("router-link");
+      const g = Ge("FormKit"), i = Ge("router-link");
       return C(), P("div", Cf, [
         T("div", Ef, [
           a.logo ? (C(), P("img", {
@@ -9499,7 +9500,7 @@ const mm = /* @__PURE__ */ ln(wf, [["render", kf]]), Cf = { class: "h-full grid
       }
     };
     return (c, l) => {
-      const u = Ze("FormKit"), d = Ze("router-link");
+      const u = Ge("FormKit"), d = Ge("router-link");
       return C(), P("div", Df, [
         T("div", jf, [
           n.logo ? (C(), P("img", {
@@ -9613,7 +9614,7 @@ const mm = /* @__PURE__ */ ln(wf, [["render", kf]]), Cf = { class: "h-full grid
       }
     };
     return (l, u) => {
-      const d = Ze("FormKit");
+      const d = Ge("FormKit");
       return C(), P("div", Zf, [
         T("div", Gf, [
           r.logo ? (C(), P("img", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wishbone-media/spark",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/src/components/SparkCard.vue

@@ -36,10 +36,11 @@
         <div v-if="$slots.nav" class="flex self-stretch items-stretch">
           <slot name="nav" />
         </div>
+        <slot name="header-left" />
       </div>
 
-      <div v-if="$slots.meta || $slots.actions" class="flex shrink-0 items-center gap-4">
-        <slot name="meta" />
+      <div v-if="$slots['header-right'] || $slots.actions" class="flex shrink-0 items-center gap-4">
+        <slot name="header-right" />
         <slot name="actions" />
       </div>
     </div>
@@ -95,8 +96,8 @@ const props = defineProps({
     default: '',
   },
   // Default header: main heading text. Renders the header without needing
-  // the #header slot; combine with backTo and the title-extra/nav/meta/actions
-  // slots. The #header slot overrides the default header entirely.
+  // the #header slot; combine with backTo and the named/catch-all slots.
+  // The #header slot overrides the default header entirely.
   title: {
     type: String,
     default: null,
@@ -114,7 +115,13 @@ const bodyEl = ref(null)
 
 const hasDefaultHeader = computed(() =>
   Boolean(
-    props.title || props.backTo || slots['title-extra'] || slots.nav || slots.meta || slots.actions,
+    props.title ||
+    props.backTo ||
+    slots['title-extra'] ||
+    slots.nav ||
+    slots['header-left'] ||
+    slots['header-right'] ||
+    slots.actions,
   ),
 )