@demicodes/web-ui 0.3.1

package/src/ui/SelectDropdown.vue

@@ -0,0 +1,231 @@
+<script setup lang="ts" generic="T extends { id: string; label: string }">
+import { computed, ref, watch } from 'vue'
+import { useVirtualizer } from '@tanstack/vue-virtual'
+import { SearchLine } from '@mingcute/vue/search'
+import { CloseCircleFill } from '@mingcute/vue/close-circle'
+import { CheckLine } from '@mingcute/vue/check'
+import type { OverlayStore } from '../overlay/overlayStore'
+import DropdownMenu from './DropdownMenu.vue'
+import HighlightText from './HighlightText.vue'
+
+type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'
+
+const props = withDefaults(defineProps<{
+  overlayStore: OverlayStore
+  items: T[]
+  selectedId?: string
+  searchable?: boolean
+  searchPlaceholder?: string
+  emptyText?: string
+  placement?: Placement
+  offset?: number
+  itemHeight?: number
+  matchTriggerWidth?: boolean
+  anchorInset?: number
+  panelClass?: string
+  filterFn?: (item: T, query: string) => boolean
+  noAutoFocus?: boolean
+}>(), {
+  searchPlaceholder: 'Search...',
+  emptyText: 'No items found',
+  placement: 'bottom-start',
+  offset: 6,
+})
+
+const emit = defineEmits<{
+  select: [id: string]
+  close: []
+}>()
+
+defineSlots<{
+  trigger(props: { isOpen: boolean }): void
+  item(props: { item: T; query: string; isSelected: boolean }): void
+}>()
+
+const dropdownRef = ref<InstanceType<typeof DropdownMenu>>()
+const filterQuery = ref('')
+const focusedIndex = ref(-1)
+const inputRef = ref<HTMLInputElement>()
+const panelRef = ref<HTMLElement>()
+const scrollRef = ref<HTMLElement>()
+
+const filteredItems = computed(() => {
+  const q = filterQuery.value.toLowerCase().trim()
+  if (!q) return props.items
+  const fn = props.filterFn
+  if (fn) return props.items.filter(item => fn(item, q))
+  return props.items.filter(item => item.label.toLowerCase().includes(q))
+})
+
+const isVirtual = computed(() => props.itemHeight != null && props.itemHeight > 0)
+
+const virtualizer = useVirtualizer(computed(() => ({
+  count: filteredItems.value.length,
+  getScrollElement: () => scrollRef.value ?? null,
+  estimateSize: () => props.itemHeight ?? 32,
+  overscan: 5,
+})))
+
+watch(inputRef, (el) => {
+  if (!el) return
+  filterQuery.value = ''
+  focusedIndex.value = -1
+  el.focus()
+})
+
+watch(panelRef, (el) => {
+  if (!el || props.searchable || props.noAutoFocus) return
+  focusedIndex.value = -1
+  el.focus()
+})
+
+watch(filteredItems, () => {
+  focusedIndex.value = 0
+})
+
+function handleSelect(id: string) {
+  emit('select', id)
+  dropdownRef.value?.close()
+}
+
+function handleClear() {
+  filterQuery.value = ''
+  inputRef.value?.focus()
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  const count = filteredItems.value.length
+  if (count === 0) return
+
+  if (event.key === 'ArrowDown') {
+    event.preventDefault()
+    focusedIndex.value = focusedIndex.value < count - 1 ? focusedIndex.value + 1 : 0
+    if (isVirtual.value) virtualizer.value.scrollToIndex(focusedIndex.value, { align: 'auto' })
+    return
+  }
+
+  if (event.key === 'ArrowUp') {
+    event.preventDefault()
+    focusedIndex.value = focusedIndex.value > 0 ? focusedIndex.value - 1 : count - 1
+    if (isVirtual.value) virtualizer.value.scrollToIndex(focusedIndex.value, { align: 'auto' })
+    return
+  }
+
+  if (event.key === 'Enter' && focusedIndex.value >= 0) {
+    event.preventDefault()
+    handleSelect(filteredItems.value[focusedIndex.value]!.id)
+  }
+}
+
+function open() {
+  dropdownRef.value?.open()
+}
+
+function close() {
+  dropdownRef.value?.close()
+}
+
+defineExpose({ open, close, handleKeydown })
+</script>
+
+<template>
+  <DropdownMenu ref="dropdownRef" :overlay-store="overlayStore" :placement="placement" :offset="offset" :anchor-inset="anchorInset" :shift-padding="anchorInset ? 0 : undefined" @close="emit('close')">
+    <template #trigger="{ isOpen }">
+      <slot name="trigger" :is-open="isOpen" />
+    </template>
+    <template #content="{ triggerWidth }">
+      <div
+        ref="panelRef"
+        class="flex flex-col overflow-hidden rounded-xl border border-line bg-surface text-fg shadow-xl outline-none"
+        :class="panelClass ?? (!matchTriggerWidth && 'w-72')"
+        :style="matchTriggerWidth ? { width: `${triggerWidth}px` } : undefined"
+        tabindex="-1"
+        @keydown="handleKeydown"
+      >
+        <div v-if="searchable" class="flex items-center gap-2 border-b border-line-subtle px-3 py-2.5 text-fg-subtle">
+          <SearchLine :size="14" class="shrink-0" />
+          <input
+            ref="inputRef"
+            v-model="filterQuery"
+            type="text"
+            :placeholder="searchPlaceholder"
+            class="min-w-0 flex-1 bg-transparent text-[13px] text-fg-body placeholder-fg-subtle outline-none"
+          />
+          <span
+            v-if="filterQuery"
+            class="shrink-0 cursor-pointer transition-colors hover:text-fg-body"
+            @click="handleClear"
+          >
+            <CloseCircleFill :size="14" />
+          </span>
+        </div>
+        <div
+          v-if="filteredItems.length === 0"
+          class="px-3 py-4 text-center text-[13px] text-fg-subtle"
+        >
+          {{ emptyText }}
+        </div>
+        <!-- Virtual list -->
+        <div v-if="isVirtual" ref="scrollRef" class="max-h-80 overflow-y-auto py-1">
+          <div :style="{ height: `${virtualizer.getTotalSize()}px`, position: 'relative' }">
+            <div
+              v-for="vItem in virtualizer.getVirtualItems()"
+              :key="String(vItem.key)"
+              class="absolute inset-x-0 flex cursor-pointer items-center gap-2 px-3 transition-colors"
+              :class="[
+                vItem.index === focusedIndex
+                  ? 'bg-active text-fg'
+                  : filteredItems[vItem.index]!.id === selectedId
+                    ? 'bg-overlay/5 text-fg'
+                    : 'text-fg-muted hover:bg-hover hover:text-fg-body',
+              ]"
+              :style="{ height: `${vItem.size}px`, transform: `translateY(${vItem.start}px)` }"
+              @click="handleSelect(filteredItems[vItem.index]!.id)"
+            >
+              <slot
+                name="item"
+                :item="filteredItems[vItem.index]!"
+                :query="filterQuery"
+                :is-selected="filteredItems[vItem.index]!.id === selectedId"
+              >
+                <span class="min-w-0 flex-1 truncate text-[13px]">
+                  <HighlightText v-if="filterQuery" :text="filteredItems[vItem.index]!.label" :query="filterQuery" />
+                  <template v-else>{{ filteredItems[vItem.index]!.label }}</template>
+                </span>
+              </slot>
+              <span class="ml-1 w-3.5 shrink-0 text-fg-muted">
+                <CheckLine v-if="filteredItems[vItem.index]!.id === selectedId" :size="14" />
+              </span>
+            </div>
+          </div>
+        </div>
+        <!-- Normal list -->
+        <div v-else class="max-h-80 overflow-y-auto py-1">
+          <div
+            v-for="(item, index) in filteredItems"
+            :key="item.id"
+            class="flex cursor-pointer items-center gap-2 px-3 py-1.5 transition-colors"
+            :class="[
+              index === focusedIndex
+                ? 'bg-active text-fg'
+                : item.id === selectedId
+                  ? 'bg-overlay/5 text-fg'
+                  : 'text-fg-muted hover:bg-hover hover:text-fg-body',
+            ]"
+            @click="handleSelect(item.id)"
+          >
+            <slot name="item" :item="item" :query="filterQuery" :is-selected="item.id === selectedId">
+              <span class="min-w-0 flex-1 truncate text-[13px]">
+                <HighlightText v-if="filterQuery" :text="item.label" :query="filterQuery" />
+                <template v-else>{{ item.label }}</template>
+              </span>
+            </slot>
+            <span class="ml-1 w-3.5 shrink-0 text-fg-muted">
+              <CheckLine v-if="item.id === selectedId" :size="14" />
+            </span>
+          </div>
+        </div>
+      </div>
+    </template>
+  </DropdownMenu>
+</template>

