@wishbone-media/spark 0.1.3 → 0.1.4

package/dist/index.js

@@ -1,9 +1,86 @@
-import { computed as b, createBlock as u, openBlock as r, unref as s, withCtx as a, createVNode as o, createElementVNode as l, normalizeClass as y, createElementBlock as v, createCommentVNode as p, renderSlot as d, ref as k, resolveDynamicComponent as $, normalizeProps as _, guardReactiveProps as C, reactive as z, markRaw as S } from "vue";
-import { TransitionRoot as x, Dialog as g, TransitionChild as f, DialogPanel as w, DialogTitle as V } from "@headlessui/vue";
-const R = { class: "fixed inset-0 z-10 w-screen overflow-y-auto" }, B = { class: "flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0" }, D = { key: 0 }, I = { class: "text-center sm:mt-5" }, O = {
+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"
-}, T = {
+}, oe = {
   __name: "SparkModal",
   props: {
     open: {
@@ -24,24 +101,24 @@ const R = { class: "fixed inset-0 z-10 w-screen overflow-y-auto" }, B = { class:
   },
   emits: ["close"],
   setup(e) {
-    const n = e, c = b(() => ({
+    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"
-    })[n.size]);
-    return (t, i) => (r(), u(s(x), {
+    })[o.size]);
+    return (t, i) => (d(), p(a(h), {
       as: "template",
       show: e.open
     }, {
-      default: a(() => [
-        o(s(g), {
+      default: n(() => [
+        r(a(k), {
           class: "relative z-50",
-          onClose: i[0] || (i[0] = (h) => t.$emit("close"))
+          onClose: i[0] || (i[0] = (v) => t.$emit("close"))
         }, {
-          default: a(() => [
-            o(s(f), {
+          default: n(() => [
+            r(a(y), {
               as: "template",
               enter: "ease-out duration-300",
               "enter-from": "opacity-0",
@@ -50,15 +127,15 @@ const R = { class: "fixed inset-0 z-10 w-screen overflow-y-auto" }, B = { class:
               "leave-from": "opacity-100",
               "leave-to": "opacity-0"
             }, {
-              default: a(() => i[1] || (i[1] = [
-                l("div", { class: "fixed inset-0 bg-gray-500/75 transition-opacity" }, null, -1)
+              default: n(() => i[1] || (i[1] = [
+                s("div", { class: "fixed inset-0 bg-gray-500/75 transition-opacity" }, null, -1)
               ])),
               _: 1,
               __: [1]
             }),
-            l("div", R, [
-              l("div", B, [
-                o(s(f), {
+            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",
@@ -67,39 +144,39 @@ const R = { class: "fixed inset-0 z-10 w-screen overflow-y-auto" }, B = { class:
                   "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: a(() => [
-                    o(s(w), {
-                      class: y([
+                  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: a(() => [
-                        l("div", null, [
-                          t.$slots.icon ? (r(), v("div", D, [
-                            d(t.$slots, "icon")
-                          ])) : p("", !0),
-                          l("div", I, [
-                            t.$slots.title ? (r(), u(s(V), {
+                      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: a(() => [
-                                d(t.$slots, "title")
+                              default: n(() => [
+                                f(t.$slots, "title")
                               ]),
                               _: 3
-                            })) : p("", !0),
-                            l("div", {
-                              class: y({ "mt-2": t.$slots.title })
+                            })) : g("", !0),
+                            s("div", {
+                              class: m({ "mt-2": t.$slots.title })
                             }, [
-                              d(t.$slots, "default")
+                              f(t.$slots, "default")
                             ], 2)
                           ])
                         ]),
-                        t.$slots.actions ? (r(), v("div", O, [
-                          d(t.$slots, "actions")
-                        ])) : p("", !0)
+                        t.$slots.actions ? (d(), x("div", Q, [
+                          f(t.$slots, "actions")
+                        ])) : g("", !0)
                       ]),
                       _: 3
                     }, 8, ["class"])
@@ -115,7 +192,7 @@ const R = { class: "fixed inset-0 z-10 w-screen overflow-y-auto" }, B = { class:
       _: 3
     }, 8, ["show"]));
   }
-}, q = { class: "fixed inset-0 flex" }, j = {
+}, U = { class: "fixed inset-0 flex" }, le = {
   __name: "SparkOverlay",
   props: {
     position: {
@@ -129,19 +206,19 @@ const R = { class: "fixed inset-0 z-10 w-screen overflow-y-auto" }, B = { class:
     }
   },
   setup(e) {
-    const n = k(null);
-    return (c, t) => (r(), u(s(x), {
+    const o = S(null);
+    return (c, t) => (d(), p(a(h), {
       show: e.overlayInstance.state.isVisible,
       as: "template"
     }, {
-      default: a(() => [
-        o(s(g), {
-          initialFocus: n.value,
+      default: n(() => [
+        r(a(k), {
+          initialFocus: o.value,
           class: "relative z-200",
           onClose: e.overlayInstance.close
         }, {
-          default: a(() => [
-            o(s(f), {
+          default: n(() => [
+            r(a(y), {
               as: "template",
               enter: "transition-opacity ease-linear duration-150",
               "enter-from": "opacity-0",
@@ -150,14 +227,14 @@ const R = { class: "fixed inset-0 z-10 w-screen overflow-y-auto" }, B = { class:
               "leave-from": "opacity-100",
               "leave-to": "opacity-0"
             }, {
-              default: a(() => t[0] || (t[0] = [
-                l("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]
             }),
-            l("div", q, [
-              o(s(f), {
+            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",
@@ -166,17 +243,17 @@ const R = { class: "fixed inset-0 z-10 w-screen overflow-y-auto" }, B = { class:
                 "leave-from": "translate-x-0 opacity-100",
                 "leave-to": e.position === "left" ? "-translate-x-full opacity-0" : "translate-x-full opacity-0"
               }, {
-                default: a(() => [
-                  o(s(w), {
+                default: n(() => [
+                  r(a(_), {
                     ref_key: "panelRef",
-                    ref: n,
-                    class: y([
+                    ref: o,
+                    class: m([
                       "flex w-[400px] py-2.5",
                       e.position === "left" ? "relative left-[10px]" : "absolute right-[10px] h-full"
                     ])
                   }, {
-                    default: a(() => [
-                      (r(), u($(e.overlayInstance.state.content), _(C(c.$attrs)), null, 16))
+                    default: n(() => [
+                      (d(), p(z(e.overlayInstance.state.content), I(V(c.$attrs)), null, 16))
                     ]),
                     _: 1
                   }, 8, ["class"])
@@ -192,32 +269,35 @@ const R = { class: "fixed inset-0 z-10 w-screen overflow-y-auto" }, B = { class:
     }, 8, ["show"]));
   }
 };
-function E() {
-  const e = z({
+function ne() {
+  const e = T({
     isVisible: !1,
     content: null
-  }), n = () => {
+  }), o = () => {
     e.isVisible = !e.isVisible;
   }, c = () => {
     e.isVisible = !1;
   }, t = () => {
     e.isVisible = !0;
-  }, i = (m) => {
-    e.content = S(m);
+  }, i = (l) => {
+    e.content = X(l);
   };
   return {
     state: e,
-    toggle: n,
+    toggle: o,
     close: c,
     open: t,
     setContent: i,
-    show: (m) => {
-      m && i(m), t();
+    show: (l) => {
+      l && i(l), t();
     }
   };
 }
 export {
-  T as SparkModal,
-  j as SparkOverlay,
-  E as useSparkOverlay
+  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.3",
+  "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/index.js

@@ -1,4 +1,5 @@
+import SparkAlert from './SparkAlert.vue'
 import SparkModal from './SparkModal.vue'
 import SparkOverlay from './SparkOverlay.vue'
 
-export { SparkModal, SparkOverlay }
+export { SparkAlert, SparkModal, SparkOverlay }

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'