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

rename confirm modal files

Browse Source
This commit is contained in:
Mads Rasmussen
2023-03-08 15:01:02 +01:00
parent e99c0c1e8d
commit 3d700a1d47
3 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/Umbraco.Web.UI.Client/libs/modal/layouts/confirm/modal-layout-confirm.element.ts
View File

@@ -1,47 +0,0 @@
import { html, TemplateResult } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement } from 'lit/decorators.js';
import { UmbModalLayoutElement } from '../modal-layout.element';
export interface UmbModalConfirmData {
headline: string;
content: TemplateResult | string;
color?: 'positive' | 'danger';
confirmLabel?: string;
}
@customElement('umb-modal-layout-confirm')
export class UmbModalLayoutConfirmElement extends UmbModalLayoutElement<UmbModalConfirmData> {
static styles = [UUITextStyles];
private _handleConfirm() {
this.modalHandler?.close({ confirmed: true });
}
private _handleCancel() {
this.modalHandler?.close({ confirmed: false });
}
render() {
return html`
<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>
<uui-button
slot="actions"
id="confirm"
color="${this.data?.color || 'positive'}"
look="primary"
label="${this.data?.confirmLabel || 'Confirm'}"
@click=${this._handleConfirm}></uui-button>
</uui-dialog-layout>
`;
}
}
declare global {
interface HTMLElementTagNameMap {
'umb-modal-layout-confirm': UmbModalLayoutConfirmElement;
}
}

40
src/Umbraco.Web.UI.Client/libs/modal/layouts/confirm/modal-layout-confirm.stories.ts
View File

@@ -1,40 +0,0 @@
import './modal-layout-confirm.element';
import { Meta, Story } from '@storybook/web-components';
import { html } from 'lit';
import type { UmbModalLayoutConfirmElement, UmbModalConfirmData } from './modal-layout-confirm.element';
export default {
title: 'API/Modals/Layouts/Confirm',
component: 'umb-modal-layout-confirm',
id: 'modal-layout-confirm',
} as Meta;
const positiveData: UmbModalConfirmData = {
headline: 'Publish with descendants',
content: html`Publish <b>This example</b> and all content items underneath and thereby making their content publicly
available.`,
confirmLabel: 'Publish',
};
export const Positive: Story<UmbModalLayoutConfirmElement> = () => html`
<!-- TODO: figure out if generics are allowed for properties:
https://github.com/runem/lit-analyzer/issues/149
https://github.com/runem/lit-analyzer/issues/163 -->
<umb-modal-layout-confirm .data=${positiveData as any}></umb-modal-layout-confirm>
`;
const dangerData: UmbModalConfirmData = {
color: 'danger',
headline: 'Delete',
content: html`Delete <b>This example</b> and all items underneath.`,
confirmLabel: 'Delete',
};
export const Danger: Story<UmbModalLayoutConfirmElement> = () => html`
<!-- TODO: figure out if generics are allowed for properties:
https://github.com/runem/lit-analyzer/issues/149
https://github.com/runem/lit-analyzer/issues/163 -->
<umb-modal-layout-confirm .data=${dangerData as any}></umb-modal-layout-confirm>
`;

4
src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts
View File

@@ -1,5 +1,5 @@
// TODO: lazy load
import './layouts/confirm/modal-layout-confirm.element';
import '../../src/backoffice/shared/modals/confirm/confirm-modal.element';
import '../../src/backoffice/documents/documents/modals/document-picker/document-picker-modal.element';
import '../../src/backoffice/media/media/modals/media-picker/media-picker-modal.element';
import './layouts/property-editor-ui-picker/modal-layout-property-editor-ui-picker.element';
@@ -19,7 +19,7 @@ import { UmbIconPickerModalData } from '../../src/backoffice/shared/modals/icon-
import { UmbMediaPickerModalData } from '../../src/backoffice/media/media/modals/media-picker';
import type { UmbBasicModalData } from '../../src/backoffice/shared/modals/basic';
import type { UmbLinkPickerModalData } from '../../src/backoffice/shared/modals/link-picker';
import type { UmbModalConfirmData } from './layouts/confirm/modal-layout-confirm.element';
import type { UmbModalConfirmData } from '../../src/backoffice/shared/modals/confirm/confirm-modal.element';
import type { UmbModalPropertyEditorUIPickerData } from './layouts/property-editor-ui-picker/modal-layout-property-editor-ui-picker.element';
import { UmbModalHandler } from './modal-handler';
import { UmbPickerModalData } from './layouts/modal-layout-picker-base';