@wishbone-media/spark 0.36.0 → 0.38.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wishbone-media/spark",
-  "version": "0.36.0",
+  "version": "0.38.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -65,6 +65,8 @@
     "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/assets/css/spark-tooltip.css

@@ -0,0 +1,44 @@
+/*
+ * SparkTooltip & v-spark-tooltip styles
+ *
+ * Import in consuming app:
+ *   @import '@wishbone-media/spark/assets/css/spark-tooltip.css';
+ */
+
+.spark-tooltip {
+  z-index: 9999;
+  max-width: 300px;
+  padding: 0.375rem 0.625rem;
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+  color: #fff;
+  background: #1f2937; /* gray-800 */
+  border-radius: 0.375rem;
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  pointer-events: none;
+  word-wrap: break-word;
+  white-space: pre-line;
+}
+
+.spark-tooltip-arrow {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: #1f2937; /* same as tooltip bg */
+  transform: rotate(45deg);
+}
+
+/* Transitions (for SparkTooltip component) */
+.spark-tooltip-enter-active {
+  transition: opacity 150ms ease, transform 150ms ease;
+}
+
+.spark-tooltip-leave-active {
+  transition: opacity 100ms ease, transform 100ms ease;
+}
+
+.spark-tooltip-enter-from,
+.spark-tooltip-leave-to {
+  opacity: 0;
+  transform: scale(0.95);
+}

package/src/components/SparkEntityBadge.vue

