@edc-motor/admin-kit 0.2.0

package/src/content/SchemaFields.vue

@@ -0,0 +1,308 @@
+<script setup lang="ts">
+import type { AxiosInstance } from 'axios'
+import { ArrowDown, ArrowUp, Plus, X } from '@lucide/vue'
+import {
+  BaseButton,
+  BaseCheckbox,
+  BaseInput,
+  BaseSelect,
+  BaseTextarea,
+  IconButton,
+  ImageUpload,
+  NumericInput,
+  PaletteColorPicker,
+  RichTextInput,
+  TranslatableImage,
+  TranslatableInput,
+  type RichIcon,
+  type RichTextLabels,
+  type SelectOption,
+} from '@edc-motor/ui'
+import EntityRefSelect from './EntityRefSelect.vue'
+
+// Renderer del DSL de campos (DC-08): pinta el formulario de un bloque a
+// partir del esquema serializado del BlockType (GET /admin/block-types).
+// Añadir un tipo de bloque NO toca este componente. Los tipos anidados
+// (group y repeater) se pintan con RECURSIÓN sobre sí mismo; entity con un
+// buscador alimentado por el endpoint de opciones del juego.
+// Agnóstico de i18n (DC-29): etiquetas del esquema (castellano) con gancho
+// `translate` para que el juego las localice por convención.
+
+export interface FieldSchema {
+  key: string
+  type: string
+  label: string
+  translatable: boolean
+  required: boolean
+  default: unknown
+  options: Record<string, string> | null
+  min: number | null
+  max: number | null
+  /** Subcampos de group/repeater. */
+  fields?: FieldSchema[] | null
+  /** Para entity: endpoint de opciones del admin. */
+  options_url?: string | null
+}
+
+const props = withDefaults(
+  defineProps<{
+    fields: FieldSchema[]
+    modelValue: Record<string, unknown>
+    locales: { code: string; name: string }[]
+    /** Cliente de la API del admin (sube las imágenes de contenido). */
+    api: AxiosInstance
+    /** Iconos del juego para el WYSIWYG. */
+    icons?: RichIcon[]
+    richLabels?: Partial<RichTextLabels>
+    /** Localiza etiquetas: (clave, fallback) => texto. */
+    translate?: (key: string, fallback: string) => string
+  }>(),
+  { icons: () => [], richLabels: () => ({}), translate: undefined },
+)
+
+const emit = defineEmits<{ 'update:modelValue': [value: Record<string, unknown>] }>()
+
+function label(field: FieldSchema): string {
+  return props.translate?.(`blockFields.${field.key}`, field.label) ?? field.label
+}
+
+function set(key: string, value: unknown) {
+  emit('update:modelValue', { ...props.modelValue, [key]: value })
+}
+
+function translations(field: FieldSchema): Record<string, string> {
+  const value = props.modelValue[field.key]
+  // Guarda ante datos antiguos guardados como cadena única (no traducible).
+  if (!value || typeof value !== 'object') return {}
+  return value as Record<string, string>
+}
+
+function selectOptions(field: FieldSchema): SelectOption[] {
+  return Object.entries(field.options ?? {}).map(([value, text]) => ({
+    value,
+    label: props.translate?.(`blockOptions.${field.key}.${value}`, text) ?? text,
+  }))
+}
+
+/** Sube la imagen al momento; en settings queda la URL pública. */
+async function upload(file: File): Promise<string> {
+  const form = new FormData()
+  form.append('image', file)
+  const { data } = await props.api.post('/admin/content/uploads', form)
+  return data.url
+}
+
+async function uploadImage(field: FieldSchema, file: File | null) {
+  set(field.key, file ? await upload(file) : null)
+}
+
+// --- Anidados (group / repeater) ---
+
+function groupValue(field: FieldSchema): Record<string, unknown> {
+  const value = props.modelValue[field.key]
+  return value && typeof value === 'object' && !Array.isArray(value)
+    ? (value as Record<string, unknown>)
+    : {}
+}
+
+function rows(field: FieldSchema): Record<string, unknown>[] {
+  const value = props.modelValue[field.key]
+  return Array.isArray(value) ? (value as Record<string, unknown>[]) : []
+}
+
+function setRow(field: FieldSchema, index: number, row: Record<string, unknown>) {
+  const list = [...rows(field)]
+  list[index] = row
+  set(field.key, list)
+}
+
+function addRow(field: FieldSchema) {
+  set(field.key, [...rows(field), {}])
+}
+
+function removeRow(field: FieldSchema, index: number) {
+  set(
+    field.key,
+    rows(field).filter((_, i) => i !== index),
+  )
+}
+
+function moveRow(field: FieldSchema, index: number, delta: number) {
+  const list = [...rows(field)]
+  const target = index + delta
+  if (target < 0 || target >= list.length) return
+  ;[list[index], list[target]] = [list[target], list[index]]
+  set(field.key, list)
+}
+
+function addLabel(): string {
+  return props.translate?.('blockEditor.addRow', 'Añadir') ?? 'Añadir'
+}
+</script>
+
+<template>
+  <div class="schema-fields">
+    <template v-for="field in fields" :key="field.key">
+      <!-- Traducibles: text / textarea / richtext van al TranslatableInput -->
+      <TranslatableInput
+        v-if="field.translatable && ['text', 'textarea', 'richtext'].includes(field.type)"
+        :model-value="translations(field)"
+        :locales="locales"
+        :label="label(field)"
+        :required="field.required"
+        :type="
+          field.type === 'richtext' ? 'wysiwyg' : field.type === 'textarea' ? 'textarea' : 'text'
+        "
+        :icons="icons"
+        :rich-labels="richLabels"
+        @update:model-value="(v) => set(field.key, v)"
+      />
+
+      <BaseInput
+        v-else-if="field.type === 'text'"
+        :model-value="(modelValue[field.key] as string) ?? ''"
+        :label="label(field)"
+        :required="field.required"
+        @update:model-value="(v) => set(field.key, v)"
+      />
+
+      <BaseTextarea
+        v-else-if="field.type === 'textarea'"
+        :model-value="(modelValue[field.key] as string) ?? ''"
+        :label="label(field)"
+        @update:model-value="(v: string) => set(field.key, v)"
+      />
+
+      <RichTextInput
+        v-else-if="field.type === 'richtext'"
+        :model-value="(modelValue[field.key] as string) ?? ''"
+        :icons="icons"
+        :labels="richLabels"
+        @update:model-value="(v: string) => set(field.key, v)"
+      />
+
+      <NumericInput
+        v-else-if="field.type === 'number'"
+        :model-value="(modelValue[field.key] as number) ?? (field.default as number) ?? 0"
+        :label="label(field)"
+        :min="field.min ?? 0"
+        :max="field.max ?? undefined"
+        @update:model-value="(v) => set(field.key, v)"
+      />
+
+      <BaseCheckbox
+        v-else-if="field.type === 'boolean'"
+        :model-value="Boolean(modelValue[field.key] ?? field.default)"
+        :label="label(field)"
+        @update:model-value="(v) => set(field.key, v)"
+      />
+
+      <BaseSelect
+        v-else-if="field.type === 'select'"
+        :model-value="(modelValue[field.key] as string) ?? (field.default as string) ?? ''"
+        :label="label(field)"
+        :options="selectOptions(field)"
+        @update:model-value="(v) => set(field.key, v)"
+      />
+
+      <div v-else-if="field.type === 'color'" class="schema-fields__color">
+        <span class="form-field__label">{{ label(field) }}</span>
+        <PaletteColorPicker
+          :model-value="(modelValue[field.key] as string) ?? null"
+          @update:model-value="(v) => set(field.key, v)"
+        />
+      </div>
+
+      <!-- Grupo: objeto {subclave: valor} con los subcampos anidados -->
+      <fieldset v-else-if="field.type === 'group'" class="schema-fields__group">
+        <legend class="form-field__label">{{ label(field) }}</legend>
+        <SchemaFields
+          :fields="field.fields ?? []"
+          :model-value="groupValue(field)"
+          :locales="locales"
+          :api="api"
+          :icons="icons"
+          :rich-labels="richLabels"
+          :translate="translate"
+          @update:model-value="(v) => set(field.key, v)"
+        />
+      </fieldset>
+
+      <!-- Repeater: filas con los mismos subcampos (añadir/quitar/reordenar) -->
+      <div v-else-if="field.type === 'repeater'" class="schema-fields__repeater">
+        <span class="form-field__label">{{ label(field) }}</span>
+        <fieldset v-for="(row, index) in rows(field)" :key="index" class="schema-fields__row">
+          <div class="schema-fields__row-bar">
+            <span class="schema-fields__row-index">{{ index + 1 }}</span>
+            <IconButton
+              v-if="index > 0"
+              variant="neutral"
+              :title="'↑'"
+              @click="moveRow(field, index, -1)"
+              ><ArrowUp :size="14"
+            /></IconButton>
+            <IconButton
+              v-if="index < rows(field).length - 1"
+              variant="neutral"
+              :title="'↓'"
+              @click="moveRow(field, index, 1)"
+              ><ArrowDown :size="14"
+            /></IconButton>
+            <IconButton variant="danger" :title="'×'" @click="removeRow(field, index)"
+              ><X :size="14"
+            /></IconButton>
+          </div>
+          <SchemaFields
+            :fields="field.fields ?? []"
+            :model-value="row"
+            :locales="locales"
+            :api="api"
+            :icons="icons"
+            :rich-labels="richLabels"
+            :translate="translate"
+            @update:model-value="(v) => setRow(field, index, v)"
+          />
+        </fieldset>
+        <BaseButton
+          v-if="field.max === null || rows(field).length < field.max"
+          variant="text"
+          @click="addRow(field)"
+        >
+          <template #icon><Plus :size="14" /></template>
+          {{ addLabel() }}
+        </BaseButton>
+      </div>
+
+      <!-- Referencia a una entidad del juego: buscador sobre su endpoint -->
+      <EntityRefSelect
+        v-else-if="field.type === 'entity' && field.options_url"
+        :model-value="(modelValue[field.key] as number) ?? null"
+        :label="label(field)"
+        :options-url="field.options_url"
+        :api="api"
+        @update:model-value="(v) => set(field.key, v)"
+      />
+
+      <!-- Imagen traducible: una URL por locale (fallback al default al renderizar) -->
+      <TranslatableImage
+        v-else-if="field.type === 'image' && field.translatable"
+        :model-value="translations(field)"
+        :locales="locales"
+        :label="label(field)"
+        :required="field.required"
+        :upload="upload"
+        @update:model-value="(v) => set(field.key, v)"
+      />
+
+      <div v-else-if="field.type === 'image'" class="schema-fields__image">
+        <span class="form-field__label">{{ label(field) }}</span>
+        <ImageUpload
+          :model-value="null"
+          :current-url="(modelValue[field.key] as string) ?? null"
+          @update:model-value="(f: File | null) => uploadImage(field, f)"
+          @remove="set(field.key, null)"
+        />
+      </div>
+    </template>
+  </div>
+</template>

