config ui

This commit is contained in:
Nathan Woulfe
2023-03-06 16:13:16 +10:00
parent 95bc5f9017
commit 6c2a566016
20 changed files with 453 additions and 86 deletions

View File

@@ -0,0 +1,28 @@
import { html } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property } from 'lit/decorators.js';
import { UmbLitElement } from '@umbraco-cms/element';
/**
* @element umb-property-editor-ui-tiny-mce-dimensions-configuration
*/
@customElement('umb-property-editor-ui-tiny-mce-dimensions-configuration')
export class UmbPropertyEditorUITinyMceDimensionsConfigurationElement extends UmbLitElement {
static styles = [UUITextStyles];
@property()
value: { width?: number; height?: number } = {};
render() {
return html`<uui-input type="number" placeholder="Width" .value=${this.value.width}></uui-input> x
<uui-input type="number" placeholder="Height" .value=${this.value.height}></uui-input> pixels`;
}
}
export default UmbPropertyEditorUITinyMceDimensionsConfigurationElement;
declare global {
interface HTMLElementTagNameMap {
'umb-property-editor-ui-tiny-mce-dimensions-configuration': UmbPropertyEditorUITinyMceDimensionsConfigurationElement;
}
}

View File

@@ -0,0 +1,15 @@
import { Meta, Story } from '@storybook/web-components';
import { html } from 'lit-html';
import type { UmbPropertyEditorUITinyMceDimensionsConfigurationElement } from './property-editor-ui-tiny-mce-dimensions-configuration.element';
import './property-editor-ui-tiny-mce-dimensions-configuration.element';
export default {
title: 'Property Editor UIs/Tiny Mce Dimensions Configuration',
component: 'umb-property-eDitor-ui-tiny-mce-dimensions-configuration',
id: 'umb-property-editor-ui-tiny-mce-dimensions-configuration',
} as Meta;
export const AAAOverview: Story<UmbPropertyEditorUITinyMceDimensionsConfigurationElement> = () =>
html`<umb-property-editor-ui-tiny-mce-dimensions-configuration></umb-property-editor-ui-tiny-mce-dimensions-configuration>`;
AAAOverview.storyName = 'Overview';

View File

@@ -0,0 +1,21 @@
import { expect, fixture, html } from '@open-wc/testing';
import { UmbPropertyEditorUITinyMceDimensionsConfigurationElement } from './property-editor-ui-tiny-mce-dimensions-configuration.element';
import { defaultA11yConfig } from '@umbraco-cms/test-utils';
describe('UmbPropertyEditorUITinyMceDimensionsConfigurationElement', () => {
let element: UmbPropertyEditorUITinyMceDimensionsConfigurationElement;
beforeEach(async () => {
element = await fixture(
html` <umb-property-editor-ui-tiny-mce-dimensions-configuration></umb-property-editor-ui-tiny-mce-dimensions-configuration> `
);
});
it('is defined with its own instance', () => {
expect(element).to.be.instanceOf(UmbPropertyEditorUITinyMceDimensionsConfigurationElement);
});
it('passes the a11y audit', async () => {
await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
});
});

View File

