@wishbone-media/spark 0.5.1 → 0.5.2

package/dist/index.js

@@ -41,13 +41,13 @@ const b = {
   farTimes: oe,
   farXmark: ae
 };
-function ys(e) {
+function Bs(e) {
   Object.assign(b, e), N.add(...Object.values(e));
 }
-function Bs(e) {
+function bs(e) {
   N.add(...Object.values(b)), e.component("FontAwesomeIcon", ne);
 }
-const Le = { class: "flex items-center" }, We = { class: "shrink-0 self-start" }, Oe = { class: "ml-3" }, Je = { class: "ml-auto pl-3 pt-1 self-start" }, Te = { class: "-mx-1.5 -my-1.5" }, bs = {
+const Le = { class: "flex items-center" }, We = { class: "shrink-0 self-start" }, Oe = { class: "ml-3" }, Je = { class: "ml-auto pl-3 pt-1 self-start" }, Te = { class: "-mx-1.5 -my-1.5" }, ws = {
   __name: "SparkAlert",
   props: {
     type: {
@@ -408,7 +408,7 @@ const Le = { class: "flex items-center" }, We = { class: "shrink-0 self-start" }
       M(t.$slots, "default")
     ], 10, bt));
   }
-}, ws = {
+}, hs = {
   __name: "SparkButtonGroup",
   setup(e) {
     const a = E(null);
@@ -430,7 +430,7 @@ const Le = { class: "flex items-center" }, We = { class: "shrink-0 self-start" }
 }, Mt = {
   key: 1,
   class: "p-5"
-}, hs = {
+}, Ms = {
   __name: "SparkCard",
   props: {
     padded: {
@@ -535,7 +535,7 @@ const H = new Ct(), zt = { class: "fixed inset-0 z-10 w-screen overflow-y-auto"
 }, Pt = { class: "px-4 pt-5 pb-4 sm:p-6" }, Ht = {
   key: 0,
   class: "text-lg font-medium text-gray-900"
-}, Ms = {
+}, Cs = {
   __name: "SparkModalDialog",
   props: {
     title: {
@@ -784,7 +784,7 @@ const z = new Et(), kt = { class: "flex grow m-2.5 p-[10px] rounded-lg" }, Qt =
 }, Ot = ["href", "onClick"], Jt = {
   key: 1,
   class: "text-[13px]"
-}, Tt = { class: "mt-auto" }, qt = { class: "p-[10px] flex-shrink-0" }, Ft = { class: "flex flex-1 items-center gap-x-6" }, Nt = { class: "relative flex flex-1 items-center justify-between" }, Ut = { class: "cursor-pointer" }, Rt = ["src"], Xt = { class: "mr-[10px] pb-[10px] flex-1 flex flex-col" }, Cs = {
+}, Tt = { class: "mt-auto" }, qt = { class: "p-[10px] flex-shrink-0" }, Ft = { class: "flex flex-1 items-center gap-x-6" }, Nt = { class: "relative flex flex-1 items-center gap-4" }, Ut = { class: "cursor-pointer" }, Rt = ["src"], Xt = { class: "ml-auto" }, Kt = { class: "mr-[10px] pb-[10px] flex-1 flex flex-col" }, zs = {
   __name: "SparkDefaultContainer",
   props: {
     appStore: {
@@ -926,7 +926,7 @@ const z = new Et(), kt = { class: "flex grow m-2.5 p-[10px] rounded-lg" }, Qt =
                 M(l.$slots, "header-center", {}, () => [
                   e.appStore.state.showBrandSelector ? (r(), i("div", {
                     key: 0,
-                    class: "cursor-pointer h-9 flex items-center",
+                    class: "absolute left-1/2 -translate-x-1/2 cursor-pointer h-9 flex items-center",
                     onClick: f
                   }, [
                     c(n).currentBrand ? (r(), i("img", {
@@ -937,23 +937,25 @@ const z = new Et(), kt = { class: "flex grow m-2.5 p-[10px] rounded-lg" }, Qt =
                     }, null, 8, Rt)) : x("", !0)
                   ])) : x("", !0)
                 ]),
-                M(l.$slots, "header-right", {}, () => [
-                  e.appStore.state.showAppSelector ? (r(), i("button", {
-                    key: 0,
-                    class: "rounded-sm bg-white w-[42px] h-[42px] ring-1 ring-inset ring-gray-300",
-                    type: "button",
-                    onClick: A
-                  }, [
-                    u(o, {
-                      icon: c(b).farGripDotsVertical,
-                      class: "size-4 text-gray-400"
-                    }, null, 8, ["icon"])
-                  ])) : x("", !0)
+                s("div", Xt, [
+                  M(l.$slots, "header-right", {}, () => [
+                    e.appStore.state.showAppSelector ? (r(), i("button", {
+                      key: 0,
+                      class: "rounded-sm bg-white w-[42px] h-[42px] ring-1 ring-inset ring-gray-300",
+                      type: "button",
+                      onClick: A
+                    }, [
+                      u(o, {
+                        icon: c(b).farGripDotsVertical,
+                        class: "size-4 text-gray-400"
+                      }, null, 8, ["icon"])
+                    ])) : x("", !0)
+                  ])
                 ])
               ])
             ])
           ]),
-          s("main", Xt, [
+          s("main", Kt, [
             u(p)
           ])
         ], 2),
@@ -971,19 +973,19 @@ const z = new Et(), kt = { class: "flex grow m-2.5 p-[10px] rounded-lg" }, Qt =
       ], 64);
     };
   }
-}, Kt = (e, a) => {
+}, Vt = (e, a) => {
   const n = e.__vccOpts || e;
   for (const [A, f] of a)
     n[A] = f;
   return n;
-}, Vt = {}, _t = { class: "h-full" };
-function $t(e, a) {
+}, _t = {}, $t = { class: "h-full" };
+function es(e, a) {
   const n = C("router-view");
-  return r(), i("main", _t, [
+  return r(), i("main", $t, [
     u(n)
   ]);
 }
-const zs = /* @__PURE__ */ Kt(Vt, [["render", $t]]), Ys = I("sparkApp", () => {
+const Ys = /* @__PURE__ */ Vt(_t, [["render", es]]), Ds = I("sparkApp", () => {
   const e = k({
     app: "",
     icon: "",
@@ -997,7 +999,7 @@ const zs = /* @__PURE__ */ Kt(Vt, [["render", $t]]), Ys = I("sparkApp", () => {
       e.app = n.app || "", e.icon = n.icon || "", e.homeRoute = n.homeRoute ?? "dashboard", e.showBrandSelector = n.showBrandSelector ?? !0, e.showAppSelector = n.showAppSelector ?? !0;
     }
   };
-}), Ds = I("sparkNav", () => {
+}), Ps = I("sparkNav", () => {
   const e = k({
     menu: [],
     collapsed: !1,
@@ -1040,20 +1042,20 @@ const zs = /* @__PURE__ */ Kt(Vt, [["render", $t]]), Ys = I("sparkApp", () => {
       e.hidden = !e.hidden;
     }
   };
-}), es = { class: "h-full grid place-content-center relative" }, ts = { class: "absolute top-8 left-8" }, ss = ["src"], ns = {
+}), ts = { class: "h-full grid place-content-center relative" }, ss = { class: "absolute top-8 left-8" }, ns = ["src"], as = {
   key: 1,
   width: "59",
   height: "23",
   viewBox: "0 0 59 23",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, as = { class: "max-w-sm grid gap-y-1 -mt-8" }, os = { class: "mb-7" }, rs = { class: "text-gray-600" }, ls = { class: "grid grid-flow-col justify-between my-1" }, is = {
+}, os = { class: "max-w-sm grid gap-y-1 -mt-8" }, rs = { class: "mb-7" }, ls = { class: "text-gray-600" }, is = { class: "grid grid-flow-col justify-between my-1" }, cs = {
   key: 0,
   class: "text-red-600 text-sm mb-2"
-}, cs = { key: 0 }, As = { key: 1 }, ms = {
+}, As = { key: 0 }, ms = { key: 1 }, ds = {
   key: 0,
   class: "mt-4 text-center text-sm text-gray-600"
-}, Ps = {
+}, Hs = {
   __name: "SparkLoginView",
   props: {
     logo: {
@@ -1091,14 +1093,14 @@ const zs = /* @__PURE__ */ Kt(Vt, [["render", $t]]), Ys = I("sparkApp", () => {
     };
     return (l, t) => {
       const o = C("FormKit"), p = C("router-link");
-      return r(), i("div", es, [
-        s("div", ts, [
+      return r(), i("div", ts, [
+        s("div", ss, [
           n.logo ? (r(), i("img", {
             key: 0,
             src: n.logo,
             alt: "Logo",
             class: "h-[23px] w-auto"
-          }, null, 8, ss)) : (r(), i("svg", ns, [...t[0] || (t[0] = [
+          }, null, 8, ns)) : (r(), i("svg", as, [...t[0] || (t[0] = [
             s("path", {
               d: "M49.2029 17.1264V8.03835H44.0829V5.22235H58.0989V8.03835H52.9629V17.1264H49.2029Z",
               fill: "#1C64F2"
@@ -1117,10 +1119,10 @@ const zs = /* @__PURE__ */ Kt(Vt, [["render", $t]]), Ys = I("sparkApp", () => {
             }, null, -1)
           ])]))
         ]),
-        s("div", as, [
-          s("div", os, [
+        s("div", os, [
+          s("div", rs, [
             t[1] || (t[1] = s("h1", { class: "text-4xl text-gray-900 semibold tracking-tight mb-3" }, "Log in", -1)),
-            s("p", rs, " Welcome back" + h(n.appName ? ` to ${n.appName}` : "") + "! Please enter your details. ", 1)
+            s("p", ls, " Welcome back" + h(n.appName ? ` to ${n.appName}` : "") + "! Please enter your details. ", 1)
           ]),
           u(o, {
             type: "form",
@@ -1144,7 +1146,7 @@ const zs = /* @__PURE__ */ Kt(Vt, [["render", $t]]), Ys = I("sparkApp", () => {
                 validation: "required",
                 "outer-class": "max-w-full"
               }),
-              s("div", ls, [
+              s("div", is, [
                 u(o, {
                   label: "Remember me",
                   name: "remember",
@@ -1160,7 +1162,7 @@ const zs = /* @__PURE__ */ Kt(Vt, [["render", $t]]), Ys = I("sparkApp", () => {
                   _: 1
                 }, 8, ["to"])
               ]),
-              v.value ? (r(), i("div", is, h(v.value), 1)) : x("", !0),
+              v.value ? (r(), i("div", cs, h(v.value), 1)) : x("", !0),
               u(c(V), {
                 type: "submit",
                 size: "xl",
@@ -1168,14 +1170,14 @@ const zs = /* @__PURE__ */ Kt(Vt, [["render", $t]]), Ys = I("sparkApp", () => {
                 "button-class": "w-full"
               }, {
                 default: B(() => [
-                  f.value ? (r(), i("span", As, "Signing in...")) : (r(), i("span", cs, "Sign in"))
+                  f.value ? (r(), i("span", ms, "Signing in...")) : (r(), i("span", As, "Sign in"))
                 ]),
                 _: 1
               }, 8, ["disabled"])
             ]),
             _: 1
           }),
-          n.signupRoute ? (r(), i("div", ms, [
+          n.signupRoute ? (r(), i("div", ds, [
             t[4] || (t[4] = Q(" Don't have an account? ", -1)),
             u(p, {
               to: n.signupRoute,
@@ -1194,24 +1196,24 @@ const zs = /* @__PURE__ */ Kt(Vt, [["render", $t]]), Ys = I("sparkApp", () => {
 };
 export {
   b as Icons,
-  bs as SparkAlert,
+  ws as SparkAlert,
   st as SparkAppSelector,
   Bt as SparkBrandSelector,
   V as SparkButton,
-  ws as SparkButtonGroup,
-  hs as SparkCard,
-  Cs as SparkDefaultContainer,
-  Ps as SparkLoginView,
+  hs as SparkButtonGroup,
+  Ms as SparkCard,
+  zs as SparkDefaultContainer,
+  Hs as SparkLoginView,
   Dt as SparkModalContainer,
-  Ms as SparkModalDialog,
+  Cs as SparkModalDialog,
   W as SparkOverlay,
-  zs as SparkPublicContainer,
-  ys as addIcons,
-  Bs as setupFontAwesome,
+  Ys as SparkPublicContainer,
+  Bs as addIcons,
+  bs as setupFontAwesome,
   H as sparkModalService,
   z as sparkOverlayService,
-  Ys as useSparkAppStore,
+  Ds as useSparkAppStore,
   K as useSparkBrandFilterStore,
-  Ds as useSparkNavStore,
+  Ps as useSparkNavStore,
   O as useSparkOverlay
 };

package/package.json

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

package/src/containers/SparkDefaultContainer.vue

@@ -103,7 +103,7 @@
   <div :class="contentClass" class="h-full transition-all flex flex-col">
     <div class="p-[10px] flex-shrink-0">
       <div class="flex flex-1 items-center gap-x-6">
-        <div class="relative flex flex-1 items-center justify-between">
+        <div class="relative flex flex-1 items-center gap-4">
           <slot name="header-left">
             <div class="cursor-pointer">
               <font-awesome-icon
@@ -117,7 +117,7 @@
           <slot name="header-center">
             <div
               v-if="appStore.state.showBrandSelector"
-              class="cursor-pointer h-9 flex items-center"
+              class="absolute left-1/2 -translate-x-1/2 cursor-pointer h-9 flex items-center"
               @click="toggleBrandSelector"
             >
               <img
@@ -129,16 +129,18 @@
             </div>
           </slot>
 
-          <slot name="header-right">
-            <button
-              v-if="appStore.state.showAppSelector"
-              class="rounded-sm bg-white w-[42px] h-[42px] ring-1 ring-inset ring-gray-300"
-              type="button"
-              @click="toggleAppSelector"
-            >
-              <font-awesome-icon :icon="Icons.farGripDotsVertical" class="size-4 text-gray-400" />
-            </button>
-          </slot>
+          <div class="ml-auto">
+            <slot name="header-right">
+              <button
+                v-if="appStore.state.showAppSelector"
+                class="rounded-sm bg-white w-[42px] h-[42px] ring-1 ring-inset ring-gray-300"
+                type="button"
+                @click="toggleAppSelector"
+              >
+                <font-awesome-icon :icon="Icons.farGripDotsVertical" class="size-4 text-gray-400" />
+              </button>
+            </slot>
+          </div>
         </div>
       </div>
     </div>