@mmlogic/components 0.3.9 → 0.3.11

package/dist/collection/collection-manifest.json

@@ -5,6 +5,7 @@
     "components/mrd-currency-field/mrd-currency-field.js",
     "components/mrd-date-field/mrd-date-field.js",
     "components/mrd-datetime-field/mrd-datetime-field.js",
+    "components/mrd-document-container/mrd-document-container.js",
     "components/mrd-document-view/mrd-document-view.js",
     "components/mrd-email-field/mrd-email-field.js",
     "components/mrd-field/mrd-field.js",

package/dist/collection/components/mrd-document-container/mrd-document-container.js

@@ -0,0 +1,421 @@
+import { Host, h } from "@stencil/core";
+import { t } from "../../utils/i18n";
+/**
+ * Owns a document collection view: a single toolbar (view switch + collection
+ * actions like "New folder", and — later — upload / drag-drop) plus the two
+ * interchangeable bodies, the folder tree (`mrd-document-list`) and the flat
+ * table (`mrd-table`).
+ *
+ * `mrd-layout-section` renders one of these per document VIEW / RELATED_VIEW and
+ * forwards the re-emitted load/navigate/action events to the host. The embedded
+ * table/list keep their `data-view` / `data-doclist` attributes so the host's
+ * existing `setViewPage` / `setViewDistinct` / `setViewAggregations` lookups
+ * (recursive querySelector) still resolve them unchanged.
+ */
+export class MrdDocumentContainer {
+    constructor() {
+        /** The VIEW or RELATED_VIEW layout item (dataClass, fromClass, view config). */
+        this.item = null;
+        /** Parent record id — required for RELATED_VIEW path building. */
+        this.parentId = '';
+        /** Canonical parent href, forwarded to the folder tree for single-container seeding. */
+        this.containerHref = '';
+        /** Lookup key used for the embedded `data-doclist` / `data-view` attributes. */
+        this.viewKey = '';
+        /** Fixed height (px) of the scrolling folder-tree body — the toolbar stays put
+         *  on top, Finder-style. The table manages its own height. */
+        this.height = 460;
+        this.locale = navigator.language;
+        /** Active body: folder tree or flat table. */
+        this.mode = 'tree';
+        /** Whether the folder tree currently has a valid target for "New folder". */
+        this.canCreate = false;
+        /** Whether the currently mounted table has been init()'d. Reset on every mode switch. */
+        this.tableInited = false;
+        this.createFolder = () => {
+            var _a, _b;
+            (_b = (_a = this.listEl) === null || _a === void 0 ? void 0 : _a.createFolder) === null || _b === void 0 ? void 0 : _b.call(_a);
+        };
+    }
+    /** The embedded table does not self-load: like every mrd-table it waits for the
+     *  host to call init() (which emits mrdLoadPage, and — once page 0 lands —
+     *  mrdLoadAggregations). The section only init()s tables mounted at load time, so
+     *  when the user switches to list view we init the freshly mounted table here. */
+    componentDidRender() {
+        var _a;
+        if (this.mode === 'list' && this.tableEl && !this.tableInited) {
+            this.tableInited = true;
+            const table = this.tableEl;
+            Promise.resolve((_a = table.componentOnReady) === null || _a === void 0 ? void 0 : _a.call(table)).then(() => { var _a; return (_a = table.init) === null || _a === void 0 ? void 0 : _a.call(table); });
+        }
+    }
+    setMode(mode) {
+        if (mode === this.mode)
+            return;
+        // The tree remounts on switch and re-emits mrdCanCreate; until then, disable.
+        this.canCreate = false;
+        // The table remounts on switch; re-init it once it is back in the DOM.
+        this.tableInited = false;
+        this.mode = mode;
+    }
+    // ── Toolbar ────────────────────────────────────────────────────────────────
+    renderToolbar() {
+        return (h("div", { class: "mrd-document-container__toolbar" }, this.mode === 'tree' && (h("button", { type: "button", class: "mrd-document-container__action", disabled: !this.canCreate, onClick: this.createFolder }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }), h("path", { d: "M12 11v4M10 13h4" })), t('new_folder', this.locale))), h("div", { class: "mrd-document-container__seg", role: "group", "aria-label": t('doc_view_switch', this.locale) }, h("button", { class: "mrd-document-container__seg-btn", "aria-pressed": String(this.mode === 'tree'), title: t('doc_view_tree', this.locale), "aria-label": t('doc_view_tree', this.locale), onClick: () => this.setMode('tree') }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M3 5h6M3 12h9M3 19h6" }), h("circle", { cx: "18", cy: "5", r: "1.6" }), h("circle", { cx: "18", cy: "19", r: "1.6" }), h("path", { d: "M16 12h4" }))), h("button", { class: "mrd-document-container__seg-btn", "aria-pressed": String(this.mode === 'list'), title: t('doc_view_list', this.locale), "aria-label": t('doc_view_list', this.locale), onClick: () => this.setMode('list') }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01" }))))));
+    }
+    // ── Bodies ───────────────────────────────────────────────────────────────
+    renderTree() {
+        return (h("mrd-document-list", { "data-doclist": this.viewKey, ref: el => (this.listEl = el), item: this.item, archetype: this.archetype, parentId: this.parentId, containerHref: this.containerHref, locale: this.locale, onMrdLoadDistinct: (e) => {
+                e.stopPropagation();
+                this.mrdLoadDistinct.emit(e.detail);
+            }, onMrdLoadPage: (e) => {
+                e.stopPropagation();
+                this.mrdLoadPage.emit(e.detail);
+            }, onMrdNavigate: (e) => {
+                e.stopPropagation();
+                this.mrdNavigate.emit(e.detail);
+            }, onMrdCanCreate: (e) => {
+                e.stopPropagation();
+                this.canCreate = e.detail;
+            }, onMrdUpdateObject: (e) => {
+                e.stopPropagation();
+                this.mrdUpdateObject.emit(e.detail);
+            }, onMrdUpload: (e) => {
+                e.stopPropagation();
+                this.mrdUpload.emit(e.detail);
+            }, onMrdCreateObject: (e) => {
+                e.stopPropagation();
+                this.mrdCreateObject.emit(e.detail);
+            } }));
+    }
+    renderList() {
+        return (h("mrd-table", { "data-view": this.viewKey, ref: el => (this.tableEl = el), item: this.item, parentId: this.parentId, locale: this.locale, onMrdLoadPage: (e) => {
+                e.stopPropagation();
+                this.mrdLoadPage.emit(e.detail);
+            }, onMrdLoadAggregations: (e) => {
+                e.stopPropagation();
+                this.mrdLoadAggregations.emit(e.detail);
+            }, onMrdRowClick: (e) => {
+                var _a, _b, _c;
+                e.stopPropagation();
+                const row = e.detail;
+                this.mrdNavigate.emit({ href: (_b = (_a = row === null || row === void 0 ? void 0 : row._links) === null || _a === void 0 ? void 0 : _a.self) === null || _b === void 0 ? void 0 : _b.href, label: (_c = row === null || row === void 0 ? void 0 : row.name) !== null && _c !== void 0 ? _c : '' });
+            }, onMrdAction: (e) => {
+                e.stopPropagation();
+                this.mrdAction.emit(e.detail);
+            } }));
+    }
+    render() {
+        const treeMode = this.mode === 'tree';
+        return (h(Host, { key: '5d8a9a9bb4f1126a304b796aff9d1cb0100b8fc6' }, this.renderToolbar(), h("div", { key: '80ac7e5dd39ffcc4161059447221045a6e035099', class: "mrd-document-container__body", style: treeMode ? { height: `${this.height}px`, overflowY: 'auto' } : {} }, treeMode ? this.renderTree() : this.renderList())));
+    }
+    static get is() { return "mrd-document-container"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["mrd-document-container.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["mrd-document-container.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "item": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ClientLayoutItem | null",
+                    "resolved": "ClientLayoutItem | null",
+                    "references": {
+                        "ClientLayoutItem": {
+                            "location": "import",
+                            "path": "../../types/client-layout",
+                            "id": "src/types/client-layout.ts::ClientLayoutItem",
+                            "referenceLocation": "ClientLayoutItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The VIEW or RELATED_VIEW layout item (dataClass, fromClass, view config)."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            },
+            "archetype": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ClientArchetype",
+                    "resolved": "ClientArchetype",
+                    "references": {
+                        "ClientArchetype": {
+                            "location": "import",
+                            "path": "../../types/client-layout",
+                            "id": "src/types/client-layout.ts::ClientArchetype",
+                            "referenceLocation": "ClientArchetype"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Resolved `commons.document` archetype binding for the folder tree."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "parentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Parent record id \u2014 required for RELATED_VIEW path building."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "parent-id",
+                "defaultValue": "''"
+            },
+            "containerHref": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Canonical parent href, forwarded to the folder tree for single-container seeding."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "container-href",
+                "defaultValue": "''"
+            },
+            "viewKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Lookup key used for the embedded `data-doclist` / `data-view` attributes."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "view-key",
+                "defaultValue": "''"
+            },
+            "height": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Fixed height (px) of the scrolling folder-tree body \u2014 the toolbar stays put\non top, Finder-style. The table manages its own height."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height",
+                "defaultValue": "460"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "locale",
+                "defaultValue": "navigator.language"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "mode": {},
+            "canCreate": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "mrdLoadPage",
+                "name": "mrdLoadPage",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Re-emitted from the embedded list/table. `nodeId` present for a folder load."
+                },
+                "complexType": {
+                    "original": "{ page: number; sort: string; path: string; qs: string; nodeId?: string }",
+                    "resolved": "{ page: number; sort: string; path: string; qs: string; nodeId?: string | undefined; }",
+                    "references": {}
+                }
+            }, {
+                "method": "mrdLoadDistinct",
+                "name": "mrdLoadDistinct",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Re-emitted from the embedded folder tree."
+                },
+                "complexType": {
+                    "original": "{ nodeId: string; distinct: string; path: string; qs: string }",
+                    "resolved": "{ nodeId: string; distinct: string; path: string; qs: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "mrdLoadAggregations",
+                "name": "mrdLoadAggregations",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Re-emitted from the embedded table."
+                },
+                "complexType": {
+                    "original": "{ path: string; qs: string; aggQs: string }",
+                    "resolved": "{ path: string; qs: string; aggQs: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "mrdNavigate",
+                "name": "mrdNavigate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A row / document was activated. Host routes to the object page."
+                },
+                "complexType": {
+                    "original": "{ href?: string; label: string }",
+                    "resolved": "{ href?: string | undefined; label: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "mrdAction",
+                "name": "mrdAction",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A table toolbar action was triggered."
+                },
+                "complexType": {
+                    "original": "{ action: string; path?: string; qs?: string; parentPath?: string | null; basicType?: string }",
+                    "resolved": "{ action: string; path?: string | undefined; qs?: string | undefined; parentPath?: string | null | undefined; basicType?: string | undefined; }",
+                    "references": {}
+                }
+            }, {
+                "method": "mrdUpdateObject",
+                "name": "mrdUpdateObject",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Generic \"update an existing object\" request, re-emitted from the folder tree\n(a document was dragged into another folder/container)."
+                },
+                "complexType": {
+                    "original": "{ href: string; values: Record<string, unknown> }",
+                    "resolved": "{ href: string; values: Record<string, unknown>; }",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                }
+            }, {
+                "method": "mrdUpload",
+                "name": "mrdUpload",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "An external file was dropped on a folder; host uploads and calls back."
+                },
+                "complexType": {
+                    "original": "{ file: File }",
+                    "resolved": "{ file: File; }",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }, {
+                "method": "mrdCreateObject",
+                "name": "mrdCreateObject",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Create a new document from an uploaded file; host POSTs `values` to `path`."
+                },
+                "complexType": {
+                    "original": "{ path: string; values: Record<string, unknown> }",
+                    "resolved": "{ path: string; values: Record<string, unknown>; }",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/mrd-document-container/mrd-document-container.scss

@@ -0,0 +1,79 @@
+:host {
+  display: block;
+}
+
+.mrd-document-container__toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--mrd-space-2);
+  padding: var(--mrd-space-2) var(--mrd-space-4);
+  border-bottom: 1px solid var(--mrd-color-neutral-100);
+}
+
+.mrd-document-container__action {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mrd-space-2);
+  height: 1.625rem;
+  padding: 0 var(--mrd-space-3);
+  font-size: var(--mrd-font-size-sm);
+  color: var(--mrd-color-neutral-700);
+  background: var(--mrd-color-white);
+  border: 1px solid var(--mrd-color-neutral-200);
+  border-radius: var(--mrd-border-radius);
+  cursor: pointer;
+  transition: background var(--mrd-transition-fast), border-color var(--mrd-transition-fast);
+}
+
+.mrd-document-container__action svg {
+  width: 1rem;
+  height: 1rem;
+  color: #d9a441;
+}
+
+.mrd-document-container__action:hover:not(:disabled) {
+  background: var(--mrd-color-neutral-50);
+  border-color: var(--mrd-color-neutral-300);
+}
+
+.mrd-document-container__action:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.mrd-document-container__seg {
+  display: inline-flex;
+  gap: 2px;
+  padding: 2px;
+  background: var(--mrd-color-neutral-100);
+  border-radius: var(--mrd-border-radius);
+}
+
+.mrd-document-container__seg-btn {
+  width: 1.875rem;
+  height: 1.625rem;
+  display: grid;
+  place-items: center;
+  border: none;
+  background: none;
+  border-radius: var(--mrd-border-radius-sm);
+  color: var(--mrd-color-neutral-500);
+  cursor: pointer;
+  transition: color var(--mrd-transition-fast), background var(--mrd-transition-fast);
+}
+
+.mrd-document-container__seg-btn:hover {
+  color: var(--mrd-color-neutral-800);
+}
+
+.mrd-document-container__seg-btn[aria-pressed='true'] {
+  background: var(--mrd-color-white);
+  color: var(--mrd-color-primary-dark);
+  box-shadow: var(--mrd-shadow-sm);
+}
+
+.mrd-document-container__seg-btn svg {
+  width: 1rem;
+  height: 1rem;
+}