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

package/components/elements/button/AButtonV2.vue

@@ -1,177 +1,179 @@
-<script setup lang="ts">
-import type { Component } from 'vue'
-
-type View = 'solid' | 'outline' | 'ghost' | 'soft' | 'gradient'
-type Size = 'xs' | 'sm' | 'md' | 'lg'
-type Color = 'blue' | 'green' | 'red' | 'gray' | 'white'
-type Rounded = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'
-
-const props = withDefaults(defineProps<{
-  view?: View
-  color?: Color
-  size?: Size
-  rounded?: Rounded
-  icon?: Component
-  iconRight?: boolean
-  loading?: boolean
-  disabled?: boolean
-  block?: boolean
-  glow?: boolean
-  square?: boolean
-  type?: 'button' | 'submit' | 'reset'
-}>(), {
-  view: 'solid',
-  color: 'blue',
-  size: 'md',
-  rounded: 'lg',
-  iconRight: false,
-  loading: false,
-  disabled: false,
-  block: false,
-  glow: false,
-  square: false,
-  type: 'button',
-})
-
-const emit = defineEmits<{ click: [event: MouseEvent] }>()
-
-const VIEW_CLASS: Record<Color, Record<View, string>> = {
-  blue: {
-    solid: 'bg-action-primary text-action-primary-fg hover:bg-action-primary-hover active:bg-action-primary-active',
-    gradient: 'bg-linear-to-r from-brand-500 to-brand-400 text-inverted hover:brightness-105',
-    outline: 'border border-brand bg-action-secondary text-brand hover:bg-brand-subtle active:bg-blue-subtle',
-    ghost: 'text-action-secondary-fg hover:bg-action-secondary-hover active:bg-badge',
-    soft: 'bg-brand-subtle text-brand hover:bg-blue-subtle active:bg-brand-200/70 dark:active:bg-brand-500/25',
-  },
-  green: {
-    solid: 'bg-success text-white hover:bg-green-700 active:bg-green-800 dark:hover:bg-green-800 dark:active:bg-green-900',
-    gradient: 'bg-linear-to-r from-green-600 to-green-500 text-inverted hover:brightness-105',
-    outline: 'border border-success bg-action-secondary text-success hover:bg-success-subtle active:bg-green-200/70 dark:active:bg-green-500/25',
-    ghost: 'text-success hover:bg-success-subtle active:bg-green-200/70 dark:active:bg-green-500/25',
-    soft: 'bg-success-subtle text-success hover:bg-green-subtle active:bg-green-200/70 dark:active:bg-green-500/25',
-  },
-  red: {
-    solid: 'bg-action-danger text-action-danger-fg hover:bg-action-danger-hover active:bg-action-danger-hover',
-    gradient: 'bg-linear-to-r from-red-600 to-red-500 text-inverted hover:brightness-105',
-    outline: 'border border-danger bg-action-secondary text-danger hover:bg-danger-subtle active:bg-red-subtle',
-    ghost: 'text-danger hover:bg-danger-subtle active:bg-red-subtle',
-    soft: 'bg-danger-subtle text-danger hover:bg-red-subtle active:bg-red-200/70 dark:active:bg-red-500/25',
-  },
-  gray: {
-    /* осознанно константный серый solid: action-gray триады нет в ДС */
-    solid: 'bg-gray-500 text-white hover:bg-gray-600 active:bg-gray-700',
-    gradient: 'bg-linear-to-r from-gray-600 to-gray-500 text-inverted hover:brightness-105',
-    outline: 'border border-strong bg-action-secondary text-primary hover:border-strong hover:bg-action-secondary-hover active:bg-badge',
-    ghost: 'text-action-secondary-fg hover:bg-action-secondary-hover active:bg-badge',
-    soft: 'bg-badge text-quaternary hover:bg-badge active:bg-badge/70',
-  },
-  white: {
-    solid: 'bg-main text-brand-600 hover:bg-brand-subtle active:bg-blue-subtle',
-    gradient: 'bg-linear-to-r from-white to-brand-50 text-brand-600 hover:brightness-105',
-    outline: 'border border-brand bg-main text-brand-600 hover:bg-brand-subtle active:bg-blue-subtle',
-    ghost: 'text-brand-600 hover:bg-brand-subtle active:bg-blue-subtle',
-    soft: 'bg-brand-subtle text-brand-600 hover:bg-blue-subtle active:bg-brand-200/70 dark:active:bg-brand-500/25',
-  },
-}
-
-/* Тень вынесена из VIEW_CLASS: конфликт shadow-утилит Tailwind решает порядком
-   в стилях, а не порядком классов, поэтому glow должен ЗАМЕНЯТЬ базовую тень. */
-const RAISED_VIEWS: View[] = ['solid', 'gradient']
-
-const BASE_ELEVATION = 'shadow-xs hover:shadow-md'
-
-/* Цветная тень: форма и цвет раздельно. Тон берётся из примитивов, а не из
-   семантики — ореол не должен сам менять оттенок между темами; пара dark: —
-   осознанная подгонка плотности (на #161617 40% блюмит). */
-const GLOW_CLASS: Record<Color, string> = {
-  blue: 'shadow-md shadow-brand-500/30 hover:shadow-lg hover:shadow-brand-500/40 dark:shadow-brand-400/25 dark:hover:shadow-brand-400/35',
-  green: 'shadow-md shadow-green-600/30 hover:shadow-lg hover:shadow-green-600/40 dark:shadow-green-500/25 dark:hover:shadow-green-500/35',
-  red: 'shadow-md shadow-red-600/30 hover:shadow-lg hover:shadow-red-600/40 dark:shadow-red-500/25 dark:hover:shadow-red-500/35',
-  gray: 'shadow-md shadow-gray-500/25 hover:shadow-lg hover:shadow-gray-500/35 dark:shadow-gray-400/20 dark:hover:shadow-gray-400/30',
-  white: 'shadow-md shadow-brand-500/25 hover:shadow-lg hover:shadow-brand-500/35 dark:shadow-brand-400/20 dark:hover:shadow-brand-400/30',
-}
-
-const elevationClass = computed(() => {
-  if (!RAISED_VIEWS.includes(props.view)) return ''
-  return props.glow ? GLOW_CLASS[props.color] : BASE_ELEVATION
-})
-
-const SIZE_CLASS: Record<Size, string> = {
-  xs: 'h-6 gap-1 px-2 text-body-sm',
-  sm: 'h-8 gap-1.5 px-3 text-body-sm',
-  md: 'h-10 gap-2 px-4 text-body-md',
-  lg: 'h-12 gap-2.5 px-5 text-body-lg',
-}
-
-/* Квадрат под одну иконку: ЗАМЕНЯЕТ SIZE_CLASS, а не дописывается к нему —
-   `px-0` рядом с `px-4` проиграет (конфликт решает порядок в stylesheet), из-за
-   чего такие кнопки обычно лепят через `!w-10 !px-0`. */
-const SQUARE_CLASS: Record<Size, string> = {
-  xs: 'size-6',
-  sm: 'size-8',
-  md: 'size-10',
-  lg: 'size-12',
-}
-
-const ROUNDED_CLASS: Record<Rounded, string> = {
-  'none': 'rounded-none',
-  'sm': 'rounded-sm',
-  'md': 'rounded-md',
-  'lg': 'rounded-lg',
-  'xl': 'rounded-xl',
-  '2xl': 'rounded-2xl',
-  'full': 'rounded-full',
-}
-
-const ICON_SIZE: Record<Size, string> = {
-  xs: 'size-3.5',
-  sm: 'size-4',
-  md: 'size-5',
-  lg: 'size-5',
-}
-
-function onClick(event: MouseEvent) {
-  if (props.disabled || props.loading) return
-  emit('click', event)
-}
-</script>
-
-<template>
-  <button
-    :type="type"
-    :disabled="disabled || loading"
-    class="button-v2 inline-flex items-center justify-center font-semibold transition-all duration-150 select-none focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50"
-    :class="[
-      VIEW_CLASS[color][view],
-      elevationClass,
-      square ? SQUARE_CLASS[size] : SIZE_CLASS[size],
-      ROUNDED_CLASS[rounded],
-      block ? 'w-full' : '',
-      iconRight ? 'flex-row-reverse' : '',
-    ]"
-    @click="onClick"
-  >
-    <a-icon-loader-circle
-      v-if="loading"
-      class="shrink-0 animate-spin"
-      :class="ICON_SIZE[size]"
-    />
-    <component
-      :is="icon"
-      v-else-if="icon"
-      class="shrink-0"
-      :class="ICON_SIZE[size]"
-    />
-    <span v-if="$slots.default" class="truncate">
-      <slot />
-    </span>
-  </button>
-</template>
-
-<style scoped>
-@media (prefers-reduced-motion: reduce) {
-  .button-v2 {
-    transition: none;
-  }
-}
-</style>
+<script setup lang="ts">
+import type { Component } from 'vue'
+
+type View = 'solid' | 'outline' | 'ghost' | 'soft' | 'gradient'
+type Size = 'xs' | 'sm' | 'md' | 'lg'
+type Color = 'blue' | 'green' | 'red' | 'gray' | 'white'
+type Rounded = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'
+
+const props = withDefaults(defineProps<{
+  view?: View
+  color?: Color
+  size?: Size
+  rounded?: Rounded
+  icon?: Component
+  iconRight?: boolean
+  loading?: boolean
+  disabled?: boolean
+  block?: boolean
+  glow?: boolean
+  square?: boolean
+  type?: 'button' | 'submit' | 'reset'
+  dataTestId?: string
+}>(), {
+  view: 'solid',
+  color: 'blue',
+  size: 'md',
+  rounded: 'lg',
+  iconRight: false,
+  loading: false,
+  disabled: false,
+  block: false,
+  glow: false,
+  square: false,
+  type: 'button',
+})
+
+const emit = defineEmits<{ click: [event: MouseEvent] }>()
+
+const VIEW_CLASS: Record<Color, Record<View, string>> = {
+  blue: {
+    solid: 'bg-action-primary text-action-primary-fg hover:bg-action-primary-hover active:bg-action-primary-active',
+    gradient: 'bg-linear-to-r from-brand-500 to-brand-400 text-inverted hover:brightness-105',
+    outline: 'border border-brand bg-action-secondary text-brand hover:bg-brand-subtle active:bg-blue-subtle',
+    ghost: 'text-action-secondary-fg hover:bg-action-secondary-hover active:bg-badge',
+    soft: 'bg-brand-subtle text-brand hover:bg-blue-subtle active:bg-brand-200/70 dark:active:bg-brand-500/25',
+  },
+  green: {
+    solid: 'bg-success text-white hover:bg-green-700 active:bg-green-800 dark:hover:bg-green-800 dark:active:bg-green-900',
+    gradient: 'bg-linear-to-r from-green-600 to-green-500 text-inverted hover:brightness-105',
+    outline: 'border border-success bg-action-secondary text-success hover:bg-success-subtle active:bg-green-200/70 dark:active:bg-green-500/25',
+    ghost: 'text-success hover:bg-success-subtle active:bg-green-200/70 dark:active:bg-green-500/25',
+    soft: 'bg-success-subtle text-success hover:bg-green-subtle active:bg-green-200/70 dark:active:bg-green-500/25',
+  },
+  red: {
+    solid: 'bg-action-danger text-action-danger-fg hover:bg-action-danger-hover active:bg-action-danger-hover',
+    gradient: 'bg-linear-to-r from-red-600 to-red-500 text-inverted hover:brightness-105',
+    outline: 'border border-danger bg-action-secondary text-danger hover:bg-danger-subtle active:bg-red-subtle',
+    ghost: 'text-danger hover:bg-danger-subtle active:bg-red-subtle',
+    soft: 'bg-danger-subtle text-danger hover:bg-red-subtle active:bg-red-200/70 dark:active:bg-red-500/25',
+  },
+  gray: {
+    /* осознанно константный серый solid: action-gray триады нет в ДС */
+    solid: 'bg-gray-500 text-white hover:bg-gray-600 active:bg-gray-700',
+    gradient: 'bg-linear-to-r from-gray-600 to-gray-500 text-inverted hover:brightness-105',
+    outline: 'border border-strong bg-action-secondary text-primary hover:border-strong hover:bg-action-secondary-hover active:bg-badge',
+    ghost: 'text-action-secondary-fg hover:bg-action-secondary-hover active:bg-badge',
+    soft: 'bg-badge text-quaternary hover:bg-badge active:bg-badge/70',
+  },
+  white: {
+    solid: 'bg-main text-brand-600 hover:bg-brand-subtle active:bg-blue-subtle',
+    gradient: 'bg-linear-to-r from-white to-brand-50 text-brand-600 hover:brightness-105',
+    outline: 'border border-brand bg-main text-brand-600 hover:bg-brand-subtle active:bg-blue-subtle',
+    ghost: 'text-brand-600 hover:bg-brand-subtle active:bg-blue-subtle',
+    soft: 'bg-brand-subtle text-brand-600 hover:bg-blue-subtle active:bg-brand-200/70 dark:active:bg-brand-500/25',
+  },
+}
+
+/* Тень вынесена из VIEW_CLASS: конфликт shadow-утилит Tailwind решает порядком
+   в стилях, а не порядком классов, поэтому glow должен ЗАМЕНЯТЬ базовую тень. */
+const RAISED_VIEWS: View[] = ['solid', 'gradient']
+
+const BASE_ELEVATION = 'shadow-xs hover:shadow-md'
+
+/* Цветная тень: форма и цвет раздельно. Тон берётся из примитивов, а не из
+   семантики — ореол не должен сам менять оттенок между темами; пара dark: —
+   осознанная подгонка плотности (на #161617 40% блюмит). */
+const GLOW_CLASS: Record<Color, string> = {
+  blue: 'shadow-md shadow-brand-500/30 hover:shadow-lg hover:shadow-brand-500/40 dark:shadow-brand-400/25 dark:hover:shadow-brand-400/35',
+  green: 'shadow-md shadow-green-600/30 hover:shadow-lg hover:shadow-green-600/40 dark:shadow-green-500/25 dark:hover:shadow-green-500/35',
+  red: 'shadow-md shadow-red-600/30 hover:shadow-lg hover:shadow-red-600/40 dark:shadow-red-500/25 dark:hover:shadow-red-500/35',
+  gray: 'shadow-md shadow-gray-500/25 hover:shadow-lg hover:shadow-gray-500/35 dark:shadow-gray-400/20 dark:hover:shadow-gray-400/30',
+  white: 'shadow-md shadow-brand-500/25 hover:shadow-lg hover:shadow-brand-500/35 dark:shadow-brand-400/20 dark:hover:shadow-brand-400/30',
+}
+
+const elevationClass = computed(() => {
+  if (!RAISED_VIEWS.includes(props.view)) return ''
+  return props.glow ? GLOW_CLASS[props.color] : BASE_ELEVATION
+})
+
+const SIZE_CLASS: Record<Size, string> = {
+  xs: 'h-6 gap-1 px-2 text-body-sm',
+  sm: 'h-8 gap-1.5 px-3 text-body-sm',
+  md: 'h-10 gap-2 px-4 text-body-md',
+  lg: 'h-12 gap-2.5 px-5 text-body-lg',
+}
+
+/* Квадрат под одну иконку: ЗАМЕНЯЕТ SIZE_CLASS, а не дописывается к нему —
+   `px-0` рядом с `px-4` проиграет (конфликт решает порядок в stylesheet), из-за
+   чего такие кнопки обычно лепят через `!w-10 !px-0`. */
+const SQUARE_CLASS: Record<Size, string> = {
+  xs: 'size-6',
+  sm: 'size-8',
+  md: 'size-10',
+  lg: 'size-12',
+}
+
+const ROUNDED_CLASS: Record<Rounded, string> = {
+  'none': 'rounded-none',
+  'sm': 'rounded-sm',
+  'md': 'rounded-md',
+  'lg': 'rounded-lg',
+  'xl': 'rounded-xl',
+  '2xl': 'rounded-2xl',
+  'full': 'rounded-full',
+}
+
+const ICON_SIZE: Record<Size, string> = {
+  xs: 'size-3.5',
+  sm: 'size-4',
+  md: 'size-5',
+  lg: 'size-5',
+}
+
+function onClick(event: MouseEvent) {
+  if (props.disabled || props.loading) return
+  emit('click', event)
+}
+</script>
+
+<template>
+  <button
+    :type="type"
+    :disabled="disabled || loading"
+    class="button-v2 inline-flex items-center justify-center font-semibold transition-all duration-150 select-none focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50"
+    :class="[
+      VIEW_CLASS[color][view],
+      elevationClass,
+      square ? SQUARE_CLASS[size] : SIZE_CLASS[size],
+      ROUNDED_CLASS[rounded],
+      block ? 'w-full' : '',
+      iconRight ? 'flex-row-reverse' : '',
+    ]"
+    :data-test-id="dataTestId"
+    @click="onClick"
+  >
+    <a-icon-loader-circle
+      v-if="loading"
+      class="shrink-0 animate-spin"
+      :class="ICON_SIZE[size]"
+    />
+    <component
+      :is="icon"
+      v-else-if="icon"
+      class="shrink-0"
+      :class="ICON_SIZE[size]"
+    />
+    <span v-if="$slots.default" class="truncate">
+      <slot />
+    </span>
+  </button>
+</template>
+
+<style scoped>
+@media (prefers-reduced-motion: reduce) {
+  .button-v2 {
+    transition: none;
+  }
+}
+</style>

