@demicodes/web-ui 0.3.1

package/src/ui/ContextMenu.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { OverlayStore } from '../overlay/overlayStore'
+import { useContextMenuOwner } from '../composables/useContextMenuOwner'
+import Popover from './Popover.vue'
+import Menu from './Menu.vue'
+
+defineProps<{
+  overlayStore: OverlayStore
+}>()
+
+const emit = defineEmits<{
+  open: [event: MouseEvent]
+  close: []
+}>()
+
+const { isOpen, anchorX, anchorY, menuKey, open, close } = useContextMenuOwner(() => emit('close'))
+
+function handleContextMenu(event: MouseEvent) {
+  open(event)
+  emit('open', event)
+}
+</script>
+
+<template>
+  <div @contextmenu="handleContextMenu">
+    <slot name="trigger" />
+    <Popover :key="menuKey" :overlay-store="overlayStore" :is-open="isOpen" :anchor-x="anchorX" :anchor-y="anchorY" :offset="0" @close="close">
+      <Menu @click="close">
+        <slot name="menu" />
+      </Menu>
+    </Popover>
+  </div>
+</template>

package/src/ui/Dialog.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { OverlayStore } from '../overlay/overlayStore'
+import { useOverlay } from '../composables/useOverlay'
+
+const props = defineProps<{
+  isOpen: boolean
+  overlayStore: OverlayStore
+}>()
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+useOverlay(props.overlayStore, () => props.isOpen, () => {
+  if (props.isOpen) emit('close')
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition
+      enter-active-class="transition-opacity duration-150 ease-out"
+      leave-active-class="transition-opacity duration-150 ease-out"
+      enter-from-class="opacity-0"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-if="isOpen"
+        class="fixed inset-0 z-50 grid place-items-center bg-black/60"
+        @click.self="emit('close')"
+      >
+        <Transition
+          appear
+          enter-active-class="transition-[opacity,transform] duration-150 ease-out"
+          leave-active-class="transition-[opacity,transform] duration-150 ease-out"
+          enter-from-class="opacity-0 scale-95"
+          leave-to-class="opacity-0 scale-95"
+        >
+          <div
+            class="w-full max-w-md rounded-xl border border-line bg-surface shadow-2xl"
+          >
+            <slot />
+          </div>
+        </Transition>
+      </div>
+    </Transition>
+  </Teleport>
+</template>

package/src/ui/DropdownMenu.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import type { OverlayStore } from '../overlay/overlayStore'
+import Popover from './Popover.vue'
+
+const props = withDefaults(defineProps<{
+  overlayStore: OverlayStore
+  placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'
+  offset?: number
+  anchorInset?: number
+  shiftPadding?: number
+}>(), {
+  placement: 'top',
+  offset: 8,
+})
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+const isOpen = ref(false)
+const anchorX = ref(0)
+const anchorY = ref(0)
+const anchorWidth = ref(0)
+const anchorHeight = ref(0)
+const triggerRef = ref<HTMLDivElement>()
+const ignoreEls = computed(() => triggerRef.value ? [triggerRef.value] : [])
+
+function updateAnchor() {
+  if (!triggerRef.value) return
+  const rect = triggerRef.value.getBoundingClientRect()
+  const inset = props.anchorInset ?? 0
+  anchorX.value = rect.left + inset
+  anchorY.value = rect.top
+  anchorWidth.value = rect.width - inset * 2
+  anchorHeight.value = rect.height
+}
+
+function handleClick() {
+  updateAnchor()
+  isOpen.value = !isOpen.value
+}
+
+function open() {
+  updateAnchor()
+  isOpen.value = true
+}
+
+function close() {
+  if (!isOpen.value) return
+  isOpen.value = false
+  emit('close')
+}
+
+defineExpose({ open, close })
+</script>
+
+<template>
+  <div ref="triggerRef" @click="handleClick">
+    <slot name="trigger" :is-open="isOpen" />
+  </div>
+  <Popover
+    :overlay-store="props.overlayStore"
+    :is-open="isOpen"
+    :anchor-x="anchorX"
+    :anchor-y="anchorY"
+    :anchor-width="anchorWidth"
+    :anchor-height="anchorHeight"
+    :placement="props.placement"
+    :offset="props.offset"
+    :shift-padding="props.shiftPadding"
+    :ignore-els="ignoreEls"
+    @close="close"
+  >
+    <slot name="content" :close="close" :trigger-width="anchorWidth" />
+  </Popover>
+</template>

package/src/ui/ErrorBox.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { useClipboard } from '@vueuse/core'
+import { CheckLine } from '@mingcute/vue/check'
+import { CopyLine } from '@mingcute/vue/copy'
+import { CloseLine } from '@mingcute/vue/close'
+
+const props = defineProps<{
+  message: string
+  copyable?: boolean
+  dismissible?: boolean
+}>()
+
+const emit = defineEmits<{
+  dismiss: []
+}>()
+
+const { copy, copied } = useClipboard({ copiedDuring: 1500 })
+</script>
+
+<template>
+  <div class="rounded-lg border border-on-danger-muted bg-tint-danger px-3 py-2">
+    <div class="flex items-start gap-2">
+      <pre class="m-0 min-w-0 flex-1 whitespace-pre-wrap break-words font-mono text-[12px] leading-5 text-on-danger">{{ message }}</pre>
+      <div v-if="copyable || dismissible" class="flex shrink-0 items-center gap-0.5">
+        <span
+          v-if="copyable"
+          class="flex cursor-pointer items-center rounded-md p-1 text-on-danger-muted transition-colors hover:bg-tint-danger-strong hover:text-on-danger"
+          @click="copy(props.message)"
+        >
+          <CheckLine v-if="copied" :size="12" class="text-on-success" />
+          <CopyLine v-else :size="12" />
+        </span>
+        <div
+          v-if="dismissible"
+          class="flex cursor-pointer items-center justify-center rounded p-1 text-on-danger-muted transition-colors hover:bg-tint-danger-strong hover:text-on-danger"
+          @click="emit('dismiss')"
+        >
+          <CloseLine :size="12" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/src/ui/HighlightText.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  text: string
+  query: string
+}>()
+
+const segments = computed(() => {
+  const q = props.query.trim().toLowerCase()
+  if (!q) return [{ text: props.text, isMatch: false }]
+
+  const result: { text: string; isMatch: boolean }[] = []
+  const lower = props.text.toLowerCase()
+  let cursor = 0
+
+  while (cursor < props.text.length) {
+    const matchIdx = lower.indexOf(q, cursor)
+    if (matchIdx === -1) {
+      result.push({ text: props.text.slice(cursor), isMatch: false })
+      break
+    }
+    if (matchIdx > cursor) {
+      result.push({ text: props.text.slice(cursor, matchIdx), isMatch: false })
+    }
+    result.push({ text: props.text.slice(matchIdx, matchIdx + q.length), isMatch: true })
+    cursor = matchIdx + q.length
+  }
+
+  return result
+})
+</script>
+
+<template>
+  <template v-for="(seg, i) in segments" :key="i">
+    <mark v-if="seg.isMatch" class="bg-tint-highlight text-on-highlight">{{ seg.text }}</mark>
+    <template v-else>{{ seg.text }}</template>
+  </template>
+</template>

package/src/ui/IconButton.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { Component } from 'vue'
+
+withDefaults(defineProps<{
+  icon: Component
+  iconSize?: number
+  size?: 'xs' | 'sm' | 'md' | 'lg'
+  variant?: 'default' | 'danger'
+  disabled?: boolean
+}>(), {
+  size: 'md',
+  variant: 'default',
+})
+</script>
+
+<template>
+  <span
+    class="flex shrink-0 cursor-pointer items-center justify-center transition-colors"
+    :class="[
+      size === 'xs' ? 'size-4 rounded-sm' : size === 'sm' ? 'size-5 rounded' : size === 'lg' ? 'size-8 rounded-lg' : 'size-6 rounded-md',
+      disabled
+        ? 'pointer-events-none text-fg-ghost'
+        : variant === 'danger'
+          ? 'text-fg-subtle hover:bg-hover hover:text-on-danger'
+          : 'text-fg-subtle hover:bg-hover hover:text-fg-body',
+    ]"
+  >
+    <component :is="icon" :size="iconSize ?? (size === 'xs' ? 10 : size === 'sm' ? 14 : size === 'lg' ? 18 : 16)" />
+  </span>
+</template>

