Skip to content
This repository was archived by the owner on Nov 6, 2025. It is now read-only.

Commit 5165db8

Browse files
nielslyngsoenielslyngsoe
authored
Merge branch 'main' into v14/bugfix/correct-settings-data-depending-on-config
2 parents 83ea951 + 8074f98 commit 5165db8

File tree

19 files changed

+168
-135
lines changed

19 files changed

+168
-135
lines changed

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

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
22
import { css, html, customElement, LitElement } from '@umbraco-cms/backoffice/external/lit';
33
import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
4-
import type { ModelEntryType } from './sorter-group.js';
4+
import type { ExampleSorterGroup, ModelEntryType } from './sorter-group.js';
55

66
import './sorter-group.js';
77
@customElement('example-sorter-dashboard')
@@ -57,9 +57,16 @@ export class ExampleSorterDashboard extends UmbElementMixin(LitElement) {
5757
return html`
5858
<uui-box class="uui-text">
5959
<div class="outer-wrapper">
60-
<h5>Notice this example still only support single group of Sorter.</h5>
61-
<example-sorter-group .initialItems=${this.groupOneItems}></example-sorter-group>
62-
<example-sorter-group .initialItems=${this.groupTwoItems}></example-sorter-group>
60+
<example-sorter-group
61+
.value=${this.groupOneItems}
62+
@change=${(e: Event) => {
63+
this.groupOneItems = (e.target as ExampleSorterGroup).value;
64+
}}></example-sorter-group>
65+
<example-sorter-group
66+
.value=${this.groupTwoItems}
67+
@change=${(e: Event) => {
68+
this.groupTwoItems = (e.target as ExampleSorterGroup).value;
69+
}}></example-sorter-group>
6370
</div>
6471
</uui-box>
6572
`;

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

Lines changed: 27 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -13,28 +13,8 @@ export type ModelEntryType = {
1313

1414
@customElement('example-sorter-group')
1515
export class ExampleSorterGroup extends UmbElementMixin(LitElement) {
16-
@property({ type: Array, attribute: false })
17-
public get initialItems(): ModelEntryType[] {
18-
return this.items;
19-
}
20-
public set initialItems(value: ModelEntryType[]) {
21-
// Only want to set the model initially, cause any re-render should not set this again.
22-
if (this._items !== undefined) return;
23-
this.items = value;
24-
}
25-
26-
@property({ type: Array, attribute: false })
27-
public get items(): ModelEntryType[] {
28-
return this._items ?? [];
29-
}
30-
public set items(value: ModelEntryType[]) {
31-
const oldValue = this._items;
32-
this._items = value;
33-
this.#sorter.setModel(this._items);
34-
this.requestUpdate('items', oldValue);
35-
}
36-
private _items?: ModelEntryType[];
37-
16+
//
17+
// Sorter setup:
3818
#sorter = new UmbSorterController<ModelEntryType, ExampleSorterItem>(this, {
3919
getUniqueOfElement: (element) => {
4020
return element.name;
@@ -46,26 +26,45 @@ export class ExampleSorterGroup extends UmbElementMixin(LitElement) {
4626
itemSelector: 'example-sorter-item',
4727
containerSelector: '.sorter-container',
4828
onChange: ({ model }) => {
49-
const oldValue = this._items;
50-
this._items = model;
51-
this.requestUpdate('items', oldValue);
29+
const oldValue = this._value;
30+
this._value = model;
31+
this.requestUpdate('value', oldValue);
32+
// Fire an event for the parent to know that the model has changed.
33+
this.dispatchEvent(new CustomEvent('change'));
5234
},
5335
});
5436

37+
@property({ type: Array, attribute: false })
38+
public get value(): ModelEntryType[] {
39+
return this._value ?? [];
40+
}
41+
public set value(value: ModelEntryType[]) {
42+
const oldValue = this._value;
43+
this._value = value;
44+
this.#sorter.setModel(this._value);
45+
this.requestUpdate('value', oldValue);
46+
}
47+
private _value?: ModelEntryType[];
48+
5549
removeItem = (item: ModelEntryType) => {
56-
this.items = this.items.filter((r) => r.name !== item.name);
50+
this.value = this.value.filter((r) => r.name !== item.name);
5751
};
5852

5953
render() {
6054
return html`
6155
<div class="sorter-container">
6256
${repeat(
63-
this.items,
57+
this.value,
58+
// Note: ideally you have an unique identifier for each item, but for this example we use the `name` as identifier.
6459
(item) => item.name,
6560
(item) =>
6661
html`<example-sorter-item name=${item.name}>
6762
<button slot="action" @click=${() => this.removeItem(item)}>Delete</button>
68-
${item.children ? html`<example-sorter-group .initialItems=${item.children}></example-sorter-group>` : ''}
63+
<example-sorter-group
64+
.value=${item.children ?? []}
65+
@change=${(e: Event) => {
66+
item.children = (e.target as ExampleSorterGroup).value;
67+
}}></example-sorter-group>
6968
</example-sorter-item>`,
7069
)}
7170
</div>

‎package-lock.json‎

Lines changed: 6 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/assets/lang/da-dk.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -538,6 +538,7 @@ export default {
538538
selectContentType: 'Vælg indholdstype',
539539
selectMediaStartNode: 'Vælg startnode for mediearkivet',
540540
selectMember: 'Vælg medlem',
541+
selectMembers: 'Vælg medlemmer',
541542
selectMemberGroup: 'Vælg medlemsgruppe',
542543
selectMemberType: 'Vælg medlemstype',
543544
selectNode: 'Vælg node',
@@ -762,6 +763,7 @@ export default {
762763
deleted: 'Slettet',
763764
deleting: 'Sletter...',
764765
design: 'Design',
766+
details: 'Detaljer',
765767
dictionary: 'Ordbog',
766768
dimensions: 'Dimensioner',
767769
discard: 'Kassér',
@@ -808,6 +810,7 @@ export default {
808810
message: 'Besked',
809811
move: 'Flyt',
810812
name: 'Navn',
813+
never: 'Aldrig',
811814
new: 'Ny',
812815
next: 'Næste',
813816
no: 'Nej',
@@ -850,6 +853,7 @@ export default {
850853
submit: 'Indsend',
851854
type: 'Type',
852855
typeToSearch: 'Skriv for at søge...',
856+
unknown: 'Ukendt',
853857
unknownUser: 'Ukendt bruger',
854858
under: 'under',
855859
up: 'Op',

‎src/assets/lang/en-us.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -549,6 +549,7 @@ export default {
549549
selectContentType: 'Select content type',
550550
selectMediaStartNode: 'Select media start node',
551551
selectMember: 'Select member',
552+
selectMembers: 'Select members',
552553
selectMemberGroup: 'Select member group',
553554
selectMemberType: 'Select member type',
554555
selectNode: 'Select node',
@@ -821,6 +822,7 @@ export default {
821822
message: 'Message',
822823
move: 'Move',
823824
name: 'Name',
825+
never: 'Never',
824826
new: 'New',
825827
next: 'Next',
826828
no: 'No',
@@ -870,6 +872,7 @@ export default {
870872
type: 'Type',
871873
typeName: 'Type Name',
872874
typeToSearch: 'Type to search...',
875+
unknown: 'Unknown',
873876
unknownUser: 'Unknown user',
874877
under: 'under',
875878
up: 'Up',
@@ -1300,7 +1303,7 @@ export default {
13001303
packages: 'Packages',
13011304
marketplace: 'Marketplace',
13021305
settings: 'Settings',
1303-
translation: 'Translation',
1306+
translation: 'Dictionary',
13041307
users: 'Users',
13051308
},
13061309
help: {

‎src/assets/lang/en.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -560,6 +560,7 @@ export default {
560560
selectContentType: 'Select content type',
561561
selectMediaStartNode: 'Select media start node',
562562
selectMember: 'Select member',
563+
selectMembers: 'Select members',
563564
selectMemberGroup: 'Select member group',
564565
selectMemberType: 'Select member type',
565566
selectNode: 'Select node',
@@ -830,6 +831,7 @@ export default {
830831
message: 'Message',
831832
move: 'Move',
832833
name: 'Name',
834+
never: 'Never',
833835
new: 'New',
834836
next: 'Next',
835837
no: 'No',
@@ -879,6 +881,7 @@ export default {
879881
type: 'Type',
880882
typeName: 'Type Name',
881883
typeToSearch: 'Type to search...',
884+
unknown: 'Unknown',
882885
unknownUser: 'Unknown user',
883886
under: 'under',
884887
up: 'Up',
@@ -1319,7 +1322,7 @@ export default {
13191322
packages: 'Packages',
13201323
marketplace: 'Marketplace',
13211324
settings: 'Settings',
1322-
translation: 'Translation',
1325+
translation: 'Dictionary',
13231326
users: 'Users',
13241327
},
13251328
help: {

‎src/packages/core/sorter/sorter.controller.ts‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -387,16 +387,23 @@ export class UmbSorterController<T, ElementType extends HTMLElement = HTMLElemen
387387
}
388388
};
389389

390+
#getDraggableElement(element: HTMLElement) {
391+
if (this.#config.draggableSelector) {
392+
// Concept for enabling getting element within ShadowRoot: (But it might need to be configurable, so its still possible to get light dom element(slotted), despite the host is a web-component with shadow-dom.) [NL]
393+
//const queryFromEl = element.shadowRoot ?? element;
394+
return (element.querySelector(this.#config.draggableSelector) as HTMLElement | undefined) ?? element;
395+
}
396+
return element;
397+
}
398+
390399
setupItem(element: ElementType) {
391400
if (this.#config.ignorerSelector) {
392401
setupIgnorerElements(element, this.#config.ignorerSelector);
393402
}
394403

395404
if (!this.#config.disabledItemSelector || !element.matches(this.#config.disabledItemSelector)) {
396405
// Idea: to make sure on does not get initialized twice: if ((element as HTMLElement).draggable === true) return;
397-
const draggableElement = this.#config.draggableSelector
398-
? (element.querySelector(this.#config.draggableSelector) as HTMLElement | undefined) ?? element
399-
: element;
406+
const draggableElement = this.#getDraggableElement(element);
400407
(draggableElement as HTMLElement).draggable = true;
401408
draggableElement.addEventListener('dragstart', this.#handleDragStart);
402409
draggableElement.addEventListener('dragend', this.#handleDragEnd);
@@ -419,9 +426,7 @@ export class UmbSorterController<T, ElementType extends HTMLElement = HTMLElemen
419426
destroyIgnorerElements(element, this.#config.ignorerSelector);
420427
}
421428

422-
const draggableElement = this.#config.draggableSelector
423-
? (element.querySelector(this.#config.draggableSelector) as HTMLElement | undefined) ?? element
424-
: element;
429+
const draggableElement = this.#getDraggableElement(element);
425430
draggableElement.removeEventListener('dragstart', this.#handleDragStart);
426431
// We are not ready to remove the dragend or drop, as this is might be the active one just moving container:
427432
//draggableElement.removeEventListener('dragend', this.#handleDragEnd);
@@ -447,9 +452,7 @@ export class UmbSorterController<T, ElementType extends HTMLElement = HTMLElemen
447452
#setCurrentElement(element: ElementType) {
448453
UmbSorterController.activeElement = element;
449454

450-
UmbSorterController.activeDragElement = this.#config.draggableSelector
451-
? element.querySelector(this.#config.draggableSelector) ?? undefined
452-
: element;
455+
UmbSorterController.activeDragElement = this.#getDraggableElement(element);
453456

454457
if (!UmbSorterController.activeDragElement) {
455458
throw new Error(
@@ -629,7 +632,7 @@ export class UmbSorterController<T, ElementType extends HTMLElement = HTMLElemen
629632
const elRect = el.getBoundingClientRect();
630633
// gather elements on the same row.
631634
if (this.#dragY >= elRect.top && this.#dragY <= elRect.bottom) {
632-
const dragElement = this.#config.draggableSelector ? el.querySelector(this.#config.draggableSelector) : el;
635+
const dragElement = this.#getDraggableElement(el as unknown as HTMLElement);
633636
if (dragElement) {
634637
const dragElementRect = dragElement.getBoundingClientRect();
635638
if (el !== UmbSorterController.activeElement) {

‎src/packages/members/member-group/collection/views/table/member-group-table-collection-view.element.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export class UmbMemberGroupTableCollectionViewElement extends UmbLitElement {
1616
@state()
1717
private _tableColumns: Array<UmbTableColumn> = [
1818
{
19-
name: 'Name',
19+
name: this.localize.term('general_name'),
2020
alias: 'memberGroupName',
2121
},
2222
];

‎src/packages/members/member-group/components/input-member-group/input-member-group.element.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -182,6 +182,7 @@ export class UmbInputMemberGroupElement extends UUIFormControlMixin(UmbLitElemen
182182
${this.#renderOpenButton(item)}
183183
<uui-button @click=${() => this.#removeItem(item)} label=${this.localize.term('general_remove')}></uui-button>
184184
</uui-action-bar>
185+
<umb-icon slot="icon" name="icon-users"></umb-icon>
185186
</uui-ref-node>
186187
`;
187188
}

‎src/packages/members/member-group/workspace/views/info/member-type-workspace-view-info.element.ts‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,17 +23,19 @@ export class UmbMemberTypeWorkspaceViewMemberInfoElement extends UmbLitElement i
2323

2424
render() {
2525
return html` <div id="left-column">
26-
<uui-box headline="Member Group">
26+
<uui-box headline=${this.localize.term('content_membergroup')}>
2727
<div id="no-properties">
28-
<umb-localize key="member_memberGroupNoProperties"></umb-localize>
28+
<umb-localize key="member_memberGroupNoProperties">
29+
Member groups have no additional properties for editing.
30+
</umb-localize>
2931
</div>
3032
</uui-box>
3133
</div>
3234
3335
<div id="right-column">
34-
<uui-box headline="General">
36+
<uui-box headline=${this.localize.term('general_general')}>
3537
<div class="property">
36-
<b>Id</b>
38+
<b><umb-localize key="general_id">Id</umb-localize></b>
3739
<span>${this._unique}</span>
3840
</div>
3941
</uui-box>

0 commit comments

Comments
 (0)