adata-ui 2.1.41-beta.1 → 2.1.41

package/components/elements/slider/ASlider.vue

@@ -1,175 +1,174 @@
-<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>
+<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"
+    >
+      <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-blue-200 transition-all duration-300 dark:bg-blue-900/40"
+        :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-blue-500 dark:bg-blue-400"
+          :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

@@ -1,31 +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>
+<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/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')