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

package/tests/AButton.test.ts

@@ -1,81 +1,81 @@
-import { mount } from '@vue/test-utils'
-import AButton from '#adata-ui/components/elements/button/AButton.vue'
-import LoaderCircle from '#adata-ui/icons/icon-loader-circle.vue'
-import CheckIcon from '#adata-ui/icons/check/check.vue'
-
-describe('AButton', () => {
-  it('renders with default props', () => {
-    const wrapper = mount(AButton, {
-      props: {
-        variant: 'primary',
-        view: 'default',
-        size: 'lg',
-        form: 'button',
-        loading: false,
-        disabled: false,
-        block: false
-      },
-      slots: {
-        default: 'Button'
-      }
-    })
-    expect(wrapper.html()).toMatchInlineSnapshot(`
-      "<button class="body-400 rounded-md cursor-pointer outline-none transition duration-200 select-none bg-blue-700 text-white hover:bg-blue-900 active:bg-deepblue-900 active:text-white px-4 py-2.5 relative transition"><span class="flex items-center justify-center gap-2"><!---->Button</span>
-        <!--v-if-->
-      </button>"
-    `)
-  })
-
-  it('shows loader when loading is true', () => {
-    const wrapper = mount(AButton, {
-      props: { loading: true }
-    })
-    expect(wrapper.findComponent(LoaderCircle).exists()).toBe(true)
-    expect(wrapper.find('span').classes()).toContain('opacity-0')
-  })
-
-  it('renders button correctly with custom props', () => {
-    const wrapper = mount(AButton, {
-      props: {
-        variant: 'success',
-        view: 'outline',
-        size: 'sm',
-        form: 'icon',
-        icon: CheckIcon,
-        loading: false,
-        disabled: false,
-        block: true
-      },
-      slots: {
-        default: 'Icon'
-      }
-    })
-    expect(wrapper.findComponent(CheckIcon).exists()).toBe(true)
-    expect(wrapper.find('button').attributes('disabled')).toBeUndefined()
-  })
-
-  it('disables button when disabled prop is true', () => {
-    const wrapper = mount(AButton, {
-      props: {
-        disabled: true
-      }
-    })
-    expect(wrapper.classes('select-none')).toBe(true)
-    expect(wrapper.attributes('disabled')).toBeDefined()
-  })
-
-  it('emits click event when clicked', async () => {
-    const wrapper = mount(AButton)
-    await wrapper.find('button').trigger('click')
-    expect(wrapper.emitted('click')).toBeTruthy()
-  })
-
-  it('renders slot content correctly', () => {
-    const wrapper = mount(AButton, {
-      slots: {
-        default: 'Custom Button Text'
-      }
-    })
-    expect(wrapper.text()).toContain('Custom Button Text')
-  })
-})
+import { mount } from '@vue/test-utils'
+import AButton from '#adata-ui/components/elements/button/AButton.vue'
+import LoaderCircle from '#adata-ui/icons/icon-loader-circle.vue'
+import CheckIcon from '#adata-ui/icons/check/check.vue'
+
+describe('AButton', () => {
+  it('renders with default props', () => {
+    const wrapper = mount(AButton, {
+      props: {
+        variant: 'primary',
+        view: 'default',
+        size: 'lg',
+        form: 'button',
+        loading: false,
+        disabled: false,
+        block: false
+      },
+      slots: {
+        default: 'Button'
+      }
+    })
+    expect(wrapper.html()).toMatchInlineSnapshot(`
+      "<button class="body-400 rounded-md cursor-pointer outline-none transition duration-200 select-none bg-blue-700 text-white hover:bg-blue-900 active:bg-deepblue-900 active:text-white px-4 py-2.5 relative transition"><span class="flex items-center justify-center gap-2"><!---->Button</span>
+        <!--v-if-->
+      </button>"
+    `)
+  })
+
+  it('shows loader when loading is true', () => {
+    const wrapper = mount(AButton, {
+      props: { loading: true }
+    })
+    expect(wrapper.findComponent(LoaderCircle).exists()).toBe(true)
+    expect(wrapper.find('span').classes()).toContain('opacity-0')
+  })
+
+  it('renders button correctly with custom props', () => {
+    const wrapper = mount(AButton, {
+      props: {
+        variant: 'success',
+        view: 'outline',
+        size: 'sm',
+        form: 'icon',
+        icon: CheckIcon,
+        loading: false,
+        disabled: false,
+        block: true
+      },
+      slots: {
+        default: 'Icon'
+      }
+    })
+    expect(wrapper.findComponent(CheckIcon).exists()).toBe(true)
+    expect(wrapper.find('button').attributes('disabled')).toBeUndefined()
+  })
+
+  it('disables button when disabled prop is true', () => {
+    const wrapper = mount(AButton, {
+      props: {
+        disabled: true
+      }
+    })
+    expect(wrapper.classes('select-none')).toBe(true)
+    expect(wrapper.attributes('disabled')).toBeDefined()
+  })
+
+  it('emits click event when clicked', async () => {
+    const wrapper = mount(AButton)
+    await wrapper.find('button').trigger('click')
+    expect(wrapper.emitted('click')).toBeTruthy()
+  })
+
+  it('renders slot content correctly', () => {
+    const wrapper = mount(AButton, {
+      slots: {
+        default: 'Custom Button Text'
+      }
+    })
+    expect(wrapper.text()).toContain('Custom Button Text')
+  })
+})