package/src/ui/IndeterminateSpinner.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+
+const props = defineProps<{
+  size?: number
+  strokeWidth?: number
+  trackClass?: string
+  arcClass?: string
+}>()
+
+const svgSize = props.size ?? 14
+const stroke = props.strokeWidth ?? 2.5
+const radius = (svgSize - stroke) / 2
+const circumference = 2 * Math.PI * radius
+const cx = svgSize / 2
+const cy = svgSize / 2
+
+const arcRef = ref<SVGCircleElement>()
+
+const dashMin = circumference * 0.1
+const dashMax = circumference * 0.45
+
+onMounted(() => {
+  arcRef.value?.animate([
+    { strokeDasharray: `${dashMin} ${circumference - dashMin}`, strokeDashoffset: '0' },
+    { strokeDasharray: `${dashMax} ${circumference - dashMax}`, strokeDashoffset: `${circumference * -0.2}` },
+    { strokeDasharray: `${dashMin} ${circumference - dashMin}`, strokeDashoffset: `${-circumference}` },
+  ], {
+    duration: 1500,
+    easing: 'ease-in-out',
+    iterations: Infinity,
+  })
+})
+</script>
+
+<template>
+  <svg
+    :width="svgSize" :height="svgSize"
+    :viewBox="`0 0 ${svgSize} ${svgSize}`"
+    class="spinner-rotate"
+  >
+    <circle
+      :cx="cx" :cy="cy" :r="radius"
+      fill="none"
+      stroke="currentColor"
+      :stroke-width="stroke"
+      :class="trackClass ?? 'text-overlay/8'"
+    />
+    <circle
+      ref="arcRef"
+      :cx="cx" :cy="cy" :r="radius"
+      fill="none"
+      stroke="currentColor"
+      :stroke-width="stroke"
+      stroke-linecap="round"
+      :class="arcClass ?? 'text-fg-muted'"
+      :stroke-dasharray="`${dashMin} ${circumference - dashMin}`"
+      :style="{ transformOrigin: `${cx}px ${cy}px` }"
+    />
+  </svg>
+</template>
+
+<style scoped>
+.spinner-rotate {
+  animation: spinner-rotate 2s linear infinite;
+}
+
+@keyframes spinner-rotate {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+</style>

package/src/ui/InlineError.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { CloseLine } from '@mingcute/vue/close'
+
+defineProps<{
+  message: string
+  dismissible?: boolean
+}>()
+
+const emit = defineEmits<{
+  dismiss: []
+}>()
+</script>
+
+<template>
+  <div class="flex items-start gap-1.5">
+    <p class="min-w-0 flex-1 text-[12px] leading-4 text-on-danger">{{ message }}</p>
+    <div
+      v-if="dismissible"
+      class="flex shrink-0 cursor-pointer items-center justify-center rounded p-0.5 text-on-danger-muted transition-colors hover:bg-hover hover:text-on-danger"
+      @click="emit('dismiss')"
+    >
+      <CloseLine :size="12" />
+    </div>
+  </div>
+</template>

package/src/ui/LoadMore.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useIntersectionObserver } from '@vueuse/core'
+
+const props = withDefaults(defineProps<{
+  hasMore: boolean
+  isLoading: boolean
+  loadingLabel?: string
+}>(), {
+  loadingLabel: 'Loading...',
+})
+
+const emit = defineEmits<{
+  load: []
+}>()
+
+const sentinel = ref<HTMLElement | null>(null)
+
+useIntersectionObserver(sentinel, ([entry]) => {
+  if (entry?.isIntersecting && props.hasMore && !props.isLoading) {
+    emit('load')
+  }
+})
+</script>
+
+<template>
+  <div ref="sentinel">
+    <slot v-if="isLoading" name="loading">
+      <div class="py-2 text-center text-[12px] text-fg-subtle">{{ loadingLabel }}</div>
+    </slot>
+  </div>
+</template>