package/src/crud/BaseGrid.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+// Grid responsive de tarjetas (portado de kontuan). Responde al ancho del
+// contenedor `content` (no al viewport), así coincide con el espacio real.
+type Breakpoint = 'base' | 'sm' | 'md' | 'lg'
+type ResponsiveCols = Partial<Record<Breakpoint, number>>
+
+const props = withDefaults(
+  defineProps<{
+    cols?: number | ResponsiveCols
+    gap?: 'sm' | 'md' | 'lg'
+    preset?: 'cards' | 'cards-wide' | 'cards-narrow' | 'cards-full' | 'halves' | 'thirds'
+  }>(),
+  { cols: () => ({ base: 1, sm: 2, lg: 3 }), gap: 'md' },
+)
+
+const presetCols: Record<string, ResponsiveCols> = {
+  cards: { base: 1, sm: 2, lg: 3 },
+  'cards-wide': { base: 1, sm: 2, lg: 4 },
+  'cards-narrow': { base: 1, sm: 2 },
+  'cards-full': { base: 1, sm: 2, md: 3, lg: 4 },
+  halves: { base: 1, md: 2 },
+  thirds: { base: 1, sm: 2, md: 3 },
+}
+
+const gridClasses = computed(() => {
+  const classes = ['grid', `grid--gap-${props.gap}`]
+  const cols = props.preset ? presetCols[props.preset] : props.cols
+  if (typeof cols === 'number') classes.push(`grid--base-${cols}`)
+  else for (const [bp, n] of Object.entries(cols ?? {})) classes.push(`grid--${bp}-${n}`)
+  return classes
+})
+</script>
+
+<template>
+  <div :class="gridClasses"><slot /></div>
+</template>

