pxd 0.0.64 → 0.1.3

package/dist/composables/_internal/use-swipe-gesture.js

@@ -0,0 +1,345 @@
+import { nextTick, onScopeDispose, watch } from "vue";
+import { getElement } from "../../utils/dom.js";
+import { toValue } from "../../utils/helper.js";
+function isThenable(value) {
+  return typeof value === "object" && value !== null && typeof value.then === "function";
+}
+export function useSwipeGesture(containerRef, options = {}) {
+  const {
+    handleSelector,
+    axisLockThreshold = 0,
+    axisLockRatio = 1,
+    distanceThreshold = 0.35,
+    velocityThreshold = 0.3,
+    swipeThreshold = 10,
+    beforeStart,
+    onPress,
+    onFollow,
+    onRelease,
+    onTap
+  } = options;
+  let recognizer = null;
+  let stopped = false;
+  function isHorizontal() {
+    return (toValue(options.axis) ?? "horizontal") === "horizontal";
+  }
+  function getAxisValue(event, horizontal) {
+    return horizontal ? {
+      displacement: event.displacementX,
+      crossDisplacement: event.displacementY,
+      delta: event.deltaX,
+      velocity: event.velocityX
+    } : {
+      displacement: event.displacementY,
+      crossDisplacement: event.displacementX,
+      delta: event.deltaY,
+      velocity: event.velocityY
+    };
+  }
+  function resolveDirection(displacement, horizontal) {
+    return horizontal ? displacement > 0 ? "right" : "left" : displacement > 0 ? "bottom" : "top";
+  }
+  function resolveAxisLock(event, horizontal) {
+    const { displacement, crossDisplacement } = getAxisValue(event, horizontal);
+    const mainDistance = Math.abs(displacement);
+    const crossDistance = Math.abs(crossDisplacement);
+    if (Math.hypot(mainDistance, crossDistance) < axisLockThreshold) {
+      return "pending";
+    }
+    return mainDistance >= crossDistance * axisLockRatio ? "accepted" : "rejected";
+  }
+  function getTouchAction() {
+    return isHorizontal() ? "pan-y" : "pan-x";
+  }
+  function bind() {
+    const container = getElement(containerRef);
+    if (!container) {
+      return;
+    }
+    unbind();
+    const handle = handleSelector ? container.querySelector(handleSelector) : container;
+    if (!handle) {
+      return;
+    }
+    let containerSize = 0;
+    let axisLockState = "pending";
+    let startVerdict = "pending";
+    let startGate = null;
+    let released = false;
+    function resetGesture() {
+      axisLockState = "pending";
+      startVerdict = "pending";
+      startGate = null;
+    }
+    function emitTap(event, startEvent) {
+      const verdict = startVerdict;
+      const gate = startGate;
+      if (!onTap) {
+        return;
+      }
+      if (verdict === "pending" && gate) {
+        void gate.then((allowed) => onTap?.({ event, startEvent, vetoed: !allowed }));
+        return;
+      }
+      onTap({ event, startEvent, vetoed: verdict === "vetoed" });
+    }
+    function resolveStart(event) {
+      const state = { size: containerSize, event };
+      if (!beforeStart) {
+        startVerdict = "allowed";
+        onPress?.(state);
+        return;
+      }
+      const verdict = beforeStart(state);
+      if (isThenable(verdict)) {
+        startGate = verdict;
+        void verdict.then((allowed) => {
+          if (released) {
+            return;
+          }
+          startVerdict = allowed ? "allowed" : "vetoed";
+          if (startVerdict === "allowed") {
+            onPress?.(state);
+          }
+        });
+        return;
+      }
+      startVerdict = verdict ? "allowed" : "vetoed";
+      if (startVerdict === "allowed") {
+        onPress?.(state);
+      }
+    }
+    recognizer = new PointerSwipeRecognizer(handle, {
+      threshold: swipeThreshold,
+      touchAction: getTouchAction(),
+      onStart: (event) => {
+        axisLockState = "pending";
+        released = false;
+        containerSize = isHorizontal() ? container.offsetWidth : container.offsetHeight;
+        resolveStart(event.event);
+      },
+      onMove: (event) => {
+        if (startVerdict !== "allowed") {
+          return;
+        }
+        const h = isHorizontal();
+        if (axisLockState === "pending") {
+          axisLockState = resolveAxisLock(event, h);
+        }
+        if (axisLockState !== "accepted") {
+          return;
+        }
+        const { displacement, delta, velocity } = getAxisValue(event, h);
+        onFollow?.({
+          delta,
+          velocity,
+          displacement,
+          offset: containerSize > 0 ? displacement / containerSize : 0,
+          event: event.event
+        });
+      },
+      onEnd: (event) => {
+        released = true;
+        if (startVerdict !== "allowed") {
+          emitTap(event.event, event.startEvent);
+          resetGesture();
+          return;
+        }
+        const h = isHorizontal();
+        if (axisLockState === "pending") {
+          axisLockState = resolveAxisLock(event, h);
+        }
+        const { displacement, velocity } = getAxisValue(event, h);
+        const axisLocked = axisLockState === "accepted";
+        const swiped = axisLocked && containerSize > 0 && displacement !== 0 && (Math.abs(velocity) >= velocityThreshold || Math.abs(displacement) / containerSize >= distanceThreshold);
+        onRelease?.({
+          swiped,
+          direction: swiped ? resolveDirection(displacement, h) : void 0,
+          displacement,
+          velocity,
+          axisLocked,
+          event: event.event
+        });
+        resetGesture();
+      },
+      onIdle: (event, startEvent) => {
+        released = true;
+        emitTap(event, startEvent);
+        resetGesture();
+      },
+      onCancel: (event) => {
+        released = true;
+        onRelease?.({
+          swiped: false,
+          displacement: 0,
+          velocity: 0,
+          axisLocked: false,
+          event
+        });
+        resetGesture();
+      }
+    });
+  }
+  function unbind() {
+    recognizer?.destroy();
+    recognizer = null;
+  }
+  function stop() {
+    stopped = true;
+    unwatch();
+    unbind();
+  }
+  const unwatch = watch(
+    () => [getElement(containerRef), toValue(options.disabled), toValue(options.axis)],
+    async ([el, disabled]) => {
+      if (!el || disabled) {
+        unbind();
+        return;
+      }
+      await nextTick();
+      if (stopped || getElement(containerRef) !== el || toValue(options.disabled)) {
+        return;
+      }
+      bind();
+    },
+    { immediate: true, flush: "post" }
+  );
+  onScopeDispose(() => {
+    stop();
+  });
+  return {
+    stop
+  };
+}
+function getPointerPoint(event) {
+  return { x: event.clientX, y: event.clientY };
+}
+class PointerSwipeRecognizer {
+  constructor(el, options = {}) {
+    this.el = el;
+    this.options = options;
+    ;
+    el.style.webkitTapHighlightColor = "rgba(0,0,0,0)";
+    this.originalTouchAction = el.style.touchAction;
+    el.style.touchAction = options.touchAction ?? "none";
+    this.cleanup = this.bindEvents(el);
+  }
+  cleanup = null;
+  startPoint = null;
+  previousPoint = null;
+  previousTime = 0;
+  lastVelocity = { x: 0, y: 0 };
+  activePointerId = null;
+  hasRecognizedPan = false;
+  startEvent = null;
+  originalTouchAction = "";
+  destroy() {
+    this.cleanup?.();
+    this.cleanup = null;
+    this.el.style.touchAction = this.originalTouchAction;
+  }
+  bindEvents(el) {
+    const onPointerDown = (event) => {
+      if (!event.isPrimary || event.button !== 0) {
+        return;
+      }
+      this.activePointerId = event.pointerId;
+      this.startEvent = event;
+      this.startPoint = getPointerPoint(event);
+      this.previousPoint = this.startPoint;
+      this.previousTime = Date.now();
+      this.lastVelocity = { x: 0, y: 0 };
+      this.hasRecognizedPan = (this.options.threshold ?? 10) <= 0;
+      el.setPointerCapture?.(event.pointerId);
+      if (this.hasRecognizedPan) {
+        this.emitPan(this.options.onStart, event, this.startPoint, 0, 0);
+      }
+    };
+    const onPointerMove = (event) => {
+      if (event.pointerId !== this.activePointerId || !this.startPoint || !this.previousPoint) {
+        return;
+      }
+      const point = getPointerPoint(event);
+      const displacementX = point.x - this.startPoint.x;
+      const displacementY = point.y - this.startPoint.y;
+      const distance = Math.hypot(displacementX, displacementY);
+      if (!this.hasRecognizedPan) {
+        if (distance < (this.options.threshold ?? 10)) {
+          return;
+        }
+        this.hasRecognizedPan = true;
+        this.emitPan(this.options.onStart, event, point, displacementX, displacementY);
+      }
+      this.emitPan(this.options.onMove, event, point, displacementX, displacementY);
+    };
+    const onPointerUp = (event) => {
+      if (event.pointerId !== this.activePointerId || !this.startPoint) {
+        return;
+      }
+      const point = getPointerPoint(event);
+      if (this.hasRecognizedPan) {
+        this.emitPan(
+          this.options.onEnd,
+          event,
+          point,
+          point.x - this.startPoint.x,
+          point.y - this.startPoint.y
+        );
+      } else {
+        this.options.onIdle?.(event, this.startEvent);
+      }
+      el.releasePointerCapture?.(event.pointerId);
+      this.reset();
+    };
+    const onPointerCancel = (event) => {
+      if (event.pointerId !== this.activePointerId) {
+        return;
+      }
+      this.options.onCancel?.(event);
+      el.releasePointerCapture?.(event.pointerId);
+      this.reset();
+    };
+    el.addEventListener("pointerdown", onPointerDown);
+    window.addEventListener("pointermove", onPointerMove);
+    window.addEventListener("pointerup", onPointerUp);
+    window.addEventListener("pointercancel", onPointerCancel);
+    return () => {
+      el.removeEventListener("pointerdown", onPointerDown);
+      window.removeEventListener("pointermove", onPointerMove);
+      window.removeEventListener("pointerup", onPointerUp);
+      window.removeEventListener("pointercancel", onPointerCancel);
+    };
+  }
+  emitPan(callback, source, point, displacementX, displacementY) {
+    const now = Date.now();
+    const elapsed = Math.max(1, now - this.previousTime);
+    const deltaX = point.x - (this.previousPoint?.x ?? point.x);
+    const deltaY = point.y - (this.previousPoint?.y ?? point.y);
+    const velocityX = deltaX === 0 ? this.lastVelocity.x : deltaX / elapsed;
+    const velocityY = deltaY === 0 ? this.lastVelocity.y : deltaY / elapsed;
+    if (deltaX !== 0 || deltaY !== 0) {
+      this.lastVelocity = { x: velocityX, y: velocityY };
+    }
+    this.previousPoint = point;
+    this.previousTime = now;
+    callback?.({
+      displacementX,
+      displacementY,
+      deltaX,
+      deltaY,
+      velocityX,
+      velocityY,
+      event: source,
+      startEvent: this.startEvent
+    });
+  }
+  reset() {
+    this.startPoint = null;
+    this.previousPoint = null;
+    this.previousTime = 0;
+    this.lastVelocity = { x: 0, y: 0 };
+    this.activePointerId = null;
+    this.hasRecognizedPan = false;
+    this.startEvent = null;
+  }
+}

