@jumoo/usync 17.5.2-prerelease.15 → 17.5.2

package/dist/components/usync-data-type-preview.js

@@ -1,293 +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;
-};
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    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 _uSyncDataTypePreviewElement_instances, _uSyncDataTypePreviewElement_renderSide, _uSyncDataTypePreviewElement_renderMissing, _uSyncDataTypePreviewElement_renderInfo, _uSyncDataTypePreviewElement_renderEditor, _uSyncDataTypePreviewElement_renderConfig;
-import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { classMap, css, customElement, html, nothing, property, } from '@umbraco-cms/backoffice/external/lit';
-import '@umbraco-cms/backoffice/components';
-import { deepEqual, prettyJson } from '../utils/diff/index.js';
-/**
- * Shows the current and incoming versions of a data type side by side,
- * rendered with the real property editor, so you can see what an import
- * will do before running it.
- */
-let uSyncDataTypePreviewElement = class uSyncDataTypePreviewElement extends UmbLitElement {
-    constructor() {
-        super(...arguments);
-        _uSyncDataTypePreviewElement_instances.add(this);
-    }
-    render() {
-        if (!this.preview)
-            return nothing;
-        const current = this.preview.currentDataType ?? undefined;
-        const incoming = this.preview.incomingDataType ?? undefined;
-        return html `
-			<div class="sides">
-				${__classPrivateFieldGet(this, _uSyncDataTypePreviewElement_instances, "m", _uSyncDataTypePreviewElement_renderSide).call(this, 'current', current, incoming)}
-				${__classPrivateFieldGet(this, _uSyncDataTypePreviewElement_instances, "m", _uSyncDataTypePreviewElement_renderSide).call(this, 'incoming', incoming, current)}
-			</div>
-		`;
-    }
-};
-_uSyncDataTypePreviewElement_instances = new WeakSet();
-_uSyncDataTypePreviewElement_renderSide = function _uSyncDataTypePreviewElement_renderSide(side, dataType, other) {
-    const headline = side === 'current'
-        ? this.localize.termOrDefault('uSync_previewCurrent', 'Current (this site)')
-        : this.localize.termOrDefault('uSync_previewIncoming', 'Incoming (uSync files)');
-    return html `
-			<div class="side">
-				<h4 class="side-headline">${headline}</h4>
-				${dataType
-        ? html `
-								${__classPrivateFieldGet(this, _uSyncDataTypePreviewElement_instances, "m", _uSyncDataTypePreviewElement_renderInfo).call(this, dataType, other)} ${__classPrivateFieldGet(this, _uSyncDataTypePreviewElement_instances, "m", _uSyncDataTypePreviewElement_renderEditor).call(this, dataType)}
-								${__classPrivateFieldGet(this, _uSyncDataTypePreviewElement_instances, "m", _uSyncDataTypePreviewElement_renderConfig).call(this, dataType, other, side)}
-							`
-        : __classPrivateFieldGet(this, _uSyncDataTypePreviewElement_instances, "m", _uSyncDataTypePreviewElement_renderMissing).call(this, side)}
-			</div>
-		`;
-};
-_uSyncDataTypePreviewElement_renderMissing = function _uSyncDataTypePreviewElement_renderMissing(side) {
-    const message = side === 'current'
-        ? this.localize.termOrDefault('uSync_previewNotInSite', 'This item does not exist in the site yet')
-        : this.preview?.isDelete
-            ? this.localize.termOrDefault('uSync_previewDeleted', 'This item will be deleted or renamed by the import')
-            : this.localize.termOrDefault('uSync_previewFailed', 'The incoming item could not be built for the preview');
-    return html `<uui-box class="info"><p class="empty">${message}</p></uui-box>`;
-};
-_uSyncDataTypePreviewElement_renderInfo = function _uSyncDataTypePreviewElement_renderInfo(dataType, other) {
-    const changed = (field) => other !== undefined && other[field] !== dataType[field];
-    return html `
-			<uui-box class="info">
-				<div slot="headline" class="headline">
-					<umb-icon name="icon-autofill"></umb-icon>
-					<span class=${classMap({ changed: changed('name') })}>${dataType.name}</span>
-				</div>
-				<dl class="meta">
-					<dt>
-						${this.localize.termOrDefault('uSync_previewPropertyEditor', 'Property editor')}
-					</dt>
-					<dd class=${classMap({ changed: changed('editorAlias') })}>
-						<code>${dataType.editorAlias}</code>
-					</dd>
-					<dt>
-						${this.localize.termOrDefault('uSync_previewPropertyEditorUi', 'Property editor UI')}
-					</dt>
-					<dd class=${classMap({ changed: changed('editorUiAlias') })}>
-						<code>${dataType.editorUiAlias}</code>
-					</dd>
-				</dl>
-			</uui-box>
-		`;
-};
-_uSyncDataTypePreviewElement_renderEditor = function _uSyncDataTypePreviewElement_renderEditor(dataType) {
-    return html `
-			<uui-box
-				.headline=${this.localize.termOrDefault('uSync_previewEditor', 'Editor preview')}>
-				<!-- inert rather than readonly: most editors render only their value when
-				     readonly, which is empty here, so you wouldn't see the editor at all. -->
-				<umb-property-dataset .value=${[]} inert>
-					<umb-property
-						alias="usyncPreview"
-						.label=${dataType.name}
-						.description=${this.localize.termOrDefault('uSync_previewEditorDesc', 'How this data type looks to editors')}
-						.propertyEditorUiAlias=${dataType.editorUiAlias}
-						.config=${dataType.values}></umb-property>
-				</umb-property-dataset>
-			</uui-box>
-		`;
-};
-_uSyncDataTypePreviewElement_renderConfig = function _uSyncDataTypePreviewElement_renderConfig(dataType, other, side) {
-    const values = [...dataType.values].sort((a, b) => a.alias.localeCompare(b.alias));
-    return html `
-			<uui-box
-				.headline=${this.localize.termOrDefault('uSync_previewConfiguration', 'Configuration')}>
-				${values.length === 0
-        ? html `<p class="empty">
-								${this.localize.termOrDefault('uSync_previewNoConfiguration', 'No configuration')}
-							</p>`
-        : html `<table>
-								${values.map((value) => {
-            const status = configStatus(value.alias, value.value, other, side);
-            return html `<tr class="row-${status}">
-										<th><code>${value.alias}</code></th>
-										<td><pre>${formatConfigValue(value.value)}</pre></td>
-									</tr>`;
-        })}
-							</table>`}
-			</uui-box>
-		`;
-};
-uSyncDataTypePreviewElement.styles = css `
-		:host {
-			display: block;
-			container-type: inline-size;
-		}
-
-		/* the two sides share rows (headline, info, editor, config), so the
-		   boxes line up across the sides. */
-		.sides {
-			display: grid;
-			grid-template-columns: 1fr 1fr;
-			grid-template-rows: auto auto auto 1fr;
-			gap: var(--uui-size-space-4) var(--uui-size-space-5);
-		}
-
-		.side {
-			display: grid;
-			grid-row: span 4;
-			grid-template-rows: subgrid;
-			min-width: 0;
-		}
-
-		.side > :last-child {
-			align-self: start;
-		}
-
-		@container (max-width: 760px) {
-			.sides {
-				grid-template-columns: 1fr;
-				grid-template-rows: none;
-				row-gap: var(--uui-size-layout-1);
-			}
-
-			.side {
-				display: flex;
-				flex-direction: column;
-				gap: var(--uui-size-space-4);
-				grid-row: auto;
-			}
-		}
-
-		.side-headline {
-			margin: 0;
-			font-size: var(--uui-type-small-size);
-			text-transform: uppercase;
-			letter-spacing: 0.04em;
-			color: var(--uui-color-text-alt);
-		}
-
-		.headline {
-			display: flex;
-			align-items: center;
-			gap: var(--uui-size-space-3);
-		}
-
-		.meta {
-			display: grid;
-			grid-template-columns: max-content 1fr;
-			align-items: baseline;
-			gap: var(--uui-size-space-3) var(--uui-size-space-5);
-			margin: 0;
-		}
-
-		.meta dt {
-			font-weight: 700;
-		}
-
-		.meta dd {
-			margin: 0;
-			overflow-wrap: anywhere;
-		}
-
-		/* a changed field gets a soft highlight, spread with a shadow so the text doesn't move. */
-		.changed {
-			background: color-mix(in srgb, var(--uui-color-warning) 35%, transparent);
-			border-radius: var(--uui-border-radius);
-			box-shadow: 0 0 0 var(--uui-size-space-1)
-				color-mix(in srgb, var(--uui-color-warning) 35%, transparent);
-		}
-
-		/* umb-property pads itself for a full workspace, tighten it up here. */
-		umb-property {
-			--uui-size-layout-1: var(--uui-size-space-2);
-		}
-
-		table {
-			width: 100%;
-			border-collapse: collapse;
-			margin: calc(-1 * var(--uui-size-space-2)) 0;
-		}
-
-		tr + tr {
-			border-top: 1px solid var(--uui-color-divider);
-		}
-
-		th,
-		td {
-			text-align: left;
-			vertical-align: baseline;
-			padding: var(--uui-size-space-3) var(--uui-size-space-3);
-		}
-
-		/* the alias column is as wide as the longest alias (up to 40%), so values sit beside their names. */
-		th {
-			width: 1%;
-			max-width: 40%;
-			white-space: nowrap;
-			font-weight: 700;
-		}
-
-		th code,
-		td pre {
-			font-size: var(--uui-type-small-size);
-		}
-
-		td pre {
-			margin: 0;
-			white-space: pre-wrap;
-			word-break: break-word;
-		}
-
-		/* marked with an inset bar rather than a border, so the content doesn't shift. */
-		tr.row-changed {
-			box-shadow: inset 3px 0 0 var(--uui-color-warning);
-			background: color-mix(in srgb, var(--uui-color-warning) 10%, transparent);
-		}
-
-		tr.row-added {
-			box-shadow: inset 3px 0 0 var(--uui-color-positive);
-			background: color-mix(in srgb, var(--uui-color-positive) 6%, transparent);
-		}
-
-		tr.row-removed {
-			box-shadow: inset 3px 0 0 var(--uui-color-danger);
-			background: color-mix(in srgb, var(--uui-color-danger) 6%, transparent);
-		}
-
-		.empty {
-			margin: 0;
-			color: var(--uui-color-text-alt);
-		}
-	`;
-__decorate([
-    property({ type: Object })
-], uSyncDataTypePreviewElement.prototype, "preview", void 0);
-uSyncDataTypePreviewElement = __decorate([
-    customElement('usync-data-type-preview')
-], uSyncDataTypePreviewElement);
-export { uSyncDataTypePreviewElement };
-/**
- * how a config value on this side compares to the other side. an alias
- * missing from the current side is being added, one missing from the
- * incoming side is being removed.
- */
-function configStatus(alias, value, other, side) {
-    if (!other)
-        return 'unchanged';
-    const match = other.values.find((v) => v.alias === alias);
-    if (!match)
-        return side === 'incoming' ? 'added' : 'removed';
-    return deepEqual(value, match.value) ? 'unchanged' : 'changed';
-}
-function formatConfigValue(value) {
-    return typeof value === 'string' ? value : prettyJson(value);
-}
-export default uSyncDataTypePreviewElement;

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

@@ -1,18 +0,0 @@
-import { type USyncPreviewContentType } from './content-type-layout.js';
-export type USyncPreviewStatus = 'added' | 'removed' | 'changed';
-export interface USyncPreviewItemChange {
-    status: USyncPreviewStatus;
-    /** the fields that differ (for a changed item) */
-    fields: string[];
-}
-export interface USyncContentTypeDiff {
-    /** top level fields (name, icon, compositions...) that differ */
-    fields: Set<string>;
-    properties: Map<string, USyncPreviewItemChange>;
-    containers: Map<string, USyncPreviewItemChange>;
-}
-/**
- * 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 declare function diffContentTypes(current: USyncPreviewContentType | undefined, incoming: USyncPreviewContentType | undefined): USyncContentTypeDiff;

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

@@ -1,72 +0,0 @@
-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

@@ -1,39 +0,0 @@
-import type { DocumentTypeResponseModel, MediaTypeResponseModel, MemberTypeResponseModel } from '../../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

@@ -1,100 +0,0 @@
-/** 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;
-}