@innertia-solutions/innertia-nuxt 0.1.12 → 0.1.13

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);

package/nuxt.config.ts

@@ -13,7 +13,7 @@ export default defineNuxtConfig({
     { path: './components', pathPrefix: true, prefix: '' },
   ],
   imports: {
-    dirs: ['stores', 'composables'],
+    dirs: ['stores', 'composables', 'composables/useWorkflow'],
     presets: [
       {
         from: '@tanstack/vue-query',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innertia-solutions/innertia-nuxt",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "description": "Innertia Solutions — Nuxt layer unificada: core, auth, multitenancy, theme y app contexts",
   "keywords": [
     "nuxt",
@@ -24,11 +24,11 @@
     "./theme.css": "./theme.css"
   },
   "peerDependencies": {
+    "@pinia/nuxt": ">=0.11.0",
     "nuxt": ">=4.0.0",
-    "vue": ">=3.5.0",
     "pinia": ">=3.0.0",
-    "@pinia/nuxt": ">=0.11.0",
-    "pinia-plugin-persistedstate": ">=4.0.0"
+    "pinia-plugin-persistedstate": ">=4.0.0",
+    "vue": ">=3.5.0"
   },
   "dependencies": {
     "@nuxtjs/seo": "^3.4.0",
@@ -39,7 +39,11 @@
     "@tailwindcss/vite": "^4.0.0",
     "@tanstack/vue-query": "^5.100.10",
     "@tanstack/vue-table": "^8.21.3",
+    "@vue-flow/background": "^1.3.2",
+    "@vue-flow/controls": "^1.1.3",
+    "@vue-flow/core": "^1.48.2",
     "@vueuse/core": "^14.3.0",
+    "apexcharts": "^5.13.0",
     "date-fns": "^4.1.0",
     "date-fns-tz": "^3.2.0",
     "dayjs": "^1.11.0",
@@ -48,13 +52,14 @@
     "pusher-js": "^8.5.0",
     "tailwindcss": "^4.0.0",
     "uuid": "^13.0.0",
-    "vanilla-calendar-pro": "^3.1.0"
+    "vanilla-calendar-pro": "^3.1.0",
+    "vue3-apexcharts": "^1.11.1"
   },
   "devDependencies": {
-    "nuxt": "^4.4.2",
-    "vue": "^3.5.0",
     "@pinia/nuxt": "^0.11.3",
+    "nuxt": "^4.4.2",
     "pinia": "^3.0.4",
-    "pinia-plugin-persistedstate": "^4.7.1"
+    "pinia-plugin-persistedstate": "^4.7.1",
+    "vue": "^3.5.0"
   }
 }

package/stores/modal.js

@@ -0,0 +1,48 @@
+// stores/modal.js
+import { defineStore } from 'pinia'
+import { markRaw } from 'vue'
+
+/**
+ * Cola de modales programáticos. Renderizada por <ModalHost />.
+ *
+ * Cada entry: { id, kind: 'confirm'|'alert'|'prompt'|'component',
+ *               props: object, component?: Component, resolve: fn }
+ *
+ * `component` se guarda con markRaw para que Pinia no lo reactivee.
+ */
+let _id = 0
+const nextId = () => `m${++_id}`
+
+export const useModalStore = defineStore('modal', {
+  state: () => ({
+    queue: [],
+  }),
+  actions: {
+    push(entry) {
+      this.queue.push(entry)
+      return entry.id
+    },
+    remove(id) {
+      const idx = this.queue.findIndex(e => e.id === id)
+      if (idx !== -1) this.queue.splice(idx, 1)
+    },
+    resolve(id, value) {
+      const entry = this.queue.find(e => e.id === id)
+      if (!entry) return
+      entry.resolve(value)
+      this.remove(id)
+    },
+    /** Crea entry + devuelve Promise que se resuelve con .resolve(id, value) */
+    open({ kind, props = {}, component = null }) {
+      return new Promise((resolve) => {
+        this.push({
+          id: nextId(),
+          kind,
+          props,
+          component: component ? markRaw(component) : null,
+          resolve,
+        })
+      })
+    },
+  },
+})