yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

block grid block element

Browse Source
This commit is contained in:
Niels Lyngsø
2024-02-09 15:21:58 +01:00
parent 721178d151
commit 733bc48fab
5 changed files with 58 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block/block-grid-block.element.ts
View File

@@ -3,8 +3,6 @@ import { html, css, customElement, property, state } from '@umbraco-cms/backoffi
import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import type { UmbBlockGridLayoutModel } from '@umbraco-cms/backoffice/block';
import '../ref-list-block/index.js';
import '../inline-list-block/index.js';
/**
* @element umb-property-editor-ui-block-grid-block

1
src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/ref-grid-block/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './ref-grid-block.element.js';

51
src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/ref-grid-block/ref-grid-block.element.ts Normal file
View File

@@ -0,0 +1,51 @@
import { UMB_BLOCK_ENTRY_CONTEXT } from '@umbraco-cms/backoffice/block';
import { css, customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
/**
* @element umb-ref-grid-block
*/
@customElement('umb-ref-grid-block')
export class UmbRefGridBlockElement extends UmbLitElement {
//
@property({ type: String })
label?: string;
@state()
_workspaceEditPath?: string;
constructor() {
super();
this.consumeContext(UMB_BLOCK_ENTRY_CONTEXT, (context) => {
this.observe(
context.workspaceEditPath,
(workspaceEditPath) => {
this._workspaceEditPath = workspaceEditPath;
},
'observeWorkspaceEditPath',
);
});
}
render() {
// href=${this._workspaceEditPath ?? '#'}
return html`<uui-ref-node standalone .name=${this.label ?? ''}></uui-ref-node>`;
}
static styles = [
css`
uui-ref-node {
min-height: var(--uui-size-16);
}
`,
];
}
export default UmbRefGridBlockElement;
declare global {
interface HTMLElementTagNameMap {
'umb-ref-grid-block': UmbRefGridBlockElement;
}
}

5
src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid-entries.element.ts
View File

@@ -3,6 +3,7 @@ import type { UmbBlockGridLayoutModel } from '@umbraco-cms/backoffice/block';
import { html, customElement, state, repeat, css, property } from '@umbraco-cms/backoffice/external/lit';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import '../../components/block-grid-block/block-grid-block.element.js';
/**
* @element umb-property-editor-ui-block-grid-entries
@@ -43,8 +44,8 @@ export class UmbPropertyEditorUIBlockGridEntriesElement extends UmbLitElement {
(layoutEntry, index) =>
html`<uui-button-inline-create
href=${this.#context.getPathForCreateBlock(index) ?? ''}></uui-button-inline-create>
<umb-property-editor-ui-block-list-block data-udi=${layoutEntry.contentUdi} .layout=${layoutEntry}>
</umb-property-editor-ui-block-list-block>`,
<umb-property-editor-ui-block-grid-block data-udi=${layoutEntry.contentUdi} .layout=${layoutEntry}>
</umb-property-editor-ui-block-grid-block>`,
)}
<uui-button-group>
<uui-button

5
src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/ref-list-block/ref-list-block.element.ts
View File

@@ -1,4 +1,4 @@
import { UMB_BLOCK_LIST_ENTRY_CONTEXT } from '../../context/block-list-entry.context-token.js';
import { UMB_BLOCK_ENTRY_CONTEXT } from '@umbraco-cms/backoffice/block';
import { css, customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
@@ -17,7 +17,8 @@ export class UmbRefListBlockElement extends UmbLitElement {
constructor() {
super();
this.consumeContext(UMB_BLOCK_LIST_ENTRY_CONTEXT, (context) => {
// UMB_BLOCK_LIST_ENTRY_CONTEXT
this.consumeContext(UMB_BLOCK_ENTRY_CONTEXT, (context) => {
this.observe(
context.workspaceEditPath,
(workspaceEditPath) => {