package/dist/composables/_internal/use-tailwind-variant.d.ts

@@ -0,0 +1,31 @@
+import type { ClassValue } from 'cn';
+type TailwindVariantSchema = Record<string, Record<string, ClassValue>>;
+type TailwindVariantFallback = string | number | boolean;
+type TailwindVariantPrimitive<T> = T extends 'true' ? true : T extends 'false' ? false : T extends `${infer Value extends number}` ? Value : T;
+type TailwindVariantValue<T extends Record<string, ClassValue>> = ([keyof T] extends [never] ? TailwindVariantFallback : Extract<keyof T, 'true' | 'false'> extends never ? TailwindVariantPrimitive<keyof T> | keyof T : boolean | keyof T) | null | undefined;
+type TailwindCompoundVariant<T extends TailwindVariantSchema> = Partial<{
+    [K in keyof T]: TailwindVariantValue<T[K]> | ReadonlyArray<TailwindVariantValue<T[K]>>;
+}> & {
+    class: ClassValue;
+};
+export type TailwindVariantSelection<T extends TailwindVariantSchema> = Partial<{
+    [K in keyof T]: TailwindVariantValue<T[K]>;
+}>;
+export interface TailwindVariantConfig<T extends TailwindVariantSchema> {
+    base?: ClassValue;
+    variants?: T;
+    compoundVariants?: ReadonlyArray<TailwindCompoundVariant<T>>;
+}
+export interface UseTailwindVariantOptions<T extends TailwindVariantSchema> {
+    selection?: () => TailwindVariantSelection<T>;
+    mergeAttrsClass?: boolean;
+}
+export declare function createTailwindVariant<T extends TailwindVariantSchema>(config: TailwindVariantConfig<T>): (selection?: TailwindVariantSelection<T>) => string;
+export declare function useTailwindVariant<T extends TailwindVariantSchema>(config: TailwindVariantConfig<T>, options?: UseTailwindVariantOptions<T>): {
+    attrs: import("vue").ComputedRef<{
+        [x: string]: unknown;
+        style?: import("vue").StyleValue;
+    }>;
+    classes: import("vue").ComputedRef<string>;
+};
+export {};

