Merge branch 'main' into 14/bugfix/calculate-user-start-nodes

Author: madsrasmussen

examples/sorter-with-nested-containers/sorter-dashboard.ts

@@ -1,7 +1,7 @@
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { css, html, customElement, LitElement } from '@umbraco-cms/backoffice/external/lit';
 import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
-import type { ModelEntryType } from './sorter-group.js';
+import type { ExampleSorterGroup, ModelEntryType } from './sorter-group.js';
 
 import './sorter-group.js';
 @customElement('example-sorter-dashboard')
@@ -57,9 +57,16 @@ export class ExampleSorterDashboard extends UmbElementMixin(LitElement) {
 		return html`
 			<uui-box class="uui-text">
 				<div class="outer-wrapper">
-					<h5>Notice this example still only support single group of Sorter.</h5>
-					<example-sorter-group .initialItems=${this.groupOneItems}></example-sorter-group>
-					<example-sorter-group .initialItems=${this.groupTwoItems}></example-sorter-group>
+					<example-sorter-group
+						.value=${this.groupOneItems}
+						@change=${(e: Event) => {
+							this.groupOneItems = (e.target as ExampleSorterGroup).value;
+						}}></example-sorter-group>
+					<example-sorter-group
+						.value=${this.groupTwoItems}
+						@change=${(e: Event) => {
+							this.groupTwoItems = (e.target as ExampleSorterGroup).value;
+						}}></example-sorter-group>
 				</div>
 			</uui-box>
 		`;

examples/sorter-with-nested-containers/sorter-group.ts

@@ -13,28 +13,8 @@ export type ModelEntryType = {
 
 @customElement('example-sorter-group')
 export class ExampleSorterGroup extends UmbElementMixin(LitElement) {
-	@property({ type: Array, attribute: false })
-	public get initialItems(): ModelEntryType[] {
-		return this.items;
-	}
-	public set initialItems(value: ModelEntryType[]) {
-		// Only want to set the model initially, cause any re-render should not set this again.
-		if (this._items !== undefined) return;
-		this.items = value;
-	}
-
-	@property({ type: Array, attribute: false })
-	public get items(): ModelEntryType[] {
-		return this._items ?? [];
-	}
-	public set items(value: ModelEntryType[]) {
-		const oldValue = this._items;
-		this._items = value;
-		this.#sorter.setModel(this._items);
-		this.requestUpdate('items', oldValue);
-	}
-	private _items?: ModelEntryType[];
-
+	//
+	// Sorter setup:
 	#sorter = new UmbSorterController<ModelEntryType, ExampleSorterItem>(this, {
 		getUniqueOfElement: (element) => {
 			return element.name;
@@ -46,26 +26,45 @@ export class ExampleSorterGroup extends UmbElementMixin(LitElement) {
 		itemSelector: 'example-sorter-item',
 		containerSelector: '.sorter-container',
 		onChange: ({ model }) => {
-			const oldValue = this._items;
-			this._items = model;
-			this.requestUpdate('items', oldValue);
+			const oldValue = this._value;
+			this._value = model;
+			this.requestUpdate('value', oldValue);
+			// Fire an event for the parent to know that the model has changed.
+			this.dispatchEvent(new CustomEvent('change'));
 		},
 	});
 
+	@property({ type: Array, attribute: false })
+	public get value(): ModelEntryType[] {
+		return this._value ?? [];
+	}
+	public set value(value: ModelEntryType[]) {
+		const oldValue = this._value;
+		this._value = value;
+		this.#sorter.setModel(this._value);
+		this.requestUpdate('value', oldValue);
+	}
+	private _value?: ModelEntryType[];
+
 	removeItem = (item: ModelEntryType) => {
-		this.items = this.items.filter((r) => r.name !== item.name);
+		this.value = this.value.filter((r) => r.name !== item.name);
 	};
 
 	render() {
 		return html`
 			<div class="sorter-container">
 				${repeat(
-					this.items,
+					this.value,
+					// Note: ideally you have an unique identifier for each item, but for this example we use the `name` as identifier.
 					(item) => item.name,
 					(item) =>
 						html`<example-sorter-item name=${item.name}>
 							<button slot="action" @click=${() => this.removeItem(item)}>Delete</button>
-							${item.children ? html`<example-sorter-group .initialItems=${item.children}></example-sorter-group>` : ''}
+							<example-sorter-group
+								.value=${item.children ?? []}
+								@change=${(e: Event) => {
+									item.children = (e.target as ExampleSorterGroup).value;
+								}}></example-sorter-group>
 						</example-sorter-item>`,
 				)}
 			</div>

package-lock.json

@@ -184,7 +184,7 @@
 		"@types/diff": "^5.2.1",
 		"@types/dompurify": "^3.0.5",
 		"@types/uuid": "^9.0.8",
-		"@umbraco-ui/uui": "1.8.1",
+		"@umbraco-ui/uui": "1.8.2",
 		"@umbraco-ui/uui-css": "1.8.0",
 		"base64-js": "^1.5.1",
 		"diff": "^5.2.0",
@@ -265,4 +265,4 @@
 		"access": "public",
 		"registry": "https://registry.npmjs.org/"
 	}
-}
+}

package.json

@@ -538,6 +538,7 @@ export default {
 		selectContentType: 'Vælg indholdstype',
 		selectMediaStartNode: 'Vælg startnode for mediearkivet',
 		selectMember: 'Vælg medlem',
+		selectMembers: 'Vælg medlemmer',
 		selectMemberGroup: 'Vælg medlemsgruppe',
 		selectMemberType: 'Vælg medlemstype',
 		selectNode: 'Vælg node',
@@ -762,6 +763,7 @@ export default {
 		deleted: 'Slettet',
 		deleting: 'Sletter...',
 		design: 'Design',
+		details: 'Detaljer',
 		dictionary: 'Ordbog',
 		dimensions: 'Dimensioner',
 		discard: 'Kassér',
@@ -808,6 +810,7 @@ export default {
 		message: 'Besked',
 		move: 'Flyt',
 		name: 'Navn',
+		never: 'Aldrig',
 		new: 'Ny',
 		next: 'Næste',
 		no: 'Nej',
@@ -850,6 +853,7 @@ export default {
 		submit: 'Indsend',
 		type: 'Type',
 		typeToSearch: 'Skriv for at søge...',
+		unknown: 'Ukendt',
 		unknownUser: 'Ukendt bruger',
 		under: 'under',
 		up: 'Op',

src/assets/lang/da-dk.ts

@@ -549,6 +549,7 @@ export default {
 		selectContentType: 'Select content type',
 		selectMediaStartNode: 'Select media start node',
 		selectMember: 'Select member',
+		selectMembers: 'Select members',
 		selectMemberGroup: 'Select member group',
 		selectMemberType: 'Select member type',
 		selectNode: 'Select node',
@@ -821,6 +822,7 @@ export default {
 		message: 'Message',
 		move: 'Move',
 		name: 'Name',
+		never: 'Never',
 		new: 'New',
 		next: 'Next',
 		no: 'No',
@@ -870,6 +872,7 @@ export default {
 		type: 'Type',
 		typeName: 'Type Name',
 		typeToSearch: 'Type to search...',
+		unknown: 'Unknown',
 		unknownUser: 'Unknown user',
 		under: 'under',
 		up: 'Up',
@@ -1300,7 +1303,7 @@ export default {
 		packages: 'Packages',
 		marketplace: 'Marketplace',
 		settings: 'Settings',
-		translation: 'Translation',
+		translation: 'Dictionary',
 		users: 'Users',
 	},
 	help: {