package/src/ui/Switch.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+withDefaults(defineProps<{
+  modelValue: boolean
+  label?: string
+  size?: 'sm' | 'md'
+}>(), {
+  size: 'md',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+</script>
+
+<template>
+  <span
+    class="inline-flex cursor-pointer items-center gap-1.5"
+    role="switch"
+    :aria-checked="modelValue"
+    @click="emit('update:modelValue', !modelValue)"
+  >
+    <span v-if="label" class="select-none text-[12px] text-fg-subtle">{{ label }}</span>
+    <span
+      class="relative inline-flex shrink-0 rounded-full transition-colors duration-150"
+      :class="[
+        modelValue ? 'bg-emerald-500' : 'bg-overlay/10',
+        size === 'sm' ? 'h-3.5 w-6' : 'h-5 w-9',
+      ]"
+    >
+      <span
+        class="absolute rounded-full bg-white shadow-sm transition-all duration-150"
+        :class="[
+          size === 'sm' ? 'top-[2px] size-2.5' : 'top-0.5 size-4',
+          size === 'sm'
+            ? (modelValue ? 'left-[12px]' : 'left-[2px]')
+            : (modelValue ? 'left-[18px]' : 'left-0.5'),
+        ]"
+      />
+    </span>
+  </span>
+</template>

