@prsm/mono-components 0.1.0

package/src/components/PopConfirm.vue

@@ -0,0 +1,94 @@
+<script setup>
+import { ref, watch, nextTick } from "vue"
+import { useFloating, flip, shift, offset } from "@floating-ui/vue"
+import { Icon } from "@iconify/vue"
+import { useClickOutside } from "../composables/useClickOutside.js"
+
+const props = defineProps({
+  message: { type: String, default: "Are you sure?" },
+  confirmLabel: { type: String, default: "Ok" },
+  cancelLabel: { type: String, default: "Cancel" },
+  icon: { type: String, default: "material-symbols:warning-outline" },
+  placement: { type: String, default: "bottom-start" }
+})
+
+const emit = defineEmits(["confirm", "cancel"])
+
+const open = ref(false)
+const trigger = ref(null)
+const panel = ref(null)
+
+const { floatingStyles } = useFloating(trigger, panel, {
+  placement: props.placement,
+  strategy: "fixed",
+  middleware: [
+    offset(4),
+    flip(),
+    shift({ crossAxis: true, padding: 0 })
+  ],
+  open
+})
+
+useClickOutside([trigger, panel], () => {
+  if (open.value) cancel()
+})
+
+watch(open, async (val) => {
+  if (!val) return
+  await nextTick()
+  const focusable = panel.value?.querySelector("button, [tabindex], input, select, textarea, a[href]")
+  focusable?.focus()
+})
+
+function toggle() {
+  open.value = !open.value
+}
+
+function confirm() {
+  open.value = false
+  emit("confirm")
+}
+
+function cancel() {
+  open.value = false
+  emit("cancel")
+}
+</script>
+
+<template>
+  <div class="inline-flex">
+    <div ref="trigger" @click="toggle">
+      <slot />
+    </div>
+    <Teleport to="body">
+      <div
+        v-if="open"
+        ref="panel"
+        class="bg-1 border border-line rounded-sm p-3 z-[1000] w-max"
+        :style="floatingStyles"
+        @keydown.escape="cancel"
+      >
+        <div class="flex items-center gap-1.5 mb-2">
+          <Icon :icon="icon" class="text-xl text-warning shrink-0" />
+          <span class="text-base text-fg-0">{{ message }}</span>
+        </div>
+        <div class="flex items-center justify-end gap-1.5">
+          <button
+            type="button"
+            class="inline-flex items-center justify-center px-2 py-1 text-base font-mono rounded-sm cursor-pointer bg-2 border border-line text-fg-0 hover:bg-3 active:bg-4"
+            @click="cancel"
+          >
+            <span class="inline-flex items-center min-h-[1.5em]">{{ cancelLabel }}</span>
+          </button>
+          <button
+            type="button"
+            class="inline-flex items-center justify-center px-2 py-1 text-base font-mono rounded-sm cursor-pointer bg-accent border border-accent text-white hover:bg-accent-hover"
+            @click="confirm"
+          >
+            <span class="inline-flex items-center min-h-[1.5em]">{{ confirmLabel }}</span>
+          </button>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>

package/src/components/Popover.vue

@@ -0,0 +1,53 @@
+<script setup>
+import { ref } from "vue"
+import { useFloating, flip, shift, offset } from "@floating-ui/vue"
+import { useClickOutside } from "../composables/useClickOutside.js"
+
+const props = defineProps({
+  placement: { type: String, default: "bottom-start" },
+  offsetVal: { type: Number, default: 4 }
+})
+
+const open = ref(false)
+const trigger = ref(null)
+const content = ref(null)
+
+const { floatingStyles } = useFloating(trigger, content, {
+  placement: props.placement,
+  strategy: "fixed",
+  middleware: [
+    offset(props.offsetVal),
+    flip(),
+    shift({ crossAxis: true, padding: 8 })
+  ],
+  open
+})
+
+useClickOutside([trigger, content], () => {
+  open.value = false
+})
+
+function toggle() {
+  open.value = !open.value
+}
+
+defineExpose({ open, toggle })
+</script>
+
+<template>
+  <div class="inline-flex">
+    <div ref="trigger" @click="toggle">
+      <slot name="trigger" />
+    </div>
+    <Teleport to="body">
+      <div
+        v-if="open"
+        ref="content"
+        class="z-[1000]"
+        :style="floatingStyles"
+      >
+        <slot />
+      </div>
+    </Teleport>
+  </div>
+</template>

