@wishbone-media/spark 0.1.0 → 0.1.1

package/dist/index.js

@@ -1,52 +1,29 @@
-import { reactive as y, markRaw as m, ref as d, createBlock as f, openBlock as c, unref as a, withCtx as o, createVNode as n, createElementVNode as u, normalizeClass as x, resolveDynamicComponent as g, normalizeProps as O, guardReactiveProps as b } from "vue";
-import { TransitionRoot as V, Dialog as C, TransitionChild as p, DialogPanel as h } from "@headlessui/vue";
-import { defineStore as w } from "pinia";
-const R = w("overlay", () => {
-  const e = y({
-    left: {
-      isVisible: !1,
-      content: null
-    },
-    right: {
-      isVisible: !1,
-      content: null
-    }
-  });
-  return {
-    state: e,
-    toggleOverlay: (t) => {
-      e[t].isVisible = !e[t].isVisible;
-    },
-    closeOverlay: (t) => {
-      e[t].isVisible = !1;
-    },
-    openOverlay: (t) => {
-      e[t].isVisible = !0;
-    },
-    setOverlayContent: (t, v) => {
-      e[t].content = m(v);
-    }
-  };
-}), k = { class: "fixed inset-0 flex" }, P = {
+import { ref as y, createBlock as c, openBlock as f, unref as a, withCtx as o, createVNode as n, createElementVNode as u, normalizeClass as v, resolveDynamicComponent as d, normalizeProps as m, guardReactiveProps as x, reactive as g, markRaw as b } from "vue";
+import { TransitionRoot as h, Dialog as V, TransitionChild as p, DialogPanel as w } from "@headlessui/vue";
+const C = { class: "fixed inset-0 flex" }, O = {
   __name: "AppOverlay",
   props: {
     position: {
       type: String,
       required: !0,
       validator: (e) => ["left", "right"].includes(e)
+    },
+    overlayInstance: {
+      type: Object,
+      required: !0
     }
   },
   setup(e) {
-    const i = R(), r = d(null);
-    return (s, l) => (c(), f(a(V), {
-      show: a(i).state[e.position].isVisible,
+    const i = y(null);
+    return (s, t) => (f(), c(a(h), {
+      show: e.overlayInstance.state.isVisible,
       as: "template"
     }, {
       default: o(() => [
-        n(a(C), {
-          initialFocus: r.value,
+        n(a(V), {
+          initialFocus: i.value,
           class: "relative z-200",
-          onClose: l[0] || (l[0] = (t) => a(i).closeOverlay(e.position))
+          onClose: e.overlayInstance.close
         }, {
           default: o(() => [
             n(a(p), {
@@ -58,13 +35,13 @@ const R = w("overlay", () => {
               "leave-from": "opacity-100",
               "leave-to": "opacity-0"
             }, {
-              default: o(() => l[1] || (l[1] = [
+              default: o(() => t[0] || (t[0] = [
                 u("div", { class: "fixed inset-0 bg-gray-600/30" }, null, -1)
               ])),
               _: 1,
-              __: [1]
+              __: [0]
             }),
-            u("div", k, [
+            u("div", C, [
               n(a(p), {
                 as: "template",
                 enter: "transition ease-in-out duration-150 transform",
@@ -75,16 +52,16 @@ const R = w("overlay", () => {
                 "leave-to": e.position === "left" ? "-translate-x-full opacity-0" : "translate-x-full opacity-0"
               }, {
                 default: o(() => [
-                  n(a(h), {
+                  n(a(w), {
                     ref_key: "panelRef",
-                    ref: r,
-                    class: x([
+                    ref: i,
+                    class: v([
                       "flex w-[400px] py-2.5",
                       e.position === "left" ? "relative left-[10px]" : "absolute right-[10px] h-full"
                     ])
                   }, {
                     default: o(() => [
-                      (c(), f(g(a(i).state[e.position].content), O(b(s.$attrs)), null, 16))
+                      (f(), c(d(e.overlayInstance.state.content), m(x(s.$attrs)), null, 16))
                     ]),
                     _: 1
                   }, 8, ["class"])
@@ -94,13 +71,37 @@ const R = w("overlay", () => {
             ])
           ]),
           _: 1
-        }, 8, ["initialFocus"])
+        }, 8, ["initialFocus", "onClose"])
       ]),
       _: 1
     }, 8, ["show"]));
   }
 };
+function z() {
+  const e = g({
+    isVisible: !1,
+    content: null
+  }), i = () => {
+    e.isVisible = !e.isVisible;
+  }, s = () => {
+    e.isVisible = !1;
+  }, t = () => {
+    e.isVisible = !0;
+  }, r = (l) => {
+    e.content = b(l);
+  };
+  return {
+    state: e,
+    toggle: i,
+    close: s,
+    open: t,
+    setContent: r,
+    show: (l) => {
+      l && r(l), t();
+    }
+  };
+}
 export {
-  P as AppOverlay,
-  R as useOverlayStore
+  O as AppOverlay,
+  z as useOverlay
 };

package/package.json

@@ -1,13 +1,15 @@
 {
   "name": "@wishbone-media/spark",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
-  "files": ["dist", "src"],
+  "files": [
+    "dist",
+    "src"
+  ],
   "peerDependencies": {
     "@headlessui/vue": "^1.7.0",
-    "pinia": "^3.0.0",
     "vue": "^3.5.0"
   },
   "devDependencies": {

package/src/components/AppOverlay.vue

@@ -1,10 +1,6 @@
 <template>
-  <TransitionRoot :show="overlayStore.state[position].isVisible" as="template">
-    <Dialog
-      :initialFocus="panelRef"
-      class="relative z-200"
-      @close="overlayStore.closeOverlay(position)"
-    >
+  <TransitionRoot :show="overlayInstance.state.isVisible" as="template">
+    <Dialog :initialFocus="panelRef" class="relative z-200" @close="overlayInstance.close">
       <TransitionChild
         as="template"
         enter="transition-opacity ease-linear duration-150"
@@ -38,7 +34,7 @@
               position === 'left' ? 'relative left-[10px]' : 'absolute right-[10px] h-full',
             ]"
           >
-            <component :is="overlayStore.state[position].content" v-bind="$attrs" />
+            <component :is="overlayInstance.state.content" v-bind="$attrs" />
           </DialogPanel>
         </TransitionChild>
       </div>
@@ -49,9 +45,7 @@
 <script setup>
 import { ref } from 'vue'
 import { Dialog, DialogPanel, TransitionChild, TransitionRoot } from '@headlessui/vue'
-import { useOverlayStore } from '../stores/overlay'
 
-const overlayStore = useOverlayStore()
 const panelRef = ref(null)
 
 defineProps({
@@ -60,5 +54,9 @@ defineProps({
     required: true,
     validator: (value) => ['left', 'right'].includes(value),
   },
+  overlayInstance: {
+    type: Object,
+    required: true,
+  },
 })
 </script>

package/src/composables/index.js

@@ -0,0 +1 @@
+export { useOverlay } from './useOverlay.js'

package/src/composables/useOverlay.js

@@ -0,0 +1,38 @@
+import { markRaw, reactive } from 'vue'
+
+export function useOverlay() {
+  const state = reactive({
+    isVisible: false,
+    content: null,
+  })
+
+  const toggle = () => {
+    state.isVisible = !state.isVisible
+  }
+
+  const close = () => {
+    state.isVisible = false
+  }
+
+  const open = () => {
+    state.isVisible = true
+  }
+
+  const setContent = (content) => {
+    state.content = markRaw(content)
+  }
+
+  const show = (content) => {
+    if (content) setContent(content)
+    open()
+  }
+
+  return {
+    state,
+    toggle,
+    close,
+    open,
+    setContent,
+    show,
+  }
+}

package/src/index.js

@@ -1,9 +1,5 @@
 // Export all components
 export * from './components/index.js'
 
-// Export all stores
-export * from './stores/index.js'
-
-// Add any global utilities, composables, etc. here later
-// export * from './composables/index.js'
-// export * from './utilities/index.js'
+// Export all composables
+export * from './composables/index.js'

package/src/stores/index.js

@@ -1,4 +0,0 @@
-export { useOverlayStore } from './overlay.js'
-
-// export { useModalStore } from './modal.js'
-// export { useToastStore } from './toast.js'

package/src/stores/overlay.js

@@ -1,39 +0,0 @@
-import { defineStore } from 'pinia'
-import { markRaw, reactive } from 'vue'
-
-export const useOverlayStore = defineStore('overlay', () => {
-  const state = reactive({
-    left: {
-      isVisible: false,
-      content: null,
-    },
-    right: {
-      isVisible: false,
-      content: null,
-    },
-  })
-
-  const toggleOverlay = (position) => {
-    state[position].isVisible = !state[position].isVisible
-  }
-
-  const closeOverlay = (position) => {
-    state[position].isVisible = false
-  }
-
-  const openOverlay = (position) => {
-    state[position].isVisible = true
-  }
-
-  const setOverlayContent = (position, content) => {
-    state[position].content = markRaw(content)
-  }
-
-  return {
-    state,
-    toggleOverlay,
-    closeOverlay,
-    openOverlay,
-    setOverlayContent,
-  }
-})