@innertia-solutions/innertia-nuxt 0.1.11 → 0.1.13

package/composables/useWorkflow/form.js

@@ -0,0 +1,162 @@
+import { ref, computed, watch } from 'vue'
+
+/**
+ * useWorkflowForm — gestiona el estado de edición de una WorkflowDefinition.
+ *
+ * Responsabilidad: CRUD de steps y transitions sobre el JSON de configuración.
+ * No sabe nada de instancias, vistas ni API calls de runtime.
+ *
+ * @param {Object|null} initial — definición inicial { steps:[], transitions:[] }
+ */
+export function useWorkflowForm(initial = null) {
+  const definition = ref(
+    initial
+      ? JSON.parse(JSON.stringify(initial))
+      : { steps: [], transitions: [] }
+  )
+
+  const isDirty  = ref(false)
+  const saving   = ref(false)
+
+  // Track changes — se activa después del primer tick para no marcar dirty en la carga
+  let _trackChanges = false
+  watch(definition, () => { if (_trackChanges) isDirty.value = true }, { deep: true })
+  setTimeout(() => { _trackChanges = true }, 0)
+
+  // ── Steps ──────────────────────────────────────────────────────────────────
+
+  const addStep = (step) => {
+    if (!step.key || !step.label || !step.type) throw new Error('Step requiere key, label y type')
+    if (definition.value.steps.some(s => s.key === step.key)) throw new Error(`Step '${step.key}' ya existe`)
+    definition.value.steps.push({ ...step })
+  }
+
+  const updateStep = (key, patch) => {
+    const idx = definition.value.steps.findIndex(s => s.key === key)
+    if (idx === -1) return
+    const newKey = patch.key ?? key
+    definition.value.steps[idx] = { ...definition.value.steps[idx], ...patch }
+    // Si cambió el key, actualizar todas las transiciones que lo referencian
+    if (newKey !== key) {
+      definition.value.transitions = definition.value.transitions.map(t => ({
+        ...t,
+        from: t.from === key ? newKey : t.from,
+        to:   t.to   === key ? newKey : t.to,
+      }))
+    }
+  }
+
+  const deleteStep = (key) => {
+    definition.value.steps       = definition.value.steps.filter(s => s.key !== key)
+    definition.value.transitions = definition.value.transitions.filter(t => t.from !== key && t.to !== key)
+  }
+
+  const reorderSteps = (fromIdx, toIdx) => {
+    const steps = [...definition.value.steps]
+    const [moved] = steps.splice(fromIdx, 1)
+    steps.splice(toIdx, 0, moved)
+    definition.value.steps = steps
+  }
+
+  // ── Transitions ────────────────────────────────────────────────────────────
+
+  const addTransition = (transition) => {
+    if (!transition.from || !transition.to) throw new Error('Transition requiere from y to')
+    const exists = definition.value.transitions.some(
+      t => t.from === transition.from && t.to === transition.to
+    )
+    if (exists) throw new Error(`Transición ${transition.from} → ${transition.to} ya existe`)
+    definition.value.transitions.push({
+      from:         transition.from,
+      to:           transition.to,
+      label:        transition.label ?? '',
+      description:  transition.description ?? '',
+      restrictions: transition.restrictions ?? [],
+    })
+  }
+
+  const updateTransition = (from, to, patch) => {
+    const idx = definition.value.transitions.findIndex(t => t.from === from && t.to === to)
+    if (idx === -1) return
+    definition.value.transitions[idx] = { ...definition.value.transitions[idx], ...patch }
+  }
+
+  const deleteTransition = (from, to) => {
+    definition.value.transitions = definition.value.transitions.filter(
+      t => !(t.from === from && t.to === to)
+    )
+  }
+
+  // ── Restrictions helpers ───────────────────────────────────────────────────
+
+  const addRestriction = (from, to, restriction) => {
+    const t = definition.value.transitions.find(t => t.from === from && t.to === to)
+    if (!t) return
+    t.restrictions = [...(t.restrictions ?? []), { type: 'role', message: '', ...restriction }]
+  }
+
+  const removeRestriction = (from, to, idx) => {
+    const t = definition.value.transitions.find(t => t.from === from && t.to === to)
+    if (!t) return
+    t.restrictions = t.restrictions.filter((_, i) => i !== idx)
+  }
+
+  // ── Computed helpers ───────────────────────────────────────────────────────
+
+  const stepByKey = computed(() =>
+    Object.fromEntries((definition.value.steps ?? []).map(s => [s.key, s]))
+  )
+
+  const transitionsFrom = (key) =>
+    (definition.value.transitions ?? []).filter(t => t.from === key)
+
+  const transitionsTo = (key) =>
+    (definition.value.transitions ?? []).filter(t => t.to === key)
+
+  const isValid = computed(() => {
+    const steps = definition.value.steps ?? []
+    return (
+      steps.length >= 2 &&
+      steps.some(s => s.type === 'start') &&
+      steps.some(s => ['finished', 'cancelled'].includes(s.type))
+    )
+  })
+
+  // ── Reset / load ───────────────────────────────────────────────────────────
+
+  const reset = (newDefinition = null) => {
+    definition.value = newDefinition
+      ? JSON.parse(JSON.stringify(newDefinition))
+      : { steps: [], transitions: [] }
+    isDirty.value = false
+  }
+
+  const markSaved = () => { isDirty.value = false }
+
+  return {
+    // State
+    definition,
+    isDirty,
+    saving,
+    isValid,
+    // Step CRUD
+    addStep,
+    updateStep,
+    deleteStep,
+    reorderSteps,
+    // Transition CRUD
+    addTransition,
+    updateTransition,
+    deleteTransition,
+    // Restriction helpers
+    addRestriction,
+    removeRestriction,
+    // Computed
+    stepByKey,
+    transitionsFrom,
+    transitionsTo,
+    // Utils
+    reset,
+    markSaved,
+  }
+}