package/dist/composables/_internal/use-tailwind-variant.js

@@ -0,0 +1,62 @@
+import { cn } from "cn";
+import { computed, useAttrs } from "vue";
+function createTailwindVariantResolver(config) {
+  const compoundVariants = config.compoundVariants?.map(({ class: classes, ...conditions }) => ({
+    classes,
+    conditions: Object.entries(conditions).map(([key, expected]) => [
+      key,
+      (Array.isArray(expected) ? expected : [expected]).map(String)
+    ])
+  }));
+  return (selection = {}, additionalClasses) => {
+    const classes = [config.base];
+    for (const key in selection) {
+      if (!Object.hasOwn(selection, key)) {
+        continue;
+      }
+      const value = selection[key];
+      if (value == null) {
+        continue;
+      }
+      const valueClasses = config.variants?.[key]?.[String(value)];
+      if (valueClasses != null) {
+        classes.push(valueClasses);
+      }
+    }
+    if (compoundVariants) {
+      compoundVariantLoop: for (const compoundVariant of compoundVariants) {
+        for (const [key, expected] of compoundVariant.conditions) {
+          if (!expected.includes(String(selection[key]))) {
+            continue compoundVariantLoop;
+          }
+        }
+        classes.push(compoundVariant.classes);
+      }
+    }
+    classes.push(additionalClasses);
+    return cn(classes);
+  };
+}
+export function createTailwindVariant(config) {
+  const resolveClasses = createTailwindVariantResolver(config);
+  return (selection = {}) => resolveClasses(selection);
+}
+export function useTailwindVariant(config, options = {}) {
+  const rawAttrs = useAttrs();
+  const shouldMergeAttrsClass = options.mergeAttrsClass !== false;
+  const resolveClasses = createTailwindVariantResolver(config);
+  const attrs = computed(() => {
+    if (!shouldMergeAttrsClass) {
+      return rawAttrs;
+    }
+    const { class: _class, ...restAttrs } = rawAttrs;
+    return restAttrs;
+  });
+  const classes = computed(
+    () => resolveClasses(options.selection?.(), shouldMergeAttrsClass ? rawAttrs.class : void 0)
+  );
+  return {
+    attrs,
+    classes
+  };
+}

