adata-ui 2.1.40-beta.10 → 2.1.40-beta.12

package/components/elements/segmented/ASegmentedV2.vue

@@ -1,23 +1,106 @@
 <script generic="T extends string | number" lang="ts" setup>
+type Color = 'gray' | 'blue' | 'green' | 'yellow' | 'red'
+type View = 'outline' | 'solid'
+
 interface Option {
   value: T
   label: string
   disabled?: boolean
-  count?: number
+  count?: number | string
+  color?: Color
   dotColor?: string
 }
 
 const props = withDefaults(defineProps<{
   options: Option[]
   size?: 'sm' | 'md'
+  view?: View
+  color?: Color
   deselectable?: boolean
+  withDot?: boolean
+  neutral?: boolean
 }>(), {
   size: 'md',
+  view: 'outline',
+  color: 'gray',
   deselectable: true,
+  withDot: false,
+  neutral: false,
 })
 
+defineSlots<{
+  prepend?: (props: { option: Option, selected: boolean }) => any
+  count?: (props: { option: Option, selected: boolean }) => any
+}>()
+
 const modelValue = defineModel<T | undefined | null>()
 
+const CHIP_CLASS: Record<Color, Record<View | 'selected', string>> = {
+  gray: {
+    outline: 'border-[#D1D5DC] bg-white text-[#4A5565] hover:bg-[#F3F4F6] dark:bg-gray-900 dark:border-[#4A5565]/50 dark:text-gray-300 dark:hover:bg-[#4A5565]/10',
+    solid: 'border-transparent bg-[#F3F4F6] text-[#4A5565] hover:bg-[#D1D5DC] dark:bg-[#4A5565]/10 dark:text-gray-300 dark:hover:bg-[#4A5565]/20',
+    selected: 'border-transparent bg-[#4A5565] text-white dark:border-[#4A5565]/50 dark:bg-[#4A5565]/30 dark:text-gray-100',
+  },
+  blue: {
+    outline: 'border-[#B3DCFF] bg-white text-[#068DFF] hover:bg-[#F0F8FF] dark:bg-gray-900 dark:border-[#068DFF]/50 dark:text-blue-400 dark:hover:bg-[#068DFF]/10',
+    solid: 'border-transparent bg-[#F0F8FF] text-[#068DFF] hover:bg-[#B3DCFF] dark:bg-[#068DFF]/10 dark:text-blue-400 dark:hover:bg-[#068DFF]/20',
+    selected: 'border-transparent bg-[#068DFF] text-white dark:border-[#068DFF]/50 dark:bg-[#068DFF]/30 dark:text-blue-100',
+  },
+  green: {
+    outline: 'border-[#7BF1A8] bg-white text-[#00A63E] hover:bg-[#DCFCE7] dark:bg-gray-900 dark:border-[#00A63E]/50 dark:text-green-400 dark:hover:bg-[#00A63E]/10',
+    solid: 'border-transparent bg-[#DCFCE7] text-[#00A63E] hover:bg-[#7BF1A8] dark:bg-[#00A63E]/10 dark:text-green-400 dark:hover:bg-[#00A63E]/20',
+    selected: 'border-transparent bg-[#00A63E] text-white dark:border-[#00A63E]/50 dark:bg-[#00A63E]/30 dark:text-green-100',
+  },
+  yellow: {
+    outline: 'border-[#FFD230] bg-white text-[#E17100] hover:bg-[#FEF3C6] dark:bg-gray-900 dark:border-[#E17100]/50 dark:text-orange-400 dark:hover:bg-[#E17100]/10',
+    solid: 'border-transparent bg-[#FEF3C6] text-[#E17100] hover:bg-[#FFD230] dark:bg-[#E17100]/10 dark:text-orange-400 dark:hover:bg-[#E17100]/20',
+    selected: 'border-transparent bg-[#E17100] text-white dark:border-[#E17100]/50 dark:bg-[#E17100]/30 dark:text-orange-100',
+  },
+  red: {
+    outline: 'border-[#FFA2A2] bg-white text-[#E7000B] hover:bg-[#FFE2E2] dark:bg-gray-900 dark:border-[#E7000B]/50 dark:text-red-400 dark:hover:bg-[#E7000B]/10',
+    solid: 'border-transparent bg-[#FFE2E2] text-[#E7000B] hover:bg-[#FFA2A2] dark:bg-[#E7000B]/10 dark:text-red-400 dark:hover:bg-[#E7000B]/20',
+    selected: 'border-transparent bg-[#E7000B] text-white dark:border-[#E7000B]/50 dark:bg-[#E7000B]/30 dark:text-red-100',
+  },
+}
+
+const DOT_CLASS: Record<Color, Record<View, string>> = {
+  gray: { outline: 'bg-[#4A5565] dark:bg-gray-400', solid: 'bg-[#4A5565] dark:bg-gray-400' },
+  blue: { outline: 'bg-[#068DFF] dark:bg-blue-400', solid: 'bg-[#068DFF] dark:bg-blue-400' },
+  green: { outline: 'bg-[#00A63E] dark:bg-green-400', solid: 'bg-[#00A63E] dark:bg-green-400' },
+  yellow: { outline: 'bg-[#E17100] dark:bg-orange-400', solid: 'bg-[#E17100] dark:bg-orange-400' },
+  red: { outline: 'bg-[#E7000B] dark:bg-red-400', solid: 'bg-[#E7000B] dark:bg-red-400' },
+}
+
+const DOT_SELECTED_CLASS = 'bg-white dark:bg-gray-100'
+
+function dotColorName(option: Option): Color {
+  return option.color ?? props.color
+}
+
+function chipColorName(option: Option): Color {
+  return props.neutral ? 'gray' : dotColorName(option)
+}
+
+function isSelected(option: Option): boolean {
+  return modelValue.value === option.value
+}
+
+function chipClass(option: Option): string {
+  return isSelected(option)
+    ? `${CHIP_CLASS[dotColorName(option)].selected} font-medium`
+    : CHIP_CLASS[chipColorName(option)][props.view]
+}
+
+function showDot(option: Option): boolean {
+  return props.withDot || Boolean(option.color || option.dotColor)
+}
+
+function dotClass(option: Option): string {
+  return isSelected(option)
+    ? DOT_SELECTED_CLASS
+    : DOT_CLASS[dotColorName(option)][props.view]
+}
+
 function select(option: Option) {
   if (option.disabled) return
   if (props.deselectable && modelValue.value === option.value) {
@@ -37,22 +120,32 @@ function select(option: Option) {
       :disabled="option.disabled"
       class="inline-flex items-center gap-1.5 rounded-full border transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 disabled:cursor-not-allowed disabled:opacity-50"
       :class="[
-        size === 'sm' ? 'px-3 py-1 text-xs' : 'px-3.5 py-1.5 text-sm',
-        modelValue === option.value
-          ? 'border-transparent bg-blue-700 font-medium text-white dark:bg-blue-500 dark:text-gray-900'
-          : 'border-gray-300 bg-transparent text-gray-700 hover:border-gray-400 dark:border-gray-600 dark:text-gray-300 dark:hover:border-gray-500',
+        size === 'sm' ? 'px-3 py-1 text-body-sm' : 'px-3.5 py-1.5 text-body-md',
+        chipClass(option),
       ]"
       @click="select(option)"
     >
+      <slot
+        name="prepend"
+        :option="option"
+        :selected="isSelected(option)"
+      />
       <span
-        v-if="option.dotColor"
+        v-if="showDot(option)"
         class="size-2 shrink-0 rounded-full"
-        :style="{ backgroundColor: option.dotColor }"
+        :class="!option.dotColor || option.color || isSelected(option) ? dotClass(option) : undefined"
+        :style="option.dotColor && !option.color && !isSelected(option) ? { backgroundColor: option.dotColor } : undefined"
       />
       <span>{{ option.label }}</span>
-      <span v-if="option.count != null" class="tabular-nums opacity-70">
-        {{ option.count }}
-      </span>
+      <slot
+        name="count"
+        :option="option"
+        :selected="isSelected(option)"
+      >
+        <span v-if="option.count != null" class="tabular-nums opacity-70">
+          {{ option.count }}
+        </span>
+      </slot>
     </button>
   </div>
 </template>

package/components/elements/select/ASelect.vue

@@ -279,7 +279,7 @@ watch(() => isOpen.value, (open) => {
 onUnmounted(() => cleanup?.())
 </script>
 <template>
-  <div ref="wrapper" class="relative w-full rounded-md text-sm">
+  <div ref="wrapper" class="relative w-full rounded-sm text-sm">
     <button
       ref="reference"
       :class="[
@@ -293,7 +293,7 @@ onUnmounted(() => cleanup?.())
         buttonBg,
       ]"
       :disabled="disabled"
-      class="hover:border-blue-700 focus-visible:outline-blue relative flex h-8 w-full items-center gap-2 rounded-md border border-solid py-1.5 pl-4 focus-visible:shadow-[0_0_0_4px#1B64B3] dark:hover:border-blue-500"
+      class="hover:border-blue-700 focus-visible:outline-blue relative flex h-8 w-full items-center gap-2 rounded-sm border border-solid py-1.5 pl-4 focus-visible:shadow-[0_0_0_4px#1B64B3] dark:hover:border-blue-500"
       @click="toggleOpen()"
     >
       <span
@@ -356,7 +356,7 @@ onUnmounted(() => cleanup?.())
         <div
           v-if="isOpen"
           ref="floating"
-          class="z-[10000] rounded-md bg-white shadow-[0_1px_8px_0_rgba(139,146,156,0.3)] dark:bg-gray-900"
+          class="z-[10000] rounded-sm bg-white shadow-[0_1px_8px_0_rgba(139,146,156,0.3)] dark:bg-gray-900"
           :style="{
           position: strategy,
           left: x != null ? `${x}px` : '',
@@ -411,7 +411,7 @@ onUnmounted(() => cleanup?.())
         </slot>
         <div
           v-if="props.hasButtons"
-          class="-mb-2 flex w-full flex-col gap-2 rounded-md p-4 shadow-[0_-2px_8px_0#9DA3AC3D] xl:flex-row"
+          class="-mb-2 flex w-full flex-col gap-2 rounded-sm p-4 shadow-[0_-2px_8px_0#9DA3AC3D] xl:flex-row"
         >
           <slot name="buttons">
             <a-button view="outline" variant="gray" block @click="onClear"> Сбросить </a-button>

package/components/elements/select/ASelectMobile.vue

@@ -130,7 +130,7 @@ defineExpose({
     </template>
     <div class="flex flex-col justify-between ">
       <div
-        class="mt-1 w-full h-full bg-white p-2 border rounded-md dark:bg-gray-900 overflow-y-auto"
+        class="mt-1 w-full h-full bg-white p-2 border rounded-sm dark:bg-gray-900 overflow-y-auto"
       >
         <slot
           name="options"
@@ -171,7 +171,7 @@ defineExpose({
   </a-slideover>
   <div
     ref="wrapper"
-    class="relative w-full rounded-md text-sm"
+    class="relative w-full rounded-sm text-sm"
   >
     <a-select-row
       v-model:selected-items="selectedData"

package/components/elements/select/ASelectV2.vue

@@ -182,7 +182,6 @@ const valueToShow = computed<T | T[] | null>(() => {
     if (!Array.isArray(modelValue.value) || modelValue.value.length === 0) return null
     if (props.getOnlyKey) {
       const keys = modelValue.value as any[]
-      // map over model keys (not options) so chips keep the selection order
       const found = keys
         .map(k => props.options.find(opt => isEqual(k, opt[props.keyToSelect as keyof T])))
         .filter((opt): opt is T => opt != null)
@@ -296,7 +295,7 @@ const isDefaultSelection = computed(() => {
 </script>
 
 <template>
-  <div ref="wrapper" class="select-v2 relative w-full text-sm">
+  <div ref="wrapper" class="select-v2 relative w-full text-body-md">
     <button
       ref="reference"
       :disabled="disabled"
@@ -340,20 +339,20 @@ const isDefaultSelection = computed(() => {
               <span
                 v-for="(item, index) in (valueToShow as any[]).slice(0, visibleChipCount)"
                 :key="index"
-                class="select-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]"
+                class="select-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="canChipRemove ? onClearFromMulti(item) : (isOpen = true)"
               >
                 <span class="truncate">{{ item[keyToShow] }}</span>
                 <button
                   v-if="canChipRemove"
-                  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]"
+                  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="hiddenChipCount > 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"
+                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"
               >
                 +{{ hiddenChipCount }}
               </span>
@@ -367,7 +366,7 @@ const isDefaultSelection = computed(() => {
               <span
                 v-for="(item, index) in (valueToShow as any[])"
                 :key="`measure-${index}`"
-                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"
+                class="inline-flex items-center gap-1 whitespace-nowrap rounded-sm bg-gray-50 px-2 py-0.5 text-body-sm"
               >
                 <span>{{ item[keyToShow] }}</span>
                 <span
@@ -377,7 +376,7 @@ const isDefaultSelection = computed(() => {
                   <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">
+              <span class="inline-flex shrink-0 items-center whitespace-nowrap rounded-sm px-2 py-0.5 text-body-sm-medium">
                 +{{ selectedCount }}
               </span>
             </span>
@@ -413,7 +412,7 @@ const isDefaultSelection = computed(() => {
       <div
         v-if="isOpen"
         ref="floating"
-        class="select-v2__dropdown z-[10000] rounded-xl border border-gray-200 bg-white shadow-lg shadow-gray-900/10 dark:border-gray-700 dark:bg-gray-900 dark:shadow-black/30"
+        class="select-v2__dropdown z-[10000] rounded-lg border border-gray-200 bg-white shadow-lg shadow-gray-900/10 dark:border-gray-700 dark:bg-gray-900 dark:shadow-black/30"
         :style="{
           position: strategy,
           left: x != null ? `${x}px` : '',
@@ -446,7 +445,7 @@ const isDefaultSelection = computed(() => {
               <button
                 :disabled="!multiple && isItemSelected(option)"
                 :class="{ 'select-v2__option--selected': isItemSelected(option) }"
-                class="select-v2__option flex w-full items-center justify-between rounded-lg px-3 py-2 text-start text-sm transition-colors duration-100 hover:bg-gray-50 dark:hover:bg-gray-800/60"
+                class="select-v2__option flex w-full items-center justify-between rounded-md px-3 py-2 text-start text-body-md transition-colors duration-100 hover:bg-gray-50 dark:hover:bg-gray-800/60"
                 @click="onSelect(option)"
               >
                 <span>
@@ -543,11 +542,11 @@ const isDefaultSelection = computed(() => {
 }
 
 .select-v2__chip:hover {
-  background-color: theme('colors.gray.100');
+  background-color: theme('colors.blue.100');
 }
 
 :is(.dark) .select-v2__chip:hover {
-  background-color: rgb(255 255 255 / 0.08);
+  background-color: rgb(6 141 255 / 0.25);
 }
 
 .select-v2__option {

package/components/elements/select/ui/select-button.vue

@@ -62,7 +62,7 @@ const onClear = () => {
     <!--    <pre>{{ items }} items</pre>-->
     <button
       ref="buttonElement"
-      class="hover:border-blue focus-visible:outline-blue relative flex justify-between w-full items-center gap-2 rounded-md border border-solid border-deepblue-50 bg-deepblue-50 px-4 py-1.5 focus-visible:shadow-[0_0_0_4px#1B64B3] dark:border-gray-900 dark:bg-gray-900 dark:hover:border-blue-700 dark:bg-[#E3E5E80D]"
+      class="hover:border-blue focus-visible:outline-blue relative flex justify-between w-full items-center gap-2 rounded-sm border border-solid border-deepblue-50 bg-deepblue-50 px-4 py-1.5 focus-visible:shadow-[0_0_0_4px#1B64B3] dark:border-gray-900 dark:bg-gray-900 dark:hover:border-blue-700 dark:bg-[#E3E5E80D]"
       :class="[disabledStyles]"
       :disabled="disabled"
       @click="isOpen = !isOpen"

package/components/elements/status-badge/AStatusBadge.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import {twMerge} from "tailwind-merge";
+import {twMerge} from '#adata-ui/utils/twMerge';
 
 defineOptions({ name: 'AStatusBadge' })
 
@@ -19,34 +19,37 @@ const props = withDefaults(defineProps<Props>(), {
 
 const classes = computed(() =>
   [
-    'text-sm rounded-md select-none inline-flex gap-[5.5px] justify-center items-center',
+    'text-body-md rounded-sm select-none inline-flex gap-[5.5px] justify-center items-center border',
     typeSwitchValues[props.view][props.type],
-    props.size === 'xs'? 'px-4 py-[2px] text-xs font-bold' : '',
-    props.size === 'sm'? 'text-xs font-semibold px-4 py-[2px] h-6' : '',
+    props.size === 'xs'? 'px-4 py-[2px] text-body-sm font-bold' : '',
+    props.size === 'sm'? 'text-body-sm font-semibold px-4 py-[2px] h-6' : '',
     props.size === 'lg'? 'px-4 py-[7.5px] font-semibold' : '',
   ])
 
-
 const typeSwitchValues: ViewType = {
   default: {
-    primary: 'bg-blue-700 text-white dark:text-gray-900 dark:bg-blue-500',
-    success: 'bg-green-500 text-white dark:text-gray-200 dark:bg-green-400',
-    danger: 'bg-red-500 text-white dark:text-gray-200  ',
-    warning: 'bg-yellow-400 text-white dark:text-gray-200  ',
-    gray: 'bg-deepblue-900 text-white dark:text-gray-200 dark:bg-gray-200/10',
-    orange: 'bg-orange-600 text-white  dark:text-gray-200'
+    primary: 'bg-[#068DFF] text-white border-transparent dark:bg-[#068DFF]/30 dark:text-blue-100',
+    success: 'bg-[#00A63E] text-white border-transparent dark:bg-[#00A63E]/30 dark:text-green-100',
+    danger: 'bg-[#E7000B] text-white border-transparent dark:bg-[#E7000B]/30 dark:text-red-100',
+    warning: 'bg-[#E17100] text-white border-transparent dark:bg-[#E17100]/30 dark:text-orange-100',
+    gray: 'bg-[#4A5565] text-white border-transparent dark:bg-[#4A5565]/30 dark:text-gray-100',
+    orange: 'bg-[#E17100] text-white border-transparent dark:bg-[#E17100]/30 dark:text-orange-100'
   },
   inverted: {
-    primary: 'bg-blue-700/10  text-blue-700 dark:text-blue-500 dark:bg-[#1EABFF1A]',
-    success: 'bg-green-500/20  text-green-500 dark:text-green-400 dark:bg-green-400/20',
-    danger: 'bg-red-500/10 text-red-500  dark:text-red-400 dark:bg-red-400/10',
-    warning: 'bg-yellow-400/10 text-yellow-400',
-    gray: 'bg-deepblue-900/10 text-gray-600 dark:text-gray-200 dark:bg-gray-200/10',
-    orange: 'bg-orange-600/10 text-orange-600'
+    primary: 'bg-[#F0F8FF] text-[#068DFF] border-transparent dark:bg-[#068DFF]/10 dark:text-blue-400',
+    success: 'bg-[#DCFCE7] text-[#00A63E] border-transparent dark:bg-[#00A63E]/10 dark:text-green-400',
+    danger: 'bg-[#FFE2E2] text-[#E7000B] border-transparent dark:bg-[#E7000B]/10 dark:text-red-400',
+    warning: 'bg-[#FEF3C6] text-[#E17100] border-transparent dark:bg-[#E17100]/10 dark:text-orange-400',
+    gray: 'bg-[#F3F4F6] text-[#4A5565] border-transparent dark:bg-[#4A5565]/10 dark:text-gray-300',
+    orange: 'bg-[#FEF3C6] text-[#E17100] border-transparent dark:bg-[#E17100]/10 dark:text-orange-400'
   },
   transparent: {
-    success: 'bg-green-500/10 text-green-500 dark:bg-green-400/10 dark:text-green-400',
-    danger: 'bg-red-500/10 text-red-500 dark:bg-red-400/10 dark:text-red-400'
+    primary: 'bg-white border-[#B3DCFF] text-[#068DFF] dark:bg-transparent dark:border-[#068DFF]/50 dark:text-blue-400',
+    success: 'bg-white border-[#7BF1A8] text-[#00A63E] dark:bg-transparent dark:border-[#00A63E]/50 dark:text-green-400',
+    danger: 'bg-white border-[#FFA2A2] text-[#E7000B] dark:bg-transparent dark:border-[#E7000B]/50 dark:text-red-400',
+    warning: 'bg-white border-[#FFD230] text-[#E17100] dark:bg-transparent dark:border-[#E17100]/50 dark:text-orange-400',
+    gray: 'bg-white border-[#D1D5DC] text-[#4A5565] dark:bg-transparent dark:border-[#4A5565]/50 dark:text-gray-300',
+    orange: 'bg-white border-[#FFD230] text-[#E17100] dark:bg-transparent dark:border-[#E17100]/50 dark:text-orange-400'
   }
 }
 

package/components/elements/status-badge-v2/StatusBadgeV2.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { twMerge } from 'tailwind-merge'
+import { twMerge } from '#adata-ui/utils/twMerge'
 
 defineOptions({ name: 'StatusBadgeV2', inheritAttrs: false })
 
@@ -58,8 +58,6 @@ const typeClasses: Record<BadgeView, Partial<Record<BadgeType, string>>> = {
 
 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,

package/components/elements/table/ATable.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
+import { twMerge } from '#adata-ui/utils/twMerge'
 import {ui} from './table.config'
-import { twMerge } from 'tailwind-merge'
 type Column = {
   label: string
   key: string | number

package/components/elements/table/table.config.ts

@@ -14,7 +14,7 @@ export const ui = {
     padding: 'px-4 py-3.5',
     color: 'text-deepblue-900 dark:text-gray-200',
     font: 'font-semibold',
-    size: 'text-xs',
+    size: 'text-body-sm',
   },
   td: {
     base: '',
@@ -24,7 +24,7 @@ export const ui = {
     },
     color: 'text-deepblue-900 dark:text-gray-200',
     font: '',
-    size: 'text-sm',
+    size: 'text-body-md',
   },
   progress: {
     wrapper: 'absolute h-[2px] bg-deepblue-700 inset-x-0  animate-pulse',