@umbraco-cms/backoffice 14.0.0--preview007-cccfbc9c → 14.0.0--preview007-02546fcd

package/dist-cms/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-tab.element.js

@@ -9,26 +9,14 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _UmbDocumentTypeWorkspaceViewEditTabElement_onAddGroup;
+var _UmbDocumentTypeWorkspaceViewEditTabElement_instances, _UmbDocumentTypeWorkspaceViewEditTabElement_sorter, _UmbDocumentTypeWorkspaceViewEditTabElement_onAddGroup, _UmbDocumentTypeWorkspaceViewEditTabElement_renderHeader, _UmbDocumentTypeWorkspaceViewEditTabElement_renderInputGroupName, _UmbDocumentTypeWorkspaceViewEditTabElement_renderAddGroupButton;
+import { UmbLitElement } from '../../../../../core/lit-element/index.js';
 import { css, html, customElement, property, state, repeat, ifDefined } from '../../../../../../external/lit/index.js';
 import { UmbTextStyles } from '../../../../../../shared/style/index.js';
-import { UmbContentTypeContainerStructureHelper } from '../../../../../core/content-type/index.js';
-import { UmbLitElement } from '../../../../../core/lit-element/index.js';
+import { UmbContentTypeContainerStructureHelper, } from '../../../../../core/content-type/index.js';
 import { UMB_WORKSPACE_CONTEXT } from '../../../../../core/workspace/index.js';
-import { UmbSorterController } from '../../../../../core/sorter/index.js';
 import './document-type-workspace-view-edit-properties.element.js';
