@statezero/core 0.2.37 → 0.2.38

package/dist/adaptors/vue/components/LayoutRenderer.vue

@@ -1,361 +0,0 @@
-<script setup>
-import { computed, provide, inject, onMounted, unref } from 'vue'
-
-/**
- * LayoutRenderer - Renders a statezero layout tree
- *
- * Expects a components registry with implementations for each element type.
- * Components must follow contracts (validated at mount time).
- */
-
-const props = defineProps({
-  // The layout element to render (root or nested)
-  layout: { type: Object, required: true },
-
-  // Schema with field definitions (input_properties/properties)
-  schema: { type: Object, default: () => ({}) },
-
-  // Component registry: { Control, Display, Alert, Label, Divider, Group, Tabs, ErrorBlock }
-  components: { type: Object, required: true },
-
-  // Form data (v-model for Controls)
-  formData: { type: Object, default: () => ({}) },
-
-  // Workflow context (for Display elements)
-  context: { type: Object, default: () => ({}) },
-
-  // Errors object - can be raw DRF response: { fieldName: ['error'], non_field_errors: ['global error'] }
-  // The renderer automatically extracts non_field_errors/__all__ for the ErrorBlock
-  errors: { type: Object, default: () => ({}) },
-
-  // Explicit non-field errors (optional override - if not provided, extracted from errors.non_field_errors)
-  nonFieldErrors: { type: Array, default: null },
-
-  // Whether this is the root renderer (internal)
-  isRoot: { type: Boolean, default: true }
-})
-
-const emit = defineEmits(['update:formData'])
-
-// Extract non-field errors from the errors object (DRF format)
-// Supports both "non_field_errors" and "__all__" keys
-const extractedNonFieldErrors = computed(() => {
-  // If explicit nonFieldErrors prop provided, use it
-  if (props.nonFieldErrors !== null) {
-    return props.nonFieldErrors
-  }
-  // Otherwise extract from errors object
-  const nfe = props.errors?.non_field_errors || props.errors?.__all__
-  if (!nfe) return []
-  if (Array.isArray(nfe)) {
-    return nfe.map(err => {
-      if (typeof err === 'string') return err
-      if (err?.message) return err.message
-      return String(err)
-    })
-  }
-  return [String(nfe)]
-})
-
-const rootComponents = computed(() => props.components)
-const rootSchema = computed(() => props.schema)
-const rootFormData = computed(() => props.formData)
-const rootContext = computed(() => props.context)
-const rootErrors = computed(() => props.errors)
-
-// Provide context to nested renderers
-if (props.isRoot) {
-  provide('layoutRenderer', {
-    components: rootComponents,
-    schema: rootSchema,
-    formData: rootFormData,
-    context: rootContext,
-    errors: rootErrors,
-    updateField: (fieldName, value) => {
-      const currentFormData = unref(rootFormData) || {}
-      emit('update:formData', { ...currentFormData, [fieldName]: value })
-    }
-  })
-}
-
-// Inject from parent if not root
-const injected = props.isRoot ? null : inject('layoutRenderer', null)
-const components = computed(() => props.isRoot ? props.components : (injected ? (unref(injected.components) || props.components) : props.components))
-const schema = computed(() => props.isRoot ? props.schema : (injected ? (unref(injected.schema) || props.schema) : props.schema))
-const formData = computed(() => props.isRoot ? props.formData : (injected ? (unref(injected.formData) || props.formData) : props.formData))
-const context = computed(() => props.isRoot ? props.context : (injected ? (unref(injected.context) || props.context) : props.context))
-const errors = computed(() => props.isRoot ? props.errors : (injected ? (unref(injected.errors) || props.errors) : props.errors))
-const updateField = props.isRoot
-  ? (fieldName, value) => emit('update:formData', { ...props.formData, [fieldName]: value })
-  : injected?.updateField || (() => {})
-
-// Contract definitions for component validation
-//
-// Control: Polymorphic form field component (like AutoField)
-//   - Should check element.display_component for custom component override
-//   - Should use schema (type/format) to determine default field rendering
-//   - Receives: element (includes field_name, display_component, label, extra, etc.)
-//              modelValue, errors (array), context, formData, schema (field schema)
-//   - Emits: update:modelValue
-//
-// Display: Read-only component for showing context values
-//   - Receives: element (includes context_path, label, display_component), context, value (resolved)
-//   - No v-model binding, just displays value
-//
-const CONTRACTS = {
-  Control: {
-    props: ['element', 'modelValue', 'errors', 'context', 'formData', 'schema'],
-    emits: ['update:modelValue']
-  },
-  Display: {
-    props: ['element', 'context', 'value'],
-    emits: []
-  },
-  Alert: {
-    props: ['element', 'context', 'text'],
-    emits: []
-  },
-  Label: {
-    props: ['element'],
-    emits: []
-  },
-  Divider: {
-    props: [],
-    emits: []
-  },
-  Group: {
-    props: ['element'],
-    emits: []
-  },
-  Tabs: {
-    props: ['element'],
-    emits: []
-  },
-  ErrorBlock: {
-    props: ['errors'],
-    emits: []
-  }
-}
-
-// Validate components on mount (dev warning only)
-function validateComponents(comps) {
-  for (const [type, component] of Object.entries(comps)) {
-    const contract = CONTRACTS[type]
-    if (!contract) continue
-    if (!component) {
-      console.warn(`[LayoutRenderer] Missing component for type: ${type}`)
-      continue
-    }
-
-    // Get component props (handle different formats)
-    let componentProps = []
-    if (component.props) {
-      if (Array.isArray(component.props)) {
-        componentProps = component.props
-      } else if (typeof component.props === 'object') {
-        componentProps = Object.keys(component.props)
-      }
-    }
-
-    // Get component emits
-    let componentEmits = []
-    if (component.emits) {
-      if (Array.isArray(component.emits)) {
-        componentEmits = component.emits
-      } else if (typeof component.emits === 'object') {
-        componentEmits = Object.keys(component.emits)
-      }
-    }
-
-    // Check required props
-    for (const prop of contract.props) {
-      if (!componentProps.includes(prop)) {
-        console.warn(`[LayoutRenderer] ${type} component missing required prop: "${prop}"`)
-      }
-    }
-
-    // Check required emits
-    for (const emitName of contract.emits) {
-      if (!componentEmits.includes(emitName)) {
-        console.warn(`[LayoutRenderer] ${type} component missing required emit: "${emitName}"`)
-      }
-    }
-  }
-}
-
-onMounted(() => {
-  if (props.isRoot && import.meta.env?.DEV) {
-    validateComponents(props.components)
-  }
-})
-
-// Evaluate conditional expressions
-function evalCondition(expr) {
-  try {
-    return new Function('formData', 'context', `return ${expr}`)(formData.value, context.value)
-  } catch (e) {
-    console.warn('[LayoutRenderer] Conditional eval failed:', expr, e)
-    return false
-  }
-}
-
-// Get field schema from schema.properties or schema.input_properties
-function getFieldSchema(fieldName) {
-  const props = schema.value?.properties || schema.value?.input_properties || {}
-  return props[fieldName] || {}
-}
-
-// Get errors for a specific field (excludes non_field_errors/__all__)
-function getFieldErrors(fieldName) {
-  if (fieldName === 'non_field_errors' || fieldName === '__all__') return []
-  const fieldErrors = errors.value?.[fieldName]
-  if (!fieldErrors) return []
-  // Normalize to array of strings (DRF can return array of strings or objects with message)
-  if (Array.isArray(fieldErrors)) {
-    return fieldErrors.map(err => {
-      if (typeof err === 'string') return err
-      if (err?.message) return err.message
-      return String(err)
-    })
-  }
-  return [String(fieldErrors)]
-}
-
-// Resolve context path (dot notation) to value
-function resolveContextPath(path) {
-  if (!path) return undefined
-  const parts = path.split('.')
-  let value = context.value
-  for (const part of parts) {
-    if (value === null || value === undefined) return undefined
-    value = value[part]
-  }
-  return value
-}
-
-</script>
-
-<template>
-  <!-- ErrorBlock at root level -->
-  <component
-    v-if="isRoot && extractedNonFieldErrors.length > 0 && components.ErrorBlock"
-    :is="components.ErrorBlock"
-    :errors="extractedNonFieldErrors"
-  />
-
-  <!-- VerticalLayout -->
-  <div
-    v-if="layout.type === 'VerticalLayout'"
-    class="sz-layout sz-layout-vertical"
-    :class="`sz-gap-${layout.gap || 'md'}`"
-  >
-    <LayoutRenderer
-      v-for="(child, i) in layout.elements"
-      :key="i"
-      :layout="child"
-      :components="components"
-      :is-root="false"
-    />
-  </div>
-
-  <!-- HorizontalLayout -->
-  <div
-    v-else-if="layout.type === 'HorizontalLayout'"
-    class="sz-layout sz-layout-horizontal"
-    :class="[`sz-gap-${layout.gap || 'md'}`, `sz-align-${layout.align || 'start'}`]"
-  >
-    <LayoutRenderer
-      v-for="(child, i) in layout.elements"
-      :key="i"
-      :layout="child"
-      :components="components"
-      :is-root="false"
-    />
-  </div>
-
-  <!-- Group -->
-  <component
-    v-else-if="layout.type === 'Group'"
-    :is="components.Group"
-    :element="layout"
-  >
-    <LayoutRenderer
-      v-if="layout.layout"
-      :layout="layout.layout"
-      :components="components"
-      :is-root="false"
-    />
-  </component>
-
-  <!-- Tabs -->
-  <component
-    v-else-if="layout.type === 'Tabs'"
-    :is="components.Tabs"
-    :element="layout"
-  >
-    <template #tab="{ tab }">
-      <LayoutRenderer
-        :layout="tab.layout"
-        :components="components"
-        :is-root="false"
-      />
-    </template>
-  </component>
-
-  <!-- Conditional -->
-  <LayoutRenderer
-    v-else-if="layout.type === 'Conditional' && evalCondition(layout.when)"
-    :layout="layout.layout"
-    :components="components"
-    :is-root="false"
-  />
-
-  <!-- Control (form field) -->
-  <component
-    v-else-if="layout.type === 'Control'"
-    :is="components.Control"
-    :element="layout"
-    :model-value="formData[layout.field_name]"
-    :errors="getFieldErrors(layout.field_name)"
-    :context="context"
-    :form-data="formData"
-    :schema="getFieldSchema(layout.field_name)"
-    @update:model-value="updateField(layout.field_name, $event)"
-  />
-
-  <!-- Display -->
-  <component
-    v-else-if="layout.type === 'Display'"
-    :is="components.Display"
-    :element="layout"
-    :context="context"
-    :value="resolveContextPath(layout.context_path)"
-  />
-
-  <!-- Alert -->
-  <component
-    v-else-if="layout.type === 'Alert'"
-    :is="components.Alert"
-    :element="layout"
-    :context="context"
-    :text="layout.text || resolveContextPath(layout.context_path)"
-  />
-
-  <!-- Label -->
-  <component
-    v-else-if="layout.type === 'Label'"
-    :is="components.Label"
-    :element="layout"
-  />
-
-  <!-- Divider -->
-  <component
-    v-else-if="layout.type === 'Divider'"
-    :is="components.Divider"
-  />
-
-  <!-- Unknown type warning -->
-  <div v-else class="text-red-500 text-sm">
-    [LayoutRenderer] Unknown element type: {{ layout.type }}
-  </div>
-</template>