package/components/elements/button/types.ts

@@ -1,24 +1,24 @@
-export type TypeSwitchValues = {
-  [key in 'primary' | 'success' | 'danger' | 'gray' | 'ghost']: string;
-};
-
-export type ViewSwitchValues = {
-  default: TypeSwitchValues;
-  transparent: TypeSwitchValues;
-  outline: TypeSwitchValues;
-};
-
-export type SizeSwitchValues = {
-  icon: {
-    [key in 'sm' | 'md' | 'lg' | 'xl']: string;
-  };
-  button: {
-    [key in 'sm' | 'md' | 'lg' | 'xl']: string;
-  };
-};
-
-export type DisabledViewSwitchValues = {
-  default: string;
-  transparent: string;
-  outline: string;
-}
+export type TypeSwitchValues = {
+  [key in 'primary' | 'success' | 'danger' | 'gray' | 'ghost']: string;
+};
+
+export type ViewSwitchValues = {
+  default: TypeSwitchValues;
+  transparent: TypeSwitchValues;
+  outline: TypeSwitchValues;
+};
+
+export type SizeSwitchValues = {
+  icon: {
+    [key in 'sm' | 'md' | 'lg' | 'xl']: string;
+  };
+  button: {
+    [key in 'sm' | 'md' | 'lg' | 'xl']: string;
+  };
+};
+
+export type DisabledViewSwitchValues = {
+  default: string;
+  transparent: string;
+  outline: string;
+}

