From 1bf9657bfe87cc2db6be5a47d119f2ca0579aff4 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 8 Mar 2023 15:11:09 +0100 Subject: [PATCH] register confirm modal --- .../libs/modal/modal.context.ts | 6 +++--- .../modals/confirm/confirm-modal.element.ts | 14 +++++--------- .../modals/confirm/confirm-modal.stories.ts | 7 ++++--- .../backoffice/shared/modals/confirm/index.ts | 13 +++++++++++++ .../src/backoffice/shared/modals/manifests.ts | 18 ++++++++++++------ 5 files changed, 37 insertions(+), 21 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/confirm/index.ts diff --git a/src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts b/src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts index 4d53904b29..99a1002a5a 100644 --- a/src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts +++ b/src/Umbraco.Web.UI.Client/libs/modal/modal.context.ts @@ -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 '../../src/backoffice/shared/modals/confirm/confirm-modal.element'; +import type { UmbConfirmModalData } from '../../src/backoffice/shared/modals/confirm'; 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'; @@ -50,11 +50,11 @@ export class UmbModalContext { /** * Opens a Confirm modal * @public - * @param {UmbModalConfirmData} data + * @param {UmbConfirmModalData} data * @return {*} {UmbModalHandler} * @memberof UmbModalContext */ - public confirm(data: UmbModalConfirmData): UmbModalHandler { + public confirm(data: UmbConfirmModalData): UmbModalHandler { return this.open('umb-modal-layout-confirm', { data, type: 'dialog' }); } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/confirm/confirm-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/confirm/confirm-modal.element.ts index 7ddca1575e..a3c1892eb4 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/confirm/confirm-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/confirm/confirm-modal.element.ts @@ -1,17 +1,11 @@ -import { html, TemplateResult } from 'lit'; +import { html } from 'lit'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { customElement } from 'lit/decorators.js'; import { UmbModalLayoutElement } from '../../../../../libs/modal/layouts/modal-layout.element'; - -export interface UmbModalConfirmData { - headline: string; - content: TemplateResult | string; - color?: 'positive' | 'danger'; - confirmLabel?: string; -} +import { UmbConfirmModalData } from '.'; @customElement('umb-confirm-modal') -export class UmbConfirmModalElement extends UmbModalLayoutElement { +export class UmbConfirmModalElement extends UmbModalLayoutElement { static styles = [UUITextStyles]; private _handleConfirm() { @@ -40,6 +34,8 @@ export class UmbConfirmModalElement extends UmbModalLayoutElementThis example and all content items underneath and thereby making their content publicly available.`, @@ -25,7 +26,7 @@ export const Positive: Story = () => html` `; -const dangerData: UmbModalConfirmData = { +const dangerData: UmbConfirmModalData = { color: 'danger', headline: 'Delete', content: html`Delete This example and all items underneath.`, diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/confirm/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/confirm/index.ts new file mode 100644 index 0000000000..89bf529cc9 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/confirm/index.ts @@ -0,0 +1,13 @@ +import type { TemplateResult } from 'lit'; +import { UmbModalToken } from '@umbraco-cms/modal'; + +export interface UmbConfirmModalData { + headline: string; + content: TemplateResult | string; + color?: 'positive' | 'danger'; + confirmLabel?: string; +} + +export const UMB_CONFIRM_MODAL_TOKEN = new UmbModalToken('Umb.Modal.Confirm', { + type: 'dialog', +}); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/manifests.ts index e915079b9e..52837950b0 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/manifests.ts @@ -1,6 +1,18 @@ import type { ManifestModal } from '@umbraco-cms/extensions-registry'; const modals: Array = [ + { + type: 'modal', + alias: 'Umb.Modal.Basic', + name: 'Basic Modal', + loader: () => import('./basic/basic-modal.element'), + }, + { + type: 'modal', + alias: 'Umb.Modal.Confirm', + name: 'Confirm Modal', + loader: () => import('./confirm/confirm-modal.element'), + }, { type: 'modal', alias: 'Umb.Modal.IconPicker', @@ -13,12 +25,6 @@ const modals: Array = [ name: 'Link Picker Modal', loader: () => import('./link-picker/link-picker-modal.element'), }, - { - type: 'modal', - alias: 'Umb.Modal.Basic', - name: 'Basic Modal', - loader: () => import('./basic/basic-modal.element'), - }, ]; export const manifests = [...modals];