package/dist/adaptors/vue/components/defaults/AlertElement.vue

@@ -1,38 +0,0 @@
-<script setup>
-/**
- * Default Alert element for LayoutRenderer
- *
- * Contract:
- * - props: element, context, text
- * - emits: none
- */
-defineProps({
-  element: { type: Object, required: true },
-  context: { type: Object, default: () => ({}) },
-  text: { type: String, default: '' }
-})
-
-const severityClasses = {
-  info: 'bg-blue-500/10 border-blue-500/20 text-blue-400',
-  warning: 'bg-yellow-500/10 border-yellow-500/20 text-yellow-400',
-  error: 'bg-red-500/10 border-red-500/20 text-red-400',
-  success: 'bg-green-500/10 border-green-500/20 text-green-400'
-}
-
-const severityIcons = {
-  info: 'ℹ️',
-  warning: '⚠️',
-  error: '❌',
-  success: '✓'
-}
-</script>
-
-<template>
-  <div
-    class="flex items-start gap-3 p-3 rounded-lg border"
-    :class="severityClasses[element.severity] || severityClasses.info"
-  >
-    <span class="flex-shrink-0">{{ severityIcons[element.severity] || severityIcons.info }}</span>
-    <p class="text-sm">{{ text }}</p>
-  </div>
-</template>