package/components/elements/button-login/index.vue

@@ -1,19 +1,19 @@
-<script setup lang="ts">
-defineEmits(['click'])
-
-const { t } = useI18n()
-</script>
-
-<template>
-  <!-- осознанно константный: фокус-кольцо ring-brand-500/50 — keep-лист ДС -->
-  <button
-    type="button"
-    class="hidden h-8 cursor-pointer items-center rounded-lg bg-action-primary px-3.5 text-body-md-strong text-action-primary-fg transition-colors duration-150 hover:bg-action-primary-hover focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-500/50 focus-visible:ring-offset-1 lg:inline-flex"
-    data-test-id="header-login-button"
-    @click="$emit('click')"
-  >
-    {{ t('header.login') }}
-  </button>
-</template>
-
-<style scoped></style>
+<script setup lang="ts">
+defineEmits(['click'])
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <!-- осознанно константный: фокус-кольцо ring-brand-500/50 — keep-лист ДС -->
+  <button
+    type="button"
+    class="hidden h-8 cursor-pointer items-center rounded-lg bg-action-primary px-3.5 text-body-md-strong text-action-primary-fg transition-colors duration-150 hover:bg-action-primary-hover focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-500/50 focus-visible:ring-offset-1 lg:inline-flex"
+    data-test-id="header-login-button"
+    @click="$emit('click')"
+  >
+    {{ t('header.login') }}
+  </button>
+</template>
+
+<style scoped></style>

