@prsm/mono-components 0.1.0

package/src/components/Collapsible.vue

@@ -0,0 +1,69 @@
+<script setup>
+import { ref, computed, inject } from "vue"
+import { Icon } from "@iconify/vue"
+
+const props = defineProps({
+  open: { type: Boolean, default: undefined },
+  title: { type: String, default: null },
+  bordered: { type: Boolean, default: undefined },
+})
+
+const emit = defineEmits(["update:open"])
+
+const group = inject("collapsible-group", null)
+const id = Symbol()
+const internalOpen = ref(false)
+
+if (group?.register) group.register(id)
+
+const showBorder = computed(() => {
+  if (props.bordered !== undefined) return props.bordered
+  if (group && group.bordered !== undefined) return group.bordered
+  return true
+})
+
+const isOpen = computed(() => {
+  if (group) return group.isOpen(id)
+  if (props.open !== undefined) return props.open
+  return internalOpen.value
+})
+
+function toggle() {
+  if (group) {
+    group.toggle(id)
+  } else if (props.open !== undefined) {
+    emit("update:open", !props.open)
+  } else {
+    internalOpen.value = !internalOpen.value
+  }
+}
+</script>
+
+<template>
+  <div :class="showBorder ? 'border-b border-line-subtle' : ''">
+    <button
+      type="button"
+      class="flex items-center gap-1 w-full px-2 py-1 bg-transparent border border-transparent font-mono text-base text-fg-0 cursor-pointer hover:bg-2 text-left"
+      @click="toggle"
+    >
+      <Icon
+        icon="material-symbols:chevron-right"
+        class="text-base text-fg-2 shrink-0 transition-transform duration-150"
+        :class="isOpen ? 'rotate-90' : ''"
+      />
+      <slot name="trigger">
+        <span>{{ title }}</span>
+      </slot>
+    </button>
+    <div
+      class="collapsible-body grid transition-[grid-template-rows] duration-150 ease-out"
+      :class="isOpen ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'"
+    >
+      <div class="overflow-hidden">
+        <div class="px-2 py-1">
+          <slot />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/CollapsibleGroup.vue

@@ -0,0 +1,38 @@
+<script setup>
+import { reactive, provide, ref, onMounted } from "vue"
+
+const props = defineProps({
+  exclusive: { type: Boolean, default: false },
+  defaultOpen: { type: Boolean, default: false },
+  bordered: { type: Boolean, default: true },
+})
+
+const openIds = reactive(new Set())
+const registeredIds = ref([])
+
+function register(id) {
+  registeredIds.value.push(id)
+  if (props.defaultOpen) openIds.add(id)
+}
+
+function toggle(id) {
+  if (openIds.has(id)) {
+    openIds.delete(id)
+  } else {
+    if (props.exclusive) openIds.clear()
+    openIds.add(id)
+  }
+}
+
+function isOpen(id) {
+  return openIds.has(id)
+}
+
+provide("collapsible-group", { toggle, isOpen, register, bordered: props.bordered })
+</script>
+
+<template>
+  <div :class="bordered ? 'border-t border-line-subtle' : ''">
+    <slot />
+  </div>
+</template>

package/src/components/Combobox.vue