package/dist/composables/_internal/use-tour-target.d.ts

@@ -0,0 +1,29 @@
+import type { TourStep } from '../../components/tour/types';
+import type { MaybeRefOrGetter } from 'vue';
+export interface TourRect {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}
+export interface UseTourTargetOptions {
+    step: MaybeRefOrGetter<TourStep | undefined>;
+    motionReduced: MaybeRefOrGetter<boolean>;
+    onMissingTarget: (index: number) => void;
+    onError: (error: unknown, index: number) => void;
+    onResolved: () => void;
+}
+/**
+ * Resolves the rect of the current step target and keeps it in sync with scroll,
+ * resize, target size and target position changes. `beforeEnter` runs before the
+ * target is resolved, and the scroll into view happens once the element is known.
+ */
+export declare function useTourTarget(options: UseTourTargetOptions): {
+    rect: import("vue").ShallowRef<TourRect, TourRect>;
+    targetRadius: import("vue").ShallowRef<string, string>;
+    hasTarget: import("vue").ShallowRef<boolean, boolean>;
+    isCentered: import("vue").ComputedRef<boolean>;
+    isLoading: import("vue").ShallowRef<boolean, boolean>;
+    goTo: (index: number) => Promise<void>;
+    cancel: () => void;
+};

package/dist/composables/_internal/use-tour-target.js

