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

register property editor ui picker

Browse Source
This commit is contained in:
Mads Rasmussen
2023-03-08 20:21:47 +01:00
parent 3ee3fdff8d
commit 3043c4f67b
8 changed files with 44 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,11 +1,8 @@
import '../../src/backoffice/shared/property-editors/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element';
import '../../src/backoffice/settings/languages/modals/language-picker/language-picker-modal.element';
import './layouts/search/modal-layout-search.element';
import { UUIModalSidebarSize } from '@umbraco-ui/uui-modal-sidebar';
import { BehaviorSubject } from 'rxjs';
import type { UUIModalDialogElement } from '@umbraco-ui/uui-modal-dialog';
import type { UmbModalPropertyEditorUIPickerData } from '../../src/backoffice/shared/property-editors/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element';
import { UmbModalHandler } from './modal-handler';
import type { UmbModalToken } from './token/modal-token';
import { UmbContextToken } from '@umbraco-cms/context-api';
@@ -30,17 +27,6 @@ export class UmbModalContext {
this.host = host;
}
/**
* Opens a Property Editor UI sidebar modal
* @public
* @param {UmbModalPropertyEditorUIPickerData} [data]
* @return {*} {UmbModalHandler}
* @memberof UmbModalContext
*/
public propertyEditorUIPicker(data?: UmbModalPropertyEditorUIPickerData): UmbModalHandler {
return this.open('umb-modal-layout-property-editor-ui-picker', { data, type: 'sidebar', size: 'small' });
}
public search(): UmbModalHandler {
const modalHandler = new UmbModalHandler('umb-modal-layout-search');

3
src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/views/edit/data-type-workspace-view-edit.element.ts
View File

@@ -9,6 +9,7 @@ import { umbExtensionsRegistry } from '@umbraco-cms/extensions-api';
import '../../../../../shared/property-editors/shared/property-editor-config/property-editor-config.element';
import '../../../../../shared/components/ref-property-editor-ui/ref-property-editor-ui.element';
import { UMB_PROPERTY_EDITOR_UI_PICKER_MODAL_TOKEN } from 'src/backoffice/shared/property-editors/modals/property-editor-ui-picker';
@customElement('umb-data-type-workspace-view-edit')
export class UmbDataTypeWorkspaceViewEditElement extends UmbLitElement {
@@ -100,7 +101,7 @@ export class UmbDataTypeWorkspaceViewEditElement extends UmbLitElement {
private _openPropertyEditorUIPicker() {
if (!this._dataType) return;
const modalHandler = this._modalContext?.propertyEditorUIPicker({
const modalHandler = this._modalContext?.open(UMB_PROPERTY_EDITOR_UI_PICKER_MODAL_TOKEN, {
selection: this._propertyEditorUiAlias ? [this._propertyEditorUiAlias] : [],
});

6
src/Umbraco.Web.UI.Client/src/backoffice/shared/index.ts
View File

@@ -1,8 +1,7 @@
import './components';
import { manifests as propertyActionManifests } from './property-actions/manifests';
import { manifests as propertyEditorModelManifests } from './property-editors/models/manifests';
import { manifests as propertyEditorUIManifests } from './property-editors/uis/manifests';
import { manifests as propertyEditorManifests } from './property-editors/manifests';
import { manifests as collectionViewManifests } from './collection/views/manifests';
import { manifests as modalManifests } from './modals/manifests';
@@ -18,8 +17,7 @@ const registerExtensions = (manifests: Array<ManifestTypes>) => {
registerExtensions([
...propertyActionManifests,
...propertyEditorModelManifests,
...propertyEditorUIManifests,
...propertyEditorManifests,
...collectionViewManifests,
...modalManifests,
]);

5
src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/manifests.ts Normal file
View File

@@ -0,0 +1,5 @@
import { manifests as propertyEditorModelManifests } from './models/manifests';
import { manifests as propertyEditorUIManifests } from './uis/manifests';
import { manifests as modalManifests } from './modals/manifests';
export const manifests = [...propertyEditorModelManifests, ...propertyEditorUIManifests, ...modalManifests];

12
src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/manifests.ts Normal file
View File

@@ -0,0 +1,12 @@
import type { ManifestModal } from '@umbraco-cms/extensions-registry';
const modals: Array<ManifestModal> = [
{
type: 'modal',
alias: 'Umb.Modal.PropertyEditorUIPicker',
name: 'Property Editor UI Picker Modal',
loader: () => import('./property-editor-ui-picker/property-editor-ui-picker-modal.element'),
},
];
export const manifests = [...modals];

14
src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/property-editor-ui-picker/index.ts Normal file
View File

@@ -0,0 +1,14 @@
import { UmbModalToken } from '@umbraco-cms/modal';
export interface UmbPropertyEditorUIPickerModalData {
selection?: Array<string>;
submitLabel?: string;
}
export const UMB_PROPERTY_EDITOR_UI_PICKER_MODAL_TOKEN = new UmbModalToken<UmbPropertyEditorUIPickerModalData>(
'Umb.Modal.PropertyEditorUIPicker',
{
type: 'sidebar',
size: 'small',
}
);

8
src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts
View File

@@ -8,11 +8,7 @@ import type { UmbModalHandler } from '../../../../../../libs/modal/modal-handler
import type { ManifestPropertyEditorUI } from '@umbraco-cms/models';
import { umbExtensionsRegistry } from '@umbraco-cms/extensions-api';
import { UmbLitElement } from '@umbraco-cms/element';
export interface UmbModalPropertyEditorUIPickerData {
selection?: Array<string>;
submitLabel?: string;
}
import { UmbPropertyEditorUIPickerModalData } from '.';
interface GroupedPropertyEditorUIs {
[key: string]: Array<ManifestPropertyEditorUI>;
@@ -87,7 +83,7 @@ export class UmbPropertyEditorUIPickerModalElement extends UmbLitElement {
modalHandler?: UmbModalHandler;
@property({ type: Object })
data?: UmbModalPropertyEditorUIPickerData;
data?: UmbPropertyEditorUIPickerModalData;
@state()
private _groupedPropertyEditorUIs: GroupedPropertyEditorUIs = {};

16
src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/property-editor-ui-picker/property-editor-ui-picker-modal.stories.ts
View File

@@ -1,21 +1,19 @@
import { Meta, Story } from '@storybook/web-components';
import { html } from 'lit';
import type {
UmbPropertyEditorUIPickerModalElement,
UmbModalPropertyEditorUIPickerData,
} from './property-editor-ui-picker-modal.element';
import './property-editor-ui-picker-modal.element';
import type { UmbPropertyEditorUIPickerModalElement } from './property-editor-ui-picker-modal.element';
import type { UmbPropertyEditorUIPickerModalData } from './';
import './property-editor-ui-picker-modal.element';
import '../../../components/body-layout/body-layout.element';
export default {
title: 'API/Modals/Layouts/Property Editor UI Picker',
component: 'umb-modal-layout-property-editor-ui-picker',
id: 'modal-layout-property-editor-ui-picker',
component: 'umb-property-editor-ui-picker-modal',
id: 'umb-property-editor-ui-picker-modal',
} as Meta;
const data: UmbModalPropertyEditorUIPickerData = { selection: [] };
const data: UmbPropertyEditorUIPickerModalData = { selection: [] };
export const Overview: Story<UmbPropertyEditorUIPickerModalElement> = () => html`
<umb-modal-layout-property-editor-ui-picker .data=${data as any}></umb-modal-layout-property-editor-ui-picker>
<umb-property-editor-ui-picker-modal .data=${data as any}></umb-property-editor-ui-picker-modal>
`;