@prsm/mono-components 0.1.0

package/src/components/DataTable.vue

@@ -0,0 +1,326 @@
+<script setup>
+import { ref, computed, watch, nextTick, onMounted, onUnmounted } from "vue"
+import { Icon } from "@iconify/vue"
+import Checkbox from "./Checkbox.vue"
+import Input from "./Input.vue"
+import NumberInput from "./NumberInput.vue"
+import Select from "./Select.vue"
+import ScrollBox from "./ScrollBox.vue"
+
+const props = defineProps({
+  columns: { type: Array, required: true },
+  rows: { type: Array, required: true },
+  rowKey: { type: String, default: "id" },
+  pageSize: { type: Number, default: 10 },
+  total: { type: Number, default: undefined },
+  filterable: { type: Boolean, default: false },
+  filterPlaceholder: { type: String, default: "search..." },
+  loading: { type: Boolean, default: false },
+  striped: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(["update:row", "sort", "page", "filter"])
+
+const filterQuery = ref("")
+const sortKey = ref(null)
+const sortDir = ref(null)
+const currentPage = ref(1)
+const editingCell = ref(null)
+const editValue = ref(null)
+
+const filteredRows = computed(() => {
+  if (!filterQuery.value) return props.rows
+  const q = filterQuery.value.toLowerCase()
+  return props.rows.filter(row =>
+    props.columns.some(col =>
+      String(row[col.key] ?? "").toLowerCase().includes(q)
+    )
+  )
+})
+
+const sortedRows = computed(() => {
+  if (!sortKey.value || !sortDir.value) return filteredRows.value
+  const key = sortKey.value
+  const dir = sortDir.value === "desc" ? -1 : 1
+  return [...filteredRows.value].sort((a, b) => {
+    const va = a[key] ?? ""
+    const vb = b[key] ?? ""
+    if (va < vb) return -1 * dir
+    if (va > vb) return 1 * dir
+    return 0
+  })
+})
+
+const totalCount = computed(() => props.total ?? sortedRows.value.length)
+const totalPages = computed(() => Math.max(1, Math.ceil(totalCount.value / props.pageSize)))
+
+const displayedRows = computed(() => {
+  if (props.total != null) return props.rows
+  const start = (currentPage.value - 1) * props.pageSize
+  return sortedRows.value.slice(start, start + props.pageSize)
+})
+
+const rangeStart = computed(() => Math.min((currentPage.value - 1) * props.pageSize + 1, totalCount.value))
+const rangeEnd = computed(() => Math.min(currentPage.value * props.pageSize, totalCount.value))
+
+watch(filterQuery, q => {
+  currentPage.value = 1
+  editingCell.value = null
+  emit("filter", q)
+})
+
+watch([sortKey, sortDir], () => {
+  editingCell.value = null
+})
+
+function toggleSort(colKey) {
+  if (sortKey.value === colKey) {
+    if (sortDir.value === "asc") sortDir.value = "desc"
+    else { sortKey.value = null; sortDir.value = null }
+  } else {
+    sortKey.value = colKey
+    sortDir.value = "asc"
+  }
+  currentPage.value = 1
+  emit("sort", { key: sortKey.value, direction: sortDir.value })
+}
+
+function goToPage(p) {
+  currentPage.value = Math.max(1, Math.min(p, totalPages.value))
+  emit("page", currentPage.value)
+}
+
+function handleCellClick(row, col) {
+  if (!col.editable) return
+  if (col.type === "boolean") {
+    emit("update:row", { key: row[props.rowKey], column: col.key, value: !row[col.key] })
+    return
+  }
+  startEdit(row[props.rowKey], col.key, row[col.key])
+}
+
+function startEdit(rk, colKey, currentVal) {
+  editingCell.value = { rowKey: rk, colKey }
+  editValue.value = currentVal
+  nextTick(() => {
+    const input = document.querySelector("[data-edit-input]")
+    if (input) { input.focus(); input.select?.() }
+  })
+}
+
+function commitEdit(rk, colKey) {
+  emit("update:row", { key: rk, column: colKey, value: editValue.value })
+  editingCell.value = null
+}
+
+function handleNumberUpdate(rk, colKey, value) {
+  if (!editingCell.value) return
+  editValue.value = value
+  emit("update:row", { key: rk, column: colKey, value })
+}
+
+function handleDocClick(e) {
+  if (!editingCell.value) return
+  const numEdit = document.querySelector("[data-number-edit]")
+  if (!numEdit) return
+  if (numEdit.contains(e.target)) return
+  editingCell.value = null
+}
+
+onMounted(() => document.addEventListener("mousedown", handleDocClick, true))
+onUnmounted(() => document.removeEventListener("mousedown", handleDocClick, true))
+
+function cancelEdit() {
+  editingCell.value = null
+}
+
+function handleEnumSelect(rk, colKey, value) {
+  editValue.value = value
+  emit("update:row", { key: rk, column: colKey, value })
+  editingCell.value = null
+}
+
+function isEditing(rk, colKey) {
+  return editingCell.value?.rowKey === rk && editingCell.value?.colKey === colKey
+}
+
+function skeletonWidth(row, col) {
+  return 35 + ((row * 7 + col * 13) % 45) + "%"
+}
+</script>
+
+<template>
+  <div class="flex flex-col border border-line rounded-sm overflow-hidden">
+    <div v-if="filterable" class="px-1.5 py-1.5 border-b border-line-subtle">
+      <Input
+        :model-value="filterQuery"
+        @update:model-value="v => filterQuery = v"
+        :placeholder="filterPlaceholder"
+      />
+    </div>
+
+    <ScrollBox horizontal class="flex-1">
+      <table class="w-full border-collapse font-mono text-base table-fixed">
+        <thead>
+          <tr>
+            <th
+              v-for="col in columns"
+              :key="col.key"
+              class="px-2 py-1 text-left text-fg-2 font-normal border-b border-line-subtle bg-1 whitespace-nowrap sticky top-0 z-10"
+              :class="col.sortable ? 'cursor-pointer hover:text-fg-0 select-none' : ''"
+              :style="col.width ? { width: col.width } : {}"
+              @click="col.sortable && toggleSort(col.key)"
+            >
+              <span class="inline-flex items-center gap-0.5">
+                <slot :name="`header-${col.key}`" :column="col">
+                  {{ col.label }}
+                </slot>
+                <Icon
+                  v-if="col.sortable && sortKey === col.key"
+                  :icon="sortDir === 'asc' ? 'material-symbols:arrow-upward' : 'material-symbols:arrow-downward'"
+                  class="text-xs text-accent"
+                />
+              </span>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <template v-if="loading">
+            <tr v-for="r in pageSize" :key="`sk-${r}`">
+              <td
+                v-for="(col, c) in columns"
+                :key="col.key"
+                class="px-2 py-1 border-b border-line-subtle"
+              >
+                <div class="skeleton-bar" :style="{ width: skeletonWidth(r, c) }" />
+              </td>
+            </tr>
+          </template>
+
+          <template v-else-if="displayedRows.length">
+            <tr
+              v-for="(row, rowIdx) in displayedRows"
+              :key="row[rowKey]"
+              :class="striped && rowIdx % 2 ? 'bg-1' : ''"
+            >
+              <td
+                v-for="col in columns"
+                :key="col.key"
+                class="px-2 py-1 border-b border-line-subtle"
+                :class="col.editable ? 'hover:bg-3 cursor-pointer' : ''"
+                @click="handleCellClick(row, col)"
+              >
+                <slot :name="`cell-${col.key}`" :value="row[col.key]" :row="row">
+                  <template v-if="col.type === 'boolean'">
+                    <div class="flex items-center min-h-[1.5em]">
+                      <Checkbox
+                        v-if="col.editable"
+                        :model-value="!!row[col.key]"
+                      />
+                      <Icon
+                        v-else-if="row[col.key]"
+                        icon="material-symbols:check"
+                        class="text-base text-fg-2"
+                      />
+                    </div>
+                  </template>
+
+                  <template v-else-if="isEditing(row[rowKey], col.key) && col.type === 'enum'">
+                    <Select
+                      inline
+                      default-open
+                      :model-value="editValue"
+                      :options="col.options"
+                      @update:model-value="v => handleEnumSelect(row[rowKey], col.key, v)"
+                      @close="cancelEdit"
+                    />
+                  </template>
+
+                  <template v-else-if="isEditing(row[rowKey], col.key) && col.type === 'number'">
+                    <div data-number-edit>
+                      <NumberInput
+                        inline
+                        :model-value="editValue"
+                        :step="col.step ?? 1"
+                        :min="col.min ?? -Infinity"
+                        :max="col.max ?? Infinity"
+                        :precision="col.precision ?? null"
+                        @update:model-value="v => handleNumberUpdate(row[rowKey], col.key, v)"
+                        @keydown.enter="editingCell = null"
+                        @keydown.escape="cancelEdit"
+                      />
+                    </div>
+                  </template>
+
+                  <template v-else-if="isEditing(row[rowKey], col.key)">
+                    <Input
+                      inline
+                      data-edit-input
+                      :model-value="editValue"
+                      @update:model-value="v => editValue = v"
+                      @blur="commitEdit(row[rowKey], col.key)"
+                      @keydown.enter="commitEdit(row[rowKey], col.key)"
+                      @keydown.escape="cancelEdit"
+                    />
+                  </template>
+
+                  <span
+                    v-else
+                    class="block truncate"
+                    :class="col.editable ? 'underline decoration-dashed underline-offset-2 decoration-fg-3' : ''"
+                  >
+                    {{ row[col.key] ?? "" }}
+                  </span>
+                </slot>
+              </td>
+            </tr>
+          </template>
+
+          <tr v-else>
+            <td :colspan="columns.length" class="px-2 py-4 text-center text-fg-3">
+              {{ filterQuery ? "no results" : "no data" }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </ScrollBox>
+
+    <div
+      v-if="totalCount > 0"
+      class="flex items-center justify-between px-2 py-1 border-t border-line-subtle text-xs text-fg-2"
+    >
+      <span>{{ rangeStart }}-{{ rangeEnd }} of {{ totalCount }}</span>
+      <div v-if="totalPages > 1" class="flex items-center gap-0.5">
+        <button
+          class="p-0.5 bg-transparent border border-transparent rounded-sm cursor-pointer text-fg-2 hover:bg-2 hover:text-fg-0 disabled:opacity-30 disabled:cursor-default"
+          :disabled="currentPage <= 1"
+          @click="goToPage(currentPage - 1)"
+        >
+          <Icon icon="material-symbols:chevron-left" class="text-base" />
+        </button>
+        <span class="px-1">{{ currentPage }} / {{ totalPages }}</span>
+        <button
+          class="p-0.5 bg-transparent border border-transparent rounded-sm cursor-pointer text-fg-2 hover:bg-2 hover:text-fg-0 disabled:opacity-30 disabled:cursor-default"
+          :disabled="currentPage >= totalPages"
+          @click="goToPage(currentPage + 1)"
+        >
+          <Icon icon="material-symbols:chevron-right" class="text-base" />
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.skeleton-bar {
+  height: 12px;
+  background: var(--bg-3);
+  border-radius: 2px;
+  animation: skeleton-pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes skeleton-pulse {
+  0%, 100% { opacity: 0.4; }
+  50% { opacity: 1; }
+}
+</style>

package/src/components/Dropdown.vue

@@ -0,0 +1,127 @@
+<script setup>
+import { ref, computed } from "vue"
+import { useFloating, flip, shift, offset, size } from "@floating-ui/vue"
+import { Icon } from "@iconify/vue"
+import { useClickOutside } from "../composables/useClickOutside.js"
+
+const props = defineProps({
+  modelValue: { type: [String, Number, null], default: null },
+  options: { type: Array, required: true },
+  icon: { type: String, default: null },
+  label: { type: String, default: null },
+  header: { type: String, default: null },
+  placement: { type: String, default: "bottom-start" },
+  inline: { type: Boolean, default: false },
+  defaultOpen: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(["update:modelValue", "select", "close"])
+
+const open = ref(props.defaultOpen)
+const trigger = ref(null)
+const menu = ref(null)
+const maxWidth = ref(null)
+const maxHeight = ref(null)
+
+const { floatingStyles } = useFloating(trigger, menu, {
+  placement: props.placement,
+  strategy: "fixed",
+  middleware: [
+    offset(4),
+    flip(),
+    shift({ padding: 0 }),
+    size({
+      padding: 8,
+      apply({ availableWidth, availableHeight }) {
+        maxWidth.value = availableWidth
+        maxHeight.value = Math.min(availableHeight, 300)
+      }
+    })
+  ],
+  open
+})
+
+const displayLabel = computed(() => {
+  if (props.label) return props.label
+  const found = props.options.find(o => o.value === props.modelValue)
+  return found?.label ?? "select..."
+})
+
+function close() {
+  if (!open.value) return
+  open.value = false
+  emit("close")
+}
+
+function toggle() {
+  if (open.value) close()
+  else open.value = true
+}
+
+function select(option) {
+  emit("update:modelValue", option.value)
+  emit("select", option)
+  close()
+}
+
+useClickOutside([trigger, menu], close)
+</script>
+
+<template>
+  <div class="inline-flex">
+    <button
+      ref="trigger"
+      type="button"
+      class="flex items-center gap-1.5 font-mono text-base text-fg-0 cursor-pointer"
+      :class="inline
+        ? 'bg-transparent border-none p-0 m-0'
+        : ['px-2 py-1 bg-transparent border border-transparent rounded-sm hover:bg-2', open ? 'bg-3' : '']"
+      @click.stop="toggle"
+    >
+      <Icon v-if="icon" :icon="icon" class="text-xl text-fg-2" />
+      <span v-if="!inline || label" class="font-medium">{{ displayLabel }}</span>
+      <Icon
+        v-if="!inline || label"
+        icon="material-symbols:expand-more"
+        class="text-xl text-fg-3 transition-transform duration-150"
+        :class="open ? 'rotate-180' : ''"
+      />
+    </button>
+
+    <Teleport to="body">
+      <div
+        v-if="open"
+        ref="menu"
+        class="bg-1 border border-line rounded-sm z-[1000] overflow-y-auto min-w-[180px] py-1"
+        :style="{
+          ...floatingStyles,
+          maxWidth: maxWidth + 'px',
+          maxHeight: maxHeight + 'px'
+        }"
+      >
+        <div v-if="header" class="px-2 py-1 text-xs text-fg-3 uppercase tracking-wide">
+          {{ header }}
+        </div>
+        <button
+          v-for="option in options"
+          :key="option.value"
+          type="button"
+          class="flex items-center gap-2 w-full px-2 py-1 bg-transparent border-none font-mono text-base cursor-pointer text-left hover:bg-3 hover:text-fg-0"
+          :class="[
+            option.value === modelValue ? 'text-fg-0' : 'text-fg-1',
+            option.action ? 'border-t border-line-subtle mt-1 pt-1.5 text-fg-2' : ''
+          ]"
+          @click="option.action ? (option.action(), close()) : select(option)"
+        >
+          <Icon v-if="option.icon" :icon="option.icon" class="text-xl text-fg-3 shrink-0" />
+          <span class="flex-1 whitespace-nowrap overflow-hidden text-ellipsis">{{ option.label }}</span>
+          <span v-if="option.meta" class="text-xs text-fg-3 shrink-0">{{ option.meta }}</span>
+          <span class="w-[14px] shrink-0 text-accent text-xl flex items-center justify-end">
+            <Icon v-if="option.value === modelValue" icon="material-symbols:check" />
+          </span>
+        </button>
+        <slot />
+      </div>
+    </Teleport>
+  </div>
+</template>

package/src/components/GhostInput.vue

@@ -0,0 +1,29 @@
+<script setup>
+defineProps({
+  modelValue: { type: String, default: "" },
+  placeholder: { type: String, default: "" },
+  size: {
+    type: String,
+    default: "base",
+    validator: v => ["base", "lg"].includes(v)
+  }
+})
+
+defineEmits(["update:modelValue"])
+
+const sizeClasses = {
+  lg: "text-lg font-medium text-fg-0",
+  base: "text-base text-fg-2 focus:text-fg-1"
+}
+</script>
+
+<template>
+  <input
+    :value="modelValue"
+    :placeholder="placeholder"
+    spellcheck="false"
+    class="bg-transparent border-none p-0 font-mono focus:outline-none w-full placeholder:text-fg-3"
+    :class="sizeClasses[size]"
+    @input="$emit('update:modelValue', $event.target.value)"
+  />
+</template>

package/src/components/Input.vue

@@ -0,0 +1,23 @@
+<script setup>
+defineProps({
+  modelValue: { type: [String, Number], default: "" },
+  placeholder: { type: String, default: "" },
+  type: { type: String, default: "text" },
+  inline: { type: Boolean, default: false }
+})
+
+defineEmits(["update:modelValue"])
+</script>
+
+<template>
+  <input
+    :type="type"
+    :value="modelValue"
+    :placeholder="placeholder"
+    class="font-mono text-fg-0 placeholder:text-fg-3 focus:outline-none w-full"
+    :class="inline
+      ? 'bg-transparent border-none p-0 m-0 text-base'
+      : 'px-2 py-1 text-base bg-0 border border-line rounded-sm focus:border-accent'"
+    @input="$emit('update:modelValue', $event.target.value)"
+  />
+</template>

package/src/components/KeyValue.vue

@@ -0,0 +1,149 @@
+<script setup>
+import { ref, nextTick, onMounted, onUnmounted } from "vue"
+import { Icon } from "@iconify/vue"
+import Checkbox from "./Checkbox.vue"
+import Input from "./Input.vue"
+import NumberInput from "./NumberInput.vue"
+import Select from "./Select.vue"
+
+const props = defineProps({
+  fields: { type: Array, required: true },
+  data: { type: Object, required: true },
+  labelWidth: { type: String, default: "120px" }
+})
+
+const emit = defineEmits(["update"])
+
+const editingKey = ref(null)
+const editValue = ref(null)
+
+function handleRowClick(field) {
+  if (!field.editable) return
+  if (field.type === "boolean") {
+    emit("update", { key: field.key, value: !props.data[field.key] })
+    return
+  }
+  editingKey.value = field.key
+  editValue.value = props.data[field.key] ?? ""
+  nextTick(() => {
+    const input = document.querySelector("[data-kv-input]")
+    if (input) { input.focus(); input.select?.() }
+  })
+}
+
+function commit(key) {
+  emit("update", { key, value: editValue.value })
+  editingKey.value = null
+}
+
+function handleNumberUpdate(key, value) {
+  if (!editingKey.value) return
+  editValue.value = value
+  emit("update", { key, value })
+}
+
+function handleDocClick(e) {
+  if (!editingKey.value) return
+  const numEdit = document.querySelector("[data-number-edit]")
+  if (!numEdit) return
+  if (numEdit.contains(e.target)) return
+  editingKey.value = null
+}
+
+onMounted(() => document.addEventListener("mousedown", handleDocClick, true))
+onUnmounted(() => document.removeEventListener("mousedown", handleDocClick, true))
+
+function cancel() {
+  editingKey.value = null
+}
+
+function handleEnumSelect(key, value) {
+  editValue.value = value
+  emit("update", { key, value })
+  editingKey.value = null
+}
+</script>
+
+<template>
+  <div class="flex flex-col">
+    <div
+      v-for="field in fields"
+      :key="field.key"
+      class="flex items-center border-b border-line-subtle"
+      :class="field.editable ? 'hover:bg-3 cursor-pointer' : ''"
+      @click="field.editable && handleRowClick(field)"
+    >
+      <span
+        class="shrink-0 px-2 py-1 text-base text-fg-2 truncate"
+        :style="{ width: labelWidth }"
+      >
+        {{ field.label }}
+      </span>
+      <div class="flex-1 px-2 py-1 min-w-0">
+        <slot :name="`value-${field.key}`" :value="data[field.key]" :field="field">
+          <template v-if="field.type === 'boolean'">
+            <div class="flex items-center min-h-[1.5em]">
+              <Checkbox
+                v-if="field.editable"
+                :model-value="!!data[field.key]"
+              />
+              <Icon
+                v-else-if="data[field.key]"
+                icon="material-symbols:check"
+                class="text-base text-fg-2"
+              />
+              <span v-else class="text-fg-3">-</span>
+            </div>
+          </template>
+
+          <template v-else-if="editingKey === field.key && field.type === 'enum'">
+            <Select
+              inline
+              default-open
+              :model-value="editValue"
+              :options="field.options"
+              @update:model-value="v => handleEnumSelect(field.key, v)"
+              @close="cancel"
+            />
+          </template>
+
+          <template v-else-if="editingKey === field.key && field.type === 'number'">
+            <div data-number-edit>
+              <NumberInput
+                inline
+                :model-value="editValue"
+                :step="field.step ?? 1"
+                :min="field.min ?? -Infinity"
+                :max="field.max ?? Infinity"
+                :precision="field.precision ?? null"
+                @update:model-value="v => handleNumberUpdate(field.key, v)"
+                @keydown.enter="editingKey = null"
+                @keydown.escape="cancel"
+              />
+            </div>
+          </template>
+
+          <template v-else-if="editingKey === field.key">
+            <Input
+              inline
+              data-kv-input
+              :model-value="editValue"
+              @update:model-value="v => editValue = v"
+              @blur="commit(field.key)"
+              @keydown.enter="commit(field.key)"
+              @keydown.escape="cancel"
+            />
+          </template>
+
+          <span
+            v-else
+            class="block text-base text-fg-0 truncate min-h-[1.5em]"
+            :class="field.editable ? 'underline decoration-dashed underline-offset-2 decoration-fg-3' : ''"
+          >
+            {{ data[field.key] ?? "" }}
+          </span>
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>