@sankhyalabs/ezui 5.19.2 → 5.20.0-dev.10

package/dist/collection/components/ez-split-panel/ez-split-panel.css

@@ -1,8 +1,8 @@
-  :host {
+:host {
+  height: 100%;
+}
 
-  }
-
-  .ez-split-gutter {
-    cursor: grab;
-    background-color: transparent;
-  }
+.ez-split-gutter {
+  cursor: grab;
+  background-color: transparent;
+}

package/dist/collection/components/ez-split-panel/ez-split-panel.js

@@ -1,10 +1,11 @@
-import { h, Host } from "@stencil/core";
+import { StringUtils } from '@sankhyalabs/core';
+import { Host, h } from '@stencil/core';
 import Split from 'split-grid';
-import { StringUtils } from "@sankhyalabs/core";
 export class SplitPanel {
   constructor() {
     this._items = [];
     this.direction = 'column';
+    this.anchorToExpand = false;
   }
   componentDidLoad() {
     this._panelID = StringUtils.generateUUID();
@@ -31,7 +32,7 @@ export class SplitPanel {
   getGutters() {
     const gutters = {
       columnGutters: [],
-      rowGutters: []
+      rowGutters: [],
     };
     if (!this._items.length) {
       return gutters;
@@ -41,19 +42,19 @@ export class SplitPanel {
       if (index == this._items.length - 1)
         return;
       let gutterTrack = item.dataset.trackNumber;
-      if (index === (this._items.length - 1)) {
+      if (index === this._items.length - 1) {
         gutterTrack = this._items.length.toString();
       }
       gutters[proToChange].push({
         track: Number(gutterTrack),
-        element: this._element.querySelector(`ez-split-panel[data-panel-id="${this._panelID}"] > [data-item-track="${item.dataset.trackNumber}"]`)
+        element: this._element.querySelector(`ez-split-panel[data-panel-id="${this._panelID}"] > [data-item-track="${item.dataset.trackNumber}"]`),
       });
     });
     return gutters;
   }
   addItemGutter(item) {
     const gutter = document.createElement('div');
-    gutter.classList.add("ez-split-gutter");
+    gutter.classList.add('ez-split-gutter');
     gutter.classList.add(this.direction);
     gutter.dataset.itemTrack = `${item.dataset.trackNumber}`;
     gutter.dataset.trackNumber = (Number(item.dataset.trackNumber) + 1).toString();
@@ -61,9 +62,10 @@ export class SplitPanel {
   }
   getElementStyle() {
     const style = {
-      'display': "grid",
-      'height': '100%',
-      'width': '100%'
+      display: 'grid',
+      height: '100%',
+      width: '100%',
+      position: this.anchorToExpand ? 'relative' : 'unset',
     };
     return style;
   }
@@ -83,7 +85,7 @@ export class SplitPanel {
     return template;
   }
   render() {
-    return (h(Host, { style: this.getElementStyle() }));
+    return h(Host, { style: this.getElementStyle() });
   }
   static get is() { return "ez-split-panel"; }
   static get originalStyleUrls() {
@@ -115,6 +117,24 @@ export class SplitPanel {
         "attribute": "direction",
         "reflect": false,
         "defaultValue": "'column'"
+      },
+      "anchorToExpand": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Respons\u00E1vel por definir o painel que limita o tamanho do item expandido."
+        },
+        "attribute": "anchor-to-expand",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

package/dist/collection/components/ez-split-panel/structure/item/ez-split-item.css

@@ -1,12 +1,36 @@
-  :host {
-
-  }
-
-  .box_split-item {
-    background-color: var(--background--xlight);
-    padding: var(--space--nano);
-    width: 100%;
-    height: 100%;
-    border-radius: var(--border--radius-medium);
-    box-shadow: var(--shadow);
-  }
+.box_split-item {
+  background-color: var(--background--xlight);
+  padding: var(--space--nano);
+  width: 100%;
+  height: 100%;
+  border-radius: var(--border--radius-medium);
+  box-shadow: var(--shadow);
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+}
+
+.expanded__item {
+  position: absolute;
+  z-index: var(--more-visible);
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.ez-split-item--header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.ez-split-item--header-buttons {
+  display: flex;
+  align-items: center;
+}
+
+.ez-split-item--content {
+  display: block;
+  height: -webkit-fill-available;
+}

package/dist/collection/components/ez-split-panel/structure/item/ez-split-item.js

@@ -1,7 +1,18 @@
-import { h, Host } from "@stencil/core";
+import { h } from '@stencil/core';
 export class SplitItem {
+  constructor() {
+    this.label = undefined;
+    this.enableExpand = true;
+    this._expanded = false;
+  }
+  /**
+   * Alterna a visibilidade do painel.
+   */
+  toggleExpandItem() {
+    this._expanded = !this._expanded;
+  }
   render() {
-    return (h(Host, { class: 'box_split-item' }));
+    return (h("div", { class: `box_split-item ${this._expanded ? 'expanded__item' : ''}`, ref: el => (this._element = el) }, h("div", { class: "ez-split-item--header" }, h("div", null, this.label && (h("div", { class: "ez-margin--small" }, h("h3", { class: " ez-title ez-title--small" }, this.label)))), h("div", { class: "ez-split-item--header-buttons" }, this.enableExpand && (h("ez-button", { size: "medium", mode: "icon", iconName: "expand", class: 'ez-button--tertiary', onClick: () => this.toggleExpandItem(), title: this._expanded ? 'Resumir' : 'Expandir' })), h("slot", { name: "rightButtons" }))), h("div", { class: "ez-split-item--content" }, h("slot", null))));
   }
   static get is() { return "ez-split-item"; }
   static get originalStyleUrls() {
@@ -14,4 +25,48 @@ export class SplitItem {
       "$": ["ez-split-item.css"]
     };
   }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define um t\u00EDtulo para o painel."
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "enableExpand": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o item pode ser expandido"
+        },
+        "attribute": "enable-expand",
+        "reflect": true,
+        "defaultValue": "true"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_expanded": {}
+    };
+  }
 }

package/dist/collection/utils/form/test/DataBinder.test.js

@@ -0,0 +1,9 @@
+import { DataUnit } from "@sankhyalabs/core";
+import DataBinder from "../DataBinder";
+describe('DataBinder', () => {
+  it('constructor', async () => {
+    const du = new DataUnit();
+    const db = new DataBinder(du);
+    expect(db).toBeTruthy();
+  });
+});