adata-ui 2.1.40-beta.11 → 2.1.40-beta.13

package/plugins/toast.client.ts

@@ -1,58 +1,41 @@
-import Vue3Toastify, { toast } from 'vue3-toastify';
-import 'vue3-toastify/dist/index.css';
-import CheckCircleToast from "#adata-ui/icons/toasts/check-circle-toast.vue";
-import WarningTriangleToast from "#adata-ui/icons/toasts/warning-triangle-toast.vue";
-import XMark from "#adata-ui/icons/x-mark.vue";
+import InfoCircle from '#adata-ui/icons/info/info-circle.vue'
+import CheckCircleToast from '#adata-ui/icons/toasts/check-circle-toast.vue'
+import WarningTriangle from '#adata-ui/icons/warning/warning-triangle.vue'
+import XMark from '#adata-ui/icons/x-mark.vue'
+import Vue3Toastify, { toast } from 'vue3-toastify'
+import 'vue3-toastify/dist/index.css'
 
 export default defineNuxtPlugin((nuxtApp) => {
-    nuxtApp.vueApp.use(Vue3Toastify, { autoClose: 2500, theme: 'auto' });
-  const customSuccessToast = (message, options?:any) => {
-    toast.success(message, {
-      position: 'top-right',
-      toastStyle: {
-        background:'#EEF7EE',
-        borderRadius: '8px',
-        padding: '16px',
-        fontWeight: '500',
-        fontSize:'16px',
-        color:'#4CAF50'
-      },
-      bodyClassName:'toast__body',
-      progressStyle:{
-        background:'#4CAF5080'
-      },
-      closeButton: XMark,
-      icon: CheckCircleToast,
-      ...options,
-    });
-  };
-  const customErrorToast = (message, options?:any) => {
-    toast.error(message, {
-      position: 'top-right',
-      toastStyle: {
-        background:'#FDECEB',
-        borderRadius: '8px',
-        padding: '16px',
-        fontWeight: '500',
-        fontSize:'16px',
-        color:'#E74135'
-      },
-      bodyClassName:'toast__body',
-      progressStyle:{
-        background:'#E7413533'
+  nuxtApp.vueApp.use(Vue3Toastify, { autoClose: 2500, theme: 'light' })
+
+  const baseOptions = (icon: any) => ({
+    position: 'top-right' as const,
+    theme: 'light' as const,
+    icon,
+    closeButton: XMark,
+  })
+
+  const customSuccessToast = (message: string, options?: any) =>
+    toast.success(message, { ...baseOptions(CheckCircleToast), ...options })
+
+  const customErrorToast = (message: string, options?: any) =>
+    toast.error(message, { ...baseOptions(WarningTriangle), ...options })
+
+  const customInfoToast = (message: string, options?: any) =>
+    toast.info(message, { ...baseOptions(InfoCircle), ...options })
+
+  const customWarningToast = (message: string, options?: any) =>
+    toast.warning(message, { ...baseOptions(WarningTriangle), ...options })
+
+  return {
+    provide: {
+      toast: {
+        ...toast,
+        success: customSuccessToast,
+        error: customErrorToast,
+        info: customInfoToast,
+        warning: customWarningToast,
       },
-      closeButton: XMark,
-      icon: WarningTriangleToast,
-      ...options,
-    });
-  };
-    return {
-        provide: {
-          toast: {
-            ...toast,
-            success: customSuccessToast,
-            error: customErrorToast,
-          },
-        },
-    };
-});
+    },
+  }
+})

package/tailwind.config.ts

