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

Merge remote-tracking branch 'origin/main' into feature/media-section

Browse Source
This commit is contained in:
Jesper Møller Jensen
2022-12-19 10:36:18 +01:00
parent ca9d84e0ca 27338571df
commit db85371deb
220 changed files with 4609 additions and 2982 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/Umbraco.Web.UI.Client/.storybook/preview.js
View File

@@ -9,9 +9,8 @@ import { initialize, mswDecorator } from 'msw-storybook-addon';
import { setCustomElements } from '@storybook/web-components';
import customElementManifests from '../custom-elements.json';
import { UmbDataTypeStore } from '../src/core/stores/data-type/data-type.store';
import { UmbDocumentTypeStore } from '../src/core/stores/document-type.store';
import { UmbNodeStore } from '../src/core/stores/node.store';
import { UmbDataTypesStore } from '../src/core/stores/data-types/data-types.store';
import { UmbDocumentTypeStore } from '../src/core/stores/document-type/document-type.store';
import { UmbIconStore } from '../src/core/stores/icon/icon.store';
import { onUnhandledRequest } from '../src/core/mocks/browser';
import { handlers } from '../src/core/mocks/browser-handlers';
@@ -22,14 +21,14 @@ import { manifests as sectionManifests } from '../src/backoffice/sections/manife
import { manifests as propertyEditorModelManifests } from '../src/backoffice/property-editor-models/manifests';
import { manifests as propertyEditorUIManifests } from '../src/backoffice/property-editor-uis/manifests';
import { manifests as treeManifests } from '../src/backoffice/trees/manifests';
import { manifests as editorManifests } from '../src/backoffice/editors/manifests';
import { manifests as workspaceManifests } from '../src/backoffice/workspaces/manifests';
import { manifests as propertyActionManifests } from '../src/backoffice/property-actions/manifests';
import { umbExtensionsRegistry } from '../src/core/extensions-registry';
import '../src/core/context-api/provide/context-provider.element';
import '../src/core/css/custom-properties.css';
import '../src/backoffice/components/backoffice-modal-container.element';
import '../src/backoffice/components/backoffice-frame/backoffice-modal-container.element';
import '../src/backoffice/components/shared/code-block.element';
class UmbStoryBookElement extends LitElement {
@@ -41,7 +40,7 @@ class UmbStoryBookElement extends LitElement {
this._registerExtensions(sectionManifests);
this._registerExtensions(treeManifests);
this._registerExtensions(editorManifests);
this._registerExtensions(workspaceManifests);
this._registerExtensions(propertyEditorModelManifests);
this._registerExtensions(propertyEditorUIManifests);
this._registerExtensions(propertyActionManifests);
@@ -63,12 +62,8 @@ customElements.define('umb-storybook', UmbStoryBookElement);
const storybookProvider = (story) => html` <umb-storybook>${story()}</umb-storybook> `;
const nodeStoreProvider = (story) => html`
<umb-context-provider key="umbNodeStore" .value=${new UmbNodeStore()}>${story()}</umb-context-provider>
`;
const dataTypeStoreProvider = (story) => html`
<umb-context-provider key="umbDataTypeStore" .value=${new UmbDataTypeStore()}>${story()}</umb-context-provider>
<umb-context-provider key="umbDataTypeStore" .value=${new UmbDataTypesStore()}>${story()}</umb-context-provider>
`;
const documentTypeStoreProvider = (story) => html`
@@ -91,7 +86,6 @@ initialize({ onUnhandledRequest });
export const decorators = [
mswDecorator,
storybookProvider,
nodeStoreProvider,
dataTypeStoreProvider,
documentTypeStoreProvider,
modalServiceProvider,

354
src/Umbraco.Web.UI.Client/package-lock.json generated
View File

@@ -15,8 +15,8 @@
"@umbraco-ui/uui-modal-container": "file:umbraco-ui-uui-modal-container-0.0.0.tgz",
"@umbraco-ui/uui-modal-dialog": "file:umbraco-ui-uui-modal-dialog-0.0.0.tgz",
"@umbraco-ui/uui-modal-sidebar": "file:umbraco-ui-uui-modal-sidebar-0.0.0.tgz",
"element-internals-polyfill": "^1.1.16",
"lit": "^2.4.1",
"element-internals-polyfill": "^1.1.17",
"lit": "^2.5.0",
"lodash": "^4.17.21",
"openapi-typescript-fetch": "^1.1.3",
"router-slot": "^1.5.5",
@@ -25,7 +25,7 @@
},
"devDependencies": {
"@babel/core": "^7.20.5",
"@mdx-js/react": "^2.1.5",
"@mdx-js/react": "^2.2.1",
"@open-wc/testing": "^3.1.7",
"@playwright/test": "^1.28.1",
"@storybook/addon-a11y": "^6.5.14",
@@ -50,21 +50,21 @@
"eslint-config-prettier": "^8.5.0",
"eslint-import-resolver-typescript": "^3.5.2",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-lit": "^1.7.0",
"eslint-plugin-lit": "^1.7.1",
"eslint-plugin-lit-a11y": "^2.3.0",
"eslint-plugin-local-rules": "^1.3.2",
"eslint-plugin-storybook": "^0.6.8",
"lit-html": "^2.4.0",
"msw": "^0.49.1",
"lit-html": "^2.5.0",
"msw": "^0.49.2",
"msw-storybook-addon": "^1.6.3",
"openapi-typescript-codegen": "^0.23.0",
"playwright-msw": "^2.1.0",
"plop": "^3.1.1",
"prettier": "2.8.1",
"tiny-glob": "^0.2.9",
"typescript": "^4.9.3",
"typescript": "^4.9.4",
"vite": "^3.2.4",
"vite-plugin-static-copy": "^0.12.0",
"vite-plugin-static-copy": "^0.13.0",
"vite-tsconfig-paths": "^4.0.1",
"web-component-analyzer": "^2.0.0-next.4"
},
@@ -2523,9 +2523,9 @@
"dev": true
},
"node_modules/@lit/reactive-element": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.4.1.tgz",
"integrity": "sha512-qDv4851VFSaBWzpS02cXHclo40jsbAjRXnebNXpm0uVg32kCneZPo9RYVQtrTNICtZ+1wAYHu1ZtxWSWMbKrBw=="
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.5.0.tgz",
"integrity": "sha512-fQh9FDK0LPTwDk+0HhSZEtb8K0LTN1wXerwpGrWA+a8tWulYRDLI4vQDWp4GOIsewn0572KYV/oZ3+492D7osA=="
},
"node_modules/@mdn/browser-compat-data": {
"version": "4.2.1",
@@ -2626,9 +2626,9 @@
}
},
"node_modules/@mdx-js/react": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-2.1.5.tgz",
"integrity": "sha512-3Az1I6SAWA9R38rYjz5rXBrGKeZhq96CSSyQtqY+maPj8stBsoUH5pNcmIixuGkufYsh8F5+ka2CVPo2fycWZw==",
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-2.2.1.tgz",
"integrity": "sha512-YdXcMcEnqZhzql98RNrqYo9cEhTTesBiCclEtoiQUbJwx87q9453GTapYU6kJ8ZZ2ek1Vp25SiAXEFy5O/eAPw==",
"dev": true,
"dependencies": {
"@types/mdx": "^2.0.0",
@@ -7001,9 +7001,8 @@
},
"node_modules/@storybook/manager-webpack4/node_modules/ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"license": "MIT",
"dependencies": {
"color-convert": "^2.0.1"
},
@@ -7035,9 +7034,8 @@
},
"node_modules/@storybook/manager-webpack4/node_modules/chalk": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
"dev": true,
"license": "MIT",
"dependencies": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
@@ -7051,9 +7049,8 @@
},
"node_modules/@storybook/manager-webpack4/node_modules/color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"color-name": "~1.1.4"
},
@@ -7063,9 +7060,8 @@
},
"node_modules/@storybook/manager-webpack4/node_modules/color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true
"dev": true,
"license": "MIT"
},
"node_modules/@storybook/manager-webpack4/node_modules/find-cache-dir": {
"version": "3.3.2",
@@ -7111,9 +7107,8 @@
},
"node_modules/@storybook/manager-webpack4/node_modules/has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=8"
}
@@ -7174,9 +7169,8 @@
},
"node_modules/@storybook/manager-webpack4/node_modules/supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"license": "MIT",
"dependencies": {
"has-flag": "^4.0.0"
},
@@ -7186,9 +7180,8 @@
},
"node_modules/@storybook/mdx1-csf": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/@storybook/mdx1-csf/-/mdx1-csf-0.0.1.tgz",
"integrity": "sha512-4biZIWWzoWlCarMZmTpqcJNgo/RBesYZwGFbQeXiGYsswuvfWARZnW9RE9aUEMZ4XPn7B1N3EKkWcdcWe/K2tg==",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/generator": "^7.12.11",
"@babel/parser": "^7.12.11",
@@ -7205,9 +7198,8 @@
},
"node_modules/@storybook/mdx1-csf/node_modules/prettier": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.3.0.tgz",
"integrity": "sha512-kXtO4s0Lz/DW/IJ9QdWhAf7/NmPWQXkFr/r/WkR3vyI+0v8amTDxiaQSLzs8NBlytfLWX/7uQUMIW677yLKl4w==",
"dev": true,
"license": "MIT",
"bin": {
"prettier": "bin-prettier.js"
},
@@ -7217,9 +7209,8 @@
},
"node_modules/@storybook/mdx2-csf": {
"version": "0.0.3",
"resolved": "https://registry.npmjs.org/@storybook/mdx2-csf/-/mdx2-csf-0.0.3.tgz",
"integrity": "sha512-PFhucALIP23H3D/VyA4vlDsHKEJfhbLCIullmvaSl+KTTGbn4g+IkOAsIhVx+dEHYdCqCRW53r66+D4P6A7uOA==",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/generator": "^7.12.11",
"@babel/parser": "^7.12.11",
@@ -7232,10 +7223,9 @@
}
},
"node_modules/@storybook/mdx2-csf/node_modules/@mdx-js/mdx": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-2.1.3.tgz",
"integrity": "sha512-ahbb47HJIJ4xnifaL06tDJiSyLEy1EhFAStO7RZIm3GTa7yGW3NGhZaj+GUCveFgl5oI54pY4BgiLmYm97y+zg==",
"version": "2.1.5",
"dev": true,
"license": "MIT",
"dependencies": {
"@types/estree-jsx": "^1.0.0",
"@types/mdx": "^2.0.0",
@@ -7262,9 +7252,8 @@
},
"node_modules/@storybook/mdx2-csf/node_modules/bail": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
"integrity": "sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==",
"dev": true,
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/wooorm"
@@ -7272,15 +7261,13 @@
},
"node_modules/@storybook/mdx2-csf/node_modules/estree-walker": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.1.tgz",
"integrity": "sha512-woY0RUD87WzMBUiZLx8NsYr23N5BKsOMZHhu2hoNRVh6NXGfoiT1KOL8G3UHlJAnEDGmfa5ubNA/AacfG+Kb0g==",
"dev": true
"dev": true,
"license": "MIT"
},
"node_modules/@storybook/mdx2-csf/node_modules/is-plain-obj": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
"integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=12"
},
@@ -7289,10 +7276,9 @@
}
},
"node_modules/@storybook/mdx2-csf/node_modules/remark-mdx": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/remark-mdx/-/remark-mdx-2.1.3.tgz",
"integrity": "sha512-3SmtXOy9+jIaVctL8Cs3VAQInjRLGOwNXfrBB9KCT+EpJpKD3PQiy0x8hUNGyjQmdyOs40BqgPU7kYtH9uoR6w==",
"version": "2.1.5",
"dev": true,
"license": "MIT",
"dependencies": {
"mdast-util-mdx": "^2.0.0",
"micromark-extension-mdxjs": "^1.0.0"
@@ -7304,9 +7290,8 @@
},
"node_modules/@storybook/mdx2-csf/node_modules/remark-parse": {
"version": "10.0.1",
"resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-10.0.1.tgz",
"integrity": "sha512-1fUyHr2jLsVOkhbvPRBJ5zTKZZyD6yZzYaWCS6BPBdQ8vEMBCH+9zNCDA6tET/zHCi/jLqjCWtlJZUPk+DbnFw==",
"dev": true,
"license": "MIT",
"dependencies": {
"@types/mdast": "^3.0.0",
"mdast-util-from-markdown": "^1.0.0",
@@ -7319,9 +7304,8 @@
},
"node_modules/@storybook/mdx2-csf/node_modules/trough": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/trough/-/trough-2.1.0.tgz",
"integrity": "sha512-AqTiAOLcj85xS7vQ8QkAV41hPDIJ71XJB4RCUrzo/1GM2CQwhkJGaf9Hgr7BOugMRpgGUrqRg/DrBDl4H40+8g==",
"dev": true,
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/wooorm"
@@ -7329,9 +7313,8 @@
},
"node_modules/@storybook/mdx2-csf/node_modules/unified": {
"version": "10.1.2",
"resolved": "https://registry.npmjs.org/unified/-/unified-10.1.2.tgz",
"integrity": "sha512-pUSWAi/RAnVy1Pif2kAoeWNBa3JVrx0MId2LASj8G+7AiHWoKZNTomq6LG326T68U7/e263X6fTdcXIy7XnF7Q==",
"dev": true,
"license": "MIT",
"dependencies": {
"@types/unist": "^2.0.0",
"bail": "^2.0.0",
@@ -7348,9 +7331,8 @@
},
"node_modules/@storybook/mdx2-csf/node_modules/unist-util-is": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-5.1.1.tgz",
"integrity": "sha512-F5CZ68eYzuSvJjGhCLPL3cYx45IxkqXSetCcRgUXtbcm50X2L9oOWQlfUfDdAf+6Pd27YDblBfdtmsThXmwpbQ==",
"dev": true,
"license": "MIT",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/unified"
@@ -7358,9 +7340,8 @@
},
"node_modules/@storybook/mdx2-csf/node_modules/unist-util-visit": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-4.1.1.tgz",
"integrity": "sha512-n9KN3WV9k4h1DxYR1LoajgN93wpEi/7ZplVe02IoB4gH5ctI1AaF2670BLHQYbwj+pY83gFtyeySFiyMHJklrg==",
"dev": true,
"license": "MIT",
"dependencies": {
"@types/unist": "^2.0.0",
"unist-util-is": "^5.0.0",
@@ -7373,9 +7354,8 @@
},
"node_modules/@storybook/mdx2-csf/node_modules/unist-util-visit-parents": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-5.1.1.tgz",
"integrity": "sha512-gks4baapT/kNRaWxuGkl5BIhoanZo7sC/cUT/JToSRNL1dYoXRFl75d++NkjYk4TAu2uv2Px+l8guMajogeuiw==",
"dev": true,
"license": "MIT",
"dependencies": {
"@types/unist": "^2.0.0",
"unist-util-is": "^5.0.0"
@@ -7387,9 +7367,8 @@
},
"node_modules/@storybook/mdx2-csf/node_modules/vfile": {
"version": "5.3.5",
"resolved": "https://registry.npmjs.org/vfile/-/vfile-5.3.5.tgz",
"integrity": "sha512-U1ho2ga33eZ8y8pkbQLH54uKqGhFJ6GYIHnnG5AhRpAh3OWjkrRHKa/KogbmQn8We+c0KVV3rTOgR9V/WowbXQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"@types/unist": "^2.0.0",
"is-buffer": "^2.0.0",
@@ -7403,9 +7382,8 @@
},
"node_modules/@storybook/mdx2-csf/node_modules/vfile-message": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-3.1.2.tgz",
"integrity": "sha512-QjSNP6Yxzyycd4SVOtmKKyTsSvClqBPJcd00Z0zuPj3hOIjg0rUPG6DbFGPvUKRgYyaIWLPKpuEclcuvb3H8qA==",
"dev": true,
"license": "MIT",
"dependencies": {
"@types/unist": "^2.0.0",
"unist-util-stringify-position": "^3.0.0"
@@ -7420,6 +7398,7 @@
"resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-6.5.14.tgz",
"integrity": "sha512-MbEEgUEfrDN8Y0vzZJqPcxwWvX0l8zAsXy6d/DORP2AmwuNmnWTy++BE9YhxH6HMdM1ivRDmBbT30+KBUWhnUA==",
"dev": true,
"license": "MIT",
"dependencies": {
"@types/npmlog": "^4.1.2",
"chalk": "^4.1.0",
@@ -7965,6 +7944,7 @@
"resolved": "https://registry.npmjs.org/@storybook/store/-/store-6.5.14.tgz",
"integrity": "sha512-s07Vw4nbShPYwBJmVXzptuyCkrDQD3khcrKB5L7NsHHgWsm2QI0OyiPMuMbSvgipjcMc/oRqdL3tFUeFak9EMg==",
"dev": true,
"license": "MIT",
"dependencies": {
"@storybook/addons": "6.5.14",
"@storybook/client-logger": "6.5.14",
@@ -8056,6 +8036,7 @@
"resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.5.14.tgz",
"integrity": "sha512-hHpr4Sya6fuEDhy7vnfD2QnL5wy1CaAK9BC0FLupndXnQyKJtygfIaUP4a0B2KntuNPbzPhclb2Hb4yM7CExmQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"core-js": "^3.8.2",
"ts-dedent": "^2.0.0",
@@ -8267,6 +8248,7 @@
"resolved": "https://registry.npmjs.org/@storybook/ui/-/ui-6.5.14.tgz",
"integrity": "sha512-dXlCIULh8ytgdFrvVoheQLlZjAyyYmGCuw+6m+s+2yF/oUbFREG/5Zo9hDwlJ4ZiAyqNLkuwg2tnMYtjapZSog==",
"dev": true,
"license": "MIT",
"dependencies": {
"@storybook/addons": "6.5.14",
"@storybook/api": "6.5.14",
@@ -8624,40 +8606,35 @@
}
},
"node_modules/@storybook/web-components/node_modules/@types/node": {
"version": "16.11.63",
"resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.63.tgz",
"integrity": "sha512-3OxnrEQLBz8EIIaHpg3CibmTAEGkDBcHY4fL5cnBwg2vd2yvHrUDGWxK+MlYPeXWWIoJJW79dGtU+oeBr6166Q==",
"dev": true
"version": "16.18.0",
"dev": true,
"license": "MIT"
},
"node_modules/@types/accepts": {
"version": "1.3.5",
"resolved": "https://registry.npmjs.org/@types/accepts/-/accepts-1.3.5.tgz",
"integrity": "sha512-jOdnI/3qTpHABjM5cx1Hc0sKsPoYCp+DP/GJRGtDlPd7fiV9oXGGIcjW/ZOxLIvjGz8MA+uMZI9metHlgqbgwQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"@types/node": "*"
}
},
"node_modules/@types/acorn": {
"version": "4.0.6",
"resolved": "https://registry.npmjs.org/@types/acorn/-/acorn-4.0.6.tgz",
"integrity": "sha512-veQTnWP+1D/xbxVrPC3zHnCZRjSrKfhbMUlEA43iMZLu7EsnTtkJklIuwrCPbOi8YkvDQAiW05VQQFvvz9oieQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"@types/estree": "*"
}
},
"node_modules/@types/babel__code-frame": {
"version": "7.0.3",
"resolved": "https://registry.npmjs.org/@types/babel__code-frame/-/babel__code-frame-7.0.3.tgz",
"integrity": "sha512-2TN6oiwtNjOezilFVl77zwdNPwQWaDBBCCWWxyo1ctiO3vAtd7H/aB/CBJdw9+kqq3+latD0SXoedIuHySSZWw==",
"dev": true
"dev": true,
"license": "MIT"
},
"node_modules/@types/body-parser": {
"version": "1.19.2",
"resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
"integrity": "sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==",
"dev": true,
"license": "MIT",
"dependencies": {
"@types/connect": "*",
"@types/node": "*"
@@ -8671,18 +8648,16 @@
},
"node_modules/@types/chai-dom": {
"version": "0.0.12",
"resolved": "https://registry.npmjs.org/@types/chai-dom/-/chai-dom-0.0.12.tgz",
"integrity": "sha512-4rE7sDw713cV61TYzQbMrPjC4DjNk3x4vk9nAVRNXcSD4p0/5lEEfm0OgoCz5eNuWUXNKA0YiKiH/JDTuKivkA==",
"dev": true,
"license": "MIT",
"dependencies": {
"@types/chai": "*"
}
},
"node_modules/@types/co-body": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/@types/co-body/-/co-body-6.1.0.tgz",
"integrity": "sha512-3e0q2jyDAnx/DSZi0z2H0yoZ2wt5yRDZ+P7ymcMObvq0ufWRT4tsajyO+Q1VwVWiv9PRR4W3YEjEzBjeZlhF+w==",
"dev": true,
"license": "MIT",
"dependencies": {
"@types/node": "*",
"@types/qs": "*"
@@ -8690,36 +8665,31 @@
},
"node_modules/@types/command-line-args": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/@types/command-line-args/-/command-line-args-5.2.0.tgz",
"integrity": "sha512-UuKzKpJJ/Ief6ufIaIzr3A/0XnluX7RvFgwkV89Yzvm77wCh1kFaFmqN8XEnGcN62EuHdedQjEMb8mYxFLGPyA==",
"dev": true
"dev": true,
"license": "MIT"
},
"node_modules/@types/connect": {
"version": "3.4.35",
"resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
"integrity": "sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"@types/node": "*"
}
},
"node_modules/@types/content-disposition": {
"version": "0.5.5",
"resolved": "https://registry.npmjs.org/@types/content-disposition/-/content-disposition-0.5.5.tgz",
"integrity": "sha512-v6LCdKfK6BwcqMo+wYW05rLS12S0ZO0Fl4w1h4aaZMD7bqT3gVUns6FvLJKGZHQmYn3SX55JWGpziwJRwVgutA==",
"dev": true
"dev": true,
"license": "MIT"
},
"node_modules/@types/convert-source-map": {
"version": "1.5.2",
"resolved": "https://registry.npmjs.org/@types/convert-source-map/-/convert-source-map-1.5.2.tgz",
"integrity": "sha512-tHs++ZeXer40kCF2JpE51Hg7t4HPa18B1b1Dzy96S0eCw8QKECNMYMfwa1edK/x8yCN0r4e6ewvLcc5CsVGkdg==",
"dev": true
"dev": true,
"license": "MIT"
},
"node_modules/@types/cookie": {
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz",
"integrity": "sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==",
"dev": true
"dev": true,
"license": "MIT"
},
"node_modules/@types/cookies": {
"version": "0.7.7",
@@ -14750,9 +14720,9 @@
"dev": true
},
"node_modules/element-internals-polyfill": {
"version": "1.1.16",
"resolved": "https://registry.npmjs.org/element-internals-polyfill/-/element-internals-polyfill-1.1.16.tgz",
"integrity": "sha512-dkH7+GgrFAXaAeNaYQXJjBhE7tLypRljnknkfDIkappmpIe61PPvyA3q7/QXtbhGWmCM9dfU4KZ1szU6Iu7x1A=="
"version": "1.1.17",
"resolved": "https://registry.npmjs.org/element-internals-polyfill/-/element-internals-polyfill-1.1.17.tgz",
"integrity": "sha512-sMDJyJiwvcHB6wLnyG+y/9FRxi/9OyI8bmjyw18K6b5iVlBjmA5CJVTFz4K2I7R53yqevK8WkTrfBmSHJXH9Rw=="
},
"node_modules/element-resize-detector": {
"version": "1.2.4",
@@ -15601,9 +15571,9 @@
"dev": true
},
"node_modules/eslint-plugin-lit": {
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/eslint-plugin-lit/-/eslint-plugin-lit-1.7.0.tgz",
"integrity": "sha512-V9cflbK3qn91BKZsqjfU0KX2bXv36VtVAty9k7D+SauR1mvmEaZpmEDT74H1PDdsuFQG+0fmoU/ufhPYlAhJxA==",
"version": "1.7.1",
"resolved": "https://registry.npmjs.org/eslint-plugin-lit/-/eslint-plugin-lit-1.7.1.tgz",
"integrity": "sha512-25rB2FPesP/b1aadT18tNKV3POkSey4IQmSgKd238Pv163S0RO5J67Nzim8L7xq0KE9jGPjfgyOivyXZ0vN4vQ==",
"dev": true,
"dependencies": {
"parse5": "^6.0.1",
@@ -20173,13 +20143,13 @@
"dev": true
},
"node_modules/lit": {
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/lit/-/lit-2.4.1.tgz",
"integrity": "sha512-qohSgLiyN1cFnJG26dIiY03S4F49857A0AHQfnS0zYtnUVnD2MFvx+UT52rtXsIuNFQrnUupX+zyGSATlk1f/A==",
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/lit/-/lit-2.5.0.tgz",
"integrity": "sha512-DtnUP6vR3l4Q8nRPPNBD+UxbAhwJPeky+OVbi3pdgMqm0g57xFSl1Sj64D1rIB+nVNdiVVg8YxB0hqKjvdadZA==",
"dependencies": {
"@lit/reactive-element": "^1.4.0",
"@lit/reactive-element": "^1.5.0",
"lit-element": "^3.2.0",
"lit-html": "^2.4.0"
"lit-html": "^2.5.0"
}
},
"node_modules/lit-element": {
@@ -20192,9 +20162,9 @@
}
},
"node_modules/lit-html": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.4.0.tgz",
"integrity": "sha512-G6qXu4JNUpY6aaF2VMfaszhO9hlWw0hOTRFDmuMheg/nDYGB+2RztUSOyrzALAbr8Nh0Y7qjhYkReh3rPnplVg==",
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.5.0.tgz",
"integrity": "sha512-bLHosg1XL3JRUcKdSVI0sLCs0y1wWrj2sqqAN3cZ7bDDPNgmDHH29RV48x6Wz3ZmkxIupaE+z7uXSZ/pXWAO1g==",
"dependencies": {
"@types/trusted-types": "^2.0.2"
}
@@ -22230,9 +22200,9 @@
"dev": true
},
"node_modules/msw": {
"version": "0.49.1",
"resolved": "https://registry.npmjs.org/msw/-/msw-0.49.1.tgz",
"integrity": "sha512-JpIIq4P65ofj0HVmDMkJuRwgP9s5kcdutpZ15evMTb2k91/USB7IKWRLV9J1Mzc3OqTdwNj4RwtOWJ5y/FulQQ==",
"version": "0.49.2",
"resolved": "https://registry.npmjs.org/msw/-/msw-0.49.2.tgz",
"integrity": "sha512-70/E10f+POE2UmMw16v8PnKatpZplpkUwVRLBqiIdimpgaC3le7y2yOq9JmOrL15jpwWM5wAcPTOj0f550LI3g==",
"dev": true,
"hasInstallScript": true,
"dependencies": {
@@ -28578,9 +28548,9 @@
}
},
"node_modules/typescript": {
"version": "4.9.3",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.3.tgz",
"integrity": "sha512-CIfGzTelbKNEnLpLdGFgdyKhG23CKdKgQPOBc+OUNrkJ2vr+KSzsSV5kq5iWhEQbok+quxgGzrAtGWCyU7tHnA==",
"version": "4.9.4",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz",
"integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==",
"dev": true,
"bin": {
"tsc": "bin/tsc",
@@ -29388,27 +29358,27 @@
}
},
"node_modules/vite-plugin-static-copy": {
"version": "0.12.0",
"resolved": "https://registry.npmjs.org/vite-plugin-static-copy/-/vite-plugin-static-copy-0.12.0.tgz",
"integrity": "sha512-5a8hCjYJdf/rl8s7ct/YWt97gXdGPGNSOoJtkY5IYhbnSq04X1gTt5GpFHKfAxhHoed1Grfw3Ed13t7AjJi7gw==",
"version": "0.13.0",
"resolved": "https://registry.npmjs.org/vite-plugin-static-copy/-/vite-plugin-static-copy-0.13.0.tgz",
"integrity": "sha512-cln+fvKMgwNBjxQ59QVblmExZrc9gGEdRmfqcPOOGpxT5KInfpkGMvmK4L+kCAeHHSSGNU1bM7BA9PQgaAJc6g==",
"dev": true,
"dependencies": {
"chokidar": "^3.5.3",
"fast-glob": "^3.2.11",
"fs-extra": "^10.1.0",
"fs-extra": "^11.1.0",
"picocolors": "^1.0.0"
},
"engines": {
"node": "^14.18.0 || >=16.0.0"
},
"peerDependencies": {
"vite": "^3.0.0"
"vite": "^3.0.0 || ^4.0.0"
}
},
"node_modules/vite-plugin-static-copy/node_modules/fs-extra": {
"version": "10.1.0",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
"integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
"version": "11.1.0",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.0.tgz",
"integrity": "sha512-0rcTq621PD5jM/e0a3EJoGC/1TC5ZBCERW82LQuwfGnCa1V8w7dpYH1yNu+SLb6E5dkeCBzKEyLGlFrnr+dUyw==",
"dev": true,
"dependencies": {
"graceful-fs": "^4.2.0",
@@ -29416,7 +29386,7 @@
"universalify": "^2.0.0"
},
"engines": {
"node": ">=12"
"node": ">=14.14"
}
},
"node_modules/vite-plugin-static-copy/node_modules/picocolors": {
@@ -33085,9 +33055,9 @@
"dev": true
},
"@lit/reactive-element": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.4.1.tgz",
"integrity": "sha512-qDv4851VFSaBWzpS02cXHclo40jsbAjRXnebNXpm0uVg32kCneZPo9RYVQtrTNICtZ+1wAYHu1ZtxWSWMbKrBw=="
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.5.0.tgz",
"integrity": "sha512-fQh9FDK0LPTwDk+0HhSZEtb8K0LTN1wXerwpGrWA+a8tWulYRDLI4vQDWp4GOIsewn0572KYV/oZ3+492D7osA=="
},
"@mdn/browser-compat-data": {
"version": "4.2.1",
@@ -33170,9 +33140,9 @@
}
},
"@mdx-js/react": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-2.1.5.tgz",
"integrity": "sha512-3Az1I6SAWA9R38rYjz5rXBrGKeZhq96CSSyQtqY+maPj8stBsoUH5pNcmIixuGkufYsh8F5+ka2CVPo2fycWZw==",
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-2.2.1.tgz",
"integrity": "sha512-YdXcMcEnqZhzql98RNrqYo9cEhTTesBiCclEtoiQUbJwx87q9453GTapYU6kJ8ZZ2ek1Vp25SiAXEFy5O/eAPw==",
"dev": true,
"requires": {
"@types/mdx": "^2.0.0",
@@ -36249,8 +36219,6 @@
},
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"requires": {
"color-convert": "^2.0.1"
@@ -36270,8 +36238,6 @@
},
"chalk": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
"dev": true,
"requires": {
"ansi-styles": "^4.1.0",
@@ -36280,8 +36246,6 @@
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"requires": {
"color-name": "~1.1.4"
@@ -36289,8 +36253,6 @@
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true
},
"find-cache-dir": {
@@ -36327,8 +36289,6 @@
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true
},
"locate-path": {
@@ -36369,8 +36329,6 @@
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"requires": {
"has-flag": "^4.0.0"
@@ -36380,8 +36338,6 @@
},
"@storybook/mdx1-csf": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/@storybook/mdx1-csf/-/mdx1-csf-0.0.1.tgz",
"integrity": "sha512-4biZIWWzoWlCarMZmTpqcJNgo/RBesYZwGFbQeXiGYsswuvfWARZnW9RE9aUEMZ4XPn7B1N3EKkWcdcWe/K2tg==",
"dev": true,
"requires": {
"@babel/generator": "^7.12.11",
@@ -36399,16 +36355,12 @@
"dependencies": {
"prettier": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.3.0.tgz",
"integrity": "sha512-kXtO4s0Lz/DW/IJ9QdWhAf7/NmPWQXkFr/r/WkR3vyI+0v8amTDxiaQSLzs8NBlytfLWX/7uQUMIW677yLKl4w==",
"dev": true
}
}
},
"@storybook/mdx2-csf": {
"version": "0.0.3",
"resolved": "https://registry.npmjs.org/@storybook/mdx2-csf/-/mdx2-csf-0.0.3.tgz",
"integrity": "sha512-PFhucALIP23H3D/VyA4vlDsHKEJfhbLCIullmvaSl+KTTGbn4g+IkOAsIhVx+dEHYdCqCRW53r66+D4P6A7uOA==",
"dev": true,
"requires": {
"@babel/generator": "^7.12.11",
@@ -36422,9 +36374,7 @@
},
"dependencies": {
"@mdx-js/mdx": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-2.1.3.tgz",
"integrity": "sha512-ahbb47HJIJ4xnifaL06tDJiSyLEy1EhFAStO7RZIm3GTa7yGW3NGhZaj+GUCveFgl5oI54pY4BgiLmYm97y+zg==",
"version": "2.1.5",
"dev": true,
"requires": {
"@types/estree-jsx": "^1.0.0",
@@ -36448,26 +36398,18 @@
},
"bail": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
"integrity": "sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==",
"dev": true
},
"estree-walker": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.1.tgz",
"integrity": "sha512-woY0RUD87WzMBUiZLx8NsYr23N5BKsOMZHhu2hoNRVh6NXGfoiT1KOL8G3UHlJAnEDGmfa5ubNA/AacfG+Kb0g==",
"dev": true
},
"is-plain-obj": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
"integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
"dev": true
},
"remark-mdx": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/remark-mdx/-/remark-mdx-2.1.3.tgz",
"integrity": "sha512-3SmtXOy9+jIaVctL8Cs3VAQInjRLGOwNXfrBB9KCT+EpJpKD3PQiy0x8hUNGyjQmdyOs40BqgPU7kYtH9uoR6w==",
"version": "2.1.5",
"dev": true,
"requires": {
"mdast-util-mdx": "^2.0.0",
@@ -36476,8 +36418,6 @@
},
"remark-parse": {
"version": "10.0.1",
"resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-10.0.1.tgz",
"integrity": "sha512-1fUyHr2jLsVOkhbvPRBJ5zTKZZyD6yZzYaWCS6BPBdQ8vEMBCH+9zNCDA6tET/zHCi/jLqjCWtlJZUPk+DbnFw==",
"dev": true,
"requires": {
"@types/mdast": "^3.0.0",
@@ -36487,14 +36427,10 @@
},
"trough": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/trough/-/trough-2.1.0.tgz",
"integrity": "sha512-AqTiAOLcj85xS7vQ8QkAV41hPDIJ71XJB4RCUrzo/1GM2CQwhkJGaf9Hgr7BOugMRpgGUrqRg/DrBDl4H40+8g==",
"dev": true
},
"unified": {
"version": "10.1.2",
"resolved": "https://registry.npmjs.org/unified/-/unified-10.1.2.tgz",
"integrity": "sha512-pUSWAi/RAnVy1Pif2kAoeWNBa3JVrx0MId2LASj8G+7AiHWoKZNTomq6LG326T68U7/e263X6fTdcXIy7XnF7Q==",
"dev": true,
"requires": {
"@types/unist": "^2.0.0",
@@ -36508,14 +36444,10 @@
},
"unist-util-is": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-5.1.1.tgz",
"integrity": "sha512-F5CZ68eYzuSvJjGhCLPL3cYx45IxkqXSetCcRgUXtbcm50X2L9oOWQlfUfDdAf+6Pd27YDblBfdtmsThXmwpbQ==",
"dev": true
},
"unist-util-visit": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-4.1.1.tgz",
"integrity": "sha512-n9KN3WV9k4h1DxYR1LoajgN93wpEi/7ZplVe02IoB4gH5ctI1AaF2670BLHQYbwj+pY83gFtyeySFiyMHJklrg==",
"dev": true,
"requires": {
"@types/unist": "^2.0.0",
@@ -36525,8 +36457,6 @@
},
"unist-util-visit-parents": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-5.1.1.tgz",
"integrity": "sha512-gks4baapT/kNRaWxuGkl5BIhoanZo7sC/cUT/JToSRNL1dYoXRFl75d++NkjYk4TAu2uv2Px+l8guMajogeuiw==",
"dev": true,
"requires": {
"@types/unist": "^2.0.0",
@@ -36535,8 +36465,6 @@
},
"vfile": {
"version": "5.3.5",
"resolved": "https://registry.npmjs.org/vfile/-/vfile-5.3.5.tgz",
"integrity": "sha512-U1ho2ga33eZ8y8pkbQLH54uKqGhFJ6GYIHnnG5AhRpAh3OWjkrRHKa/KogbmQn8We+c0KVV3rTOgR9V/WowbXQ==",
"dev": true,
"requires": {
"@types/unist": "^2.0.0",
@@ -36547,8 +36475,6 @@
},
"vfile-message": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-3.1.2.tgz",
"integrity": "sha512-QjSNP6Yxzyycd4SVOtmKKyTsSvClqBPJcd00Z0zuPj3hOIjg0rUPG6DbFGPvUKRgYyaIWLPKpuEclcuvb3H8qA==",
"dev": true,
"requires": {
"@types/unist": "^2.0.0",
@@ -37412,17 +37338,13 @@
}
},
"@types/node": {
"version": "16.11.63",
"resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.63.tgz",
"integrity": "sha512-3OxnrEQLBz8EIIaHpg3CibmTAEGkDBcHY4fL5cnBwg2vd2yvHrUDGWxK+MlYPeXWWIoJJW79dGtU+oeBr6166Q==",
"version": "16.18.0",
"dev": true
}
}
},
"@types/accepts": {
"version": "1.3.5",
"resolved": "https://registry.npmjs.org/@types/accepts/-/accepts-1.3.5.tgz",
"integrity": "sha512-jOdnI/3qTpHABjM5cx1Hc0sKsPoYCp+DP/GJRGtDlPd7fiV9oXGGIcjW/ZOxLIvjGz8MA+uMZI9metHlgqbgwQ==",
"dev": true,
"requires": {
"@types/node": "*"
@@ -37430,8 +37352,6 @@
},
"@types/acorn": {
"version": "4.0.6",
"resolved": "https://registry.npmjs.org/@types/acorn/-/acorn-4.0.6.tgz",
"integrity": "sha512-veQTnWP+1D/xbxVrPC3zHnCZRjSrKfhbMUlEA43iMZLu7EsnTtkJklIuwrCPbOi8YkvDQAiW05VQQFvvz9oieQ==",
"dev": true,
"requires": {
"@types/estree": "*"
@@ -37439,14 +37359,10 @@
},
"@types/babel__code-frame": {
"version": "7.0.3",
"resolved": "https://registry.npmjs.org/@types/babel__code-frame/-/babel__code-frame-7.0.3.tgz",
"integrity": "sha512-2TN6oiwtNjOezilFVl77zwdNPwQWaDBBCCWWxyo1ctiO3vAtd7H/aB/CBJdw9+kqq3+latD0SXoedIuHySSZWw==",
"dev": true
},
"@types/body-parser": {
"version": "1.19.2",
"resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
"integrity": "sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==",
"dev": true,
"requires": {
"@types/connect": "*",
@@ -37461,8 +37377,6 @@
},
"@types/chai-dom": {
"version": "0.0.12",
"resolved": "https://registry.npmjs.org/@types/chai-dom/-/chai-dom-0.0.12.tgz",
"integrity": "sha512-4rE7sDw713cV61TYzQbMrPjC4DjNk3x4vk9nAVRNXcSD4p0/5lEEfm0OgoCz5eNuWUXNKA0YiKiH/JDTuKivkA==",
"dev": true,
"requires": {
"@types/chai": "*"
@@ -37470,8 +37384,6 @@
},
"@types/co-body": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/@types/co-body/-/co-body-6.1.0.tgz",
"integrity": "sha512-3e0q2jyDAnx/DSZi0z2H0yoZ2wt5yRDZ+P7ymcMObvq0ufWRT4tsajyO+Q1VwVWiv9PRR4W3YEjEzBjeZlhF+w==",
"dev": true,
"requires": {
"@types/node": "*",
@@ -37480,14 +37392,10 @@
},
"@types/command-line-args": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/@types/command-line-args/-/command-line-args-5.2.0.tgz",
"integrity": "sha512-UuKzKpJJ/Ief6ufIaIzr3A/0XnluX7RvFgwkV89Yzvm77wCh1kFaFmqN8XEnGcN62EuHdedQjEMb8mYxFLGPyA==",
"dev": true
},
"@types/connect": {
"version": "3.4.35",
"resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
"integrity": "sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==",
"dev": true,
"requires": {
"@types/node": "*"
@@ -37495,20 +37403,14 @@
},
"@types/content-disposition": {
"version": "0.5.5",
"resolved": "https://registry.npmjs.org/@types/content-disposition/-/content-disposition-0.5.5.tgz",
"integrity": "sha512-v6LCdKfK6BwcqMo+wYW05rLS12S0ZO0Fl4w1h4aaZMD7bqT3gVUns6FvLJKGZHQmYn3SX55JWGpziwJRwVgutA==",
"dev": true
},
"@types/convert-source-map": {
"version": "1.5.2",
"resolved": "https://registry.npmjs.org/@types/convert-source-map/-/convert-source-map-1.5.2.tgz",
"integrity": "sha512-tHs++ZeXer40kCF2JpE51Hg7t4HPa18B1b1Dzy96S0eCw8QKECNMYMfwa1edK/x8yCN0r4e6ewvLcc5CsVGkdg==",
"dev": true
},
"@types/cookie": {
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz",
"integrity": "sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==",
"dev": true
},
"@types/cookies": {
@@ -42486,9 +42388,9 @@
"dev": true
},
"element-internals-polyfill": {
"version": "1.1.16",
"resolved": "https://registry.npmjs.org/element-internals-polyfill/-/element-internals-polyfill-1.1.16.tgz",
"integrity": "sha512-dkH7+GgrFAXaAeNaYQXJjBhE7tLypRljnknkfDIkappmpIe61PPvyA3q7/QXtbhGWmCM9dfU4KZ1szU6Iu7x1A=="
"version": "1.1.17",
"resolved": "https://registry.npmjs.org/element-internals-polyfill/-/element-internals-polyfill-1.1.17.tgz",
"integrity": "sha512-sMDJyJiwvcHB6wLnyG+y/9FRxi/9OyI8bmjyw18K6b5iVlBjmA5CJVTFz4K2I7R53yqevK8WkTrfBmSHJXH9Rw=="
},
"element-resize-detector": {
"version": "1.2.4",
@@ -43163,9 +43065,9 @@
}
},
"eslint-plugin-lit": {
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/eslint-plugin-lit/-/eslint-plugin-lit-1.7.0.tgz",
"integrity": "sha512-V9cflbK3qn91BKZsqjfU0KX2bXv36VtVAty9k7D+SauR1mvmEaZpmEDT74H1PDdsuFQG+0fmoU/ufhPYlAhJxA==",
"version": "1.7.1",
"resolved": "https://registry.npmjs.org/eslint-plugin-lit/-/eslint-plugin-lit-1.7.1.tgz",
"integrity": "sha512-25rB2FPesP/b1aadT18tNKV3POkSey4IQmSgKd238Pv163S0RO5J67Nzim8L7xq0KE9jGPjfgyOivyXZ0vN4vQ==",
"dev": true,
"requires": {
"parse5": "^6.0.1",
@@ -46552,13 +46454,13 @@
"dev": true
},
"lit": {
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/lit/-/lit-2.4.1.tgz",
"integrity": "sha512-qohSgLiyN1cFnJG26dIiY03S4F49857A0AHQfnS0zYtnUVnD2MFvx+UT52rtXsIuNFQrnUupX+zyGSATlk1f/A==",
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/lit/-/lit-2.5.0.tgz",
"integrity": "sha512-DtnUP6vR3l4Q8nRPPNBD+UxbAhwJPeky+OVbi3pdgMqm0g57xFSl1Sj64D1rIB+nVNdiVVg8YxB0hqKjvdadZA==",
"requires": {
"@lit/reactive-element": "^1.4.0",
"@lit/reactive-element": "^1.5.0",
"lit-element": "^3.2.0",
"lit-html": "^2.4.0"
"lit-html": "^2.5.0"
}
},
"lit-element": {
@@ -46571,9 +46473,9 @@
}
},
"lit-html": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.4.0.tgz",
"integrity": "sha512-G6qXu4JNUpY6aaF2VMfaszhO9hlWw0hOTRFDmuMheg/nDYGB+2RztUSOyrzALAbr8Nh0Y7qjhYkReh3rPnplVg==",
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.5.0.tgz",
"integrity": "sha512-bLHosg1XL3JRUcKdSVI0sLCs0y1wWrj2sqqAN3cZ7bDDPNgmDHH29RV48x6Wz3ZmkxIupaE+z7uXSZ/pXWAO1g==",
"requires": {
"@types/trusted-types": "^2.0.2"
}
@@ -48043,9 +47945,9 @@
"dev": true
},
"msw": {
"version": "0.49.1",
"resolved": "https://registry.npmjs.org/msw/-/msw-0.49.1.tgz",
"integrity": "sha512-JpIIq4P65ofj0HVmDMkJuRwgP9s5kcdutpZ15evMTb2k91/USB7IKWRLV9J1Mzc3OqTdwNj4RwtOWJ5y/FulQQ==",
"version": "0.49.2",
"resolved": "https://registry.npmjs.org/msw/-/msw-0.49.2.tgz",
"integrity": "sha512-70/E10f+POE2UmMw16v8PnKatpZplpkUwVRLBqiIdimpgaC3le7y2yOq9JmOrL15jpwWM5wAcPTOj0f550LI3g==",
"dev": true,
"requires": {
"@mswjs/cookies": "^0.2.2",
@@ -52982,9 +52884,9 @@
}
},
"typescript": {
"version": "4.9.3",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.3.tgz",
"integrity": "sha512-CIfGzTelbKNEnLpLdGFgdyKhG23CKdKgQPOBc+OUNrkJ2vr+KSzsSV5kq5iWhEQbok+quxgGzrAtGWCyU7tHnA==",
"version": "4.9.4",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz",
"integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==",
"dev": true
},
"typical": {
@@ -53757,21 +53659,21 @@
}
},
"vite-plugin-static-copy": {
"version": "0.12.0",
"resolved": "https://registry.npmjs.org/vite-plugin-static-copy/-/vite-plugin-static-copy-0.12.0.tgz",
"integrity": "sha512-5a8hCjYJdf/rl8s7ct/YWt97gXdGPGNSOoJtkY5IYhbnSq04X1gTt5GpFHKfAxhHoed1Grfw3Ed13t7AjJi7gw==",
"version": "0.13.0",
"resolved": "https://registry.npmjs.org/vite-plugin-static-copy/-/vite-plugin-static-copy-0.13.0.tgz",
"integrity": "sha512-cln+fvKMgwNBjxQ59QVblmExZrc9gGEdRmfqcPOOGpxT5KInfpkGMvmK4L+kCAeHHSSGNU1bM7BA9PQgaAJc6g==",
"dev": true,
"requires": {
"chokidar": "^3.5.3",
"fast-glob": "^3.2.11",
"fs-extra": "^10.1.0",
"fs-extra": "^11.1.0",
"picocolors": "^1.0.0"
},
"dependencies": {
"fs-extra": {
"version": "10.1.0",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
"integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
"version": "11.1.0",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.0.tgz",
"integrity": "sha512-0rcTq621PD5jM/e0a3EJoGC/1TC5ZBCERW82LQuwfGnCa1V8w7dpYH1yNu+SLb6E5dkeCBzKEyLGlFrnr+dUyw==",
"dev": true,
"requires": {
"graceful-fs": "^4.2.0",

16
src/Umbraco.Web.UI.Client/package.json
View File

@@ -59,8 +59,8 @@
"@umbraco-ui/uui-modal-container": "file:umbraco-ui-uui-modal-container-0.0.0.tgz",
"@umbraco-ui/uui-modal-dialog": "file:umbraco-ui-uui-modal-dialog-0.0.0.tgz",
"@umbraco-ui/uui-modal-sidebar": "file:umbraco-ui-uui-modal-sidebar-0.0.0.tgz",
"element-internals-polyfill": "^1.1.16",
"lit": "^2.4.1",
"element-internals-polyfill": "^1.1.17",
"lit": "^2.5.0",
"lodash": "^4.17.21",
"openapi-typescript-fetch": "^1.1.3",
"router-slot": "^1.5.5",
@@ -69,7 +69,7 @@
},
"devDependencies": {
"@babel/core": "^7.20.5",
"@mdx-js/react": "^2.1.5",
"@mdx-js/react": "^2.2.1",
"@open-wc/testing": "^3.1.7",
"@playwright/test": "^1.28.1",
"@storybook/addon-a11y": "^6.5.14",
@@ -94,21 +94,21 @@
"eslint-config-prettier": "^8.5.0",
"eslint-import-resolver-typescript": "^3.5.2",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-lit": "^1.7.0",
"eslint-plugin-lit": "^1.7.1",
"eslint-plugin-lit-a11y": "^2.3.0",
"eslint-plugin-local-rules": "^1.3.2",
"eslint-plugin-storybook": "^0.6.8",
"lit-html": "^2.4.0",
"msw": "^0.49.1",
"lit-html": "^2.5.0",
"msw": "^0.49.2",
"msw-storybook-addon": "^1.6.3",
"openapi-typescript-codegen": "^0.23.0",
"playwright-msw": "^2.1.0",
"plop": "^3.1.1",
"prettier": "2.8.1",
"tiny-glob": "^0.2.9",
"typescript": "^4.9.3",
"typescript": "^4.9.4",
"vite": "^3.2.4",
"vite-plugin-static-copy": "^0.12.0",
"vite-plugin-static-copy": "^0.13.0",
"vite-tsconfig-paths": "^4.0.1",
"web-component-analyzer": "^2.0.0-next.4"
},

4
src/Umbraco.Web.UI.Client/public-assets/App_Plugins/package-view.js
View File

@@ -1,6 +1,6 @@
const template = document.createElement('template');
template.innerHTML = `
<umb-editor-layout role="aside">
<umb-body-layout role="aside">
<h1 slot="header">My package view</h1>
<uui-box>
@@ -10,7 +10,7 @@ template.innerHTML = `
<uui-action-bar slot="footer">
<uui-button look="primary" type="button">Close</uui-button>
</uui-action-bar>
</umb-editor-layout>
</umb-body-layout>
`;
export default class MyPackageViewCustom extends HTMLElement {

2
src/Umbraco.Web.UI.Client/public/mockServiceWorker.js
View File

@@ -2,7 +2,7 @@
/* tslint:disable */
/**
* Mock Service Worker (0.49.1).
* Mock Service Worker (0.49.2).
* @see https://github.com/mswjs/msw
* - Please do NOT modify this file.
* - Please do NOT serve this file on production.

48
src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts
View File

@@ -1,13 +1,14 @@
//TODO: we need to figure out what components should be available for extensions and load them upfront
import './editors/shared/editor-entity-layout/editor-entity-layout.element';
import './workspaces/shared/workspace-entity-layout/workspace-entity-layout.element';
import './components/ref-property-editor-ui/ref-property-editor-ui.element';
import './components/backoffice-header.element';
import './components/backoffice-main.element';
import './components/backoffice-modal-container.element';
import './components/backoffice-notification-container.element';
import './components/node-property/node-property.element';
import './components/backoffice-frame/backoffice-header.element';
import './components/backoffice-frame/backoffice-main.element';
import './components/backoffice-frame/backoffice-modal-container.element';
import './components/backoffice-frame/backoffice-notification-container.element';
import './components/content-property/content-property.element';
import './components/table/table.element';
import './components/shared/code-block.element';
import './components/extension-slot/extension-slot.element';
import './sections/shared/section-main/section-main.element';
import './sections/shared/section-sidebar/section-sidebar.element';
import './sections/shared/section.element';
@@ -20,20 +21,26 @@ import { css, html, LitElement } from 'lit';
import { UmbModalService } from '../core/services/modal';
import { UmbNotificationService } from '../core/services/notification';
import { UmbDataTypeStore } from '../core/stores/data-type/data-type.store';
import { UmbDocumentTypeStore } from '../core/stores/document-type.store';
import { UmbNodeStore } from '../core/stores/node.store';
import { UmbDataTypesStore } from '../core/stores/data-types/data-types.store';
import { UmbDocumentTypeStore } from '../core/stores/document-type/document-type.store';
import { UmbMediaTypeStore } from '../core/stores/media-type/media-type.store';
import { UmbMemberTypeStore } from '../core/stores/member-type/member-type.store';
import { UmbDocumentStore } from '../core/stores/document/document.store';
import { UmbMediaStore } from '../core/stores/media/media.store';
import { UmbMemberGroupStore } from '../core/stores/member-group/member-group.store';
import { UmbSectionStore } from '../core/stores/section.store';
import { UmbEntityStore } from '../core/stores/entity.store';
import { UmbUserStore } from '../core/stores/user/user.store';
import { UmbIconStore } from '../core/stores/icon/icon.store';
import { UmbUserGroupStore } from '../core/stores/user/user-group.store';
import { UmbCurrentUserHistoryStore } from '../core/stores/current-user-history/current-user-history.store';
import { manifests as sectionManifests } from './sections/manifests';
import { manifests as propertyEditorModelManifests } from './property-editor-models/manifests';
import { manifests as propertyEditorUIManifests } from './property-editor-uis/manifests';
import { manifests as treeManifests } from './trees/manifests';
import { manifests as editorManifests } from './editors/manifests';
import { manifests as editorManifests } from './workspaces/manifests';
import { manifests as propertyActionManifests } from './property-actions/manifests';
import { manifests as externalLoginProviderManifests } from './external-login-providers/manifests';
import { manifests as userDashboards } from './user-dashboards/manifests';
import { UmbContextConsumerMixin, UmbContextProviderMixin } from '@umbraco-cms/context-api';
import { umbExtensionsRegistry } from '@umbraco-cms/extensions-registry';
import type { ManifestTypes } from '@umbraco-cms/models';
@@ -56,7 +63,6 @@ export class UmbBackofficeElement extends UmbContextConsumerMixin(UmbContextProv
];
private _umbIconRegistry = new UmbIconStore();
private _umbEntityStore = new UmbEntityStore();
constructor() {
super();
@@ -67,18 +73,24 @@ export class UmbBackofficeElement extends UmbContextConsumerMixin(UmbContextProv
this._registerExtensions(propertyEditorModelManifests);
this._registerExtensions(propertyEditorUIManifests);
this._registerExtensions(propertyActionManifests);
this._registerExtensions(externalLoginProviderManifests);
this._registerExtensions(userDashboards);
this._umbIconRegistry.attach(this);
this.provideContext('umbEntityStore', this._umbEntityStore);
this.provideContext('umbNodeStore', new UmbNodeStore(this._umbEntityStore));
this.provideContext('umbDataTypeStore', new UmbDataTypeStore(this._umbEntityStore));
this.provideContext('umbDocumentTypeStore', new UmbDocumentTypeStore(this._umbEntityStore));
this.provideContext('umbUserStore', new UmbUserStore(this._umbEntityStore));
this.provideContext('umbUserGroupStore', new UmbUserGroupStore(this._umbEntityStore));
this.provideContext('umbDocumentStore', new UmbDocumentStore());
this.provideContext('umbMediaStore', new UmbMediaStore());
this.provideContext('umbDataTypeStore', new UmbDataTypesStore());
this.provideContext('umbDocumentTypeStore', new UmbDocumentTypeStore());
this.provideContext('umbMediaTypeStore', new UmbMediaTypeStore());
this.provideContext('umbMemberTypeStore', new UmbMemberTypeStore());
this.provideContext('umbUserStore', new UmbUserStore());
this.provideContext('umbUserGroupStore', new UmbUserGroupStore());
this.provideContext('umbMemberGroupStore', new UmbMemberGroupStore());
this.provideContext('umbNotificationService', new UmbNotificationService());
this.provideContext('umbModalService', new UmbModalService());
this.provideContext('umbSectionStore', new UmbSectionStore());
this.provideContext('umbCurrentUserHistoryStore', new UmbCurrentUserHistoryStore());
}
private _registerExtensions(manifests: Array<ManifestTypes> | Array<ManifestTypes>) {

83
src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-frame/backoffice-header-apps.element.ts Normal file
View File

@@ -0,0 +1,83 @@
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { css, CSSResultGroup, html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { ManifestHeaderApp, umbExtensionsRegistry } from '@umbraco-cms/extensions-registry';
@customElement('umb-backoffice-header-apps')
export class UmbBackofficeHeaderApps extends LitElement {
static styles: CSSResultGroup = [
UUITextStyles,
css`
#apps {
display: flex;
align-items: center;
gap: var(--uui-size-space-2);
}
`,
];
constructor() {
super();
this._registerHeaderApps();
}
private _registerHeaderApps() {
const headerApps: Array<ManifestHeaderApp> = [
{
type: 'headerApp',
alias: 'Umb.HeaderApp.Search',
name: 'Header App Search',
loader: () => import('../../header-apps/header-app-button.element'),
weight: 10,
meta: {
label: 'Search',
icon: 'search',
pathname: 'search',
},
},
{
type: 'headerApp',
alias: 'Umb.HeaderApp.Favorites',
name: 'Header App Favorites',
loader: () => import('../../header-apps/header-app-button.element'),
weight: 100,
meta: {
label: 'Favorites',
icon: 'favorite',
pathname: 'favorites',
},
},
{
type: 'headerApp',
alias: 'Umb.HeaderApp.CurrentUser',
name: 'Current User',
loader: () => import('../../header-apps/header-app-current-user.element'),
weight: 1000,
meta: {
label: 'TODO: how should we enable this to not be set.',
icon: 'TODO: how should we enable this to not be set.',
pathname: 'user',
},
},
];
// TODO: Can we make this functionality reuseable...
headerApps.forEach((headerApp) => {
if (umbExtensionsRegistry.isRegistered(headerApp.alias)) return;
umbExtensionsRegistry.register(headerApp);
});
}
render() {
return html`
<umb-extension-slot id="apps" type="headerApp"></umb-extension-slot>
`;
}
}
declare global {
interface HTMLElementTagNameMap {
'umb-backoffice-header-apps': UmbBackofficeHeaderApps;
}
}

2
src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-header-sections.element.ts → src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-frame/backoffice-header-sections.element.ts
View File

@@ -2,7 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { css, CSSResultGroup, html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { when } from 'lit/directives/when.js';
import { UmbSectionStore } from '../../core/stores/section.store';
import { UmbSectionStore } from '../../../core/stores/section.store';
import { UmbObserverMixin } from '@umbraco-cms/observable-api';
import { UmbContextConsumerMixin, UmbContextProviderMixin } from '@umbraco-cms/context-api';
import type { ManifestSection } from '@umbraco-cms/models';

4
src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-header.element.ts → src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-frame/backoffice-header.element.ts
View File

@@ -3,7 +3,7 @@ import { css, CSSResultGroup, html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import './backoffice-header-sections.element';
import './backoffice-header-tools.element';
import './backoffice-header-apps.element';
@customElement('umb-backoffice-header')
export class UmbBackofficeHeader extends LitElement {
@@ -47,7 +47,7 @@ export class UmbBackofficeHeader extends LitElement {
</uui-button>
<umb-backoffice-header-sections id="sections"></umb-backoffice-header-sections>
<umb-backoffice-header-tools></umb-backoffice-header-tools>
<umb-backoffice-header-apps></umb-backoffice-header-apps>
</div>
`;
}

4
src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-main.element.ts → src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-frame/backoffice-main.element.ts
View File

@@ -3,8 +3,8 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { css, html, LitElement } from 'lit';
import { state } from 'lit/decorators.js';
import { IRoutingInfo } from 'router-slot';
import { UmbSectionStore } from '../../core/stores/section.store';
import { UmbSectionContext } from '../sections/section.context';
import { UmbSectionStore } from '../../../core/stores/section.store';
import { UmbSectionContext } from '../../sections/section.context';
import { UmbObserverMixin } from '@umbraco-cms/observable-api';
import { createExtensionElement } from '@umbraco-cms/extensions-api';
import { UmbContextConsumerMixin, UmbContextProviderMixin } from '@umbraco-cms/context-api';

2
src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-modal-container.element.ts → src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-frame/backoffice-modal-container.element.ts
View File

@@ -2,7 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { css, CSSResultGroup, html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { repeat } from 'lit/directives/repeat.js';
import { UmbModalHandler, UmbModalService } from '../../core/services/modal';
import { UmbModalHandler, UmbModalService } from '@umbraco-cms/services';
import { UmbObserverMixin } from '@umbraco-cms/observable-api';
import { UmbContextConsumerMixin } from '@umbraco-cms/context-api';

3
src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-notification-container.element.ts → src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-frame/backoffice-notification-container.element.ts
View File

@@ -2,7 +2,8 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { css, CSSResultGroup, html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { repeat } from 'lit/directives/repeat.js';
import type { UmbNotificationService, UmbNotificationHandler } from '../../core/services/notification';
import type { UmbNotificationHandler } from '../../../core/services/notification';
import type { UmbNotificationService } from '@umbraco-cms/services';
import { UmbObserverMixin } from '@umbraco-cms/observable-api';
import { UmbContextConsumerMixin } from '@umbraco-cms/context-api';

43
src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-header-tools.element.ts
View File

@@ -1,43 +0,0 @@
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { css, CSSResultGroup, html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
@customElement('umb-backoffice-header-tools')
export class UmbBackofficeHeaderTools extends LitElement {
static styles: CSSResultGroup = [
UUITextStyles,
css`
#tools {
display: flex;
align-items: center;
gap: var(--uui-size-space-2);
}
.tool {
font-size: 18px;
}
`,
];
render() {
return html`
<div id="tools">
<uui-button class="tool" look="primary" label="Search" compact>
<uui-icon name="search"></uui-icon>
</uui-button>
<uui-button class="tool" look="primary" label="Help" compact>
<uui-icon name="favorite"></uui-icon>
</uui-button>
<uui-button look="primary" style="font-size: 14px;" label="User" compact>
<uui-avatar name="Mr Rabbit"></uui-avatar>
</uui-button>
</div>
`;
}
}
declare global {
interface HTMLElementTagNameMap {
'umb-backoffice-header-tools': UmbBackofficeHeaderTools;
}
}

114
src/Umbraco.Web.UI.Client/src/backoffice/components/body-layout/body-layout.element.ts Normal file
View File

@@ -0,0 +1,114 @@
import { css, html, LitElement, nothing } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property } from 'lit/decorators.js';
@customElement('umb-body-layout')
export class UmbBodyLayout extends LitElement {
static styles = [
UUITextStyles,
css`
:host {
display: flex;
background-color: var(--uui-color-background);
width: 100%;
height: 100%;
flex-direction: column;
}
#header {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: 60px;
background-color: var(--uui-color-surface);
border-bottom: 1px solid var(--uui-color-border);
box-sizing: border-box;
}
#headline {
display: block;
margin: 0 var(--uui-size-layout-1);
}
#tabs {
margin-left: auto;
}
#main {
display: flex;
flex: 1;
flex-direction: column;
}
#footer {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 54px; /* TODO: missing var(--uui-size-18);*/
border-top: 1px solid var(--uui-color-border);
background-color: var(--uui-color-surface);
box-sizing: border-box;
}
#actions {
display: flex;
gap: 6px;
margin: 0 var(--uui-size-layout-1);
margin-left: auto;
}
`,
];
connectedCallback() {
super.connectedCallback();
this.shadowRoot?.removeEventListener('slotchange', this._slotChanged);
this.shadowRoot?.addEventListener('slotchange', this._slotChanged);
}
disconnectedCallback() {
super.disconnectedCallback();
this.shadowRoot?.removeEventListener('slotchange', this._slotChanged);
}
private _slotChanged = (e: Event) => {
(e.target as any).style.display =
(e.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0 ? '' : 'none';
};
/**
* Renders a headline in the header.
* @public
* @type {string}
* @attr
* @default ''
*/
@property()
public headline = '';
render() {
return html`
<div id="header">
${this.headline ? html`<h3 id="headline">${this.headline}</h3>` : nothing}
<slot name="header"></slot>
<slot id="tabs" name="tabs"></slot>
</div>
<uui-scroll-container id="main">
<slot></slot>
</uui-scroll-container>
<div id="footer">
<slot name="footer"></slot>
<slot id="actions" name="actions"></slot>
</div>
`;
}
}
declare global {
interface HTMLElementTagNameMap {
'umb-body-layout': UmbBodyLayout;
}
}

14
src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-layout/editor-layout.stories.ts → src/Umbraco.Web.UI.Client/src/backoffice/components/body-layout/body-layout.stories.ts
View File

@@ -1,19 +1,19 @@
import './editor-layout.element';
import './body-layout.element';
import { Meta, Story } from '@storybook/web-components';
import { html } from 'lit-html';
import type { UmbEditorLayout } from './editor-layout.element';
import type { UmbBodyLayout } from './body-layout.element';
export default {
title: 'Editors/Shared/Editor Layout',
component: 'umb-editor-layout',
id: 'umb-editor-layout',
title: 'Workspaces/Shared/Workspace Layout',
component: 'umb-body-layout',
id: 'umb-body-layout',
} as Meta;
export const AAAOverview: Story<UmbEditorLayout> = () => html` <umb-editor-layout>
export const AAAOverview: Story<UmbBodyLayout> = () => html` <umb-body-layout>
<div slot="header"><uui-button color="" look="placeholder">Header slot</uui-button></div>
<uui-button color="" look="placeholder">Main slot</uui-button>
<div slot="footer"><uui-button color="" look="placeholder">Footer slot</uui-button></div>
</umb-editor-layout>`;
</umb-body-layout>`;
AAAOverview.storyName = 'Overview';

19
src/Umbraco.Web.UI.Client/src/backoffice/components/node-property/node-property.element.ts → src/Umbraco.Web.UI.Client/src/backoffice/components/content-property/content-property.element.ts
View File

@@ -4,17 +4,16 @@ import { ifDefined } from 'lit-html/directives/if-defined.js';
import { customElement, property, state } from 'lit/decorators.js';
import { EMPTY, of, switchMap } from 'rxjs';
import { UmbDataTypeStore } from '../../../core/stores/data-type/data-type.store';
import { NodeProperty } from '../../../core/mocks/data/node.data';
import { UmbDataTypesStore } from '../../../core/stores/data-types/data-types.store';
import { UmbObserverMixin } from '@umbraco-cms/observable-api';
import type { ManifestTypes } from '@umbraco-cms/models';
import type { ContentProperty, ManifestTypes } from '@umbraco-cms/models';
import { umbExtensionsRegistry } from '@umbraco-cms/extensions-registry';
import { UmbContextConsumerMixin } from '@umbraco-cms/context-api';
import '../entity-property/entity-property.element';
@customElement('umb-node-property')
export class UmbNodePropertyElement extends UmbContextConsumerMixin(UmbObserverMixin(LitElement)) {
@customElement('umb-content-property')
export class UmbContentPropertyElement extends UmbContextConsumerMixin(UmbObserverMixin(LitElement)) {
static styles = [
UUITextStyles,
css`
@@ -24,12 +23,12 @@ export class UmbNodePropertyElement extends UmbContextConsumerMixin(UmbObserverM
`,
];
private _property?: NodeProperty;
private _property?: ContentProperty;
@property({ type: Object, attribute: false })
public get property(): NodeProperty | undefined {
public get property(): ContentProperty | undefined {
return this._property;
}
public set property(value: NodeProperty | undefined) {
public set property(value: ContentProperty | undefined) {
this._property = value;
this._observeDataType();
}
@@ -43,7 +42,7 @@ export class UmbNodePropertyElement extends UmbContextConsumerMixin(UmbObserverM
@state()
private _dataTypeData?: any;
private _dataTypeStore?: UmbDataTypeStore;
private _dataTypeStore?: UmbDataTypesStore;
constructor() {
super();
@@ -86,6 +85,6 @@ export class UmbNodePropertyElement extends UmbContextConsumerMixin(UmbObserverM
declare global {
interface HTMLElementTagNameMap {
'umb-node-property': UmbNodePropertyElement;
'umb-content-property': UmbContentPropertyElement;
}
}

7
src/Umbraco.Web.UI.Client/src/backoffice/components/entity-property/entity-property.element.ts
View File

@@ -8,7 +8,7 @@ import { UmbContextConsumerMixin } from '@umbraco-cms/context-api';
import type { ManifestPropertyEditorUI, ManifestTypes } from '@umbraco-cms/models';
import '../../property-actions/shared/property-action-menu/property-action-menu.element';
import '../../editors/shared/editor-property-layout/editor-property-layout.element';
import '../../workspaces/shared/workspace-property-layout/workspace-property-layout.element';
/**
* @element umb-entity-property
@@ -174,11 +174,10 @@ export class UmbEntityPropertyElement extends UmbContextConsumerMixin(UmbObserve
render() {
return html`
<umb-editor-property-layout id="layout" label="${this.label}" description="${this.description}">
<umb-workspace-property-layout id="layout" label="${this.label}" description="${this.description}">
${this._renderPropertyActionMenu()}
<div slot="editor">${this._element}</div>
</umb-editor-property-layout>
<hr />
</umb-workspace-property-layout>
`;
}

97
src/Umbraco.Web.UI.Client/src/backoffice/components/extension-slot/extension-slot.element.ts Normal file
View File

@@ -0,0 +1,97 @@
import { LitElement, nothing } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { map } from 'rxjs';
import { repeat } from 'lit/directives/repeat.js';
import { ManifestTypes, umbExtensionsRegistry } from '@umbraco-cms/extensions-registry';
import { UmbObserverMixin } from '@umbraco-cms/observable-api';
import { createExtensionElement } from '@umbraco-cms/extensions-api';
type InitializedExtensionItem = {alias: string, weight: number, component: HTMLElement|null}
/**
* @element umb-extension-slot
* @description
* @slot default - slot for inserting additional things into this slot.
* @export
* @class UmbExtensionSlot
* @extends {UmbObserverMixin(LitElement)}
*/
@customElement('umb-extension-slot')
export class UmbExtensionSlotElement extends UmbObserverMixin(LitElement) {
@state()
private _extensions:InitializedExtensionItem[] = [];
@property({ type: String })
public type= "";
@property({ type: Object, attribute: false })
public filter: (manifest:ManifestTypes) => boolean = () => true;
constructor() {
super();
/*
this.extensionManager = new ExtensionManager(this, (x) => {x.meta.entityType === this.entityType}, (extensionManifests) => {
this._createElement(extensionManifests[0]);
});
*/
}
connectedCallback(): void {
super.connectedCallback();
this._observeExtensions();
}
private _observeExtensions() {
this.observe(
umbExtensionsRegistry
?.extensionsOfType(this.type)
.pipe(map((extensions) => extensions.filter(this.filter))),
async (extensions: ManifestTypes[]) => {
const oldLength = this._extensions.length;
this._extensions = this._extensions.filter(current => extensions.find(incoming => incoming.alias === current.alias));
if(this._extensions.length !== oldLength) {
this.requestUpdate('_extensions');
}
extensions.forEach(async (extension: ManifestTypes) => {
const hasExt = this._extensions.find(x => x.alias === extension.alias);
if(!hasExt) {
const extensionObject:InitializedExtensionItem = {alias: extension.alias, weight: (extension as any).weight || 0, component: null};
this._extensions.push(extensionObject);
const component = await createExtensionElement(extension);
if(component) {
(component as any).manifest = extension;
extensionObject.component = component;
// sort:
// TODO: Make sure its right to have highest last?
this._extensions.sort((a, b) => a.weight - b.weight);
} else {
// Remove cause we could not get the component, so we will get rid of this.
//this._extensions.splice(this._extensions.indexOf(extensionObject), 1);
// Actually not, because if, then the same extension would come around again in next update.
}
this.requestUpdate('_extensions');
}
});
}
);
}
render() {
// TODO: check if we can use repeat directly.
return repeat(this._extensions, (ext) => ext.alias, (ext) => ext.component || nothing);
}
}
declare global {
interface HTMLElementTagNameMap {
'umb-extension-slot': UmbExtensionSlotElement;
}
}

7
src/Umbraco.Web.UI.Client/src/backoffice/dashboards/examine-management/dashboard-examine-management.element.ts
View File

@@ -48,6 +48,13 @@ export class UmbDashboardExamineManagementElement extends UmbContextConsumerMixi
@state()
private _currentPath?: string;
/**
*
*/
constructor() {
super();
}
private _onRouteChange() {
this._currentPath = path();
}

4
src/Umbraco.Web.UI.Client/src/backoffice/dashboards/examine-management/views/section-view-examine-searchers.ts
View File

@@ -128,7 +128,7 @@ export class UmbDashboardExamineSearcherElement extends UmbContextConsumerMixin(
}
private _onNameClick() {
const data: UmbNotificationDefaultData = { message: 'TODO: Open editor for this' }; // TODO
const data: UmbNotificationDefaultData = { message: 'TODO: Open workspace for this' }; // TODO
this._notificationService?.peek('warning', { data });
}
@@ -236,7 +236,7 @@ export class UmbDashboardExamineSearcherElement extends UmbContextConsumerMixin(
<uui-table-cell> ${rowData.score} </uui-table-cell>
<uui-table-cell> ${rowData.id} </uui-table-cell>
<uui-table-cell>
<uui-button look="secondary" label="Open editor for this document" @click="${this._onNameClick}">
<uui-button look="secondary" label="Open workspace for this document" @click="${this._onNameClick}">
${this.getSearchResultNodeName(rowData)}
</uui-button>
</uui-table-cell>

18
src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/editor-data-type.stories.ts
View File

@@ -1,18 +0,0 @@
import './editor-data-type.element';
import { Meta, Story } from '@storybook/web-components';
import { html } from 'lit-html';
import { data } from '../../../core/mocks/data/data-type.data';
import type { UmbEditorDataTypeElement } from './editor-data-type.element';
export default {
title: 'Editors/Data Type',
component: 'umb-editor-data-type',
id: 'umb-editor-data-type',
} as Meta;
export const AAAOverview: Story<UmbEditorDataTypeElement> = () =>
html` <umb-editor-data-type id="${data[0].key}"></umb-editor-data-type>`;
AAAOverview.storyName = 'Overview';

18
src/Umbraco.Web.UI.Client/src/backoffice/editors/document-type/editor-document-type.stories.ts
View File

@@ -1,18 +0,0 @@
import './editor-document-type.element';
import { Meta, Story } from '@storybook/web-components';
import { html } from 'lit-html';
import { data } from '../../../core/mocks/data/document-type.data';
import type { UmbEditorDocumentTypeElement } from './editor-document-type.element';
export default {
title: 'Editors/Document Type',
component: 'umb-editor-document-type',
id: 'umb-editor-document-type',
} as Meta;
export const AAAOverview: Story<UmbEditorDocumentTypeElement> = () =>
html` <umb-editor-document-type id="${data[0].key}"></umb-editor-document-type>`;
AAAOverview.storyName = 'Overview';

25
src/Umbraco.Web.UI.Client/src/backoffice/editors/document-type/views/design/editor-view-document-type-design.stories.ts
View File

@@ -1,25 +0,0 @@
import './editor-view-document-type-design.element';
import { Meta, Story } from '@storybook/web-components';
import { html } from 'lit-html';
import { data } from '../../../../../core/mocks/data/document-type.data';
import { UmbDocumentTypeContext } from '../../document-type.context';
import type { UmbEditorViewDocumentTypeDesignElement } from './editor-view-document-type-design.element';
export default {
title: 'Editors/Document Type/Views/Design',
component: 'umb-editor-view-document-type-design',
id: 'umb-editor-view-document-type-design',
decorators: [
(story) =>
html` <umb-context-provider key="umbDocumentTypeContext" .value=${new UmbDocumentTypeContext(data[0])}>
${story()}
</umb-context-provider>`,
],
} as Meta;
export const AAAOverview: Story<UmbEditorViewDocumentTypeDesignElement> = () =>
html` <umb-editor-view-document-type-design></umb-editor-view-document-type-design>`;
AAAOverview.storyName = 'Overview';

78
src/Umbraco.Web.UI.Client/src/backoffice/editors/document/editor-document.element.ts
View File

@@ -1,78 +0,0 @@
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { css, html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { umbExtensionsRegistry } from '@umbraco-cms/extensions-registry';
import type { ManifestEditorView } from '@umbraco-cms/models';
import '../shared/node/editor-node.element';
@customElement('umb-editor-document')
export class UmbEditorDocumentElement extends LitElement {
static styles = [
UUITextStyles,
css`
:host {
display: block;
width: 100%;
height: 100%;
}
`,
];
@property()
entityKey!: string;
constructor() {
super();
this._registerEditorViews();
}
private _registerEditorViews() {
const dashboards: Array<ManifestEditorView> = [
{
type: 'editorView',
alias: 'Umb.EditorView.Document.Edit',
name: 'Document Editor Edit View',
loader: () => import('../shared/node/views/edit/editor-view-node-edit.element'),
weight: 200,
meta: {
editors: ['Umb.Editor.Document'],
label: 'Info',
pathname: 'content',
icon: 'document',
},
},
{
type: 'editorView',
alias: 'Umb.EditorView.Document.Info',
name: 'Document Editor Info View',
loader: () => import('../shared/node/views/info/editor-view-node-info.element'),
weight: 100,
meta: {
editors: ['Umb.Editor.Document'],
label: 'Info',
pathname: 'info',
icon: 'info',
},
},
];
dashboards.forEach((dashboard) => {
if (umbExtensionsRegistry.isRegistered(dashboard.alias)) return;
umbExtensionsRegistry.register(dashboard);
});
}
render() {
return html`<umb-editor-node .entityKey=${this.entityKey} alias="Umb.Editor.Document"></umb-editor-node>`;
}
}
export default UmbEditorDocumentElement;
declare global {
interface HTMLElementTagNameMap {
'umb-editor-document': UmbEditorDocumentElement;
}
}

20
src/Umbraco.Web.UI.Client/src/backoffice/editors/document/editor-document.stories.ts
View File

@@ -1,20 +0,0 @@
import './editor-document.element';
import { Meta, Story } from '@storybook/web-components';
import { html } from 'lit-html';
import { data } from '../../../core/mocks/data/node.data';
import type { UmbEditorDocumentElement } from './editor-document.element';
export default {
title: 'Editors/Document',
component: 'umb-editor-document',
id: 'umb-editor-document',
} as Meta;
const documentNodes = data.filter((node) => node.type === 'document');
export const AAAOverview: Story<UmbEditorDocumentElement> = () =>
html` <umb-editor-document id="${documentNodes[0].key}"></umb-editor-document>`;
AAAOverview.storyName = 'Overview';

16
src/Umbraco.Web.UI.Client/src/backoffice/editors/extensions/editor-extensions.stories.ts
View File

@@ -1,16 +0,0 @@
import './editor-extensions.element';
import { Meta, Story } from '@storybook/web-components';
import { html } from 'lit-html';
import type { UmbEditorExtensionsElement } from './editor-extensions.element';
export default {
title: 'Editors/Extensions',
component: 'umb-editor-extensions',
id: 'umb-editor-extensions',
} as Meta;
export const AAAOverview: Story<UmbEditorExtensionsElement> = () =>
html` <umb-editor-extensions></umb-editor-extensions>`;
AAAOverview.storyName = 'Overview';

103
src/Umbraco.Web.UI.Client/src/backoffice/editors/manifests.ts
View File

@@ -1,103 +0,0 @@
import type { ManifestEditor } from '@umbraco-cms/models';
export const manifests: Array<ManifestEditor> = [
{
type: 'editor',
alias: 'Umb.Editor.Member',
name: 'Member Editor',
loader: () => import('./member/editor-member.element'),
meta: {
entityType: 'member',
},
},
{
type: 'editor',
alias: 'Umb.Editor.MemberGroup',
name: 'Member Group Editor',
loader: () => import('./member-group/editor-member-group.element'),
meta: {
entityType: 'memberGroup',
},
},
{
type: 'editor',
alias: 'Umb.Editor.DataType',
name: 'Data Type Editor',
loader: () => import('./data-type/editor-data-type.element'),
meta: {
entityType: 'dataType',
},
},
{
type: 'editor',
alias: 'Umb.Editor.DocumentType',
name: 'Document Type Editor',
loader: () => import('./document-type/editor-document-type.element'),
meta: {
entityType: 'documentType',
},
},
{
type: 'editor',
alias: 'Umb.Editor.Extensions',
name: 'Extensions Editor',
loader: () => import('./extensions/editor-extensions.element'),
meta: {
entityType: 'extensionsList',
},
},
{
type: 'editor',
alias: 'Umb.Editor.Media',
name: 'Media Editor',
loader: () => import('./media/editor-media.element'),
meta: {
entityType: 'media',
},
},
{
type: 'editor',
alias: 'Umb.Editor.Document',
name: 'Content Editor',
loader: () => import('./document/editor-document.element'),
meta: {
entityType: 'document',
},
},
{
type: 'editor',
alias: 'Umb.Editor.User',
name: 'User Editor',
loader: () => import('./user/editor-user.element'),
meta: {
entityType: 'user',
},
},
{
type: 'editor',
alias: 'Umb.Editor.UserGroup',
name: 'User Group Editor',
loader: () => import('./user-group/editor-user-group.element'),
meta: {
entityType: 'userGroup',
},
},
{
type: 'editor',
alias: 'Umb.Editor.Package',
name: 'Package Editor',
loader: () => import('./package/editor-package.element'),
meta: {
entityType: 'package',
},
},
{
type: 'editor',
alias: 'Umb.Editor.PackageBuilder',
name: 'Package Builder Editor',
loader: () => import('./package-builder/editor-package-builder.element'),
meta: {
entityType: 'packageBuilder',
},
},
];

78
src/Umbraco.Web.UI.Client/src/backoffice/editors/media/editor-media.element.ts
View File

@@ -1,78 +0,0 @@
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { css, html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import type { ManifestEditorView } from '@umbraco-cms/models';
import { umbExtensionsRegistry } from '@umbraco-cms/extensions-registry';
import '../shared/node/editor-node.element';
@customElement('umb-editor-media')
export class UmbEditorMediaElement extends LitElement {
static styles = [
UUITextStyles,
css`
:host {
display: block;
width: 100%;
height: 100%;
}
`,
];
@property()
entityKey!: string;
constructor() {
super();
this._registerEditorViews();
}
private _registerEditorViews() {
const dashboards: Array<ManifestEditorView> = [
{
type: 'editorView',
alias: 'Umb.EditorView.Media.Edit',
name: 'Media Editor Edit View',
loader: () => import('../shared/node/views/edit/editor-view-node-edit.element'),
weight: 200,
meta: {
editors: ['Umb.Editor.Media'],
label: 'Media',
pathname: 'media',
icon: 'umb:picture',
},
},
{
type: 'editorView',
alias: 'Umb.EditorView.Media.Info',
name: 'Media Editor Info View',
loader: () => import('../shared/node/views/info/editor-view-node-info.element'),
weight: 100,
meta: {
editors: ['Umb.Editor.Media'],
label: 'Info',
pathname: 'info',
icon: 'info',
},
},
];
dashboards.forEach((dashboard) => {
if (umbExtensionsRegistry.isRegistered(dashboard.alias)) return;
umbExtensionsRegistry.register(dashboard);
});
}
render() {
return html`<umb-editor-node .entityKey=${this.entityKey} alias="Umb.Editor.Media"></umb-editor-node>`;
}
}
export default UmbEditorMediaElement;
declare global {
interface HTMLElementTagNameMap {
'umb-editor-media': UmbEditorMediaElement;
}
}

20
src/Umbraco.Web.UI.Client/src/backoffice/editors/media/editor-media.stories.ts
View File

@@ -1,20 +0,0 @@
import './editor-media.element';
import { Meta, Story } from '@storybook/web-components';
import { html } from 'lit-html';
import { data } from '../../../core/mocks/data/node.data';
import type { UmbEditorMediaElement } from './editor-media.element';
export default {
title: 'Editors/Media',
component: 'umb-editor-media',
id: 'umb-editor-media',
} as Meta;
const mediaNodes = data.filter((node) => node.type === 'media');
export const AAAOverview: Story<UmbEditorMediaElement> = () =>
html` <umb-editor-media id="${mediaNodes[0].key}"></umb-editor-media>`;
AAAOverview.storyName = 'Overview';

31
src/Umbraco.Web.UI.Client/src/backoffice/editors/package-builder/editor-package-builder.element.ts
View File

@@ -1,31 +0,0 @@
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { css, html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
@customElement('umb-editor-package-builder')
export class UmbEditorPackageBuilderElement extends LitElement {
static styles = [
UUITextStyles,
css`
:host {
display: block;
width: 100%;
height: 100%;
}
`,
];
render() {
return html`<umb-editor-entity-layout alias="Umb.Editor.PackageBuilder"
>PACKAGE BUILDER</umb-editor-entity-layout
> `;
}
}
export default UmbEditorPackageBuilderElement;
declare global {
interface HTMLElementTagNameMap {
'umb-editor-package-builder': UmbEditorPackageBuilderElement;
}
}

46
src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-action-extension/editor-action-extension.element.ts
View File

@@ -1,46 +0,0 @@
import { UUITextStyles } from '@umbraco-ui/uui';
import { CSSResultGroup, html, LitElement } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { createExtensionElement } from '@umbraco-cms/extensions-api';
import type { ManifestEditorAction } from '@umbraco-cms/models';
@customElement('umb-editor-action-extension')
export class UmbEditorActionExtensionElement extends LitElement {
static styles: CSSResultGroup = [UUITextStyles];
private _editorAction?: ManifestEditorAction;
@property({ type: Object })
public get editorAction(): ManifestEditorAction | undefined {
return this._editorAction;
}
public set editorAction(value: ManifestEditorAction | undefined) {
this._editorAction = value;
this._createElement();
}
@state()
private _element?: any;
private async _createElement() {
if (!this.editorAction) return;
try {
this._element = await createExtensionElement(this.editorAction);
if (!this._element) return;
this._element.editorAction = this.editorAction;
} catch (error) {
// TODO: loading JS failed so we should do some nice UI. (This does only happen if extension has a js prop, otherwise we concluded that no source was needed resolved the load.)
}
}
render() {
return html`${this._element}`;
}
}
declare global {
interface HTMLElementTagNameMap {
'umb-editor-action-extension': UmbEditorActionExtensionElement;
}
}

91
src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-entity/editor-entity.element.ts
View File

@@ -1,91 +0,0 @@
import { css, html, LitElement } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property, state } from 'lit/decorators.js';
import { map } from 'rxjs';
import { UmbObserverMixin } from '@umbraco-cms/observable-api';
import { createExtensionElement } from '@umbraco-cms/extensions-api';
import { umbExtensionsRegistry } from '@umbraco-cms/extensions-registry';
import { UmbContextConsumerMixin } from '@umbraco-cms/context-api';
import type { ManifestEditor } from '@umbraco-cms/models';
@customElement('umb-editor-entity')
export class UmbEditorEntityElement extends UmbContextConsumerMixin(UmbObserverMixin(LitElement)) {
static styles = [
UUITextStyles,
css`
:host {
display: block;
width: 100%;
height: 100%;
}
`,
];
@property()
public entityKey!: string;
private _entityType = '';
@property()
public get entityType(): string {
return this._entityType;
}
public set entityType(value: string) {
this._entityType = value;
this._observeEditors();
}
@state()
private _element?: any;
private _currentEditorAlias = '';
connectedCallback(): void {
super.connectedCallback();
this._observeEditors();
}
private _observeEditors() {
this.observe<ManifestEditor>(
umbExtensionsRegistry
.extensionsOfType('editor')
.pipe(map((editors) => editors.find((editor) => editor.meta.entityType === this.entityType))),
(editor) => {
// don't rerender editor if it's the same
if (this._currentEditorAlias === editor.alias) return;
this._currentEditorAlias = editor.alias;
this._createElement(editor);
}
);
}
private async _createElement(editor?: ManifestEditor) {
// TODO: implement fallback editor
const fallbackEditor = document.createElement('div');
fallbackEditor.innerHTML = '<p>No editor found</p>';
if (!editor) {
this._element = fallbackEditor;
return;
}
try {
this._element = (await createExtensionElement(editor)) as any;
this._element.entityKey = this.entityKey;
} catch (error) {
this._element = fallbackEditor;
}
}
render() {
return html`${this._element}`;
}
}
export default UmbEditorEntityElement;
declare global {
interface HTMLElementTagNameMap {
'umb-editor-entity': UmbEditorEntityElement;
}
}

74
src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-layout/editor-layout.element.ts
View File

@@ -1,74 +0,0 @@
import { css, html, LitElement } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement } from 'lit/decorators.js';
@customElement('umb-editor-layout')
export class UmbEditorLayout extends LitElement {
static styles = [
UUITextStyles,
css`
:host {
display: block;
width: 100%;
height: 100%;
}
#editor-frame {
background-color: var(--uui-color-background);
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
#header {
background-color: var(--uui-color-surface);
width: 100%;
border-bottom: 1px solid var(--uui-color-border);
box-sizing: border-box;
padding: 0 var(--uui-size-6);
}
#main {
/* padding: 0 var(--uui-size-6); */
display: flex;
flex: 1;
flex-direction: column;
}
#footer {
display: flex;
align-items: center;
height: 70px;
width: 100%;
padding: 0 var(--uui-size-6);
border-top: 1px solid var(--uui-color-border);
background-color: var(--uui-color-surface);
box-sizing: border-box;
}
`,
];
render() {
return html`
<div id="editor-frame">
<div id="header">
<slot name="header"></slot>
</div>
<uui-scroll-container id="main">
<slot></slot>
</uui-scroll-container>
<div id="footer">
<!-- only show footer if slot has elements -->
<slot name="footer"></slot>
</div>
</div>
`;
}
}
declare global {
interface HTMLElementTagNameMap {
'umb-editor-layout': UmbEditorLayout;
}
}

20
src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-property-layout/editor-property-layout.stories.ts
View File

@@ -1,20 +0,0 @@
import { Meta, Story } from '@storybook/web-components';
import { html } from 'lit-html';
import type { UmbEditorPropertyLayoutElement } from './editor-property-layout.element';
import './editor-property-layout.element';
export default {
title: 'Editors/Shared/Editor Property Layout',
component: 'umb-editor-property-layout',
id: 'umb-editor-property-layout',
} as Meta;
export const AAAOverview: Story<UmbEditorPropertyLayoutElement> = () => html` <umb-editor-property-layout
label="Label"
description="Description">
<div slot="property-action-menu"><uui-button color="" look="placeholder">Menu</uui-button></div>
<div slot="editor"><uui-button color="" look="placeholder">Editor</uui-button></div>
</umb-editor-property-layout>`;
AAAOverview.storyName = 'Overview';

18
src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/node/editor-node.stories.ts
View File

@@ -1,18 +0,0 @@
import './editor-node.element';
import { Meta, Story } from '@storybook/web-components';
import { html } from 'lit-html';
import { data } from '../../../../core/mocks/data/node.data';
import type { UmbEditorNodeElement } from './editor-node.element';
export default {
title: 'Editors/Shared/Node',
component: 'umb-editor-node',
id: 'umb-editor-node',
} as Meta;
export const AAAOverview: Story<UmbEditorNodeElement> = () =>
html` <umb-editor-node id="${data[0].key}"></umb-editor-node>`;
AAAOverview.storyName = 'Overview';

63
src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/node/views/edit/editor-view-node-edit.element.ts
View File

@@ -1,63 +0,0 @@
import { html, LitElement } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, state } from 'lit/decorators.js';
import { distinctUntilChanged } from 'rxjs';
import { NodeEntity, NodeProperty, NodePropertyData } from '../../../../../../core/mocks/data/node.data';
import { UmbNodeContext } from '../../node.context';
import { UmbContextConsumerMixin } from '@umbraco-cms/context-api';
import '../../../../../components/node-property/node-property.element';
import { UmbObserverMixin } from '@umbraco-cms/observable-api';
@customElement('umb-editor-view-node-edit')
export class UmbEditorViewNodeEditElement extends UmbContextConsumerMixin(UmbObserverMixin(LitElement)) {
static styles = [UUITextStyles];
@state()
_properties: NodeProperty[] = [];
@state()
_data: NodePropertyData[] = [];
private _nodeContext?: UmbNodeContext;
constructor() {
super();
this.consumeContext('umbNodeContext', (nodeContext) => {
this._nodeContext = nodeContext;
this._observeNode();
});
}
private _observeNode() {
if (!this._nodeContext) return;
this.observe<NodeEntity>(this._nodeContext.data.pipe(distinctUntilChanged()), (node) => {
this._properties = node.properties;
this._data = node.data;
});
}
render() {
return html`
<uui-box>
${this._properties.map(
(property: NodeProperty) => html`
<umb-node-property
.property=${property}
.value=${this._data.find((data) => data.alias === property.alias)?.value}></umb-node-property>
`
)}
</uui-box>
`;
}
}
export default UmbEditorViewNodeEditElement;
declare global {
interface HTMLElementTagNameMap {
'umb-editor-view-node-edit': UmbEditorViewNodeEditElement;
}
}

25
src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/node/views/edit/editor-view-node-edit.stories.ts
View File

@@ -1,25 +0,0 @@
import './editor-view-node-edit.element';
import { Meta, Story } from '@storybook/web-components';
import { html } from 'lit-html';
import { data } from '../../../../../../core/mocks/data/node.data';
import { UmbNodeContext } from '../../node.context';
import type { UmbEditorViewNodeEditElement } from './editor-view-node-edit.element';
export default {
title: 'Editors/Shared/Node/Views/Edit',
component: 'umb-editor-view-node-edit',
id: 'umb-editor-view-node-edit',
decorators: [
(story) =>
html` <umb-context-provider key="umbNodeContext" .value=${new UmbNodeContext(data[0])}>
${story()}
</umb-context-provider>`,
],
} as Meta;
export const AAAOverview: Story<UmbEditorViewNodeEditElement> = () =>
html` <umb-editor-view-node-edit></umb-editor-view-node-edit>`;
AAAOverview.storyName = 'Overview';

25
src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/node/views/info/editor-view-node-info.stories.ts
View File

@@ -1,25 +0,0 @@
import './editor-view-node-info.element';
import { Meta, Story } from '@storybook/web-components';
import { html } from 'lit-html';
import { data } from '../../../../../../core/mocks/data/node.data';
import { UmbNodeContext } from '../../node.context';
import type { UmbEditorViewNodeInfoElement } from './editor-view-node-info.element';
export default {
title: 'Editors/Shared/Node/Views/Info',
component: 'umb-editor-view-node-info',
id: 'umb-editor-view-node-info',
decorators: [
(story) =>
html` <umb-context-provider key="umbNodeContext" .value=${new UmbNodeContext(data[0])}>
${story()}
</umb-context-provider>`,
],
} as Meta;
export const AAAOverview: Story<UmbEditorViewNodeInfoElement> = () =>
html` <umb-editor-view-node-info></umb-editor-view-node-info>`;
AAAOverview.storyName = 'Overview';

44
src/Umbraco.Web.UI.Client/src/backoffice/external-login-providers/external-login-provider-extension.element.ts Normal file
View File

@@ -0,0 +1,44 @@
import { CSSResultGroup, html, LitElement } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property, state } from 'lit/decorators.js';
import { createExtensionElement } from '@umbraco-cms/extensions-api';
import type { ManifestExternalLoginProvider } from '@umbraco-cms/models';
@customElement('umb-external-login-provider-extension')
export class UmbExternalLoginProviderExtensionElement extends LitElement {
static styles: CSSResultGroup = [UUITextStyles];
private _externalLoginProvider?: ManifestExternalLoginProvider;
@property({ type: Object })
public get externalLoginProvider(): ManifestExternalLoginProvider | undefined {
return this._externalLoginProvider;
}
public set externalLoginProvider(value: ManifestExternalLoginProvider | undefined) {
this._externalLoginProvider = value;
this._createElement();
}
@state()
private _element?: any;
private async _createElement() {
if (!this.externalLoginProvider) return;
try {
this._element = (await createExtensionElement(this.externalLoginProvider)) as any | undefined;
} catch (error) {
// TODO: loading JS failed so we should do some nice UI. (This does only happen if extension has a js prop, otherwise we concluded that no source was needed resolved the load.)
}
}
render() {
return html`${this._element}`;
}
}
declare global {
interface HTMLElementTagNameMap {
'umb-external-login-provider-extension': UmbExternalLoginProviderExtensionElement;
}
}

44
src/Umbraco.Web.UI.Client/src/backoffice/external-login-providers/external-login-provider-test.element.ts Normal file
View File

@@ -0,0 +1,44 @@
import { css, html, LitElement } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement } from 'lit/decorators.js';
import { UmbContextProviderMixin, UmbContextConsumerMixin } from '@umbraco-cms/context-api';
import { UmbObserverMixin } from '@umbraco-cms/observable-api';
@customElement('umb-external-login-provider-test')
export class UmbExternalLoginProviderTestElement extends UmbContextProviderMixin(
UmbContextConsumerMixin(UmbObserverMixin(LitElement))
) {
static styles = [
UUITextStyles,
css`
:host {
display: flex;
flex-direction: column;
gap: var(--uui-size-space-4);
padding: var(--uui-size-space-5);
border: 1px solid var(--uui-color-border);
background: var(--uui-color-surface-alt);
border-radius: var(--uui-border-radius);
}
p {
margin: 0;
}
`,
];
render() {
return html`
<b>Custom External Login Provider</b>
<p>This is an example of a custom external login provider using the external login provider extension point</p>
<uui-button label="My custom login provider" look="primary"></uui-button>
`;
}
}
export default UmbExternalLoginProviderTestElement;
declare global {
interface HTMLElementTagNameMap {
'umb-external-login-provider-test': UmbExternalLoginProviderTestElement;
}
}

57
src/Umbraco.Web.UI.Client/src/backoffice/external-login-providers/external-login-provider-test2.element.ts Normal file
View File

@@ -0,0 +1,57 @@
import { css, html, LitElement } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement } from 'lit/decorators.js';
import { UmbContextProviderMixin, UmbContextConsumerMixin } from '@umbraco-cms/context-api';
import { UmbObserverMixin } from '@umbraco-cms/observable-api';
@customElement('umb-external-login-provider-test2')
export class UmbExternalLoginProviderTest2Element extends UmbContextProviderMixin(
UmbContextConsumerMixin(UmbObserverMixin(LitElement))
) {
static styles = [
UUITextStyles,
css`
:host {
display: flex;
flex-direction: column;
gap: var(--uui-size-space-4);
padding: var(--uui-size-space-5);
border: 1px solid var(--uui-color-border);
background: var(--uui-color-surface-alt);
border-radius: var(--uui-border-radius);
}
p {
margin: 0;
}
uui-input {
width: 100%;
}
`,
];
render() {
return html`
<b>Another Custom External Login Provider</b>
<p>This is an example of another custom external login provider</p>
<uui-form-layout-item>
<uui-label id="emailLabel" for="email" slot="label" required>Email</uui-label>
<uui-input
type="email"
id="email"
name="email"
placeholder="Enter your email..."
required
required-message="Email is required"></uui-input>
</uui-form-layout-item>
<uui-button label="Custom login" look="primary"></uui-button>
`;
}
}
export default UmbExternalLoginProviderTest2Element;
declare global {
interface HTMLElementTagNameMap {
'umb-external-login-provider-test2': UmbExternalLoginProviderTest2Element;
}
}

28
src/Umbraco.Web.UI.Client/src/backoffice/external-login-providers/manifests.ts Normal file
View File

@@ -0,0 +1,28 @@
import type { ManifestExternalLoginProvider } from '@umbraco-cms/models';
export const manifests: Array<ManifestExternalLoginProvider> = [
{
type: 'externalLoginProvider',
alias: 'Umb.ExternalLoginProvider.Test',
name: 'Test External Login Provider',
elementName: 'umb-external-login-provider-test',
loader: () => import('./external-login-provider-test.element'),
weight: 2,
meta: {
label: 'Test External Login Provider',
pathname: 'test/test/test',
},
},
{
type: 'externalLoginProvider',
alias: 'Umb.ExternalLoginProvider.Test2',
name: 'Test External Login Provider 2',
elementName: 'umb-external-login-provider-test2',
loader: () => import('./external-login-provider-test2.element'),
weight: 1,
meta: {
label: 'Test External Login Provider 2',
pathname: 'test/test/test',
},
},
];

36
src/Umbraco.Web.UI.Client/src/backoffice/header-apps/header-app-button.element.ts Normal file
View File

@@ -0,0 +1,36 @@
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { css, CSSResultGroup, html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { ManifestHeaderApp } from '@umbraco-cms/extensions-registry';
@customElement('umb-header-app-button')
export class UmbHeaderAppButton extends LitElement {
static styles: CSSResultGroup = [
UUITextStyles,
css`
uui-button {
font-size: 18px;
}
`,
];
public manifest?: ManifestHeaderApp;
render() {
return html`
<uui-button look="primary" label="${ifDefined(this.manifest?.meta.label)}" compact>
<uui-icon name="${ifDefined(this.manifest?.meta.icon)}"></uui-icon>
</uui-button>
`;
}
}
export default UmbHeaderAppButton;
declare global {
interface HTMLElementTagNameMap {
'umb-header-app-button': UmbHeaderAppButton;
}
}

61
src/Umbraco.Web.UI.Client/src/backoffice/header-apps/header-app-current-user.element.ts Normal file
View File

@@ -0,0 +1,61 @@
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { css, CSSResultGroup, html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { UmbContextConsumerMixin } from '@umbraco-cms/context-api';
import { UmbObserverMixin } from '@umbraco-cms/observable-api';
import type { UserDetails } from '@umbraco-cms/models';
import { UmbModalService } from '@umbraco-cms/services';
import { umbCurrentUserService } from 'src/core/services/current-user';
@customElement('umb-header-app-current-user')
export class UmbHeaderAppCurrentUser extends UmbContextConsumerMixin(UmbObserverMixin(LitElement)) {
static styles: CSSResultGroup = [
UUITextStyles,
css`
uui-button {
font-size: 14px;
}
`,
];
@state()
private _currentUser?: UserDetails;
private _modalService?: UmbModalService;
constructor() {
super();
this.consumeAllContexts(['umbUserStore', 'umbModalService'], (instances) => {
this._modalService = instances['umbModalService'];
this._observeCurrentUser();
});
}
private async _observeCurrentUser() {
this.observe<UserDetails>(umbCurrentUserService.currentUser, (currentUser) => {
this._currentUser = currentUser;
});
}
private _handleUserClick() {
this._modalService?.userSettings();
}
render() {
return html`
<uui-button @click=${this._handleUserClick} look="primary" label="${this._currentUser?.name || ''}" compact>
<uui-avatar name="${this._currentUser?.name || ''}"></uui-avatar>
</uui-button>
`;
}
}
export default UmbHeaderAppCurrentUser;
declare global {
interface HTMLElementTagNameMap {
'umb-header-app-current-user': UmbHeaderAppCurrentUser;
}
}

41
src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/content-picker/property-editor-ui-content-picker.element.ts
View File

@@ -1,13 +1,14 @@
import { css, html, LitElement, nothing } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property, state } from 'lit/decorators.js';
import { ifDefined } from 'lit-html/directives/if-defined.js';
import type { UmbModalService } from '../../../core/services/modal';
import type { UmbEntityStore } from '../../../core/stores/entity.store';
import type { Entity } from '../../../core/mocks/data/entities';
import { UmbObserverMixin } from '@umbraco-cms/observable-api';
import { UmbContextConsumerMixin } from '@umbraco-cms/context-api';
import { UmbDocumentStore } from 'src/core/stores/document/document.store';
import { FolderTreeItem } from '@umbraco-cms/backend-api';
// TODO: rename to Document Picker
@customElement('umb-property-editor-ui-content-picker')
export class UmbPropertyEditorUIContentPickerElement extends UmbContextConsumerMixin(UmbObserverMixin(LitElement)) {
static styles = [
@@ -41,36 +42,37 @@ export class UmbPropertyEditorUIContentPickerElement extends UmbContextConsumerM
public config = [];
@state()
private _items: Array<Entity> = [];
private _items: Array<FolderTreeItem> = [];
private _modalService?: UmbModalService;
private _entityStore?: UmbEntityStore;
private _documentStore?: UmbDocumentStore;
constructor() {
super();
this.consumeAllContexts(['umbEntityStore', 'umbModalService'], (instances) => {
this._entityStore = instances['umbEntityStore'];
this.consumeAllContexts(['umbDocumentStore', 'umbModalService'], (instances) => {
this._documentStore = instances['umbDocumentStore'];
this._modalService = instances['umbModalService'];
this._observePickedEntities();
this._observePickedDocuments();
});
}
private _observePickedEntities() {
if (!this._entityStore) return;
this.observe<Entity[]>(this._entityStore.getByKeys(this.value), (entities) => {
this._items = entities;
private _observePickedDocuments() {
if (!this._documentStore) return;
// TODO: consider changing this to the list data endpoint when it is available
this.observe<FolderTreeItem[]>(this._documentStore.getTreeItems(this.value), (items) => {
this._items = items;
});
}
private _openPicker() {
const modalHandler = this._modalService?.contentPicker({ multiple: true, selection: this.value });
modalHandler?.onClose().then(({ selection }: any) => {
this._setValue([...this.value, ...selection]);
this._setValue([...selection]);
});
}
private _removeItem(item: Entity) {
private _removeItem(item: FolderTreeItem) {
const modalHandler = this._modalService?.confirm({
color: 'danger',
headline: `Remove ${item.name}?`,
@@ -88,14 +90,17 @@ export class UmbPropertyEditorUIContentPickerElement extends UmbContextConsumerM
private _setValue(newValue: Array<string>) {
this.value = newValue;
this._observePickedEntities();
this._observePickedDocuments();
this.dispatchEvent(new CustomEvent('property-editor-change', { bubbles: true, composed: true }));
}
private _renderItem(item: Entity) {
private _renderItem(item: FolderTreeItem) {
// TODO: remove when we have a way to handle trashed items
const tempItem = item as FolderTreeItem & { isTrashed: boolean };
return html`
<uui-ref-node name=${item.name} detail=${item.key}>
${item.isTrashed ? html` <uui-tag size="s" slot="tag" color="danger">Trashed</uui-tag> ` : nothing}
<uui-ref-node name=${ifDefined(item.name === null ? undefined : item.name)} detail=${ifDefined(item.key)}>
${tempItem.isTrashed ? html` <uui-tag size="s" slot="tag" color="danger">Trashed</uui-tag> ` : nothing}
<uui-action-bar slot="actions">
<uui-button @click=${() => this._removeItem(item)}>Remove</uui-button>
</uui-action-bar>