package/src/ui/MarkdownPreview.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { MarkdownLinkHandler, MarkdownRenderer } from '../markdown/types'
+
+const props = defineProps<{
+  content: string
+  basePath?: string
+  renderMarkdown: MarkdownRenderer
+  onLinkClick?: MarkdownLinkHandler
+}>()
+
+const renderedHtml = computed(() =>
+  props.renderMarkdown(props.content, props.basePath ? { basePath: props.basePath } : undefined),
+)
+
+function handleClick(event: MouseEvent) {
+  const target = (event.target as HTMLElement).closest('a')
+  if (!target) return
+  const href = target.getAttribute('href')
+  if (!href) return
+  props.onLinkClick?.({ href, event, basePath: props.basePath })
+}
+</script>
+
+<template>
+  <div
+    class="markdown-body h-full overflow-y-auto bg-surface-editor p-4 text-sm leading-relaxed text-fg-body select-text"
+    v-html="renderedHtml"
+    @click="handleClick"
+  />
+</template>

package/src/ui/Menu.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="min-w-[160px] rounded-lg border border-line-strong bg-surface p-1 shadow-lg">
+    <slot />
+  </div>
+</template>

package/src/ui/MenuDivider.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="my-1 h-px bg-overlay/8" />
+</template>

package/src/ui/MenuItem.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { Component } from 'vue'
+import Tooltip from './Tooltip.vue'
+
+const props = defineProps<{
+  icon?: Component
+  label: string
+  isDanger?: boolean
+  disabled?: boolean
+  disabledReason?: string
+  shortcut?: string
+}>()
+
+const emit = defineEmits<{
+  select: []
+}>()
+
+const displayShortcut = computed(() => props.shortcut ?? '')
+const isDisabled = computed(() => props.disabled || !!props.disabledReason)
+const tooltipContent = computed(() => props.disabledReason?.trim() || undefined)
+
+function handleClick(event: MouseEvent) {
+  if (isDisabled.value) {
+    event.stopPropagation()
+    return
+  }
+  emit('select')
+}
+</script>
+
+<template>
+  <Tooltip :content="tooltipContent" :disabled="!tooltipContent" placement="bottom" :open-delay-ms="80" tag="div">
+    <div
+      class="flex select-none items-center gap-2 rounded-md px-2.5 py-1.5 text-[13px] transition-colors"
+      :class="isDisabled
+        ? 'cursor-not-allowed text-fg-faint'
+        : isDanger
+          ? 'cursor-pointer text-on-danger hover:bg-tint-danger-strong hover:text-on-danger'
+          : 'cursor-pointer text-fg-body hover:bg-active hover:text-fg-emphasis'"
+      @click="handleClick"
+    >
+      <component :is="icon" v-if="icon" :size="15" class="shrink-0" />
+      <span class="flex-1">{{ label }}</span>
+      <span class="w-8 shrink-0 text-right text-[11px] text-fg-faint">{{ displayShortcut }}</span>
+    </div>
+  </Tooltip>
+</template>