@@ -1,14 +1,66 @@
import type { ManifestPropertyEditorUI } from '@umbraco-cms/models';
export const manifest: ManifestPropertyEditorUI = {
type: 'propertyEditorUI',
alias: 'Umb.PropertyEditorUI.TinyMCE',
name: 'TinyMCE Property Editor UI',
loader: () => import('./property-editor-ui-tiny-mce-configuration.element'),
meta: {
label: 'Rich Text Editor Configuration',
propertyEditorModel: 'Umbraco.TinyMCE.Configuration',
icon: 'umb:autofill',
group: 'common',
const configurationManifests: Array<ManifestPropertyEditorUI> = [
{
type: 'propertyEditorUI',
alias: 'Umb.PropertyEditorUI.TinyMCE.ToolbarConfiguration',
name: 'TinyMCE Toolbar Property Editor UI',
loader: () => import('./toolbar/property-editor-ui-tiny-mce-toolbar-configuration.element'),
meta: {
label: 'TinyMCE Toolbar Configuration',
propertyEditorModel: 'Umbraco.TinyMCE.Configuration',
icon: 'umb:autofill',
group: 'common',
},
},
};
{
type: 'propertyEditorUI',
alias: 'Umb.PropertyEditorUI.TinyMCE.StylesheetsConfiguration',
name: 'TinyMCE Stylesheets Property Editor UI',
loader: () => import('./stylesheets/property-editor-ui-tiny-mce-stylesheets-configuration.element'),
meta: {
label: 'TinyMCE Stylesheets Configuration',
propertyEditorModel: 'Umbraco.TinyMCE.Configuration',
icon: 'umb:autofill',
group: 'common',
},
},
{
type: 'propertyEditorUI',
alias: 'Umb.PropertyEditorUI.TinyMCE.DimensionsConfiguration',
name: 'TinyMCE Dimensions Property Editor UI',
loader: () => import('./dimensions/property-editor-ui-tiny-mce-dimensions-configuration.element'),
meta: {
label: 'TinyMCE Dimensions Configuration',
propertyEditorModel: 'Umbraco.TinyMCE.Configuration',
icon: 'umb:autofill',
group: 'common',
},
},
{
type: 'propertyEditorUI',
alias: 'Umb.PropertyEditorUI.TinyMCE.MaxImageSizeConfiguration',
name: 'TinyMCE Max Image Size Property Editor UI',
loader: () => import('./max-image-size/property-editor-ui-tiny-mce-maximagesize-configuration.element'),
meta: {
label: 'TinyMCE Max Image Size Configuration',
propertyEditorModel: 'Umbraco.TinyMCE.Configuration',
icon: 'umb:autofill',
group: 'common',
},
},
{
type: 'propertyEditorUI',
alias: 'Umb.PropertyEditorUI.TinyMCE.ModeConfiguration',
name: 'TinyMCE Mode Property Editor UI',
loader: () => import('./mode/property-editor-ui-tiny-mce-mode-configuration.element'),
meta: {
label: 'TinyMCE Mode Configuration',
propertyEditorModel: 'Umbraco.TinyMCE.Configuration',
icon: 'umb:autofill',
group: 'common',
},
},
];
export const manifests = [...configurationManifests];

View File

@@ -0,0 +1,27 @@
import { html } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property } from 'lit/decorators.js';
import { UmbLitElement } from '@umbraco-cms/element';
/**
* @element umb-property-editor-ui-tiny-mce-maximagesize-configuration
*/
@customElement('umb-property-editor-ui-tiny-mce-maximagesize-configuration')
export class UmbPropertyEditorUITinyMceMaxImageSizeConfigurationElement extends UmbLitElement {
static styles = [UUITextStyles];
@property()
value?: number;
render() {
return html`<uui-input type="number" placeholder="Max size" .value=${this.value}></uui-input>`;
}
}
export default UmbPropertyEditorUITinyMceMaxImageSizeConfigurationElement;
declare global {
interface HTMLElementTagNameMap {
'umb-property-editor-ui-tiny-mce-maximagesize-configuration': UmbPropertyEditorUITinyMceMaxImageSizeConfigurationElement;
}
}

View File

@@ -0,0 +1,15 @@
import { Meta, Story } from '@storybook/web-components';
import { html } from 'lit-html';
import type { UmbPropertyEditorUITinyMceMaxImageSizeConfigurationElement } from './property-editor-ui-tiny-mce-maximagesize-configuration.element';
import './property-editor-ui-tiny-mce-maximagesize-configuration.element';
export default {
title: 'Property Editor UIs/Tiny Mce Max Image Size Configuration',
component: 'umb-property-eDitor-ui-tiny-mce-maximagesize-configuration',
id: 'umb-property-editor-ui-tiny-mce-maximagesize-configuration',
} as Meta;
export const AAAOverview: Story<UmbPropertyEditorUITinyMceMaxImageSizeConfigurationElement> = () =>
html`<umb-property-editor-ui-tiny-mce-maximagesize-configuration></umb-property-editor-ui-tiny-mce-maximagesize-configuration>`;
AAAOverview.storyName = 'Overview';

View File

@@ -0,0 +1,21 @@
import { expect, fixture, html } from '@open-wc/testing';
import { UmbPropertyEditorUITinyMceMaxImageSizeConfigurationElement } from './property-editor-ui-tiny-mce-maximagesize-configuration.element';
import { defaultA11yConfig } from '@umbraco-cms/test-utils';
describe('UmbPropertyEditorUITinyMceMaxImSizeConfigurationElement', () => {
let element: UmbPropertyEditorUITinyMceMaxImageSizeConfigurationElement;
beforeEach(async () => {
element = await fixture(
html` <umb-property-editor-ui-tiny-mce-maximagesize-configuration></umb-property-editor-ui-tiny-mce-maximagesize-configuration> `
);
});
it('is defined with its own instance', () => {
expect(element).to.be.instanceOf(UmbPropertyEditorUITinyMceMaxImageSizeConfigurationElement);
});
it('passes the a11y audit', async () => {
await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
});
});

