@structured-field/widget-editor 1.0.3 → 1.1.0

package/dist/structured-widget-editor.esm.js

@@ -1,4 +1,4 @@
-var script$b = {
+var script$c = {
   name: 'StringEditor',
   props: {
     schema: { type: Object, required: true },
@@ -5586,6 +5586,11 @@ function cloneVNode(vnode, extraProps, mergeRef = false, cloneTransition = false
 function createTextVNode(text = " ", flag = 0) {
   return createVNode(Text, null, text, flag);
 }
+function createStaticVNode(content, numberOfNodes) {
+  const vnode = createVNode(Static, null, content);
+  vnode.staticCount = numberOfNodes;
+  return vnode;
+}
 function createCommentVNode(text = "", asBlock = false) {
   return asBlock ? (openBlock(), createBlock(Comment, null, text)) : createVNode(Comment, null, text);
 }
@@ -6690,7 +6695,7 @@ class VueElement extends BaseClass {
   _update() {
     const vnode = this._createVNode();
     if (this._app) vnode.appContext = this._app._context;
-    render$c(vnode, this._root);
+    render$d(vnode, this._root);
   }
   _createVNode() {
     const baseProps = {};
@@ -6957,7 +6962,7 @@ let renderer;
 function ensureRenderer() {
   return renderer || (renderer = createRenderer(rendererOptions));
 }
-const render$c = ((...args) => {
+const render$d = ((...args) => {
   ensureRenderer().render(...args);
 });
 const createApp = ((...args) => {
@@ -6998,14 +7003,14 @@ function normalizeContainer(container) {
   return container;
 }
 
-const _hoisted_1$a = ["value", "placeholder"];
-const _hoisted_2$8 = ["value", "placeholder"];
-const _hoisted_3$7 = {
+const _hoisted_1$b = ["value", "placeholder"];
+const _hoisted_2$9 = ["value", "placeholder"];
+const _hoisted_3$8 = {
   key: 2,
   class: "errorlist"
 };
 
-function render$b(_ctx, _cache, $props, $setup, $data, $options) {
+function render$c(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("div", {
     class: normalizeClass(["sf-field", { errors: $options.fieldErrors.length }])
   }, [
@@ -7020,7 +7025,7 @@ function render$b(_ctx, _cache, $props, $setup, $data, $options) {
           value: $props.modelValue,
           placeholder: $props.schema.placeholder || '',
           onInput: _cache[0] || (_cache[0] = $event => (_ctx.$emit('update:modelValue', $event.target.value)))
-        }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_1$a))
+        }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_1$b))
       : (openBlock(), createElementBlock("input", {
           key: 1,
           type: "text",
@@ -7028,9 +7033,9 @@ function render$b(_ctx, _cache, $props, $setup, $data, $options) {
           value: $props.modelValue != null ? String($props.modelValue) : '',
           placeholder: $props.schema.placeholder || '',
           onInput: _cache[1] || (_cache[1] = $event => (_ctx.$emit('update:modelValue', $event.target.value)))
-        }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_2$8)),
+        }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_2$9)),
     ($options.fieldErrors.length)
-      ? (openBlock(), createElementBlock("ul", _hoisted_3$7, [
+      ? (openBlock(), createElementBlock("ul", _hoisted_3$8, [
           (openBlock(true), createElementBlock(Fragment, null, renderList($options.fieldErrors, (err, i) => {
             return (openBlock(), createElementBlock("li", { key: i }, toDisplayString(err), 1 /* TEXT */))
           }), 128 /* KEYED_FRAGMENT */))
@@ -7039,10 +7044,10 @@ function render$b(_ctx, _cache, $props, $setup, $data, $options) {
   ], 2 /* CLASS */))
 }
 
-script$b.render = render$b;
-script$b.__file = "src/editors/StringEditor.vue";
+script$c.render = render$c;
+script$c.__file = "src/editors/StringEditor.vue";
 
-var script$a = {
+var script$b = {
   name: 'NumberEditor',
   props: {
     schema: { type: Object, required: true },
@@ -7083,13 +7088,13 @@ var script$a = {
   },
 };
 
-const _hoisted_1$9 = ["step", "min", "max", "value"];
-const _hoisted_2$7 = {
+const _hoisted_1$a = ["step", "min", "max", "value"];
+const _hoisted_2$8 = {
   key: 0,
   class: "errorlist"
 };
 
-function render$a(_ctx, _cache, $props, $setup, $data, $options) {
+function render$b(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("div", {
     class: normalizeClass(["sf-field", { errors: $options.fieldErrors.length }])
   }, [
@@ -7104,9 +7109,9 @@ function render$a(_ctx, _cache, $props, $setup, $data, $options) {
       max: $props.schema.maximum != null ? String($props.schema.maximum) : undefined,
       value: $props.modelValue != null ? $props.modelValue : '',
       onInput: _cache[0] || (_cache[0] = (...args) => ($options.onInput && $options.onInput(...args)))
-    }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_1$9),
+    }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_1$a),
     ($options.fieldErrors.length)
-      ? (openBlock(), createElementBlock("ul", _hoisted_2$7, [
+      ? (openBlock(), createElementBlock("ul", _hoisted_2$8, [
           (openBlock(true), createElementBlock(Fragment, null, renderList($options.fieldErrors, (err, i) => {
             return (openBlock(), createElementBlock("li", { key: i }, toDisplayString(err), 1 /* TEXT */))
           }), 128 /* KEYED_FRAGMENT */))
@@ -7115,10 +7120,10 @@ function render$a(_ctx, _cache, $props, $setup, $data, $options) {
   ], 2 /* CLASS */))
 }
 
-script$a.render = render$a;
-script$a.__file = "src/editors/NumberEditor.vue";
+script$b.render = render$b;
+script$b.__file = "src/editors/NumberEditor.vue";
 
-var script$9 = {
+var script$a = {
   name: 'BooleanEditor',
   props: {
     schema: { type: Object, required: true },
@@ -7144,28 +7149,28 @@ var script$9 = {
   },
 };
 
-const _hoisted_1$8 = { class: "sf-checkbox-label" };
-const _hoisted_2$6 = ["checked"];
-const _hoisted_3$6 = {
+const _hoisted_1$9 = { class: "sf-checkbox-label" };
+const _hoisted_2$7 = ["checked"];
+const _hoisted_3$7 = {
   key: 0,
   class: "errorlist"
 };
 
-function render$9(_ctx, _cache, $props, $setup, $data, $options) {
+function render$a(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("div", {
     class: normalizeClass(["sf-field sf-field-boolean", { errors: $options.fieldErrors.length }])
   }, [
-    createBaseVNode("label", _hoisted_1$8, [
+    createBaseVNode("label", _hoisted_1$9, [
       createBaseVNode("input", {
         type: "checkbox",
         class: "sf-checkbox",
         checked: !!$props.modelValue,
         onChange: _cache[0] || (_cache[0] = $event => (_ctx.$emit('update:modelValue', $event.target.checked)))
-      }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_2$6),
+      }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_2$7),
       createTextVNode(" " + toDisplayString($options.title), 1 /* TEXT */)
     ]),
     ($options.fieldErrors.length)
-      ? (openBlock(), createElementBlock("ul", _hoisted_3$6, [
+      ? (openBlock(), createElementBlock("ul", _hoisted_3$7, [
           (openBlock(true), createElementBlock(Fragment, null, renderList($options.fieldErrors, (err, i) => {
             return (openBlock(), createElementBlock("li", { key: i }, toDisplayString(err), 1 /* TEXT */))
           }), 128 /* KEYED_FRAGMENT */))
@@ -7174,10 +7179,10 @@ function render$9(_ctx, _cache, $props, $setup, $data, $options) {
   ], 2 /* CLASS */))
 }
 
-script$9.render = render$9;
-script$9.__file = "src/editors/BooleanEditor.vue";
+script$a.render = render$a;
+script$a.__file = "src/editors/BooleanEditor.vue";
 
-var script$8 = {
+var script$9 = {
   name: 'SelectEditor',
   props: {
     schema: { type: Object, required: true },
@@ -7210,14 +7215,14 @@ var script$8 = {
   },
 };
 
-const _hoisted_1$7 = ["value"];
-const _hoisted_2$5 = ["value"];
-const _hoisted_3$5 = {
+const _hoisted_1$8 = ["value"];
+const _hoisted_2$6 = ["value"];
+const _hoisted_3$6 = {
   key: 0,
   class: "errorlist"
 };
 
-function render$8(_ctx, _cache, $props, $setup, $data, $options) {
+function render$9(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("div", {
     class: normalizeClass(["sf-field", { errors: $options.fieldErrors.length }])
   }, [
@@ -7233,11 +7238,11 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
         return (openBlock(), createElementBlock("option", {
           key: opt,
           value: String(opt)
-        }, toDisplayString(opt), 9 /* TEXT, PROPS */, _hoisted_2$5))
+        }, toDisplayString(opt), 9 /* TEXT, PROPS */, _hoisted_2$6))
       }), 128 /* KEYED_FRAGMENT */))
-    ], 40 /* PROPS, NEED_HYDRATION */, _hoisted_1$7),
+    ], 40 /* PROPS, NEED_HYDRATION */, _hoisted_1$8),
     ($options.fieldErrors.length)
-      ? (openBlock(), createElementBlock("ul", _hoisted_3$5, [
+      ? (openBlock(), createElementBlock("ul", _hoisted_3$6, [
           (openBlock(true), createElementBlock(Fragment, null, renderList($options.fieldErrors, (err, i) => {
             return (openBlock(), createElementBlock("li", { key: i }, toDisplayString(err), 1 /* TEXT */))
           }), 128 /* KEYED_FRAGMENT */))
@@ -7246,10 +7251,10 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
   ], 2 /* CLASS */))
 }
 
-script$8.render = render$8;
-script$8.__file = "src/editors/SelectEditor.vue";
+script$9.render = render$9;
+script$9.__file = "src/editors/SelectEditor.vue";
 
-var script$7 = {
+var script$8 = {
   name: 'HiddenEditor',
   props: {
     schema: { type: Object, required: true },
@@ -7277,20 +7282,116 @@ var script$7 = {
   },
 };
 
-const _hoisted_1$6 = { style: {"display":"none"} };
+const _hoisted_1$7 = { style: {"display":"none"} };
+
+function render$8(_ctx, _cache, $props, $setup, $data, $options) {
+  return (openBlock(), createElementBlock("div", _hoisted_1$7))
+}
+
+script$8.render = render$8;
+script$8.__file = "src/editors/HiddenEditor.vue";
+
+var script$7 = {
+  name: 'SfIcon',
+  props: {
+    name: { type: String, required: true },
+    size: { type: [Number, String], default: 14 },
+  },
+};
+
+const _hoisted_1$6 = ["width", "height"];
+const _hoisted_2$5 = {
+  key: 4,
+  points: "6 9 12 15 18 9"
+};
+const _hoisted_3$5 = {
+  key: 5,
+  points: "18 15 12 9 6 15"
+};
 
 function render$7(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("div", _hoisted_1$6))
+  return (openBlock(), createElementBlock("svg", {
+    class: "sf-icon",
+    width: $props.size,
+    height: $props.size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    "stroke-width": "2.5",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  }, [
+    ($props.name === 'plus')
+      ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          _cache[0] || (_cache[0] = createBaseVNode("line", {
+            x1: "12",
+            y1: "5",
+            x2: "12",
+            y2: "19"
+          }, null, -1 /* CACHED */)),
+          _cache[1] || (_cache[1] = createBaseVNode("line", {
+            x1: "5",
+            y1: "12",
+            x2: "19",
+            y2: "12"
+          }, null, -1 /* CACHED */))
+        ], 64 /* STABLE_FRAGMENT */))
+      : ($props.name === 'times')
+        ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+            _cache[2] || (_cache[2] = createBaseVNode("line", {
+              x1: "6",
+              y1: "6",
+              x2: "18",
+              y2: "18"
+            }, null, -1 /* CACHED */)),
+            _cache[3] || (_cache[3] = createBaseVNode("line", {
+              x1: "6",
+              y1: "18",
+              x2: "18",
+              y2: "6"
+            }, null, -1 /* CACHED */))
+          ], 64 /* STABLE_FRAGMENT */))
+        : ($props.name === 'arrow-up')
+          ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+              _cache[4] || (_cache[4] = createBaseVNode("line", {
+                x1: "12",
+                y1: "19",
+                x2: "12",
+                y2: "5"
+              }, null, -1 /* CACHED */)),
+              _cache[5] || (_cache[5] = createBaseVNode("polyline", { points: "5 12 12 5 19 12" }, null, -1 /* CACHED */))
+            ], 64 /* STABLE_FRAGMENT */))
+          : ($props.name === 'arrow-down')
+            ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
+                _cache[6] || (_cache[6] = createBaseVNode("line", {
+                  x1: "12",
+                  y1: "5",
+                  x2: "12",
+                  y2: "19"
+                }, null, -1 /* CACHED */)),
+                _cache[7] || (_cache[7] = createBaseVNode("polyline", { points: "19 12 12 19 5 12" }, null, -1 /* CACHED */))
+              ], 64 /* STABLE_FRAGMENT */))
+            : ($props.name === 'chevron-down')
+              ? (openBlock(), createElementBlock("polyline", _hoisted_2$5))
+              : ($props.name === 'chevron-up')
+                ? (openBlock(), createElementBlock("polyline", _hoisted_3$5))
+                : ($props.name === 'grip')
+                  ? (openBlock(), createElementBlock(Fragment, { key: 6 }, [
+                      _cache[8] || (_cache[8] = createStaticVNode("<circle cx=\"9\" cy=\"7\" r=\"1\" fill=\"currentColor\" stroke=\"none\"></circle><circle cx=\"15\" cy=\"7\" r=\"1\" fill=\"currentColor\" stroke=\"none\"></circle><circle cx=\"9\" cy=\"12\" r=\"1\" fill=\"currentColor\" stroke=\"none\"></circle><circle cx=\"15\" cy=\"12\" r=\"1\" fill=\"currentColor\" stroke=\"none\"></circle><circle cx=\"9\" cy=\"17\" r=\"1\" fill=\"currentColor\" stroke=\"none\"></circle><circle cx=\"15\" cy=\"17\" r=\"1\" fill=\"currentColor\" stroke=\"none\"></circle>", 6))
+                    ], 64 /* STABLE_FRAGMENT */))
+                  : createCommentVNode("v-if", true)
+  ], 8 /* PROPS */, _hoisted_1$6))
 }
 
 script$7.render = render$7;
-script$7.__file = "src/editors/HiddenEditor.vue";
+script$7.__file = "src/editors/SfIcon.vue";
 
 var script$6 = {
   name: 'ObjectEditor',
   beforeCreate() {
     if (!this.$options.components) this.$options.components = {};
     this.$options.components.SchemaEditor = script$1;
+    this.$options.components.SfIcon = script$7;
   },
   props: {
     schema: { type: Object, required: true },
@@ -7299,6 +7400,11 @@ var script$6 = {
     form: { type: Object, required: true },
   },
   emits: ['update:modelValue'],
+  data() {
+    return {
+      collapsed: false,
+    };
+  },
   computed: {
     isRoot() {
       return this.path.length === 0;
@@ -7306,12 +7412,30 @@ var script$6 = {
     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);
@@ -7324,20 +7448,22 @@ const _hoisted_1$5 = {
   class: "sf-object sf-object-root"
 };
 const _hoisted_2$4 = { class: "sf-object-fields" };
-const _hoisted_3$4 = {
-  key: 1,
-  class: "sf-object"
+const _hoisted_3$4 = { class: "sf-object-title" };
+const _hoisted_4$3 = ["aria-label"];
+const _hoisted_5$3 = { class: "sf-object-title-text" };
+const _hoisted_6$3 = {
+  key: 0,
+  class: "sf-object-summary"
 };
-const _hoisted_4$3 = { class: "sf-object-title" };
-const _hoisted_5$3 = { class: "sf-object-fields" };
+const _hoisted_7$2 = { class: "sf-object-fields" };
 
 function render$6(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_SchemaEditor = resolveComponent("SchemaEditor");
+  const _component_SfIcon = resolveComponent("SfIcon");
 
   return ($options.isRoot)
     ? (openBlock(), createElementBlock("div", _hoisted_1$5, [
         createBaseVNode("div", _hoisted_2$4, [
-          createCommentVNode(" {{ schema.properties }}\n      <span v-for=\"(propSchema, key) in schema.properties\" :key=\"key\">\n        {{ key }}: {{ form.resolveSchema(propSchema) }}\n      </span> "),
           (openBlock(true), createElementBlock(Fragment, null, renderList(($props.schema.properties || {}), (propSchema, key) => {
             return (openBlock(), createBlock(_component_SchemaEditor, {
               key: key,
@@ -7350,9 +7476,28 @@ function render$6(_ctx, _cache, $props, $setup, $data, $options) {
           }), 128 /* KEYED_FRAGMENT */))
         ])
       ]))
-    : (openBlock(), createElementBlock("fieldset", _hoisted_3$4, [
-        createBaseVNode("legend", _hoisted_4$3, toDisplayString($options.title), 1 /* TEXT */),
-        createBaseVNode("div", _hoisted_5$3, [
+    : (openBlock(), createElementBlock("fieldset", {
+        key: 1,
+        class: normalizeClass(["sf-object", { 'sf-object-collapsed': $data.collapsed }])
+      }, [
+        createBaseVNode("legend", _hoisted_3$4, [
+          createBaseVNode("button", {
+            type: "button",
+            class: "sf-collapse-btn",
+            "aria-label": $data.collapsed ? 'Expand' : 'Collapse',
+            onClick: _cache[0] || (_cache[0] = $event => ($data.collapsed = !$data.collapsed))
+          }, [
+            createVNode(_component_SfIcon, {
+              name: $data.collapsed ? 'chevron-down' : 'chevron-up',
+              size: 12
+            }, null, 8 /* PROPS */, ["name"])
+          ], 8 /* PROPS */, _hoisted_4$3),
+          createBaseVNode("span", _hoisted_5$3, toDisplayString($options.title), 1 /* TEXT */),
+          ($data.collapsed && $options.summary)
+            ? (openBlock(), createElementBlock("span", _hoisted_6$3, toDisplayString($options.summary), 1 /* TEXT */))
+            : createCommentVNode("v-if", true)
+        ]),
+        withDirectives(createBaseVNode("div", _hoisted_7$2, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(($props.schema.properties || {}), (propSchema, key) => {
             return (openBlock(), createBlock(_component_SchemaEditor, {
               key: key,
@@ -7363,8 +7508,10 @@ function render$6(_ctx, _cache, $props, $setup, $data, $options) {
               "onUpdate:modelValue": $event => ($options.onChildChange(key, $event))
             }, null, 8 /* PROPS */, ["schema", "model-value", "path", "form", "onUpdate:modelValue"]))
           }), 128 /* KEYED_FRAGMENT */))
+        ], 512 /* NEED_PATCH */), [
+          [vShow, !$data.collapsed]
         ])
-      ]))
+      ], 2 /* CLASS */))
 }
 
 script$6.render = render$6;
@@ -7416,6 +7563,7 @@ var script$5 = {
   beforeCreate() {
     if (!this.$options.components) this.$options.components = {};
     this.$options.components.SchemaEditor = script$1;
+    this.$options.components.SfIcon = script$7;
   },
   props: {
     schema: { type: Object, required: true },
@@ -7428,6 +7576,9 @@ var script$5 = {
     const arr = Array.isArray(this.modelValue) ? this.modelValue : [];
     return {
       items: arr.map(v => ({ _key: keyCounter++, value: v })),
+      dragSourceIndex: null,
+      dragOverIndex: null,
+      allCollapsed: false,
     };
   },
   computed: {
@@ -7468,6 +7619,44 @@ var script$5 = {
       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));
     },
@@ -7477,20 +7666,28 @@ var script$5 = {
 const _hoisted_1$4 = { class: "sf-array-header" };
 const _hoisted_2$3 = { class: "sf-label" };
 const _hoisted_3$3 = { class: "sf-array-count" };
-const _hoisted_4$2 = { class: "sf-array-items" };
-const _hoisted_5$2 = { class: "sf-array-item-header" };
-const _hoisted_6$2 = { class: "sf-array-item-index" };
-const _hoisted_7$1 = { class: "sf-array-item-actions" };
-const _hoisted_8$1 = ["onClick"];
-const _hoisted_9$1 = ["onClick"];
-const _hoisted_10$1 = ["onClick"];
-const _hoisted_11 = { class: "sf-array-item-body" };
-const _hoisted_12 = {
+const _hoisted_4$2 = ["title"];
+const _hoisted_5$2 = { class: "sf-array-items" };
+const _hoisted_6$2 = ["onDragstart", "onDragover", "onDragleave", "onDrop"];
+const _hoisted_7$1 = { class: "sf-array-item-header" };
+const _hoisted_8$1 = { class: "sf-array-item-left" };
+const _hoisted_9$1 = {
+  class: "sf-drag-handle",
+  title: "Drag to reorder"
+};
+const _hoisted_10$1 = { class: "sf-array-item-index" };
+const _hoisted_11 = { class: "sf-array-item-actions" };
+const _hoisted_12 = ["onClick"];
+const _hoisted_13 = ["onClick"];
+const _hoisted_14 = ["onClick"];
+const _hoisted_15 = ["onDrop"];
+const _hoisted_16 = {
   key: 0,
   class: "errorlist"
 };
 
 function render$5(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_SfIcon = resolveComponent("SfIcon");
   const _component_SchemaEditor = resolveComponent("SchemaEditor");
 
   return (openBlock(), createElementBlock("div", {
@@ -7503,60 +7700,89 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
         type: "button",
         class: "sf-btn sf-btn-add",
         onClick: _cache[0] || (_cache[0] = $event => ($options.addItem()))
-      }, [...(_cache[1] || (_cache[1] = [
-        createBaseVNode("i", { class: "fas fa-plus" }, null, -1 /* CACHED */),
-        createTextVNode(" Add ", -1 /* CACHED */)
-      ]))])
+      }, [
+        createVNode(_component_SfIcon, { name: "plus" }),
+        _cache[4] || (_cache[4] = createTextVNode(" Add ", -1 /* CACHED */))
+      ]),
+      ($data.items.length)
+        ? (openBlock(), createElementBlock("span", {
+            key: 0,
+            class: "sf-array-collapse-toggle",
+            title: $data.allCollapsed ? 'Expand all' : 'Collapse all',
+            onClick: _cache[1] || (_cache[1] = (...args) => ($options.toggleCollapseAll && $options.toggleCollapseAll(...args)))
+          }, [
+            createVNode(_component_SfIcon, {
+              name: $data.allCollapsed ? 'chevron-down' : 'chevron-up'
+            }, null, 8 /* PROPS */, ["name"])
+          ], 8 /* PROPS */, _hoisted_4$2))
+        : createCommentVNode("v-if", true)
     ]),
-    createBaseVNode("div", _hoisted_4$2, [
+    createBaseVNode("div", _hoisted_5$2, [
       (openBlock(true), createElementBlock(Fragment, null, renderList($data.items, (item, index) => {
         return (openBlock(), createElementBlock("div", {
           key: item._key,
-          class: "sf-array-item"
+          class: normalizeClass(["sf-array-item", { 'sf-drag-over': $data.dragOverIndex === index, 'sf-dragging': $data.dragSourceIndex === index }]),
+          draggable: "true",
+          onDragstart: $event => ($options.onDragStart(index, $event)),
+          onDragover: withModifiers($event => ($options.onDragOver(index)), ["prevent"]),
+          onDragleave: $event => ($options.onDragLeave(index)),
+          onDrop: withModifiers($event => ($options.onDrop(index)), ["prevent"]),
+          onDragend: _cache[3] || (_cache[3] = (...args) => ($options.onDragEnd && $options.onDragEnd(...args)))
         }, [
-          createBaseVNode("div", _hoisted_5$2, [
-            createBaseVNode("span", _hoisted_6$2, "#" + toDisplayString(index + 1), 1 /* TEXT */),
-            createBaseVNode("div", _hoisted_7$1, [
+          createBaseVNode("div", _hoisted_7$1, [
+            createBaseVNode("div", _hoisted_8$1, [
+              createBaseVNode("span", _hoisted_9$1, [
+                createVNode(_component_SfIcon, { name: "grip" })
+              ]),
+              createBaseVNode("span", _hoisted_10$1, "#" + toDisplayString(index + 1), 1 /* TEXT */)
+            ]),
+            createBaseVNode("div", _hoisted_11, [
               (index > 0)
                 ? (openBlock(), createElementBlock("button", {
                     key: 0,
                     type: "button",
                     class: "sf-btn sf-btn-sm",
                     onClick: $event => ($options.moveItem(index, -1))
-                  }, [...(_cache[2] || (_cache[2] = [
-                    createBaseVNode("i", { class: "fas fa-arrow-up" }, null, -1 /* CACHED */)
-                  ]))], 8 /* PROPS */, _hoisted_8$1))
+                  }, [
+                    createVNode(_component_SfIcon, { name: "arrow-up" })
+                  ], 8 /* PROPS */, _hoisted_12))
                 : createCommentVNode("v-if", true),
               createBaseVNode("button", {
                 type: "button",
                 class: "sf-btn sf-btn-sm",
                 onClick: $event => ($options.moveItem(index, 1))
-              }, [...(_cache[3] || (_cache[3] = [
-                createBaseVNode("i", { class: "fas fa-arrow-down" }, null, -1 /* CACHED */)
-              ]))], 8 /* PROPS */, _hoisted_9$1),
+              }, [
+                createVNode(_component_SfIcon, { name: "arrow-down" })
+              ], 8 /* PROPS */, _hoisted_13),
               createBaseVNode("button", {
                 type: "button",
                 class: "sf-btn sf-btn-sm sf-btn-danger",
                 onClick: $event => ($options.removeItem(index))
-              }, [...(_cache[4] || (_cache[4] = [
-                createBaseVNode("i", { class: "fas fa-times" }, null, -1 /* CACHED */)
-              ]))], 8 /* PROPS */, _hoisted_10$1)
+              }, [
+                createVNode(_component_SfIcon, { name: "times" })
+              ], 8 /* PROPS */, _hoisted_14)
             ])
           ]),
-          createBaseVNode("div", _hoisted_11, [
+          createBaseVNode("div", {
+            class: "sf-array-item-body",
+            onDragover: _cache[2] || (_cache[2] = withModifiers(() => {}, ["prevent"])),
+            onDrop: withModifiers($event => ($options.onDrop(index)), ["prevent"])
+          }, [
             createVNode(_component_SchemaEditor, {
+              ref_for: true,
+              ref: "itemEditors",
               schema: $options.itemSchema,
               "model-value": item.value,
               path: [...$props.path, String(index)],
               form: $props.form,
               "onUpdate:modelValue": $event => ($options.onItemChange(index, $event))
             }, null, 8 /* PROPS */, ["schema", "model-value", "path", "form", "onUpdate:modelValue"])
-          ])
-        ]))
+          ], 40 /* PROPS, NEED_HYDRATION */, _hoisted_15)
+        ], 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_6$2))
       }), 128 /* KEYED_FRAGMENT */))
     ]),
     ($options.fieldErrors.length)
-      ? (openBlock(), createElementBlock("ul", _hoisted_12, [
+      ? (openBlock(), createElementBlock("ul", _hoisted_16, [
           (openBlock(true), createElementBlock(Fragment, null, renderList($options.fieldErrors, (err, i) => {
             return (openBlock(), createElementBlock("li", { key: i }, toDisplayString(err), 1 /* TEXT */))
           }), 128 /* KEYED_FRAGMENT */))
@@ -7573,6 +7799,7 @@ var script$4 = {
   beforeCreate() {
     if (!this.$options.components) this.$options.components = {};
     this.$options.components.SchemaEditor = script$1;
+    this.$options.components.SfIcon = script$7;
   },
   props: {
     schema: { type: Object, required: true },
@@ -7640,6 +7867,7 @@ const _hoisted_3$2 = {
 };
 
 function render$4(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_SfIcon = resolveComponent("SfIcon");
   const _component_SchemaEditor = resolveComponent("SchemaEditor");
 
   return (openBlock(), createElementBlock("div", {
@@ -7656,12 +7884,12 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
       }, [
         ($data.isNull)
           ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-              _cache[2] || (_cache[2] = createBaseVNode("i", { class: "fas fa-plus" }, null, -1 /* CACHED */)),
-              _cache[3] || (_cache[3] = createTextVNode(" Add ", -1 /* CACHED */))
+              createVNode(_component_SfIcon, { name: "plus" }),
+              _cache[2] || (_cache[2] = createTextVNode(" Add ", -1 /* CACHED */))
             ], 64 /* STABLE_FRAGMENT */))
           : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-              _cache[4] || (_cache[4] = createBaseVNode("i", { class: "fas fa-times" }, null, -1 /* CACHED */)),
-              _cache[5] || (_cache[5] = createTextVNode(" Remove ", -1 /* CACHED */))
+              createVNode(_component_SfIcon, { name: "times" }),
+              _cache[3] || (_cache[3] = createTextVNode(" Remove ", -1 /* CACHED */))
             ], 64 /* STABLE_FRAGMENT */))
       ], 2 /* CLASS */)
     ]),
@@ -7795,6 +8023,7 @@ script$3.__file = "src/editors/UnionEditor.vue";
 
 var script$2 = {
   name: 'RelationEditor',
+  components: { SfIcon: script$7 },
   props: {
     schema: { type: Object, required: true },
     modelValue: { default: null },
@@ -7846,8 +8075,8 @@ var script$2 = {
       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() {
@@ -7978,6 +8207,8 @@ const _hoisted_10 = {
 };
 
 function render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_SfIcon = resolveComponent("SfIcon");
+
   return (openBlock(), createElementBlock("div", {
     class: normalizeClass(["sf-field sf-relation", { errors: $options.fieldErrors.length }]),
     ref: "root"
@@ -8001,9 +8232,9 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
                       type: "button",
                       class: "sf-relation-tag-remove",
                       onClick: withModifiers($event => ($options.removeItem(item)), ["stop"])
-                    }, [...(_cache[5] || (_cache[5] = [
-                      createBaseVNode("i", { class: "fas fa-times" }, null, -1 /* CACHED */)
-                    ]))], 8 /* PROPS */, _hoisted_4))
+                    }, [
+                      createVNode(_component_SfIcon, { name: "times" })
+                    ], 8 /* PROPS */, _hoisted_4))
                   : createCommentVNode("v-if", true)
               ]))
             }), 128 /* KEYED_FRAGMENT */))
@@ -8068,11 +8299,11 @@ const MAX_DEPTH = 12;
 var script$1 = {
   name: 'SchemaEditor',
   components: {
-    StringEditor: script$b,
-    NumberEditor: script$a,
-    BooleanEditor: script$9,
-    SelectEditor: script$8,
-    HiddenEditor: script$7,
+    StringEditor: script$c,
+    NumberEditor: script$b,
+    BooleanEditor: script$a,
+    SelectEditor: script$9,
+    HiddenEditor: script$8,
     ObjectEditor: script$6,
     ArrayEditor: script$5,
     NullableEditor: script$4,
@@ -8086,6 +8317,18 @@ var script$1 = {
     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;
@@ -8110,6 +8353,7 @@ var script$1 = {
 
 function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createBlock(resolveDynamicComponent($options.editorComponent), {
+    ref: "editor",
     schema: $props.schema,
     "model-value": $props.modelValue,
     path: $props.path,
@@ -8280,5 +8524,5 @@ function registerCustomElement(tagName = 'schema-form') {
   }
 }
 
-export { script$5 as ArrayEditor, script$9 as BooleanEditor, script$7 as HiddenEditor, script$4 as NullableEditor, script$a as NumberEditor, script$6 as ObjectEditor, script$2 as RelationEditor, script$1 as SchemaEditor, script as SchemaForm, SchemaFormElement, script$8 as SelectEditor, script$b as StringEditor, script$3 as UnionEditor, registerCustomElement };
+export { script$5 as ArrayEditor, script$a as BooleanEditor, script$8 as HiddenEditor, script$4 as NullableEditor, script$b as NumberEditor, script$6 as ObjectEditor, script$2 as RelationEditor, script$1 as SchemaEditor, script as SchemaForm, SchemaFormElement, script$9 as SelectEditor, script$c as StringEditor, script$3 as UnionEditor, registerCustomElement };
 //# sourceMappingURL=structured-widget-editor.esm.js.map