diff --git a/src/Umbraco.Web.UI.Client/package-lock.json b/src/Umbraco.Web.UI.Client/package-lock.json index 152991b7d7..c16ec5f0a7 100644 --- a/src/Umbraco.Web.UI.Client/package-lock.json +++ b/src/Umbraco.Web.UI.Client/package-lock.json @@ -17,6 +17,7 @@ "@umbraco-ui/uui-modal-sidebar": "file:umbraco-ui-uui-modal-sidebar-0.0.0.tgz", "element-internals-polyfill": "^1.1.11", "lit": "^2.3.1", + "lodash": "^4.17.21", "openapi-typescript-fetch": "^1.1.3", "router-slot": "^1.5.5", "rxjs": "^7.5.6", @@ -15058,8 +15059,8 @@ }, "node_modules/lodash": { "version": "4.17.21", - "dev": true, - "license": "MIT" + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, "node_modules/lodash.camelcase": { "version": "4.3.0", @@ -34145,7 +34146,8 @@ }, "lodash": { "version": "4.17.21", - "dev": true + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, "lodash.camelcase": { "version": "4.3.0", diff --git a/src/Umbraco.Web.UI.Client/package.json b/src/Umbraco.Web.UI.Client/package.json index ecf64f60af..7a00a9c988 100644 --- a/src/Umbraco.Web.UI.Client/package.json +++ b/src/Umbraco.Web.UI.Client/package.json @@ -46,6 +46,7 @@ "@umbraco-ui/uui-modal-sidebar": "file:umbraco-ui-uui-modal-sidebar-0.0.0.tgz", "element-internals-polyfill": "^1.1.11", "lit": "^2.3.1", + "lodash": "^4.17.21", "openapi-typescript-fetch": "^1.1.3", "router-slot": "^1.5.5", "rxjs": "^7.5.6", diff --git a/src/Umbraco.Web.UI.Client/schemas/api/api.yml b/src/Umbraco.Web.UI.Client/schemas/api/api.yml index a0a4f12323..35b7cb8ce2 100644 --- a/src/Umbraco.Web.UI.Client/schemas/api/api.yml +++ b/src/Umbraco.Web.UI.Client/schemas/api/api.yml @@ -605,6 +605,8 @@ components: MetaPropertyEditorUI: type: object properties: + label: + type: string propertyEditor: type: string icon: @@ -623,6 +625,7 @@ components: required: - properties required: + - label - propertyEditor - icon - group diff --git a/src/Umbraco.Web.UI.Client/schemas/generated-schema.ts b/src/Umbraco.Web.UI.Client/schemas/generated-schema.ts index 76366b370d..6e9f89169e 100644 --- a/src/Umbraco.Web.UI.Client/schemas/generated-schema.ts +++ b/src/Umbraco.Web.UI.Client/schemas/generated-schema.ts @@ -183,6 +183,7 @@ export interface components { propertyEditorUI: string; }; MetaPropertyEditorUI: { + label: string; propertyEditor: string; icon: string; group: string; diff --git a/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/property-editor-ui-picker/modal-layout-property-editor-ui-picker.element.ts b/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/property-editor-ui-picker/modal-layout-property-editor-ui-picker.element.ts index 4ee3bc6a46..25b2bf6c84 100644 --- a/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/property-editor-ui-picker/modal-layout-property-editor-ui-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/property-editor-ui-picker/modal-layout-property-editor-ui-picker.element.ts @@ -3,6 +3,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { customElement, property, state } from 'lit/decorators.js'; import { repeat } from 'lit/directives/repeat.js'; import { Subscription } from 'rxjs'; +import { groupBy } from 'lodash'; import { UmbContextConsumerMixin } from '../../../../context'; import type { UUIInputEvent } from '@umbraco-ui/uui'; @@ -19,13 +20,6 @@ interface GroupedPropertyEditorUIs { [key: string]: Array; } -const groupBy = (xs: Array, key: string) => { - return xs.reduce(function (rv, x) { - (rv[x[key]] = rv[x[key]] || []).push(x); - return rv; - }, {}); -}; - @customElement('umb-modal-layout-property-editor-ui-picker') export class UmbModalLayoutPropertyEditorUIPickerElement extends UmbContextConsumerMixin(LitElement) { static styles = [ @@ -136,7 +130,7 @@ export class UmbModalLayoutPropertyEditorUIPickerElement extends UmbContextConsu ?.extensionsOfType('propertyEditorUI') .subscribe((propertyEditorUIs) => { this._propertyEditorUIs = propertyEditorUIs; - this._groupedPropertyEditorUIs = groupBy(propertyEditorUIs, 'group'); + this._groupedPropertyEditorUIs = groupBy(propertyEditorUIs, 'meta.group'); }); } @@ -160,7 +154,7 @@ export class UmbModalLayoutPropertyEditorUIPickerElement extends UmbContextConsu ); }); - this._groupedPropertyEditorUIs = groupBy(result, 'group'); + this._groupedPropertyEditorUIs = groupBy(result, 'meta.group'); } private _close() { @@ -214,7 +208,7 @@ export class UmbModalLayoutPropertyEditorUIPickerElement extends UmbContextConsu (propertyEditorUI) => html`
    • ` )} diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/property-editor.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/property-editor.data.ts index ce20226609..5d2357b2a4 100644 --- a/src/Umbraco.Web.UI.Client/src/mocks/data/property-editor.data.ts +++ b/src/Umbraco.Web.UI.Client/src/mocks/data/property-editor.data.ts @@ -318,30 +318,6 @@ export const data: Array = [ icon: 'umb:autofill', alias: 'Umbraco.Custom', }, - { - isSystem: false, - group: 'Custom', - hasConfig: true, - name: 'String', - icon: 'umb:autofill', - alias: 'Umbraco.String', - config: { - properties: [ - { - alias: 'minChars', - label: 'Minimum allowed characters', - description: 'If empty, no min characters limit', - propertyEditorUI: 'Umb.PropertyEditorUI.Number', - }, - { - alias: 'maxChars', - label: 'Maximum allowed characters', - description: 'If empty, 512 character limit', - propertyEditorUI: 'Umb.PropertyEditorUI.Number', - }, - ], - }, - }, ]; // Temp mocked database diff --git a/src/Umbraco.Web.UI.Client/src/mocks/domains/manifests.handlers.ts b/src/Umbraco.Web.UI.Client/src/mocks/domains/manifests.handlers.ts index e723a63eb6..fb4bbaac84 100644 --- a/src/Umbraco.Web.UI.Client/src/mocks/domains/manifests.handlers.ts +++ b/src/Umbraco.Web.UI.Client/src/mocks/domains/manifests.handlers.ts @@ -28,8 +28,9 @@ export const manifestDevelopmentHandler = rest.get(umbracoPath('/manifests'), (_ js: '/src/mocks/App_Plugins/property-editor.js', elementName: 'my-property-editor-ui-custom', meta: { + label: 'My Custom Property', icon: 'document', - group: 'common', + group: 'Common', propertyEditor: 'Umbraco.Custom', }, }, diff --git a/src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts b/src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts index d7faea865d..b1b8e5fdaf 100644 --- a/src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts @@ -133,23 +133,25 @@ export const internalManifests: Array Promise import('./backoffice/property-editors/text/property-editor-text.element'), meta: { - icon: 'edit', - group: 'common', + label: 'Text', + icon: 'umb:edit', + group: 'Common', propertyEditor: 'Umbraco.TextBox', }, }, { type: 'propertyEditorUI', alias: 'Umb.PropertyEditorUI.Textarea', - name: 'Textarea', + name: 'Textarea Property Editor UI', elementName: 'umb-property-editor-textarea', loader: () => import('./backoffice/property-editors/textarea/property-editor-textarea.element'), meta: { - icon: 'edit', - group: 'common', + label: 'Textarea', + icon: 'umb:edit', + group: 'Common', propertyEditor: 'Umbraco.TextArea', config: { properties: [ @@ -166,11 +168,12 @@ export const internalManifests: Array Promise import('./backoffice/property-editors/context-example/property-editor-context-example.element'), meta: { - icon: 'favorite', - group: 'common', + label: 'Context Example', + icon: 'umb:favorite', + group: 'Common', propertyEditor: 'Umbraco.Custom', config: { properties: [ @@ -186,9 +189,10 @@ export const internalManifests: Array Promise import('./backoffice/property-editors/number/property-editor-number.element'), meta: { + label: 'Number', icon: 'umb:autofill', group: 'Common', propertyEditor: 'Umbraco.Integer', @@ -323,13 +327,14 @@ export const internalManifests: Array Promise import('./backoffice/property-editors/content-picker/property-editor-content-picker.element'), meta: { + label: 'Content Picker', propertyEditor: 'Umbraco.ContentPicker', - icon: 'document', - group: 'common', + icon: 'umb:document', + group: 'Common', }, }, { @@ -537,38 +542,4 @@ export const internalManifests: Array Promise import('./backoffice/property-editors/textarea/property-editor-textarea.element'), - meta: { - icon: 'edit', - group: 'common', - propertyEditor: 'Umbraco.Unknown', - config: { - properties: [ - { - alias: 'rows', - label: 'Number of rows', - description: 'If empty - 10 rows would be set as the default value', - propertyEditorUI: 'Umb.PropertyEditorUI.Number', - }, - ], - }, - }, - }, - { - type: 'propertyEditorUI', - alias: 'Umb.PropertyEditorUI.TextField', - name: 'Text Field', - elementName: 'umb-property-editor-text', - loader: () => import('./backoffice/property-editors/text/property-editor-text.element'), - meta: { - icon: 'edit', - group: 'common', - propertyEditor: 'Umbraco.Unknown', - }, - }, ]; diff --git a/src/Umbraco.Web.UI.Client/temp-schema-generator/manifests.ts b/src/Umbraco.Web.UI.Client/temp-schema-generator/manifests.ts index fe3c658498..8bcc801457 100644 --- a/src/Umbraco.Web.UI.Client/temp-schema-generator/manifests.ts +++ b/src/Umbraco.Web.UI.Client/temp-schema-generator/manifests.ts @@ -100,6 +100,7 @@ export interface MetaTreeItemAction { weight: number; } export interface MetaPropertyEditorUI extends PropertyEditorConfig { + label: string; propertyEditor: string; icon: string; group: string;