package/src/components/RadioCards.vue

@@ -0,0 +1,37 @@
+<script setup>
+defineProps({
+  modelValue: { type: [String, Number, null], default: null },
+  options: { type: Array, required: true }
+})
+
+const emit = defineEmits(["update:modelValue"])
+</script>
+
+<template>
+  <div class="flex flex-col gap-1">
+    <button
+      v-for="opt in options"
+      :key="opt.value"
+      type="button"
+      class="flex items-start gap-2 px-2 py-1.5 rounded-sm border cursor-pointer text-left font-mono"
+      :class="modelValue === opt.value
+        ? 'border-accent bg-3'
+        : 'border-line bg-0 hover:bg-2'"
+      @click="emit('update:modelValue', opt.value)"
+    >
+      <span
+        class="mt-0.5 w-[14px] h-[14px] rounded-full border shrink-0 flex items-center justify-center"
+        :class="modelValue === opt.value ? 'border-accent' : 'border-line'"
+      >
+        <span
+          v-if="modelValue === opt.value"
+          class="w-[8px] h-[8px] rounded-full bg-accent"
+        />
+      </span>
+      <div class="flex flex-col gap-px">
+        <span class="text-base text-fg-0">{{ opt.label }}</span>
+        <span v-if="opt.description" class="text-xs text-fg-2">{{ opt.description }}</span>
+      </div>
+    </button>
+  </div>
+</template>

package/src/components/RadioGroup.vue

@@ -0,0 +1,57 @@
+<script setup>
+import { Icon } from "@iconify/vue"
+
+const props = defineProps({
+  modelValue: { type: [String, Number, Boolean], default: null },
+  options: { type: Array, required: true },
+  direction: {
+    type: String,
+    default: "vertical",
+    validator: v => ["horizontal", "vertical"].includes(v)
+  }
+})
+
+const emit = defineEmits(["update:modelValue"])
+
+function select(value) {
+  emit("update:modelValue", value)
+}
+
+function isSelected(value) {
+  return props.modelValue === value
+}
+</script>
+
+<template>
+  <div
+    class="inline-flex"
+    :class="direction === 'horizontal' ? 'flex-row gap-1' : 'flex-col gap-0.5'"
+  >
+    <label
+      v-for="opt in options"
+      :key="opt.value"
+      class="inline-flex items-center gap-1.5 px-1.5 py-1 rounded-sm cursor-pointer hover:bg-2"
+      @click.prevent="select(opt.value)"
+    >
+      <template v-if="opt.icon">
+        <Icon
+          :icon="opt.icon"
+          class="text-base shrink-0"
+          :class="isSelected(opt.value) ? 'text-accent' : 'text-fg-2'"
+        />
+      </template>
+      <template v-else>
+        <span
+          class="w-[14px] h-[14px] rounded-full border flex items-center justify-center shrink-0"
+          :class="isSelected(opt.value) ? 'border-accent' : 'border-line'"
+        >
+          <span
+            v-if="isSelected(opt.value)"
+            class="w-[8px] h-[8px] rounded-full bg-accent"
+          />
+        </span>
+      </template>
+      <span class="text-base font-mono text-fg-0 select-none">{{ opt.label }}</span>
+    </label>
+  </div>
+</template>

package/src/components/RangeSlider.vue

