adata-ui 2.1.41-beta.2 → 2.1.41-beta.21

package/components/elements/slider/ASliderV2.vue

@@ -1,182 +1,182 @@
-<script setup lang="ts" generic="T">
-import { useElementHover } from '@vueuse/core'
-import { computed, ref, watch } from 'vue'
-
-interface Props {
-  /** Slides. The slider only uses their count and the current one. */
-  slides: readonly T[]
-  /** Time each slide stays active, in ms. Also the progress-bar duration. */
-  interval?: number
-  /** Advance automatically. */
-  autoplay?: boolean
-  /** Freeze autoplay while the cursor is over the slider. */
-  pauseOnHover?: boolean
-  /** Render the built-in progress indicators. */
-  indicators?: boolean
-  /**
-   * CSS transition name for the built-in slide swap, e.g. `"fade"`.
-   * The slider only passes the name through to `<transition>` — the CSS
-   * itself stays with the slide. Without it slides swap instantly.
-   * Ignored when the default slot is used: taking over the rendering means
-   * taking over the transition too.
-   */
-  transition?: string
-  /** Transition mode, as on Vue's `<transition>`. */
-  transitionMode?: 'out-in' | 'in-out' | 'default'
-  /** Explicit transition duration in ms, as on Vue's `<transition>`. */
-  transitionDuration?: number | { enter: number, leave: number }
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  interval: 5000,
-  autoplay: true,
-  pauseOnHover: true,
-  indicators: true,
-  transition: undefined,
-  transitionMode: 'out-in',
-  transitionDuration: undefined,
-})
-
-/** Active slide index — usable as `v-model:index`. */
-const index = defineModel<number>('index', { default: 0 })
-
-const root = ref<HTMLElement>()
-const count = computed(() => props.slides.length)
-
-/* ---- navigation (always wraps around) ---- */
-function goTo(to: number) {
-  if (count.value === 0)
-    return
-  index.value = ((to % count.value) + count.value) % count.value
-}
-function next() {
-  goTo(index.value + 1)
-}
-function prev() {
-  goTo(index.value - 1)
-}
-
-/* ---- autoplay ----
- * Timing is driven by an invisible "clock" element's CSS animation.
- * `animation-play-state: paused` freezes both the clock and the visible
- * progress bar in one place, so the pause stays perfectly in sync and
- * resumes from where it stopped — no JS timers to keep aligned. */
-
-// Bumping this key remounts the clock/progress element, restarting the timing.
-// Watched rather than bumped inside `goTo`, so writing to `v-model:index`
-// from the outside restarts the timing too.
-const tick = ref(0)
-watch(index, () => {
-  tick.value++
-})
-
-// The slide list may have shrunk under the current index.
-watch(count, (n) => {
-  if (index.value >= n)
-    goTo(0)
-})
-
-const hovered = useElementHover(root)
-
-const running = computed(() => props.autoplay && count.value > 1)
-const timingStyle = computed(() => ({
-  animationDuration: `${props.interval}ms`,
-  animationPlayState: props.pauseOnHover && hovered.value ? 'paused' : 'running',
-}))
-
-defineExpose({ next, prev, goTo })
-</script>
-
-<template>
-  <div
-    ref="root"
-    class="relative overflow-hidden"
-    role="group"
-    aria-roledescription="carousel"
-  >
-    <!-- Invisible clock: fires `next` when a slide's time elapses. -->
-    <div
-      v-if="running"
-      :key="tick"
-      class="a-slider-clock"
-      :style="timingStyle"
-      @animationend="next"
-    />
-
-    <!-- Rendered once, for the active slide. Markup and animations are the
-         consumer's job — the slider only says which slide is active.
-         Without a slot the slider still works on its own: it renders the
-         active slide as-is, optionally wrapped in a named transition. -->
-    <slot
-      v-if="$slots.default"
-      :slide="slides[index]"
-      :index="index"
-      :count="count"
-      :go-to="goTo"
-    />
-
-    <!-- БЕЗ `appear` — это принципиально. Под SSR `<transition appear>`
-         сериализует содержимое в литеральный `<template>`: браузер такой узел
-         не рендерит, слайдер стоит пустым до гидратации, а сама гидратация
-         падает с mismatch (проверено на Nuxt 3.18 / Vue 3.5).
-         Вход первого слайда всё равно задаётся обычной CSS-анимацией на
-         монтировании — `appear` при SSR-гидратации Vue и так не проигрывает. -->
-    <transition
-      v-else-if="transition && slides[index]"
-      :name="transition"
-      :mode="transitionMode"
-      :duration="transitionDuration"
-    >
-      <component :is="slides[index]" :key="index" />
-    </transition>
-
-    <component
-      :is="slides[index]"
-      v-else-if="slides[index]"
-      :key="index"
-    />
-
-    <div
-      v-if="indicators && count > 1"
-      class="absolute bottom-0 left-1/2 z-10 flex -translate-x-1/2 gap-2"
-    >
-      <!-- пастельный бренд-трек: семантического токена нет, dark-компенсация вручную -->
-      <button
-        v-for="(_, i) in count"
-        :key="i"
-        type="button"
-        :aria-label="`Слайд ${i + 1}`"
-        :aria-current="index === i"
-        class="relative h-[6px] cursor-pointer overflow-hidden rounded-full bg-brand-200 transition-all duration-300 dark:bg-brand-500/30"
-        :class="index === i ? 'w-[30px]' : 'w-[20px]'"
-        @click="goTo(i)"
-      >
-        <span
-          v-if="index === i && running"
-          :key="tick"
-          class="a-slider-progress absolute inset-0 rounded-full bg-brand"
-          :style="timingStyle"
-        />
-      </button>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.a-slider-clock {
-  position: absolute;
-  height: 1px;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.a-slider-clock,
-.a-slider-progress {
-  animation: a-slider-run linear forwards;
-}
-
-@keyframes a-slider-run {
-  from { width: 0; }
-  to   { width: 100%; }
-}
-</style>
+<script setup lang="ts" generic="T">
+import { useElementHover } from '@vueuse/core'
+import { computed, ref, watch } from 'vue'
+
+interface Props {
+  /** Slides. The slider only uses their count and the current one. */
+  slides: readonly T[]
+  /** Time each slide stays active, in ms. Also the progress-bar duration. */
+  interval?: number
+  /** Advance automatically. */
+  autoplay?: boolean
+  /** Freeze autoplay while the cursor is over the slider. */
+  pauseOnHover?: boolean
+  /** Render the built-in progress indicators. */
+  indicators?: boolean
+  /**
+   * CSS transition name for the built-in slide swap, e.g. `"fade"`.
+   * The slider only passes the name through to `<transition>` — the CSS
+   * itself stays with the slide. Without it slides swap instantly.
+   * Ignored when the default slot is used: taking over the rendering means
+   * taking over the transition too.
+   */
+  transition?: string
+  /** Transition mode, as on Vue's `<transition>`. */
+  transitionMode?: 'out-in' | 'in-out' | 'default'
+  /** Explicit transition duration in ms, as on Vue's `<transition>`. */
+  transitionDuration?: number | { enter: number, leave: number }
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  interval: 5000,
+  autoplay: true,
+  pauseOnHover: true,
+  indicators: true,
+  transition: undefined,
+  transitionMode: 'out-in',
+  transitionDuration: undefined,
+})
+
+/** Active slide index — usable as `v-model:index`. */
+const index = defineModel<number>('index', { default: 0 })
+
+const root = ref<HTMLElement>()
+const count = computed(() => props.slides.length)
+
+/* ---- navigation (always wraps around) ---- */
+function goTo(to: number) {
+  if (count.value === 0)
+    return
+  index.value = ((to % count.value) + count.value) % count.value
+}
+function next() {
+  goTo(index.value + 1)
+}
+function prev() {
+  goTo(index.value - 1)
+}
+
+/* ---- autoplay ----
+ * Timing is driven by an invisible "clock" element's CSS animation.
+ * `animation-play-state: paused` freezes both the clock and the visible
+ * progress bar in one place, so the pause stays perfectly in sync and
+ * resumes from where it stopped — no JS timers to keep aligned. */
+
+// Bumping this key remounts the clock/progress element, restarting the timing.
+// Watched rather than bumped inside `goTo`, so writing to `v-model:index`
+// from the outside restarts the timing too.
+const tick = ref(0)
+watch(index, () => {
+  tick.value++
+})
+
+// The slide list may have shrunk under the current index.
+watch(count, (n) => {
+  if (index.value >= n)
+    goTo(0)
+})
+
+const hovered = useElementHover(root)
+
+const running = computed(() => props.autoplay && count.value > 1)
+const timingStyle = computed(() => ({
+  animationDuration: `${props.interval}ms`,
+  animationPlayState: props.pauseOnHover && hovered.value ? 'paused' : 'running',
+}))
+
+defineExpose({ next, prev, goTo })
+</script>
+
+<template>
+  <div
+    ref="root"
+    class="relative overflow-hidden"
+    role="group"
+    aria-roledescription="carousel"
+  >
+    <!-- Invisible clock: fires `next` when a slide's time elapses. -->
+    <div
+      v-if="running"
+      :key="tick"
+      class="a-slider-clock"
+      :style="timingStyle"
+      @animationend="next"
+    />
+
+    <!-- Rendered once, for the active slide. Markup and animations are the
+         consumer's job — the slider only says which slide is active.
+         Without a slot the slider still works on its own: it renders the
+         active slide as-is, optionally wrapped in a named transition. -->
+    <slot
+      v-if="$slots.default"
+      :slide="slides[index]"
+      :index="index"
+      :count="count"
+      :go-to="goTo"
+    />
+
+    <!-- БЕЗ `appear` — это принципиально. Под SSR `<transition appear>`
+         сериализует содержимое в литеральный `<template>`: браузер такой узел
+         не рендерит, слайдер стоит пустым до гидратации, а сама гидратация
+         падает с mismatch (проверено на Nuxt 3.18 / Vue 3.5).
+         Вход первого слайда всё равно задаётся обычной CSS-анимацией на
+         монтировании — `appear` при SSR-гидратации Vue и так не проигрывает. -->
+    <transition
+      v-else-if="transition && slides[index]"
+      :name="transition"
+      :mode="transitionMode"
+      :duration="transitionDuration"
+    >
+      <component :is="slides[index]" :key="index" />
+    </transition>
+
+    <component
+      :is="slides[index]"
+      v-else-if="slides[index]"
+      :key="index"
+    />
+
+    <div
+      v-if="indicators && count > 1"
+      class="absolute bottom-0 left-1/2 z-10 flex -translate-x-1/2 gap-2"
+    >
+      <!-- пастельный бренд-трек: семантического токена нет, dark-компенсация вручную -->
+      <button
+        v-for="(_, i) in count"
+        :key="i"
+        type="button"
+        :aria-label="`Слайд ${i + 1}`"
+        :aria-current="index === i"
+        class="relative h-[6px] cursor-pointer overflow-hidden rounded-full bg-brand-200 transition-all duration-300 dark:bg-brand-500/30"
+        :class="index === i ? 'w-[30px]' : 'w-[20px]'"
+        @click="goTo(i)"
+      >
+        <span
+          v-if="index === i && running"
+          :key="tick"
+          class="a-slider-progress absolute inset-0 rounded-full bg-brand"
+          :style="timingStyle"
+        />
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.a-slider-clock {
+  position: absolute;
+  height: 1px;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.a-slider-clock,
+.a-slider-progress {
+  animation: a-slider-run linear forwards;
+}
+
+@keyframes a-slider-run {
+  from { width: 0; }
+  to   { width: 100%; }
+}
+</style>

package/components/elements/slider/types.ts

@@ -1,21 +1,21 @@
-import type { ComputedRef, InjectionKey, Ref } from 'vue'
-
-/**
- * Context provided by <ASlider> and consumed by <ASliderItem>.
- * The slider owns the mechanism (active index, count, direction);
- * items only read from it and render their own animations.
- */
-export interface SliderContext {
-  /** Index of the currently active slide. */
-  index: Readonly<Ref<number>>
-  /** Total number of registered slides. */
-  count: Readonly<Ref<number>>
-  /** Direction of the last transition: 1 = forward, -1 = backward. */
-  direction: Readonly<Ref<1 | -1>>
-  /** Register an item and get back its live index. */
-  register: (id: symbol) => ComputedRef<number>
-  /** Unregister an item on unmount. */
-  unregister: (id: symbol) => void
-}
-
-export const SLIDER_CONTEXT: InjectionKey<SliderContext> = Symbol('a-slider')
+import type { ComputedRef, InjectionKey, Ref } from 'vue'
+
+/**
+ * Context provided by <ASlider> and consumed by <ASliderItem>.
+ * The slider owns the mechanism (active index, count, direction);
+ * items only read from it and render their own animations.
+ */
+export interface SliderContext {
+  /** Index of the currently active slide. */
+  index: Readonly<Ref<number>>
+  /** Total number of registered slides. */
+  count: Readonly<Ref<number>>
+  /** Direction of the last transition: 1 = forward, -1 = backward. */
+  direction: Readonly<Ref<1 | -1>>
+  /** Register an item and get back its live index. */
+  register: (id: symbol) => ComputedRef<number>
+  /** Unregister an item on unmount. */
+  unregister: (id: symbol) => void
+}
+
+export const SLIDER_CONTEXT: InjectionKey<SliderContext> = Symbol('a-slider')