diff --git a/src/Umbraco.Web.UI.Client/examples/block-custom-view/README.md b/src/Umbraco.Web.UI.Client/examples/block-custom-view/README.md new file mode 100644 index 0000000000..e0894b30b7 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/examples/block-custom-view/README.md @@ -0,0 +1,7 @@ +# Property Dataset Dashboard Example + +This example is a work in progress example of how to write a property editor. + +This example covers a few points: + +- Using an existing Property Editor Schema diff --git a/src/Umbraco.Web.UI.Client/examples/block-custom-view/block-custom-view.ts b/src/Umbraco.Web.UI.Client/examples/block-custom-view/block-custom-view.ts new file mode 100644 index 0000000000..abd194cf81 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/examples/block-custom-view/block-custom-view.ts @@ -0,0 +1,42 @@ +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; +import { html, customElement, LitElement, property, css } from '@umbraco-cms/backoffice/external/lit'; +import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api'; +import type { UmbBlockDataType, UmbBlockEditorCustomViewElement } from '@umbraco-cms/backoffice/extension-registry'; + +@customElement('example-block-custom-view') +export class ExampleBlockCustomView extends UmbElementMixin(LitElement) implements UmbBlockEditorCustomViewElement { + // + @property({ attribute: false }) + content?: UmbBlockDataType; + + override render() { + return html` +
+
My Custom View
+

Headline: ${this.content.headline}

