@jumoo/usync 18.2.0 → 18.3.0

package/dist/utils/preview/content-type-diff.js

@@ -0,0 +1,72 @@
+import { deepEqual } from '../diff/deep-equal.js';
+import { compositionIds, } from './content-type-layout.js';
+const TYPE_FIELDS = [
+    'alias',
+    'name',
+    'description',
+    'icon',
+    'allowedAsRoot',
+    'variesByCulture',
+    'variesBySegment',
+    'isElement',
+    'collection',
+];
+const PROPERTY_FIELDS = [
+    'alias',
+    'name',
+    'description',
+    'dataType',
+    'container',
+    'sortOrder',
+    'variesByCulture',
+    'variesBySegment',
+    'validation',
+    'appearance',
+];
+const CONTAINER_FIELDS = ['name', 'type', 'parent', 'sortOrder'];
+/**
+ * compare two versions of a content type by key. Items only in the current
+ * version are being removed, items only in the incoming version are being added.
+ */
+export function diffContentTypes(current, incoming) {
+    const fields = new Set();
+    if (current && incoming) {
+        for (const field of TYPE_FIELDS) {
+            if (!deepEqual(current[field], incoming[field]))
+                fields.add(field);
+        }
+        if (!deepEqual([...compositionIds(current)].sort(), [...compositionIds(incoming)].sort())) {
+            fields.add('compositions');
+        }
+    }
+    return {
+        fields,
+        properties: diffById(current?.properties, incoming?.properties, PROPERTY_FIELDS),
+        containers: diffById(current?.containers, incoming?.containers, CONTAINER_FIELDS),
+    };
+}
+function diffById(current, incoming, fields) {
+    const changes = new Map();
+    // a whole type being added or removed is shown by its headline, don't mark every item.
+    if (!current || !incoming)
+        return changes;
+    const before = new Map(current.map((item) => [item.id, item]));
+    const after = new Map(incoming.map((item) => [item.id, item]));
+    for (const [id, item] of before) {
+        const other = after.get(id);
+        if (!other) {
+            changes.set(id, { status: 'removed', fields: [] });
+            continue;
+        }
+        const changed = fields
+            .filter((field) => !deepEqual(item[field], other[field]))
+            .map(String);
+        if (changed.length > 0)
+            changes.set(id, { status: 'changed', fields: changed });
+    }
+    for (const id of after.keys()) {
+        if (!before.has(id))
+            changes.set(id, { status: 'added', fields: [] });
+    }
+    return changes;
+}

package/dist/utils/preview/content-type-layout.d.ts

@@ -0,0 +1,39 @@
+import type { DocumentTypeResponseModel, MediaTypeResponseModel, MemberTypeResponseModel } from '@umbraco-cms/backoffice/external/backend-api';
+/**
+ * the shape document, media and member types share - enough to lay out
+ * the editor view and compare two versions.
+ */
+export type USyncPreviewContentType = DocumentTypeResponseModel | MediaTypeResponseModel | MemberTypeResponseModel;
+export type USyncPreviewProperty = USyncPreviewContentType['properties'][number];
+export type USyncPreviewContainer = USyncPreviewContentType['containers'][number];
+export interface USyncLayoutProperty {
+    property: USyncPreviewProperty;
+    /** name of the composition this property comes from (undefined when it's the type's own) */
+    inheritedFrom?: string;
+}
+export interface USyncLayoutGroup {
+    name: string;
+    /** ids of every container merged into this group (own + compositions) */
+    ids: string[];
+    inherited: boolean;
+    sortOrder: number;
+    properties: USyncLayoutProperty[];
+}
+export interface USyncLayoutTab {
+    name: string;
+    ids: string[];
+    inherited: boolean;
+    sortOrder: number;
+    /** properties placed directly on the tab, outside any group */
+    properties: USyncLayoutProperty[];
+    groups: USyncLayoutGroup[];
+}
+/** name used for the tab that holds groups which aren't inside a tab */
+export declare const USYNC_GENERIC_TAB = "";
+/** the ids of the types this one is composed of (or inherits from). */
+export declare function compositionIds(type: USyncPreviewContentType): string[];
+/**
+ * build the tabs and groups an editor would see, merging in the containers
+ * and properties from compositions the way the backoffice does (by name).
+ */
+export declare function buildContentTypeLayout(type: USyncPreviewContentType, compositions: Map<string, USyncPreviewContentType>): USyncLayoutTab[];

package/dist/utils/preview/content-type-layout.js

