@prsm/mono-components 0.1.0

package/src/components/LabeledTextarea.vue

@@ -0,0 +1,64 @@
+<script setup>
+import { inject, ref } from "vue"
+import { Icon } from "@iconify/vue"
+import Textarea from "./Textarea.vue"
+
+defineProps({
+  label: { type: String, required: true },
+  icon: { type: String, default: null },
+  modelValue: { type: String, default: "" },
+  placeholder: { type: String, default: "" },
+  autoGrow: { type: Boolean, default: false },
+  rows: { type: Number, default: 3 }
+})
+
+const emit = defineEmits(["update:modelValue"])
+const grouped = inject("labeled-textarea-grouped", false)
+const wrapper = ref(null)
+
+function focusTextarea() {
+  wrapper.value?.querySelector("textarea")?.focus()
+}
+</script>
+
+<template>
+  <div
+    ref="wrapper"
+    class="labeled-textarea"
+    :class="[
+      grouped
+        ? 'grouped'
+        : 'border border-line rounded-sm overflow-hidden focus-within:border-accent'
+    ]"
+  >
+    <div class="px-2 py-1.5 bg-1 border-b border-line flex items-center gap-1.5" @mousedown.prevent="focusTextarea">
+      <Icon v-if="icon" :icon="icon" class="text-sm text-fg-3" />
+      <span class="text-xs text-fg-3 uppercase tracking-wide cursor-default">{{ label }}</span>
+    </div>
+    <Textarea
+      :model-value="modelValue"
+      :placeholder="placeholder"
+      :auto-grow="autoGrow"
+      :rows="rows"
+      class="!border-0 !rounded-none block"
+      @update:model-value="emit('update:modelValue', $event)"
+    />
+  </div>
+</template>
+
+<style scoped>
+.labeled-textarea.grouped {
+  position: relative;
+  border-top: 1px solid var(--border);
+}
+
+.labeled-textarea.grouped:first-child {
+  border-top: none;
+}
+
+.labeled-textarea.grouped:focus-within {
+  z-index: 1;
+  outline: 1px solid var(--accent);
+  outline-offset: -1px;
+}
+</style>

package/src/components/LabeledTextareaGroup.vue

@@ -0,0 +1,14 @@
+<script setup>
+import { provide } from "vue"
+
+provide("labeled-textarea-grouped", true)
+</script>
+
+<template>
+  <div class="border border-line rounded-sm overflow-hidden">
+    <slot />
+    <div v-if="$slots.footer" class="px-3 py-1.5 bg-1 border-t border-line">
+      <slot name="footer" />
+    </div>
+  </div>
+</template>

package/src/components/Mention.vue

