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

package/components/elements/step-slider/AStepSliderColNumber.vue

@@ -1,199 +1,199 @@
-<script setup lang="ts">
-interface Step {
-  title: string
-  description: string
-}
-
-const props = withDefaults(defineProps<{
-  steps: Step[]
-  interval?: number
-  autoplay?: boolean
-  pauseOnHover?: boolean
-  modelValue?: number
-  colsClass?: string
-}>(), {
-  interval: 5000,
-  autoplay: true,
-  pauseOnHover: true,
-  modelValue: undefined,
-  colsClass: 'lg:grid-cols-2',
-})
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: number): void
-  (e: 'change', value: number): void
-}>()
-
-const TICK = 50
-
-const internal = ref(props.modelValue ?? 0)
-
-const active = computed<number>({
-  get: () => props.modelValue ?? internal.value,
-  set: (value) => {
-    internal.value = value
-    emit('update:modelValue', value)
-    emit('change', value)
-  },
-})
-
-const elapsed = ref(0)
-let ticker: ReturnType<typeof setInterval> | null = null
-let lastTs = 0
-
-const progress = computed(() => {
-  if (!props.autoplay || props.steps.length <= 1)
-    return 1
-  return Math.min(1, elapsed.value / props.interval)
-})
-
-const fillWidth = computed(() => `${progress.value * 100}%`)
-
-function stopTicker() {
-  if (ticker) {
-    clearInterval(ticker)
-    ticker = null
-  }
-  lastTs = 0
-}
-
-function startTicker() {
-  stopTicker()
-  if (!props.autoplay || props.steps.length <= 1)
-    return
-  ticker = setInterval(() => {
-    const now = Date.now()
-    const dt = lastTs ? now - lastTs : TICK
-    lastTs = now
-    elapsed.value += dt
-    if (elapsed.value >= props.interval) {
-      elapsed.value = 0
-      active.value = (active.value + 1) % props.steps.length
-    }
-  }, TICK)
-}
-
-function goTo(index: number) {
-  active.value = index
-  elapsed.value = 0
-  startTicker()
-}
-
-function onMouseEnter() {
-  if (props.pauseOnHover)
-    stopTicker()
-}
-
-function onMouseLeave() {
-  if (props.pauseOnHover)
-    startTicker()
-}
-
-onMounted(startTicker)
-onBeforeUnmount(stopTicker)
-watch(() => [props.interval, props.autoplay, props.steps.length], () => {
-  elapsed.value = 0
-  startTicker()
-})
-</script>
-
-<template>
-  <div
-    class="grid grid-cols-1 items-start gap-[34px] lg:gap-13"
-    :class="colsClass"
-  >
-    <div class="flex flex-col">
-      <ol class="relative flex flex-col gap-1.5">
-        <!-- Одна непрерывная линия с прогрессивной заливкой (как в макете),
-             а не дискретные сегменты между шагами. Линия проходит ЗА кружками,
-             поэтому их фон обязан быть непрозрачным (см. ниже). -->
-        <span
-          v-if="steps.length > 1"
-          class="absolute inset-y-9 left-[31px] z-0 w-0.5 overflow-hidden rounded bg-badge"
-          aria-hidden="true"
-        >
-          <span
-            class="ss-line-fill absolute inset-x-0 top-0 rounded bg-brand"
-            :style="{ height: `${(active / (steps.length - 1)) * 100}%` }"
-          />
-        </span>
-
-        <li
-          v-for="(step, i) in steps"
-          :key="i"
-          class="ss-step relative z-10 flex cursor-pointer gap-[15px] rounded-14 px-4 py-3.5"
-          :class="i === active ? 'ss-step-on bg-main' : ''"
-          @click="goTo(i)"
-        >
-          <!-- Фон кружка только НЕПРОЗРАЧНЫМИ токенами: bg-brand-subtle в тёмной
-               теме = #068DFF1A (10% альфы), и линия прогресса просвечивала
-               сквозь пройденный шаг. Для дарка берём непрозрачный brand-900. -->
-          <span
-            class="relative z-10 flex size-[34px] shrink-0 items-center justify-center rounded-full text-body-md font-bold transition-all duration-300"
-            :class="i === active
-              ? 'ss-num-glow scale-[1.08] bg-brand text-inverted'
-              : i < active
-                ? 'bg-brand-100 text-brand dark:bg-brand-900 dark:text-brand-300'
-                : 'bg-canvas text-secondary'"
-          >
-            {{ i + 1 }}
-          </span>
-          <div>
-            <p
-              class="text-body-md-strong transition-colors"
-              :class="i === active ? 'text-primary' : 'text-secondary'"
-            >
-              {{ step.title }}
-            </p>
-            <p class="mt-[3px] text-body-sm leading-normal text-secondary">
-              {{ step.description }}
-            </p>
-          </div>
-        </li>
-      </ol>
-
-      <slot name="steps-footer" />
-    </div>
-
-    <div
-      @mouseenter="onMouseEnter"
-      @mouseleave="onMouseLeave"
-    >
-      <slot
-        name="panel"
-        :active="active"
-        :step="steps[active]"
-        :progress="progress"
-        :count="steps.length"
-        :fill-width="fillWidth"
-        :go-to="goTo"
-      />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.ss-line-fill {
-  transition: height .6s cubic-bezier(.4, 0, .2, 1);
-}
-
-.ss-step {
-  background: transparent;
-  transition: background .4s, box-shadow .4s;
-}
-
-.ss-step-on {
-  box-shadow: 0 14px 34px -18px color-mix(in srgb, var(--color-brand-500) 30%, transparent);
-}
-
-.ss-num-glow {
-  box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--color-brand-500) 55%, transparent);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .ss-line-fill,
-  .ss-step {
-    transition: none;
-  }
-}
-</style>
+<script setup lang="ts">
+interface Step {
+  title: string
+  description: string
+}
+
+const props = withDefaults(defineProps<{
+  steps: Step[]
+  interval?: number
+  autoplay?: boolean
+  pauseOnHover?: boolean
+  modelValue?: number
+  colsClass?: string
+}>(), {
+  interval: 5000,
+  autoplay: true,
+  pauseOnHover: true,
+  modelValue: undefined,
+  colsClass: 'lg:grid-cols-2',
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: number): void
+  (e: 'change', value: number): void
+}>()
+
+const TICK = 50
+
+const internal = ref(props.modelValue ?? 0)
+
+const active = computed<number>({
+  get: () => props.modelValue ?? internal.value,
+  set: (value) => {
+    internal.value = value
+    emit('update:modelValue', value)
+    emit('change', value)
+  },
+})
+
+const elapsed = ref(0)
+let ticker: ReturnType<typeof setInterval> | null = null
+let lastTs = 0
+
+const progress = computed(() => {
+  if (!props.autoplay || props.steps.length <= 1)
+    return 1
+  return Math.min(1, elapsed.value / props.interval)
+})
+
+const fillWidth = computed(() => `${progress.value * 100}%`)
+
+function stopTicker() {
+  if (ticker) {
+    clearInterval(ticker)
+    ticker = null
+  }
+  lastTs = 0
+}
+
+function startTicker() {
+  stopTicker()
+  if (!props.autoplay || props.steps.length <= 1)
+    return
+  ticker = setInterval(() => {
+    const now = Date.now()
+    const dt = lastTs ? now - lastTs : TICK
+    lastTs = now
+    elapsed.value += dt
+    if (elapsed.value >= props.interval) {
+      elapsed.value = 0
+      active.value = (active.value + 1) % props.steps.length
+    }
+  }, TICK)
+}
+
+function goTo(index: number) {
+  active.value = index
+  elapsed.value = 0
+  startTicker()
+}
+
+function onMouseEnter() {
+  if (props.pauseOnHover)
+    stopTicker()
+}
+
+function onMouseLeave() {
+  if (props.pauseOnHover)
+    startTicker()
+}
+
+onMounted(startTicker)
+onBeforeUnmount(stopTicker)
+watch(() => [props.interval, props.autoplay, props.steps.length], () => {
+  elapsed.value = 0
+  startTicker()
+})
+</script>
+
+<template>
+  <div
+    class="grid grid-cols-1 items-start gap-[34px] lg:gap-13"
+    :class="colsClass"
+  >
+    <div class="flex flex-col">
+      <ol class="relative flex flex-col gap-1.5">
+        <!-- Одна непрерывная линия с прогрессивной заливкой (как в макете),
+             а не дискретные сегменты между шагами. Линия проходит ЗА кружками,
+             поэтому их фон обязан быть непрозрачным (см. ниже). -->
+        <span
+          v-if="steps.length > 1"
+          class="absolute inset-y-9 left-[31px] z-0 w-0.5 overflow-hidden rounded bg-badge"
+          aria-hidden="true"
+        >
+          <span
+            class="ss-line-fill absolute inset-x-0 top-0 rounded bg-brand"
+            :style="{ height: `${(active / (steps.length - 1)) * 100}%` }"
+          />
+        </span>
+
+        <li
+          v-for="(step, i) in steps"
+          :key="i"
+          class="ss-step relative z-10 flex cursor-pointer gap-[15px] rounded-14 px-4 py-3.5"
+          :class="i === active ? 'ss-step-on bg-main' : ''"
+          @click="goTo(i)"
+        >
+          <!-- Фон кружка только НЕПРОЗРАЧНЫМИ токенами: bg-brand-subtle в тёмной
+               теме = #068DFF1A (10% альфы), и линия прогресса просвечивала
+               сквозь пройденный шаг. Для дарка берём непрозрачный brand-900. -->
+          <span
+            class="relative z-10 flex size-[34px] shrink-0 items-center justify-center rounded-full text-body-md font-bold transition-all duration-300"
+            :class="i === active
+              ? 'ss-num-glow scale-[1.08] bg-brand text-inverted'
+              : i < active
+                ? 'bg-brand-100 text-brand dark:bg-brand-900 dark:text-brand-300'
+                : 'bg-canvas text-secondary'"
+          >
+            {{ i + 1 }}
+          </span>
+          <div>
+            <p
+              class="text-body-md-strong transition-colors"
+              :class="i === active ? 'text-primary' : 'text-secondary'"
+            >
+              {{ step.title }}
+            </p>
+            <p class="mt-[3px] text-body-sm leading-normal text-secondary">
+              {{ step.description }}
+            </p>
+          </div>
+        </li>
+      </ol>
+
+      <slot name="steps-footer" />
+    </div>
+
+    <div
+      @mouseenter="onMouseEnter"
+      @mouseleave="onMouseLeave"
+    >
+      <slot
+        name="panel"
+        :active="active"
+        :step="steps[active]"
+        :progress="progress"
+        :count="steps.length"
+        :fill-width="fillWidth"
+        :go-to="goTo"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.ss-line-fill {
+  transition: height .6s cubic-bezier(.4, 0, .2, 1);
+}
+
+.ss-step {
+  background: transparent;
+  transition: background .4s, box-shadow .4s;
+}
+
+.ss-step-on {
+  box-shadow: 0 14px 34px -18px color-mix(in srgb, var(--color-brand-500) 30%, transparent);
+}
+
+.ss-num-glow {
+  box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--color-brand-500) 55%, transparent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ss-line-fill,
+  .ss-step {
+    transition: none;
+  }
+}
+</style>

