@wishbone-media/spark 0.27.0 → 0.29.0

package/package.json

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

package/src/components/SparkImageUpload.vue

@@ -0,0 +1,202 @@
+<template>
+  <div>
+    <label v-if="label" class="block text-sm font-medium text-gray-700 mb-2">{{ label }}</label>
+    <div v-if="modelValue" class="mb-2 relative inline-block">
+      <a :href="modelValue" target="_blank" rel="noopener noreferrer">
+        <img
+          :src="modelValue"
+          :alt="label || 'Image preview'"
+          :class="[height, 'w-auto object-contain border border-gray-300 rounded-md cursor-pointer hover:opacity-80 transition-opacity']"
+        />
+      </a>
+      <button
+        type="button"
+        class="absolute -top-2 -right-2 w-5 h-5 bg-white/80 hover:bg-white text-gray-500 hover:text-gray-700 rounded-full flex items-center justify-center shadow-sm border border-gray-200"
+        :disabled="disabled"
+        @click="clearImage"
+      >
+        <font-awesome-icon :icon="Icons.farXmark" class="text-xs" />
+      </button>
+    </div>
+    <div
+      v-if="!modelValue"
+      class="relative rounded-md transition-colors"
+      :class="{
+        'ring-2 ring-blue-500 ring-offset-2 bg-blue-50': isDragging,
+      }"
+      @dragover.prevent="onDragOver"
+      @dragenter.prevent="onDragOver"
+      @dragleave.prevent="onDragLeave"
+      @drop.prevent="onDrop"
+    >
+      <FormKit
+        type="file"
+        :name="name"
+        :accept="accept"
+        :disabled="disabled || uploading"
+        @input="handleFormKitInput"
+      />
+      <div
+        v-if="isDragging"
+        class="absolute inset-0 flex items-center justify-center bg-blue-50/80 rounded-md pointer-events-none"
+      >
+        <span class="text-sm text-blue-600 font-medium">Drop image here</span>
+      </div>
+    </div>
+    <p v-if="uploading" class="text-sm text-gray-500 mt-1">Uploading...</p>
+  </div>
+</template>
+
+<script setup>
+import { ref, inject } from 'vue'
+import { Icons } from '@/plugins/fontawesome'
+import { sparkNotificationService } from '@/composables/sparkNotificationService'
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: '',
+  },
+  uploadUrl: {
+    type: String,
+    required: true,
+  },
+  fieldName: {
+    type: String,
+    default: 'file',
+  },
+  extraFields: {
+    type: Object,
+    default: () => ({}),
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  name: {
+    type: String,
+    default: 'image_file',
+  },
+  height: {
+    type: String,
+    default: 'h-16',
+  },
+  accept: {
+    type: String,
+    default: 'image/*',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  responseParser: {
+    type: Function,
+    default: (response) => response.data.url || response.data,
+  },
+})
+
+const emit = defineEmits(['update:modelValue', 'upload-start', 'upload-success', 'upload-error'])
+
+const axios = inject('axios')
+const uploading = ref(false)
+const isDragging = ref(false)
+
+function clearImage() {
+  emit('update:modelValue', '')
+}
+
+function onDragOver() {
+  if (props.disabled || uploading.value) return
+  isDragging.value = true
+}
+
+function onDragLeave() {
+  isDragging.value = false
+}
+
+function onDrop(event) {
+  isDragging.value = false
+  if (props.disabled || uploading.value) return
+
+  const file = event.dataTransfer?.files?.[0]
+  if (!file) return
+
+  // Validate file type against accept prop
+  if (!isFileTypeAccepted(file)) {
+    sparkNotificationService.show({
+      type: 'danger',
+      message: 'File type not accepted.',
+    })
+    return
+  }
+
+  uploadFile(file)
+}
+
+function isFileTypeAccepted(file) {
+  // Parse accept prop (e.g., "image/*", "image/png,image/jpeg", ".png,.jpg")
+  const acceptTypes = props.accept.split(',').map((t) => t.trim())
+
+  for (const acceptType of acceptTypes) {
+    if (acceptType === '*/*') return true
+    if (acceptType.endsWith('/*')) {
+      // Wildcard like "image/*"
+      const category = acceptType.slice(0, -2)
+      if (file.type.startsWith(category + '/')) return true
+    } else if (acceptType.startsWith('.')) {
+      // Extension like ".png"
+      if (file.name.toLowerCase().endsWith(acceptType.toLowerCase())) return true
+    } else {
+      // Exact MIME type like "image/png"
+      if (file.type === acceptType) return true
+    }
+  }
+
+  return false
+}
+
+// Handle FormKit file input
+function handleFormKitInput(files) {
+  if (!files || files.length === 0) return
+  const file = files[0].file
+  if (!file) return
+  uploadFile(file)
+}
+
+// Core upload logic
+async function uploadFile(file) {
+  uploading.value = true
+  emit('upload-start')
+
+  try {
+    const formData = new FormData()
+    formData.append(props.fieldName, file)
+
+    // Add any extra fields
+    Object.entries(props.extraFields).forEach(([key, value]) => {
+      formData.append(key, value)
+    })
+
+    const response = await axios.post(props.uploadUrl, formData, {
+      headers: { 'Content-Type': 'multipart/form-data' },
+    })
+
+    const url = props.responseParser(response)
+    emit('update:modelValue', url)
+    emit('upload-success', response)
+
+    sparkNotificationService.show({
+      type: 'success',
+      message: 'Image uploaded!',
+    })
+  } catch (error) {
+    emit('upload-error', error)
+    sparkNotificationService.show({
+      type: 'danger',
+      message: error.response?.data?.message || 'Failed to upload image.',
+    })
+  } finally {
+    uploading.value = false
+  }
+}
+</script>

