@7pmlabs/design-system 1.0.9 → 1.0.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/design-system.css +1 -1
- package/dist/design-system.js +24 -16
- package/dist/design-system177.js +29 -326
- package/dist/design-system177.js.map +1 -1
- package/dist/design-system179.js +1 -1
- package/dist/design-system179.js.map +1 -1
- package/dist/design-system180.js +73 -85
- package/dist/design-system180.js.map +1 -1
- package/dist/design-system182.js +1 -1
- package/dist/design-system182.js.map +1 -1
- package/dist/design-system183.js +32 -105
- package/dist/design-system183.js.map +1 -1
- package/dist/design-system185.js +4 -5
- package/dist/design-system185.js.map +1 -1
- package/dist/design-system186.js +26 -104
- package/dist/design-system186.js.map +1 -1
- package/dist/design-system188.js +4 -5
- package/dist/design-system188.js.map +1 -1
- package/dist/design-system189.js +23 -727
- package/dist/design-system189.js.map +1 -1
- package/dist/design-system191.js +1 -1
- package/dist/design-system191.js.map +1 -1
- package/dist/design-system192.js +31 -11
- package/dist/design-system192.js.map +1 -1
- package/dist/design-system194.js +8 -0
- package/dist/design-system194.js.map +1 -0
- package/dist/design-system195.js +332 -5
- package/dist/design-system195.js.map +1 -1
- package/dist/design-system197.js +5 -46
- package/dist/design-system197.js.map +1 -1
- package/dist/design-system198.js +100 -4
- package/dist/design-system198.js.map +1 -1
- package/dist/design-system200.js +8 -0
- package/dist/design-system200.js.map +1 -0
- package/dist/design-system201.js +19 -5
- package/dist/design-system201.js.map +1 -1
- package/dist/design-system202.js +4 -119
- package/dist/design-system202.js.map +1 -1
- package/dist/design-system203.js +6 -0
- package/dist/design-system203.js.map +1 -0
- package/dist/design-system204.js +419 -5
- package/dist/design-system204.js.map +1 -1
- package/dist/design-system206.js +8 -0
- package/dist/design-system206.js.map +1 -0
- package/dist/design-system207.js +108 -5
- package/dist/design-system207.js.map +1 -1
- package/dist/design-system209.js +6 -4
- package/dist/design-system209.js.map +1 -1
- package/dist/design-system210.js +90 -154
- package/dist/design-system210.js.map +1 -1
- package/dist/design-system212.js +5 -4
- package/dist/design-system212.js.map +1 -1
- package/dist/design-system213.js +737 -7
- package/dist/design-system213.js.map +1 -1
- package/dist/design-system215.js +8 -0
- package/dist/design-system215.js.map +1 -0
- package/dist/design-system216.js +11 -5
- package/dist/design-system216.js.map +1 -1
- package/dist/design-system217.js +451 -506
- package/dist/design-system217.js.map +1 -1
- package/dist/design-system219.js +4 -5
- package/dist/design-system219.js.map +1 -1
- package/dist/design-system220.js +3 -7
- package/dist/design-system220.js.map +1 -1
- package/dist/design-system221.js +41 -369
- package/dist/design-system221.js.map +1 -1
- package/dist/design-system222.js +7 -0
- package/dist/design-system222.js.map +1 -0
- package/dist/design-system223.js +283 -6
- package/dist/design-system223.js.map +1 -1
- package/dist/design-system225.js +8 -0
- package/dist/design-system225.js.map +1 -0
- package/dist/design-system226.js +122 -0
- package/dist/design-system226.js.map +1 -0
- package/dist/design-system228.js +8 -0
- package/dist/design-system228.js.map +1 -0
- package/dist/{design-system205.js → design-system229.js} +1 -1
- package/dist/{design-system205.js.map → design-system229.js.map} +1 -1
- package/dist/design-system231.js +8 -0
- package/dist/design-system231.js.map +1 -0
- package/dist/{design-system208.js → design-system232.js} +1 -1
- package/dist/{design-system208.js.map → design-system232.js.map} +1 -1
- package/dist/design-system233.js +7 -0
- package/dist/design-system233.js.map +1 -0
- package/dist/design-system234.js +173 -0
- package/dist/design-system234.js.map +1 -0
- package/dist/design-system236.js +8 -0
- package/dist/design-system236.js.map +1 -0
- package/dist/design-system237.js +10 -0
- package/dist/design-system237.js.map +1 -0
- package/dist/{design-system214.js → design-system238.js} +2 -2
- package/dist/{design-system214.js.map → design-system238.js.map} +1 -1
- package/dist/design-system240.js +8 -0
- package/dist/design-system240.js.map +1 -0
- package/dist/design-system241.js +583 -0
- package/dist/design-system241.js.map +1 -0
- package/dist/design-system243.js +9 -0
- package/dist/design-system243.js.map +1 -0
- package/dist/design-system244.js +10 -0
- package/dist/design-system244.js.map +1 -0
- package/dist/design-system245.js +377 -0
- package/dist/design-system245.js.map +1 -0
- package/dist/design-system247.js +9 -0
- package/dist/design-system247.js.map +1 -0
- package/dist/types/components/BSkeleton/BSkeleton.spec.d.ts +1 -0
- package/dist/types/components/BSkeleton/BSkeleton.vue.d.ts +46 -0
- package/dist/types/components/BSkeleton/BSkeletonAvatar.vue.d.ts +12 -0
- package/dist/types/components/BSkeleton/BSkeletonButton.vue.d.ts +14 -0
- package/dist/types/components/BSkeleton/BSkeletonImage.vue.d.ts +7 -0
- package/dist/types/components/BSkeleton/BSkeletonInput.vue.d.ts +12 -0
- package/dist/types/components/BSkeleton/BSkeletonNode.vue.d.ts +19 -0
- package/dist/types/components/BSkeleton/index.d.ts +7 -0
- package/dist/types/components/BSkeleton/types.d.ts +20 -0
- package/dist/types/components/BSplitter/BSplitter.spec.d.ts +1 -0
- package/dist/types/components/BSplitter/BSplitter.vue.d.ts +45 -0
- package/dist/types/components/BSplitter/BSplitterPanel.vue.d.ts +40 -0
- package/dist/types/components/BSplitter/index.d.ts +3 -0
- package/dist/types/components/BSplitter/types.d.ts +42 -0
- package/dist/types/components/index.d.ts +2 -0
- package/package.json +1 -1
- package/dist/design-system193.js +0 -528
- package/dist/design-system193.js.map +0 -1
- package/dist/design-system196.js +0 -6
- package/dist/design-system196.js.map +0 -1
- package/dist/design-system199.js +0 -286
- package/dist/design-system199.js.map +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"design-system237.js","names":[],"sources":["../src/components/BTour/types.ts"],"sourcesContent":["import type { InjectionKey } from 'vue';\n\n// ─────────────────────────────────────────────\n// Enums\n// ─────────────────────────────────────────────\n\nexport enum BTourPlacement {\n Center = 'center',\n Top = 'top',\n TopLeft = 'topLeft',\n TopRight = 'topRight',\n Bottom = 'bottom',\n BottomLeft = 'bottomLeft',\n BottomRight = 'bottomRight',\n Left = 'left',\n LeftTop = 'leftTop',\n LeftBottom = 'leftBottom',\n Right = 'right',\n RightTop = 'rightTop',\n RightBottom = 'rightBottom',\n}\n\nexport enum BTourType {\n Default = 'default',\n Primary = 'primary',\n}\n\n// ─────────────────────────────────────────────\n// Interfaces\n// ─────────────────────────────────────────────\n\nexport interface BTourArrowOptions {\n /** Point the arrow at the center of the target element. */\n pointAtCenter?: boolean;\n}\n\nexport interface BTourGapOptions {\n /** Pixel offset between the highlight box and the target element. */\n offset?: number | [number, number];\n /** Border-radius of the highlight box (px). */\n radius?: number;\n}\n\nexport interface BTourButtonProps {\n children?: string;\n onClick?: () => void;\n className?: string;\n style?: Record<string, string>;\n}\n\nexport interface BTourScrollIntoViewOptions {\n behavior?: ScrollBehavior;\n block?: ScrollLogicalPosition;\n inline?: ScrollLogicalPosition;\n}\n\nexport interface BTourStep {\n /** Title of the step. */\n title: string;\n /** Description text for the step. */\n description?: string;\n /** Cover image or video URL shown above title, or arbitrary HTML. */\n cover?: string;\n /**\n * CSS selector string, HTMLElement reference, or getter function\n * returning an element. Passing `null` centers the tour popup.\n */\n target?: string | HTMLElement | (() => HTMLElement | null) | null;\n /** Arrow configuration for this step (overrides Tour-level). */\n arrow?: boolean | BTourArrowOptions;\n /** Placement for this step (overrides Tour-level). */\n placement?: `${BTourPlacement}`;\n /** Mask configuration for this step (overrides Tour-level). */\n mask?: boolean | { style?: Record<string, string>; color?: string };\n /** Type variant for this step (overrides Tour-level). */\n type?: `${BTourType}`;\n /** Custom next-button props. */\n nextButtonProps?: BTourButtonProps;\n /** Custom prev-button props. */\n prevButtonProps?: BTourButtonProps;\n /** Custom close icon for this step. */\n closeIcon?: boolean | string;\n /** Scroll-into-view options for this step. */\n scrollIntoViewOptions?: boolean | BTourScrollIntoViewOptions;\n /** Fired when this step's close button is clicked. */\n onClose?: () => void;\n}\n\n// ─────────────────────────────────────────────\n// Internal computed step (resolved)\n// ─────────────────────────────────────────────\n\nexport interface BTourResolvedStep extends BTourStep {\n resolvedTarget: HTMLElement | null;\n index: number;\n}\n\n// ─────────────────────────────────────────────\n// Injection key (unused currently - kept for extensibility)\n// ─────────────────────────────────────────────\n\nexport const BTourContextKey: InjectionKey<null> = Symbol('BTourContext');\n"],"mappings":";AAMA,IAAY,IAAL,yBAAA,GAAA;QACL,EAAA,SAAA,UACA,EAAA,MAAA,OACA,EAAA,UAAA,WACA,EAAA,WAAA,YACA,EAAA,SAAA,UACA,EAAA,aAAA,cACA,EAAA,cAAA,eACA,EAAA,OAAA,QACA,EAAA,UAAA,WACA,EAAA,aAAA,cACA,EAAA,QAAA,SACA,EAAA,WAAA,YACA,EAAA,cAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,UAAA,WACA,EAAA,UAAA;KACD"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { BTourPlacement as e, BTourType as t } from "./design-
|
|
1
|
+
import { BTourPlacement as e, BTourType as t } from "./design-system237.js";
|
|
2
2
|
import { Fragment as n, Teleport as r, Transition as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, mergeProps as f, nextTick as p, normalizeClass as m, normalizeStyle as h, onBeforeUnmount as ee, onMounted as te, openBlock as g, ref as _, renderList as ne, renderSlot as v, toDisplayString as y, watch as re, withCtx as ie } from "vue";
|
|
3
3
|
//#region src/components/BTour/BTour.vue?vue&type=script&setup=true&lang.ts
|
|
4
4
|
var b = ["aria-label"], ae = ["viewBox"], x = [
|
|
@@ -373,4 +373,4 @@ var b = ["aria-label"], ae = ["viewBox"], x = [
|
|
|
373
373
|
//#endregion
|
|
374
374
|
export { C as default };
|
|
375
375
|
|
|
376
|
-
//# sourceMappingURL=design-
|
|
376
|
+
//# sourceMappingURL=design-system238.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"design-system214.js","names":[],"sources":["../src/components/BTour/BTour.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, normalizeStyle as _normalizeStyle, normalizeClass as _normalizeClass, renderSlot as _renderSlot, toDisplayString as _toDisplayString, renderList as _renderList, Fragment as _Fragment, mergeProps as _mergeProps, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, Teleport as _Teleport, createBlock as _createBlock } from \"vue\"\n\nconst _hoisted_1 = [\"aria-label\"]\nconst _hoisted_2 = [\"viewBox\"]\nconst _hoisted_3 = [\"x\", \"y\", \"width\", \"height\", \"rx\"]\nconst _hoisted_4 = [\"fill\", \"mask\"]\nconst _hoisted_5 = {\n key: 1,\n class: \"b-tour__cover\"\n}\nconst _hoisted_6 = [\"src\"]\nconst _hoisted_7 = { class: \"b-tour__header\" }\nconst _hoisted_8 = { class: \"b-tour__title\" }\nconst _hoisted_9 = {\n key: 0,\n class: \"b-tour__close-icon\",\n viewBox: \"0 0 24 24\",\n xmlns: \"http://www.w3.org/2000/svg\",\n \"aria-hidden\": \"true\",\n focusable: \"false\"\n}\nconst _hoisted_10 = { key: 1 }\nconst _hoisted_11 = {\n key: 2,\n class: \"b-tour__description\"\n}\nconst _hoisted_12 = { class: \"b-tour__footer\" }\nconst _hoisted_13 = {\n class: \"b-tour__indicators\",\n \"aria-label\": \"Step progress\"\n}\nconst _hoisted_14 = [\"aria-current\"]\nconst _hoisted_15 = { class: \"b-tour__actions\" }\n\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';\nimport {\n BTourPlacement,\n BTourType,\n type BTourArrowOptions,\n type BTourButtonProps,\n type BTourGapOptions,\n type BTourResolvedStep,\n type BTourScrollIntoViewOptions,\n type BTourStep,\n} from './types.ts';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\ninterface HighlightRect {\n top: number;\n left: number;\n width: number;\n height: number;\n radius: number;\n}\n\nconst focusableSelector =\n 'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\n\nexport default /*@__PURE__*/_defineComponent({\n __name: 'BTour',\n props: {\n steps: { default: () => ([]) },\n open: { type: Boolean, default: () => (undefined) },\n current: { default: () => (undefined) },\n defaultCurrent: { default: 0 },\n arrow: { type: [Boolean, Object], default: true },\n placement: { default: () => (BTourPlacement.Bottom) },\n type: { default: () => (BTourType.Default) },\n mask: { type: [Boolean, Object], default: true },\n gap: { default: () => ({ offset: 6, radius: 2 }) },\n zIndex: { default: 1070 },\n keyboard: { type: Boolean, default: true },\n scrollIntoViewOptions: { type: [Boolean, Object], default: true },\n getPopupContainer: { type: Function, default: undefined },\n closeIcon: { type: [Boolean, String], default: true },\n disabledInteraction: { type: Boolean, default: false }\n },\n emits: [\"change\", \"close\", \"update:open\", \"update:current\", \"finish\"],\n setup(__props: any, { emit: __emit }) {\n\n\n\nconst emit = __emit;\n\n\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst internalOpen = ref(false);\nconst internalCurrent = ref(__props.defaultCurrent);\n\nconst isControlledOpen = computed(() => __props.open !== undefined);\nconst isControlledCurrent = computed(() => __props.current !== undefined);\n\nconst isOpen = computed(() => (isControlledOpen.value ? __props.open! : internalOpen.value));\nconst currentStep = computed(() => (isControlledCurrent.value ? __props.current! : internalCurrent.value));\n\n// ─────────────────────────────────────────────\n// Derived step data\n// ─────────────────────────────────────────────\nconst totalSteps = computed(() => __props.steps.length);\n\nconst resolvedSteps = computed<BTourResolvedStep[]>(() =>\n __props.steps.map((step, index) => {\n let resolvedTarget: HTMLElement | null = null;\n if (step.target) {\n if (typeof step.target === 'string') {\n resolvedTarget = document.querySelector<HTMLElement>(step.target);\n } else if (typeof step.target === 'function') {\n resolvedTarget = step.target();\n } else {\n resolvedTarget = step.target;\n }\n }\n return { ...step, resolvedTarget, index };\n }),\n);\n\nconst activeStep = computed<BTourResolvedStep | undefined>(\n () => resolvedSteps.value[currentStep.value],\n);\n\n/** Effective placement for the current step (step overrides tour-level). */\nconst effectivePlacement = computed(() => activeStep.value?.placement ?? __props.placement);\n\n/** Effective arrow config for the current step. */\nconst effectiveArrow = computed(() => activeStep.value?.arrow ?? __props.arrow);\n\nconst showArrow = computed(() => effectiveArrow.value !== false);\n\nconst arrowPointAtCenter = computed(\n () => typeof effectiveArrow.value === 'object' && effectiveArrow.value.pointAtCenter,\n);\n\n/** Effective type for the current step. */\nconst effectiveType = computed(() => activeStep.value?.type ?? __props.type);\n\n/** Effective mask for the current step. */\nconst effectiveMask = computed(() => activeStep.value?.mask ?? __props.mask);\n\nconst showMask = computed(() => effectiveMask.value !== false);\n\nconst maskColor = computed(() => {\n if (typeof effectiveMask.value === 'object' && effectiveMask.value.color) {\n return effectiveMask.value.color;\n }\n return undefined;\n});\n\n/** Whether to show the close button. */\nconst showCloseIcon = computed(() => {\n const stepClose = activeStep.value?.closeIcon;\n const val = stepClose !== undefined ? stepClose : __props.closeIcon;\n return val !== false;\n});\n\n// ─────────────────────────────────────────────\n// Highlight box (target element spotlight)\n// ─────────────────────────────────────────────\nconst highlightRect = ref<HighlightRect | null>(null);\nconst popupStyle = ref<Record<string, string>>({});\n\nconst gapOffset = computed(() => {\n const o = __props.gap?.offset ?? 6;\n return Array.isArray(o) ? o : [o, o];\n});\nconst gapRadius = computed(() => __props.gap?.radius ?? 2);\n\nfunction updateHighlight() {\n const step = activeStep.value;\n if (!step || !isOpen.value) {\n highlightRect.value = null;\n popupStyle.value = {};\n return;\n }\n\n const target = step.resolvedTarget;\n if (!target) {\n // Center the popup when no target\n highlightRect.value = null;\n popupStyle.value = {\n position: 'fixed',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n };\n return;\n }\n\n const rect = target.getBoundingClientRect();\n const [offsetV, offsetH] = gapOffset.value;\n highlightRect.value = {\n top: rect.top - offsetV,\n left: rect.left - offsetH,\n width: rect.width + offsetH * 2,\n height: rect.height + offsetV * 2,\n radius: gapRadius.value,\n };\n\n // Position the popup relative to the highlight\n computePopupStyle(rect);\n}\n\nfunction computePopupStyle(rect: DOMRect) {\n const GAP = 12;\n const eff = effectivePlacement.value;\n const style: Record<string, string> = { position: 'fixed' };\n const [offsetV, offsetH] = gapOffset.value;\n\n const top = rect.top - offsetV;\n const bottom = rect.bottom + offsetV;\n const left = rect.left - offsetH;\n const right = rect.right + offsetH;\n const midX = rect.left + rect.width / 2;\n const midY = rect.top + rect.height / 2;\n\n switch (eff) {\n case BTourPlacement.Top:\n style.bottom = `${window.innerHeight - top + GAP}px`;\n style.left = `${midX}px`;\n style.transform = 'translateX(-50%)';\n break;\n case BTourPlacement.TopLeft:\n style.bottom = `${window.innerHeight - top + GAP}px`;\n style.left = `${left}px`;\n break;\n case BTourPlacement.TopRight:\n style.bottom = `${window.innerHeight - top + GAP}px`;\n style.right = `${window.innerWidth - right}px`;\n break;\n case BTourPlacement.Bottom:\n style.top = `${bottom + GAP}px`;\n style.left = `${midX}px`;\n style.transform = 'translateX(-50%)';\n break;\n case BTourPlacement.BottomLeft:\n style.top = `${bottom + GAP}px`;\n style.left = `${left}px`;\n break;\n case BTourPlacement.BottomRight:\n style.top = `${bottom + GAP}px`;\n style.right = `${window.innerWidth - right}px`;\n break;\n case BTourPlacement.Left:\n style.top = `${midY}px`;\n style.right = `${window.innerWidth - left + GAP}px`;\n style.transform = 'translateY(-50%)';\n break;\n case BTourPlacement.LeftTop:\n style.top = `${top}px`;\n style.right = `${window.innerWidth - left + GAP}px`;\n break;\n case BTourPlacement.LeftBottom:\n style.bottom = `${window.innerHeight - bottom}px`;\n style.right = `${window.innerWidth - left + GAP}px`;\n break;\n case BTourPlacement.Right:\n style.top = `${midY}px`;\n style.left = `${right + GAP}px`;\n style.transform = 'translateY(-50%)';\n break;\n case BTourPlacement.RightTop:\n style.top = `${top}px`;\n style.left = `${right + GAP}px`;\n break;\n case BTourPlacement.RightBottom:\n style.bottom = `${window.innerHeight - bottom}px`;\n style.left = `${right + GAP}px`;\n break;\n case BTourPlacement.Center:\n style.top = '50%';\n style.left = '50%';\n style.transform = 'translate(-50%, -50%)';\n break;\n default:\n style.top = `${bottom + GAP}px`;\n style.left = `${midX}px`;\n style.transform = 'translateX(-50%)';\n }\n\n popupStyle.value = style;\n}\n\n// ─────────────────────────────────────────────\n// Arrow positioning class\n// ─────────────────────────────────────────────\nconst arrowClass = computed(() => {\n if (!showArrow.value) return '';\n const eff = effectivePlacement.value;\n\n if (\n [BTourPlacement.Bottom, BTourPlacement.BottomLeft, BTourPlacement.BottomRight].includes(\n eff as BTourPlacement,\n )\n ) {\n return 'b-tour__arrow--top';\n }\n if (\n [BTourPlacement.Top, BTourPlacement.TopLeft, BTourPlacement.TopRight].includes(\n eff as BTourPlacement,\n )\n ) {\n return 'b-tour__arrow--bottom';\n }\n if (\n [BTourPlacement.Right, BTourPlacement.RightTop, BTourPlacement.RightBottom].includes(\n eff as BTourPlacement,\n )\n ) {\n return 'b-tour__arrow--left';\n }\n if (\n [BTourPlacement.Left, BTourPlacement.LeftTop, BTourPlacement.LeftBottom].includes(\n eff as BTourPlacement,\n )\n ) {\n return 'b-tour__arrow--right';\n }\n return '';\n});\n\n// ─────────────────────────────────────────────\n// Open / close helpers\n// ─────────────────────────────────────────────\nfunction doClose() {\n emit('close', currentStep.value);\n if (isControlledOpen.value) {\n emit('update:open', false);\n } else {\n internalOpen.value = false;\n }\n}\n\nfunction setCurrentStep(step: number) {\n emit('change', step);\n if (isControlledCurrent.value) {\n emit('update:current', step);\n } else {\n internalCurrent.value = step;\n }\n}\n\nfunction goNext() {\n if (currentStep.value >= totalSteps.value - 1) {\n emit('finish');\n doClose();\n return;\n }\n setCurrentStep(currentStep.value + 1);\n}\n\nfunction goPrev() {\n if (currentStep.value <= 0) return;\n setCurrentStep(currentStep.value - 1);\n}\n\n// ─────────────────────────────────────────────\n// Scroll target into view\n// ─────────────────────────────────────────────\nfunction scrollIntoView(el: HTMLElement) {\n const opt = activeStep.value?.scrollIntoViewOptions ?? __props.scrollIntoViewOptions;\n if (opt === false) return;\n const options: ScrollIntoViewOptions =\n typeof opt === 'object'\n ? (opt as ScrollIntoViewOptions)\n : { behavior: 'smooth', block: 'center', inline: 'nearest' };\n el.scrollIntoView(options);\n}\n\n// ─────────────────────────────────────────────\n// Focus management\n// ─────────────────────────────────────────────\nlet previouslyFocused: HTMLElement | null = null;\nconst popupRef = ref<HTMLDivElement | null>(null);\n\nfunction focusFirst() {\n nextTick(() => {\n if (!popupRef.value) return;\n const first = popupRef.value.querySelector<HTMLElement>(focusableSelector);\n if (first) {\n first.focus();\n } else {\n popupRef.value.focus();\n }\n });\n}\n\nfunction trapFocus(e: KeyboardEvent) {\n if (e.key !== 'Tab' || !popupRef.value) return;\n const focusable = Array.from(popupRef.value.querySelectorAll<HTMLElement>(focusableSelector));\n if (focusable.length === 0) {\n e.preventDefault();\n return;\n }\n const first = focusable[0];\n const last = focusable[focusable.length - 1];\n if (e.shiftKey && document.activeElement === first) {\n e.preventDefault();\n last.focus();\n } else if (!e.shiftKey && document.activeElement === last) {\n e.preventDefault();\n first.focus();\n }\n}\n\n// ─────────────────────────────────────────────\n// Keyboard navigation\n// ─────────────────────────────────────────────\nfunction onKeydown(e: KeyboardEvent) {\n if (!__props.keyboard) return;\n if (e.key === 'Escape') {\n e.preventDefault();\n doClose();\n } else if (e.key === 'ArrowRight') {\n e.preventDefault();\n goNext();\n } else if (e.key === 'ArrowLeft') {\n e.preventDefault();\n goPrev();\n }\n trapFocus(e);\n}\n\n// ─────────────────────────────────────────────\n// Resize / scroll → update highlight\n// ─────────────────────────────────────────────\nlet resizeObserver: ResizeObserver | null = null;\nlet targetObserver: ResizeObserver | null = null;\n\nfunction observeTarget(el: HTMLElement | null) {\n targetObserver?.disconnect();\n if (!el) return;\n targetObserver = new ResizeObserver(updateHighlight);\n targetObserver.observe(el);\n}\n\nfunction onScrollOrResize() {\n if (isOpen.value) updateHighlight();\n}\n\nonMounted(() => {\n resizeObserver = new ResizeObserver(onScrollOrResize);\n resizeObserver.observe(document.documentElement);\n window.addEventListener('scroll', onScrollOrResize, { passive: true });\n});\n\nonBeforeUnmount(() => {\n resizeObserver?.disconnect();\n targetObserver?.disconnect();\n window.removeEventListener('scroll', onScrollOrResize);\n});\n\n// ─────────────────────────────────────────────\n// Watchers\n// ─────────────────────────────────────────────\nwatch(\n [isOpen, currentStep],\n ([open]) => {\n if (!open) {\n highlightRect.value = null;\n popupStyle.value = {};\n targetObserver?.disconnect();\n nextTick(() => previouslyFocused?.focus());\n return;\n }\n const step = resolvedSteps.value[currentStep.value];\n if (step?.resolvedTarget) {\n scrollIntoView(step.resolvedTarget);\n observeTarget(step.resolvedTarget);\n }\n nextTick(() => {\n updateHighlight();\n if (open) {\n previouslyFocused = document.activeElement as HTMLElement | null;\n focusFirst();\n }\n });\n },\n { immediate: true, flush: 'post' },\n);\n\n// ─────────────────────────────────────────────\n// SVG mask clip-path (spotlight cutout)\n// ─────────────────────────────────────────────\nconst maskId = `b-tour-mask-${Math.random().toString(36).slice(2, 9)}`;\n\nconst svgViewBox = computed(() => {\n const vw = typeof window !== 'undefined' ? window.innerWidth : 1440;\n const vh = typeof window !== 'undefined' ? window.innerHeight : 900;\n return `0 0 ${vw} ${vh}`;\n});\n\nconst maskStyle = computed<Record<string, string>>(() => {\n if (typeof effectiveMask.value === 'object' && effectiveMask.value.style) {\n return effectiveMask.value.style;\n }\n return {};\n});\n\n// ─────────────────────────────────────────────\n// Cover image helpers\n// ─────────────────────────────────────────────\nconst hasCover = computed(() => Boolean(activeStep.value?.cover));\n\nfunction stripBtnProps(props: BTourButtonProps | undefined) {\n if (!props) return {};\n const { onClick: _onClick, children: _children, ...rest } = props;\n return rest;\n}\n\nreturn (_ctx: any,_cache: any) => {\n return (_openBlock(), _createBlock(_Teleport, { to: \"body\" }, [\n _createVNode(_Transition, { name: \"b-tour-fade\" }, {\n default: _withCtx(() => [\n (isOpen.value && totalSteps.value > 0)\n ? (_openBlock(), _createElementBlock(\"div\", {\n key: 0,\n class: _normalizeClass([\"b-tour\", [`b-tour--${effectiveType.value}`]]),\n style: _normalizeStyle({ '--b-tour-z-index': String(__props.zIndex) }),\n role: \"dialog\",\n \"aria-modal\": \"true\",\n \"aria-label\": activeStep.value?.title\n }, [\n (showMask.value)\n ? (_openBlock(), _createElementBlock(\"svg\", {\n key: 0,\n class: \"b-tour__mask\",\n style: _normalizeStyle([{ zIndex: __props.zIndex - 1 }, maskStyle.value]),\n xmlns: \"http://www.w3.org/2000/svg\",\n viewBox: svgViewBox.value,\n \"aria-hidden\": \"true\",\n focusable: \"false\"\n }, [\n _createElementVNode(\"defs\", null, [\n _createElementVNode(\"mask\", { id: maskId }, [\n _cache[2] || (_cache[2] = _createElementVNode(\"rect\", {\n x: \"0\",\n y: \"0\",\n width: \"100%\",\n height: \"100%\",\n fill: \"white\"\n }, null, -1)),\n (highlightRect.value)\n ? (_openBlock(), _createElementBlock(\"rect\", {\n key: 0,\n x: highlightRect.value.left,\n y: highlightRect.value.top,\n width: highlightRect.value.width,\n height: highlightRect.value.height,\n rx: highlightRect.value.radius,\n fill: \"black\"\n }, null, 8, _hoisted_3))\n : _createCommentVNode(\"\", true)\n ])\n ]),\n _createElementVNode(\"rect\", {\n x: \"0\",\n y: \"0\",\n width: \"100%\",\n height: \"100%\",\n fill: maskColor.value ?? 'var(--b-tour-mask-bg)',\n mask: `url(#${maskId})`,\n style: _normalizeStyle({ pointerEvents: __props.disabledInteraction ? 'all' : 'none' })\n }, null, 12, _hoisted_4)\n ], 12, _hoisted_2))\n : _createCommentVNode(\"\", true),\n (highlightRect.value)\n ? (_openBlock(), _createElementBlock(\"div\", {\n key: 1,\n class: \"b-tour__spotlight\",\n style: _normalizeStyle({\n top: `${highlightRect.value.top}px`,\n left: `${highlightRect.value.left}px`,\n width: `${highlightRect.value.width}px`,\n height: `${highlightRect.value.height}px`,\n borderRadius: `${highlightRect.value.radius}px`,\n zIndex: __props.zIndex - 1,\n pointerEvents: __props.disabledInteraction ? 'none' : 'auto',\n }),\n \"aria-hidden\": \"true\"\n }, null, 4))\n : _createCommentVNode(\"\", true),\n _createElementVNode(\"div\", {\n ref_key: \"popupRef\",\n ref: popupRef,\n class: _normalizeClass([\"b-tour__popup\", [\n `b-tour__popup--${effectivePlacement.value}`,\n { 'b-tour__popup--no-arrow': !showArrow.value || !highlightRect.value },\n ]]),\n style: _normalizeStyle([{ zIndex: __props.zIndex }, popupStyle.value]),\n tabindex: \"-1\",\n onKeydown: onKeydown\n }, [\n (showArrow.value && highlightRect.value && arrowClass.value)\n ? (_openBlock(), _createElementBlock(\"div\", {\n key: 0,\n class: _normalizeClass([\"b-tour__arrow\", [arrowClass.value, { 'b-tour__arrow--center': arrowPointAtCenter.value }]]),\n \"aria-hidden\": \"true\"\n }, null, 2))\n : _createCommentVNode(\"\", true),\n (hasCover.value)\n ? (_openBlock(), _createElementBlock(\"div\", _hoisted_5, [\n (typeof activeStep.value?.cover === 'string')\n ? (_openBlock(), _createElementBlock(\"img\", {\n key: 0,\n src: activeStep.value.cover,\n class: \"b-tour__cover-img\",\n alt: \"\",\n \"aria-hidden\": \"true\"\n }, null, 8, _hoisted_6))\n : _renderSlot(_ctx.$slots, \"cover\", { key: 1 })\n ]))\n : _createCommentVNode(\"\", true),\n _createElementVNode(\"div\", _hoisted_7, [\n _createElementVNode(\"h4\", _hoisted_8, _toDisplayString(activeStep.value?.title), 1),\n (showCloseIcon.value)\n ? (_openBlock(), _createElementBlock(\"button\", {\n key: 0,\n type: \"button\",\n class: \"b-tour__close\",\n \"aria-label\": \"Close tour\",\n onClick: doClose\n }, [\n (\n __props.closeIcon === true ||\n activeStep.value?.closeIcon === true ||\n activeStep.value?.closeIcon === undefined\n )\n ? (_openBlock(), _createElementBlock(\"svg\", _hoisted_9, [...(_cache[3] || (_cache[3] = [\n _createElementVNode(\"path\", { d: \"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" }, null, -1)\n ]))]))\n : (_openBlock(), _createElementBlock(\"span\", _hoisted_10, _toDisplayString(typeof __props.closeIcon === 'string' ? __props.closeIcon : '✕'), 1))\n ]))\n : _createCommentVNode(\"\", true)\n ]),\n (activeStep.value?.description)\n ? (_openBlock(), _createElementBlock(\"div\", _hoisted_11, _toDisplayString(activeStep.value.description), 1))\n : _createCommentVNode(\"\", true),\n _createElementVNode(\"div\", _hoisted_12, [\n _createElementVNode(\"div\", _hoisted_13, [\n _renderSlot(_ctx.$slots, \"indicatorsRender\", {\n current: currentStep.value,\n total: totalSteps.value\n }, () => [\n (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(__props.steps, (_, i) => {\n return (_openBlock(), _createElementBlock(\"span\", {\n key: i,\n class: _normalizeClass([\"b-tour__indicator\", { 'b-tour__indicator--active': i === currentStep.value }]),\n role: \"presentation\",\n \"aria-current\": i === currentStep.value ? 'step' : undefined\n }, null, 10, _hoisted_14))\n }), 128))\n ])\n ]),\n _createElementVNode(\"div\", _hoisted_15, [\n (currentStep.value > 0)\n ? (_openBlock(), _createElementBlock(\"button\", _mergeProps({\n key: 0,\n type: \"button\",\n class: \"b-tour__btn b-tour__btn--prev\"\n }, stripBtnProps(activeStep.value?.prevButtonProps), {\n onClick: _cache[0] || (_cache[0] = \n () => {\n activeStep.value?.prevButtonProps?.onClick?.();\n goPrev();\n }\n )\n }), _toDisplayString(activeStep.value?.prevButtonProps?.children ?? 'Previous'), 17))\n : _createCommentVNode(\"\", true),\n _createElementVNode(\"button\", _mergeProps({\n type: \"button\",\n class: \"b-tour__btn b-tour__btn--next\"\n }, stripBtnProps(activeStep.value?.nextButtonProps), {\n onClick: _cache[1] || (_cache[1] = \n () => {\n activeStep.value?.nextButtonProps?.onClick?.();\n goNext();\n }\n )\n }), _toDisplayString(activeStep.value?.nextButtonProps?.children ??\n (currentStep.value >= totalSteps.value - 1 ? 'Finish' : 'Next')), 17)\n ])\n ])\n ], 38)\n ], 14, _hoisted_1))\n : _createCommentVNode(\"\", true)\n ]),\n _: 3\n })\n ]))\n}\n}\n\n})"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"design-system238.js","names":[],"sources":["../src/components/BTour/BTour.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, normalizeStyle as _normalizeStyle, normalizeClass as _normalizeClass, renderSlot as _renderSlot, toDisplayString as _toDisplayString, renderList as _renderList, Fragment as _Fragment, mergeProps as _mergeProps, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, Teleport as _Teleport, createBlock as _createBlock } from \"vue\"\n\nconst _hoisted_1 = [\"aria-label\"]\nconst _hoisted_2 = [\"viewBox\"]\nconst _hoisted_3 = [\"x\", \"y\", \"width\", \"height\", \"rx\"]\nconst _hoisted_4 = [\"fill\", \"mask\"]\nconst _hoisted_5 = {\n key: 1,\n class: \"b-tour__cover\"\n}\nconst _hoisted_6 = [\"src\"]\nconst _hoisted_7 = { class: \"b-tour__header\" }\nconst _hoisted_8 = { class: \"b-tour__title\" }\nconst _hoisted_9 = {\n key: 0,\n class: \"b-tour__close-icon\",\n viewBox: \"0 0 24 24\",\n xmlns: \"http://www.w3.org/2000/svg\",\n \"aria-hidden\": \"true\",\n focusable: \"false\"\n}\nconst _hoisted_10 = { key: 1 }\nconst _hoisted_11 = {\n key: 2,\n class: \"b-tour__description\"\n}\nconst _hoisted_12 = { class: \"b-tour__footer\" }\nconst _hoisted_13 = {\n class: \"b-tour__indicators\",\n \"aria-label\": \"Step progress\"\n}\nconst _hoisted_14 = [\"aria-current\"]\nconst _hoisted_15 = { class: \"b-tour__actions\" }\n\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';\nimport {\n BTourPlacement,\n BTourType,\n type BTourArrowOptions,\n type BTourButtonProps,\n type BTourGapOptions,\n type BTourResolvedStep,\n type BTourScrollIntoViewOptions,\n type BTourStep,\n} from './types.ts';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\ninterface HighlightRect {\n top: number;\n left: number;\n width: number;\n height: number;\n radius: number;\n}\n\nconst focusableSelector =\n 'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\n\nexport default /*@__PURE__*/_defineComponent({\n __name: 'BTour',\n props: {\n steps: { default: () => ([]) },\n open: { type: Boolean, default: () => (undefined) },\n current: { default: () => (undefined) },\n defaultCurrent: { default: 0 },\n arrow: { type: [Boolean, Object], default: true },\n placement: { default: () => (BTourPlacement.Bottom) },\n type: { default: () => (BTourType.Default) },\n mask: { type: [Boolean, Object], default: true },\n gap: { default: () => ({ offset: 6, radius: 2 }) },\n zIndex: { default: 1070 },\n keyboard: { type: Boolean, default: true },\n scrollIntoViewOptions: { type: [Boolean, Object], default: true },\n getPopupContainer: { type: Function, default: undefined },\n closeIcon: { type: [Boolean, String], default: true },\n disabledInteraction: { type: Boolean, default: false }\n },\n emits: [\"change\", \"close\", \"update:open\", \"update:current\", \"finish\"],\n setup(__props: any, { emit: __emit }) {\n\n\n\nconst emit = __emit;\n\n\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst internalOpen = ref(false);\nconst internalCurrent = ref(__props.defaultCurrent);\n\nconst isControlledOpen = computed(() => __props.open !== undefined);\nconst isControlledCurrent = computed(() => __props.current !== undefined);\n\nconst isOpen = computed(() => (isControlledOpen.value ? __props.open! : internalOpen.value));\nconst currentStep = computed(() => (isControlledCurrent.value ? __props.current! : internalCurrent.value));\n\n// ─────────────────────────────────────────────\n// Derived step data\n// ─────────────────────────────────────────────\nconst totalSteps = computed(() => __props.steps.length);\n\nconst resolvedSteps = computed<BTourResolvedStep[]>(() =>\n __props.steps.map((step, index) => {\n let resolvedTarget: HTMLElement | null = null;\n if (step.target) {\n if (typeof step.target === 'string') {\n resolvedTarget = document.querySelector<HTMLElement>(step.target);\n } else if (typeof step.target === 'function') {\n resolvedTarget = step.target();\n } else {\n resolvedTarget = step.target;\n }\n }\n return { ...step, resolvedTarget, index };\n }),\n);\n\nconst activeStep = computed<BTourResolvedStep | undefined>(\n () => resolvedSteps.value[currentStep.value],\n);\n\n/** Effective placement for the current step (step overrides tour-level). */\nconst effectivePlacement = computed(() => activeStep.value?.placement ?? __props.placement);\n\n/** Effective arrow config for the current step. */\nconst effectiveArrow = computed(() => activeStep.value?.arrow ?? __props.arrow);\n\nconst showArrow = computed(() => effectiveArrow.value !== false);\n\nconst arrowPointAtCenter = computed(\n () => typeof effectiveArrow.value === 'object' && effectiveArrow.value.pointAtCenter,\n);\n\n/** Effective type for the current step. */\nconst effectiveType = computed(() => activeStep.value?.type ?? __props.type);\n\n/** Effective mask for the current step. */\nconst effectiveMask = computed(() => activeStep.value?.mask ?? __props.mask);\n\nconst showMask = computed(() => effectiveMask.value !== false);\n\nconst maskColor = computed(() => {\n if (typeof effectiveMask.value === 'object' && effectiveMask.value.color) {\n return effectiveMask.value.color;\n }\n return undefined;\n});\n\n/** Whether to show the close button. */\nconst showCloseIcon = computed(() => {\n const stepClose = activeStep.value?.closeIcon;\n const val = stepClose !== undefined ? stepClose : __props.closeIcon;\n return val !== false;\n});\n\n// ─────────────────────────────────────────────\n// Highlight box (target element spotlight)\n// ─────────────────────────────────────────────\nconst highlightRect = ref<HighlightRect | null>(null);\nconst popupStyle = ref<Record<string, string>>({});\n\nconst gapOffset = computed(() => {\n const o = __props.gap?.offset ?? 6;\n return Array.isArray(o) ? o : [o, o];\n});\nconst gapRadius = computed(() => __props.gap?.radius ?? 2);\n\nfunction updateHighlight() {\n const step = activeStep.value;\n if (!step || !isOpen.value) {\n highlightRect.value = null;\n popupStyle.value = {};\n return;\n }\n\n const target = step.resolvedTarget;\n if (!target) {\n // Center the popup when no target\n highlightRect.value = null;\n popupStyle.value = {\n position: 'fixed',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n };\n return;\n }\n\n const rect = target.getBoundingClientRect();\n const [offsetV, offsetH] = gapOffset.value;\n highlightRect.value = {\n top: rect.top - offsetV,\n left: rect.left - offsetH,\n width: rect.width + offsetH * 2,\n height: rect.height + offsetV * 2,\n radius: gapRadius.value,\n };\n\n // Position the popup relative to the highlight\n computePopupStyle(rect);\n}\n\nfunction computePopupStyle(rect: DOMRect) {\n const GAP = 12;\n const eff = effectivePlacement.value;\n const style: Record<string, string> = { position: 'fixed' };\n const [offsetV, offsetH] = gapOffset.value;\n\n const top = rect.top - offsetV;\n const bottom = rect.bottom + offsetV;\n const left = rect.left - offsetH;\n const right = rect.right + offsetH;\n const midX = rect.left + rect.width / 2;\n const midY = rect.top + rect.height / 2;\n\n switch (eff) {\n case BTourPlacement.Top:\n style.bottom = `${window.innerHeight - top + GAP}px`;\n style.left = `${midX}px`;\n style.transform = 'translateX(-50%)';\n break;\n case BTourPlacement.TopLeft:\n style.bottom = `${window.innerHeight - top + GAP}px`;\n style.left = `${left}px`;\n break;\n case BTourPlacement.TopRight:\n style.bottom = `${window.innerHeight - top + GAP}px`;\n style.right = `${window.innerWidth - right}px`;\n break;\n case BTourPlacement.Bottom:\n style.top = `${bottom + GAP}px`;\n style.left = `${midX}px`;\n style.transform = 'translateX(-50%)';\n break;\n case BTourPlacement.BottomLeft:\n style.top = `${bottom + GAP}px`;\n style.left = `${left}px`;\n break;\n case BTourPlacement.BottomRight:\n style.top = `${bottom + GAP}px`;\n style.right = `${window.innerWidth - right}px`;\n break;\n case BTourPlacement.Left:\n style.top = `${midY}px`;\n style.right = `${window.innerWidth - left + GAP}px`;\n style.transform = 'translateY(-50%)';\n break;\n case BTourPlacement.LeftTop:\n style.top = `${top}px`;\n style.right = `${window.innerWidth - left + GAP}px`;\n break;\n case BTourPlacement.LeftBottom:\n style.bottom = `${window.innerHeight - bottom}px`;\n style.right = `${window.innerWidth - left + GAP}px`;\n break;\n case BTourPlacement.Right:\n style.top = `${midY}px`;\n style.left = `${right + GAP}px`;\n style.transform = 'translateY(-50%)';\n break;\n case BTourPlacement.RightTop:\n style.top = `${top}px`;\n style.left = `${right + GAP}px`;\n break;\n case BTourPlacement.RightBottom:\n style.bottom = `${window.innerHeight - bottom}px`;\n style.left = `${right + GAP}px`;\n break;\n case BTourPlacement.Center:\n style.top = '50%';\n style.left = '50%';\n style.transform = 'translate(-50%, -50%)';\n break;\n default:\n style.top = `${bottom + GAP}px`;\n style.left = `${midX}px`;\n style.transform = 'translateX(-50%)';\n }\n\n popupStyle.value = style;\n}\n\n// ─────────────────────────────────────────────\n// Arrow positioning class\n// ─────────────────────────────────────────────\nconst arrowClass = computed(() => {\n if (!showArrow.value) return '';\n const eff = effectivePlacement.value;\n\n if (\n [BTourPlacement.Bottom, BTourPlacement.BottomLeft, BTourPlacement.BottomRight].includes(\n eff as BTourPlacement,\n )\n ) {\n return 'b-tour__arrow--top';\n }\n if (\n [BTourPlacement.Top, BTourPlacement.TopLeft, BTourPlacement.TopRight].includes(\n eff as BTourPlacement,\n )\n ) {\n return 'b-tour__arrow--bottom';\n }\n if (\n [BTourPlacement.Right, BTourPlacement.RightTop, BTourPlacement.RightBottom].includes(\n eff as BTourPlacement,\n )\n ) {\n return 'b-tour__arrow--left';\n }\n if (\n [BTourPlacement.Left, BTourPlacement.LeftTop, BTourPlacement.LeftBottom].includes(\n eff as BTourPlacement,\n )\n ) {\n return 'b-tour__arrow--right';\n }\n return '';\n});\n\n// ─────────────────────────────────────────────\n// Open / close helpers\n// ─────────────────────────────────────────────\nfunction doClose() {\n emit('close', currentStep.value);\n if (isControlledOpen.value) {\n emit('update:open', false);\n } else {\n internalOpen.value = false;\n }\n}\n\nfunction setCurrentStep(step: number) {\n emit('change', step);\n if (isControlledCurrent.value) {\n emit('update:current', step);\n } else {\n internalCurrent.value = step;\n }\n}\n\nfunction goNext() {\n if (currentStep.value >= totalSteps.value - 1) {\n emit('finish');\n doClose();\n return;\n }\n setCurrentStep(currentStep.value + 1);\n}\n\nfunction goPrev() {\n if (currentStep.value <= 0) return;\n setCurrentStep(currentStep.value - 1);\n}\n\n// ─────────────────────────────────────────────\n// Scroll target into view\n// ─────────────────────────────────────────────\nfunction scrollIntoView(el: HTMLElement) {\n const opt = activeStep.value?.scrollIntoViewOptions ?? __props.scrollIntoViewOptions;\n if (opt === false) return;\n const options: ScrollIntoViewOptions =\n typeof opt === 'object'\n ? (opt as ScrollIntoViewOptions)\n : { behavior: 'smooth', block: 'center', inline: 'nearest' };\n el.scrollIntoView(options);\n}\n\n// ─────────────────────────────────────────────\n// Focus management\n// ─────────────────────────────────────────────\nlet previouslyFocused: HTMLElement | null = null;\nconst popupRef = ref<HTMLDivElement | null>(null);\n\nfunction focusFirst() {\n nextTick(() => {\n if (!popupRef.value) return;\n const first = popupRef.value.querySelector<HTMLElement>(focusableSelector);\n if (first) {\n first.focus();\n } else {\n popupRef.value.focus();\n }\n });\n}\n\nfunction trapFocus(e: KeyboardEvent) {\n if (e.key !== 'Tab' || !popupRef.value) return;\n const focusable = Array.from(popupRef.value.querySelectorAll<HTMLElement>(focusableSelector));\n if (focusable.length === 0) {\n e.preventDefault();\n return;\n }\n const first = focusable[0];\n const last = focusable[focusable.length - 1];\n if (e.shiftKey && document.activeElement === first) {\n e.preventDefault();\n last.focus();\n } else if (!e.shiftKey && document.activeElement === last) {\n e.preventDefault();\n first.focus();\n }\n}\n\n// ─────────────────────────────────────────────\n// Keyboard navigation\n// ─────────────────────────────────────────────\nfunction onKeydown(e: KeyboardEvent) {\n if (!__props.keyboard) return;\n if (e.key === 'Escape') {\n e.preventDefault();\n doClose();\n } else if (e.key === 'ArrowRight') {\n e.preventDefault();\n goNext();\n } else if (e.key === 'ArrowLeft') {\n e.preventDefault();\n goPrev();\n }\n trapFocus(e);\n}\n\n// ─────────────────────────────────────────────\n// Resize / scroll → update highlight\n// ─────────────────────────────────────────────\nlet resizeObserver: ResizeObserver | null = null;\nlet targetObserver: ResizeObserver | null = null;\n\nfunction observeTarget(el: HTMLElement | null) {\n targetObserver?.disconnect();\n if (!el) return;\n targetObserver = new ResizeObserver(updateHighlight);\n targetObserver.observe(el);\n}\n\nfunction onScrollOrResize() {\n if (isOpen.value) updateHighlight();\n}\n\nonMounted(() => {\n resizeObserver = new ResizeObserver(onScrollOrResize);\n resizeObserver.observe(document.documentElement);\n window.addEventListener('scroll', onScrollOrResize, { passive: true });\n});\n\nonBeforeUnmount(() => {\n resizeObserver?.disconnect();\n targetObserver?.disconnect();\n window.removeEventListener('scroll', onScrollOrResize);\n});\n\n// ─────────────────────────────────────────────\n// Watchers\n// ─────────────────────────────────────────────\nwatch(\n [isOpen, currentStep],\n ([open]) => {\n if (!open) {\n highlightRect.value = null;\n popupStyle.value = {};\n targetObserver?.disconnect();\n nextTick(() => previouslyFocused?.focus());\n return;\n }\n const step = resolvedSteps.value[currentStep.value];\n if (step?.resolvedTarget) {\n scrollIntoView(step.resolvedTarget);\n observeTarget(step.resolvedTarget);\n }\n nextTick(() => {\n updateHighlight();\n if (open) {\n previouslyFocused = document.activeElement as HTMLElement | null;\n focusFirst();\n }\n });\n },\n { immediate: true, flush: 'post' },\n);\n\n// ─────────────────────────────────────────────\n// SVG mask clip-path (spotlight cutout)\n// ─────────────────────────────────────────────\nconst maskId = `b-tour-mask-${Math.random().toString(36).slice(2, 9)}`;\n\nconst svgViewBox = computed(() => {\n const vw = typeof window !== 'undefined' ? window.innerWidth : 1440;\n const vh = typeof window !== 'undefined' ? window.innerHeight : 900;\n return `0 0 ${vw} ${vh}`;\n});\n\nconst maskStyle = computed<Record<string, string>>(() => {\n if (typeof effectiveMask.value === 'object' && effectiveMask.value.style) {\n return effectiveMask.value.style;\n }\n return {};\n});\n\n// ─────────────────────────────────────────────\n// Cover image helpers\n// ─────────────────────────────────────────────\nconst hasCover = computed(() => Boolean(activeStep.value?.cover));\n\nfunction stripBtnProps(props: BTourButtonProps | undefined) {\n if (!props) return {};\n const { onClick: _onClick, children: _children, ...rest } = props;\n return rest;\n}\n\nreturn (_ctx: any,_cache: any) => {\n return (_openBlock(), _createBlock(_Teleport, { to: \"body\" }, [\n _createVNode(_Transition, { name: \"b-tour-fade\" }, {\n default: _withCtx(() => [\n (isOpen.value && totalSteps.value > 0)\n ? (_openBlock(), _createElementBlock(\"div\", {\n key: 0,\n class: _normalizeClass([\"b-tour\", [`b-tour--${effectiveType.value}`]]),\n style: _normalizeStyle({ '--b-tour-z-index': String(__props.zIndex) }),\n role: \"dialog\",\n \"aria-modal\": \"true\",\n \"aria-label\": activeStep.value?.title\n }, [\n (showMask.value)\n ? (_openBlock(), _createElementBlock(\"svg\", {\n key: 0,\n class: \"b-tour__mask\",\n style: _normalizeStyle([{ zIndex: __props.zIndex - 1 }, maskStyle.value]),\n xmlns: \"http://www.w3.org/2000/svg\",\n viewBox: svgViewBox.value,\n \"aria-hidden\": \"true\",\n focusable: \"false\"\n }, [\n _createElementVNode(\"defs\", null, [\n _createElementVNode(\"mask\", { id: maskId }, [\n _cache[2] || (_cache[2] = _createElementVNode(\"rect\", {\n x: \"0\",\n y: \"0\",\n width: \"100%\",\n height: \"100%\",\n fill: \"white\"\n }, null, -1)),\n (highlightRect.value)\n ? (_openBlock(), _createElementBlock(\"rect\", {\n key: 0,\n x: highlightRect.value.left,\n y: highlightRect.value.top,\n width: highlightRect.value.width,\n height: highlightRect.value.height,\n rx: highlightRect.value.radius,\n fill: \"black\"\n }, null, 8, _hoisted_3))\n : _createCommentVNode(\"\", true)\n ])\n ]),\n _createElementVNode(\"rect\", {\n x: \"0\",\n y: \"0\",\n width: \"100%\",\n height: \"100%\",\n fill: maskColor.value ?? 'var(--b-tour-mask-bg)',\n mask: `url(#${maskId})`,\n style: _normalizeStyle({ pointerEvents: __props.disabledInteraction ? 'all' : 'none' })\n }, null, 12, _hoisted_4)\n ], 12, _hoisted_2))\n : _createCommentVNode(\"\", true),\n (highlightRect.value)\n ? (_openBlock(), _createElementBlock(\"div\", {\n key: 1,\n class: \"b-tour__spotlight\",\n style: _normalizeStyle({\n top: `${highlightRect.value.top}px`,\n left: `${highlightRect.value.left}px`,\n width: `${highlightRect.value.width}px`,\n height: `${highlightRect.value.height}px`,\n borderRadius: `${highlightRect.value.radius}px`,\n zIndex: __props.zIndex - 1,\n pointerEvents: __props.disabledInteraction ? 'none' : 'auto',\n }),\n \"aria-hidden\": \"true\"\n }, null, 4))\n : _createCommentVNode(\"\", true),\n _createElementVNode(\"div\", {\n ref_key: \"popupRef\",\n ref: popupRef,\n class: _normalizeClass([\"b-tour__popup\", [\n `b-tour__popup--${effectivePlacement.value}`,\n { 'b-tour__popup--no-arrow': !showArrow.value || !highlightRect.value },\n ]]),\n style: _normalizeStyle([{ zIndex: __props.zIndex }, popupStyle.value]),\n tabindex: \"-1\",\n onKeydown: onKeydown\n }, [\n (showArrow.value && highlightRect.value && arrowClass.value)\n ? (_openBlock(), _createElementBlock(\"div\", {\n key: 0,\n class: _normalizeClass([\"b-tour__arrow\", [arrowClass.value, { 'b-tour__arrow--center': arrowPointAtCenter.value }]]),\n \"aria-hidden\": \"true\"\n }, null, 2))\n : _createCommentVNode(\"\", true),\n (hasCover.value)\n ? (_openBlock(), _createElementBlock(\"div\", _hoisted_5, [\n (typeof activeStep.value?.cover === 'string')\n ? (_openBlock(), _createElementBlock(\"img\", {\n key: 0,\n src: activeStep.value.cover,\n class: \"b-tour__cover-img\",\n alt: \"\",\n \"aria-hidden\": \"true\"\n }, null, 8, _hoisted_6))\n : _renderSlot(_ctx.$slots, \"cover\", { key: 1 })\n ]))\n : _createCommentVNode(\"\", true),\n _createElementVNode(\"div\", _hoisted_7, [\n _createElementVNode(\"h4\", _hoisted_8, _toDisplayString(activeStep.value?.title), 1),\n (showCloseIcon.value)\n ? (_openBlock(), _createElementBlock(\"button\", {\n key: 0,\n type: \"button\",\n class: \"b-tour__close\",\n \"aria-label\": \"Close tour\",\n onClick: doClose\n }, [\n (\n __props.closeIcon === true ||\n activeStep.value?.closeIcon === true ||\n activeStep.value?.closeIcon === undefined\n )\n ? (_openBlock(), _createElementBlock(\"svg\", _hoisted_9, [...(_cache[3] || (_cache[3] = [\n _createElementVNode(\"path\", { d: \"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" }, null, -1)\n ]))]))\n : (_openBlock(), _createElementBlock(\"span\", _hoisted_10, _toDisplayString(typeof __props.closeIcon === 'string' ? __props.closeIcon : '✕'), 1))\n ]))\n : _createCommentVNode(\"\", true)\n ]),\n (activeStep.value?.description)\n ? (_openBlock(), _createElementBlock(\"div\", _hoisted_11, _toDisplayString(activeStep.value.description), 1))\n : _createCommentVNode(\"\", true),\n _createElementVNode(\"div\", _hoisted_12, [\n _createElementVNode(\"div\", _hoisted_13, [\n _renderSlot(_ctx.$slots, \"indicatorsRender\", {\n current: currentStep.value,\n total: totalSteps.value\n }, () => [\n (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(__props.steps, (_, i) => {\n return (_openBlock(), _createElementBlock(\"span\", {\n key: i,\n class: _normalizeClass([\"b-tour__indicator\", { 'b-tour__indicator--active': i === currentStep.value }]),\n role: \"presentation\",\n \"aria-current\": i === currentStep.value ? 'step' : undefined\n }, null, 10, _hoisted_14))\n }), 128))\n ])\n ]),\n _createElementVNode(\"div\", _hoisted_15, [\n (currentStep.value > 0)\n ? (_openBlock(), _createElementBlock(\"button\", _mergeProps({\n key: 0,\n type: \"button\",\n class: \"b-tour__btn b-tour__btn--prev\"\n }, stripBtnProps(activeStep.value?.prevButtonProps), {\n onClick: _cache[0] || (_cache[0] = \n () => {\n activeStep.value?.prevButtonProps?.onClick?.();\n goPrev();\n }\n )\n }), _toDisplayString(activeStep.value?.prevButtonProps?.children ?? 'Previous'), 17))\n : _createCommentVNode(\"\", true),\n _createElementVNode(\"button\", _mergeProps({\n type: \"button\",\n class: \"b-tour__btn b-tour__btn--next\"\n }, stripBtnProps(activeStep.value?.nextButtonProps), {\n onClick: _cache[1] || (_cache[1] = \n () => {\n activeStep.value?.nextButtonProps?.onClick?.();\n goNext();\n }\n )\n }), _toDisplayString(activeStep.value?.nextButtonProps?.children ??\n (currentStep.value >= totalSteps.value - 1 ? 'Finish' : 'Next')), 17)\n ])\n ])\n ], 38)\n ], 14, _hoisted_1))\n : _createCommentVNode(\"\", true)\n ]),\n _: 3\n })\n ]))\n}\n}\n\n})"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"design-system240.js","names":[],"sources":["../src/components/BTour/BTour.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';\nimport {\n BTourPlacement,\n BTourType,\n type BTourArrowOptions,\n type BTourButtonProps,\n type BTourGapOptions,\n type BTourResolvedStep,\n type BTourScrollIntoViewOptions,\n type BTourStep,\n} from './types.ts';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst {\n steps = [],\n open = undefined,\n current = undefined,\n defaultCurrent = 0,\n arrow = true,\n placement = BTourPlacement.Bottom,\n type = BTourType.Default,\n mask = true,\n gap = { offset: 6, radius: 2 },\n zIndex = 1070,\n keyboard = true,\n scrollIntoViewOptions = true,\n getPopupContainer: _getPopupContainer = undefined,\n closeIcon = true,\n disabledInteraction = false,\n} = defineProps<{\n /** Array of step definition objects. */\n steps?: BTourStep[];\n /**\n * Controlled open state. Pair with `current` and `onChange`/`onClose`.\n * Omit to use uncontrolled mode.\n */\n open?: boolean;\n /**\n * Controlled current step index.\n * Omit to use uncontrolled mode.\n */\n current?: number;\n /** Initial step index in uncontrolled mode. @default 0 */\n defaultCurrent?: number;\n /** Show arrow on the popup. Pass `{ pointAtCenter: true }` to center it. */\n arrow?: boolean | BTourArrowOptions;\n /** Default placement for all steps (step-level overrides this). @default 'bottom' */\n placement?: `${BTourPlacement}`;\n /** Visual type variant. @default 'default' */\n type?: `${BTourType}`;\n /**\n * Mask overlay. `false` disables, `true` uses defaults,\n * or object `{ color, style }` for custom styling.\n */\n mask?: boolean | { style?: Record<string, string>; color?: string };\n /** Gap between highlight box and target element. */\n gap?: BTourGapOptions;\n /** z-index of the tour popup and mask. @default 1070 */\n zIndex?: number;\n /** Enable keyboard navigation (ArrowLeft/Right, Escape). @default true */\n keyboard?: boolean;\n /** Scroll target into view. Pass options object or `false` to disable. */\n scrollIntoViewOptions?: boolean | BTourScrollIntoViewOptions;\n /** Container element for the tour popup. Defaults to `document.body`. */\n getPopupContainer?: () => HTMLElement;\n /** Custom close icon. `false` hides the close button. */\n closeIcon?: boolean | string;\n /** Disable pointer interaction on the highlighted region. @default false */\n disabledInteraction?: boolean;\n}>();\n\nconst emit = defineEmits<{\n /** Fired when the current step changes. */\n (e: 'change', current: number): void;\n /** Fired when the tour is closed (X button or Finish). */\n (e: 'close', current: number): void;\n /** Fires when open state changes (v-model:open). */\n (e: 'update:open', value: boolean): void;\n /** Fires when current step changes (v-model:current). */\n (e: 'update:current', value: number): void;\n /** Fired after the tour finishes (last step next). */\n (e: 'finish'): void;\n}>();\n\ndefineSlots<{\n /** Custom cover content for the tour step. */\n cover?(): unknown;\n /** Override indicator dots/numbers rendering. Receives `{ current, total }`. */\n indicatorsRender?(props: { current: number; total: number }): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst internalOpen = ref(false);\nconst internalCurrent = ref(defaultCurrent);\n\nconst isControlledOpen = computed(() => open !== undefined);\nconst isControlledCurrent = computed(() => current !== undefined);\n\nconst isOpen = computed(() => (isControlledOpen.value ? open! : internalOpen.value));\nconst currentStep = computed(() => (isControlledCurrent.value ? current! : internalCurrent.value));\n\n// ─────────────────────────────────────────────\n// Derived step data\n// ─────────────────────────────────────────────\nconst totalSteps = computed(() => steps.length);\n\nconst resolvedSteps = computed<BTourResolvedStep[]>(() =>\n steps.map((step, index) => {\n let resolvedTarget: HTMLElement | null = null;\n if (step.target) {\n if (typeof step.target === 'string') {\n resolvedTarget = document.querySelector<HTMLElement>(step.target);\n } else if (typeof step.target === 'function') {\n resolvedTarget = step.target();\n } else {\n resolvedTarget = step.target;\n }\n }\n return { ...step, resolvedTarget, index };\n }),\n);\n\nconst activeStep = computed<BTourResolvedStep | undefined>(\n () => resolvedSteps.value[currentStep.value],\n);\n\n/** Effective placement for the current step (step overrides tour-level). */\nconst effectivePlacement = computed(() => activeStep.value?.placement ?? placement);\n\n/** Effective arrow config for the current step. */\nconst effectiveArrow = computed(() => activeStep.value?.arrow ?? arrow);\n\nconst showArrow = computed(() => effectiveArrow.value !== false);\n\nconst arrowPointAtCenter = computed(\n () => typeof effectiveArrow.value === 'object' && effectiveArrow.value.pointAtCenter,\n);\n\n/** Effective type for the current step. */\nconst effectiveType = computed(() => activeStep.value?.type ?? type);\n\n/** Effective mask for the current step. */\nconst effectiveMask = computed(() => activeStep.value?.mask ?? mask);\n\nconst showMask = computed(() => effectiveMask.value !== false);\n\nconst maskColor = computed(() => {\n if (typeof effectiveMask.value === 'object' && effectiveMask.value.color) {\n return effectiveMask.value.color;\n }\n return undefined;\n});\n\n/** Whether to show the close button. */\nconst showCloseIcon = computed(() => {\n const stepClose = activeStep.value?.closeIcon;\n const val = stepClose !== undefined ? stepClose : closeIcon;\n return val !== false;\n});\n\n// ─────────────────────────────────────────────\n// Highlight box (target element spotlight)\n// ─────────────────────────────────────────────\ninterface HighlightRect {\n top: number;\n left: number;\n width: number;\n height: number;\n radius: number;\n}\n\nconst highlightRect = ref<HighlightRect | null>(null);\nconst popupStyle = ref<Record<string, string>>({});\n\nconst gapOffset = computed(() => {\n const o = gap?.offset ?? 6;\n return Array.isArray(o) ? o : [o, o];\n});\nconst gapRadius = computed(() => gap?.radius ?? 2);\n\nfunction updateHighlight() {\n const step = activeStep.value;\n if (!step || !isOpen.value) {\n highlightRect.value = null;\n popupStyle.value = {};\n return;\n }\n\n const target = step.resolvedTarget;\n if (!target) {\n // Center the popup when no target\n highlightRect.value = null;\n popupStyle.value = {\n position: 'fixed',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n };\n return;\n }\n\n const rect = target.getBoundingClientRect();\n const [offsetV, offsetH] = gapOffset.value;\n highlightRect.value = {\n top: rect.top - offsetV,\n left: rect.left - offsetH,\n width: rect.width + offsetH * 2,\n height: rect.height + offsetV * 2,\n radius: gapRadius.value,\n };\n\n // Position the popup relative to the highlight\n computePopupStyle(rect);\n}\n\nfunction computePopupStyle(rect: DOMRect) {\n const GAP = 12;\n const eff = effectivePlacement.value;\n const style: Record<string, string> = { position: 'fixed' };\n const [offsetV, offsetH] = gapOffset.value;\n\n const top = rect.top - offsetV;\n const bottom = rect.bottom + offsetV;\n const left = rect.left - offsetH;\n const right = rect.right + offsetH;\n const midX = rect.left + rect.width / 2;\n const midY = rect.top + rect.height / 2;\n\n switch (eff) {\n case BTourPlacement.Top:\n style.bottom = `${window.innerHeight - top + GAP}px`;\n style.left = `${midX}px`;\n style.transform = 'translateX(-50%)';\n break;\n case BTourPlacement.TopLeft:\n style.bottom = `${window.innerHeight - top + GAP}px`;\n style.left = `${left}px`;\n break;\n case BTourPlacement.TopRight:\n style.bottom = `${window.innerHeight - top + GAP}px`;\n style.right = `${window.innerWidth - right}px`;\n break;\n case BTourPlacement.Bottom:\n style.top = `${bottom + GAP}px`;\n style.left = `${midX}px`;\n style.transform = 'translateX(-50%)';\n break;\n case BTourPlacement.BottomLeft:\n style.top = `${bottom + GAP}px`;\n style.left = `${left}px`;\n break;\n case BTourPlacement.BottomRight:\n style.top = `${bottom + GAP}px`;\n style.right = `${window.innerWidth - right}px`;\n break;\n case BTourPlacement.Left:\n style.top = `${midY}px`;\n style.right = `${window.innerWidth - left + GAP}px`;\n style.transform = 'translateY(-50%)';\n break;\n case BTourPlacement.LeftTop:\n style.top = `${top}px`;\n style.right = `${window.innerWidth - left + GAP}px`;\n break;\n case BTourPlacement.LeftBottom:\n style.bottom = `${window.innerHeight - bottom}px`;\n style.right = `${window.innerWidth - left + GAP}px`;\n break;\n case BTourPlacement.Right:\n style.top = `${midY}px`;\n style.left = `${right + GAP}px`;\n style.transform = 'translateY(-50%)';\n break;\n case BTourPlacement.RightTop:\n style.top = `${top}px`;\n style.left = `${right + GAP}px`;\n break;\n case BTourPlacement.RightBottom:\n style.bottom = `${window.innerHeight - bottom}px`;\n style.left = `${right + GAP}px`;\n break;\n case BTourPlacement.Center:\n style.top = '50%';\n style.left = '50%';\n style.transform = 'translate(-50%, -50%)';\n break;\n default:\n style.top = `${bottom + GAP}px`;\n style.left = `${midX}px`;\n style.transform = 'translateX(-50%)';\n }\n\n popupStyle.value = style;\n}\n\n// ─────────────────────────────────────────────\n// Arrow positioning class\n// ─────────────────────────────────────────────\nconst arrowClass = computed(() => {\n if (!showArrow.value) return '';\n const eff = effectivePlacement.value;\n\n if (\n [BTourPlacement.Bottom, BTourPlacement.BottomLeft, BTourPlacement.BottomRight].includes(\n eff as BTourPlacement,\n )\n ) {\n return 'b-tour__arrow--top';\n }\n if (\n [BTourPlacement.Top, BTourPlacement.TopLeft, BTourPlacement.TopRight].includes(\n eff as BTourPlacement,\n )\n ) {\n return 'b-tour__arrow--bottom';\n }\n if (\n [BTourPlacement.Right, BTourPlacement.RightTop, BTourPlacement.RightBottom].includes(\n eff as BTourPlacement,\n )\n ) {\n return 'b-tour__arrow--left';\n }\n if (\n [BTourPlacement.Left, BTourPlacement.LeftTop, BTourPlacement.LeftBottom].includes(\n eff as BTourPlacement,\n )\n ) {\n return 'b-tour__arrow--right';\n }\n return '';\n});\n\n// ─────────────────────────────────────────────\n// Open / close helpers\n// ─────────────────────────────────────────────\nfunction doClose() {\n emit('close', currentStep.value);\n if (isControlledOpen.value) {\n emit('update:open', false);\n } else {\n internalOpen.value = false;\n }\n}\n\nfunction setCurrentStep(step: number) {\n emit('change', step);\n if (isControlledCurrent.value) {\n emit('update:current', step);\n } else {\n internalCurrent.value = step;\n }\n}\n\nfunction goNext() {\n if (currentStep.value >= totalSteps.value - 1) {\n emit('finish');\n doClose();\n return;\n }\n setCurrentStep(currentStep.value + 1);\n}\n\nfunction goPrev() {\n if (currentStep.value <= 0) return;\n setCurrentStep(currentStep.value - 1);\n}\n\n// ─────────────────────────────────────────────\n// Scroll target into view\n// ─────────────────────────────────────────────\nfunction scrollIntoView(el: HTMLElement) {\n const opt = activeStep.value?.scrollIntoViewOptions ?? scrollIntoViewOptions;\n if (opt === false) return;\n const options: ScrollIntoViewOptions =\n typeof opt === 'object'\n ? (opt as ScrollIntoViewOptions)\n : { behavior: 'smooth', block: 'center', inline: 'nearest' };\n el.scrollIntoView(options);\n}\n\n// ─────────────────────────────────────────────\n// Focus management\n// ─────────────────────────────────────────────\nlet previouslyFocused: HTMLElement | null = null;\nconst popupRef = ref<HTMLDivElement | null>(null);\n\nconst focusableSelector =\n 'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\nfunction focusFirst() {\n nextTick(() => {\n if (!popupRef.value) return;\n const first = popupRef.value.querySelector<HTMLElement>(focusableSelector);\n if (first) {\n first.focus();\n } else {\n popupRef.value.focus();\n }\n });\n}\n\nfunction trapFocus(e: KeyboardEvent) {\n if (e.key !== 'Tab' || !popupRef.value) return;\n const focusable = Array.from(popupRef.value.querySelectorAll<HTMLElement>(focusableSelector));\n if (focusable.length === 0) {\n e.preventDefault();\n return;\n }\n const first = focusable[0];\n const last = focusable[focusable.length - 1];\n if (e.shiftKey && document.activeElement === first) {\n e.preventDefault();\n last.focus();\n } else if (!e.shiftKey && document.activeElement === last) {\n e.preventDefault();\n first.focus();\n }\n}\n\n// ─────────────────────────────────────────────\n// Keyboard navigation\n// ─────────────────────────────────────────────\nfunction onKeydown(e: KeyboardEvent) {\n if (!keyboard) return;\n if (e.key === 'Escape') {\n e.preventDefault();\n doClose();\n } else if (e.key === 'ArrowRight') {\n e.preventDefault();\n goNext();\n } else if (e.key === 'ArrowLeft') {\n e.preventDefault();\n goPrev();\n }\n trapFocus(e);\n}\n\n// ─────────────────────────────────────────────\n// Resize / scroll → update highlight\n// ─────────────────────────────────────────────\nlet resizeObserver: ResizeObserver | null = null;\nlet targetObserver: ResizeObserver | null = null;\n\nfunction observeTarget(el: HTMLElement | null) {\n targetObserver?.disconnect();\n if (!el) return;\n targetObserver = new ResizeObserver(updateHighlight);\n targetObserver.observe(el);\n}\n\nfunction onScrollOrResize() {\n if (isOpen.value) updateHighlight();\n}\n\nonMounted(() => {\n resizeObserver = new ResizeObserver(onScrollOrResize);\n resizeObserver.observe(document.documentElement);\n window.addEventListener('scroll', onScrollOrResize, { passive: true });\n});\n\nonBeforeUnmount(() => {\n resizeObserver?.disconnect();\n targetObserver?.disconnect();\n window.removeEventListener('scroll', onScrollOrResize);\n});\n\n// ─────────────────────────────────────────────\n// Watchers\n// ─────────────────────────────────────────────\nwatch(\n [isOpen, currentStep],\n ([open]) => {\n if (!open) {\n highlightRect.value = null;\n popupStyle.value = {};\n targetObserver?.disconnect();\n nextTick(() => previouslyFocused?.focus());\n return;\n }\n const step = resolvedSteps.value[currentStep.value];\n if (step?.resolvedTarget) {\n scrollIntoView(step.resolvedTarget);\n observeTarget(step.resolvedTarget);\n }\n nextTick(() => {\n updateHighlight();\n if (open) {\n previouslyFocused = document.activeElement as HTMLElement | null;\n focusFirst();\n }\n });\n },\n { immediate: true, flush: 'post' },\n);\n\n// ─────────────────────────────────────────────\n// SVG mask clip-path (spotlight cutout)\n// ─────────────────────────────────────────────\nconst maskId = `b-tour-mask-${Math.random().toString(36).slice(2, 9)}`;\n\nconst svgViewBox = computed(() => {\n const vw = typeof window !== 'undefined' ? window.innerWidth : 1440;\n const vh = typeof window !== 'undefined' ? window.innerHeight : 900;\n return `0 0 ${vw} ${vh}`;\n});\n\nconst maskStyle = computed<Record<string, string>>(() => {\n if (typeof effectiveMask.value === 'object' && effectiveMask.value.style) {\n return effectiveMask.value.style;\n }\n return {};\n});\n\n// ─────────────────────────────────────────────\n// Cover image helpers\n// ─────────────────────────────────────────────\nconst hasCover = computed(() => Boolean(activeStep.value?.cover));\n\nfunction stripBtnProps(props: BTourButtonProps | undefined) {\n if (!props) return {};\n const { onClick: _onClick, children: _children, ...rest } = props;\n return rest;\n}\n</script>\n\n<template>\n <Teleport to=\"body\">\n <Transition name=\"b-tour-fade\">\n <div\n v-if=\"isOpen && totalSteps > 0\"\n class=\"b-tour\"\n :class=\"[`b-tour--${effectiveType}`]\"\n :style=\"{ '--b-tour-z-index': String(zIndex) }\"\n role=\"dialog\"\n aria-modal=\"true\"\n :aria-label=\"activeStep?.title\"\n >\n <!-- ── Mask overlay (SVG spotlight) ── -->\n <svg\n v-if=\"showMask\"\n class=\"b-tour__mask\"\n :style=\"[{ zIndex: zIndex - 1 }, maskStyle]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n :viewBox=\"svgViewBox\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <defs>\n <mask :id=\"maskId\">\n <!-- White = visible (full viewport) -->\n <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"white\" />\n <!-- Black = transparent cutout (target spotlight) -->\n <rect\n v-if=\"highlightRect\"\n :x=\"highlightRect.left\"\n :y=\"highlightRect.top\"\n :width=\"highlightRect.width\"\n :height=\"highlightRect.height\"\n :rx=\"highlightRect.radius\"\n fill=\"black\"\n />\n </mask>\n </defs>\n <rect\n x=\"0\"\n y=\"0\"\n width=\"100%\"\n height=\"100%\"\n :fill=\"maskColor ?? 'var(--b-tour-mask-bg)'\"\n :mask=\"`url(#${maskId})`\"\n :style=\"{ pointerEvents: disabledInteraction ? 'all' : 'none' }\"\n />\n </svg>\n\n <!-- ── Highlight border around target ── -->\n <div\n v-if=\"highlightRect\"\n class=\"b-tour__spotlight\"\n :style=\"{\n top: `${highlightRect.top}px`,\n left: `${highlightRect.left}px`,\n width: `${highlightRect.width}px`,\n height: `${highlightRect.height}px`,\n borderRadius: `${highlightRect.radius}px`,\n zIndex: zIndex - 1,\n pointerEvents: disabledInteraction ? 'none' : 'auto',\n }\"\n aria-hidden=\"true\"\n />\n\n <!-- ── Popup card ── -->\n <div\n ref=\"popupRef\"\n class=\"b-tour__popup\"\n :class=\"[\n `b-tour__popup--${effectivePlacement}`,\n { 'b-tour__popup--no-arrow': !showArrow || !highlightRect },\n ]\"\n :style=\"[{ zIndex }, popupStyle]\"\n tabindex=\"-1\"\n @keydown=\"onKeydown\"\n >\n <!-- Arrow -->\n <div\n v-if=\"showArrow && highlightRect && arrowClass\"\n class=\"b-tour__arrow\"\n :class=\"[arrowClass, { 'b-tour__arrow--center': arrowPointAtCenter }]\"\n aria-hidden=\"true\"\n />\n\n <!-- Cover media -->\n <div v-if=\"hasCover\" class=\"b-tour__cover\">\n <img\n v-if=\"typeof activeStep?.cover === 'string'\"\n :src=\"activeStep.cover\"\n class=\"b-tour__cover-img\"\n alt=\"\"\n aria-hidden=\"true\"\n />\n <slot v-else name=\"cover\" />\n </div>\n\n <!-- Header -->\n <div class=\"b-tour__header\">\n <h4 class=\"b-tour__title\">\n {{ activeStep?.title }}\n </h4>\n\n <!-- Close button -->\n <button\n v-if=\"showCloseIcon\"\n type=\"button\"\n class=\"b-tour__close\"\n aria-label=\"Close tour\"\n @click=\"doClose\"\n >\n <svg\n v-if=\"\n closeIcon === true ||\n activeStep?.closeIcon === true ||\n activeStep?.closeIcon === undefined\n \"\n class=\"b-tour__close-icon\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <path\n d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"\n />\n </svg>\n <span v-else>{{ typeof closeIcon === 'string' ? closeIcon : '✕' }}</span>\n </button>\n </div>\n\n <!-- Description -->\n <div v-if=\"activeStep?.description\" class=\"b-tour__description\">\n {{ activeStep.description }}\n </div>\n\n <!-- Footer -->\n <div class=\"b-tour__footer\">\n <!-- Indicators -->\n <div class=\"b-tour__indicators\" aria-label=\"Step progress\">\n <slot name=\"indicatorsRender\" :current=\"currentStep\" :total=\"totalSteps\">\n <span\n v-for=\"(_, i) in steps\"\n :key=\"i\"\n class=\"b-tour__indicator\"\n :class=\"{ 'b-tour__indicator--active': i === currentStep }\"\n role=\"presentation\"\n :aria-current=\"i === currentStep ? 'step' : undefined\"\n />\n </slot>\n </div>\n\n <!-- Actions -->\n <div class=\"b-tour__actions\">\n <!-- Prev button -->\n <button\n v-if=\"currentStep > 0\"\n type=\"button\"\n class=\"b-tour__btn b-tour__btn--prev\"\n v-bind=\"stripBtnProps(activeStep?.prevButtonProps)\"\n @click=\"\n () => {\n activeStep?.prevButtonProps?.onClick?.();\n goPrev();\n }\n \"\n >\n {{ activeStep?.prevButtonProps?.children ?? 'Previous' }}\n </button>\n\n <!-- Next / Finish button -->\n <button\n type=\"button\"\n class=\"b-tour__btn b-tour__btn--next\"\n v-bind=\"stripBtnProps(activeStep?.nextButtonProps)\"\n @click=\"\n () => {\n activeStep?.nextButtonProps?.onClick?.();\n goNext();\n }\n \"\n >\n {{\n activeStep?.nextButtonProps?.children ??\n (currentStep >= totalSteps - 1 ? 'Finish' : 'Next')\n }}\n </button>\n </div>\n </div>\n </div>\n </div>\n </Transition>\n </Teleport>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n Design tokens - scoped to component root\n (Never on :root - always on .b-tour)\n ──────────────────────────────────────────── */\n.b-tour {\n /* AntD token: zIndexPopup → 1070 */\n --b-tour-z-index: 1070;\n\n /* AntD token: closeBtnSize → 22px */\n --b-tour-close-btn-size: 22px;\n\n /* AntD token: primaryNextBtnHoverBg → rgb(240,240,240) */\n --b-tour-primary-next-btn-hover-bg: rgb(240, 240, 240);\n\n /* AntD token: primaryPrevBtnBg → rgba(255,255,255,0.15) */\n --b-tour-primary-prev-btn-bg: rgba(255, 255, 255, 0.15);\n\n /* Extended tokens for full component coverage */\n --b-tour-popup-bg: #fff;\n --b-tour-popup-color: oklch(25% 0 0);\n --b-tour-popup-font-size: 0.875rem;\n --b-tour-popup-line-height: 1.5;\n --b-tour-popup-border-radius: 0.5rem;\n --b-tour-popup-max-width: 320px;\n --b-tour-popup-min-width: 220px;\n --b-tour-popup-padding: 1rem;\n --b-tour-popup-shadow:\n 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12),\n 0 9px 28px 8px rgba(0, 0, 0, 0.05);\n\n --b-tour-title-font-size: 1rem;\n --b-tour-title-font-weight: 600;\n --b-tour-title-color: oklch(15% 0 0);\n\n --b-tour-description-color: oklch(35% 0 0);\n --b-tour-description-font-size: 0.875rem;\n\n --b-tour-mask-bg: rgba(0, 0, 0, 0.45);\n\n --b-tour-arrow-size: 10px;\n --b-tour-arrow-bg: #fff;\n\n --b-tour-indicator-size: 6px;\n --b-tour-indicator-bg: oklch(80% 0 0);\n --b-tour-indicator-active-bg: oklch(55% 0.169 237.323); /* primary */\n\n --b-tour-btn-font-size: 0.875rem;\n --b-tour-btn-border-radius: 0.375rem;\n --b-tour-btn-padding: 0.25rem 0.75rem;\n\n --b-tour-next-btn-bg: oklch(55% 0.169 237.323);\n --b-tour-next-btn-color: #fff;\n --b-tour-next-btn-hover-bg: oklch(48% 0.158 241.966);\n\n --b-tour-prev-btn-bg: transparent;\n --b-tour-prev-btn-color: oklch(35% 0 0);\n --b-tour-prev-btn-border: 1px solid oklch(80% 0 0);\n --b-tour-prev-btn-hover-bg: oklch(96% 0 0);\n\n --b-tour-close-color: oklch(55% 0 0);\n --b-tour-close-hover-color: oklch(25% 0 0);\n\n --b-tour-cover-border-radius: 0.5rem 0.5rem 0 0;\n\n --b-tour-transition-duration: 250ms;\n\n /* Primary type overrides */\n --b-tour-primary-popup-bg: oklch(55% 0.169 237.323);\n --b-tour-primary-title-color: #fff;\n --b-tour-primary-description-color: rgba(255, 255, 255, 0.85);\n --b-tour-primary-close-color: rgba(255, 255, 255, 0.75);\n --b-tour-primary-close-hover-color: #fff;\n --b-tour-primary-indicator-bg: rgba(255, 255, 255, 0.4);\n --b-tour-primary-indicator-active-bg: #fff;\n --b-tour-primary-arrow-bg: oklch(55% 0.169 237.323);\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-tour {\n --b-tour-popup-bg: oklch(22% 0 0);\n --b-tour-popup-color: oklch(90% 0 0);\n --b-tour-popup-shadow:\n 0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 3px 6px -4px rgba(0, 0, 0, 0.48),\n 0 9px 28px 8px rgba(0, 0, 0, 0.2);\n --b-tour-title-color: oklch(95% 0 0);\n --b-tour-description-color: oklch(72% 0 0);\n --b-tour-mask-bg: rgba(0, 0, 0, 0.65);\n --b-tour-arrow-bg: oklch(22% 0 0);\n --b-tour-indicator-bg: oklch(40% 0 0);\n --b-tour-prev-btn-color: oklch(85% 0 0);\n --b-tour-prev-btn-border: 1px solid oklch(35% 0 0);\n --b-tour-prev-btn-hover-bg: oklch(30% 0 0);\n --b-tour-close-color: oklch(65% 0 0);\n --b-tour-close-hover-color: oklch(90% 0 0);\n}\n\n@media (prefers-color-scheme: dark) {\n [data-prefers-color='system'] .b-tour {\n --b-tour-popup-bg: oklch(22% 0 0);\n --b-tour-popup-color: oklch(90% 0 0);\n --b-tour-popup-shadow:\n 0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 3px 6px -4px rgba(0, 0, 0, 0.48),\n 0 9px 28px 8px rgba(0, 0, 0, 0.2);\n --b-tour-title-color: oklch(95% 0 0);\n --b-tour-description-color: oklch(72% 0 0);\n --b-tour-mask-bg: rgba(0, 0, 0, 0.65);\n --b-tour-arrow-bg: oklch(22% 0 0);\n --b-tour-indicator-bg: oklch(40% 0 0);\n --b-tour-prev-btn-color: oklch(85% 0 0);\n --b-tour-prev-btn-border: 1px solid oklch(35% 0 0);\n --b-tour-prev-btn-hover-bg: oklch(30% 0 0);\n --b-tour-close-color: oklch(65% 0 0);\n --b-tour-close-hover-color: oklch(90% 0 0);\n }\n}\n\n/* ─────────────────────────────────────────────\n Tour container (fullscreen overlay wrapper)\n ───────────────────────────────────────────── */\n.b-tour {\n position: fixed;\n inset: 0;\n pointer-events: none;\n z-index: var(--b-tour-z-index);\n}\n\n/* ─────────────────────────────────────────────\n Mask (SVG spotlight overlay)\n ───────────────────────────────────────────── */\n.b-tour__mask {\n position: fixed;\n inset: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}\n\n/* ─────────────────────────────────────────────\n Spotlight border ring\n ───────────────────────────────────────────── */\n.b-tour__spotlight {\n position: fixed;\n box-shadow: 0 0 0 9999px transparent;\n box-sizing: border-box;\n pointer-events: auto;\n}\n\n/* ─────────────────────────────────────────────\n Popup card\n ───────────────────────────────────────────── */\n.b-tour__popup {\n position: fixed;\n background: var(--b-tour-popup-bg);\n color: var(--b-tour-popup-color);\n font-size: var(--b-tour-popup-font-size);\n line-height: var(--b-tour-popup-line-height);\n border-radius: var(--b-tour-popup-border-radius);\n box-shadow: var(--b-tour-popup-shadow);\n max-width: var(--b-tour-popup-max-width);\n min-width: var(--b-tour-popup-min-width);\n width: max-content;\n box-sizing: border-box;\n pointer-events: auto;\n outline: none;\n}\n\n/* ─────────────────────────────────────────────\n Arrow\n ───────────────────────────────────────────── */\n.b-tour__arrow {\n position: absolute;\n width: var(--b-tour-arrow-size);\n height: var(--b-tour-arrow-size);\n background: var(--b-tour-arrow-bg);\n transform: rotate(45deg);\n pointer-events: none;\n z-index: 1;\n}\n\n/* Arrow positions: which edge of the popup the arrow sits on */\n.b-tour__arrow--top {\n top: calc(var(--b-tour-arrow-size) / -2);\n left: 50%;\n margin-left: calc(var(--b-tour-arrow-size) / -2);\n}\n.b-tour__arrow--bottom {\n bottom: calc(var(--b-tour-arrow-size) / -2);\n left: 50%;\n margin-left: calc(var(--b-tour-arrow-size) / -2);\n}\n.b-tour__arrow--left {\n left: calc(var(--b-tour-arrow-size) / -2);\n top: 50%;\n margin-top: calc(var(--b-tour-arrow-size) / -2);\n}\n.b-tour__arrow--right {\n right: calc(var(--b-tour-arrow-size) / -2);\n top: 50%;\n margin-top: calc(var(--b-tour-arrow-size) / -2);\n}\n\n/* Center arrow along axis */\n.b-tour__arrow--center {\n left: 50%;\n transform: translateX(-50%) rotate(45deg);\n}\n\n/* ─────────────────────────────────────────────\n Cover image\n ───────────────────────────────────────────── */\n.b-tour__cover {\n border-radius: var(--b-tour-cover-border-radius);\n overflow: hidden;\n margin: 0;\n}\n\n.b-tour__cover-img {\n display: block;\n width: 100%;\n height: auto;\n object-fit: cover;\n}\n\n/* ─────────────────────────────────────────────\n Header (title + close)\n ───────────────────────────────────────────── */\n.b-tour__header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 0.5rem;\n padding: var(--b-tour-popup-padding) var(--b-tour-popup-padding) 0;\n}\n\n.b-tour__title {\n flex: 1;\n margin: 0;\n font-size: var(--b-tour-title-font-size);\n font-weight: var(--b-tour-title-font-weight);\n color: var(--b-tour-title-color);\n line-height: 1.4;\n}\n\n/* ─────────────────────────────────────────────\n Close button\n ───────────────────────────────────────────── */\n.b-tour__close {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--b-tour-close-btn-size);\n height: var(--b-tour-close-btn-size);\n padding: 0;\n margin-top: 0.1em;\n border: none;\n border-radius: 0.25rem;\n background: transparent;\n color: var(--b-tour-close-color);\n cursor: pointer;\n transition: color var(--b-tour-transition-duration) ease;\n}\n\n.b-tour__close:hover {\n color: var(--b-tour-close-hover-color);\n}\n\n.b-tour__close:focus-visible {\n outline: 2px solid var(--b-tour-next-btn-bg);\n outline-offset: 2px;\n}\n\n.b-tour__close-icon {\n width: 1em;\n height: 1em;\n fill: currentColor;\n display: block;\n}\n\n/* ─────────────────────────────────────────────\n Description\n ───────────────────────────────────────────── */\n.b-tour__description {\n padding: 0.5rem var(--b-tour-popup-padding);\n font-size: var(--b-tour-description-font-size);\n color: var(--b-tour-description-color);\n line-height: var(--b-tour-popup-line-height);\n}\n\n/* ─────────────────────────────────────────────\n Footer (indicators + actions)\n ───────────────────────────────────────────── */\n.b-tour__footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0.75rem var(--b-tour-popup-padding) var(--b-tour-popup-padding);\n gap: 0.75rem;\n}\n\n/* ── Indicators ── */\n.b-tour__indicators {\n display: flex;\n align-items: center;\n gap: 0.375rem;\n flex-wrap: wrap;\n}\n\n.b-tour__indicator {\n display: inline-block;\n width: var(--b-tour-indicator-size);\n height: var(--b-tour-indicator-size);\n border-radius: 50%;\n background: var(--b-tour-indicator-bg);\n transition:\n background var(--b-tour-transition-duration) ease,\n width var(--b-tour-transition-duration) ease;\n}\n\n.b-tour__indicator--active {\n background: var(--b-tour-indicator-active-bg);\n width: calc(var(--b-tour-indicator-size) * 2.5);\n border-radius: calc(var(--b-tour-indicator-size) / 2);\n}\n\n/* ── Actions ── */\n.b-tour__actions {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n margin-left: auto;\n}\n\n/* ── Buttons ── */\n.b-tour__btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: var(--b-tour-btn-padding);\n border-radius: var(--b-tour-btn-border-radius);\n font-size: var(--b-tour-btn-font-size);\n font-weight: 500;\n cursor: pointer;\n transition:\n background var(--b-tour-transition-duration) ease,\n color var(--b-tour-transition-duration) ease;\n white-space: nowrap;\n}\n\n.b-tour__btn:focus-visible {\n outline: 2px solid var(--b-tour-next-btn-bg);\n outline-offset: 2px;\n}\n\n.b-tour__btn--prev {\n background: var(--b-tour-prev-btn-bg);\n color: var(--b-tour-prev-btn-color);\n border: var(--b-tour-prev-btn-border);\n}\n\n.b-tour__btn--prev:hover {\n background: var(--b-tour-prev-btn-hover-bg);\n}\n\n.b-tour__btn--next {\n background: var(--b-tour-next-btn-bg);\n color: var(--b-tour-next-btn-color);\n border: none;\n}\n\n.b-tour__btn--next:hover {\n background: var(--b-tour-next-btn-hover-bg);\n}\n\n/* ─────────────────────────────────────────────\n Primary type variant\n ───────────────────────────────────────────── */\n.b-tour--primary .b-tour__popup {\n background: var(--b-tour-primary-popup-bg);\n}\n\n.b-tour--primary .b-tour__title {\n color: var(--b-tour-primary-title-color);\n}\n\n.b-tour--primary .b-tour__description {\n color: var(--b-tour-primary-description-color);\n}\n\n.b-tour--primary .b-tour__close {\n color: var(--b-tour-primary-close-color);\n}\n\n.b-tour--primary .b-tour__close:hover {\n color: var(--b-tour-primary-close-hover-color);\n}\n\n.b-tour--primary .b-tour__indicator {\n background: var(--b-tour-primary-indicator-bg);\n}\n\n.b-tour--primary .b-tour__indicator--active {\n background: var(--b-tour-primary-indicator-active-bg);\n}\n\n.b-tour--primary .b-tour__arrow {\n background: var(--b-tour-primary-arrow-bg);\n}\n\n.b-tour--primary .b-tour__btn--prev {\n background: var(--b-tour-primary-prev-btn-bg);\n color: #fff;\n border: 1px solid rgba(255, 255, 255, 0.4);\n}\n\n.b-tour--primary .b-tour__btn--prev:hover {\n background: rgba(255, 255, 255, 0.25);\n}\n\n.b-tour--primary .b-tour__btn--next {\n background: #fff;\n color: oklch(55% 0.169 237.323);\n}\n\n.b-tour--primary .b-tour__btn--next:hover {\n background: var(--b-tour-primary-next-btn-hover-bg);\n}\n\n/* ─────────────────────────────────────────────\n Transition\n ───────────────────────────────────────────── */\n.b-tour-fade-enter-active,\n.b-tour-fade-leave-active {\n transition: opacity var(--b-tour-transition-duration) ease;\n}\n\n.b-tour-fade-enter-from,\n.b-tour-fade-leave-to {\n opacity: 0;\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n .b-tour-fade-enter-active,\n .b-tour-fade-leave-active {\n transition-duration: 0ms;\n }\n\n .b-tour__indicator,\n .b-tour__btn,\n .b-tour__close {\n transition-duration: 0ms;\n }\n}\n</style>\n"],"mappings":""}
|