adata-ui 2.1.40-beta.9 → 2.1.41-beta.0

package/components/elements/button/AButtonV2.vue

@@ -1,112 +1,134 @@
-<script setup lang="ts">
-import type { Component } from 'vue'
-
-type View = 'solid' | 'outline' | 'ghost' | 'soft'
-type Size = 'sm' | 'md' | 'lg'
-type Color = 'blue' | 'green' | 'red' | 'gray'
-
-const props = withDefaults(defineProps<{
-  view?: View
-  color?: Color
-  size?: Size
-  icon?: Component
-  iconRight?: boolean
-  loading?: boolean
-  disabled?: boolean
-  block?: boolean
-  type?: 'button' | 'submit' | 'reset'
-}>(), {
-  view: 'solid',
-  color: 'blue',
-  size: 'md',
-  iconRight: false,
-  loading: false,
-  disabled: false,
-  block: false,
-  type: 'button',
-})
-
-const emit = defineEmits<{ click: [event: MouseEvent] }>()
-
-const VIEW_CLASS: Record<Color, Record<View, string>> = {
-  blue: {
-    solid: 'bg-blue-600 text-white shadow-sm hover:bg-blue-700 hover:shadow-md active:bg-blue-800 dark:bg-blue-500 dark:hover:bg-blue-400',
-    outline: 'border border-blue-500 bg-white text-blue-700 hover:bg-blue-50 active:bg-blue-100 dark:border-blue-500 dark:bg-gray-900 dark:text-blue-300 dark:hover:bg-blue-950/40',
-    ghost: 'text-deepblue-900 hover:bg-gray-100 active:bg-gray-200 dark:text-gray-100 dark:hover:bg-white/[0.06] dark:active:bg-white/[0.1]',
-    soft: 'bg-blue-50 text-blue-700 hover:bg-blue-100 active:bg-blue-200/70 dark:bg-blue-950/40 dark:text-blue-300 dark:hover:bg-blue-900/40',
-  },
-  green: {
-    solid: 'bg-green-600 text-white shadow-sm hover:bg-green-700 hover:shadow-md active:bg-green-800 dark:bg-green-500 dark:hover:bg-green-400',
-    outline: 'border border-green-500 bg-white text-green-700 hover:bg-green-50 active:bg-green-100 dark:border-green-500 dark:bg-gray-900 dark:text-green-300 dark:hover:bg-green-950/40',
-    ghost: 'text-green-700 hover:bg-green-50 active:bg-green-100 dark:text-green-300 dark:hover:bg-green-950/40',
-    soft: 'bg-green-50 text-green-700 hover:bg-green-100 active:bg-green-200/70 dark:bg-green-950/40 dark:text-green-300 dark:hover:bg-green-900/40',
-  },
-  red: {
-    solid: 'bg-red-600 text-white shadow-sm hover:bg-red-700 hover:shadow-md active:bg-red-800 dark:bg-red-500 dark:hover:bg-red-400',
-    outline: 'border border-red-500 bg-white text-red-700 hover:bg-red-50 active:bg-red-100 dark:border-red-500 dark:bg-gray-900 dark:text-red-300 dark:hover:bg-red-950/40',
-    ghost: 'text-red-700 hover:bg-red-50 active:bg-red-100 dark:text-red-300 dark:hover:bg-red-950/40',
-    soft: 'bg-red-50 text-red-700 hover:bg-red-100 active:bg-red-200/70 dark:bg-red-950/40 dark:text-red-300 dark:hover:bg-red-900/40',
-  },
-  gray: {
-    solid: 'bg-gray-600 text-white shadow-sm hover:bg-gray-700 hover:shadow-md active:bg-gray-800 dark:bg-gray-500 dark:hover:bg-gray-400',
-    outline: 'border border-gray-300 bg-white text-deepblue-900 hover:border-gray-400 hover:bg-gray-50 active:bg-gray-100 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:hover:border-gray-600 dark:hover:bg-white/[0.06]',
-    ghost: 'text-deepblue-900 hover:bg-gray-100 active:bg-gray-200 dark:text-gray-100 dark:hover:bg-white/[0.06] dark:active:bg-white/[0.1]',
-    soft: 'bg-gray-100 text-gray-700 hover:bg-gray-200 active:bg-gray-200/70 dark:bg-gray-800/60 dark:text-gray-200 dark:hover:bg-gray-700/60',
-  },
-}
-
-const SIZE_CLASS: Record<Size, string> = {
-  sm: 'h-8 gap-1.5 px-3 text-xs',
-  md: 'h-10 gap-2 px-4 text-sm',
-  lg: 'h-12 gap-2.5 px-5 text-base',
-}
-
-const ICON_SIZE: Record<Size, string> = {
-  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 select-none items-center justify-center rounded-xl font-semibold transition-all duration-150 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
-    :class="[
-      VIEW_CLASS[color][view],
-      SIZE_CLASS[size],
-      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'
+type Size = 'xs' | 'sm' | 'md' | 'lg'
+type Color = 'blue' | 'green' | 'red' | 'gray' | 'white'
+type Rounded = 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'
+
+const props = withDefaults(defineProps<{
+  view?: View
+  color?: Color
+  size?: Size
+  rounded?: Rounded
+  icon?: Component
+  iconRight?: boolean
+  loading?: boolean
+  disabled?: boolean
+  block?: boolean
+  type?: 'button' | 'submit' | 'reset'
+}>(), {
+  view: 'solid',
+  color: 'blue',
+  size: 'md',
+  rounded: 'lg',
+  iconRight: false,
+  loading: false,
+  disabled: false,
+  block: 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 shadow-xs hover:bg-action-primary-hover hover:shadow-md active:bg-action-primary-active',
+    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 shadow-xs hover:bg-green-700 hover:shadow-md active:bg-green-800 dark:hover:bg-green-800 dark:active:bg-green-900',
+    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 shadow-xs hover:bg-action-danger-hover hover:shadow-md active:bg-action-danger-hover',
+    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 shadow-xs hover:bg-gray-600 hover:shadow-md active:bg-gray-700',
+    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 shadow-xs hover:bg-brand-subtle hover:shadow-md active:bg-blue-subtle',
+    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',
+  },
+}
+
+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',
+}
+
+const ROUNDED_CLASS: Record<Rounded, string> = {
+  none: 'rounded-none',
+  sm: 'rounded-sm',
+  md: 'rounded-md',
+  lg: 'rounded-lg',
+  xl: 'rounded-xl',
+  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 select-none items-center justify-center font-semibold transition-all duration-150 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50"
+    :class="[
+      VIEW_CLASS[color][view],
+      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>

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,18 +1,19 @@
-<script setup lang="ts">
-defineEmits(['click'])
-
-const { t } = useI18n()
-</script>
-
-<template>
-  <button
-    type="button"
-    class="hidden h-8 cursor-pointer items-center rounded-xl bg-blue-700 px-3.5 text-sm font-semibold text-white transition-colors duration-150 hover:bg-blue-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/50 focus-visible:ring-offset-1 dark:bg-blue-500 dark:text-gray-900 dark:hover:bg-blue-600 dark:focus-visible:ring-offset-gray-900 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>