package/src/crud/EmptyState.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+// Estado vacío de un listado (portado de kontuan).
+defineProps<{ title: string; description?: string }>()
+</script>
+
+<template>
+  <div class="empty-state">
+    <div v-if="$slots.icon" class="empty-state__icon"><slot name="icon" /></div>
+    <h3 class="empty-state__title">{{ title }}</h3>
+    <p v-if="description" class="empty-state__description">{{ description }}</p>
+    <div v-if="$slots.action" class="empty-state__action"><slot name="action" /></div>
+  </div>
+</template>

package/src/crud/EntityCard.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+// Tarjeta de entidad para los listados (index). Mezcla kontuan + CDL:
+// - kontuan: contenedor con borde/sombra, hover al accent, slots.
+// - CDL: cabecera con título + acciones y divisoria, zona de contenido con
+//   "badges" (chips de estado) y "meta" (datos secundarios).
+// Opcionalmente una franja "media" arriba (p. ej. el emblema de la casa).
+defineProps<{
+  title: string
+  clickable?: boolean
+  muted?: boolean
+  /** Marca la tarjeta como seleccionada (panel derecho). */
+  active?: boolean
+}>()
+
+defineEmits<{ view: [] }>()
+
+defineSlots<{
+  media?: () => unknown
+  actions?: () => unknown
+  badges?: () => unknown
+  meta?: () => unknown
+  default?: () => unknown
+}>()
+</script>
+
+<template>
+  <div
+    class="entity-card"
+    :class="{
+      'entity-card--clickable': clickable,
+      'entity-card--muted': muted,
+      'is-active': active,
+    }"
+    @click="clickable ? $emit('view') : undefined"
+  >
+    <div v-if="$slots.media" class="entity-card__media"><slot name="media" /></div>
+
+    <div class="entity-card__header">
+      <h3 class="entity-card__title">{{ title }}</h3>
+      <div v-if="$slots.actions" class="entity-card__actions" @click.stop>
+        <slot name="actions" />
+      </div>
+    </div>
+
+    <div v-if="$slots.badges || $slots.meta || $slots.default" class="entity-card__content">
+      <div v-if="$slots.badges" class="entity-card__badges"><slot name="badges" /></div>
+      <div v-if="$slots.meta" class="entity-card__meta"><slot name="meta" /></div>
+      <slot />
+    </div>
+  </div>
+</template>

