config ui
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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';
|
||||
@@ -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);
|
||||
});
|
||||
});
|
||||
@@ -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];
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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';
|
||||
@@ -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);
|
||||
});
|
||||
});
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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';
|
||||
@@ -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);
|
||||
});
|
||||
});
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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';
|
||||
@@ -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);
|
||||
});
|
||||
});
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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';
|
||||
@@ -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);
|
||||
});
|
||||
});
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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';
|
||||
@@ -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);
|
||||
});
|
||||
});
|
||||
@@ -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];
|
||||
|
||||
Reference in New Issue
Block a user