@skdx/vue 0.27.0 → 0.29.0

package/dist/tour/Tour.vue.d.cts

@@ -1,103 +1,80 @@
-import { type TourStep } from './context.cjs';
+import { type TourStep, type TourStepChange } from './context.cjs';
 /**
- * The Vue implementation of the shared Tour contract (see `@skdx/shared`'s
- * `tourContract`). Root of a stepped product tour: owns the running state,
- * the active step index, the step list, target resolution and the spotlight
- * geometry, and hands them down to `SkdxTourTrigger` / `SkdxTourPortal` /
- * `SkdxTourBackdrop` / `SkdxTourSpotlight` / `SkdxTourContent` and the
- * navigation triggers via context. Renders no DOM element itself.
- *
- * Steps are **data**: each declares the element it points at (a selector, an
- * element, or a template ref), optionally a `placement`, a `title` for the
- * announcement, and a `type`. A step with no target renders centred, which is
- * how a tour usually opens and closes.
- *
- * A target that has not mounted yet is polled for up to `targetTimeout`; on
- * timeout `step-target-missing` fires and the tour skips forward rather than
- * showing a popup anchored to nothing. A target that is found is scrolled
- * into view before it is measured.
- *
- * Works controlled (`v-model:open` / `v-model:step`) or uncontrolled
- * (`default-open` / `default-step`) — the two axes are independent.
- *
- * Everything that touches the DOM (resolving a target, measuring it,
- * announcing a step) is deferred to `onMounted` or a watcher, so the root
- * server-renders without a DOM.
- *
+ * Stepped product tour root that owns running state, the active step, and target resolution.
  * @example
  * ```vue
  * <SkdxTour :steps="steps" @complete="markSeen">
  *   <SkdxTourTrigger>Take the tour</SkdxTourTrigger>
- *   <SkdxTourPortal>
- *     <SkdxTourBackdrop />
- *     <SkdxTourSpotlight />
- *     <SkdxTourContent>
- *       <SkdxTourTitle>Your inbox</SkdxTourTitle>
- *       <SkdxTourDescription>Everything lands here first.</SkdxTourDescription>
- *       <SkdxTourProgressText />
- *       <SkdxTourPrevTrigger>Back</SkdxTourPrevTrigger>
- *       <SkdxTourNextTrigger>Next</SkdxTourNextTrigger>
- *       <SkdxTourSkipTrigger>Skip</SkdxTourSkipTrigger>
- *     </SkdxTourContent>
- *   </SkdxTourPortal>
  * </SkdxTour>
  * ```
  */
 type __VLS_Props = {
-    /**
-     * The ordered steps. Required: a tour with no steps has nothing to show,
-     * and the array's length is what "Step 2 of 5" counts against.
-     */
+    /** Ordered steps; its length counts against "Step 2 of 5". */
     steps: TourStep[];
-    /**
-     * Whether the tour is running, for controlled usage via `v-model:open`.
-     * @default undefined — uncontrolled, the tour tracks its own running state.
+    /** Whether tour is running; controlled usage via `v-model:open`.
+     * @default undefined
      */
-    open?: boolean;
-    /**
-     * Whether the tour is running on mount, for uncontrolled usage.
-     * @default false — the tour waits for a trigger, so a first-visit tour is started deliberately rather than on every render.
+    open?: boolean | undefined;
+    /** Whether tour runs on mount for uncontrolled usage.
+     * @default false
      */
     defaultOpen?: boolean;
-    /**
-     * Index of the active step, for controlled usage via `v-model:step`.
-     * @default undefined — uncontrolled, the tour tracks the index itself.
+    /** Active step index; controlled usage via `v-model:step`.
+     * @default undefined
      */
-    step?: number;
-    /**
-     * Index the tour starts on, for uncontrolled usage.
-     * @default 0 — useful to raise when resuming a tour the user abandoned.
+    step?: number | undefined;
+    /** Starting step index for uncontrolled usage.
+     * @default 0
      */
     defaultStep?: number;
-    /**
-     * Whether pressing Escape ends the tour the same way skipping does.
-     * @default true — Escape must always get a user out of a modal layer; set `false` only when the tour genuinely cannot be abandoned, and then provide another way out.
+    /** Escape ends tour like skipping does.
+     * @default true
      */
     closeOnEscape?: boolean;
-    /**
-     * Whether a pointer-down outside the content skips the tour.
-     * @default false — during a tour an outside click is almost always a misclick on the very UI being explained, and losing the tour to it is worse than ignoring it.
+    /** Page behind tour is unreachable; aria-modal and inert applied.
+     * @default false
+     */
+    preventInteraction?: boolean;
+    /** Whether a pointer-down outside the content skips the tour.
+     * @default false
      */
     closeOnInteractOutside?: boolean;
-    /**
-     * Pixels of breathing room added around the target on every side when the
-     * spotlight geometry is published.
-     * @default 8 — the cutout clears the target's own focus ring instead of clipping it.
+    /** Spotlight padding around target on all sides.
+     * @default 8
      */
     spotlightPadding?: number;
-    /**
-     * How long, in milliseconds, to keep polling for a step's target before
-     * giving up on it. Covers targets that mount late — a lazy route, a panel
-     * that opens on the previous step's action.
-     * @default 2000 — long enough for a lazy chunk to land, short enough that a genuinely absent target does not strand the tour.
+    /** Spotlight corner radius; published as `--skdx-tour-radius`.
+     * @default 0
+     */
+    spotlightRadius?: number;
+    /** Scroll target into view before positioning panel.
+     * @default { block: 'center', inline: 'center' }
+     */
+    scrollIntoView?: boolean | ScrollIntoViewOptions | undefined;
+    /** Milliseconds to poll for missing step target.
+     * @default 2000
      */
     targetTimeout?: number;
-    /**
-     * Builds the string announced to screen readers on every step change.
-     * Override it to translate, or to include more of the step than its title.
-     * @default undefined — announces the step's `title` (when set) followed by "Step {n} of {total}", in English.
+    /** Arrow keys step forward/back while content focused.
+     * @default false
+     */
+    keyboardNavigation?: boolean;
+    /** Builds the string announced to screen readers on every step change.
+     * @default undefined
+     */
+    getAnnouncement?: ((step: TourStep, index: number, total: number) => string) | undefined;
+    /** Whether the derived anatomy includes a spotlight cutout.
+     * @default true
+     */
+    spotlight?: boolean;
+    /** Derive `SkdxTourProgressText` ("Step 2 of 5").
+     * @default true
+     */
+    showProgress?: boolean;
+    /** Whether the derived anatomy includes a skip trigger part.
+     * @default true
      */
-    getAnnouncement?: (step: TourStep, index: number, total: number) => string;
+    showSkip?: boolean;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -106,29 +83,42 @@ type __VLS_Slots = {} & {
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (open: boolean) => any;
     "open-change": (open: boolean) => any;
+    "open-change-complete": (open: boolean) => any;
     complete: () => any;
     "update:step": (step: number) => any;
-    "step-change": (step: number) => any;
+    "step-change": (change: TourStepChange) => any;
     skip: () => any;
-    "step-target-missing": (index: number, step: TourStep) => any;
+    "step-target-missing": (detail: {
+        index: number;
+        step: TourStep;
+    }) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:open"?: ((open: boolean) => any) | undefined;
-    "onOpen-change"?: ((open: boolean) => any) | undefined;
-    onComplete?: (() => any) | undefined;
-    "onUpdate:step"?: ((step: number) => any) | undefined;
-    "onStep-change"?: ((step: number) => any) | undefined;
-    onSkip?: (() => any) | undefined;
-    "onStep-target-missing"?: ((index: number, step: TourStep) => any) | undefined;
+    "onUpdate:open"?: (open: boolean) => any;
+    "onOpen-change"?: (open: boolean) => any;
+    "onOpen-change-complete"?: (open: boolean) => any;
+    onComplete?: () => any;
+    "onUpdate:step"?: (step: number) => any;
+    "onStep-change"?: (change: TourStepChange) => any;
+    onSkip?: () => any;
+    "onStep-target-missing"?: (detail: {
+        index: number;
+        step: TourStep;
+    }) => any;
 }>, {
-    open: boolean;
+    open: boolean | undefined;
     defaultOpen: boolean;
-    step: number;
+    scrollIntoView: boolean | ScrollIntoViewOptions | undefined;
+    spotlight: boolean;
+    showProgress: boolean;
+    showSkip: boolean;
     defaultStep: number;
     closeOnEscape: boolean;
+    preventInteraction: boolean;
     closeOnInteractOutside: boolean;
     spotlightPadding: number;
+    spotlightRadius: number;
     targetTimeout: number;
-    getAnnouncement: (step: TourStep, index: number, total: number) => string;
+    keyboardNavigation: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/tour/Tour.vue.d.ts

@@ -1,103 +1,80 @@
-import { type TourStep } from './context.js';
+import { type TourStep, type TourStepChange } from './context.js';
 /**
- * The Vue implementation of the shared Tour contract (see `@skdx/shared`'s
- * `tourContract`). Root of a stepped product tour: owns the running state,
- * the active step index, the step list, target resolution and the spotlight
- * geometry, and hands them down to `SkdxTourTrigger` / `SkdxTourPortal` /
- * `SkdxTourBackdrop` / `SkdxTourSpotlight` / `SkdxTourContent` and the
- * navigation triggers via context. Renders no DOM element itself.
- *
- * Steps are **data**: each declares the element it points at (a selector, an
- * element, or a template ref), optionally a `placement`, a `title` for the
- * announcement, and a `type`. A step with no target renders centred, which is
- * how a tour usually opens and closes.
- *
- * A target that has not mounted yet is polled for up to `targetTimeout`; on
- * timeout `step-target-missing` fires and the tour skips forward rather than
- * showing a popup anchored to nothing. A target that is found is scrolled
- * into view before it is measured.
- *
- * Works controlled (`v-model:open` / `v-model:step`) or uncontrolled
- * (`default-open` / `default-step`) — the two axes are independent.
- *
- * Everything that touches the DOM (resolving a target, measuring it,
- * announcing a step) is deferred to `onMounted` or a watcher, so the root
- * server-renders without a DOM.
- *
+ * Stepped product tour root that owns running state, the active step, and target resolution.
  * @example
  * ```vue
  * <SkdxTour :steps="steps" @complete="markSeen">
  *   <SkdxTourTrigger>Take the tour</SkdxTourTrigger>
- *   <SkdxTourPortal>
- *     <SkdxTourBackdrop />
- *     <SkdxTourSpotlight />
- *     <SkdxTourContent>
- *       <SkdxTourTitle>Your inbox</SkdxTourTitle>
- *       <SkdxTourDescription>Everything lands here first.</SkdxTourDescription>
- *       <SkdxTourProgressText />
- *       <SkdxTourPrevTrigger>Back</SkdxTourPrevTrigger>
- *       <SkdxTourNextTrigger>Next</SkdxTourNextTrigger>
- *       <SkdxTourSkipTrigger>Skip</SkdxTourSkipTrigger>
- *     </SkdxTourContent>
- *   </SkdxTourPortal>
  * </SkdxTour>
  * ```
  */
 type __VLS_Props = {
-    /**
-     * The ordered steps. Required: a tour with no steps has nothing to show,
-     * and the array's length is what "Step 2 of 5" counts against.
-     */
+    /** Ordered steps; its length counts against "Step 2 of 5". */
     steps: TourStep[];
-    /**
-     * Whether the tour is running, for controlled usage via `v-model:open`.
-     * @default undefined — uncontrolled, the tour tracks its own running state.
+    /** Whether tour is running; controlled usage via `v-model:open`.
+     * @default undefined
      */
-    open?: boolean;
-    /**
-     * Whether the tour is running on mount, for uncontrolled usage.
-     * @default false — the tour waits for a trigger, so a first-visit tour is started deliberately rather than on every render.
+    open?: boolean | undefined;
+    /** Whether tour runs on mount for uncontrolled usage.
+     * @default false
      */
     defaultOpen?: boolean;
-    /**
-     * Index of the active step, for controlled usage via `v-model:step`.
-     * @default undefined — uncontrolled, the tour tracks the index itself.
+    /** Active step index; controlled usage via `v-model:step`.
+     * @default undefined
      */
-    step?: number;
-    /**
-     * Index the tour starts on, for uncontrolled usage.
-     * @default 0 — useful to raise when resuming a tour the user abandoned.
+    step?: number | undefined;
+    /** Starting step index for uncontrolled usage.
+     * @default 0
      */
     defaultStep?: number;
-    /**
-     * Whether pressing Escape ends the tour the same way skipping does.
-     * @default true — Escape must always get a user out of a modal layer; set `false` only when the tour genuinely cannot be abandoned, and then provide another way out.
+    /** Escape ends tour like skipping does.
+     * @default true
      */
     closeOnEscape?: boolean;
-    /**
-     * Whether a pointer-down outside the content skips the tour.
-     * @default false — during a tour an outside click is almost always a misclick on the very UI being explained, and losing the tour to it is worse than ignoring it.
+    /** Page behind tour is unreachable; aria-modal and inert applied.
+     * @default false
+     */
+    preventInteraction?: boolean;
+    /** Whether a pointer-down outside the content skips the tour.
+     * @default false
      */
     closeOnInteractOutside?: boolean;
-    /**
-     * Pixels of breathing room added around the target on every side when the
-     * spotlight geometry is published.
-     * @default 8 — the cutout clears the target's own focus ring instead of clipping it.
+    /** Spotlight padding around target on all sides.
+     * @default 8
      */
     spotlightPadding?: number;
-    /**
-     * How long, in milliseconds, to keep polling for a step's target before
-     * giving up on it. Covers targets that mount late — a lazy route, a panel
-     * that opens on the previous step's action.
-     * @default 2000 — long enough for a lazy chunk to land, short enough that a genuinely absent target does not strand the tour.
+    /** Spotlight corner radius; published as `--skdx-tour-radius`.
+     * @default 0
+     */
+    spotlightRadius?: number;
+    /** Scroll target into view before positioning panel.
+     * @default { block: 'center', inline: 'center' }
+     */
+    scrollIntoView?: boolean | ScrollIntoViewOptions | undefined;
+    /** Milliseconds to poll for missing step target.
+     * @default 2000
      */
     targetTimeout?: number;
-    /**
-     * Builds the string announced to screen readers on every step change.
-     * Override it to translate, or to include more of the step than its title.
-     * @default undefined — announces the step's `title` (when set) followed by "Step {n} of {total}", in English.
+    /** Arrow keys step forward/back while content focused.
+     * @default false
+     */
+    keyboardNavigation?: boolean;
+    /** Builds the string announced to screen readers on every step change.
+     * @default undefined
+     */
+    getAnnouncement?: ((step: TourStep, index: number, total: number) => string) | undefined;
+    /** Whether the derived anatomy includes a spotlight cutout.
+     * @default true
+     */
+    spotlight?: boolean;
+    /** Derive `SkdxTourProgressText` ("Step 2 of 5").
+     * @default true
+     */
+    showProgress?: boolean;
+    /** Whether the derived anatomy includes a skip trigger part.
+     * @default true
      */
-    getAnnouncement?: (step: TourStep, index: number, total: number) => string;
+    showSkip?: boolean;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -106,29 +83,42 @@ type __VLS_Slots = {} & {
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (open: boolean) => any;
     "open-change": (open: boolean) => any;
+    "open-change-complete": (open: boolean) => any;
     complete: () => any;
     "update:step": (step: number) => any;
-    "step-change": (step: number) => any;
+    "step-change": (change: TourStepChange) => any;
     skip: () => any;
-    "step-target-missing": (index: number, step: TourStep) => any;
+    "step-target-missing": (detail: {
+        index: number;
+        step: TourStep;
+    }) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:open"?: ((open: boolean) => any) | undefined;
-    "onOpen-change"?: ((open: boolean) => any) | undefined;
-    onComplete?: (() => any) | undefined;
-    "onUpdate:step"?: ((step: number) => any) | undefined;
-    "onStep-change"?: ((step: number) => any) | undefined;
-    onSkip?: (() => any) | undefined;
-    "onStep-target-missing"?: ((index: number, step: TourStep) => any) | undefined;
+    "onUpdate:open"?: (open: boolean) => any;
+    "onOpen-change"?: (open: boolean) => any;
+    "onOpen-change-complete"?: (open: boolean) => any;
+    onComplete?: () => any;
+    "onUpdate:step"?: (step: number) => any;
+    "onStep-change"?: (change: TourStepChange) => any;
+    onSkip?: () => any;
+    "onStep-target-missing"?: (detail: {
+        index: number;
+        step: TourStep;
+    }) => any;
 }>, {
-    open: boolean;
+    open: boolean | undefined;
     defaultOpen: boolean;
-    step: number;
+    scrollIntoView: boolean | ScrollIntoViewOptions | undefined;
+    spotlight: boolean;
+    showProgress: boolean;
+    showSkip: boolean;
     defaultStep: number;
     closeOnEscape: boolean;
+    preventInteraction: boolean;
     closeOnInteractOutside: boolean;
     spotlightPadding: number;
+    spotlightRadius: number;
     targetTimeout: number;
-    getAnnouncement: (step: TourStep, index: number, total: number) => string;
+    keyboardNavigation: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/tour/Tour.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const T=require("../utils/id.cjs"),D=require("../utils/popper.cjs"),d=require("../utils/clamp.cjs"),H=require("../utils/liveAnnouncer.cjs"),U=require("./context.cjs");let t=require("vue");var V=50,W=(0,t.defineComponent)({__name:"Tour",props:{steps:{},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},step:{default:void 0},defaultStep:{default:0},closeOnEscape:{type:Boolean,default:!0},closeOnInteractOutside:{type:Boolean,default:!1},spotlightPadding:{default:8},targetTimeout:{default:2e3},getAnnouncement:{type:Function,default:void 0}},emits:["update:open","open-change","update:step","step-change","complete","skip","step-target-missing"],setup(B,{emit:L}){const n=B,s=L,$=(0,t.ref)(null),i=(0,t.ref)(null),v=(0,t.ref)(null),g=(0,t.ref)(null),y=(0,t.ref)(n.defaultOpen),a=(0,t.computed)(()=>n.open??y.value),I=(0,t.ref)(n.defaultStep),o=(0,t.computed)(()=>n.step??I.value),R=(0,t.computed)(()=>n.steps),m=(0,t.computed)(()=>n.steps.length),h=(0,t.computed)(()=>n.steps[o.value]),q=(0,t.computed)(()=>i.value!==null&&h.value?.type!=="dialog");function w(e){e!==a.value&&(n.open===void 0&&(y.value=e),s("update:open",e),s("open-change",e))}function C(e){e!==o.value&&(n.step===void 0&&(I.value=e),s("update:step",e),s("step-change",e))}function _(e){C(d.clamp(e,0,Math.max(m.value-1,0)))}function x(){w(!1),s("complete")}function M(){w(!1),s("skip")}function E(){o.value>=m.value-1?x():_(o.value+1)}function N(){_(o.value-1)}function S(e){return e?typeof e=="string"?document.querySelector(e):(0,t.isRef)(e)?e.value:e:null}const P=(0,t.computed)(()=>h.value?.target);let O;function f(){clearInterval(O),O=void 0}function k(){if(f(),!a.value)return;const e=P.value;if(!e){i.value=null;return}const l=p=>{p.scrollIntoView?.({block:"center",inline:"center"}),i.value=p},r=S(e);if(r){l(r);return}i.value=null;const u=Date.now(),c=o.value;O=setInterval(()=>{const p=S(e);if(p){f(),l(p);return}Date.now()-u<n.targetTimeout||(f(),s("step-target-missing",c,n.steps[c]),E())},V)}(0,t.watch)([a,o,P,()=>n.targetTimeout],k,{flush:"post"}),(0,t.onMounted)(k),(0,t.onBeforeUnmount)(f),(0,t.watch)(i,(e,l,r)=>{if(!e){v.value=null;return}const u=()=>{v.value=e.getBoundingClientRect()};u(),window.addEventListener("scroll",u,!0),window.addEventListener("resize",u),r(()=>{window.removeEventListener("scroll",u,!0),window.removeEventListener("resize",u)})},{flush:"post"});function b(e,l,r){return[e.title,`Step ${l+1} of ${r}`].filter(Boolean).join(", ")}function A(){if(!a.value)return;const e=n.steps[o.value];e&&H.announce((n.getAnnouncement??b)(e,o.value,n.steps.length))}(0,t.watch)([a,o],A,{flush:"post"}),(0,t.onMounted)(A);const z=(0,t.computed)(()=>{const e=v.value;if(!e)return{};const l=window.innerWidth,r=window.innerHeight,u=d.clamp(e.left-n.spotlightPadding,0,l),c=d.clamp(e.top-n.spotlightPadding,0,r);return{"--skdx-tour-x":`${u}px`,"--skdx-tour-y":`${c}px`,"--skdx-tour-width":`${d.clamp(e.width+n.spotlightPadding*2,0,l-u)}px`,"--skdx-tour-height":`${d.clamp(e.height+n.spotlightPadding*2,0,r-c)}px`}});return(0,t.watchEffect)(()=>{g.value=q.value?i.value:null}),(0,t.provide)(D.POPPER_CONTEXT,{anchor:g,setAnchor:e=>{g.value=e}}),(0,t.provide)(U.TOUR_CONTEXT,{steps:R,step:o,total:m,activeStep:h,open:a,anchored:q,target:i,spotlightStyle:z,contentRef:$,contentId:T.nextId("tour-content"),titleId:T.nextId("tour-title"),descriptionId:T.nextId("tour-description"),closeOnEscape:(0,t.computed)(()=>n.closeOnEscape),closeOnInteractOutside:(0,t.computed)(()=>n.closeOnInteractOutside),setOpen:w,goTo:_,next:E,prev:N,skip:M,complete:x}),(e,l)=>(0,t.renderSlot)(e.$slots,"default")}});exports.default=W;
+const I=require("../utils/id.cjs"),j=require("../utils/liveAnnouncer.cjs"),G=require("../utils/useOpenChangeComplete.cjs"),J=require("../utils/popper.cjs"),d=require("../utils/clamp.cjs"),K=require("./context.cjs"),Q=require("./TourAnatomy.vue.cjs");let t=require("vue");var Y=50,Z=(0,t.defineComponent)({__name:"Tour",props:{steps:{},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},step:{},defaultStep:{default:0},closeOnEscape:{type:Boolean,default:!0},preventInteraction:{type:Boolean,default:!1},closeOnInteractOutside:{type:Boolean,default:!1},spotlightPadding:{default:8},spotlightRadius:{default:0},scrollIntoView:{type:Boolean,default:void 0},targetTimeout:{default:2e3},keyboardNavigation:{type:Boolean,default:!1},getAnnouncement:{},spotlight:{type:Boolean,default:!0},showProgress:{type:Boolean,default:!0},showSkip:{type:Boolean,default:!0}},emits:["update:open","open-change","open-change-complete","update:step","step-change","complete","skip","step-target-missing"],setup(f,{emit:$}){const n=f;function L(e,o){if(o===!1)return;const r=o===!0||o===void 0?{block:"center",inline:"center"}:o,a=window.matchMedia?.("(prefers-reduced-motion: reduce)").matches??!1;e.scrollIntoView?.(a?{...r,behavior:"auto"}:r)}const l=$,k=(0,t.ref)(null),N=I.nextId("tour-title"),V=I.nextId("tour-description"),q=(0,t.ref)(!1),_=(0,t.ref)(!1),c=(0,t.ref)(null),w=(0,t.ref)(null),y=(0,t.ref)(null),S=(0,t.ref)(n.defaultOpen),p=(0,t.computed)(()=>n.open??S.value);G.useOpenChangeComplete(p,k,e=>l("open-change-complete",e));const x=(0,t.ref)(n.defaultStep),u=(0,t.computed)(()=>n.step??x.value),D=(0,t.computed)(()=>n.steps),v=(0,t.computed)(()=>n.steps.length),g=(0,t.computed)(()=>n.steps[u.value]),B=(0,t.computed)(()=>c.value!==null&&g.value?.type!=="dialog"),M=(0,t.computed)(()=>g.value?.backdrop!==!1);function O(e){e!==p.value&&(n.open===void 0&&(S.value=e),l("update:open",e),l("open-change",e))}function H(e){e!==u.value&&(n.step===void 0&&(x.value=e),l("update:step",e),l("step-change",{index:e,id:n.steps[e]?.id}))}function h(e){H(d.clamp(e,0,Math.max(v.value-1,0)))}function E(){O(!1),l("complete")}function P(){O(!1),l("skip")}function F(){u.value>=v.value-1?E():h(u.value+1)}function z(){u.value>=v.value-1?P():h(u.value+1)}function U(){h(u.value-1)}function A(e){return e?typeof e=="string"?document.querySelector(e):(0,t.isRef)(e)?e.value:e:null}const b=(0,t.computed)(()=>g.value?.target);let T;function m(){clearInterval(T),T=void 0}function C(){if(m(),!p.value)return;const e=b.value;if(!e){c.value=null;return}const o=i=>{L(i,n.scrollIntoView),c.value=i},r=A(e);if(r){o(r);return}c.value=null;const a=Date.now(),s=u.value;T=setInterval(()=>{const i=A(e);if(i){m(),o(i);return}Date.now()-a<n.targetTimeout||(m(),l("step-target-missing",{index:s,step:n.steps[s]}),z())},Y)}(0,t.watch)([p,u,b,()=>n.targetTimeout],C,{flush:"post"}),(0,t.onMounted)(C),(0,t.onBeforeUnmount)(m),(0,t.watch)(c,(e,o,r)=>{if(!e){w.value=null;return}const a=()=>{w.value=e.getBoundingClientRect()};a();let s=0;const i=()=>{cancelAnimationFrame(s),s=requestAnimationFrame(a)};window.addEventListener("scroll",i,{passive:!0,capture:!0}),window.addEventListener("resize",a),r(()=>{cancelAnimationFrame(s),window.removeEventListener("scroll",i,{capture:!0}),window.removeEventListener("resize",a)})},{flush:"post"});function W(e,o,r){return[e.title,`Step ${o+1} of ${r}`].filter(Boolean).join(", ")}function R(){if(!p.value)return;const e=n.steps[u.value];e&&j.announce((n.getAnnouncement??W)(e,u.value,n.steps.length))}(0,t.watch)([p,u],R,{flush:"post"}),(0,t.onMounted)(R);const X=(0,t.computed)(()=>{const e=w.value;if(!e)return{};const o=window.innerWidth,r=window.innerHeight,a=d.clamp(e.left-n.spotlightPadding,0,o),s=d.clamp(e.top-n.spotlightPadding,0,r);return{"--skdx-tour-x":`${a}px`,"--skdx-tour-y":`${s}px`,"--skdx-tour-width":`${d.clamp(e.width+n.spotlightPadding*2,0,o-a)}px`,"--skdx-tour-height":`${d.clamp(e.height+n.spotlightPadding*2,0,r-s)}px`,"--skdx-tour-radius":`${n.spotlightRadius}px`}});return(0,t.watchEffect)(()=>{y.value=B.value?c.value:null}),(0,t.provide)(J.POPPER_CONTEXT,{anchor:y,setAnchor:e=>{y.value=e}}),(0,t.provide)(K.TOUR_CONTEXT,{steps:D,step:u,total:v,activeStep:g,open:p,anchored:B,hasBackdrop:M,target:c,spotlightStyle:X,contentRef:k,contentId:I.nextId("tour-content"),titleId:N,descriptionId:V,hasTitle:(0,t.computed)(()=>q.value),setHasTitle:e=>{q.value=e},hasDescription:(0,t.computed)(()=>_.value),setHasDescription:e=>{_.value=e},closeOnEscape:(0,t.computed)(()=>n.closeOnEscape),preventInteraction:(0,t.computed)(()=>n.preventInteraction),closeOnInteractOutside:(0,t.computed)(()=>n.closeOnInteractOutside),keyboardNavigation:(0,t.computed)(()=>n.keyboardNavigation),setOpen:O,goTo:h,next:F,prev:U,skip:P,complete:E}),(e,o)=>(0,t.renderSlot)(e.$slots,"default",{},()=>[(0,t.createVNode)(Q.default,{spotlight:f.spotlight,"show-progress":f.showProgress,"show-skip":f.showSkip},null,8,["spotlight","show-progress","show-skip"])])}});exports.default=Z;

package/dist/tour/Tour.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{nextId as e}from"../utils/id.js";import{POPPER_CONTEXT as t}from"../utils/popper.js";import{clamp as n}from"../utils/clamp.js";import{announce as o}from"../utils/liveAnnouncer.js";import{TOUR_CONTEXT as l}from"./context.js";import{computed as s,defineComponent as u,isRef as a,onBeforeUnmount as i,onMounted as r,provide as p,ref as d,renderSlot as c,watch as v,watchEffect as f}from"vue";var g=/* @__PURE__ */u({__name:"Tour",props:{steps:{},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},step:{default:void 0},defaultStep:{default:0},closeOnEscape:{type:Boolean,default:!0},closeOnInteractOutside:{type:Boolean,default:!1},spotlightPadding:{default:8},targetTimeout:{default:2e3},getAnnouncement:{type:Function,default:void 0}},emits:["update:open","open-change","update:step","step-change","complete","skip","step-target-missing"],setup(u,{emit:g}){const m=u,h=g,w=d(null),O=d(null),x=d(null),E=d(null),y=d(m.defaultOpen),I=s(()=>m.open??y.value),T=d(m.defaultStep),k=s(()=>m.step??T.value),P=s(()=>m.steps),B=s(()=>m.steps.length),S=s(()=>m.steps[k.value]),$=s(()=>null!==O.value&&"dialog"!==S.value?.type);function j(e){e!==I.value&&(void 0===m.open&&(y.value=e),h("update:open",e),h("open-change",e))}function R(e){!function(e){e!==k.value&&(void 0===m.step&&(T.value=e),h("update:step",e),h("step-change",e))}(n(e,0,Math.max(B.value-1,0)))}function A(){j(!1),h("complete")}function C(){k.value>=B.value-1?A():R(k.value+1)}function L(e){return e?"string"==typeof e?document.querySelector(e):a(e)?e.value:e:null}const _=s(()=>S.value?.target);let z;function D(){clearInterval(z),z=void 0}function M(){if(D(),!I.value)return;const e=_.value;if(!e)return void(O.value=null);const t=e=>{e.scrollIntoView?.({block:"center",inline:"center"}),O.value=e},n=L(e);if(n)return void t(n);O.value=null;const o=Date.now(),l=k.value;z=setInterval(()=>{const n=L(e);if(n)return D(),void t(n);Date.now()-o<m.targetTimeout||(D(),h("step-target-missing",l,m.steps[l]),C())},50)}function N(e,t,n){return[e.title,`Step ${t+1} of ${n}`].filter(Boolean).join(", ")}function U(){if(!I.value)return;const e=m.steps[k.value];e&&o((m.getAnnouncement??N)(e,k.value,m.steps.length))}v([I,k,_,()=>m.targetTimeout],M,{flush:"post"}),r(M),i(D),v(O,(e,t,n)=>{if(!e)return void(x.value=null);const o=()=>{x.value=e.getBoundingClientRect()};o(),window.addEventListener("scroll",o,!0),window.addEventListener("resize",o),n(()=>{window.removeEventListener("scroll",o,!0),window.removeEventListener("resize",o)})},{flush:"post"}),v([I,k],U,{flush:"post"}),r(U);const X=s(()=>{const e=x.value;if(!e)return{};const t=window.innerWidth,o=window.innerHeight,l=n(e.left-m.spotlightPadding,0,t),s=n(e.top-m.spotlightPadding,0,o);return{"--skdx-tour-x":`${l}px`,"--skdx-tour-y":`${s}px`,"--skdx-tour-width":`${n(e.width+2*m.spotlightPadding,0,t-l)}px`,"--skdx-tour-height":`${n(e.height+2*m.spotlightPadding,0,o-s)}px`}});return f(()=>{E.value=$.value?O.value:null}),p(t,{anchor:E,setAnchor:e=>{E.value=e}}),p(l,{steps:P,step:k,total:B,activeStep:S,open:I,anchored:$,target:O,spotlightStyle:X,contentRef:w,contentId:e("tour-content"),titleId:e("tour-title"),descriptionId:e("tour-description"),closeOnEscape:s(()=>m.closeOnEscape),closeOnInteractOutside:s(()=>m.closeOnInteractOutside),setOpen:j,goTo:R,next:C,prev:function(){R(k.value-1)},skip:function(){j(!1),h("skip")},complete:A}),(e,t)=>c(e.$slots,"default")}});export{g as default};
+import{nextId as e}from"../utils/id.js";import{announce as t}from"../utils/liveAnnouncer.js";import{useOpenChangeComplete as o}from"../utils/useOpenChangeComplete.js";import{POPPER_CONTEXT as n}from"../utils/popper.js";import{clamp as a}from"../utils/clamp.js";import{TOUR_CONTEXT as s}from"./context.js";import l from"./TourAnatomy.vue.js";import{computed as i,createVNode as u,defineComponent as r,isRef as p,onBeforeUnmount as c,onMounted as d,provide as v,ref as f,renderSlot as g,watch as h,watchEffect as m}from"vue";var w=/* @__PURE__ */r({__name:"Tour",props:{steps:{},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},step:{},defaultStep:{default:0},closeOnEscape:{type:Boolean,default:!0},preventInteraction:{type:Boolean,default:!1},closeOnInteractOutside:{type:Boolean,default:!1},spotlightPadding:{default:8},spotlightRadius:{default:0},scrollIntoView:{type:Boolean,default:void 0},targetTimeout:{default:2e3},keyboardNavigation:{type:Boolean,default:!1},getAnnouncement:{},spotlight:{type:Boolean,default:!0},showProgress:{type:Boolean,default:!0},showSkip:{type:Boolean,default:!0}},emits:["update:open","open-change","open-change-complete","update:step","step-change","complete","skip","step-target-missing"],setup(r,{emit:w}){const y=r,k=w,x=f(null),O=e("tour-title"),I=e("tour-description"),B=f(!1),T=f(!1),E=f(null),P=f(null),S=f(null),j=f(y.defaultOpen),A=i(()=>y.open??j.value);o(A,x,e=>k("open-change-complete",e));const C=f(y.defaultStep),$=i(()=>y.step??C.value),R=i(()=>y.steps),b=i(()=>y.steps.length),N=i(()=>y.steps[$.value]),D=i(()=>null!==E.value&&"dialog"!==N.value?.type),L=i(()=>!1!==N.value?.backdrop);function V(e){e!==A.value&&(void 0===y.open&&(j.value=e),k("update:open",e),k("open-change",e))}function _(e){!function(e){e!==$.value&&(void 0===y.step&&(C.value=e),k("update:step",e),k("step-change",{index:e,id:y.steps[e]?.id}))}(a(e,0,Math.max(b.value-1,0)))}function F(){V(!1),k("complete")}function H(){V(!1),k("skip")}function M(e){return e?"string"==typeof e?document.querySelector(e):p(e)?e.value:e:null}const q=i(()=>N.value?.target);let z;function U(){clearInterval(z),z=void 0}function X(){if(U(),!A.value)return;const e=q.value;if(!e)return void(E.value=null);const t=e=>{(function(e,t){if(!1===t)return;const o=!0===t||void 0===t?{block:"center",inline:"center"}:t,n=window.matchMedia?.("(prefers-reduced-motion: reduce)").matches??!1;e.scrollIntoView?.(n?{...o,behavior:"auto"}:o)})(e,y.scrollIntoView),E.value=e},o=M(e);if(o)return void t(o);E.value=null;const n=Date.now(),a=$.value;z=setInterval(()=>{const o=M(e);if(o)return U(),void t(o);Date.now()-n<y.targetTimeout||(U(),k("step-target-missing",{index:a,step:y.steps[a]}),$.value>=b.value-1?H():_($.value+1))},50)}function W(e,t,o){return[e.title,`Step ${t+1} of ${o}`].filter(Boolean).join(", ")}function G(){if(!A.value)return;const e=y.steps[$.value];e&&t((y.getAnnouncement??W)(e,$.value,y.steps.length))}h([A,$,q,()=>y.targetTimeout],X,{flush:"post"}),d(X),c(U),h(E,(e,t,o)=>{if(!e)return void(P.value=null);const n=()=>{P.value=e.getBoundingClientRect()};n();let a=0;const s=()=>{cancelAnimationFrame(a),a=requestAnimationFrame(n)};window.addEventListener("scroll",s,{passive:!0,capture:!0}),window.addEventListener("resize",n),o(()=>{cancelAnimationFrame(a),window.removeEventListener("scroll",s,{capture:!0}),window.removeEventListener("resize",n)})},{flush:"post"}),h([A,$],G,{flush:"post"}),d(G);const J=i(()=>{const e=P.value;if(!e)return{};const t=window.innerWidth,o=window.innerHeight,n=a(e.left-y.spotlightPadding,0,t),s=a(e.top-y.spotlightPadding,0,o);return{"--skdx-tour-x":`${n}px`,"--skdx-tour-y":`${s}px`,"--skdx-tour-width":`${a(e.width+2*y.spotlightPadding,0,t-n)}px`,"--skdx-tour-height":`${a(e.height+2*y.spotlightPadding,0,o-s)}px`,"--skdx-tour-radius":`${y.spotlightRadius}px`}});return m(()=>{S.value=D.value?E.value:null}),v(n,{anchor:S,setAnchor:e=>{S.value=e}}),v(s,{steps:R,step:$,total:b,activeStep:N,open:A,anchored:D,hasBackdrop:L,target:E,spotlightStyle:J,contentRef:x,contentId:e("tour-content"),titleId:O,descriptionId:I,hasTitle:i(()=>B.value),setHasTitle:e=>{B.value=e},hasDescription:i(()=>T.value),setHasDescription:e=>{T.value=e},closeOnEscape:i(()=>y.closeOnEscape),preventInteraction:i(()=>y.preventInteraction),closeOnInteractOutside:i(()=>y.closeOnInteractOutside),keyboardNavigation:i(()=>y.keyboardNavigation),setOpen:V,goTo:_,next:function(){$.value>=b.value-1?F():_($.value+1)},prev:function(){_($.value-1)},skip:H,complete:F}),(e,t)=>g(e.$slots,"default",{},()=>[u(l,{spotlight:r.spotlight,"show-progress":r.showProgress,"show-skip":r.showSkip},null,8,["spotlight","show-progress","show-skip"])])}});export{w as default};