@@ -0,0 +1,100 @@
+/** name used for the tab that holds groups which aren't inside a tab */
+export const USYNC_GENERIC_TAB = '';
+/** the ids of the types this one is composed of (or inherits from). */
+export function compositionIds(type) {
+    return type.compositions.map((composition) => {
+        if ('documentType' in composition)
+            return composition.documentType.id;
+        if ('mediaType' in composition)
+            return composition.mediaType.id;
+        return composition.memberType.id;
+    });
+}
+/**
+ * build the tabs and groups an editor would see, merging in the containers
+ * and properties from compositions the way the backoffice does (by name).
+ */
+export function buildContentTypeLayout(type, compositions) {
+    const tabs = new Map();
+    const tabFor = (name, id, sortOrder, inherited) => {
+        let tab = tabs.get(name);
+        if (!tab) {
+            tab = { name, ids: [], inherited, sortOrder, properties: [], groups: [] };
+            tabs.set(name, tab);
+        }
+        if (id)
+            tab.ids.push(id);
+        tab.inherited && (tab.inherited = inherited);
+        return tab;
+    };
+    const groupFor = (tab, name, id, sortOrder, inherited) => {
+        let group = tab.groups.find((g) => g.name === name);
+        if (!group) {
+            group = { name, ids: [], inherited, sortOrder, properties: [] };
+            tab.groups.push(group);
+        }
+        group.ids.push(id);
+        group.inherited && (group.inherited = inherited);
+        return group;
+    };
+    for (const source of contributors(type, compositions)) {
+        const inherited = source !== type;
+        const containers = new Map(source.containers.map((c) => [c.id, c]));
+        // where each container (and so each property) lands in the merged layout.
+        const placed = new Map();
+        for (const container of [...source.containers].sort(bySortOrder)) {
+            if (container.type === 'Tab') {
+                placed.set(container.id, tabFor(container.name ?? '', container.id, container.sortOrder, inherited));
+            }
+        }
+        for (const container of [...source.containers].sort(bySortOrder)) {
+            if (container.type !== 'Group')
+                continue;
+            const parent = container.parent ? containers.get(container.parent.id) : undefined;
+            const tab = parent
+                ? tabFor(parent.name ?? '', undefined, parent.sortOrder, inherited)
+                : tabFor(USYNC_GENERIC_TAB, undefined, -1, inherited);
+            placed.set(container.id, groupFor(tab, container.name ?? '', container.id, container.sortOrder, inherited));
+        }
+        for (const property of [...source.properties].sort(bySortOrder)) {
+            const target = property.container ? placed.get(property.container.id) : undefined;
+            const entry = { property, inheritedFrom: inherited ? source.name : undefined };
+            if (target) {
+                target.properties.push(entry);
+            }
+            else {
+                tabFor(USYNC_GENERIC_TAB, undefined, -1, inherited).properties.push(entry);
+            }
+        }
+    }
+    const result = [...tabs.values()].sort(bySortOrder);
+    for (const tab of result) {
+        tab.groups.sort(bySortOrder);
+        tab.properties.sort((a, b) => a.property.sortOrder - b.property.sortOrder);
+        for (const group of tab.groups) {
+            group.properties.sort((a, b) => a.property.sortOrder - b.property.sortOrder);
+        }
+    }
+    return result.filter((tab) => tab.properties.length > 0 || tab.groups.length > 0);
+}
+/** the type itself first, then everything it is composed of (depth first, no repeats). */
+function contributors(type, compositions) {
+    const seen = new Set();
+    const out = [];
+    const visit = (current) => {
+        if (seen.has(current.id))
+            return;
+        seen.add(current.id);
+        out.push(current);
+        for (const id of compositionIds(current)) {
+            const composition = compositions.get(id);
+            if (composition)
+                visit(composition);
+        }
+    };
+    visit(type);
+    return out;
+}
+function bySortOrder(a, b) {
+    return a.sortOrder - b.sortOrder;
+}

package/dist/workspace/components/usync-action-button.js