package/src/components/SparkNotificationOutlet.vue

@@ -30,7 +30,8 @@
 </template>
 
 <script setup>
-import { computed, ref, watch } from 'vue'
+import { computed, ref, watch, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
 import { sparkNotificationService } from '@/composables/sparkNotificationService'
 import SparkAlert from '@/components/SparkAlert.vue'
 
@@ -39,8 +40,13 @@ const props = defineProps({
     type: String,
     default: 'default',
   },
+  clearOnRouteChange: {
+    type: Boolean,
+    default: true,
+  },
 })
 
+const route = useRoute()
 const outlet = computed(() => sparkNotificationService.getOutlet(props.name))
 
 // Generate unique key for each notification to trigger transition on content change
@@ -54,6 +60,43 @@ watch(
   },
 )
 
+// Track which path the notification was shown on
+watch(
+  () => outlet.value.state.isVisible,
+  (isVisible) => {
+    if (isVisible && !outlet.value.state.shownOnPath) {
+      outlet.value.state.shownOnPath = route.path
+    }
+  },
+  { immediate: true },
+)
+
+// On mount, check if notification was shown on a different route
+onMounted(() => {
+  if (!props.clearOnRouteChange) return
+  if (route.meta.preserveNotifications) return
+  if (!outlet.value.state.isVisible) return
+  if (outlet.value.state.persistent) return
+
+  // If notification was shown on a different path, hide it
+  if (outlet.value.state.shownOnPath && outlet.value.state.shownOnPath !== route.path) {
+    outlet.value.hide()
+  }
+})
+
+// Auto-clear notification on route change (while mounted)
+watch(
+  () => route.path,
+  () => {
+    if (!props.clearOnRouteChange) return
+    if (route.meta.preserveNotifications) return
+    if (!outlet.value.state.isVisible) return
+    if (outlet.value.state.persistent) return
+
+    outlet.value.hide()
+  },
+)
+
 const handleClose = () => {
   sparkNotificationService.hide(props.name)
 }

package/src/components/index.js

@@ -6,6 +6,7 @@ export { default as SparkBrandSelector } from './SparkBrandSelector.vue'
 export { default as SparkButton } from './SparkButton.vue'
 export { default as SparkButtonGroup } from './SparkButtonGroup.vue'
 export { default as SparkCard } from './SparkCard.vue'
+export { default as SparkImageUpload } from './SparkImageUpload.vue'
 export { default as SparkModalContainer } from './SparkModalContainer.vue'
 export { default as SparkModalDialog } from './SparkModalDialog.vue'
 export { default as SparkOverlay } from './SparkOverlay.vue'

package/src/composables/sparkNotificationService.js

@@ -24,6 +24,8 @@ function createNotificationOutlet() {
     props: {},
     closeable: true,
     duration: null,
+    persistent: false,
+    shownOnPath: null,
   })
 
   // Timer state (not reactive, internal only)
@@ -90,6 +92,7 @@ function createNotificationOutlet() {
       props = {},
       closeable = true,
       duration = null,
+      persistent = false,
     } = options
 
     state.type = type
@@ -97,6 +100,7 @@ function createNotificationOutlet() {
     state.component = component ? markRaw(component) : null
     state.props = props
     state.closeable = closeable
+    state.persistent = persistent
     state.isVisible = true
 
     // Determine duration: explicit > default for type
@@ -116,6 +120,8 @@ function createNotificationOutlet() {
     state.props = {}
     state.closeable = true
     state.duration = null
+    state.persistent = false
+    state.shownOnPath = null
   }
 
   return {
@@ -187,6 +193,7 @@ class SparkNotificationService {
    * @param {Object} options.props - Props to pass to the component
    * @param {boolean} options.closeable - Whether to show close button (default: true)
    * @param {number} options.duration - Auto-dismiss duration in ms (0 = sticky, null = use default)
+   * @param {boolean} options.persistent - Whether notification survives route changes (default: false)
    * @param {string} outletName - Target outlet name (default: 'default')
    */
   show(options = {}, outletName = 'default') {
@@ -212,6 +219,18 @@ class SparkNotificationService {
     }
   }
 
+  /**
+   * Hide all non-persistent banner notifications
+   * Called by setupNotificationGuard on route change
+   */
+  hideAllNonPersistent() {
+    for (const outlet of this.outlets.values()) {
+      if (!outlet.state.persistent) {
+        outlet.hide()
+      }
+    }
+  }
+
   /**
    * Pause auto-dismiss timer for the specified banner outlet
    * @param {string} outletName - Target outlet name (default: 'default')