package/dist/tour/TourActions.vue.cjs

@@ -0,0 +1 @@
+const e=require("./TourActions.vue_vue_type_script_setup_true_lang.cjs");var u=e.default;exports.default=u;

package/dist/tour/TourActions.vue.d.cts

@@ -0,0 +1,14 @@
+/** The row holding tour navigation triggers; purely presentational, with no role or label. */
+type __VLS_Props = {};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/tour/TourActions.vue.d.ts

@@ -0,0 +1,14 @@
+/** The row holding tour navigation triggers; purely presentational, with no role or label. */
+type __VLS_Props = {};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/tour/TourActions.vue.js

@@ -0,0 +1 @@
+import t from"./TourActions.vue_vue_type_script_setup_true_lang.js";var e=t;export{e as default};

package/dist/tour/TourActions.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+let e=require("vue");var r={class:"skdx-tour__actions","data-part":"actions"},_=(0,e.defineComponent)({__name:"TourActions",setup(o){return(t,a)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",r,[(0,e.renderSlot)(t.$slots,"default")]))}});exports.default=_;

package/dist/tour/TourActions.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{createElementBlock as a,defineComponent as e,openBlock as t,renderSlot as o}from"vue";var s={class:"skdx-tour__actions","data-part":"actions"},n=/* @__PURE__ */e({__name:"TourActions",setup:e=>(e,n)=>(t(),a("div",s,[o(e.$slots,"default")]))});export{n as default};

package/dist/tour/TourAnatomy.vue.cjs

@@ -0,0 +1 @@
+const e=require("./TourAnatomy.vue_vue_type_script_setup_true_lang.cjs");var u=e.default;exports.default=u;

package/dist/tour/TourAnatomy.vue.d.cts

@@ -0,0 +1,15 @@
+/**
+ * Default anatomy for `SkdxTour`: portal, backdrop, spotlight, and content with its actions.
+ * @internal
+ */
+type __VLS_Props = {
+    spotlight?: boolean | undefined;
+    showProgress?: boolean | undefined;
+    showSkip?: boolean | undefined;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    spotlight: boolean | undefined;
+    showProgress: boolean | undefined;
+    showSkip: boolean | undefined;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/tour/TourAnatomy.vue.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Default anatomy for `SkdxTour`: portal, backdrop, spotlight, and content with its actions.
+ * @internal
+ */
+type __VLS_Props = {
+    spotlight?: boolean | undefined;
+    showProgress?: boolean | undefined;
+    showSkip?: boolean | undefined;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    spotlight: boolean | undefined;
+    showProgress: boolean | undefined;
+    showSkip: boolean | undefined;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/tour/TourAnatomy.vue.js

@@ -0,0 +1 @@
+import t from"./TourAnatomy.vue_vue_type_script_setup_true_lang.js";var e=t;export{e as default};

package/dist/tour/TourAnatomy.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const i=require("../utils/Glyph.vue.cjs"),a=require("../utils/injectRequired.cjs"),l=require("./context.cjs"),n=require("./TourActions.vue.cjs"),c=require("./TourBackdrop.vue.cjs"),d=require("./TourCloseTrigger.vue.cjs"),s=require("./TourContent.vue.cjs"),p=require("./TourDescription.vue.cjs"),q=require("./TourNextTrigger.vue.cjs"),f=require("./TourPortal.vue.cjs"),T=require("./TourPrevTrigger.vue.cjs"),_=require("./TourProgressText.vue.cjs"),k=require("./TourSkipTrigger.vue.cjs"),x=require("./TourSpotlight.vue.cjs"),N=require("./TourTitle.vue.cjs");let e=require("vue");var C=(0,e.defineComponent)({__name:"TourAnatomy",props:{spotlight:{type:Boolean,default:!0},showProgress:{type:Boolean,default:!0},showSkip:{type:Boolean,default:!0}},setup(o){const t=a.injectRequired(l.TOUR_CONTEXT,"TourAnatomy must be used within SkdxTour."),u=(0,e.computed)(()=>t.step.value>=t.total.value-1);return(g,r)=>((0,e.openBlock)(),(0,e.createBlock)(f.default,null,{default:(0,e.withCtx)(()=>[(0,e.createVNode)(c.default),o.spotlight?((0,e.openBlock)(),(0,e.createBlock)(x.default,{key:0})):(0,e.createCommentVNode)("",!0),(0,e.createVNode)(s.default,null,{default:(0,e.withCtx)(()=>[(0,e.unref)(t).activeStep.value?.title?((0,e.openBlock)(),(0,e.createBlock)(N.default,{key:0},{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)((0,e.unref)(t).activeStep.value.title),1)]),_:1})):(0,e.createCommentVNode)("",!0),(0,e.unref)(t).activeStep.value?.description?((0,e.openBlock)(),(0,e.createBlock)(p.default,{key:1},{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)((0,e.unref)(t).activeStep.value.description),1)]),_:1})):(0,e.createCommentVNode)("",!0),o.showProgress?((0,e.openBlock)(),(0,e.createBlock)(_.default,{key:2})):(0,e.createCommentVNode)("",!0),(0,e.createVNode)(n.default,null,{default:(0,e.withCtx)(()=>[(0,e.createVNode)(T.default,null,{default:(0,e.withCtx)(()=>[...r[0]||(r[0]=[(0,e.createTextVNode)("Back",-1)])]),_:1}),(0,e.createVNode)(q.default,null,{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(u.value?"Done":"Next"),1)]),_:1}),o.showSkip?((0,e.openBlock)(),(0,e.createBlock)(k.default,{key:0},{default:(0,e.withCtx)(()=>[...r[1]||(r[1]=[(0,e.createTextVNode)("Skip",-1)])]),_:1})):(0,e.createCommentVNode)("",!0),(0,e.createVNode)(d.default,{"aria-label":"Close tour"},{default:(0,e.withCtx)(()=>[(0,e.createVNode)(i.default,{name:"close"})]),_:1})]),_:1})]),_:1})]),_:1}))}});exports.default=C;