-const SORTER_CONFIG = {
-    getUniqueOfElement: (element) => {
-        return element.getAttribute('data-umb-group-id');
-    },
-    getUniqueOfModel: (modelEntry) => {
-        return modelEntry.id;
-    },
-    identifier: 'content-type-group-sorter',
-    itemSelector: '[data-umb-group-id]',
-    disabledItemSelector: '[inherited]',
-    containerSelector: '#group-list',
-};
+import { UmbSorterController } from '../../../../../core/sorter/index.js';
 let UmbDocumentTypeWorkspaceViewEditTabElement = class UmbDocumentTypeWorkspaceViewEditTabElement extends UmbLitElement {
     // TODO: get rid of this:
     get ownerTabId() {
@@ -62,31 +50,19 @@ let UmbDocumentTypeWorkspaceViewEditTabElement = class UmbDocumentTypeWorkspaceV
     }
     constructor() {
         super();
-        this.config = {
-            ...SORTER_CONFIG,
-            // TODO: Missing handlers to work properly: performItemMove and performItemRemove
-            performItemInsert: async (args) => {
-                if (!this._groups)
-                    return false;
-                const oldIndex = this._groups.findIndex((group) => group.id === args.item.id);
-                if (args.newIndex === oldIndex)
-                    return true;
-                let sortOrder = 0;
-                //TODO the sortOrder set is not correct
-                if (this._groups.length > 0) {
-                    if (args.newIndex === 0) {
-                        sortOrder = (this._groups[0].sortOrder ?? 0) - 1;
-                    }
-                    else {
-                        sortOrder = (this._groups[Math.min(args.newIndex, this._groups.length - 1)].sortOrder ?? 0) + 1;
-                    }
-                    if (sortOrder !== args.item.sortOrder) {
-                        await this._groupStructureHelper.partialUpdateContainer(args.item.id, { sortOrder });
-                    }
-                }
-                return true;
+        _UmbDocumentTypeWorkspaceViewEditTabElement_instances.add(this);
+        _UmbDocumentTypeWorkspaceViewEditTabElement_sorter.set(this, new UmbSorterController(this, {
+            getUniqueOfElement: (element) => element.querySelector('umb-document-type-workspace-view-edit-properties').getAttribute('container-id'),
+            getUniqueOfModel: (modelEntry) => modelEntry.id,
+            identifier: 'document-type-container-sorter',
+            itemSelector: '.container-handle',
+            containerSelector: '.container-list',
+            onChange: ({ model }) => {
+                model.forEach((modelItem, index) => {
+                    this._groupStructureHelper.partialUpdateContainer(modelItem.id, { sortOrder: index });
+                });
             },
-        };
+        }));
         this._groupStructureHelper = new UmbContentTypeContainerStructureHelper(this);
         this._groups = [];
         this._hasProperties = false;
@@ -94,16 +70,15 @@ let UmbDocumentTypeWorkspaceViewEditTabElement = class UmbDocumentTypeWorkspaceV
             // Idea, maybe we can gather the sortOrder from the last group rendered and add 1 to it?
             this._groupStructureHelper.addContainer(this._ownerTabId);
         });
-        this.sorter = new UmbSorterController(this, this.config);
         this.consumeContext(UMB_WORKSPACE_CONTEXT, (context) => {
             this._groupStructureHelper.setStructureManager(context.structure);
             this.observe(context.isSorting, (isSorting) => {
                 this._sortModeActive = isSorting;
                 if (isSorting) {
-                    this.sorter?.setModel(this._groups);
+                    __classPrivateFieldGet(this, _UmbDocumentTypeWorkspaceViewEditTabElement_sorter, "f").setModel(this._groups);
                 }
                 else {
-                    this.sorter?.setModel([]);
+                    __classPrivateFieldGet(this, _UmbDocumentTypeWorkspaceViewEditTabElement_sorter, "f").setModel([]);
                 }
             }, '_observeIsSorting');
         });
@@ -118,7 +93,14 @@ let UmbDocumentTypeWorkspaceViewEditTabElement = class UmbDocumentTypeWorkspaceV
     }
     render() {
         return html `
-			${!this._noTabName
+		${this._sortModeActive
+            ? html `<uui-button
+						id="convert-to-tab"
+						label=${this.localize.term('contentTypeEditor_convertToTab') + '(Not implemented)'}
+						look="placeholder"></uui-button>`
+            : ''}
+
+		${!this._noTabName
             ? html `
 						<uui-box>
 							<umb-document-type-workspace-view-edit-properties
@@ -128,63 +110,77 @@ let UmbDocumentTypeWorkspaceViewEditTabElement = class UmbDocumentTypeWorkspaceV
 						</uui-box>
 				  `
             : ''}
-			<div id="group-list">
-				${repeat(this._groups, (group) => group.id ?? '' + group.name, (group) => html `<span data-umb-group-id=${ifDefined(group.id)}>
-					<uui-box>
-						${this._groupStructureHelper.isOwnerChildContainer(group.id)
-            ? html `
-										<div slot="header">
-											<div>
-												${this._sortModeActive ? html `<uui-icon name="icon-navigation"></uui-icon>` : ''}
-
-												<uui-input
-													label="Group name"
-													placeholder="Enter a group name"
-													value=${group.name ?? ''}
-													@change=${(e) => {
-                const newName = e.target.value;
-                this._groupStructureHelper.updateContainerName(group.id, group.parent?.id ?? null, newName);
-            }}>
-												</uui-input>
-											</div>
-											${this._sortModeActive
-                ? html `<uui-input type="number" label="sort order" .value=${group.sortOrder ?? 0}></uui-input>`
-                : ''}
-										</div>
-								  `
-            : html `<div slot="header">
-										<div><uui-icon name="icon-merge"></uui-icon><b>${group.name ?? ''}</b> (Inherited)</div>
-										${!this._sortModeActive
-                ? html `<uui-input
-													readonly
-													type="number"
-													label="sort order"
-													.value=${group.sortOrder ?? 0}></uui-input>`
-                : ''}
-								  </div>`}
-					</div>
-					<umb-document-type-workspace-view-edit-properties
-						container-id=${ifDefined(group.id)}
-						container-type="Group"
-						container-name=${group.name || ''}></umb-document-type-workspace-view-edit-properties>
-				</uui-box></span>`)}
+				<div class="container-list" ?sort-mode-active=${this._sortModeActive}>
+					${repeat(this._groups, (group) => group.id ?? '' + group.name, (group) => html `<uui-box class="container-handle">
+								${__classPrivateFieldGet(this, _UmbDocumentTypeWorkspaceViewEditTabElement_instances, "m", _UmbDocumentTypeWorkspaceViewEditTabElement_renderHeader).call(this, group)}
+								<umb-document-type-workspace-view-edit-properties
+									container-id=${ifDefined(group.id)}
+									container-type="Group"
+									container-name=${group.name || ''}></umb-document-type-workspace-view-edit-properties>
+							</uui-box> `)}
+				</div>
+				${__classPrivateFieldGet(this, _UmbDocumentTypeWorkspaceViewEditTabElement_instances, "m", _UmbDocumentTypeWorkspaceViewEditTabElement_renderAddGroupButton).call(this)}
 			</div>
-			${!this._sortModeActive
-            ? html `<uui-button
-						label=${this.localize.term('contentTypeEditor_addGroup')}
-						id="add"
-						look="placeholder"
-						@click=${__classPrivateFieldGet(this, _UmbDocumentTypeWorkspaceViewEditTabElement_onAddGroup, "f")}>
-						${this.localize.term('contentTypeEditor_addGroup')}
-				  </uui-button>`
-            : ''}
 		`;
     }
 };