package/dist/adaptors/vue/components/defaults/DisplayElement.vue

@@ -1,57 +0,0 @@
-<script setup>
-/**
- * Default Display element for LayoutRenderer
- *
- * Renders context data in a display-only format.
- * For custom rendering, use element.display_component and register custom components.
- *
- * Contract:
- * - props: element, context, value
- * - emits: none
- */
-defineProps({
-  element: { type: Object, required: true },
-  context: { type: Object, default: () => ({}) },
-  value: { default: null }
-})
-</script>
-
-<template>
-  <div class="space-y-1">
-    <label v-if="element.label" class="block text-sm font-medium text-muted-foreground">
-      {{ element.label }}
-    </label>
-    <div class="text-sm">
-      <!-- Default text display -->
-      <template v-if="!element.display_component || element.display_component === 'text'">
-        <span v-if="value !== null && value !== undefined">{{ value }}</span>
-        <span v-else class="text-muted-foreground italic">—</span>
-      </template>
-
-      <!-- Code display -->
-      <template v-else-if="element.display_component === 'code'">
-        <code class="px-2 py-1 bg-muted rounded font-mono text-sm">{{ value }}</code>
-      </template>
-
-      <!-- Copy URL display -->
-      <template v-else-if="element.display_component === 'copy-url'">
-        <div class="flex items-center gap-2">
-          <code class="flex-1 px-2 py-1 bg-muted rounded font-mono text-xs truncate">{{ value }}</code>
-          <button
-            type="button"
-            class="px-2 py-1 text-xs bg-primary text-primary-foreground rounded hover:bg-primary/90"
-            @click="navigator.clipboard.writeText(value)"
-          >
-            Copy
-          </button>
-        </div>
-      </template>
-
-      <!-- Fallback for unknown display_component -->
-      <template v-else>
-        <span>{{ value }}</span>
-        <span class="text-xs text-muted-foreground ml-2">({{ element.display_component }})</span>
-      </template>
-    </div>
-  </div>
-</template>

