From ca6c4c92b6b095aadb00bf9d78b31fd902e8f850 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 25 Apr 2024 15:01:03 +0200 Subject: [PATCH] rename from tree picker to content picker --- .../Umbraco.MultiNodeTreePicker.ts | 4 +-- .../content-picker/components/index.ts | 2 +- .../components/input-content/index.ts | 1 + .../input-content.element.ts} | 19 ++++++------ .../input-content/input-content.stories.ts | 15 ++++++++++ .../input-content.test.ts} | 10 +++---- .../components/input-tree/index.ts | 1 - .../input-tree/input-tree.stories.ts | 15 ---------- .../input-tree-picker-source/index.ts | 1 - .../config/source-picker/manifests.ts | 13 -------- ...or-ui-tree-picker-source-picker.stories.ts | 15 ---------- .../config/source-type-picker/manifests.ts | 8 ++--- ...-ui-content-picker-source-type.element.ts} | 13 ++++---- .../input-content-picker-source/index.ts | 1 + .../input-content-picker-source.element.ts} | 21 +------------ .../content-picker/config/source/manifests.ts | 13 ++++++++ ...r-ui-content-picker-source-picker.test.ts} | 10 +++---- ...ditor-ui-content-picker-source.element.ts} | 25 +++++++--------- ...editor-ui-content-picker-source.stories.ts | 15 ++++++++++ .../content-picker/manifests.ts | 12 ++++---- ...perty-editor-ui-content-picker.element.ts} | 30 +++++++++---------- ...operty-editor-ui-content-picker.stories.ts | 15 ++++++++++ ...property-editor-ui-content-picker.test.ts} | 10 +++---- .../property-editor-ui-tree-picker.stories.ts | 15 ---------- .../property-editors/content-picker/types.ts | 19 ++++++++++++ 25 files changed, 149 insertions(+), 154 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/components/input-content/index.ts rename src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/components/{input-tree/input-tree.element.ts => input-content/input-content.element.ts} (88%) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/components/input-content/input-content.stories.ts rename src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/components/{input-tree/input-tree.test.ts => input-content/input-content.test.ts} (60%) delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/components/input-tree/index.ts delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/components/input-tree/input-tree.stories.ts delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source-picker/input-tree-picker-source/index.ts delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source-picker/manifests.ts delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source-picker/property-editor-ui-tree-picker-source-picker.stories.ts rename 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 => property-editor-ui-content-picker-source-type.element.ts} (86%) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source/input-content-picker-source/index.ts rename src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/{source-picker/input-tree-picker-source/input-tree-picker-source.element.ts => source/input-content-picker-source/input-content-picker-source.element.ts} (88%) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source/manifests.ts rename src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/{source-picker/property-editor-ui-tree-picker-source-picker.test.ts => source/property-editor-ui-content-picker-source-picker.test.ts} (51%) rename src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/{source-picker/property-editor-ui-tree-picker-source-picker.element.ts => source/property-editor-ui-content-picker-source.element.ts} (57%) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source/property-editor-ui-content-picker-source.stories.ts rename src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/{property-editor-ui-tree-picker.element.ts => property-editor-ui-content-picker.element.ts} (74%) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/property-editor-ui-content-picker.stories.ts rename src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/{property-editor-ui-tree-picker.test.ts => property-editor-ui-content-picker.test.ts} (51%) delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/property-editor-ui-tree-picker.stories.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/types.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/Umbraco.MultiNodeTreePicker.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/Umbraco.MultiNodeTreePicker.ts index 9a6625b149..db1137044c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/Umbraco.MultiNodeTreePicker.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/Umbraco.MultiNodeTreePicker.ts @@ -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: [ diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/components/index.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/components/index.ts index e8fa7cda1c..cb519d7b9d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/components/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/components/index.ts @@ -1 +1 @@ -export * from './input-tree/index.js'; +export * from './input-content/index.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/components/input-content/index.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/components/input-content/index.ts new file mode 100644 index 0000000000..2f7008eaa4 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/components/input-content/index.ts @@ -0,0 +1 @@ +export * from './input-content.element.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/components/input-tree/input-tree.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/components/input-content/input-content.element.ts similarity index 88% rename from src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/components/input-tree/input-tree.element.ts rename to src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/components/input-content/input-content.element.ts index adeb1fe651..966114331f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/components/input-tree/input-tree.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/components/input-content/input-content.element.ts @@ -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; } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/components/input-content/input-content.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/components/input-content/input-content.stories.ts new file mode 100644 index 0000000000..4a940912b2 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/components/input-content/input-content.stories.ts @@ -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 = { + title: 'Components/Inputs/Content', + component: 'umb-input-content', +}; + +export default meta; +type Story = StoryObj; + +export const Overview: Story = { + args: {}, +}; diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/components/input-tree/input-tree.test.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/components/input-content/input-content.test.ts similarity index 60% rename from src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/components/input-tree/input-tree.test.ts rename to src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/components/input-content/input-content.test.ts index afabcaa6d2..6781940b92 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/components/input-tree/input-tree.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/components/input-content/input-content.test.ts @@ -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` `); + element = await fixture(html` `); }); 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) { diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/components/input-tree/index.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/components/input-tree/index.ts deleted file mode 100644 index 490f084b27..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/components/input-tree/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './input-tree.element.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/components/input-tree/input-tree.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/components/input-tree/input-tree.stories.ts deleted file mode 100644 index 21f89e9529..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/components/input-tree/input-tree.stories.ts +++ /dev/null @@ -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 = { - title: 'Components/Inputs/Tree', - component: 'umb-input-tree', -}; - -export default meta; -type Story = StoryObj; - -export const Overview: Story = { - args: {}, -}; diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source-picker/input-tree-picker-source/index.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source-picker/input-tree-picker-source/index.ts deleted file mode 100644 index 7f9792d5a4..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source-picker/input-tree-picker-source/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './input-tree-picker-source.element.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source-picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source-picker/manifests.ts deleted file mode 100644 index 2dba1aa2cc..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source-picker/manifests.ts +++ /dev/null @@ -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', - }, -}; diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source-picker/property-editor-ui-tree-picker-source-picker.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source-picker/property-editor-ui-tree-picker-source-picker.stories.ts deleted file mode 100644 index 7eff59ae48..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source-picker/property-editor-ui-tree-picker-source-picker.stories.ts +++ /dev/null @@ -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 = () => - html``; -AAAOverview.storyName = 'Overview'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source-type-picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source-type-picker/manifests.ts index 291e99be3c..ebe91862c5 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source-type-picker/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source-type-picker/manifests.ts @@ -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', }, diff --git a/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 b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source-type-picker/property-editor-ui-content-picker-source-type.element.ts similarity index 86% rename from 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 rename to src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source-type-picker/property-editor-ui-content-picker-source-type.element.ts index 54f606d8b1..ba485d21b1 100644 --- a/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 +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source-type-picker/property-editor-ui-content-picker-source-type.element.ts @@ -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; } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source/input-content-picker-source/index.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source/input-content-picker-source/index.ts new file mode 100644 index 0000000000..f45438cbdc --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source/input-content-picker-source/index.ts @@ -0,0 +1 @@ +export * from './input-content-picker-source.element.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source-picker/input-tree-picker-source/input-tree-picker-source.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source/input-content-picker-source/input-content-picker-source.element.ts similarity index 88% rename from src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source-picker/input-tree-picker-source/input-tree-picker-source.element.ts rename to src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source/input-content-picker-source/input-content-picker-source.element.ts index c1044f8d20..278fcaf61e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source-picker/input-tree-picker-source/input-tree-picker-source.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source/input-content-picker-source/input-content-picker-source.element.ts @@ -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; -}; - -export type UmbContentPickerDynamicRootQueryStep = { - unique: string; - alias: string; - anyOfDocTypeKeys?: Array; -}; - @customElement('umb-input-content-picker-source') export class UmbInputContentPickerSourceElement extends UUIFormControlMixin(UmbLitElement, '') { protected getFormElement() { diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source/manifests.ts new file mode 100644 index 0000000000..987d57d781 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source/manifests.ts @@ -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', + }, +}; diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source-picker/property-editor-ui-tree-picker-source-picker.test.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source/property-editor-ui-content-picker-source-picker.test.ts similarity index 51% rename from src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source-picker/property-editor-ui-tree-picker-source-picker.test.ts rename to src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source/property-editor-ui-content-picker-source-picker.test.ts index 5032c8b1b3..822047a355 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source-picker/property-editor-ui-tree-picker-source-picker.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source/property-editor-ui-content-picker-source-picker.test.ts @@ -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` - + `); }); 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) { diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source-picker/property-editor-ui-tree-picker-source-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source/property-editor-ui-content-picker-source.element.ts similarity index 57% rename from src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source-picker/property-editor-ui-tree-picker-source-picker.element.ts rename to src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source/property-editor-ui-content-picker-source.element.ts index 7ea9a9e86e..1e7425532c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source-picker/property-editor-ui-tree-picker-source-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source/property-editor-ui-content-picker-source.element.ts @@ -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``; + .dynamicRoot=${this.value?.dynamicRoot}>`; } } -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; } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source/property-editor-ui-content-picker-source.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source/property-editor-ui-content-picker-source.stories.ts new file mode 100644 index 0000000000..830ab68639 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source/property-editor-ui-content-picker-source.stories.ts @@ -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 = () => + html``; +AAAOverview.storyName = 'Overview'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/manifests.ts index 45910a6a9a..ea1a8846fe 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/manifests.ts @@ -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', diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/property-editor-ui-tree-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/property-editor-ui-content-picker.element.ts similarity index 74% rename from src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/property-editor-ui-tree-picker.element.ts rename to src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/property-editor-ui-content-picker.element.ts index 6cc9d17564..6e92dfa9f7 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/property-editor-ui-tree-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/property-editor-ui-content-picker.element.ts @@ -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('startNode'); + const startNode = config.getValueByAlias('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``; + @change=${this.#onChange}>`; } } -export default UmbPropertyEditorUITreePickerElement; +export default UmbPropertyEditorUIContentPickerElement; declare global { interface HTMLElementTagNameMap { - 'umb-property-editor-ui-tree-picker': UmbPropertyEditorUITreePickerElement; + 'umb-property-editor-ui-content-picker': UmbPropertyEditorUIContentPickerElement; } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/property-editor-ui-content-picker.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/property-editor-ui-content-picker.stories.ts new file mode 100644 index 0000000000..f3cc9a6dfa --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/property-editor-ui-content-picker.stories.ts @@ -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 = () => + html``; +AAAOverview.storyName = 'Overview'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/property-editor-ui-tree-picker.test.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/property-editor-ui-content-picker.test.ts similarity index 51% rename from src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/property-editor-ui-tree-picker.test.ts rename to src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/property-editor-ui-content-picker.test.ts index f5ab493360..feda91e0d8 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/property-editor-ui-tree-picker.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/property-editor-ui-content-picker.test.ts @@ -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` `); + element = await fixture(html` `); }); 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) { diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/property-editor-ui-tree-picker.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/property-editor-ui-tree-picker.stories.ts deleted file mode 100644 index ee40331f33..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/property-editor-ui-tree-picker.stories.ts +++ /dev/null @@ -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 = () => - html``; -AAAOverview.storyName = 'Overview'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/types.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/types.ts new file mode 100644 index 0000000000..9c8a7dafb8 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/types.ts @@ -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; +}; + +export type UmbContentPickerDynamicRootQueryStep = { + unique: string; + alias: string; + anyOfDocTypeKeys?: Array; +};