+_UmbDocumentTypeWorkspaceViewEditTabElement_sorter = new WeakMap();
 _UmbDocumentTypeWorkspaceViewEditTabElement_onAddGroup = new WeakMap();
+_UmbDocumentTypeWorkspaceViewEditTabElement_instances = new WeakSet();
+_UmbDocumentTypeWorkspaceViewEditTabElement_renderHeader = function _UmbDocumentTypeWorkspaceViewEditTabElement_renderHeader(group) {
+    const inherited = !this._groupStructureHelper.isOwnerChildContainer(group.id);
+    if (this._sortModeActive) {
+        return html `<div slot="header">
+				<div>
+					<uui-icon name=${inherited ? 'icon-merge' : 'icon-navigation'}></uui-icon>
+					${__classPrivateFieldGet(this, _UmbDocumentTypeWorkspaceViewEditTabElement_instances, "m", _UmbDocumentTypeWorkspaceViewEditTabElement_renderInputGroupName).call(this, group)}
+				</div>
+				<uui-input
+					type="number"
+					label=${this.localize.term('sort_sortOrder')}
+					@change=${(e) => {
+            this._groupStructureHelper.partialUpdateContainer(group.id, {
+                sortOrder: parseInt(e.target.value) || 0,
+            });
+        }}
+					.value=${group.sortOrder || 0}
+					?disabled=${inherited}></uui-input>
+			</div> `;
+    }
+    else {
+        return html `<div slot="header">
+				${inherited ? html `<uui-icon name="icon-merge"></uui-icon>` : __classPrivateFieldGet(this, _UmbDocumentTypeWorkspaceViewEditTabElement_instances, "m", _UmbDocumentTypeWorkspaceViewEditTabElement_renderInputGroupName).call(this, group)}
+			</div> `;
+    }
+};
+_UmbDocumentTypeWorkspaceViewEditTabElement_renderInputGroupName = function _UmbDocumentTypeWorkspaceViewEditTabElement_renderInputGroupName(group) {
+    return html `<uui-input
+			label=${this.localize.term('contentTypeEditor_group')}
+			placeholder=${this.localize.term('placeholders_entername')}
+			.value=${group.name}
+			@change=${(e) => {
+        const newName = e.target.value;
+        this._groupStructureHelper.updateContainerName(group.id, group.parent?.id ?? null, newName);
+    }}></uui-input>`;
+};
+_UmbDocumentTypeWorkspaceViewEditTabElement_renderAddGroupButton = function _UmbDocumentTypeWorkspaceViewEditTabElement_renderAddGroupButton() {
+    if (this._sortModeActive)
+        return;
+    return html `<uui-button
+			label=${this.localize.term('contentTypeEditor_addGroup')}
+			id="add"
+			look="placeholder"
+			@click=${__classPrivateFieldGet(this, _UmbDocumentTypeWorkspaceViewEditTabElement_onAddGroup, "f")}>
+			${this.localize.term('contentTypeEditor_addGroup')}
+		</uui-button>`;
+};
 UmbDocumentTypeWorkspaceViewEditTabElement.styles = [
     UmbTextStyles,
     css `
+			[drag-placeholder] {
+				opacity: 0.2;
+			}
+
 			#add {
 				width: 100%;
 			}
@@ -192,6 +188,7 @@ UmbDocumentTypeWorkspaceViewEditTabElement.styles = [
 			#add:first-child {
 				margin-top: var(--uui-size-layout-1);
 			}
+
 			uui-box {
 				margin-bottom: var(--uui-size-layout-1);
 			}
@@ -202,6 +199,7 @@ UmbDocumentTypeWorkspaceViewEditTabElement.styles = [
 			}
 
 			div[slot='header'] {
+				flex: 1;
 				display: flex;
 				align-items: center;
 				justify-content: space-between;
@@ -217,20 +215,18 @@ UmbDocumentTypeWorkspaceViewEditTabElement.styles = [
 				max-width: 75px;
 			}
 
-			.sorting {
+			[sort-mode-active] div[slot='header'] {
 				cursor: grab;
 			}
 
-			.--umb-sorter-placeholder > uui-box {
-				visibility: hidden;
+			.container-list {
+				display: grid;
+				gap: 10px;
 			}
 
-			.--umb-sorter-placeholder::after {
-				content: '';
-				inset: 0;
-				position: absolute;
-				border-radius: var(--uui-border-radius);
-				border: 1px dashed var(--uui-color-divider-emphasis);
+			#convert-to-tab {
+				margin-bottom: var(--uui-size-layout-1);
+				display: flex;
 			}
 		`,
 ];

