adata-ui 2.1.41-beta.1 → 2.1.41

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

@@ -1,270 +1,232 @@
-<script setup lang="ts">
-import type { Component } from 'vue'
-
-interface Step {
-  title: string
-  description: string
-  icon?: Component
-  iconBg?: string
-  iconColor?: string
-  chips?: string[]
-}
-
-const props = withDefaults(defineProps<{
-  steps: Step[]
-  interval?: number
-  autoplay?: boolean
-  pauseOnHover?: boolean
-  modelValue?: number
-  colsClass?: string
-  expandable?: boolean
-}>(), {
-  interval: 5000,
-  autoplay: true,
-  pauseOnHover: true,
-  modelValue: undefined,
-  colsClass: 'lg:grid-cols-2',
-  expandable: true,
-})
-
-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()
-}
-
-const isPaused = ref(false)
-
-function onMouseEnter() {
-  if (!props.pauseOnHover) return
-  isPaused.value = true
-  stopTicker()
-}
-
-function onMouseLeave() {
-  if (!props.pauseOnHover) return
-  isPaused.value = false
-  startTicker()
-}
-
-onMounted(startTicker)
-onBeforeUnmount(stopTicker)
-watch(() => [props.interval, props.autoplay, props.steps.length], () => {
-  elapsed.value = 0
-  startTicker()
-})
-</script>
-
-<template>
-  <!-- eslint-disable tailwindcss/no-unnecessary-arbitrary-value --
-       Размеры и типографика скопированы из макета литералами (см. предупреждения
-       правила). Токены здесь не использовать: подсказка leading-1.4 в v4 значит
-       0.35rem, а не line-height 1.4. -->
-  <div
-    class="grid grid-cols-1 gap-8"
-    :class="colsClass"
-    @mouseenter="onMouseEnter"
-    @mouseleave="onMouseLeave"
-  >
-    <ol class="flex flex-col gap-2">
-      <li
-        v-for="(step, i) in steps"
-        :key="i"
-        class="ss-card group relative cursor-pointer overflow-hidden rounded-14 border bg-main transition-[background-color,box-shadow,border-color,opacity] duration-300"
-        :class="i === active
-          ? 'ss-card-active border-strong'
-          : 'border-default opacity-60 hover:bg-brand-subtle hover:opacity-100'"
-        @click="goTo(i)"
-      >
-        <div class="p-4">
-          <div
-            class="flex gap-[13px]"
-            :class="expandable ? 'items-center' : 'items-start'"
-          >
-            <span
-              class="flex size-10 shrink-0 items-center justify-center rounded-[12px]"
-              :class="step.iconBg || 'bg-brand-subtle'"
-            >
-              <component
-                :is="step.icon"
-                v-if="step.icon"
-                class="size-5"
-                :class="step.iconColor || 'text-brand'"
-              />
-            </span>
-            <div class="min-w-0 flex-1">
-              <p
-                class="block text-[14px] font-bold transition-colors"
-                :class="i === active ? 'text-primary' : 'text-quaternary'"
-              >
-                {{ step.title }}
-              </p>
-
-              <div v-if="!expandable">
-                <p
-                  class="mt-0.5 block text-[12px] leading-[1.4] transition-colors"
-                  :class="i === active ? 'text-quaternary' : 'text-secondary'"
-                >
-                  {{ step.description }}
-                </p>
-                <div
-                  v-if="step.chips?.length"
-                  class="mt-3 flex flex-wrap gap-2"
-                >
-                  <a-status-badge
-                    v-for="(chip, ci) in step.chips"
-                    :key="ci"
-                    type="primary"
-                    view="inverted"
-                    size="xs"
-                    custom-classes="!text-body-sm-medium"
-                  >
-                    {{ chip }}
-                  </a-status-badge>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div
-            v-if="expandable"
-            class="grid transition-all duration-500 ease-out"
-            :class="i === active
-              ? 'mt-3 grid-rows-[1fr] opacity-100'
-              : 'grid-rows-[0fr] opacity-0'"
-          >
-            <div class="overflow-hidden">
-              <p class="text-body-sm text-quaternary">
-                {{ step.description }}
-              </p>
-              <div
-                v-if="step.chips?.length"
-                class="mt-3 flex flex-wrap gap-2"
-              >
-                <a-status-badge
-                  v-for="(chip, ci) in step.chips"
-                  :key="ci"
-                  type="primary"
-                  view="inverted"
-                  size="xs"
-                  custom-classes="!text-body-sm-medium"
-                >
-                  {{ chip }}
-                </a-status-badge>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Прогресс — CSS-анимация scaleX, как в макете (не JS-ширина);
-             длительность приходит переменной: scoped-стили переименовывают
-             @keyframes, поэтому inline-строку animation здесь использовать нельзя.
-             Константный бренд-градиент — одинаков в темах. -->
-        <span
-          v-if="i === active && autoplay && steps.length > 1"
-          :key="active"
-          class="cap-prog absolute inset-x-0 bottom-0 h-[3px] bg-linear-to-r from-brand to-[#4da8ff]"
-          :class="{ 'is-paused': isPaused }"
-          :style="{ '--cap-dur': `${interval}ms` }"
-        />
-      </li>
-    </ol>
-
-    <div class="flex justify-center">
-      <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-card-active {
-  box-shadow: 0 14px 34px -18px color-mix(in srgb, var(--color-brand-500) 32%, transparent);
-}
-
-@keyframes cap-prog {
-  from {
-    transform: scaleX(0);
-  }
-  to {
-    transform: scaleX(1);
-  }
-}
-
-.cap-prog {
-  transform-origin: left;
-  animation: cap-prog var(--cap-dur, 4600ms) linear;
-}
-
-.cap-prog.is-paused {
-  animation-play-state: paused;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .cap-prog {
-    animation: none;
-    transform: none;
-  }
-}
-</style>
+<script setup lang="ts">
+import type { Component } from 'vue'
+
+interface Step {
+  title: string
+  description: string
+  icon?: Component
+  iconBg?: string
+  iconColor?: string
+  chips?: string[]
+}
+
+const props = withDefaults(defineProps<{
+  steps: Step[]
+  interval?: number
+  autoplay?: boolean
+  pauseOnHover?: boolean
+  modelValue?: number
+  colsClass?: string
+  expandable?: boolean
+}>(), {
+  interval: 5000,
+  autoplay: true,
+  pauseOnHover: true,
+  modelValue: undefined,
+  colsClass: 'lg:grid-cols-2',
+  expandable: true,
+})
+
+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 gap-4 lg:gap-10"
+    :class="colsClass"
+  >
+    <ol class="flex flex-col gap-3">
+      <li
+        v-for="(step, i) in steps"
+        :key="i"
+        class="ss-card group relative cursor-pointer overflow-hidden rounded-2xl border bg-white transition-all duration-300"
+        :class="i === active
+          ? 'ss-card-active border-blue-200'
+          : 'border-gray-200 hover:border-blue-100'"
+        @click="goTo(i)"
+      >
+        <div class="p-4">
+          <div
+            class="flex gap-4"
+            :class="expandable ? 'items-center' : 'items-start'"
+          >
+            <span
+              class="flex size-11 shrink-0 items-center justify-center rounded-xl"
+              :class="step.iconBg || 'bg-blue-50'"
+            >
+              <component
+                :is="step.icon"
+                v-if="step.icon"
+                class="size-5"
+                :class="step.iconColor || 'text-blue-600'"
+              />
+            </span>
+            <div class="min-w-0 flex-1">
+              <p class="text-body-md-strong md:text-body-lg-strong text-gray-900">
+                {{ step.title }}
+              </p>
+
+              <div v-if="!expandable">
+                <p class="mt-1 text-body-sm text-gray-500">
+                  {{ step.description }}
+                </p>
+                <div
+                  v-if="step.chips?.length"
+                  class="mt-3 flex flex-wrap gap-2"
+                >
+                  <a-status-badge
+                    v-for="(chip, ci) in step.chips"
+                    :key="ci"
+                    type="primary"
+                    view="inverted"
+                    size="xs"
+                    custom-classes="!text-body-sm-medium"
+                  >
+                    {{ chip }}
+                  </a-status-badge>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div
+            v-if="expandable"
+            class="grid transition-all duration-500 ease-out"
+            :class="i === active
+              ? 'mt-3 grid-rows-[1fr] opacity-100'
+              : 'grid-rows-[0fr] opacity-0'"
+          >
+            <div class="overflow-hidden">
+              <p class="text-body-sm text-gray-500">
+                {{ step.description }}
+              </p>
+              <div
+                v-if="step.chips?.length"
+                class="mt-3 flex flex-wrap gap-2"
+              >
+                <a-status-badge
+                  v-for="(chip, ci) in step.chips"
+                  :key="ci"
+                  type="primary"
+                  view="inverted"
+                  size="xs"
+                  custom-classes="!text-body-sm-medium"
+                >
+                  {{ chip }}
+                </a-status-badge>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <span
+          v-if="i === active && autoplay && steps.length > 1"
+          class="absolute inset-x-0 bottom-0 h-1 bg-gray-100"
+        >
+          <span
+            class="block h-full rounded-r-full bg-gradient-to-r from-blue-600 to-blue-400 transition-[width] duration-100 ease-linear"
+            :style="{ width: fillWidth }"
+          />
+        </span>
+      </li>
+    </ol>
+
+    <div
+      @mouseenter="onMouseEnter"
+      @mouseleave="onMouseLeave"
+    >
+      <div class="flex justify-center">
+        <slot
+          name="panel"
+          :active="active"
+          :step="steps[active]"
+          :progress="progress"
+          :count="steps.length"
+          :fill-width="fillWidth"
+          :go-to="goTo"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.ss-card-active {
+  box-shadow: 0 22px 60px -18px rgb(6 141 255 / 22%);
+}
+</style>