@bobbykim/manguito-cms-admin 0.1.1 → 0.3.0

package/src/components/fields/ReferenceSelect.vue

@@ -0,0 +1,275 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useDebounceFn } from '@vueuse/core'
+import type { ParsedField } from '@bobbykim/manguito-cms-core'
+import { useApiClient } from '../../composables/useApiClient'
+import { useSchemaStore } from '../../stores/schema'
+
+const props = defineProps<{
+  field: ParsedField
+  modelValue: unknown
+  error?: string
+  disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | null | string[]]
+}>()
+
+const api = useApiClient()
+const schemaStore = useSchemaStore()
+
+const typeaheadComp = computed(() => {
+  const c = props.field.ui_component
+  return c.component === 'typeahead-select' ? c : null
+})
+
+const refName = computed(() => typeaheadComp.value?.ref ?? '')
+const relType = computed(() => typeaheadComp.value?.rel ?? 'one-to-one')
+const maxItems = computed(() => props.field.validation.max_items ?? null)
+const isMulti = computed(() => relType.value !== 'one-to-one')
+const isContentRef = computed(() => !!schemaStore.contentTypes[refName.value])
+
+// First text/plain field in the referenced schema — used as the display label.
+const titleField = computed<string>(() => {
+  const schema = isContentRef.value
+    ? schemaStore.contentTypes[refName.value]
+    : schemaStore.taxonomyTypes[refName.value]
+  return schema?.fields.find(f => f.field_type === 'text/plain')?.name ?? 'id'
+})
+
+const selectedIds = computed<string[]>(() => {
+  if (isMulti.value) {
+    return Array.isArray(props.modelValue)
+      ? (props.modelValue as unknown[]).filter((v): v is string => typeof v === 'string')
+      : []
+  }
+  return typeof props.modelValue === 'string' ? [props.modelValue] : []
+})
+
+const atLimit = computed(
+  () => maxItems.value !== null && selectedIds.value.length >= maxItems.value
+)
+
+// Safe accessor for the one-to-one case — avoids undefined index type errors.
+const singleId = computed(() => selectedIds.value[0] ?? '')
+
+// id → display label for chips; populated on select and on mount.
+const selectedLabels = ref<Record<string, string>>({})
+
+const query = ref('')
+const loading = ref(false)
+const results = ref<Record<string, unknown>[]>([])
+const showDropdown = ref(false)
+
+function basePath(): string {
+  return isContentRef.value
+    ? `/content/${refName.value}`
+    : `/taxonomy/${refName.value}`
+}
+
+function buildSearchPath(q: string): string {
+  const params = new URLSearchParams({
+    [`filters[${titleField.value}][like]`]: q,
+    per_page: '10',
+  })
+  return `${basePath()}?${params.toString()}`
+}
+
+function labelFor(item: Record<string, unknown>): string {
+  return String(item[titleField.value] ?? item.id ?? '')
+}
+
+const doSearch = useDebounceFn(async (q: string) => {
+  if (q.length < 2) {
+    results.value = []
+    showDropdown.value = false
+    return
+  }
+  loading.value = true
+  showDropdown.value = true
+  const res = await api.get<Record<string, unknown>[]>(buildSearchPath(q))
+  loading.value = false
+  if (res.ok) {
+    results.value = res.data
+  }
+}, 300)
+
+function onInput(e: Event) {
+  query.value = (e.target as HTMLInputElement).value
+  doSearch(query.value)
+}
+
+function onFocusOut() {
+  // Delay so mousedown on a result item can fire before the dropdown closes.
+  setTimeout(() => {
+    showDropdown.value = false
+  }, 150)
+}
+
+function onFocus() {
+  if (query.value.length >= 2) showDropdown.value = true
+}
+
+function selectItem(item: Record<string, unknown>) {
+  const id = String(item.id)
+  selectedLabels.value[id] = labelFor(item)
+  query.value = ''
+  results.value = []
+  showDropdown.value = false
+
+  if (isMulti.value) {
+    const next = [...selectedIds.value]
+    if (!next.includes(id)) next.push(id)
+    emit('update:modelValue', next)
+  } else {
+    emit('update:modelValue', id)
+  }
+}
+
+function removeItem(id: string) {
+  if (isMulti.value) {
+    emit('update:modelValue', selectedIds.value.filter(i => i !== id))
+  } else {
+    emit('update:modelValue', null)
+  }
+}
+
+// Fetch display labels for any IDs already present when the component mounts.
+onMounted(async () => {
+  for (const id of selectedIds.value) {
+    if (selectedLabels.value[id]) continue
+    const res = await api.get<Record<string, unknown>>(`${basePath()}/${id}`)
+    if (res.ok) {
+      selectedLabels.value[id] = labelFor(res.data as Record<string, unknown>)
+    } else {
+      selectedLabels.value[id] = id
+    }
+  }
+})
+</script>
+
+<template>
+  <div>
+    <label class="block text-[13px] font-semibold text-[#3D3D52]">
+      {{ field.label }}
+      <span v-if="field.required" class="ml-0.5 text-red-500" aria-hidden="true">*</span>
+    </label>
+
+    <!-- Removable chips — one-to-many / many-to-many -->
+    <div
+      v-if="isMulti && selectedIds.length"
+      class="mt-1.5 flex flex-wrap gap-1.5"
+    >
+      <span
+        v-for="id in selectedIds"
+        :key="id"
+        class="inline-flex items-center gap-1 rounded-full bg-indigo-100 px-2.5 py-0.5 text-xs font-medium text-indigo-800"
+      >
+        {{ selectedLabels[id] ?? id }}
+        <button
+          type="button"
+          :disabled="disabled"
+          class="ml-0.5 flex h-3.5 w-3.5 items-center justify-center rounded-full hover:bg-indigo-200 disabled:cursor-not-allowed"
+          :aria-label="`Remove ${selectedLabels[id] ?? id}`"
+          @click="removeItem(id)"
+        >
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </span>
+    </div>
+
+    <!-- Single chip — one-to-one -->
+    <div
+      v-else-if="!isMulti && selectedIds.length"
+      class="mt-1.5"
+    >
+      <span
+        class="inline-flex items-center gap-1 rounded-full bg-indigo-100 px-2.5 py-0.5 text-xs font-medium text-indigo-800"
+      >
+        {{ selectedLabels[singleId] ?? singleId }}
+        <button
+          type="button"
+          :disabled="disabled"
+          class="ml-0.5 flex h-3.5 w-3.5 items-center justify-center rounded-full hover:bg-indigo-200 disabled:cursor-not-allowed"
+          aria-label="Clear selection"
+          @click="removeItem(singleId)"
+        >
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </span>
+    </div>
+
+    <!-- X / Y counter when a max is configured -->
+    <p
+      v-if="maxItems !== null"
+      class="mt-0.5 text-xs text-gray-500"
+    >
+      {{ selectedIds.length }} / {{ maxItems }} selected
+    </p>
+
+    <!-- Search input -->
+    <div class="relative mt-1">
+      <input
+        :id="field.name"
+        type="text"
+        :value="query"
+        :disabled="disabled || atLimit"
+        :placeholder="atLimit ? 'Limit reached' : `Search ${field.label}…`"
+        :class="[
+          'block w-full rounded-[11px] border px-3.5 py-3 text-sm focus:outline-none focus:ring-[3px]',
+          error
+            ? 'border-red-300 focus:border-red-400 focus:ring-red-200'
+              : 'border-[#E4E3EE] bg-[#FBFBFD] focus:border-indigo-400 focus:bg-white focus:ring-indigo-50',
+          (disabled || atLimit) && 'cursor-not-allowed bg-gray-50 opacity-60',
+        ]"
+        autocomplete="off"
+        @input="onInput"
+        @focus="onFocus"
+        @focusout="onFocusOut"
+      />
+
+      <!-- Dropdown -->
+      <ul
+        v-if="showDropdown"
+        role="listbox"
+        class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-sm shadow-lg ring-1 ring-black/5 focus:outline-none"
+      >
+        <!-- Loading spinner -->
+        <li v-if="loading" class="flex items-center gap-2 px-3 py-2 text-gray-400">
+          <span
+            class="inline-block h-3.5 w-3.5 animate-spin rounded-full border-2 border-indigo-500 border-t-transparent"
+            aria-hidden="true"
+          />
+          Searching…
+        </li>
+
+        <template v-else>
+          <!-- No results -->
+          <li
+            v-if="results.length === 0"
+            class="px-3 py-2 text-gray-500"
+          >
+            No results found for "{{ query }}"
+          </li>
+
+          <!-- Result items -->
+          <li
+            v-for="item in results"
+            :key="String(item.id)"
+            role="option"
+            class="cursor-pointer px-3 py-2 hover:bg-indigo-50"
+            @mousedown.prevent
+            @click="selectItem(item)"
+          >
+            {{ labelFor(item) }}
+          </li>
+        </template>
+      </ul>
+    </div>
+
+    <p v-if="error" class="mt-1 text-sm text-red-600" role="alert">
+      {{ error }}
+    </p>
+  </div>
+</template>

