adata-ui 2.1.40-beta.9 → 2.1.40

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

@@ -1,189 +1,189 @@
-<script setup lang="ts">
-import Star from "./ui/Star.vue";
-import type {StarMoveEvent} from "./types";
-import AAlert from "#adata-ui/components/elements/alert/AAlert.vue";
-
-const modelValue = defineModel<number>(0)
-
-interface Props {
-  max?: number;
-  readonly?: boolean;
-  increment?: number;
-  roundStartRating?: boolean;
-  starSize?: number;
-  activeOnClick?: boolean;
-  fixedPoints?: number | null;
-  gap?: number;
-  ratingPlacement?: 'left' | 'right';
-  fontSize?: number;
-  error?: string | boolean;
-  errorSize?: 'sm' | 'lg';
-  hideValue?: boolean;
-  hideEmptyStars?: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  max: 5,
-  increment: 1,
-  readonly: false,
-  roundStartRating: true,
-  starSize: 16,
-  activeOnClick: false,
-  fixedPoints: null,
-  gap: 4,
-  ratingPlacement: 'left',
-  fontSize: 14,
-  error: false,
-  errorSize: 'lg',
-  hideValue: false,
-  hideEmptyStars: false
-})
-
-const fillLevel = ref<number[]>([])
-const currentRating = ref<number>(modelValue.value)
-const selectedRating = ref<number>(modelValue.value)
-const ratingSelected = ref<boolean>(false)
-
-const gapStyle = computed(() => {
-  return {
-    gap: `${props.gap}px`
-  }
-})
-const roundedRating = computed(() => {
-  const inv = 1.0 / props.increment
-  return Math.min(props.max, Math.ceil(currentRating.value * inv) / inv)
-})
-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
-  selectedRating.value = e
-  createStars()
-})
-
-const resetRating = () => {
-  if (!props.readonly) {
-    currentRating.value = selectedRating.value
-    modelValue.value = selectedRating.value
-    createStars(shouldRound.value)
-  }
-}
-
-const createStars = (round: boolean = true, applyFill: boolean = true) => {
-  currentRating.value = (round) ? roundedRating.value : currentRating.value
-
-  for (let i = 0; i < props.max; i++) {
-    let level = 0
-    if (i < currentRating.value) {
-      level = (currentRating.value - i > 1) ? 100 : (currentRating.value - i) * 100
-    }
-    if (applyFill) {
-      fillLevel.value[i] = Math.round(level)
-    }
-  }
-}
-
-const setRating = (event: StarMoveEvent, persist: boolean) => {
-  if (!props.readonly) {
-    const position = event.position / 100
-    currentRating.value = ((event.id + position) - 1).toFixed(2)
-    currentRating.value = (currentRating.value > props.max) ? props.max : currentRating.value
-    modelValue.value = roundedRating.value
-    if (persist) {
-      createStars(true, true)
-      selectedRating.value = (currentRating.value === selectedRating.value) ? 0 : currentRating.value
-      modelValue.value = selectedRating.value
-      ratingSelected.value = true
-
-    } else {
-      createStars(true, !props.activeOnClick)
-    }
-  }
-}
-
-createStars(shouldRound.value)
-</script>
-
-<template>
-  <div>
-    <div class="w-full flex items-center gap-2">
-      <span
-        v-if="ratingPlacement === 'left' && !hideValue"
-        class="text-gray-600 dark:text-gray-300 mt-px"
-        :style="{fontSize: `${fontSize}px`}"
-      >
-        {{ modelValue }}
-      </span>
-      <div
-        :class="{'pointer-events-none': readonly}"
-        class="flex items-center"
-        :style="gapStyle"
-        @mouseleave="resetRating"
-      >
-        <star
-          v-for="n in visibleStarsCount"
-          :key="n"
-          :fill="fillLevel[n-1]"
-          :size="starSize"
-          :star-id="n"
-          @star-selected="setRating($event, true)"
-        />
-      </div>
-      <span
-        v-if="ratingPlacement === 'right' && !hideValue"
-        class="text-sm text-gray-600 dark:text-gray-300 mt-px"
-      >
-        {{ modelValue }}
-      </span>
-    </div>
-    <Transition name="slide-in">
-      <div
-        v-if="error && typeof error === 'string'"
-        class="mt-1"
-      >
-        <a-alert
-          :color="'red'"
-          :size="errorSize"
-          :icon-type="'triangle'"
-        >
-          <template #default>
-            <span
-              v-for="(err, index) in error.split(', ')"
-              :key="index"
-            >{{ err }}<br></span>
-          </template>
-        </a-alert>
-      </div>
-    </Transition>
-  </div>
-</template>
-
-<style scoped>
-.slide-in-enter-active {
-  z-index: 0;
-  opacity: 0;
-  transform: translateY(-50%);
-  transition: transform 0.5s;
-}
-
-.slide-in-enter-to {
-  z-index: auto;
-  opacity: 1;
-  transform: translateY(0);
-}
-
-.slide-in-leave-active {
-  opacity: 1;
-  transform: translateY(0);
-}
-
-.slide-in-leave-to {
-  opacity: 0;
-  transform: translateY(-100%);
-}
-</style>
+<script setup lang="ts">
+import Star from "./ui/Star.vue";
+import type {StarMoveEvent} from "./types";
+import AAlert from "#adata-ui/components/elements/alert/AAlert.vue";
+
+const modelValue = defineModel<number>(0)
+
+interface Props {
+  max?: number;
+  readonly?: boolean;
+  increment?: number;
+  roundStartRating?: boolean;
+  starSize?: number;
+  activeOnClick?: boolean;
+  fixedPoints?: number | null;
+  gap?: number;
+  ratingPlacement?: 'left' | 'right';
+  fontSize?: number;
+  error?: string | boolean;
+  errorSize?: 'sm' | 'lg';
+  hideValue?: boolean;
+  hideEmptyStars?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  max: 5,
+  increment: 1,
+  readonly: false,
+  roundStartRating: true,
+  starSize: 16,
+  activeOnClick: false,
+  fixedPoints: null,
+  gap: 4,
+  ratingPlacement: 'left',
+  fontSize: 14,
+  error: false,
+  errorSize: 'lg',
+  hideValue: false,
+  hideEmptyStars: false
+})
+
+const fillLevel = ref<number[]>([])
+const currentRating = ref<number>(modelValue.value)
+const selectedRating = ref<number>(modelValue.value)
+const ratingSelected = ref<boolean>(false)
+
+const gapStyle = computed(() => {
+  return {
+    gap: `${props.gap}px`
+  }
+})
+const roundedRating = computed(() => {
+  const inv = 1.0 / props.increment
+  return Math.min(props.max, Math.ceil(currentRating.value * inv) / inv)
+})
+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
+  selectedRating.value = e
+  createStars()
+})
+
+const resetRating = () => {
+  if (!props.readonly) {
+    currentRating.value = selectedRating.value
+    modelValue.value = selectedRating.value
+    createStars(shouldRound.value)
+  }
+}
+
+const createStars = (round: boolean = true, applyFill: boolean = true) => {
+  currentRating.value = (round) ? roundedRating.value : currentRating.value
+
+  for (let i = 0; i < props.max; i++) {
+    let level = 0
+    if (i < currentRating.value) {
+      level = (currentRating.value - i > 1) ? 100 : (currentRating.value - i) * 100
+    }
+    if (applyFill) {
+      fillLevel.value[i] = Math.round(level)
+    }
+  }
+}
+
+const setRating = (event: StarMoveEvent, persist: boolean) => {
+  if (!props.readonly) {
+    const position = event.position / 100
+    currentRating.value = ((event.id + position) - 1).toFixed(2)
+    currentRating.value = (currentRating.value > props.max) ? props.max : currentRating.value
+    modelValue.value = roundedRating.value
+    if (persist) {
+      createStars(true, true)
+      selectedRating.value = (currentRating.value === selectedRating.value) ? 0 : currentRating.value
+      modelValue.value = selectedRating.value
+      ratingSelected.value = true
+
+    } else {
+      createStars(true, !props.activeOnClick)
+    }
+  }
+}
+
+createStars(shouldRound.value)
+</script>
+
+<template>
+  <div>
+    <div class="w-full flex items-center gap-2">
+      <span
+        v-if="ratingPlacement === 'left' && !hideValue"
+        class="text-gray-600 dark:text-gray-300 mt-px"
+        :style="{fontSize: `${fontSize}px`}"
+      >
+        {{ modelValue }}
+      </span>
+      <div
+        :class="{'pointer-events-none': readonly}"
+        class="flex items-center"
+        :style="gapStyle"
+        @mouseleave="resetRating"
+      >
+        <star
+          v-for="n in visibleStarsCount"
+          :key="n"
+          :fill="fillLevel[n-1]"
+          :size="starSize"
+          :star-id="n"
+          @star-selected="setRating($event, true)"
+        />
+      </div>
+      <span
+        v-if="ratingPlacement === 'right' && !hideValue"
+        class="text-sm text-gray-600 dark:text-gray-300 mt-px"
+      >
+        {{ modelValue }}
+      </span>
+    </div>
+    <Transition name="slide-in">
+      <div
+        v-if="error && typeof error === 'string'"
+        class="mt-1"
+      >
+        <a-alert
+          :color="'red'"
+          :size="errorSize"
+          :icon-type="'triangle'"
+        >
+          <template #default>
+            <span
+              v-for="(err, index) in error.split(', ')"
+              :key="index"
+            >{{ err }}<br></span>
+          </template>
+        </a-alert>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+.slide-in-enter-active {
+  z-index: 0;
+  opacity: 0;
+  transform: translateY(-50%);
+  transition: transform 0.5s;
+}
+
+.slide-in-enter-to {
+  z-index: auto;
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.slide-in-leave-active {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.slide-in-leave-to {
+  opacity: 0;
+  transform: translateY(-100%);
+}
+</style>

package/components/elements/star-rating/types.ts

@@ -1,8 +1,8 @@
-export type SelectEvent = {
-    position: number;
-    id: number;
-}
-
-export type StarMoveEvent = SelectEvent & {
-    event: MouseEvent;
+export type SelectEvent = {
+    position: number;
+    id: number;
+}
+
+export type StarMoveEvent = SelectEvent & {
+    event: MouseEvent;
 }