View File

@@ -0,0 +1,72 @@
import { css, html } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property } from 'lit/decorators.js';
import { UUISelectEvent } from '@umbraco-ui/uui';
import { UmbLitElement } from '@umbraco-cms/element';
/**
* @element umb-property-editor-ui-tiny-mce-mode-configuration
*/
@customElement('umb-property-editor-ui-tiny-mce-mode-configuration')
export class UmbPropertyEditorUITinyMceModeConfigurationElement extends UmbLitElement {
static styles = [
UUITextStyles,
css`
:host {
display:block;
width:220px;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
uui-select {
max-width:220px;
}
`,
];
@property({ type: String })
value = '';
@property({ type: Array, attribute: false })
public config = [];
options: Array<Option> = [
{
value: 'classic',
name: 'Classic',
},
{
value: 'inline',
name: 'Inline',
},
];
connectedCallback(): void {
super.connectedCallback();
this.options.forEach((o) => {
o.selected = this.value === o.value;
});
}
#onChange(event: UUISelectEvent) {
this.value = event.target.value.toString();
}
render() {
return html`<uui-select .options=${this.options} @change=${this.#onChange}></uui-select>`;
}
}
export default UmbPropertyEditorUITinyMceModeConfigurationElement;
declare global {
interface HTMLElementTagNameMap {
'umb-property-editor-ui-tiny-mce-mode-configuration': UmbPropertyEditorUITinyMceModeConfigurationElement;
}
}

View File

@@ -0,0 +1,15 @@
import { Meta, Story } from '@storybook/web-components';
import { html } from 'lit-html';
import type { UmbPropertyEditorUITinyMceModeConfigurationElement } from './property-editor-ui-tiny-mce-mode-configuration.element';
import './property-editor-ui-tiny-mce-mode-configuration.element';
export default {
title: 'Property Editor UIs/Tiny Mce Mode Configuration',
component: 'umb-property-editor-ui-tiny-mce-mode-configuration',
id: 'umb-property-editor-ui-tiny-mce-mode-configuration',
} as Meta;
export const AAAOverview: Story<UmbPropertyEditorUITinyMceModeConfigurationElement> = () =>
html`<umb-property-editor-ui-tiny-mce-mode-configuration></umb-property-editor-ui-tiny-mce-mode-configuration>`;
AAAOverview.storyName = 'Overview';

View File

@@ -0,0 +1,21 @@
import { expect, fixture, html } from '@open-wc/testing';
import { UmbPropertyEditorUITinyMceModeConfigurationElement } from './property-editor-ui-tiny-mce-mode-configuration.element';
import { defaultA11yConfig } from '@umbraco-cms/test-utils';
describe('UmbPropertyEditorUITinyMceModeConfigurationElement', () => {
let element: UmbPropertyEditorUITinyMceModeConfigurationElement;
beforeEach(async () => {
element = await fixture(
html` <umb-property-editor-ui-tiny-mce-mode-configuration></umb-property-editor-ui-tiny-mce-mode-configuration> `
);
});
it('is defined with its own instance', () => {
expect(element).to.be.instanceOf(UmbPropertyEditorUITinyMceModeConfigurationElement);
});
it('passes the a11y audit', async () => {
await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
});
});

View File

@@ -1,30 +0,0 @@
import { html } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property } from 'lit/decorators.js';
import { UmbLitElement } from '@umbraco-cms/element';
/**
* @element umb-property-editor-ui-tiny-mce-configuration
*/
@customElement('umb-property-editor-ui-tiny-mce-configuration')
export class UmbPropertyEditorUITinyMceConfigurationElement extends UmbLitElement {
static styles = [UUITextStyles];
@property()
value = '';
@property({ type: Array, attribute: false })
public config = [];
render() {
return html`<div>umb-property-editor-ui-tiny-mce-configuration</div>`;
}
}
export default UmbPropertyEditorUITinyMceConfigurationElement;
declare global {
interface HTMLElementTagNameMap {
'umb-property-editor-ui-tiny-mce-configuration': UmbPropertyEditorUITinyMceConfigurationElement;
}
}