package/dist/adaptors/vue/components/defaults/DividerElement.vue

@@ -1,13 +0,0 @@
-<script setup>
-/**
- * Default Divider element for LayoutRenderer
- *
- * Contract:
- * - props: none required
- * - emits: none
- */
-</script>
-
-<template>
-  <hr class="border-t border-border my-2" />
-</template>

package/dist/adaptors/vue/components/defaults/ErrorBlock.vue

@@ -1,28 +0,0 @@
-<script setup>
-/**
- * Default ErrorBlock element for LayoutRenderer
- *
- * Displays non-field errors (global form errors).
- *
- * Contract:
- * - props: errors (array of error strings)
- * - emits: none
- */
-defineProps({
-  errors: { type: Array, required: true }
-})
-</script>
-
-<template>
-  <div
-    v-if="errors.length > 0"
-    class="flex items-start gap-3 p-3 rounded-lg border bg-red-500/10 border-red-500/20"
-  >
-    <span class="flex-shrink-0 text-red-400">❌</span>
-    <div class="space-y-1">
-      <p v-for="(error, i) in errors" :key="i" class="text-sm text-red-400">
-        {{ error }}
-      </p>
-    </div>
-  </div>
-</template>

package/dist/adaptors/vue/components/defaults/GroupElement.vue

@@ -1,53 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-
-/**
- * Default Group element for LayoutRenderer
- *
- * A labeled section container. Children are rendered via default slot.
- *
- * Contract:
- * - props: element
- * - emits: none
- * - slot: default (for nested layout content)
- */
-const props = defineProps({
-  element: { type: Object, required: true }
-})
-
-const isCollapsed = ref(props.element.collapsed || false)
-
-function toggleCollapse() {
-  if (props.element.collapsible) {
-    isCollapsed.value = !isCollapsed.value
-  }
-}
-</script>
-
-<template>
-  <div class="border border-border rounded-lg overflow-hidden">
-    <!-- Header -->
-    <div
-      class="px-4 py-3 bg-muted/50"
-      :class="{ 'cursor-pointer hover:bg-muted/70': element.collapsible }"
-      @click="toggleCollapse"
-    >
-      <div class="flex items-center justify-between">
-        <div>
-          <h4 class="font-medium">{{ element.label }}</h4>
-          <p v-if="element.description" class="text-sm text-muted-foreground mt-0.5">
-            {{ element.description }}
-          </p>
-        </div>
-        <span v-if="element.collapsible" class="text-muted-foreground">
-          {{ isCollapsed ? '▶' : '▼' }}
-        </span>
-      </div>
-    </div>
-
-    <!-- Content -->
-    <div v-show="!isCollapsed" class="p-4">
-      <slot />
-    </div>
-  </div>
-</template>

package/dist/adaptors/vue/components/defaults/LabelElement.vue

