adata-ui 2.1.40-beta.9 → 2.1.41-beta.0

package/components/elements/slider/ASlider.vue

@@ -0,0 +1,175 @@
+<script setup lang="ts">
+import { useDocumentVisibility, useElementHover } from '@vueuse/core'
+import { computed, provide, ref } from 'vue'
+import { SLIDER_CONTEXT } from './types'
+
+interface Props {
+  /** Time each slide stays active, in ms. */
+  interval?: number
+  /** Advance automatically. */
+  autoplay?: boolean
+  /** Wrap around from the last slide back to the first. */
+  loop?: boolean
+  /** Freeze autoplay while the cursor is over the slider. */
+  pauseOnHover?: boolean
+  /** Freeze autoplay while the browser tab is hidden. */
+  pauseOnHidden?: boolean
+  /** Render the built-in progress indicators. */
+  indicators?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  interval: 5000,
+  autoplay: true,
+  loop: true,
+  pauseOnHover: true,
+  pauseOnHidden: true,
+  indicators: true,
+})
+
+/** Active slide index — usable as `v-model:index`. */
+const index = defineModel<number>('index', { default: 0 })
+
+const root = ref<HTMLElement>()
+
+/* ---- item registration (drives `count` and per-item index) ---- */
+const ids = ref<symbol[]>([])
+const count = computed(() => ids.value.length)
+
+function register(id: symbol) {
+  ids.value.push(id)
+  return computed(() => ids.value.indexOf(id))
+}
+function unregister(id: symbol) {
+  const i = ids.value.indexOf(id)
+  if (i !== -1)
+    ids.value.splice(i, 1)
+}
+
+/* ---- navigation ---- */
+const direction = ref<1 | -1>(1)
+// Bumping this key remounts the clock/progress element, restarting the timing.
+const tick = ref(0)
+
+function go(to: number, dir?: 1 | -1) {
+  if (count.value === 0)
+    return
+  const n = ((to % count.value) + count.value) % count.value
+  direction.value = dir ?? (n >= index.value ? 1 : -1)
+  index.value = n
+  tick.value++
+}
+
+function next() {
+  if (!props.loop && index.value >= count.value - 1)
+    return
+  go(index.value + 1, 1)
+}
+function prev() {
+  if (!props.loop && index.value <= 0)
+    return
+  go(index.value - 1, -1)
+}
+function goTo(i: number) {
+  go(i)
+}
+
+/* ---- 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 hover/hidden pause stays perfectly in sync
+ * and resumes from where it stopped — no JS timers to keep aligned. */
+const hovered = useElementHover(root)
+const visibility = useDocumentVisibility()
+
+const shouldRun = computed(() => props.autoplay && count.value > 1)
+const paused = computed(() =>
+  (props.pauseOnHover && hovered.value)
+  || (props.pauseOnHidden && visibility.value === 'hidden'),
+)
+const timingStyle = computed(() => ({
+  animationDuration: `${props.interval}ms`,
+  animationPlayState: paused.value ? 'paused' : 'running',
+}))
+
+provide(SLIDER_CONTEXT, {
+  index,
+  count,
+  direction,
+  register,
+  unregister,
+})
+
+defineExpose({ next, prev, goTo, index, count })
+</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="shouldRun"
+      :key="tick"
+      class="a-slider-clock"
+      :style="timingStyle"
+      @animationend="next"
+    />
+
+    <slot />
+
+    <div
+      v-if="indicators && count > 1"
+      class="absolute bottom-0 left-1/2 z-10 flex -translate-x-1/2 gap-2"
+      role="tablist"
+    >
+      <!-- пастельный бренд-трек: семантического токена нет, dark-компенсация вручную -->
+      <button
+        v-for="(_, i) in count"
+        :key="i"
+        type="button"
+        role="tab"
+        :aria-selected="index === i"
+        :aria-label="`Слайд ${i + 1}`"
+        class="relative h-[6px] cursor-pointer overflow-hidden rounded-full bg-brand-200 dark:bg-brand-500/30 transition-all duration-300"
+        :class="index === i ? 'w-[30px]' : 'w-[20px]'"
+        @click="goTo(i)"
+      >
+        <span
+          v-if="index === i && shouldRun"
+          :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;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  pointer-events: none;
+  animation: a-slider-tick linear forwards;
+}
+
+.a-slider-progress {
+  animation: a-slider-progress linear forwards;
+}
+
+@keyframes a-slider-tick {
+  from { transform: scaleX(0); }
+  to   { transform: scaleX(1); }
+}
+
+@keyframes a-slider-progress {
+  from { width: 0; }
+  to   { width: 100%; }
+}
+</style>

package/components/elements/slider/ASliderItem.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { computed, inject, onBeforeUnmount } from 'vue'
+import { SLIDER_CONTEXT } from './types'
+
+const ctx = inject(SLIDER_CONTEXT)
+if (!ctx)
+  throw new Error('<ASliderItem> must be used inside <ASlider>')
+
+// Registered synchronously during setup, so siblings keep their template order.
+const id = Symbol('a-slider-item')
+const index = ctx.register(id)
+onBeforeUnmount(() => ctx.unregister(id))
+
+const active = computed(() => ctx.index.value === index.value)
+const direction = computed(() => ctx.direction.value)
+</script>
+
+<template>
+  <!-- Slides are stacked on the same stage so leave/enter animations overlap. -->
+  <div class="absolute inset-0">
+    <!--
+      The slider only tells the slide whether it's active and in which
+      direction. The slide owns its own <Transition> / animations.
+    -->
+    <slot
+      :active="active"
+      :index="index"
+      :direction="direction"
+    />
+  </div>
+</template>

package/components/elements/slider/ASliderV2.vue

@@ -0,0 +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>

package/components/elements/slider/types.ts

@@ -0,0 +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')