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

package/assets/styles/ui.css

@@ -0,0 +1,170 @@
+/*
+ * Глобальные стили adata-ui вне Tailwind-слоёв (порт assets/styles/index.scss).
+ * Подключается через CSS-вход слоя (assets/styles/main.css).
+ */
+
+html {
+  scrollbar-gutter: stable;
+}
+
+body {
+  padding: 0 !important;
+  /* Семантические токены переключаются в тёмной теме сами (см. theme.css). */
+  color: var(--text-color-primary);
+  background-color: var(--background-color-main);
+}
+
+html::-webkit-scrollbar {
+  width: 15px;
+}
+
+html::-webkit-scrollbar-thumb {
+  background: var(--border-color-strong);
+}
+
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.no-scrollbar {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+@media (min-width: 320px) and (max-width: 767px) {
+  .a-container {
+    padding: 0;
+  }
+
+  .mobile-padding {
+    padding: 16px;
+  }
+}
+
+/* Осознанное hex-исключение (реестр в git-истории: git show 69039ec:docs/color-migration.md).
+   Тема — по классу .dark, как у соседнего .bg-gradient-banner. */
+.bg-gradient-blue {
+  background: linear-gradient(236.46deg, #479FFF -2.39%, #0070EB 79.1%);
+}
+
+.dark .bg-gradient-blue {
+  background: linear-gradient(236.46deg, #4FBDFF -2.39%, #1B98E2 79.1%);
+}
+
+/* Промо-баннеры (IdBanner, PaymentBanner, UpSellBanner, BasicPlusLimitBanner).
+   Осознанное hex-исключение, как .bg-gradient-blue (реестр в git-истории:
+   git show 69039ec:docs/color-migration.md). */
+.bg-gradient-banner {
+  background: linear-gradient(239.71deg, #B3D5F9 -7.48%, #E6F1FD 39.62%, #CCE2FB 85.82%);
+}
+
+.dark .bg-gradient-banner {
+  background: linear-gradient(239.71deg, #17303F -7.48%, #161617 39.62%, #17303F 85.82%);
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.Toastify__toast-container {
+  z-index: 10002 !important;
+}
+
+@media (min-width: 481px) {
+  .Toastify__toast-container {
+    width: 600px;
+  }
+}
+
+.Toastify__toast-container .Toastify__toast {
+  min-height: 71px;
+  padding: 14px 16px;
+  border: 1px solid transparent;
+  border-left-width: 4px; /* акцентная полоса слева */
+  border-radius: 12px;
+  box-shadow: none;
+}
+
+.Toastify__toast-container .Toastify__toast-body {
+  margin: 0;
+  padding: 0;
+  gap: 12px;
+  align-items: center;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 24px;
+}
+
+.Toastify__toast-container .Toastify__toast-icon {
+  width: 24px;
+  height: 24px;
+  margin-inline-end: 0;
+}
+
+.Toastify__toast-container .Toastify__toast-icon svg {
+  width: 24px;
+  height: 24px;
+}
+
+.Toastify__toast-container .Toastify__close-button {
+  align-self: center;
+  color: var(--color-secondary-500);
+  opacity: 0.6;
+}
+
+.Toastify__toast-container .Toastify__close-button:hover {
+  opacity: 1;
+}
+
+/* info на brand: старый фон #eff6ff (стоковый blue-50) ≈ brand-50 — дельта в реестре (git show 69039ec:docs/color-migration.md) */
+.Toastify__toast-container .Toastify__toast--info    { background: var(--color-brand-50); border-color: var(--color-brand-500); color: var(--color-brand-500); }
+.Toastify__toast-container .Toastify__toast--success { background: var(--color-green-50); border-color: var(--color-green-600); color: var(--color-green-600); }
+.Toastify__toast-container .Toastify__toast--warning { background: var(--color-amber-50); border-color: var(--color-amber-600); color: var(--color-amber-600); }
+.Toastify__toast-container .Toastify__toast--error   { background: var(--color-red-50); border-color: var(--color-red-600); color: var(--color-red-600); }
+
+.Toastify__toast-container .Toastify__toast--info    .Toastify__progress-bar { background: var(--color-brand-500); }
+.Toastify__toast-container .Toastify__toast--success .Toastify__progress-bar { background: var(--color-green-600); }
+.Toastify__toast-container .Toastify__toast--warning .Toastify__progress-bar { background: var(--color-amber-600); }
+.Toastify__toast-container .Toastify__toast--error   .Toastify__progress-bar { background: var(--color-red-600); }
+
+/* Тёмная тема (нежная, ручная подгонка — оставлена как явный оверрайд поверх токенов):
+   фон = тинт solid-хекса тона /10, но непрозрачный (тост плавает над контентом) —
+   композит поверх #161617; бордер rgba(solid,0.4); текст/иконка -400. */
+.dark .Toastify__toast-container .Toastify__close-button { color: #e3e5e8; }
+
+.dark .Toastify__toast-container .Toastify__toast--info    { background: #14222e; border-color: rgba(6, 141, 255, 0.4); color: #43afed; }
+.dark .Toastify__toast-container .Toastify__toast--success { background: #14241b; border-color: rgba(0, 166, 62, 0.4); color: #6bbd6e; }
+.dark .Toastify__toast-container .Toastify__toast--warning { background: #2a1f15; border-color: rgba(225, 113, 0, 0.4); color: #ffc31e; }
+.dark .Toastify__toast-container .Toastify__toast--error   { background: #2b1416; border-color: rgba(231, 0, 11, 0.4); color: #f47e75; }
+
+input[type="search"]::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+input[type="search"]::-ms-clear {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
+/* Firefox */
+input[type="number"] {
+  -moz-appearance: textfield;
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  border: 0;
+  padding: 0;
+  white-space: nowrap;
+  clip-path: inset(100%);
+  clip: rect(0 0 0 0);
+  overflow: hidden;
+}

package/components/elements/README.md

@@ -1 +1 @@
-# button, alerts, dropdown
+# button, alerts, dropdown

package/components/elements/a-select-row/ASelectRowV2.vue

@@ -1,214 +1,210 @@
-<script setup lang="ts">
-import { useChipOverflow } from '#adata-ui/composables/useChipOverflow'
-
-interface Item {
-  id: number | string
-  name: string
-}
-
-interface Props {
-  label: string
-  selectedItems: Item[]
-  clearable?: boolean
-  disabled?: boolean
-  deletable?: boolean
-  btnClass?: string
-  size?: 'sm' | 'md'
-  required?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  clearable: true,
-  disabled: false,
-  deletable: false,
-  btnClass: '',
-  size: 'md',
-  required: false,
-})
-
-const emit = defineEmits<{
-  (e: 'delete', item: Item): void
-  (e: 'clear'): void
-}>()
-
-const isOpen = defineModel<boolean>('isOpen', { default: false })
-
-const chipsRow = ref<HTMLElement | null>(null)
-const measureRow = ref<HTMLElement | null>(null)
-
-const itemCount = computed(() => props.selectedItems?.length ?? 0)
-
-const { visibleCount, hiddenCount } = useChipOverflow({
-  container: chipsRow,
-  measure: measureRow,
-  count: itemCount,
-  contentKey: computed(() => props.selectedItems?.map(item => item.name).join(' ') ?? ''),
-  gap: 6,
-})
-
-const visibleItems = computed(() => props.selectedItems.slice(0, visibleCount.value))
-
-const showFloatingLabel = computed(() => !!props.label && !visibleItems.value?.length)
-
-const hasValue = computed(() => itemCount.value > 0)
-
-const isLabelFloated = computed(() => hasValue.value || isOpen.value)
-
-function deleteItem(item: Item) {
-  emit('delete', item)
-}
-
-function onClear() {
-  emit('clear')
-}
-
-const triggerLayoutClass = computed(() => {
-  if (hasValue.value || !props.label) {
-    return props.size === 'md' ? 'h-10 py-1.5' : 'h-9 py-1.5'
-  }
-  return props.size === 'md' ? 'h-10 pt-3.5 pb-1' : 'h-9 pt-[14px] pb-1'
-})
-
-defineExpose({ onClear })
-</script>
-
-<template>
-  <div class="select-row-v2 relative w-full text-sm">
-    <button
-      type="button"
-      :disabled="disabled"
-      :class="[
-        triggerLayoutClass,
-        clearable ? 'pr-16' : 'pr-9',
-        disabled
-          ? 'border-gray-200 bg-gray-100/70 dark:border-gray-700 dark:bg-white/[0.03]'
-          : (btnClass || 'border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900'),
-        { 'select-row-v2__trigger--open': isOpen },
-      ]"
-      class="select-row-v2__trigger text-deepblue-900 relative flex w-full items-center gap-2 rounded-[10px] border border-solid pl-4 transition-colors duration-200 hover:border-blue-500 focus-visible:border-blue-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600/20 dark:text-gray-200 dark:hover:border-blue-400 dark:focus-visible:border-blue-400 dark:focus-visible:ring-blue-400/20"
-      @click="isOpen = !isOpen"
-    >
-      <span
-        v-if="showFloatingLabel"
-        :data-size="size"
-        class="select-row-v2__label pointer-events-none absolute left-4 top-1/2 max-w-[calc(100%-48px)] truncate text-gray-500 dark:text-gray-400"
-        :class="{ 'select-row-v2__label--floated': isLabelFloated }"
-      >
-        {{ label }}<span v-if="required" class="text-red-500 dark:text-red-400">&nbsp;*</span>
-      </span>
-
-      <span ref="chipsRow" class="relative flex w-full min-w-0 items-center gap-1.5 overflow-hidden text-start leading-none">
-        <template v-if="hasValue">
-          <span
-            v-for="item in visibleItems"
-            :key="item.id"
-            class="select-row-v2__chip inline-flex min-w-0 items-center gap-1 rounded-md border border-gray-200 bg-gray-50 px-2 py-0.5 text-xs dark:border-gray-700 dark:bg-white/[0.06]"
-            @click.stop="deletable ? deleteItem(item) : (isOpen = true)"
-          >
-            <span class="truncate">{{ item.name }}</span>
-            <button
-              v-if="deletable"
-              type="button"
-              class="flex shrink-0 items-center justify-center rounded-full p-0.5 transition-colors hover:bg-gray-200 dark:hover:bg-white/[0.12]"
-            >
-              <a-icon-x-mark class="size-2.5" />
-            </button>
-          </span>
-          <span
-            v-if="hiddenCount > 0"
-            class="inline-flex shrink-0 items-center whitespace-nowrap rounded-md border border-blue-200 bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-700 dark:border-blue-800 dark:bg-blue-900/30 dark:text-blue-400"
-          >
-            +{{ hiddenCount }}
-          </span>
-
-          <span
-            ref="measureRow"
-            aria-hidden="true"
-            class="pointer-events-none invisible absolute left-0 top-0 flex h-0 w-max items-center gap-1.5"
-          >
-            <span
-              v-for="item in selectedItems"
-              :key="`measure-${item.id}`"
-              class="inline-flex items-center gap-1 whitespace-nowrap rounded-md border border-gray-200 bg-gray-50 px-2 py-0.5 text-xs"
-            >
-              <span>{{ item.name }}</span>
-              <span
-                v-if="deletable"
-                class="flex shrink-0 items-center justify-center rounded-full p-0.5"
-              >
-                <a-icon-x-mark class="size-2.5" />
-              </span>
-            </span>
-            <span class="inline-flex shrink-0 items-center whitespace-nowrap rounded-md border px-2 py-0.5 text-xs font-medium">
-              +{{ itemCount }}
-            </span>
-          </span>
-        </template>
-        <span v-else class="text-gray-500 dark:text-gray-400">&#8203;</span>
-      </span>
-
-      <button
-        v-if="clearable && hasValue && !disabled"
-        type="button"
-        class="absolute right-9 top-1/2 flex -translate-y-1/2 items-center justify-center rounded-full p-0.5 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-white/[0.08] dark:hover:text-gray-300"
-        @click.stop="onClear"
-      >
-        <a-icon-x-mark class="!m-0 size-3.5" />
-      </button>
-
-      <span
-        :class="{ 'rotate-180': isOpen }"
-        class="absolute right-3 top-1/2 -translate-y-1/2 transition-transform duration-200"
-      >
-        <a-icon-chevron-down class="!m-0 size-4 text-gray-400 dark:text-gray-500" />
-      </span>
-    </button>
-  </div>
-</template>
-
-<style scoped>
-.select-row-v2__trigger:disabled {
-  pointer-events: none;
-  cursor: not-allowed;
-  opacity: 0.7;
-}
-
-.select-row-v2__chip {
-  cursor: pointer;
-  transition: background-color 150ms;
-}
-
-.select-row-v2__chip:hover {
-  background-color: theme('colors.gray.100');
-}
-
-:is(.dark) .select-row-v2__chip:hover {
-  background-color: rgb(255 255 255 / 0.08);
-}
-
-.select-row-v2__label {
-  font-size: 14px;
-  line-height: 1.3;
-  transform: translateY(-50%);
-  transition:
-    transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
-    font-size 300ms cubic-bezier(0.22, 1, 0.36, 1),
-    color 300ms ease-out;
-}
-
-.select-row-v2__label--floated {
-  font-size: 10px;
-  transform: translateY(-17px);
-}
-
-.select-row-v2__label--floated[data-size="sm"] {
-  transform: translateY(-14px);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .select-row-v2__label,
-  .select-row-v2__trigger {
-    transition: none;
-  }
-}
-</style>
+<script setup lang="ts">
+import { useChipOverflow } from '#adata-ui/composables/useChipOverflow'
+
+interface Item {
+  id: number | string
+  name: string
+}
+
+interface Props {
+  label: string
+  selectedItems: Item[]
+  clearable?: boolean
+  disabled?: boolean
+  deletable?: boolean
+  btnClass?: string
+  size?: 'sm' | 'md'
+  required?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  clearable: true,
+  disabled: false,
+  deletable: false,
+  btnClass: '',
+  size: 'md',
+  required: false,
+})
+
+const emit = defineEmits<{
+  (e: 'delete', item: Item): void
+  (e: 'clear'): void
+}>()
+
+const isOpen = defineModel<boolean>('isOpen', { default: false })
+
+const chipsRow = ref<HTMLElement | null>(null)
+const measureRow = ref<HTMLElement | null>(null)
+
+const itemCount = computed(() => props.selectedItems?.length ?? 0)
+
+const { visibleCount, hiddenCount } = useChipOverflow({
+  container: chipsRow,
+  measure: measureRow,
+  count: itemCount,
+  contentKey: computed(() => props.selectedItems?.map(item => item.name).join(' ') ?? ''),
+  gap: 6,
+})
+
+const visibleItems = computed(() => props.selectedItems.slice(0, visibleCount.value))
+
+const showFloatingLabel = computed(() => !!props.label && !visibleItems.value?.length)
+
+const hasValue = computed(() => itemCount.value > 0)
+
+const isLabelFloated = computed(() => hasValue.value || isOpen.value)
+
+function deleteItem(item: Item) {
+  emit('delete', item)
+}
+
+function onClear() {
+  emit('clear')
+}
+
+const triggerLayoutClass = computed(() => {
+  if (hasValue.value || !props.label) {
+    return props.size === 'md' ? 'h-10 py-1.5' : 'h-9 py-1.5'
+  }
+  return props.size === 'md' ? 'h-10 pt-3.5 pb-1' : 'h-9 pt-[14px] pb-1'
+})
+
+defineExpose({ onClear })
+</script>
+
+<template>
+  <div class="select-row-v2 relative w-full text-body-md">
+    <button
+      type="button"
+      :disabled="disabled"
+      :class="[
+        triggerLayoutClass,
+        clearable ? 'pr-16' : 'pr-9',
+        disabled
+          ? 'border-default bg-badge/70'
+          : (btnClass || 'border-default bg-main'),
+        { 'select-row-v2__trigger--open': isOpen },
+      ]"
+      class="select-row-v2__trigger text-primary relative flex w-full items-center gap-2 rounded-[10px] border border-solid pl-4 transition-colors duration-200 hover:border-brand focus-visible:border-focus focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-500/20"
+      @click="isOpen = !isOpen"
+    >
+      <span
+        v-if="showFloatingLabel"
+        :data-size="size"
+        class="select-row-v2__label pointer-events-none absolute left-4 top-1/2 max-w-[calc(100%-48px)] truncate text-secondary"
+        :class="{ 'select-row-v2__label--floated': isLabelFloated }"
+      >
+        {{ label }}<span v-if="required" class="text-danger">&nbsp;*</span>
+      </span>
+
+      <span ref="chipsRow" class="relative flex w-full min-w-0 items-center gap-1.5 overflow-hidden text-start leading-none">
+        <template v-if="hasValue">
+          <span
+            v-for="item in visibleItems"
+            :key="item.id"
+            class="select-row-v2__chip inline-flex min-w-0 items-center gap-1 rounded-sm bg-brand-subtle px-2 py-0.5 text-body-sm text-brand"
+            @click.stop="deletable ? deleteItem(item) : (isOpen = true)"
+          >
+            <span class="truncate">{{ item.name }}</span>
+            <button
+              v-if="deletable"
+              type="button"
+              class="flex shrink-0 items-center justify-center rounded-full p-0.5 transition-colors hover:bg-blue-subtle"
+            >
+              <a-icon-x-mark class="size-2.5" />
+            </button>
+          </span>
+          <span
+            v-if="hiddenCount > 0"
+            class="inline-flex shrink-0 items-center whitespace-nowrap rounded-sm bg-blue-subtle px-2 py-0.5 text-body-sm-medium text-brand"
+          >
+            +{{ hiddenCount }}
+          </span>
+
+          <span
+            ref="measureRow"
+            aria-hidden="true"
+            class="pointer-events-none invisible absolute left-0 top-0 flex h-0 w-max items-center gap-1.5"
+          >
+            <span
+              v-for="item in selectedItems"
+              :key="`measure-${item.id}`"
+              class="inline-flex items-center gap-1 whitespace-nowrap rounded-sm bg-muted px-2 py-0.5 text-body-sm"
+            >
+              <span>{{ item.name }}</span>
+              <span
+                v-if="deletable"
+                class="flex shrink-0 items-center justify-center rounded-full p-0.5"
+              >
+                <a-icon-x-mark class="size-2.5" />
+              </span>
+            </span>
+            <span class="inline-flex shrink-0 items-center whitespace-nowrap rounded-sm px-2 py-0.5 text-body-sm-medium">
+              +{{ itemCount }}
+            </span>
+          </span>
+        </template>
+        <span v-else class="text-secondary">&#8203;</span>
+      </span>
+
+      <button
+        v-if="clearable && hasValue && !disabled"
+        type="button"
+        class="absolute right-9 top-1/2 flex -translate-y-1/2 items-center justify-center rounded-full p-0.5 transition-colors hover:bg-badge"
+        @click.stop="onClear"
+      >
+        <a-icon-x-mark class="!m-0 size-3.5" />
+      </button>
+
+      <span
+        :class="{ 'rotate-180': isOpen }"
+        class="absolute right-3 top-1/2 -translate-y-1/2 transition-transform duration-200"
+      >
+        <a-icon-chevron-down class="!m-0 size-4 text-icon-disabled" />
+      </span>
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.select-row-v2__trigger:disabled {
+  pointer-events: none;
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+.select-row-v2__chip {
+  cursor: pointer;
+  transition: background-color 150ms;
+}
+
+.select-row-v2__chip:hover {
+  background-color: var(--background-color-blue-subtle);
+}
+
+.select-row-v2__label {
+  font-size: 14px;
+  line-height: 1.3;
+  transform: translateY(-50%);
+  transition:
+    transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
+    font-size 300ms cubic-bezier(0.22, 1, 0.36, 1),
+    color 300ms ease-out;
+}
+
+.select-row-v2__label--floated {
+  font-size: 10px;
+  transform: translateY(-17px);
+}
+
+.select-row-v2__label--floated[data-size="sm"] {
+  transform: translateY(-14px);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .select-row-v2__label,
+  .select-row-v2__trigger {
+    transition: none;
+  }
+}
+</style>