package/dist/tour/TourAnatomy.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import e from"../utils/Glyph.vue.js";import{injectRequired as o}from"../utils/injectRequired.js";import{TOUR_CONTEXT as t}from"./context.js";import r from"./TourActions.vue.js";import u from"./TourBackdrop.vue.js";import a from"./TourCloseTrigger.vue.js";import s from"./TourContent.vue.js";import i from"./TourDescription.vue.js";import l from"./TourNextTrigger.vue.js";import p from"./TourPortal.vue.js";import m from"./TourPrevTrigger.vue.js";import n from"./TourProgressText.vue.js";import f from"./TourSkipTrigger.vue.js";import v from"./TourSpotlight.vue.js";import d from"./TourTitle.vue.js";import{computed as T,createBlock as c,createCommentVNode as j,createTextVNode as g,createVNode as k,defineComponent as y,openBlock as _,toDisplayString as S,unref as h,withCtx as x}from"vue";var B=/* @__PURE__ */y({__name:"TourAnatomy",props:{spotlight:{type:Boolean,default:!0},showProgress:{type:Boolean,default:!0},showSkip:{type:Boolean,default:!0}},setup(y){const B=o(t,"TourAnatomy must be used within SkdxTour."),C=T(()=>B.step.value>=B.total.value-1);return(o,t)=>(_(),c(p,null,{default:x(()=>[k(u),y.spotlight?(_(),c(v,{key:0})):j("",!0),k(s,null,{default:x(()=>[h(B).activeStep.value?.title?(_(),c(d,{key:0},{default:x(()=>[g(S(h(B).activeStep.value.title),1)]),_:1})):j("",!0),h(B).activeStep.value?.description?(_(),c(i,{key:1},{default:x(()=>[g(S(h(B).activeStep.value.description),1)]),_:1})):j("",!0),y.showProgress?(_(),c(n,{key:2})):j("",!0),k(r,null,{default:x(()=>[k(m,null,{default:x(()=>[...t[0]||(t[0]=[g("Back",-1)])]),_:1}),k(l,null,{default:x(()=>[g(S(C.value?"Done":"Next"),1)]),_:1}),y.showSkip?(_(),c(f,{key:0},{default:x(()=>[...t[1]||(t[1]=[g("Skip",-1)])]),_:1})):j("",!0),k(a,{"aria-label":"Close tour"},{default:x(()=>[k(e,{name:"close"})]),_:1})]),_:1})]),_:1})]),_:1}))}});export{B as default};

