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

package/components/elements/status-badge/AStatusBadge.vue

@@ -1,74 +1,125 @@
-<script lang="ts" setup>
-import {twMerge} from "tailwind-merge";
-
-defineOptions({ name: 'AStatusBadge' })
-
-interface Props {
-  type?: 'primary' | 'success' | 'danger' | 'gray' | 'orange' | 'warning'
-  view?: 'default' | 'inverted' | 'transparent'
-  size?:  'xs' | 'sm' | 'lg'
-  customClasses?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  type: 'primary',
-  view: 'default',
-  size: 'lg',
-  customClasses: ''
-})
-
-const classes = computed(() =>
-  [
-    'text-sm rounded-md select-none inline-flex gap-[5.5px] justify-center items-center',
-    typeSwitchValues[props.view][props.type],
-    props.size === 'xs'? 'px-4 py-[2px] text-xs font-bold' : '',
-    props.size === 'sm'? 'text-xs font-semibold px-4 py-[2px] h-6' : '',
-    props.size === 'lg'? 'px-4 py-[7.5px] font-semibold' : '',
-  ])
-
-
-const typeSwitchValues: ViewType = {
-  default: {
-    primary: 'bg-blue-700 text-white dark:text-gray-900 dark:bg-blue-500',
-    success: 'bg-green-500 text-white dark:text-gray-200 dark:bg-green-400',
-    danger: 'bg-red-500 text-white dark:text-gray-200  ',
-    warning: 'bg-yellow-400 text-white dark:text-gray-200  ',
-    gray: 'bg-deepblue-900 text-white dark:text-gray-200 dark:bg-gray-200/10',
-    orange: 'bg-orange-600 text-white  dark:text-gray-200'
-  },
-  inverted: {
-    primary: 'bg-blue-700/10  text-blue-700 dark:text-blue-500 dark:bg-[#1EABFF1A]',
-    success: 'bg-green-500/20  text-green-500 dark:text-green-400 dark:bg-green-400/20',
-    danger: 'bg-red-500/10 text-red-500  dark:text-red-400 dark:bg-red-400/10',
-    warning: 'bg-yellow-400/10 text-yellow-400',
-    gray: 'bg-deepblue-900/10 text-gray-600 dark:text-gray-200 dark:bg-gray-200/10',
-    orange: 'bg-orange-600/10 text-orange-600'
-  },
-  transparent: {
-    success: 'bg-green-500/10 text-green-500 dark:bg-green-400/10 dark:text-green-400',
-    danger: 'bg-red-500/10 text-red-500 dark:bg-red-400/10 dark:text-red-400'
-  }
-}
-
-
-
-
-type StateType = {
-  [key in 'primary' | 'success' | 'danger' | 'gray' | 'orange' | 'warning']?: string
-}
-
-type ViewType = {
-  default: StateType
-  inverted: StateType
-  transparent: StateType
-};
-
-
-
-</script>
-<template>
-  <div :class="[[classes], customClasses]">
-    <slot name="point"/>
-    <slot />
-  </div>
-</template>
+<script lang="ts" setup>
+type BadgeType = 'primary' | 'success' | 'danger' | 'gray' | 'warning'
+type BadgeView = 'default' | 'inverted' | 'transparent' | 'subtle'
+type BadgeSize = 'xs' | 'sm' | 'md' | 'lg'
+
+type StateType = {
+  [key in BadgeType]?: string
+}
+
+interface ViewType {
+  default: StateType
+  inverted: StateType
+  transparent: StateType
+  subtle: StateType
+}
+
+interface Props {
+  type?: BadgeType
+  view?: BadgeView
+  size?: BadgeSize
+  point?: boolean
+  customClasses?: string
+}
+
+defineOptions({ name: 'AStatusBadge' })
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'primary',
+  view: 'default',
+  size: 'lg',
+  point: false,
+  customClasses: '',
+})
+
+const typeSwitchValues: ViewType = {
+  default: {
+    primary: 'bg-brand text-white border-transparent',
+    success: 'bg-success text-white border-transparent',
+    danger: 'bg-danger text-white border-transparent',
+    warning: 'bg-warning text-white border-transparent',
+    /* solid-серый бейдж: токена нет, константный примитив */
+    gray: 'bg-gray-600 text-white border-transparent',
+  },
+  inverted: {
+    primary: 'bg-brand-subtle text-brand border-transparent',
+    success: 'bg-success-subtle text-success border-transparent',
+    danger: 'bg-danger-subtle text-danger border-transparent',
+    warning: 'bg-warning-subtle text-warning border-transparent',
+    gray: 'bg-muted text-quaternary border-transparent',
+  },
+  /* бордеры: для brand/green/yellow пастельных токенов нет — примитивы осознанно */
+  transparent: {
+    primary: 'bg-main border-brand-200 text-brand dark:bg-transparent',
+    success: 'bg-main border-green-300 text-success dark:bg-transparent',
+    danger: 'bg-main border-red text-danger dark:bg-transparent',
+    warning: 'bg-main border-yellow-300 text-warning dark:bg-transparent',
+    gray: 'bg-main border-strong text-quaternary dark:bg-transparent',
+  },
+  /* тинты и пастельные бордеры subtle-вью: токенов нет — примитивы + dark:-пары осознанно */
+  subtle: {
+    primary: 'bg-brand-500/5 border-brand-200 text-brand dark:bg-brand-500/10 dark:border-brand-500/40',
+    success: 'bg-green-600/5 border-green-300 text-success dark:bg-green-500/10 dark:border-green-600/40',
+    danger: 'bg-red-600/5 border-red text-danger dark:bg-red-500/10 dark:border-red-600/40',
+    warning: 'bg-amber-600/5 border-yellow-300 text-warning dark:bg-yellow-500/10 dark:border-amber-600/40',
+    gray: 'bg-gray-600/5 border-strong text-quaternary dark:bg-gray-500/10 dark:border-gray-600/40',
+  },
+}
+
+const pointSwitchValues: ViewType = {
+  default: {
+    /* белая точка на цветной плашке — осознанно константный white */
+    primary: 'bg-white',
+    success: 'bg-white',
+    danger: 'bg-white',
+    warning: 'bg-white',
+    gray: 'bg-white',
+  },
+  inverted: {
+    primary: 'bg-brand',
+    success: 'bg-success',
+    danger: 'bg-danger',
+    warning: 'bg-warning',
+    gray: 'bg-icon-default',
+  },
+  transparent: {
+    primary: 'bg-brand',
+    success: 'bg-success',
+    danger: 'bg-danger',
+    warning: 'bg-warning',
+    gray: 'bg-icon-default',
+  },
+  subtle: {
+    primary: 'bg-brand',
+    success: 'bg-success',
+    danger: 'bg-danger',
+    warning: 'bg-warning',
+    gray: 'bg-icon-default',
+  },
+}
+
+const classes = computed(() =>
+  [
+    'text-body-md rounded-2xl select-none inline-flex gap-[5.5px] justify-center items-center border',
+    typeSwitchValues[props.view][props.type],
+    props.size === 'xs' ? 'px-2 py-[2px] text-body-sm font-bold' : '',
+    props.size === 'sm' ? 'px-[10px] py-1 text-body-sm font-semibold h-6' : '',
+    props.size === 'md' ? 'px-3 py-[6px] text-body-sm font-semibold h-7' : '',
+    props.size === 'lg' ? 'px-4 py-[6px] font-semibold' : '',
+  ])
+
+const pointClasses = computed(() =>
+  [
+    'w-1.5 h-1.5 rounded-full shrink-0',
+    pointSwitchValues[props.view][props.type],
+  ])
+</script>
+
+<template>
+  <div :class="[[classes], customClasses]">
+    <slot name="point">
+      <span v-if="point" :class="pointClasses" />
+    </slot>
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,233 @@
+<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-main transition-all duration-300"
+        :class="i === active
+          ? 'ss-card-active border-brand-200 dark:border-brand-500/40'
+          : 'border-default hover:border-brand-100 dark:hover:border-brand-500/25'"
+        @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-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="text-body-md-strong md:text-body-lg-strong text-primary">
+                {{ step.title }}
+              </p>
+
+              <div v-if="!expandable">
+                <p class="mt-1 text-body-sm 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-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>
+
+        <span
+          v-if="i === active && autoplay && steps.length > 1"
+          class="absolute inset-x-0 bottom-0 h-1 bg-muted"
+        >
+          <!-- осознанно константный: фирменный бренд-градиент прогресса, одинаков в темах -->
+          <span
+            class="block h-full rounded-r-full bg-linear-to-r from-brand-500 to-brand-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 color-mix(in srgb, var(--color-brand-500) 22%, transparent);
+}
+</style>

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