package/components/elements/calendar/ACalendar.vue

@@ -1,83 +1,83 @@
-<script lang="ts" setup>
-import { ref } from '#imports'
-
-defineOptions({
-  name: 'ACalendar'
-})
-
-interface Props {
-  locale?: 'ru' | 'en'
-  color: 'blue' | 'red' | 'yellow' | 'gray' | 'green'
-  type: 'single-date' | 'range-date'
-  mode: 'date' | 'time' | 'dateTime'
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  locale: 'ru',
-  color: 'blue',
-  type: 'range-date',
-  mode: 'date'
-})
-
-const date = defineModel<Date>({
-  default: new Date()
-})
-
-const range = defineModel<{
-  value: {
-    start: Date
-    end: Date
-  }
-}>('range', {
-  default: {
-    start: new Date(),
-    end: new Date(new Date().setDate(new Date().getDate() + 14))
-  }
-})
-
-const popover = {
-  visibility: 'click',
-  placement: 'bottom-end',
-}
-</script>
-
-<template>
-  <div>
-    <client-only>
-      <VDatePicker
-        v-if="type === 'range-date'"
-        v-model.range="range"
-        :is-dark="{ selector: ':root', darkClass: 'dark' }"
-        :color="color"
-        :locale="locale"
-        :mode="mode"
-        title-position="left"
-        :popover="popover"
-      >
-        <template
-          v-if="$slots.default"
-          #default="value"
-        >
-          <slot v-bind="value" />
-        </template>
-      </VDatePicker>
-      <VDatePicker
-        v-else
-        v-model="date"
-        :is-dark="{ selector: ':root', darkClass: 'dark' }"
-        :color="color"
-        :locale="locale"
-        :mode="mode"
-        title-position="left"
-        :popover="popover"
-      >
-        <template
-          v-if="$slots.default"
-          #default="value"
-        >
-          <slot v-bind="value" />
-        </template>
-      </VDatePicker>
-    </client-only>
-  </div>
-</template>
+<script lang="ts" setup>
+import { ref } from '#imports'
+
+defineOptions({
+  name: 'ACalendar'
+})
+
+interface Props {
+  locale?: 'ru' | 'en'
+  color: 'blue' | 'red' | 'yellow' | 'gray' | 'green'
+  type: 'single-date' | 'range-date'
+  mode: 'date' | 'time' | 'dateTime'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  locale: 'ru',
+  color: 'blue',
+  type: 'range-date',
+  mode: 'date'
+})
+
+const date = defineModel<Date>({
+  default: new Date()
+})
+
+const range = defineModel<{
+  value: {
+    start: Date
+    end: Date
+  }
+}>('range', {
+  default: {
+    start: new Date(),
+    end: new Date(new Date().setDate(new Date().getDate() + 14))
+  }
+})
+
+const popover = {
+  visibility: 'click',
+  placement: 'bottom-end',
+}
+</script>
+
+<template>
+  <div>
+    <client-only>
+      <VDatePicker
+        v-if="type === 'range-date'"
+        v-model.range="range"
+        :is-dark="{ selector: ':root', darkClass: 'dark' }"
+        :color="color"
+        :locale="locale"
+        :mode="mode"
+        title-position="left"
+        :popover="popover"
+      >
+        <template
+          v-if="$slots.default"
+          #default="value"
+        >
+          <slot v-bind="value" />
+        </template>
+      </VDatePicker>
+      <VDatePicker
+        v-else
+        v-model="date"
+        :is-dark="{ selector: ':root', darkClass: 'dark' }"
+        :color="color"
+        :locale="locale"
+        :mode="mode"
+        title-position="left"
+        :popover="popover"
+      >
+        <template
+          v-if="$slots.default"
+          #default="value"
+        >
+          <slot v-bind="value" />
+        </template>
+      </VDatePicker>
+    </client-only>
+  </div>
+</template>