@jumoo/usync 18.2.0 → 18.3.0

package/dist/components/usync-result-row.js

@@ -32,21 +32,21 @@ let uSyncResultRow = class uSyncResultRow extends UmbLitElement {
                 ? 'icon-check color-green'
                 : 'icon-wrong color-red';
         const noChange = result.change == ChangeType.NO_CHANGE || result.change == ChangeType.EXPORT;
-        return html `<div
-			class="${classMap({ no_change: noChange })} row"
-			@click=${() => __classPrivateFieldGet(this, _uSyncResultRow_instances, "m", _uSyncResultRow_showDetail).call(this, result)}>
-			<div class="icon-cell" .noPadding=${true}>
-				<umb-icon .name=${icon}></umb-icon>
-			</div>
-			<div class="row-content" .clipText=${true}>
-				<div class="item-detail">
-					<div class="item-change">${result.change}</div>
-				</div>
-				<div class="item-name">
-					<div>${result.name}</div>
-					<div>${this.renderMessage(result)}</div>
-				</div>
-			</div>
+        return html `<div
+			class="${classMap({ no_change: noChange })} row"
+			@click=${() => __classPrivateFieldGet(this, _uSyncResultRow_instances, "m", _uSyncResultRow_showDetail).call(this, result)}>
+			<div class="icon-cell" .noPadding=${true}>
+				<umb-icon .name=${icon}></umb-icon>
+			</div>
+			<div class="row-content" .clipText=${true}>
+				<div class="item-detail">
+					<div class="item-change">${result.change}</div>
+				</div>
+				<div class="item-name">
+					<div>${result.name}</div>
+					<div>${this.renderMessage(result)}</div>
+				</div>
+			</div>
 		</div>`;
     }
     renderMessage(result) {
@@ -54,11 +54,11 @@ let uSyncResultRow = class uSyncResultRow extends UmbLitElement {
             result.change != ChangeType.IMPORT_FAIL) ||
             !result.message
             ? html `<em>${result.message}</em>`
-            : html ` <uui-button
-					look="outline"
-					color="danger"
-					label="View error"
-					compact
+            : html ` <uui-button
+					look="outline"
+					color="danger"
+					label="View error"
+					compact
 					@click=${(e) => __classPrivateFieldGet(this, _uSyncResultRow_instances, "m", _uSyncResultRow_viewError).call(this, e, result)}></uui-button>`;
     }
 };
@@ -81,51 +81,51 @@ _uSyncResultRow_viewError = async function _uSyncResultRow_viewError(e, result)
     });
     return data;
 };
-uSyncResultRow.styles = css `
-		.row {
-			display: flex;
-			align-items: center;
-			gap: var(--uui-size-space-5);
-			padding: var(--uui-size-space-5);
-			border-bottom: 1px solid var(--uui-color-border);
-			cursor: pointer;
-		}
-
-		:host:last-child {
-			background-color: blue;
-		}
-
-		.row:hover {
-			background-color: var(--uui-color-surface-alt);
-		}
-
-		.no_change {
-			color: var(--uui-color-disabled-contrast);
-			cursor: default;
-		}
-
-		.row-content {
-			gap: 10px;
-			flex-grow: 1;
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-		}
-
-		.item-name {
-			display: flex;
-			font-weight: bold;
-			align-items: center;
-			flex-grow: 2;
-			justify-content: space-between;
-		}
-
-		.item-detail {
-			display: flex;
-			flex-direction: column;
-			font-size: smaller;
-			min-width: 60px;
-		}
+uSyncResultRow.styles = css `
+		.row {
+			display: flex;
+			align-items: center;
+			gap: var(--uui-size-space-5);
+			padding: var(--uui-size-space-5);
+			border-bottom: 1px solid var(--uui-color-border);
+			cursor: pointer;
+		}
+
+		:host:last-child {
+			background-color: blue;
+		}
+
+		.row:hover {
+			background-color: var(--uui-color-surface-alt);
+		}
+
+		.no_change {
+			color: var(--uui-color-disabled-contrast);
+			cursor: default;
+		}
+
+		.row-content {
+			gap: 10px;
+			flex-grow: 1;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+		}
+
+		.item-name {
+			display: flex;
+			font-weight: bold;
+			align-items: center;
+			flex-grow: 2;
+			justify-content: space-between;
+		}
+
+		.item-detail {
+			display: flex;
+			flex-direction: column;
+			font-size: smaller;
+			min-width: 60px;
+		}
 	`;
 __decorate([
     property({ type: Object })

package/dist/components/usync-results-group-view.js

@@ -22,25 +22,25 @@ let uSyncResultGroupView = class uSyncResultGroupView extends UmbLitElement {
         const changeCount = this.getChangeCount() ?? 0;
         if (changeCount === 0 && !this.showAll)
             return nothing;
-        return html `
-			<uui-box
+        return html `
+			<uui-box
 				class=${classMap({
             has_changes: changeCount > 0,
-        })}>
-				<div
-					class="summary ${when(this.expanded, () => 'expanded')}"
-					@click=${() => (this.expanded = !this.expanded)}>
-					<h4>${this.localize.termOrDefault('uSync_' + this.groupName, this.groupName)}</h4>
-					<div class="summary-right">
-						<h4 class="count">${changeCount}/${this.results?.length}</h4>
-						<uui-icon
-							name="icon-play"
-							class=${classMap({ expanded: this.expanded })}></uui-icon>
-					</div>
-				</div>
-
-				${when(this.expanded == true, () => html `<uui-table>${this.renderGroupedRows(this.results)}</uui-table>`)}
-			</uui-box>
+        })}>
+				<div
+					class="summary ${when(this.expanded, () => 'expanded')}"
+					@click=${() => (this.expanded = !this.expanded)}>
+					<h4>${this.localize.termOrDefault('uSync_' + this.groupName, this.groupName)}</h4>
+					<div class="summary-right">
+						<h4 class="count">${changeCount}/${this.results?.length}</h4>
+						<uui-icon
+							name="icon-play"
+							class=${classMap({ expanded: this.expanded })}></uui-icon>
+					</div>
+				</div>
+
+				${when(this.expanded == true, () => html `<uui-table>${this.renderGroupedRows(this.results)}</uui-table>`)}
+			</uui-box>
 		`;
     }
     renderGroupedRows(results) {
@@ -52,52 +52,52 @@ let uSyncResultGroupView = class uSyncResultGroupView extends UmbLitElement {
         return rowsHtml;
     }
 };