package/src/ui/TextInput.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { ref, useSlots } from 'vue'
+
+defineProps<{
+  modelValue?: string
+  placeholder?: string
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const slots = useSlots()
+const inputRef = ref<HTMLInputElement>()
+const isFocused = ref(false)
+
+defineExpose({
+  focus() { inputRef.value?.focus() },
+  select() { inputRef.value?.select() },
+  el: inputRef,
+})
+</script>
+
+<template>
+  <div
+    class="flex h-[26px] w-full items-center rounded bg-surface-raised ring-1 transition-shadow"
+    :class="isFocused ? 'ring-line-focus' : 'ring-line'"
+    @click="inputRef?.focus()"
+  >
+    <input
+      ref="inputRef"
+      type="text"
+      :value="modelValue"
+      :placeholder="placeholder"
+      class="h-full min-w-0 flex-1 bg-transparent px-2 text-xs text-fg outline-none placeholder:text-fg-subtle"
+      @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+      @focus="isFocused = true"
+      @blur="isFocused = false"
+    />
+    <div v-if="slots['suffix']" class="flex shrink-0 items-center pr-2">
+      <slot name="suffix" />
+    </div>
+  </div>
+</template>

package/src/ui/ThemeToggle.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { useTheme, toggleTheme } from '../theme/appTheme'
+
+const { theme } = useTheme()
+</script>
+
+<template>
+  <button
+    type="button"
+    class="flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-fg-subtle transition-colors hover:bg-hover hover:text-fg-body"
+    :aria-label="theme === 'dark' ? 'Switch to light theme' : 'Switch to dark theme'"
+    :title="theme === 'dark' ? 'Light mode' : 'Dark mode'"
+    @click="toggleTheme()"
+  >
+    <!-- Sun: shown in dark mode (click to go light) -->
+    <svg
+      v-if="theme === 'dark'"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      <circle cx="12" cy="12" r="4" />
+      <path
+        d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"
+      />
+    </svg>
+    <!-- Moon: shown in light mode (click to go dark) -->
+    <svg
+      v-else
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+    </svg>
+  </button>
+</template>

package/src/ui/ToggleSwitch.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import Tooltip from './Tooltip.vue'
+
+defineProps<{
+  modelValue: boolean
+  tooltip?: string
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+</script>
+
+<template>
+  <Tooltip :content="tooltip">
+    <div
+      class="flex cursor-pointer items-center gap-0.5 rounded bg-surface-raised p-0.5 ring-1 ring-line-subtle hover:ring-line-strong"
+      @click="emit('update:modelValue', !modelValue)"
+    >
+      <span
+        class="flex items-center rounded-sm p-1 transition-colors"
+        :class="!modelValue ? 'bg-fg-ghost text-fg' : 'text-fg-subtle'"
+      >
+        <slot name="left" />
+      </span>
+      <span
+        class="flex items-center rounded-sm p-1 transition-colors"
+        :class="modelValue ? 'bg-fg-ghost text-fg' : 'text-fg-subtle'"
+      >
+        <slot name="right" />
+      </span>
+    </div>
+  </Tooltip>
+</template>

package/src/ui/Tooltip.vue

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, useAttrs, watch } from 'vue'
+import { useFloating, offset as offsetMiddleware, flip, shift, autoUpdate } from '@floating-ui/vue'
+import type { Placement } from '@floating-ui/vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<{
+  content: string | undefined
+  placement?: Placement
+  offset?: number
+  disabled?: boolean
+  openDelayMs?: number
+  closeDelayMs?: number
+  tag?: 'span' | 'div'
+}>(), {
+  placement: 'top',
+  offset: 8,
+  disabled: false,
+  openDelayMs: 120,
+  closeDelayMs: 0,
+  tag: 'span',
+})
+
+const triggerRef = ref<HTMLElement | null>(null)
+const floatingRef = ref<HTMLElement | null>(null)
+const isOpen = ref(false)
+const attrs = useAttrs()
+const hasContent = computed(() => !!props.content?.trim())
+const canShow = computed(() => hasContent.value && !props.disabled)
+
+const { floatingStyles } = useFloating(triggerRef, floatingRef, {
+  placement: computed(() => props.placement),
+  middleware: computed(() => [
+    offsetMiddleware(props.offset),
+    flip(),
+    shift({ padding: 8 }),
+  ]),
+  whileElementsMounted: autoUpdate,
+  transform: false,
+})
+
+let openTimer: ReturnType<typeof setTimeout> | null = null
+let closeTimer: ReturnType<typeof setTimeout> | null = null
+
+function clearOpenTimer() {
+  if (!openTimer) return
+  clearTimeout(openTimer)
+  openTimer = null
+}
+
+function clearCloseTimer() {
+  if (!closeTimer) return
+  clearTimeout(closeTimer)
+  closeTimer = null
+}
+
+function clearTimers() {
+  clearOpenTimer()
+  clearCloseTimer()
+}
+
+function openNow() {
+  if (!canShow.value) return
+  isOpen.value = true
+}
+
+function closeNow() {
+  isOpen.value = false
+}
+
+function scheduleOpen() {
+  clearCloseTimer()
+  clearOpenTimer()
+  if (!canShow.value) return
+  if (props.openDelayMs <= 0) {
+    openNow()
+    return
+  }
+  openTimer = setTimeout(() => {
+    openTimer = null
+    openNow()
+  }, props.openDelayMs)
+}
+
+function scheduleClose() {
+  clearOpenTimer()
+  clearCloseTimer()
+  if (props.closeDelayMs <= 0) {
+    closeNow()
+    return
+  }
+  closeTimer = setTimeout(() => {
+    closeTimer = null
+    closeNow()
+  }, props.closeDelayMs)
+}
+
+watch(canShow, (nextCanShow) => {
+  if (nextCanShow) return
+  clearTimers()
+  closeNow()
+})
+
+onBeforeUnmount(() => {
+  clearTimers()
+})
+</script>
+
+<template>
+  <component
+    :is="props.tag"
+    ref="triggerRef"
+    v-bind="attrs"
+    @mouseenter="scheduleOpen"
+    @mouseleave="scheduleClose"
+    @focusin="scheduleOpen"
+    @focusout="scheduleClose"
+  >
+    <slot />
+  </component>
+
+  <Teleport to="body">
+    <Transition
+      enter-active-class="transition-[opacity,transform] duration-120 ease-out"
+      leave-active-class="transition-[opacity,transform] duration-100 ease-out"
+      enter-from-class="opacity-0 scale-95"
+      leave-to-class="opacity-0 scale-95"
+    >
+      <div
+        v-if="isOpen && canShow"
+        ref="floatingRef"
+        class="pointer-events-none z-80 line-clamp-2 max-w-sm rounded-md bg-surface px-2 py-1 text-[11px] leading-4 text-fg ring-1 ring-line-subtle shadow-lg"
+        :style="floatingStyles"
+        role="tooltip"
+      >
+        {{ props.content }}
+      </div>
+    </Transition>
+  </Teleport>
+</template>

package/src/ui/blankClickGuard.ts

@@ -0,0 +1,12 @@
+export function createBlankClickGuard(windowMs = 200) {
+  let suppressedUntil = 0
+
+  return {
+    suppress(now = Date.now()) {
+      suppressedUntil = now + windowMs
+    },
+    isSuppressed(now = Date.now()) {
+      return now < suppressedUntil
+    },
+  }
+}