@@ -4,160 +4,191 @@ import defaultColors from 'tailwindcss/colors'
 
 export default <Partial<Config>>{
   darkMode: 'class',
-  content: ['./components/**/*.vue', './ui.config/**/*.ts', './icons/**/*.vue'],
+  content: ['./components/**/*.vue', './components/**/*.ts', './icons/**/*.vue'],
   safelist: [
     {
       pattern: /bg-(blue|green|yellow|red|orange|purple)-(|400|500|600|700|900)\/(10|20)/,
-      variants: ['hover']
-    }
+      variants: ['hover'],
+    },
   ],
   theme: {
     fontFamily: {
-      'sans': ['"Open Sans"', 'sans-serif'],
+      sans: ['"Open Sans"', 'sans-serif'],
+    },
+    borderRadius: {
+      'none': '0px',
+      'DEFAULT': '4px',
+      'xs': '4px',
+      'sm': '6px',
+      'md': '8px',
+      '10': '10px',
+      'lg': '12px',
+      'xl': '16px',
+      '2xl': '20px',
+      'full': '9999px',
     },
     colors: {
       black: defaultColors.black,
       white: defaultColors.white,
       transparent: defaultColors.transparent,
-      'blue': {
+      blue: {
         // DEFAULT: '#0070eb',
-        '50': '#eff7ff',
-        '100': '#e0efff',
-        '200': '#bddfff',
-        '300': '#90d7ff',
-        '400': '#43afed',
-        '500': '#1b98e2',
-        '600': '#068dff',
-        '700': '#0070eb',
-        '800': '#085dc5',
-        '900': '#0d509b',
-        '950': '#0e315d',
+        50: '#eff7ff',
+        100: '#e0efff',
+        200: '#bddfff',
+        300: '#90d7ff',
+        400: '#43afed',
+        500: '#1b98e2',
+        600: '#068dff',
+        700: '#0070eb',
+        800: '#085dc5',
+        900: '#0d509b',
+        950: '#0e315d',
       },
-      'yellow': {
+      yellow: {
         // DEFAULT: '#fbc920',
-        '50': '#fefbe8',
-        '100': '#fef7c3',
-        '200': '#feed8a',
-        '300': '#fedb46',
-        '400': '#fbc920',
-        '500': '#ebad07',
-        '600': '#cb8503',
-        '700': '#a25e06',
-        '800': '#854a0e',
-        '900': '#713c12',
-        '950': '#421e06',
+        50: '#fefbe8',
+        100: '#fef7c3',
+        200: '#feed8a',
+        300: '#fedb46',
+        400: '#fbc920',
+        500: '#ebad07',
+        600: '#cb8503',
+        700: '#a25e06',
+        800: '#854a0e',
+        900: '#713c12',
+        950: '#421e06',
       },
-      'deepblue': {
+      deepblue: {
         // pickled-bluewood
         // DEFAULT: '#2c3e50',
-        '50': '#f5f7fa',
-        '100': '#eaeff4',
-        '200': '#cfdce8',
-        '300': '#a6bfd3',
-        '400': '#759cbb',
-        '500': '#5480a3',
-        '600': '#416788',
-        '700': '#35526f',
-        '800': '#2f475d',
-        '900': '#2c3e50',
-        '950': '#1d2834',
+        50: '#f5f7fa',
+        100: '#eaeff4',
+        200: '#cfdce8',
+        300: '#a6bfd3',
+        400: '#759cbb',
+        500: '#5480a3',
+        600: '#416788',
+        700: '#35526f',
+        800: '#2f475d',
+        900: '#2c3e50',
+        950: '#1d2834',
       },
-      'gray': {
+      gray: {
         // gray-chateau
         // DEFAULT: '#9da3ac',
-        '50': '#f4f5f6',
-        '100': '#ebecee',
-        '200': '#e3e5e8',
-        '300': '#c9cccf',
-        '400': '#b7bcc2',
-        '500': '#9da3ac',
-          '600': '#71757a',
-        '700': '#5a5d60',
-        '800': '#393d40',
-        '900': '#26282b',
-        '950': '#161617',
+        50: '#f4f5f6',
+        100: '#ebecee',
+        200: '#e3e5e8',
+        300: '#c9cccf',
+        400: '#b7bcc2',
+        500: '#9da3ac',
+        600: '#71757a',
+        700: '#5a5d60',
+        800: '#393d40',
+        900: '#26282b',
+        950: '#161617',
       },
-      'green': {
+      green: {
         // DEFAULT: '#4caf50',
-        '50': '#f3faf3',
-        '100': '#e3f5e3',
-        '200': '#c8eac9',
-        '300': '#9dd89f',
-        '400': '#6bbd6e',
-        '500': '#4caf50',
-        '600': '#358438',
-        '700': '#2d6830',
-        '800': '#275429',
-        '900': '#224525',
-        '950': '#0e2510',
+        50: '#f3faf3',
+        100: '#e3f5e3',
+        200: '#c8eac9',
+        300: '#9dd89f',
+        400: '#6bbd6e',
+        500: '#4caf50',
+        600: '#358438',
+        700: '#2d6830',
+        800: '#275429',
+        900: '#224525',
+        950: '#0e2510',
       },
-      'orange': {
+      orange: {
         // DEFAULT: '#e37b00',
-        '50': '#fffbea',
-        '100': '#fff4c5',
-        '200': '#ffe987',
-        '300': '#ffd748',
-        '400': '#ffc31e',
-        '500': '#ff9900',
-        '600': '#e37b00',
-        '700': '#b95304',
-        '800': '#96400a',
-        '900': '#7b350c',
-        '950': '#471901',
+        50: '#fffbea',
+        100: '#fff4c5',
+        200: '#ffe987',
+        300: '#ffd748',
+        400: '#ffc31e',
+        500: '#ff9900',
+        600: '#e37b00',
+        700: '#b95304',
+        800: '#96400a',
+        900: '#7b350c',
+        950: '#471901',
       },
-      'red': {
+      red: {
         // cinnabar
         // DEFAULT: '#e74135',
-        '50': '#fef3f2',
-        '100': '#fde5e3',
-        '200': '#fccfcc',
-        '300': '#f9ada8',
-        '400': '#f47e75',
-        '500': '#e74135',
-        '600': '#d6372c',
-        '700': '#b42b21',
-        '800': '#95271f',
-        '900': '#7c2620',
-        '950': '#43100c',
+        50: '#fef3f2',
+        100: '#fde5e3',
+        200: '#fccfcc',
+        300: '#f9ada8',
+        400: '#f47e75',
+        500: '#e74135',
+        600: '#d6372c',
+        700: '#b42b21',
+        800: '#95271f',
+        900: '#7c2620',
+        950: '#43100c',
       },
-      'purple': {
-        //purple-heart
+      purple: {
+        // purple-heart
         DEFAULT: '#7c25b6',
-        '50': '#fbf5ff',
-        '100': '#f4e8ff',
-        '200': '#ebd5ff',
-        '300': '#dcb5fd',
-        '400': '#c685fb',
-        '500': '#b056f6',
-        '600': '#9c34e9',
-        '700': '#8723cd',
-        '800': '#7c25b6',
-        '900': '#5d1d86',
-        '950': '#400863',
+        50: '#fbf5ff',
+        100: '#f4e8ff',
+        200: '#ebd5ff',
+        300: '#dcb5fd',
+        400: '#c685fb',
+        500: '#b056f6',
+        600: '#9c34e9',
+        700: '#8723cd',
+        800: '#7c25b6',
+        900: '#5d1d86',
+        950: '#400863',
       },
-      'turquoise': {
+      turquoise: {
         // light-blue
         // DEFAULT: '#1ee1be',
-        '50': '#effefa',
-        '100': '#c8fff0',
-        '200': '#92fde3',
-        '300': '#53f5d3',
-        '400': '#1ee1be',
-        '500': '#07c5a6',
-        '600': '#029f89',
-        '700': '#077e6f',
-        '800': '#0b6459',
-        '900': '#0e534a',
-        '950': '#01322e',
+        50: '#effefa',
+        100: '#c8fff0',
+        200: '#92fde3',
+        300: '#53f5d3',
+        400: '#1ee1be',
+        500: '#07c5a6',
+        600: '#029f89',
+        700: '#077e6f',
+        800: '#0b6459',
+        900: '#0e534a',
+        950: '#01322e',
       },
 
     },
     extend: {
       backgroundImage: {
         'gr-blue': 'linear-gradient(236.46deg, #479FFF -2.39%, #0070EB 79.1%)',
-        'gr-yellow': 'linear-gradient(236.46deg, #FFE364 -2.39%, #FBC920 79.1%);\n'
-      }
+        'gr-yellow': 'linear-gradient(236.46deg, #FFE364 -2.39%, #FBC920 79.1%);\n',
+      },
+      fontSize: {
+        'display-hero': ['60px', { lineHeight: '72px', letterSpacing: '-0.025em', fontWeight: '700' }],
+        'display-lg': ['40px', { lineHeight: '48px', letterSpacing: '-0.02em', fontWeight: '700' }],
+        'display-sm': ['32px', { lineHeight: '40px', letterSpacing: '-0.015em', fontWeight: '700' }],
+        'h1': ['28px', { lineHeight: '36px', letterSpacing: '-0.02em', fontWeight: '700' }],
+        'h2': ['24px', { lineHeight: '32px', letterSpacing: '-0.015em', fontWeight: '700' }],
+        'h3': ['20px', { lineHeight: '28px', letterSpacing: '-0.01em', fontWeight: '600' }],
+        'h4': ['18px', { lineHeight: '28px', letterSpacing: '-0.005em', fontWeight: '600' }],
+        'h5': ['16px', { lineHeight: '24px', fontWeight: '600' }],
+        'body-lg': ['16px', { lineHeight: '24px', fontWeight: '400' }],
+        'body-lg-medium': ['16px', { lineHeight: '24px', fontWeight: '500' }],
+        'body-lg-strong': ['16px', { lineHeight: '24px', fontWeight: '600' }],
+        'body-md': ['14px', { lineHeight: '20px', fontWeight: '400' }],
+        'body-md-medium': ['14px', { lineHeight: '20px', fontWeight: '500' }],
+        'body-md-strong': ['14px', { lineHeight: '20px', fontWeight: '600' }],
+        'body-sm': ['12px', { lineHeight: '16px', fontWeight: '400' }],
+        'body-sm-medium': ['12px', { lineHeight: '16px', fontWeight: '500' }],
+        'overline': ['12px', { lineHeight: '16px', letterSpacing: '0.02em', fontWeight: '600' }],
+        'overline-medium': ['12px', { lineHeight: '16px', letterSpacing: '0.02em', fontWeight: '500' }],
+      },
     },
   },
 }
-

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/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>