diff --git a/src/lib/js/components/columns/index.js b/src/lib/js/components/columns/index.js index cb1e0ee..4ab41d4 100644 --- a/src/lib/js/components/columns/index.js +++ b/src/lib/js/components/columns/index.js @@ -3,7 +3,7 @@ import Column from './column.js' const DEFAULT_CONFIG = { actionButtons: { - buttons: ['clone|copy|handle', 'handle', 'remove'], + buttons: ['clone', 'handle', 'remove'], disabled: [], }, } diff --git a/src/lib/js/components/component.js b/src/lib/js/components/component.js index b4fc786..86ffc66 100644 --- a/src/lib/js/components/component.js +++ b/src/lib/js/components/component.js @@ -200,7 +200,7 @@ export default class Component extends Data { }, } }, - clone: (icons = ['copy']) => { + clone: (icons = ['copy', 'handle']) => { return { ...dom.btnTemplate({ content: parseIcons(icons) }), className: ['item-clone'], @@ -214,11 +214,10 @@ export default class Component extends Data { }, } - return this.config.actionButtons.buttons.map(btn => { - const [key, ...rest] = btn.split('|') - const icons = rest.length ? rest : undefined - return (buttonConfig[key] && buttonConfig[key](icons)) || btn - }) + const { buttons, disabled } = this.config.actionButtons + const activeButtons = buttons.filter(btn => !disabled.includes(btn)) + + return activeButtons.map(btn => buttonConfig[btn]?.() || btn) } /** @@ -295,7 +294,7 @@ export default class Component extends Data { // @todo add event for onAddChild const grandChildren = child.get('children') - if (grandChildren && grandChildren.length) { + if (grandChildren?.length) { child.loadChildren(grandChildren) } @@ -503,7 +502,7 @@ export default class Component extends Data { getComponent(path) { const [type, id] = path.split('.') const group = Components[type] - return id === this.id ? this : group && group.get(id) + return id === this.id ? this : group?.get(id) } value = (path, val) => { diff --git a/src/lib/js/components/fields/field.js b/src/lib/js/components/fields/field.js index 6f290fc..bd1d43e 100644 --- a/src/lib/js/components/fields/field.js +++ b/src/lib/js/components/fields/field.js @@ -28,6 +28,9 @@ export default class Field extends Component { this.preview = dom.create(this.fieldPreview()) this.editPanels = [] + const actionButtons = this.getActionButtons() + const hasEditButton = actionButtons.children.children.some(child => child.meta?.id === 'edit') + let field = { tag: 'li', attrs: { @@ -36,10 +39,10 @@ export default class Field extends Component { id: this.id, children: [ this.label, - this.getActionButtons(), // fieldEdit window - this.fieldEdit, // fieldEdit window, - this.preview, // preview - ], + actionButtons, + hasEditButton && this.fieldEdit, // fieldEdit window, + this.preview, + ].filter(Boolean), panelNav: this.panelNav, dataset: { hoverTag: i18n.get('field'), @@ -224,14 +227,15 @@ export default class Field extends Component { fieldEdit.action = { onRender: () => { this.resizePanelWrap() - // if (!editPanelLength) { + if (!editPanelLength) { + // If this element has no edit panels, remove the edit toggle const field = this.dom const editToggle = field.querySelector('.item-edit-toggle') const fieldActions = field.querySelector('.field-actions') const actionButtons = fieldActions.getElementsByTagName('button') fieldActions.style.maxWidth = `${actionButtons.length * actionButtons[0].clientWidth}px` dom.remove(editToggle) - // } + } }, } } @@ -248,7 +252,7 @@ export default class Field extends Component { prevData.id = `prev-${this.id}` if (this.data?.config.editableContent) { - prevData.attrs = Object.assign({}, prevData.attrs, { contenteditable: true }) + prevData.attrs = { ...prevData.attrs, contenteditable: true } } const fieldPreview = {