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

package/.claude/settings.local.json

@@ -0,0 +1,19 @@
+{
+  "permissions": {
+    "allow": [
+      "PowerShell(npm view *)",
+      "PowerShell(git rm *)",
+      "PowerShell(npx --yes @tailwindcss/upgrade@latest --force)",
+      "PowerShell(Out-File *)",
+      "PowerShell(pnpm install *)",
+      "PowerShell(Get-ChildItem node_modules\\\\eslint-plugin-tailwindcss\\\\lib\\\\rules | Select-Object -ExpandProperty Name; node -e \"const p=require\\('eslint-plugin-tailwindcss'\\); console.log\\(Object.keys\\(p.rules\\).join\\('\\\\n'\\)\\); console.log\\('CONFIGS:', Object.keys\\(p.configs\\).join\\(','\\)\\)\")",
+      "PowerShell(node -e \"const p=require\\('eslint-plugin-tailwindcss'\\); console.log\\(JSON.stringify\\(p.configs.recommended, \\(k,v\\)=> typeof v==='object'&&v!==null&&k==='plugins'?Object.keys\\(v\\):v, 2\\).substring\\(0,800\\)\\)\"; Select-String -Path node_modules\\\\eslint-plugin-tailwindcss\\\\README.md -Pattern 'entryPoint|settings' | Select-Object -First 10 | ForEach-Object Line)",
+      "PowerShell(Select-String -Path node_modules\\\\eslint-plugin-tailwindcss\\\\README.md -Pattern 'cssConfigPath|vue|\\\\.vue' -Context 2,4 | Select-Object -First 12 | ForEach-Object {$_.Context.PreContext + $_.Line + $_.Context.PostContext} | ForEach-Object {$_})",
+      "PowerShell(pnpm build *)",
+      "PowerShell($c = Get-Content .playground\\\\.output\\\\server\\\\chunks\\\\build\\\\entry-styles.B6sbRG45.mjs -Raw; foreach \\($m in '--color-deepblue-900','bg-gr-blue','heading-01','hover\\\\:bg-purple-900\\\\/20','a-container','--font-sans','outline-hidden','scrollbar-gutter'\\) { \"$m => $\\($c.Contains\\($m\\)\\)\" })",
+      "PowerShell(pnpm eslint *)",
+      "PowerShell(pnpm *)",
+      "PowerShell(Get-Content C:\\\\adata\\\\adata-ui\\\\app.vue; \"=== -error.vue \\(first 100\\) ===\"; Get-Content C:\\\\adata\\\\adata-ui\\\\-error.vue -TotalCount 100; \"=== .playground/app.vue ===\"; Get-Content C:\\\\adata\\\\adata-ui\\\\.playground\\\\app.vue -TotalCount 60)"
+    ]
+  }
+}

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

@@ -0,0 +1,214 @@
+<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,
+  contentKey: computed(() => props.selectedItems?.map(item => item.name).join(' ') ?? ''),
+  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 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 w-max items-center gap-1.5"
+          >
+            <span
+              v-for="item in selectedItems"
+              :key="`measure-${item.id}`"
+              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"
+            >
+              <span>{{ 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 transition-colors hover:bg-gray-100 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,112 @@
+<script setup lang="ts">
+import type { Component } from 'vue'
+
+type View = 'solid' | 'outline' | 'ghost' | 'soft'
+type Size = '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> = {
+  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[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/leave-note/ALeaveNote.vue

@@ -1,13 +1,18 @@
 <script setup lang="ts">
 import * as z from 'zod'
 import { useUIValidation } from '#adata-ui/composables/useUIValidation'
+import AButtonV2 from '#adata-ui/components/elements/button/AButtonV2.vue'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   isError?: boolean,
   errorText?: string
-}>()
+}>(), {
+  isError: false,
+  errorText: '',
+})
 
 const emit = defineEmits<{
+  (e: 'onCancel'): void
   (e: 'onSubmit'): void
 }>()
 
@@ -30,6 +35,12 @@ const { validation, getError } = useUIValidation(
   submitted,
 )
 
+function onCancel() {
+  submitted.value = false
+  note.value = ''
+  emit('onCancel')
+}
+
 async function onSubmit() {
   submitted.value = true
   if (validation.value) return
@@ -48,31 +59,41 @@ defineExpose({
     </p>
     <a-textarea
       v-model="note"
+      class="min-h-[120px]"
+      color-classes="bg-deepblue-900/5 outline outline-1 outline-gray-200 dark:outline-gray-600 dark:bg-gray-200/5 !rounded-[10px]"
+      size="sm"
+      resizeable="y"
       :label="t('forms.leaveNote.placeholder')"
       :error="getError('note')"
-      class="mb-2 min-h-[120px]"
-      resizeable="none"
-      clearable
-      required
     >
       <template #alert>
         <a-alert
-          v-if="isError || getError('note')"
+          v-if="isError"
           color="red"
           class="mt-1"
         >
-          {{ getError('note') || (isError ? (!!errorText ? errorText : t('forms.leaveNote.limit')) : '') }}
+          {{ isError ? (!!errorText ? errorText : t('forms.leaveNote.limit')) : '' }}
         </a-alert>
       </template>
     </a-textarea>
-    <a-button
-      :disabled="!note.trim() && isLoading"
-      class="w-full sm:w-auto"
-      size="lg"
-      :loading="isLoading"
-      @click="onSubmit"
-    >
-      {{ t('actions.send') }}
-    </a-button>
+    <div class="mt-2 flex w-full justify-end items-center gap-2 md:gap-[10px]">
+      <a-button-v2
+        class="w-full sm:w-auto"
+        view="outline"
+        size="md"
+        @click="onCancel"
+      >
+        {{ t('actions.cancel') }}
+      </a-button-v2>
+      <a-button-v2
+        :disabled="!note.trim() && isLoading"
+        class="w-full sm:w-auto"
+        size="md"
+        :loading="isLoading"
+        @click="onSubmit"
+      >
+        {{ t('actions.send') }}
+      </a-button-v2>
+    </div>
   </div>
 </template>

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>