View File

@@ -1,15 +0,0 @@
import { Meta, Story } from '@storybook/web-components';
import { html } from 'lit-html';
import type { UmbPropertyEditorUITinyMceConfigurationElement } from './property-editor-ui-tiny-mce-configuration.element';
import './property-editor-ui-tiny-mce-configuration.element';
export default {
title: 'Property Editor UIs/Tiny Mce Configuration',
component: 'umb-property-editor-ui-tiny-mce-configuration',
id: 'umb-property-editor-ui-tiny-mce-configuration',
} as Meta;
export const AAAOverview: Story<UmbPropertyEditorUITinyMceConfigurationElement> = () =>
html`<umb-property-editor-ui-tiny-mce-configuration></umb-property-editor-ui-tiny-mce-configuration>`;
AAAOverview.storyName = 'Overview';

View File

@@ -1,21 +0,0 @@
import { expect, fixture, html } from '@open-wc/testing';
import { UmbPropertyEditorUITinyMceConfigurationElement } from './property-editor-ui-tiny-mce-configuration.element';
import { defaultA11yConfig } from '@umbraco-cms/test-utils';
describe('UmbPropertyEditorUITinyMceConfigurationElement', () => {
let element: UmbPropertyEditorUITinyMceConfigurationElement;
beforeEach(async () => {
element = await fixture(
html` <umb-property-editor-ui-tiny-mce-configuration></umb-property-editor-ui-tiny-mce-configuration> `
);
});
it('is defined with its own instance', () => {
expect(element).to.be.instanceOf(UmbPropertyEditorUITinyMceConfigurationElement);
});
it('passes the a11y audit', async () => {
await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
});
});

View File

@@ -0,0 +1,40 @@
import { css, html } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property } from 'lit/decorators.js';
import { UmbLitElement } from '@umbraco-cms/element';
/**
* @element umb-property-editor-ui-tiny-mce-stylesheets-configuration
*/
@customElement('umb-property-editor-ui-tiny-mce-stylesheets-configuration')
export class UmbPropertyEditorUITinyMceStylesheetsConfigurationElement extends UmbLitElement {
static styles = [
UUITextStyles,
css`
ul {
list-style: none;
padding: 0;
margin:0;
}
`,
];
@property()
value: string[] = [];
@property({ type: Array, attribute: false })
public config = [];
render() {
return html`<ul>
${this.value.map((v) => html`<li><uui-checkbox value=${v}>${v}</uui-checkbox></li>`)}
</ul>`;
}
}
export default UmbPropertyEditorUITinyMceStylesheetsConfigurationElement;
declare global {
interface HTMLElementTagNameMap {
'umb-property-editor-ui-tiny-mce-stylesheets-configuration': UmbPropertyEditorUITinyMceStylesheetsConfigurationElement;
}
}

View File

@@ -0,0 +1,15 @@
import { Meta, Story } from '@storybook/web-components';
import { html } from 'lit-html';
import type { UmbPropertyEditorUITinyMceStylesheetsConfigurationElement } from './property-editor-ui-tiny-mce-stylesheets-configuration.element';
import './property-editor-ui-tiny-mce-stylesheets-configuration.element';
export default {
title: 'Property Editor UIs/Tiny Mce Stylesheets Configuration',
component: 'umb-property-editor-ui-tiny-mce-stylesheets-configuration',
id: 'umb-property-editor-ui-tiny-mce-stylesheets-configuration',
} as Meta;
export const AAAOverview: Story<UmbPropertyEditorUITinyMceStylesheetsConfigurationElement> = () =>
html`<umb-property-editor-ui-tiny-mce-stylesheets-configuration></umb-property-editor-ui-tiny-mce-stylesheets-configuration>`;
AAAOverview.storyName = 'Overview';

View File

@@ -0,0 +1,21 @@
import { expect, fixture, html } from '@open-wc/testing';
import { UmbPropertyEditorUITinyMceStylesheetsConfigurationElement } from './property-editor-ui-tiny-mce-stylesheets-configuration.element';
import { defaultA11yConfig } from '@umbraco-cms/test-utils';
describe('UmbPropertyEditorUITinyMceStylesheetsConfigurationElement', () => {
let element: UmbPropertyEditorUITinyMceStylesheetsConfigurationElement;
beforeEach(async () => {
element = await fixture(
html` <umb-property-editor-ui-tiny-mce-stylesheets-configuration></umb-property-editor-ui-tiny-mce-stylesheets-configuration> `
);
});
it('is defined with its own instance', () => {
expect(element).to.be.instanceOf(UmbPropertyEditorUITinyMceStylesheetsConfigurationElement);
});
it('passes the a11y audit', async () => {
await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
});
});