+
+ `; + } + + static override styles = [ + UmbTextStyles, + css` + :host { + display: block; + height: 100%; + box-sizing: border-box; + background-color: #dddddd; + border-radius: 9px; + padding: 12px; + } + `, + ]; +} + +export default ExampleBlockCustomView; + +declare global { + interface HTMLElementTagNameMap { + 'example-block-custom-view': ExampleBlockCustomView; + } +} diff --git a/src/Umbraco.Web.UI.Client/examples/block-custom-view/index.ts b/src/Umbraco.Web.UI.Client/examples/block-custom-view/index.ts new file mode 100644 index 0000000000..e50355a08b --- /dev/null +++ b/src/Umbraco.Web.UI.Client/examples/block-custom-view/index.ts @@ -0,0 +1,12 @@ +import type { ManifestBlockEditorCustomView } from '@umbraco-cms/backoffice/extension-registry'; + +export const manifests: Array = [ + { + type: 'blockEditorCustomView', + alias: 'Umb.blockEditorCustomView.TestView', + name: 'Block Editor Custom View Test', + element: () => import('./block-custom-view.js'), + forContentTypeAlias: 'headlineUmbracoDemoBlock', + forBlockEditor: 'block-grid', + }, +]; diff --git a/src/Umbraco.Web.UI.Client/examples/property-editor/README.md b/src/Umbraco.Web.UI.Client/examples/property-editor/README.md new file mode 100644 index 0000000000..e0894b30b7 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/examples/property-editor/README.md @@ -0,0 +1,7 @@ +# Property Dataset Dashboard Example + +This example is a work in progress example of how to write a property editor. + +This example covers a few points: + +- Using an existing Property Editor Schema diff --git a/src/Umbraco.Web.UI.Client/examples/property-editor/index.ts b/src/Umbraco.Web.UI.Client/examples/property-editor/index.ts new file mode 100644 index 0000000000..389e110866 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/examples/property-editor/index.ts @@ -0,0 +1,31 @@ +import type { ManifestPropertyEditorUi } from '@umbraco-cms/backoffice/extension-registry'; + +export const manifests: Array = [ + { + type: 'propertyEditorUi', + alias: 'example.propertyEditorUi.propertyEditor', + name: 'Example Property Editor UI', + element: () => import('./property-editor.js'), + meta: { + label: 'Example Editor', + propertyEditorSchemaAlias: 'Umbraco.ListView', + icon: 'icon-code', + group: 'common', + settings: { + properties: [ + { + alias: 'customText', + label: 'Custom text', + propertyEditorUiAlias: 'Umb.PropertyEditorUi.TextBox', + }, + ], + defaultData: [ + { + alias: 'customText', + value: 'Default value', + }, + ], + }, + }, + }, +]; diff --git a/src/Umbraco.Web.UI.Client/examples/property-editor/property-editor.ts b/src/Umbraco.Web.UI.Client/examples/property-editor/property-editor.ts new file mode 100644 index 0000000000..029d1f9b4e --- /dev/null +++ b/src/Umbraco.Web.UI.Client/examples/property-editor/property-editor.ts @@ -0,0 +1,20 @@ +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; +import { html, customElement, LitElement } from '@umbraco-cms/backoffice/external/lit'; +import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api'; + +@customElement('example-property-editor') +export class ExamplePropertyEditor extends UmbElementMixin(LitElement) { + override render() { + return html`

Property Editor Example

`; + } + + static override styles = [UmbTextStyles]; +} + +export default ExamplePropertyEditor; + +declare global { + interface HTMLElementTagNameMap { + 'example-property-editor': ExamplePropertyEditor; + } +} diff --git a/src/Umbraco.Web.UI.Client/package-lock.json b/src/Umbraco.Web.UI.Client/package-lock.json index dafc1e3c8f..51e8c32c74 100644 --- a/src/Umbraco.Web.UI.Client/package-lock.json +++ b/src/Umbraco.Web.UI.Client/package-lock.json @@ -52,7 +52,7 @@ "@hey-api/openapi-ts": "^0.48.3", "@mdx-js/react": "^3.0.1", "@open-wc/testing": "^4.0.0", - "@playwright/test": "^1.45.2", + "@playwright/test": "^1.45.3", "@rollup/plugin-commonjs": "^26.0.1", "@rollup/plugin-json": "^6.1.0", "@rollup/plugin-node-resolve": "^15.2.3", @@ -97,7 +97,7 @@ "storybook": "^7.6.17", "tiny-glob": "^0.2.9", "tsc-alias": "^1.8.10", - "typedoc": "^0.26.4", + "typedoc": "^0.26.5", "typescript": "^5.5.3", "typescript-eslint": "^7.16.1", "typescript-json-schema": "^0.64.0", @@ -3386,12 +3386,12 @@ } }, "node_modules/@playwright/test": { - "version": "1.45.2", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.45.2.tgz", - "integrity": "sha512-JxG9eq92ET75EbVi3s+4sYbcG7q72ECeZNbdBlaMkGcNbiDQ4cAi8U2QP5oKkOx+1gpaiL1LDStmzCaEM1Z6fQ==", + "version": "1.45.3", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.45.3.tgz", + "integrity": "sha512-UKF4XsBfy+u3MFWEH44hva1Q8Da28G6RFtR2+5saw+jgAFQV5yYnB1fu68Mz7fO+5GJF3wgwAIs0UelU8TxFrA==", "dev": true, "dependencies": { - "playwright": "1.45.2" + "playwright": "1.45.3" }, "bin": { "playwright": "cli.js" @@ -17498,12 +17498,12 @@ } }, "node_modules/playwright": { - "version": "1.45.2", - "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.45.2.tgz", - "integrity": "sha512-ReywF2t/0teRvNBpfIgh5e4wnrI/8Su8ssdo5XsQKpjxJj+jspm00jSoz9BTg91TT0c9HRjXO7LBNVrgYj9X0g==", + "version": "1.45.3", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.45.3.tgz", + "integrity": "sha512-QhVaS+lpluxCaioejDZ95l4Y4jSFCsBvl2UZkpeXlzxmqS+aABr5c82YmfMHrL6x27nvrvykJAFpkzT2eWdJww==", "dev": true, "dependencies": { - "playwright-core": "1.45.2" + "playwright-core": "1.45.3" }, "bin": { "playwright": "cli.js" @@ -17516,9 +17516,9 @@ } }, "node_modules/playwright-core": { - "version": "1.45.2", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.45.2.tgz", - "integrity": "sha512-ha175tAWb0dTK0X4orvBIqi3jGEt701SMxMhyujxNrgd8K0Uy5wMSwwcQHtyB4om7INUkfndx02XnQ2p6dvLDw==", + "version": "1.45.3", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.45.3.tgz", + "integrity": "sha512-+ym0jNbcjikaOwwSZycFbwkWgfruWvYlJfThKYAlImbxUgdWFO2oW70ojPm4OpE4t6TAo2FY/smM+hpVTtkhDA==", "dev": true, "bin": { "playwright-core": "cli.js" @@ -20084,9 +20084,9 @@ "dev": true }, "node_modules/typedoc": { - "version": "0.26.4", - "resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.26.4.tgz", - "integrity": "sha512-FlW6HpvULDKgc3rK04V+nbFyXogPV88hurarDPOjuuB5HAwuAlrCMQ5NeH7Zt68a/ikOKu6Z/0hFXAeC9xPccQ==", + "version": "0.26.5", + "resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.26.5.tgz", + "integrity": "sha512-Vn9YKdjKtDZqSk+by7beZ+xzkkr8T8CYoiasqyt4TTRFy5+UHzL/mF/o4wGBjRF+rlWQHDb0t6xCpA3JNL5phg==", "dev": true, "dependencies": { "lunr": "^2.3.9", diff --git a/src/Umbraco.Web.UI.Client/package.json b/src/Umbraco.Web.UI.Client/package.json index b9bf789dc5..d7cf9d1308 100644 --- a/src/Umbraco.Web.UI.Client/package.json +++ b/src/Umbraco.Web.UI.Client/package.json @@ -223,7 +223,7 @@ "@hey-api/openapi-ts": "^0.48.3", "@mdx-js/react": "^3.0.1", "@open-wc/testing": "^4.0.0", - "@playwright/test": "^1.45.2", + "@playwright/test": "^1.45.3", "@rollup/plugin-commonjs": "^26.0.1", "@rollup/plugin-json": "^6.1.0", "@rollup/plugin-node-resolve": "^15.2.3", @@ -268,7 +268,7 @@ "storybook": "^7.6.17", "tiny-glob": "^0.2.9", "tsc-alias": "^1.8.10", - "typedoc": "^0.26.4", + "typedoc": "^0.26.5", "typescript": "^5.5.3", "typescript-eslint": "^7.16.1", "typescript-json-schema": "^0.64.0", diff --git a/src/Umbraco.Web.UI.Client/src/assets/css/umbraco-blockgridlayout-flexbox.css b/src/Umbraco.Web.UI.Client/src/assets/css/umbraco-blockgridlayout-flexbox.css deleted file mode 100644 index 3f921c0470..0000000000 --- a/src/Umbraco.Web.UI.Client/src/assets/css/umbraco-blockgridlayout-flexbox.css +++ /dev/null @@ -1,35 +0,0 @@ -/** Example of how a grid layout stylehseet could be done with Flex box: */ - -.umb-block-grid__layout-container { - position: relative; - display: flex; - flex-wrap: wrap; - gap: var(--umb-block-grid--row-gap, 0) var(--umb-block-grid--column-gap, 0); -} -.umb-block-grid__layout-item { - position: relative; - --umb-block-grid__layout-item-calc: calc(var(--umb-block-grid--item-column-span) / var(--umb-block-grid--grid-columns)); - width: calc(var(--umb-block-grid__layout-item-calc) * 100% - (1 - var(--umb-block-grid__layout-item-calc)) * var(--umb-block-grid--column-gap, 0px)); -} - - -.umb-block-grid__area-container, .umb-block-grid__block--view::part(area-container) { - position: relative; - display: flex; - flex-wrap: wrap; - width: 100%; - gap: var(--umb-block-grid--areas-row-gap, 0) var(--umb-block-grid--areas-column-gap, 0); -} -.umb-block-grid__area { - position: relative; - height: 100%; - display: flex; - flex-direction: column; - --umb-block-grid__area-calc: calc(var(--umb-block-grid--area-column-span) / var(--umb-block-grid--area-grid-columns, 1)); - width: calc(var(--umb-block-grid__area-calc) * 100% - (1 - var(--umb-block-grid__area-calc)) * var(--umb-block-grid--areas-column-gap, 0px)); -} - - -.umb-block-grid__actions { - clear: both; -} diff --git a/src/Umbraco.Web.UI.Client/src/assets/css/umbraco-blockgridlayout.css b/src/Umbraco.Web.UI.Client/src/assets/css/umbraco-blockgridlayout.css deleted file mode 100644 index 8a4f567cac..0000000000 --- a/src/Umbraco.Web.UI.Client/src/assets/css/umbraco-blockgridlayout.css +++ /dev/null @@ -1,46 +0,0 @@ -.umb-block-grid__layout-container { - position: relative; - display: grid; - grid-template-columns: repeat(var(--umb-block-grid--grid-columns, 1), minmax(0, 1fr)); - grid-auto-flow: row; - grid-auto-rows: minmax(50px, min-content); - - column-gap: var(--umb-block-grid--column-gap, 0); - row-gap: var(--umb-block-grid--row-gap, 0); -} -.umb-block-grid__layout-item { - position: relative; - /* For small devices we scale columnSpan by three, to make everything bigger than 1/3 take full width: */ - grid-column-end: span min(calc(var(--umb-block-grid--item-column-span, 1) * 3), var(--umb-block-grid--grid-columns)); - grid-row: span var(--umb-block-grid--item-row-span, 1); -} - - -.umb-block-grid__area-container, .umb-block-grid__block--view::part(area-container) { - position: relative; - display: grid; - grid-template-columns: repeat(var(--umb-block-grid--area-grid-columns, var(--umb-block-grid--grid-columns, 1)), minmax(0, 1fr)); - grid-auto-flow: row; - grid-auto-rows: minmax(50px, min-content); - - column-gap: var(--umb-block-grid--areas-column-gap, 0); - row-gap: var(--umb-block-grid--areas-row-gap, 0); -} -.umb-block-grid__area { - position: relative; - height: 100%; - display: flex; - flex-direction: column; - /* For small devices we scale columnSpan by three, to make everything bigger than 1/3 take full width: */ - grid-column-end: span min(calc(var(--umb-block-grid--area-column-span, 1) * 3), var(--umb-block-grid--area-grid-columns)); - grid-row: span var(--umb-block-grid--area-row-span, 1); -} - -@media (min-width:1024px) { - .umb-block-grid__layout-item { - grid-column-end: span min(var(--umb-block-grid--item-column-span, 1), var(--umb-block-grid--grid-columns)); - } - .umb-block-grid__area { - grid-column-end: span min(var(--umb-block-grid--area-column-span, 1), var(--umb-block-grid--area-grid-columns)); - } -} \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts index 0aca405fba..7e0e77d5cd 100644 --- a/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts +++ b/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts @@ -695,6 +695,7 @@ export default { hasReferencesDeleteConsequence: 'Deleting %0% will delete the properties and their data from the following items', acceptDeleteConsequence: 'I understand this action will delete the properties and data based on this Data Type', + noConfiguration: 'There is no configuration for this property editor.', }, errorHandling: { errorButDataWasSaved: @@ -1734,11 +1735,11 @@ export default { enabled: 'Enabled', events: 'Events', event: 'Event', - url: 'Url', + url: 'URL', types: 'Types', webhookKey: 'Webhook key', retryCount: 'Retry count', - urlDescription: 'The url to call when the webhook is triggered.', + urlDescription: 'The URL to call when the webhook is triggered.', eventDescription: 'The events for which the webhook should be triggered.', contentTypeDescription: 'Only trigger the webhook for a specific content type.', enabledDescription: 'Is the webhook enabled?', @@ -1746,6 +1747,7 @@ export default { contentType: 'Content Type', headers: 'Headers', selectEventFirst: 'Please select an event first.', + selectEvents: 'Select events', }, languages: { addLanguage: 'Add language', diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-layout-stylesheet/property-editor-ui-block-grid-layout-stylesheet.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-layout-stylesheet/property-editor-ui-block-grid-layout-stylesheet.element.ts index 7d16db32d8..e1103cdf7c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-layout-stylesheet/property-editor-ui-block-grid-layout-stylesheet.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-layout-stylesheet/property-editor-ui-block-grid-layout-stylesheet.element.ts @@ -79,7 +79,9 @@ export class UmbPropertyEditorUIBlockGridLayoutStylesheetElement .min=${this._limitMin} .max=${this._limitMax}>
- Link to default layout stylesheet + Link to default layout stylesheet `; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-toggle/input-toggle.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-toggle/input-toggle.element.ts index 4a0eadee2a..58249d3659 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-toggle/input-toggle.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-toggle/input-toggle.element.ts @@ -26,6 +26,15 @@ export class UmbInputToggleElement extends UUIFormControlMixin(UmbLitElement, '' @property({ type: String }) labelOff?: string; + /** + * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content. + * @type {boolean} + * @attr + * @default false + */ + @property({ type: Boolean, reflect: true }) + readonly = false; + @state() _currentLabel?: string; @@ -52,7 +61,8 @@ export class UmbInputToggleElement extends UUIFormControlMixin(UmbLitElement, '' return html``; + @change=${this.#onChange} + ?readonly=${this.readonly}>`; } static override styles = [ diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/culture/repository/culture.repository.ts b/src/Umbraco.Web.UI.Client/src/packages/core/culture/repository/culture.repository.ts index 042e39713a..0d9ec60291 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/culture/repository/culture.repository.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/culture/repository/culture.repository.ts @@ -18,3 +18,5 @@ export class UmbCultureRepository extends UmbControllerBase implements UmbApi { override destroy() {} } + +export { UmbCultureRepository as api }; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/culture/repository/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/culture/repository/manifests.ts index 5e3e1ac52a..2862e1e2ba 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/culture/repository/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/culture/repository/manifests.ts @@ -1,4 +1,3 @@ -import { UmbCultureRepository } from './culture.repository.js'; import type { ManifestRepository, ManifestTypes } from '@umbraco-cms/backoffice/extension-registry'; export const UMB_CULTURE_REPOSITORY_ALIAS = 'Umb.Repository.Culture'; @@ -7,7 +6,7 @@ const repository: ManifestRepository = { type: 'repository', alias: UMB_CULTURE_REPOSITORY_ALIAS, name: 'Cultures Repository', - api: UmbCultureRepository, + api: () => import('./culture.repository.js'), }; export const manifests: Array = [repository]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/embedded-media/repository/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/embedded-media/repository/manifests.ts index 580f3e1026..dbce95b73d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/embedded-media/repository/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/embedded-media/repository/manifests.ts @@ -1,4 +1,3 @@ -import { UmbOEmbedRepository } from './oembed.repository.js'; import type { ManifestRepository, ManifestTypes } from '@umbraco-cms/backoffice/extension-registry'; export const UMB_OEMBED_REPOSITORY_ALIAS = 'Umb.Repository.OEmbed'; @@ -7,7 +6,7 @@ const repository: ManifestRepository = { type: 'repository', alias: UMB_OEMBED_REPOSITORY_ALIAS, name: 'OEmbed Repository', - api: UmbOEmbedRepository, + api: () => import('./oembed.repository.js'), }; export const manifests: Array = [repository]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/embedded-media/repository/oembed.repository.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/embedded-media/repository/oembed.repository.ts index 344c067453..983232efe2 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/embedded-media/repository/oembed.repository.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/embedded-media/repository/oembed.repository.ts @@ -18,3 +18,5 @@ export class UmbOEmbedRepository extends UmbControllerBase implements UmbApi { return { error }; } } + +export { UmbOEmbedRepository as api }; diff --git a/src/Umbraco.Web.UI.Client/src/packages/data-type/components/property-editor-config/property-editor-config.element.ts b/src/Umbraco.Web.UI.Client/src/packages/data-type/components/property-editor-config/property-editor-config.element.ts index 58953b5163..46a9136d23 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/data-type/components/property-editor-config/property-editor-config.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/data-type/components/property-editor-config/property-editor-config.element.ts @@ -12,7 +12,7 @@ import { UmbDataPathPropertyValueFilter } from '@umbraco-cms/backoffice/validati */ @customElement('umb-property-editor-config') export class UmbPropertyEditorConfigElement extends UmbLitElement { - // TODO: Make this element generic, so its not bound to DATA-TYPEs. This will require moving some functionality of Data-Type-Context to this. and this might need to self provide a variant Context for its inner property editor UIs. + // TODO: Make this element generic, so its not bound to DATA-TYPEs. This will require moving some functionality of Data-Type-Context to this. and this might need to self provide a variant Context for its inner property editor UIs. [NL] #workspaceContext?: typeof UMB_DATA_TYPE_WORKSPACE_CONTEXT.TYPE; @state() @@ -53,7 +53,9 @@ export class UmbPropertyEditorConfigElement extends UmbLitElement { property-editor-ui-alias=${property.propertyEditorUiAlias} .config=${property.config}>`, ) - : html`
No configuration
`; + : html`There is no configuration for this property editor.`; } static override styles = [UmbTextStyles]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/data-type/workspace/data-type-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/data-type/workspace/data-type-workspace.context.ts index 4442f73ec6..49aa80140f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/data-type/workspace/data-type-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/data-type/workspace/data-type-workspace.context.ts @@ -30,6 +30,24 @@ import { } from '@umbraco-cms/backoffice/entity-action'; type EntityType = UmbDataTypeDetailModel; + +/** + * @class UmbDataTypeWorkspaceContext + * @description - Context for handling data type workspace + * There is two overall code flows to be aware about: + * + * propertyEditorUiAlias is observed + * loads propertyEditorUi manifest + * then the propertyEditorSchemaAlias is set to what the UI is configured for. + * + * propertyEditorSchemaAlias is observed + * loads the propertyEditorSchema manifest + * if no UI is defined then the propertyEditorSchema manifest default ui is set for the propertyEditorUiAlias. + * + * This supports two cases: + * - when editing an existing data type that only has a schema alias set, then it gets the UI set. + * - a new property editor ui is picked for a data-type, uses the data-type configuration to set the schema, if such is configured for the Property Editor UI. (The user picks the UI via the UI, the schema comes from the UI that the user picked, we store both on the data-type) + */ export class UmbDataTypeWorkspaceContext extends UmbSubmittableWorkspaceContextBase implements UmbInvariantDatasetWorkspaceContext, UmbRoutableWorkspaceContext @@ -72,8 +90,6 @@ export class UmbDataTypeWorkspaceContext #settingsDefaultData?: Array; - #propertyEditorUISettingsSchemaAlias?: string; - #propertyEditorUiIcon = new UmbStringState(null); readonly propertyEditorUiIcon = this.#propertyEditorUiIcon.asObservable(); @@ -82,6 +98,8 @@ export class UmbDataTypeWorkspaceContext constructor(host: UmbControllerHost) { super(host, 'Umb.Workspace.DataType'); + + this.#observePropertyEditorSchemaAlias(); this.#observePropertyEditorUIAlias(); this.routes.setRoutes([ @@ -121,7 +139,7 @@ export class UmbDataTypeWorkspaceContext this.#propertyEditorUISettingsDefaultData = []; this.#settingsDefaultData = undefined; - this._mergeConfigProperties(); + this.#mergeConfigProperties(); } // Hold the last set property editor ui alias, so we know when it changes, so we can reset values. [NL] @@ -131,30 +149,13 @@ export class UmbDataTypeWorkspaceContext this.observe( this.propertyEditorUiAlias, async (propertyEditorUiAlias) => { - const previousPropertyEditorUIAlias = this.#lastPropertyEditorUIAlias; - this.#lastPropertyEditorUIAlias = propertyEditorUiAlias; + this.#propertyEditorUISettingsProperties = []; + this.#propertyEditorUISettingsDefaultData = []; + // we only want to react on the change if the alias is set or null. When it is undefined something is still loading if (propertyEditorUiAlias === undefined) return; - // if the property editor ui alias is not set, we use the default alias from the schema - if (propertyEditorUiAlias === null) { - await this.#observePropertyEditorSchemaAlias(); - if (this.#propertyEditorSchemaConfigDefaultUIAlias !== null) { - this.setPropertyEditorUiAlias(this.#propertyEditorSchemaConfigDefaultUIAlias); - } - } else { - await this.#setPropertyEditorUIConfig(propertyEditorUiAlias); - this.setPropertyEditorSchemaAlias(this.#propertyEditorUISettingsSchemaAlias!); - await this.#observePropertyEditorSchemaAlias(); - } - - if ( - this.getIsNew() || - (previousPropertyEditorUIAlias && previousPropertyEditorUIAlias !== propertyEditorUiAlias) - ) { - this.#transferConfigDefaultData(); - } - this._mergeConfigProperties(); + this.#observePropertyEditorUIManifest(propertyEditorUiAlias); }, 'editorUiAlias', ); @@ -164,13 +165,19 @@ export class UmbDataTypeWorkspaceContext return this.observe( this.propertyEditorSchemaAlias, (propertyEditorSchemaAlias) => { - this.#setPropertyEditorSchemaConfig(propertyEditorSchemaAlias); + this.#propertyEditorSchemaSettingsProperties = []; + this.#propertyEditorSchemaSettingsDefaultData = []; + this.#observePropertyEditorSchemaManifest(propertyEditorSchemaAlias); }, 'schemaAlias', - ).asPromise(); + ); } - #setPropertyEditorSchemaConfig(propertyEditorSchemaAlias?: string) { + #observePropertyEditorSchemaManifest(propertyEditorSchemaAlias?: string) { + if (!propertyEditorSchemaAlias) { + this.removeUmbControllerByAlias('schema'); + return; + } this.observe( propertyEditorSchemaAlias ? umbExtensionsRegistry.byTypeAndAlias('propertyEditorSchema', propertyEditorSchemaAlias) @@ -183,36 +190,56 @@ export class UmbDataTypeWorkspaceContext })); this.#propertyEditorSchemaSettingsDefaultData = manifest?.meta.settings?.defaultData || []; this.#propertyEditorSchemaConfigDefaultUIAlias = manifest?.meta.defaultPropertyEditorUiAlias || null; + if (this.#propertyEditorSchemaConfigDefaultUIAlias && this.getPropertyEditorUiAlias() === null) { + // Fallback to the default property editor ui for this property editor schema. + this.setPropertyEditorUiAlias(this.#propertyEditorSchemaConfigDefaultUIAlias); + } + this.#mergeConfigProperties(); }, 'schema', ); } - #setPropertyEditorUIConfig(propertyEditorUIAlias: string) { - return this.observe( + #observePropertyEditorUIManifest(propertyEditorUIAlias: string | null) { + if (!propertyEditorUIAlias) { + this.removeUmbControllerByAlias('editorUi'); + return; + } + this.observe( umbExtensionsRegistry.byTypeAndAlias('propertyEditorUi', propertyEditorUIAlias), (manifest) => { this.#propertyEditorUiIcon.setValue(manifest?.meta.icon || null); this.#propertyEditorUiName.setValue(manifest?.name || null); - this.#propertyEditorUISettingsSchemaAlias = manifest?.meta.propertyEditorSchemaAlias; // Maps properties to have a weight, so they can be sorted, notice UI properties have a +1000 weight compared to schema properties. this.#propertyEditorUISettingsProperties = (manifest?.meta.settings?.properties ?? []).map((x, i) => ({ ...x, weight: x.weight ?? 1000 + i, })); this.#propertyEditorUISettingsDefaultData = manifest?.meta.settings?.defaultData || []; + this.setPropertyEditorSchemaAlias(manifest?.meta.propertyEditorSchemaAlias); + this.#mergeConfigProperties(); }, 'editorUi', - ).asPromise(); + ); } - private _mergeConfigProperties() { + #mergeConfigProperties() { if (this.#propertyEditorSchemaSettingsProperties && this.#propertyEditorUISettingsProperties) { // Reset the value to this array, and then afterwards append: this.#properties.setValue(this.#propertyEditorSchemaSettingsProperties); // Append the UI settings properties to the schema properties, so they can override the schema properties: this.#properties.append(this.#propertyEditorUISettingsProperties); + + // If new or if the alias was changed then set default values. This 'complexity' to prevent setting default data when initialized [NL] + const previousPropertyEditorUIAlias = this.#lastPropertyEditorUIAlias; + this.#lastPropertyEditorUIAlias = this.getPropertyEditorUiAlias(); + if ( + this.getIsNew() || + (previousPropertyEditorUIAlias && previousPropertyEditorUIAlias !== this.#lastPropertyEditorUIAlias) + ) { + this.#transferConfigDefaultData(); + } } } @@ -301,9 +328,15 @@ export class UmbDataTypeWorkspaceContext this.#currentData.update({ name }); } + getPropertyEditorSchemaAlias() { + return this.#currentData.getValue()?.editorAlias; + } setPropertyEditorSchemaAlias(alias?: string) { this.#currentData.update({ editorAlias: alias }); } + getPropertyEditorUiAlias() { + return this.#currentData.getValue()?.editorUiAlias; + } setPropertyEditorUiAlias(alias?: string) { this.#currentData.update({ editorUiAlias: alias }); } diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/create/document-create-options-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/create/document-create-options-modal.element.ts index 522b6733d0..c6e010236a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/create/document-create-options-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/create/document-create-options-modal.element.ts @@ -119,7 +119,7 @@ export class UmbDocumentCreateOptionsModalElement extends UmbModalBaseElement< return html` ${when( - this._availableBlueprints.length === 0 && this.#documentTypeUnique, + this._availableBlueprints.length && this.#documentTypeUnique, () => this.#renderBlueprints(), () => this.#renderDocumentTypes(), )} diff --git a/src/Umbraco.Web.UI.Client/src/packages/health-check/views/health-check-group-box-overview.element.ts b/src/Umbraco.Web.UI.Client/src/packages/health-check/views/health-check-group-box-overview.element.ts index 42d8679729..3dadc4cee6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/health-check/views/health-check-group-box-overview.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/health-check/views/health-check-group-box-overview.element.ts @@ -64,25 +64,25 @@ export class UmbHealthCheckGroupBoxOverviewElement extends UmbLitElement { _renderCheckResults(resultObject: any) { return html`${resultObject.success > 0 ? html` - + ${resultObject.success} ` : nothing} ${resultObject.warning > 0 ? html` - + ${resultObject.warning} ` : nothing} ${resultObject.error > 0 ? html` - + ${resultObject.error} ` : nothing} ${resultObject.info > 0 ? html` - + ${resultObject.info} ` : nothing} `; diff --git a/src/Umbraco.Web.UI.Client/src/packages/health-check/views/health-check-group.element.ts b/src/Umbraco.Web.UI.Client/src/packages/health-check/views/health-check-group.element.ts index 787edc26c6..084d41a1a9 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/health-check/views/health-check-group.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/health-check/views/health-check-group.element.ts @@ -129,7 +129,7 @@ export class UmbDashboardHealthCheckGroupElement extends UmbLitElement { case StatusResultTypeModel.SUCCESS: return html``; case StatusResultTypeModel.WARNING: - return html``; + return html``; case StatusResultTypeModel.ERROR: return html``; case StatusResultTypeModel.INFO: diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-field.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-field.element.ts index 7ca51a65f9..c330b50c43 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-field.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-field.element.ts @@ -15,9 +15,6 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; @customElement('umb-image-cropper-field') export class UmbInputImageCropperFieldElement extends UmbLitElement { @property({ attribute: false }) - get value() { - return this.#value; - } set value(value) { if (!value) { this.crops = []; @@ -34,6 +31,9 @@ export class UmbInputImageCropperFieldElement extends UmbLitElement { this.requestUpdate(); } + get value() { + return this.#value; + } #value?: UmbImageCropperPropertyEditorValue; @state() diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-preview.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-preview.element.ts index 35f20b490d..a092f0868c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-preview.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-preview.element.ts @@ -1,9 +1,10 @@ import type { UmbImageCropperCrop, UmbImageCropperFocalPoint } from './index.js'; import { calculateExtrapolatedValue, clamp } from '@umbraco-cms/backoffice/utils'; -import { LitElement, css, html, nothing, customElement, property, query } from '@umbraco-cms/backoffice/external/lit'; +import { css, html, nothing, customElement, property, query } from '@umbraco-cms/backoffice/external/lit'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; @customElement('umb-image-cropper-preview') -export class UmbImageCropperPreviewElement extends LitElement { +export class UmbImageCropperPreviewElement extends UmbLitElement { @query('#image') imageElement!: HTMLImageElement; @query('#container') imageContainerElement!: HTMLImageElement; @@ -150,7 +151,9 @@ export class UmbImageCropperPreviewElement extends LitElement {
- ${this.label ?? this.crop.alias} + + ${this.crop.label !== undefined ? this.localize.string(this.crop.label) : (this.label ?? this.crop.alias)} + ${this.crop.width} x ${this.crop.height} ${this.crop.coordinates ? html`User defined` diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/types.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/types.ts index 649368b8a7..1def05fbb3 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/types.ts @@ -1,17 +1,9 @@ +import type { UmbCropModel, UmbFocalPointModel } from '../../types.js'; + export type UmbImageCropperPropertyEditorValue = { temporaryFileId?: string | null; - crops: Array<{ - alias: string; - coordinates?: { - x1: number; - x2: number; - y1: number; - y2: number; - }; - height: number; - width: number; - }>; - focalPoint: { left: number; top: number }; + crops: Array; + focalPoint: UmbFocalPointModel; src: string; }; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-rich-media/input-rich-media.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-rich-media/input-rich-media.element.ts index 43d8a51bc7..725d1502f2 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-rich-media/input-rich-media.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-rich-media/input-rich-media.element.ts @@ -1,7 +1,7 @@ import { UmbInputMediaElement } from '../input-media/index.js'; import { UmbMediaItemRepository } from '../../repository/index.js'; import { UMB_IMAGE_CROPPER_EDITOR_MODAL, UMB_MEDIA_PICKER_MODAL } from '../../modals/index.js'; -import type { UmbCropModel, UmbMediaPickerPropertyValue } from '../../property-editors/index.js'; +import type { UmbCropModel, UmbMediaPickerPropertyValue } from '../../types.js'; import type { UmbMediaItemModel } from '../../repository/index.js'; import type { UmbUploadableFileModel } from '../../dropzone/index.js'; import { customElement, html, nothing, property, repeat, state } from '@umbraco-cms/backoffice/external/lit'; @@ -122,13 +122,7 @@ export class UmbInputRichMediaElement extends UUIFormControlMixin(UmbLitElement, } @property({ type: Array }) - public set preselectedCrops(value: Array) { - this.#preselectedCrops = value; - } - public get preselectedCrops(): Array { - return this.#preselectedCrops; - } - #preselectedCrops: Array = []; + public preselectedCrops?: Array; @property({ type: Boolean }) public set focalPointEnabled(value: boolean) { diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/index.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/index.ts index ef56a68fe6..8ee054676a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/index.ts @@ -14,3 +14,5 @@ export { UMB_MEDIA_PICKER_MODAL } from './modals/media-picker/index.js'; export type { UmbMediaTreeItemModel } from './tree/index.js'; export { UmbMediaAuditLogRepository } from './audit-log/index.js'; + +export type * from './types.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.element.ts index 0641fbe118..846e26822c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.element.ts @@ -1,6 +1,6 @@ import { UmbMediaUrlRepository } from '../../repository/index.js'; import { UMB_MEDIA_PICKER_MODAL } from '../media-picker/media-picker-modal.token.js'; -import type { UmbCropModel } from '../../property-editors/index.js'; +import type { UmbCropModel } from '../../types.js'; import type { UmbInputImageCropperFieldElement } from '../../components/input-image-cropper/image-cropper-field.element.js'; import type { UmbImageCropperPropertyEditorValue } from '../../components/index.js'; import type { @@ -79,10 +79,21 @@ export class UmbImageCropperEditorModalElement extends UmbModalBaseElement< const item = data?.[0]; if (!item?.url) return; + + /** + * Combine the crops from the property editor with the stored crops and ignore any invalid crops + * (e.g. crops that have been removed from the property editor) + * @remark If a crop is removed from the property editor, it will be ignored and not saved + */ + const crops: Array = this._crops.map((crop) => { + const existingCrop = this.value.crops?.find((c) => c.alias === crop.alias); + return existingCrop ? { ...crop, ...existingCrop } : crop; + }); + const value: UmbImageCropperPropertyEditorValue = { ...this.value, src: item.url, - crops: this.value.crops?.length ? this.value.crops : this._crops, + crops, focalPoint: this.value.focalPoint ?? { left: 0.5, top: 0.5 }, }; this._imageCropperValue = value; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.token.ts index e5b4f47c0b..6371e4c56d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.token.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.token.ts @@ -1,5 +1,5 @@ import type { UmbImageCropperCrop } from '../../components/index.js'; -import type { UmbCropModel } from '../../property-editors/index.js'; +import type { UmbCropModel } from '../../property-editors/types.js'; import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; export interface UmbImageCropperEditorModalData { diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-picker/index.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-picker/index.ts index b246c984b2..7eddcc7572 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-picker/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-picker/index.ts @@ -1,33 +1 @@ export * from './property-editor-ui-media-picker.element.js'; - -export type UmbMediaPickerPropertyValue = { - key: string; - mediaKey: string; - mediaTypeAlias: string; - focalPoint: UmbFocalPointModel | null; - crops: Array; -}; - -export type UmbCropModel = { - alias: string; - height: number; - width: number; - coordinates?: { - x1: number; - x2: number; - y1: number; - y2: number; - }; -}; - -export interface UmbConfiguredCropModel { - label: string; - alias: string; - width: number; - height: number; -} - -export interface UmbFocalPointModel { - left: number; - top: number; -} diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-picker/property-editor-ui-media-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-picker/property-editor-ui-media-picker.element.ts index d80f7f33f7..4a1eff1fc9 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-picker/property-editor-ui-media-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-picker/property-editor-ui-media-picker.element.ts @@ -1,5 +1,5 @@ import type { UmbInputRichMediaElement } from '../../components/input-rich-media/input-rich-media.element.js'; -import type { UmbCropModel, UmbMediaPickerPropertyValue } from './index.js'; +import type { UmbCropModel, UmbMediaPickerPropertyValue } from '../types.js'; import { customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/types.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/types.ts new file mode 100644 index 0000000000..0baa97364e --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/types.ts @@ -0,0 +1,25 @@ +export type UmbMediaPickerPropertyValue = { + key: string; + mediaKey: string; + mediaTypeAlias: string; + focalPoint: UmbFocalPointModel | null; + crops: Array; +}; + +export type UmbCropModel = { + label?: string; + alias: string; + height: number; + width: number; + coordinates?: { + x1: number; + x2: number; + y1: number; + y2: number; + }; +}; + +export interface UmbFocalPointModel { + left: number; + top: number; +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/types.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/types.ts index 65dfefdd6c..a350ead8dd 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/types.ts @@ -30,3 +30,5 @@ export interface UmbMediaValueModel { } export interface UmbMediaVariantOptionModel extends UmbVariantOptionModel {} + +export type * from './property-editors/types.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/toggle/property-editor-ui-toggle.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/toggle/property-editor-ui-toggle.element.ts index ae1bb7f9a4..e2a2333e23 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/toggle/property-editor-ui-toggle.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/toggle/property-editor-ui-toggle.element.ts @@ -13,6 +13,15 @@ export class UmbPropertyEditorUIToggleElement extends UmbLitElement implements U @property({ type: Boolean }) value: undefined | boolean = undefined; + /** + * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content. + * @type {boolean} + * @attr + * @default false + */ + @property({ type: Boolean, reflect: true }) + readonly = false; + @state() _labelOff?: string; @@ -42,7 +51,8 @@ export class UmbPropertyEditorUIToggleElement extends UmbLitElement implements U .labelOff=${this._labelOff} ?checked=${this.value} ?showLabels=${this._showLabels} - @change=${this.#onChange}> + @change=${this.#onChange} + ?readonly=${this.readonly}> `; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/webhook/collection/views/table/column-layouts/boolean/webhook-table-boolean-column-layout.element.ts b/src/Umbraco.Web.UI.Client/src/packages/webhook/collection/views/table/column-layouts/boolean/webhook-table-boolean-column-layout.element.ts index 21f972c729..e16d4f4bb7 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/webhook/collection/views/table/column-layouts/boolean/webhook-table-boolean-column-layout.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/webhook/collection/views/table/column-layouts/boolean/webhook-table-boolean-column-layout.element.ts @@ -1,4 +1,4 @@ -import { html, nothing, customElement, property } from '@umbraco-cms/backoffice/external/lit'; +import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; @customElement('umb-webhook-table-boolean-column-layout') @@ -7,7 +7,7 @@ export class UmbWebhookTableBooleanColumnLayoutElement extends UmbLitElement { value = false; override render() { - return this.value ? html`` : nothing; + return html``; } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/webhook/collection/views/table/column-layouts/content-type/webhook-table-name-column-layout.element.ts b/src/Umbraco.Web.UI.Client/src/packages/webhook/collection/views/table/column-layouts/content-type/webhook-table-name-column-layout.element.ts index 032ca105a4..116bd06841 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/webhook/collection/views/table/column-layouts/content-type/webhook-table-name-column-layout.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/webhook/collection/views/table/column-layouts/content-type/webhook-table-name-column-layout.element.ts @@ -32,7 +32,7 @@ export class UmbWebhookTableContentTypeColumnLayoutElement extends UmbLitElement if (this.value?.contentTypeName && this.#repository) { const { data } = await this.#repository.requestItems(this.value.contentTypes); - this._contentTypes = data?.map((item) => item.name).join(', ') ?? ''; + this._contentTypes = data?.map((item) => this.localize.string(item.name)).join(', ') ?? ''; } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/webhook/collection/views/table/webhook-table-collection-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/webhook/collection/views/table/webhook-table-collection-view.element.ts index 5ac9a83cf8..4128f4e9d2 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/webhook/collection/views/table/webhook-table-collection-view.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/webhook/collection/views/table/webhook-table-collection-view.element.ts @@ -1,10 +1,9 @@ import type { UmbWebhookDetailModel } from '../../../types.js'; import type { UmbDefaultCollectionContext } from '@umbraco-cms/backoffice/collection'; +import { css, customElement, html, state } from '@umbraco-cms/backoffice/external/lit'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UMB_COLLECTION_CONTEXT } from '@umbraco-cms/backoffice/collection'; import type { UmbTableColumn, UmbTableConfig, UmbTableItem } from '@umbraco-cms/backoffice/components'; -import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit'; -import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import './column-layouts/boolean/webhook-table-boolean-column-layout.element.js'; import './column-layouts/name/webhook-table-name-column-layout.element.js'; @@ -21,25 +20,25 @@ export class UmbWebhookTableCollectionViewElement extends UmbLitElement { @state() private _tableColumns: Array = [ { - name: 'Name', + name: this.localize.term('general_name'), alias: 'name', elementName: 'umb-webhook-table-name-column-layout', }, { - name: 'Enabled', + name: this.localize.term('webhooks_enabled'), alias: 'enabled', elementName: 'umb-webhook-table-boolean-column-layout', }, { - name: 'URL', + name: this.localize.term('webhooks_url'), alias: 'url', }, { - name: 'Events', + name: this.localize.term('webhooks_events'), alias: 'events', }, { - name: 'Types', + name: this.localize.term('webhooks_types'), alias: 'types', elementName: 'umb-webhook-table-content-type-column-layout', }, @@ -112,7 +111,6 @@ export class UmbWebhookTableCollectionViewElement extends UmbLitElement { } static override styles = [ - UmbTextStyles, css` :host { display: flex; diff --git a/src/Umbraco.Web.UI.Client/src/packages/webhook/components/input-webhook-events.element.ts b/src/Umbraco.Web.UI.Client/src/packages/webhook/components/input-webhook-events.element.ts index 901dc34e41..f17bea9008 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/webhook/components/input-webhook-events.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/webhook/components/input-webhook-events.element.ts @@ -47,23 +47,29 @@ export class UmbInputWebhookEventsElement extends UmbLitElement { if (!this.events.length) return nothing; return html` - ${repeat( - this.events, - (item) => item.alias, - (item) => html` - ${item.eventName} - this.#removeEvent(item.alias)}> - `, - )} + + ${repeat( + this.events, + (item) => item.alias, + (item) => html` + + + + this.#removeEvent(item.alias)}> + + + `, + )} + `; } override render() { return html`${this.#renderEvents()} `; @@ -72,15 +78,8 @@ export class UmbInputWebhookEventsElement extends UmbLitElement { static override styles = [ UmbTextStyles, css` - :host { - display: grid; - grid-template-columns: 1fr auto; - gap: var(--uui-size-space-2) var(--uui-size-space-2); - align-items: center; - } - - #choose { - grid-column: -1 / 1; + #btn-add { + display: block; } `, ]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/webhook/components/input-webhook-headers.element.ts b/src/Umbraco.Web.UI.Client/src/packages/webhook/components/input-webhook-headers.element.ts index 6819cd267a..68bc822494 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/webhook/components/input-webhook-headers.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/webhook/components/input-webhook-headers.element.ts @@ -14,7 +14,7 @@ export class UmbInputWebhookHeadersElement extends UmbLitElement { private _headers: Array<{ name: string; value: string }> = []; @state() - private _headerNames: string[] = ['Accept', 'Content-Type', 'User-Agent', 'Content-Length']; + private _headerNames: string[] = ['Accept', 'Content-Length', 'Content-Type', 'User-Agent']; get #filterHeaderNames() { return this._headerNames.filter((name) => !this._headers.find((header) => header.name === name)); @@ -78,7 +78,7 @@ export class UmbInputWebhookHeadersElement extends UmbLitElement { .value=${header.value} @input=${(e: InputEvent) => this.#onInput(e, 'value', index)} list="valueList" /> - this.#removeHeader(index)} label="Remove"> + this.#removeHeader(index)} label=${this.localize.term('general_remove')}> `; } @@ -105,8 +105,8 @@ export class UmbInputWebhookHeadersElement extends UmbLitElement { if (!this._headers.length) return nothing; return html` - KEY - VALUE + Name + Value ${repeat( this._headers, diff --git a/src/Umbraco.Web.UI.Client/src/packages/webhook/components/webhook-events-modal/webhook-events-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/webhook/components/webhook-events-modal/webhook-events-modal.element.ts index d6b2fb13f5..7df91e91c6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/webhook/components/webhook-events-modal/webhook-events-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/webhook/components/webhook-events-modal/webhook-events-modal.element.ts @@ -1,9 +1,7 @@ import { UmbWebhookEventRepository } from '../../repository/event/webhook-event.repository.js'; import type { UmbWebhookEventModel } from '../../types.js'; import type { UmbWebhookPickerModalData, UmbWebhookPickerModalValue } from './webhook-events-modal.token.js'; -import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import { css, html, customElement, state, repeat } from '@umbraco-cms/backoffice/external/lit'; - +import { customElement, html, state, repeat } from '@umbraco-cms/backoffice/external/lit'; import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal'; import { UmbSelectionManager } from '@umbraco-cms/backoffice/utils'; @@ -67,32 +65,36 @@ export class UmbWebhookEventsModalElement extends UmbModalBaseElement< } override render() { - return html` - - ${repeat( - this._events, - (item) => item.alias, - (item) => html` - this.#selectionManager.select(item.alias)} - @deselected=${() => this.#selectionManager.deselect(item.alias)} - ?selected=${this.value.events.includes(item)}> - - - `, - )} - -
- - -
- `; + return html` + + + ${repeat( + this._events, + (item) => item.alias, + (item) => html` + this.#selectionManager.select(item.alias)} + @deselected=${() => this.#selectionManager.deselect(item.alias)} + ?selected=${this.value.events.includes(item)}> + + + `, + )} + +
+ + +
+ + `; } - - static override styles = [UmbTextStyles, css``]; } export default UmbWebhookEventsModalElement; diff --git a/src/Umbraco.Web.UI.Client/src/packages/webhook/workspace/webhook-root/webhook-root-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/packages/webhook/workspace/webhook-root/webhook-root-workspace.element.ts index 071ecf38ef..3149d847cc 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/webhook/workspace/webhook-root/webhook-root-workspace.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/webhook/workspace/webhook-root/webhook-root-workspace.element.ts @@ -5,9 +5,11 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; @customElement('umb-webhook-root-workspace') export class UmbWebhookRootWorkspaceElement extends UmbLitElement { override render() { - return html` - ; - `; + return html` + + ; + + `; } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/webhook/workspace/webhook/views/webhook-details-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/webhook/workspace/webhook/views/webhook-details-workspace-view.element.ts index c9f9ea0eb6..874d2b3764 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/webhook/workspace/webhook/views/webhook-details-workspace-view.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/webhook/workspace/webhook/views/webhook-details-workspace-view.element.ts @@ -1,17 +1,16 @@ -import type { UmbInputWebhookHeadersElement } from '../../../components/input-webhook-headers.element.js'; import { UMB_WEBHOOK_WORKSPACE_CONTEXT } from '../webhook-workspace.context-token.js'; +import type { UmbInputWebhookHeadersElement } from '../../../components/input-webhook-headers.element.js'; import type { UmbInputWebhookEventsElement } from '../../../components/input-webhook-events.element.js'; -import { css, html, customElement, state, nothing } from '@umbraco-cms/backoffice/external/lit'; +import { css, customElement, html, state, nothing } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import '@umbraco-cms/backoffice/culture'; -import type { UmbWebhookDetailModel } from '@umbraco-cms/backoffice/webhook'; - import type { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; import type { UmbInputDocumentTypeElement } from '@umbraco-cms/backoffice/document-type'; +import type { UmbWebhookDetailModel } from '@umbraco-cms/backoffice/webhook'; +import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry'; import type { UUIBooleanInputEvent, UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; +import '@umbraco-cms/backoffice/culture'; import '../../../components/input-webhook-headers.element.js'; import '../../../components/input-webhook-events.element.js'; @@ -43,9 +42,9 @@ export class UmbWebhookDetailsWorkspaceViewElement extends UmbLitElement impleme }); } - #onEventsChange(event: UmbChangeEvent) { - const events = (event.target as UmbInputWebhookEventsElement).events; - if (events[0].eventType !== this.contentType) { + #onEventsChange(event: UmbChangeEvent & { target: UmbInputWebhookEventsElement }) { + const events = event.target.events ?? []; + if (events.length && events[0].eventType !== this.contentType) { this.#webhookWorkspaceContext?.setTypes([]); } this.#webhookWorkspaceContext?.setEvents(events); @@ -75,7 +74,9 @@ export class UmbWebhookDetailsWorkspaceViewElement extends UmbLitElement impleme if (this.contentType !== 'Content' && this.contentType !== 'Media') return nothing; return html` - + ${this.#renderContentTypePickerEditor()} `; @@ -84,17 +85,20 @@ export class UmbWebhookDetailsWorkspaceViewElement extends UmbLitElement impleme #renderContentTypePickerEditor() { switch (this.contentType) { case 'Content': - return html``; + return html` + + `; case 'Media': - return html``; + return html` + + `; default: return nothing; } @@ -105,20 +109,28 @@ export class UmbWebhookDetailsWorkspaceViewElement extends UmbLitElement impleme return html` - + - + ${this.#renderContentTypePicker()} - - + + - + `; + return html` + + `; } static override styles = [UmbTextStyles];