@@ -0,0 +1,178 @@
+<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-center gap-4 lg:gap-16"
+    :class="colsClass"
+  >
+    <ol class="flex flex-col gap-4">
+      <li
+        v-for="(step, i) in steps"
+        :key="i"
+        class="group relative flex cursor-pointer items-start gap-4 px-4 py-3"
+        @click="goTo(i)"
+      >
+        <span
+          v-if="i === active"
+          class="ss-card-glow absolute inset-0 z-[1] rounded-2xl bg-main"
+        />
+        <span
+          v-if="i < steps.length - 1"
+          class="absolute left-[34px] top-[46px] z-0 h-[calc(100%_-_18px)] w-0.5 -translate-x-1/2 rounded transition-colors"
+          :class="i < active ? 'bg-brand' : 'bg-badge'"
+        />
+        <span class="relative z-10 flex w-9 shrink-0 justify-center">
+          <span
+            class="text-body-md flex items-center justify-center rounded-full font-bold transition-all duration-300"
+            :class="i === active
+              ? 'ss-num-glow size-9 bg-brand text-action-primary-fg'
+              : i < active
+                ? 'size-[34px] bg-brand-subtle text-brand group-hover:bg-blue-subtle'
+                : 'size-[34px] bg-muted text-disabled group-hover:bg-badge'"
+          >
+            {{ i + 1 }}
+          </span>
+        </span>
+        <div class="relative z-10">
+          <p
+            class="text-body-lg-strong transition-colors"
+            :class="i === active
+              ? 'text-primary'
+              : i < active
+                ? 'text-quaternary'
+                : 'text-disabled'"
+          >
+            {{ step.title }}
+          </p>
+          <p class="text-body-md text-secondary">
+            {{ step.description }}
+          </p>
+        </div>
+      </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-num-glow {
+  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-brand-500) 45%, transparent);
+}
+
+.ss-card-glow {
+  box-shadow: 0 22px 60px -18px color-mix(in srgb, var(--color-brand-500) 32%, transparent);
+}
+</style>