package/src/ui/OptionMenu.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="flex min-w-[140px] flex-col gap-0.5 rounded-lg border border-line-strong bg-surface p-1 shadow-lg">
+    <slot />
+  </div>
+</template>

package/src/ui/OptionMenuGroup.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+defineProps<{
+  label: string
+}>()
+</script>
+
+<template>
+  <div class="border-t border-line pt-0.5 first:border-t-0 first:pt-0">
+    <div class="px-2.5 pt-1.5 pb-1 text-[11px] font-medium text-fg-subtle">
+      {{ label }}
+    </div>
+    <div class="flex flex-col gap-0.5">
+      <slot />
+    </div>
+  </div>
+</template>

package/src/ui/OptionMenuItem.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { Component } from 'vue'
+import { CheckLine } from '@mingcute/vue/check'
+
+defineProps<{
+  icon?: Component
+  label: string
+  isSelected?: boolean
+}>()
+
+const emit = defineEmits<{
+  select: []
+}>()
+</script>
+
+<template>
+  <div
+    class="flex cursor-pointer items-center gap-2 rounded-md px-2.5 py-1.5 text-[13px] transition-colors"
+    :class="isSelected
+      ? 'bg-active text-fg-emphasis'
+      : 'text-fg-muted hover:bg-hover hover:text-fg'"
+    @click="emit('select')"
+  >
+    <component :is="icon" v-if="icon" :size="15" class="shrink-0" />
+    <span class="flex-1">{{ label }}</span>
+    <CheckLine v-if="isSelected" :size="14" class="shrink-0 text-fg-body" />
+  </div>
+</template>

