@ekrist1/vulse 0.1.6-alpha.3 → 0.1.7-alpha.4

package/src/admin/components/fields/GridField.vue

@@ -0,0 +1,173 @@
+<script setup lang="ts">
+import type { FieldDescriptor } from '../../client/form-from-zod'
+import FieldRenderer from './FieldRenderer.vue'
+
+const props = defineProps<{
+  modelValue: Record<string, unknown>[]
+  label: string
+  itemFields: FieldDescriptor[]
+  mode?: 'table' | 'stacked'
+  minRows?: number
+  maxRows?: number
+  addLabel?: string
+  tree?: boolean
+  linkCollections?: string[]
+}>()
+
+const emit = defineEmits<{ (e: 'update:modelValue', v: Record<string, unknown>[]): void }>()
+
+function rows(): Record<string, unknown>[] {
+  return props.modelValue ?? []
+}
+
+function canAdd(): boolean {
+  if (props.maxRows === undefined) return true
+  return rows().length < props.maxRows
+}
+
+function canRemove(): boolean {
+  if (props.minRows === undefined) return true
+  return rows().length > props.minRows
+}
+
+function updateCell(rowIndex: number, key: string, value: unknown) {
+  const next = [...rows()]
+  next[rowIndex] = { ...next[rowIndex], [key]: value }
+  emit('update:modelValue', next)
+}
+
+function addRow() {
+  if (!canAdd()) return
+  emit('update:modelValue', [...rows(), {}])
+}
+
+function removeRow(index: number) {
+  if (!canRemove()) return
+  const next = [...rows()]
+  next.splice(index, 1)
+  emit('update:modelValue', next)
+}
+
+function moveRow(index: number, direction: -1 | 1) {
+  const next = [...rows()]
+  const target = index + direction
+  if (target < 0 || target >= next.length) return
+  const [moved] = next.splice(index, 1)
+  next.splice(target, 0, moved!)
+  emit('update:modelValue', next)
+}
+</script>
+
+<template>
+  <div class="space-y-2">
+    <div class="text-sm text-zinc-600">{{ label }}</div>
+
+    <div v-if="mode === 'table' && itemFields.length" class="overflow-x-auto rounded border">
+      <table class="min-w-full text-sm">
+        <thead class="bg-zinc-50 text-left text-xs text-zinc-600">
+          <tr>
+            <th class="w-16 px-2 py-2"></th>
+            <th v-for="f in itemFields" :key="f.path" class="px-3 py-2 font-medium">{{ f.label ?? f.path }}</th>
+            <th class="w-16 px-2 py-2"></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(item, i) in rows()" :key="i" class="border-t border-zinc-200 align-top">
+            <td class="px-2 py-2">
+              <div class="flex flex-col gap-1">
+                <button
+                  type="button"
+                  class="text-xs text-zinc-500 hover:text-zinc-900 disabled:opacity-30"
+                  :disabled="i === 0"
+                  @click="moveRow(i, -1)"
+                >
+                  ↑
+                </button>
+                <button
+                  type="button"
+                  class="text-xs text-zinc-500 hover:text-zinc-900 disabled:opacity-30"
+                  :disabled="i === rows().length - 1"
+                  @click="moveRow(i, 1)"
+                >
+                  ↓
+                </button>
+              </div>
+            </td>
+            <td v-for="f in itemFields" :key="f.path" class="px-3 py-2">
+              <FieldRenderer
+                :field="f"
+                :model-value="item?.[f.path]"
+                :tree="tree"
+                :link-collections="linkCollections"
+                @update:modelValue="updateCell(i, f.path, $event)"
+              />
+            </td>
+            <td class="px-2 py-2">
+              <button
+                type="button"
+                class="text-xs text-red-600 disabled:opacity-30"
+                :disabled="!canRemove()"
+                @click="removeRow(i)"
+              >
+                Remove
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div v-else class="space-y-3">
+      <div v-for="(item, i) in rows()" :key="i" class="space-y-2 rounded border p-3">
+        <div class="flex items-center justify-between">
+          <span class="text-xs font-medium text-zinc-500">Row {{ i + 1 }}</span>
+          <div class="flex items-center gap-2">
+            <button
+              type="button"
+              class="text-xs text-zinc-500 hover:text-zinc-900 disabled:opacity-30"
+              :disabled="i === 0"
+              @click="moveRow(i, -1)"
+            >
+              Move up
+            </button>
+            <button
+              type="button"
+              class="text-xs text-zinc-500 hover:text-zinc-900 disabled:opacity-30"
+              :disabled="i === rows().length - 1"
+              @click="moveRow(i, 1)"
+            >
+              Move down
+            </button>
+            <button
+              type="button"
+              class="text-xs text-red-600 disabled:opacity-30"
+              :disabled="!canRemove()"
+              @click="removeRow(i)"
+            >
+              Remove
+            </button>
+          </div>
+        </div>
+        <FieldRenderer
+          v-for="f in itemFields"
+          :key="f.path"
+          :field="f"
+          :model-value="item?.[f.path]"
+          :tree="tree"
+          :link-collections="linkCollections"
+          @update:modelValue="updateCell(i, f.path, $event)"
+        />
+      </div>
+    </div>
+
+    <button
+      v-if="canAdd()"
+      type="button"
+      class="text-sm rounded border px-3 py-1"
+      @click="addRow"
+    >
+      {{ addLabel || 'Add row' }}
+    </button>
+    <p v-else-if="maxRows" class="text-xs text-zinc-500">Maximum of {{ maxRows }} rows reached.</p>
+  </div>
+</template>