@@ -0,0 +1,179 @@
+<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: [String, Number, Boolean, null], default: null },
+  options: { type: Array, required: true },
+  placeholder: { type: String, default: "select..." },
+  filterPlaceholder: { type: String, default: "search..." },
+  inline: { type: Boolean, default: false },
+  defaultOpen: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(["update:modelValue", "close"])
+
+const open = ref(props.defaultOpen)
+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 selectedLabel = computed(() => {
+  const found = normalizedOptions.value.find(o => o.value === props.modelValue)
+  return found?.label ?? ""
+})
+
+watch(open, (isOpen) => {
+  if (isOpen) {
+    query.value = ""
+    activeIndex.value = -1
+    nextTick(() => inputRef.value?.focus())
+  }
+})
+
+function close() {
+  if (!open.value) return
+  open.value = false
+  emit("close")
+}
+
+function select(value) {
+  emit("update:modelValue", value)
+  close()
+}
+
+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()
+    select(filtered.value[activeIndex.value].value)
+  }
+}
+
+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="inline ? 'relative flex w-full' : 'relative inline-flex'">
+    <button
+      type="button"
+      class="flex items-center gap-1 font-mono text-base text-fg-0 cursor-pointer min-w-0 flex-1"
+      :class="inline
+        ? 'bg-transparent border-none p-0 m-0'
+        : ['px-2 py-1 bg-0 border rounded-sm hover:bg-1', open ? 'border-accent' : 'border-line']"
+      @click.stop="open ? close() : (open = true)"
+    >
+      <span
+        class="flex-1 text-left whitespace-nowrap overflow-hidden text-ellipsis"
+        :class="modelValue == null ? 'text-fg-3' : ''"
+      >
+        {{ selectedLabel || placeholder }}
+      </span>
+      <Icon
+        v-if="!inline"
+        icon="material-symbols:expand-more"
+        class="text-xl text-fg-2 shrink-0 transition-transform duration-150"
+        :class="open ? 'rotate-180' : ''"
+      />
+    </button>
+    <Teleport to="body">
+      <Transition name="combobox">
+        <div
+          v-if="open"
+          ref="menu"
+          class="combobox-menu 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="block w-full px-2 py-1 bg-transparent border-none font-mono text-base text-left cursor-pointer whitespace-nowrap overflow-hidden text-ellipsis hover:bg-3"
+              :class="[
+                opt.value === modelValue ? 'text-accent' : (i === activeIndex ? 'text-fg-0' : 'text-fg-1 hover:text-fg-0'),
+                i === activeIndex ? 'bg-3' : ''
+              ]"
+              :data-active="i === activeIndex ? '' : undefined"
+              @click="select(opt.value)"
+              @mouseenter="activeIndex = i"
+            >
+              {{ 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>
+      </Transition>
+    </Teleport>
+  </div>
+</template>

package/src/components/ContextMenu.vue

@@ -0,0 +1,65 @@
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from "vue"
+import ContextMenuPanel from "./ContextMenuPanel.vue"
+
+const triggerRef = ref(null)
+const open = ref(false)
+const cursorX = ref(0)
+const cursorY = ref(0)
+const virtualRef = ref({ getBoundingClientRect: () => new DOMRect() })
+
+defineProps({
+  items: { type: Array, required: true }
+})
+
+function handleContextMenu(e) {
+  e.preventDefault()
+  cursorX.value = e.clientX
+  cursorY.value = e.clientY
+  virtualRef.value = {
+    getBoundingClientRect: () => new DOMRect(e.clientX, e.clientY, 0, 0)
+  }
+  open.value = true
+}
+
+function close() {
+  open.value = false
+}
+
+function handleClickOutside(e) {
+  if (!open.value) return
+  close()
+}
+
+function handleKeydown(e) {
+  if (e.key === "Escape" && open.value) {
+    e.stopPropagation()
+    close()
+  }
+}
+
+onMounted(() => {
+  document.addEventListener("click", handleClickOutside, true)
+  document.addEventListener("keydown", handleKeydown)
+})
+
+onUnmounted(() => {
+  document.removeEventListener("click", handleClickOutside, true)
+  document.removeEventListener("keydown", handleKeydown)
+})
+</script>
+
+<template>
+  <div ref="triggerRef" class="contents" @contextmenu="handleContextMenu">
+    <slot />
+  </div>
+  <Teleport to="body">
+    <ContextMenuPanel
+      v-if="open"
+      :items="items"
+      :anchor="virtualRef"
+      placement="bottom-start"
+      @close="close"
+    />
+  </Teleport>
+</template>

package/src/components/ContextMenuPanel.vue

@@ -0,0 +1,115 @@
+<script setup>
+import { ref, computed, onBeforeUnmount } from "vue"
+import { useFloating, flip, shift, offset } from "@floating-ui/vue"
+import { Icon } from "@iconify/vue"
+import ScrollBox from "./ScrollBox.vue"
+
+const props = defineProps({
+  items: { type: Array, required: true },
+  anchor: { type: Object, required: true },
+  placement: { type: String, default: "bottom-start" }
+})
+
+const emit = defineEmits(["close"])
+
+const menuRef = ref(null)
+const activeChild = ref(null)
+const childAnchor = ref(null)
+let hoverTimer = null
+
+const anchorRef = computed(() => props.anchor)
+const menuEl = computed(() => menuRef.value?.$el ?? menuRef.value)
+
+const { floatingStyles } = useFloating(anchorRef, menuEl, {
+  placement: computed(() => props.placement),
+  strategy: "fixed",
+  middleware: [
+    offset(4),
+    flip({ fallbackPlacements: ["left-start", "right-start", "bottom-start", "top-start"] }),
+    shift({ padding: 8 })
+  ]
+})
+
+function handleAction(item) {
+  if (item.disabled || item.children) return
+  if (item.action) item.action()
+  emit("close")
+}
+
+function handleMouseEnter(item, e) {
+  clearTimeout(hoverTimer)
+  if (item.children) {
+    const rect = e.currentTarget.getBoundingClientRect()
+    hoverTimer = setTimeout(() => {
+      activeChild.value = item
+      childAnchor.value = {
+        getBoundingClientRect: () => rect
+      }
+    }, 150)
+  } else {
+    activeChild.value = null
+    childAnchor.value = null
+  }
+}
+
+function handleMouseLeaveMenu() {
+  clearTimeout(hoverTimer)
+}
+
+onBeforeUnmount(() => {
+  clearTimeout(hoverTimer)
+})
+</script>
+
+<template>
+  <ScrollBox
+    ref="menuRef"
+    :style="floatingStyles"
+    class="fixed z-[1100] bg-1 border border-line rounded-sm py-0.5 min-w-[160px] max-h-[300px]"
+    @mouseleave="handleMouseLeaveMenu"
+  >
+    <template v-for="(item, i) in items" :key="i">
+      <div
+        v-if="item.type === 'separator'"
+        class="my-0.5 border-b border-line-subtle"
+      />
+      <div
+        v-else-if="item.type === 'header'"
+        class="px-2 py-1 text-xs text-fg-3 uppercase tracking-wide"
+      >
+        {{ item.label }}
+      </div>
+      <button
+        v-else
+        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"
+        :class="[
+          item.disabled ? 'text-fg-3 cursor-default' : 'text-fg-1 hover:bg-3 hover:text-fg-0',
+          activeChild === item ? 'bg-3 text-fg-0' : ''
+        ]"
+        @click="handleAction(item)"
+        @mouseenter="handleMouseEnter(item, $event)"
+      >
+        <span class="w-[16px] shrink-0 flex items-center justify-center text-fg-2">
+          <Icon v-if="item.checked" icon="material-symbols:check" class="text-base text-accent" />
+          <Icon v-else-if="item.icon" :icon="item.icon" class="text-base" />
+        </span>
+        <span class="flex-1">{{ item.label }}</span>
+        <span v-if="item.kbd" class="text-xs text-fg-3 ml-4">{{ item.kbd }}</span>
+        <Icon
+          v-if="item.children"
+          icon="material-symbols:chevron-right"
+          class="text-base text-fg-3 shrink-0"
+        />
+      </button>
+    </template>
+  </ScrollBox>
+
+  <ContextMenuPanel
+    v-if="activeChild?.children && childAnchor"
+    :items="activeChild.children"
+    :anchor="childAnchor"
+    placement="right-start"
+    @close="emit('close')"
+  />
+</template>