adata-ui 2.1.40-beta.1 → 2.1.40-beta.2

package/components/elements/a-select-row/ASelectRowV2.vue

@@ -0,0 +1,213 @@
+<script setup lang="ts">
+import { useChipOverflow } from '#adata-ui/composables/useChipOverflow'
+
+interface Item {
+  id: number | string
+  name: string
+}
+
+interface Props {
+  label: string
+  selectedItems: Item[]
+  clearable?: boolean
+  disabled?: boolean
+  deletable?: boolean
+  btnClass?: string
+  size?: 'sm' | 'md'
+  required?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  clearable: true,
+  disabled: false,
+  deletable: false,
+  btnClass: '',
+  size: 'md',
+  required: false,
+})
+
+const emit = defineEmits<{
+  (e: 'delete', item: Item): void
+  (e: 'clear'): void
+}>()
+
+const isOpen = defineModel<boolean>('isOpen', { default: false })
+
+const chipsRow = ref<HTMLElement | null>(null)
+const measureRow = ref<HTMLElement | null>(null)
+
+const itemCount = computed(() => props.selectedItems?.length ?? 0)
+
+const { visibleCount, hiddenCount } = useChipOverflow({
+  container: chipsRow,
+  measure: measureRow,
+  count: itemCount,
+  gap: 6,
+})
+
+const visibleItems = computed(() => props.selectedItems.slice(0, visibleCount.value))
+
+const showFloatingLabel = computed(() => !!props.label && !visibleItems.value?.length)
+
+const hasValue = computed(() => itemCount.value > 0)
+
+const isLabelFloated = computed(() => hasValue.value || isOpen.value)
+
+function deleteItem(item: Item) {
+  emit('delete', item)
+}
+
+function onClear() {
+  emit('clear')
+}
+
+const triggerLayoutClass = computed(() => {
+  if (hasValue.value || !props.label) {
+    return props.size === 'md' ? 'h-10 py-1.5' : 'h-9 py-1.5'
+  }
+  return props.size === 'md' ? 'h-10 pt-3.5 pb-1' : 'h-9 pt-[14px] pb-1'
+})
+
+defineExpose({ onClear })
+</script>
+
+<template>
+  <div class="select-row-v2 relative w-full text-sm">
+    <button
+      type="button"
+      :disabled="disabled"
+      :class="[
+        triggerLayoutClass,
+        clearable ? 'pr-16' : 'pr-9',
+        disabled
+          ? 'border-gray-200 bg-gray-100/70 dark:border-gray-700 dark:bg-white/[0.03]'
+          : (btnClass || 'border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900'),
+        { 'select-row-v2__trigger--open': isOpen },
+      ]"
+      class="select-row-v2__trigger text-deepblue-900 relative flex w-full items-center gap-2 rounded-[10px] border border-solid pl-4 transition-colors duration-200 hover:border-blue-500 focus-visible:border-blue-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600/20 dark:text-gray-200 dark:hover:border-blue-400 dark:focus-visible:border-blue-400 dark:focus-visible:ring-blue-400/20"
+      @click="isOpen = !isOpen"
+    >
+      <span
+        v-if="showFloatingLabel"
+        :data-size="size"
+        class="select-row-v2__label pointer-events-none absolute left-4 top-1/2 max-w-[calc(100%-48px)] truncate text-gray-500 dark:text-gray-400"
+        :class="{ 'select-row-v2__label--floated': isLabelFloated }"
+      >
+        {{ label }}<span v-if="required" class="text-red-500 dark:text-red-400">&nbsp;*</span>
+      </span>
+
+      <span ref="chipsRow" class="relative flex w-full min-w-0 items-center gap-1.5 overflow-hidden text-start leading-none">
+        <template v-if="hasValue">
+          <span
+            v-for="item in visibleItems"
+            :key="item.id"
+            class="select-row-v2__chip inline-flex min-w-0 max-w-[180px] 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]"
+            @click.stop="deletable ? deleteItem(item) : (isOpen = true)"
+          >
+            <span class="truncate">{{ item.name }}</span>
+            <button
+              v-if="deletable"
+              type="button"
+              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]"
+            >
+              <a-icon-x-mark class="size-2.5" />
+            </button>
+          </span>
+          <span
+            v-if="hiddenCount > 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"
+          >
+            +{{ hiddenCount }}
+          </span>
+
+          <span
+            ref="measureRow"
+            aria-hidden="true"
+            class="pointer-events-none invisible absolute left-0 top-0 flex h-0 items-center gap-1.5"
+          >
+            <span
+              v-for="item in selectedItems"
+              :key="`measure-${item.id}`"
+              class="inline-flex max-w-[180px] items-center gap-1 rounded-md border border-gray-200 bg-gray-50 px-2 py-0.5 text-xs"
+            >
+              <span class="truncate">{{ item.name }}</span>
+              <span
+                v-if="deletable"
+                class="flex shrink-0 items-center justify-center rounded-full p-0.5"
+              >
+                <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">
+              +{{ itemCount }}
+            </span>
+          </span>
+        </template>
+        <span v-else class="text-gray-500 dark:text-gray-400">&#8203;</span>
+      </span>
+
+      <button
+        v-if="clearable && hasValue && !disabled"
+        type="button"
+        class="absolute right-9 top-1/2 flex -translate-y-1/2 items-center justify-center rounded-full p-0.5 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-white/[0.08] dark:hover:text-gray-300"
+        @click.stop="onClear"
+      >
+        <a-icon-x-mark class="!m-0 size-3.5" />
+      </button>
+
+      <span
+        :class="{ 'rotate-180': isOpen }"
+        class="absolute right-3 top-1/2 -translate-y-1/2 transition-transform duration-200"
+      >
+        <a-icon-chevron-down class="!m-0 size-4 text-gray-400 dark:text-gray-500" />
+      </span>
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.select-row-v2__trigger:disabled {
+  pointer-events: none;
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+.select-row-v2__chip {
+  cursor: pointer;
+  transition: background-color 150ms;
+}
+
+.select-row-v2__chip:hover {
+  background-color: theme('colors.gray.100');
+}
+
+:is(.dark) .select-row-v2__chip:hover {
+  background-color: rgb(255 255 255 / 0.08);
+}
+
+.select-row-v2__label {
+  font-size: 14px;
+  line-height: 1.3;
+  transform: translateY(-50%);
+  transition:
+    transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
+    font-size 300ms cubic-bezier(0.22, 1, 0.36, 1),
+    color 300ms ease-out;
+}
+
+.select-row-v2__label--floated {
+  font-size: 10px;
+  transform: translateY(-17px);
+}
+
+.select-row-v2__label--floated[data-size="sm"] {
+  transform: translateY(-14px);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .select-row-v2__label,
+  .select-row-v2__trigger {
+    transition: none;
+  }
+}
+</style>

package/components/elements/button/AButtonV2.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import type { Component } from 'vue'
+
+type View = 'solid' | 'outline' | 'ghost' | 'soft'
+type Size = 'sm' | 'md' | 'lg'
+
+const props = withDefaults(defineProps<{
+  view?: View
+  size?: Size
+  icon?: Component
+  iconRight?: boolean
+  loading?: boolean
+  disabled?: boolean
+  block?: boolean
+  type?: 'button' | 'submit' | 'reset'
+}>(), {
+  view: 'solid',
+  size: 'md',
+  iconRight: false,
+  loading: false,
+  disabled: false,
+  block: false,
+  type: 'button',
+})
+
+const emit = defineEmits<{ click: [event: MouseEvent] }>()
+
+const VIEW_CLASS: Record<View, string> = {
+  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-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-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',
+}
+
+const SIZE_CLASS: Record<Size, string> = {
+  sm: 'h-8 gap-1.5 px-3 text-xs',
+  md: 'h-10 gap-2 px-4 text-sm',
+  lg: 'h-12 gap-2.5 px-5 text-base',
+}
+
+const ICON_SIZE: Record<Size, string> = {
+  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 rounded-xl font-semibold transition-all duration-150 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+    :class="[
+      VIEW_CLASS[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

@@ -0,0 +1,58 @@
+<script generic="T extends string | number" lang="ts" setup>
+interface Option {
+  value: T
+  label: string
+  disabled?: boolean
+  count?: number
+  dotColor?: string
+}
+
+const props = withDefaults(defineProps<{
+  options: Option[]
+  size?: 'sm' | 'md'
+  deselectable?: boolean
+}>(), {
+  size: 'md',
+  deselectable: true,
+})
+
+const modelValue = defineModel<T | undefined | null>()
+
+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-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',
+      ]"
+      @click="select(option)"
+    >
+      <span
+        v-if="option.dotColor"
+        class="size-2 shrink-0 rounded-full"
+        :style="{ backgroundColor: option.dotColor }"
+      />
+      <span>{{ option.label }}</span>
+      <span v-if="option.count != null" class="tabular-nums opacity-70">
+        {{ option.count }}
+      </span>
+    </button>
+  </div>
+</template>