Skip to content

Commit 3e5b720

Browse files
iOvergaardiOvergaard
committed
Merge remote-tracking branch 'origin' into v14/feature/block-custom-views
2 parents b827d97 + c18ec50 commit 3e5b720

File tree

77 files changed

+304
-170
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

77 files changed

+304
-170
lines changed

‎src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
1-
import { UmbBlockGridEntriesContext } from '../../context/block-grid-entries.context.js';
2-
import type { UmbBlockGridEntryElement } from '../block-grid-entry/index.js';
31
import {
42
getAccumulatedValueOfIndex,
53
getInterpolatedIndexOfPositionInWeightMap,
64
isWithinRect,
75
} from '@umbraco-cms/backoffice/utils';
86
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
9-
import type { UmbBlockGridLayoutModel } from '@umbraco-cms/backoffice/block-grid';
107
import { html, customElement, state, repeat, css, property, nothing } from '@umbraco-cms/backoffice/external/lit';
118
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
129
import '../block-grid-entry/index.js';
@@ -17,6 +14,9 @@ import {
1714
type UmbFormControlValidatorConfig,
1815
} from '@umbraco-cms/backoffice/validation';
1916
import type { UmbNumberRangeValueType } from '@umbraco-cms/backoffice/models';
17+
import { UmbBlockGridEntriesContext } from '../../context/block-grid-entries.context.js';
18+
import type { UmbBlockGridEntryElement } from '../block-grid-entry/index.js';
19+
import type { UmbBlockGridLayoutModel } from '@umbraco-cms/backoffice/block-grid';
2020

