@umbraco-cms/backoffice 14.0.0--preview007-e6045110 → 14.0.0--preview007-772eb996

package/dist-cms/vscode-html-custom-data.json

@@ -3512,23 +3512,23 @@
       "attributes": []
     },
     {
-      "name": "umb-collection-view-media-test",
+      "name": "umb-media-collection",
       "description": "Properties:\n\n  * `styles` {`any[]`} - ",
       "attributes": []
     },
     {
       "name": "umb-media-grid-collection-view",
-      "description": "Properties:\n\n  * `_mediaItems` {`UmbUniqueTreeItemModel[] | undefined`} - \n\n  * `_selection` {`(string | null)[]`} - \n\n  * `_collectionContext` - \n\n  * `styles` {`any[]`} - ",
+      "description": "Properties:\n\n  * `_items` {`UmbMediaCollectionItemModel[]`} - \n\n  * `_loading` {`boolean`} - \n\n  * `_selection` {`(string | null)[]`} - \n\n  * `styles` {`any[]`} - ",
       "attributes": []
     },
     {
-      "name": "umb-media-table-collection-view",
-      "description": "Properties:\n\n  * `_mediaItems` {`UmbMediaDetailModel[] | undefined`} - \n\n  * `_tableConfig` - \n\n  * `_tableColumns` {`UmbTableColumn[]`} - \n\n  * `_tableItems` {`UmbTableItem[]`} - \n\n  * `_selection` {`(string | null)[]`} - \n\n  * `_collectionContext` - \n\n  * `styles` {`any[]`} - ",
+      "name": "umb-media-table-column-name",
+      "description": "Properties:\n\n  * `_editMediaPath` {`string`} - \n\n  * `column` - \n\n  * `item` - \n\n  * `value` {`UmbMediaCollectionItemModel`} - \n\n  * `styles` {`any[]`} - ",
       "attributes": []
     },
     {
-      "name": "umb-media-collection",
-      "description": "Properties:\n\n  * `styles` {`any[]`} - ",
+      "name": "umb-media-table-collection-view",
+      "description": "Properties:\n\n  * `_loading` {`boolean`} - \n\n  * `_userDefinedProperties` {`UmbCollectionColumnConfiguration[] | undefined`} - \n\n  * `_items` {`UmbMediaCollectionItemModel[] | undefined`} - \n\n  * `_tableConfig` - \n\n  * `_tableColumns` {`UmbTableColumn[]`} - \n\n  * `_tableItems` {`UmbTableItem[]`} - \n\n  * `_selection` {`string[]`} - \n\n  * `styles` {`any[]`} - ",
       "attributes": []
     },
     {
@@ -3658,6 +3658,11 @@
         }
       ]
     },