@@ -0,0 +1,165 @@
+<script setup>
+import { ref, computed, watch, nextTick, onUnmounted } from "vue"
+
+const props = defineProps({
+  modelValue: { type: Number, default: 0 },
+  min: { type: Number, default: 0 },
+  max: { type: Number, default: 100 },
+  step: { type: Number, default: 1 },
+  precision: { type: Number, default: null },
+  label: { type: String, default: null }
+})
+
+const emit = defineEmits(["update:modelValue"])
+
+const barRef = ref(null)
+const editing = ref(false)
+const inputRef = ref(null)
+const displayValue = ref(String(props.modelValue))
+
+const CLICK_THRESHOLD = 3
+
+watch(() => props.modelValue, v => {
+  if (!editing.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
+})
+
+const fillPercent = computed(() => {
+  if (props.max === props.min) return 0
+  return ((props.modelValue - props.min) / (props.max - props.min)) * 100
+})
+
+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 snap(v) {
+  const stepped = Math.round((v - props.min) / props.step) * props.step + props.min
+  return clamp(stepped)
+}
+
+function valueFromX(clientX) {
+  const rect = barRef.value.getBoundingClientRect()
+  const ratio = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width))
+  return snap(props.min + ratio * (props.max - props.min))
+}
+
+let startX = 0
+let didDrag = false
+
+function handleMousedown(e) {
+  if (editing.value) return
+  e.preventDefault()
+  startX = e.clientX
+  didDrag = false
+  document.addEventListener("mousemove", handleMousemove)
+  document.addEventListener("mouseup", handleMouseup)
+}
+
+function handleMousemove(e) {
+  if (Math.abs(e.clientX - startX) > CLICK_THRESHOLD) {
+    didDrag = true
+  }
+  if (didDrag) {
+    const next = valueFromX(e.clientX)
+    const formatted = Number(formatValue(next))
+    if (formatted !== props.modelValue) {
+      emit("update:modelValue", formatted)
+    }
+  }
+}
+
+function handleMouseup(e) {
+  document.removeEventListener("mousemove", handleMousemove)
+  document.removeEventListener("mouseup", handleMouseup)
+  if (!didDrag) {
+    enterEdit()
+  }
+}
+
+onUnmounted(() => {
+  document.removeEventListener("mousemove", handleMousemove)
+  document.removeEventListener("mouseup", handleMouseup)
+})
+
+function enterEdit() {
+  editing.value = true
+  displayValue.value = formatValue(props.modelValue)
+  nextTick(() => {
+    inputRef.value?.focus()
+    inputRef.value?.select()
+  })
+}
+
+function commitEdit() {
+  const parsed = parseFloat(displayValue.value)
+  if (!isNaN(parsed)) {
+    const clamped = snap(parsed)
+    emit("update:modelValue", Number(formatValue(clamped)))
+  }
+  editing.value = false
+}
+
+function cancelEdit() {
+  displayValue.value = formatValue(props.modelValue)
+  editing.value = false
+}
+
+function handleEditKeydown(e) {
+  if (e.key === "Enter") {
+    e.preventDefault()
+    commitEdit()
+  } else if (e.key === "Escape") {
+    e.preventDefault()
+    cancelEdit()
+  }
+}
+</script>
+
+<template>
+  <div
+    ref="barRef"
+    class="relative h-[26px] bg-3 rounded-sm cursor-ew-resize select-none overflow-hidden border border-line"
+    @mousedown="handleMousedown"
+  >
+    <div
+      class="absolute inset-y-0 left-0 bg-accent"
+      :style="{ width: fillPercent + '%' }"
+    />
+    <div class="absolute inset-0 flex items-center px-2">
+      <template v-if="editing">
+        <input
+          ref="inputRef"
+          v-model="displayValue"
+          class="w-full bg-transparent border-none outline-none font-mono text-base text-fg-0 text-center p-0 m-0 relative z-10"
+          @blur="commitEdit"
+          @keydown="handleEditKeydown"
+        />
+      </template>
+      <template v-else>
+        <span v-if="label" class="text-xs text-fg-0 mr-auto relative z-10">{{ label }}</span>
+        <span
+          class="font-mono text-base text-fg-0 relative z-10"
+          :class="label ? '' : 'mx-auto'"
+        >
+          {{ formatValue(modelValue) }}
+        </span>
+      </template>
+    </div>
+  </div>
+</template>