package/dist/tour/TourArrow.vue.d.cts

@@ -1,12 +1,4 @@
-/**
- * Optional arrow pointing from `SkdxTourContent` back at the step's target,
- * self-positioning on the edge facing it. Must be rendered inside
- * `SkdxTourContent`.
- *
- * Renders nothing on a step that is centred — one with no target, or with
- * `type: 'dialog'`. There is nothing for it to point at, and the underlying
- * popper arrow has no positioning context to read on that branch.
- */
+/** Optional arrow pointing from `SkdxTourContent` at the step's target, rendering nothing on centered steps. */
 type __VLS_Props = {};
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/dist/tour/TourArrow.vue.d.ts

@@ -1,12 +1,4 @@
-/**
- * Optional arrow pointing from `SkdxTourContent` back at the step's target,
- * self-positioning on the edge facing it. Must be rendered inside
- * `SkdxTourContent`.
- *
- * Renders nothing on a step that is centred — one with no target, or with
- * `type: 'dialog'`. There is nothing for it to point at, and the underlying
- * popper arrow has no positioning context to read on that branch.
- */
+/** Optional arrow pointing from `SkdxTourContent` at the step's target, rendering nothing on centered steps. */
 type __VLS_Props = {};
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/dist/tour/TourArrow.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const u=require("../utils/popper.cjs"),l=require("./context.cjs");let e=require("vue");var s=(0,e.defineComponent)({__name:"TourArrow",setup(a){const o=(0,e.inject)(l.TOUR_CONTEXT);if(!o)throw new Error("SkdxTourArrow must be used within SkdxTour.");const r=(0,e.inject)(u.ARROW_CONTEXT);if(!r)throw new Error("SkdxTourArrow must be used within SkdxTourContent.");const n=(0,e.ref)(null);return(0,e.watch)(n,t=>r.setArrowEl(t)),(0,e.onBeforeUnmount)(()=>r.setArrowEl(null)),(t,_)=>(0,e.unref)(o).anchored.value?((0,e.openBlock)(),(0,e.createElementBlock)("span",{key:0,class:"skdx-tour__arrow","data-part":"arrow",ref_key:"elRef",ref:n,style:(0,e.normalizeStyle)((0,e.unref)(r).style.value)},[(0,e.renderSlot)(t.$slots,"default")],4)):(0,e.createCommentVNode)("",!0)}});exports.default=s;
+const u=require("../utils/injectRequired.cjs"),l=require("../utils/popper.cjs"),s=require("./context.cjs");let e=require("vue");var a=(0,e.defineComponent)({__name:"TourArrow",setup(c){const n=u.injectRequired(s.TOUR_CONTEXT,"SkdxTourArrow must be used within SkdxTour."),r=u.injectRequired(l.ARROW_CONTEXT,"SkdxTourArrow must be used within SkdxTourContent."),o=(0,e.ref)(null);return(0,e.watch)(o,t=>r.setArrowEl(t)),(0,e.onBeforeUnmount)(()=>r.setArrowEl(null)),(t,_)=>(0,e.unref)(n).anchored.value?((0,e.openBlock)(),(0,e.createElementBlock)("span",{key:0,ref_key:"elRef",ref:o,class:"skdx-tour__arrow","data-part":"arrow",style:(0,e.normalizeStyle)((0,e.unref)(r).style.value)},[(0,e.renderSlot)(t.$slots,"default")],4)):(0,e.createCommentVNode)("",!0)}});exports.default=a;