@mmlogic/components 0.3.10 → 0.4.0

package/dist/collection/collection-manifest.json

@@ -1,28 +1,28 @@
 {
   "entries": [
-    "components/mrd-document-list/mrd-document-list.js",
-    "components/mrd-boolean-field/mrd-boolean-field.js",
-    "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",
-    "components/mrd-file-field/mrd-file-field.js",
-    "components/mrd-form/mrd-form.js",
-    "components/mrd-hyperlink-field/mrd-hyperlink-field.js",
-    "components/mrd-image-field/mrd-image-field.js",
-    "components/mrd-layout-section/mrd-layout-section.js",
-    "components/mrd-list-field/mrd-list-field.js",
-    "components/mrd-longtext-field/mrd-longtext-field.js",
-    "components/mrd-number-field/mrd-number-field.js",
-    "components/mrd-relation-field/mrd-relation-field.js",
-    "components/mrd-secret-field/mrd-secret-field.js",
-    "components/mrd-table/mrd-table.js",
-    "components/mrd-text-field/mrd-text-field.js",
-    "components/mrd-textarea-field/mrd-textarea-field.js",
-    "components/mrd-time-field/mrd-time-field.js"
+    "components/documents/mrd-document-container/mrd-document-container.js",
+    "components/documents/mrd-document-list/mrd-document-list.js",
+    "components/documents/mrd-document-view/mrd-document-view.js",
+    "components/fields/mrd-boolean-field/mrd-boolean-field.js",
+    "components/fields/mrd-currency-field/mrd-currency-field.js",
+    "components/fields/mrd-date-field/mrd-date-field.js",
+    "components/fields/mrd-datetime-field/mrd-datetime-field.js",
+    "components/fields/mrd-email-field/mrd-email-field.js",
+    "components/fields/mrd-file-field/mrd-file-field.js",
+    "components/fields/mrd-hyperlink-field/mrd-hyperlink-field.js",
+    "components/fields/mrd-image-field/mrd-image-field.js",
+    "components/fields/mrd-list-field/mrd-list-field.js",
+    "components/fields/mrd-longtext-field/mrd-longtext-field.js",
+    "components/fields/mrd-number-field/mrd-number-field.js",
+    "components/fields/mrd-relation-field/mrd-relation-field.js",
+    "components/fields/mrd-secret-field/mrd-secret-field.js",
+    "components/fields/mrd-text-field/mrd-text-field.js",
+    "components/fields/mrd-textarea-field/mrd-textarea-field.js",
+    "components/fields/mrd-time-field/mrd-time-field.js",
+    "components/form/mrd-field/mrd-field.js",
+    "components/form/mrd-form/mrd-form.js",
+    "components/layout/mrd-layout-section/mrd-layout-section.js",
+    "components/table/mrd-table/mrd-table.js"
   ],
   "mixins": [],
   "compiler": {

package/dist/collection/components/{mrd-document-container/mrd-document-container.scss → documents/mrd-document-container/mrd-document-container.css}

@@ -29,7 +29,7 @@
 .mrd-document-container__action svg {
   width: 1rem;
   height: 1rem;
-  color: #d9a441;
+  color: var(--mrd-color-folder);
 }
 
 .mrd-document-container__action:hover:not(:disabled) {
@@ -67,7 +67,7 @@
   color: var(--mrd-color-neutral-800);
 }
 
-.mrd-document-container__seg-btn[aria-pressed='true'] {
+.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);
@@ -76,4 +76,4 @@
 .mrd-document-container__seg-btn svg {
   width: 1rem;
   height: 1rem;
-}
+}

package/dist/collection/components/{mrd-document-container → documents/mrd-document-container}/mrd-document-container.js

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { t } from "../../utils/i18n";
+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
@@ -18,8 +18,13 @@ export class MrdDocumentContainer {
         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';
@@ -28,8 +33,8 @@ export class MrdDocumentContainer {
         /** 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);
+            var _a;
+            (_a = this.listEl) === null || _a === void 0 ? void 0 : _a.createFolder();
         };
     }
     /** The embedded table does not self-load: like every mrd-table it waits for the
@@ -41,7 +46,7 @@ export class MrdDocumentContainer {
         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); });
+            Promise.resolve((_a = table.componentOnReady) === null || _a === void 0 ? void 0 : _a.call(table)).then(() => table.init());
         }
     }
     setMode(mode) {
@@ -59,7 +64,7 @@ export class MrdDocumentContainer {
     }
     // ── 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, locale: this.locale, onMrdLoadDistinct: (e) => {
+        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) => {
@@ -100,7 +105,8 @@ export class MrdDocumentContainer {
             } }));
     }
     render() {
-        return (h(Host, { key: 'a5393d484bdc202b57c6d32d9ce917e760aff95a' }, this.renderToolbar(), h("div", { key: '52f82de8f7734e13f34d323e3e831e6de5676f46', class: "mrd-document-container__body" }, this.mode === 'tree' ? this.renderTree() : this.renderList())));
+        const treeMode = this.mode === 'tree';
+        return (h(Host, { key: '018c9eacd169fdf7d352a51472651348af2b45df' }, this.renderToolbar(), h("div", { key: '5ff2ac77d4d12369905696ff075f99785dc1c809', 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"; }
@@ -125,7 +131,7 @@ export class MrdDocumentContainer {
                     "references": {
                         "ClientLayoutItem": {
                             "location": "import",
-                            "path": "../../types/client-layout",
+                            "path": "../../../types/client-layout",
                             "id": "src/types/client-layout.ts::ClientLayoutItem",
                             "referenceLocation": "ClientLayoutItem"
                         }
@@ -150,7 +156,7 @@ export class MrdDocumentContainer {
                     "references": {
                         "ClientArchetype": {
                             "location": "import",
-                            "path": "../../types/client-layout",
+                            "path": "../../../types/client-layout",
                             "id": "src/types/client-layout.ts::ClientArchetype",
                             "referenceLocation": "ClientArchetype"
                         }
@@ -185,6 +191,26 @@ export class MrdDocumentContainer {
                 "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,
@@ -205,6 +231,26 @@ export class MrdDocumentContainer {
                 "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,

package/dist/collection/components/documents/mrd-document-list/folder-tree.js

@@ -0,0 +1,109 @@
+/**
+ * Tree model and pure tree logic for mrd-document-list.
+ * Nodes are mutated in place; the component triggers re-renders via bump().
+ */
+/** Normalise a folder path: null/""/"/" → root ([]); else split on "/" dropping empties. */
+export function splitFolder(path) {
+    if (path == null)
+        return [];
+    const s = String(path).trim();
+    if (s === '' || s === '/')
+        return [];
+    return s.split('/').map(x => x.trim()).filter(Boolean);
+}
+export function makeContainerNode(href, label, count) {
+    return {
+        id: 'c:' + href, kind: 'container', label, href,
+        hasDocs: false, docCount: 0, totalCount: count, children: [],
+        open: false, loading: false, foldersLoaded: false, docsLoaded: false, docs: [],
+    };
+}
+export function makeFolderNode(id, label, containerId) {
+    return {
+        id, kind: 'folder', label, containerId,
+        hasDocs: false, docCount: 0, totalCount: 0, children: [],
+        open: false, loading: false, foldersLoaded: false, docsLoaded: false, docs: [],
+    };
+}
+/** Recompute totalCount over the subtree; returns the node's aggregate. */
+export function computeTotals(node) {
+    let total = node.docCount;
+    for (const c of node.children)
+        total += computeTotals(c);
+    node.totalCount = total;
+    return total;
+}
+/** Folder path segments of a node relative to its container (derived from its id). */
+export function segmentsOf(node, container) {
+    if (node.kind === 'container')
+        return [];
+    const prefix = container.id + '/';
+    const rest = node.id.startsWith(prefix) ? node.id.slice(prefix.length) : '';
+    return rest ? rest.split('/') : [];
+}
+/** Folder string a node represents: the raw distinct value when it holds
+ *  documents, else derived from its path segments; null for a container root. */
+export function folderStringOf(node, container) {
+    if (node.kind === 'container')
+        return null;
+    if (node.fullPath != null && node.fullPath !== '')
+        return node.fullPath;
+    const segs = segmentsOf(node, container);
+    return segs.length ? '/' + segs.join('/') : null;
+}
+/** Strip a single trailing extension for the document title. */
+export function stripExtension(name) {
+    return name.replace(/\.[^./\\]+$/, '');
+}
+/** Rebuild a container's folder subtree from the /distinct folder strings.
+ *  New nodes are registered in `nodeIndex`; the container is mutated in place. */
+export function applyFolderDistinct(container, values, nodeIndex) {
+    container.children = [];
+    container.hasDocs = false;
+    container.docCount = 0;
+    for (const v of values) {
+        const raw = typeof v.value === 'string' ? v.value : v.value == null ? '' : String(v.value);
+        const segs = splitFolder(raw);
+        if (segs.length === 0) {
+            // Root documents — the container's own direct documents.
+            container.hasDocs = true;
+            container.docCount = v.count;
+            container.fullPath = raw;
+            continue;
+        }
+        let node = container;
+        const acc = [];
+        for (const seg of segs) {
+            acc.push(seg);
+            let child = node.children.find(c => c.label === seg);
+            if (!child) {
+                child = makeFolderNode(container.id + '/' + acc.join('/'), seg, container.id);
+                node.children.push(child);
+                nodeIndex.set(child.id, child);
+            }
+            node = child;
+        }
+        node.hasDocs = true;
+        node.docCount = v.count;
+        node.fullPath = raw;
+    }
+    computeTotals(container);
+    container.foldersLoaded = true;
+    container.loading = false;
+}
+/** Optimistic in-place tree update for a document moved between folders. */
+export function applyDocMove(doc, fromNode, toNode, targetFolder) {
+    fromNode.docs = fromNode.docs.filter(d => d !== doc);
+    fromNode.docCount = Math.max(0, fromNode.docCount - 1);
+    // A now-empty folder should stop showing an expand chevron (it disappears on
+    // the next reload anyway, since it is derived from document folder strings).
+    if (fromNode.docsLoaded)
+        fromNode.hasDocs = fromNode.docs.length > 0;
+    toNode.hasDocs = true;
+    toNode.pending = false; // a pending folder is now materialised
+    toNode.docCount += 1;
+    if (toNode.kind === 'folder')
+        toNode.fullPath = targetFolder !== null && targetFolder !== void 0 ? targetFolder : '';
+    if (toNode.docsLoaded)
+        toNode.docs = [...toNode.docs, doc];
+}

package/dist/collection/components/{mrd-document-list/mrd-document-list.scss → documents/mrd-document-list/mrd-document-list.css}

@@ -1,9 +1,21 @@
+@charset "UTF-8";
 :host {
   display: block;
+  height: 100%;
 }
 
 .mrd-document-list {
   padding: var(--mrd-space-2) 0;
+  min-height: 100%;
+  box-sizing: border-box;
+}
+
+/* Whole-area highlight while a file/document is dragged over the root (dossier
+   context) — makes the drop target obvious, Finder-style. */
+.mrd-document-list--drop-active {
+  outline: 2px dashed var(--mrd-color-primary);
+  outline-offset: -4px;
+  background: var(--mrd-color-primary-50, rgba(22, 163, 74, 0.06));
 }
 
 .mrd-document-list__row {
@@ -119,7 +131,7 @@
 }
 
 .mrd-document-list__icon--folder {
-  color: #d9a441;
+  color: var(--mrd-color-folder);
 }
 
 .mrd-document-list__icon--doc {
@@ -170,12 +182,13 @@
 }
 
 @keyframes mrd-document-list-spin {
-  to { transform: rotate(360deg); }
+  to {
+    transform: rotate(360deg);
+  }
 }
-
 .mrd-document-list__empty {
   padding: var(--mrd-space-8) var(--mrd-space-4);
   text-align: center;
   color: var(--mrd-color-neutral-400);
   font-size: var(--mrd-font-size-sm);
-}
+}