4
src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/content-picker/property-editor-ui-content-picker.stories.ts
View File

@@ -1,10 +1,10 @@
import { Meta, Story } from '@storybook/web-components';
import { html } from 'lit-html';
import { UmbModalService } from '../../../core/services/modal';
import type { UmbPropertyEditorUIContentPickerElement } from './property-editor-ui-content-picker.element';
import './property-editor-ui-content-picker.element';
import { UmbModalService } from '../../../core/services/modal';
import '../../components/backoffice-modal-container.element';
import '../../components/backoffice-frame/backoffice-modal-container.element';
export default {
title: 'Property Editor UIs/Content Picker',

6
src/Umbraco.Web.UI.Client/src/backoffice/sections/packages/views/created/section-view-packages-created.element.ts
View File

@@ -1,7 +1,7 @@
import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { IRoute, IRoutingInfo } from 'router-slot';
import { UmbEditorEntityElement } from '../../../../editors/shared/editor-entity/editor-entity.element';
import { UmbWorkspaceEntityElement } from '../../../../workspaces/shared/workspace-entity/workspace-entity.element';
@customElement('umb-section-view-packages-created')
export class UmbSectionViewPackagesCreatedElement extends LitElement {
@@ -13,9 +13,9 @@ export class UmbSectionViewPackagesCreatedElement extends LitElement {
},
{
path: `:entityType/:key`,
component: () => import('../../../../editors/shared/editor-entity/editor-entity.element'),
component: () => import('../../../../workspaces/shared/workspace-entity/workspace-entity.element'),
setup: (component: HTMLElement, info: IRoutingInfo) => {
const element = component as UmbEditorEntityElement;
const element = component as UmbWorkspaceEntityElement;
element.entityKey = info.match.params.key;
element.entityType = info.match.params.entityType;
},

6
src/Umbraco.Web.UI.Client/src/backoffice/sections/packages/views/installed/section-view-packages-installed.element.ts
View File

@@ -1,7 +1,7 @@
import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { IRoute, IRoutingInfo } from 'router-slot';
import { UmbEditorEntityElement } from '../../../../editors/shared/editor-entity/editor-entity.element';
import { UmbWorkspaceEntityElement } from '../../../../workspaces/shared/workspace-entity/workspace-entity.element';
@customElement('umb-section-view-packages-installed')
export class UmbSectionViewPackagesInstalledElement extends LitElement {
@@ -13,9 +13,9 @@ export class UmbSectionViewPackagesInstalledElement extends LitElement {
},
{
path: `:entityType/:key`,
component: () => import('../../../../editors/shared/editor-entity/editor-entity.element'),
component: () => import('../../../../workspaces/shared/workspace-entity/workspace-entity.element'),
setup: (component: HTMLElement, info: IRoutingInfo) => {
const element = component as UmbEditorEntityElement;
const element = component as UmbWorkspaceEntityElement;
element.entityKey = info.match.params.key;
element.entityType = info.match.params.entityType;
},

1
src/Umbraco.Web.UI.Client/src/backoffice/sections/packages/views/repo/section-view-packages-repo.element.ts
View File

@@ -3,6 +3,7 @@ import { customElement } from 'lit/decorators.js';
@customElement('umb-section-view-packages-repo')
export class UmbSectionViewPackagesRepoElement extends LitElement {
render() {
return html`
<uui-box headline="Popular"></uui-box>

4
src/Umbraco.Web.UI.Client/src/backoffice/sections/section.context.ts
View File

@@ -1,7 +1,5 @@
import { BehaviorSubject, ReplaySubject } from 'rxjs';
import { Entity } from '../../core/mocks/data/entities';
import type { ManifestSection, ManifestSectionView, ManifestTree } from '@umbraco-cms/models';
import type { Entity, ManifestSection, ManifestSectionView, ManifestTree } from '@umbraco-cms/models';
export class UmbSectionContext {
// TODO: figure out how fine grained we want to make our observables.

51
src/Umbraco.Web.UI.Client/src/backoffice/sections/shared/section.element.ts
View File

@@ -3,8 +3,7 @@ import { css, html, LitElement, nothing } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { map, switchMap, EMPTY, of } from 'rxjs';
import { UmbSectionContext } from '../section.context';
import { UmbEditorEntityElement } from '../../editors/shared/editor-entity/editor-entity.element';
import { UmbEntityStore } from '../../../core/stores/entity.store';
import { UmbWorkspaceEntityElement } from '../../workspaces/shared/workspace-entity/workspace-entity.element';
import { UmbObserverMixin } from '@umbraco-cms/observable-api';
import { createExtensionElement } from '@umbraco-cms/extensions-api';
import { UmbContextConsumerMixin } from '@umbraco-cms/context-api';
@@ -25,18 +24,6 @@ export class UmbSectionElement extends UmbContextConsumerMixin(UmbObserverMixin(
display: flex;
}
#header {
display: flex;
gap: 16px;
align-items: center;
min-height: 60px;
}
uui-tab-group {
--uui-tab-divider: var(--uui-color-border);
border-left: 1px solid var(--uui-color-border);
border-right: 1px solid var(--uui-color-border);
}
#router-slot {
overflow: auto;
height: 100%;
@@ -54,15 +41,13 @@ export class UmbSectionElement extends UmbContextConsumerMixin(UmbObserverMixin(
@state()
private _views: Array<ManifestSectionView> = [];
private _entityStore?: UmbEntityStore;
private _sectionContext?: UmbSectionContext;
constructor() {
super();
this.consumeAllContexts(['umbSectionContext', 'umbEntityStore'], (instances) => {
this.consumeAllContexts(['umbSectionContext'], (instances) => {
this._sectionContext = instances['umbSectionContext'];
this._entityStore = instances['umbEntityStore'];
this._observeTrees();
this._observeViews();
@@ -70,7 +55,7 @@ export class UmbSectionElement extends UmbContextConsumerMixin(UmbObserverMixin(
}
private _observeTrees() {
if (!this._sectionContext || !this._entityStore) return;
if (!this._sectionContext) return;
this.observe<ManifestTree[]>(
this._sectionContext?.data.pipe(
@@ -93,24 +78,26 @@ export class UmbSectionElement extends UmbContextConsumerMixin(UmbObserverMixin(
}
private _createTreeRoutes() {
const treeRoutes =
this._trees?.map(() => {
return {
path: `:entityType/:key`,
component: () => import('../../editors/shared/editor-entity/editor-entity.element'),
setup: (component: UmbEditorEntityElement, info: any) => {
component.entityKey = info.match.params.key;
component.entityType = info.match.params.entityType;
},
};
}) ?? [];
this._routes = [
{
path: 'dashboard',
component: () => import('./section-dashboards/section-dashboards.element'),
},
...treeRoutes,
{
path: `:entityType/:key`,
component: () => import('../../workspaces/shared/workspace-entity/workspace-entity.element'),
setup: (component: UmbWorkspaceEntityElement, info: any) => {
component.entityKey = info.match.params.key;
component.entityType = info.match.params.entityType;
},
},
{
path: `:entityType`,
component: () => import('../../workspaces/shared/workspace-entity/workspace-entity.element'),
setup: (component: UmbWorkspaceEntityElement, info: any) => {
component.entityType = info.match.params.entityType;
},
},
{
path: '**',
redirectTo: 'dashboard',
@@ -119,7 +106,7 @@ export class UmbSectionElement extends UmbContextConsumerMixin(UmbObserverMixin(
}
private _observeViews() {
if (!this._sectionContext || !this._entityStore) return;
if (!this._sectionContext) return;
this.observe<ManifestSectionView[]>(
this._sectionContext.data.pipe(

4
src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/user-groups/section-view-user-groups.element.ts
View File

@@ -1,12 +1,12 @@
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import './editor-view-user-groups.element';
import './workspace-view-user-groups.element';
@customElement('umb-section-view-user-groups')
export class UmbSectionViewUserGroupsElement extends LitElement {
render() {
return html`<umb-editor-view-user-groups></umb-editor-view-user-groups>`;
return html`<umb-workspace-view-user-groups></umb-workspace-view-user-groups>`;
}
}

2
src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/user-groups/user-group-table-name-column-layout.element.ts
View File

@@ -11,7 +11,7 @@ export class UmbUserGroupTableNameColumnLayoutElement extends LitElement {
value!: any;
render() {
return html` <a style="font-weight: bold;" href="section/users/view/users/userGroup/${this.item.key}">
return html` <a style="font-weight: bold;" href="section/users/view/users/user-group/${this.item.key}">
${this.value.name}
</a>`;
}

12
src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/user-groups/editor-view-user-groups.element.ts → src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/user-groups/workspace-view-user-groups.element.ts
View File

@@ -18,8 +18,8 @@ import './user-group-table-sections-column-layout.element';
import { UmbObserverMixin } from '@umbraco-cms/observable-api';
import { UmbUserGroupStore } from '@umbraco-cms/stores/user/user-group.store';
@customElement('umb-editor-view-user-groups')
export class UmbEditorViewUserGroupsElement extends UmbContextConsumerMixin(UmbObserverMixin(LitElement)) {
@customElement('umb-workspace-view-user-groups')
export class UmbWorkspaceViewUserGroupsElement extends UmbContextConsumerMixin(UmbObserverMixin(LitElement)) {
static styles = [
UUITextStyles,
css`
@@ -72,8 +72,8 @@ export class UmbEditorViewUserGroupsElement extends UmbContextConsumerMixin(UmbO
connectedCallback(): void {
super.connectedCallback();
this.consumeContext('umbUserGroupStore', (userStore: UmbUserGroupStore) => {
this._userGroupStore = userStore;
this.consumeContext('umbUserGroupStore', (userGroupStore: UmbUserGroupStore) => {
this._userGroupStore = userGroupStore;
this._observeUserGroups();
});
}
@@ -147,10 +147,10 @@ export class UmbEditorViewUserGroupsElement extends UmbContextConsumerMixin(UmbO
}
}
export default UmbEditorViewUserGroupsElement;
export default UmbWorkspaceViewUserGroupsElement;
declare global {
interface HTMLElementTagNameMap {
'umb-editor-view-user-groups': UmbEditorViewUserGroupsElement;
'umb-workspace-view-user-groups': UmbWorkspaceViewUserGroupsElement;
}
}

19
src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/users/editor-view-users-overview.test.ts
View File

@@ -1,19 +0,0 @@
import { expect, fixture, html } from '@open-wc/testing';
//TODO: Test has been commented out while we figure out how to setup import maps for the test environment
// import { defaultA11yConfig } from '@umbraco-cms/test-utils';
// import UmbEditorViewUsersOverviewElement from './editor-view-users-overview.element';
// describe('UmbEditorViewUsersOverviewElement', () => {
// let element: UmbEditorViewUsersOverviewElement;
// beforeEach(async () => {
// element = await fixture(html`<umb-editor-view-users-overview></umb-editor-view-users-overview>`);
// });
// it('is defined with its own instance', () => {
// expect(element).to.be.instanceOf(UmbEditorViewUsersOverviewElement);
// });
// it('passes the a11y audit', async () => {
// await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
// });
// });

19
src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/users/editor-view-users-selection.test.ts
View File

@@ -1,19 +0,0 @@
import { expect, fixture, html } from '@open-wc/testing';
//TODO: Test has been commented out while we figure out how to setup import maps for the test environment
// import UmbEditorViewUsersSelectionElement from './editor-view-users-selection.element';
// import { defaultA11yConfig } from '@umbraco-cms/test-utils';
// describe('UmbEditorViewUsersSelectionElement', () => {
// let element: UmbEditorViewUsersSelectionElement;
// beforeEach(async () => {
// element = await fixture(html`<umb-editor-view-users-selection></umb-editor-view-users-selection>`);
// });
// it('is defined with its own instance', () => {
// expect(element).to.be.instanceOf(UmbEditorViewUsersSelectionElement);
// });
// it('passes the a11y audit', async () => {
// await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
// });
// });

18
src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/users/list-view-layouts/grid/editor-view-users-grid.test.ts
View File

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

8
src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/users/list-view-layouts/grid/editor-view-users-grid.element.ts → src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/users/list-view-layouts/grid/workspace-view-users-grid.element.ts
View File

@@ -10,8 +10,8 @@ import type { UserDetails, UserEntity, UserGroupDetails, UserGroupEntity } from
import { UmbObserverMixin } from '@umbraco-cms/observable-api';
import { UmbUserGroupStore } from 'src/core/stores/user/user-group.store';
@customElement('umb-editor-view-users-grid')
export class UmbEditorViewUsersGridElement extends UmbContextConsumerMixin(UmbObserverMixin(LitElement)) {
@customElement('umb-workspace-view-users-grid')
export class UmbWorkspaceViewUsersGridElement extends UmbContextConsumerMixin(UmbObserverMixin(LitElement)) {
static styles = [
UUITextStyles,
css`
@@ -158,10 +158,10 @@ export class UmbEditorViewUsersGridElement extends UmbContextConsumerMixin(UmbOb
}
}
export default UmbEditorViewUsersGridElement;
export default UmbWorkspaceViewUsersGridElement;
declare global {
interface HTMLElementTagNameMap {
'umb-editor-view-users-grid': UmbEditorViewUsersGridElement;
'umb-workspace-view-users-grid': UmbWorkspaceViewUsersGridElement;
}
}

18
src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/users/list-view-layouts/grid/workspace-view-users-grid.test.ts Normal file
View File

@@ -0,0 +1,18 @@
import { expect, fixture, html } from '@open-wc/testing';
import { UmbWorkspaceViewUsersGridElement } from './workspace-view-users-grid.element';
import { defaultA11yConfig } from '@umbraco-cms/test-utils';
describe('UmbWorkspaceViewUsersCreateElement', () => {
let element: UmbWorkspaceViewUsersGridElement;
beforeEach(async () => {
element = await fixture(html`<umb-workspace-view-users-grid></umb-workspace-view-users-grid>`);
});
it('is defined with its own instance', () => {
expect(element).to.be.instanceOf(UmbWorkspaceViewUsersGridElement);
});
it('passes the a11y audit', async () => {
await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
});
});

8
src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/users/list-view-layouts/table/editor-view-users-table.element.ts → src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/users/list-view-layouts/table/workspace-view-users-table.element.ts
View File

@@ -19,8 +19,8 @@ import './column-layouts/name/user-table-name-column-layout.element';
import './column-layouts/status/user-table-status-column-layout.element';
import { UmbUserGroupStore } from 'src/core/stores/user/user-group.store';
@customElement('umb-editor-view-users-table')
export class UmbEditorViewUsersTableElement extends UmbContextConsumerMixin(UmbObserverMixin(LitElement)) {
@customElement('umb-workspace-view-users-table')
export class UmbWorkspaceViewUsersTableElement extends UmbContextConsumerMixin(UmbObserverMixin(LitElement)) {
static styles = [
UUITextStyles,
css`
@@ -184,10 +184,10 @@ export class UmbEditorViewUsersTableElement extends UmbContextConsumerMixin(UmbO
}
}
export default UmbEditorViewUsersTableElement;
export default UmbWorkspaceViewUsersTableElement;
declare global {
interface HTMLElementTagNameMap {
'umb-editor-view-users-table': UmbEditorViewUsersTableElement;
'umb-workspace-view-users-table': UmbWorkspaceViewUsersTableElement;
}
}

18
src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/users/section-view-users.element.ts
View File

@@ -3,13 +3,13 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, state } from 'lit/decorators.js';
import { BehaviorSubject, Observable } from 'rxjs';
import type { IRoute, IRoutingInfo } from 'router-slot';
import UmbEditorEntityElement from '../../../../editors/shared/editor-entity/editor-entity.element';
import { UmbWorkspaceEntityElement } from '../../../../workspaces/shared/workspace-entity/workspace-entity.element';
import { UmbContextConsumerMixin, UmbContextProviderMixin } from '@umbraco-cms/context-api';
import './list-view-layouts/table/editor-view-users-table.element';
import './list-view-layouts/grid/editor-view-users-grid.element';
import './editor-view-users-selection.element';
import './editor-view-users-invite.element';
import './list-view-layouts/table/workspace-view-users-table.element';
import './list-view-layouts/grid/workspace-view-users-grid.element';
import './workspace-view-users-selection.element';
import './workspace-view-users-invite.element';
import type { UserDetails } from '@umbraco-cms/models';
import { UmbObserverMixin } from '@umbraco-cms/observable-api';
import { UmbUserStore } from 'src/core/stores/user/user.store';
@@ -31,13 +31,13 @@ export class UmbSectionViewUsersElement extends UmbContextProviderMixin(
private _routes: IRoute[] = [
{
path: 'overview',
component: () => import('./editor-view-users-overview.element'),
component: () => import('./workspace-view-users-overview.element'),
},
{
path: `:entityType/:key`,
component: () => import('../../../../editors/shared/editor-entity/editor-entity.element'),
component: () => import('../../../../workspaces/shared/workspace-entity/workspace-entity.element'),
setup: (component: HTMLElement, info: IRoutingInfo) => {
const element = component as UmbEditorEntityElement;
const element = component as UmbWorkspaceEntityElement;
element.entityKey = info.match.params.key;
element.entityType = info.match.params.entityType;
},
@@ -108,7 +108,7 @@ export class UmbSectionViewUsersElement extends UmbContextProviderMixin(
}
render() {
return html` <router-slot .routes=${this._routes}></router-slot> `;
return html`<router-slot .routes=${this._routes}></router-slot>`;
}
}

8
src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/users/editor-view-users-create.element.ts → src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/users/workspace-view-users-create.element.ts
View File

@@ -9,8 +9,8 @@ import { UmbModalLayoutElement, UmbNotificationDefaultData, UmbNotificationServi
import { UmbUserStore } from '@umbraco-cms/stores/user/user.store';
export type UsersViewType = 'list' | 'grid';
@customElement('umb-editor-view-users-create')
export class UmbEditorViewUsersCreateElement extends UmbContextConsumerMixin(UmbModalLayoutElement) {
@customElement('umb-workspace-view-users-create')
export class UmbWorkspaceViewUsersCreateElement extends UmbContextConsumerMixin(UmbModalLayoutElement) {
static styles = [
UUITextStyles,
css`
@@ -203,10 +203,10 @@ export class UmbEditorViewUsersCreateElement extends UmbContextConsumerMixin(Umb
}
}
export default UmbEditorViewUsersCreateElement;
export default UmbWorkspaceViewUsersCreateElement;
declare global {
interface HTMLElementTagNameMap {
'umb-editor-view-users-create': UmbEditorViewUsersCreateElement;
'umb-workspace-view-users-create': UmbWorkspaceViewUsersCreateElement;
}
}

10
src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/users/editor-view-users-create.test.ts → src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/users/workspace-view-users-create.test.ts
View File

@@ -1,16 +1,16 @@
import { expect, fixture, html } from '@open-wc/testing';
//TODO: Test has been commented out while we figure out how to setup import maps for the test environment
// import { defaultA11yConfig } from '@umbraco-cms/test-utils';
// import UmbEditorViewUsersCreateElement from './editor-view-users-create.element';
// import UmbWorkspaceViewUsersCreateElement from './workspace-view-users-create.element';
// describe('UmbEditorViewUsersCreateElement', () => {
// let element: UmbEditorViewUsersCreateElement;
// describe('UmbWorkspaceViewUsersCreateElement', () => {
// let element: UmbWorkspaceViewUsersCreateElement;
// beforeEach(async () => {
// element = await fixture(html`<umb-editor-view-users-create></umb-editor-view-users-create>`);
// element = await fixture(html`<umb-workspace-view-users-create></umb-workspace-view-users-create>`);
// });
// it('is defined with its own instance', () => {
// expect(element).to.be.instanceOf(UmbEditorViewUsersCreateElement);
// expect(element).to.be.instanceOf(UmbWorkspaceViewUsersCreateElement);
// });
// it('passes the a11y audit', async () => {

8
src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/users/editor-view-users-invite.element.ts → src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/users/workspace-view-users-invite.element.ts
View File

@@ -8,8 +8,8 @@ import { UmbModalLayoutElement } from '@umbraco-cms/services';
import { UmbUserStore } from '@umbraco-cms/stores/user/user.store';
export type UsersViewType = 'list' | 'grid';
@customElement('umb-editor-view-users-invite')
export class UmbEditorViewUsersInviteElement extends UmbContextConsumerMixin(UmbModalLayoutElement) {
@customElement('umb-workspace-view-users-invite')
export class UmbWorkspaceViewUsersInviteElement extends UmbContextConsumerMixin(UmbModalLayoutElement) {
static styles = [
UUITextStyles,
css`
@@ -183,10 +183,10 @@ export class UmbEditorViewUsersInviteElement extends UmbContextConsumerMixin(Umb
}
}
export default UmbEditorViewUsersInviteElement;
export default UmbWorkspaceViewUsersInviteElement;
declare global {
interface HTMLElementTagNameMap {
'umb-editor-view-users-invite': UmbEditorViewUsersInviteElement;
'umb-workspace-view-users-invite': UmbWorkspaceViewUsersInviteElement;
}
}

10
src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/users/editor-view-users-invite.test.ts → src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/users/workspace-view-users-invite.test.ts
View File

@@ -1,16 +1,16 @@
import { expect, fixture, html } from '@open-wc/testing';
//TODO: Test has been commented out while we figure out how to setup import maps for the test environment
// import UmbEditorViewUsersInviteElement from './editor-view-users-invite.element';
// import UmbWorkspaceViewUsersInviteElement from './workspace-view-users-invite.element';
// import { defaultA11yConfig } from '@umbraco-cms/test-utils';
// describe('UmbEditorViewUsersInviteElement', () => {
// let element: UmbEditorViewUsersInviteElement;
// describe('UmbWorkspaceViewUsersInviteElement', () => {
// let element: UmbWorkspaceViewUsersInviteElement;
// beforeEach(async () => {
// element = await fixture(html`<umb-editor-view-users-invite></umb-editor-view-users-invite>`);
// element = await fixture(html`<umb-workspace-view-users-invite></umb-workspace-view-users-invite>`);
// });
// it('is defined with its own instance', () => {
// expect(element).to.be.instanceOf(UmbEditorViewUsersInviteElement);
// expect(element).to.be.instanceOf(UmbWorkspaceViewUsersInviteElement);
// });
// it('passes the a11y audit', async () => {

28
src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/users/editor-view-users-overview.element.ts → src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/users/workspace-view-users-overview.element.ts
View File

@@ -8,16 +8,16 @@ import type { UmbSectionViewUsersElement } from './section-view-users.element';
import { UmbContextConsumerMixin } from '@umbraco-cms/context-api';
import { UmbObserverMixin } from '@umbraco-cms/observable-api';
import './list-view-layouts/table/editor-view-users-table.element';
import './list-view-layouts/grid/editor-view-users-grid.element';
import './editor-view-users-selection.element';
import './editor-view-users-invite.element';
import './editor-view-users-create.element';
import './list-view-layouts/table/workspace-view-users-table.element';
import './list-view-layouts/grid/workspace-view-users-grid.element';
import './workspace-view-users-selection.element';
import './workspace-view-users-invite.element';
import './workspace-view-users-create.element';
import { UmbModalService } from '@umbraco-cms/services';
export type UsersViewType = 'list' | 'grid';
@customElement('umb-editor-view-users-overview')
export class UmbEditorViewUsersOverviewElement extends UmbContextConsumerMixin(UmbObserverMixin(LitElement)) {
@customElement('umb-workspace-view-users-overview')
export class UmbWorkspaceViewUsersOverviewElement extends UmbContextConsumerMixin(UmbObserverMixin(LitElement)) {
static styles = [
UUITextStyles,
css`
@@ -90,11 +90,11 @@ export class UmbEditorViewUsersOverviewElement extends UmbContextConsumerMixin(U
private _routes: IRoute[] = [
{
path: 'grid',
component: () => import('./list-view-layouts/grid/editor-view-users-grid.element'),
component: () => import('./list-view-layouts/grid/workspace-view-users-grid.element'),
},
{
path: 'list',
component: () => import('./list-view-layouts/table/editor-view-users-table.element'),
component: () => import('./list-view-layouts/table/workspace-view-users-table.element'),
},
{
path: '**',
@@ -136,7 +136,7 @@ export class UmbEditorViewUsersOverviewElement extends UmbContextConsumerMixin(U
private _renderSelection() {
if (this._selection.length === 0) return nothing;
return html`<umb-editor-view-users-selection></umb-editor-view-users-selection>`;
return html`<umb-workspace-view-users-selection></umb-workspace-view-users-selection>`;
}
private _handleTogglePopover(event: PointerEvent) {
@@ -163,9 +163,9 @@ export class UmbEditorViewUsersOverviewElement extends UmbContextConsumerMixin(U
private _showInviteOrCreate() {
let modal = undefined;
if (this.isCloud) {
modal = document.createElement('umb-editor-view-users-invite');
modal = document.createElement('umb-workspace-view-users-invite');
} else {
modal = document.createElement('umb-editor-view-users-create');
modal = document.createElement('umb-workspace-view-users-create');
}
this._modalService?.open(modal, { type: 'dialog' });
}
@@ -228,10 +228,10 @@ export class UmbEditorViewUsersOverviewElement extends UmbContextConsumerMixin(U
}
}
export default UmbEditorViewUsersOverviewElement;
export default UmbWorkspaceViewUsersOverviewElement;
declare global {
interface HTMLElementTagNameMap {
'umb-editor-view-users-overview': UmbEditorViewUsersOverviewElement;
'umb-workspace-view-users-overview': UmbWorkspaceViewUsersOverviewElement;
}
}

19
src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/users/workspace-view-users-overview.test.ts Normal file
View File

@@ -0,0 +1,19 @@
import { expect, fixture, html } from '@open-wc/testing';
//TODO: Test has been commented out while we figure out how to setup import maps for the test environment
// import { defaultA11yConfig } from '@umbraco-cms/test-utils';
// import UmbWorkspaceViewUsersOverviewElement from './workspace-view-users-overview.element';
// describe('UmbWorkspaceViewUsersOverviewElement', () => {
// let element: UmbWorkspaceViewUsersOverviewElement;
// beforeEach(async () => {
// element = await fixture(html`<umb-workspace-view-users-overview></umb-workspace-view-users-overview>`);
// });
// it('is defined with its own instance', () => {
// expect(element).to.be.instanceOf(UmbWorkspaceViewUsersOverviewElement);
// });
// it('passes the a11y audit', async () => {
// await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
// });
// });

8
src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/users/editor-view-users-selection.element.ts → src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/users/workspace-view-users-selection.element.ts
View File

@@ -6,8 +6,8 @@ import { UmbContextConsumerMixin } from '@umbraco-cms/context-api';
import { UmbObserverMixin } from '@umbraco-cms/observable-api';
import { UmbUserStore } from '@umbraco-cms/stores/user/user.store';
@customElement('umb-editor-view-users-selection')
export class UmbEditorViewUsersSelectionElement extends UmbContextConsumerMixin(UmbObserverMixin(LitElement)) {
@customElement('umb-workspace-view-users-selection')
export class UmbWorkspaceViewUsersSelectionElement extends UmbContextConsumerMixin(UmbObserverMixin(LitElement)) {
static styles = [
UUITextStyles,
css`
@@ -74,10 +74,10 @@ export class UmbEditorViewUsersSelectionElement extends UmbContextConsumerMixin(
}
}
export default UmbEditorViewUsersSelectionElement;
export default UmbWorkspaceViewUsersSelectionElement;
declare global {
interface HTMLElementTagNameMap {
'umb-editor-view-users-selection': UmbEditorViewUsersSelectionElement;
'umb-workspace-view-users-selection': UmbWorkspaceViewUsersSelectionElement;
}
}

19
src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/users/workspace-view-users-selection.test.ts Normal file
View File

@@ -0,0 +1,19 @@
import { expect, fixture, html } from '@open-wc/testing';
//TODO: Test has been commented out while we figure out how to setup import maps for the test environment
// import UmbWorkspaceViewUsersSelectionElement from './workspace-view-users-selection.element';
// import { defaultA11yConfig } from '@umbraco-cms/test-utils';
// describe('UmbWorkspaceViewUsersSelectionElement', () => {
// let element: UmbWorkspaceViewUsersSelectionElement;
// beforeEach(async () => {
// element = await fixture(html`<umb-workspace-view-users-selection></umb-workspace-view-users-selection>`);
// });
// it('is defined with its own instance', () => {
// expect(element).to.be.instanceOf(UmbWorkspaceViewUsersSelectionElement);
// });
// it('passes the a11y audit', async () => {
// await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
// });
// });

8
src/Umbraco.Web.UI.Client/src/backoffice/trees/data-types/actions/delete/action-data-type-delete.element.ts
View File

@@ -2,7 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css';
import { css, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { UmbModalService } from '../../../../../core/services/modal';
import { UmbDataTypeStore } from '../../../../../core/stores/data-type/data-type.store';
import { UmbDataTypesStore } from '../../../../../core/stores/data-types/data-types.store';
import UmbTreeItemActionElement from '../../../shared/tree-item-action.element';
import { UmbContextConsumerMixin } from '@umbraco-cms/context-api';
@@ -11,7 +11,7 @@ export default class UmbTreeActionDataTypeDeleteElement extends UmbContextConsum
static styles = [UUITextStyles, css``];
private _modalService?: UmbModalService;
private _dataTypeStore?: UmbDataTypeStore;
private _dataTypeStore?: UmbDataTypesStore;
connectedCallback(): void {
super.connectedCallback();
@@ -20,7 +20,7 @@ export default class UmbTreeActionDataTypeDeleteElement extends UmbContextConsum
this._modalService = modalService;
});
this.consumeContext('umbDataTypeStore', (dataTypeStore: UmbDataTypeStore) => {
this.consumeContext('umbDataTypeStore', (dataTypeStore: UmbDataTypesStore) => {
this._dataTypeStore = dataTypeStore;
});
}
@@ -35,7 +35,7 @@ export default class UmbTreeActionDataTypeDeleteElement extends UmbContextConsum
modalHandler?.onClose().then(({ confirmed }: any) => {
if (confirmed && this._treeContextMenuService && this._dataTypeStore && this._activeTreeItem) {
this._dataTypeStore?.trash([this._activeTreeItem.key]);
this._dataTypeStore?.deleteItems([this._activeTreeItem.key]);
this._treeContextMenuService.close();
}
});

30
src/Umbraco.Web.UI.Client/src/backoffice/trees/data-types/tree-data-types-data.context.ts
View File

@@ -1,30 +0,0 @@
import { UmbTreeDataContextBase } from '../tree-data.context';
export class UmbTreeDataTypesDataContext extends UmbTreeDataContextBase {
public rootKey = '29d78e6c-c1bf-4c15-b820-d511c237ffae';
public rootChanges() {
const data = {
key: this.rootKey,
name: 'Data Types',
hasChildren: true,
type: 'dataTypeRoot',
icon: 'folder',
parentKey: '',
isTrashed: false,
};
this.entityStore.update([data]);
return super.rootChanges();
}
public childrenChanges(key = '') {
// TODO: figure out url structure
fetch(`/umbraco/backoffice/entities/data-types?parentKey=${key}`)
.then((res) => res.json())
.then((data) => {
this.entityStore.update(data);
});
return super.childrenChanges(key);
}
}

12
src/Umbraco.Web.UI.Client/src/backoffice/trees/data-types/tree-data-types.element.ts
View File

@@ -1,13 +1,12 @@
import { html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { UmbEntityStore } from '../../../core/stores/entity.store';
import { UmbTreeBase } from '../shared/tree-base.element';
import { UmbTreeDataTypesDataContext } from './tree-data-types-data.context';
import { UmbContextConsumerMixin, UmbContextProviderMixin } from '@umbraco-cms/context-api';
import { umbExtensionsRegistry } from '@umbraco-cms/extensions-registry';
import type { ManifestTreeItemAction } from '@umbraco-cms/models';
import '../shared/tree-navigator.element';
import { UmbDataTypesStore } from 'src/core/stores/data-types/data-types.store';
@customElement('umb-tree-data-types')
export class UmbTreeDataTypesElement extends UmbContextProviderMixin(UmbContextConsumerMixin(UmbTreeBase)) {
@@ -16,12 +15,9 @@ export class UmbTreeDataTypesElement extends UmbContextProviderMixin(UmbContextC
this._registerTreeItemActions();
this.consumeContext('umbEntityStore', (entityStore: UmbEntityStore) => {
this._entityStore = entityStore;
if (!this._entityStore) return;
this._treeDataContext = new UmbTreeDataTypesDataContext(this._entityStore);
this.provideContext('umbTreeDataContext', this._treeDataContext);
// TODO: how do we best expose the tree api to the tree navigator element?
this.consumeContext('umbDataTypeStore', (dataTypeStore: UmbDataTypesStore) => {
this.provideContext('umbTreeStore', dataTypeStore);
});
}

30
src/Umbraco.Web.UI.Client/src/backoffice/trees/document-types/tree-document-types-data.context.ts
View File

@@ -1,30 +0,0 @@
import { UmbTreeDataContextBase } from '../tree-data.context';
export class UmbTreeDocumentTypesDataContext extends UmbTreeDataContextBase {
public rootKey = 'f50eb86d-3ef2-4011-8c5d-c56c04eec0da';
public rootChanges() {
const data = {
key: this.rootKey,
name: 'Document Types',
hasChildren: true,
type: 'documentTypeRoot',
icon: 'folder',
parentKey: '',
isTrashed: false,
};
this.entityStore.update([data]);
return super.rootChanges();
}
public childrenChanges(key: string) {
// TODO: figure out url structure
fetch(`/umbraco/backoffice/entities/document-types?parentKey=${key}`)
.then((res) => res.json())
.then((data) => {
this.entityStore.update(data);
});
return super.childrenChanges(key);
}
}

12
src/Umbraco.Web.UI.Client/src/backoffice/trees/document-types/tree-document-types.element.ts
View File

@@ -1,23 +1,19 @@
import { html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { UmbEntityStore } from '../../../core/stores/entity.store';
import { UmbTreeBase } from '../shared/tree-base.element';
import { UmbTreeDocumentTypesDataContext } from './tree-document-types-data.context';
import { UmbContextConsumerMixin, UmbContextProviderMixin } from '@umbraco-cms/context-api';
import '../shared/tree-navigator.element';
import { UmbDocumentTypeStore } from 'src/core/stores/document-type/document-type.store';
@customElement('umb-tree-document-types')
export class UmbTreeDocumentTypes extends UmbContextConsumerMixin(UmbContextProviderMixin(UmbTreeBase)) {
constructor() {
super();
this.consumeContext('umbEntityStore', (entityStore: UmbEntityStore) => {
this._entityStore = entityStore;
if (!this._entityStore) return;
this._treeDataContext = new UmbTreeDocumentTypesDataContext(this._entityStore);
this.provideContext('umbTreeDataContext', this._treeDataContext);
// TODO: how do we best expose the tree api to the tree navigator element?
this.consumeContext('umbDocumentTypeStore', (store: UmbDocumentTypeStore) => {
this.provideContext('umbTreeStore', store);
});
}

12
src/Umbraco.Web.UI.Client/src/backoffice/trees/documents/actions/action-document-delete.element.ts
View File

@@ -2,7 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css';
import { css, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { UmbModalService } from '../../../../core/services/modal';
import { UmbNodeStore } from '../../../../core/stores/node.store';
import { UmbDocumentStore } from '../../../../core/stores/document/document.store';
import UmbTreeItemActionElement from '../../shared/tree-item-action.element';
import { UmbContextConsumerMixin } from '@umbraco-cms/context-api';
@@ -11,7 +11,7 @@ export default class UmbTreeActionDocumentDeleteElement extends UmbContextConsum
static styles = [UUITextStyles, css``];
private _modalService?: UmbModalService;
private _nodeStore?: UmbNodeStore;
private _documentStore?: UmbDocumentStore;
connectedCallback(): void {
super.connectedCallback();
@@ -20,8 +20,8 @@ export default class UmbTreeActionDocumentDeleteElement extends UmbContextConsum
this._modalService = modalService;
});
this.consumeContext('umbNodeStore', (nodeStore: UmbNodeStore) => {
this._nodeStore = nodeStore;
this.consumeContext('umbDocumentStore', (documentStore: UmbDocumentStore) => {
this._documentStore = documentStore;
});
}
@@ -34,8 +34,8 @@ export default class UmbTreeActionDocumentDeleteElement extends UmbContextConsum
});
modalHandler?.onClose().then(({ confirmed }: any) => {
if (confirmed && this._treeContextMenuService && this._nodeStore && this._activeTreeItem) {
this._nodeStore?.trash([this._activeTreeItem.key]);
if (confirmed && this._treeContextMenuService && this._documentStore && this._activeTreeItem) {
this._documentStore?.trash([this._activeTreeItem.key]);
this._treeContextMenuService.close();
}
});

29
src/Umbraco.Web.UI.Client/src/backoffice/trees/documents/tree-documents-data.context.ts
View File

@@ -1,29 +0,0 @@
import { map } from 'rxjs';
import { UmbTreeDataContextBase } from '../tree-data.context';
export class UmbTreeDocumentDataContext extends UmbTreeDataContextBase {
public rootKey = 'ba23245c-d8c0-46f7-a2bc-7623743d6eba';
public rootChanges() {
fetch(`/umbraco/backoffice/entities/documents?parentKey=${this.rootKey}`)
.then((res) => res.json())
.then((data) => {
this.entityStore.update(data);
});
return this.entityStore.items.pipe(
map((items) => items.filter((item) => item.parentKey === this.rootKey && !item.isTrashed))
);
}
public fetchChildren(key: string) {
// TODO: figure out url structure
fetch(`/umbraco/backoffice/entities/documents?parentKey=${key}`)
.then((res) => res.json())
.then((data) => {
this.entityStore.update(data);
});
return super.childrenChanges(key);
}
}

20
src/Umbraco.Web.UI.Client/src/backoffice/trees/documents/tree-documents.element.ts
View File

@@ -1,26 +1,22 @@
import { html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { UmbEntityStore } from '../../../core/stores/entity.store';
import { UmbTreeBase } from '../shared/tree-base.element';
import { UmbTreeDocumentDataContext } from './tree-documents-data.context';
import { UmbContextConsumerMixin, UmbContextProviderMixin } from '@umbraco-cms/context-api';
import type { ManifestTreeItemAction } from '@umbraco-cms/models';
import { umbExtensionsRegistry } from '@umbraco-cms/extensions-registry';
import { UmbDocumentStore } from 'src/core/stores/document/document.store';
import '../shared/tree-navigator.element';
import { umbExtensionsRegistry } from '@umbraco-cms/extensions-registry';
@customElement('umb-tree-documents')
export class UmbTreeDocumentElement extends UmbContextProviderMixin(UmbContextConsumerMixin(UmbTreeBase)) {
export class UmbTreeDocumentsElement extends UmbContextProviderMixin(UmbContextConsumerMixin(UmbTreeBase)) {
constructor() {
super();
this._registerTreeItemActions();
this.consumeContext('umbEntityStore', (entityStore: UmbEntityStore) => {
this._entityStore = entityStore;
if (!this._entityStore || !this.tree) return;
this._treeDataContext = new UmbTreeDocumentDataContext(this._entityStore);
this.provideContext('umbTreeDataContext', this._treeDataContext);
// TODO: how do we best expose the tree api to the tree navigator element?
this.consumeContext('umbDocumentStore', (store: UmbDocumentStore) => {
this.provideContext('umbTreeStore', store);
});
}
@@ -75,10 +71,10 @@ export class UmbTreeDocumentElement extends UmbContextProviderMixin(UmbContextCo
}
}
export default UmbTreeDocumentElement;
export default UmbTreeDocumentsElement;
declare global {
interface HTMLElementTagNameMap {
'umb-tree-document': UmbTreeDocumentElement;
'umb-tree-documents': UmbTreeDocumentsElement;
}
}

19
src/Umbraco.Web.UI.Client/src/backoffice/trees/extensions/tree-extensions-data.context.ts
View File

@@ -1,19 +0,0 @@
import { UmbTreeDataContextBase } from '../tree-data.context';
export class UmbTreeExtensionsDataContext extends UmbTreeDataContextBase {
public rootKey = 'fd32ea8b-893b-4ee9-b1d0-72f41c4a6d38';
public rootChanges() {
const data = {
key: this.rootKey,
name: 'Extensions',
hasChildren: false,
type: 'extensionsList',
icon: 'favorite',
parentKey: '',
isTrashed: false,
};
this.entityStore.update([data]);
return super.rootChanges();
}
}

14
src/Umbraco.Web.UI.Client/src/backoffice/trees/extensions/tree-extensions.element.ts
View File

@@ -1,26 +1,12 @@
import { html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { UmbEntityStore } from '../../../core/stores/entity.store';
import { UmbTreeBase } from '../shared/tree-base.element';
import { UmbTreeExtensionsDataContext } from './tree-extensions-data.context';
import { UmbContextConsumerMixin, UmbContextProviderMixin } from '@umbraco-cms/context-api';
import '../shared/tree-navigator.element';
@customElement('umb-tree-extensions')
export class UmbTreeExtensionsElement extends UmbContextProviderMixin(UmbContextConsumerMixin(UmbTreeBase)) {
constructor() {
super();
this.consumeContext('umbEntityStore', (entityStore: UmbEntityStore) => {
this._entityStore = entityStore;
if (!this._entityStore) return;
this._treeDataContext = new UmbTreeExtensionsDataContext(this._entityStore);
this.provideContext('umbTreeDataContext', this._treeDataContext);
});
}
render() {
return html`<umb-tree-navigator></umb-tree-navigator>`;
}

72
src/Umbraco.Web.UI.Client/src/backoffice/trees/manifests.ts
View File

@@ -1,13 +1,53 @@
import type { ManifestTree } from '@umbraco-cms/models';
export const manifests: Array<ManifestTree> = [
{
type: 'tree',
alias: 'Umb.Tree.Extensions',
name: 'Extensions Tree',
loader: () => import('./extensions/tree-extensions.element'),
weight: 500,
meta: {
label: 'Extensions',
icon: 'umb:favorite',
sections: ['Umb.Section.Settings'],
rootNodeEntityType: 'extensions-list', // TODO: how do we want to handle 'single node trees'. Trees without any children but still needs to open an workspace? Currently an workspace is chosen based on the entity type. The tree root node doesn't have one, so we need to tell which workspace to use.
},
},
{
type: 'tree',
alias: 'Umb.Tree.DocumentTypes',
name: 'Document Types Tree',
loader: () => import('./document-types/tree-document-types.element'),
weight: 400,
meta: {
label: 'Document Types',
icon: 'umb:folder',
sections: ['Umb.Section.Settings'],
},
},
{
type: 'tree',
alias: 'Umb.Tree.MediaTypes',
name: 'Media Types Tree',
loader: () => import('./media-types/tree-media-types.element'),
weight: 300,
meta: {
label: 'Media Types',
icon: 'umb:folder',
sections: ['Umb.Section.Settings'],
},
},
{
type: 'tree',
alias: 'Umb.Tree.MemberTypes',
name: 'Member Types Tree',
loader: () => import('./member-types/tree-member-types.element'),
weight: 200,
meta: {
label: 'Member Types',
icon: 'umb:folder',
sections: ['Umb.Section.Settings'],
},
},
@@ -16,38 +56,22 @@ export const manifests: Array<ManifestTree> = [
alias: 'Umb.Tree.DataTypes',
name: 'Data Types Tree',
loader: () => import('./data-types/tree-data-types.element'),
weight: 300,
weight: 100,
meta: {
label: 'Data Types',
icon: 'umb:folder',
sections: ['Umb.Section.Settings'],
},
},
{
type: 'tree',
alias: 'Umb.Tree.DocumentTypes',
name: 'Document Types Tree',
loader: () => import('./document-types/tree-document-types.element'),
weight: 200,
meta: {
sections: ['Umb.Section.Settings'],
},
},
{
type: 'tree',
alias: 'Umb.Tree.Members',
name: 'Members Tree',
loader: () => import('./members/tree-members.element'),
weight: 0,
meta: {
sections: ['Umb.Section.Members'],
},
},
{
type: 'tree',
alias: 'Umb.Tree.MemberGroups',
name: 'Members Groups Tree',
name: 'Member Groups Tree',
loader: () => import('./member-groups/tree-member-groups.element'),
weight: 1,
meta: {
label: 'Member Groups',
icon: 'umb:folder',
sections: ['Umb.Section.Members'],
},
},
@@ -58,6 +82,8 @@ export const manifests: Array<ManifestTree> = [
loader: () => import('./media/tree-media.element'),
weight: 100,
meta: {
label: 'Media',
icon: 'umb:folder',
sections: ['Umb.Section.Media'],
},
},
@@ -68,6 +94,8 @@ export const manifests: Array<ManifestTree> = [
loader: () => import('./documents/tree-documents.element'),
weight: 100,
meta: {
label: 'Documents',
icon: 'umb:folder',
sections: ['Umb.Section.Content'],
},
},

31
src/Umbraco.Web.UI.Client/src/backoffice/trees/media-types/tree-media-types.element.ts Normal file
View File

@@ -0,0 +1,31 @@
import { html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { UmbTreeBase } from '../shared/tree-base.element';
import { UmbContextConsumerMixin, UmbContextProviderMixin } from '@umbraco-cms/context-api';
import { UmbMediaTypeStore } from 'src/core/stores/media-type/media-type.store';
import '../shared/tree-navigator.element';
@customElement('umb-tree-media-types')
export class UmbTreeMediaTypes extends UmbContextConsumerMixin(UmbContextProviderMixin(UmbTreeBase)) {
constructor() {
super();
// TODO: how do we best expose the tree api to the tree navigator element?
this.consumeContext('umbMediaTypeStore', (store: UmbMediaTypeStore) => {
this.provideContext('umbTreeStore', store);
});
}
render() {
return html`<umb-tree-navigator></umb-tree-navigator>`;
}
}
export default UmbTreeMediaTypes;
declare global {
interface HTMLElementTagNameMap {
'umb-tree-media-types': UmbTreeMediaTypes;
}
}

27
src/Umbraco.Web.UI.Client/src/backoffice/trees/media/tree-media-data.context.ts
View File

@@ -1,27 +0,0 @@
import { map } from 'rxjs';
import { UmbTreeDataContextBase } from '../tree-data.context';
export class UmbTreeMediaDataContext extends UmbTreeDataContextBase {
public rootKey = 'c0858d71-52be-4bb2-822f-42fa0c9a1ea5';
public rootChanges() {
fetch(`/umbraco/backoffice/entities/media?parentKey=${this.rootKey}`)
.then((res) => res.json())
.then((data) => {
this.entityStore.update(data);
});
return this.entityStore.items.pipe(map((items) => items.filter((item) => item.parentKey === this.rootKey)));
}
public childrenChanges(key: string) {
// TODO: figure out url structure
fetch(`/umbraco/backoffice/entities/media?parentKey=${key}`)
.then((res) => res.json())
.then((data) => {
this.entityStore.update(data);
});
return super.childrenChanges(key);
}
}

12
src/Umbraco.Web.UI.Client/src/backoffice/trees/media/tree-media.element.ts
View File

@@ -1,9 +1,8 @@
import { html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { UmbEntityStore } from '../../../core/stores/entity.store';
import { UmbTreeBase } from '../shared/tree-base.element';
import { UmbTreeMediaDataContext } from './tree-media-data.context';
import { UmbContextConsumerMixin, UmbContextProviderMixin } from '@umbraco-cms/context-api';
import { UmbMediaStore } from 'src/core/stores/media/media.store';
import '../shared/tree-navigator.element';
@@ -12,12 +11,9 @@ export class UmbTreeMediaElement extends UmbContextProviderMixin(UmbContextConsu
constructor() {
super();
this.consumeContext('umbEntityStore', (entityStore: UmbEntityStore) => {
this._entityStore = entityStore;
if (!this._entityStore) return;
this._treeDataContext = new UmbTreeMediaDataContext(this._entityStore);
this.provideContext('umbTreeDataContext', this._treeDataContext);
// TODO: how do we best expose the tree api to the tree navigator element?
this.consumeContext('umbMediaStore', (store: UmbMediaStore) => {
this.provideContext('umbTreeStore', store);
});
}

30
src/Umbraco.Web.UI.Client/src/backoffice/trees/member-groups/tree-member-groups-data.context.ts
View File

@@ -1,30 +0,0 @@
import { UmbTreeDataContextBase } from '../tree-data.context';
export class UmbTreeMemberGroupsDataContext extends UmbTreeDataContextBase {
public rootKey = '575645a5-0f25-4671-b9a0-be515096ad6b';
public rootChanges() {
const data = {
key: this.rootKey,
name: 'Member Groups',
hasChildren: true,
type: 'memberGroupRoot',
icon: 'folder',
parentKey: '',
isTrashed: false,
};
this.entityStore.update([data]);
return super.rootChanges();
}
public childrenChanges(key: string) {
// TODO: figure out url structure
fetch(`/umbraco/backoffice/entities/member-groups?parentKey=${key}`)
.then((res) => res.json())
.then((data) => {
this.entityStore.update(data);
});
return super.childrenChanges(key);
}
}

13
src/Umbraco.Web.UI.Client/src/backoffice/trees/member-groups/tree-member-groups.element.ts
View File

@@ -1,10 +1,8 @@
import { html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { UmbTreeBase } from '../shared/tree-base.element';
import { UmbEntityStore } from '../../../core/stores/entity.store';
import { UmbTreeMemberGroupsDataContext } from './tree-member-groups-data.context';
import { UmbContextConsumerMixin, UmbContextProviderMixin } from '@umbraco-cms/context-api';
import { UmbMemberGroupStore } from 'src/core/stores/member-group/member-group.store';
import '../shared/tree-navigator.element';
@customElement('umb-tree-member-groups')
@@ -12,12 +10,9 @@ export class UmbTreeMemberGroups extends UmbContextProviderMixin(UmbContextConsu
constructor() {
super();
this.consumeContext('umbEntityStore', (entityStore: UmbEntityStore) => {
this._entityStore = entityStore;
if (!this._entityStore || !this.tree) return;
this._treeDataContext = new UmbTreeMemberGroupsDataContext(this._entityStore);
this.provideContext('umbTreeDataContext', this._treeDataContext);
// TODO: how do we best expose the tree api to the tree navigator element?
this.consumeContext('umbMemberGroupStore', (store: UmbMemberGroupStore) => {
this.provideContext('umbTreeStore', store);
});
}

31
src/Umbraco.Web.UI.Client/src/backoffice/trees/member-types/tree-member-types.element.ts Normal file
View File

@@ -0,0 +1,31 @@
import { html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { UmbTreeBase } from '../shared/tree-base.element';
import { UmbContextConsumerMixin, UmbContextProviderMixin } from '@umbraco-cms/context-api';
import { UmbMemberTypeStore } from 'src/core/stores/member-type/member-type.store';
import '../shared/tree-navigator.element';
@customElement('umb-tree-member-types')
export class UmbTreeMemberTypes extends UmbContextConsumerMixin(UmbContextProviderMixin(UmbTreeBase)) {
constructor() {
super();
// TODO: how do we best expose the tree api to the tree navigator element?
this.consumeContext('umbMemberTypeStore', (store: UmbMemberTypeStore) => {
this.provideContext('umbTreeStore', store);
});
}
render() {
return html`<umb-tree-navigator></umb-tree-navigator>`;
}
}
export default UmbTreeMemberTypes;
declare global {
interface HTMLElementTagNameMap {
'umb-tree-member-types': UmbTreeMemberTypes;
}
}

29
src/Umbraco.Web.UI.Client/src/backoffice/trees/members/tree-members.context.ts
View File

@@ -1,29 +0,0 @@
import { UmbTreeDataContextBase } from '../tree-data.context';
export class UmbTreeMembersDataContext extends UmbTreeDataContextBase {
public rootKey = '8f974b62-392b-4ddd-908c-03c2e03ab1a6';
public rootChanges() {
const data = {
key: this.rootKey,
parentKey: '',
name: 'Members',
hasChildren: true,
type: 'member',
icon: 'folder',
isTrashed: false,
};
this.entityStore.update([data]);
return super.rootChanges();
}
public childrenChanges(key: string) {
// TODO: figure out url structure
fetch(`/umbraco/backoffice/entities/members?parentKey=${key}`)
.then((res) => res.json())
.then((data) => {
this.entityStore.update(data);
});
return super.childrenChanges(key);
}
}

35
src/Umbraco.Web.UI.Client/src/backoffice/trees/members/tree-members.element.ts
View File

@@ -1,35 +0,0 @@
import { html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { UmbEntityStore } from '../../../core/stores/entity.store';
import { UmbTreeBase } from '../shared/tree-base.element';
import { UmbTreeMembersDataContext } from './tree-members.context';
import { UmbContextConsumerMixin, UmbContextProviderMixin } from '@umbraco-cms/context-api';
import '../shared/tree-navigator.element';
@customElement('umb-tree-members')
export class UmbTreeMembers extends UmbContextProviderMixin(UmbContextConsumerMixin(UmbTreeBase)) {
constructor() {
super();
this.consumeContext('umbEntityStore', (entityStore: UmbEntityStore) => {
this._entityStore = entityStore;
if (!this._entityStore || !this.tree) return;
this._treeDataContext = new UmbTreeMembersDataContext(this._entityStore);
this.provideContext('umbTreeDataContext', this._treeDataContext);
});
}
render() {
return html`<umb-tree-navigator></umb-tree-navigator>`;
}
}
export default UmbTreeMembers;
declare global {
interface HTMLElementTagNameMap {
'umb-tree-members': UmbTreeMembers;
}
}

3
src/Umbraco.Web.UI.Client/src/backoffice/trees/shared/context-menu/tree-context-menu-page-action-list.element.ts
View File

@@ -3,10 +3,9 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, state } from 'lit/decorators.js';
import { map } from 'rxjs';
import { UmbSectionContext } from '../../../sections/section.context';
import { Entity } from '../../../../core/mocks/data/entities';
import { UmbObserverMixin } from '@umbraco-cms/observable-api';
import { UmbContextConsumerMixin } from '@umbraco-cms/context-api';
import type { ManifestTreeItemAction, ManifestTree } from '@umbraco-cms/models';
import type { Entity, ManifestTreeItemAction, ManifestTree } from '@umbraco-cms/models';
import { umbExtensionsRegistry } from '@umbraco-cms/extensions-registry';
@customElement('umb-tree-context-menu-page-action-list')

5
src/Umbraco.Web.UI.Client/src/backoffice/trees/shared/tree-base.element.ts
View File

@@ -1,16 +1,11 @@
import { LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { UmbEntityStore } from '../../../core/stores/entity.store';
import { UmbTreeDataContext } from '../tree-data.context';
import type { ManifestTree } from '@umbraco-cms/models';
@customElement('umb-tree-base')
export class UmbTreeBase extends LitElement {
@property({ type: Object, attribute: false })
tree?: ManifestTree;
protected _treeDataContext?: UmbTreeDataContext;
protected _entityStore?: UmbEntityStore;
}
declare global {

3
src/Umbraco.Web.UI.Client/src/backoffice/trees/shared/tree-item-action.element.ts
View File

@@ -1,12 +1,11 @@
import { LitElement } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { Entity } from '../../../core/mocks/data/entities';
import { UmbSectionContext } from '../../sections/section.context';
import { UmbTreeContextMenuPageService } from './context-menu/tree-context-menu-page.service';
import { UmbTreeContextMenuService } from './context-menu/tree-context-menu.service';
import { UmbObserverMixin } from '@umbraco-cms/observable-api';
import { UmbContextConsumerMixin } from '@umbraco-cms/context-api';
import type { ManifestTreeItemAction, ManifestTree } from '@umbraco-cms/models';
import type { Entity, ManifestTreeItemAction, ManifestTree } from '@umbraco-cms/models';
export type ActionPageEntity = {
key: string;

51
src/Umbraco.Web.UI.Client/src/backoffice/trees/shared/tree-item.element.ts
View File

@@ -1,17 +1,17 @@
import { css, html, LitElement } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property, state } from 'lit/decorators.js';
import { ifDefined } from 'lit-html/directives/if-defined.js';
import { UUIMenuItemEvent } from '@umbraco-ui/uui';
import { map } from 'rxjs';
import { repeat } from 'lit/directives/repeat.js';
import { UmbTreeContextBase } from '../tree.context';
import type { UmbTreeContextBase } from '../tree.context';
import { UmbSectionContext } from '../../sections/section.context';
import { Entity } from '../../../core/mocks/data/entities';
import type { ManifestSection } from '../../../core/models';
import { UmbTreeDataContextBase } from '../tree-data.context';
import { UmbTreeContextMenuService } from './context-menu/tree-context-menu.service';
import type { Entity, ManifestSection } from '@umbraco-cms/models';
import { UmbObserverMixin } from '@umbraco-cms/observable-api';
import { UmbContextConsumerMixin } from '@umbraco-cms/context-api';
import { UmbDataStore } from 'src/core/stores/store';
@customElement('umb-tree-item')
export class UmbTreeItem extends UmbContextConsumerMixin(UmbObserverMixin(LitElement)) {
@@ -24,7 +24,7 @@ export class UmbTreeItem extends UmbContextConsumerMixin(UmbObserverMixin(LitEle
private _childItems: Entity[] = [];
@state()
private _href = '';
private _href? = '';
@state()
private _loading = false;
@@ -39,7 +39,7 @@ export class UmbTreeItem extends UmbContextConsumerMixin(UmbObserverMixin(LitEle
private _isActive = false;
private _treeContext?: UmbTreeContextBase;
private _treeDataContext?: UmbTreeDataContextBase;
private _treeStore?: UmbDataStore<unknown>;
private _sectionContext?: UmbSectionContext;
private _treeContextMenuService?: UmbTreeContextMenuService;
@@ -49,11 +49,11 @@ export class UmbTreeItem extends UmbContextConsumerMixin(UmbObserverMixin(LitEle
this.consumeContext('umbTreeContext', (treeContext: UmbTreeContextBase) => {
this._treeContext = treeContext;
this._observeSelectable();
this._observeSelection();
this._observeIsSelected();
});
this.consumeContext('umbTreeDataContext', (treeDataContext: UmbTreeDataContextBase) => {
this._treeDataContext = treeDataContext;
this.consumeContext('umbTreeStore', (store: UmbDataStore<unknown>) => {
this._treeStore = store;
});
this.consumeContext('umbSectionContext', (sectionContext: UmbSectionContext) => {
@@ -69,11 +69,19 @@ export class UmbTreeItem extends UmbContextConsumerMixin(UmbObserverMixin(LitEle
connectedCallback(): void {
super.connectedCallback();
this.addEventListener('selected', (e) => {
e.stopPropagation();
this._treeContext?.select(this.treeItem.key);
this.dispatchEvent(new CustomEvent('change', { composed: true, bubbles: true }));
});
this.addEventListener('selected', this._handleSelectedItem);
this.addEventListener('unselected', this._handleDeselectedItem);
}
private _handleSelectedItem(event: Event) {
event.stopPropagation();
this._treeContext?.select(this.treeItem.key);
}
private _handleDeselectedItem(event: Event) {
event.stopPropagation();
this._treeContext?.deselect(this.treeItem.key);
}
private _observeSection() {
@@ -92,7 +100,7 @@ export class UmbTreeItem extends UmbContextConsumerMixin(UmbObserverMixin(LitEle
});
}
private _observeSelection() {
private _observeIsSelected() {
if (!this._treeContext) return;
this.observe<boolean>(
@@ -113,18 +121,21 @@ export class UmbTreeItem extends UmbContextConsumerMixin(UmbObserverMixin(LitEle
// TODO: how do we handle this?
private _constructPath(sectionPathname: string, type: string, key: string) {
return `section/${sectionPathname}/${type}/${key}`;
return type ? `section/${sectionPathname}/${type}/${key}` : undefined;
}
private _onShowChildren(event: UUIMenuItemEvent) {
event.stopPropagation();
if (this._childItems.length > 0) return;
this._observeChildren();
}
private _observeChildren() {
if (!this._treeStore?.getTreeItemChildren) return;
this._loading = true;
if (!this._treeDataContext) return;
this.observe<Entity[]>(this._treeDataContext.childrenChanges(this.treeItem.key), (childItems) => {
this.observe<Entity[]>(this._treeStore.getTreeItemChildren(this.treeItem.key), (childItems) => {
if (childItems?.length === 0) return;
this._childItems = childItems;
this._loading = false;
@@ -158,7 +169,7 @@ export class UmbTreeItem extends UmbContextConsumerMixin(UmbObserverMixin(LitEle
.loading=${this._loading}
.hasChildren=${this.treeItem.hasChildren}
label="${this.treeItem.name}"
href="${this._href}"
href="${ifDefined(this._href)}"
?active=${this._isActive}>
${this._renderChildItems()}
<uui-icon slot="icon" name="${this.treeItem.icon}"></uui-icon>

64
src/Umbraco.Web.UI.Client/src/backoffice/trees/shared/tree-navigator.element.ts
View File

@@ -2,12 +2,16 @@ import { css, html, LitElement } from 'lit';
import { repeat } from 'lit/directives/repeat.js';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, state } from 'lit/decorators.js';
import { Entity } from '../../../core/mocks/data/entities';
import { UmbTreeDataContextBase } from '../tree-data.context';
import { ifDefined } from 'lit-html/directives/if-defined.js';
import { UmbSectionContext } from '../../sections/section.context';
import { UmbTreeContext } from '../tree.context';
import { UmbObserverMixin } from '@umbraco-cms/observable-api';
import { UmbContextConsumerMixin } from '@umbraco-cms/context-api';
import type { Entity, ManifestSection, ManifestTree } from '@umbraco-cms/models';
import { UmbDataStore } from 'src/core/stores/store';
import './tree-item.element';
import { UmbDocumentTypeStore } from '@umbraco-cms/stores/document-type/document-type.store';
@customElement('umb-tree-navigator')
export class UmbTreeNavigator extends UmbContextConsumerMixin(UmbObserverMixin(LitElement)) {
@@ -19,30 +23,74 @@ export class UmbTreeNavigator extends UmbContextConsumerMixin(UmbObserverMixin(L
@state()
private _items: Entity[] = [];
private _treeDataContext?: UmbTreeDataContextBase;
@state()
private _tree?: ManifestTree;
@state()
private _href?: string;
private _treeStore?: UmbDataStore<unknown>;
private _sectionContext?: UmbSectionContext;
constructor() {
super();
this.consumeContext('umbTreeDataContext', (treeDataContext) => {
this._treeDataContext = treeDataContext;
this._observeTreeRoot();
this.consumeContext('umbTreeStore', (treeStore) => {
this._treeStore = treeStore;
});
this.consumeContext('umbTreeContext', (treeContext: UmbTreeContext) => {
this._tree = treeContext.tree;
});
this.consumeContext('umbSectionContext', (sectionContext: UmbSectionContext) => {
this._sectionContext = sectionContext;
this._observeSection();
});
}
private _onShowRoot() {
this._observeTreeRoot();
}
private _observeTreeRoot() {
if (!this._treeDataContext?.rootChanges?.()) return;
if (!this._treeStore?.getTreeRoot) return;
this._loading = true;
this.observe<Entity[]>(this._treeDataContext.rootChanges(), (rootItems) => {
this.observe<Entity[]>(this._treeStore.getTreeRoot(), (rootItems) => {
if (rootItems?.length === 0) return;
this._items = rootItems;
this._loading = false;
});
}
private _observeSection() {
if (!this._sectionContext) return;
this.observe<ManifestSection>(this._sectionContext?.data, (section) => {
this._href = this._constructPath(section.meta.pathname, this._tree?.meta.rootNodeEntityType);
});
}
// TODO: how do we handle this?
private _constructPath(sectionPathname: string, type: string | undefined) {
return type ? `section/${sectionPathname}/${type}` : undefined;
}
render() {
// TODO: how do we know if a tree has children?
return html`<uui-menu-item
label="${ifDefined(this._tree?.meta.label)}"
@show-children=${this._onShowRoot}
href="${ifDefined(this._href)}"
has-children>
<uui-icon slot="icon" name="${ifDefined(this._tree?.meta.icon)}"></uui-icon>
${this._renderRootItems()}
</uui-menu-item>`;
}
private _renderRootItems() {
return html`
${repeat(
this._items,

16
src/Umbraco.Web.UI.Client/src/backoffice/trees/shared/tree.element.ts
View File

@@ -31,8 +31,9 @@ export class UmbTreeElement extends UmbContextProviderMixin(UmbContextConsumerMi
const oldVal = this._selectable;
this._selectable = newVal;
this.requestUpdate('selectable', oldVal);
if (newVal && this._treeContext) {
this._treeContext?.setSelectable(newVal);
this._treeContext?.setSelectable(newVal);
if (newVal) {
this._observeSelection();
}
}
@@ -74,23 +75,22 @@ export class UmbTreeElement extends UmbContextProviderMixin(UmbContextConsumerMi
}
private _provideTreeContext() {
if (!this._tree) return;
if (!this._tree || this._treeContext) return;
this._treeContext = new UmbTreeContextBase(this._tree);
this._treeContext.setSelectable(this.selectable);
this._treeContext.setSelection(this.selection);
this.provideContext('umbTreeContext', this._treeContext);
if (this.selectable) {
this._observeSelection();
}
this.provideContext('umbTreeContext', this._treeContext);
}
private _observeSelection() {
if (!this._treeContext) return;
this.observe(this._treeContext.selection, (selection) => {
if (this._selection === selection) return;
this._selection = selection;
this.dispatchEvent(new CustomEvent('change'));
this.dispatchEvent(new CustomEvent('selected'));
});
}

31
src/Umbraco.Web.UI.Client/src/backoffice/trees/tree-data.context.ts
View File

@@ -1,31 +0,0 @@
import { map, Observable } from 'rxjs';
import type { UmbEntityStore } from '../../core/stores/entity.store';
import { Entity } from '../../core/mocks/data/entities';
export interface UmbTreeDataContext {
rootKey: string;
entityStore: UmbEntityStore;
rootChanges?(key: string): Observable<Entity[]>;
childrenChanges?(key: string): Observable<Entity[]>;
}
export class UmbTreeDataContextBase implements UmbTreeDataContext {
public entityStore: UmbEntityStore;
public rootKey = '';
constructor(entityStore: UmbEntityStore) {
this.entityStore = entityStore;
}
public rootChanges() {
return this.entityStore.items.pipe(
map((items) => items.filter((item) => item.key === this.rootKey && !item.isTrashed))
);
}
public childrenChanges(key: string) {
return this.entityStore.items.pipe(
map((items) => items.filter((item) => item.parentKey === key && !item.isTrashed))
);
}
}

6
src/Umbraco.Web.UI.Client/src/backoffice/trees/tree.context.ts
View File

@@ -12,7 +12,6 @@ export interface UmbTreeContext {
export class UmbTreeContextBase implements UmbTreeContext {
public tree: ManifestTree;
public rootKey = '';
private _selectable: BehaviorSubject<boolean> = new BehaviorSubject(false);
public readonly selectable: Observable<boolean> = this._selectable.asObservable();
@@ -37,4 +36,9 @@ export class UmbTreeContextBase implements UmbTreeContext {
const selection = [...this._selection.getValue(), key];
this._selection.next(selection);
}
public deselect(key: string) {
const selection = this._selection.getValue();
this._selection.next(selection.filter((x) => x !== key));
}
}

16
src/Umbraco.Web.UI.Client/src/backoffice/user-dashboards/manifests.ts Normal file
View File

@@ -0,0 +1,16 @@
import type { ManifestUserDashboard } from '@umbraco-cms/models';
export const manifests: Array<ManifestUserDashboard> = [
{
type: 'user-dashboard',
alias: 'Umb.UserDashboard.Test',
name: 'Test User Dashboard',
elementName: 'umb-user-dashboard-test',
loader: () => import('./user-dashboard-test.element'),
weight: 2,
meta: {
label: 'Test User Dashboard',
pathname: 'test/test/test',
},
},
];

44
src/Umbraco.Web.UI.Client/src/backoffice/user-dashboards/user-dashboard-extension.element.ts Normal file
View File

@@ -0,0 +1,44 @@
import { CSSResultGroup, html, LitElement } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property, state } from 'lit/decorators.js';
import { createExtensionElement } from '@umbraco-cms/extensions-api';
import type { ManifestUserDashboard } from '@umbraco-cms/models';
@customElement('umb-user-dashboard-extension')
export class UmbUserDashboardExtensionElement extends LitElement {
static styles: CSSResultGroup = [UUITextStyles];
private _userDashboard?: ManifestUserDashboard;
@property({ type: Object })
public get userDashboard(): ManifestUserDashboard | undefined {
return this._userDashboard;
}
public set userDashboard(value: ManifestUserDashboard | undefined) {
this._userDashboard = value;
this._createElement();
}
@state()
private _element?: any;
private async _createElement() {
if (!this.userDashboard) return;
try {
this._element = (await createExtensionElement(this.userDashboard)) as any | undefined;
} catch (error) {
// TODO: loading JS failed so we should do some nice UI. (This does only happen if extension has a js prop, otherwise we concluded that no source was needed resolved the load.)
}
}
render() {
return html`${this._element}`;
}
}
declare global {
interface HTMLElementTagNameMap {
'umb-user-dashboard-extension': UmbUserDashboardExtensionElement;
}
}

44
src/Umbraco.Web.UI.Client/src/backoffice/user-dashboards/user-dashboard-test.element.ts Normal file
View File

@@ -0,0 +1,44 @@
import { css, html, LitElement } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement } from 'lit/decorators.js';
import { UmbContextProviderMixin, UmbContextConsumerMixin } from '@umbraco-cms/context-api';
import { UmbObserverMixin } from '@umbraco-cms/observable-api';
@customElement('umb-user-dashboard-test')
export class UmbUserDashboardTestElement extends UmbContextProviderMixin(
UmbContextConsumerMixin(UmbObserverMixin(LitElement))
) {
static styles = [
UUITextStyles,
css`
:host {
display: flex;
flex-direction: column;
gap: var(--uui-size-space-4);
padding: var(--uui-size-space-5);
border: 1px solid var(--uui-color-border);
background: var(--uui-color-positive);
color: var(--uui-color-positive-contrast);
border-radius: var(--uui-border-radius);
}
p {
margin: 0;
}
`,
];
render() {
return html`
<b>Custom User Dashboard</b>
<p>This is an example of a custom user dashboard using the user dashboard extension point</p>
`;
}
}
export default UmbUserDashboardTestElement;
declare global {
interface HTMLElementTagNameMap {
'umb-user-dashboard-test': UmbUserDashboardTestElement;
}
}

12
src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/actions/save/editor-action-data-type-save.element.ts → src/Umbraco.Web.UI.Client/src/backoffice/workspaces/data-type/actions/save/workspace-action-data-type-save.element.ts
View File

@@ -6,16 +6,16 @@ import type { UmbNotificationDefaultData } from '../../../../../core/services/no
import type { UmbNotificationService } from '../../../../../core/services/notification';
import { UmbDataTypeContext } from '../../data-type.context';
import { UmbContextConsumerMixin } from '@umbraco-cms/context-api';
import { UmbDataTypeStore } from 'src/core/stores/data-type/data-type.store';
import { UmbDataTypesStore } from 'src/core/stores/data-types/data-types.store';
@customElement('umb-editor-action-data-type-save')
export class UmbEditorActionDataTypeSaveElement extends UmbContextConsumerMixin(LitElement) {
@customElement('umb-workspace-action-data-type-save')
export class UmbWorkspaceActionDataTypeSaveElement extends UmbContextConsumerMixin(LitElement) {
static styles = [UUITextStyles, css``];
@state()
private _saveButtonState?: UUIButtonState;
private _dataTypeStore?: UmbDataTypeStore;
private _dataTypeStore?: UmbDataTypesStore;
private _dataTypeContext?: UmbDataTypeContext;
private _notificationService?: UmbNotificationService;
@@ -54,10 +54,10 @@ export class UmbEditorActionDataTypeSaveElement extends UmbContextConsumerMixin(
}
}
export default UmbEditorActionDataTypeSaveElement;
export default UmbWorkspaceActionDataTypeSaveElement;
declare global {
interface HTMLElementTagNameMap {
'umb-editor-action-data-type-save': UmbEditorActionDataTypeSaveElement;
'umb-workspace-action-data-type-save': UmbWorkspaceActionDataTypeSaveElement;
}
}

Some files were not shown because too many files have changed in this diff Show More