srcdev-nuxt-components 6.2.13 → 7.0.0

package/app/composables/useTooltips.ts

@@ -0,0 +1,174 @@
+/**
+ * Composable for managing tooltip guides with automatic sequential popover display
+ *
+ * @param containerRef - Template ref to the container element containing the popovers
+ * @param options - Configuration options
+ * @returns Object with guide controls and state
+ */
+export const useTooltipsGuide = (
+  containerRef: Ref<HTMLElement | null>,
+  options: {
+    autoStart?: boolean
+    startDelay?: number
+  } = {}
+) => {
+  const { autoStart = true, startDelay = 2000 } = options
+
+  // State management
+  const isGuideRunning = ref(false)
+  const currentTooltipIndex = ref(0)
+  const autoRunGuide = ref(autoStart)
+
+  // Internal popover collection
+  const popovers: HTMLElement[] = []
+
+  /**
+   * Initialize popovers array from the container
+   */
+  const initializePopovers = () => {
+    popovers.length = 0 // Clear existing
+    containerRef.value?.querySelectorAll<HTMLElement>("[popover]").forEach((popover) => {
+      popovers.push(popover)
+    })
+  }
+
+  /**
+   * Show a tooltip and wait for user dismissal
+   */
+  const showTooltipAndWaitForDismiss = (popover: HTMLElement): Promise<void> => {
+    return new Promise((resolve) => {
+      // Find the trigger button that corresponds to this popover
+      const popoverId = popover.id
+      const triggerButton = document.querySelector<HTMLElement>(
+        `[popovertarget="${popoverId}"][popovertargetaction="toggle"]`
+      )
+
+      // Use the trigger button to show the popover to maintain proper anchor relationship
+      if (triggerButton) {
+        triggerButton.click()
+      } else {
+        // Fallback if no trigger button found
+        popover.togglePopover(true)
+      }
+
+      // Find the close button within this popover
+      const closeButton = popover.querySelector<HTMLElement>('[popovertargetaction="hide"]')
+
+      if (closeButton) {
+        // Listen for click on the close button
+        const handleClose = () => {
+          closeButton.removeEventListener("click", handleClose)
+          resolve()
+        }
+
+        closeButton.addEventListener("click", handleClose)
+      } else {
+        // Fallback: listen for the popover to be hidden
+        const handleToggle = () => {
+          if (!popover.matches(":popover-open")) {
+            popover.removeEventListener("toggle", handleToggle)
+            resolve()
+          }
+        }
+
+        popover.addEventListener("toggle", handleToggle)
+      }
+    })
+  }
+
+  /**
+   * Start the automatic tooltip guide
+   */
+  const startGuide = async () => {
+    if (isGuideRunning.value || popovers.length === 0) return
+
+    isGuideRunning.value = true
+    currentTooltipIndex.value = 0
+
+    for (let i = 0; i < popovers.length; i++) {
+      const popover = popovers[i]
+      if (popover) {
+        currentTooltipIndex.value = i
+        await showTooltipAndWaitForDismiss(popover)
+      }
+    }
+
+    // Guide completed
+    autoRunGuide.value = false
+    isGuideRunning.value = false
+  }
+
+  /**
+   * Restart the tooltip guide
+   */
+  const restartGuide = async () => {
+    if (isGuideRunning.value) return
+
+    // Close any currently open popovers
+    popovers.forEach((popover) => {
+      if (popover.matches(":popover-open")) {
+        popover.togglePopover(false)
+      }
+    })
+
+    // Reset state and start the guide
+    autoRunGuide.value = true
+    await startGuide()
+  }
+
+  /**
+   * Stop the current guide
+   */
+  const stopGuide = () => {
+    if (!isGuideRunning.value) return
+
+    // Close any currently open popovers
+    popovers.forEach((popover) => {
+      if (popover.matches(":popover-open")) {
+        popover.togglePopover(false)
+      }
+    })
+
+    isGuideRunning.value = false
+    autoRunGuide.value = false
+  }
+
+  /**
+   * Initialize and auto-start if enabled
+   */
+  const initialize = async () => {
+    if (startDelay > 0) {
+      await useSleep(startDelay)
+    }
+
+    initializePopovers()
+
+    if (autoRunGuide.value && popovers.length > 0) {
+      await startGuide()
+    }
+  }
+
+  // Auto-initialize on mount
+  onMounted(initialize)
+
+  return {
+    // State
+    isGuideRunning: readonly(isGuideRunning),
+    currentTooltipIndex: readonly(currentTooltipIndex),
+    autoRunGuide: readonly(autoRunGuide),
+
+    // Methods
+    startGuide,
+    restartGuide,
+    stopGuide,
+    initializePopovers,
+
+    // Computed
+    hasPopovers: computed(() => popovers.length > 0),
+    totalPopovers: computed(() => popovers.length),
+  }
+}
+
+export type TooltipsGuide = ReturnType<typeof useTooltipsGuide>
+
+export default useTooltipsGuide