package/src/components/fields/RichTextEditor.vue

@@ -0,0 +1,293 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { onClickOutside } from '@vueuse/core'
+import { useEditor, EditorContent } from '@tiptap/vue-3'
+import StarterKit from '@tiptap/starter-kit'
+import Link from '@tiptap/extension-link'
+import type { ParsedField } from '@bobbykim/manguito-cms-core'
+
+const props = defineProps<{
+  field: ParsedField
+  modelValue: unknown
+  error?: string
+  disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const editor = useEditor({
+  content: typeof props.modelValue === 'string' ? props.modelValue : '',
+  editable: !props.disabled,
+  extensions: [
+    StarterKit,
+    Link.configure({ openOnClick: false }),
+  ],
+  onUpdate: ({ editor: e }) => {
+    emit('update:modelValue', e.getHTML())
+  },
+})
+
+// Sync editor content when modelValue changes from outside (form reset / initial load).
+watch(
+  () => props.modelValue,
+  (v) => {
+    const html = typeof v === 'string' ? v : ''
+    if (editor.value && editor.value.getHTML() !== html) {
+      editor.value.commands.setContent(html, false)
+    }
+  }
+)
+
+// Sync editable state when disabled changes.
+watch(
+  () => props.disabled,
+  (val) => {
+    editor.value?.setEditable(!val)
+  }
+)
+
+type Level = 1 | 2 | 3
+
+function cmd(fn: () => void) {
+  if (!props.disabled) fn()
+}
+
+function isActive(name: string, attrs?: Record<string, unknown>) {
+  return editor.value?.isActive(name, attrs) ?? false
+}
+
+// ── Link popover ──────────────────────────────────────────────────────────────
+
+const showLinkPanel = ref(false)
+const linkUrl = ref('')
+const linkTarget = ref<'_self' | '_blank'>('_self')
+const linkClass = ref('')
+const linkPanelRef = ref<HTMLElement | null>(null)
+
+onClickOutside(linkPanelRef, () => closeLinkPanel())
+
+function toggleLinkPanel() {
+  if (showLinkPanel.value) {
+    closeLinkPanel()
+    return
+  }
+  const attrs = editor.value?.getAttributes('link') ?? {}
+  linkUrl.value = typeof attrs['href'] === 'string' ? attrs['href'] : ''
+  linkTarget.value = attrs['target'] === '_blank' ? '_blank' : '_self'
+  linkClass.value = typeof attrs['class'] === 'string' ? attrs['class'] : ''
+  showLinkPanel.value = true
+}
+
+function closeLinkPanel() {
+  showLinkPanel.value = false
+}
+
+function applyLink() {
+  const url = linkUrl.value.trim()
+  if (!url) {
+    editor.value?.chain().focus().extendMarkRange('link').unsetLink().run()
+  } else {
+    editor.value
+      ?.chain()
+      .focus()
+      .extendMarkRange('link')
+      .setLink({
+        href: url,
+        target: linkTarget.value,
+        rel: linkTarget.value === '_blank' ? 'noopener noreferrer' : null,
+        class: linkClass.value.trim() || null,
+      })
+      .run()
+  }
+  closeLinkPanel()
+}
+
+function removeLink() {
+  editor.value?.chain().focus().extendMarkRange('link').unsetLink().run()
+  closeLinkPanel()
+}
+</script>
+
+<template>
+  <div>
+    <span class="block text-[13px] font-semibold text-[#3D3D52]">
+      {{ field.label }}
+      <span v-if="field.required" class="ml-0.5 text-red-500" aria-hidden="true">*</span>
+    </span>
+
+    <div
+      :class="[
+        'mt-1 rounded-md border shadow-sm',
+        error ? 'border-red-300' : 'border-gray-300',
+        disabled && 'opacity-60',
+      ]"
+    >
+      <!-- Toolbar — rounded-t (not overflow-hidden on the wrapper) so the link
+           popover below isn't clipped by the editor's own rounded-corner box. -->
+      <div
+        class="flex flex-wrap gap-0.5 rounded-t-md border-b border-gray-200 bg-gray-50 px-2 py-1.5"
+        :aria-label="`${field.label} formatting toolbar`"
+      >
+        <!-- Bold -->
+        <button
+          type="button"
+          title="Bold"
+          :class="['rounded px-2 py-1 text-xs font-bold', isActive('bold') ? 'bg-gray-200' : 'hover:bg-gray-200']"
+          :disabled="disabled"
+          @click="cmd(() => editor?.chain().focus().toggleBold().run())"
+        >
+          B
+        </button>
+
+        <!-- Italic -->
+        <button
+          type="button"
+          title="Italic"
+          :class="['rounded px-2 py-1 text-xs italic', isActive('italic') ? 'bg-gray-200' : 'hover:bg-gray-200']"
+          :disabled="disabled"
+          @click="cmd(() => editor?.chain().focus().toggleItalic().run())"
+        >
+          I
+        </button>
+
+        <span class="mx-1 text-gray-300" aria-hidden="true">|</span>
+
+        <!-- H1 -->
+        <button
+          v-for="level in ([1, 2, 3] as Level[])"
+          :key="level"
+          type="button"
+          :title="`Heading ${level}`"
+          :class="[
+            'rounded px-2 py-1 text-xs font-semibold',
+            isActive('heading', { level }) ? 'bg-gray-200' : 'hover:bg-gray-200',
+          ]"
+          :disabled="disabled"
+          @click="cmd(() => editor?.chain().focus().toggleHeading({ level }).run())"
+        >
+          H{{ level }}
+        </button>
+
+        <span class="mx-1 text-gray-300" aria-hidden="true">|</span>
+
+        <!-- Bullet list -->
+        <button
+          type="button"
+          title="Bullet list"
+          :class="['rounded px-2 py-1 text-xs', isActive('bulletList') ? 'bg-gray-200' : 'hover:bg-gray-200']"
+          :disabled="disabled"
+          @click="cmd(() => editor?.chain().focus().toggleBulletList().run())"
+        >
+          • List
+        </button>
+
+        <!-- Ordered list -->
+        <button
+          type="button"
+          title="Ordered list"
+          :class="['rounded px-2 py-1 text-xs', isActive('orderedList') ? 'bg-gray-200' : 'hover:bg-gray-200']"
+          :disabled="disabled"
+          @click="cmd(() => editor?.chain().focus().toggleOrderedList().run())"
+        >
+          1. List
+        </button>
+
+        <span class="mx-1 text-gray-300" aria-hidden="true">|</span>
+
+        <!-- Link -->
+        <div ref="linkPanelRef" class="relative">
+          <button
+            type="button"
+            title="Link"
+            :class="['rounded px-2 py-1 text-xs', isActive('link') ? 'bg-gray-200' : 'hover:bg-gray-200']"
+            :disabled="disabled"
+            @click="cmd(toggleLinkPanel)"
+          >
+            Link
+          </button>
+
+          <div
+            v-if="showLinkPanel"
+            class="absolute left-0 top-full z-10 mt-1 w-64 rounded-md border border-gray-200 bg-white p-3 text-left shadow-lg"
+          >
+            <label class="block text-xs font-medium text-gray-700">URL</label>
+            <input
+              v-model="linkUrl"
+              type="text"
+              placeholder="https://example.com"
+              class="mt-1 block w-full rounded border border-gray-300 px-2 py-1 text-xs focus:border-indigo-400 focus:outline-none focus:ring-2 focus:ring-indigo-200"
+            />
+
+            <label class="mt-2 block text-xs font-medium text-gray-700">Target</label>
+            <select
+              v-model="linkTarget"
+              class="mt-1 block w-full rounded border border-gray-300 px-2 py-1 text-xs focus:border-indigo-400 focus:outline-none focus:ring-2 focus:ring-indigo-200"
+            >
+              <option value="_self">Same tab (_self)</option>
+              <option value="_blank">New tab (_blank)</option>
+            </select>
+
+            <label class="mt-2 block text-xs font-medium text-gray-700">
+              CSS class <span class="font-normal text-gray-400">(optional)</span>
+            </label>
+            <input
+              v-model="linkClass"
+              type="text"
+              placeholder="btn btn-primary"
+              class="mt-1 block w-full rounded border border-gray-300 px-2 py-1 text-xs focus:border-indigo-400 focus:outline-none focus:ring-2 focus:ring-indigo-200"
+            />
+
+            <div class="mt-3 flex items-center justify-between gap-2">
+              <button
+                v-if="isActive('link')"
+                type="button"
+                class="text-xs font-medium text-red-600 hover:text-red-800"
+                @click="removeLink"
+              >
+                Remove link
+              </button>
+              <div class="ml-auto flex gap-2">
+                <button
+                  type="button"
+                  class="rounded px-2 py-1 text-xs text-gray-600 hover:bg-gray-100"
+                  @click="closeLinkPanel"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="button"
+                  class="rounded bg-indigo-600 px-2 py-1 text-xs font-medium text-white hover:bg-indigo-700"
+                  @click="applyLink"
+                >
+                  Apply
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Editor content — v-if narrows Editor | undefined → Editor for the prop -->
+      <EditorContent
+        v-if="editor"
+        :editor="editor"
+        :class="[
+          'rounded-b-md px-3 py-2 text-sm [&_.ProseMirror]:min-h-32 [&_.ProseMirror]:cursor-text [&_.ProseMirror]:outline-none',
+          '[&_.ProseMirror_h1]:text-xl [&_.ProseMirror_h1]:font-bold',
+          '[&_.ProseMirror_h2]:text-lg [&_.ProseMirror_h2]:font-bold',
+          '[&_.ProseMirror_h3]:text-base [&_.ProseMirror_h3]:font-semibold',
+          '[&_.ProseMirror_ul]:list-disc [&_.ProseMirror_ul]:pl-5',
+          '[&_.ProseMirror_ol]:list-decimal [&_.ProseMirror_ol]:pl-5',
+          '[&_.ProseMirror_a]:text-indigo-600 [&_.ProseMirror_a]:underline',
+          disabled && 'cursor-not-allowed [&_.ProseMirror]:cursor-not-allowed',
+        ]"
+      />
+    </div>
+
+    <p v-if="error" class="mt-1 text-sm text-red-600" role="alert">
+      {{ error }}
+    </p>
+  </div>
+</template>

