@structured-field/widget-editor 1.1.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@structured-field/widget-editor",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "A lightweight JSON Schema form builder with support for relation fields (ForeignKey, QuerySet) and autocomplete search.",
   "type": "module",
   "main": "dist/structured-widget-editor.js",

package/src/BaseEditorElement.js

@@ -0,0 +1,108 @@
+/**
+ * Base class for creating web component custom editors.
+ *
+ * Handles the property contract with the structured-widget-editor wrapper:
+ * - Receives `schema`, `modelValue`, `path`, and `form` as JS properties.
+ * - Provides `emitChange(value)` to dispatch the value back to the form.
+ * - Provides `getErrors()` to retrieve validation errors for this field.
+ * - Calls `render()` once on `connectedCallback` and `update()` on property changes.
+ *
+ * @example
+ *   import { BaseEditorElement } from '@structured-field/widget-editor';
+ *
+ *   class MyColorPicker extends BaseEditorElement {
+ *     render() {
+ *       const input = document.createElement('input');
+ *       input.type = 'color';
+ *       input.value = this.modelValue || '#000000';
+ *       input.addEventListener('input', () => this.emitChange(input.value));
+ *       this._input = input;
+ *       this.appendChild(input);
+ *     }
+ *
+ *     update() {
+ *       if (this._input) this._input.value = this.modelValue || '#000000';
+ *     }
+ *   }
+ *
+ *   customElements.define('my-color-picker', MyColorPicker);
+ */
+export class BaseEditorElement extends HTMLElement {
+  constructor() {
+    super();
+    this._schema = {};
+    this._modelValue = undefined;
+    this._path = [];
+    this._form = null;
+    this._connected = false;
+  }
+
+  /* ── Property contract ─────────────────────────────────────────────── */
+
+  get schema() { return this._schema; }
+  set schema(v) {
+    this._schema = v;
+    if (this._connected) this.update();
+  }
+
+  get modelValue() { return this._modelValue; }
+  set modelValue(v) {
+    this._modelValue = v;
+    if (this._connected) this.update();
+  }
+
+  get path() { return this._path; }
+  set path(v) {
+    this._path = v;
+    if (this._connected) this.update();
+  }
+
+  get form() { return this._form; }
+  set form(v) {
+    this._form = v;
+    if (this._connected) this.update();
+  }
+
+  /* ── Lifecycle ─────────────────────────────────────────────────────── */
+
+  connectedCallback() {
+    this._connected = true;
+    this.render();
+  }
+
+  disconnectedCallback() {
+    this._connected = false;
+  }
+
+  /* ── Helpers ───────────────────────────────────────────────────────── */
+
+  /**
+   * Dispatch the new value back to the form.
+   * @param {*} value - The new field value.
+   */
+  emitChange(value) {
+    this.dispatchEvent(new CustomEvent('change', { detail: value }));
+  }
+
+  /**
+   * Returns the current validation errors for this field.
+   * @returns {string[]}
+   */
+  getErrors() {
+    return this._form?.getErrorsForPath?.(this._path) ?? [];
+  }
+
+  /* ── Override points ───────────────────────────────────────────────── */
+
+  /**
+   * Called once when the element is connected to the DOM.
+   * Build the initial DOM structure here.
+   */
+  render() {}
+
+  /**
+   * Called whenever a property (schema, modelValue, path, form) changes
+   * after the initial render. Update the DOM here.
+   */
+  update() {}
+}

package/src/SchemaForm.vue

@@ -14,6 +14,7 @@
 <script>
 import SchemaEditor from './editors/SchemaEditor.vue';
 import { deepClone } from './utils';
