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

package/components/elements/button/AButtonV2.vue

@@ -1,114 +0,0 @@
-<script setup lang="ts">
-import type { Component } from 'vue'
-
-type View = 'solid' | 'outline' | 'ghost' | 'soft'
-type Size = 'xs' | 'sm' | 'md' | 'lg'
-type Color = 'blue' | 'green' | 'red' | 'gray'
-
-const props = withDefaults(defineProps<{
-  view?: View
-  color?: Color
-  size?: Size
-  icon?: Component
-  iconRight?: boolean
-  loading?: boolean
-  disabled?: boolean
-  block?: boolean
-  type?: 'button' | 'submit' | 'reset'
-}>(), {
-  view: 'solid',
-  color: 'blue',
-  size: 'md',
-  iconRight: false,
-  loading: false,
-  disabled: false,
-  block: false,
-  type: 'button',
-})
-
-const emit = defineEmits<{ click: [event: MouseEvent] }>()
-
-const VIEW_CLASS: Record<Color, Record<View, string>> = {
-  blue: {
-    solid: 'bg-blue-600 text-white shadow-sm hover:bg-blue-700 hover:shadow-md active:bg-blue-800 dark:bg-blue-500 dark:hover:bg-blue-400',
-    outline: 'border border-blue-500 bg-white text-blue-700 hover:bg-blue-50 active:bg-blue-100 dark:border-blue-500 dark:bg-gray-900 dark:text-blue-300 dark:hover:bg-blue-950/40',
-    ghost: 'text-deepblue-900 hover:bg-gray-100 active:bg-gray-200 dark:text-gray-100 dark:hover:bg-white/[0.06] dark:active:bg-white/[0.1]',
-    soft: 'bg-blue-50 text-blue-700 hover:bg-blue-100 active:bg-blue-200/70 dark:bg-blue-950/40 dark:text-blue-300 dark:hover:bg-blue-900/40',
-  },
-  green: {
-    solid: 'bg-green-600 text-white shadow-sm hover:bg-green-700 hover:shadow-md active:bg-green-800 dark:bg-green-500 dark:hover:bg-green-400',
-    outline: 'border border-green-500 bg-white text-green-700 hover:bg-green-50 active:bg-green-100 dark:border-green-500 dark:bg-gray-900 dark:text-green-300 dark:hover:bg-green-950/40',
-    ghost: 'text-green-700 hover:bg-green-50 active:bg-green-100 dark:text-green-300 dark:hover:bg-green-950/40',
-    soft: 'bg-green-50 text-green-700 hover:bg-green-100 active:bg-green-200/70 dark:bg-green-950/40 dark:text-green-300 dark:hover:bg-green-900/40',
-  },
-  red: {
-    solid: 'bg-red-600 text-white shadow-sm hover:bg-red-700 hover:shadow-md active:bg-red-800 dark:bg-red-500 dark:hover:bg-red-400',
-    outline: 'border border-red-500 bg-white text-red-700 hover:bg-red-50 active:bg-red-100 dark:border-red-500 dark:bg-gray-900 dark:text-red-300 dark:hover:bg-red-950/40',
-    ghost: 'text-red-700 hover:bg-red-50 active:bg-red-100 dark:text-red-300 dark:hover:bg-red-950/40',
-    soft: 'bg-red-50 text-red-700 hover:bg-red-100 active:bg-red-200/70 dark:bg-red-950/40 dark:text-red-300 dark:hover:bg-red-900/40',
-  },
-  gray: {
-    solid: 'bg-gray-600 text-white shadow-sm hover:bg-gray-700 hover:shadow-md active:bg-gray-800 dark:bg-gray-500 dark:hover:bg-gray-400',
-    outline: 'border border-gray-300 bg-white text-deepblue-900 hover:border-gray-400 hover:bg-gray-50 active:bg-gray-100 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:hover:border-gray-600 dark:hover:bg-white/[0.06]',
-    ghost: 'text-deepblue-900 hover:bg-gray-100 active:bg-gray-200 dark:text-gray-100 dark:hover:bg-white/[0.06] dark:active:bg-white/[0.1]',
-    soft: 'bg-gray-100 text-gray-700 hover:bg-gray-200 active:bg-gray-200/70 dark:bg-gray-800/60 dark:text-gray-200 dark:hover:bg-gray-700/60',
-  },
-}
-
-const SIZE_CLASS: Record<Size, string> = {
-  xs: 'h-6 gap-1 rounded-md px-2 text-body-sm',
-  sm: 'h-8 gap-1.5 rounded-lg px-3 text-body-sm',
-  md: 'h-10 gap-2 rounded-lg px-4 text-body-md',
-  lg: 'h-12 gap-2.5 rounded-lg px-5 text-body-lg',
-}
-
-const ICON_SIZE: Record<Size, string> = {
-  xs: 'size-3.5',
-  sm: 'size-4',
-  md: 'size-5',
-  lg: 'size-5',
-}
-
-function onClick(event: MouseEvent) {
-  if (props.disabled || props.loading) return
-  emit('click', event)
-}
-</script>
-
-<template>
-  <button
-    :type="type"
-    :disabled="disabled || loading"
-    class="button-v2 inline-flex select-none items-center justify-center font-semibold transition-all duration-150 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
-    :class="[
-      VIEW_CLASS[color][view],
-      SIZE_CLASS[size],
-      block ? 'w-full' : '',
-      iconRight ? 'flex-row-reverse' : '',
-    ]"
-    @click="onClick"
-  >
-    <a-icon-loader-circle
-      v-if="loading"
-      class="shrink-0 animate-spin"
-      :class="ICON_SIZE[size]"
-    />
-    <component
-      :is="icon"
-      v-else-if="icon"
-      class="shrink-0"
-      :class="ICON_SIZE[size]"
-    />
-    <span v-if="$slots.default" class="truncate">
-      <slot />
-    </span>
-  </button>
-</template>
-
-<style scoped>
-@media (prefers-reduced-motion: reduce) {
-  .button-v2 {
-    transition: none;
-  }
-}
-</style>

package/components/elements/segmented/ASegmentedV2.vue

@@ -1,151 +0,0 @@
-<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>