@wishbone-media/spark 0.37.0 → 0.38.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wishbone-media/spark",
-  "version": "0.37.0",
+  "version": "0.38.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -65,6 +65,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@fancyapps/ui": "^6.1.13",
     "@floating-ui/vue": "^1.1.11",
     "@googlemaps/js-api-loader": "^2.0.2"
   }

package/src/assets/css/spark-fancybox.css

@@ -0,0 +1,7 @@
+/*
+ * SparkFancybox styles — re-exports Fancybox CSS.
+ *
+ * Import in consuming app:
+ *   @import '@wishbone-media/spark/assets/css/spark-fancybox.css';
+ */
+@import '@fancyapps/ui/dist/fancybox/fancybox.css';

package/src/components/SparkFancybox.vue

@@ -0,0 +1,59 @@
+<template>
+  <div ref="containerRef">
+    <slot />
+  </div>
+</template>
+
+<script setup>
+/**
+ * Vue 3 wrapper around Fancybox.
+ * Wraps a container element and binds Fancybox to all [data-fancybox] children.
+ * Handles lifecycle: bind on mount, rebind on update (for dynamic content), unbind on unmount.
+ *
+ * Usage:
+ *   <SparkFancybox>
+ *     <a href="full.jpg" data-fancybox="gallery" data-caption="Photo #1">
+ *       <img src="thumb.jpg" />
+ *     </a>
+ *   </SparkFancybox>
+ */
+import { ref, onMounted, onUpdated, onUnmounted } from 'vue'
+import { Fancybox } from '@fancyapps/ui/dist/fancybox/'
+
+const props = defineProps({
+  /** Fancybox configuration options */
+  options: {
+    type: Object,
+    default: () => ({}),
+  },
+  /** CSS selector for bindable elements within the container */
+  selector: {
+    type: String,
+    default: '[data-fancybox]',
+  },
+})
+
+const containerRef = ref(null)
+
+function bind() {
+  if (!containerRef.value) return
+  Fancybox.bind(containerRef.value, props.selector, { ...props.options })
+}
+
+function unbind() {
+  if (!containerRef.value) return
+  Fancybox.unbind(containerRef.value)
+}
+
+onMounted(() => bind())
+
+onUpdated(() => {
+  unbind()
+  bind()
+})
+
+onUnmounted(() => {
+  unbind()
+  Fancybox.close()
+})
+</script>

package/src/components/SparkImageUpload.vue

@@ -1,8 +1,8 @@
 <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">
+    <SparkFancybox v-if="modelValue" class="mb-2 relative inline-block">
+      <a :href="modelValue" data-fancybox="image-upload" :data-caption="label || ''">
         <img
           :src="modelValue"
           :alt="label || 'Image preview'"
@@ -17,7 +17,7 @@
       >
         <font-awesome-icon :icon="Icons.farXmark" class="text-xs" />
       </button>
-    </div>
+    </SparkFancybox>
     <div
       v-if="!modelValue"
       class="relative rounded-md transition-colors"
@@ -51,6 +51,7 @@
 import { ref, inject } from 'vue'
 import { Icons } from '@/plugins/fontawesome'
 import { sparkNotificationService } from '@/composables/sparkNotificationService'
+import SparkFancybox from './SparkFancybox.vue'
 
 const props = defineProps({
   modelValue: {

package/src/components/index.js

@@ -8,6 +8,7 @@ export { default as SparkButton } from './SparkButton.vue'
 export { default as SparkButtonGroup } from './SparkButtonGroup.vue'
 export { default as SparkCard } from './SparkCard.vue'
 export { default as SparkEntityBadge } from './SparkEntityBadge.vue'
+export { default as SparkFancybox } from './SparkFancybox.vue'
 export { default as SparkTooltip } from './SparkTooltip.vue'
 export { default as SparkFileDragUpload } from './SparkFileDragUpload.vue'
 export { default as SparkImageUpload } from './SparkImageUpload.vue'

package/src/utils/sparkTable/renderers/image.js

@@ -1,16 +1,18 @@
 /**
  * Spark Image Renderer
  *
- * Renders image thumbnails
+ * Renders image thumbnails with optional Fancybox lightbox support.
  *
  * Usage:
  * {
  *   data: 'avatar',
  *   renderer: 'spark.image',
  *   rendererConfig: {
- *     size: 'md', // 'sm' | 'md' | 'lg'
- *     rounded: true, // true for circular, false for square
- *     alt: 'User avatar' // Alt text (or use row property name)
+ *     size: 'md',        // 'sm' | 'md' | 'lg'
+ *     rounded: true,     // true for circular, false for square
+ *     alt: 'User avatar', // Alt text (or use row property name)
+ *     lightbox: true,    // Enable click-to-enlarge via Fancybox (requires SparkFancybox wrapper)
+ *     group: 'gallery',  // Fancybox gallery group name (default: 'table-images')
  *   }
  * }
  */
@@ -37,6 +39,8 @@ export const imageRenderer = (sparkTable) => {
     const size = config.size || 'md'
     const sizeClass = sizes[size] || sizes.md
     const rounded = config.rounded !== false // Default to true
+    const lightbox = config.lightbox || false
+    const group = config.group || 'table-images'
 
     // Determine alt text
     let alt = config.alt || ''
@@ -56,6 +60,17 @@ export const imageRenderer = (sparkTable) => {
       img.classList.add('rounded')
     }
 
-    td.appendChild(img)
+    if (lightbox) {
+      // Wrap in <a> with data-fancybox for lightbox support
+      const link = document.createElement('a')
+      link.href = value
+      link.setAttribute('data-fancybox', group)
+      if (alt) link.setAttribute('data-caption', alt)
+      img.classList.add('cursor-pointer', 'hover:opacity-80', 'transition-opacity')
+      link.appendChild(img)
+      td.appendChild(link)
+    } else {
+      td.appendChild(img)
+    }
   }
 }