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

package/components/elements/digit-badge/ADigitBadge.vue

@@ -30,7 +30,7 @@ const classes = computed(() =>
     props.disabled ? 'text-gray-500 bg-deepblue-900/5' : typeSwitchValues[props.view][props.type],
     'inline-flex items-center justify-center font-medium rounded-full select-none inline-flex outline-none',
     sizeSwitchValues[props.size],
-    props.value && props.value.toString().length > 2 ? 'w-auto' : '',
+    props.value && props.value.toString().length > 1 ? 'w-auto' : '',
   ])
 
 export type StateType = {
@@ -70,8 +70,8 @@ const typeSwitchValues: ViewType = {
 }
 
 const sizeSwitchValues: SizeSwitchValues = {
-  sm: 'w-4 h-4 px-1 text-[9.5px]',
-  md: 'w-5 h-5 px-1 text-[10px]',
+  sm: 'w-4 h-4 px-1 text-body-sm',
+  md: 'w-5 h-5 px-1 text-body-sm',
   lg: 'px-2 w-6 h-6 text-body-sm font-semibold',
 }
 </script>

package/components/elements/segmented/ASegmentedV2.vue

@@ -64,14 +64,14 @@ const CHIP_CLASS: Record<Color, Record<View | 'selected', string>> = {
 }
 
 const DOT_CLASS: Record<Color, Record<View, string>> = {
-  gray: { outline: 'bg-[#4A5565] dark:bg-gray-400', solid: 'bg-[#4A5565] dark:bg-gray-400' },
+  gray: { outline: 'bg-[#6A7282] dark:bg-gray-300', solid: 'bg-[#6A7282] dark:bg-gray-300' },
   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'
+const DOT_SELECTED_CLASS = 'bg-white'
 
 function dotColorName(option: Option): Color {
   return option.color ?? props.color

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

@@ -1,31 +1,36 @@
 <script lang="ts" setup>
-import {twMerge} from '#adata-ui/utils/twMerge';
+type BadgeType = 'primary' | 'success' | 'danger' | 'gray' | 'warning'
+type BadgeView = 'default' | 'inverted' | 'transparent'
+type BadgeSize = 'xs' | 'sm' | 'lg'
 
-defineOptions({ name: 'AStatusBadge' })
+type StateType = {
+  [key in BadgeType]?: string
+}
+
+interface ViewType {
+  default: StateType
+  inverted: StateType
+  transparent: StateType
+}
 
 interface Props {
-  type?: 'primary' | 'success' | 'danger' | 'gray' | 'orange' | 'warning'
-  view?: 'default' | 'inverted' | 'transparent'
-  size?:  'xs' | 'sm' | 'lg'
+  type?: BadgeType
+  view?: BadgeView
+  size?: BadgeSize
+  point?: boolean
   customClasses?: string
 }
 
+defineOptions({ name: 'AStatusBadge' })
+
 const props = withDefaults(defineProps<Props>(), {
   type: 'primary',
   view: 'default',
   size: 'lg',
-  customClasses: ''
+  point: false,
+  customClasses: '',
 })
 
-const classes = computed(() =>
-  [
-    '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-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-[#068DFF] text-white border-transparent dark:bg-[#068DFF]/30 dark:text-blue-100',
@@ -33,45 +38,68 @@ const typeSwitchValues: ViewType = {
     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-[#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'
+    success: 'bg-[#DCFCE7] text-[#008236] border-transparent dark:bg-[#00A63E]/10 dark:text-green-400',
+    danger: 'bg-[#FFE2E2] text-[#C10007] border-transparent dark:bg-[#E7000B]/10 dark:text-red-400',
+    warning: 'bg-[#FEF3C6] text-[#9A5800] border-transparent dark:bg-[#E17100]/10 dark:text-orange-400',
+    gray: 'bg-[#F3F4F6] text-[#364153] border-transparent dark:bg-[#4A5565]/10 dark:text-gray-300',
   },
   transparent: {
-    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'
-  }
+    primary: 'bg-white border-[#B3DCFF] text-[#0066BD] dark:bg-transparent dark:border-[#068DFF]/50 dark:text-blue-400',
+    success: 'bg-white border-[#7BF1A8] text-[#008236] dark:bg-transparent dark:border-[#00A63E]/50 dark:text-green-400',
+    danger: 'bg-white border-[#FFA2A2] text-[#C10007] dark:bg-transparent dark:border-[#E7000B]/50 dark:text-red-400',
+    warning: 'bg-white border-[#FFD230] text-[#9A5800] dark:bg-transparent dark:border-[#E17100]/50 dark:text-orange-400',
+    gray: 'bg-white border-[#D1D5DC] text-[#364153] dark:bg-transparent dark:border-[#4A5565]/50 dark:text-gray-300',
+  },
 }
 
-
-
-
-type StateType = {
-  [key in 'primary' | 'success' | 'danger' | 'gray' | 'orange' | 'warning']?: string
+const pointSwitchValues: ViewType = {
+  default: {
+    primary: 'bg-white',
+    success: 'bg-white',
+    danger: 'bg-white',
+    warning: 'bg-white',
+    gray: 'bg-white',
+  },
+  inverted: {
+    primary: 'bg-[#068DFF] dark:bg-blue-400',
+    success: 'bg-[#00A63E] dark:bg-green-400',
+    danger: 'bg-[#E7000B] dark:bg-red-400',
+    warning: 'bg-[#E17100] dark:bg-orange-400',
+    gray: 'bg-[#6A7282] dark:bg-gray-300',
+  },
+  transparent: {
+    primary: 'bg-[#068DFF] dark:bg-blue-400',
+    success: 'bg-[#00A63E] dark:bg-green-400',
+    danger: 'bg-[#E7000B] dark:bg-red-400',
+    warning: 'bg-[#E17100] dark:bg-orange-400',
+    gray: 'bg-[#6A7282] dark:bg-gray-300',
+  },
 }
 
-type ViewType = {
-  default: StateType
-  inverted: StateType
-  transparent: StateType
-};
-
-
+const classes = computed(() =>
+  [
+    '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-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 pointClasses = computed(() =>
+  [
+    'w-1.5 h-1.5 rounded-full shrink-0',
+    pointSwitchValues[props.view][props.type],
+  ])
 </script>
+
 <template>
   <div :class="[[classes], customClasses]">
-    <slot name="point"/>
+    <slot name="point">
+      <span v-if="point" :class="pointClasses" />
+    </slot>
     <slot />
   </div>
 </template>

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

@@ -50,8 +50,8 @@ function onSelectToggle() {
       <a-checkbox-v2
         v-if="type === 'checkbox'"
         size="lg"
-        side="left"
-        class="flex w-full items-center justify-between text-left"
+        side="right"
+        class="flex w-full items-center text-left"
         :model-value="node.state === 'checked'"
         :intermediate="node.state === 'indeterminate'"
         :disabled="isDisabled"

package/components/navigation/header/HeaderUsage.vue

@@ -30,17 +30,33 @@ watch(percent, (value) => {
   displayPercent.value = value
 })
 
-const isLow = computed(() => percent.value < 20)
+const usageLevel = computed<'normal' | 'warning' | 'critical'>(() => {
+  if (percent.value < 20) return 'critical'
+  if (percent.value < 40) return 'warning'
+  return 'normal'
+})
 
-const barColorClass = computed(() =>
-  isLow.value
-    ? 'bg-red-500 dark:bg-red-400'
-    : 'bg-blue-600 dark:bg-blue-500',
-)
+const barColorClass = computed(() => {
+  switch (usageLevel.value) {
+    case 'critical':
+      return 'bg-red-500 dark:bg-red-400'
+    case 'warning':
+      return 'bg-yellow-500 dark:bg-yellow-400'
+    default:
+      return 'bg-blue-600 dark:bg-blue-500'
+  }
+})
 
-const valueColorClass = computed(() =>
-  isLow.value ? 'text-red-600 dark:text-red-400' : 'text-gray-900 dark:text-gray-100',
-)
+const valueColorClass = computed(() => {
+  switch (usageLevel.value) {
+    case 'critical':
+      return 'text-red-600 dark:text-red-400'
+    case 'warning':
+      return 'text-yellow-600 dark:text-yellow-400'
+    default:
+      return 'text-gray-900 dark:text-gray-100'
+  }
+})
 </script>
 
 <template>

package/components/overlays/modal/AModalV2.vue

@@ -20,6 +20,8 @@ const props = withDefaults(defineProps<{
   swipeToClose?: boolean
   swipeThreshold?: number
   showDragHandle?: boolean
+  dataTestId?: string
+  iconXMarkTestId?: string
 }>(), {
   size: 'md',
   closeOnOverlay: true,
@@ -34,6 +36,8 @@ const props = withDefaults(defineProps<{
   swipeToClose: true,
   swipeThreshold: 65,
   showDragHandle: true,
+  dataTestId: undefined,
+  iconXMarkTestId: undefined,
 })
 
 const emit = defineEmits<{
@@ -286,6 +290,7 @@ function onTouchEnd() {
               ref="contentRef"
               :class="contentBaseClass"
               :style="sizeStyle"
+              :data-test-id="dataTestId"
               @mousedown.stop
             >
               <div
@@ -316,6 +321,7 @@ function onTouchEnd() {
                   v-if="!hideClose"
                   type="button"
                   class="ml-auto rounded-sm p-1 transition hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+                  :data-test-id="iconXMarkTestId"
                   @click="closeIfAllowed"
                 >
                   <a-icon-x-mark class="size-4" />

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "adata-ui",
   "type": "module",
-  "version": "2.1.40-beta.12",
+  "version": "2.1.40-beta.14",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",

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

@@ -1,76 +0,0 @@
-<script lang="ts" setup>
-import { twMerge } from '#adata-ui/utils/twMerge'
-
-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()
-
-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>