qds-action-panel-items-editor

A field-level editor for the qds-action-panel items array.

Features

• Compact summary control for the properties rail
• Modal workspace with a selectable action list and detail form
• Add, duplicate, remove, and reorder actions
• Emits structured array values instead of JSON text
• Advanced JSON escape hatch inside the modal
• Designed for editorTag usage inside qds-property-editor
• Live action-tile previews while editing

Basic Usage

<qds-action-panel-items-editor id="items-editor"></qds-action-panel-items-editor>

<script type="module">
  const editor = document.getElementById('items-editor');
  editor.property = 'items';
  editor.value = [
    {
      label: 'Open dashboard',
      href: '#dashboard',
      target: '_self',
      iconSrc: '',
      iconAlt: '',
      actionKind: 'forward'
    }
  ];
  editor.addEventListener('value-change', (event) => {
    console.log(event.detail.value);
  });
</script>

Properties

Property	Type	Description
property	String	Field name reported in the emitted value-change detail
value	Array	Current action item array
metadata	Object	Field metadata from qds-property-editor
context	Unknown	Optional host context passed through by qds-property-editor
readonly	Boolean	Disables add, edit, remove, and reorder interactions

Events

Event	Detail	Description
value-change	{ property, value }	Fired when the modal Apply action commits the edited array