adata-ui 2.1.40-beta.9 → 2.1.40

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/utils/twMerge.ts

@@ -0,0 +1,34 @@
+import { extendTailwindMerge } from 'tailwind-merge'
+
+export { twJoin } from 'tailwind-merge'
+
+export const twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      // Нестандартный шаг шкалы скруглений ДС-2026 (radius/10 = 10px)
+      'rounded': [{ rounded: ['10'] }],
+      'font-size': [{
+        text: [
+          'display-hero',
+          'display-lg',
+          'display-sm',
+          'h1',
+          'h2',
+          'h3',
+          'h4',
+          'h5',
+          'body-lg',
+          'body-lg-medium',
+          'body-lg-strong',
+          'body-md',
+          'body-md-medium',
+          'body-md-strong',
+          'body-sm',
+          'body-sm-medium',
+          'overline',
+          'overline-medium',
+        ],
+      }],
+    },
+  },
+})

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/components/elements/status-badge-v2/StatusBadgeV2.vue

@@ -1,78 +0,0 @@
-<script lang="ts" setup>
-import { twMerge } from 'tailwind-merge'
-
-defineOptions({ name: 'StatusBadgeV2', inheritAttrs: false })
-
-type BadgeType = 'primary' | 'success' | 'danger' | 'gray' | 'orange' | 'warning'
-type BadgeView = 'default' | 'inverted' | 'transparent'
-type BadgeSize = 'xs' | 'sm' | 'md' | 'lg'
-
-interface Props {
-  type?: BadgeType
-  view?: BadgeView
-  size?: BadgeSize
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  type: 'primary',
-  view: 'inverted',
-  size: 'sm',
-})
-
-const base
-  = 'inline-flex w-fit items-center justify-center gap-1.5 rounded-full font-semibold select-none'
-
-const sizeClasses: Record<BadgeSize, string> = {
-  xs: 'px-2 py-0.5 text-[11px] leading-none',
-  sm: 'px-2.5 py-1 text-xs leading-none',
-  md: 'px-3 py-1.5 text-sm',
-  lg: 'px-4 py-2 text-base',
-}
-
-const typeClasses: Record<BadgeView, Partial<Record<BadgeType, string>>> = {
-  default: {
-    primary: 'bg-blue-700 text-white dark:bg-blue-500 dark:text-gray-900',
-    success: 'bg-green-500 text-white dark:bg-green-400 dark:text-gray-900',
-    danger: 'bg-red-500 text-white dark:text-gray-100',
-    warning: 'bg-yellow-400 text-white dark:text-gray-900',
-    gray: 'bg-deepblue-900 text-white dark:bg-gray-200/10 dark:text-gray-200',
-    orange: 'bg-orange-600 text-white dark:text-gray-100',
-  },
-  inverted: {
-    primary: 'bg-blue-700/10 text-blue-700 dark:bg-blue-500/10 dark:text-blue-500',
-    success: 'bg-green-500/15 text-green-600 dark:bg-green-400/15 dark:text-green-400',
-    danger: 'bg-red-500/10 text-red-500 dark:bg-red-400/10 dark:text-red-400',
-    warning: 'bg-yellow-400/15 text-yellow-500 dark:bg-yellow-400/15 dark:text-yellow-400',
-    gray: 'bg-deepblue-900/10 text-gray-600 dark:bg-gray-200/10 dark:text-gray-300',
-    orange: 'bg-orange-600/10 text-orange-600 dark:text-orange-500',
-  },
-  transparent: {
-    primary: 'bg-transparent text-blue-700 dark:text-blue-500',
-    success: 'bg-transparent text-green-600 dark:text-green-400',
-    danger: 'bg-transparent text-red-500 dark:text-red-400',
-    warning: 'bg-transparent text-yellow-500 dark:text-yellow-400',
-    gray: 'bg-transparent text-gray-600 dark:text-gray-300',
-    orange: 'bg-transparent text-orange-600 dark:text-orange-500',
-  },
-}
-
-const attrs = useAttrs()
-
-// twMerge resolves Tailwind conflicts: any class passed via `class` wins over
-// the defaults below, so padding / rounded / bg / text can all be overridden.
-const classes = computed(() =>
-  twMerge(
-    base,
-    sizeClasses[props.size],
-    typeClasses[props.view][props.type],
-    attrs.class as string,
-  ),
-)
-</script>
-
-<template>
-  <div :class="classes" v-bind="{ ...$attrs, class: undefined }">
-    <slot name="point" />
-    <slot />
-  </div>
-</template>

package/components/elements/tree-select/components/tree-select-nodes.vue

@@ -1,91 +0,0 @@
-<template>
-  <li
-    :style="{ 'padding-left': `${node.level * 20}px` }"
-    :class="[
-      { 'bg-[#2C3E500D] dark:bg-[#E3E5E80D]': node.state === 'checked' && type === 'select' }
-    ]"
-  >
-    <div class="flex items-center gap-1 p-2" v-if="!node?.hidden"
-         :class="{ 'bg-deepblue-50 dark:bg-gray-200/5': disabled && node.state === 'unchecked' }"
-    >
-      <div class="min-w-4">
-        <a-icon-chevron-down
-          v-if="node.expandable"
-          width="16"
-          height="16"
-          :class="['cursor-pointer transition-all', { '-rotate-90': node.expandableClosed }]"
-          @click="toggleExpand(node)"
-        />
-      </div>
-      <div v-if="type === 'select'" class="w-full">
-        <input
-          :id="node.id.toString()"
-          type="checkbox"
-          :disabled="disabled && node.state === 'unchecked'"
-          class="hidden"
-          :checked="node.state === 'checked'"
-          @change="handleCheckboxChange"
-        />
-        <label
-          :for="node.id.toString()"
-          class="flex grow cursor-pointer items-center justify-between gap-4"
-        >
-          <span :class="{ 'font-semibold': node.level === 0 }" v-html="node.text" />
-          <a-icon-check v-if="node.state === 'checked'" class="min-w-4 text-blue-700" />
-        </label>
-      </div>
-      <a-checkbox
-        v-if="type === 'checkbox'"
-        size="lg"
-        :model-value="node.state === 'checked'"
-        :name="`${node.id}`"
-        :intermediate="node.state === 'indeterminate'"
-        side="right"
-        :disabled="disabled && node.state === 'unchecked'"
-        always-intermediate
-        @change="handleCheckboxChange"
-      >
-        <span class="heading-05" v-html="node.text" />
-      </a-checkbox>
-    </div>
-
-    <a-transition-height>
-      <ul v-if="node.expandable && !node.expandableClosed">
-        <template v-for="childNode in node.child" :key="childNode.id">
-          <tree-select-nodes
-            :node="childNode"
-            :toggle-expand="toggleExpand"
-            :toggle-checkbox="toggleCheckbox"
-            :type="type"
-            :disabled="disabled"
-          />
-        </template>
-      </ul>
-    </a-transition-height>
-  </li>
-</template>
-
-<script lang="ts" setup>
-import type { TreeNestedNode } from '#adata-ui/components/elements/tree-select/types'
-
-interface Props {
-  node: TreeNestedNode
-  toggleExpand: Function
-  toggleCheckbox: Function
-  disabled: boolean
-  type: 'checkbox' | 'select'
-}
-
-const props = defineProps<Props>()
-
-const handleCheckboxChange = (event) => {
-  props.toggleCheckbox(props.node.id, event.target.checked)
-}
-const toggleExpand = (node) => {
-  props.toggleExpand(node)
-}
-</script>
-
-<style scoped>
-/* Стили для узлов дерева и флажков выбора можно настроить по вашему усмотрению */
-</style>