2121
/**
2222
* Notice this utility method is not really shareable with others as it also takes areas into account. [NL]

‎src/packages/block/block-grid/context/block-grid-manager.context.ts

Lines changed: 32 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
import type { UmbBlockGridLayoutModel, UmbBlockGridTypeModel } from '../types.js';
22
import type { UmbBlockGridWorkspaceData } from '../index.js';
33
import { UmbArrayState, appendToFrozenArray, pushAtToUniqueArray } from '@umbraco-cms/backoffice/observable-api';
4+
import { removeInitialSlashFromPath, transformServerPathToClientPath } from '@umbraco-cms/backoffice/utils';
5+
import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
6+
import { UMB_APP_CONTEXT } from '@umbraco-cms/backoffice/app';
7+
import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
48
import { type UmbBlockDataType, UmbBlockManagerContext } from '@umbraco-cms/backoffice/block';
59
import type { UmbBlockTypeGroup } from '@umbraco-cms/backoffice/block-type';
610

@@ -13,24 +17,49 @@ export class UmbBlockGridManagerContext<
1317
BlockLayoutType extends UmbBlockGridLayoutModel = UmbBlockGridLayoutModel,
1418
> extends UmbBlockManagerContext<UmbBlockGridTypeModel, UmbBlockGridLayoutModel> {
1519
//
20+
#initAppUrl: Promise<void>;
21+
#appUrl?: string;
1622
#blockGroups = new UmbArrayState(<Array<UmbBlockTypeGroup>>[], (x) => x.key);
1723
public readonly blockGroups = this.#blockGroups.asObservable();
1824

19-
layoutStylesheet = this._editorConfiguration.asObservablePart(
20-
(x) => (x?.getValueByAlias('layoutStylesheet') as string) ?? UMB_BLOCK_GRID_DEFAULT_LAYOUT_STYLESHEET,
21-
);
25+
layoutStylesheet = this._editorConfiguration.asObservablePart((x) => {
26+
if (!x) return undefined;
27+
const layoutStylesheet = x.getValueByAlias<string>('layoutStylesheet');
28+
if (!layoutStylesheet) return UMB_BLOCK_GRID_DEFAULT_LAYOUT_STYLESHEET;
29+
30+
if (layoutStylesheet) {
31+
// Cause we await initAppUrl in setting the _editorConfiguration, we can trust the appUrl begin here.
32+
return this.#appUrl! + removeInitialSlashFromPath(transformServerPathToClientPath(layoutStylesheet));
33+
}
34+
return undefined;
35+
});
2236
gridColumns = this._editorConfiguration.asObservablePart((x) => {
2337
const value = x?.getValueByAlias('gridColumns') as string | undefined;
2438
return parseInt(value && value !== '' ? value : '12');
2539
});
2640

41+
override setEditorConfiguration(configs: UmbPropertyEditorConfigCollection) {
42+
this.#initAppUrl.then(() => {
43+
// we await initAppUrl, So the appUrl begin here is available when retrieving the layoutStylesheet.
44+
this._editorConfiguration.setValue(configs);
45+
});
46+
}
47+
2748
setBlockGroups(blockGroups: Array<UmbBlockTypeGroup>) {
2849
this.#blockGroups.setValue(blockGroups);
2950
}
3051
getBlockGroups() {
3152
return this.#blockGroups.value;
3253
}
3354

55+
constructor(host: UmbControllerHost) {
56+
super(host);
57+
58+
this.#initAppUrl = this.getContext(UMB_APP_CONTEXT).then((appContext) => {
59+
this.#appUrl = appContext.getServerUrl() + appContext.getBackofficePath();
60+
});
61+
}
62+
3463
create(
3564
contentElementTypeKey: string,
3665
partialLayoutEntry?: Omit<BlockLayoutType, 'contentUdi'>,

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,12 @@ export const manifests: Array<ManifestTypes> = [
5555
label: 'Layout Stylesheet',
5656
description: 'Override default stylesheet for backoffice layout.',
5757
propertyEditorUiAlias: 'Umb.PropertyEditorUi.BlockGridLayoutStylesheet',
58+
config: [
59+
{
60+
alias: 'singleItemMode',
61+
value: true,
62+
},
63+
],
5864
},
5965
],
6066
},

‎src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
import { UmbBlockGridManagerContext } from '../../context/block-grid-manager.context.js';
2-
import { UMB_BLOCK_GRID_PROPERTY_EDITOR_ALIAS } from './manifests.js';
31
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
42
import { html, customElement, property, state, css, type PropertyValueMap } from '@umbraco-cms/backoffice/external/lit';
53
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
64
import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
75
import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
8-
import type { UmbBlockTypeGroup } from '@umbraco-cms/backoffice/block-type';
9-
import type { UmbBlockGridTypeModel, UmbBlockGridValueModel } from '@umbraco-cms/backoffice/block-grid';
106
import '../../components/block-grid-entries/index.js';
117
import { observeMultiple } from '@umbraco-cms/backoffice/observable-api';
128
import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property';
139
import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
10+
import { UmbBlockGridManagerContext } from '../../context/block-grid-manager.context.js';
11+
import { UMB_BLOCK_GRID_PROPERTY_EDITOR_ALIAS } from './manifests.js';
12+
import type { UmbBlockTypeGroup } from '@umbraco-cms/backoffice/block-type';
13+
import type { UmbBlockGridTypeModel, UmbBlockGridValueModel } from '@umbraco-cms/backoffice/block-grid';
1414

1515
/**
1616
* @element umb-property-editor-ui-block-grid

‎src/packages/block/block-grid/property-editors/block-grid-layout-stylesheet/property-editor-ui-block-grid-layout-stylesheet.element.ts

Lines changed: 47 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,37 +3,69 @@
33
import type { UmbInputStaticFileElement } from '@umbraco-cms/backoffice/static-file';
44

55
import '@umbraco-cms/backoffice/static-file';
6-
import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
6+
import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
77
import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
88
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
99
import {
1010
UmbPropertyValueChangeEvent,
1111
type UmbPropertyEditorConfigCollection,
1212
} from '@umbraco-cms/backoffice/property-editor';
1313
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
14+
import { UmbServerFilePathUniqueSerializer } from '@umbraco-cms/backoffice/server-file-system';
15+
import type { UmbNumberRangeValueType } from '@umbraco-cms/backoffice/models';
1416

1517
@customElement('umb-property-editor-ui-block-grid-layout-stylesheet')
1618
export class UmbPropertyEditorUIBlockGridLayoutStylesheetElement
1719
extends UmbLitElement
1820
implements UmbPropertyEditorUiElement
1921
{
20-
private _value: Array<string> = [];
22+
#pickableFilter = (item: any) => item.unique.endsWith('css');
23+
#singleItemMode = false;
24+
// TODO: get rid of UmbServerFilePathUniqueSerializer in v.15 [NL]
25+
#serverFilePathUniqueSerializer = new UmbServerFilePathUniqueSerializer();
2126

22-
@property({ type: Array })
23-
public set value(value: Array<string>) {
24-
this._value = value || [];
27+
@state()
28+
private _value?: string | Array<string>;
29+
30+
@property({ attribute: false })
31+
public set value(value: string | Array<string> | undefined) {
32+
if (Array.isArray(value)) {
33+
this._value = value.map((unique) => this.#serverFilePathUniqueSerializer.toUnique(unique));
34+
} else if (value) {
35+
this._value = this.#serverFilePathUniqueSerializer.toUnique(value);
36+
} else {
37+
this._value = undefined;
38+
}
2539
}
26-
public get value(): Array<string> {
27-
return this._value;
40+
public get value(): string | Array<string> | undefined {
41+
if (Array.isArray(this._value)) {
42+
return this._value.map((unique) => this.#serverFilePathUniqueSerializer.toServerPath(unique) ?? '');
43+
} else if (this._value) {
44+
return this.#serverFilePathUniqueSerializer.toServerPath(this._value) ?? '';
45+
} else {
46+
return undefined;
47+
}
2848
}
2949

30-
private _pickableFilter = (item: any) => item.unique.endsWith('css');
50+
public set config(config: UmbPropertyEditorConfigCollection | undefined) {
51+
this.#singleItemMode = config?.getValueByAlias<boolean>('singleItemMode') ?? false;
52+
const validationLimit = config?.getValueByAlias<UmbNumberRangeValueType>('validationLimit');
3153

32-
@property({ attribute: false })
33-
public config?: UmbPropertyEditorConfigCollection;
54+
this._limitMin = validationLimit?.min ?? 0;
55+
this._limitMax = this.#singleItemMode ? 1 : validationLimit?.max ?? Infinity;
56+
}
57+
58+
@state()
59+
private _limitMin: number = 0;
60+
@state()
61+
private _limitMax: number = Infinity;
3462

3563
private _onChange(event: CustomEvent) {
36-
this.value = (event.target as UmbInputStaticFileElement).selection;
64+
if (this.#singleItemMode) {
65+
this._value = (event.target as UmbInputStaticFileElement).selection[0];
66+
} else {
67+
this._value = (event.target as UmbInputStaticFileElement).selection;
68+
}
3769
this.dispatchEvent(new UmbPropertyValueChangeEvent());
3870
}
3971

@@ -42,10 +74,10 @@ export class UmbPropertyEditorUIBlockGridLayoutStylesheetElement
4274
return html`
4375
<umb-input-static-file
4476
@change=${this._onChange}
45-
.pickableFilter=${this._pickableFilter}
46-
.selection=${this._value}
47-
.min=${0}
48-
.max=${1}></umb-input-static-file>
77+
.pickableFilter=${this.#pickableFilter}
78+
.selection=${this._value ? (Array.isArray(this._value) ? this._value : [this._value]) : []}
79+
.min=${this._limitMin}
80+
.max=${this._limitMax}></umb-input-static-file>
4981
<br />
5082
<a href="/umbraco/backoffice/assets/css/umbraco-blockgridlayout.css">Link to default layout stylesheet</a>
5183
`;

‎src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-advanced.element.ts

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,6 @@ export class UmbBlockGridTypeWorkspaceViewAdvancedElement extends UmbLitElement
88
override render() {
99
return html`
1010
<uui-box headline="Advanced">
11-
<umb-property
12-
label="Custom view"
13-
alias="view"
14-
property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"></umb-property>
15-
<umb-property
16-
label="Custom stylesheet"
17-
alias="stylesheet"
18-
property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"></umb-property>
1911
<umb-property
2012
label="Overlay size"
2113
alias="editorSize"
@@ -41,7 +33,13 @@ export class UmbBlockGridTypeWorkspaceViewAdvancedElement extends UmbLitElement
4133
<umb-property
4234
label="Thumbnail"
4335
alias="thumbnail"
44-
property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"></umb-property>
36+
property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"
37+
.config=${[
38+
{
39+
alias: 'singleItemMode',
40+
value: true,
41+
},
42+
]}></umb-property>
4543
</uui-box>
4644
`;
4745
}

‎src/packages/block/block-list/workspace/views/block-list-type-workspace-view.element.ts

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,6 @@ export class UmbBlockListTypeWorkspaceViewSettingsElement extends UmbLitElement
1212
label="Label"
1313
alias="label"
1414
property-editor-ui-alias="Umb.PropertyEditorUi.TextBox"></umb-property>
15-
<!--<umb-property
16-
label="Custom view"
17-
alias="view"
18-
property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"></umb-property>
19-
<umb-property
20-
label="Custom stylesheet"
21-
alias="stylesheet"
22-
property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"></umb-property>-->
2315
<umb-property
2416
label="Overlay size"
2517
alias="editorSize"
@@ -67,9 +59,15 @@ export class UmbBlockListTypeWorkspaceViewSettingsElement extends UmbLitElement
6759
alias="iconColor"
6860
property-editor-ui-alias="Umb.PropertyEditorUi.TextBox"></umb-property>
6961
<umb-property
70-
label="Custom stylesheet"
71-
alias="stylesheet"
72-
property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"></umb-property>
62+
label="Thumbnail"
63+
alias="thumbnail"
64+
property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"
65+
.config=${[
66+
{
67+
alias: 'singleItemMode',
68+
value: true,
69+
},
70+
]}></umb-property>
7371
</uui-box>
7472
<uui-box headline="Advanced">
7573
<umb-property

‎src/packages/block/block-rte/workspace/views/block-rte-type-workspace-view.element.ts

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -63,9 +63,15 @@ export class UmbBlockRteTypeWorkspaceViewSettingsElement extends UmbLitElement i
6363
alias="iconColor"
6464
property-editor-ui-alias="Umb.PropertyEditorUi.TextBox"></umb-property>
6565
<umb-property
66-
label="Custom stylesheet"
67-
alias="stylesheet"
68-
property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"></umb-property>
66+
label="Thumbnail"
67+
alias="thumbnail"
68+
property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"
69+
.config=${[
70+
{
71+
alias: 'singleItemMode',
72+
value: true,
73+
},
74+
]}></umb-property>
6975
</uui-box>
7076
`;
7177
}

‎src/packages/block/block-type/components/block-type-card/block-type-card.element.ts

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,15 @@ import {
55
import { html, customElement, property, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
66
import { UmbRepositoryItemsManager } from '@umbraco-cms/backoffice/repository';
77
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
8+
import { UMB_APP_CONTEXT } from '@umbraco-cms/backoffice/app';
9+
import { removeInitialSlashFromPath, transformServerPathToClientPath } from '@umbraco-cms/backoffice/utils';
810

911
@customElement('umb-block-type-card')
1012
export class UmbBlockTypeCardElement extends UmbLitElement {
1113
//
14+
#init: Promise<void>;
15+
#appUrl?: string;
16+
1217
#itemManager = new UmbRepositoryItemsManager<UmbDocumentTypeItemModel>(
1318
this,
1419
UMB_DOCUMENT_TYPE_ITEM_REPOSITORY_ALIAS,
@@ -19,7 +24,22 @@ export class UmbBlockTypeCardElement extends UmbLitElement {
1924
href?: string;
2025

2126
@property({ type: String, attribute: false })
22-
iconFile?: string;
27+
public set iconFile(value: string) {
28+
value = transformServerPathToClientPath(value);
29+
if (value) {
30+
this.#init.then(() => {
31+
this._iconFile = this.#appUrl + removeInitialSlashFromPath(value);
32+
});
33+
} else {
34+
this._iconFile = undefined;
35+
}
36+
}
37+
public get iconFile(): string | undefined {
38+
return this._iconFile;
39+
}
40+
41+
@state()
42+
private _iconFile?: string | undefined;
2343

2444
@property({ type: String, attribute: false })
2545
iconColor?: string;
@@ -55,6 +75,10 @@ export class UmbBlockTypeCardElement extends UmbLitElement {
5575
constructor() {
5676
super();
5777

78+
this.#init = this.getContext(UMB_APP_CONTEXT).then((appContext) => {
79+
this.#appUrl = appContext.getServerUrl() + appContext.getBackofficePath();
80+
});
81+
5882
this.observe(this.#itemManager.items, (items) => {
5983
const item = items[0];
6084
if (item) {
@@ -73,8 +97,8 @@ export class UmbBlockTypeCardElement extends UmbLitElement {
7397
.name=${this._name ?? 'Unknown'}
7498
.description=${this._description}
7599
.background=${this.backgroundColor}>
76-
${this.iconFile
77-
? html`<img src=${this.iconFile} alt="" />`
100+
${this._iconFile
101+
? html`<img src=${this._iconFile} alt="" />`
78102
: html`<umb-icon name=${this._fallbackIcon ?? ''} style="color:${this.iconColor}"></umb-icon>`}
79103
<slot name="actions" slot="actions"> </slot>
80104
</uui-card-block-type>

‎src/packages/block/block-type/components/input-block-type/input-block-type.element.ts

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -146,8 +146,6 @@ export class UmbInputBlockTypeElement<
146146
#renderItem = (block: BlockType) => {
147147
return html`
148148
<umb-block-type-card
149-
.data-umb-content-element-key=${block.contentElementTypeKey}
150-
.name=${block.label}
151149
.iconFile=${block.thumbnail}
152150
.iconColor=${block.iconColor}
153151
.backgroundColor=${block.backgroundColor}

0 commit comments

Comments
 (0)