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

package/components/elements/segmented/ASegmentedV2.vue

@@ -0,0 +1,151 @@
+<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 | 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-[#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'
+
+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) {
+    modelValue.value = undefined
+    return
+  }
+  modelValue.value = option.value
+}
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-2">
+    <button
+      v-for="option in options"
+      :key="String(option.value)"
+      type="button"
+      :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-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="showDot(option)"
+        class="size-2 shrink-0 rounded-full"
+        :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>
+      <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"