package/src/admin/components/fields/LinkField.vue

@@ -0,0 +1,219 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import type { LinkValue } from '../../../core/blueprints/definition.js'
+import { entryOptionLabel, useEntrySearch } from '../../composables/useEntrySearch.js'
+
+const props = defineProps<{
+  modelValue: LinkValue | null | undefined
+  label: string
+  collections?: string[]
+  tree?: boolean
+}>()
+
+const emit = defineEmits<{ (e: 'update:modelValue', v: LinkValue | null): void }>()
+
+type LinkMode = LinkValue['type']
+
+const mode = ref<LinkMode>('url')
+const url = ref('')
+const entryCollection = ref(props.collections?.[0] ?? '')
+const entryLabel = ref('')
+
+const entryCollections = computed(() => props.collections ?? [])
+
+const {
+  open,
+  query,
+  options,
+  loading,
+  resolveLabel,
+  openDropdown,
+  closeDropdown,
+  onBlur,
+} = useEntrySearch(() => {
+  const col = entryCollection.value || entryCollections.value[0]
+  return col ? [col] : []
+})
+
+function emitValue(value: LinkValue | null) {
+  emit('update:modelValue', value)
+}
+
+function onModeChange(next: LinkMode) {
+  mode.value = next
+  if (next === 'url') {
+    emitValue(url.value.trim() ? { type: 'url', url: url.value.trim() } : null)
+    return
+  }
+  if (next === 'first-child') {
+    emitValue({ type: 'first-child' })
+    return
+  }
+  emitValue(null)
+}
+
+function onUrlInput() {
+  const trimmed = url.value.trim()
+  emitValue(trimmed ? { type: 'url', url: trimmed } : null)
+}
+
+function selectEntry(option: { id: string; collection: string; title?: string; email?: string }) {
+  entryCollection.value = option.collection
+  entryLabel.value = entryOptionLabel(option)
+  emitValue({ type: 'entry', entryId: option.id, collection: option.collection })
+  query.value = ''
+  closeDropdown()
+}
+
+function clearEntry() {
+  entryLabel.value = ''
+  emitValue(null)
+}
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    if (!value) {
+      mode.value = 'url'
+      url.value = ''
+      entryLabel.value = ''
+      return
+    }
+    mode.value = value.type
+    if (value.type === 'url') {
+      url.value = value.url
+      return
+    }
+    if (value.type === 'entry') {
+      entryCollection.value = value.collection
+      void resolveLabel(value.entryId, value.collection).then((label) => {
+        entryLabel.value = label
+      })
+    }
+  },
+  { immediate: true },
+)
+
+watch(
+  entryCollections,
+  (cols) => {
+    if (cols.length === 1) entryCollection.value = cols[0]!
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <div class="block space-y-2">
+    <span class="text-sm text-zinc-600">{{ label }}</span>
+
+    <div class="flex flex-wrap gap-2">
+      <button
+        type="button"
+        class="rounded border px-3 py-1 text-sm"
+        :class="mode === 'url' ? 'border-zinc-900 bg-zinc-900 text-white' : 'border-zinc-300 bg-white text-zinc-700'"
+        @click="onModeChange('url')"
+      >
+        URL
+      </button>
+      <button
+        type="button"
+        class="rounded border px-3 py-1 text-sm"
+        :class="mode === 'entry' ? 'border-zinc-900 bg-zinc-900 text-white' : 'border-zinc-300 bg-white text-zinc-700'"
+        @click="onModeChange('entry')"
+      >
+        Entry
+      </button>
+      <button
+        v-if="tree"
+        type="button"
+        class="rounded border px-3 py-1 text-sm"
+        :class="mode === 'first-child' ? 'border-zinc-900 bg-zinc-900 text-white' : 'border-zinc-300 bg-white text-zinc-700'"
+        @click="onModeChange('first-child')"
+      >
+        First child
+      </button>
+    </div>
+
+    <input
+      v-if="mode === 'url'"
+      v-model="url"
+      type="url"
+      class="vulse-input mt-1 bg-white"
+      placeholder="https://example.com or /about"
+      @input="onUrlInput"
+    />
+
+    <div v-else-if="mode === 'entry'" class="space-y-2">
+      <select
+        v-if="entryCollections.length > 1"
+        v-model="entryCollection"
+        class="vulse-input bg-white text-sm"
+        @change="clearEntry()"
+      >
+        <option v-for="col in entryCollections" :key="col" :value="col">{{ col }}</option>
+      </select>
+
+      <div class="relative" @blur="onBlur">
+        <div class="flex gap-2">
+          <button
+            type="button"
+            class="vulse-input flex flex-1 items-center justify-between bg-white text-left"
+            :class="open && 'border-zinc-400'"
+            @click="open ? closeDropdown() : openDropdown()"
+          >
+            <span :class="modelValue?.type === 'entry' ? 'text-zinc-900' : 'text-zinc-400'">
+              {{
+                modelValue?.type === 'entry'
+                  ? entryLabel || modelValue.entryId
+                  : 'Select entry…'
+              }}
+            </span>
+            <span class="text-xs text-zinc-400">{{ open ? '▴' : '▾' }}</span>
+          </button>
+          <button
+            v-if="modelValue?.type === 'entry'"
+            type="button"
+            class="rounded border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-600 hover:bg-zinc-50"
+            @click="clearEntry"
+          >
+            Clear
+          </button>
+        </div>
+
+        <div
+          v-if="open"
+          class="absolute z-20 mt-1 w-full overflow-hidden rounded-md border border-zinc-200 bg-white shadow-lg"
+        >
+          <div class="border-b border-zinc-200 p-2">
+            <input
+              v-model="query"
+              type="search"
+              class="vulse-input bg-white"
+              placeholder="Search entries…"
+              autofocus
+              @keydown.esc.prevent="closeDropdown()"
+            />
+          </div>
+          <ul class="max-h-48 overflow-auto py-1 text-sm">
+            <li v-if="loading" class="px-3 py-2 text-zinc-500">Loading…</li>
+            <li v-else-if="options.length === 0" class="px-3 py-2 text-zinc-500">No matches</li>
+            <li v-for="option in options" v-else :key="option.id">
+              <button
+                type="button"
+                class="flex w-full items-center px-3 py-2 text-left hover:bg-zinc-100"
+                @click="selectEntry(option)"
+              >
+                {{ entryOptionLabel(option) }}
+              </button>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+    <p v-else-if="mode === 'first-child'" class="text-sm text-zinc-500">
+      Links to the first child entry in this collection tree.
+    </p>
+  </div>
+</template>

package/src/admin/components/fields/MediaField.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue'
+import { adminApi } from '../../client/api.js'
+import MediaPicker from '../MediaPicker.vue'
+
+const props = defineProps<{ modelValue: unknown; label?: string }>()
+const emit = defineEmits<{ (e: 'update:modelValue', v: string | null): void }>()
+
+interface MediaItem {
+  id: string
+  alt: string | null
+  deliveryUrl: string | null
+  previewUrl: string
+}
+
+const showPicker = ref(false)
+const preview = ref<MediaItem | null>(null)
+
+const mediaId = () => (typeof props.modelValue === 'string' && props.modelValue ? props.modelValue : null)
+
+function previewSrc(item: MediaItem): string {
+  return item.deliveryUrl ?? item.previewUrl
+}
+
+async function loadPreview() {
+  const id = mediaId()
+  if (!id) {
+    preview.value = null
+    return
+  }
+  const list = await adminApi.get<MediaItem[]>('/api/vulse/media')
+  preview.value = list.find((m) => m.id === id) ?? null
+}
+
+onMounted(loadPreview)
+watch(() => props.modelValue, loadPreview)
+
+function pick(id: string) {
+  emit('update:modelValue', id)
+  showPicker.value = false
+  loadPreview()
+}
+</script>
+
+<template>
+  <div class="space-y-2">
+    <div v-if="label" class="vulse-label">{{ label }}</div>
+    <div class="flex items-center gap-3">
+      <img
+        v-if="preview"
+        :src="previewSrc(preview)"
+        :alt="preview.alt ?? ''"
+        class="h-20 w-20 rounded border object-cover"
+      />
+      <button type="button" class="rounded border border-zinc-300 bg-white px-3 py-2 text-sm hover:bg-zinc-50" @click="showPicker = true">
+        {{ mediaId() ? 'Change…' : 'Pick media…' }}
+      </button>
+      <button
+        v-if="mediaId()"
+        type="button"
+        class="text-sm text-red-600 hover:underline"
+        @click="emit('update:modelValue', null)"
+      >
+        Clear
+      </button>
+    </div>
+    <MediaPicker v-if="showPicker" @pick="pick" @close="showPicker = false" />
+  </div>
+</template>

package/src/admin/components/fields/NumberField.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+defineProps<{ modelValue: number | null | undefined; label: string; required?: boolean }>()
+defineEmits<{ (e: 'update:modelValue', v: number | null): void }>()
+</script>
+<template>
+  <label class="block">
+    <span class="text-sm text-zinc-600">{{ label }}<span v-if="required" class="text-red-600">*</span></span>
+    <input type="number" :value="modelValue ?? ''"
+      @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value === '' ? null : Number(($event.target as HTMLInputElement).value))"
+      class="mt-1 w-full rounded border px-3 py-2" />
+  </label>
+</template>

package/src/admin/components/fields/ObjectField.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { FieldDescriptor } from '../../client/form-from-zod'
+import FieldRenderer from './FieldRenderer.vue'
+defineProps<{ modelValue: Record<string, unknown>; label: string; fields: FieldDescriptor[] }>()
+const emit = defineEmits<{ (e: 'update:modelValue', v: Record<string, unknown>): void }>()
+function set(path: string, v: unknown, current: Record<string, unknown>) {
+  emit('update:modelValue', { ...current, [path]: v })
+}
+</script>
+<template>
+  <fieldset class="border rounded p-4 space-y-3">
+    <legend class="text-sm font-medium px-2">{{ label }}</legend>
+    <FieldRenderer v-for="f in fields" :key="f.path"
+      :field="f"
+      :model-value="modelValue?.[f.path]"
+      @update:modelValue="set(f.path, $event, modelValue ?? {})" />
+  </fieldset>
+</template>

package/src/admin/components/fields/RefField.vue

@@ -0,0 +1,170 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { adminApi } from '../../client/api.js'
+
+const props = defineProps<{ modelValue: string | null; label: string; refTarget: string }>()
+const emit = defineEmits<{ (e: 'update:modelValue', v: string | null): void }>()
+
+interface RefOption {
+  id: string
+  title?: string
+  email?: string
+}
+
+const open = ref(false)
+const query = ref('')
+const options = ref<RefOption[]>([])
+const loading = ref(false)
+const selectedLabel = ref('')
+
+function optionLabel(option: RefOption): string {
+  return option.title ?? option.email ?? option.id
+}
+
+async function loadOptions(search = '') {
+  loading.value = true
+  try {
+    if (props.refTarget === 'user') {
+      options.value = await adminApi.get<RefOption[]>(
+        `/api/vulse/users?q=${encodeURIComponent(search)}`,
+      )
+      return
+    }
+
+    const rows = await adminApi.get<{ id: string; content?: { title?: string }; slug?: string }[]>(
+      `/api/vulse/entries/${props.refTarget}`,
+    )
+    const needle = search.trim().toLowerCase()
+    options.value = rows
+      .map((row) => ({
+        id: row.id,
+        title: row.content?.title ?? row.slug ?? row.id,
+      }))
+      .filter((row) => {
+        if (!needle) return true
+        return optionLabel(row).toLowerCase().includes(needle)
+      })
+  } finally {
+    loading.value = false
+  }
+}
+
+async function resolveSelectedLabel(id: string | null) {
+  if (!id) {
+    selectedLabel.value = ''
+    return
+  }
+
+  if (props.refTarget === 'user') {
+    const users = await adminApi.get<RefOption[]>(`/api/vulse/users?q=${encodeURIComponent(id)}`)
+    const match = users.find((user) => user.id === id)
+    selectedLabel.value = match ? optionLabel(match) : id
+    return
+  }
+
+  const row = await adminApi.get<{ id: string; content?: { title?: string }; slug?: string }>(
+    `/api/vulse/entries/${props.refTarget}/${id}`,
+  )
+  selectedLabel.value = row.content?.title ?? row.slug ?? row.id
+}
+
+function openDropdown() {
+  open.value = true
+  void loadOptions(query.value)
+}
+
+function closeDropdown() {
+  open.value = false
+}
+
+function onBlur(event: FocusEvent) {
+  const next = event.relatedTarget as Node | null
+  if (next && (event.currentTarget as HTMLElement).contains(next)) return
+  closeDropdown()
+}
+
+function selectOption(option: RefOption) {
+  emit('update:modelValue', option.id)
+  selectedLabel.value = optionLabel(option)
+  query.value = ''
+  closeDropdown()
+}
+
+function clearSelection() {
+  emit('update:modelValue', null)
+  selectedLabel.value = ''
+  query.value = ''
+}
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    void resolveSelectedLabel(value)
+  },
+  { immediate: true },
+)
+
+watch(query, (value) => {
+  if (!open.value) return
+  void loadOptions(value)
+})
+</script>
+
+<template>
+  <label class="block">
+    <span class="text-sm text-zinc-600">{{ label }}</span>
+    <div class="relative mt-1" @blur="onBlur">
+      <div class="flex gap-2">
+        <button
+          type="button"
+          class="vulse-input flex flex-1 items-center justify-between bg-white text-left"
+          :class="open && 'border-zinc-400'"
+          @click="open ? closeDropdown() : openDropdown()"
+        >
+          <span :class="modelValue ? 'text-zinc-900' : 'text-zinc-400'">
+            {{ modelValue ? selectedLabel || modelValue : `Select ${refTarget}…` }}
+          </span>
+          <span class="text-xs text-zinc-400">{{ open ? '▴' : '▾' }}</span>
+        </button>
+        <button
+          v-if="modelValue"
+          type="button"
+          class="rounded border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-600 hover:bg-zinc-50"
+          @click="clearSelection"
+        >
+          Clear
+        </button>
+      </div>
+
+      <div
+        v-if="open"
+        class="absolute z-20 mt-1 w-full overflow-hidden rounded-md border border-zinc-200 bg-white shadow-lg"
+      >
+        <div class="border-b border-zinc-200 p-2">
+          <input
+            v-model="query"
+            type="search"
+            class="vulse-input bg-white"
+            :placeholder="`Search ${refTarget}…`"
+            autofocus
+            @keydown.esc.prevent="closeDropdown()"
+          />
+        </div>
+        <ul class="max-h-48 overflow-auto py-1 text-sm">
+          <li v-if="loading" class="px-3 py-2 text-zinc-500">Loading…</li>
+          <li v-else-if="options.length === 0" class="px-3 py-2 text-zinc-500">No matches</li>
+          <li v-for="option in options" v-else :key="option.id">
+            <button
+              type="button"
+              class="flex w-full items-center px-3 py-2 text-left hover:bg-zinc-100"
+              :class="option.id === modelValue && 'bg-zinc-50 font-medium'"
+              @click="selectOption(option)"
+            >
+              {{ optionLabel(option) }}
+            </button>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </label>
+</template>

