placeholder configuration property for number property editor

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/manifests.ts

@@ -42,9 +42,12 @@ export const manifests: Array<ManifestTypes> = [
 					{
 						alias: 'gridColumns',
 						label: 'Grid Columns',
-						description: 'Set the number of columns for the layout. (defaults to 12)',
+						description: 'Set the number of columns for the layout.',
 						propertyEditorUiAlias: 'Umb.PropertyEditorUi.Integer',
-						config: [{ alias: 'min', value: 0 }],
+						config: [
+							{ alias: 'min', value: 0 },
+							{ alias: 'placeholder', value: '12' },
+						],
 					},
 					{
 						alias: 'layoutStylesheet',

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-areas.element.ts

@@ -1,5 +1,5 @@
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, customElement, state, nothing } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry';
 import type { UmbPropertyEditorConfig } from '@umbraco-cms/backoffice/property-editor';
@@ -8,6 +8,9 @@ import { UMB_DATA_TYPE_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/data-ty
 @customElement('umb-block-grid-type-workspace-view-areas')
 export class UmbBlockGridTypeWorkspaceViewAreasElement extends UmbLitElement implements UmbWorkspaceViewElement {
 	//
+	@state()
+	_areaColumnsConfigurationObject?: UmbPropertyEditorConfig;
+
 	@state()
 	_areaConfigConfigurationObject?: UmbPropertyEditorConfig;
 
@@ -18,7 +21,8 @@ export class UmbBlockGridTypeWorkspaceViewAreasElement extends UmbLitElement imp
 			this.observe(
 				await context.propertyValueByAlias<undefined | string>('gridColumns'),
 				(value) => {
-					const dataTypeGridColumns = value ? parseInt(value, 10) : undefined;
+					const dataTypeGridColumns = value ? parseInt(value, 10) : 12;
+					this._areaColumnsConfigurationObject = [{ alias: 'placeholder', value: dataTypeGridColumns }];
 					this._areaConfigConfigurationObject = [{ alias: 'defaultAreaGridColumns', value: dataTypeGridColumns }];
 				},
 				'observeGridColumns',
@@ -27,21 +31,24 @@ export class UmbBlockGridTypeWorkspaceViewAreasElement extends UmbLitElement imp
 	}
 
 	render() {
-		return html`
-			<uui-box headline="Areas">
-				<umb-property
-					label=${this.localize.term('blockEditor_areasLayoutColumns')}
-					alias="areaGridColumns"
-					property-editor-ui-alias="Umb.PropertyEditorUi.Integer"></umb-property>
-				<umb-property
-					label=${this.localize.term('blockEditor_areasConfigurations')}
-					alias="areas"
-					property-editor-ui-alias="Umb.PropertyEditorUi.BlockGridAreasConfig"
-					.config=${this._areaConfigConfigurationObject}
-					>></umb-property
-				>
-			</uui-box>
-		`;
+		return this._areaConfigConfigurationObject
+			? html`
+					<uui-box headline="Areas">
+						<umb-property
+							label=${this.localize.term('blockEditor_areasLayoutColumns')}
+							alias="areaGridColumns"
+							property-editor-ui-alias="Umb.PropertyEditorUi.Integer"
+							.config=${this._areaColumnsConfigurationObject}></umb-property>
+						<umb-property
+							label=${this.localize.term('blockEditor_areasConfigurations')}
+							alias="areas"
+							property-editor-ui-alias="Umb.PropertyEditorUi.BlockGridAreasConfig"
+							.config=${this._areaConfigConfigurationObject}
+							>></umb-property
+						>
+					</uui-box>
+				`
+			: nothing;
 	}
 
 	static styles = [

src/Umbraco.Web.UI.Client/src/packages/property-editors/number/manifests.ts

@@ -14,7 +14,14 @@ export const manifests: Array<ManifestTypes> = [
 			icon: 'icon-autofill',
 			group: 'common',
 			settings: {
-				properties: [],
+				properties: [
+					{
+						alias: 'placeholder',
+						label: 'Placeholder text',
+						description: 'Enter the text to be displayed when the value is empty',
+						propertyEditorUiAlias: 'Umb.PropertyEditorUi.TextBox',
+					},
+				],
 				defaultData: [
 					{
 						alias: 'step',

src/Umbraco.Web.UI.Client/src/packages/property-editors/number/property-editor-ui-number.element.ts

@@ -18,11 +18,15 @@ export class UmbPropertyEditorUINumberElement extends UmbLitElement implements U
 	@state()
 	private _step?: number;
 
+	@state()
+	private _placeholder?: string;
+
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
 		if (!config) return;
 		this._min = this.#parseInt(config.getValueByAlias('min'));
 		this._max = this.#parseInt(config.getValueByAlias('max'));
 		this._step = this.#parseInt(config.getValueByAlias('step'));
+		this._placeholder = config.getValueByAlias('placeholder');
 	}
 
 	#parseInt(input: unknown): number | undefined {
@@ -42,7 +46,8 @@ export class UmbPropertyEditorUINumberElement extends UmbLitElement implements U
 				min=${ifDefined(this._min)}
 				max=${ifDefined(this._max)}
 				step=${ifDefined(this._step)}
-				.value=${this.value ?? 0}
+				placeholder=${ifDefined(this._placeholder)}
+				.value=${this.value ?? (this._placeholder ? undefined : 0)}
 				@input=${this.#onInput}>
 			</uui-input>
 		`;