package/app/types/components/alert-mask-core.d.ts

@@ -0,0 +1,10 @@
+export interface AlertMaskConfig {
+  backgroundColour?: string
+  borderColour?: string
+  radiusLeft?: number
+  radiusRight?: number
+  borderLeft?: number
+  borderTop?: number
+  borderRight?: number
+  borderBottom?: number
+}

package/app/types/components/display-toast.d.ts

@@ -0,0 +1,53 @@
+import type { VNode, ComponentPublicInstance } from "vue"
+
+export type DisplayToastTheme =
+  | "primary"
+  | "secondary"
+  | "tertiary"
+  | "ghost"
+  | "error"
+  | "info"
+  | "success"
+  | "warning"
+
+export type DisplayToastPosition = "top" | "bottom"
+export type DisplayToastAlignment = "left" | "center" | "right"
+
+export interface DisplayToastAppearanceConfig {
+  theme?: DisplayToastTheme
+  position?: DisplayToastPosition
+  alignment?: DisplayToastAlignment
+  fullWidth?: boolean
+}
+
+export interface DisplayToastBehaviorConfig {
+  autoDismiss?: boolean
+  duration?: number
+  revealDuration?: number
+  returnFocusTo?: HTMLElement | ComponentPublicInstance | null
+}
+
+export interface DisplayToastContentConfig {
+  text?: string
+  title?: string
+  description?: string
+  customIcon?: string
+}
+
+export interface DisplayToastConfig {
+  appearance?: DisplayToastAppearanceConfig
+  behavior?: DisplayToastBehaviorConfig
+  content?: DisplayToastContentConfig
+}
+
+export interface DisplayToastProps {
+  config?: DisplayToastConfig
+  styleClassPassthrough?: string | string[]
+}
+
+export interface ToastSlots {
+  default?(props?: Record<string, never>): VNode[]
+  customToastIcon?(props?: Record<string, never>): VNode[]
+  title?(props?: Record<string, never>): VNode[]
+  description?(props?: Record<string, never>): VNode[]
+}

package/app/types/components/qr-code.d.ts

@@ -0,0 +1,7 @@
+import type { SVGVariant } from "nuxt-qrcode"
+
+export interface QrCodeVariant {
+  inner: SVGVariant
+  marker: SVGVariant
+  pixel: SVGVariant
+}

package/app/types/index.ts

@@ -5,3 +5,8 @@ export * from "../components/image-galleries/SliderGallery.vue"
 export * from "../components/display-toast/DisplayToast.vue"
 export * from "../components/alert-mask/AlertMaskCore.vue"
 export * from "../components/canvas-switcher/CanvasSwitcher.vue"
+
+// Export types from the components directory
+export * from "./components/display-toast.d"
+export * from "./components/qr-code.d"
+export * from "./components/alert-mask-core.d"

package/nuxt.config.ts

@@ -2,7 +2,7 @@
 export default defineNuxtConfig({
   devtools: { enabled: true },
   // css: ["modern-normalize", "./app/assets/styles/main.css"],
-  modules: ["@nuxt/eslint", "@nuxt/icon", "@nuxt/image", "@nuxtjs/i18n"],
+  modules: ["@nuxt/eslint", "@nuxt/icon", "@nuxt/image", "@nuxtjs/i18n", "nuxt-qrcode"],
   i18n: {
     defaultLocale: "en",
     locales: ["en"],
@@ -41,5 +41,6 @@ export default defineNuxtConfig({
   compatibilityDate: "2024-11-01",
   typescript: {
     includeWorkspace: true,
+    strict: true,
   },
 })

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "6.2.13",
+  "version": "7.0.0",
   "main": "nuxt.config.ts",
+  "types": "types.d.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",
     "cleanall": "rm -rf node_modules && rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output && rm -rf .playground/node_modules && rm package-lock.json",
@@ -18,7 +19,8 @@
   },
   "files": [
     "app/",
-    "nuxt.config.ts"
+    "nuxt.config.ts",
+    "types.d.ts"
   ],
   "devDependencies": {
     "@iconify-json/akar-icons": "1.2.7",
@@ -35,9 +37,11 @@
     "eslint": "9.39.1",
     "focus-trap-vue": "4.1.0",
     "nuxt": "4.2.1",
+    "nuxt-qrcode": "^0.4.8",
     "patch-package": "8.0.1",
     "release-it": "19.0.6",
-    "typescript": "5.9.3"
+    "typescript": "5.9.3",
+    "vue-tsc": "^3.2.1"
   },
   "release-it": {
     "$schema": "https://unpkg.com/release-it/schema/release-it.json",

package/types.d.ts

@@ -0,0 +1,4 @@
+// Layer type exports for consumers
+export * from "./app/types/components/display-toast.d"
+export * from "./app/types/components/qr-code.d"
+export * from "./app/types/components/alert-mask-core.d"