adata-ui 2.1.40-beta.18 → 2.1.40-beta.19

package/.playground/app.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+const manualOpen = ref(false)
+const placements = ['top', 'top-start', 'bottom', 'bottom-end', 'left', 'right'] as const
+</script>
+
+<template>
+  <div class="min-h-screen bg-gray-50 p-10 dark:bg-gray-950">
+    <div class="mx-auto flex max-w-3xl flex-col gap-10">
+      <div class="flex items-center justify-between">
+        <h1 class="text-xl font-bold text-deepblue-900 dark:text-gray-100">
+          ATooltipV2
+        </h1>
+        <a-color-mode />
+      </div>
+
+      <!-- Placements + arrow (hover/focus) -->
+      <section class="flex flex-wrap gap-6">
+        <a-tooltip-v2
+          v-for="p in placements"
+          :key="p"
+          :placement="p"
+          arrow
+          :open-delay="80"
+        >
+          <button class="rounded-lg bg-blue-700 px-3 py-2 text-sm text-white dark:bg-blue-500 dark:text-gray-900">
+            {{ p }}
+          </button>
+          <template #content>
+            <div class="text-[11px] text-deepblue-900 dark:text-gray-100">
+              Placement <b>{{ p }}</b>
+            </div>
+          </template>
+        </a-tooltip-v2>
+      </section>
+
+      <!-- Click trigger, interactive content -->
+      <section>
+        <a-tooltip-v2
+          trigger="click"
+          placement="bottom-start"
+          arrow
+          content-class="w-56"
+        >
+          <button class="rounded-lg px-3 py-2 text-sm text-deepblue-900 ring-1 ring-gray-200 dark:text-gray-100 dark:ring-gray-700">
+            Click me
+          </button>
+          <template #content="{ close }">
+            <div class="flex flex-col gap-2 text-[11px] text-deepblue-900 dark:text-gray-100">
+              <p>Interactive — outside-click &amp; Esc close.</p>
+              <button
+                class="self-start text-blue-700 dark:text-blue-400"
+                @click="close"
+              >
+                Close
+              </button>
+            </div>
+          </template>
+        </a-tooltip-v2>
+      </section>
+
+      <!-- Manual via v-model:open -->
+      <section class="flex items-center gap-4">
+        <button
+          class="rounded-lg bg-deepblue-900 px-3 py-2 text-sm text-white dark:bg-gray-100 dark:text-gray-900"
+          @click="manualOpen = !manualOpen"
+        >
+          Toggle manual ({{ manualOpen }})
+        </button>
+        <a-tooltip-v2
+          v-model:open="manualOpen"
+          trigger="manual"
+          placement="right"
+          arrow
+        >
+          <span class="text-sm text-gray-500 dark:text-gray-400">anchor</span>
+          <template #content>
+            <div class="text-[11px] text-deepblue-900 dark:text-gray-100">
+              Manually controlled
+            </div>
+          </template>
+        </a-tooltip-v2>
+      </section>
+
+      <!-- Teleport out of an overflow-hidden container -->
+      <section class="h-24 overflow-hidden rounded-lg p-3 ring-1 ring-gray-200 dark:ring-gray-700">
+        <a-tooltip-v2
+          placement="top"
+          arrow
+        >
+          <button class="rounded-lg bg-green-500 px-3 py-2 text-sm text-white dark:text-gray-900">
+            Inside overflow-hidden (teleported)
+          </button>
+          <template #content>
+            <div class="text-[11px] text-deepblue-900 dark:text-gray-100">
+              Not clipped
+            </div>
+          </template>
+        </a-tooltip-v2>
+      </section>
+    </div>
+  </div>
+</template>

package/assets/styles/index.scss

@@ -68,18 +68,80 @@ input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
-.toast__body{
-  padding:0 16px 0 0 !important;
-  margin:0 !important;
-  align-items: stretch !important;
-}
 .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: #2c3e50;
