make property editor config element use workspace

This commit is contained in:
Niels Lyngsø
2023-12-01 16:45:37 +01:00
parent abe3aa41e0
commit 95aac3f848

View File

@@ -1,9 +1,9 @@
import { html, customElement, state, ifDefined, repeat, nothing } from '@umbraco-cms/backoffice/external/lit';
import { UMB_DATA_TYPE_WORKSPACE_CONTEXT } from '../../workspace/data-type-workspace.context.js';
import { html, customElement, state, ifDefined, repeat } from '@umbraco-cms/backoffice/external/lit';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { PropertyEditorConfigProperty } from '@umbraco-cms/backoffice/extension-registry';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import { UMB_DATA_TYPE_VARIANT_CONTEXT } from '@umbraco-cms/backoffice/data-type';
/**
* @element umb-property-editor-config
@@ -13,7 +13,7 @@ import { UMB_DATA_TYPE_VARIANT_CONTEXT } from '@umbraco-cms/backoffice/data-type
@customElement('umb-property-editor-config')
export class UmbPropertyEditorConfigElement extends UmbLitElement {
// TODO: Make this element generic, so its not bound to DATA-TYPEs. This will require moving some functionality of Data-Type-Context to this. and this might need to self provide a variant Context for its inner property editor UIs.
#variantContext?: typeof UMB_DATA_TYPE_VARIANT_CONTEXT.TYPE;
#workspaceContext?: typeof UMB_DATA_TYPE_WORKSPACE_CONTEXT.TYPE;
@state()
private _properties: Array<PropertyEditorConfigProperty> = [];
@@ -21,16 +21,17 @@ export class UmbPropertyEditorConfigElement extends UmbLitElement {
constructor() {
super();
this.consumeContext(UMB_DATA_TYPE_VARIANT_CONTEXT, (instance) => {
this.#variantContext = instance;
// This now connects to the workspace, as the variant does not know about the layout details.
this.consumeContext(UMB_DATA_TYPE_WORKSPACE_CONTEXT, (instance) => {
this.#workspaceContext = instance;
this.#observeProperties();
});
}
#observeProperties() {
if (!this.#variantContext) return;
if (!this.#workspaceContext) return;
this.observe(
this.#variantContext.properties,
this.#workspaceContext.properties,
(properties) => {
this._properties = properties as Array<PropertyEditorConfigProperty>;
},