adata-ui 2.1.41-beta.1 → 2.1.41-beta.3

package/components/elements/curve-block-v2/ACurveBlockV2.vue

@@ -1,120 +1,122 @@
-<script setup lang="ts">
-import { NuxtLinkLocale } from '#components'
-
-// Same logic/props as ACurveBlock — only the visual design differs.
-withDefaults(defineProps<{
-  icon: Component
-  title: string
-  description: string
-  to?: string
-  color?: string
-  tint?: string
-  forceActive?: boolean
-}>(), {
-  color: 'var(--color-icon-brand)',
-  tint: undefined,
-  forceActive: true,
-})
-</script>
-
-<template>
-  <nuxt-link-locale
-    :to="to"
-    :style="{ '--cb-color': color, '--cb-tint': tint }"
-    class="curve-block-v2 group relative flex w-full cursor-pointer flex-col gap-4 rounded-2xl border border-default bg-main p-6 text-left"
-    :class="{ 'active-item': !to && forceActive }"
-    active-class="active-item"
-  >
-    <div class="arrow-icon absolute top-4 right-4 flex size-8 items-center justify-center rounded-full bg-canvas p-2 text-secondary transition-all duration-200 group-hover:translate-x-0.5 group-hover:-translate-y-0.5">
-      <svg
-        class="size-2"
-        viewBox="16 16 16 16"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M17.1155 16C16.4994 16 16 16.4994 16 17.1155C16 17.7315 16.4994 18.231 17.1155 18.231L28.1915 18.231L16.3267 30.0958C15.8911 30.5314 15.8911 31.2377 16.3267 31.6733C16.7623 32.1089 17.4686 32.1089 17.9042 31.6733L29.769 19.8085L29.769 30.8845C29.769 31.5006 30.2685 32 30.8845 32C31.5006 32 32 31.5006 32 30.8845L32 17.1155C32 16.9642 31.9699 16.82 31.9154 16.6885C31.8617 16.5589 31.7826 16.4373 31.678 16.3315C31.6749 16.3283 31.6717 16.3251 31.6685 16.322C31.5627 16.2174 31.4411 16.1383 31.3115 16.0846C31.18 16.0301 31.0358 16 30.8845 16L17.1155 16Z"
-          fill="currentColor"
-        />
-      </svg>
-    </div>
-
-    <div class="icon-item w-fit rounded-xl p-3">
-      <component
-        :is="icon"
-        class="size-6 shrink-0"
-      />
-    </div>
-
-    <div class="flex flex-col gap-2 pr-6">
-      <p class="title text-h5 text-primary transition-colors duration-200">
-        {{ title }}
-      </p>
-      <p class="text-body-md leading-relaxed text-quaternary">
-        {{ description }}
-      </p>
-    </div>
-  </nuxt-link-locale>
-</template>
-
-<style scoped>
-.curve-block-v2 {
-  --cb-fill: var(--cb-tint, color-mix(in srgb, var(--cb-color) 10%, transparent));
-  transition:
-    transform 0.2s ease,
-    border-color 0.2s ease,
-    box-shadow 0.2s ease;
-}
-
-.icon-item {
-  background-color: var(--cb-fill);
-  color: var(--cb-color);
-}
-
-.curve-block-v2:hover {
-  transform: translateY(-4px);
-  border-color: var(--cb-color);
-  box-shadow: 0 0 22px -12px var(--cb-color);
-}
-
-.curve-block-v2:hover .title,
-.curve-block-v2:hover .arrow-icon {
-  color: var(--cb-color);
-}
-
-.curve-block-v2:hover .arrow-icon {
-  background-color: var(--cb-fill);
-}
-
-.active-item {
-  border-color: var(--cb-color);
-  box-shadow: 0 0 22px -12px var(--cb-color);
-}
-
-.active-item:hover {
-  transform: none;
-}
-
-.active-item .title,
-.active-item .arrow-icon {
-  color: var(--cb-color);
-}
-
-.active-item .arrow-icon {
-  background-color: var(--cb-fill);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .curve-block-v2,
-  .curve-block-v2 .title,
-  .curve-block-v2 .arrow-icon {
-    transition: none;
-  }
-
-  .curve-block-v2:hover {
-    transform: none;
-  }
-}
-</style>
+<script setup lang="ts">
+import { NuxtLinkLocale } from '#components'
+
+// Same logic/props as ACurveBlock — only the visual design differs.
+withDefaults(defineProps<{
+  icon: Component
+  title: string
+  description: string
+  to?: string
+  color?: string
+  tint?: string
+  forceActive?: boolean
+  dataTestId?: string
+}>(), {
+  color: 'var(--color-icon-brand)',
+  tint: undefined,
+  forceActive: true,
+})
+</script>
+
+<template>
+  <nuxt-link-locale
+    :to="to"
+    :style="{ '--cb-color': color, '--cb-tint': tint }"
+    class="curve-block-v2 group relative flex w-full cursor-pointer flex-col gap-4 rounded-2xl border border-default bg-main p-6 text-left"
+    :class="{ 'active-item': !to && forceActive }"
+    active-class="active-item"
+    :data-test-id="dataTestId"
+  >
+    <div class="arrow-icon absolute top-4 right-4 flex size-8 items-center justify-center rounded-full bg-canvas p-2 text-secondary transition-all duration-200 group-hover:translate-x-0.5 group-hover:-translate-y-0.5">
+      <svg
+        class="size-2"
+        viewBox="16 16 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M17.1155 16C16.4994 16 16 16.4994 16 17.1155C16 17.7315 16.4994 18.231 17.1155 18.231L28.1915 18.231L16.3267 30.0958C15.8911 30.5314 15.8911 31.2377 16.3267 31.6733C16.7623 32.1089 17.4686 32.1089 17.9042 31.6733L29.769 19.8085L29.769 30.8845C29.769 31.5006 30.2685 32 30.8845 32C31.5006 32 32 31.5006 32 30.8845L32 17.1155C32 16.9642 31.9699 16.82 31.9154 16.6885C31.8617 16.5589 31.7826 16.4373 31.678 16.3315C31.6749 16.3283 31.6717 16.3251 31.6685 16.322C31.5627 16.2174 31.4411 16.1383 31.3115 16.0846C31.18 16.0301 31.0358 16 30.8845 16L17.1155 16Z"
+          fill="currentColor"
+        />
+      </svg>
+    </div>
+
+    <div class="icon-item w-fit rounded-xl p-3">
+      <component
+        :is="icon"
+        class="size-6 shrink-0"
+      />
+    </div>
+
+    <div class="flex flex-col gap-2 pr-6">
+      <p class="title text-h5 text-primary transition-colors duration-200">
+        {{ title }}
+      </p>
+      <p class="text-body-md leading-relaxed text-quaternary">
+        {{ description }}
+      </p>
+    </div>
+  </nuxt-link-locale>
+</template>
+
+<style scoped>
+.curve-block-v2 {
+  --cb-fill: var(--cb-tint, color-mix(in srgb, var(--cb-color) 10%, transparent));
+  transition:
+    transform 0.2s ease,
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.icon-item {
+  background-color: var(--cb-fill);
+  color: var(--cb-color);
+}
+
+.curve-block-v2:hover {
+  transform: translateY(-4px);
+  border-color: var(--cb-color);
+  box-shadow: 0 0 22px -12px var(--cb-color);
+}
+
+.curve-block-v2:hover .title,
+.curve-block-v2:hover .arrow-icon {
+  color: var(--cb-color);
+}
+
+.curve-block-v2:hover .arrow-icon {
+  background-color: var(--cb-fill);
+}
+
+.active-item {
+  border-color: var(--cb-color);
+  box-shadow: 0 0 22px -12px var(--cb-color);
+}
+
+.active-item:hover {
+  transform: none;
+}
+
+.active-item .title,
+.active-item .arrow-icon {
+  color: var(--cb-color);
+}
+
+.active-item .arrow-icon {
+  background-color: var(--cb-fill);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .curve-block-v2,
+  .curve-block-v2 .title,
+  .curve-block-v2 .arrow-icon {
+    transition: none;
+  }
+
+  .curve-block-v2:hover {
+    transform: none;
+  }
+}
+</style>

package/components/elements/digit-badge/ADigitBadge.vue

@@ -1,86 +1,86 @@
-<script lang='ts' setup>
-import { twMerge } from '#adata-ui/utils/twMerge'
-
-defineOptions({ name: 'ADigitBadge' })
-
-const props = withDefaults(defineProps<Props>(), {
-  type: 'primary',
-  view: 'default',
-  size: 'lg',
-  disabled: false,
-  customClasses: '',
-  prefix: '',
-})
-
-interface Props {
-  type?: 'primary' | 'success' | 'danger' | 'gray' | 'orange' | 'warning'
-  view?: 'default' | 'inverted'
-  size?: 'sm' | 'md' | 'lg'
-  value: string | number
-  disabled?: boolean
-  customClasses?: string
-  prefix?: string
-}
-
-const formattedValue = computed(() => {
-  return Number(props.value).toLocaleString('ru-RU')
-})
-const classes = computed(() =>
-  [
-    props.disabled ? 'bg-action-disabled text-action-disabled-fg' : typeSwitchValues[props.view][props.type],
-    'inline-flex items-center justify-center font-medium rounded-full select-none inline-flex outline-hidden',
-    sizeSwitchValues[props.size],
-    props.value && props.value.toString().length > 1 ? 'w-auto' : '',
-  ])
-
-export type StateType = {
-  [key in 'primary' | 'success' | 'danger' | 'gray' | 'orange' | 'warning']?: string;
-}
-interface ViewType {
-  default: StateType
-  inverted: StateType
-  transparent: StateType
-}
-
-type SizeSwitchValues = {
-  [key in 'sm' | 'md' | 'lg']: string;
-}
-
-const typeSwitchValues: ViewType = {
-  default: {
-    primary: 'bg-action-primary text-action-primary-fg',
-    /* осознанно константный text-white: белая цифра на цветных solid-фонах в обеих темах */
-    success: 'bg-success text-white',
-    danger: 'bg-danger text-white',
-    warning: 'bg-warning text-white',
-    gray: 'bg-muted text-secondary',
-    orange: 'bg-warning text-white',
-  },
-  inverted: {
-    primary: 'bg-main text-brand',
-    success: 'bg-main text-success',
-    danger: 'bg-main text-danger',
-    warning: 'bg-main text-warning',
-    gray: 'bg-main text-secondary',
-    orange: 'bg-main text-primary',
-  },
-  transparent: {
-    success: 'bg-success-subtle text-success',
-    danger: 'bg-danger-subtle text-danger',
-  },
-}
-
-const sizeSwitchValues: SizeSwitchValues = {
-  sm: 'w-4 h-4 px-1 text-body-sm',
-  md: 'w-5 h-5 px-1 text-body-sm',
-  lg: 'px-2 w-6 h-6 text-body-sm font-semibold',
-}
-</script>
-
-<template>
-  <div
-    :class="twMerge(...classes, customClasses)"
-  >
-    {{ prefix }}{{ formattedValue }}
-  </div>
-</template>
+<script lang='ts' setup>
+import { twMerge } from '#adata-ui/utils/twMerge'
+
+defineOptions({ name: 'ADigitBadge' })
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'primary',
+  view: 'default',
+  size: 'lg',
+  disabled: false,
+  customClasses: '',
+  prefix: '',
+})
+
+interface Props {
+  type?: 'primary' | 'success' | 'danger' | 'gray' | 'orange' | 'warning'
+  view?: 'default' | 'inverted'
+  size?: 'sm' | 'md' | 'lg'
+  value: string | number
+  disabled?: boolean
+  customClasses?: string
+  prefix?: string
+}
+
+const formattedValue = computed(() => {
+  return Number(props.value).toLocaleString('ru-RU')
+})
+const classes = computed(() =>
+  [
+    props.disabled ? 'bg-action-disabled text-action-disabled-fg' : typeSwitchValues[props.view][props.type],
+    'inline-flex items-center justify-center font-medium rounded-full select-none inline-flex outline-hidden',
+    sizeSwitchValues[props.size],
+    props.value && props.value.toString().length > 1 ? 'w-auto' : '',
+  ])
+
+export type StateType = {
+  [key in 'primary' | 'success' | 'danger' | 'gray' | 'orange' | 'warning']?: string;
+}
+interface ViewType {
+  default: StateType
+  inverted: StateType
+  transparent: StateType
+}
+
+type SizeSwitchValues = {
+  [key in 'sm' | 'md' | 'lg']: string;
+}
+
+const typeSwitchValues: ViewType = {
+  default: {
+    primary: 'bg-action-primary text-action-primary-fg',
+    /* осознанно константный text-white: белая цифра на цветных solid-фонах в обеих темах */
+    success: 'bg-success text-white',
+    danger: 'bg-danger text-white',
+    warning: 'bg-warning text-white',
+    gray: 'bg-muted text-secondary',
+    orange: 'bg-warning text-white',
+  },
+  inverted: {
+    primary: 'bg-main text-brand',
+    success: 'bg-main text-success',
+    danger: 'bg-main text-danger',
+    warning: 'bg-main text-warning',
+    gray: 'bg-main text-secondary',
+    orange: 'bg-main text-primary',
+  },
+  transparent: {
+    success: 'bg-success-subtle text-success',
+    danger: 'bg-danger-subtle text-danger',
+  },
+}
+
+const sizeSwitchValues: SizeSwitchValues = {
+  sm: 'w-4 h-4 px-1 text-body-sm',
+  md: 'w-5 h-5 px-1 text-body-sm',
+  lg: 'px-2 w-6 h-6 text-body-sm font-semibold',
+}
+</script>
+
+<template>
+  <div
+    :class="twMerge(...classes, customClasses)"
+  >
+    {{ prefix }}{{ formattedValue }}
+  </div>
+</template>

