@saasmakers/ui 2.0.68 → 2.0.69

package/app/components/bases/BaseChip.vue

@@ -0,0 +1,125 @@
+<script lang="ts" setup>
+import type { BaseChip } from '../../types/bases'
+
+const props = withDefaults(defineProps<BaseChip>(), {
+  active: false,
+  activeHighlight: 'gray',
+  ariaLabel: undefined,
+  ariaSelected: undefined,
+  as: 'button',
+  disabled: false,
+  hoverable: false,
+  icon: undefined,
+  iconLeading: false,
+  iconSize: undefined,
+  id: undefined,
+  maxWidth: false,
+  normalCase: false,
+  removable: false,
+  role: undefined,
+  text: '',
+  variant: 'outline',
+})
+
+const emit = defineEmits<{
+  click: [event: MouseEvent]
+  mousedown: [event: MouseEvent]
+  mouseenter: [event: MouseEvent]
+}>()
+
+defineSlots<{
+  default?: () => VNode[]
+}>()
+
+const hasLeadingIcon = computed(() => {
+  return props.iconLeading && !!props.icon
+})
+
+const hasTrailingIcon = computed(() => {
+  return props.removable || (!props.iconLeading && !!props.icon)
+})
+
+const resolvedIconSize = computed<BaseSize>(() => {
+  if (props.iconSize) {
+    return props.iconSize
+  }
+
+  if (props.maxWidth && props.iconLeading) {
+    return '2xs'
+  }
+
+  return 'xs'
+})
+
+function onClick(event: MouseEvent) {
+  emit('click', event)
+}
+
+function onMouseDown(event: MouseEvent) {
+  emit('mousedown', event)
+}
+
+function onMouseEnter(event: MouseEvent) {
+  emit('mouseenter', event)
+}
+</script>
+
+<template>
+  <component
+    :is="as"
+    :id="id"
+    class="min-h-8 inline-flex items-center border rounded-md font-normal tracking-tight outline-none transition-colors"
+    :class="{
+      'max-w-full': maxWidth,
+      'gap-1': hasLeadingIcon || hasTrailingIcon,
+      'cursor-pointer': !disabled,
+      'normal-case': normalCase,
+      'field-disabled': disabled,
+      'base-border bg-gray-100 py-1 pl-2 pr-1.5 text-gray-700 dark:bg-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700': variant === 'filled',
+      'base-border px-2 py-1 text-gray-600 dark:text-gray-400': variant === 'outline' && !active,
+      'base-border-hover': variant === 'outline' && !active && hoverable,
+      'base-border px-2 py-1 bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300': variant === 'outline' && active && activeHighlight === 'gray',
+      'base-highlight-indigo border-indigo-600/35 px-2 py-1 text-gray-900 dark:text-gray-100': variant === 'outline' && active && activeHighlight === 'indigo',
+      'base-border base-border-hover border-dashed py-1 text-gray-600 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300': variant === 'dashed' && !active,
+      'pl-1.5 pr-2': variant === 'dashed' && !active && iconLeading,
+      'px-2 py-1': variant === 'dashed' && !active && !iconLeading,
+      'base-border border-dashed px-2 py-1 bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300': variant === 'dashed' && active && activeHighlight === 'gray',
+      'base-highlight-indigo border-indigo-600/35 border-dashed px-2 py-1 text-gray-900 dark:text-gray-100': variant === 'dashed' && active && activeHighlight === 'indigo',
+    }"
+    :aria-label="ariaLabel"
+    :aria-selected="ariaSelected"
+    :disabled="as === 'button' ? disabled : undefined"
+    :role="role"
+    :type="as === 'button' ? 'button' : undefined"
+    @click="onClick"
+    @mousedown="onMouseDown"
+    @mouseenter="onMouseEnter"
+  >
+    <BaseIcon
+      v-if="hasLeadingIcon"
+      class="shrink-0"
+      :color="maxWidth ? 'gray' : undefined"
+      :icon="icon"
+      :size="resolvedIconSize"
+    />
+
+    <span class="truncate">
+      <slot>{{ text }}</slot>
+    </span>
+
+    <BaseIcon
+      v-if="removable"
+      color="gray"
+      :icon="getLayerIcon('close')"
+      size="xs"
+    />
+
+    <BaseIcon
+      v-else-if="hasTrailingIcon"
+      class="shrink-0"
+      color="gray"
+      :icon="icon"
+      :size="resolvedIconSize"
+    />
+  </component>
+</template>

