diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/components/templating-item-menu/templating-item-menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/components/templating-item-menu/templating-item-menu.element.ts index 4ffa8cae20..b21e364421 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/components/templating-item-menu/templating-item-menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/components/templating-item-menu/templating-item-menu.element.ts @@ -9,7 +9,7 @@ import { getInsertDictionarySnippet, getInsertPartialSnippet } from '../../utils import { UmbDictionaryDetailRepository } from '@umbraco-cms/backoffice/dictionary'; import { customElement, property, css, html } from '@umbraco-cms/backoffice/external/lit'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import type { UmbModalManagerContext, UmbModalContext } from '@umbraco-cms/backoffice/modal'; +import type { UmbModalManagerContext } from '@umbraco-cms/backoffice/modal'; import { UMB_DICTIONARY_ITEM_PICKER_MODAL, UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; @@ -20,8 +20,6 @@ export class UmbTemplatingInsertMenuElement extends UmbLitElement { private _modalContext?: UmbModalManagerContext; - #openModal?: UmbModalContext; - #dictionaryDetailRepository = new UmbDictionaryDetailRepository(this); constructor() { diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/modals/templating-page-field-builder/templating-page-field-builder-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/modals/templating-page-field-builder/templating-page-field-builder-modal.element.ts index fa026ffe32..e930c3b981 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/modals/templating-page-field-builder/templating-page-field-builder-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/modals/templating-page-field-builder/templating-page-field-builder-modal.element.ts @@ -1,3 +1,4 @@ +import { getUmbracoFieldSnippet } from '../../utils/index.js'; import type { UmbTemplatingPageFieldBuilderModalData, UmbTemplatingPageFieldBuilderModalValue, @@ -16,7 +17,8 @@ export class UmbTemplatingPageFieldBuilderModalElement extends UmbModalBaseEleme } private _submit() { - this.value = { output: this.#generateOutput() }; + if (!this._field) return; + this.value = { output: getUmbracoFieldSnippet(this._field, this._default, this._recursive) }; this.modalContext?.submit(); } @@ -32,19 +34,6 @@ export class UmbTemplatingPageFieldBuilderModalElement extends UmbModalBaseEleme @state() private _recursive: boolean = false; - #generateOutput() { - if (!this._field) return ''; - if (this._default && !this._recursive) { - return `@Model.Value("${this._field}", fallback: Fallback.ToDefaultValue, defaultValue: new HtmlString("${this._default}"))`; - } else if (this._default && this._recursive) { - return `@Model.Value("${this._field}", fallback: Fallback.To(Fallback.Ancestors, Fallback.DefaultValue), defaultValue: new HtmlString("${this._default}"))`; - } else if (!this._default && this._recursive) { - return `@Model.Value("${this._field}", fallback: Fallback.ToAncestors)`; - } else { - return `@Model.Value("${this._field}")`; - } - } - render() { return html` @@ -74,7 +63,9 @@ export class UmbTemplatingPageFieldBuilderModalElement extends UmbModalBaseEleme ?disabled=${this._field ? false : true}> Output sample - ${this.#generateOutput()} + ${this._field ? getUmbracoFieldSnippet(this._field, this._default, this._recursive) : ''} { + /* @queryAll('umb-insert-section-checkbox') checkboxes!: NodeListOf; @@ -22,7 +24,8 @@ export class UmbTemplatingSectionPickerModalElement extends UmbModalBaseElement< @state() snippet = ''; - +*/ + /* #chooseSection(event: Event) { const target = event.target as UmbInsertSectionCheckboxElement; const checkboxes = Array.from(this.checkboxes); @@ -40,30 +43,129 @@ export class UmbTemplatingSectionPickerModalElement extends UmbModalBaseElement< }); } } + */ + /* firstUpdated() { this.selectedCheckbox = this.checkboxes[0]; } + */ - snippetMethods = [getRenderBodySnippet, getRenderSectionSnippet, getAddSectionSnippet]; + //snippetMethods = [getRenderBodySnippet, getRenderSectionSnippet, getAddSectionSnippet]; + + @state() + private _pickedSection?: TemplatingSectionType; #close() { this.modalContext?.reject(); } #submit() { + /* const value = this.selectedCheckbox?.snippet; if (this.selectedCheckbox?.validate()) { this.value = { value: value ?? '' }; this.modalContext?.submit(); } + */ } + render() { + return html` + + +
+ ${this.#renderRenderChildTemplate()} ${this.#renderRenderANamedSection()} + ${this.#renderDefineANamedSection()} +
+ + +
+ Close + Submit +
+ + `; + } + + #renderRenderChildTemplate() { + return html` (this._pickedSection = TemplatingSectionType.renderChildTemplate)} + look="placeholder"> + ${this._pickedSection === TemplatingSectionType.renderChildTemplate + ? html`` + : ''} +

