@prsm/mono-components 0.1.0

package/src/components/Switch.vue

@@ -0,0 +1,85 @@
+<script setup>
+defineProps({
+  modelValue: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(["update:modelValue"])
+</script>
+
+<template>
+  <button
+    type="button"
+    class="switch"
+    :class="{ checked: modelValue, disabled }"
+    :disabled="disabled"
+    @click="!disabled && emit('update:modelValue', !modelValue)"
+  >
+    <span class="thumb" />
+  </button>
+</template>
+
+<style scoped>
+.switch {
+  --track-w: 36px;
+  --track-h: 20px;
+  --thumb-size: 14px;
+  --thumb-margin: 2px;
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: var(--track-w);
+  height: var(--track-h);
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: 100px;
+  background: var(--bg-4);
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.switch:hover:not(.disabled) {
+  background: var(--bg-5);
+}
+
+.switch.checked {
+  background: var(--accent);
+  border-color: var(--accent);
+}
+
+.switch.checked:hover:not(.disabled) {
+  background: var(--accent-hover);
+  border-color: var(--accent-hover);
+}
+
+.switch.disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.thumb {
+  position: absolute;
+  top: var(--thumb-margin);
+  left: var(--thumb-margin);
+  width: var(--thumb-size);
+  height: var(--thumb-size);
+  background: #fff;
+  border-radius: 100px;
+  transition: left 0.15s ease, width 0.15s ease;
+  pointer-events: none;
+}
+
+.switch.checked .thumb {
+  left: calc(100% - var(--thumb-size) - var(--thumb-margin));
+}
+
+.switch:active:not(.disabled) .thumb {
+  width: calc(var(--thumb-size) + 4px);
+}
+
+.switch.checked:active:not(.disabled) .thumb {
+  left: calc(100% - var(--thumb-size) - var(--thumb-margin) - 4px);
+  width: calc(var(--thumb-size) + 4px);
+}
+</style>

package/src/components/Tabs.vue

@@ -0,0 +1,34 @@
+<script setup>
+import { Icon } from "@iconify/vue"
+
+defineProps({
+  modelValue: { type: String, required: true },
+  tabs: { type: Array, required: true }
+})
+
+const emit = defineEmits(["update:modelValue"])
+</script>
+
+<template>
+  <div class="inline-flex items-center gap-0.5">
+    <button
+      v-for="tab in tabs"
+      :key="tab.key"
+      type="button"
+      class="inline-flex items-center gap-1 px-2 py-1 rounded-sm font-mono text-base cursor-pointer border-none"
+      :class="modelValue === tab.key
+        ? 'bg-3 text-fg-0'
+        : 'bg-transparent text-fg-2 hover:bg-2 hover:text-fg-1'"
+      @click="emit('update:modelValue', tab.key)"
+    >
+      <Icon v-if="tab.icon" :icon="tab.icon" class="text-base" />
+      <span>{{ tab.label }}</span>
+      <span
+        v-if="tab.count != null"
+        class="text-xs text-fg-3 bg-4 px-1 py-px rounded-sm"
+      >
+        {{ tab.count }}
+      </span>
+    </button>
+  </div>
+</template>

package/src/components/TagInput.vue

@@ -0,0 +1,80 @@
+<script setup>
+import { ref } from "vue"
+import { Icon } from "@iconify/vue"
+
+const props = defineProps({
+  modelValue: { type: Array, default: () => [] },
+  placeholder: { type: String, default: "type and press enter..." },
+})
+
+const emit = defineEmits(["update:modelValue"])
+
+const query = ref("")
+const inputRef = ref(null)
+
+function add() {
+  const value = query.value.trim()
+  if (!value) return
+  if (!props.modelValue.includes(value)) {
+    emit("update:modelValue", [...props.modelValue, value])
+  }
+  query.value = ""
+}
+
+function remove(value) {
+  emit("update:modelValue", props.modelValue.filter(v => v !== value))
+}
+
+function clearAll() {
+  emit("update:modelValue", [])
+}
+
+function handleKeydown(e) {
+  if (e.key === "Enter") {
+    e.preventDefault()
+    add()
+  } else if (e.key === "Backspace" && !query.value && props.modelValue.length) {
+    remove(props.modelValue[props.modelValue.length - 1])
+  }
+}
+
+function focus() {
+  inputRef.value?.focus()
+}
+</script>
+
+<template>
+  <div
+    class="flex items-center gap-1 p-1 bg-0 border border-line rounded-sm font-mono text-base cursor-text min-w-0 w-full focus-within:border-accent"
+    @click="focus"
+  >
+    <div class="flex-1 flex items-center flex-wrap gap-1 min-w-0">
+      <span
+        v-for="tag in modelValue"
+        :key="tag"
+        class="inline-flex items-center gap-0.5 px-1 py-px bg-3 text-fg-0 text-xs rounded-sm whitespace-nowrap"
+      >
+        {{ tag }}
+        <Icon
+          icon="material-symbols:close"
+          class="text-xs text-fg-2 hover:text-fg-0 cursor-pointer"
+          @click.stop="remove(tag)"
+        />
+      </span>
+      <input
+        ref="inputRef"
+        v-model="query"
+        type="text"
+        class="flex-1 min-w-[60px] px-1 py-px bg-transparent border-none font-mono text-base text-fg-0 outline-none focus-visible:outline-none"
+        :placeholder="modelValue.length ? '' : placeholder"
+        @keydown="handleKeydown"
+      />
+    </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"
+    />
+  </div>
+</template>

package/src/components/Textarea.vue

@@ -0,0 +1,97 @@
+<script setup>
+import { ref, watch, onMounted, nextTick } from "vue"
+
+const props = defineProps({
+  modelValue: { type: String, default: "" },
+  placeholder: { type: String, default: "" },
+  autoGrow: { type: Boolean, default: false },
+  rows: { type: Number, default: 3 }
+})
+
+const emit = defineEmits(["update:modelValue"])
+const el = ref(null)
+
+function resize() {
+  if (!props.autoGrow || !el.value) return
+  el.value.style.height = "auto"
+  const border = el.value.offsetHeight - el.value.clientHeight
+  el.value.style.height = (el.value.scrollHeight + border) + "px"
+}
+
+function onInput(e) {
+  emit("update:modelValue", e.target.value)
+  resize()
+}
+
+watch(() => props.modelValue, () => nextTick(resize))
+onMounted(resize)
+</script>
+
+<template>
+  <textarea
+    ref="el"
+    :value="modelValue"
+    :placeholder="placeholder"
+    :rows="autoGrow ? 1 : rows"
+    class="mono-textarea px-2 py-1 text-base leading-[1.5] bg-0 border border-line rounded-sm font-mono text-fg-0 placeholder:text-fg-3 focus:border-accent focus:outline-none w-full"
+    :class="autoGrow ? 'resize-none overflow-hidden' : 'resize-vertical'"
+    @input="onInput"
+  />
+</template>
+
+<style scoped>
+.mono-textarea {
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+  transition: scrollbar-color 0.15s;
+}
+
+.mono-textarea:hover {
+  scrollbar-color: var(--bg-5) transparent;
+}
+
+.mono-textarea::-webkit-scrollbar {
+  width: 8px;
+}
+
+.mono-textarea::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.mono-textarea:hover::-webkit-scrollbar-track {
+  background: var(--bg-2);
+}
+
+.mono-textarea::-webkit-scrollbar-thumb {
+  background: transparent;
+  border-radius: 8px;
+}
+
+.mono-textarea:hover::-webkit-scrollbar-thumb {
+  background: var(--bg-5);
+}
+
+.mono-textarea::-webkit-scrollbar-thumb:hover {
+  background: var(--bg-6);
+}
+
+.mono-textarea::-webkit-resizer {
+  background: transparent;
+  background-image:
+    radial-gradient(circle, var(--bg-5) 1px, transparent 0),
+    radial-gradient(circle, var(--bg-5) 1px, transparent 0),
+    radial-gradient(circle, var(--bg-5) 1px, transparent 0),
+    radial-gradient(circle, var(--bg-5) 1px, transparent 0),
+    radial-gradient(circle, var(--bg-5) 1px, transparent 0),
+    radial-gradient(circle, var(--bg-5) 1px, transparent 0);
+  background-size: 2px 2px;
+  background-repeat: no-repeat;
+  background-position:
+    bottom 2px right 2px,
+    bottom 2px right 6px,
+    bottom 2px right 10px,
+    bottom 6px right 2px,
+    bottom 6px right 6px,
+    bottom 10px right 2px;
+}
+</style>

package/src/components/ToastContainer.vue

@@ -0,0 +1,104 @@
+<script setup>
+import { toasts, toast } from "../composables/toast.js"
+import { Icon } from "@iconify/vue"
+
+const iconMap = {
+  success: "material-symbols:check-circle-outline",
+  warning: "material-symbols:warning-outline",
+  error: "material-symbols:error-outline",
+  info: "material-symbols:info-outline",
+  neutral: null
+}
+
+const colorMap = {
+  success: "var(--success)",
+  warning: "var(--warning)",
+  error: "var(--error)",
+  info: "var(--info)",
+  neutral: "var(--fg-2)"
+}
+
+function getStyle(variant) {
+  const color = colorMap[variant]
+  return {
+    borderLeft: `2px solid ${color}`
+  }
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div class="toast-container">
+      <TransitionGroup name="toast">
+        <div
+          v-for="t in toasts"
+          :key="t.id"
+          class="toast-item"
+          :style="getStyle(t.variant)"
+          @mouseenter="toast.pause(t.id)"
+          @mouseleave="toast.resume(t.id)"
+        >
+          <Icon
+            v-if="iconMap[t.variant]"
+            :icon="iconMap[t.variant]"
+            class="text-xl shrink-0"
+            :style="{ color: colorMap[t.variant] }"
+          />
+          <span class="flex-1 text-base text-fg-0">{{ t.message }}</span>
+          <button
+            class="shrink-0 text-fg-3 hover:text-fg-1 bg-transparent border-none cursor-pointer p-0 leading-none"
+            @click="toast.remove(t.id)"
+          >
+            <Icon icon="material-symbols:close" class="text-base" />
+          </button>
+        </div>
+      </TransitionGroup>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.toast-container {
+  position: fixed;
+  top: 12px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 2000;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  pointer-events: none;
+}
+
+.toast-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: var(--bg-1);
+  border: 1px solid var(--border);
+  border-radius: 2px;
+  min-width: 240px;
+  max-width: 400px;
+  pointer-events: auto;
+  font-family: "JetBrains Mono", "Fira Code", "SF Mono", monospace;
+}
+
+.toast-enter-active {
+  transition: all 0.2s ease;
+}
+
+.toast-leave-active {
+  transition: all 0.15s ease;
+}
+
+.toast-enter-from {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+
+.toast-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+</style>

package/src/components/ToggleButtons.vue

@@ -0,0 +1,45 @@
+<script setup>
+import { computed } from "vue"
+import { Icon } from "@iconify/vue"
+
+const props = defineProps({
+  modelValue: { type: Array, default: () => [] },
+  options: { type: Array, required: true },
+  label: { type: String, default: null }
+})
+
+const emit = defineEmits(["update:modelValue"])
+
+const selectedSet = computed(() => new Set(props.modelValue))
+
+function toggle(value) {
+  const next = selectedSet.value.has(value)
+    ? props.modelValue.filter(v => v !== value)
+    : [...props.modelValue, value]
+  emit("update:modelValue", next)
+}
+</script>
+
+<template>
+  <div class="inline-flex items-center gap-1.5">
+    <span v-if="label" class="text-base text-fg-2 font-mono">{{ label }}</span>
+    <div class="inline-flex h-[26px] border border-line rounded-sm overflow-hidden">
+      <button
+        v-for="(opt, i) in options"
+        :key="opt.value ?? opt"
+        type="button"
+        class="inline-flex items-center justify-center min-w-[24px] h-full px-1.5 font-mono text-base cursor-pointer"
+        :class="[
+          selectedSet.has(opt.value ?? opt)
+            ? 'bg-accent border-accent text-white'
+            : 'bg-0 text-fg-2 hover:bg-2 hover:text-fg-1',
+          i > 0 ? 'border-l border-line' : ''
+        ]"
+        @click="toggle(opt.value ?? opt)"
+      >
+        <Icon v-if="opt.icon" :icon="opt.icon" class="text-lg" />
+        <span v-else>{{ opt.label ?? opt }}</span>
+      </button>
+    </div>
+  </div>
+</template>

package/src/components/ToggleGroup.vue

@@ -0,0 +1,30 @@
+<script setup>
+import { Icon } from "@iconify/vue"
+
+defineProps({
+  modelValue: { type: String, required: true },
+  options: { type: Array, required: true }
+})
+
+const emit = defineEmits(["update:modelValue"])
+</script>
+
+<template>
+  <div class="inline-flex h-[26px] border border-line rounded-sm overflow-hidden">
+    <button
+      v-for="(opt, i) in options"
+      :key="opt.value"
+      type="button"
+      class="inline-flex items-center justify-center min-w-[24px] h-full px-1.5 font-mono text-base cursor-pointer"
+      :class="[
+        modelValue === opt.value
+          ? 'bg-3 text-accent'
+          : 'bg-0 text-fg-2 hover:bg-2 hover:text-fg-1',
+        i > 0 ? 'border-l border-line' : ''
+      ]"
+      @click="emit('update:modelValue', opt.value)"
+    >
+      <Icon :icon="opt.icon" class="text-base" />
+    </button>
+  </div>
+</template>

package/src/components/Tooltip.vue

@@ -0,0 +1,56 @@
+<script setup>
+import { ref, computed } from "vue"
+import { useFloating, offset, flip, shift } from "@floating-ui/vue"
+
+const props = defineProps({
+  text: { type: String, required: true },
+  placement: { type: String, default: "top" },
+  delay: { type: Number, default: 400 }
+})
+
+const open = ref(false)
+const triggerRef = ref(null)
+const floatingRef = ref(null)
+let showTimeout = null
+
+const { floatingStyles } = useFloating(triggerRef, floatingRef, {
+  placement: computed(() => props.placement),
+  strategy: "fixed",
+  middleware: [offset(6), flip(), shift({ padding: 8 })],
+  open
+})
+
+function show() {
+  showTimeout = setTimeout(() => { open.value = true }, props.delay)
+}
+
+function hide() {
+  clearTimeout(showTimeout)
+  open.value = false
+}
+</script>
+
+<template>
+  <span
+    ref="triggerRef"
+    class="inline-flex"
+    @mouseenter="show"
+    @mouseleave="hide"
+    @focus="show"
+    @blur="hide"
+  >
+    <slot />
+  </span>
+  <Teleport to="body">
+    <Transition name="tooltip">
+      <div
+        v-if="open"
+        ref="floatingRef"
+        :style="floatingStyles"
+        class="tooltip-content fixed z-[1100] px-1.5 py-0.5 text-xs bg-3 border rounded-sm text-fg-0 pointer-events-none whitespace-nowrap"
+      >
+        {{ text }}
+      </div>
+    </Transition>
+  </Teleport>
+</template>