slim-select 2.8.2 → 2.9.0

package/src/slim-select/render.ts

@@ -1,11 +1,14 @@
 import { debounce } from './helpers'
 import Settings from './settings'
 import Store, { DataArray, Optgroup, Option, OptionOptional } from './store'
+import CssClasses from './classes'
 
 export interface Callbacks {
   open: () => void
   close: () => void
-  addable?: (value: string) => Promise<OptionOptional | string> | OptionOptional | string | false | undefined | null
+  addable?: (
+    value: string
+  ) => Promise<OptionOptional | string> | OptionOptional | string | false | undefined | null | Error
   setSelected: (value: string | string[], runAfterChange: boolean) => void
   addOption: (option: Option) => void
   search: (search: string) => void
@@ -53,73 +56,12 @@ export default class Render {
   public content: Content
 
   // Classes
-  public classes = {
-    // Main
-    main: 'ss-main',
-
-    // Placeholder
-    placeholder: 'ss-placeholder',
-
-    // Values
-    values: 'ss-values',
-    single: 'ss-single',
-    max: 'ss-max',
-    value: 'ss-value',
-    valueText: 'ss-value-text',
-    valueDelete: 'ss-value-delete',
-    valueOut: 'ss-value-out',
-
-    // Deselect
-    deselect: 'ss-deselect',
-    deselectPath: 'M10,10 L90,90 M10,90 L90,10', // Not a class but whatever
-
-    // Arrow
-    arrow: 'ss-arrow',
-    arrowClose: 'M10,30 L50,70 L90,30', // Not a class but whatever
-    arrowOpen: 'M10,70 L50,30 L90,70', // Not a class but whatever
-
-    // Content
-    content: 'ss-content',
-    openAbove: 'ss-open-above',
-    openBelow: 'ss-open-below',
-
-    // Search
-    search: 'ss-search',
-    searchHighlighter: 'ss-search-highlight',
-    searching: 'ss-searching',
-    addable: 'ss-addable',
-    addablePath: 'M50,10 L50,90 M10,50 L90,50', // Not a class but whatever
-
-    // List optgroups/options
-    list: 'ss-list',
-
-    // Optgroup
-    optgroup: 'ss-optgroup',
-    optgroupLabel: 'ss-optgroup-label',
-    optgroupLabelText: 'ss-optgroup-label-text',
-    optgroupActions: 'ss-optgroup-actions',
-    optgroupSelectAll: 'ss-selectall', // optgroup select all
-    optgroupSelectAllBox: 'M60,10 L10,10 L10,90 L90,90 L90,50', // Not a class but whatever
-    optgroupSelectAllCheck: 'M30,45 L50,70 L90,10', // Not a class but whatever
-    optgroupClosable: 'ss-closable',
-
-    // Option
-    option: 'ss-option',
-    optionDelete: 'M10,10 L90,90 M10,90 L90,10', // Not a class but whatever
-    highlighted: 'ss-highlighted',
-
-    // Misc
-    open: 'ss-open',
-    close: 'ss-close',
-    selected: 'ss-selected',
-    error: 'ss-error',
-    disabled: 'ss-disabled',
-    hide: 'ss-hide',
-  }
+  public classes: CssClasses
 
-  constructor(settings: Required<Settings>, store: Store, callbacks: Callbacks) {
+  constructor(settings: Required<Settings>, classes: Required<CssClasses>, store: Store, callbacks: Callbacks) {
     this.store = store
     this.settings = settings
+    this.classes = classes
     this.callbacks = callbacks
 
     this.main = this.mainDiv()
@@ -265,7 +207,7 @@ export default class Render {
           return false
       }
 
-      return false
+      return true
     }
 
     // Add onclick for main div
@@ -321,9 +263,9 @@ export default class Render {
         } else {
           // Get first option and set it as selected
           const firstOption = this.store.getFirstOption()
-          const value = firstOption ? firstOption.value : ''
+          const id = firstOption ? firstOption.id : ''
 
-          this.callbacks.setSelected(value, false)
+          this.callbacks.setSelected(id, false)
         }
 
         // Check if we need to close the dropdown
@@ -365,12 +307,12 @@ export default class Render {
       deselect: {
         main: deselect,
         svg: deselectSvg,
-        path: deselectPath,
+        path: deselectPath
       },
       arrow: {
         main: arrow,
-        path: arrowPath,
-      },
+        path: arrowPath
+      }
     }
   }
 
@@ -491,6 +433,11 @@ export default class Render {
       }
     }
 
