Skip to content

Commit 03933c5

Browse files
iOvergaardiOvergaard
authored
Merge branch 'main' into dependabot/npm_and_yarn/eslint-9.6.0
2 parents 48304b6 + 2cf83ec commit 03933c5

File tree

7 files changed

+154
-83
lines changed

7 files changed

+154
-83
lines changed

‎src/libs/observable-api/states/array-state.ts

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,10 @@ export class UmbArrayState<T> extends UmbDeepState<T[]> {
3535
*/
3636
sortBy(sortMethod?: (a: T, b: T) => number) {
3737
this.#sortMethod = sortMethod;
38-
super.setValue(this.getValue().sort(this.#sortMethod));
38+
const value = this.getValue();
39+
if(value) {
40+
super.setValue([...value].sort(this.#sortMethod));
41+
}
3942
return this;
4043
}
4144

@@ -51,7 +54,7 @@ export class UmbArrayState<T> extends UmbDeepState<T[]> {
5154
*/
5255
override setValue(value: T[]) {
5356
if (this.#sortMethod) {
54-
super.setValue(value.sort(this.#sortMethod));
57+
super.setValue([...value].sort(this.#sortMethod));
5558
} else {
5659
super.setValue(value);
5760
}

‎src/packages/block/block-list/property-editors/block-list-editor/manifests.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { manifest as blockListSchemaManifest } from './Umbraco.BlockList.js';
21
import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry';
2+
import { manifest as blockListSchemaManifest } from './Umbraco.BlockList.js';
33

44
export const UMB_BLOCK_LIST_PROPERTY_EDITOR_ALIAS = 'Umbraco.BlockList';
55

‎src/packages/core/components/split-panel/split-panel.element.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -294,7 +294,7 @@ export class UmbSplitPanelElement extends LitElement {
294294
#divider-touch-area {
295295
position: absolute;
296296
top: 0;
297-
left: 0;
297+
left: 5px;
298298
height: 100%;
299299
width: var(--umb-split-panel-divider-touch-area-width);
300300
transform: translateX(-50%);

‎src/packages/core/components/table/table.element.ts

Lines changed: 59 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import type { UmbUfmRenderElement } from '../../../ufm/components/ufm-render/index.js';
2-
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
31
import {
42
css,
53
customElement,
@@ -11,6 +9,8 @@ import {
119
when,
1210
LitElement,
1311
} from '@umbraco-cms/backoffice/external/lit';
12+
import type { UmbUfmRenderElement } from '../../../ufm/components/ufm-render/index.js';
13+
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
1414

1515
// TODO: move to UI Library - entity actions should NOT be moved to UI Library but stay in an UmbTable element
1616
export interface UmbTableItem {
@@ -163,17 +163,19 @@ export class UmbTableElement extends LitElement {
163163
}
164164

165165
override render() {
166-
return html`<uui-table class="uui-text">
167-
<uui-table-column
168-
.style=${when(
169-
!(this.config.allowSelection === false && this.config.hideIcon === true),
170-
() => 'width: 60px',
171-
)}></uui-table-column>
172-
<uui-table-head>
173-
${this._renderHeaderCheckboxCell()} ${this.columns.map((column) => this._renderHeaderCell(column))}
174-
</uui-table-head>
175-
${repeat(this.items, (item) => item.id, this._renderRow)}
176-
</uui-table>`;
166+
return html`
167+
<uui-table class="uui-text">
168+
<uui-table-column
169+
.style=${when(
170+
!(this.config.allowSelection === false && this.config.hideIcon === true),
171+
() => 'width: 60px',
172+
)}></uui-table-column>
173+
<uui-table-head>
174+
${this._renderHeaderCheckboxCell()} ${this.columns.map((column) => this._renderHeaderCell(column))}
175+
</uui-table-head>
176+
${repeat(this.items, (item) => item.id, this._renderRow)}
177+
</uui-table>
178+
`;
177179
}
178180

179181
private _renderHeaderCell(column: UmbTableColumn) {
@@ -201,48 +203,54 @@ export class UmbTableElement extends LitElement {
201203
private _renderHeaderCheckboxCell() {
202204
if (this.config.hideIcon && !this.config.allowSelection) return;
203205

204-
return html` <uui-table-head-cell style="--uui-table-cell-padding: 0">
205-
${when(
206-
this.config.allowSelection,
207-
() =>
208-
html` <uui-checkbox
209-
label="Select All"
210-
style="padding: var(--uui-size-4) var(--uui-size-5);"
211-
@change="${this._handleAllRowsCheckboxChange}"
212-
?checked="${this.selection.length === this.items.length}">
213-
</uui-checkbox>`,
214-
)}
215-
</uui-table-head-cell>`;
206+
return html`
207+
<uui-table-head-cell style="--uui-table-cell-padding: 0">
208+
${when(
209+
this.config.allowSelection,
210+
() =>
211+
html` <uui-checkbox
212+
label="Select All"
213+
style="padding: var(--uui-size-4) var(--uui-size-5);"
214+
@change="${this._handleAllRowsCheckboxChange}"
215+
?checked="${this.selection.length === this.items.length}">
216+
</uui-checkbox>`,
217+
)}
218+
</uui-table-head-cell>
219+
`;
216220
}
217221

218222
private _renderRow = (item: UmbTableItem) => {
219-
return html`<uui-table-row
220-
?selectable="${this.config.allowSelection}"
221-
?select-only=${this._selectionMode}
222-
?selected=${this._isSelected(item.id)}
223-
@selected=${() => this._selectRow(item.id)}
224-
@deselected=${() => this._deselectRow(item.id)}>
225-
${this._renderRowCheckboxCell(item)} ${this.columns.map((column) => this._renderRowCell(column, item))}
226-
</uui-table-row>`;
223+
return html`
224+
<uui-table-row
225+
?selectable="${this.config.allowSelection}"
226+
?select-only=${this._selectionMode}
227+
?selected=${this._isSelected(item.id)}
228+
@selected=${() => this._selectRow(item.id)}
229+
@deselected=${() => this._deselectRow(item.id)}>
230+
${this._renderRowCheckboxCell(item)} ${this.columns.map((column) => this._renderRowCell(column, item))}
231+
</uui-table-row>
232+
`;
227233
};
228234

229235
private _renderRowCheckboxCell(item: UmbTableItem) {
230236
if (this.config.hideIcon && !this.config.allowSelection) return;
231237

232-
return html`<uui-table-cell>
233-
${when(!this.config.hideIcon, () => html`<umb-icon name="${ifDefined(item.icon ?? undefined)}"></umb-icon>`)}
234-
${when(
235-
this.config.allowSelection,
236-
() => html`
237-
<uui-checkbox
238-
label="Select Row"
239-
@click=${(e: PointerEvent) => e.stopPropagation()}
240-
@change=${(event: Event) => this._handleRowCheckboxChange(event, item)}
241-
?checked="${this._isSelected(item.id)}">
242-
</uui-checkbox>
243-
`,
244-
)}
245-
</uui-table-cell>`;
238+
return html`
239+
<uui-table-cell>
240+
${when(!this.config.hideIcon, () => html`<umb-icon name="${ifDefined(item.icon ?? undefined)}"></umb-icon>`)}
241+
${when(
242+
this.config.allowSelection,
243+
() => html`
244+
<uui-checkbox
245+
label="Select Row"
246+
@click=${(e: PointerEvent) => e.stopPropagation()}
247+
@change=${(event: Event) => this._handleRowCheckboxChange(event, item)}
248+
?checked="${this._isSelected(item.id)}">
249+
</uui-checkbox>
250+
`,
251+
)}
252+
</uui-table-cell>
253+
`;
246254
}
247255

248256
private _renderRowCell(column: UmbTableColumn, item: UmbTableItem) {
@@ -251,7 +259,8 @@ export class UmbTableElement extends LitElement {
251259
style="--uui-table-cell-padding: 0 var(--uui-size-5); text-align:${column.align ?? 'left'}; width: ${column.width || 'auto'};">
252260
${this._renderCellContent(column, item)}
253261
</uui-table-cell>
254-
</uui-table-cell>`;
262+
</uui-table-cell>
263+
`;
255264
}
256265

257266
private _renderCellContent(column: UmbTableColumn, item: UmbTableItem) {
@@ -292,6 +301,7 @@ export class UmbTableElement extends LitElement {
292301
position: sticky;
293302
top: 0;
294303
z-index: 1;
304+
background-color: var(--uui-color-surface, #fff);
295305
}
296306
297307
uui-table-row uui-checkbox {
@@ -331,6 +341,7 @@ export class UmbTableElement extends LitElement {
331341
justify-content: space-between;
332342
width: 100%;
333343
}
344+
334345
uui-table-head-cell button > span {
335346
flex: 1 0 auto;
336347
}

‎src/packages/documents/documents/tree/tree-item/document-tree-item.element.ts

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import type { UmbDocumentTreeItemModel, UmbDocumentTreeItemVariantModel } from '../types.js';
21
import { css, html, nothing, customElement, state, classMap } from '@umbraco-cms/backoffice/external/lit';
32
import type { UmbAppLanguageContext } from '@umbraco-cms/backoffice/language';
43
import { UMB_APP_LANGUAGE_CONTEXT } from '@umbraco-cms/backoffice/language';
54
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
65
import { UmbTreeItemElementBase } from '@umbraco-cms/backoffice/tree';
6+
import type { UmbDocumentTreeItemModel, UmbDocumentTreeItemVariantModel } from '../types.js';
77

88
@customElement('umb-document-tree-item')
99
export class UmbDocumentTreeItemElement extends UmbTreeItemElementBase<UmbDocumentTreeItemModel> {
@@ -74,11 +74,7 @@ export class UmbDocumentTreeItemElement extends UmbTreeItemElementBase<UmbDocume
7474
${this.item?.documentType.icon
7575
? html`
7676
<umb-icon id="icon" slot="icon" name="${this.item.documentType.icon}"></umb-icon>
77-
${this.item.isProtected ? this.#renderIsProtectedIcon() : nothing}
78-
<!--
79-
// TODO: implement correct status symbol
80-
<span id="status-symbol"></span>
81-
-->
77+
${this.#renderStateIcon()}
8278
`
8379
: nothing}
8480
</span>
@@ -91,8 +87,24 @@ export class UmbDocumentTreeItemElement extends UmbTreeItemElementBase<UmbDocume
9187
> `;
9288
}
9389

90+
#renderStateIcon() {
91+
if (this.item?.isProtected) {
92+
return this.#renderIsProtectedIcon();
93+
}
94+
95+
if (this.item?.documentType.collection) {
96+
return this.#renderIsCollectionIcon();
97+
}
98+
99+
return nothing;
100+
}
101+
102+
#renderIsCollectionIcon() {
103+
return html`<umb-icon id="state-icon" slot="icon" name="icon-grid" title="Collection"></umb-icon>`;
104+
}
105+
94106
#renderIsProtectedIcon() {
95-
return html`<umb-icon id="icon-lock" slot="icon" name="icon-lock" title="Protected"></umb-icon>`;
107+
return html`<umb-icon id="state-icon" slot="icon" name="icon-lock" title="Protected"></umb-icon>`;
96108
}
97109

98110
static override styles = [
@@ -106,19 +118,13 @@ export class UmbDocumentTreeItemElement extends UmbTreeItemElementBase<UmbDocume
106118
vertical-align: middle;
107119
}
108120
109-
#status-symbol {
110-
width: 5px;
111-
height: 5px;
112-
border: 1px solid white;
113-
background-color: blue;
114-
display: block;
115-
position: absolute;
116-
bottom: 0;
117-
right: 0;
118-
border-radius: 100%;
121+
#label {
122+
white-space: nowrap;
123+
overflow: hidden;
124+
text-overflow: ellipsis;
119125
}
120126
121-
#icon-lock {
127+
#state-icon {
122128
position: absolute;
123129
bottom: -5px;
124130
right: -5px;
@@ -130,36 +136,30 @@ export class UmbDocumentTreeItemElement extends UmbTreeItemElementBase<UmbDocume
130136
line-height: 14px;
131137
}
132138
133-
#label {
134-
white-space: nowrap;
135-
overflow: hidden;
136-
text-overflow: ellipsis;
137-
}
138-
139-
:hover #icon-lock {
139+
:hover #state-icon {
140140
background: var(--uui-color-surface-emphasis);
141141
}
142142
143143
/** Active */
144-
[active] #icon-lock {
144+
[active] #state-icon {
145145
background: var(--uui-color-current);
146146
}
147147
148-
[active]:hover #icon-lock {
148+
[active]:hover #state-icon {
149149
background: var(--uui-color-current-emphasis);
150150
}
151151
152152
/** Selected */
153-
[selected] #icon-lock {
153+
[selected] #state-icon {
154154
background-color: var(--uui-color-selected);
155155
}
156156
157-
[selected]:hover #icon-lock {
157+
[selected]:hover #state-icon {
158158
background-color: var(--uui-color-selected-emphasis);
159159
}
160160
161161
/** Disabled */
162-
[disabled] #icon-lock {
162+
[disabled] #state-icon {
163163
background-color: var(--uui-color-disabled);
164164
}
165165

‎src/packages/media/media/tree/tree-item/media-tree-item.element.ts

Lines changed: 55 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,10 @@ export class UmbMediaTreeItemElement extends UmbTreeItemElementBase<UmbMediaTree
1010
return html`
1111
<span id="icon-container" slot="icon">
1212
${this.item?.mediaType.icon
13-
? html` <umb-icon id="icon" slot="icon" name="${this.item.mediaType.icon}"></umb-icon> `
13+
? html`
14+
<umb-icon id="icon" slot="icon" name="${this.item.mediaType.icon}"></umb-icon>
15+
${this.#renderStateIcon()}
16+
`
1417
: nothing}
1518
</span>
1619
`;
@@ -20,6 +23,18 @@ export class UmbMediaTreeItemElement extends UmbTreeItemElementBase<UmbMediaTree
2023
return html`<span id="label" slot="label">${this._item?.variants[0].name}</span> `;
2124
}
2225

26+
#renderStateIcon() {
27+
if (this.item?.mediaType.collection) {
28+
return this.#renderIsCollectionIcon();
29+
}
30+
31+
return nothing;
32+
}
33+
34+
#renderIsCollectionIcon() {
35+
return html`<umb-icon id="state-icon" slot="icon" name="icon-grid" title="Collection"></umb-icon>`;
36+
}
37+
2338
static override styles = [
2439
UmbTextStyles,
2540
css`
@@ -36,6 +51,45 @@ export class UmbMediaTreeItemElement extends UmbTreeItemElementBase<UmbMediaTree
3651
overflow: hidden;
3752
text-overflow: ellipsis;
3853
}
54+
55+
#state-icon {
56+
position: absolute;
57+
bottom: -5px;
58+
right: -5px;
59+
font-size: 10px;
60+
background: var(--uui-color-surface);
61+
width: 14px;
62+
height: 14px;
63+
border-radius: 100%;
64+
line-height: 14px;
65+
}
66+
67+
:hover #state-icon {
68+
background: var(--uui-color-surface-emphasis);
69+
}
70+
71+
/** Active */
72+
[active] #state-icon {
73+
background: var(--uui-color-current);
74+
}
75+
76+
[active]:hover #state-icon {
77+
background: var(--uui-color-current-emphasis);
78+
}
79+
80+
/** Selected */
81+
[selected] #state-icon {
82+
background-color: var(--uui-color-selected);
83+
}
84+
85+
[selected]:hover #state-icon {
86+
background-color: var(--uui-color-selected-emphasis);
87+
}
88+
89+
/** Disabled */
90+
[disabled] #state-icon {
91+
background-color: var(--uui-color-disabled);
92+
}
3993
`,
4094
];
4195
}

0 commit comments

Comments
 (0)