package/dist-cms/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit.element.d.ts

@@ -1,18 +1,14 @@
 import { UmbLitElement } from '../../../../../core/lit-element/index.js';
 import { type PropertyTypeContainerModelBaseModel } from '../../../../../../external/backend-api/index.js';
 import type { UmbWorkspaceViewElement } from '../../../../../core/extension-registry/index.js';
-import type { UmbSorterConfig } from '../../../../../core/sorter/index.js';
-import { UmbSorterController } from '../../../../../core/sorter/index.js';
 export declare class UmbDocumentTypeWorkspaceViewEditElement extends UmbLitElement implements UmbWorkspaceViewElement {
     #private;
-    sorter?: UmbSorterController<PropertyTypeContainerModelBaseModel>;
-    config: UmbSorterConfig<PropertyTypeContainerModelBaseModel>;
     private _hasRootGroups;
     private _routes;
     _tabs?: Array<PropertyTypeContainerModelBaseModel>;
     private _routerPath?;
     private _activePath;
-    private sortModeActive?;
+    private _sortModeActive?;
     private _buttonDisabled;
     private _workspaceContext?;
     private _tabsStructureHelper;

package/dist-cms/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit.element.js

@@ -9,7 +9,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _UmbDocumentTypeWorkspaceViewEditElement_instances, _UmbDocumentTypeWorkspaceViewEditElement_changeMode, _UmbDocumentTypeWorkspaceViewEditElement_requestRemoveTab, _UmbDocumentTypeWorkspaceViewEditElement_remove, _UmbDocumentTypeWorkspaceViewEditElement_addTab, _UmbDocumentTypeWorkspaceViewEditElement_focusInput, _UmbDocumentTypeWorkspaceViewEditElement_tabNameChanged, _UmbDocumentTypeWorkspaceViewEditElement_openCompositionModal, _UmbDocumentTypeWorkspaceViewEditElement_changeOrderNumber;
+var _UmbDocumentTypeWorkspaceViewEditElement_instances, _UmbDocumentTypeWorkspaceViewEditElement_sorter, _UmbDocumentTypeWorkspaceViewEditElement_changeMode, _UmbDocumentTypeWorkspaceViewEditElement_requestRemoveTab, _UmbDocumentTypeWorkspaceViewEditElement_remove, _UmbDocumentTypeWorkspaceViewEditElement_addTab, _UmbDocumentTypeWorkspaceViewEditElement_focusInput, _UmbDocumentTypeWorkspaceViewEditElement_tabNameChanged, _UmbDocumentTypeWorkspaceViewEditElement_openCompositionModal, _UmbDocumentTypeWorkspaceViewEditElement_changeOrderNumber;
 import { UMB_COMPOSITION_PICKER_MODAL } from '../../../modals/index.js';
 import { css, html, customElement, state, repeat, nothing, ifDefined } from '../../../../../../external/lit/index.js';
 import { UmbContentTypeContainerStructureHelper } from '../../../../../core/content-type/index.js';
@@ -20,57 +20,30 @@ import { UMB_WORKSPACE_CONTEXT } from '../../../../../core/workspace/index.js';
 import { UMB_CONFIRM_MODAL, UMB_MODAL_MANAGER_CONTEXT } from '../../../../../core/modal/index.js';
 import { UmbTextStyles } from '../../../../../../shared/style/index.js';
 import { UmbSorterController } from '../../../../../core/sorter/index.js';
-const SORTER_CONFIG = {
-    getUniqueOfElement: (element) => {
-        return element.getAttribute('data-umb-tabs-id');
-    },
-    getUniqueOfModel: (modelEntry) => {
-        return modelEntry.id;
-    },
-    identifier: 'content-type-tabs-sorter',
-    itemSelector: '[data-umb-tabs-id]',
-    containerSelector: '#tabs-group',
-    disabledItemSelector: '[inherited]',
-    resolveVerticalDirection: () => {
-        return false;
-    },
-};
 let UmbDocumentTypeWorkspaceViewEditElement = class UmbDocumentTypeWorkspaceViewEditElement extends UmbLitElement {
     constructor() {
         super();
         _UmbDocumentTypeWorkspaceViewEditElement_instances.add(this);
-        this.config = {
-            ...SORTER_CONFIG,
-            // TODO: Missing handlers to work properly: performItemMove and performItemRemove
-            performItemInsert: async (args) => {
-                if (!this._tabs)
-                    return false;
-                const oldIndex = this._tabs.findIndex((tab) => tab.id === args.item.id);
-                if (args.newIndex === oldIndex)
-                    return true;
-                let sortOrder = 0;
-                //TODO the sortOrder set is not correct
-                if (this._tabs.length > 0) {
-                    if (args.newIndex === 0) {
-                        sortOrder = (this._tabs[0].sortOrder ?? 0) - 1;
-                    }
-                    else {
-                        sortOrder = (this._tabs[Math.min(args.newIndex, this._tabs.length - 1)].sortOrder ?? 0) + 1;
-                    }
-                    if (sortOrder !== args.item.sortOrder) {
-                        await this._tabsStructureHelper.partialUpdateContainer(args.item.id, { sortOrder });
-                    }
-                }
-                return true;
+        _UmbDocumentTypeWorkspaceViewEditElement_sorter.set(this, new UmbSorterController(this, {
+            getUniqueOfElement: (element) => element.getAttribute('data-umb-tabs-id'),
+            getUniqueOfModel: (modelEntry) => modelEntry.id,
+            identifier: 'document-type-tabs-sorter',
+            itemSelector: 'uui-tab',
+            containerSelector: 'uui-tab-group',
+            disabledItemSelector: '#root-tab',
+            resolveVerticalDirection: () => false,
+            onChange: ({ model }) => {
+                model.forEach((modelItem, index) => {
+                    this._tabsStructureHelper.partialUpdateContainer(modelItem.id, { sortOrder: index });
+                });
             },
-        };
+        }));
         //private _hasRootProperties = false;
         this._hasRootGroups = false;
         this._routes = [];
         this._activePath = '';
         this._buttonDisabled = false;
         this._tabsStructureHelper = new UmbContentTypeContainerStructureHelper(this);
-        this.sorter = new UmbSorterController(this, this.config);
         //TODO: We need to differentiate between local and composition tabs (and hybrids)
         this._tabsStructureHelper.setIsRoot(true);
         this._tabsStructureHelper.setContainerChildType('Tab');
@@ -82,7 +55,15 @@ let UmbDocumentTypeWorkspaceViewEditElement = class UmbDocumentTypeWorkspaceView
         this.consumeContext(UMB_WORKSPACE_CONTEXT, (workspaceContext) => {
             this._workspaceContext = workspaceContext;
             this._tabsStructureHelper.setStructureManager(workspaceContext.structure);
-            this.observe(this._workspaceContext.isSorting, (isSorting) => (this.sortModeActive = isSorting), '_observeIsSorting');
+            this.observe(this._workspaceContext.isSorting, (isSorting) => {
+                this._sortModeActive = isSorting;
+                if (isSorting) {
+                    __classPrivateFieldGet(this, _UmbDocumentTypeWorkspaceViewEditElement_sorter, "f").setModel(this._tabs);
+                }
+                else {
+                    __classPrivateFieldGet(this, _UmbDocumentTypeWorkspaceViewEditElement_sorter, "f").setModel([]);
+                }
+            }, '_observeIsSorting');
             const unique = this._workspaceContext.getEntityId();
             //TODO Figure out the correct data that needs to be sent to the compositions modal. Do we really have to send isElement, currentPropertyAliases - isn't unique enough?
             this.observe(this._workspaceContext.structure.contentTypes, (contentTypes) => {
@@ -151,7 +132,7 @@ let UmbDocumentTypeWorkspaceViewEditElement = class UmbDocumentTypeWorkspaceView
         return html `
 			<umb-body-layout header-fit-height>
 				<div id="header" slot="header">
-					<div id="tabs-wrapper" class="flex">
+					<div id="container-list" class="flex">
 						${this._routerPath ? this.renderTabsNavigation() : ''} ${this.renderAddButton()}
 					</div>
 					${this.renderActions()}
@@ -169,7 +150,7 @@ let UmbDocumentTypeWorkspaceViewEditElement = class UmbDocumentTypeWorkspaceView
 		`;
     }
     renderAddButton() {
-        if (this.sortModeActive)
+        if (this._sortModeActive)
             return;
         return html `<uui-button id="add-tab" @click="${__classPrivateFieldGet(this, _UmbDocumentTypeWorkspaceViewEditElement_instances, "m", _UmbDocumentTypeWorkspaceViewEditElement_addTab)}" label="Add tab" compact>
 			<uui-icon name="icon-add"></uui-icon>
@@ -177,7 +158,7 @@ let UmbDocumentTypeWorkspaceViewEditElement = class UmbDocumentTypeWorkspaceView
 		</uui-button>`;
     }
     renderActions() {
-        const sortButtonText = this.sortModeActive
+        const sortButtonText = this._sortModeActive
             ? this.localize.term('general_reorderDone')
             : this.localize.term('general_reorder');
         return html `<div class="tab-actions">
@@ -209,6 +190,7 @@ let UmbDocumentTypeWorkspaceViewEditElement = class UmbDocumentTypeWorkspaceView
         const rootTabPath = this._routerPath + '/root';
         const rootTabActive = rootTabPath === this._activePath;
         return html `<uui-tab
+			id="root-tab"
 			class=${this._hasRootGroups || rootTabActive ? '' : 'content-tab-is-empty'}
 			label=${this.localize.term('general_content')}
 			.active=${rootTabActive}
@@ -229,7 +211,7 @@ let UmbDocumentTypeWorkspaceViewEditElement = class UmbDocumentTypeWorkspaceView
 		</uui-tab>`;
     }
     renderTabInner(tab, tabActive, tabInherited) {
-        if (this.sortModeActive) {
+        if (this._sortModeActive) {
             return html `<div class="no-edit">
 				${tabInherited
                 ? html `<uui-icon class="external" name="icon-merge"></uui-icon>${tab.name}`
@@ -239,7 +221,7 @@ let UmbDocumentTypeWorkspaceViewEditElement = class UmbDocumentTypeWorkspaceView
 								type="number"
 								value=${ifDefined(tab.sortOrder)}
 								style="width:50px"
-								@keypress=${(e) => __classPrivateFieldGet(this, _UmbDocumentTypeWorkspaceViewEditElement_instances, "m", _UmbDocumentTypeWorkspaceViewEditElement_changeOrderNumber).call(this, tab, e)}></uui-input>`}
+								@change=${(e) => __classPrivateFieldGet(this, _UmbDocumentTypeWorkspaceViewEditElement_instances, "m", _UmbDocumentTypeWorkspaceViewEditElement_changeOrderNumber).call(this, tab, e)}></uui-input>`}
 			</div>`;
         }
         if (tabActive && !tabInherited) {
@@ -278,15 +260,10 @@ let UmbDocumentTypeWorkspaceViewEditElement = class UmbDocumentTypeWorkspaceView
 		</uui-button>`;
     }
 };
+_UmbDocumentTypeWorkspaceViewEditElement_sorter = new WeakMap();
 _UmbDocumentTypeWorkspaceViewEditElement_instances = new WeakSet();
 _UmbDocumentTypeWorkspaceViewEditElement_changeMode = function _UmbDocumentTypeWorkspaceViewEditElement_changeMode() {
-    this._workspaceContext?.setIsSorting(!this.sortModeActive);
-    if (this.sortModeActive && this._tabs) {
-        this.sorter?.setModel(this._tabs);
-    }
-    else {
-        this.sorter?.setModel([]);
-    }
+    this._workspaceContext?.setIsSorting(!this._sortModeActive);
 };
 _UmbDocumentTypeWorkspaceViewEditElement_requestRemoveTab = function _UmbDocumentTypeWorkspaceViewEditElement_requestRemoveTab(tab) {
     const modalData = {
@@ -389,7 +366,12 @@ UmbDocumentTypeWorkspaceViewEditElement.styles = [
 				--uui-tab-background: var(--uui-color-surface);
 			}
 
+			[drag-placeholder] {
+				opacity: 0.2;
+			}
+
 			/* TODO: This should be replaced with a general workspace bar — naming is hard */
+
 			#header {
 				width: 100%;
 				display: flex;
@@ -401,6 +383,7 @@ UmbDocumentTypeWorkspaceViewEditElement.styles = [
 			.flex {
 				display: flex;
 			}
+
 			uui-tab-group {
 				flex-wrap: nowrap;
 			}
@@ -449,15 +432,8 @@ UmbDocumentTypeWorkspaceViewEditElement.styles = [
 				vertical-align: sub;
 			}
 
-			.--umb-sorter-placeholder > * {
-				visibility: hidden;
-			}
-
-			.--umb-sorter-placeholder::after {
-				content: '';
-				position: absolute;
-				inset: 2px;
-				border: 1px dashed var(--uui-color-divider-emphasis);
+			[drag-placeholder] {
+				opacity: 0.2;
 			}
 		`,
 ];
@@ -478,7 +454,7 @@ __decorate([
 ], UmbDocumentTypeWorkspaceViewEditElement.prototype, "_activePath", void 0);
 __decorate([
     state()
-], UmbDocumentTypeWorkspaceViewEditElement.prototype, "sortModeActive", void 0);
+], UmbDocumentTypeWorkspaceViewEditElement.prototype, "_sortModeActive", void 0);
 __decorate([
     state()
 ], UmbDocumentTypeWorkspaceViewEditElement.prototype, "_buttonDisabled", void 0);