@@ -26,58 +26,58 @@ let SyncActionButtonElement = class SyncActionButtonElement extends UmbLitElemen
             : this.renderSingleAction();
     }
     renderSingleAction() {
-        return html ` <uui-button
-			class="action-button"
-			.disabled=${this.disabled}
-			label=${this.localize.termOrDefault(`uSync_${this.button?.label}`, this.button?.label ?? '')}
-			color=${this.button?.color}
-			look=${this.button?.look}
-			state=${ifDefined(this.state)}
+        return html ` <uui-button
+			class="action-button"
+			.disabled=${this.disabled}
+			label=${this.localize.termOrDefault(`uSync_${this.button?.label}`, this.button?.label ?? '')}
+			color=${this.button?.color}
+			look=${this.button?.look}
+			state=${ifDefined(this.state)}
 			@click=${() => __classPrivateFieldGet(this, _SyncActionButtonElement_instances, "m", _SyncActionButtonElement_onClick).call(this, this.button)}></uui-button>`;
     }
     renderMultipleActions(parent) {
         if (!this.button?.children)
             return nothing;
         const buttons = this.button?.children.map((item) => {
-            return html ` <uui-menu-item
-				.disabled=${this.disabled}
-				.label=${this.localize.termOrDefault(`uSync_${item.label}`, item.label)}
+            return html ` <uui-menu-item
+				.disabled=${this.disabled}
+				.label=${this.localize.termOrDefault(`uSync_${item.label}`, item.label)}
 				@click-label=${() => __classPrivateFieldGet(this, _SyncActionButtonElement_instances, "m", _SyncActionButtonElement_onClick).call(this, item)}></uui-menu-item>`;
         });
         if (buttons.length == 0)
             return nothing;
         const popoverId = `popover_${parent?.key}`;