+    {
+      "name": "umb-media-section-view",
+      "description": "Properties:\n\n  * `styles` {`any[]`} - ",
+      "attributes": []
+    },
     {
       "name": "umb-media-workspace-editor",
       "description": "Properties:\n\n  * `_unique` {`string | undefined`} - \n\n  * `styles` {`any[]`} - ",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@umbraco-cms/backoffice",
   "license": "MIT",
-  "version": "14.0.0--preview007-e6045110",
+  "version": "14.0.0--preview007-772eb996",
   "type": "module",
   "exports": {
     ".": null,

package/dist-cms/packages/media/media/collection-view/collection-view-media-test.element.d.ts

@@ -1,11 +0,0 @@
-import { LitElement } from '../../../../external/lit/index.js';
-export declare class UmbCollectionViewMediaTestElement extends LitElement {
-    render(): import("lit-html").TemplateResult<1>;
-    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
-}
-export default UmbCollectionViewMediaTestElement;
-declare global {
-    interface HTMLElementTagNameMap {
-        'umb-collection-view-media-test': UmbCollectionViewMediaTestElement;
-    }
-}

package/dist-cms/packages/media/media/collection-view/collection-view-media-test.element.js

@@ -1,19 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { UmbTextStyles } from '../../../../shared/style/index.js';
-import { css, html, LitElement, customElement } from '../../../../external/lit/index.js';
-let UmbCollectionViewMediaTestElement = class UmbCollectionViewMediaTestElement extends LitElement {
-    render() {
-        return html `umb-collection-view-media-test`;
-    }
-};
-UmbCollectionViewMediaTestElement.styles = [UmbTextStyles, css ``];
-UmbCollectionViewMediaTestElement = __decorate([
-    customElement('umb-collection-view-media-test')
-], UmbCollectionViewMediaTestElement);
-export { UmbCollectionViewMediaTestElement };
-export default UmbCollectionViewMediaTestElement;

package/dist-cms/packages/media/media/collection-view/manifests.d.ts

@@ -1,2 +0,0 @@
-import type { ManifestCollectionView } from '../../../core/extension-registry/index.js';
-export declare const manifests: Array<ManifestCollectionView>;

package/dist-cms/packages/media/media/collection-view/manifests.js

@@ -1,57 +0,0 @@
-export const manifests = [
-    {
-        type: 'collectionView',
-        alias: 'Umb.CollectionView.MediaGrid',
-        name: 'Media Grid Collection View',
-        js: () => import('./media-grid-collection-view.element.js'),
-        weight: 300,
-        meta: {
-            label: 'Grid',
-            icon: 'icon-grid',
-            pathName: 'grid',
-        },
-        conditions: [
-            {
-                alias: 'Umb.Condition.WorkspaceEntityType',
-                match: 'media',
-            },
-        ],
-    },
-    {
-        type: 'collectionView',
-        alias: 'Umb.CollectionView.MediaTable',
-        name: 'Media Table Collection View',
-        js: () => import('./media-table-collection-view.element.js'),
-        weight: 200,
-        meta: {
-            label: 'Table',
-            icon: 'icon-box',
-            pathName: 'table',
-        },
-        conditions: [
-            {
-                alias: 'Umb.Condition.WorkspaceEntityType',
-                match: 'media',
-            },
-        ],
-    },
-    {
-        type: 'collectionView',
-        alias: 'Umb.CollectionView.Test',
-        name: 'Test',
-        elementName: 'umb-collection-view-media-test',
-        js: () => import('./collection-view-media-test.element.js'),
-        weight: 100,
-        meta: {
-            label: 'Test',
-            icon: 'icon-newspaper',
-            pathName: 'test',
-        },
-        conditions: [
-            {
-                alias: 'Umb.Condition.WorkspaceEntityType',
-                match: 'media',
-            },
-        ],
-    },
-];

package/dist-cms/packages/media/media/collection-view/media-grid-collection-view.element.js

@@ -1,164 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { UmbTextStyles } from '../../../../shared/style/index.js';
-import { css, html, customElement, state, repeat } from '../../../../external/lit/index.js';
-import { UMB_DEFAULT_COLLECTION_CONTEXT } from '../../../core/collection/index.js';
-import { UmbLitElement } from '../../../core/lit-element/index.js';
-let UmbMediaGridCollectionViewElement = class UmbMediaGridCollectionViewElement extends UmbLitElement {
-    constructor() {
-        super();
-        this._selection = [];
-        document.addEventListener('dragenter', this._handleDragEnter.bind(this));
-        document.addEventListener('dragleave', this._handleDragLeave.bind(this));
-        document.addEventListener('drop', this._handleDrop.bind(this));
-        this.consumeContext(UMB_DEFAULT_COLLECTION_CONTEXT, (instance) => {
-            this._collectionContext = instance;
-            this._observeCollectionContext();
-        });
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        document.removeEventListener('dragenter', this._handleDragEnter.bind(this));
-        document.removeEventListener('dragleave', this._handleDragLeave.bind(this));
-        document.removeEventListener('drop', this._handleDrop.bind(this));
-    }
-    _handleDragEnter() {
-        this.toggleAttribute('dragging', true);
-    }
-    _handleDragLeave() {
-        this.toggleAttribute('dragging', false);
-    }
-    _handleDrop(e) {
-        e.preventDefault();
-        this.toggleAttribute('dragging', false);
-    }
-    _observeCollectionContext() {
-        if (!this._collectionContext)
-            return;
-        this.observe(this._collectionContext.items, (mediaItems) => {
-            this._mediaItems = [...mediaItems].sort((a, b) => (a.hasChildren === b.hasChildren ? 0 : a ? -1 : 1));
-        });
-        this.observe(this._collectionContext.selection.selection, (selection) => {
-            this._selection = selection;
-        });
-    }
-    _handleOpenItem(mediaItem) {
-        //TODO: Fix when we have dynamic routing
-        history.pushState(null, '', 'section/media/media/edit/' + mediaItem.unique);
-    }
-    _handleSelect(mediaItem) {
-        if (mediaItem.unique) {
-            this._collectionContext?.selection.select(mediaItem.unique);
-        }
-    }
-    _handleDeselect(mediaItem) {
-        if (mediaItem.unique) {
-            this._collectionContext?.selection.deselect(mediaItem.unique);
-        }
-    }
-    _isSelected(mediaItem) {
-        if (mediaItem.unique) {
-            return this._selection.includes(mediaItem.unique);
-        }
-        return false;
-    }
-    _renderMediaItem(item) {
-        const name = item.name || '';
-        //TODO: fix the file extension when media items have a file extension.
-        return html `<uui-card-media
-			selectable
-			?select-only=${this._selection && this._selection.length > 0}
-			?selected=${this._isSelected(item)}
-			@open=${() => this._handleOpenItem(item)}
-			@selected=${() => this._handleSelect(item)}
-			@deselected=${() => this._handleDeselect(item)}
-			class="media-item"
-			.fileExt=${item.hasChildren ? '' : 'image'}
-			name=${name}></uui-card-media>`;
-    }
-    render() {
-        return html `
-			<uui-file-dropzone
-				id="dropzone"
-				multiple
-				@file-change=${(e) => console.log(e)}
-				label="Drop files here"
-				accept=""></uui-file-dropzone>
-			<div id="media-files">
-				${this._mediaItems
-            ? repeat(this._mediaItems, (file, index) => (file.unique || '') + index, (file) => this._renderMediaItem(file))
-            : ''}
-			</div>
-		`;
-    }
-};
-UmbMediaGridCollectionViewElement.styles = [
-    UmbTextStyles,
-    css `
-			:host {
-				display: flex;
-				flex-direction: column;
-				box-sizing: border-box;
-				position: relative;
-				height: 100%;
-				width: 100%;
-				padding: var(--uui-size-space-3) var(--uui-size-space-6);
-			}
-			:host([dragging]) #dropzone {
-				opacity: 1;
-				pointer-events: all;
-			}
-			[dropzone] {
-				opacity: 0;
-			}
-			#dropzone {
-				opacity: 0;
-				pointer-events: none;
-				display: block;
-				position: absolute;
-				inset: 0px;
-				z-index: 100;
-				backdrop-filter: opacity(1); /* Removes the built in blur effect */
-				border-radius: var(--uui-border-radius);
-				overflow: clip;
-				border: 1px solid var(--uui-color-focus);
-			}
-			#dropzone:after {
-				content: '';
-				display: block;
-				position: absolute;
-				inset: 0;
-				border-radius: var(--uui-border-radius);
-				background-color: var(--uui-color-focus);
-				opacity: 0.2;
-			}
-			#media-folders {
-				margin-bottom: var(--uui-size-space-5);
-			}
-			#media-folders,
-			#media-files {
-				display: grid;
-				grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-				grid-template-rows: repeat(auto-fill, 200px);
-				gap: var(--uui-size-space-5);
-			}
-			.media-item img {
-				object-fit: contain;
-			}
-		`,
-];
-__decorate([
-    state()
-], UmbMediaGridCollectionViewElement.prototype, "_mediaItems", void 0);
-__decorate([
-    state()
-], UmbMediaGridCollectionViewElement.prototype, "_selection", void 0);
-UmbMediaGridCollectionViewElement = __decorate([
-    customElement('umb-media-grid-collection-view')
-], UmbMediaGridCollectionViewElement);
-export { UmbMediaGridCollectionViewElement };
-export default UmbMediaGridCollectionViewElement;

package/dist-cms/packages/media/media/collection-view/media-table-collection-view.element.js

@@ -1,123 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { UmbTextStyles } from '../../../../shared/style/index.js';
-import { css, html, customElement, state } from '../../../../external/lit/index.js';
-import { UMB_DEFAULT_COLLECTION_CONTEXT } from '../../../core/collection/index.js';
-import { UmbLitElement } from '../../../core/lit-element/index.js';
-let UmbMediaTableCollectionViewElement = class UmbMediaTableCollectionViewElement extends UmbLitElement {
-    constructor() {
-        super();
-        this._tableConfig = {
-            allowSelection: true,
-        };
-        this._tableColumns = [
-            {
-                name: 'Name',
-                alias: 'mediaName',
-            },
-        ];
-        this._tableItems = [];
-        this._selection = [];
-        this.consumeContext(UMB_DEFAULT_COLLECTION_CONTEXT, (instance) => {
-            this._collectionContext = instance;
-            this._observeCollectionContext();
-        });
-    }
-    _observeCollectionContext() {
-        if (!this._collectionContext)
-            return;
-        this.observe(this._collectionContext.items, (nodes) => {
-            this._mediaItems = nodes;
-            this._createTableItems(this._mediaItems);
-        });
-        this.observe(this._collectionContext.selection.selection, (selection) => {
-            this._selection = selection;
-        });
-    }
-    _createTableItems(mediaItems) {
-        // TODO: this should use the MediaDetails type, but for now that results in type errors.
-        // TODO: I guess the type error will go away when we get an entity based MediaDetails model instead of tree based.
-        this._tableItems = mediaItems.map((item) => {
-            return {
-                id: item.id,
-                data: [
-                    {
-                        columnAlias: 'mediaName',
-                        value: item.name || 'Untitled',
-                    },
-                ],
-            };
-        });
-    }
-    _handleSelect(event) {
-        event.stopPropagation();
-        const table = event.target;
-        const selection = table.selection;
-        this._collectionContext?.selection.setSelection(selection);
-    }
-    _handleDeselect(event) {
-        event.stopPropagation();
-        const table = event.target;
-        const selection = table.selection;
-        this._collectionContext?.selection.setSelection(selection);
-    }
-    _handleOrdering(event) {
-        const table = event.target;
-        const orderingColumn = table.orderingColumn;
-        const orderingDesc = table.orderingDesc;
-        console.log(`fetch media items, order column: ${orderingColumn}, desc: ${orderingDesc}`);
-    }
-    render() {
-        return html `
-			<umb-table
-				.config=${this._tableConfig}
-				.columns=${this._tableColumns}
-				.items=${this._tableItems}
-				.selection=${this._selection}
-				@selected="${this._handleSelect}"
-				@deselected="${this._handleDeselect}"
-				@ordered="${this._handleOrdering}"></umb-table>
-		`;
-    }
-};
-UmbMediaTableCollectionViewElement.styles = [
-    UmbTextStyles,
-    css `
-			:host {
-				display: block;
-				box-sizing: border-box;
-				height: 100%;
-				width: 100%;
-				padding: var(--uui-size-space-3) var(--uui-size-space-6);
-			}
-
-			/* TODO: Should we have embedded padding in the table component? */
-			umb-table {
-				padding: 0; /* To fix the embedded padding in the table component. */
-			}
-		`,
-];
-__decorate([
-    state()
-], UmbMediaTableCollectionViewElement.prototype, "_mediaItems", void 0);
-__decorate([
-    state()
-], UmbMediaTableCollectionViewElement.prototype, "_tableConfig", void 0);
-__decorate([
-    state()
-], UmbMediaTableCollectionViewElement.prototype, "_tableColumns", void 0);
-__decorate([
-    state()
-], UmbMediaTableCollectionViewElement.prototype, "_tableItems", void 0);
-__decorate([
-    state()
-], UmbMediaTableCollectionViewElement.prototype, "_selection", void 0);
-UmbMediaTableCollectionViewElement = __decorate([
-    customElement('umb-media-table-collection-view')
-], UmbMediaTableCollectionViewElement);
-export { UmbMediaTableCollectionViewElement };
-export default UmbMediaTableCollectionViewElement;