treeselectjs 0.2.2 → 0.2.3

package/README.md

@@ -120,8 +120,10 @@ Name  | Params | Discription
 ------------- | ------------- | -------------
 updateValue  | Array[String] | Update selected values.
 mount  | None | Helps to remount and update settings.
+destroy  | None | Deletes elements from the DOM and clears all the data. Call mount() to recreate.
 
 ### Notes
-1) If you want to change the padding of the element you can use CSS selector. I've added 'group' and 'level' attributes, but you have to use !important.
-2) If you want to update props, set props to the entity of the class and then call mount() method.
-3) Use updateValue method to update only the value.
+1) If you want to change the padding of the element you can use CSS selector. I've added **'group'** and **'level'** attributes, but you have to use **!important**.
+2) If you want to update props, set props to the entity of the class and then call **mount()** method.
+3) Use **updateValue()** method to update only the value.
+4) If you need to delete List from the DOM when you don't need treeselect anymore - call **destroy()**.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "treeselectjs",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Treeselect JS",
   "main": "dist/treeselect-js.js",
   "repository": {

package/src/list.js

@@ -142,10 +142,11 @@ const updateDOM = (flatOptions, srcElement) => {
 const updateLeftPaddingItems = (option, listItem, flatOptions) => {
   const isZeroLevel = option.level === 0
   const defaultPadding = 20
+  const zeroLevelItemPadding = 5
 
   if (isZeroLevel) {
     const isGroupsExistOnLevel = flatOptions.some(item => item.isGroup && item.level === option.level)
-    const itemPadding = !option.isGroup && isGroupsExistOnLevel ? `${defaultPadding}px` : '0'
+    const itemPadding = !option.isGroup && isGroupsExistOnLevel ? `${defaultPadding}px` : `${zeroLevelItemPadding}px`
     listItem.style.paddingLeft = option.isGroup ? '0' : itemPadding
   } else {
     listItem.style.paddingLeft = option.isGroup

package/src/treeselect-js.css

@@ -16,6 +16,7 @@
   left: 0;
   border-radius: 4px;
   box-sizing: border-box;
+  z-index: 1010;
 }
 
 .treeselect .treeselect-list {

package/src/treeselect-js.js

@@ -13,6 +13,11 @@ class Treeselect {
   #containerResizer = null
   #containerWidth = 0
 
+  // Outside listeners
+  #scrollEvent = null
+  #focusEvent = null
+  #blurEvent = null
+
   constructor ({
     parentHtmlContainer,
     value,
@@ -42,15 +47,10 @@ class Treeselect {
     this.grouped = grouped ?? true
     this.listSlotHtmlComponent = listSlotHtmlComponent ?? null
     this.disabled = disabled ?? false
-    this.emptyText = emptyText
+    this.emptyText = emptyText ?? 'No results found...'
 
     this.srcElement = null
 
-    // Outside listeners
-    this.scrollEvent = null
-    this.focusEvent = null
-    this.blurEvent = null
-
     this.mount()
   }
 
@@ -65,9 +65,9 @@ class Treeselect {
 
     this.srcElement = this.#createTreeselect()
 
-    this.scrollEvent = this.scrollWindowHandler.bind(this)
-    this.focusEvent = this.focusWindowHandler.bind(this)
-    this.blurEvent = this.blurWindowHandler.bind(this)
+    this.#scrollEvent = this.scrollWindowHandler.bind(this)
+    this.#focusEvent = this.focusWindowHandler.bind(this)
+    this.#blurEvent = this.blurWindowHandler.bind(this)
 
     if (this.alwaysOpen) {
       this.#treeselectInput.openClose()
@@ -86,6 +86,15 @@ class Treeselect {
     this.#treeselectInput.updateValue(inputNewValue)
   }
 
+  destroy () {
+    if (this.srcElement) {
+      this.#closeList()
+      this.srcElement.innerHTML = ''
+      this.srcElement = null
+      this.#removeOutsideListeners()
+    }
+  }
+
   #createTreeselect () {
     const container = this.parentHtmlContainer
     container.classList.add('treeselect')
@@ -132,9 +141,9 @@ class Treeselect {
     })
     input.srcElement.addEventListener('focus', () => {
       this.#updateFocusClasses(true)
-      document.addEventListener('mousedown', this.focusEvent, true)
-      document.addEventListener('focus', this.focusEvent, true)
-      window.addEventListener('blur', this.blurEvent)
+      document.addEventListener('mousedown', this.#focusEvent, true)
+      document.addEventListener('focus', this.#focusEvent, true)
+      window.addEventListener('blur', this.#blurEvent)
     }, true)
 
     if (!this.alwaysOpen) {
@@ -167,7 +176,7 @@ class Treeselect {
   }
 
   #openList () {
-    window.addEventListener('scroll', this.scrollEvent, true)
+    window.addEventListener('scroll', this.#scrollEvent, true)
 
     if (this.appendToBody) {
       document.body.appendChild(this.#treeselectList.srcElement)
@@ -182,7 +191,14 @@ class Treeselect {
   }
 
   #closeList () {
-    window.removeEventListener('scroll', this.scrollEvent, true)
+    window.removeEventListener('scroll', this.#scrollEvent, true)
+    const isElementExist = this.appendToBody
+      ? document.body.contains(this.#treeselectList.srcElement)
+      : this.#htmlContainer.contains(this.#treeselectList.srcElement)
+
+    if (!isElementExist) {
+      return
+    }
 
     if (this.appendToBody) {
       document.body.removeChild(this.#treeselectList.srcElement)
@@ -230,16 +246,16 @@ class Treeselect {
   }
 
   #removeOutsideListeners () {
-    window.removeEventListener('scroll', this.scrollEvent, true)
+    window.removeEventListener('scroll', this.#scrollEvent, true)
 
-    document.removeEventListener('click', this.focusEvent, true)
-    document.removeEventListener('focus', this.focusEvent, true)
-    window.removeEventListener('blur', this.blurEvent)
+    document.removeEventListener('click', this.#focusEvent, true)
+    document.removeEventListener('focus', this.#focusEvent, true)
+    window.removeEventListener('blur', this.#blurEvent)
   }
 
   // Outside Listeners
   scrollWindowHandler () {
-    this.updateListPosition(this.#htmlContainer, this.#treeselectList.srcElement, false)
+    this.updateListPosition(this.#htmlContainer, this.#treeselectList.srcElement, true)
   }
 
   focusWindowHandler (e) {