package/tsconfig.json

@@ -1,6 +1,6 @@
-{
-  "extends": "./.playground/.nuxt/tsconfig.json",
-  "compilerOptions": {
-    "types": ["vitest/globals"]
-  }
-}
+{
+  "extends": "./.playground/.nuxt/tsconfig.json",
+  "compilerOptions": {
+    "types": ["vitest/globals"]
+  }
+}

package/utils/getMaxZindex.ts

@@ -1,25 +1,25 @@
-export const getMaxZIndex = () =>
-  Math.max(
-    ...Array.from(document.querySelectorAll('body *'), (el) =>
-      parseFloat(window.getComputedStyle(el).zIndex),
-    ).filter((zIndex) => !Number.isNaN(zIndex)),
-    0,
-  );
-
-export function handleElementPosition(id: string) {
-  let element: HTMLElement | null = null;
-
-  onMounted(() => {
-    element = document.getElementById(id);
-    if (element) {
-      element.style.position = 'fixed';
-      element.style.zIndex = (getMaxZIndex() + 1).toString();
-    }
-  });
-
-  onBeforeUnmount(() => {
-    if (element && element.parentNode) {
-      element.parentNode.removeChild(element);
-    }
-  });
-}
+export const getMaxZIndex = () =>
+  Math.max(
+    ...Array.from(document.querySelectorAll('body *'), (el) =>
+      parseFloat(window.getComputedStyle(el).zIndex),
+    ).filter((zIndex) => !Number.isNaN(zIndex)),
+    0,
+  );
+
+export function handleElementPosition(id: string) {
+  let element: HTMLElement | null = null;
+
+  onMounted(() => {
+    element = document.getElementById(id);
+    if (element) {
+      element.style.position = 'fixed';
+      element.style.zIndex = (getMaxZIndex() + 1).toString();
+    }
+  });
+
+  onBeforeUnmount(() => {
+    if (element && element.parentNode) {
+      element.parentNode.removeChild(element);
+    }
+  });
+}

package/utils/localizedNavigation.ts

@@ -1,36 +1,36 @@
-type Locale = Ref<string> | string
-
-export interface LocalizedNavigationParams {
-  locale: Locale
-  projectUrl: string
-  path?: string
-  target?: '_blank' | '_self'
-}
-
-export function navigateToLocalizedPage({
-  locale,
-  projectUrl,
-  path = '',
-  target = '_blank',
-}: LocalizedNavigationParams) {
-  const url = buildLocalizedUrl(locale, projectUrl, path)
-
-  return navigateTo(url, {
-    external: true,
-    open: { target },
-  })
-}
-
-
-export function buildLocalizedUrl(locale: Locale, projectUrl: string, path: string = '') {
-  const lang = getLocalizedPath(locale)
-
-  return `${projectUrl}${lang}${path}`
-}
-
-
-export function getLocalizedPath(locale: Locale) {
-  const lang = unref(locale)
-
-  return lang === 'ru' ? '' : `/${lang}`
-}
+type Locale = Ref<string> | string
+
+export interface LocalizedNavigationParams {
+  locale: Locale
+  projectUrl: string
+  path?: string
+  target?: '_blank' | '_self'
+}
+
+export function navigateToLocalizedPage({
+  locale,
+  projectUrl,
+  path = '',
+  target = '_blank',
+}: LocalizedNavigationParams) {
+  const url = buildLocalizedUrl(locale, projectUrl, path)
+
+  return navigateTo(url, {
+    external: true,
+    open: { target },
+  })
+}
+
+
+export function buildLocalizedUrl(locale: Locale, projectUrl: string, path: string = '') {
+  const lang = getLocalizedPath(locale)
+
+  return `${projectUrl}${lang}${path}`
+}
+
+
+export function getLocalizedPath(locale: Locale) {
+  const lang = unref(locale)
+
+  return lang === 'ru' ? '' : `/${lang}`
+}