-        return html `
-			<uui-button-group class="action-button">
-				<uui-button
-					.disabled=${this.disabled}
-					.label=${this.button.label}
-					color=${parent?.color}
-					look=${parent?.look}
-					@click=${() => __classPrivateFieldGet(this, _SyncActionButtonElement_instances, "m", _SyncActionButtonElement_onClick).call(this, this.button)}>
-					${this.localize.termOrDefault(`uSync_${this.button?.label}`, this.button?.label ?? '')}
-				</uui-button>
-				<uui-button
-					.disabled=${this.disabled}
-					popovertarget=${popoverId}
-					.label=${this.button.label}
-					color=${parent?.color}
-					look=${parent?.look}
-					compact>
-					<uui-symbol-expand
-						class="expand-symbol"
-						.open=${this._popoverOpen}></uui-symbol-expand>
-				</uui-button>
-			</uui-button-group>
-
-			<uui-popover-container
-				id=${popoverId}
-				placement="bottom-end"
-				@toggle=${__classPrivateFieldGet(this, _SyncActionButtonElement_instances, "m", _SyncActionButtonElement_onPopoverToggle)}>
-				<umb-popover-layout>
-					<uui-scroll-container> ${buttons} </uui-scroll-container>
-				</umb-popover-layout>
-			</uui-popover-container>
+        return html `
+			<uui-button-group class="action-button">
+				<uui-button
+					.disabled=${this.disabled}
+					.label=${this.button.label}
+					color=${parent?.color}
+					look=${parent?.look}
+					@click=${() => __classPrivateFieldGet(this, _SyncActionButtonElement_instances, "m", _SyncActionButtonElement_onClick).call(this, this.button)}>
+					${this.localize.termOrDefault(`uSync_${this.button?.label}`, this.button?.label ?? '')}
+				</uui-button>
+				<uui-button
+					.disabled=${this.disabled}
+					popovertarget=${popoverId}
+					.label=${this.button.label}
+					color=${parent?.color}
+					look=${parent?.look}
+					compact>
+					<uui-symbol-expand
+						class="expand-symbol"
+						.open=${this._popoverOpen}></uui-symbol-expand>
+				</uui-button>
+			</uui-button-group>
+
+			<uui-popover-container
+				id=${popoverId}
+				placement="bottom-end"
+				@toggle=${__classPrivateFieldGet(this, _SyncActionButtonElement_instances, "m", _SyncActionButtonElement_onPopoverToggle)}>
+				<umb-popover-layout>
+					<uui-scroll-container> ${buttons} </uui-scroll-container>
+				</umb-popover-layout>
+			</uui-popover-container>
 		`;
     }
 };
@@ -90,18 +90,18 @@ _SyncActionButtonElement_onClick = function _SyncActionButtonElement_onClick(ite
 _SyncActionButtonElement_onPopoverToggle = function _SyncActionButtonElement_onPopoverToggle(e) {
     this._popoverOpen = e.newState === 'open';
 };
-SyncActionButtonElement.styles = css `
-		.action-button {
-			min-width: 110px;
-		}
-
-		.expand-symbol {
-			transform: rotate(90deg);
-		}
-
-		.expand-symbol[open] {
-			transform: rotate(180deg);
-		}
+SyncActionButtonElement.styles = css `
+		.action-button {
+			min-width: 110px;
+		}
+
+		.expand-symbol {
+			transform: rotate(90deg);
+		}
+
+		.expand-symbol[open] {
+			transform: rotate(180deg);
+		}
 	`;
 __decorate([
     property({ type: Object })

package/dist/workspace/components/usync-file-picker.element.js

@@ -38,53 +38,53 @@ let uSyncFilePicker = class uSyncFilePicker extends UmbLitElement {
         this.dispatchEvent(new uSyncFilePickerChangeEvent(this._file));
     }
     render() {
-        return html `<input
-				@click=${(e) => e.stopPropagation()}
-				type="file"
-				id="file"
-				this.accept=${this.accept}
-				@change=${this._onFilePickerChange} />
+        return html `<input
+				@click=${(e) => e.stopPropagation()}
+				type="file"
+				id="file"
+				this.accept=${this.accept}
+				@change=${this._onFilePickerChange} />
 			${this._renderFile()} ${this._renderButton()}`;
     }
     _renderFile() {
         if (!this._file)
             return nothing;
-        return html ` <div class="file">
-			<div>${this._file.name}</div>
-			<uui-button
-				@click="${() => this._removeFile()}"
-				compact
-				color="danger"
-				label="Remove">
-				<umb-icon name="icon-trash"></umb-icon>
-			</uui-button>
+        return html ` <div class="file">
+			<div>${this._file.name}</div>
+			<uui-button
+				@click="${() => this._removeFile()}"
+				compact
+				color="danger"
+				label="Remove">
+				<umb-icon name="icon-trash"></umb-icon>
+			</uui-button>
 		</div>`;
     }
     _renderButton() {
         return this._file
             ? nothing
-            : html ` <uui-button
-					id="add-button"
-					look="placeholder"
-					label=${this.label}
+            : html ` <uui-button
+					id="add-button"
+					look="placeholder"
+					label=${this.label}
 					@click="${this._onUpload}"></uui-button>`;
     }
 };
 uSyncFilePicker.styles = [
-    css `
-			.file {
-				display: flex;
-				align-items: center;
-				gap: var(--uui-size-space-2);
-			}
-
-			#file {
-				display: none;
-			}
-
-			#add-button {
-				width: 100%;
-			}
+    css `
+			.file {
+				display: flex;
+				align-items: center;
+				gap: var(--uui-size-space-2);
+			}
+
+			#file {
+				display: none;
+			}
+
+			#add-button {
+				width: 100%;
+			}
 		`,
 ];
 __decorate([

package/dist/workspace/components/usync-file-upload.element.js

@@ -46,22 +46,22 @@ let uSyncFileUploadElement = class uSyncFileUploadElement extends UmbLitElement
         return html ` ${this.renderFile()} ${this.renderUploadButton()} `;
     }
     renderFile() {
-        return html `
-			<div class="upload-box">
-				<usync-upload-file-picker
-					label="Select uSync Zip file"
-					@change=${__classPrivateFieldGet(this, _uSyncFileUploadElement_instances, "m", _uSyncFileUploadElement_onFileChange)}></usync-upload-file-picker>
-			</div>
+        return html `
+			<div class="upload-box">
+				<usync-upload-file-picker
+					label="Select uSync Zip file"
+					@change=${__classPrivateFieldGet(this, _uSyncFileUploadElement_instances, "m", _uSyncFileUploadElement_onFileChange)}></usync-upload-file-picker>
+			</div>
 		`;
     }
     renderUploadButton() {
         if (!this.selected)
             return nothing;
-        return html `<uui-button
-			type="button"
-			look="primary"
-			@click="${__classPrivateFieldGet(this, _uSyncFileUploadElement_instances, "m", _uSyncFileUploadElement_onUpload)}"
-			label="Upload"
+        return html `<uui-button
+			type="button"
+			look="primary"
+			@click="${__classPrivateFieldGet(this, _uSyncFileUploadElement_instances, "m", _uSyncFileUploadElement_onUpload)}"
+			label="Upload"
 			.state=${this.buttonState}></uui-button>`;
     }
 };
@@ -90,20 +90,20 @@ _uSyncFileUploadElement_uploadComplete = async function _uSyncFileUploadElement_
 _uSyncFileUploadElement_onFileChange = function _uSyncFileUploadElement_onFileChange(e) {
     this.selected = e.file;
 };