View File

@@ -0,0 +1,41 @@
import { css, html } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property } from 'lit/decorators.js';
import { UmbLitElement } from '@umbraco-cms/element';
/**
* @element umb-property-editor-ui-tiny-mce-toolbar-configuration
*/
@customElement('umb-property-editor-ui-tiny-mce-toolbar-configuration')
export class UmbPropertyEditorUITinyMceToolbarConfigurationElement extends UmbLitElement {
static styles = [
UUITextStyles,
css`
ul {
list-style: none;
padding: 0;
margin:0;
}
`,
];
@property()
value: string[] = [];
@property({ type: Array, attribute: false })
public config = [];
render() {
return html`TODO => get config options from backend per Umbraco.Cms.Web.BackOffice.PropertyEditors.RichTextPreValueController<ul>
${this.value.map((v) => html`<li><uui-checkbox value=${v} checked>${v}</uui-checkbox></li>`)}
</ul>`;
}
}
export default UmbPropertyEditorUITinyMceToolbarConfigurationElement;
declare global {
interface HTMLElementTagNameMap {
'umb-property-editor-ui-tiny-mce-toolbar-configuration': UmbPropertyEditorUITinyMceToolbarConfigurationElement;
}
}

View File

@@ -0,0 +1,15 @@
import { Meta, Story } from '@storybook/web-components';
import { html } from 'lit-html';
import type { UmbPropertyEditorUITinyMceToolbarConfigurationElement } from './property-editor-ui-tiny-mce-toolbar-configuration.element';
import './property-editor-ui-tiny-mce-toolbar-configuration.element';
export default {
title: 'Property Editor UIs/Tiny Mce Toolbar Configuration',
component: 'umb-property-editor-ui-tiny-mce-toolbar-configuration',
id: 'umb-property-editor-ui-tiny-mce-toolbar-configuration',
} as Meta;
export const AAAOverview: Story<UmbPropertyEditorUITinyMceToolbarConfigurationElement> = () =>
html`<umb-property-editor-ui-tiny-mce-toolbar-configuration></umb-property-editor-ui-tiny-mce-toolbar-configuration>`;
AAAOverview.storyName = 'Overview';

View File

@@ -0,0 +1,21 @@
import { expect, fixture, html } from '@open-wc/testing';
import { UmbPropertyEditorUITinyMceToolbarConfigurationElement } from './property-editor-ui-tiny-mce-toolbar-configuration.element';
import { defaultA11yConfig } from '@umbraco-cms/test-utils';
describe('UmbPropertyEditorUITinyMceToolbarConfigurationElement', () => {
let element: UmbPropertyEditorUITinyMceToolbarConfigurationElement;
beforeEach(async () => {
element = await fixture(
html` <umb-property-editor-ui-tiny-mce-toolbar-configuration></umb-property-editor-ui-tiny-mce-toolbar-configuration> `
);
});
it('is defined with its own instance', () => {
expect(element).to.be.instanceOf(UmbPropertyEditorUITinyMceToolbarConfigurationElement);
});
it('passes the a11y audit', async () => {
await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
});
});

View File

@@ -1,4 +1,4 @@
import { manifest as toolbar } from './config/configuration/manifests';
import { manifests as configuration } from './config/configuration/manifests';
import type { ManifestPropertyEditorUI } from '@umbraco-cms/models';
const manifest: ManifestPropertyEditorUI = {
@@ -13,11 +13,6 @@ const manifest: ManifestPropertyEditorUI = {
group: 'richText',
config: {
properties: [
{
alias: 'editor',
label: 'Editor',
propertyEditorUI: 'Umb.PropertyEditorUI.TinyMCE.Configuration',
},
{
alias: 'overlaySize',
label: 'Overlay Size',
@@ -34,6 +29,4 @@ const manifest: ManifestPropertyEditorUI = {
},
};
const config = [toolbar];
export const manifests = [manifest, ...config];
export const manifests = [manifest, ...configuration];