Render Child Template

+

+ + Renders the contents of a child template, by inserting a @RenderBody() placeholder. + +

+ `; + } + + #renderRenderANamedSection() { + return html` (this._pickedSection = TemplatingSectionType.renderANamedSection)} + look="placeholder"> + ${this._pickedSection === TemplatingSectionType.renderANamedSection + ? html`` + : ''} +

Render a named section

+

+ + Renders a named area of a child template, by inserting a + @RenderSection(name) placeholder. This renders an area of a child template which is wrapped in a + corresponding @section [name]{ ... } definition. + +

+ ${this._pickedSection === TemplatingSectionType.renderANamedSection + ? html`
+ Section Name + + + + + If mandatory, the child template must contain a @section definition, otherwise an error is + shown. + + +
` + : ''} + `; + } + + #renderDefineANamedSection() { + return html` (this._pickedSection = TemplatingSectionType.defineANamedSection)} + look="placeholder"> + ${this._pickedSection === TemplatingSectionType.defineANamedSection + ? html`` + : ''} +

Define a named section

+

+ + Defines a part of your template as a named section by wrapping it in @section { ... }. This can + be rendered in a specific area of the parent of this template, by using @RenderSection. + +

+ `; + } + + /* render() { return html`
+ + +

Render Child Template

+ Renders the contents of a child template, by inserting a @RenderBody() placeholder. + `; } + */ static styles = [ UmbTextStyles, css` + /* :host { display: block; color: var(--uui-color-text); @@ -133,11 +237,35 @@ export class UmbTemplatingSectionPickerModalElement extends UmbModalBaseElement< #main umb-insert-section-checkbox:not(:last-of-type) { margin-bottom: var(--uui-size-space-5); } + */ + code { background-color: var(--uui-color-surface-alt); border: 1px solid var(--uui-color-border); border-radius: var(--uui-border-radius); } + + #main { + display: grid; + grid-gap: var(--uui-size-space-5); + } + + .section { + display: grid; + } + + uui-button { + text-align: left; + } + + uui-button p { + margin-top: 0; + } + + uui-input, + small { + margin-block: var(--uui-size-space-2) var(--uui-size-space-6); + } `, ]; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/types.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/types.ts index 30d70c464b..46069918b5 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/types.ts @@ -3,3 +3,9 @@ export enum CodeSnippetType { dictionaryItem = 'dictionaryItem', pageField = 'pageField', } + +export enum TemplatingSectionType { + renderChildTemplate = 'RenderChildTemplate', + renderANamedSection = 'RenderANamedSection', + defineANamedSection = 'DefineANamedSection', +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/utils/index.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/utils/index.ts index 57c84ea4bf..43446d5e20 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/utils/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/utils/index.ts @@ -45,7 +45,7 @@ export const getUmbracoFieldSnippet = (field: string, defaultValue: string | nul const value = `${field !== null ? `@Model.Value("${field}"` : ''}${ fallback !== null ? `, fallback: ${fallback}` : '' - }${defaultValue !== null ? `, defaultValue: new HtmlString("${defaultValue}")` : ''}${field ? ')' : ''}`; + }${defaultValue !== null ? `, defaultValue: new HtmlString("${defaultValue}")` : ''}${field ? ')' : ')'}`; return value; };