package/composables/useWorkflow/index.js

@@ -0,0 +1,18 @@
+/**
+ * useWorkflow — punto de entrada único del sistema de workflows.
+ *
+ * Estructura:
+ *   useWorkflowForm  → edición de definiciones (steps, transitions, restrictions)
+ *   useWorkflowView  → estado operacional (items, columnas, onMove, viewMode)
+ *
+ * Uso independiente:
+ *   import { useWorkflowForm } from '~/composables/useWorkflow'
+ *   import { useWorkflowView } from '~/composables/useWorkflow'
+ *
+ * Con auto-import de Nuxt también funcionan directamente:
+ *   const form = useWorkflowForm(initialDefinition)
+ *   const view = useWorkflowView(form.definition, { endpoint: 'tasks' })
+ */
+
+export { useWorkflowForm } from './form.js'
+export { useWorkflowView } from './view.js'

package/composables/useWorkflow/view.js

@@ -0,0 +1,220 @@
+import { ref, computed, watch } from 'vue'
+
+/**
+ * useWorkflowView — estado operacional de un workflow en runtime.
+ *
+ * Responsabilidad: cargar items, derivar columnas desde la definición,
+ * validar y ejecutar transiciones, manejar el view mode del board.
+ *
+ * NO edita la definición — eso es trabajo de useWorkflowForm.
+ *
+ * @param {Ref<Object>} definitionRef — ref reactivo a { steps, transitions }
+ * @param {Object}      options
+ *   @param {string}    options.endpoint      — endpoint para cargar items via useApi()
+ *   @param {Object}    options.params        — params extra para el fetch
+ *   @param {string}    options.stateKey      — campo del item que indica el step actual (default: 'current_step')
+ *   @param {Function}  options.onTransition  — async (item, toStep, fromStep) => void — consumer llama su API
+ *   @param {string}    options.defaultView   — 'kanban' | 'table' | 'flow' | 'funnel' (default: 'kanban')
+ *   @param {boolean}   options.validateTransitions — si false, permite cualquier movimiento (default: true)
+ */
+export function useWorkflowView(definitionRef, options = {}) {
+  const {
+    endpoint            = null,
+    params              = {},
+    stateKey            = 'current_step',
+    onTransition        = null,
+    defaultView         = 'kanban',
+    validateTransitions = true,
+  } = options
+
+  // ── Items ──────────────────────────────────────────────────────────────────
+
+  const items   = ref([])
+  const loading = ref(false)
+  const error   = ref(null)
+  const total   = computed(() => items.value.length)
+
+  const api = useApi?.() ?? null   // auto-import de Nuxt
+
+  const load = async () => {
+    if (!endpoint) return
+    loading.value = true
+    error.value   = null
+    try {
+      const res = await api.get(endpoint, params)
+      items.value = Array.isArray(res) ? res : (res.data ?? [])
+    } catch (e) {
+      error.value = e?.message ?? 'Error al cargar'
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const reload = () => load()
+
+  // Cargar al montar si hay endpoint
+  if (endpoint) {
+    // onMounted no está disponible aquí — el consumer debe llamar load() o
+    // lo hacemos con watch en el primer tick
+    watch(() => endpoint, load, { immediate: true })
+  }
+
+  // ── Columnas derivadas de la definición ────────────────────────────────────
+
+  const STEP_TYPE_COLOR = {
+    start:          'slate',
+    in_progress:    'blue',
+    pause_internal: 'amber',
+    pause_external: 'orange',
+    finished:       'green',
+    cancelled:      'red',
+  }
+
+  const columns = computed(() =>
+    (definitionRef.value?.steps ?? []).map(step => ({
+      key:   step.key,
+      label: step.label,
+      color: STEP_TYPE_COLOR[step.type] ?? 'slate',
+      type:  step.type,
+    }))
+  )
+
+  // ── Validación de transiciones ─────────────────────────────────────────────
+
+  /**
+   * Verifica si existe una transición definida entre dos steps.
+   */
+  const canTransition = (fromStep, toStep) => {
+    if (!validateTransitions) return true
+    return (definitionRef.value?.transitions ?? []).some(
+      t => t.from === fromStep && t.to === toStep
+    )
+  }
+
+  /**
+   * Devuelve los steps destino disponibles desde un step dado.
+   */
+  const availableTransitions = (fromStep) =>
+    (definitionRef.value?.transitions ?? [])
+      .filter(t => t.from === fromStep)
+      .map(t => ({
+        key:          t.to,
+        label:        definitionRef.value?.steps?.find(s => s.key === t.to)?.label ?? t.to,
+        transitionLabel: t.label ?? '',
+        restrictions: t.restrictions ?? [],
+      }))
+
+  /**
+   * Devuelve la config de una transición específica.
+   */
+  const getTransition = (fromStep, toStep) =>
+    (definitionRef.value?.transitions ?? []).find(
+      t => t.from === fromStep && t.to === toStep
+    ) ?? null
+
+  // ── onMove — para KanbanStandard ──────────────────────────────────────────
+
+  /**
+   * Función compatible con KanbanStandard :move-mutation.
+   * Valida la transición y llama al onTransition del consumer.
+   *
+   * @param {string|Object} itemOrId — id del item o el item completo
+   * @param {string}        toStep   — step destino
+   * @param {string}        fromStep — step origen (opcional, se busca en items)
+   */
+  const onMove = async (itemOrId, toStep, fromStep) => {
+    const id   = typeof itemOrId === 'object' ? itemOrId.id : itemOrId
+    const item = items.value.find(i => i.id === id) ?? itemOrId
+
+    const from = fromStep ?? item?.[stateKey]
+
+    if (validateTransitions && !canTransition(from, toStep)) {
+      console.warn(`[useWorkflowView] Transición bloqueada: ${from} → ${toStep}`)
+      return false
+    }
+
+    // Optimistic update
+    const idx = items.value.findIndex(i => i.id === id)
+    if (idx >= 0) items.value[idx] = { ...items.value[idx], [stateKey]: toStep }
+
+    try {
+      if (onTransition) await onTransition(item, toStep, from)
+      return true
+    } catch (e) {
+      // Rollback
+      if (idx >= 0) items.value[idx] = { ...items.value[idx], [stateKey]: from }
+      error.value = e?.message ?? 'Error en transición'
+      return false
+    }
+  }
+
+  // ── Funnel data — para WorkflowFunnel / Chart ──────────────────────────────
+
+  /**
+   * Cuenta de items por step — útil para la vista funnel.
+   */
+  const funnelData = computed(() => {
+    const counts = Object.fromEntries(
+      (definitionRef.value?.steps ?? []).map(s => [s.key, 0])
+    )
+    for (const item of items.value) {
+      const step = item[stateKey]
+      if (step in counts) counts[step]++
+    }
+    return (definitionRef.value?.steps ?? []).map(step => ({
+      key:   step.key,
+      label: step.label,
+      type:  step.type,
+      count: counts[step.key] ?? 0,
+    }))
+  })
+
+  // ── View mode ──────────────────────────────────────────────────────────────
+
+  const VALID_VIEWS = ['kanban', 'table', 'flow', 'funnel']
+
+  const viewMode    = ref(VALID_VIEWS.includes(defaultView) ? defaultView : 'kanban')
+  const setViewMode = (mode) => {
+    if (VALID_VIEWS.includes(mode)) viewMode.value = mode
+  }
+
+  // ── Item helpers ───────────────────────────────────────────────────────────
+
+  const itemsByStep = computed(() => {
+    const map = Object.fromEntries(
+      (definitionRef.value?.steps ?? []).map(s => [s.key, []])
+    )
+    for (const item of items.value) {
+      const step = item[stateKey]
+      if (step in map) map[step].push(item)
+    }
+    return map
+  })
+
+  const setItems = (newItems) => { items.value = newItems }
+
+  return {
+    // Items
+    items,
+    loading,
+    error,
+    total,
+    load,
+    reload,
+    setItems,
+    itemsByStep,
+    // Columnas derivadas
+    columns,
+    stateKey,
+    // Transición
+    canTransition,
+    availableTransitions,
+    getTransition,
+    onMove,
+    // Funnel
+    funnelData,
+    // View mode
+    viewMode,
+    setViewMode,
+  }
+}

package/composables/useWorkflowLayout.js

@@ -0,0 +1,162 @@
+/**
+ * Auto-layout para workflow definitions.
+ *
+ * Usa BFS desde el nodo start (en vez de Kahn) para manejar ciclos
+ * correctamente. Back-edges (transiciones hacia nodos ya visitados con
+ * capa ≤ origen) se marcan como isBackEdge:true y usan handles top para
+ * que su path se rutee por encima del row de nodos.
+ */
+
+const NODE_W = 208   // w-52 en Tailwind
+const NODE_H = 96    // alto aproximado de StepNode con descripción
+const H_GAP  = 100   // espacio horizontal entre columnas (para labels de edge)
+const V_GAP  = 40    // espacio vertical entre nodos en misma columna
+
+// ── Helpers privados ──────────────────────────────────────────────────────────
+
+/**
+ * BFS desde el nodo start para asignar capa (layer) a cada step.
+ * Nodos no alcanzables se colocan en max_layer + 1.
+ */
+function buildLayerMap(steps, transitions) {
+  if (!steps.length) return {}
+  const keys     = steps.map(s => s.key)
+  const startKey = steps.find(s => s.type === 'start')?.key ?? keys[0]
+
+  // Adjacency list (solo forward)
+  const adj = Object.fromEntries(keys.map(k => [k, []]))
+  for (const t of transitions) {
+    if (adj[t.from] !== undefined) adj[t.from].push(t.to)
+  }
+
+  // BFS
+  const layer = {}
+  const queue = [startKey]
+  layer[startKey] = 0
+  let head = 0
+
+  while (head < queue.length) {
+    const node = queue[head++]
+    for (const nb of adj[node] ?? []) {
+      if (!(nb in layer)) {
+        layer[nb] = layer[node] + 1
+        queue.push(nb)
+      }
+    }
+  }
+
+  // Nodos desconectados → capa extra al final
+  const maxL = Math.max(-1, ...Object.values(layer))
+  for (const k of keys) {
+    if (!(k in layer)) layer[k] = maxL + 1
+  }
+
+  return layer
+}
+
+/**
+ * Convierte un layerMap en posiciones x/y.
+ * Cada capa es una columna; los nodos de una misma capa se centran verticalmente.
+ */
+function computePositions(steps, layerMap) {
+  const groups = {}
+  for (const s of steps) {
+    const l = layerMap[s.key] ?? 0
+    if (!groups[l]) groups[l] = []
+    groups[l].push(s.key)
+  }
+
+  const positions = {}
+  for (const [l, group] of Object.entries(groups)) {
+    const col    = parseInt(l)
+    const totalH = group.length * NODE_H + (group.length - 1) * V_GAP
+    const startY = -totalH / 2
+    for (let row = 0; row < group.length; row++) {
+      positions[group[row]] = {
+        x: col * (NODE_W + H_GAP),
+        y: startY + row * (NODE_H + V_GAP),
+      }
+    }
+  }
+
+  return positions
+}
+
+// ── API pública ───────────────────────────────────────────────────────────────
+
+/**
+ * Calcula posiciones { x, y } para cada step.
+ * Exportado para uso directo en Builder (relayout).
+ *
+ * @param {Array} steps
+ * @param {Array} transitions
+ * @returns {Record<string, { x: number, y: number }>}
+ */
+export function autoLayoutWorkflow(steps, transitions) {
+  const layer = buildLayerMap(steps, transitions)
+  return computePositions(steps, layer)
+}
+
+/**
+ * Convierte una workflow definition al formato nodes/edges de Vue Flow.
+ *
+ * Back-edges (transiciones que van hacia una capa ≤ origen) reciben:
+ *   - data.isBackEdge = true
+ *   - sourceHandle: 'top-source' / targetHandle: 'top-target'
+ *     (StepNode expone esos handles invisibles en Position.Top)
+ */
+export function definitionToFlow(config) {
+  const layers    = buildLayerMap(config.steps ?? [], config.transitions ?? [])
+  const positions = computePositions(config.steps ?? [], layers)
+
+  const nodes = (config.steps ?? []).map(step => ({
+    id:       step.key,
+    type:     'step',
+    position: step.position ?? positions[step.key] ?? { x: 0, y: 0 },
+    data:     { ...step },
+  }))
+
+  const edges = (config.transitions ?? []).map(t => {
+    const fromL   = layers[t.from] ?? 0
+    const toL     = layers[t.to]   ?? 0
+    const isBack  = fromL >= toL
+
+    return {
+      id:        `${t.from}__${t.to}`,
+      source:    t.from,
+      target:    t.to,
+      type:      'transition',
+      label:     t.label ?? '',
+      data:      { ...t, isBackEdge: isBack },
+      markerEnd: { type: 'arrowclosed' },
+      // Back-edges: rutear por los handles top para que el path arque por encima
+      ...(isBack ? { sourceHandle: 'top-source', targetHandle: 'top-target' } : {}),
+    }
+  })
+
+  return { nodes, edges }
+}
+
+/**
+ * Convierte nodes/edges de Vue Flow de vuelta al config JSON de Laravel.
+ * Filtra isBackEdge del data (es metadata de layout, no del dominio).
+ */
+export function flowToDefinition(nodes, edges) {
+  const steps = nodes.map(n => ({
+    ...n.data,
+    position: { x: Math.round(n.position.x), y: Math.round(n.position.y) },
+  }))
+
+  const transitions = edges.map(e => {
+    // eslint-disable-next-line no-unused-vars
+    const { isBackEdge, ...rest } = e.data ?? {}
+    return {
+      ...rest,
+      from:  e.source,
+      to:    e.target,
+      label: e.label ?? rest.label ?? '',
+    }
+  })
+
+  return { steps, transitions }
+}

package/css/tokens.css

@@ -14,7 +14,10 @@
  * y solo redefinen estos tokens semánticos. NO redefinen primitivos.
  * ============================================================================ */
 
-@theme inline {
+/* @theme (sin `inline`) → Tailwind genera `rounded-card`, `rounded-control`, etc.
+ * referenciando `var(--radius-card)` etc. en lugar de inline-ar el valor en
+ * build-time. Esto permite OVERRIDES en runtime (templates, playground toggles). */
+@theme {
   /* ─── Radius ───────────────────────────────────────────────────────────
    * Categorización por *función*, no por tamaño. */
   --radius-control:  var(--radius-md);    /* botones, inputs, selects */
@@ -25,16 +28,13 @@
   --radius-badge:    var(--radius-full);  /* chips, tags, status pills */
   --radius-avatar:   var(--radius-full);  /* avatares circulares */
 
-  /* ─── Fields (controles de formulario) ─────────────────────────────────
-   * TODOS los inputs/selects/datepicker comparten estos tokens. Un template
-   * puede redefinirlos una vez y todos los controles del producto cambian
-   * coherentemente. */
-  --field-height:           2.5rem;                       /* 40px */
-  --field-height-sm:        2rem;                         /* 32px */
-  --field-padding-x:        0.875rem;                     /* 14px */
+  /* ─── Fields (controles de formulario) ───────────────────────────────── */
+  --field-height:           2.5rem;
+  --field-height-sm:        2rem;
+  --field-padding-x:        0.875rem;
   --field-border-width:     1px;
-  --field-font-size:        0.875rem;                     /* text-sm */
-  --field-font-size-sm:     0.8125rem;                    /* text-[13px] */
+  --field-font-size:        0.875rem;
+  --field-font-size-sm:     0.8125rem;
   --field-bg:               var(--color-card);
   --field-dropdown-bg:      var(--field-bg);
   --field-border:           var(--color-card-line);