Release/v0.9.0 (#72)

* Add isIndependentNodes param. * Add new examples. * Update readme and version. * Remove disabled form examples.
dipson88 · Jun 6, 2023 · 8e823c4 · 8e823c4
1 parent 3fc5941
commit 8e823c4
Show file tree

Hide file tree

Showing 18 changed files with 1,084 additions and 442 deletions.
diff --git a/README.md b/README.md
@@ -9,8 +9,8 @@ A multi-select js component with nested options.
 - Typescript support
 
 Build data:
-- treeselectjs.mjs  48.92 kB │ gzip: 11.07 kB
-- treeselectjs.umd.js  39.79 kB │ gzip: 10.17 kB
+- treeselectjs.mjs  49.80 kB │ gzip: 11.27 kB
+- treeselectjs.umd.js  40.41 kB │ gzip: 10.29 kB
 - treeselectjs.css   6.41 kB │ gzip:  1.27 kB
 
 **Live Demo:** https://dipson88.github.io/treeselectjs/
@@ -30,8 +30,8 @@ import Treeselect from 'treeselectjs'
 
 Import treeselectjs (UMD)
 ```
-<script src="https://cdn.jsdelivr.net/npm/treeselectjs@0.8.6/dist/treeselectjs.umd.js"></script>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/treeselectjs@0.8.6/dist/treeselectjs.css" />
+<script src="https://cdn.jsdelivr.net/npm/treeselectjs@0.9.0/dist/treeselectjs.umd.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/treeselectjs@0.9.0/dist/treeselectjs.css" />
 ...
 <script>
   ...
@@ -125,6 +125,7 @@ Name  | Type (default) | Description
 **id** | String ('') | id attribute for the accessibility.
 **isSingleSelect** | Boolean (false) | Converts multi-select to the single value select. Checkboxes will be removed. You should pass only one id instead of array of values. Also you can set **showTags** to false. It helps to show treeselect as a dropdown.
 **isGroupedValue** | Boolean (false) | Return groups if they selected instead of separate ids. Treeselect returns only leaves ids by default.
+**isIndependentNodes** | Boolean (false) | All nodes in treeselect work as an independent entity. Check/uncheck action ignore children/parent updates workflow. Disabled nodes ignore children/parent workflow as well. 
 
 #### List settings props
 Name  | Type (default) | Description
@@ -158,6 +159,7 @@ Name  | Type (default) | Description
 **openCallback** | (value) => void (undefined) | Callback method for `open` if you don't want to use eventListener.
 **closeCallback** | (value) => void (undefined) | Callback method for `close` if you don't want to use eventListener.
 **nameChangeCallback** | (name) => void (undefined) | Callback method for `name-change` if you don't want to use eventListener.
+**searchCallback** | (value) => void (undefined) | Callback method for `search` if you don't want to use eventListener.
 
 #### Additional props
 Name  | Type (default) | Description
@@ -185,6 +187,7 @@ Name  | Return Type | Description
 **open**  | Array[String \| Number] | Returns selected values, action is triggered on opening the list. Add `eventListener` or use `openCallback` prop to get value.
 **close**  | Array[String \| Number] | Returns selected values, action is triggered on closing the list. Add `eventListener` or use `closeCallback` prop to get value.
 **name-change**  | String | Returns selected name inside the input, action is triggered on on change the list. Add `eventListener` or use `nameChangeCallback` prop to get name.
+**search**  | String | Returns entered search value, action is triggered on change search value during the typing. Add `eventListener` or use `searchCallback` prop to get value. You can try create something like autocomplete with help of this event.
 
 ---
 

diff --git a/app/examples/icons.js b/app/examples/icons.js
@@ -0,0 +1,108 @@
+const icons = {
+  check: 'ico-check',
+  shield: 'ico-shield'
+}
+
+const options = [
+  {
+    name: 'England',
+    value: 1,
+    htmlAttr: { ico: icons.check },
+    children: [
+      {
+        name: 'London',
+        value: 2,
+        children: [
+          {
+            name: 'Chelsea',
+            value: 3,
+            children: []
+          },
+          {
+            name: 'West End',
+            value: 4,
+            children: [],
+            htmlAttr: { ico: icons.check }
+          }
+        ]
+      },
+      {
+        name: 'Brighton',
+        value: 5,
+        children: []
+      }
+    ]
+  },
+  {
+    name: 'France',
+    value: 6,
+    htmlAttr: { ico: icons.shield },
+    children: [
+      {
+        name: 'Paris',
+        value: 7,
+        children: [],
+        htmlAttr: { ico: icons.shield }
+      },
+      {
+        name: 'Lyon',
+        value: 8,
+        children: []
+      }
+    ]
+  }
+]
+
+const svgCheck = `<svg style="position: absolute;top:0;left: 2px;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000" height="20px" width="20px" version="1.1" id="Capa_1" viewBox="0 0 229.5 229.5" xml:space="preserve">
+  <path d="M214.419,32.12c-0.412-2.959-2.541-5.393-5.419-6.193L116.76,0.275c-1.315-0.366-2.704-0.366-4.02,0L20.5,25.927  c-2.878,0.8-5.007,3.233-5.419,6.193c-0.535,3.847-12.74,94.743,18.565,139.961c31.268,45.164,77.395,56.738,79.343,57.209  c0.579,0.14,1.169,0.209,1.761,0.209s1.182-0.07,1.761-0.209c1.949-0.471,48.076-12.045,79.343-57.209  C227.159,126.864,214.954,35.968,214.419,32.12z M174.233,85.186l-62.917,62.917c-1.464,1.464-3.384,2.197-5.303,2.197  s-3.839-0.732-5.303-2.197l-38.901-38.901c-1.407-1.406-2.197-3.314-2.197-5.303s0.791-3.897,2.197-5.303l7.724-7.724  c2.929-2.928,7.678-2.929,10.606,0l25.874,25.874l49.89-49.891c1.406-1.407,3.314-2.197,5.303-2.197s3.897,0.79,5.303,2.197  l7.724,7.724C177.162,77.508,177.162,82.257,174.233,85.186z"/>
+  </svg>`
+const svgShield = `<svg style="position: absolute;top:0;left: 2px;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000" height="20px" width="20px" version="1.1" id="Capa_1" viewBox="0 0 229.5 229.5" xml:space="preserve">
+  <path d="M214.419,32.12c-0.412-2.959-2.541-5.393-5.419-6.193l-92.24-25.652c-1.314-0.366-2.704-0.366-4.019,0l-92.24,25.652  c-2.879,0.8-5.008,3.233-5.419,6.193c-0.535,3.847-12.74,94.744,18.565,139.961c31.268,45.165,77.395,56.739,79.343,57.209  c0.579,0.14,1.169,0.209,1.761,0.209s1.182-0.07,1.761-0.209c1.949-0.471,48.076-12.045,79.343-57.209  C227.159,126.864,214.954,35.967,214.419,32.12z M182.383,162.719c-27.12,39.174-67.744,48.986-67.744,48.986V114.75H30.918  c-4.861-36.388,0.334-73.765,0.334-73.765l83.386-23.19v96.955h83.721C195.996,132.443,191.256,149.903,182.383,162.719z"/>
+  </svg>`
+
+const className = '.treeselect-demo-icons'
+
+export const runIconsExample = (Treeselect) => {
+  let isIconsWereInserted = false
+
+  const domElement = document.querySelector(className)
+  const treeselect = new Treeselect({
+    parentHtmlContainer: domElement,
+    value: [1, 4, 7, 8],
+    options: options,
+    openLevel: 3,
+    openCallback: () => {
+      // We need to insert icons on open, only first time to avoid duplicates
+      if (isIconsWereInserted) {
+        return
+      }
+
+      isIconsWereInserted = true
+
+      Array.from(domElement.querySelectorAll('[ico]')).forEach((item) => {
+        const ico = item.getAttribute('ico')
+        const countOfChildNodes = item.childNodes.length
+        let iconToInsert = null
+
+        if (ico === icons.check) {
+          iconToInsert = svgCheck
+        }
+
+        if (ico === icons.shield) {
+          iconToInsert = svgShield
+        }
+
+        if (iconToInsert) {
+          const iconElement = document.createElement('div')
+          iconElement.setAttribute('style', 'height: 20px; width: 25px; position: relative;')
+          iconElement.innerHTML = iconToInsert
+          item.insertBefore(iconElement, item.childNodes[countOfChildNodes - 1])
+        }
+      })
+    }
+  })
+
+  treeselect.srcElement.addEventListener('input', (e) => {
+    console.log('independentNodes: Selected value ', e.detail)
+  })
+}
diff --git a/app/examples/independentNodes.js b/app/examples/independentNodes.js
@@ -0,0 +1,61 @@
+const options = [
+  {
+    name: 'England',
+    value: 1,
+    children: [
+      {
+        name: 'London',
+        value: 2,
+        children: [
+          {
+            name: 'Chelsea',
+            value: 3,
+            children: []
+          },
+          {
+            name: 'West End',
+            value: 4,
+            children: []
+          }
+        ]
+      },
+      {
+        name: 'Brighton',
+        value: 5,
+        children: []
+      }
+    ]
+  },
+  {
+    name: 'France',
+    value: 6,
+    children: [
+      {
+        name: 'Paris',
+        value: 7,
+        children: []
+      },
+      {
+        name: 'Lyon',
+        value: 8,
+        children: []
+      }
+    ]
+  }
+]
+
+const className = '.treeselect-demo-independent-nodes'
+
+export const runIndependentNodesExample = (Treeselect) => {
+  const domElement = document.querySelector(className)
+  const treeselect = new Treeselect({
+    parentHtmlContainer: domElement,
+    value: [1, 4, 7, 8],
+    options: options,
+    isIndependentNodes: true
+  })
+
+  treeselect.srcElement.addEventListener('input', (e) => {
+    console.log('independentNodes: Selected value ', e.detail)
+  })
+}
diff --git a/app/examples/index.js b/app/examples/index.js
@@ -2,10 +2,14 @@ import { runDefaultExample } from './default'
 import { runSlotExample } from './slot'
 import { runDisabledExample } from './disabled'
 import { runSingleSelectExample } from './singleSelect'
+import { runIndependentNodesExample } from './independentNodes'
+import { runIconsExample } from './icons'
 
 export const runApp = (Treeselect) => {
   runDefaultExample(Treeselect)
   runSlotExample(Treeselect)
   runDisabledExample(Treeselect)
   runSingleSelectExample(Treeselect)
+  runIndependentNodesExample(Treeselect)
+  runIconsExample(Treeselect)
 }