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

add umb-modal-layout base element

Browse Source
This commit is contained in:
Mads Rasmussen
2022-08-10 14:10:52 +02:00
parent ce272e0b80
commit 124969b69f
3 changed files with 27 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/confirm/modal-layout-confirm.element.ts
View File

@@ -1,7 +1,7 @@
import { html, LitElement, TemplateResult } from 'lit';
import { html, TemplateResult } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property } from 'lit/decorators.js';
import { UmbModalHandler } from '../../../modal';
import { customElement } from 'lit/decorators.js';
import { UmbModalLayoutElement } from '../modal-layout.element';
export interface UmbModalConfirmData {
headline: string;
@@ -11,15 +11,9 @@ export interface UmbModalConfirmData {
}
@customElement('umb-modal-layout-confirm')
export class UmbModalLayoutConfirmElement extends LitElement {
export class UmbModalLayoutConfirmElement extends UmbModalLayoutElement<UmbModalConfirmData> {
static styles = [UUITextStyles];
@property({ attribute: false })
modalHandler?: UmbModalHandler;
@property({ type: Object })
data?: UmbModalConfirmData;
private _handleConfirm() {
this.modalHandler?.close({ confirmed: true });
}
@@ -30,7 +24,7 @@ export class UmbModalLayoutConfirmElement extends LitElement {
render() {
return html`
<uui-dialog-layout class="uui-text" .headline=${this.data?.headline}>
<uui-dialog-layout class="uui-text" .headline=${this.data?.headline || null}>
${this.data?.content}
<uui-button slot="actions" id="cancel" label="Cancel" @click="${this._handleCancel}">Cancel</uui-button>

14
src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/content-picker/modal-layout-content-picker.element.ts
View File

@@ -1,14 +1,14 @@
import { css, html, LitElement } from 'lit';
import { css, html } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property, state } from 'lit/decorators.js';
import { UmbModalHandler } from '../../../modal';
import { customElement, state } from 'lit/decorators.js';
import { UmbModalLayoutElement } from '../modal-layout.element';
export interface UmbModalContentPickerData {
multiple: boolean;
}
@customElement('umb-modal-layout-content-picker')
export class UmbModalLayoutContentPickerElement extends LitElement {
export class UmbModalLayoutContentPickerElement extends UmbModalLayoutElement<UmbModalContentPickerData> {
static styles = [
UUITextStyles,
css`
@@ -44,12 +44,6 @@ export class UmbModalLayoutContentPickerElement extends LitElement {
`,
];
@property({ attribute: false })
modalHandler?: UmbModalHandler;
@property({ type: Object })
data?: UmbModalContentPickerData;
private _tempContent = [
{
id: 1,

18
src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/modal-layout.element.ts Normal file
View File

@@ -0,0 +1,18 @@
import { LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { UmbModalHandler } from '../../modal';
@customElement('umb-modal-layout')
export class UmbModalLayoutElement<UmbModalData> extends LitElement {
@property({ attribute: false })
modalHandler?: UmbModalHandler;
@property({ type: Object })
data?: UmbModalData;
}
declare global {
interface HTMLElementTagNameMap {
'umb-modal-layout': UmbModalLayoutElement<unknown>;
}
}