single item mode

Author: nielslyngsoe

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

@@ -8,14 +8,6 @@ export class UmbBlockGridTypeWorkspaceViewAdvancedElement extends UmbLitElement
 	override render() {
 		return html`
 			<uui-box headline="Advanced">
-				<umb-property
-					label="Custom view"
-					alias="view"
-					property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"></umb-property>
-				<umb-property
-					label="Custom stylesheet"
-					alias="stylesheet"
-					property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"></umb-property>
 				<umb-property
 					label="Overlay size"
 					alias="editorSize"
@@ -41,7 +33,13 @@ export class UmbBlockGridTypeWorkspaceViewAdvancedElement extends UmbLitElement
 				<umb-property
 					label="Thumbnail"
 					alias="thumbnail"
-					property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"></umb-property>
+					property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"
+					.config=${[
+						{
+							alias: 'singleItemMode',
+							value: true,
+						},
+					]}></umb-property>
 			</uui-box>
 		`;
 	}

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

@@ -12,14 +12,6 @@ export class UmbBlockListTypeWorkspaceViewSettingsElement extends UmbLitElement
 					label="Label"
 					alias="label"
 					property-editor-ui-alias="Umb.PropertyEditorUi.TextBox"></umb-property>
-				<!--<umb-property
-					label="Custom view"
-					alias="view"
-					property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"></umb-property>
-				<umb-property
-					label="Custom stylesheet"
-					alias="stylesheet"
-					property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"></umb-property>-->
 				<umb-property
 					label="Overlay size"
 					alias="editorSize"
@@ -67,9 +59,15 @@ export class UmbBlockListTypeWorkspaceViewSettingsElement extends UmbLitElement
 					alias="iconColor"
 					property-editor-ui-alias="Umb.PropertyEditorUi.TextBox"></umb-property>
 				<umb-property
-					label="Custom stylesheet"
-					alias="stylesheet"
-					property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"></umb-property>
+					label="Thumbnail"
+					alias="thumbnail"
+					property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"
+					.config=${[
+						{
+							alias: 'singleItemMode',
+							value: true,
+						},
+					]}></umb-property>
 			</uui-box>
 			<uui-box headline="Advanced">
 				<umb-property

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

@@ -63,9 +63,15 @@ export class UmbBlockRteTypeWorkspaceViewSettingsElement extends UmbLitElement i
 					alias="iconColor"
 					property-editor-ui-alias="Umb.PropertyEditorUi.TextBox"></umb-property>
 				<umb-property
-					label="Custom stylesheet"
-					alias="stylesheet"
-					property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"></umb-property>
+					label="Thumbnail"
+					alias="thumbnail"
+					property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"
+					.config=${[
+						{
+							alias: 'singleItemMode',
+							value: true,
+						},
+					]}></umb-property>
 			</uui-box>
 		`;
 	}

src/packages/static-file/property-editors/static-file-picker/property-editor-ui-static-file-picker.element.ts

@@ -11,17 +11,21 @@ import '../../components/input-static-file/index.js';
 
 @customElement('umb-property-editor-ui-static-file-picker')
 export class UmbPropertyEditorUIStaticFilePickerElement extends UmbLitElement implements UmbPropertyEditorUiElement {
-	private _value: Array<string> = [];
+	private _singleItemMode = false;
 
-	@property({ type: Array })
-	public set value(value: Array<string>) {
-		this._value = value || [];
+	@state()
+	private _value?: string | Array<string>;
+
+	@property({ attribute: false })
+	public set value(value: string | Array<string> | undefined) {
+		this._value = value;
 	}
-	public get value(): Array<string> {
+	public get value() {
 		return this._value;
 	}
 
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
+		this._singleItemMode = config?.getValueByAlias<boolean>('singleItemMode') ?? false;
 		const validationLimit = config?.getValueByAlias<UmbNumberRangeValueType>('validationLimit');
 
 		this._limitMin = validationLimit?.min;
@@ -34,18 +38,22 @@ export class UmbPropertyEditorUIStaticFilePickerElement extends UmbLitElement im
 	private _limitMax?: number;
 
 	private _onChange(event: CustomEvent) {
-		this.value = (event.target as UmbInputStaticFileElement).selection;
+		if (this._singleItemMode) {
+			this.value = (event.target as UmbInputStaticFileElement).selection[0];
+		} else {
+			this.value = (event.target as UmbInputStaticFileElement).selection;
+		}
 		this.dispatchEvent(new UmbPropertyValueChangeEvent());
 	}
 
 	// TODO: Implement mandatory?
 	override render() {
 		return html`
 			<umb-input-static-file
-				@change=${this._onChange}
-				.selection=${this._value}
+				.selection=${this._value ? (Array.isArray(this._value) ? this._value : [this._value]) : []}
 				.min=${this._limitMin ?? 0}
-				.max=${this._limitMax ?? Infinity}></umb-input-static-file>
+				.max=${this._limitMax ?? Infinity}
+				@change=${this._onChange}></umb-input-static-file>
 		`;
 	}
 }