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

rename from tree picker to content picker

Browse Source
This commit is contained in:
Mads Rasmussen
2024-04-25 15:01:03 +02:00
parent 3ac1862e4c
commit ca6c4c92b6
25 changed files with 149 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/Umbraco.MultiNodeTreePicker.ts
View File

@@ -5,7 +5,7 @@ export const manifest: ManifestPropertyEditorSchema = {
name: 'Multi Node Tree Picker',
alias: 'Umbraco.MultiNodeTreePicker',
meta: {
defaultPropertyEditorUiAlias: 'Umb.PropertyEditorUi.TreePicker',
defaultPropertyEditorUiAlias: 'Umb.PropertyEditorUi.ContentPicker',
settings: {
properties: [
{
@@ -30,7 +30,7 @@ export const manifest: ManifestPropertyEditorSchema = {
alias: 'startNode',
label: 'Node type',
description: '',
propertyEditorUiAlias: 'Umb.PropertyEditorUi.TreePicker.SourcePicker',
propertyEditorUiAlias: 'Umb.PropertyEditorUi.ContentPicker.SourcePicker',
},
],
defaultData: [

2
src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/components/index.ts
View File

@@ -1 +1 @@
export * from './input-tree/index.js';
export * from './input-content/index.js';

1
src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/components/input-content/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './input-content.element.js';

19
src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/components/input-tree/input-tree.element.ts → src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/components/input-content/input-content.element.ts
View File

@@ -1,3 +1,4 @@
import type { UmbContentPickerSource } from '../../types.js';
import { css, html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
@@ -6,24 +7,24 @@ import type { UmbInputDocumentElement } from '@umbraco-cms/backoffice/document';
import type { UmbInputMediaElement } from '@umbraco-cms/backoffice/media';
import type { UmbInputMemberElement } from '@umbraco-cms/backoffice/member';
import type { UmbReferenceByUniqueAndType } from '@umbraco-cms/backoffice/models';
import type { UmbTreePickerSource } from '@umbraco-cms/backoffice/components';
@customElement('umb-input-tree')
export class UmbInputTreeElement extends UUIFormControlMixin(UmbLitElement, '') {
const elementName = 'umb-input-content';
@customElement(elementName)
export class UmbInputContentElement extends UUIFormControlMixin(UmbLitElement, '') {
protected getFormElement() {
return undefined;
}
private _type: UmbTreePickerSource['type'] = 'content';
private _type: UmbContentPickerSource['type'] = 'content';
@property()
public set type(newType: UmbTreePickerSource['type']) {
public set type(newType: UmbContentPickerSource['type']) {
const oldType = this._type;
if (newType?.toLowerCase() !== this._type) {
this._type = newType?.toLowerCase() as UmbTreePickerSource['type'];
this._type = newType?.toLowerCase() as UmbContentPickerSource['type'];
this.requestUpdate('type', oldType);
}
}
public get type(): UmbTreePickerSource['type'] {
public get type(): UmbContentPickerSource['type'] {
return this._type;
}
@@ -152,10 +153,10 @@ export class UmbInputTreeElement extends UUIFormControlMixin(UmbLitElement, '')
];
}
export default UmbInputTreeElement;
export default UmbInputContentElement;
declare global {
interface HTMLElementTagNameMap {
'umb-input-tree': UmbInputTreeElement;
[elementName]: UmbInputContentElement;
}
}

15
src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/components/input-content/input-content.stories.ts Normal file
View File

@@ -0,0 +1,15 @@
import type { Meta, StoryObj } from '@storybook/web-components';
import './input-content.element.js';
import type { UmbInputContentElement } from './input-content.element.js';
const meta: Meta<UmbInputContentElement> = {
title: 'Components/Inputs/Content',
component: 'umb-input-content',
};
export default meta;
type Story = StoryObj<UmbInputContentElement>;
export const Overview: Story = {
args: {},
};

10
src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/components/input-tree/input-tree.test.ts → src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/components/input-content/input-content.test.ts
View File

@@ -1,15 +1,15 @@
import { expect, fixture, html } from '@open-wc/testing';
import { UmbInputTreeElement } from './input-tree.element.js';
import { UmbInputContentElement } from './input-content.element.js';
import { type UmbTestRunnerWindow, defaultA11yConfig } from '@umbraco-cms/internal/test-utils';
describe('UmbInputTreeElement', () => {
let element: UmbInputTreeElement;
describe('UmbInputContentElement', () => {
let element: UmbInputContentElement;
beforeEach(async () => {
element = await fixture(html` <umb-input-tree></umb-input-tree> `);
element = await fixture(html` <umb-input-content></umb-input-content> `);
});
it('is defined with its own instance', () => {
expect(element).to.be.instanceOf(UmbInputTreeElement);
expect(element).to.be.instanceOf(UmbInputContentElement);
});
if ((window as UmbTestRunnerWindow).__UMBRACO_TEST_RUN_A11Y_TEST) {

1
src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/components/input-tree/index.ts
View File

@@ -1 +0,0 @@
export * from './input-tree.element.js';

15
src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/components/input-tree/input-tree.stories.ts
View File

@@ -1,15 +0,0 @@
import type { Meta, StoryObj } from '@storybook/web-components';
import './input-tree.element.js';
import type { UmbInputTreeElement } from './input-tree.element.js';
const meta: Meta<UmbInputTreeElement> = {
title: 'Components/Inputs/Tree',
component: 'umb-input-tree',
};
export default meta;
type Story = StoryObj<UmbInputTreeElement>;
export const Overview: Story = {
args: {},
};

1
src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source-picker/input-tree-picker-source/index.ts
View File

@@ -1 +0,0 @@
export * from './input-tree-picker-source.element.js';

13
src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source-picker/manifests.ts
View File

@@ -1,13 +0,0 @@
import type { ManifestPropertyEditorUi } from '@umbraco-cms/backoffice/extension-registry';
export const manifest: ManifestPropertyEditorUi = {
type: 'propertyEditorUi',
alias: 'Umb.PropertyEditorUi.TreePicker.SourcePicker',
name: 'Tree Picker Source Picker Property Editor UI',
element: () => import('./property-editor-ui-tree-picker-source-picker.element.js'),
meta: {
label: 'Tree Picker Source Picker',
icon: 'icon-page-add',
group: 'pickers',
},
};

15
src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source-picker/property-editor-ui-tree-picker-source-picker.stories.ts
View File

@@ -1,15 +0,0 @@
import type { Meta, Story } from '@storybook/web-components';
import type { UmbPropertyEditorUITreePickerSourcePickerElement } from './property-editor-ui-tree-picker-source-picker.element.js';
import { html } from '@umbraco-cms/backoffice/external/lit';
import './property-editor-ui-tree-picker-source-picker.element.js';
export default {
title: 'Property Editor UIs/Tree Picker Start Node',
component: 'umb-property-editor-ui-tree-picker-source-picker',
id: 'umb-property-editor-ui-tree-picker-source-pickere',
} as Meta;
export const AAAOverview: Story<UmbPropertyEditorUITreePickerSourcePickerElement> = () =>
html`<umb-property-editor-ui-tree-picker-source-picker></umb-property-editor-ui-tree-picker-source-picker>`;
AAAOverview.storyName = 'Overview';

8
src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source-type-picker/manifests.ts
View File

@@ -2,11 +2,11 @@ import type { ManifestPropertyEditorUi } from '@umbraco-cms/backoffice/extension
export const manifest: ManifestPropertyEditorUi = {
type: 'propertyEditorUi',
alias: 'Umb.PropertyEditorUi.TreePicker.SourceTypePicker',
name: 'Tree Picker Source Type Picker Property Editor UI',
element: () => import('./property-editor-ui-tree-picker-source-type-picker.element.js'),
alias: 'Umb.PropertyEditorUi.ContentPicker.SourceType',
name: 'Content Picker Source Type Property Editor UI',
element: () => import('./property-editor-ui-content-picker-source-type.element.js'),
meta: {
label: 'Tree Picker Source Type Picker',
label: 'Content Picker Source Type Picker',
icon: 'icon-page-add',
group: 'pickers',
},

13
src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source-type-picker/property-editor-ui-tree-picker-source-type-picker.element.ts → src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source-type-picker/property-editor-ui-content-picker-source-type.element.ts
View File

@@ -1,7 +1,6 @@
import type { UmbInputMemberTypeElement } from '@umbraco-cms/backoffice/member-type';
import type { UmbInputDocumentTypeElement } from '@umbraco-cms/backoffice/document-type';
import type { UmbInputMediaTypeElement } from '@umbraco-cms/backoffice/media-type';
import type { UmbTreePickerSource } from '@umbraco-cms/backoffice/components';
import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
import { customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
@@ -9,10 +8,10 @@ import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';
import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';
/**
* @element umb-property-editor-ui-tree-picker-source-type-picker
* @element umb-property-editor-ui-content-picker-source-type
*/
@customElement('umb-property-editor-ui-tree-picker-source-type-picker')
export class UmbPropertyEditorUITreePickerSourceTypePickerElement
@customElement('umb-property-editor-ui-content-picker-source-type')
export class UmbPropertyEditorUIContentPickerSourceTypeElement
extends UmbLitElement
implements UmbPropertyEditorUiElement
{
@@ -51,7 +50,7 @@ export class UmbPropertyEditorUITreePickerSourceTypePickerElement
(value) => {
if (!value) return;
const startNode = value as UmbTreePickerSource;
const startNode = value as UmbContentPickerSource;
if (startNode?.type) {
// If we had a sourceType before, we can see this as a change and not the initial value,
// so let's reset the value, so we don't carry over content-types to the new source type.
@@ -127,10 +126,10 @@ export class UmbPropertyEditorUITreePickerSourceTypePickerElement
}
}
export default UmbPropertyEditorUITreePickerSourceTypePickerElement;
export default UmbPropertyEditorUIContentPickerSourceTypeElement;
declare global {
interface HTMLElementTagNameMap {
'umb-property-editor-ui-tree-picker-source-type-picker': UmbPropertyEditorUITreePickerSourceTypePickerElement;
'umb-property-editor-ui-content-picker-source-type': UmbPropertyEditorUIContentPickerSourceTypeElement;
}
}

1
src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source/input-content-picker-source/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './input-content-picker-source.element.js';

21
src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source-picker/input-tree-picker-source/input-tree-picker-source.element.ts → src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source/input-content-picker-source/input-content-picker-source.element.ts
View File

@@ -1,3 +1,4 @@
import type { UmbContentPickerDynamicRoot, UmbContentPickerSourceType } from '../../../types.js';
import type { UmbInputDocumentRootPickerElement } from '@umbraco-cms/backoffice/document';
import { html, customElement, property, css, state, nothing } from '@umbraco-cms/backoffice/external/lit';
import type { UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
@@ -5,26 +6,6 @@ import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
export type UmbContentPickerSource = {
type: UmbContentPickerSourceType;
id?: string;
dynamicRoot?: UmbContentPickerDynamicRoot;
};
export type UmbContentPickerSourceType = 'content' | 'member' | 'media';
export type UmbContentPickerDynamicRoot = {
originAlias: string;
originKey?: string;
querySteps?: Array<UmbContentPickerDynamicRootQueryStep>;
};
export type UmbContentPickerDynamicRootQueryStep = {
unique: string;
alias: string;
anyOfDocTypeKeys?: Array<string>;
};
@customElement('umb-input-content-picker-source')
export class UmbInputContentPickerSourceElement extends UUIFormControlMixin(UmbLitElement, '') {
protected getFormElement() {

13
src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source/manifests.ts Normal file
View File

@@ -0,0 +1,13 @@
import type { ManifestPropertyEditorUi } from '@umbraco-cms/backoffice/extension-registry';
export const manifest: ManifestPropertyEditorUi = {
type: 'propertyEditorUi',
alias: 'Umb.PropertyEditorUi.ContentPicker.Source',
name: 'Content Picker Source Property Editor UI',
element: () => import('./property-editor-ui-content-picker-source.element.js'),
meta: {
label: 'Content Picker Source',
icon: 'icon-page-add',
group: 'pickers',
},
};

10
src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source-picker/property-editor-ui-tree-picker-source-picker.test.ts → src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source/property-editor-ui-content-picker-source-picker.test.ts
View File

@@ -1,18 +1,18 @@
import { expect, fixture, html } from '@open-wc/testing';
import { UmbPropertyEditorUITreePickerSourcePickerElement } from './property-editor-ui-tree-picker-source-picker.element.js';
import { UmbPropertyEditorUIContentPickerSourceElement } from './property-editor-ui-content-picker-source.element.js';
import { type UmbTestRunnerWindow, defaultA11yConfig } from '@umbraco-cms/internal/test-utils';
describe('UmbPropertyEditorUITreePickerSourcePickerElement', () => {
let element: UmbPropertyEditorUITreePickerSourcePickerElement;
describe('UmbPropertyEditorUIContentPickerSourcePickerElement', () => {
let element: UmbPropertyEditorUIContentPickerSourceElement;
beforeEach(async () => {
element = await fixture(html`
<umb-property-editor-ui-tree-picker-source-picker></umb-property-editor-ui-tree-picker-source-picker>
<umb-property-editor-ui-content-picker-source-picker></umb-property-editor-ui-content-picker-source-picker>
`);
});
it('is defined with its own instance', () => {
expect(element).to.be.instanceOf(UmbPropertyEditorUITreePickerSourcePickerElement);
expect(element).to.be.instanceOf(UmbPropertyEditorUIContentPickerSourceElement);
});
if ((window as UmbTestRunnerWindow).__UMBRACO_TEST_RUN_A11Y_TEST) {

25
src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source-picker/property-editor-ui-tree-picker-source-picker.element.ts → src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source/property-editor-ui-content-picker-source.element.ts
View File

@@ -1,7 +1,5 @@
import type {
UmbInputContentPickerSourceElement,
UmbContentPickerSource,
} from './input-tree-picker-source/input-tree-picker-source.element.js';
import type { UmbContentPickerSource } from '../../types.js';
import type { UmbInputContentPickerSourceElement } from './input-content-picker-source/input-content-picker-source.element.js';
import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
import {
@@ -11,16 +9,13 @@ import {
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
// import of local component
import './input-tree-picker-source/index.js';
import './input-content-picker-source/index.js';
/**
* @element umb-property-editor-ui-tree-picker-source-picker
* @element umb-property-editor-ui-content-picker-source
*/
@customElement('umb-property-editor-ui-tree-picker-source-picker')
export class UmbPropertyEditorUITreePickerSourcePickerElement
extends UmbLitElement
implements UmbPropertyEditorUiElement
{
@customElement('umb-property-editor-ui-content-picker-source')
export class UmbPropertyEditorUIContentPickerSourceElement extends UmbLitElement implements UmbPropertyEditorUiElement {
@property({ type: Object })
value?: UmbContentPickerSource;
@@ -40,18 +35,18 @@ export class UmbPropertyEditorUITreePickerSourcePickerElement
}
render() {
return html`<umb-input-tree-picker-source
return html`<umb-input-content-picker-source
@change=${this.#onChange}
.type=${this.value?.type ?? 'content'}
.nodeId=${this.value?.id}
.dynamicRoot=${this.value?.dynamicRoot}></umb-input-tree-picker-source>`;
.dynamicRoot=${this.value?.dynamicRoot}></umb-input-content-picker-source>`;
}
}
export default UmbPropertyEditorUITreePickerSourcePickerElement;
export default UmbPropertyEditorUIContentPickerSourceElement;
declare global {
interface HTMLElementTagNameMap {
'umb-property-editor-ui-tree-picker-source-picker': UmbPropertyEditorUITreePickerSourcePickerElement;
'umb-property-editor-ui-content-picker-source': UmbPropertyEditorUIContentPickerSourceElement;
}
}

15
src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source/property-editor-ui-content-picker-source.stories.ts Normal file
View File

@@ -0,0 +1,15 @@
import type { Meta, Story } from '@storybook/web-components';
import type { UmbPropertyEditorUIContentPickerSourceElement } from './property-editor-ui-content-picker-source.element.js';
import { html } from '@umbraco-cms/backoffice/external/lit';
import './property-editor-ui-content-picker-source.element.js';
export default {
title: 'Property Editor UIs/Content Picker Start Node',
component: 'umb-property-editor-ui-content-picker-source',
id: 'umb-property-editor-ui-content-picker-source',
} as Meta;
export const AAAOverview: Story<UmbPropertyEditorUIContentPickerSourceElement> = () =>
html`<umb-property-editor-ui-content-picker-source></umb-property-editor-ui-content-picker-source>`;
AAAOverview.storyName = 'Overview';

12
src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/manifests.ts
View File

@@ -1,15 +1,15 @@
import { manifest as sourcePicker } from './config/source-picker/manifests.js';
import { manifest as sourcePicker } from './config/source/manifests.js';
import { manifest as sourceTypePicker } from './config/source-type-picker/manifests.js';
import { manifest as schemaManifest } from './Umbraco.MultiNodeTreePicker.js';
import type { ManifestPropertyEditorUi, ManifestTypes } from '@umbraco-cms/backoffice/extension-registry';
const manifest: ManifestPropertyEditorUi = {
type: 'propertyEditorUi',
alias: 'Umb.PropertyEditorUi.TreePicker',
name: 'Tree Picker Property Editor UI',
element: () => import('./property-editor-ui-tree-picker.element.js'),
alias: 'Umb.PropertyEditorUi.ContentPicker',
name: 'Content Picker Property Editor UI',
element: () => import('./property-editor-ui-content-picker.element.js'),
meta: {
label: 'Tree Picker',
label: 'Content Picker',
icon: 'icon-page-add',
group: 'pickers',
propertyEditorSchemaAlias: 'Umbraco.MultiNodeTreePicker',
@@ -19,7 +19,7 @@ const manifest: ManifestPropertyEditorUi = {
alias: 'filter',
label: 'Allow items of type',
description: 'Select the applicable types',
propertyEditorUiAlias: 'Umb.PropertyEditorUi.TreePicker.SourceTypePicker',
propertyEditorUiAlias: 'Umb.PropertyEditorUi.ContentPicker.SourceTypePicker',
},
{
alias: 'showOpenButton',

30
src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/property-editor-ui-tree-picker.element.ts → src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/property-editor-ui-content-picker.element.ts
View File

@@ -1,4 +1,5 @@
import type { UmbInputTreeElement } from './components/input-tree/index.js';
import type { UmbInputContentElement } from './components/input-content/index.js';
import type { UmbContentPickerSource } from './types.js';
import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UmbDynamicRootRepository } from '@umbraco-cms/backoffice/dynamic-root';
@@ -6,21 +7,20 @@ import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-ed
import { UMB_ENTITY_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace';
import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
import type { UmbTreePickerSource } from '@umbraco-cms/backoffice/components';
// import of local component
import './components/input-tree/index.js';
import './components/input-content/index.js';
/**
* @element umb-property-editor-ui-tree-picker
* @element umb-property-editor-ui-content-picker
*/
@customElement('umb-property-editor-ui-tree-picker')
export class UmbPropertyEditorUITreePickerElement extends UmbLitElement implements UmbPropertyEditorUiElement {
@customElement('umb-property-editor-ui-content-picker')
export class UmbPropertyEditorUIContentPickerElement extends UmbLitElement implements UmbPropertyEditorUiElement {
@property({ type: Array })
value: UmbInputTreeElement['items'] = [];
value: UmbInputContentElement['items'] = [];
@state()
type: UmbTreePickerSource['type'] = 'content';
type: UmbContentPickerSource['type'] = 'content';
@state()
startNodeId?: string | null;
@@ -40,14 +40,14 @@ export class UmbPropertyEditorUITreePickerElement extends UmbLitElement implemen
@state()
ignoreUserStartNodes?: boolean;
#dynamicRoot?: UmbTreePickerSource['dynamicRoot'];
#dynamicRoot?: UmbContentPickerSource['dynamicRoot'];
#dynamicRootRepository = new UmbDynamicRootRepository(this);
public set config(config: UmbPropertyEditorConfigCollection | undefined) {
if (!config) return;
const startNode = config.getValueByAlias<UmbTreePickerSource>('startNode');
const startNode = config.getValueByAlias<UmbContentPickerSource>('startNode');
if (startNode) {
this.type = startNode.type;
this.startNodeId = startNode.id;
@@ -83,13 +83,13 @@ export class UmbPropertyEditorUITreePickerElement extends UmbLitElement implemen
}
}
#onChange(event: CustomEvent & { target: UmbInputTreeElement }) {
#onChange(event: CustomEvent & { target: UmbInputContentElement }) {
this.value = event.target.items;
this.dispatchEvent(new UmbPropertyValueChangeEvent());
}
render() {
return html`<umb-input-tree
return html`<umb-input-content
.items=${this.value}
.type=${this.type}
.startNodeId=${this.startNodeId ?? ''}
@@ -98,14 +98,14 @@ export class UmbPropertyEditorUITreePickerElement extends UmbLitElement implemen
.allowedContentTypeIds=${this.allowedContentTypeIds ?? ''}
?showOpenButton=${this.showOpenButton}
?ignoreUserStartNodes=${this.ignoreUserStartNodes}
@change=${this.#onChange}></umb-input-tree>`;
@change=${this.#onChange}></umb-input-content>`;
}
}
export default UmbPropertyEditorUITreePickerElement;
export default UmbPropertyEditorUIContentPickerElement;
declare global {
interface HTMLElementTagNameMap {
'umb-property-editor-ui-tree-picker': UmbPropertyEditorUITreePickerElement;
'umb-property-editor-ui-content-picker': UmbPropertyEditorUIContentPickerElement;
}
}

15
src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/property-editor-ui-content-picker.stories.ts Normal file
View File

@@ -0,0 +1,15 @@
import type { Meta, Story } from '@storybook/web-components';
import type { UmbPropertyEditorUIContentPickerElement } from './property-editor-ui-content-picker.element.js';
import { html } from '@umbraco-cms/backoffice/external/lit';
import './property-editor-ui-content-picker.element.js';
export default {
title: 'Property Editor UIs/Content Picker',
component: 'umb-property-editor-ui-content-picker',
id: 'umb-property-editor-ui-content-picker',
} as Meta;
export const AAAOverview: Story<UmbPropertyEditorUIContentPickerElement> = () =>
html`<umb-property-editor-ui-content-picker></umb-property-editor-ui-content-picker>`;
AAAOverview.storyName = 'Overview';

10
src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/property-editor-ui-tree-picker.test.ts → src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/property-editor-ui-content-picker.test.ts
View File

@@ -1,16 +1,16 @@
import { expect, fixture, html } from '@open-wc/testing';
import { UmbPropertyEditorUITreePickerElement } from './property-editor-ui-tree-picker.element.js';
import { UmbPropertyEditorUIContentPickerElement } from './property-editor-ui-content-picker.element.js';
import { type UmbTestRunnerWindow, defaultA11yConfig } from '@umbraco-cms/internal/test-utils';
describe('UmbPropertyEditorUITreePickerElement', () => {
let element: UmbPropertyEditorUITreePickerElement;
describe('UmbPropertyEditorUIContentPickerElement', () => {
let element: UmbPropertyEditorUIContentPickerElement;
beforeEach(async () => {
element = await fixture(html` <umb-property-editor-ui-tree-picker></umb-property-editor-ui-tree-picker> `);
element = await fixture(html` <umb-property-editor-ui-content-picker></umb-property-editor-ui-content-picker> `);
});
it('is defined with its own instance', () => {
expect(element).to.be.instanceOf(UmbPropertyEditorUITreePickerElement);
expect(element).to.be.instanceOf(UmbPropertyEditorUIContentPickerElement);
});
if ((window as UmbTestRunnerWindow).__UMBRACO_TEST_RUN_A11Y_TEST) {

15
src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/property-editor-ui-tree-picker.stories.ts
View File

@@ -1,15 +0,0 @@
import type { Meta, Story } from '@storybook/web-components';
import type { UmbPropertyEditorUITreePickerElement } from './property-editor-ui-tree-picker.element.js';
import { html } from '@umbraco-cms/backoffice/external/lit';
import './property-editor-ui-tree-picker.element.js';
export default {
title: 'Property Editor UIs/Tree Picker',
component: 'umb-property-editor-ui-tree-picker',
id: 'umb-property-editor-ui-tree-picker',
} as Meta;
export const AAAOverview: Story<UmbPropertyEditorUITreePickerElement> = () =>
html`<umb-property-editor-ui-tree-picker></umb-property-editor-ui-tree-picker>`;
AAAOverview.storyName = 'Overview';

19
src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/types.ts Normal file
View File

@@ -0,0 +1,19 @@
export type UmbContentPickerSourceType = 'content' | 'member' | 'media';
export type UmbContentPickerSource = {
type: UmbContentPickerSourceType;
id?: string;
dynamicRoot?: UmbContentPickerDynamicRoot;
};
export type UmbContentPickerDynamicRoot = {
originAlias: string;
originKey?: string;
querySteps?: Array<UmbContentPickerDynamicRootQueryStep>;
};
export type UmbContentPickerDynamicRootQueryStep = {
unique: string;
alias: string;
anyOfDocTypeKeys?: Array<string>;
};