@structured-field/widget-editor 1.0.1 → 1.1.0

package/package.json

@@ -1,10 +1,14 @@
 {
   "name": "@structured-field/widget-editor",
-  "version": "1.0.1",
+  "version": "1.1.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",
   "module": "dist/structured-widget-editor.esm.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bnznamco/structured-widget-editor"
+  },
   "exports": {
     ".": {
       "import": "./dist/structured-widget-editor.esm.js",
@@ -62,6 +66,11 @@
     "branches": [
       "master"
     ],
+    "verifyConditions": [
+      "@semantic-release/changelog",
+      "@semantic-release/git",
+      "@semantic-release/github"
+    ],
     "plugins": [
       "@semantic-release/commit-analyzer",
       "@semantic-release/release-notes-generator",

package/src/SchemaForm.vue

@@ -24,6 +24,7 @@ export default {
     errors: { type: Object, default: () => ({}) },
   },
   emits: ['change'],
+  expose: ['getValue'],
   data() {
     const parsedSchema = typeof this.schema === 'string' ? JSON.parse(this.schema) : this.schema;
     const defs = parsedSchema.$defs || parsedSchema.definitions || {};

package/src/editors/ArrayEditor.vue

@@ -4,27 +4,45 @@
       <span class="sf-label">{{ title }}</span>
       <span class="sf-array-count">{{ items.length }}</span>
       <button type="button" class="sf-btn sf-btn-add" @click="addItem()">
-        <i class="fas fa-plus"></i> Add
+        <SfIcon name="plus" /> Add
       </button>
+      <span v-if="items.length" class="sf-array-collapse-toggle" :title="allCollapsed ? 'Expand all' : 'Collapse all'" @click="toggleCollapseAll">
+        <SfIcon :name="allCollapsed ? 'chevron-down' : 'chevron-up'" />
+      </span>
     </div>
     <div class="sf-array-items">
-      <div v-for="(item, index) in items" :key="item._key" class="sf-array-item">
+      <div
+        v-for="(item, index) in items"
+        :key="item._key"
+        class="sf-array-item"
+        :class="{ 'sf-drag-over': dragOverIndex === index, 'sf-dragging': dragSourceIndex === index }"
+        draggable="true"
+        @dragstart="onDragStart(index, $event)"
+        @dragover.prevent="onDragOver(index)"
+        @dragleave="onDragLeave(index)"
+        @drop.prevent="onDrop(index)"
+        @dragend="onDragEnd"
+      >
         <div class="sf-array-item-header">
-          <span class="sf-array-item-index">#{{ index + 1 }}</span>
+          <div class="sf-array-item-left">
+            <span class="sf-drag-handle" title="Drag to reorder"><SfIcon name="grip" /></span>
+            <span class="sf-array-item-index">#{{ index + 1 }}</span>
+          </div>
           <div class="sf-array-item-actions">
             <button v-if="index > 0" type="button" class="sf-btn sf-btn-sm" @click="moveItem(index, -1)">
-              <i class="fas fa-arrow-up"></i>
+              <SfIcon name="arrow-up" />
             </button>
             <button type="button" class="sf-btn sf-btn-sm" @click="moveItem(index, 1)">
-              <i class="fas fa-arrow-down"></i>
+              <SfIcon name="arrow-down" />
             </button>
             <button type="button" class="sf-btn sf-btn-sm sf-btn-danger" @click="removeItem(index)">
-              <i class="fas fa-times"></i>
+              <SfIcon name="times" />
             </button>
           </div>
         </div>
-        <div class="sf-array-item-body">
+        <div class="sf-array-item-body" @dragover.prevent @drop.prevent="onDrop(index)">
           <SchemaEditor
+            ref="itemEditors"
             :schema="itemSchema"
             :model-value="item.value"
             :path="[...path, String(index)]"
@@ -41,14 +59,20 @@
 </template>
 
 <script>
-import { defineAsyncComponent } from 'vue';
 import { getDefaultForSchema } from '../utils';
+import SfIcon from './SfIcon.vue';
 
 let keyCounter = 0;
 
+import SchemaEditor from './SchemaEditor.vue';
+
 export default {
   name: 'ArrayEditor',
-  components: { SchemaEditor: defineAsyncComponent(() => import('./SchemaEditor.vue')) },
+  beforeCreate() {
+    if (!this.$options.components) this.$options.components = {};
+    this.$options.components.SchemaEditor = SchemaEditor;
+    this.$options.components.SfIcon = SfIcon;
+  },
   props: {
     schema: { type: Object, required: true },
     modelValue: { default: () => [] },
@@ -60,6 +84,9 @@ export default {
     const arr = Array.isArray(this.modelValue) ? this.modelValue : [];
     return {
       items: arr.map(v => ({ _key: keyCounter++, value: v })),
+      dragSourceIndex: null,
+      dragOverIndex: null,
+      allCollapsed: false,
     };
   },
   computed: {
@@ -100,6 +127,44 @@ export default {
       this.items[index].value = value;
       this.emitValue();
     },
+    onDragStart(index, event) {
+      this.dragSourceIndex = index;
+      event.dataTransfer.effectAllowed = 'move';
+      event.dataTransfer.setData('text/plain', String(index));
+    },
+    onDragOver(index) {
+      if (this.dragSourceIndex !== null && index !== this.dragSourceIndex) {
+        this.dragOverIndex = index;
+      }
+    },
+    onDragLeave(index) {
+      if (this.dragOverIndex === index) {
+        this.dragOverIndex = null;
+      }
+    },
+    onDrop(index) {
+      if (this.dragSourceIndex === null || this.dragSourceIndex === index) return;
+      const moved = this.items.splice(this.dragSourceIndex, 1)[0];
+      this.items.splice(index, 0, moved);
+      this.dragSourceIndex = null;
+      this.dragOverIndex = null;
+      this.emitValue();
+    },
+    onDragEnd() {
+      this.dragSourceIndex = null;
+      this.dragOverIndex = null;
+    },
+    toggleCollapseAll() {
+      this.allCollapsed = !this.allCollapsed;
+      const editors = this.$refs.itemEditors;
+      if (!editors) return;
+      const list = Array.isArray(editors) ? editors : [editors];
+      if (this.allCollapsed) {
+        list.forEach(editor => editor?.collapseAll?.());
+      } else {
+        list.forEach(editor => editor?.expandAll?.());
+      }
+    },
     emitValue() {
       this.$emit('update:modelValue', this.items.map(i => i.value));
     },

package/src/editors/NullableEditor.vue

@@ -4,10 +4,10 @@
       <label class="sf-label" :class="{ required: isRequired }">{{ title }}</label>
       <button type="button" :class="toggleClass" @click="toggle">
         <template v-if="isNull">
-          <i class="fas fa-plus"></i> Add
+          <SfIcon name="plus" /> Add
         </template>
         <template v-else>
-          <i class="fas fa-times"></i> Remove
+          <SfIcon name="times" /> Remove
         </template>
       </button>
     </div>
@@ -28,12 +28,18 @@
 </template>
 
 <script>
-import { defineAsyncComponent } from 'vue';
 import { getDefaultForSchema } from '../utils';
+import SfIcon from './SfIcon.vue';
+
+import SchemaEditor from './SchemaEditor.vue';
 
 export default {
   name: 'NullableEditor',
-  components: { SchemaEditor: defineAsyncComponent(() => import('./SchemaEditor.vue')) },
+  beforeCreate() {
+    if (!this.$options.components) this.$options.components = {};
+    this.$options.components.SchemaEditor = SchemaEditor;
+    this.$options.components.SfIcon = SfIcon;
+  },
   props: {
     schema: { type: Object, required: true },
     modelValue: { default: null },

package/src/editors/ObjectEditor.vue

@@ -12,9 +12,15 @@
       />
     </div>
   </div>
-  <fieldset v-else class="sf-object">
-    <legend class="sf-object-title">{{ title }}</legend>
-    <div class="sf-object-fields">
+  <fieldset v-else class="sf-object" :class="{ 'sf-object-collapsed': collapsed }">
+    <legend class="sf-object-title">
+      <button type="button" class="sf-collapse-btn" :aria-label="collapsed ? 'Expand' : 'Collapse'" @click="collapsed = !collapsed">
+        <SfIcon :name="collapsed ? 'chevron-down' : 'chevron-up'" :size="12" />
+      </button>
+      <span class="sf-object-title-text">{{ title }}</span>
+      <span v-if="collapsed && summary" class="sf-object-summary">{{ summary }}</span>
+    </legend>
+    <div v-show="!collapsed" class="sf-object-fields">
       <SchemaEditor
         v-for="(propSchema, key) in (schema.properties || {})"
         :key="key"
@@ -29,11 +35,16 @@
 </template>
 
 <script>
-import { defineAsyncComponent } from 'vue';
+import SchemaEditor from './SchemaEditor.vue';
+import SfIcon from './SfIcon.vue';
 
 export default {
   name: 'ObjectEditor',
-  components: { SchemaEditor: defineAsyncComponent(() => import('./SchemaEditor.vue')) },
+  beforeCreate() {
+    if (!this.$options.components) this.$options.components = {};
+    this.$options.components.SchemaEditor = SchemaEditor;
+    this.$options.components.SfIcon = SfIcon;
+  },
   props: {
     schema: { type: Object, required: true },
     modelValue: { default: () => ({}) },
@@ -41,6 +52,11 @@ export default {
     form: { type: Object, required: true },
   },
   emits: ['update:modelValue'],
+  data() {
+    return {
+      collapsed: false,
+    };
+  },
   computed: {
     isRoot() {
       return this.path.length === 0;
@@ -48,12 +64,30 @@ export default {
     title() {
       return this.schema.title || this.humanize(this.path[this.path.length - 1]) || '';
     },
+    summary() {
+      const val = this.modelValue || {};
+      const parts = [];
+      for (const key of Object.keys(this.schema.properties || {})) {
+        if (parts.length >= 3) break;
+        const v = val[key];
+        if (v !== null && v !== undefined && v !== '' && typeof v !== 'object') {
+          parts.push(String(v));
+        }
+      }
+      return parts.join(' · ');
+    },
   },
   methods: {
     humanize(str) {
       if (!str) return '';
       return str.replace(/_/g, ' ').replace(/([a-z])([A-Z])/g, '$1 $2').replace(/^./, s => s.toUpperCase());
     },
+    collapse() {
+      this.collapsed = true;
+    },
+    expand() {
+      this.collapsed = false;
+    },
     onChildChange(key, value) {
       const newVal = { ...(this.modelValue || {}), [key]: value };
       this.$emit('update:modelValue', newVal);

package/src/editors/RelationEditor.vue

@@ -8,7 +8,7 @@
           <span class="sf-relation-tag-text">{{ getDisplayName(item) }}</span>
           <button v-if="isMultiple || allowClear" type="button" class="sf-relation-tag-remove"
             @click.stop="removeItem(item)">
-            <i class="fas fa-times"></i>
+            <SfIcon name="times" />
           </button>
         </div>
       </div>
@@ -41,9 +41,11 @@
 
 <script>
 import { debounce } from '../utils';
+import SfIcon from './SfIcon.vue';
 
 export default {
   name: 'RelationEditor',
+  components: { SfIcon },
   props: {
     schema: { type: Object, required: true },
     modelValue: { default: null },
@@ -95,8 +97,8 @@ export default {
       return this.form.getErrorsForPath(this.path);
     },
     filteredResults() {
-      const selectedIds = new Set(this.selected.map(s => `${s.id}-${s.model || ''}`));
-      return this.searchResults.filter(item => !selectedIds.has(`${item.id}-${item.model || ''}`));
+      const selectedIds = new Set(this.selected.map(item => this.itemKey(item)));
+      return this.searchResults.filter(item => !selectedIds.has(this.itemKey(item)));
     },
   },
   created() {

package/src/editors/SchemaEditor.vue

@@ -1,5 +1,6 @@
 <template>
   <component
+    ref="editor"
     :is="editorComponent"
     :schema="schema"
     :model-value="modelValue"
@@ -44,6 +45,18 @@ export default {
     form: { type: Object, required: true },
   },
   emits: ['update:modelValue'],
+  methods: {
+    collapseAll() {
+      const editor = this.$refs.editor;
+      if (editor?.collapse) editor.collapse();
+      if (editor?.collapseAll) editor.collapseAll();
+    },
+    expandAll() {
+      const editor = this.$refs.editor;
+      if (editor?.expand) editor.expand();
+      if (editor?.expandAll) editor.expandAll();
+    },
+  },
   computed: {
     editorComponent() {
       const schema = this.schema;

package/src/editors/SfIcon.vue

@@ -0,0 +1,45 @@
+<template>
+  <svg class="sf-icon" :width="size" :height="size" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+    stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+    <template v-if="name === 'plus'">
+      <line x1="12" y1="5" x2="12" y2="19" />
+      <line x1="5" y1="12" x2="19" y2="12" />
+    </template>
+    <template v-else-if="name === 'times'">
+      <line x1="6" y1="6" x2="18" y2="18" />
+      <line x1="6" y1="18" x2="18" y2="6" />
+    </template>
+    <template v-else-if="name === 'arrow-up'">
+      <line x1="12" y1="19" x2="12" y2="5" />
+      <polyline points="5 12 12 5 19 12" />
+    </template>
+    <template v-else-if="name === 'arrow-down'">
+      <line x1="12" y1="5" x2="12" y2="19" />
+      <polyline points="19 12 12 19 5 12" />
+    </template>
+    <template v-else-if="name === 'chevron-down'">
+      <polyline points="6 9 12 15 18 9" />
+    </template>
+    <template v-else-if="name === 'chevron-up'">
+      <polyline points="18 15 12 9 6 15" />
+    </template>
+    <template v-else-if="name === 'grip'">
+      <circle cx="9" cy="7" r="1" fill="currentColor" stroke="none" />
+      <circle cx="15" cy="7" r="1" fill="currentColor" stroke="none" />
+      <circle cx="9" cy="12" r="1" fill="currentColor" stroke="none" />
+      <circle cx="15" cy="12" r="1" fill="currentColor" stroke="none" />
+      <circle cx="9" cy="17" r="1" fill="currentColor" stroke="none" />
+      <circle cx="15" cy="17" r="1" fill="currentColor" stroke="none" />
+    </template>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'SfIcon',
+  props: {
+    name: { type: String, required: true },
+    size: { type: [Number, String], default: 14 },
+  },
+};
+</script>

package/src/editors/UnionEditor.vue

@@ -20,12 +20,16 @@
 </template>
 
 <script>
-import { defineAsyncComponent } from 'vue';
 import { getDefaultForSchema } from '../utils';
 
+import SchemaEditor from './SchemaEditor.vue';
+
 export default {
   name: 'UnionEditor',
-  components: { SchemaEditor: defineAsyncComponent(() => import('./SchemaEditor.vue')) },
+  beforeCreate() {
+    if (!this.$options.components) this.$options.components = {};
+    this.$options.components.SchemaEditor = SchemaEditor;
+  },
   props: {
     schema: { type: Object, required: true },
     modelValue: { default: null },

package/src/index.js

@@ -13,140 +13,13 @@ export { default as NullableEditor } from './editors/NullableEditor.vue';
 export { default as UnionEditor } from './editors/UnionEditor.vue';
 export { default as RelationEditor } from './editors/RelationEditor.vue';
 
-import { createApp, h, ref, reactive } from 'vue';
+import { defineCustomElement } from 'vue';
 import SchemaFormComponent from './SchemaForm.vue';
 
-export class SchemaFormElement extends HTMLElement {
-  constructor() {
-    super();
-    this._formRef = ref(null);
-    this._props = reactive({
-      schema: {},
-      initialData: undefined,
-      errors: {},
-    });
-    this._app = null;
-    this._mountPoint = null;
-  }
-
-  connectedCallback() {
-    this._mountPoint = document.createElement('div');
-    this.appendChild(this._mountPoint);
-
-    // Read from attributes if properties haven't been set programmatically
-    if (!this._propsSet) {
-      const schemaAttr = this.getAttribute('schema');
-      const dataAttr = this.getAttribute('initial-data');
-      if (schemaAttr) this._props.schema = JSON.parse(schemaAttr);
-      if (dataAttr) this._props.initialData = JSON.parse(dataAttr);
-    }
-
-    const formRef = this._formRef;
-    const props = this._props;
-
-    this._app = createApp({
-      render: () => h(SchemaFormComponent, {
-        ref: formRef,
-        schema: props.schema,
-        initialData: props.initialData,
-        errors: props.errors,
-        onChange: (val) => {
-          this.dispatchEvent(new CustomEvent('change', { detail: val, bubbles: true }));
-        },
-      }),
-    });
-
-    this._app.mount(this._mountPoint);
-  }
-
-  disconnectedCallback() {
-    if (this._app) {
-      this._app.unmount();
-      this._app = null;
-    }
-    this._mountPoint = null;
-  }
-
-  // --- Property API ---
-
-  get schema() {
-    return this._props.schema;
-  }
-
-  set schema(val) {
-    this._propsSet = true;
-    this._props.schema = typeof val === 'string' ? JSON.parse(val) : val;
-    this._rerender();
-  }
-
-  get initialData() {
-    return this._props.initialData;
-  }
-
-  set initialData(val) {
-    this._propsSet = true;
-    this._props.initialData = typeof val === 'string' ? JSON.parse(val) : val;
-    this._rerender();
-  }
-
-  get errors() {
-    return this._props.errors;
-  }
-
-  set errors(val) {
-    this._propsSet = true;
-    this._props.errors = typeof val === 'string' ? JSON.parse(val) : (val || {});
-    this._rerender();
-  }
-
-  // --- Attribute reflection ---
-
-  static get observedAttributes() {
-    return ['schema', 'initial-data', 'errors'];
-  }
-
-  attributeChangedCallback(name, oldVal, newVal) {
-    if (oldVal === newVal || this._propsSet) return;
-    if (name === 'schema') {
-      this._props.schema = newVal ? JSON.parse(newVal) : {};
-    } else if (name === 'initial-data') {
-      this._props.initialData = newVal ? JSON.parse(newVal) : undefined;
-    } else if (name === 'errors') {
-      this._props.errors = newVal ? JSON.parse(newVal) : {};
-    }
-    this._rerender();
-  }
-
-  // --- Public methods ---
-
-  getValue() {
-    return this._formRef.value?.getValue?.() ?? null;
-  }
-
-  // --- Internal ---
-
-  _rerender() {
-    if (!this._app) return;
-    this._app.unmount();
-    this._mountPoint.innerHTML = '';
-    const formRef = this._formRef;
-    const props = this._props;
-
-    this._app = createApp({
-      render: () => h(SchemaFormComponent, {
-        ref: formRef,
-        schema: props.schema,
-        initialData: props.initialData,
-        errors: props.errors,
-        onChange: (val) => {
-          this.dispatchEvent(new CustomEvent('change', { detail: val, bubbles: true }));
-        },
-      }),
-    });
-
-    this._app.mount(this._mountPoint);
-  }
-}
+export const SchemaFormElement = defineCustomElement({
+  ...SchemaFormComponent,
+  shadowRoot: false,
+});
 
 export function registerCustomElement(tagName = 'schema-form') {
   if (!customElements.get(tagName)) {

package/src/scss/components/editors.scss

@@ -21,10 +21,17 @@
       padding: 12px;
       margin-bottom: 12px;
       background: var(--body-bg, #fff);
+
+      &.sf-object-collapsed {
+        padding: 0;
+      }
     }
   }
 
   .sf-object-title {
+    display: flex;
+    align-items: center;
+    gap: 6px;
     font-weight: 600;
     font-size: 0.8125rem;
     color: var(--body-fg, #333);
@@ -32,6 +39,40 @@
     padding: 0 4px;
   }
 
+  .sf-object-title-text {
+    flex-shrink: 0;
+  }
+
+  .sf-object-summary {
+    font-weight: 400;
+    font-size: 0.75rem;
+    color: var(--body-quiet-color, #888);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 240px;
+  }
+
+  .sf-collapse-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    padding: 0;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    color: var(--body-quiet-color, #888);
+    border-radius: 3px;
+    flex-shrink: 0;
+
+    &:hover {
+      background: var(--darkened-bg, #f0f0f0);
+      color: var(--body-fg, #333);
+    }
+  }
+
   .sf-object-fields {
     display: flex;
     flex-direction: column;
@@ -53,6 +94,19 @@
     }
   }
 
+  .sf-array-collapse-toggle {
+    margin-left: auto;
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    color: var(--body-quiet-color, #aaa);
+    line-height: 0;
+
+    &:hover {
+      color: var(--body-fg, #333);
+    }
+  }
+
   .sf-array-count {
     display: inline-flex;
     align-items: center;
@@ -80,6 +134,21 @@
     overflow: hidden;
   }
 
+  .sf-array-item {
+    &[draggable="true"] {
+      cursor: grab;
+    }
+
+    &.sf-dragging {
+      opacity: 0.4;
+    }
+
+    &.sf-drag-over {
+      outline: 2px solid var(--primary-color, #3b82f6);
+      outline-offset: -2px;
+    }
+  }
+
   .sf-array-item-header {
     display: flex;
     align-items: center;
@@ -89,6 +158,29 @@
     border-bottom: 1px solid var(--border-color, #ccc);
   }
 
+  .sf-array-item-left {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .sf-drag-handle {
+    display: inline-flex;
+    align-items: center;
+    color: var(--body-quiet-color, #aaa);
+    cursor: grab;
+    padding: 0 2px;
+    line-height: 0;
+
+    &:active {
+      cursor: grabbing;
+    }
+
+    &:hover {
+      color: var(--body-fg, #555);
+    }
+  }
+
   .sf-array-item-index {
     font-size: 0.6875rem;
     font-weight: 600;