adata-ui 2.1.41-beta.1 → 2.1.41

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

@@ -1,210 +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-body-md">
-    <button
-      type="button"
-      :disabled="disabled"
-      :class="[
-        triggerLayoutClass,
-        clearable ? 'pr-16' : 'pr-9',
-        disabled
-          ? 'border-default bg-badge/70'
-          : (btnClass || 'border-default bg-main'),
-        { 'select-row-v2__trigger--open': isOpen },
-      ]"
-      class="select-row-v2__trigger text-primary relative flex w-full items-center gap-2 rounded-[10px] border border-solid pl-4 transition-colors duration-200 hover:border-brand focus-visible:border-focus focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-500/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-secondary"
-        :class="{ 'select-row-v2__label--floated': isLabelFloated }"
-      >
-        {{ label }}<span v-if="required" class="text-danger">&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-sm bg-brand-subtle px-2 py-0.5 text-body-sm text-brand"
-            @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-blue-subtle"
-            >
-              <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-sm bg-blue-subtle px-2 py-0.5 text-body-sm-medium text-brand"
-          >
-            +{{ 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-sm bg-muted px-2 py-0.5 text-body-sm"
-            >
-              <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-sm px-2 py-0.5 text-body-sm-medium">
-              +{{ itemCount }}
-            </span>
-          </span>
-        </template>
-        <span v-else class="text-secondary">&#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-badge"
-        @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-icon-disabled" />
-      </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: var(--background-color-blue-subtle);
-}
-
-.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>
+<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-body-md">
+    <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-sm bg-[#F0F8FF] px-2 py-0.5 text-body-sm text-blue-600 dark:bg-blue-600/15 dark:text-blue-400"
+            @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-blue-100 dark:hover:bg-blue-500/20"
+            >
+              <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-sm bg-[#DBEFFF] px-2 py-0.5 text-body-sm-medium text-[#0066BD] dark:bg-blue-600/25 dark:text-blue-300"
+          >
+            +{{ 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-sm bg-gray-50 px-2 py-0.5 text-body-sm"
+            >
+              <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-sm px-2 py-0.5 text-body-sm-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.blue.100');
+}
+
+:is(.dark) .select-row-v2__chip:hover {
+  background-color: rgb(6 141 255 / 0.25);
+}
+
+.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>