@@ -0,0 +1,201 @@
+import { computed, onBeforeUnmount, shallowRef } from "vue";
+import { getElement, getStyle, resolveScrollBehavior } from "../../utils/dom.js";
+import { caf, cachedOff, cachedOn, raf, scheduleByRaf } from "../../utils/event.js";
+import { toValue } from "../../utils/helper.js";
+import { isServer } from "../../utils/is.js";
+const ZERO_RECT = { top: 0, left: 0, width: 0, height: 0 };
+function isSameRect(a, b) {
+  return a.top === b.top && a.left === b.left && a.width === b.width && a.height === b.height;
+}
+export function useTourTarget(options) {
+  const { step, motionReduced, onMissingTarget, onError, onResolved } = options;
+  const rect = shallowRef(ZERO_RECT);
+  const targetRadius = shallowRef("");
+  const hasTarget = shallowRef(false);
+  const isLoading = shallowRef(false);
+  let targetEl = null;
+  let token = 0;
+  let resizeObserver = null;
+  let isListening = false;
+  let positionFrame = 0;
+  const scheduleUpdate = scheduleByRaf(measure);
+  const isCentered = computed(() => !hasTarget.value);
+  function centeredRect() {
+    if (isServer()) {
+      return ZERO_RECT;
+    }
+    return {
+      top: window.innerHeight / 2,
+      left: window.innerWidth / 2,
+      width: 0,
+      height: 0
+    };
+  }
+  function measure() {
+    if (!targetEl) {
+      const nextRect2 = centeredRect();
+      if (!isSameRect(rect.value, nextRect2)) {
+        rect.value = nextRect2;
+      }
+      return;
+    }
+    const { top, left, width, height } = targetEl.getBoundingClientRect();
+    const nextRect = { top, left, width, height };
+    if (!isSameRect(rect.value, nextRect)) {
+      rect.value = nextRect;
+    }
+    const radius = getStyle(targetEl).borderRadius;
+    if (radius !== targetRadius.value) {
+      targetRadius.value = radius;
+    }
+  }
+  function observeTarget(el) {
+    resizeObserver?.disconnect();
+    resizeObserver = null;
+    if (!el || typeof ResizeObserver === "undefined") {
+      return;
+    }
+    resizeObserver = new ResizeObserver(scheduleUpdate);
+    resizeObserver.observe(el);
+  }
+  function startPositionTracking() {
+    if (isServer() || positionFrame) {
+      return;
+    }
+    positionFrame = raf(trackPosition);
+  }
+  function stopPositionTracking() {
+    if (!positionFrame) {
+      return;
+    }
+    caf(positionFrame);
+    positionFrame = 0;
+  }
+  function trackPosition() {
+    positionFrame = 0;
+    if (!targetEl) {
+      return;
+    }
+    const { top, left, width, height } = targetEl.getBoundingClientRect();
+    const nextRect = { top, left, width, height };
+    if (!isSameRect(rect.value, nextRect)) {
+      rect.value = nextRect;
+      targetRadius.value = getStyle(targetEl).borderRadius;
+    }
+    positionFrame = raf(trackPosition);
+  }
+  function startListening() {
+    if (isListening || isServer()) {
+      return;
+    }
+    cachedOn(window, "resize", scheduleUpdate);
+    cachedOn(window, "scroll", scheduleUpdate, { capture: true });
+    isListening = true;
+  }
+  function stopListening() {
+    if (!isListening || isServer()) {
+      return;
+    }
+    cachedOff(window, "resize", scheduleUpdate);
+    cachedOff(window, "scroll", scheduleUpdate, { capture: true });
+    isListening = false;
+  }
+  function detach() {
+    stopListening();
+    stopPositionTracking();
+    scheduleUpdate.cancel();
+    observeTarget(null);
+    targetEl = null;
+    targetRadius.value = "";
+    hasTarget.value = false;
+    rect.value = ZERO_RECT;
+  }
+  function center() {
+    observeTarget(null);
+    stopPositionTracking();
+    targetEl = null;
+    targetRadius.value = "";
+    hasTarget.value = false;
+    rect.value = centeredRect();
+    startListening();
+  }
+  function attachTarget(el, currentToken) {
+    if (currentToken !== token) {
+      return;
+    }
+    if (!el) {
+      center();
+      onResolved();
+      return;
+    }
+    targetEl = el;
+    hasTarget.value = true;
+    measure();
+    observeTarget(el);
+    startListening();
+    startPositionTracking();
+    onResolved();
+  }
+  async function goTo(index) {
+    const currentToken = ++token;
+    const currentStep = toValue(step);
+    isLoading.value = true;
+    if (currentStep?.beforeEnter) {
+      try {
+        await currentStep.beforeEnter({ index, step: currentStep });
+      } catch (error) {
+        if (currentToken !== token) {
+          return;
+        }
+        isLoading.value = false;
+        onError(error, index);
+        return;
+      }
+    }
+    if (currentToken !== token) {
+      return;
+    }
+    isLoading.value = false;
+    if (!currentStep?.target) {
+      attachTarget(null, currentToken);
+      return;
+    }
+    try {
+      const el = getElement(currentStep.target);
+      if (!el) {
+        onMissingTarget(index);
+        return;
+      }
+      attachTarget(el, currentToken);
+      if (currentToken !== token) {
+        return;
+      }
+      el.scrollIntoView({
+        block: "center",
+        behavior: resolveScrollBehavior("auto", motionReduced)
+      });
+      scheduleUpdate();
+    } catch (error) {
+      if (currentToken !== token) {
+        return;
+      }
+      isLoading.value = false;
+      onError(error, index);
+    }
+  }
+  function cancel() {
+    token++;
+    isLoading.value = false;
+    detach();
+  }
+  onBeforeUnmount(cancel);
+  return {
+    rect,
+    targetRadius,
+    hasTarget,
+    isCentered,
+    isLoading,
+    goTo,
+    cancel
+  };
+}