package/components/elements/empty-box/empty-box-V2.vue

@@ -1,92 +1,92 @@
-<script setup lang="ts">
-import type { Component } from 'vue'
-import EmptyBan from '#adata-ui/illustrations/empty-ban.vue'
-
-interface Props {
-  icon: Component
-  title?: string
-  subtitle?: string
-}
-
-defineProps<Props>()
-</script>
-
-<template>
-  <div
-    class="flex min-h-[220px] flex-col items-center justify-center gap-4 p-6 text-center md:p-10"
-  >
-    <!-- Ореол -->
-    <div class="relative grid place-items-center">
-      <!-- свечение -->
-      <span
-        aria-hidden="true"
-        class="pointer-events-none absolute size-[130px] rounded-full bg-[radial-gradient(circle,var(--color-brand-500)/15%,transparent_70%)]"
-      />
-
-      <!-- пульсирующее кольцо -->
-      <span
-        aria-hidden="true"
-        class="halo-ring absolute size-[72px] rounded-full border border-brand-500/20 motion-reduce:animate-none"
-      />
-
-      <!-- иконка -->
-      <div
-        class="relative grid size-[72px] place-items-center rounded-full border border-brand-500/20 bg-brand-500/5 text-brand-500"
-      >
-        <component
-          :is="icon"
-          class="size-[30px]"
-          :stroke-width="2"
-          aria-hidden="true"
-        />
-
-        <!-- нет данных -->
-        <span
-          class="absolute -bottom-1.5 -right-1.5 grid size-[26px] place-items-center rounded-full border border-default bg-main text-icon-default shadow-sm"
-        >
-          <empty-ban class="size-3.5" />
-        </span>
-      </div>
-    </div>
-
-    <!-- текст -->
-    <div class="flex flex-col items-center gap-2">
-      <h3 class="font-semibold text-primary">
-        {{ title }}
-      </h3>
-
-      <p
-        v-if="subtitle"
-        class="mt-1 text-secondary"
-      >
-        {{ subtitle }}
-      </p>
-    </div>
-
-    <slot />
-  </div>
-</template>
-
-<style scoped>
-.halo-ring {
-  animation: halo-pulse 3.2s ease-out infinite;
-}
-
-@keyframes halo-pulse {
-  0% {
-    transform: scale(0.72);
-    opacity: 0.85;
-  }
-
-  100% {
-    transform: scale(1.16);
-    opacity: 0;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .halo-ring {
-    animation: none;
-  }
-}
-</style>
+<script setup lang="ts">
+import type { Component } from 'vue'
+import EmptyBan from '#adata-ui/illustrations/empty-ban.vue'
+
+interface Props {
+  icon: Component
+  title?: string
+  subtitle?: string
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div
+    class="flex min-h-[220px] flex-col items-center justify-center gap-4 p-6 text-center md:p-10"
+  >
+    <!-- Ореол -->
+    <div class="relative grid place-items-center">
+      <!-- свечение -->
+      <span
+        aria-hidden="true"
+        class="pointer-events-none absolute size-[130px] rounded-full bg-[radial-gradient(circle,var(--color-brand-500)/15%,transparent_70%)]"
+      />
+
+      <!-- пульсирующее кольцо -->
+      <span
+        aria-hidden="true"
+        class="halo-ring absolute size-[72px] rounded-full border border-brand-500/20 motion-reduce:animate-none"
+      />
+
+      <!-- иконка -->
+      <div
+        class="relative grid size-[72px] place-items-center rounded-full border border-brand-500/20 bg-brand-500/5 text-brand-500"
+      >
+        <component
+          :is="icon"
+          class="size-[30px]"
+          :stroke-width="2"
+          aria-hidden="true"
+        />
+
+        <!-- нет данных -->
+        <span
+          class="absolute -bottom-1.5 -right-1.5 grid size-[26px] place-items-center rounded-full border border-default bg-main text-icon-default shadow-sm"
+        >
+          <empty-ban class="size-3.5" />
+        </span>
+      </div>
+    </div>
+
+    <!-- текст -->
+    <div class="flex flex-col items-center gap-2">
+      <h3 class="font-semibold text-primary">
+        {{ title }}
+      </h3>
+
+      <p
+        v-if="subtitle"
+        class="mt-1 text-secondary"
+      >
+        {{ subtitle }}
+      </p>
+    </div>
+
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.halo-ring {
+  animation: halo-pulse 3.2s ease-out infinite;
+}
+
+@keyframes halo-pulse {
+  0% {
+    transform: scale(0.72);
+    opacity: 0.85;
+  }
+
+  100% {
+    transform: scale(1.16);
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .halo-ring {
+    animation: none;
+  }
+}
+</style>