adata-ui 2.1.40-beta.18 → 2.1.40-beta.19

package/components/elements/slider/ASlider.vue

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

@@ -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/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')

package/components/elements/star-rating/AStarRating.vue

@@ -18,6 +18,8 @@ interface Props {
   fontSize?: number;
   error?: string | boolean;
   errorSize?: 'sm' | 'lg';
+  hideValue?: boolean;
+  hideEmptyStars?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -32,7 +34,9 @@ const props = withDefaults(defineProps<Props>(), {
   ratingPlacement: 'left',
   fontSize: 14,
   error: false,
-  errorSize: 'lg'
+  errorSize: 'lg',
+  hideValue: false,
+  hideEmptyStars: false
 })
 
 const fillLevel = ref<number[]>([])
@@ -51,6 +55,10 @@ const roundedRating = computed(() => {
 })
 const shouldRound = computed(() => ratingSelected.value || props.roundStartRating)
 
+const visibleStarsCount = computed(() => {
+  if (!props.hideEmptyStars) return props.max
+  return Math.min(props.max, Math.max(1, Math.ceil(currentRating.value)))
+})
 
 watch(modelValue, (e)=>{
   currentRating.value = e
@@ -105,7 +113,7 @@ createStars(shouldRound.value)
   <div>
     <div class="w-full flex items-center gap-2">
       <span
-        v-if="ratingPlacement === 'left'"
+        v-if="ratingPlacement === 'left' && !hideValue"
         class="text-gray-600 dark:text-gray-300 mt-px"
         :style="{fontSize: `${fontSize}px`}"
       >
@@ -118,7 +126,7 @@ createStars(shouldRound.value)
         @mouseleave="resetRating"
       >
         <star
-          v-for="n in max"
+          v-for="n in visibleStarsCount"
           :key="n"
           :fill="fillLevel[n-1]"
           :size="starSize"
@@ -127,7 +135,7 @@ createStars(shouldRound.value)
         />
       </div>
       <span
-        v-if="ratingPlacement === 'right'"
+        v-if="ratingPlacement === 'right' && !hideValue"
         class="text-sm text-gray-600 dark:text-gray-300 mt-px"
       >
         {{ modelValue }}

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

@@ -1,74 +1,121 @@
 <script lang="ts" setup>
-import {twMerge} from "tailwind-merge";
+type BadgeType = 'primary' | 'success' | 'danger' | 'gray' | 'warning'
+type BadgeView = 'default' | 'inverted' | 'transparent' | 'subtle'
+type BadgeSize = 'xs' | 'sm' | 'md' | 'lg'
 
-defineOptions({ name: 'AStatusBadge' })
+type StateType = {
+  [key in BadgeType]?: string
+}
+
+interface ViewType {
+  default: StateType
+  inverted: StateType
+  transparent: StateType
+  subtle: StateType
+}
 
 interface Props {
-  type?: 'primary' | 'success' | 'danger' | 'gray' | 'orange' | 'warning'
-  view?: 'default' | 'inverted' | 'transparent'
-  size?:  'xs' | 'sm' | 'lg'
+  type?: BadgeType
+  view?: BadgeView
+  size?: BadgeSize
+  point?: boolean
   customClasses?: string
 }
 
+defineOptions({ name: 'AStatusBadge' })
+
 const props = withDefaults(defineProps<Props>(), {
   type: 'primary',
   view: 'default',
   size: 'lg',
-  customClasses: ''
+  point: false,
+  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'
+    primary: 'bg-[#068DFF] text-white border-transparent dark:bg-[#068DFF]/30 dark:text-blue-100',
+    success: 'bg-[#00A63E] text-white border-transparent dark:bg-[#00A63E]/30 dark:text-green-100',
+    danger: 'bg-[#E7000B] text-white border-transparent dark:bg-[#E7000B]/30 dark:text-red-100',
+    warning: 'bg-[#E17100] text-white border-transparent dark:bg-[#E17100]/30 dark:text-orange-100',
+    gray: 'bg-[#4A5565] text-white border-transparent dark:bg-[#4A5565]/30 dark:text-gray-100',
   },
   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'
+    primary: 'bg-[#F0F8FF] text-[#068DFF] border-transparent dark:bg-[#068DFF]/10 dark:text-blue-400',
+    success: 'bg-[#DCFCE7] text-[#008236] border-transparent dark:bg-[#00A63E]/10 dark:text-green-400',
+    danger: 'bg-[#FFE2E2] text-[#C10007] border-transparent dark:bg-[#E7000B]/10 dark:text-red-400',
+    warning: 'bg-[#FEF3C6] text-[#9A5800] border-transparent dark:bg-[#E17100]/10 dark:text-orange-400',
+    gray: 'bg-[#F3F4F6] text-[#364153] border-transparent dark:bg-[#4A5565]/10 dark:text-gray-300',
   },
   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'
-  }
+    primary: 'bg-white border-[#B3DCFF] text-[#0066BD] dark:bg-transparent dark:border-[#068DFF]/50 dark:text-blue-400',
+    success: 'bg-white border-[#7BF1A8] text-[#008236] dark:bg-transparent dark:border-[#00A63E]/50 dark:text-green-400',
+    danger: 'bg-white border-[#FFA2A2] text-[#C10007] dark:bg-transparent dark:border-[#E7000B]/50 dark:text-red-400',
+    warning: 'bg-white border-[#FFD230] text-[#9A5800] dark:bg-transparent dark:border-[#E17100]/50 dark:text-orange-400',
+    gray: 'bg-white border-[#D1D5DC] text-[#364153] dark:bg-transparent dark:border-[#4A5565]/50 dark:text-gray-300',
+  },
+  subtle: {
+    primary: 'bg-[#068DFF]/5 border-[#B3DCFF] text-[#068DFF] dark:bg-blue-500/10 dark:border-[#068DFF]/40 dark:text-blue-400',
+    success: 'bg-[#00A63E]/5 border-[#7BF1A8] text-[#00A63E] dark:bg-green-500/10 dark:border-[#00A63E]/40 dark:text-green-400',
+    danger: 'bg-[#E7000B]/5 border-[#FFA2A2] text-[#E7000B] dark:bg-red-500/10 dark:border-[#E7000B]/40 dark:text-red-400',
+    warning: 'bg-[#E17100]/5 border-[#FFD230] text-[#E17100] dark:bg-yellow-500/10 dark:border-[#E17100]/40 dark:text-orange-400',
+    gray: 'bg-[#4A5565]/5 border-[#D1D5DC] text-[#4A5565] dark:bg-gray-500/10 dark:border-[#4A5565]/40 dark:text-gray-300',
+  },
 }
 