+  opacity: 0.6;
+}
+
+.Toastify__toast-container .Toastify__close-button:hover {
+  opacity: 1;
+}
+
+.Toastify__toast-container .Toastify__toast--info    { background: #eff6ff; border-color: #068dff; color: #068dff; }
+.Toastify__toast-container .Toastify__toast--success { background: #f0fdf4; border-color: #00a63e; color: #00a63e; }
+.Toastify__toast-container .Toastify__toast--warning { background: #fffbeb; border-color: #e17100; color: #e17100; }
+.Toastify__toast-container .Toastify__toast--error   { background: #fef2f2; border-color: #e7000b; color: #e7000b; }
+
+.Toastify__toast-container .Toastify__toast--info    .Toastify__progress-bar { background: #068dff; }
+.Toastify__toast-container .Toastify__toast--success .Toastify__progress-bar { background: #00a63e; }
+.Toastify__toast-container .Toastify__toast--warning .Toastify__progress-bar { background: #e17100; }
+.Toastify__toast-container .Toastify__toast--error   .Toastify__progress-bar { background: #e7000b; }
+
+/* Тёмная тема (нежная): фон = тинт 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;

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

@@ -0,0 +1,214 @@
+<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-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-sm bg-[#F0F8FF] px-2 py-0.5 text-body-sm text-blue-600 dark:bg-blue-600/15 dark:text-blue-400"
+            @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-100 dark:hover:bg-blue-500/20"
+            >
+              <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-[#DBEFFF] px-2 py-0.5 text-body-sm-medium text-[#0066BD] dark:bg-blue-600/25 dark:text-blue-300"
+          >
+            +{{ 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-gray-50 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-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 transition-colors hover:bg-gray-100 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.blue.100');
+}
+
+:is(.dark) .select-row-v2__chip:hover {
+  background-color: rgb(6 141 255 / 0.25);
+}
+
+.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>

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import AChips from '~/components/elements/chips/AChips.vue'
+import { twMerge } from '#adata-ui/utils/twMerge'
 import {isEqual} from 'lodash-es'
-import { twMerge } from 'tailwind-merge'
+import AChips from '~/components/elements/chips/AChips.vue'
 
 type Item = {
   id: number | string
@@ -17,8 +17,6 @@ interface Props {
   btnClass?: string
 }
 
-// const items = defineModel<Item[]>('selectedItems', {required: true})
-
 type Emits = {
   (e: 'delete', item: Item): void
 }
@@ -83,7 +81,7 @@ const onClear = () => {
     <button
       ref="buttonElement"
       class="hover:border-blue focus-visible:outline-blue
-      relative flex w-full items-center justify-between gap-2 rounded-md
+      relative flex w-full items-center justify-between gap-2 rounded-sm
       border border-solid border-deepblue-50 bg-deepblue-50 min-h-[40px] text-gray-500 body-400 px-4 py-1.5
       focus-visible:shadow-[0_0_0_4px#1B64B3] dark:border-gray-900 dark:bg-gray-200/5
       dark:hover:border-blue-700"

package/components/elements/accordion/AAccordion.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 // REFACTOR @Iskander
-import ui from './ui.config'
-import {Disclosure, DisclosureButton, DisclosurePanel} from '@headlessui/vue'
-import {twJoin, twMerge} from 'tailwind-merge'
 import type {Color, Size} from "#adata-ui/components/elements/accordion/types";
+import {twJoin, twMerge} from '#adata-ui/utils/twMerge'
+import {Disclosure, DisclosureButton, DisclosurePanel} from '@headlessui/vue'
+import ui from './ui.config'
 
 export interface Props {
   label: string
@@ -16,6 +16,7 @@ export interface Props {
   contentClass?: string
   bodyClass?: string
   activateOpenBg?: boolean
+  iconChevronTestId?: string
 }
 
 interface Emits {
@@ -160,6 +161,7 @@ defineExpose({
           <a-icon-chevron-down
             :arrow-attrs="{ class: 'stroke-deepblue-900' }"
             :class="[{ 'rotate-180': open }, 'max-h-[16px] min-h-[16px] min-w-[16px] max-w-[16px]', ui.item.icon]"
+            :data-test-id="iconChevronTestId"
           />
         </button>
       </slot>

package/components/elements/accordion/AAccordionGroup/AAccordionGroup.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import ui from './ui.config'
+import type {Props, Size} from "./types";
+import {twJoin, twMerge} from '#adata-ui/utils/twMerge';
 import {
   Disclosure,
   DisclosureButton,
   DisclosurePanel
 } from '@headlessui/vue'
-import type {Size, Props} from "./types";
-import {twJoin, twMerge} from "tailwind-merge";
+import ui from './ui.config'
 
 defineOptions({
   inheritAttrs: false

package/components/elements/alert/AAlert.vue

@@ -1,65 +1,52 @@
-<template>
-  <div
-    class="inline-flex w-full rounded-md"
-    :class="twMerge(colorOptions.description[color])"
-  >
-    <div
-      class="flex items-center justify-center rounded-l-md"
-      :class="twMerge([colorOptions.icon[color], sizeOptions[size]])"
-    >
-      <slot name="icon">
-        <a-icon-info-circle v-if="iconType == 'circle'" :class="`w-[${iconSize}] h-[${iconSize}]`" />
-        <a-icon-warning-triangle v-if="iconType == 'triangle'" :class="`w-[${iconSize}] h-[${iconSize}]`" />
-      </slot>
-    </div>
-    <div
-      :class="sizeOptions[size]"
-      class="rounded-r-md flex items-center"
-    >
-      <slot name="default" />
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
-import {twMerge} from "tailwind-merge";
-
-defineOptions({ name: 'AAlert' })
-
 interface Props {
   size?: 'lg' | 'sm' | 'xs'
   color?: 'blue' | 'green' | 'red' | 'deepblue' | 'orange'
-  iconType?:'triangle' |'circle'
+  iconType?: 'triangle' | 'circle'
   iconSize?: string
 }
-withDefaults(defineProps<Props>(), {
+defineOptions({ name: 'AAlert' })
+
+const props = withDefaults(defineProps<Props>(), {
   size: 'sm',
   color: 'blue',
-  iconType:'circle',
+  iconType: 'circle',
   iconSize: '16px',
 })
+
 const sizeOptions = {
-  lg: 'text-base p-2',
-  sm: 'text-sm px-2 py-[3.5px]',
-  xs: 'text-xs px-2 py-[3.5px]'
+  lg: 'text-body-lg',
+  sm: 'text-body-md',
+  xs: 'text-body-sm',
 }
 
 const colorOptions = {
-  icon: {
-    blue: 'bg-blue-700 text-white dark:bg-blue-500 dark:text-gray-900',
-    green: 'bg-green-500 text-white dark:text-gray-900',
-    orange: 'bg-[#FCA204] text-white dark:text-gray-900',
-    deepblue: 'bg-deepblue-900 text-white dark:text-gray-900',
-    red: 'bg-red-500 text-white dark:bg-red-400 dark:text-gray-900'
-  },
-  description: {
-    blue: 'bg-blue-100 dark:bg-gray-200/10 text-blue-700 dark:text-blue-500',
-    green: 'bg-green-100 text-green-500',
-    orange: 'bg-[#FFF5E6] dark:bg-[#FCA2041A] text-[#FCA204]',
-    deepblue: 'bg-deepblue-100 text-deepblue-900',
-    red: 'bg-red-100 text-red-500 dark:bg-[#3A3133] dark:text-red-400'
-  }
+  blue: 'bg-[#EFF6FF] border-[#068DFF] text-[#068DFF] dark:bg-[#068DFF]/10 dark:border-[#068DFF]/40 dark:text-blue-400',
+  green: 'bg-[#F0FDF4] border-[#00A63E] text-[#00A63E] dark:bg-[#00A63E]/10 dark:border-[#00A63E]/40 dark:text-green-400',
+  orange: 'bg-[#FFFBEB] border-[#E17100] text-[#E17100] dark:bg-[#E17100]/10 dark:border-[#E17100]/40 dark:text-orange-400',
+  red: 'bg-[#FEF2F2] border-[#E7000B] text-[#E7000B] dark:bg-[#E7000B]/10 dark:border-[#E7000B]/40 dark:text-red-400',
+  deepblue: 'bg-deepblue-100 border-deepblue-900 text-deepblue-900 dark:bg-gray-500/10 dark:border-gray-500/40 dark:text-gray-300',
 }
+
+const rootClass = computed(() => [colorOptions[props.color], sizeOptions[props.size]])
+const iconStyle = computed(() => ({ width: props.iconSize, height: props.iconSize }))
 </script>
 
+<template>
+  <div
+    class="flex w-full items-center gap-2 rounded-lg border border-l-4 p-2"
+    :class="rootClass"
+  >
+    <span class="flex shrink-0 items-center justify-center">
+      <slot name="icon">
+        <a-icon-info-circle v-if="iconType === 'circle'" :style="iconStyle" />
+        <a-icon-warning-triangle v-else :style="iconStyle" />
+      </slot>
+    </span>
+    <div class="min-w-0 flex-1">
+      <slot name="default" />
+    </div>
+  </div>
+</template>
+
 <style scoped></style>

package/components/elements/bg-block/ABgBlock.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-  <div class="md:rounded-lg p-4 bg-white dark:bg-gray-900">
+  <div class="md:rounded-md p-4 bg-white dark:bg-gray-900">
     <slot />
   </div>
 </template>

package/components/elements/button/AButton.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 // TODO: refactor Ilkham
-import { twJoin, twMerge } from 'tailwind-merge'
 import type { Component } from 'vue'
 import type { DisabledViewSwitchValues, SizeSwitchValues, ViewSwitchValues } from './types'
+import { twJoin, twMerge } from '#adata-ui/utils/twMerge'
 import { NuxtLinkLocale} from '#components'
 
 defineOptions({ name: 'AButton' })
@@ -35,13 +35,13 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const classes = computed(() => [
-  'body-600 rounded-md cursor-pointer outline-none transition duration-200 select-none',
+  'text-body-md-strong rounded-sm cursor-pointer outline-none transition duration-200 select-none',
   props.block ? 'w-full' : '',
   typeSwitchValues[props.view][props.variant],
   sizeSwitchValues[props.form][props.size]
 ])
 const disabledClasses = computed(() => [
-  'body-600 rounded-md outline-none transition duration-200 select-none',
+  'text-body-md-strong rounded-sm outline-none transition duration-200 select-none',
   props.block ? 'w-full' : '',
   disabledTypeSwitchValues[props.view],
   sizeSwitchValues[props.form][props.size]