package/src/components/ScrollBox.vue

@@ -0,0 +1,78 @@
+<script setup>
+defineProps({
+  horizontal: { type: Boolean, default: false },
+  tag: { type: String, default: "div" }
+})
+</script>
+
+<template>
+  <component
+    :is="tag"
+    class="scroll-box"
+    :class="horizontal ? 'scroll-box-both' : 'scroll-box-vertical'"
+  >
+    <slot />
+  </component>
+</template>
+
+<style scoped>
+.scroll-box {
+  overflow: hidden;
+  --scrollbar-size: 8px;
+  --scrollbar-thumb: var(--bg-5);
+  --scrollbar-thumb-hover: var(--bg-6);
+  --scrollbar-track: transparent;
+  --scrollbar-track-hover: var(--bg-2);
+}
+
+.scroll-box-vertical {
+  overflow-y: auto;
+}
+
+.scroll-box-both {
+  overflow: auto;
+}
+
+/* firefox */
+.scroll-box {
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+  transition: scrollbar-color 0.15s;
+}
+
+.scroll-box:hover {
+  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+}
+
+/* webkit */
+.scroll-box::-webkit-scrollbar {
+  width: var(--scrollbar-size);
+  height: var(--scrollbar-size);
+}
+
+.scroll-box::-webkit-scrollbar-track {
+  background: var(--scrollbar-track);
+  transition: background 0.15s;
+}
+
+.scroll-box:hover::-webkit-scrollbar-track {
+  background: var(--scrollbar-track-hover);
+}
+
+.scroll-box::-webkit-scrollbar-thumb {
+  background: transparent;
+  border-radius: var(--scrollbar-size);
+}
+
+.scroll-box:hover::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb);
+}
+
+.scroll-box::-webkit-scrollbar-thumb:hover {
+  background: var(--scrollbar-thumb-hover);
+}
+
+.scroll-box::-webkit-scrollbar-corner {
+  background: transparent;
+}
+</style>

package/src/components/SectionHeader.vue

@@ -0,0 +1,18 @@
+<script setup>
+defineProps({
+  label: { type: String, required: true },
+  description: { type: String, default: null }
+})
+</script>
+
+<template>
+  <div class="flex items-start justify-between gap-4 px-2 py-2">
+    <div>
+      <div class="text-xs text-fg-1 uppercase tracking-wide cursor-default">{{ label }}</div>
+      <div v-if="description" class="text-xs text-fg-3 mt-0.5 cursor-default">{{ description }}</div>
+    </div>
+    <div v-if="$slots.actions" class="flex items-center gap-2 shrink-0">
+      <slot name="actions" />
+    </div>
+  </div>
+</template>

package/src/components/Select.vue