package/vitest.config.ts

@@ -1,14 +1,14 @@
-import { defineVitestConfig } from '@nuxt/test-utils/config'
-
-export default defineVitestConfig({
-  test: {
-    globals: true,
-    environment: 'nuxt',
-    coverage: {
-      enabled: true,
-      provider: 'v8',
-      reportsDirectory: './tests/coverage',
-      reporter: ['html']
-    }
-  }
-})
+import { defineVitestConfig } from '@nuxt/test-utils/config'
+
+export default defineVitestConfig({
+  test: {
+    globals: true,
+    environment: 'nuxt',
+    coverage: {
+      enabled: true,
+      provider: 'v8',
+      reportsDirectory: './tests/coverage',
+      reporter: ['html']
+    }
+  }
+})

package/.claude/settings.local.json

@@ -1,19 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "PowerShell(npm view *)",
-      "PowerShell(git rm *)",
-      "PowerShell(npx --yes @tailwindcss/upgrade@latest --force)",
-      "PowerShell(Out-File *)",
-      "PowerShell(pnpm install *)",
-      "PowerShell(Get-ChildItem node_modules\\\\eslint-plugin-tailwindcss\\\\lib\\\\rules | Select-Object -ExpandProperty Name; node -e \"const p=require\\('eslint-plugin-tailwindcss'\\); console.log\\(Object.keys\\(p.rules\\).join\\('\\\\n'\\)\\); console.log\\('CONFIGS:', Object.keys\\(p.configs\\).join\\(','\\)\\)\")",
-      "PowerShell(node -e \"const p=require\\('eslint-plugin-tailwindcss'\\); console.log\\(JSON.stringify\\(p.configs.recommended, \\(k,v\\)=> typeof v==='object'&&v!==null&&k==='plugins'?Object.keys\\(v\\):v, 2\\).substring\\(0,800\\)\\)\"; Select-String -Path node_modules\\\\eslint-plugin-tailwindcss\\\\README.md -Pattern 'entryPoint|settings' | Select-Object -First 10 | ForEach-Object Line)",
-      "PowerShell(Select-String -Path node_modules\\\\eslint-plugin-tailwindcss\\\\README.md -Pattern 'cssConfigPath|vue|\\\\.vue' -Context 2,4 | Select-Object -First 12 | ForEach-Object {$_.Context.PreContext + $_.Line + $_.Context.PostContext} | ForEach-Object {$_})",
-      "PowerShell(pnpm build *)",
-      "PowerShell($c = Get-Content .playground\\\\.output\\\\server\\\\chunks\\\\build\\\\entry-styles.B6sbRG45.mjs -Raw; foreach \\($m in '--color-deepblue-900','bg-gr-blue','heading-01','hover\\\\:bg-purple-900\\\\/20','a-container','--font-sans','outline-hidden','scrollbar-gutter'\\) { \"$m => $\\($c.Contains\\($m\\)\\)\" })",
-      "PowerShell(pnpm eslint *)",
-      "PowerShell(pnpm *)",
-      "PowerShell(Get-Content C:\\\\adata\\\\adata-ui\\\\app.vue; \"=== -error.vue \\(first 100\\) ===\"; Get-Content C:\\\\adata\\\\adata-ui\\\\-error.vue -TotalCount 100; \"=== .playground/app.vue ===\"; Get-Content C:\\\\adata\\\\adata-ui\\\\.playground\\\\app.vue -TotalCount 60)"
-    ]
-  }
-}

package/.playground/app.vue

@@ -1,102 +0,0 @@
-<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/components/elements/a-select-row/ASelectRowV2.vue

@@ -1,214 +0,0 @@
-<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>