-
-
-
-type StateType = {
-  [key in 'primary' | 'success' | 'danger' | 'gray' | 'orange' | 'warning']?: string
+const pointSwitchValues: ViewType = {
+  default: {
+    primary: 'bg-white',
+    success: 'bg-white',
+    danger: 'bg-white',
+    warning: 'bg-white',
+    gray: 'bg-white',
+  },
+  inverted: {
+    primary: 'bg-[#068DFF] dark:bg-blue-400',
+    success: 'bg-[#00A63E] dark:bg-green-400',
+    danger: 'bg-[#E7000B] dark:bg-red-400',
+    warning: 'bg-[#E17100] dark:bg-orange-400',
+    gray: 'bg-[#6A7282] dark:bg-gray-300',
+  },
+  transparent: {
+    primary: 'bg-[#068DFF] dark:bg-blue-400',
+    success: 'bg-[#00A63E] dark:bg-green-400',
+    danger: 'bg-[#E7000B] dark:bg-red-400',
+    warning: 'bg-[#E17100] dark:bg-orange-400',
+    gray: 'bg-[#6A7282] dark:bg-gray-300',
+  },
+  subtle: {
+    primary: 'bg-[#068DFF] dark:bg-blue-400',
+    success: 'bg-[#00A63E] dark:bg-green-400',
+    danger: 'bg-[#E7000B] dark:bg-red-400',
+    warning: 'bg-[#E17100] dark:bg-orange-400',
+    gray: 'bg-[#6A7282] dark:bg-gray-300',
+  },
 }
 
-type ViewType = {
-  default: StateType
-  inverted: StateType
-  transparent: StateType
-};
-
-
+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-[6x] 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"/>
+    <slot name="point">
+      <span v-if="point" :class="pointClasses" />
+    </slot>
     <slot />
   </div>
 </template>

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

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