package/app/components/fields/FieldCombobox.vue

@@ -31,7 +31,6 @@ const inputRef = ref<HTMLInputElement>()
 const listRef = ref<HTMLElement>()
 const opened = ref(false)
 const searchRaw = ref('')
-const highlightedIndex = ref(0)
 
 const filteredItems = computed(() => {
   const selectedKeys = new Set(modelValue.value.map(item => getItemKey(item)))
@@ -63,12 +62,19 @@ const optionsCount = computed(() => {
   return filteredItems.value.length + (canCreate.value ? 1 : 0)
 })
 
-watch([filteredItems, canCreate], () => {
-  const lastIndex = Math.max(0, optionsCount.value - 1)
+const { highlightedIndex, onArrowKey, onHighlight, resetHighlight } = useChipNavigation({
+  containerRef: listRef,
+  count: optionsCount,
+  shouldIgnoreHorizontal: (direction) => {
+    const input = inputRef.value
+    const cursorAtStart = input ? input.selectionStart === 0 && input.selectionEnd === 0 : true
+    const cursorAtEnd = input
+      ? input.selectionStart === input.value.length && input.selectionEnd === input.value.length
+      : true
 
-  if (highlightedIndex.value > lastIndex) {
-    highlightedIndex.value = lastIndex
-  }
+    return searchRaw.value.length > 0
+      && ((direction === 'left' && !cursorAtStart) || (direction === 'right' && !cursorAtEnd))
+  },
 })
 
 function getItemKey(item: Item) {
@@ -81,156 +87,6 @@ function getItemText(item: Item) {
     : String(readField(item, props.itemLabel) ?? '')
 }
 
-function getOptionElements() {
-  if (!listRef.value) {
-    return []
-  }
-
-  return Array.from(listRef.value.querySelectorAll<HTMLElement>('[role="option"]'))
-}
-
-function getOptionRects() {
-  return getOptionElements().map((element, index) => ({
-    index,
-    rect: element.getBoundingClientRect(),
-  }))
-}
-
-async function moveHighlight(direction: 'down' | 'left' | 'right' | 'up') {
-  const optionRects = getOptionRects()
-
-  if (optionRects.length === 0) {
-    return
-  }
-
-  const currentIndex = Math.min(highlightedIndex.value, optionRects.length - 1)
-  const current = optionRects[currentIndex]!
-
-  if (direction === 'left' || direction === 'right') {
-    const sameRowOptions = optionRects.filter((option) => {
-      return Math.abs(option.rect.top - current.rect.top) <= Math.min(option.rect.height, current.rect.height) / 2
-    })
-
-    if (direction === 'right') {
-      const rightOptions = sameRowOptions
-        .filter(option => option.rect.left > current.rect.left + 1)
-        .sort((first, second) => first.rect.left - second.rect.left)
-
-      if (rightOptions.length > 0) {
-        highlightedIndex.value = rightOptions[0]!.index
-      }
-      else {
-        const nextRowOptions = optionRects
-          .filter(option => option.rect.top > current.rect.bottom - 1)
-          .sort((first, second) => first.rect.top - second.rect.top || first.rect.left - second.rect.left)
-
-        if (nextRowOptions.length > 0) {
-          const nextRowTop = nextRowOptions[0]!.rect.top
-          const firstInNextRow = nextRowOptions.find(option => Math.abs(option.rect.top - nextRowTop) <= 4)
-
-          if (firstInNextRow) {
-            highlightedIndex.value = firstInNextRow.index
-          }
-        }
-      }
-    }
-    else {
-      const leftOptions = sameRowOptions
-        .filter(option => option.rect.right < current.rect.right - 1)
-        .sort((first, second) => second.rect.left - first.rect.left)
-
-      if (leftOptions.length > 0) {
-        highlightedIndex.value = leftOptions[0]!.index
-      }
-      else {
-        const previousRowOptions = optionRects
-          .filter(option => option.rect.bottom < current.rect.top + 1)
-          .sort((first, second) => second.rect.top - first.rect.top || second.rect.left - first.rect.left)
-
-        if (previousRowOptions.length > 0) {
-          const previousRowTop = previousRowOptions[0]!.rect.top
-
-          const lastInPreviousRow = previousRowOptions
-            .filter(option => Math.abs(option.rect.top - previousRowTop) <= 4)
-            .sort((first, second) => second.rect.left - first.rect.left)[0]
-
-          if (lastInPreviousRow) {
-            highlightedIndex.value = lastInPreviousRow.index
-          }
-        }
-      }
-    }
-  }
-  else {
-    const currentCenterX = current.rect.left + current.rect.width / 2
-
-    const rowOptions = optionRects.filter((option) => {
-      if (direction === 'down') {
-        return option.rect.top > current.rect.top + 1
-      }
-
-      return option.rect.bottom < current.rect.bottom - 1
-    })
-
-    if (rowOptions.length === 0) {
-      return
-    }
-
-    const targetRowTop = direction === 'down'
-      ? Math.min(...rowOptions.map(option => option.rect.top))
-      : Math.max(...rowOptions.map(option => option.rect.top))
-
-    const targetRowOptions = rowOptions.filter(option => Math.abs(option.rect.top - targetRowTop) <= 4)
-
-    let closestIndex: number | undefined
-    let closestDist: number | undefined
-
-    for (const option of targetRowOptions) {
-      const centerX = option.rect.left + option.rect.width / 2
-      const dist = Math.abs(centerX - currentCenterX)
-
-      if (closestDist === undefined || dist < closestDist) {
-        closestDist = dist
-        closestIndex = option.index
-      }
-    }
-
-    if (closestIndex !== undefined) {
-      highlightedIndex.value = closestIndex
-    }
-  }
-
-  await nextTick()
-
-  getOptionElements()[highlightedIndex.value]?.scrollIntoView({
-    block: 'nearest',
-    inline: 'nearest',
-  })
-}
-
-async function onArrowKey(event: KeyboardEvent, direction: 'down' | 'left' | 'right' | 'up') {
-  if (optionsCount.value === 0) {
-    return
-  }
-
-  if (direction === 'left' || direction === 'right') {
-    const input = inputRef.value
-    const cursorAtStart = input ? input.selectionStart === 0 && input.selectionEnd === 0 : true
-
-    const cursorAtEnd = input
-      ? input.selectionStart === input.value.length && input.selectionEnd === input.value.length
-      : true
-
-    if (searchRaw.value.length > 0 && ((direction === 'left' && !cursorAtStart) || (direction === 'right' && !cursorAtEnd))) {
-      return
-    }
-  }
-
-  event.preventDefault()
-
-  await moveHighlight(direction)
-}
-
 function onBackspace() {
   if (searchRaw.value === '' && modelValue.value.length > 0) {
     modelValue.value = modelValue.value.slice(0, -1)
@@ -241,7 +97,7 @@ function onClose() {
   if (opened.value) {
     opened.value = false
     searchRaw.value = ''
-    highlightedIndex.value = 0
+    resetHighlight()
   }
 }
 
@@ -253,7 +109,7 @@ async function onCreate() {
     emit('create', label)
 
     searchRaw.value = ''
-    highlightedIndex.value = 0
+    resetHighlight()
 
     await nextTick()
 
@@ -276,14 +132,14 @@ function onEnter() {
   }
 }
 
-function onHighlight(index: number) {
-  highlightedIndex.value = index
+function onChipMouseDown(event: MouseEvent) {
+  event.preventDefault()
 }
 
 async function onOpen() {
   if (!props.disabled && !opened.value) {
     opened.value = true
-    highlightedIndex.value = 0
+    resetHighlight()
 
     await nextTick()
 
@@ -301,7 +157,7 @@ function onRemove(item: Item) {
 async function onSelect(item: Item) {
   modelValue.value = [...modelValue.value, item]
   searchRaw.value = ''
-  highlightedIndex.value = 0
+  resetHighlight()
 
   await nextTick()
 
@@ -349,39 +205,31 @@ function readField(item: Item, field: string) {
           'min-h-14': size === 'lg',
         }"
       >
-        <button
+        <BaseChip
           v-for="item in modelValue"
           :key="getItemKey(item)"
-          :aria-label="t('remove', { label: getItemText(item) })"
-          class="min-h-8 inline-flex items-center gap-1 border base-border rounded-md bg-gray-100 py-1 pl-2 pr-1.5 text-gray-700 font-normal tracking-tight normal-case transition-colors dark:bg-gray-800 hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700"
-          type="button"
-          @mousedown.prevent
+          :ariaLabel="t('remove', { label: getItemText(item) })"
+          normal-case
+          removable
+          variant="filled"
+          @mousedown="onChipMouseDown"
           @click="onRemove(item)"
         >
-          <span class="truncate">{{ getItemText(item) }}</span>
+          {{ getItemText(item) }}
+        </BaseChip>
 
-          <BaseIcon
-            color="gray"
-            :icon="getLayerIcon('close')"
-            size="xs"
-          />
-        </button>
-
-        <button
+        <BaseChip
           v-if="!opened"
-          :aria-label="t('add')"
-          class="min-h-8 inline-flex items-center gap-1 border base-border base-border-hover rounded-md border-dashed py-1 pl-1.5 pr-2 text-gray-600 font-normal tracking-tight normal-case dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
+          :ariaLabel="t('add')"
           :disabled="disabled"
-          type="button"
+          :icon="getLayerIcon('plus')"
+          icon-leading
+          normal-case
+          variant="dashed"
           @click="onOpen"
         >
-          <BaseIcon
-            :icon="getLayerIcon('plus')"
-            size="xs"
-          />
-
-          <span>{{ t('add') }}</span>
-        </button>
+          {{ t('add') }}
+        </BaseChip>
 
         <input
           v-else
@@ -418,45 +266,42 @@ function readField(item: Item, field: string) {
           class="max-h-[150px] flex flex-wrap gap-1.5 overflow-y-auto"
           role="listbox"
         >
-          <div
+          <BaseChip
             v-for="(item, index) in filteredItems"
             :id="`${id}-option-${index}`"
             :key="getItemKey(item)"
-            :aria-selected="index === highlightedIndex"
-            class="max-w-full min-h-8 inline-flex cursor-pointer items-center border base-border rounded-md px-2 py-1 text-gray-600 font-normal tracking-tight normal-case outline-none dark:text-gray-400"
-            :class="{ 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300': index === highlightedIndex }"
+            :active="index === highlightedIndex"
+            :ariaSelected="index === highlightedIndex"
+            as="div"
+            max-width
+            normal-case
             role="option"
+            variant="outline"
             @click="onSelect(item)"
-            @mousedown.prevent
+            @mousedown="onChipMouseDown"
             @mouseenter="onHighlight(index)"
           >
-            <span class="truncate">
-              {{ getItemText(item) }}
-            </span>
-          </div>
+            {{ getItemText(item) }}
+          </BaseChip>
 
-          <div
+          <BaseChip
             v-if="canCreate"
             :id="`${id}-create`"
-            :aria-selected="highlightedIndex === createOptionIndex"
-            class="max-w-full min-h-8 inline-flex cursor-pointer items-center gap-1 border base-border rounded-md border-dashed px-2 py-1 text-gray-600 font-normal tracking-tight normal-case outline-none dark:text-gray-400"
-            :class="{ 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300': highlightedIndex === createOptionIndex }"
+            :active="highlightedIndex === createOptionIndex"
+            :ariaSelected="highlightedIndex === createOptionIndex"
+            as="div"
+            max-width
+            :icon="getLayerIcon('plus')"
+            icon-leading
+            normal-case
             role="option"
+            variant="dashed"
             @click="onCreate"
-            @mousedown.prevent
+            @mousedown="onChipMouseDown"
             @mouseenter="onHighlight(createOptionIndex)"
           >
-            <BaseIcon
-              class="shrink-0"
-              color="gray"
-              :icon="getLayerIcon('plus')"
-              size="2xs"
-            />
-
-            <span class="truncate">
-              {{ t('create', { label: searchRaw.trim() }) }}
-            </span>
-          </div>
+            {{ t('create', { label: searchRaw.trim() }) }}
+          </BaseChip>
         </div>
       </div>
     </div>