-uSyncResultGroupView.styles = css `
-		uui-box {
-			cursor: pointer;
-			--uui-box-default-padding: 0;
-		}
-
-		uui-table {
-			border-top-left-radius: 0;
-			border-top-right-radius: 0;
-		}
-
-		usync-result-row:last-child row {
-			border-bottom: none;
-		}
-
-		.expanded {
-			border-bottom: 1px solid var(--uui-color-border);
-		}
-
-		.summary {
-			display: flex;
-			margin: 0;
-			padding: 0 20px;
-			justify-content: space-between;
-		}
-
-		.summary-right {
-			display: flex;
-			align-items: center;
-			gap: var(--uui-size-space-2);
-			color: var(--uui-color-border-emphasis);
-		}
-
-		.summary-right uui-icon {
-			transform: rotate(90deg);
-			transition: transform 0.5s cubic-bezier(0.42, 0, 0.37, 1.62);
-		}
-
-		.summary-right uui-icon.expanded {
-			transform: rotate(-90deg);
-			border-bottom: none;
-		}
-
-		.count {
-			color: var(--uui-text);
-		}
+uSyncResultGroupView.styles = css `
+		uui-box {
+			cursor: pointer;
+			--uui-box-default-padding: 0;
+		}
+
+		uui-table {
+			border-top-left-radius: 0;
+			border-top-right-radius: 0;
+		}
+
+		usync-result-row:last-child row {
+			border-bottom: none;
+		}
+
+		.expanded {
+			border-bottom: 1px solid var(--uui-color-border);
+		}
+
+		.summary {
+			display: flex;
+			margin: 0;
+			padding: 0 20px;
+			justify-content: space-between;
+		}
+
+		.summary-right {
+			display: flex;
+			align-items: center;
+			gap: var(--uui-size-space-2);
+			color: var(--uui-color-border-emphasis);
+		}
+
+		.summary-right uui-icon {
+			transform: rotate(90deg);
+			transition: transform 0.5s cubic-bezier(0.42, 0, 0.37, 1.62);
+		}
+
+		.summary-right uui-icon.expanded {
+			transform: rotate(-90deg);
+			border-bottom: none;
+		}
+
+		.count {
+			color: var(--uui-text);
+		}
 	`;
 __decorate([
     state()

package/dist/components/usync-results-view.js

@@ -15,7 +15,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _uSyncResultsView_instances, _uSyncResultsView_modalContext, _uSyncResultsView_toggleShowAll, _uSyncResultsView_showDetail;
+var _uSyncResultsView_instances, _uSyncResultsView_modalContext, _uSyncResultsView_toggleShowAll, _uSyncResultsView_showDetail, _uSyncResultsView_visibleItems;
 import { LitElement, html, customElement, property, css, state, nothing, } from '@umbraco-cms/backoffice/external/lit';
 import { ChangeType } from '@jumoo/uSync';
 import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
@@ -52,37 +52,37 @@ let uSyncResultsView = class uSyncResultsView extends UmbElementMixin(LitElement
             const groupChanges = groups[key].filter((r) => r.change !== ChangeType.NO_CHANGE).length ?? 0;
             if (groupChanges === 0 && !this.showAll)
                 continue;
-            const groupHtml = html `<usync-result-group
-				.groupName=${key}
-				.results=${groups[key]}
-				.showAll=${this.showAll}
+            const groupHtml = html `<usync-result-group
+				.groupName=${key}
+				.results=${groups[key]}
+				.showAll=${this.showAll}
 				@show-detail=${__classPrivateFieldGet(this, _uSyncResultsView_instances, "m", _uSyncResultsView_showDetail)}></usync-result-group> `;
             groupsHtml.push(groupHtml);
         }
         return this.changeCount == 0 && !this.showAll
