@wishbone-media/spark 0.1.2 → 0.1.4

package/dist/index.js

@@ -1,7 +1,199 @@
-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",
+import { computed as u, resolveComponent as $, createElementBlock as x, openBlock as d, normalizeClass as m, createElementVNode as s, createVNode as r, unref as a, renderSlot as f, createBlock as p, withCtx as n, createCommentVNode as g, ref as S, resolveDynamicComponent as z, normalizeProps as I, guardReactiveProps as V, reactive as T, markRaw as X } from "vue";
+import { library as E } from "@fortawesome/fontawesome-svg-core";
+import { faCheck as O, faXmark as R, faCircleXmark as B, faInfoCircle as D, faCheckCircle as N, faExclamationTriangle as j } from "@fortawesome/pro-regular-svg-icons";
+import { TransitionRoot as h, Dialog as k, TransitionChild as y, DialogPanel as _, DialogTitle as q } from "@headlessui/vue";
+const b = {
+  farExclamationTriangle: j,
+  farCheckCircle: N,
+  farInfoCircle: D,
+  farCircleXmark: B,
+  farXmark: R,
+  farCheck: O
+};
+function se() {
+  E.add(...Object.values(b));
+}
+const P = { class: "flex items-center" }, A = { class: "shrink-0 self-start" }, F = { class: "ml-3" }, M = { class: "ml-auto pl-3 pt-1 self-start" }, G = { class: "-mx-1.5 -my-1.5" }, ae = {
+  __name: "SparkAlert",
+  props: {
+    type: {
+      type: String,
+      default: "info",
+      validator: (e) => ["success", "warning", "danger", "info"].includes(e)
+    }
+  },
+  emits: ["close"],
+  setup(e) {
+    const o = e, c = u(() => ({
+      success: "bg-green-50 border-green-200 text-green-700",
+      warning: "bg-yellow-50 border-yellow-200 text-yellow-700",
+      danger: "bg-red-50 border-red-200 text-red-700",
+      info: "bg-blue-50 border-blue-200 text-blue-700"
+    })[o.type]), t = u(() => ({
+      success: "text-green-400",
+      warning: "text-yellow-400",
+      danger: "text-red-400",
+      info: "text-blue-400"
+    })[o.type]), i = u(() => ({
+      success: "farCheckCircle",
+      warning: "farExclamationTriangle",
+      danger: "farCircleXmark",
+      info: "farInfoCircle"
+    })[o.type]), v = u(() => ({
+      success: "text-green-400 hover:bg-green-100",
+      warning: "text-yellow-400 hover:bg-yellow-100",
+      danger: "text-red-400 hover:bg-red-100",
+      info: "text-blue-400 hover:bg-blue-100"
+    })[o.type]);
+    return (l, w) => {
+      const C = $("font-awesome-icon");
+      return d(), x("div", {
+        class: m(["rounded-md border p-4", c.value])
+      }, [
+        s("div", P, [
+          s("div", A, [
+            r(C, {
+              icon: a(b)[i.value],
+              class: m(t.value)
+            }, null, 8, ["icon", "class"])
+          ]),
+          s("div", F, [
+            f(l.$slots, "default")
+          ]),
+          s("div", M, [
+            s("div", G, [
+              s("button", {
+                type: "button",
+                class: m(["inline-flex rounded-md px-2 py-1.5", v.value]),
+                onClick: w[0] || (w[0] = (W) => l.$emit("close"))
+              }, [
+                r(C, {
+                  icon: a(b).farXmark
+                }, null, 8, ["icon"])
+              ], 2)
+            ])
+          ])
+        ])
+      ], 2);
+    };
+  }
+}, H = { class: "fixed inset-0 z-10 w-screen overflow-y-auto" }, J = { class: "flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0" }, K = { key: 0 }, L = { class: "text-center sm:mt-5" }, Q = {
+  key: 0,
+  class: "mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3"
+}, oe = {
+  __name: "SparkModal",
+  props: {
+    open: {
+      type: Boolean,
+      required: !0
+    },
+    size: {
+      type: String,
+      default: "md",
+      validator: (e) => ["sm", "md", "lg", "xl", "2xl"].includes(e)
+    },
+    icon: {
+      type: String
+    },
+    iconColor: {
+      type: String
+    }
+  },
+  emits: ["close"],
+  setup(e) {
+    const o = e, c = u(() => ({
+      sm: "sm:max-w-sm",
+      md: "sm:max-w-lg",
+      lg: "sm:max-w-2xl",
+      xl: "sm:max-w-4xl",
+      "2xl": "sm:max-w-6xl"
+    })[o.size]);
+    return (t, i) => (d(), p(a(h), {
+      as: "template",
+      show: e.open
+    }, {
+      default: n(() => [
+        r(a(k), {
+          class: "relative z-50",
+          onClose: i[0] || (i[0] = (v) => t.$emit("close"))
+        }, {
+          default: n(() => [
+            r(a(y), {
+              as: "template",
+              enter: "ease-out duration-300",
+              "enter-from": "opacity-0",
+              "enter-to": "opacity-100",
+              leave: "ease-in duration-200",
+              "leave-from": "opacity-100",
+              "leave-to": "opacity-0"
+            }, {
+              default: n(() => i[1] || (i[1] = [
+                s("div", { class: "fixed inset-0 bg-gray-500/75 transition-opacity" }, null, -1)
+              ])),
+              _: 1,
+              __: [1]
+            }),
+            s("div", H, [
+              s("div", J, [
+                r(a(y), {
+                  as: "template",
+                  enter: "ease-out duration-300",
+                  "enter-from": "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
+                  "enter-to": "opacity-100 translate-y-0 sm:scale-100",
+                  leave: "ease-in duration-200",
+                  "leave-from": "opacity-100 translate-y-0 sm:scale-100",
+                  "leave-to": "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                }, {
+                  default: n(() => [
+                    r(a(_), {
+                      class: m([
+                        "relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:p-6",
+                        c.value
+                      ])
+                    }, {
+                      default: n(() => [
+                        s("div", null, [
+                          t.$slots.icon ? (d(), x("div", K, [
+                            f(t.$slots, "icon")
+                          ])) : g("", !0),
+                          s("div", L, [
+                            t.$slots.title ? (d(), p(a(q), {
+                              key: 0,
+                              as: "div",
+                              class: "text-base font-semibold text-gray-900"
+                            }, {
+                              default: n(() => [
+                                f(t.$slots, "title")
+                              ]),
+                              _: 3
+                            })) : g("", !0),
+                            s("div", {
+                              class: m({ "mt-2": t.$slots.title })
+                            }, [
+                              f(t.$slots, "default")
+                            ], 2)
+                          ])
+                        ]),
+                        t.$slots.actions ? (d(), x("div", Q, [
+                          f(t.$slots, "actions")
+                        ])) : g("", !0)
+                      ]),
+                      _: 3
+                    }, 8, ["class"])
+                  ]),
+                  _: 3
+                })
+              ])
+            ])
+          ]),
+          _: 3
+        })
+      ]),
+      _: 3
+    }, 8, ["show"]));
+  }
+}, U = { class: "fixed inset-0 flex" }, le = {
+  __name: "SparkOverlay",
   props: {
     position: {
       type: String,
@@ -14,19 +206,19 @@ const C = { class: "fixed inset-0 flex" }, O = {
     }
   },
   setup(e) {
-    const i = y(null);
-    return (s, t) => (f(), c(a(h), {
+    const o = S(null);
+    return (c, t) => (d(), p(a(h), {
       show: e.overlayInstance.state.isVisible,
       as: "template"
     }, {
-      default: o(() => [
-        n(a(V), {
-          initialFocus: i.value,
+      default: n(() => [
+        r(a(k), {
+          initialFocus: o.value,
           class: "relative z-200",
           onClose: e.overlayInstance.close
         }, {
-          default: o(() => [
-            n(a(p), {
+          default: n(() => [
+            r(a(y), {
               as: "template",
               enter: "transition-opacity ease-linear duration-150",
               "enter-from": "opacity-0",
@@ -35,14 +227,14 @@ const C = { class: "fixed inset-0 flex" }, O = {
               "leave-from": "opacity-100",
               "leave-to": "opacity-0"
             }, {
-              default: o(() => t[0] || (t[0] = [
-                u("div", { class: "fixed inset-0 bg-gray-600/30" }, null, -1)
+              default: n(() => t[0] || (t[0] = [
+                s("div", { class: "fixed inset-0 bg-gray-600/30" }, null, -1)
               ])),
               _: 1,
               __: [0]
             }),
-            u("div", C, [
-              n(a(p), {
+            s("div", U, [
+              r(a(y), {
                 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",
@@ -51,17 +243,17 @@ const C = { class: "fixed inset-0 flex" }, O = {
                 "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(w), {
+                default: n(() => [
+                  r(a(_), {
                     ref_key: "panelRef",
-                    ref: i,
-                    class: v([
+                    ref: o,
+                    class: m([
                       "flex w-[400px] py-2.5",
                       e.position === "left" ? "relative left-[10px]" : "absolute right-[10px] h-full"
                     ])
                   }, {
-                    default: o(() => [
-                      (f(), c(d(e.overlayInstance.state.content), m(x(s.$attrs)), null, 16))
+                    default: n(() => [
+                      (d(), p(z(e.overlayInstance.state.content), I(V(c.$attrs)), null, 16))
                     ]),
                     _: 1
                   }, 8, ["class"])
@@ -77,31 +269,35 @@ const C = { class: "fixed inset-0 flex" }, O = {
     }, 8, ["show"]));
   }
 };
-function z() {
-  const e = g({
+function ne() {
+  const e = T({
     isVisible: !1,
     content: null
-  }), i = () => {
+  }), o = () => {
     e.isVisible = !e.isVisible;
-  }, s = () => {
+  }, c = () => {
     e.isVisible = !1;
   }, t = () => {
     e.isVisible = !0;
-  }, r = (l) => {
-    e.content = b(l);
+  }, i = (l) => {
+    e.content = X(l);
   };
   return {
     state: e,
-    toggle: i,
-    close: s,
+    toggle: o,
+    close: c,
     open: t,
-    setContent: r,
+    setContent: i,
     show: (l) => {
-      l && r(l), t();
+      l && i(l), t();
     }
   };
 }
 export {
-  O as AppOverlay,
-  z as useOverlay
+  b as Icons,
+  ae as SparkAlert,
+  oe as SparkModal,
+  le as SparkOverlay,
+  se as addSparkIcons,
+  ne as useSparkOverlay
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wishbone-media/spark",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -10,6 +10,8 @@
   ],
   "peerDependencies": {
     "@headlessui/vue": "^1.7.0",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/pro-regular-svg-icons": "^6.7.2",
     "vue": "^3.5.0"
   },
   "devDependencies": {

package/src/components/SparkAlert.vue

@@ -0,0 +1,83 @@
+<template>
+  <div :class="['rounded-md border p-4', containerClasses]">
+    <div class="flex items-center">
+      <div class="shrink-0 self-start">
+        <font-awesome-icon :icon="Icons[iconName]" :class="iconClasses" />
+      </div>
+      <div class="ml-3">
+        <slot />
+      </div>
+      <div class="ml-auto pl-3 pt-1 self-start">
+        <div class="-mx-1.5 -my-1.5">
+          <button
+            type="button"
+            class="inline-flex rounded-md px-2 py-1.5"
+            :class="closeClasses"
+            @click="$emit('close')"
+          >
+            <font-awesome-icon :icon="Icons.farXmark" />
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { Icons } from '@/plugins/fontawesome'
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: 'info',
+    validator: (value) => ['success', 'warning', 'danger', 'info'].includes(value),
+  },
+})
+
+defineEmits(['close'])
+
+const containerClasses = computed(() => {
+  const types = {
+    success: 'bg-green-50 border-green-200 text-green-700',
+    warning: 'bg-yellow-50 border-yellow-200 text-yellow-700',
+    danger: 'bg-red-50 border-red-200 text-red-700',
+    info: 'bg-blue-50 border-blue-200 text-blue-700',
+  }
+
+  return types[props.type]
+})
+
+const iconClasses = computed(() => {
+  const iconClasses = {
+    success: 'text-green-400',
+    warning: 'text-yellow-400',
+    danger: 'text-red-400',
+    info: 'text-blue-400',
+  }
+
+  return iconClasses[props.type]
+})
+
+const iconName = computed(() => {
+  const icons = {
+    success: 'farCheckCircle',
+    warning: 'farExclamationTriangle',
+    danger: 'farCircleXmark',
+    info: 'farInfoCircle',
+  }
+
+  return icons[props.type]
+})
+
+const closeClasses = computed(() => {
+  const closeClasses = {
+    success: 'text-green-400 hover:bg-green-100',
+    warning: 'text-yellow-400 hover:bg-yellow-100',
+    danger: 'text-red-400 hover:bg-red-100',
+    info: 'text-blue-400 hover:bg-blue-100',
+  }
+
+  return closeClasses[props.type]
+})
+</script>

package/src/components/SparkModal.vue

@@ -0,0 +1,109 @@
+<template>
+  <TransitionRoot as="template" :show="open">
+    <Dialog class="relative z-50" @close="$emit('close')">
+      <TransitionChild
+        as="template"
+        enter="ease-out duration-300"
+        enter-from="opacity-0"
+        enter-to="opacity-100"
+        leave="ease-in duration-200"
+        leave-from="opacity-100"
+        leave-to="opacity-0"
+      >
+        <div class="fixed inset-0 bg-gray-500/75 transition-opacity" />
+      </TransitionChild>
+
+      <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
+        <div
+          class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"
+        >
+          <TransitionChild
+            as="template"
+            enter="ease-out duration-300"
+            enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            enter-to="opacity-100 translate-y-0 sm:scale-100"
+            leave="ease-in duration-200"
+            leave-from="opacity-100 translate-y-0 sm:scale-100"
+            leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+          >
+            <DialogPanel
+              :class="[
+                'relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:p-6',
+                sizeClasses,
+              ]"
+            >
+              <div>
+                <!-- Icon -->
+                <div v-if="$slots.icon">
+                  <slot name="icon" />
+                </div>
+
+                <div class="text-center sm:mt-5">
+                  <!-- Header with title -->
+                  <template v-if="$slots.title">
+                    <DialogTitle as="div" class="text-base font-semibold text-gray-900">
+                      <slot name="title" />
+                    </DialogTitle>
+                  </template>
+
+                  <!-- Main content -->
+                  <div :class="{ 'mt-2': $slots.title }">
+                    <slot />
+                  </div>
+                </div>
+              </div>
+
+              <!-- Actions/Buttons -->
+              <div
+                v-if="$slots.actions"
+                class="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3"
+              >
+                <slot name="actions" />
+              </div>
+            </DialogPanel>
+          </TransitionChild>
+        </div>
+      </div>
+    </Dialog>
+  </TransitionRoot>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'
+
+const props = defineProps({
+  open: {
+    type: Boolean,
+    required: true,
+  },
+
+  size: {
+    type: String,
+    default: 'md',
+    validator: (value) => ['sm', 'md', 'lg', 'xl', '2xl'].includes(value),
+  },
+
+  icon: {
+    type: String,
+  },
+
+  iconColor: {
+    type: String,
+  },
+})
+
+defineEmits(['close'])
+
+const sizeClasses = computed(() => {
+  const sizes = {
+    sm: 'sm:max-w-sm',
+    md: 'sm:max-w-lg',
+    lg: 'sm:max-w-2xl',
+    xl: 'sm:max-w-4xl',
+    '2xl': 'sm:max-w-6xl',
+  }
+
+  return sizes[props.size]
+})
+</script>

package/src/components/index.js

@@ -1,7 +1,5 @@
-import AppOverlay from './AppOverlay.vue'
+import SparkAlert from './SparkAlert.vue'
+import SparkModal from './SparkModal.vue'
+import SparkOverlay from './SparkOverlay.vue'
 
-export { AppOverlay }
-
-// import Modal from './Modal.vue'
-// import Dropdown from './Dropdown.vue'
-// export { AppOverlay, Modal, Dropdown }
+export { SparkAlert, SparkModal, SparkOverlay }

package/src/composables/index.js

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

package/src/composables/{useOverlay.js → useSparkOverlay.js}

@@ -1,6 +1,6 @@
 import { markRaw, reactive } from 'vue'
 
-export function useOverlay() {
+export function useSparkOverlay() {
   const state = reactive({
     isVisible: false,
     content: null,

package/src/index.js

@@ -1,5 +1,3 @@
-// Export all components
 export * from './components/index.js'
-
-// Export all composables
 export * from './composables/index.js'
+export * from './plugins/index.js'

package/src/plugins/fontawesome.js

@@ -0,0 +1,23 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+
+import {
+  faExclamationTriangle,
+  faCheckCircle,
+  faInfoCircle,
+  faCircleXmark,
+  faXmark,
+  faCheck,
+} from '@fortawesome/pro-regular-svg-icons'
+
+export const Icons = {
+  farExclamationTriangle: faExclamationTriangle,
+  farCheckCircle: faCheckCircle,
+  farInfoCircle: faInfoCircle,
+  farCircleXmark: faCircleXmark,
+  farXmark: faXmark,
+  farCheck: faCheck,
+}
+
+export function addSparkIcons() {
+  library.add(...Object.values(Icons))
+}

package/src/plugins/index.js

@@ -0,0 +1 @@
+export { Icons, addSparkIcons } from './fontawesome.js'