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

package/components/elements/photos-animation/APhotosAnimation.vue

@@ -1,85 +1,85 @@
-<script setup lang="ts">
-interface Photo {
-  src: string
-  classes: string
-}
-
-const props = defineProps<{
-  photos: Photo[]
-}>()
-
-const getAnimationClass = (index: number) => {
-  if (props.photos.length === 1) return 'fade-in'
-  const directions = ['from-top', 'from-right', 'from-bottom', 'from-left']
-  return directions[index % 4]
-}
-</script>
-
-<template>
-  <div class="relative size-full">
-    <img
-      v-for="(photo, index) in photos"
-      :key="index"
-      :src="photo.src"
-      :alt="photo.src"
-      loading="lazy"
-      :class="['photo', getAnimationClass(index), photo.classes]"
-    />
-  </div>
-</template>
-
-<style scoped>
-.photo {
-  position: absolute;
-  opacity: 0;
-  transform: translate(0, 0);
-  animation: fadeSlide 1s forwards;
-}
-
-.fade-in {
-  animation: fadeOnly 1s forwards;
-}
-
-.from-top {
-  animation-name: slideFromTop;
-}
-.from-right {
-  animation-name: slideFromRight;
-}
-.from-bottom {
-  animation-name: slideFromBottom;
-}
-.from-left {
-  animation-name: slideFromLeft;
-}
-
-@keyframes fadeOnly {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-@keyframes slideFromTop {
-  from { transform: translateY(-20px); opacity: 0; }
-  to { transform: translateY(0); opacity: 1; }
-}
-
-@keyframes slideFromRight {
-  from { transform: translateX(20px); opacity: 0; }
-  to { transform: translateX(0); opacity: 1; }
-}
-
-@keyframes slideFromBottom {
-  from { transform: translateY(20px); opacity: 0; }
-  to { transform: translateY(0); opacity: 1; }
-}
-
-@keyframes slideFromLeft {
-  from { transform: translateX(-20px); opacity: 0; }
-  to { transform: translateX(0); opacity: 1; }
-}
-
-.photo {
-  animation-duration: 1s;
-  animation-fill-mode: forwards;
-}
-</style>
+<script setup lang="ts">
+interface Photo {
+  src: string
+  classes: string
+}
+
+const props = defineProps<{
+  photos: Photo[]
+}>()
+
+const getAnimationClass = (index: number) => {
+  if (props.photos.length === 1) return 'fade-in'
+  const directions = ['from-top', 'from-right', 'from-bottom', 'from-left']
+  return directions[index % 4]
+}
+</script>
+
+<template>
+  <div class="relative size-full">
+    <img
+      v-for="(photo, index) in photos"
+      :key="index"
+      :src="photo.src"
+      :alt="photo.src"
+      loading="lazy"
+      :class="['photo', getAnimationClass(index), photo.classes]"
+    />
+  </div>
+</template>
+
+<style scoped>
+.photo {
+  position: absolute;
+  opacity: 0;
+  transform: translate(0, 0);
+  animation: fadeSlide 1s forwards;
+}
+
+.fade-in {
+  animation: fadeOnly 1s forwards;
+}
+
+.from-top {
+  animation-name: slideFromTop;
+}
+.from-right {
+  animation-name: slideFromRight;
+}
+.from-bottom {
+  animation-name: slideFromBottom;
+}
+.from-left {
+  animation-name: slideFromLeft;
+}
+
+@keyframes fadeOnly {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes slideFromTop {
+  from { transform: translateY(-20px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+@keyframes slideFromRight {
+  from { transform: translateX(20px); opacity: 0; }
+  to { transform: translateX(0); opacity: 1; }
+}
+
+@keyframes slideFromBottom {
+  from { transform: translateY(20px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+@keyframes slideFromLeft {
+  from { transform: translateX(-20px); opacity: 0; }
+  to { transform: translateX(0); opacity: 1; }
+}
+
+.photo {
+  animation-duration: 1s;
+  animation-fill-mode: forwards;
+}
+</style>

package/components/elements/section-heading/ASectionHeading.vue

@@ -1,35 +1,35 @@
-<script setup lang="ts">
-// Заголовок блока лендинга: Display/Small → Display/Large + подзаголовок.
-// Бейджи-eyebrow в блоках не используются — они живут только в hero и форме обратной связи.
-withDefaults(defineProps<{
-  title?: string
-  subtitle?: string
-  center?: boolean
-}>(), {
-  title: '',
-  subtitle: '',
-  center: false,
-})
-</script>
-
-<template>
-  <div
-    class="flex flex-col gap-2.5"
-    :class="center ? 'items-center text-center' : 'text-left'"
-  >
-    <h2 class="text-display-sm text-primary md:text-display-lg">
-      <slot name="title">
-        {{ title }}
-      </slot>
-    </h2>
-    <p
-      v-if="subtitle || $slots.subtitle"
-      class="text-body-lg text-quaternary"
-      :class="{ 'max-w-2xl': center }"
-    >
-      <slot name="subtitle">
-        {{ subtitle }}
-      </slot>
-    </p>
-  </div>
-</template>
+<script setup lang="ts">
+// Заголовок блока лендинга: Display/Small → Display/Large + подзаголовок.
+// Бейджи-eyebrow в блоках не используются — они живут только в hero и форме обратной связи.
+withDefaults(defineProps<{
+  title?: string
+  subtitle?: string
+  center?: boolean
+}>(), {
+  title: '',
+  subtitle: '',
+  center: false,
+})
+</script>
+
+<template>
+  <div
+    class="flex flex-col gap-2.5"
+    :class="center ? 'items-center text-center' : 'text-left'"
+  >
+    <h2 class="text-display-sm text-primary md:text-display-lg">
+      <slot name="title">
+        {{ title }}
+      </slot>
+    </h2>
+    <p
+      v-if="subtitle || $slots.subtitle"
+      class="text-body-lg text-quaternary"
+      :class="{ 'max-w-2xl': center }"
+    >
+      <slot name="subtitle">
+        {{ subtitle }}
+      </slot>
+    </p>
+  </div>
+</template>

package/components/elements/segmented/ASegmentedV2.vue

@@ -1,154 +1,154 @@
-<script generic="T extends string | number" lang="ts" setup>
-type Color = 'gray' | 'blue' | 'green' | 'yellow' | 'red'
-type View = 'outline' | 'solid'
-
-interface Option {
-  value: T
-  label: string
-  disabled?: boolean
-  count?: number | string
-  color?: Color
-  dotColor?: string
-}
-
-const props = withDefaults(defineProps<{
-  options: Option[]
-  size?: 'sm' | 'md'
-  view?: View
-  color?: Color
-  deselectable?: boolean
-  withDot?: boolean
-  neutral?: boolean
-}>(), {
-  size: 'md',
-  view: 'outline',
-  color: 'gray',
-  deselectable: true,
-  withDot: false,
-  neutral: false,
-})
-
-defineSlots<{
-  prepend?: (props: { option: Option, selected: boolean }) => any
-  count?: (props: { option: Option, selected: boolean }) => any
-}>()
-
-const modelValue = defineModel<T | undefined | null>()
-
-const CHIP_CLASS: Record<Color, Record<View | 'selected', string>> = {
-  gray: {
-    outline: 'border-strong bg-action-secondary text-quaternary hover:bg-action-secondary-hover',
-    solid: 'border-transparent bg-muted text-quaternary hover:bg-gray-300 dark:hover:bg-gray-600',
-    /* осознанно константный серый selected (bg-gray-600 text-white): токена нет */
-    selected: 'border-transparent bg-gray-600 text-white',
-  },
-  /* пастельные border/hover: токенов нет — примитивы осознанно, dark:-компенсации */
-  blue: {
-    outline: 'border-brand-200 dark:border-brand-500/40 bg-action-secondary text-brand hover:bg-brand-subtle',
-    solid: 'border-transparent bg-brand-subtle text-brand hover:bg-brand-200 dark:hover:bg-blue-subtle',
-    selected: 'border-transparent bg-brand text-white',
-  },
-  green: {
-    outline: 'border-green-300 dark:border-green-600/40 bg-action-secondary text-success hover:bg-success-subtle',
-    solid: 'border-transparent bg-success-subtle text-success hover:bg-green-300 dark:hover:bg-green-subtle',
-    selected: 'border-transparent bg-success text-white',
-  },
-  yellow: {
-    outline: 'border-yellow-300 dark:border-amber-600/40 bg-action-secondary text-warning hover:bg-warning-subtle',
-    solid: 'border-transparent bg-warning-subtle text-warning hover:bg-yellow-300 dark:hover:bg-warning-subtle',
-    selected: 'border-transparent bg-warning text-white',
-  },
-  red: {
-    outline: 'border-red bg-action-secondary text-danger hover:bg-danger-subtle',
-    solid: 'border-transparent bg-danger-subtle text-danger hover:bg-red-300 dark:hover:bg-red-subtle',
-    selected: 'border-transparent bg-action-danger text-white',
-  },
-}
-
-const DOT_CLASS: Record<Color, Record<View, string>> = {
-  gray: { outline: 'bg-icon-default', solid: 'bg-icon-default' },
-  blue: { outline: 'bg-brand', solid: 'bg-brand' },
-  green: { outline: 'bg-success', solid: 'bg-success' },
-  yellow: { outline: 'bg-warning', solid: 'bg-warning' },
-  red: { outline: 'bg-action-danger', solid: 'bg-action-danger' },
-}
-
-/* белая точка на цветной выбранной пилюле — осознанно константный white */
-const DOT_SELECTED_CLASS = 'bg-white'
-
-function dotColorName(option: Option): Color {
-  return option.color ?? props.color
-}
-
-function chipColorName(option: Option): Color {
-  return props.neutral ? 'gray' : dotColorName(option)
-}
-
-function isSelected(option: Option): boolean {
-  return modelValue.value === option.value
-}
-
-function chipClass(option: Option): string {
-  return isSelected(option)
-    ? `${CHIP_CLASS[dotColorName(option)].selected} font-medium`
-    : CHIP_CLASS[chipColorName(option)][props.view]
-}
-
-function showDot(option: Option): boolean {
-  return props.withDot || Boolean(option.color || option.dotColor)
-}
-
-function dotClass(option: Option): string {
-  return isSelected(option)
-    ? DOT_SELECTED_CLASS
-    : DOT_CLASS[dotColorName(option)][props.view]
-}
-
-function select(option: Option) {
-  if (option.disabled) return
-  if (props.deselectable && modelValue.value === option.value) {
-    modelValue.value = undefined
-    return
-  }
-  modelValue.value = option.value
-}
-</script>
-
-<template>
-  <div class="flex flex-wrap gap-2">
-    <button
-      v-for="option in options"
-      :key="String(option.value)"
-      type="button"
-      :disabled="option.disabled"
-      class="inline-flex items-center gap-1.5 rounded-full border transition-colors duration-150 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-500 disabled:cursor-not-allowed disabled:opacity-50"
-      :class="[
-        size === 'sm' ? 'px-3 py-1 text-body-sm' : 'px-3.5 py-1.5 text-body-md',
-        chipClass(option),
-      ]"
-      @click="select(option)"
-    >
-      <slot
-        name="prepend"
-        :option="option"
-        :selected="isSelected(option)"
-      />
-      <span
-        v-if="showDot(option)"
-        class="size-2 shrink-0 rounded-full"
-        :class="!option.dotColor || option.color || isSelected(option) ? dotClass(option) : undefined"
-        :style="option.dotColor && !option.color && !isSelected(option) ? { backgroundColor: option.dotColor } : undefined"
-      />
-      <span>{{ option.label }}</span>
-      <slot
-        name="count"
-        :option="option"
-        :selected="isSelected(option)"
-      >
-        <span v-if="option.count != null" class="tabular-nums opacity-70">
-          {{ option.count }}
-        </span>
-      </slot>
-    </button>
-  </div>
-</template>
+<script generic="T extends string | number" lang="ts" setup>
+type Color = 'gray' | 'blue' | 'green' | 'yellow' | 'red'
+type View = 'outline' | 'solid'
+
+interface Option {
+  value: T
+  label: string
+  disabled?: boolean
+  count?: number | string
+  color?: Color
+  dotColor?: string
+}
+
+const props = withDefaults(defineProps<{
+  options: Option[]
+  size?: 'sm' | 'md'
+  view?: View
+  color?: Color
+  deselectable?: boolean
+  withDot?: boolean
+  neutral?: boolean
+}>(), {
+  size: 'md',
+  view: 'outline',
+  color: 'gray',
+  deselectable: true,
+  withDot: false,
+  neutral: false,
+})
+
+defineSlots<{
+  prepend?: (props: { option: Option, selected: boolean }) => any
+  count?: (props: { option: Option, selected: boolean }) => any
+}>()
+
+const modelValue = defineModel<T | undefined | null>()
+
+const CHIP_CLASS: Record<Color, Record<View | 'selected', string>> = {
+  gray: {
+    outline: 'border-strong bg-action-secondary text-quaternary hover:bg-action-secondary-hover',
+    solid: 'border-transparent bg-muted text-quaternary hover:bg-gray-300 dark:hover:bg-gray-600',
+    /* осознанно константный серый selected (bg-gray-600 text-white): токена нет */
+    selected: 'border-transparent bg-gray-600 text-white',
+  },
+  /* пастельные border/hover: токенов нет — примитивы осознанно, dark:-компенсации */
+  blue: {
+    outline: 'border-brand-200 dark:border-brand-500/40 bg-action-secondary text-brand hover:bg-brand-subtle',
+    solid: 'border-transparent bg-brand-subtle text-brand hover:bg-brand-200 dark:hover:bg-blue-subtle',
+    selected: 'border-transparent bg-brand text-white',
+  },
+  green: {
+    outline: 'border-green-300 dark:border-green-600/40 bg-action-secondary text-success hover:bg-success-subtle',
+    solid: 'border-transparent bg-success-subtle text-success hover:bg-green-300 dark:hover:bg-green-subtle',
+    selected: 'border-transparent bg-success text-white',
+  },
+  yellow: {
+    outline: 'border-yellow-300 dark:border-amber-600/40 bg-action-secondary text-warning hover:bg-warning-subtle',
+    solid: 'border-transparent bg-warning-subtle text-warning hover:bg-yellow-300 dark:hover:bg-warning-subtle',
+    selected: 'border-transparent bg-warning text-white',
+  },
+  red: {
+    outline: 'border-red bg-action-secondary text-danger hover:bg-danger-subtle',
+    solid: 'border-transparent bg-danger-subtle text-danger hover:bg-red-300 dark:hover:bg-red-subtle',
+    selected: 'border-transparent bg-action-danger text-white',
+  },
+}
+
+const DOT_CLASS: Record<Color, Record<View, string>> = {
+  gray: { outline: 'bg-icon-default', solid: 'bg-icon-default' },
+  blue: { outline: 'bg-brand', solid: 'bg-brand' },
+  green: { outline: 'bg-success', solid: 'bg-success' },
+  yellow: { outline: 'bg-warning', solid: 'bg-warning' },
+  red: { outline: 'bg-action-danger', solid: 'bg-action-danger' },
+}
+
+/* белая точка на цветной выбранной пилюле — осознанно константный white */
+const DOT_SELECTED_CLASS = 'bg-white'
+
+function dotColorName(option: Option): Color {
+  return option.color ?? props.color
+}
+
+function chipColorName(option: Option): Color {
+  return props.neutral ? 'gray' : dotColorName(option)
+}
+
+function isSelected(option: Option): boolean {
+  return modelValue.value === option.value
+}
+
+function chipClass(option: Option): string {
+  return isSelected(option)
+    ? `${CHIP_CLASS[dotColorName(option)].selected} font-medium`
+    : CHIP_CLASS[chipColorName(option)][props.view]
+}
+
+function showDot(option: Option): boolean {
+  return props.withDot || Boolean(option.color || option.dotColor)
+}
+
+function dotClass(option: Option): string {
+  return isSelected(option)
+    ? DOT_SELECTED_CLASS
+    : DOT_CLASS[dotColorName(option)][props.view]
+}
+
+function select(option: Option) {
+  if (option.disabled) return
+  if (props.deselectable && modelValue.value === option.value) {
+    modelValue.value = undefined
+    return
+  }
+  modelValue.value = option.value
+}
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-2">
+    <button
+      v-for="option in options"
+      :key="String(option.value)"
+      type="button"
+      :disabled="option.disabled"
+      class="inline-flex items-center gap-1.5 rounded-full border transition-colors duration-150 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-500 disabled:cursor-not-allowed disabled:opacity-50"
+      :class="[
+        size === 'sm' ? 'px-3 py-1 text-body-sm' : 'px-3.5 py-1.5 text-body-md',
+        chipClass(option),
+      ]"
+      @click="select(option)"
+    >
+      <slot
+        name="prepend"
+        :option="option"
+        :selected="isSelected(option)"
+      />
+      <span
+        v-if="showDot(option)"
+        class="size-2 shrink-0 rounded-full"
+        :class="!option.dotColor || option.color || isSelected(option) ? dotClass(option) : undefined"
+        :style="option.dotColor && !option.color && !isSelected(option) ? { backgroundColor: option.dotColor } : undefined"
+      />
+      <span>{{ option.label }}</span>
+      <slot
+        name="count"
+        :option="option"
+        :selected="isSelected(option)"
+      >
+        <span v-if="option.count != null" class="tabular-nums opacity-70">
+          {{ option.count }}
+        </span>
+      </slot>
+    </button>
+  </div>
+</template>