-            ? html `
-					${this.renderResultBar(this.results?.length || 0, this.changeCount)}
-					<div class="empty">
-						<umb-localize key="uSync_noChange"></umb-localize>
-					</div>
+            ? html `
+					${this.renderResultBar(this.results?.length || 0, this.changeCount)}
+					<div class="empty">
+						<umb-localize key="uSync_noChange"></umb-localize>
+					</div>
 				`
-            : html `<div id="result-box">
-					${this.renderResultBar(this.results?.length || 0, this.changeCount)}
-					${groupsHtml}
+            : html `<div id="result-box">
+					${this.renderResultBar(this.results?.length || 0, this.changeCount)}
+					${groupsHtml}
 				</div>`;
     }
     renderResultBar(count, changes) {
         if (this.hideResultBar)
             return nothing;
         const localKey = changes === 0 ? 'uSync_noChangeCount' : 'uSync_changeCount';
-        return html `<div class="result-header">
-			<uui-toggle
-				.label=${this.localize.termOrDefault('uSync_showAll', 'Show all items')}
-				?checked=${this.showAll}
-				@change=${__classPrivateFieldGet(this, _uSyncResultsView_instances, "m", _uSyncResultsView_toggleShowAll)}></uui-toggle>
-			<umb-localize .key=${localKey} .args=${[count, changes]}
-				>${changes}/${count} items</umb-localize
-			>
+        return html `<div class="result-header">
+			<uui-toggle
+				.label=${this.localize.termOrDefault('uSync_showAll', 'Show all items')}
+				?checked=${this.showAll}
+				@change=${__classPrivateFieldGet(this, _uSyncResultsView_instances, "m", _uSyncResultsView_toggleShowAll)}></uui-toggle>
+			<umb-localize .key=${localKey} .args=${[count, changes]}
+				>${changes}/${count} items</umb-localize
+			>
 		</div>`;
     }
 };
@@ -98,10 +98,11 @@ _uSyncResultsView_showDetail = async function _uSyncResultsView_showDetail(e) {
     const detailsModal = __classPrivateFieldGet(this, _uSyncResultsView_modalContext, "f")?.open(this, USYNC_DETAILS_MODAL, {
         data: {
             item: e.action,
-            showActions: !this.hideActions &&
-                (e.action.change == ChangeType.CREATE ||
-                    e.action.change == ChangeType.UPDATE ||
-                    e.action.change == ChangeType.IMPORT),
+            items: __classPrivateFieldGet(this, _uSyncResultsView_instances, "m", _uSyncResultsView_visibleItems).call(this),
+            showActions: (item) => !this.hideActions &&
+                (item.change == ChangeType.CREATE ||
+                    item.change == ChangeType.UPDATE ||
+                    item.change == ChangeType.IMPORT),
         },
     });
     const data = await detailsModal?.onSubmit().catch(() => {
@@ -110,50 +111,57 @@ _uSyncResultsView_showDetail = async function _uSyncResultsView_showDetail(e) {
     if (!data)
         return;
 };
-uSyncResultsView.styles = css `
-		:host {
-			display: block;
-			margin: var(--uui-size-space-4) 0;
-			display: flex;
-			flex-direction: column;
-			gap: var(--uui-size-space-4);
-		}
-
-		#result-box {
-			display: flex;
-			flex-direction: column;
-			gap: var(--uui-size-space-4);
-		}
-
-		uui-table {
-			position: relative;
-			z-index: 100;
-		}
-
-		.result-header {
-			display: flex;
-			justify-content: space-between;
-			padding: var(--uui-size-space-4);
-			border: 1px solid var(--uui-color-border);
-			border-radius: var(--uui-border-radius);
-			padding: var(--uui-size-space-4);
-		}
-
-		.result-header h3 {
-			margin: 0;
-			padding: 0;
-		}
-
-		.empty {
-			padding: var(--uui-size-20);
-			font-size: var(--uui-type-h5-size);
-			text-align: center;
-			font-weight: 900;
-		}
-
-		.error {
-			background-color: #fce4ec;
-		}
+_uSyncResultsView_visibleItems = function _uSyncResultsView_visibleItems() {
+    const groups = this.groupBy(this.results || [], (result) => result.itemType);
+    return Object.values(groups)
+        .flat()
+        .filter((r) => r.change !== ChangeType.EXPORT &&
+        (this.showAll || r.change !== ChangeType.NO_CHANGE));
+};
+uSyncResultsView.styles = css `
+		:host {
+			display: block;
+			margin: var(--uui-size-space-4) 0;
+			display: flex;
+			flex-direction: column;
+			gap: var(--uui-size-space-4);
+		}
+
+		#result-box {
+			display: flex;
+			flex-direction: column;
+			gap: var(--uui-size-space-4);
+		}
+
+		uui-table {
+			position: relative;
+			z-index: 100;
+		}
+
+		.result-header {
+			display: flex;
+			justify-content: space-between;
+			padding: var(--uui-size-space-4);
+			border: 1px solid var(--uui-color-border);
+			border-radius: var(--uui-border-radius);
+			padding: var(--uui-size-space-4);
+		}
+
+		.result-header h3 {
+			margin: 0;
+			padding: 0;
+		}
+
+		.empty {
+			padding: var(--uui-size-20);
+			font-size: var(--uui-type-h5-size);
+			text-align: center;
+			font-weight: 900;
+		}
+
+		.error {
+			background-color: #fce4ec;
+		}
 	`;
 __decorate([
     property({ type: Array })

package/dist/components/usync-sync-file-info-view.js

@@ -30,8 +30,8 @@ _uSyncSyncFileInfoView_renderHmacMismatch = function _uSyncSyncFileInfoView_rend
         return nothing;
     if (this._syncFileInfo.hmacMatch)
         return nothing;
-    return html `<div class="banner">
-			<umb-localize key="uSync_hmacMismatch"></umb-localize>
+    return html `<div class="banner">
+			<umb-localize key="uSync_hmacMismatch"></umb-localize>
 		</div>`;
 };
 _uSyncSyncFileInfoView_renderFormatMismatch = function _uSyncSyncFileInfoView_renderFormatMismatch() {
@@ -39,17 +39,17 @@ _uSyncSyncFileInfoView_renderFormatMismatch = function _uSyncSyncFileInfoView_re
         return nothing;
     if (this._syncFileInfo.isCurrent)
         return nothing;
-    return html `<div class="banner">
-			<umb-localize key="uSync_formatMismatch"></umb-localize>
+    return html `<div class="banner">
+			<umb-localize key="uSync_formatMismatch"></umb-localize>
 		</div>`;
 };
 uSyncSyncFileInfoView.styles = [
-    css `
-			.banner {
-				padding: var(--uui-size-space-2) var(--uui-size-space-4);
-				margin: 0 0 var(--uui-size-space-4);
-				background-color: var(--uui-color-surface);
-			}
+    css `
+			.banner {
+				padding: var(--uui-size-space-2) var(--uui-size-space-4);
+				margin: 0 0 var(--uui-size-space-4);
+				background-color: var(--uui-color-surface);
+			}
 		`,
 ];
 __decorate([

package/dist/constants.js

@@ -4,7 +4,7 @@ const _constants = {
     icon: 'icon-infinity',
     menuName: 'Syncronisation',
     menuAlias: 'usync.menu',
-    version: '17.x',
+    version: '18.x',
     conditions: {
         legacy: 'usync.legacy.condition',
     },

package/dist/dialogs/details-modal-element.d.ts

@@ -2,11 +2,26 @@ import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
 import { nothing } from '@umbraco-cms/backoffice/external/lit';
 import { uSyncDetailsModalData, uSyncDetailsModalValue } from '@jumoo/uSync';
 import { UUIButtonState } from '@umbraco-cms/backoffice/external/uui';
+type DetailsTab = 'changes' | 'diff';
 export declare class uSyncDetailsModalElement extends UmbModalBaseElement<uSyncDetailsModalData, uSyncDetailsModalValue> {
     #private;
     importState: UUIButtonState;
+    private _preview?;
+    private _tab;
+    private _loading;
+    private _item?;
+    private _index;
+    /** the entity types there is a 'usync-item-preview' element for */
+    private _previewTypes;
     constructor();
+    connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
+    renderHeadline(): typeof nothing | import("lit-html").TemplateResult<1>;
+    renderNavigation(): typeof nothing | import("lit-html").TemplateResult<1>;
+    renderTabs(): typeof nothing | import("lit-html").TemplateResult<1>;
+    renderTab(tab: DetailsTab, key: string, fallback: string, icon: string): import("lit-html").TemplateResult<1>;
+    renderTabContent(): import("lit-html").TemplateResult<1>;
+    renderPreview(): import("lit-html").TemplateResult<1>;
     renderActions(): typeof nothing | import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult;
 }