+import { applyConditionals, hasConditionals } from './conditionals';
 
 export default {
   name: 'SchemaForm',
@@ -22,9 +23,15 @@ export default {
     schema: { type: [Object, String], default: () => ({}) },
     initialData: { default: undefined },
     errors: { type: Object, default: () => ({}) },
+    customEditors: { type: Array, default: () => [] },
   },
   emits: ['change'],
   expose: ['getValue'],
+  provide() {
+    return {
+      customEditors: () => this.customEditors,
+    };
+  },
   data() {
     const parsedSchema = typeof this.schema === 'string' ? JSON.parse(this.schema) : this.schema;
     const defs = parsedSchema.$defs || parsedSchema.definitions || {};
@@ -42,6 +49,7 @@ export default {
       return {
         resolveSchema: (s) => this.resolveSchema(s),
         getSchemaAtPath: (p) => this.getSchemaAtPath(p),
+        getEffectiveSchemaAtPath: (p) => this.getEffectiveSchemaAtPath(p),
         getErrorsForPath: (p) => this.getErrorsForPath(p),
       };
     },
@@ -124,6 +132,28 @@ export default {
       return schema;
     },
 
+    getEffectiveSchemaAtPath(path) {
+      let schema = this.resolveSchema(this.rootSchema);
+      let value = this.currentValue;
+      for (const segment of path) {
+        if (!schema) return null;
+        if (schema.properties || schema.if || schema.allOf || schema.dependentSchemas) {
+          if (hasConditionals(schema)) schema = applyConditionals(schema, value || {}, (s) => this.resolveSchema(s));
+        }
+        if (schema.properties && schema.properties[segment] !== undefined) {
+          schema = this.resolveSchema(schema.properties[segment]);
+          value = value != null ? value[segment] : undefined;
+        } else if (schema.items) {
+          schema = this.resolveSchema(schema.items);
+          value = Array.isArray(value) ? value[segment] : undefined;
+        } else {
+          return null;
+        }
+      }
+      if (schema && hasConditionals(schema)) schema = applyConditionals(schema, value || {});
+      return schema;
+    },
+
     onValueChange(val) {
       this.currentValue = val;
       this.$emit('change', val);

package/src/conditionals.js

@@ -0,0 +1,248 @@
+// JSON Schema conditional evaluation for form rendering.
+//
+// Supports the standard keywords: `if`/`then`/`else`, `allOf` of those,
+// `dependentSchemas`, and `dependentRequired`. The matcher implements the
+// subset of JSON Schema validation that is meaningful for form-time
+// conditionals on object properties:
+//
+//   - `properties: { field: { const, enum, type, not } }`
+//   - `required: [...]` (treated as "key is present and not null/undefined")
+//   - `not`, `allOf`, `anyOf`, `oneOf` (recursive)
+//
+// The functions are pure: they take a schema + value and return an
+// "effective schema" with `properties`/`required` merged from any matching
+// branches. The renderer uses that effective schema instead of the raw one.
+
+function isPresent(value, key) {
+  if (value == null || typeof value !== 'object') return false;
+  if (!(key in value)) return false;
+  const v = value[key];
+  return v !== undefined && v !== null && v !== '';
+}
+
+function matchesPropertyConstraint(value, constraint) {
+  if (!constraint || typeof constraint !== 'object') return true;
+  if ('const' in constraint) return value === constraint.const;
+  if (Array.isArray(constraint.enum)) return constraint.enum.includes(value);
+  if (constraint.type) {
+    const t = constraint.type;
+    if (t === 'string' && typeof value !== 'string') return false;
+    if (t === 'number' && typeof value !== 'number') return false;
+    if (t === 'integer' && (typeof value !== 'number' || !Number.isInteger(value))) return false;
+    if (t === 'boolean' && typeof value !== 'boolean') return false;
+    if (t === 'null' && value !== null) return false;
+    if (t === 'array' && !Array.isArray(value)) return false;
+    if (t === 'object' && (value == null || typeof value !== 'object' || Array.isArray(value))) return false;
+  }
+  // Numeric comparators
+  if (typeof value === 'number') {
+    if (typeof constraint.minimum === 'number' && value < constraint.minimum) return false;
+    if (typeof constraint.maximum === 'number' && value > constraint.maximum) return false;
+    if (typeof constraint.exclusiveMinimum === 'number' && value <= constraint.exclusiveMinimum) return false;
+    if (typeof constraint.exclusiveMaximum === 'number' && value >= constraint.exclusiveMaximum) return false;
+    if (typeof constraint.multipleOf === 'number' && constraint.multipleOf > 0) {
+      const q = value / constraint.multipleOf;
+      if (Math.abs(q - Math.round(q)) > 1e-9) return false;
+    }
+  }
+  // String comparators
+  if (typeof value === 'string') {
+    if (typeof constraint.minLength === 'number' && value.length < constraint.minLength) return false;
+    if (typeof constraint.maxLength === 'number' && value.length > constraint.maxLength) return false;
+    if (typeof constraint.pattern === 'string') {
+      try {
+        if (!new RegExp(constraint.pattern).test(value)) return false;
+      } catch (e) {
+        // Invalid pattern — treat as non-match rather than throwing in render path.
+        return false;
+      }
+    }
+  }
+  if (constraint.not) return !matchesSchema(value, constraint.not);
+  return true;
+}
+
+// Returns true if `value` (an object) satisfies the form-relevant subset of `schema`.
+export function matchesSchema(value, schema) {
+  if (!schema || typeof schema !== 'object') return true;
+
+  if (Array.isArray(schema.required)) {
+    for (const k of schema.required) {
+      if (!isPresent(value, k)) return false;
+    }
+  }
+
+  if (schema.properties && typeof schema.properties === 'object') {
+    for (const [k, constraint] of Object.entries(schema.properties)) {
+      // Standard JSON Schema: property constraints only apply if the key is present.
+      if (value == null || !(k in value)) continue;
+      if (!matchesPropertyConstraint(value[k], constraint)) return false;
+    }
+  }
+
+  if (schema.not && matchesSchema(value, schema.not)) return false;
+  if (Array.isArray(schema.allOf) && !schema.allOf.every((s) => matchesSchema(value, s))) return false;
+  if (Array.isArray(schema.anyOf) && !schema.anyOf.some((s) => matchesSchema(value, s))) return false;
+  if (Array.isArray(schema.oneOf)) {
+    const matched = schema.oneOf.filter((s) => matchesSchema(value, s)).length;
+    if (matched !== 1) return false;
+  }
+
+  return true;
+}
+
+function insertAfter(properties, anchorKey, newEntries) {
+  // Rebuild the property map so newly-added keys appear immediately after
+  // their controlling field instead of being appended to the end.
+  const existingKeys = Object.keys(properties);
+  const anchorIdx = anchorKey ? existingKeys.indexOf(anchorKey) : -1;
+  if (anchorIdx === -1) {
+    const out = { ...properties };
+    for (const [k, v] of newEntries) out[k] = v;
+    return out;
+  }
+  const out = {};
+  for (let i = 0; i < existingKeys.length; i++) {
+    const key = existingKeys[i];
+    out[key] = properties[key];
+    if (i === anchorIdx) {
+      for (const [k, v] of newEntries) {
+        if (!(k in properties)) out[k] = v;
+      }
+    }
+  }
+  // Any new keys that already existed in properties have been kept in place;
+  // overwrite their values with the merged versions.
+  for (const [k, v] of newEntries) {
+    if (k in properties) out[k] = v;
+  }
+  return out;
+}
+
+function mergeBranch(target, branch, anchorKey) {
+  if (!branch || typeof branch !== 'object') return target;
+
+  if (branch.properties) {
+    const merged = [];
+    for (const [k, v] of Object.entries(branch.properties)) {
+      const existing = target.properties && target.properties[k];
+      merged.push([k, existing ? { ...existing, ...v } : v]);
+    }
+    target.properties = insertAfter(target.properties || {}, anchorKey, merged);
+  }
+
+  if (Array.isArray(branch.required)) {
+    const set = new Set(target.required || []);
+    for (const k of branch.required) set.add(k);
+    target.required = Array.from(set);
+  }
+
+  // Conditionals can also nest more conditionals — flatten them.
+  if (branch.allOf) {
+    target.allOf = [...(target.allOf || []), ...branch.allOf];
+  }
+  if (branch.if) {
+    target.allOf = [...(target.allOf || []), { if: branch.if, then: branch.then, else: branch.else }];
+  }
+  if (branch.dependentSchemas) {
+    target.dependentSchemas = { ...(target.dependentSchemas || {}), ...branch.dependentSchemas };
+  }
+  if (branch.dependentRequired) {
+    target.dependentRequired = { ...(target.dependentRequired || {}), ...branch.dependentRequired };
+  }
+
+  return target;
+}
+
+// Returns an effective schema for an object schema given the current value.
+// Resolves `if/then/else`, `allOf` of those, `dependentSchemas`, and
+// `dependentRequired`. Idempotent and safe to call on every render.
+//
+// `resolver` (optional) is called on each `then`/`else`/`dependentSchemas`
+// branch before merging, so `$ref` inside conditional branches is followed.
+// Pass `form.resolveSchema` from the renderer.
+export function applyConditionals(schema, value, resolver) {
+  const resolve = typeof resolver === 'function' ? resolver : (s) => s;
+  if (!schema || typeof schema !== 'object') return schema;
+  if (schema.type !== 'object' && !schema.properties) return schema;
+
+  // Start with a shallow clone of the parts we may mutate.
+  let effective = {
+    ...schema,
+    properties: { ...(schema.properties || {}) },
+    required: Array.isArray(schema.required) ? [...schema.required] : [],
+  };
+
+  const safeValue = value && typeof value === 'object' ? value : {};
+
+  // Pick the controlling field of an `if` clause so newly-added properties
+  // can be inserted right after it in render order.
+  const anchorOf = (ifClause) => {
+    if (!ifClause || typeof ifClause !== 'object') return null;
+    const props = ifClause.properties && Object.keys(ifClause.properties);
+    if (props && props.length) return props[0];
+    if (Array.isArray(ifClause.required) && ifClause.required.length) return ifClause.required[0];
+    return null;
+  };
+
+  // Collect rules: top-level if/then/else + every entry in allOf that has one.
+  const rules = [];
+  if (effective.if) {
+    rules.push({ if: effective.if, then: effective.then, else: effective.else, anchor: anchorOf(effective.if) });
+  }
+  if (Array.isArray(effective.allOf)) {
+    for (const entry of effective.allOf) {
+      if (entry && typeof entry === 'object' && entry.if) {
+        rules.push({ if: entry.if, then: entry.then, else: entry.else, anchor: anchorOf(entry.if) });
+      } else if (entry && typeof entry === 'object' && (entry.properties || entry.required)) {
+        // Plain allOf branch (e.g. shared base) — always merge.
+        mergeBranch(effective, entry);
+      }
+    }
+  }
+
+  // Iterate to a fixed point so newly-merged rules can themselves trigger further rules.
+  // Capped to avoid pathological loops.
+  for (let i = 0; i < 8; i++) {
+    let changed = false;
+    const before = JSON.stringify({ p: effective.properties, r: effective.required });
+
+    for (const rule of rules) {
+      const matched = matchesSchema(safeValue, rule.if);
+      const branch = matched ? rule.then : rule.else;
+      if (branch) mergeBranch(effective, resolve(branch), rule.anchor);
+    }
+
+    if (effective.dependentSchemas) {
+      for (const [key, branch] of Object.entries(effective.dependentSchemas)) {
+        if (isPresent(safeValue, key)) mergeBranch(effective, resolve(branch), key);
+      }
+    }
+
+    if (effective.dependentRequired) {
+      for (const [key, requiredKeys] of Object.entries(effective.dependentRequired)) {
+        if (isPresent(safeValue, key) && Array.isArray(requiredKeys)) {
+          const set = new Set(effective.required || []);
+          for (const k of requiredKeys) set.add(k);
+          effective.required = Array.from(set);
+        }
+      }
+    }
+
+    const after = JSON.stringify({ p: effective.properties, r: effective.required });
+    if (after !== before) changed = true;
+    if (!changed) break;
+  }
+
+  return effective;
+}
+
+// Returns true if the schema declares any form-relevant conditional logic.
+export function hasConditionals(schema) {
+  if (!schema || typeof schema !== 'object') return false;
+  if (schema.if || schema.dependentSchemas || schema.dependentRequired) return true;
+  if (Array.isArray(schema.allOf)) {
+    return schema.allOf.some((e) => e && typeof e === 'object' && (e.if || e.dependentSchemas));
+  }
+  return false;
+}

package/src/editors/ArrayEditor.vue

@@ -32,7 +32,7 @@
             <button v-if="index > 0" type="button" class="sf-btn sf-btn-sm" @click="moveItem(index, -1)">
               <SfIcon name="arrow-up" />
             </button>
-            <button type="button" class="sf-btn sf-btn-sm" @click="moveItem(index, 1)">
+            <button v-if="index < items.length - 1" type="button" class="sf-btn sf-btn-sm" @click="moveItem(index, 1)">
               <SfIcon name="arrow-down" />
             </button>
             <button type="button" class="sf-btn sf-btn-sm sf-btn-danger" @click="removeItem(index)">

package/src/editors/ObjectEditor.vue

@@ -2,7 +2,7 @@
   <div v-if="isRoot" class="sf-object sf-object-root">
     <div class="sf-object-fields">
       <SchemaEditor
-        v-for="(propSchema, key) in (schema.properties || {})"
+        v-for="(propSchema, key) in (effectiveSchema.properties || {})"
         :key="key"
         :schema="form.resolveSchema(propSchema)"
         :model-value="(modelValue || {})[key]"
@@ -22,7 +22,7 @@
     </legend>
     <div v-show="!collapsed" class="sf-object-fields">
       <SchemaEditor
-        v-for="(propSchema, key) in (schema.properties || {})"
+        v-for="(propSchema, key) in (effectiveSchema.properties || {})"
         :key="key"
         :schema="form.resolveSchema(propSchema)"
         :model-value="(modelValue || {})[key]"
@@ -37,6 +37,7 @@
 <script>
 import SchemaEditor from './SchemaEditor.vue';
 import SfIcon from './SfIcon.vue';
+import { applyConditionals, hasConditionals } from '../conditionals';
 
 export default {
   name: 'ObjectEditor',
@@ -64,10 +65,14 @@ export default {
     title() {
       return this.schema.title || this.humanize(this.path[this.path.length - 1]) || '';
     },
+    effectiveSchema() {
+      if (!hasConditionals(this.schema)) return this.schema;
+      return applyConditionals(this.schema, this.modelValue || {}, this.form?.resolveSchema);
+    },
     summary() {
       const val = this.modelValue || {};
       const parts = [];
-      for (const key of Object.keys(this.schema.properties || {})) {
+      for (const key of Object.keys(this.effectiveSchema.properties || {})) {
         if (parts.length >= 3) break;
         const v = val[key];
         if (v !== null && v !== undefined && v !== '' && typeof v !== 'object') {
@@ -90,7 +95,22 @@ export default {
     },
     onChildChange(key, value) {
       const newVal = { ...(this.modelValue || {}), [key]: value };
-      this.$emit('update:modelValue', newVal);
+      this.$emit('update:modelValue', this.pruneInactive(newVal));
+    },
+    pruneInactive(value) {
+      if (!hasConditionals(this.schema)) return value;
+      const effective = applyConditionals(this.schema, value, this.form?.resolveSchema);
+      const allowed = new Set(Object.keys(effective.properties || {}));
+      let changed = false;
+      const out = {};
+      for (const k of Object.keys(value)) {
+        if (allowed.has(k)) {
+          out[k] = value[k];
+        } else {
+          changed = true;
+        }
+      }
+      return changed ? out : value;
     },
   },
 };

package/src/editors/SchemaEditor.vue

@@ -1,5 +1,16 @@
 <template>
+  <WebComponentWrapper
+    v-if="isWebComponent"
+    ref="editor"
+    :tag-name="editorComponent"
+    :schema="schema"
+    :model-value="modelValue"
+    :path="path"
+    :form="form"
+    @update:model-value="$emit('update:modelValue', $event)"
+  />
   <component
+    v-else
     ref="editor"
     :is="editorComponent"
     :schema="schema"
@@ -21,6 +32,7 @@ import ArrayEditor from './ArrayEditor.vue';
 import NullableEditor from './NullableEditor.vue';
 import UnionEditor from './UnionEditor.vue';
 import RelationEditor from './RelationEditor.vue';
+import WebComponentWrapper from './WebComponentWrapper.vue';
 
 const MAX_DEPTH = 12;
 
@@ -37,6 +49,10 @@ export default {
     NullableEditor,
     UnionEditor,
     RelationEditor,
+    WebComponentWrapper,
+  },
+  inject: {
+    customEditors: { default: () => () => [] },
   },
   props: {
     schema: { type: Object, required: true },
@@ -58,11 +74,20 @@ export default {
     },
   },
   computed: {
+    isWebComponent() {
+      const c = this.editorComponent;
+      return typeof c === 'string' && c.includes('-');
+    },
     editorComponent() {
       const schema = this.schema;
 
       if (this.path.length > MAX_DEPTH) return 'StringEditor';
 
+      const overrides = this.customEditors();
+      for (const override of overrides) {
+        if (override.match(schema, this.path)) return override.component;
+      }
+
       if (schema.type === 'relation') return 'RelationEditor';
       if (schema.oneOf && schema.discriminator) return 'UnionEditor';
       if ('const' in schema) return 'HiddenEditor';

package/src/editors/WebComponentWrapper.vue

@@ -0,0 +1,55 @@
+<script>
+import { h, ref, watch, onMounted, onBeforeUnmount } from 'vue';
+
+export default {
+  name: 'WebComponentWrapper',
+  props: {
+    tagName: { type: String, required: true },
+    schema: { type: Object, required: true },
+    modelValue: { default: undefined },
+    path: { type: Array, default: () => [] },
+    form: { type: Object, required: true },
+  },
+  emits: ['update:modelValue'],
+  setup(props, { emit }) {
+    const elRef = ref(null);
+
+    function syncProps() {
+      const el = elRef.value;
+      if (!el) return;
+      el.schema = props.schema;
+      el.modelValue = props.modelValue;
+      el.path = props.path;
+      el.form = props.form;
+    }
+
+    function handleChange(e) {
+      const value = e.detail != null
+        ? (Array.isArray(e.detail) ? e.detail[0] : e.detail)
+        : undefined;
+      emit('update:modelValue', value);
+    }
+
+    onMounted(() => {
+      syncProps();
+      const el = elRef.value;
+      if (el) {
+        el.addEventListener('update:model-value', handleChange);
+        el.addEventListener('change', handleChange);
+      }
+    });
+
+    onBeforeUnmount(() => {
+      const el = elRef.value;
+      if (el) {
+        el.removeEventListener('update:model-value', handleChange);
+        el.removeEventListener('change', handleChange);
+      }
+    });
+
+    watch(() => [props.schema, props.modelValue, props.path, props.form], syncProps, { deep: true });
+
+    return () => h(props.tagName, { ref: elRef });
+  },
+};
+</script>

package/src/index.js

@@ -12,6 +12,9 @@ export { default as ArrayEditor } from './editors/ArrayEditor.vue';
 export { default as NullableEditor } from './editors/NullableEditor.vue';
 export { default as UnionEditor } from './editors/UnionEditor.vue';
 export { default as RelationEditor } from './editors/RelationEditor.vue';
+export { default as WebComponentWrapper } from './editors/WebComponentWrapper.vue';
+export { BaseEditorElement } from './BaseEditorElement.js';
+export { applyConditionals, matchesSchema, hasConditionals } from './conditionals.js';
 
 import { defineCustomElement } from 'vue';
 import SchemaFormComponent from './SchemaForm.vue';