@@ -1,25 +0,0 @@
-<script setup>
-/**
- * Default Label element for LayoutRenderer
- *
- * Contract:
- * - props: element
- * - emits: none
- */
-defineProps({
-  element: { type: Object, required: true }
-})
-
-const variantClasses = {
-  heading: 'text-lg font-semibold',
-  subheading: 'text-base font-medium text-muted-foreground',
-  body: 'text-sm',
-  caption: 'text-xs text-muted-foreground'
-}
-</script>
-
-<template>
-  <p :class="variantClasses[element.variant] || variantClasses.body">
-    {{ element.text }}
-  </p>
-</template>

package/dist/adaptors/vue/components/defaults/TabsElement.vue

@@ -1,54 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-
-/**
- * Default Tabs element for LayoutRenderer
- *
- * A tabbed container. Tab content is rendered via scoped slot.
- *
- * Contract:
- * - props: element
- * - emits: none
- * - slot: #tab="{ tab }" (for rendering each tab's content)
- */
-const props = defineProps({
-  element: { type: Object, required: true }
-})
-
-const activeTab = ref(props.element.default_tab || 0)
-
-function selectTab(index) {
-  activeTab.value = index
-}
-</script>
-
-<template>
-  <div>
-    <!-- Tab buttons -->
-    <div class="flex border-b border-border">
-      <button
-        v-for="(tab, index) in element.tabs"
-        :key="index"
-        type="button"
-        class="px-4 py-2 text-sm font-medium transition-colors"
-        :class="[
-          activeTab === index
-            ? 'text-primary border-b-2 border-primary -mb-px'
-            : 'text-muted-foreground hover:text-foreground'
-        ]"
-        @click="selectTab(index)"
-      >
-        {{ tab.label }}
-      </button>
-    </div>
-
-    <!-- Tab content -->
-    <div class="pt-4">
-      <template v-for="(tab, index) in element.tabs" :key="index">
-        <div v-show="activeTab === index">
-          <slot name="tab" :tab="tab" :index="index" />
-        </div>
-      </template>
-    </div>
-  </div>
-</template>

package/dist/adaptors/vue/components/defaults/index.d.ts

@@ -1,7 +0,0 @@
-/**
- * Create a default components registry (without Control - user must provide)
- *
- * @param {Object} options - Override specific components
- * @returns {Object} Components registry for LayoutRenderer
- */
-export function createDefaultComponents(options?: Object): Object;

package/dist/adaptors/vue/components/defaults/index.js

@@ -1,31 +0,0 @@
-/**
- * Default component implementations for LayoutRenderer
- *
- * These are minimal, unstyled implementations that follow the contracts.
- * Users can use these as-is or as reference for custom implementations.
- */
-export { default as AlertElement } from './AlertElement.vue';
-export { default as LabelElement } from './LabelElement.vue';
-export { default as DividerElement } from './DividerElement.vue';
-export { default as DisplayElement } from './DisplayElement.vue';
-export { default as GroupElement } from './GroupElement.vue';
-export { default as TabsElement } from './TabsElement.vue';
-export { default as ErrorBlock } from './ErrorBlock.vue';
-/**
- * Create a default components registry (without Control - user must provide)
- *
- * @param {Object} options - Override specific components
- * @returns {Object} Components registry for LayoutRenderer
- */
-export function createDefaultComponents(options = {}) {
-    return {
-        Alert: AlertElement,
-        Label: LabelElement,
-        Divider: DividerElement,
-        Display: DisplayElement,
-        Group: GroupElement,
-        Tabs: TabsElement,
-        ErrorBlock: ErrorBlock,
-        ...options
-    };
-}

package/dist/adaptors/vue/components/index.d.ts

@@ -1 +0,0 @@
-export { AlertElement, LabelElement, DividerElement, DisplayElement, GroupElement, TabsElement, ErrorBlock, createDefaultComponents } from "./defaults/index.js";

package/dist/adaptors/vue/components/index.js

@@ -1,7 +0,0 @@
-/**
- * Vue components for StateZero
- */
-// Main layout renderer
-export { default as LayoutRenderer } from './LayoutRenderer.vue';
-// Default component implementations
-export { AlertElement, LabelElement, DividerElement, DisplayElement, GroupElement, TabsElement, ErrorBlock, createDefaultComponents } from './defaults/index.js';

package/dist/adaptors/vue/composables.d.ts

@@ -1,2 +0,0 @@
-export function useQueryset(querysetFactory: any): import("vue").ComputedRef<any>;
-export const querysets: Map<any, any>;