+    // Lets check for data selected order
+    if (this.settings.keepOrder) {
+      selectedOptions = this.store.selectedOrderOptions(selectedOptions)
+    }
+
     // Loop through currentNodes and only include ones that are not in selectedIDs
     let removeNodes: HTMLDivElement[] = []
     for (let i = 0; i < currentNodes.length; i++) {
@@ -555,7 +502,7 @@ export default class Render {
 
     const text = document.createElement('div')
     text.classList.add(this.classes.valueText)
-    text.innerText = option.text // For multiple values always use text
+    text.textContent = option.text // For multiple values always use text
     value.appendChild(text)
 
     // Only add deletion if the option is not mandatory
@@ -592,20 +539,20 @@ export default class Render {
         }
 
         if (shouldDelete) {
-          // Loop through after and append values to a variable called selected
-          let selectedValues: string[] = []
+          // Loop through after and append ids to a variable called selected
+          let selectedIds: string[] = []
           for (const o of after) {
             if (o instanceof Optgroup) {
               for (const c of o.options) {
-                selectedValues.push(c.value)
+                selectedIds.push(c.id)
               }
             }
 
             if (o instanceof Option) {
-              selectedValues.push(o.value)
+              selectedIds.push(o.id)
             }
           }
-          this.callbacks.setSelected(selectedValues, false)
+          this.callbacks.setSelected(selectedIds, false)
 
           // Check if we need to close the dropdown
           if (this.settings.closeOnSelect) {
@@ -653,7 +600,7 @@ export default class Render {
     return {
       main: main,
       search: search,
-      list: list,
+      list: list
     }
   }
 
@@ -690,7 +637,7 @@ export default class Render {
     // Setup search return object
     const searchReturn: Search = {
       main,
-      input,
+      input
     }
 
     // We still want the search to be tabable but not shown
@@ -724,14 +671,19 @@ export default class Render {
           // which will also focus on main div
           // and then continuing normal tabbing
           this.callbacks.close()
-
           return true // Continue doing normal tabbing
         case 'Escape':
           this.callbacks.close()
           return false
-        case 'Enter':
         case ' ':
-          if (this.callbacks.addable && e.ctrlKey) {
+          const highlighted = this.content.list.querySelector('.' + this.classes.highlighted) as HTMLDivElement
+          if (highlighted) {
+            highlighted.click()
+            return false
+          }
+          return true
+        case 'Enter':
+          if (this.callbacks.addable) {
             addable.click()
             return false
           } else {
@@ -790,11 +742,11 @@ export default class Render {
 
           // set selected value for single and multiple
           if (this.settings.isMultiple) {
-            let values = this.store.getSelected()
-            values.push(newOption.value)
-            this.callbacks.setSelected(values, true)
+            let ids = this.store.getSelected()
+            ids.push(newOption.id)
+            this.callbacks.setSelected(ids, true)
           } else {
-            this.callbacks.setSelected([newOption.value], true)
+            this.callbacks.setSelected([newOption.id], true)
           }
 
           // Clear search
@@ -823,8 +775,10 @@ export default class Render {
             if (typeof value === 'string') {
               runFinish({
                 text: value,
-                value: value,
+                value: value
               })
+            } else if (addableValue instanceof Error) {
+              this.renderError(addableValue.message)
             } else {
               runFinish(value)
             }
@@ -832,8 +786,10 @@ export default class Render {
         } else if (typeof addableValue === 'string') {
           runFinish({
             text: addableValue,
-            value: addableValue,
+            value: addableValue
           })
+        } else if (addableValue instanceof Error) {
+          this.renderError(addableValue.message)
         } else {
           runFinish(addableValue)
         }
@@ -846,7 +802,7 @@ export default class Render {
       searchReturn.addable = {
         main: addable,
         svg: plus,
-        path: plusPath,
+        path: plusPath
       }
     }
 
@@ -991,11 +947,34 @@ export default class Render {
     if (data.length === 0) {
       const noResults = document.createElement('div')
       noResults.classList.add(this.classes.search)
-      noResults.innerHTML = this.settings.searchText
+
+      //
+      if (this.callbacks.addable) {
+        noResults.innerHTML = this.settings.addableText.replace('{value}', this.content.search.input.value)
+      } else {
+        noResults.innerHTML = this.settings.searchText
+      }
       this.content.list.appendChild(noResults)
       return
     }
 
+    // If settings has allowDeselect and isSingle, add empty placeholder in the event they want to deselect
+    if (this.settings.allowDeselect && !this.settings.isMultiple) {
+      // Check if store options have a placeholder
+      const placeholderOption = this.store.filter((o) => o.placeholder, false) as Option[]
+      if (!placeholderOption.length) {
+        this.store.addOption(
+          new Option({
+            text: '',
+            value: '',
+            selected: false,
+            placeholder: true
+          }),
+          true
+        )
+      }
+    }
+
     // Append individual options to div container
     for (const d of data) {
       // Create optgroup
@@ -1074,7 +1053,7 @@ export default class Render {
               // Put together new list minus all options in this optgroup
               const newSelected = currentSelected.filter((s) => {
                 for (const o of d.options) {
-                  if (s === o.value) {
+                  if (s === o.id) {
                     return false
                   }
                 }
@@ -1086,7 +1065,7 @@ export default class Render {
               return
             } else {
               // Put together new list with all options in this optgroup
-              const newSelected = currentSelected.concat(d.options.map((o) => o.value))
+              const newSelected = currentSelected.concat(d.options.map((o) => o.id))
 
               // Loop through options and if they don't exist in the store
               // run addOption callback
@@ -1203,7 +1182,7 @@ export default class Render {
       optionEl.innerHTML = this.highlightText(
         option.html !== '' ? option.html : option.text,
         this.content.search.input.value,
-        this.classes.searchHighlighter,
+        this.classes.searchHighlighter
       )
     } else if (option.html !== '') {
       optionEl.innerHTML = option.html
@@ -1315,8 +1294,8 @@ export default class Render {
 
         // Get values from after and set as selected
         this.callbacks.setSelected(
-          after.map((o: Option) => o.value),
-          false,
+          after.map((o: Option) => o.id),
+          false
         )
 
         // If closeOnSelect is true
@@ -1345,7 +1324,7 @@ export default class Render {
   private highlightText(str: string, search: any, className: string) {
     // the completed string will be itself if already set, otherwise, the string that was passed in
     let completedString: any = str
-    const regex = new RegExp('(' + search.trim() + ')(?![^<]*>[^<>]*</)', 'i')
+    const regex = new RegExp('(?![^<]*>)(' + search.trim() + ')(?![^<]*>[^<>]*</)', 'i')
 
     // If the regex doesn't match the string just exit
     if (!str.match(regex)) {

package/src/slim-select/rollup.config.mjs

@@ -11,7 +11,7 @@ export default [
     output: {
       file: '../../dist/slimselect.cjs.js',
       format: 'cjs',
-      exports: 'default',
+      exports: 'default'
     },
     plugins: [
       typescript(),
@@ -27,12 +27,12 @@ export default [
             {
               modules: false,
               useBuiltIns: 'usage',
-              targets: 'maintained node versions',
-            },
-          ],
-        ],
-      }),
-    ],
+              targets: 'maintained node versions'
+            }
+          ]
+        ]
+      })
+    ]
   },
 
   // UMD build for browsers
@@ -42,13 +42,13 @@ export default [
       {
         name: 'SlimSelect',
         file: '../../dist/slimselect.js',
-        format: 'umd',
+        format: 'umd'
       },
       {
         name: 'SlimSelect',
         file: '../../dist/slimselect.umd.js',
-        format: 'umd',
-      },
+        format: 'umd'
+      }
     ],
     plugins: [
       typescript(),
@@ -56,9 +56,9 @@ export default [
       commonjs(),
       babel({
         babelHelpers: 'bundled',
-        exclude: 'node_modules/**',
-      }),
-    ],
+        exclude: 'node_modules/**'
+      })
+    ]
   },
 
   // UMD build for browsers minified with terser
@@ -68,13 +68,13 @@ export default [
       {
         name: 'SlimSelect',
         file: '../../dist/slimselect.min.js',
-        format: 'umd',
+        format: 'umd'
       },
       {
         name: 'SlimSelect',
         file: '../../dist/slimselect.umd.min.js',
-        format: 'umd',
-      },
+        format: 'umd'
+      }
     ],
     plugins: [
       typescript(),
@@ -82,10 +82,10 @@ export default [
       commonjs(),
       babel({
         babelHelpers: 'bundled',
-        exclude: 'node_modules/**',
+        exclude: 'node_modules/**'
       }),
-      terser(),
-    ],
+      terser()
+    ]
   },
 
   // ES module build for modern browsers
@@ -93,7 +93,7 @@ export default [
     input: './index.ts',
     output: {
       file: '../../dist/slimselect.es.js',
-      format: 'es',
+      format: 'es'
     },
     plugins: [
       typescript(),
@@ -101,9 +101,9 @@ export default [
       commonjs(),
       babel({
         babelHelpers: 'bundled',
-        exclude: 'node_modules/**',
-      }),
-    ],
+        exclude: 'node_modules/**'
+      })
+    ]
   },
 
   // IIFE build for modern browsers
@@ -112,7 +112,7 @@ export default [
     output: {
       name: 'SlimSelect',
       file: '../../dist/slimselect.global.js',
-      format: 'iife',
+      format: 'iife'
     },
     plugins: [
       typescript(),
@@ -120,8 +120,8 @@ export default [
       commonjs(),
       babel({
         babelHelpers: 'bundled',
-        exclude: 'node_modules/**',
-      }),
-    ],
-  },
+        exclude: 'node_modules/**'
+      })
+    ]
+  }
 ]