package/src/components/fields/TextInput.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import type { ParsedField } from '@bobbykim/manguito-cms-core'
+
+const props = defineProps<{
+  field: ParsedField
+  modelValue: unknown
+  error?: string
+  disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const isSlugField = computed(
+  () => props.field.name === 'slug' || props.field.name.endsWith('_slug')
+)
+
+// Local raw text — allows free typing while emitting formatted slug value.
+const localText = ref(typeof props.modelValue === 'string' ? props.modelValue : '')
+
+// Sync when modelValue changes from outside (form reset / initial load).
+watch(
+  () => props.modelValue,
+  (v) => {
+    if (typeof v === 'string' && v !== localText.value) {
+      localText.value = v
+    }
+  }
+)
+
+function formatSlug(value: string): string {
+  return value
+    .toLowerCase()
+    .replace(/\s+/g, '-')
+    .replace(/[^a-z0-9-]/g, '')
+    .replace(/-+/g, '-')
+    .replace(/^-|-$/g, '')
+}
+
+const slugPreview = computed(() =>
+  isSlugField.value ? formatSlug(localText.value) : ''
+)
+
+function onInput(event: Event) {
+  const value = (event.target as HTMLInputElement).value
+  localText.value = value
+  emit('update:modelValue', isSlugField.value ? formatSlug(value) : value)
+}
+</script>
+
+<template>
+  <div>
+    <label
+      :for="field.name"
+      class="block text-[13px] font-semibold text-[#3D3D52]"
+    >
+      {{ field.label }}
+      <span v-if="field.required" class="ml-0.5 text-red-500" aria-hidden="true">*</span>
+    </label>
+
+    <div class="mt-1">
+      <input
+        :id="field.name"
+        type="text"
+        :value="localText"
+        :disabled="disabled"
+        :placeholder="field.label"
+        :class="[
+          'block w-full rounded-[11px] border px-3.5 py-3 text-sm focus:outline-none focus:ring-[3px]',
+          error
+            ? 'border-red-300 focus:border-red-400 focus:ring-red-200'
+              : 'border-[#E4E3EE] bg-[#FBFBFD] focus:border-indigo-400 focus:bg-white focus:ring-indigo-50',
+          disabled && 'cursor-not-allowed bg-gray-50 opacity-60',
+        ]"
+        @input="onInput"
+      />
+    </div>
+
+    <!-- Slug format preview — shown below for slug fields -->
+    <p
+      v-if="isSlugField && localText"
+      class="mt-1 text-xs text-gray-500"
+    >
+      Slug: <span class="font-mono">{{ slugPreview }}</span>
+    </p>
+
+    <p v-if="error" class="mt-1 text-sm text-red-600" role="alert">
+      {{ error }}
+    </p>
+  </div>
+</template>

package/src/components/fields/__tests__/BooleanToggle.test.ts

@@ -0,0 +1,37 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import type { ParsedField } from '@bobbykim/manguito-cms-core'
+import BooleanToggle from '../BooleanToggle.vue'
+
+function makeField(overrides: Partial<ParsedField> = {}): ParsedField {
+  return {
+    name: 'is_active',
+    label: 'Is Active',
+    field_type: 'boolean',
+    required: false,
+    nullable: false,
+    order: 0,
+    validation: { required: false },
+    db_column: { column_name: 'is_active', column_type: 'boolean', nullable: false },
+    ui_component: { component: 'checkbox' },
+    ...overrides,
+  }
+}
+
+describe('BooleanToggle', () => {
+  it('emits true when toggled from off to on', async () => {
+    const wrapper = mount(BooleanToggle, {
+      props: { field: makeField(), modelValue: false },
+    })
+    await wrapper.find('button[role="switch"]').trigger('click')
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([true])
+  })
+
+  it('emits false when toggled from on to off', async () => {
+    const wrapper = mount(BooleanToggle, {
+      props: { field: makeField(), modelValue: true },
+    })
+    await wrapper.find('button[role="switch"]').trigger('click')
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
+  })
+})