@@ -0,0 +1,79 @@
+<script setup>
+import { ref, computed, watch, nextTick } from "vue"
+import { useFloating, flip, shift, offset, size } from "@floating-ui/vue"
+import ScrollBox from "./ScrollBox.vue"
+
+const props = defineProps({
+  open: { type: Boolean, default: false },
+  items: { type: Array, default: () => [] },
+  activeIndex: { type: Number, default: 0 },
+  loading: { type: Boolean, default: false },
+  anchor: { type: Object, default: null }
+})
+
+const emit = defineEmits(["select", "hover"])
+
+const panel = ref(null)
+const maxHeight = ref(null)
+
+const anchorRef = computed(() => props.anchor)
+
+const { floatingStyles } = useFloating(anchorRef, panel, {
+  placement: "bottom-start",
+  strategy: "fixed",
+  middleware: [
+    offset(4),
+    flip(),
+    shift({ crossAxis: true, padding: 8 }),
+    size({
+      padding: 8,
+      apply({ availableHeight }) {
+        maxHeight.value = Math.min(availableHeight, 200)
+      }
+    })
+  ],
+  open: computed(() => props.open)
+})
+
+watch(() => props.activeIndex, () => {
+  nextTick(() => {
+    const el = panel.value?.querySelector("[data-active]")
+    if (el) el.scrollIntoView({ block: "nearest" })
+  })
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="open && (items.length > 0 || loading)"
+      ref="panel"
+      class="bg-1 border border-line rounded-sm z-[1000] overflow-hidden flex flex-col min-w-[160px]"
+      :style="{ ...floatingStyles, maxHeight: maxHeight + 'px' }"
+    >
+      <ScrollBox class="flex-1 py-0.5">
+        <button
+          v-for="(item, i) in items"
+          :key="item.value"
+          type="button"
+          class="flex items-center w-full py-1 bg-transparent font-mono text-base text-left cursor-pointer whitespace-nowrap overflow-hidden text-ellipsis"
+          :class="i === activeIndex
+            ? 'bg-3 text-fg-0 mention-item-active'
+            : 'text-fg-2 hover:bg-2 hover:text-fg-0'"
+          :data-active="i === activeIndex ? '' : undefined"
+          @mousedown.prevent="emit('select', item)"
+          @mouseenter="emit('hover', i)"
+        >
+          <span
+            class="w-0.5 self-stretch shrink-0 rounded-full"
+            :class="i === activeIndex ? 'bg-accent' : 'bg-transparent'"
+          />
+          <span class="px-2 flex-1 overflow-hidden text-ellipsis">{{ item.label }}</span>
+        </button>
+      </ScrollBox>
+      <div v-if="loading && items.length === 0" class="px-2 py-1.5 text-base text-fg-3">
+        loading...
+      </div>
+    </div>
+  </Teleport>
+</template>

package/src/components/Modal.vue

@@ -0,0 +1,109 @@
+<script setup>
+import { ref, onUnmounted } from "vue"
+import ScrollBox from "./ScrollBox.vue"
+
+const props = defineProps({
+  open: { type: Boolean, default: false },
+  closeOnBackdrop: { type: Boolean, default: true },
+  closeOnEscape: { type: Boolean, default: true }
+})
+
+const emit = defineEmits(["update:open"])
+
+const panelRef = ref(null)
+let previouslyFocused = null
+
+const FOCUSABLE = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+
+function close() {
+  emit("update:open", false)
+}
+
+function handleBackdropClick() {
+  if (props.closeOnBackdrop) close()
+}
+
+function handleKeydown(e) {
+  if (e.key === "Escape" && props.closeOnEscape) {
+    close()
+    return
+  }
+  const panel = panelRef.value
+  if (e.key === "Tab" && panel) {
+    const focusable = Array.from(panel.querySelectorAll(FOCUSABLE))
+    if (!focusable.length) return
+    const first = focusable[0]
+    const last = focusable[focusable.length - 1]
+    if (e.shiftKey && document.activeElement === first) {
+      e.preventDefault()
+      last.focus()
+    } else if (!e.shiftKey && document.activeElement === last) {
+      e.preventDefault()
+      first.focus()
+    }
+  }
+}
+
+function activate() {
+  previouslyFocused = document.activeElement
+  document.body.style.overflow = "hidden"
+  document.addEventListener("keydown", handleKeydown)
+
+  const panel = panelRef.value
+  if (!panel) return
+  const target = panel.querySelector("[autofocus]")
+    || panel.querySelector(FOCUSABLE)
+  if (target) target.focus({ preventScroll: true })
+  panel.scrollTop = 0
+}
+
+function deactivate() {
+  document.removeEventListener("keydown", handleKeydown)
+}
+
+function restoreFocus() {
+  document.body.style.overflow = ""
+  if (previouslyFocused?.focus) previouslyFocused.focus()
+  previouslyFocused = null
+}
+
+onUnmounted(() => {
+  document.body.style.overflow = ""
+  document.removeEventListener("keydown", handleKeydown)
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition
+      name="modal"
+      @after-enter="activate"
+      @before-leave="deactivate"
+      @after-leave="restoreFocus"
+    >
+      <div
+        v-if="open"
+        class="fixed inset-0 z-[1000] flex items-center justify-center"
+      >
+        <div
+          class="modal-backdrop absolute inset-0 bg-black/40"
+          @click="handleBackdropClick"
+        />
+        <div
+          ref="panelRef"
+          class="modal-panel relative bg-1 border rounded-sm max-w-[90vw] max-h-[85vh] flex flex-col"
+        >
+          <div v-if="$slots.header" class="shrink-0 border-b border-line-subtle">
+            <slot name="header" />
+          </div>
+          <ScrollBox class="flex-1 min-h-0">
+            <slot />
+          </ScrollBox>
+          <div v-if="$slots.footer" class="shrink-0 border-t border-line-subtle">
+            <slot name="footer" />
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>

package/src/components/MultiCombobox.vue

@@ -0,0 +1,209 @@
+<script setup>
+import { ref, computed, watch, nextTick } from "vue"
+import { useFloating, flip, shift, offset, size } from "@floating-ui/vue"
+import { Icon } from "@iconify/vue"
+import { useClickOutside } from "../composables/useClickOutside.js"
+import ScrollBox from "./ScrollBox.vue"
+
+const props = defineProps({
+  modelValue: { type: Array, default: () => [] },
+  options: { type: Array, required: true },
+  placeholder: { type: String, default: "select..." },
+  filterPlaceholder: { type: String, default: "search..." }
+})
+
+const emit = defineEmits(["update:modelValue"])
+
+const open = ref(false)
+const query = ref("")
+const activeIndex = ref(-1)
+const trigger = ref(null)
+const inputRef = ref(null)
+const menu = ref(null)
+const maxWidth = ref(null)
+const maxHeight = ref(null)
+
+const { floatingStyles } = useFloating(trigger, menu, {
+  placement: "bottom-start",
+  strategy: "fixed",
+  middleware: [
+    offset(4),
+    flip(),
+    shift({ crossAxis: true, padding: 0 }),
+    size({
+      padding: 8,
+      apply({ availableWidth, availableHeight }) {
+        maxWidth.value = availableWidth
+        maxHeight.value = Math.min(availableHeight, 200)
+      }
+    })
+  ],
+  open
+})
+
+const normalizedOptions = computed(() => {
+  return props.options.map(opt => {
+    if (typeof opt === "object" && opt !== null) {
+      return { value: opt.value, label: opt.label ?? String(opt.value) }
+    }
+    return { value: opt, label: String(opt) }
+  })
+})
+
+const filtered = computed(() => {
+  if (!query.value) return normalizedOptions.value
+  const q = query.value.toLowerCase()
+  return normalizedOptions.value.filter(o => o.label.toLowerCase().includes(q))
+})
+
+const selectedSet = computed(() => new Set(props.modelValue))
+
+const selectedLabels = computed(() => {
+  return props.modelValue.map(v => {
+    const found = normalizedOptions.value.find(o => o.value === v)
+    return found?.label ?? String(v)
+  })
+})
+
+watch(open, (isOpen) => {
+  if (isOpen) {
+    query.value = ""
+    activeIndex.value = -1
+    nextTick(() => inputRef.value?.focus())
+  }
+})
+
+function close() {
+  if (!open.value) return
+  open.value = false
+}
+
+function toggle(value) {
+  const next = selectedSet.value.has(value)
+    ? props.modelValue.filter(v => v !== value)
+    : [...props.modelValue, value]
+  emit("update:modelValue", next)
+}
+
+function remove(value) {
+  emit("update:modelValue", props.modelValue.filter(v => v !== value))
+}
+
+function clearAll() {
+  emit("update:modelValue", [])
+}
+
+function handleKeydown(e) {
+  if (e.key === "ArrowDown") {
+    e.preventDefault()
+    activeIndex.value = Math.min(activeIndex.value + 1, filtered.value.length - 1)
+    scrollToActive()
+  } else if (e.key === "ArrowUp") {
+    e.preventDefault()
+    activeIndex.value = Math.max(activeIndex.value - 1, 0)
+    scrollToActive()
+  } else if (e.key === "Enter" && activeIndex.value >= 0) {
+    e.preventDefault()
+    toggle(filtered.value[activeIndex.value].value)
+  } else if (e.key === "Backspace" && !query.value && props.modelValue.length) {
+    remove(props.modelValue[props.modelValue.length - 1])
+  }
+}
+
+function scrollToActive() {
+  nextTick(() => {
+    const el = menu.value?.querySelector("[data-active]")
+    if (el) el.scrollIntoView({ block: "nearest" })
+  })
+}
+
+watch(query, () => {
+  activeIndex.value = -1
+})
+
+useClickOutside([trigger, menu], close)
+</script>
+
+<template>
+  <div ref="trigger" class="relative inline-flex">
+    <div
+      class="flex items-center gap-1 p-1 bg-0 border rounded-sm font-mono text-base cursor-pointer min-w-0 w-full"
+      :class="open ? 'border-accent' : 'border-line'"
+      @click="open = true"
+    >
+      <div class="flex-1 flex items-center flex-wrap gap-1 min-w-0 mr-2">
+        <span
+          v-for="(label, i) in selectedLabels"
+          :key="modelValue[i]"
+          class="inline-flex items-center gap-0.5 px-1 py-px bg-3 text-fg-0 text-xs rounded-sm whitespace-nowrap"
+        >
+          {{ label }}
+          <Icon
+            icon="material-symbols:close"
+            class="text-xs text-fg-2 hover:text-fg-0 cursor-pointer"
+            @click.stop="remove(modelValue[i])"
+          />
+        </span>
+        <span v-if="!modelValue.length" class="inline-flex items-center px-1 py-px text-fg-3 text-xs">{{ placeholder }}</span>
+      </div>
+      <Icon
+        v-if="modelValue.length"
+        icon="material-symbols:close"
+        class="text-lg text-fg-2 hover:text-fg-0 shrink-0 cursor-pointer"
+        @click.stop="clearAll"
+      />
+      <Icon
+        v-else
+        icon="material-symbols:expand-more"
+        class="text-xl text-fg-2 shrink-0 transition-transform duration-150"
+        :class="open ? 'rotate-180' : ''"
+      />
+    </div>
+    <Teleport to="body">
+      <div
+        v-if="open"
+        ref="menu"
+        class="bg-1 border border-line rounded-sm z-[1000] overflow-hidden flex flex-col w-max"
+        :style="{ ...floatingStyles, maxWidth: maxWidth + 'px', maxHeight: maxHeight + 'px' }"
+      >
+        <div class="px-1.5 py-1.5 border-b border-line-subtle">
+          <input
+            ref="inputRef"
+            v-model="query"
+            type="text"
+            class="w-full px-1.5 py-0.5 text-base bg-0 border border-line rounded-sm font-mono text-fg-0 outline-none focus:border-accent"
+            :placeholder="filterPlaceholder"
+            @keydown="handleKeydown"
+          />
+        </div>
+        <ScrollBox class="flex-1">
+          <button
+            v-for="(opt, i) in filtered"
+            :key="opt.value"
+            type="button"
+            class="flex items-center gap-1.5 w-full px-2 py-1 bg-transparent border-none font-mono text-base text-left cursor-pointer whitespace-nowrap hover:bg-3"
+            :class="[
+              i === activeIndex ? 'bg-3 text-fg-0' : 'text-fg-1 hover:text-fg-0'
+            ]"
+            :data-active="i === activeIndex ? '' : undefined"
+            @click="toggle(opt.value)"
+            @mouseenter="activeIndex = i"
+          >
+            <span
+              class="w-[14px] h-[14px] rounded-sm border flex items-center justify-center shrink-0"
+              :class="selectedSet.has(opt.value) ? 'bg-accent border-accent' : 'bg-0 border-line'"
+            >
+              <svg v-if="selectedSet.has(opt.value)" width="10" height="10" viewBox="0 0 10 10" fill="none">
+                <path d="M2 5L4 7L8 3" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+              </svg>
+            </span>
+            {{ opt.label }}
+          </button>
+          <div v-if="filtered.length === 0" class="px-2.5 py-2 text-base text-fg-3">
+            no matches
+          </div>
+        </ScrollBox>
+      </div>
+    </Teleport>
+  </div>
+</template>

package/src/components/NavTree.vue

@@ -0,0 +1,98 @@
+<script setup>
+import { reactive, computed } from "vue"
+import { Icon } from "@iconify/vue"
+
+const props = defineProps({
+  items: { type: Array, required: true },
+  modelValue: { type: [String, Number, null], default: null },
+  defaultExpanded: { type: [Array, Boolean], default: () => [] }
+})
+
+const emit = defineEmits(["update:modelValue", "select"])
+
+const expandedKeys = reactive(new Set(
+  props.defaultExpanded === true ? collectGroupKeys(props.items) : props.defaultExpanded
+))
+
+function collectGroupKeys(nodes) {
+  const keys = []
+  for (const n of nodes) {
+    if (n.children?.length) {
+      keys.push(n.key)
+      keys.push(...collectGroupKeys(n.children))
+    }
+  }
+  return keys
+}
+
+const flatVisible = computed(() => {
+  const result = []
+
+  function walk(nodes, depth) {
+    for (const node of nodes) {
+      const isGroup = node.children?.length > 0
+      const expanded = isGroup && expandedKeys.has(node.key)
+      result.push({ node, depth, isGroup, expanded })
+      if (expanded) walk(node.children, depth + 1)
+    }
+  }
+
+  walk(props.items, 0)
+  return result
+})
+
+function toggle(key) {
+  if (expandedKeys.has(key)) expandedKeys.delete(key)
+  else expandedKeys.add(key)
+}
+
+function handleClick(node, isGroup) {
+  if (isGroup) {
+    toggle(node.key)
+    return
+  }
+  emit("update:modelValue", node.key)
+  emit("select", node.key)
+}
+</script>
+
+<template>
+  <div>
+    <div
+      v-for="{ node, depth, isGroup, expanded } in flatVisible"
+      :key="node.key"
+      class="flex items-center gap-1 py-1 pr-2 cursor-pointer font-mono text-base select-none"
+      :class="[
+        isGroup
+          ? 'text-fg-2 hover:text-fg-1'
+          : node.key === modelValue
+            ? 'text-fg-0 bg-3'
+            : 'text-fg-1 hover:bg-2 hover:text-fg-0'
+      ]"
+      :style="{ paddingLeft: (depth * 20 + 8) + 'px' }"
+      @click="handleClick(node, isGroup)"
+    >
+      <span v-if="isGroup" class="w-[16px] shrink-0 flex items-center justify-center">
+        <Icon
+          icon="material-symbols:chevron-right"
+          class="text-sm transition-transform duration-150"
+          :class="expanded ? 'rotate-90' : ''"
+        />
+      </span>
+      <Icon
+        v-if="node.icon"
+        :icon="node.icon"
+        class="text-base shrink-0"
+        :class="node.key === modelValue ? 'text-accent' : 'text-fg-2'"
+      />
+      <span class="truncate flex-1">{{ node.label }}</span>
+      <slot :name="`trailing-${node.key}`" :node="node" />
+      <span v-if="node.badge != null" class="text-xs text-fg-3 bg-4 px-1 py-px rounded-sm shrink-0">
+        {{ node.badge }}
+      </span>
+    </div>
+    <div v-if="flatVisible.length === 0" class="px-3 py-2 text-base text-fg-3">
+      no items
+    </div>
+  </div>
+</template>

package/src/components/NumberInput.vue

@@ -0,0 +1,128 @@
+<script setup>
+import { ref, computed, watch } from "vue"
+import { Icon } from "@iconify/vue"
+import { usePointerDrag } from "../composables/usePointerDrag.js"
+
+const props = defineProps({
+  modelValue: { type: Number, default: 0 },
+  min: { type: Number, default: -Infinity },
+  max: { type: Number, default: Infinity },
+  step: { type: Number, default: 1 },
+  precision: { type: Number, default: null },
+  inline: { type: Boolean, default: false },
+  sensitivity: { type: Number, default: 0.15 }
+})
+
+const emit = defineEmits(["update:modelValue"])
+
+const displayValue = ref(String(props.modelValue))
+const dragging = ref(false)
+
+watch(() => props.modelValue, v => {
+  if (!dragging.value) {
+    displayValue.value = formatValue(v)
+  }
+})
+
+const effectivePrecision = computed(() => {
+  if (props.precision != null) return props.precision
+  const s = String(props.step)
+  const dot = s.indexOf(".")
+  return dot === -1 ? 0 : s.length - dot - 1
+})
+
+function formatValue(v) {
+  const clamped = clamp(v)
+  return effectivePrecision.value > 0
+    ? clamped.toFixed(effectivePrecision.value)
+    : String(Math.round(clamped))
+}
+
+function clamp(v) {
+  return Math.min(props.max, Math.max(props.min, v))
+}
+
+function nudge(delta) {
+  const current = parseFloat(displayValue.value)
+  const base = isNaN(current) ? props.modelValue : current
+  const next = clamp(base + delta)
+  emit("update:modelValue", Number(formatValue(next)))
+  displayValue.value = formatValue(next)
+}
+
+function getStep(e) {
+  if (e.shiftKey) return props.step * 10
+  if (e.metaKey || e.ctrlKey) return props.step * 0.1
+  return props.step
+}
+
+function handleKeydown(e) {
+  if (e.key === "ArrowUp") {
+    e.preventDefault()
+    nudge(getStep(e))
+  } else if (e.key === "ArrowDown") {
+    e.preventDefault()
+    nudge(-getStep(e))
+  } else if (e.key === "Enter") {
+    handleBlur()
+  }
+}
+
+function handleBlur() {
+  const parsed = parseFloat(displayValue.value)
+  if (isNaN(parsed)) {
+    displayValue.value = formatValue(props.modelValue)
+    return
+  }
+  const clamped = clamp(parsed)
+  const formatted = formatValue(clamped)
+  displayValue.value = formatted
+  emit("update:modelValue", Number(formatted))
+}
+
+function handleInput(e) {
+  displayValue.value = e.target.value
+}
+
+const dragAccum = ref(0)
+
+const { start: startDrag } = usePointerDrag({
+  onStart() {
+    dragging.value = true
+    const current = parseFloat(displayValue.value)
+    dragAccum.value = isNaN(current) ? props.modelValue : current
+  },
+  onDrag(dx) {
+    dragAccum.value = clamp(dragAccum.value + dx * props.step * props.sensitivity)
+    const rounded = Number(formatValue(dragAccum.value))
+    if (rounded !== Number(displayValue.value)) {
+      displayValue.value = formatValue(dragAccum.value)
+      emit("update:modelValue", rounded)
+    }
+  },
+  onEnd() {
+    dragging.value = false
+  }
+})
+</script>
+
+<template>
+  <div :class="inline ? 'flex items-center relative w-full' : 'inline-flex items-center relative'">
+    <input
+      :value="displayValue"
+      class="font-mono text-fg-0 focus:outline-none w-full"
+      :class="inline
+        ? 'bg-transparent border-none p-0 m-0 pr-5 text-base'
+        : 'px-2 py-1 pr-7 text-base bg-0 border border-line rounded-sm focus:border-accent'"
+      @input="handleInput"
+      @blur="handleBlur"
+      @keydown="handleKeydown"
+    />
+    <div
+      class="absolute right-0 top-0 bottom-0 flex items-center justify-center w-6 cursor-ew-resize text-fg-3 hover:text-accent"
+      @mousedown.prevent="startDrag"
+    >
+      <Icon icon="material-symbols:swap-horiz" class="text-base" />
+    </div>
+  </div>
+</template>