nuxt-hero 0.1.0

package/dist/runtime/components/slider/index.vue.d.ts

@@ -0,0 +1,69 @@
+import type { HeroSliderProps } from '#hero/types';
+import { patternCSS, patternSize } from '#hero/utils';
+declare var __VLS_30: {
+    slide: import("#hero/types").HeroSlide;
+    index: number;
+    isActive: boolean;
+    animationClass: string;
+    isVideo: boolean;
+    videoPlaying: boolean;
+    videoDuration: number;
+    videoCurrentTime: number;
+    videoWaiting: boolean;
+    videoEnded: boolean;
+    videoMuted: boolean;
+    videoVolume: number;
+    videoToggle: () => void;
+    videoSeek: (time: number) => void;
+    videoSetVolume: (v: number) => void;
+    videoToggleMute: () => void;
+}, __VLS_33: any, __VLS_36: {
+    patterns: import("#hero/types").OverlayPattern[];
+    index: number;
+    isActive: boolean;
+    patternCSS: typeof patternCSS;
+    patternSize: typeof patternSize;
+}, __VLS_38: {
+    activeIndex: number;
+    snapIndex: number;
+    totalSnaps: number;
+    total: number;
+    progress: number;
+    goTo: (index: number) => void;
+    vertical: boolean;
+    autoplayEnabled: boolean;
+}, __VLS_47: {
+    prev: () => void;
+    next: () => void;
+    activeIndex: number;
+    slides: import("#hero/types").HeroSlide[];
+    vertical: boolean;
+};
+type __VLS_Slots = {} & {
+    slide?: (props: typeof __VLS_30) => any;
+} & {
+    'video-controls'?: (props: typeof __VLS_33) => any;
+} & {
+    overlay?: (props: typeof __VLS_36) => any;
+} & {
+    pagination?: (props: typeof __VLS_38) => any;
+} & {
+    navigation?: (props: typeof __VLS_47) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<HeroSliderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<HeroSliderProps> & Readonly<{}>, {
+    enterAnimation: string;
+    leaveAnimation: string;
+    imagePreset: string;
+    overlayPatterns: import("#hero/types").OverlayPattern[];
+    parallax: import("vue").MaybeRefOrGetter<boolean | import("#hero/types").ParallaxConfig>;
+    as: string;
+    ui: import("#hero/types").HeroSliderUI;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/video/HeroSlideVideo.d.vue.ts

@@ -0,0 +1,39 @@
+import type { MediaControlsOptions, VideoMediaControls } from '#hero/types';
+interface SlideVideoProps {
+    /** Video source URL */
+    src: string;
+    /** Poster frame */
+    poster?: string;
+    /** Whether this slide is currently active */
+    isActive?: boolean;
+    /** Slide index for video registry */
+    slideIndex?: number;
+    /** Callback when video is ready */
+    onVideoReady?: (index: number, controls: VideoMediaControls) => void;
+    /** Callback when video is removed */
+    onVideoRemoved?: (index: number) => void;
+    /** VueUse useMediaControls options */
+    mediaControlsOptions?: MediaControlsOptions;
+    /** Whether to show video controls. Default: true */
+    showVideoControls?: boolean;
+    /** Whether the video should loop. Default: false */
+    videoLoop?: boolean;
+    /** Whether the video should auto-play when active. Default: true */
+    autoPlay?: boolean;
+}
+declare const __VLS_export: import("vue").DefineComponent<SlideVideoProps, {
+    mediaControls: import("@vueuse/core").UseMediaControlsReturn;
+    hlsState: import("#hero/composables/_hls").UseHlsReturn | null;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SlideVideoProps> & Readonly<{}>, {
+    poster: string;
+    showVideoControls: boolean;
+    isActive: boolean;
+    slideIndex: number;
+    onVideoReady: (index: number, controls: VideoMediaControls) => void;
+    onVideoRemoved: (index: number) => void;
+    mediaControlsOptions: MediaControlsOptions;
+    videoLoop: boolean;
+    autoPlay: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/video/HeroSlideVideo.vue

@@ -0,0 +1,116 @@
+<script setup>
+import { computed, onMounted, onUnmounted, ref, useTemplateRef, watch } from "vue";
+import { useMediaControls } from "@vueuse/core";
+import { useRuntimeConfig } from "#imports";
+import { isHlsUrl, getHeroConfig } from "#hero/utils";
+import { useHls } from "#hero/composables/_hls";
+const props = defineProps({
+  src: { type: String, required: true },
+  poster: { type: String, required: false, default: void 0 },
+  isActive: { type: Boolean, required: false, default: false },
+  slideIndex: { type: Number, required: false, default: 0 },
+  onVideoReady: { type: Function, required: false, default: void 0 },
+  onVideoRemoved: { type: Function, required: false, default: void 0 },
+  mediaControlsOptions: { type: null, required: false, default: void 0 },
+  showVideoControls: { type: Boolean, required: false, default: false },
+  videoLoop: { type: Boolean, required: false, default: false },
+  autoPlay: { type: Boolean, required: false, default: true }
+});
+const heroConfig = getHeroConfig(useRuntimeConfig());
+const defaultVolume = heroConfig.defaultVolume ?? 0;
+const hlsEnabled = heroConfig.features?.hls ?? false;
+const videoRef = useTemplateRef("videoRef");
+const isBgHls = computed(() => isHlsUrl(props.src));
+const mediaSrc = computed(() => isBgHls.value ? void 0 : props.src);
+const mediaControls = useMediaControls(videoRef, {
+  ...props.mediaControlsOptions,
+  src: mediaSrc
+});
+const hlsSrc = computed(() => hlsEnabled && isBgHls.value ? props.src : "");
+const hlsState = hlsEnabled ? useHls(videoRef, hlsSrc) : null;
+mediaControls.volume.value = defaultVolume;
+const ended = ref(false);
+onMounted(() => {
+  const el = videoRef.value;
+  if (!el) return;
+  el.addEventListener("ended", () => {
+    ended.value = true;
+  });
+});
+watch(() => mediaControls.playing.value, (playing) => {
+  if (playing) ended.value = false;
+});
+watch(
+  () => props.isActive,
+  (active) => {
+    if (props.slideIndex === void 0 || props.slideIndex === null) return;
+    if (active) {
+      props.onVideoReady?.(props.slideIndex, { ...mediaControls, ended });
+    } else {
+      props.onVideoRemoved?.(props.slideIndex);
+    }
+  },
+  { immediate: true }
+);
+onUnmounted(() => {
+  if (props.slideIndex !== void 0 && props.slideIndex !== null) {
+    props.onVideoRemoved?.(props.slideIndex);
+  }
+});
+const mediaReady = ref(false);
+onMounted(() => {
+  const el = videoRef.value;
+  if (!el) return;
+  const onCanPlay = () => {
+    mediaReady.value = true;
+    if (props.autoPlay && props.isActive) {
+      mediaControls.playing.value = true;
+    }
+  };
+  if (el.readyState >= 3) {
+    mediaReady.value = true;
+    if (props.autoPlay && props.isActive) {
+      mediaControls.playing.value = true;
+    }
+  } else {
+    el.addEventListener("canplay", onCanPlay, { once: true });
+  }
+});
+watch(
+  () => props.isActive,
+  (active) => {
+    if (!props.autoPlay) return;
+    if (active && mediaReady.value) {
+      mediaControls.playing.value = true;
+    } else if (!active) {
+      mediaControls.playing.value = false;
+    }
+  },
+  { immediate: true }
+);
+watch(mediaReady, (ready) => {
+  if (ready && props.autoPlay && props.isActive) {
+    mediaControls.playing.value = true;
+  }
+});
+watch(() => props.src, () => {
+  mediaReady.value = false;
+  const el = videoRef.value;
+  if (!el) return;
+  const onCanPlay = () => {
+    mediaReady.value = true;
+    if (props.autoPlay && props.isActive) {
+      mediaControls.playing.value = true;
+    }
+  };
+  el.addEventListener("canplay", onCanPlay, { once: true });
+});
+defineExpose({
+  mediaControls,
+  hlsState
+});
+</script>
+
+<template>
+  <video ref="videoRef" muted :loop="videoLoop" playsinline :poster="poster" class="size-full object-cover will-change-transform" />
+</template>

package/dist/runtime/components/video/HeroSlideVideo.vue.d.ts

@@ -0,0 +1,39 @@
+import type { MediaControlsOptions, VideoMediaControls } from '#hero/types';
+interface SlideVideoProps {
+    /** Video source URL */
+    src: string;
+    /** Poster frame */
+    poster?: string;
+    /** Whether this slide is currently active */
+    isActive?: boolean;
+    /** Slide index for video registry */
+    slideIndex?: number;
+    /** Callback when video is ready */
+    onVideoReady?: (index: number, controls: VideoMediaControls) => void;
+    /** Callback when video is removed */
+    onVideoRemoved?: (index: number) => void;
+    /** VueUse useMediaControls options */
+    mediaControlsOptions?: MediaControlsOptions;
+    /** Whether to show video controls. Default: true */
+    showVideoControls?: boolean;
+    /** Whether the video should loop. Default: false */
+    videoLoop?: boolean;
+    /** Whether the video should auto-play when active. Default: true */
+    autoPlay?: boolean;
+}
+declare const __VLS_export: import("vue").DefineComponent<SlideVideoProps, {
+    mediaControls: import("@vueuse/core").UseMediaControlsReturn;
+    hlsState: import("#hero/composables/_hls").UseHlsReturn | null;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SlideVideoProps> & Readonly<{}>, {
+    poster: string;
+    showVideoControls: boolean;
+    isActive: boolean;
+    slideIndex: number;
+    onVideoReady: (index: number, controls: VideoMediaControls) => void;
+    onVideoRemoved: (index: number) => void;
+    mediaControlsOptions: MediaControlsOptions;
+    videoLoop: boolean;
+    autoPlay: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/video/HeroVideoControls.d.vue.ts

@@ -0,0 +1,12 @@
+import type { Ref } from 'vue';
+interface VideoControlsProps {
+    playing: Ref<boolean>;
+    waiting: Ref<boolean>;
+    currentTime: Ref<number>;
+    volume: Ref<number>;
+    muted: Ref<boolean>;
+    duration: Ref<number>;
+}
+declare const __VLS_export: import("vue").DefineComponent<VideoControlsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<VideoControlsProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/video/HeroVideoControls.vue

@@ -0,0 +1,87 @@
+<script setup>
+import { computed } from "vue";
+import { formatTime } from "#hero/utils";
+const props = defineProps({
+  playing: { type: Object, required: true },
+  waiting: { type: Object, required: true },
+  currentTime: { type: Object, required: true },
+  volume: { type: Object, required: true },
+  muted: { type: Object, required: true },
+  duration: { type: Object, required: true }
+});
+const formattedTime = computed(
+  () => `${formatTime(Number(props.currentTime.value))} / ${formatTime(Number(props.duration.value))}`
+);
+function toggle() {
+  props.playing.value = !props.playing.value;
+}
+const progress = computed(() => {
+  if (props.duration.value === 0) return 0;
+  return props.currentTime.value / props.duration.value * 100;
+});
+const volumePercent = computed(() => Math.round((props.volume.value ?? 0) * 100));
+function onVolumeInput(e) {
+  const val = Number(e.target.value);
+  props.volume.value = val / 100;
+  if (val > 0 && props.muted.value) {
+    props.muted.value = false;
+  }
+}
+function toggleMute() {
+  props.muted.value = !props.muted.value;
+}
+const volumeIcon = computed(() => {
+  if (props.muted.value || props.volume.value === 0) return "muted";
+  if (props.volume.value < 0.5) return "low";
+  return "high";
+});
+</script>
+
+<template>
+  <div aria-live="polite"
+    class="pointer-events-auto absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-10 flex items-center justify-center">
+    <button type="button"
+      class="inline-flex items-center justify-center size-12 rounded-full text-white cursor-pointer hero-video-btn group"
+      :disabled="waiting.value" :aria-label="playing.value ? 'Pause video' : 'Play video'" @click="toggle">
+      <span v-if="waiting.value" class="hero-spinner hero-spinner-md text-white" />
+      <Icon v-else-if="playing.value" name="lucide:pause"
+        class="size-4 transition-transform duration-150 group-hover:scale-110" />
+      <Icon v-else name="lucide:play" class="size-4 transition-transform duration-150 group-hover:scale-110" />
+
+      <div class="absolute flex size-full items-center justify-center">
+        <div class="hero-radial-progress size-full m-auto"
+          :style="{ '--hero-progress-value': Math.round(progress), '--hero-progress-size': '3rem', '--hero-progress-thickness': '0.25rem' }"
+          :aria-valuenow="Math.round(progress)" role="progressbar" />
+      </div>
+    </button>
+  </div>
+  <div>
+    <div class="media-controls">
+      <button type="button"
+        class="inline-flex items-center justify-center size-8 rounded mr-1 shadow-none text-white hover:opacity-100 transition-opacity cursor-pointer"
+        :aria-label="playing.value ? 'Pause video' : 'Play video'" @click="toggle">
+        <span v-if="waiting.value" class="hero-spinner hero-spinner-sm text-white" />
+        <Icon v-else-if="playing.value" name="lucide:pause" class="size-4 transition-transform duration-150" />
+        <Icon v-else name="lucide:play" class="size-4 transition-transform duration-150" />
+      </button>
+      <div class="group/volume flex items-center">
+        <button type="button"
+          class="inline-flex items-center justify-center size-8 rounded mr-1 shadow-none text-white hover:opacity-100 transition-opacity cursor-pointer"
+          aria-label="Toggle mute" @click="toggleMute">
+          <Icon v-if="volumeIcon === 'high'" name="lucide:volume-2" class="size-4" />
+          <Icon v-else-if="volumeIcon === 'low'" name="lucide:volume-1" class="size-4" />
+          <Icon v-else name="lucide:volume-x" class="size-4" />
+        </button>
+        <div class="overflow-hidden flex group-hover/volume:w-24 transition-all duration-300 ease-out">
+          <input type="range" min="0" max="100" :value="muted.value ? 0 : volumePercent" class="text-white"
+            aria-label="Volume" :aria-valuetext="`${muted.value ? 0 : volumePercent}%`" @input="onVolumeInput" />
+        </div>
+      </div>
+    </div>
+    <!-- Time Display -->
+    <span
+      class="text-xs p-2 mb-4 mr-2 text-center rounded backdrop-blur-sm bg-white/85 min-w-25 self-end bottom-1 right-0 absolute z-2 dark:bg-black/85">
+      {{ formattedTime }}
+    </span>
+  </div>
+</template>

package/dist/runtime/components/video/HeroVideoControls.vue.d.ts

@@ -0,0 +1,12 @@
+import type { Ref } from 'vue';
+interface VideoControlsProps {
+    playing: Ref<boolean>;
+    waiting: Ref<boolean>;
+    currentTime: Ref<number>;
+    volume: Ref<number>;
+    muted: Ref<boolean>;
+    duration: Ref<number>;
+}
+declare const __VLS_export: import("vue").DefineComponent<VideoControlsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<VideoControlsProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/video/HeroVideoScrubber.d.vue.ts

@@ -0,0 +1,64 @@
+declare var __VLS_1: {
+    pendingValue: number;
+    position: string;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    min: {
+        type: NumberConstructor;
+        default: number;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+    secondary: {
+        type: NumberConstructor;
+        default: number;
+    };
+    modelValue: {
+        type: import("vue").PropType<number>;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (...args: any[]) => void;
+    scrubbing: (...args: any[]) => void;
+    scrubberMousedown: (...args: any[]) => void;
+    scrubberMouseup: (...args: any[]) => void;
+    "update:modelValue": (value: number) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    min: {
+        type: NumberConstructor;
+        default: number;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+    secondary: {
+        type: NumberConstructor;
+        default: number;
+    };
+    modelValue: {
+        type: import("vue").PropType<number>;
+    };
+}>> & Readonly<{
+    onClick?: ((...args: any[]) => any) | undefined;
+    onScrubbing?: ((...args: any[]) => any) | undefined;
+    onScrubberMousedown?: ((...args: any[]) => any) | undefined;
+    onScrubberMouseup?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {
+    min: number;
+    max: number;
+    secondary: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/video/HeroVideoScrubber.vue

@@ -0,0 +1,50 @@
+<script setup>
+import { ref, watch, useTemplateRef } from "vue";
+import { useEventListener, useMouseInElement, onClickOutside } from "@vueuse/core";
+const props = defineProps({
+  min: { type: Number, default: 0 },
+  max: { type: Number, default: 100 },
+  secondary: { type: Number, default: 0 }
+});
+const emit = defineEmits(["scrubbing", "scrubberMousedown", "scrubberMouseup", "click"]);
+const scrubber = useTemplateRef("scrubber");
+const scrubbing = ref(false);
+const pendingValue = ref(0);
+useEventListener("mouseup", () => {
+  if (!scrubbing.value) return;
+  scrubbing.value = false;
+  emit("scrubbing", false);
+  emit("scrubberMouseup", true);
+});
+onClickOutside(scrubber, () => {
+  if (!scrubbing.value) return;
+  scrubbing.value = false;
+  emit("scrubbing", false);
+  emit("scrubberMouseup", true);
+});
+const value = defineModel({ type: Number, ...{ required: false, default: 0 } });
+const { elementX, elementWidth } = useMouseInElement(scrubber);
+watch([scrubbing, elementX], () => {
+  const progress = Math.max(0, Math.min(1, elementX.value / elementWidth.value));
+  pendingValue.value = progress * props.max;
+  if (scrubbing.value) {
+    value.value = pendingValue.value;
+    emit("scrubbing", true);
+  }
+});
+</script>
+
+<template>
+  <div ref="scrubber" class="cursor-pointer select-none bg-white/15"
+    @mousedown.stop="(scrubbing = true, emit('scrubberMousedown', true))">
+    <div class="h-full w-full relative overflow-hidden">
+      <div class="bg-white rounded-e-sm h-full w-full left-0 top-0 absolute"
+        :style="{ transform: `translateX(${secondary / max * 100 - 100}%)` }" />
+      <div class="bg-white h-full w-full relative rounded-e-sm"
+        :style="{ transform: `translateX(${value / max * 100 - 100}%)` }" />
+    </div>
+    <div class="opacity-0 inset-0 absolute hover:opacity-100" :class="{ 'opacity-100': scrubbing }">
+      <slot :pending-value="pendingValue" :position="`${Math.max(0, Math.min(elementX, elementWidth))}px`" />
+    </div>
+  </div>
+</template>

package/dist/runtime/components/video/HeroVideoScrubber.vue.d.ts

@@ -0,0 +1,64 @@
+declare var __VLS_1: {
+    pendingValue: number;
+    position: string;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    min: {
+        type: NumberConstructor;
+        default: number;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+    secondary: {
+        type: NumberConstructor;
+        default: number;
+    };
+    modelValue: {
+        type: import("vue").PropType<number>;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (...args: any[]) => void;
+    scrubbing: (...args: any[]) => void;
+    scrubberMousedown: (...args: any[]) => void;
+    scrubberMouseup: (...args: any[]) => void;
+    "update:modelValue": (value: number) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    min: {
+        type: NumberConstructor;
+        default: number;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+    secondary: {
+        type: NumberConstructor;
+        default: number;
+    };
+    modelValue: {
+        type: import("vue").PropType<number>;
+    };
+}>> & Readonly<{
+    onClick?: ((...args: any[]) => any) | undefined;
+    onScrubbing?: ((...args: any[]) => any) | undefined;
+    onScrubberMousedown?: ((...args: any[]) => any) | undefined;
+    onScrubberMouseup?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {
+    min: number;
+    max: number;
+    secondary: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/composables/_autoplay.d.ts

@@ -0,0 +1,25 @@
+import type { ComputedRef, Ref } from 'vue';
+import type { UseHeroSliderOptions } from '#hero/types';
+/**
+ * Creates the autoplay timer state. Manages elapsed time, progress,
+ * and pause/resume logic. Pauses automatically when a video slide
+ * is active or the slider is hovered.
+ *
+ * @param advanceSlide - Callback to advance to the next slide
+ * @param isActiveSlideVideo - Whether the current slide has a video background
+ * @param isHovered - Whether the user is hovering over the slider
+ * @param options - Swiper options containing autoplay delay config
+ * @returns Autoplay state refs and control functions
+ */
+export declare function createAutoplayState(advanceSlide: () => void, isActiveSlideVideo: ComputedRef<boolean>, isHovered: Ref<boolean>, options: Pick<UseHeroSliderOptions, 'swiperOptions'>): {
+    autoplayEnabled: boolean;
+    autoplayProgress: ComputedRef<number>;
+    autoplayRemaining: ComputedRef<number>;
+    autoplayDelay: Ref<number, number>;
+    autoplayPaused: Ref<boolean, boolean>;
+    autoplayPause: () => void;
+    autoplayResume: () => void;
+    autoplayReset: () => void;
+    autoplaySetDelay: (ms: number) => void;
+    onSlideChange: () => void;
+};

package/dist/runtime/composables/_autoplay.js

@@ -0,0 +1,72 @@
+import { computed, ref, watch } from "vue";
+import { useIntervalFn } from "@vueuse/core";
+export function createAutoplayState(advanceSlide, isActiveSlideVideo, isHovered, options) {
+  const swiperOptions = options.swiperOptions ?? {};
+  const autoplayEnabled = swiperOptions.autoplay !== false;
+  const initialDelay = swiperOptions.autoplay && typeof swiperOptions.autoplay === "object" ? swiperOptions.autoplay.delay ?? 5e3 : 5e3;
+  const TICK_MS = 50;
+  const elapsed = ref(0);
+  const autoplayDelay = ref(initialDelay);
+  const autoplayPaused = ref(!autoplayEnabled);
+  const autoplayProgress = computed(() => {
+    return Math.min(elapsed.value / autoplayDelay.value, 1);
+  });
+  const autoplayRemaining = computed(() => {
+    return Math.max(autoplayDelay.value - elapsed.value, 0);
+  });
+  const { pause: pauseTimer, resume: resumeTimer } = useIntervalFn(() => {
+    if (isActiveSlideVideo.value || isHovered.value) return;
+    elapsed.value += TICK_MS;
+    if (elapsed.value >= autoplayDelay.value) {
+      advanceSlide();
+      elapsed.value = 0;
+    }
+  }, TICK_MS, { immediate: autoplayEnabled });
+  watch(isActiveSlideVideo, (isVideo) => {
+    if (!autoplayEnabled) return;
+    if (isVideo) {
+      pauseTimer();
+    } else if (!autoplayPaused.value && !isHovered.value) {
+      elapsed.value = 0;
+      resumeTimer();
+    }
+  });
+  watch(isHovered, (hovered) => {
+    if (!autoplayEnabled) return;
+    if (hovered) {
+      elapsed.value = 0;
+      pauseTimer();
+    } else if (!autoplayPaused.value && !isActiveSlideVideo.value) {
+      resumeTimer();
+    }
+  });
+  function autoplayPause() {
+    autoplayPaused.value = true;
+    pauseTimer();
+  }
+  function autoplayResume() {
+    autoplayPaused.value = false;
+    resumeTimer();
+  }
+  function autoplayReset() {
+    elapsed.value = 0;
+  }
+  function autoplaySetDelay(ms) {
+    autoplayDelay.value = ms;
+  }
+  function onSlideChange() {
+    elapsed.value = 0;
+  }
+  return {
+    autoplayEnabled,
+    autoplayProgress,
+    autoplayRemaining,
+    autoplayDelay,
+    autoplayPaused,
+    autoplayPause,
+    autoplayResume,
+    autoplayReset,
+    autoplaySetDelay,
+    onSlideChange
+  };
+}