@structured-field/widget-editor 1.0.3 → 1.1.0

package/package.json

@@ -1,10 +1,14 @@
 {
   "name": "@structured-field/widget-editor",
-  "version": "1.0.3",
+  "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",

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)]"
@@ -42,6 +60,7 @@
 
 <script>
 import { getDefaultForSchema } from '../utils';
+import SfIcon from './SfIcon.vue';
 
 let keyCounter = 0;
 
@@ -52,6 +71,7 @@ export default {
   beforeCreate() {
     if (!this.$options.components) this.$options.components = {};
     this.$options.components.SchemaEditor = SchemaEditor;
+    this.$options.components.SfIcon = SfIcon;
   },
   props: {
     schema: { type: Object, required: true },
@@ -64,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: {
@@ -104,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>
@@ -29,6 +29,7 @@
 
 <script>
 import { getDefaultForSchema } from '../utils';
+import SfIcon from './SfIcon.vue';
 
 import SchemaEditor from './SchemaEditor.vue';
 
@@ -37,6 +38,7 @@ export default {
   beforeCreate() {
     if (!this.$options.components) this.$options.components = {};
     this.$options.components.SchemaEditor = SchemaEditor;
+    this.$options.components.SfIcon = SfIcon;
   },
   props: {
     schema: { type: Object, required: true },

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"
@@ -30,12 +36,14 @@
 
 <script>
 import SchemaEditor from './SchemaEditor.vue';
+import SfIcon from './SfIcon.vue';
 
 export default {
   name: 'ObjectEditor',
   beforeCreate() {
     if (!this.$options.components) this.$options.components = {};
     this.$options.components.SchemaEditor = SchemaEditor;
+    this.$options.components.SfIcon = SfIcon;
   },
   props: {
     schema: { type: Object, required: true },
@@ -44,6 +52,11 @@ export default {
     form: { type: Object, required: true },
   },
   emits: ['update:modelValue'],
+  data() {
+    return {
+      collapsed: false,
+    };
+  },
   computed: {
     isRoot() {
       return this.path.length === 0;
@@ -51,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/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;

package/src/scss/components/form.scss

@@ -46,8 +46,13 @@
   }
 
   .sf-select {
-    appearance: auto;
+    appearance: none;
     cursor: pointer;
+    padding-right: 28px;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='12' height='12'%3E%3Cpath fill='%23888' d='M12 15L5 8h14z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 8px center;
+    background-size: 12px 12px;
   }
 
   .sf-checkbox {

package/src/scss/main.scss

@@ -1,3 +1,3 @@
-@import './components/form.scss';
-@import './components/editors.scss';
-@import './components/relation.scss';
+@use './components/form';
+@use './components/editors';
+@use './components/relation';