@pictogrammers/components 0.5.15 → 0.5.18

package/pg/tree/__examples__/basic/basic.ts

@@ -19,6 +19,7 @@ function createFolder(label, expanded = true, items: any[] = []) {
     },
     label,
     expanded,
+    isFolder: true,
     actions: [{
       type: PgTreeButtonIcon,
       icon:  IconEye,
@@ -75,12 +76,10 @@ export default class XPgTreeBasic extends HTMLElement {
       const { actionIndex } = e.detail;
       const action = item.getData().actions[actionIndex];
       const { enabled } = action;
-      if (actionIndex === 0 && enabled) {
-        action.icon = IconEyeOff;
-        action.enabled = false;
-      } else if (actionIndex === 0 && !enabled){
+      if (actionIndex === 0 && action.icon === IconEyeOff) {
         action.icon = IconEye;
-        action.enabled = true;
+      } else if (actionIndex === 0){
+        action.icon = IconEyeOff;
       }
       if (actionIndex === 1 && enabled) {
         action.icon = IconUnlock;
@@ -115,6 +114,10 @@ export default class XPgTreeBasic extends HTMLElement {
 
     let fileNext: number = 3;
     this.$addItem.addEventListener('click', () => {
+      if (this.#selectedItems.length === 0) {
+        this.$tree.items.push(createItem(`Item ${fileNext++}`));
+        return;
+      }
       this.#selectedItems.forEach((selected: any) => {
         if (selected.getData().items) {
           selected.getData().items.push(createItem(`Item ${fileNext}`));
@@ -127,6 +130,10 @@ export default class XPgTreeBasic extends HTMLElement {
 
     let folderNext = 2;
     this.$addFolder.addEventListener('click', () => {
+      if (this.#selectedItems.length === 0) {
+        this.$tree.items.push(createFolder(`Folder ${folderNext++}`));
+        return;
+      }
       this.#selectedItems.forEach((selected: SelectedTreeItem) => {
         if (selected.getData().items) {
           selected.getData().items.push(createFolder(`Folder ${folderNext}`));

package/pg/tree/tree.html

@@ -1 +1 @@
-<div part="items"></div>
+<div part="items" tabindex="0"></div>