@wishbone-media/spark 0.1.0

package/dist/index.js

@@ -0,0 +1,106 @@
+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 = {
+  __name: "AppOverlay",
+  props: {
+    position: {
+      type: String,
+      required: !0,
+      validator: (e) => ["left", "right"].includes(e)
+    }
+  },
+  setup(e) {
+    const i = R(), r = d(null);
+    return (s, l) => (c(), f(a(V), {
+      show: a(i).state[e.position].isVisible,
+      as: "template"
+    }, {
+      default: o(() => [
+        n(a(C), {
+          initialFocus: r.value,
+          class: "relative z-200",
+          onClose: l[0] || (l[0] = (t) => a(i).closeOverlay(e.position))
+        }, {
+          default: o(() => [
+            n(a(p), {
+              as: "template",
+              enter: "transition-opacity ease-linear duration-150",
+              "enter-from": "opacity-0",
+              "enter-to": "opacity-100",
+              leave: "transition-opacity ease-linear duration-150",
+              "leave-from": "opacity-100",
+              "leave-to": "opacity-0"
+            }, {
+              default: o(() => l[1] || (l[1] = [
+                u("div", { class: "fixed inset-0 bg-gray-600/30" }, null, -1)
+              ])),
+              _: 1,
+              __: [1]
+            }),
+            u("div", k, [
+              n(a(p), {
+                as: "template",
+                enter: "transition ease-in-out duration-150 transform",
+                "enter-from": e.position === "left" ? "-translate-x-full opacity-0" : "translate-x-full opacity-0",
+                "enter-to": "translate-x-0 opacity-100",
+                leave: "transition ease-in-out duration-150 transform",
+                "leave-from": "translate-x-0 opacity-100",
+                "leave-to": e.position === "left" ? "-translate-x-full opacity-0" : "translate-x-full opacity-0"
+              }, {
+                default: o(() => [
+                  n(a(h), {
+                    ref_key: "panelRef",
+                    ref: r,
+                    class: x([
+                      "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))
+                    ]),
+                    _: 1
+                  }, 8, ["class"])
+                ]),
+                _: 1
+              }, 8, ["enter-from", "leave-to"])
+            ])
+          ]),
+          _: 1
+        }, 8, ["initialFocus"])
+      ]),
+      _: 1
+    }, 8, ["show"]));
+  }
+};
+export {
+  P as AppOverlay,
+  R as useOverlayStore
+};

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@wishbone-media/spark",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "files": ["dist", "src"],
+  "peerDependencies": {
+    "@headlessui/vue": "^1.7.0",
+    "pinia": "^3.0.0",
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.4",
+    "vite": "^6.3.5",
+    "vue": "^3.5.13"
+  },
+  "packageManager": "pnpm@10.11.1",
+  "scripts": {
+    "build": "vite build"
+  },
+  "exports": {
+    ".": "./dist/index.js",
+    "./src/*": "./src/*"
+  }
+}

package/src/components/AppOverlay.vue

@@ -0,0 +1,64 @@
+<template>
+  <TransitionRoot :show="overlayStore.state[position].isVisible" as="template">
+    <Dialog
+      :initialFocus="panelRef"
+      class="relative z-200"
+      @close="overlayStore.closeOverlay(position)"
+    >
+      <TransitionChild
+        as="template"
+        enter="transition-opacity ease-linear duration-150"
+        enter-from="opacity-0"
+        enter-to="opacity-100"
+        leave="transition-opacity ease-linear duration-150"
+        leave-from="opacity-100"
+        leave-to="opacity-0"
+      >
+        <div class="fixed inset-0 bg-gray-600/30" />
+      </TransitionChild>
+
+      <div class="fixed inset-0 flex">
+        <TransitionChild
+          as="template"
+          enter="transition ease-in-out duration-150 transform"
+          :enter-from="
+            position === 'left' ? '-translate-x-full opacity-0' : 'translate-x-full opacity-0'
+          "
+          enter-to="translate-x-0 opacity-100"
+          leave="transition ease-in-out duration-150 transform"
+          leave-from="translate-x-0 opacity-100"
+          :leave-to="
+            position === 'left' ? '-translate-x-full opacity-0' : 'translate-x-full opacity-0'
+          "
+        >
+          <DialogPanel
+            ref="panelRef"
+            :class="[
+              'flex w-[400px] py-2.5',
+              position === 'left' ? 'relative left-[10px]' : 'absolute right-[10px] h-full',
+            ]"
+          >
+            <component :is="overlayStore.state[position].content" v-bind="$attrs" />
+          </DialogPanel>
+        </TransitionChild>
+      </div>
+    </Dialog>
+  </TransitionRoot>
+</template>
+
+<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({
+  position: {
+    type: String,
+    required: true,
+    validator: (value) => ['left', 'right'].includes(value),
+  },
+})
+</script>

package/src/components/index.js

@@ -0,0 +1,7 @@
+import AppOverlay from './AppOverlay.vue'
+
+export { AppOverlay }
+
+// import Modal from './Modal.vue'
+// import Dropdown from './Dropdown.vue'
+// export { AppOverlay, Modal, Dropdown }

package/src/index.js

@@ -0,0 +1,9 @@
+// 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'

package/src/stores/index.js

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

package/src/stores/overlay.js

@@ -0,0 +1,39 @@
+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,
+  }
+})