@@ -0,0 +1,187 @@
+<script setup>
+import { ref, computed, useAttrs, 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"
+
+defineOptions({ inheritAttrs: false })
+
+const attrs = useAttrs()
+
+const attrsWithoutClass = computed(() => {
+  const { class: _, ...rest } = attrs
+  return rest
+})
+
+const props = defineProps({
+  modelValue: { type: [String, Number, Boolean, null], default: null },
+  options: { type: Array, required: true },
+  placeholder: { type: String, default: "select..." },
+  inline: { type: Boolean, default: false },
+  defaultOpen: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(["update:modelValue", "close"])
+
+const open = ref(props.defaultOpen)
+const trigger = ref(null)
+const menu = ref(null)
+const maxWidth = ref(null)
+const maxHeight = ref(null)
+const highlightedIndex = ref(-1)
+
+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 selectedLabel = computed(() => {
+  const found = normalizedOptions.value.find(o => o.value === props.modelValue)
+  return found?.label ?? props.placeholder
+})
+
+function close() {
+  if (!open.value) return
+  open.value = false
+  highlightedIndex.value = -1
+  emit("close")
+}
+
+function openMenu() {
+  if (props.disabled) return
+  const currentIndex = normalizedOptions.value.findIndex(o => o.value === props.modelValue)
+  highlightedIndex.value = currentIndex !== -1 ? currentIndex : 0
+  open.value = true
+  nextTick(scrollToHighlighted)
+}
+
+function toggle() {
+  if (props.disabled) return
+  if (open.value) close()
+  else openMenu()
+}
+
+function select(value) {
+  emit("update:modelValue", value)
+  close()
+}
+
+function scrollToHighlighted() {
+  const menuEl = menu.value?.$el ?? menu.value
+  if (!menuEl) return
+  const items = menuEl.querySelectorAll("[data-option]")
+  items[highlightedIndex.value]?.scrollIntoView({ block: "nearest" })
+}
+
+function onKeydown(e) {
+  if (e.key === "Escape") {
+    close()
+    trigger.value?.focus()
+    return
+  }
+
+  if (!open.value) {
+    if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault()
+      openMenu()
+    }
+    return
+  }
+
+  const opts = normalizedOptions.value
+  if (e.key === "ArrowDown") {
+    e.preventDefault()
+    highlightedIndex.value = (highlightedIndex.value + 1) % opts.length
+    nextTick(scrollToHighlighted)
+  } else if (e.key === "ArrowUp") {
+    e.preventDefault()
+    highlightedIndex.value = (highlightedIndex.value - 1 + opts.length) % opts.length
+    nextTick(scrollToHighlighted)
+  } else if (e.key === "Enter" || e.key === " ") {
+    e.preventDefault()
+    if (highlightedIndex.value >= 0) select(opts[highlightedIndex.value].value)
+  }
+}
+
+useClickOutside([trigger, menu], close)
+</script>
+
+<template>
+  <div :class="inline ? 'relative flex w-full' : 'relative inline-flex'" v-bind="attrsWithoutClass">
+    <button
+      ref="trigger"
+      type="button"
+      class="flex items-center gap-1 font-mono text-base min-w-0 flex-1 outline-none focus-visible:outline-1 focus-visible:outline-accent"
+      :class="[
+        disabled ? 'cursor-default opacity-50' : 'cursor-pointer',
+        inline
+          ? 'bg-transparent border-none p-0 m-0'
+          : ['px-2 py-1 bg-0 border rounded-sm', disabled ? 'border-line' : ['hover:bg-1', open ? 'border-accent' : 'border-line']],
+        attrs.class ?? (disabled ? 'text-fg-2' : 'text-fg-0')
+      ]"
+      @mousedown.prevent.stop="toggle"
+      @keydown="onKeydown"
+    >
+      <span
+        class="flex-1 text-left whitespace-nowrap overflow-hidden text-ellipsis"
+        :class="modelValue == null ? 'text-fg-3' : ''"
+      >
+        {{ selectedLabel }}
+      </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">
+      <ScrollBox
+        v-if="open"
+        ref="menu"
+        class="bg-1 border border-line rounded-sm z-[1000] w-max"
+        :style="{ ...floatingStyles, maxWidth: maxWidth + 'px', maxHeight: maxHeight + 'px' }"
+      >
+        <button
+          v-for="(opt, i) in normalizedOptions"
+          :key="opt.value"
+          type="button"
+          data-option
+          class="block w-full px-2 py-1 border-none font-mono text-base text-left cursor-pointer whitespace-nowrap overflow-hidden text-ellipsis hover:bg-3 hover:text-fg-0"
+          :class="[
+            opt.value === modelValue ? 'text-accent' : 'text-fg-1',
+            i === highlightedIndex ? 'bg-3 text-fg-0' : 'bg-transparent'
+          ]"
+          @click="select(opt.value)"
+          @pointerenter="highlightedIndex = i"
+        >
+          {{ opt.label }}
+        </button>
+      </ScrollBox>
+    </Teleport>
+  </div>
+</template>