@sme.up/ketchup 6.2.0 → 6.3.0

package/dist/collection/assets/family-tree.js

@@ -13,7 +13,7 @@ const dataStaff = {
                                             children: [],
                                             disabled: false,
                                             expandable: false,
-                                            icon: '/Web/javax.faces.resource/TA%253BB%25C2%25A3AMO%253BLOCEXD.jsf?ln=smeupIcons',
+                                            icon: 'favorite',
                                             isExpanded: false,
                                             obj: {
                                                 k: 'LOCEXD',
@@ -30,7 +30,7 @@ const dataStaff = {
                                             children: [],
                                             disabled: false,
                                             expandable: false,
-                                            icon: '/Web/javax.faces.resource/TA%253BB%25C2%25A3AMO%253BLOCEXD.jsf?ln=smeupIcons',
+                                            icon: 'favorite',
                                             isExpanded: false,
                                             obj: {
                                                 k: 'LOCEXD',
@@ -46,7 +46,7 @@ const dataStaff = {
                                     ],
                                     disabled: false,
                                     expandable: false,
-                                    icon: '/Web/javax.faces.resource/TA%253BB%25C2%25A3AMO%253BLOCEXD.jsf?ln=smeupIcons',
+                                    icon: 'favorite',
                                     id: 'LOCEXD',
                                     isExpanded: false,
                                     obj: {
@@ -83,7 +83,7 @@ const dataStaff = {
                                             children: [],
                                             disabled: false,
                                             expandable: false,
-                                            icon: '/Web/javax.faces.resource/TA%253BB%25C2%25A3AMO%253BLOCEXD.jsf?ln=smeupIcons',
+                                            icon: 'favorite',
                                             isExpanded: false,
                                             obj: {
                                                 k: 'LOCEXD',
@@ -100,7 +100,7 @@ const dataStaff = {
                                             children: [],
                                             disabled: false,
                                             expandable: false,
-                                            icon: '/Web/javax.faces.resource/TA%253BB%25C2%25A3AMO%253BLOCEXD.jsf?ln=smeupIcons',
+                                            icon: 'favorite',
                                             isExpanded: false,
                                             obj: {
                                                 k: 'LOCEXD',
@@ -116,7 +116,7 @@ const dataStaff = {
                                     ],
                                     disabled: false,
                                     expandable: false,
-                                    icon: '/Web/javax.faces.resource/TA%253BB%25C2%25A3AMO%253BLOCEXD.jsf?ln=smeupIcons',
+                                    icon: 'favorite',
                                     isExpanded: false,
                                     obj: {
                                         k: 'LOCEXD',
@@ -132,7 +132,7 @@ const dataStaff = {
                                     children: [],
                                     disabled: false,
                                     expandable: false,
-                                    icon: '/Web/javax.faces.resource/TA%253BB%25C2%25A3AMO%253BLOCTML.jsf?ln=smeupIcons',
+                                    icon: 'favorite',
                                     id: 'LOCTML',
                                     isExpanded: false,
                                     obj: {
@@ -149,7 +149,7 @@ const dataStaff = {
                                     children: [],
                                     disabled: false,
                                     expandable: false,
-                                    icon: '/Web/javax.faces.resource/TA%253BB%25C2%25A3AMO%253BLOCEXD.jsf?ln=smeupIcons',
+                                    icon: 'favorite',
                                     isExpanded: false,
                                     obj: {
                                         k: 'LOCEXD',
@@ -166,7 +166,7 @@ const dataStaff = {
                                     children: [],
                                     disabled: false,
                                     expandable: false,
-                                    icon: '/Web/javax.faces.resource/TA%253BB%25C2%25A3AMO%253BLOCEXD.jsf?ln=smeupIcons',
+                                    icon: 'favorite',
                                     isExpanded: false,
                                     obj: {
                                         k: 'LOCEXD',
@@ -183,7 +183,7 @@ const dataStaff = {
                                     children: [],
                                     disabled: false,
                                     expandable: false,
-                                    icon: '/Web/javax.faces.resource/TA%253BB%25C2%25A3AMO%253BLOCEXD.jsf?ln=smeupIcons',
+                                    icon: 'favorite',
                                     isExpanded: false,
                                     obj: {
                                         k: 'LOCEXD',
@@ -216,7 +216,7 @@ const dataStaff = {
                             children: [],
                             disabled: false,
                             expandable: false,
-                            icon: '/Web/javax.faces.resource/TA%253BB%25C2%25A3AMO%253BLOCEXD.jsf?ln=smeupIcons',
+                            icon: 'favorite',
                             isExpanded: false,
                             obj: {
                                 k: 'LOCEXD',
@@ -233,7 +233,7 @@ const dataStaff = {
                             children: [],
                             disabled: false,
                             expandable: false,
-                            icon: '/Web/javax.faces.resource/TA%253BB%25C2%25A3AMO%253BLOCEXD.jsf?ln=smeupIcons',
+                            icon: 'favorite',
                             isExpanded: false,
                             obj: {
                                 k: 'LOCEXD',
@@ -270,7 +270,7 @@ const dataStaff = {
                                     children: [],
                                     disabled: false,
                                     expandable: false,
-                                    icon: '/Web/javax.faces.resource/TA%253BB%25C2%25A3AMO%253BLOCTML.jsf?ln=smeupIcons',
+                                    icon: 'favorite',
                                     id: 'LOCTML',
                                     isExpanded: false,
                                     obj: {
@@ -287,7 +287,7 @@ const dataStaff = {
                                     children: [],
                                     disabled: false,
                                     expandable: false,
-                                    icon: '/Web/javax.faces.resource/TA%253BB%25C2%25A3AMO%253BLOCEXD.jsf?ln=smeupIcons',
+                                    icon: 'favorite',
                                     isExpanded: false,
                                     obj: {
                                         k: 'LOCEXD',
@@ -304,7 +304,7 @@ const dataStaff = {
                                     children: [],
                                     disabled: false,
                                     expandable: false,
-                                    icon: '/Web/javax.faces.resource/TA%253BB%25C2%25A3AMO%253BLOCEXD.jsf?ln=smeupIcons',
+                                    icon: 'favorite',
                                     isExpanded: false,
                                     obj: {
                                         k: 'LOCEXD',
@@ -321,7 +321,7 @@ const dataStaff = {
                                     children: [],
                                     disabled: false,
                                     expandable: false,
-                                    icon: '/Web/javax.faces.resource/TA%253BB%25C2%25A3AMO%253BLOCTML.jsf?ln=smeupIcons',
+                                    icon: 'favorite',
                                     isExpanded: false,
                                     obj: {
                                         k: 'LOCTML',
@@ -369,7 +369,7 @@ const dataStaff = {
                     children: [],
                     disabled: false,
                     expandable: false,
-                    icon: '/Web/javax.faces.resource/TA%253BB%25C2%25A3AMO%253BLOCEXD.jsf?ln=smeupIcons',
+                    icon: 'favorite',
                     isExpanded: false,
                     obj: {
                         k: 'LOCEXD',
@@ -386,7 +386,7 @@ const dataStaff = {
                     children: [],
                     disabled: false,
                     expandable: false,
-                    icon: '/Web/javax.faces.resource/TA%253BB%25C2%25A3AMO%253BLOCEXD.jsf?ln=smeupIcons',
+                    icon: 'favorite',
                     isExpanded: false,
                     obj: {
                         k: 'LOCEXD',
@@ -419,7 +419,7 @@ const dataStaff = {
             ],
             disabled: false,
             expandable: true,
-            icon: '/Web/javax.faces.resource/TA%253BB%25C2%25A3A%253BD0.jsf?ln=smeupIcons',
+            icon: 'account',
             id: 'D0',
             isExpanded: false,
             obj: {
@@ -2385,6 +2385,218 @@ const dataLayout = {
     ],
 };
 
+const dataStacked = {
+    columns: [],
+    rows: [
+        {
+            children: [
+                {
+                    children: [
+                        {
+                            children: [
+                                {
+                                    disabled: false,
+                                    expandable: false,
+                                    icon: 'favorite',
+                                    id: 'LOCEXD',
+                                    isExpanded: false,
+                                    obj: {
+                                        k: 'LOCEXD',
+                                        p: 'B£AMO',
+                                        t: 'TA',
+                                    },
+                                    options: true,
+                                    style: {},
+                                    value: 'Scheda oggetto',
+                                    visible: true,
+                                },
+                            ],
+                            disabled: false,
+                            expandable: true,
+                            icon: 'table-large',
+                            id: 'FOS',
+                            isExpanded: true,
+                            obj: {
+                                k: 'FOS',
+                                p: 'BRE',
+                                t: 'TA',
+                            },
+                            options: true,
+                            style: {},
+                            value: 'FOR Debiti operaz. societ.',
+                            visible: true,
+                        },
+                        {
+                            children: [
+                                {
+                                    disabled: false,
+                                    expandable: false,
+                                    icon: 'favorite',
+                                    isExpanded: false,
+                                    obj: {
+                                        k: 'LOCEXD',
+                                        p: 'B£AMO',
+                                        t: 'TA',
+                                    },
+                                    options: true,
+                                    style: {},
+                                    value: 'Scheda oggetto',
+                                    visible: true,
+                                },
+                                {
+                                    children: [],
+                                    disabled: false,
+                                    expandable: false,
+                                    icon: 'favorite',
+                                    id: 'LOCTML',
+                                    isExpanded: false,
+                                    obj: {
+                                        k: 'LOCTML',
+                                        p: 'B£AMO',
+                                        t: 'TA',
+                                    },
+                                    options: true,
+                                    style: {},
+                                    value: 'Timeline',
+                                    visible: true,
+                                },
+                            ],
+                            disabled: false,
+                            expandable: true,
+                            icon: 'table-large',
+                            id: 'FOS',
+                            isExpanded: true,
+                            obj: {
+                                k: 'FOS',
+                                p: 'BRE',
+                                t: 'TA',
+                            },
+                            options: true,
+                            style: {},
+                            value: 'FOR Debiti operaz. societ.',
+                            visible: true,
+                        },
+                        {
+                            children: [],
+                            disabled: false,
+                            expandable: false,
+                            icon: 'table-large',
+                            id: 'AGE',
+                            isExpanded: false,
+                            isWeird: true,
+                            obj: {
+                                k: 'AGE',
+                                p: 'BRE',
+                                t: 'TA',
+                            },
+                            options: true,
+                            style: {},
+                            value: 'Agente',
+                            visible: true,
+                        },
+                        {
+                            children: [
+                                {
+                                    children: [],
+                                    disabled: false,
+                                    expandable: false,
+                                    icon: 'favorite',
+                                    id: 'LOCTML',
+                                    isExpanded: false,
+                                    obj: {
+                                        k: 'LOCTML',
+                                        p: 'B£AMO',
+                                        t: 'TA',
+                                    },
+                                    options: true,
+                                    style: {},
+                                    value: 'Timeline',
+                                    visible: true,
+                                },
+                                {
+                                    children: [],
+                                    disabled: false,
+                                    expandable: false,
+                                    icon: 'favorite',
+                                    isExpanded: false,
+                                    obj: {
+                                        k: 'LOCTML',
+                                        p: 'B£AMO',
+                                        t: 'TA',
+                                    },
+                                    options: true,
+                                    style: {},
+                                    value: 'Timeline',
+                                    visible: true,
+                                },
+                            ],
+                            disabled: false,
+                            expandable: true,
+                            icon: 'table-large',
+                            id: 'BAN',
+                            isExpanded: true,
+                            obj: {
+                                k: 'BAN',
+                                p: 'BRE',
+                                t: 'TA',
+                            },
+                            options: true,
+                            style: {},
+                            value: 'Banche',
+                            visible: true,
+                        },
+                    ],
+                    disabled: false,
+                    expandable: true,
+                    icon: 'table-large',
+                    id: '03',
+                    isExpanded: true,
+                    obj: {
+                        k: '03',
+                        p: 'V§R',
+                        t: 'TA',
+                    },
+                    options: true,
+                    style: {},
+                    value: 'Lombardia',
+                    visible: true,
+                },
+                {
+                    children: [],
+                    disabled: false,
+                    expandable: false,
+                    icon: 'table-large',
+                    id: '14',
+                    isExpanded: false,
+                    obj: {
+                        k: '14',
+                        p: 'V§R',
+                        t: 'TA',
+                    },
+                    options: true,
+                    style: {},
+                    value: 'Molise',
+                    visible: true,
+                },
+            ],
+            disabled: false,
+            expandable: true,
+            icon: 'favorite',
+            id: 'D0',
+            isExpanded: true,
+            obj: {
+                k: 'D0',
+                p: 'B£A',
+                t: 'TA',
+            },
+            options: true,
+            style: {},
+            value: 'AcosUP Costi Avanzati',
+            visible: true,
+        },
+    ],
+};
+
 const layout = {
     horizontal: true,
     sections: [
@@ -2422,9 +2634,14 @@ const layout = {
 
 const familyTreeLayout = document.getElementById('layout');
 const familyTreeStaff = document.getElementById('staff');
+const familyTreeStacked = document.getElementById('stacked');
 familyTreeLayout.data = dataLayout;
 familyTreeLayout.layout = layout;
 familyTreeStaff.data = dataStaff;
+familyTreeStaff.layout = 2;
+familyTreeStacked.data = dataStacked;
+familyTreeStacked.collapsible = false;
+familyTreeStacked.stackedLeaves = true;
 
 document.addEventListener('kup-familytree-click', (e) => {
     console.log(e);

package/dist/collection/assets/index.js

@@ -126,6 +126,10 @@ components.data = [
         value: 'KupData',
         id: 'kupdata.html',
     },
+    {
+        value: 'KupInteract',
+        id: 'kupinteract.html',
+    },
     {
         value: 'KupTooltip',
         id: 'kuptooltip.html',

package/dist/collection/assets/kupinteract.js

@@ -0,0 +1,68 @@
+const items = document.querySelectorAll('.item');
+const wrapper = document.querySelector('#wrapper');
+
+const initialize = () => {
+    kupManager.interact.dropzone(
+        wrapper,
+        null,
+        {
+            dispatcher: wrapper,
+            type: 'text/generic',
+        },
+        {
+            drop: (e) => {
+                let delta = null;
+                let el = null;
+                items.forEach((item) => {
+                    const rect = item.getBoundingClientRect();
+                    let tempDelta = e.dragEvent.client.y - rect.y;
+                    if (tempDelta < 0) {
+                        tempDelta = tempDelta * -1;
+                    }
+                    if (delta === null || tempDelta < delta) {
+                        delta = tempDelta;
+                        el = item;
+                    }
+                });
+                if (!el || e.relatedTarget === el) {
+                    console.log('Not moved.');
+                } else {
+                    console.log(
+                        'Moved to position ' + el.id + '. (delta ' + delta + ')'
+                    );
+                    e.relatedTarget.remove();
+                    wrapper.insertBefore(e.relatedTarget, el);
+                }
+            },
+        }
+    );
+    for (let index = 0; index < items.length; index++) {
+        const item = items[index];
+        const randomColor = kupManager.theme.randomColor(50);
+        item.style.backgroundColor = randomColor;
+        item.style.color = kupManager.theme.colorContrast(randomColor);
+        const handleEl = item.querySelector('.handle');
+        kupManager.interact.draggable(
+            item,
+            {
+                allowFrom: handleEl ? handleEl : null,
+            },
+            null,
+            'clone',
+            {
+                end: () => {
+                    kupManager.scrollOnHover.stop(wrapper);
+                    kupManager.scrollOnHover.unregister(wrapper);
+                },
+                start: () => {
+                    kupManager.scrollOnHover.register(wrapper, true, {
+                        back: 0.3,
+                        forward: 0.7,
+                    });
+                },
+            }
+        );
+    }
+};
+
+document.addEventListener('kup-manager-ready', initialize);

package/dist/collection/collection-manifest.json

@@ -1,13 +1,13 @@
 {
   "entries": [
+    "./components/kup-text-field/kup-text-field.js",
+    "./components/kup-chart/kup-chart.js",
+    "./components/kup-tree/kup-tree.js",
+    "./components/kup-data-table/kup-data-table.js",
     "./components/kup-card/kup-card.js",
     "./components/kup-badge/kup-badge.js",
     "./components/kup-accordion/kup-accordion.js",
     "./components/kup-autocomplete/kup-autocomplete.js",
-    "./components/kup-chart/kup-chart.js",
-    "./components/kup-tree/kup-tree.js",
-    "./components/kup-text-field/kup-text-field.js",
-    "./components/kup-data-table/kup-data-table.js",
     "./components/kup-box/kup-box.js",
     "./components/kup-button/kup-button.js",
     "./components/kup-button-list/kup-button-list.js",
@@ -50,7 +50,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.17.0",
+    "version": "2.17.3",
     "typescriptVersion": "4.5.4"
   },
   "collections": [],

package/dist/collection/components/kup-dashboard/kup-dashboard.css

@@ -25,6 +25,7 @@
   padding: 1em;
   grid-gap: 0.5em;
   border: 1px solid var(--kup-primary-color);
+  height: auto;
 }
 
 .section {
@@ -64,6 +65,12 @@
   padding: 1em;
 }
 
+.section-placeholder {
+  background-color: rgba(var(--kup-secondary-color-rgb), 0.5);
+  min-height: 1em;
+  min-width: 1em;
+}
+
 .component {
   height: fit-content;
   padding: 1em;

package/dist/collection/components/kup-dashboard/kup-dashboard.js

@@ -142,6 +142,7 @@ export class KupDashboard {
       onChange: (e) => {
         const { target } = e;
         section.dim = target.value;
+        this.refresh();
       },
     };
     const addButtonProp = {
@@ -227,6 +228,25 @@ export class KupDashboard {
           ? section.sections.map((childSection) => this.buildSection(childSection, section))
           : undefined)));
   }
+  calcSectionPosition(pointerY, pointerX, vertical, sectionCount, elements) {
+    let idx = sectionCount;
+    for (let index = 0; index < elements.length; index++) {
+      const element = elements[index];
+      const srect = element.getBoundingClientRect();
+      if (vertical && pointerY < srect.y) {
+        idx = index;
+        break;
+      }
+      else if (!vertical && pointerX < srect.x) {
+        idx = index;
+        break;
+      }
+    }
+    //console.log(
+    //    `pointer: ${pointerX}:${pointerY} - vertical: ${vertical} - index: ${idx}`
+    //);
+    return idx;
+  }
   didRenderInteractables() {
     try {
       const items = [];
@@ -249,9 +269,17 @@ export class KupDashboard {
         .querySelectorAll('.form-dropzone')
         .forEach((x) => items.push(x));
       items.forEach((item) => {
-        this.kupManager.interact.dropzone(item, null, null, {
+        this.kupManager.interact.dropzone(item, {
+          ondropdeactivate: () => {
+            this.removeSectionPlaceHolder();
+          },
+          ondropmove: (ev) => {
+            this.removeSectionPlaceHolder();
+            this.dragEnter(ev.dragEvent.clientY, ev.dragEvent.clientX, ev.currentTarget);
+          },
+        }, null, {
           drop: (ev) => {
-            this.dropped(ev.currentTarget, ev.relatedTarget);
+            this.dropped(ev, ev.currentTarget, ev.relatedTarget);
           },
         });
       });
@@ -260,14 +288,33 @@ export class KupDashboard {
       this.kupManager.debug.logMessage(this, error, KupDebugCategory.ERROR);
     }
   }
-  dropped(parent, child) {
+  dragEnter(clientY, clientX, parent) {
+    if (parent.kupData.form) {
+      // form is the target of drop.
+      // calculate a new position for the section.
+      const nidx = this.calcSectionPosition(clientY, clientX, parent.kupData.form.layout == 'column', parent.kupData.form.sections.length, parent.children);
+      // set placeholder into target area.
+      this.setSectionPlaceHolder(parent, nidx);
+    }
+    else if (parent.kupData.section) {
+      // section is the target of drop.
+      // calculate a new position for the section.
+      const nidx = this.calcSectionPosition(clientY, clientX, parent.kupData.section.layout == 'column', parent.kupData.section.sections.length, parent.lastElementChild.children);
+      // set placeholder into target area.
+      this.setSectionPlaceHolder(parent.lastElementChild, nidx);
+    }
+  }
+  dropped(event, parent, child) {
     const idx = child.kupData.parent.sections.indexOf(child.kupData.section);
     child.kupData.parent.sections.splice(idx, 1);
     if (parent.kupData.form) {
       // form is the target of drop.
       if (!parent.kupData.form.sections)
         parent.kupData.form.sections = [];
-      parent.kupData.form.sections.push(child.kupData.section);
+      // calculate a new position for the section.
+      const nidx = this.calcSectionPosition(event.dragEvent.clientY, event.dragEvent.clientX, parent.kupData.form.layout == 'column', parent.kupData.form.sections.length, parent.children);
+      // set the section in 'nidx' position.
+      parent.kupData.form.sections.splice(nidx, 0, child.kupData.section);
       child.kupData.parent = parent.kupData.form;
     }
     else if (parent.kupData.section) {
@@ -282,17 +329,20 @@ export class KupDashboard {
         parent.kupData.section.sections = [];
         parent.kupData.section.sections.push(newSec);
       }
-      parent.kupData.section.sections.push(child.kupData.section);
+      // calculate a new position for the section.
+      const nidx = this.calcSectionPosition(event.dragEvent.clientY, event.dragEvent.clientX, parent.kupData.section.layout == 'column', parent.kupData.section.sections.length, parent.lastElementChild.children);
+      // set the section in 'nidx' position.
+      parent.kupData.section.sections.splice(nidx, 0, child.kupData.section);
       child.kupData.parent = parent.kupData.section;
     }
     this.resetData(this.internalData);
   }
   getGridStyle(entity) {
     let bodyStyles = {};
-    if (!this.enableDesign && entity.sections) {
+    if (entity.sections) {
       let gridTemplate = '';
       entity.sections.forEach((childSection) => {
-        if (!childSection.dim)
+        if (this.enableDesign || !childSection.dim)
           gridTemplate += ' 1fr';
         else
           gridTemplate +=
@@ -307,6 +357,16 @@ export class KupDashboard {
     }
     return bodyStyles;
   }
+  setSectionPlaceHolder(element, index) {
+    const ph = document.createElement('div');
+    ph.className = 'section-placeholder';
+    element.insertBefore(ph, element.childNodes[index]);
+  }
+  removeSectionPlaceHolder() {
+    const ph = this.rootElement.shadowRoot.querySelector('.section-placeholder');
+    if (ph)
+      ph.parentElement.removeChild(ph);
+  }
   resetData(form = null) {
     if (form)
       this.internalDataBackup = form;