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

add radio button list

Browse Source
This commit is contained in:
Mads Rasmussen
2023-01-09 16:31:26 +01:00
parent b49dab5def
commit 60dd7ee915
9 changed files with 120 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.RadioButtonList.ts Normal file
View File

@@ -0,0 +1,8 @@
import type { ManifestPropertyEditorModel } from '@umbraco-cms/models';
export const manifest: ManifestPropertyEditorModel = {
type: 'propertyEditorModel',
name: 'Radio Button List',
alias: 'Umbraco.RadioButtonList',
meta: {},
};

8
src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/manifests.ts
View File

@@ -14,6 +14,7 @@ import { manifest as slider } from './Umbraco.Slider';
import { manifest as trueFalse } from './Umbraco.TrueFalse';
import { manifest as tags } from './Umbraco.Tags';
import { manifest as markdownEditor } from './Umbraco.MarkdownEditor';
import { manifest as radioButtonList } from './Umbraco.RadioButtonList';
import type { ManifestPropertyEditorModel } from '@umbraco-cms/models';
@@ -34,6 +35,7 @@ export const manifests: Array<ManifestPropertyEditorModel> = [
trueFalse,
tags,
markdownEditor,
radioButtonList,
{
type: 'propertyEditorModel',
name: 'Decimal',
@@ -100,12 +102,6 @@ export const manifests: Array<ManifestPropertyEditorModel> = [
alias: 'Umbraco.ListView',
meta: {},
},
{
type: 'propertyEditorModel',
name: 'Radio button list',
alias: 'Umbraco.RadioButtonList',
meta: {},
},
{
type: 'propertyEditorModel',
name: 'File upload',

2
src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts
View File

@@ -14,6 +14,7 @@ import { manifest as slider } from './slider/manifests';
import { manifest as toggle } from './toggle/manifests';
import { manifest as tags } from './tags/manifests';
import { manifest as markdownEditor } from './markdown-editor/manifests';
import { manifest as radioButtonList } from './radio-button-list/manifests';
import type { ManifestPropertyEditorUI } from '@umbraco-cms/models';
@@ -34,6 +35,7 @@ export const manifests: Array<ManifestPropertyEditorUI> = [
toggle,
tags,
markdownEditor,
radioButtonList,
{
type: 'propertyEditorUI',
alias: 'Umb.PropertyEditorUI.BlockList',

24
src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/manifests.ts Normal file
View File

@@ -0,0 +1,24 @@
import type { ManifestPropertyEditorUI } from '@umbraco-cms/models';
export const manifest: ManifestPropertyEditorUI = {
type: 'propertyEditorUI',
alias: 'Umb.PropertyEditorUI.RadioButtonList',
name: 'RadioButtonList Property Editor UI',
loader: () => import('./property-editor-ui-radio-button-list.element'),
meta: {
label: 'Radio Button List',
propertyEditorModel: 'Umbraco.RadioButtonList',
icon: 'umb:target',
group: 'lists',
config: {
properties: [
{
alias: 'options',
label: 'Add option',
description: 'Add, remove or sort options for the list.',
propertyEditorUI: 'Umb.PropertyEditorUI.MultipleTextString',
},
],
},
},
};

29
src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.element.ts Normal file
View File

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

15
src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.stories.ts Normal file
View File

@@ -0,0 +1,15 @@
import { Meta, Story } from '@storybook/web-components';
import { html } from 'lit-html';
import type { UmbPropertyEditorUIRadioButtonListElement } from './property-editor-ui-radio-button-list.element';
import './property-editor-ui-radio-button-list.element';
export default {
title: 'Property Editor UIs/Radio Button List',
component: 'umb-property-editor-ui-radio-button-list',
id: 'umb-property-editor-ui-radio-button-list',
} as Meta;
export const AAAOverview: Story<UmbPropertyEditorUIRadioButtonListElement> = () =>
html`<umb-property-editor-ui-radio-button-list></umb-property-editor-ui-radio-button-list>`;
AAAOverview.storyName = 'Overview';

21
src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.test.ts Normal file
View File

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

13
src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts
View File

@@ -265,6 +265,19 @@ export const data: Array<DataTypeDetails> = [
propertyEditorUIAlias: 'Umb.PropertyEditorUI.MarkdownEditor',
data: [],
},
{
name: 'Radio Button List',
type: 'data-type',
icon: 'umb:autofill',
hasChildren: false,
key: 'dt-radioButtonList',
isContainer: false,
parentKey: null,
isFolder: false,
propertyEditorModelAlias: 'Umbraco.RadioButtonList',
propertyEditorUIAlias: 'Umb.PropertyEditorUI.RadioButtonList',
data: [],
},
];
// Temp mocked database

6
src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts
View File

@@ -102,6 +102,12 @@ export const data: Array<DocumentDetails> = [
description: '',
dataTypeKey: 'dt-markdownEditor',
},
{
alias: 'radioButtonList',
label: 'Radio Button List',
description: '',
dataTypeKey: 'dt-radioButtonList',
},
],
data: [],
variants: [],