package/src/crud/FilterBar.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { Search } from '@lucide/vue'
+
+// Barra de filtros (estilo kontuan): caja de búsqueda con icono de lupa.
+// Controlada por v-model; se compone por encima de las tabs. Slot por defecto
+// para filtros extra (selects, fechas, …) a la derecha de la búsqueda.
+defineProps<{
+  modelValue: string
+  placeholder?: string
+}>()
+defineEmits<{ 'update:modelValue': [value: string] }>()
+</script>
+
+<template>
+  <div class="filter-bar">
+    <div class="filter-bar__search">
+      <input
+        type="search"
+        :value="modelValue"
+        :placeholder="placeholder"
+        class="filter-bar__search-input"
+        @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+      />
+      <Search :size="16" class="filter-bar__search-icon" />
+    </div>
+    <div v-if="$slots.default" class="filter-bar__extra"><slot /></div>
+  </div>
+</template>

package/src/crud/useResource.ts

@@ -0,0 +1,83 @@
+import { ref } from 'vue'
+import type { AxiosInstance } from 'axios'
+
+/** Meta de paginación que devuelve la API ({ data, meta }). */
+export interface ResourceMeta {
+  current_page?: number
+  last_page?: number
+  per_page?: number
+  total?: number
+}
+
+/**
+ * Composable de CRUD genérico sobre la API REST del motor. Cada juego lo usa
+ * para sus entidades sin reescribir el ir-y-venir con axios.
+ */
+export function useResource<T = unknown>(api: AxiosInstance, basePath: string) {
+  const items = ref<T[]>([])
+  const meta = ref<ResourceMeta | null>(null)
+  const loading = ref(false)
+
+  async function list(params: Record<string, unknown> = {}) {
+    loading.value = true
+    try {
+      const { data } = await api.get(basePath, { params })
+      items.value = data.data
+      meta.value = data.meta ?? null
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function find(id: number | string): Promise<T> {
+    const { data } = await api.get(`${basePath}/${id}`)
+    return data.data
+  }
+
+  async function create(payload: Record<string, unknown>): Promise<T> {
+    const { data } = await api.post(basePath, payload)
+    return data.data
+  }
+
+  async function update(id: number | string, payload: Record<string, unknown>): Promise<T> {
+    const { data } = await api.put(`${basePath}/${id}`, payload)
+    return data.data
+  }
+
+  async function remove(id: number | string): Promise<void> {
+    await api.delete(`${basePath}/${id}`)
+  }
+
+  /** Alta con multipart (FormData) — para subir ficheros. */
+  async function createForm(form: FormData): Promise<T> {
+    const { data } = await api.post(basePath, form)
+    return data.data
+  }
+
+  /** Edición con multipart. PHP no parsea multipart en PUT: se usa POST + _method. */
+  async function updateForm(id: number | string, form: FormData): Promise<T> {
+    form.append('_method', 'PUT')
+    const { data } = await api.post(`${basePath}/${id}`, form)
+    return data.data
+  }
+
+  /** Acciones POST extra: /{id}/{verb} (toggle-published, restore, …). */
+  async function action(id: number | string, verb: string): Promise<T> {
+    const { data } = await api.post(`${basePath}/${id}/${verb}`)
+    return data.data
+  }
+
+  return {
+    items,
+    meta,
+    loading,
+    list,
+    find,
+    create,
+    update,
+    createForm,
+    updateForm,
+    remove,
+    action,
+  }
+}

package/src/index.ts

@@ -0,0 +1,20 @@
+// @edc-motor/admin-kit — layout del panel + scaffolding CRUD (sobre @edc-motor/ui).
+
+export { default as AdminLayout } from './layout/AdminLayout.vue'
+// Panel derecho contextual (patrón kontuan): AdminLayout lo monta; cada vista
+// lo activa con useRightSidebar() y Teleport a #right-sidebar-target.
+export { default as RightSidebar } from './layout/RightSidebar.vue'
+export { useRightSidebar, type RightSidebarToken } from './composables/useRightSidebar'
+// Tarjeta colapsable de los gestores (previews/PDF), reutilizable.
+export { default as ManagerCard } from './components/ManagerCard.vue'
+// Index de entidades: grid de tarjetas (sin tablas) + filtros + estado vacío.
+export { default as BaseGrid } from './crud/BaseGrid.vue'
+export { default as EntityCard } from './crud/EntityCard.vue'
+export { default as FilterBar } from './crud/FilterBar.vue'
+export { default as EmptyState } from './crud/EmptyState.vue'
+export { default as PreviewManager, type PreviewManagerLabels } from './previews/PreviewManager.vue'
+export { default as PdfManager, type PdfManagerLabels } from './pdf/PdfManager.vue'
+export { useResource, type ResourceMeta } from './crud/useResource'
+// CRM de páginas y bloques (doc 03): editor dirigido por esquema.
+export { default as SchemaFields, type FieldSchema } from './content/SchemaFields.vue'
+export { default as PageBlocks, type PageBlocksLabels } from './content/PageBlocks.vue'