@@ -0,0 +1,175 @@
+<template>
+  <component
+    :is="isLink ? 'a' : 'span'"
+    :href="resolvedHref || undefined"
+    :target="isLink && openNew ? '_blank' : undefined"
+    :rel="isLink && openNew ? 'noopener noreferrer' : undefined"
+    v-spark-tooltip="tooltip"
+    class="inline-flex items-center gap-1 rounded-full font-medium whitespace-nowrap"
+    :class="[variantClasses, sizeClasses, interactiveClasses]"
+    @click="handleClick"
+  >
+    <font-awesome-icon v-if="icon" :icon="icon" />
+    <slot>{{ label }}</slot>
+    <font-awesome-icon
+      v-if="copyToClipboard"
+      :icon="Icons.farCopy"
+      class="opacity-60"
+    />
+    <font-awesome-icon
+      v-else-if="isNavigable && openNew"
+      :icon="Icons.farArrowUpRightFromSquare"
+      class="opacity-60 text-[0.6em]"
+    />
+  </component>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { Icons } from '../plugins/fontawesome'
+import { sparkNotificationService } from '../composables/sparkNotificationService'
+
+const props = defineProps({
+  /** Display text */
+  label: {
+    type: String,
+    default: '',
+  },
+  /** FontAwesome icon object */
+  icon: {
+    type: [Object, Array],
+    default: null,
+  },
+  /** Color scheme */
+  variant: {
+    type: String,
+    default: 'primary',
+  },
+  /** Size: 'sm', 'md', 'lg' */
+  size: {
+    type: String,
+    default: 'md',
+    validator: (v) => ['sm', 'md', 'lg'].includes(v),
+  },
+  /** Tooltip text (native title attribute) */
+  tooltip: {
+    type: String,
+    default: '',
+  },
+  /** Vue Router route name for navigation */
+  routeName: {
+    type: String,
+    default: null,
+  },
+  /** Entity ID — used with routeName as { name, params: { id } } */
+  entityId: {
+    type: [Number, String],
+    default: null,
+  },
+  /** External link URL */
+  href: {
+    type: String,
+    default: null,
+  },
+  /** Open link in new tab */
+  openNew: {
+    type: Boolean,
+    default: false,
+  },
+  /** Copy tooltip content to clipboard on click */
+  copyToClipboard: {
+    type: Boolean,
+    default: false,
+  },
+  /** Disable all interaction */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits(['click'])
+
+const router = useRouter()
+
+// --- Variant classes ---
+
+const VARIANT_CLASSES = {
+  primary: 'bg-blue-100 text-blue-700',
+  secondary: 'bg-gray-100 text-gray-600',
+  success: 'bg-green-100 text-green-700',
+  warning: 'bg-yellow-100 text-yellow-700',
+  danger: 'bg-red-100 text-red-700',
+  info: 'bg-cyan-100 text-cyan-700',
+  muted: 'bg-gray-50 text-gray-500',
+  bordered: 'border border-gray-300 text-gray-700 bg-white',
+  'bordered-blue': 'border border-blue-300 text-blue-600 bg-white',
+}
+
+const SIZE_CLASSES = {
+  sm: 'text-[11px] px-1.5 py-0.5',
+  md: 'text-xs px-2 py-0.5',
+  lg: 'text-sm px-2.5 py-1',
+}
+
+const variantClasses = computed(() => VARIANT_CLASSES[props.variant] || VARIANT_CLASSES.primary)
+const sizeClasses = computed(() => SIZE_CLASSES[props.size] || SIZE_CLASSES.md)
+
+// --- Navigation ---
+
+const isNavigable = computed(
+  () => (props.routeName && props.entityId != null) || props.href,
+)
+const isInteractive = computed(() => isNavigable.value || props.copyToClipboard)
+const isLink = computed(() => isNavigable.value && !props.disabled)
+
+const resolvedHref = computed(() => {
+  if (props.href) return props.href
+  if (props.routeName && props.entityId != null) {
+    try {
+      return router.resolve({ name: props.routeName, params: { id: props.entityId } }).href
+    } catch {
+      return null
+    }
+  }
+  return null
+})
+
+const interactiveClasses = computed(() => {
+  if (props.disabled) return 'opacity-50 cursor-not-allowed'
+  if (isInteractive.value) return 'cursor-pointer hover:opacity-80 transition-opacity'
+  return 'cursor-default'
+})
+
+// --- Click handling ---
+
+function handleClick(event) {
+  if (props.disabled) return
+
+  emit('click')
+
+  if (props.copyToClipboard && props.tooltip) {
+    event.preventDefault()
+    navigator.clipboard.writeText(props.tooltip)
+    sparkNotificationService.toast({ type: 'info', message: 'Copied to clipboard' })
+    return
+  }
+
+  // href links: native <a> handles openNew via target="_blank"
+  // For same-tab href, let native <a> handle it
+  if (props.href) return
+
+  // Route-based navigation
+  if (props.routeName && props.entityId != null) {
+    event.preventDefault()
+    const route = { name: props.routeName, params: { id: props.entityId } }
+    if (props.openNew) {
+      const resolved = router.resolve(route)
+      window.open(resolved.href, '_blank')
+    } else {
+      router.push(route)
+    }
+  }
+}
+</script>

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/SparkTooltip.vue

@@ -0,0 +1,162 @@
+<template>
+  <div
+    ref="referenceRef"
+    class="inline-flex"
+    @mouseenter="show"
+    @mouseleave="hide"
+    @focusin="show"
+    @focusout="hide"
+  >
+    <slot />
+  </div>
+
+  <Teleport to="body">
+    <Transition name="spark-tooltip">
+      <div
+        v-if="isVisible"
+        ref="floatingRef"
+        :style="floatingStyles"
+        class="spark-tooltip"
+        role="tooltip"
+      >
+        <slot name="content">
+          <span v-if="html" v-html="content" />
+          <span v-else>{{ content }}</span>
+        </slot>
+        <div
+          v-if="showArrow"
+          ref="arrowRef"
+          class="spark-tooltip-arrow"
+          :style="arrowStyles"
+        />
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup>
+/**
+ * Tooltip component using @floating-ui/vue for positioning.
+ * Wraps a trigger element (default slot) and displays a floating tooltip on hover/focus.
+ *
+ * For simple text tooltips, prefer the v-spark-tooltip directive.
+ * Use this component when you need slot-based HTML content or complex tooltip layouts.
+ */
+import { ref, computed, useSlots, onUnmounted } from 'vue'
+import {
+  useFloating,
+  autoUpdate,
+  offset as offsetMiddleware,
+  flip,
+  shift,
+  arrow as arrowMiddleware,
+} from '@floating-ui/vue'
+
+const props = defineProps({
+  /** Tooltip text (alternative to #content slot) */
+  content: {
+    type: String,
+    default: '',
+  },
+  /** Render content prop as HTML */
+  html: {
+    type: Boolean,
+    default: false,
+  },
+  /** Tooltip placement */
+  placement: {
+    type: String,
+    default: 'top',
+  },
+  /** Distance in px from trigger */
+  offset: {
+    type: Number,
+    default: 8,
+  },
+  /** Show/hide delay in ms. Number applies to show only; object for { show, hide } */
+  delay: {
+    type: [Number, Object],
+    default: () => ({ show: 200, hide: 0 }),
+  },
+  /** Disable tooltip */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  /** Show arrow pointing to trigger */
+  showArrow: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+const slots = useSlots()
+
+const referenceRef = ref(null)
+const floatingRef = ref(null)
+const arrowRef = ref(null)
+const isVisible = ref(false)
+
+let showTimeout = null
+let hideTimeout = null
+
+const middleware = computed(() => {
+  const mw = [
+    offsetMiddleware(props.offset),
+    flip(),
+    shift({ padding: 8 }),
+  ]
+  if (props.showArrow) {
+    mw.push(arrowMiddleware({ element: arrowRef, padding: 5 }))
+  }
+  return mw
+})
+
+const { floatingStyles, middlewareData, placement: actualPlacement } = useFloating(
+  referenceRef,
+  floatingRef,
+  {
+    placement: computed(() => props.placement),
+    middleware,
+    whileElementsMounted: autoUpdate,
+  },
+)
+
+const arrowStyles = computed(() => {
+  const data = middlewareData.value?.arrow
+  if (!data) return {}
+
+  const side = actualPlacement.value.split('-')[0]
+  const staticSide = { top: 'bottom', right: 'left', bottom: 'top', left: 'right' }[side]
+
+  return {
+    left: data.x != null ? `${data.x}px` : '',
+    top: data.y != null ? `${data.y}px` : '',
+    [staticSide]: '-4px',
+  }
+})
+
+function show() {
+  if (props.disabled) return
+  if (!props.content && !slots.content) return
+
+  clearTimeout(hideTimeout)
+  const delay = typeof props.delay === 'number' ? props.delay : props.delay.show ?? 200
+  showTimeout = setTimeout(() => {
+    isVisible.value = true
+  }, delay)
+}
+
+function hide() {
+  clearTimeout(showTimeout)
+  const delay = typeof props.delay === 'number' ? 0 : props.delay.hide ?? 0
+  hideTimeout = setTimeout(() => {
+    isVisible.value = false
+  }, delay)
+}
+
+onUnmounted(() => {
+  clearTimeout(showTimeout)
+  clearTimeout(hideTimeout)
+})
+</script>

package/src/components/index.js

@@ -7,6 +7,9 @@ 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 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'
 export { default as SparkModalContainer } from './SparkModalContainer.vue'