package/src/ui/Popover.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useFloating, offset as offsetMiddleware, flip, shift, autoUpdate } from '@floating-ui/vue'
+import type { Placement } from '@floating-ui/vue'
+import { onClickOutside } from '@vueuse/core'
+import type { OverlayStore } from '../overlay/overlayStore'
+import { useOverlay } from '../composables/useOverlay'
+
+const props = withDefaults(defineProps<{
+  isOpen: boolean
+  overlayStore: OverlayStore
+  anchorX: number
+  anchorY: number
+  anchorWidth?: number
+  anchorHeight?: number
+  placement?: Placement
+  offset?: number
+  shiftPadding?: number
+  ignoreEls?: HTMLElement[]
+}>(), {
+  anchorWidth: 0,
+  anchorHeight: 0,
+  placement: 'bottom-start',
+  offset: 6,
+  shiftPadding: 8,
+})
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+const floatingRef = ref<HTMLElement | null>(null)
+
+const virtualRef = computed(() => ({
+  getBoundingClientRect: () => ({
+    x: props.anchorX,
+    y: props.anchorY,
+    width: props.anchorWidth,
+    height: props.anchorHeight,
+    top: props.anchorY,
+    left: props.anchorX,
+    right: props.anchorX + props.anchorWidth,
+    bottom: props.anchorY + props.anchorHeight,
+  }),
+}))
+
+const { floatingStyles, placement: resolvedPlacement } = useFloating(virtualRef, floatingRef, {
+  placement: computed(() => props.placement),
+  middleware: computed(() => [
+    offsetMiddleware(props.offset),
+    flip(),
+    shift({ padding: props.shiftPadding }),
+  ]),
+  whileElementsMounted: autoUpdate,
+  transform: false,
+})
+
+const transformOrigin = computed(() => {
+  const p = resolvedPlacement.value
+  const y = p.startsWith('top') ? 'bottom' : 'top'
+  const x = p.endsWith('start') ? 'left' : p.endsWith('end') ? 'right' : 'center'
+  return `${y} ${x}`
+})
+
+onClickOutside(floatingRef, () => {
+  if (props.isOpen) emit('close')
+}, { ignore: computed(() => props.ignoreEls ?? []) })
+
+useOverlay(props.overlayStore, () => props.isOpen, () => emit('close'))
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition
+      enter-active-class="transition-[opacity,transform] duration-150 ease-out"
+      leave-active-class="transition-[opacity,transform] duration-150 ease-out"
+      enter-from-class="opacity-0 scale-95"
+      leave-to-class="opacity-0 scale-95"
+    >
+      <div
+        v-if="isOpen"
+        ref="floatingRef"
+        class="popover-floating z-50"
+        :style="{ ...floatingStyles, transformOrigin: transformOrigin }"
+      >
+        <slot />
+      </div>
+    </Transition>
+  </Teleport>
+</template>

package/src/ui/ScrollToBottomButton.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { DownLine } from '@mingcute/vue/down'
+
+const props = withDefaults(defineProps<{
+  visible: boolean
+  bottomOffset?: number
+}>(), {
+  bottomOffset: 12,
+})
+
+const emit = defineEmits<{
+  click: []
+}>()
+</script>
+
+<template>
+  <Transition
+    enter-active-class="transition duration-200 ease-out"
+    leave-active-class="transition duration-200 ease-in"
+    enter-from-class="translate-y-2 opacity-0"
+    leave-to-class="translate-y-2 opacity-0"
+  >
+    <div
+      v-if="visible"
+      class="absolute right-5 z-20 cursor-pointer rounded-full border border-fg-ghost bg-surface-raised p-1.5 text-fg-muted shadow-lg transition-colors hover:border-fg-faint hover:bg-fg-ghost hover:text-fg"
+      :style="{ bottom: `${props.bottomOffset}px` }"
+      @click="emit('click')"
+    >
+      <DownLine :size="16" />
+    </div>
+  </Transition>
+</template>