package/src/admin/components/fields/RepeaterField.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { FieldDescriptor } from '../../client/form-from-zod'
+import FieldRenderer from './FieldRenderer.vue'
+const props = defineProps<{ modelValue: Record<string, unknown>[]; label: string; itemFields: FieldDescriptor[] }>()
+const emit = defineEmits<{ (e: 'update:modelValue', v: Record<string, unknown>[]): void }>()
+function update(i: number, key: string, v: unknown) {
+  const next = [...(props.modelValue ?? [])]
+  next[i] = { ...next[i], [key]: v }
+  emit('update:modelValue', next)
+}
+function add() { emit('update:modelValue', [...(props.modelValue ?? []), {}]) }
+function remove(i: number) {
+  const next = [...(props.modelValue ?? [])]; next.splice(i, 1); emit('update:modelValue', next)
+}
+</script>
+<template>
+  <div class="space-y-2">
+    <div class="text-sm text-zinc-600">{{ label }}</div>
+    <div v-for="(item, i) in modelValue ?? []" :key="i" class="border rounded p-3 space-y-2">
+      <FieldRenderer v-for="f in itemFields" :key="f.path"
+        :field="f" :model-value="item?.[f.path]"
+        @update:modelValue="update(i, f.path, $event)" />
+      <button type="button" @click="remove(i)" class="text-sm text-red-600">Remove</button>
+    </div>
+    <button type="button" @click="add" class="text-sm rounded border px-3 py-1">Add</button>
+  </div>
+</template>