@sankhyalabs/ezui 2.10.1 → 2.12.0

package/dist/collection/components/ez-tree/ez-tree.js

@@ -1,12 +1,15 @@
 import { ElementIDUtils } from '@sankhyalabs/core';
 import { Component, Element, Event, forceUpdate, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';
-import { defaultIconResolver } from './subcomponents';
+import { defaultIconResolver, defaultTooltipResolver } from './subcomponents';
 import { TreeItem } from './subcomponents/TreeItem';
 import { Tree } from './types/Tree';
 export class EzTree {
   constructor() {
     this._tree = new Tree(() => forceUpdate(this));
     this._onItemClick = (item) => {
+      this.value = item;
+    };
+    this._onIconClick = (item) => {
       this.openClose(item);
       this.value = item;
     };
@@ -18,6 +21,10 @@ export class EzTree {
      * Define uma função que vai resolver o ícone daquele item. Retorna o nome do ícone da lib de icones do DS.
      */
     this.iconResolver = defaultIconResolver;
+    /**
+     * Define uma função que vai resolver o `tooltip` ou `title` daquele item.
+     */
+    this.tooltipResolver = defaultTooltipResolver;
   }
   /**
    * Efetua a seleção de um item.
@@ -77,7 +84,9 @@ export class EzTree {
     this._tree.load(this.items);
   }
   observeValue() {
+    var _a;
     this.ezChange.emit(this.value);
+    this.selectedId = (_a = this.value) === null || _a === void 0 ? void 0 : _a.id;
   }
   onKeyDownListener(event) {
     if (!this.value) {
@@ -120,7 +129,7 @@ export class EzTree {
     if (expanded) {
       this.ezOpenItem.emit(item);
     }
-    forceUpdate(this);
+    this._tree.updateItem(item);
   }
   previousLevel() {
     var _a;
@@ -129,7 +138,7 @@ export class EzTree {
     }
     if (this.value.expanded) {
       this.value.expanded = false;
-      forceUpdate(this);
+      this._tree.updateItem(this.value);
     }
     else {
       const node = this._tree.getNode(this.value.id);
@@ -152,19 +161,50 @@ export class EzTree {
     }
     else {
       this.value.expanded = true;
-      forceUpdate(this);
+      this._tree.updateItem(this.value);
     }
   }
-  nextItem() {
-    const nextIndex = this._visibleItems.indexOf(this.value) + 1;
-    if (nextIndex < this._visibleItems.length) {
+  indexOf(id) {
+    if (id == undefined) {
+      return -1;
+    }
+    for (let i = 0; i < this._visibleItems.length; i++) {
+      const item = this._visibleItems[i];
+      if (item.id === id) {
+        return i;
+      }
+    }
+    return -1;
+  }
+  selectNextItem(indexIncrement) {
+    var _a;
+    const nextIndex = this.indexOf((_a = this.value) === null || _a === void 0 ? void 0 : _a.id) + indexIncrement;
+    if (nextIndex > -1 && nextIndex < this._visibleItems.length) {
       this.value = this._visibleItems[nextIndex];
     }
   }
+  nextItem() {
+    this.selectNextItem(1);
+  }
   previousItem() {
-    const nextIndex = this._visibleItems.indexOf(this.value) - 1;
-    if (nextIndex > -1) {
-      this.value = this._visibleItems[nextIndex];
+    this.selectNextItem(-1);
+  }
+  connectedCallback() {
+    if (this.items) {
+      this._tree.load(this.items);
+    }
+  }
+  componentWillRender() {
+    var _a;
+    if (!this.selectedId || ((_a = this.value) === null || _a === void 0 ? void 0 : _a.id) === this.selectedId) {
+      return;
+    }
+    const node = this._tree.getNode(this.selectedId);
+    if (node) {
+      this.value = node.item;
+    }
+    else {
+      this.selectedId = undefined;
     }
   }
   render() {
@@ -178,7 +218,7 @@ export class EzTree {
       :
         this._tree.getChildren().map(node => {
           var _a;
-          return h(TreeItem, { selectedId: (_a = this.value) === null || _a === void 0 ? void 0 : _a.id, node: node, itemClick: this._onItemClick, iconResolver: this.iconResolver, itemsList: this._visibleItems });
+          return h(TreeItem, { selectedId: (_a = this.value) === null || _a === void 0 ? void 0 : _a.id, node: node, itemClick: this._onItemClick, iconClick: this._onIconClick, iconResolver: this.iconResolver, tooltipResolver: this.tooltipResolver, itemsList: this._visibleItems });
         })));
   }
   static get is() { return "ez-tree"; }
@@ -234,6 +274,23 @@ export class EzTree {
         "text": "Define o item selecionado na \u00E1rvore."
       }
     },
+    "selectedId": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Forma alternativa para atribuir o item selecionado por seu ID."
+      },
+      "attribute": "selected-id",
+      "reflect": true
+    },
     "iconResolver": {
       "type": "unknown",
       "mutable": false,
@@ -254,6 +311,27 @@ export class EzTree {
         "text": "Define uma fun\u00E7\u00E3o que vai resolver o \u00EDcone daquele item. Retorna o nome do \u00EDcone da lib de icones do DS."
       },
       "defaultValue": "defaultIconResolver"
+    },
+    "tooltipResolver": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "(item: ITreeItem, enabled: boolean, level: number) => string",
+        "resolved": "(item: ITreeItem, enabled: boolean, level: number) => string",
+        "references": {
+          "ITreeItem": {
+            "location": "import",
+            "path": "./interfaces/ITreeItem"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define uma fun\u00E7\u00E3o que vai resolver o `tooltip` ou `title` daquele item."
+      },
+      "defaultValue": "defaultTooltipResolver"
     }
   }; }
   static get states() { return {

package/dist/collection/components/ez-tree/subcomponents/DefaultTooltipResolver.js

@@ -0,0 +1,3 @@
+export const defaultTooltipResolver = (item, _enabled, _level) => {
+  return item.tooltip || item.label;
+};

package/dist/collection/components/ez-tree/subcomponents/TreeItem.js

@@ -1,7 +1,7 @@
 import { ElementIDUtils } from "@sankhyalabs/core";
 import { h } from "@stencil/core";
 export const TreeItem = (props) => {
-  const { node, selectedId, itemClick, iconResolver, itemsList } = props;
+  const { node, selectedId, itemClick, iconClick, iconResolver, tooltipResolver, itemsList } = props;
   const treeItem = node.item;
   const level = props.level || 1;
   const disabled = node.isDisabled();
@@ -11,15 +11,15 @@ export const TreeItem = (props) => {
   if (available) {
     itemsList.push(treeItem);
   }
-  return (h("ul", { title: treeItem.label, class: level === 1 ? "first-level" : undefined },
+  return (h("ul", { title: tooltipResolver(treeItem, !disabled, level), class: level === 1 ? "first-level" : undefined },
     h("li", Object.assign({ class: "tree-item", onClick: () => available && itemClick(treeItem) }, {
       disabled,
       selected: treeItem.id === selectedId,
       [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`ezTreeItem_${treeItem.id}`)
     }),
       h("div", { class: "item-icon-box" }, expandable &&
-        h("ez-icon", { id: treeItem.id, class: "item-icon", size: "small", iconName: iconResolver(treeItem, expanded, level) })),
+        h("ez-icon", { id: treeItem.id, class: "item-icon", size: "small", iconName: iconResolver(treeItem, expanded, level), onClick: () => available && iconClick(treeItem) })),
       h("label", { class: "item-label" }, treeItem.label)),
     expanded
-      && node.getChildren().map(child => h(TreeItem, { selectedId: selectedId, node: child, itemClick: itemClick, level: level + 1, iconResolver: iconResolver, itemsList: itemsList }))));
+      && node.getChildren().map(child => h(TreeItem, { selectedId: selectedId, node: child, itemClick: itemClick, iconClick: iconClick, level: level + 1, iconResolver: iconResolver, tooltipResolver: tooltipResolver, itemsList: itemsList }))));
 };

package/dist/collection/components/ez-tree/subcomponents/index.js

@@ -1 +1,2 @@
 export { defaultIconResolver } from "./DefaultIconResolver";
+export { defaultTooltipResolver } from "./DefaultTooltipResolver";

package/dist/collection/components/ez-tree/types/Node.js

@@ -17,6 +17,31 @@ export class Node {
       this._childrenLoaded = true;
     }
   }
+  refresh(newItem) {
+    if (this.isPlaceHolder) {
+      return;
+    }
+    this.item = Object.assign(Object.assign({}, newItem), { expanded: this.item.expanded });
+    this._isLazyLoad = typeof this.item.children === "function" || this.item.childrenCount > 0;
+    const oldChildren = this.children;
+    this.children = new Map();
+    if (Array.isArray(this.item.children)) {
+      Array.from(this.item.children).forEach(item => {
+        const node = oldChildren.get(item.id);
+        if (node) {
+          node.refresh(item);
+          this.children.set(item.id, node);
+        }
+        else {
+          this.addChild(this._tree, Object.assign({}, item));
+        }
+      });
+      this._childrenLoaded = true;
+    }
+    else {
+      this._childrenLoaded = false;
+    }
+  }
   isDisabled() {
     if (this.isPlaceHolder) {
       return false;
@@ -27,10 +52,7 @@ export class Node {
     if (this.isPlaceHolder) {
       return;
     }
-    this.item.children = children;
-    this._childrenLoaded = true;
-    this.children.clear();
-    children.forEach(item => this.addChild(this._tree, Object.assign({}, item)));
+    this.refresh(Object.assign(Object.assign({}, this.item), { children }));
   }
   addChild(tree, item) {
     if (!this.children.has(item.id)) {

package/dist/collection/components/ez-tree/types/Tree.js

@@ -24,8 +24,29 @@ export class Tree extends Node {
     return this._disabledValues.get(id);
   }
   load(items) {
-    this.children.clear();
-    items.forEach(item => this.addChild(this, Object.assign({}, item)));
+    const oldChildren = this.children;
+    this.children = new Map();
+    items.forEach(item => {
+      const node = oldChildren.get(item.id);
+      if (node) {
+        node.refresh(item);
+        this.children.set(item.id, node);
+      }
+      else {
+        this.addChild(this, Object.assign({}, item));
+      }
+    });
+  }
+  updateItem(item) {
+    if (item == undefined) {
+      return;
+    }
+    const node = this.getNode(item.id);
+    if (node == undefined) {
+      return;
+    }
+    Object.keys(item).forEach(attrib => node.item[attrib] = item[attrib]);
+    this._changeCallback();
   }
   async open(path) {
     return new Promise(async (resolve) => {

package/dist/custom-elements/index.d.ts

@@ -86,6 +86,12 @@ export const EzDialog: {
   new (): EzDialog;
 };
 
+interface EzDropdown extends Components.EzDropdown, HTMLElement {}
+export const EzDropdown: {
+  prototype: EzDropdown;
+  new (): EzDropdown;
+};
+
 interface EzFileItem extends Components.EzFileItem, HTMLElement {}
 export const EzFileItem: {
   prototype: EzFileItem;
@@ -104,6 +110,12 @@ export const EzForm: {
   new (): EzForm;
 };
 
+interface EzFormView extends Components.EzFormView, HTMLElement {}
+export const EzFormView: {
+  prototype: EzFormView;
+  new (): EzFormView;
+};
+
 interface EzGrid extends Components.EzGrid, HTMLElement {}
 export const EzGrid: {
   prototype: EzGrid;