@wishbone-media/spark 0.20.0 → 0.21.0

package/package.json

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

package/src/components/SparkAlert.vue

@@ -7,7 +7,7 @@
       <div class="ml-3">
         <slot />
       </div>
-      <div class="ml-auto pl-3 pt-1 self-start">
+      <div v-if="closeable" class="ml-auto pl-3 pt-1 self-start">
         <div class="-mx-1.5 -my-1.5">
           <button
             type="button"
@@ -33,6 +33,10 @@ const props = defineProps({
     default: 'info',
     validator: (value) => ['success', 'warning', 'danger', 'info'].includes(value),
   },
+  closeable: {
+    type: Boolean,
+    default: true,
+  },
 })
 
 defineEmits(['close'])

package/src/components/SparkButton.vue

@@ -13,6 +13,8 @@
 <script setup>
 import { computed, inject, ref } from 'vue'
 
+defineEmits(['click'])
+
 const props = defineProps({
   size: {
     type: String,

package/src/components/SparkNotificationOutlet.vue

@@ -0,0 +1,68 @@
+<template>
+  <Transition
+    enter-active-class="transition-all duration-300 ease-out"
+    enter-from-class="opacity-0 -translate-y-2"
+    enter-to-class="opacity-100 translate-y-0"
+    leave-active-class="transition-all duration-200 ease-in"
+    leave-from-class="opacity-100 translate-y-0"
+    leave-to-class="opacity-0 -translate-y-2"
+    mode="out-in"
+  >
+    <SparkAlert
+      v-if="outlet.state.isVisible"
+      :key="notificationKey"
+      :type="outlet.state.type"
+      :closeable="outlet.state.closeable"
+      @close="handleClose"
+      @mouseenter="handleMouseEnter"
+      @mouseleave="handleMouseLeave"
+    >
+      <component
+        v-if="outlet.state.component"
+        :is="outlet.state.component"
+        v-bind="outlet.state.props"
+      />
+      <template v-else>
+        {{ outlet.state.message }}
+      </template>
+    </SparkAlert>
+  </Transition>
+</template>
+
+<script setup>
+import { computed, ref, watch } from 'vue'
+import { sparkNotificationService } from '@/composables/sparkNotificationService'
+import SparkAlert from '@/components/SparkAlert.vue'
+
+const props = defineProps({
+  name: {
+    type: String,
+    default: 'default',
+  },
+})
+
+const outlet = computed(() => sparkNotificationService.getOutlet(props.name))
+
+// Generate unique key for each notification to trigger transition on content change
+const notificationKey = ref(0)
+watch(
+  () => [outlet.value.state.message, outlet.value.state.component, outlet.value.state.type],
+  () => {
+    if (outlet.value.state.isVisible) {
+      notificationKey.value++
+    }
+  },
+)
+
+const handleClose = () => {
+  sparkNotificationService.hide(props.name)
+}
+
+const handleMouseEnter = () => {
+  sparkNotificationService.pause(props.name)
+}
+
+const handleMouseLeave = () => {
+  sparkNotificationService.resume(props.name)
+}
+</script>

package/src/components/SparkOverlay.vue

@@ -34,7 +34,8 @@
           <DialogPanel
               ref="panelRef"
               :class="[
-              'flex w-[400px] py-2.5',
+              'flex py-2.5',
+              widthClass,
               position === 'left' ? 'relative left-[10px]' : 'absolute right-[10px] h-full',
             ]"
           >
@@ -52,11 +53,19 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { Dialog, DialogPanel, TransitionChild, TransitionRoot } from '@headlessui/vue'
 
 const panelRef = ref(null)
 
+const sizeClasses = {
+  xs: 'w-[250px]',
+  sm: 'w-[300px]',
+  md: 'w-[450px]',
+  lg: 'w-[810px]',
+  xl: 'w-[1000px]',
+}
+
 const props = defineProps({
   position: {
     type: String,
@@ -72,6 +81,10 @@ const props = defineProps({
 
 const emit = defineEmits(['close'])
 
+const widthClass = computed(() => {
+  return sizeClasses[props.overlayInstance.state.size] || sizeClasses.md
+})
+
 const handleClose = () => {
   props.overlayInstance.close()
   emit('close')

package/src/components/SparkToastContainer.vue

@@ -0,0 +1,184 @@
+<template>
+  <Teleport to="body">
+    <!-- Top Left -->
+    <div class="fixed top-4 left-4 z-[2000] flex flex-col gap-3 max-w-sm w-full pointer-events-none">
+      <TransitionGroup
+        enter-active-class="transition-all duration-300 ease-out"
+        enter-from-class="opacity-0 -translate-x-4"
+        enter-to-class="opacity-100 translate-x-0"
+        leave-active-class="transition-all duration-200 ease-in"
+        leave-from-class="opacity-100 translate-x-0"
+        leave-to-class="opacity-0 -translate-x-4"
+      >
+        <div v-for="toast in topLeftToasts" :key="toast.id" class="pointer-events-auto">
+          <SparkAlert
+            :type="toast.type"
+            :closeable="toast.closeable"
+            @close="handleClose(toast.id)"
+            @mouseenter="handleMouseEnter(toast.id)"
+            @mouseleave="handleMouseLeave(toast.id)"
+          >
+            <component
+              v-if="toast.component"
+              :is="toast.component"
+              v-bind="toast.props"
+            />
+            <template v-else>{{ toast.message }}</template>
+          </SparkAlert>
+        </div>
+      </TransitionGroup>
+    </div>
+
+    <!-- Top Right -->
+    <div class="fixed top-4 right-4 z-[2000] flex flex-col gap-3 max-w-sm w-full pointer-events-none">
+      <TransitionGroup
+        enter-active-class="transition-all duration-300 ease-out"
+        enter-from-class="opacity-0 translate-x-4"
+        enter-to-class="opacity-100 translate-x-0"
+        leave-active-class="transition-all duration-200 ease-in"
+        leave-from-class="opacity-100 translate-x-0"
+        leave-to-class="opacity-0 translate-x-4"
+      >
+        <div v-for="toast in topRightToasts" :key="toast.id" class="pointer-events-auto">
+          <SparkAlert
+            :type="toast.type"
+            :closeable="toast.closeable"
+            @close="handleClose(toast.id)"
+            @mouseenter="handleMouseEnter(toast.id)"
+            @mouseleave="handleMouseLeave(toast.id)"
+          >
+            <component
+              v-if="toast.component"
+              :is="toast.component"
+              v-bind="toast.props"
+            />
+            <template v-else>{{ toast.message }}</template>
+          </SparkAlert>
+        </div>
+      </TransitionGroup>
+    </div>
+
+    <!-- Center (slightly above center) -->
+    <div class="fixed top-[40%] left-1/2 -translate-x-1/2 -translate-y-1/2 z-[2000] flex flex-col gap-3 max-w-sm w-full pointer-events-none">
+      <TransitionGroup
+        enter-active-class="transition-all duration-300 ease-out"
+        enter-from-class="opacity-0 scale-95"
+        enter-to-class="opacity-100 scale-100"
+        leave-active-class="transition-all duration-200 ease-in"
+        leave-from-class="opacity-100 scale-100"
+        leave-to-class="opacity-0 scale-95"
+      >
+        <div v-for="toast in centerToasts" :key="toast.id" class="pointer-events-auto">
+          <SparkAlert
+            :type="toast.type"
+            :closeable="toast.closeable"
+            @close="handleClose(toast.id)"
+            @mouseenter="handleMouseEnter(toast.id)"
+            @mouseleave="handleMouseLeave(toast.id)"
+          >
+            <component
+              v-if="toast.component"
+              :is="toast.component"
+              v-bind="toast.props"
+            />
+            <template v-else>{{ toast.message }}</template>
+          </SparkAlert>
+        </div>
+      </TransitionGroup>
+    </div>
+
+    <!-- Bottom Left -->
+    <div class="fixed bottom-4 left-4 z-[2000] flex flex-col-reverse gap-3 max-w-sm w-full pointer-events-none">
+      <TransitionGroup
+        enter-active-class="transition-all duration-300 ease-out"
+        enter-from-class="opacity-0 -translate-x-4"
+        enter-to-class="opacity-100 translate-x-0"
+        leave-active-class="transition-all duration-200 ease-in"
+        leave-from-class="opacity-100 translate-x-0"
+        leave-to-class="opacity-0 -translate-x-4"
+      >
+        <div v-for="toast in bottomLeftToasts" :key="toast.id" class="pointer-events-auto">
+          <SparkAlert
+            :type="toast.type"
+            :closeable="toast.closeable"
+            @close="handleClose(toast.id)"
+            @mouseenter="handleMouseEnter(toast.id)"
+            @mouseleave="handleMouseLeave(toast.id)"
+          >
+            <component
+              v-if="toast.component"
+              :is="toast.component"
+              v-bind="toast.props"
+            />
+            <template v-else>{{ toast.message }}</template>
+          </SparkAlert>
+        </div>
+      </TransitionGroup>
+    </div>
+
+    <!-- Bottom Right -->
+    <div class="fixed bottom-4 right-4 z-[2000] flex flex-col-reverse gap-3 max-w-sm w-full pointer-events-none">
+      <TransitionGroup
+        enter-active-class="transition-all duration-300 ease-out"
+        enter-from-class="opacity-0 translate-x-4"
+        enter-to-class="opacity-100 translate-x-0"
+        leave-active-class="transition-all duration-200 ease-in"
+        leave-from-class="opacity-100 translate-x-0"
+        leave-to-class="opacity-0 translate-x-4"
+      >
+        <div v-for="toast in bottomRightToasts" :key="toast.id" class="pointer-events-auto">
+          <SparkAlert
+            :type="toast.type"
+            :closeable="toast.closeable"
+            @close="handleClose(toast.id)"
+            @mouseenter="handleMouseEnter(toast.id)"
+            @mouseleave="handleMouseLeave(toast.id)"
+          >
+            <component
+              v-if="toast.component"
+              :is="toast.component"
+              v-bind="toast.props"
+            />
+            <template v-else>{{ toast.message }}</template>
+          </SparkAlert>
+        </div>
+      </TransitionGroup>
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { sparkNotificationService } from '@/composables/sparkNotificationService'
+import SparkAlert from '@/components/SparkAlert.vue'
+
+const toastState = sparkNotificationService.toastState
+
+const topLeftToasts = computed(() =>
+  toastState.toasts.filter(t => t.position === 'top-left')
+)
+const topRightToasts = computed(() =>
+  toastState.toasts.filter(t => t.position === 'top-right')
+)
+const centerToasts = computed(() =>
+  toastState.toasts.filter(t => t.position === 'center')
+)
+const bottomLeftToasts = computed(() =>
+  toastState.toasts.filter(t => t.position === 'bottom-left')
+)
+const bottomRightToasts = computed(() =>
+  toastState.toasts.filter(t => t.position === 'bottom-right')
+)
+
+const handleClose = (toastId) => {
+  sparkNotificationService.hideToast(toastId)
+}
+
+const handleMouseEnter = (toastId) => {
+  sparkNotificationService.pauseToast(toastId)
+}
+
+const handleMouseLeave = (toastId) => {
+  sparkNotificationService.resumeToast(toastId)
+}
+</script>

package/src/components/index.js

@@ -1,5 +1,7 @@
 export { default as SparkAlert } from './SparkAlert.vue'
 export { default as SparkAppSelector } from './SparkAppSelector.vue'
+export { default as SparkNotificationOutlet } from './SparkNotificationOutlet.vue'
+export { default as SparkToastContainer } from './SparkToastContainer.vue'
 export { default as SparkBrandSelector } from './SparkBrandSelector.vue'
 export { default as SparkButton } from './SparkButton.vue'
 export { default as SparkButtonGroup } from './SparkButtonGroup.vue'

package/src/composables/index.js

@@ -1,4 +1,5 @@
 export { sparkModalService } from './sparkModalService.js'
+export { sparkNotificationService } from './sparkNotificationService.js'
 export { sparkOverlayService } from './sparkOverlayService.js'
 export { useSparkOverlay } from './useSparkOverlay.js'
 export { useSparkTableRouteSync } from './useSparkTableRouteSync.js'