package/components/elements/step-slider/AStepSliderRowCard.vue

@@ -0,0 +1,197 @@
+<script setup lang="ts">
+import type { Component } from 'vue'
+import { useElementHover } from '@vueuse/core'
+import { computed, ref, watch } from 'vue'
+
+export interface StepSliderRowCardStep {
+  title: string
+  description: string
+  icon?: Component
+  iconBg?: string
+  iconColor?: string
+}
+
+type RowBreakpoint = 'sm' | 'md' | 'lg'
+
+interface Props {
+  steps: StepSliderRowCardStep[]
+  interval?: number
+  autoplay?: boolean
+  pauseOnHover?: boolean
+  rowFrom?: RowBreakpoint
+  connectors?: boolean
+  titleTag?: 'p' | 'h2' | 'h3' | 'h4' | 'h5'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  interval: 5000,
+  autoplay: true,
+  pauseOnHover: true,
+  rowFrom: 'lg',
+  connectors: true,
+  titleTag: 'p',
+})
+
+const active = defineModel<number>({ default: 0 })
+
+const ROW_LAYOUT: Record<RowBreakpoint, { grid: string, lift: string, connector: string }> = {
+  sm: { grid: 'sm:grid-cols-none sm:grid-flow-col sm:auto-cols-fr', lift: 'sm:-translate-y-1.5', connector: 'sm:flex' },
+  md: { grid: 'md:grid-cols-none md:grid-flow-col md:auto-cols-fr', lift: 'md:-translate-y-1.5', connector: 'md:flex' },
+  lg: { grid: 'lg:grid-cols-none lg:grid-flow-col lg:auto-cols-fr', lift: 'lg:-translate-y-1.5', connector: 'lg:flex' },
+}
+
+const root = ref<HTMLElement>()
+const hovered = useElementHover(root)
+
+const count = computed(() => props.steps.length)
+const layout = computed(() => ROW_LAYOUT[props.rowFrom])
+const running = computed(() => props.autoplay && count.value > 1)
+const paused = computed(() => props.pauseOnHover && hovered.value)
+
+const timingStyle = computed(() => ({
+  animationDuration: `${props.interval}ms`,
+  animationPlayState: paused.value ? 'paused' : 'running',
+}))
+
+function goTo(to: number) {
+  if (count.value === 0)
+    return
+  active.value = ((to % count.value) + count.value) % count.value
+}
+
+function next() {
+  goTo(active.value + 1)
+}
+
+watch(count, (value) => {
+  if (active.value >= value)
+    goTo(0)
+})
+
+defineExpose({ goTo, next })
+</script>
+
+<template>
+  <ol
+    ref="root"
+    class="grid grid-cols-1 items-stretch gap-5"
+    :class="layout.grid"
+  >
+    <li
+      v-for="(step, i) in steps"
+      :key="i"
+      class="ss-row-card relative flex cursor-pointer flex-col rounded-xl border bg-main p-6 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-(--border-color-focus)"
+      :class="i === active
+        ? ['ss-row-card-active border-brand', layout.lift]
+        : 'border-default opacity-50'"
+      @click="goTo(i)"
+    >
+      <div class="mb-4 flex items-center justify-between">
+        <span
+          class="flex size-12 shrink-0 items-center justify-center rounded-xl transition-colors duration-500"
+          :class="step.iconBg || (i === active ? 'bg-brand' : 'bg-brand-subtle')"
+        >
+          <component
+            :is="step.icon"
+            v-if="step.icon"
+            class="size-5.5 transition-colors duration-500"
+            :class="step.iconColor || (i === active ? 'text-icon-on-brand' : 'text-icon-brand')"
+          />
+        </span>
+
+        <span
+          class="text-display-lg leading-none transition-colors duration-500"
+          :class="i === active
+            ? 'text-brand-200 dark:text-brand-900'
+            : 'text-secondary-50 dark:text-secondary-800'"
+          aria-hidden="true"
+        >
+          {{ i + 1 }}
+        </span>
+      </div>
+
+      <component :is="titleTag" class="mb-1.5 text-h5 text-primary">
+        <button
+          type="button"
+          class="text-left focus-visible:outline-hidden"
+          :aria-current="i === active ? 'step' : undefined"
+          @click.stop="goTo(i)"
+        >
+          {{ step.title }}
+        </button>
+      </component>
+
+      <p
+        class="text-body-md leading-relaxed text-quaternary"
+        :class="{ 'mb-4': $slots.visual }"
+      >
+        {{ step.description }}
+      </p>
+
+      <div
+        v-if="$slots.visual"
+        class="mt-auto"
+      >
+        <slot
+          name="visual"
+          :step="step"
+          :index="i"
+          :is-active="i === active"
+          :active="active"
+          :paused="paused"
+        />
+      </div>
+
+      <span
+        v-if="i === active && running"
+        class="ss-row-prog pointer-events-none absolute inset-x-4 bottom-0 h-[3px] rounded-full bg-linear-to-r from-brand to-brand-400"
+        :style="timingStyle"
+        aria-hidden="true"
+        @animationend="next"
+      />
+
+      <span
+        v-if="connectors && i < steps.length - 1"
+        class="pointer-events-none absolute top-1/2 right-[-13px] z-10 hidden size-6 -translate-y-1/2 items-center justify-center rounded-full border bg-main transition-colors duration-500"
+        :class="[layout.connector, i < active ? 'border-brand text-brand' : 'border-default text-quaternary']"
+        aria-hidden="true"
+      >
+        <a-icon-arrow-right class="size-3.5" />
+      </span>
+    </li>
+  </ol>
+</template>
+
+<style scoped>
+.ss-row-card {
+  transition: border-color .5s ease-out, box-shadow .5s ease-out, opacity .5s ease-out, translate .5s ease-out;
+}
+
+.ss-row-card-active {
+  box-shadow: 0 20px 46px -24px color-mix(in srgb, var(--color-brand-500) 55%, transparent);
+}
+
+.ss-row-prog {
+  transform-origin: left;
+  animation: ss-row-prog linear forwards;
+}
+
+@keyframes ss-row-prog {
+  from {
+    transform: scaleX(0);
+  }
+  to {
+    transform: scaleX(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ss-row-card {
+    transition: none;
+  }
+
+  .ss-row-prog {
+    animation: none;
+  }
+}
+</style>