-uSyncFileUploadElement.styles = css `
-		:host {
-			display: flex;
-			justify-content: space-between;
-		}
-
-		.upload-box {
-			flex-grow: 2;
-		}
-
-		usync-upload-file-picker {
-			width: 100%;
-			flex-grow: 2;
-		}
+uSyncFileUploadElement.styles = css `
+		:host {
+			display: flex;
+			justify-content: space-between;
+		}
+
+		.upload-box {
+			flex-grow: 2;
+		}
+
+		usync-upload-file-picker {
+			width: 100%;
+			flex-grow: 2;
+		}
 	`;
 __decorate([
     state()

package/dist/workspace/dialogs/import-modal.element.js

@@ -18,30 +18,30 @@ let uSyncImportModalDialog = class uSyncImportModalDialog extends UmbModalBaseEl
         _uSyncImportModalDialog_instances.add(this);
     }
     render() {
-        return html `
-			<umb-body-layout .headline=${this.localize.termOrDefault('uSync_importHeader', 'Import from file')}>
-				${this.renderForm()} ${this.renderResult()}
-			</umb-body-layout>
+        return html `
+			<umb-body-layout .headline=${this.localize.termOrDefault('uSync_importHeader', 'Import from file')}>
+				${this.renderForm()} ${this.renderResult()}
+			</umb-body-layout>
 		`;
     }
     renderForm() {
         if (this.result !== undefined)
             return;
-        return html ` ${this.localize.termOrDefault('uSync_uploadIntro', 'Select a zip file containing uSync files that you want to upload')}
-			<usync-file-upload @uploaded=${__classPrivateFieldGet(this, _uSyncImportModalDialog_instances, "m", _uSyncImportModalDialog_onUploaded)}></usync-file-upload>
-			<div slot="actions">
-				<uui-button
-					id="cancel"
-					.label=${this.localize.term('general_close')}
-					@click="${__classPrivateFieldGet(this, _uSyncImportModalDialog_instances, "m", _uSyncImportModalDialog_onClose)}"></uui-button>
+        return html ` ${this.localize.termOrDefault('uSync_uploadIntro', 'Select a zip file containing uSync files that you want to upload')}
+			<usync-file-upload @uploaded=${__classPrivateFieldGet(this, _uSyncImportModalDialog_instances, "m", _uSyncImportModalDialog_onUploaded)}></usync-file-upload>
+			<div slot="actions">
+				<uui-button
+					id="cancel"
+					.label=${this.localize.term('general_close')}
+					@click="${__classPrivateFieldGet(this, _uSyncImportModalDialog_instances, "m", _uSyncImportModalDialog_onClose)}"></uui-button>
 			</div>`;
     }
     renderResult() {
         if (this.result == undefined)
             return;
-        return html `${when(this.result.success, () => html `${this.localize.termOrDefault('uSync_uploadSuccess', 'The files have been uploaded and extracted to the uSync folder')}`, () => html `${this.localize.termOrDefault('uSync_uploadError', 'There was an error uploading the files')} ${this.result?.errors}`)}
-			<div slot="actions">
-				<uui-button id="continue" label="Import" @click="${__classPrivateFieldGet(this, _uSyncImportModalDialog_instances, "m", _uSyncImportModalDialog_onImport)}"></uui-button>
+        return html `${when(this.result.success, () => html `${this.localize.termOrDefault('uSync_uploadSuccess', 'The files have been uploaded and extracted to the uSync folder')}`, () => html `${this.localize.termOrDefault('uSync_uploadError', 'There was an error uploading the files')} ${this.result?.errors}`)}
+			<div slot="actions">
+				<uui-button id="continue" label="Import" @click="${__classPrivateFieldGet(this, _uSyncImportModalDialog_instances, "m", _uSyncImportModalDialog_onImport)}"></uui-button>
 			</div>`;
     }
 };
@@ -56,14 +56,14 @@ _uSyncImportModalDialog_onImport = function _uSyncImportModalDialog_onImport() {
 _uSyncImportModalDialog_onUploaded = function _uSyncImportModalDialog_onUploaded(e) {
     this.result = e.result;
 };
-uSyncImportModalDialog.styles = css `
-		umb-body-layout {
-			max-width: 450px;
-		}
-
-		usync-file-upload {
-			padding: 10px 0;
-		}
+uSyncImportModalDialog.styles = css `
+		umb-body-layout {
+			max-width: 450px;
+		}
+
+		usync-file-upload {
+			padding: 10px 0;
+		}
 	`;
 __decorate([
     state()