slim-select 2.0.1 → 2.1.0

package/src/docs/pages/install.vue

@@ -43,19 +43,36 @@ export default defineComponent({
 
     <div id="cdn" class="content">
       <h2>Cdn</h2>
-      <p>Cdn has a url link you can grab.</p>
       <p>
-        See full list of available options.
-        <a target="_blank" href="https://cdnjs.com/libraries/slim-select">cdnjs.com/libraries/slim-select</a>
+        Cdn has a url link you can grab. Cdn exists on both
+        <a target="_blank" href="https://cdnjs.com">cdnjs.com</a> and
+        <a target="_blank" href="https://unpkg.com">unpkg.com</a>
+      </p>
+      <p>
+        See full list of available options.<br />
+        <strong>cdnjs</strong> -
+        <a target="_blank" href="https://cdnjs.com/libraries/slim-select">cdnjs.com/libraries/slim-select</a><br />
+        <strong>unpkg</strong> -
+        <a target="_blank" href="https://unpkg.com/browse/slim-select/dist/"
+          >https://unpkg.com/browse/slim-select/dist/</a
+        >
       </p>
+      <ul>
+        <li>slimselct.js - UMD unminified</li>
+        <li>slimselct.min.js - UMD minified</li>
+        <li>slimselect.cjs.js - CommonJS (for Node) and ES module (for bundlers) build</li>
+        <li>slimselect.umd.js - UMD build for browsers</li>
+        <li>slimselect.es.js - ES module build for modern browsers</li>
+        <li>slimselect.global.js - IIFE build for modern browsers</li>
+      </ul>
       <div class="alert info">New releases may be delayed until the next time its indexed</div>
 
       <pre class="install-code">
         <code class="language-html">
           &lt;html&gt;
             &lt;head&gt;
-              &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/slim-select/{{version}}/slimselect.js"&gt;&lt;/script&gt;
-              &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/slim-select/{{version}}/slimselect.css" rel="stylesheet"&gt;&lt;/link&gt;
+              &lt;script src="unpkg.com/slim-select@{{version}}/dist/slimselect.min.js"&gt;&lt;/script&gt;
+              &lt;link href="unpkg.com/slim-select@{{version}}/dist/slimselect.css" rel="stylesheet"&gt;&lt;/link&gt;
               
               &lt;script&gt;
                 new SlimSelect({
@@ -77,7 +94,11 @@ export default defineComponent({
 
     <div id="download" class="content">
       <h2>Download</h2>
-      <p>Download the latest minified version of slim select</p>
+      <p>Download the latest minified umd version of slim select</p>
+      <p>
+        See full list of available downloadable options.
+        <a target="_blank" href="https://cdnjs.com/libraries/slim-select">cdnjs.com/libraries/slim-select</a>
+      </p>
       <div class="btn" @click="downloadLink()">Click Here To Download</div>
     </div>
   </div>

package/src/docs/pages/methods/get_data.vue

@@ -1,7 +1,8 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 
-import SlimSelect, { DataArray } from '../../../slim-select'
+import SlimSelect from '../../../slim-select'
+import { DataArray } from '../../../slim-select/store'
 
 export default defineComponent({
   name: 'GetData',

package/src/docs/pages/methods/open_close.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 
-import SlimSelect, { DataArray } from '../../../slim-select'
+import SlimSelect from '../../../slim-select'
 
 export default defineComponent({
   name: 'OpenClose',

package/src/docs/router.ts

@@ -39,6 +39,11 @@ const router = createRouter({
       name: 'Methods',
       component: () => import('./pages/methods/index.vue'),
     },
+    {
+      path: '/frameworks',
+      name: 'Frameworks',
+      component: () => import('./pages/frameworks/index.vue'),
+    },
   ],
 })
 

package/src/slim-select/index.ts

@@ -1,19 +1,9 @@
-import { debounce, hasClassInTree } from './helper'
+import { debounce, hasClassInTree } from './helpers'
 import Render from './render'
 import Select from './select'
 import Settings, { SettingsPartial } from './settings'
 import Store, { DataArray, DataArrayPartial, Option, OptionOptional } from './store'
 
-// Export everything except the "export default"
-export * from './helper'
-export * from './settings'
-export * from './select'
-export * from './store'
-export * from './render'
-
-// Export all "export defaults"
-export { Settings, Select, Store, Render }
-
 export interface Config {
   select: string | Element
   data?: DataArrayPartial
@@ -24,7 +14,7 @@ export interface Config {
 export interface Events {
   search?: (searchValue: string, currentData: DataArray) => Promise<DataArrayPartial> | DataArrayPartial
   searchFilter?: (option: Option, search: string) => boolean
-  addable?: (value: string) => OptionOptional | string
+  addable?: (value: string) => Promise<OptionOptional | string> | OptionOptional | string
   beforeChange?: (newVal: Option[], oldVal: Option[]) => boolean | void
   afterChange?: (newVal: Option[]) => void
   beforeOpen?: () => void

package/src/slim-select/render.ts

@@ -1,11 +1,11 @@
-import { debounce } from './helper'
+import { debounce } from './helpers'
 import Settings from './settings'
 import Store, { DataArray, Optgroup, Option, OptionOptional } from './store'
 
 export interface Callbacks {
   open: () => void
   close: () => void
-  addable?: (value: string) => OptionOptional | string
+  addable?: (value: string) => Promise<OptionOptional | string> | OptionOptional | string
   setSelected: (value: string[]) => void
   addOption: (option: Option) => void
   search: (search: string) => void
@@ -266,6 +266,8 @@ export default class Render {
     if (!this.settings.allowDeselect || this.settings.isMultiple) {
       deselect.classList.add(this.classes.hide)
     }
+
+    // Add deselect onclick event
     deselect.onclick = (e: Event) => {
       e.stopPropagation()
 
@@ -274,7 +276,29 @@ export default class Render {
         return
       }
 
-      this.callbacks.setSelected([''])
+      // By Default we will delete
+      let shouldDelete = true
+      const before = this.store.getSelectedOptions()
+      const after = [] as Option[]
+
+      // Add beforeChange callback
+      if (this.callbacks.beforeChange) {
+        shouldDelete = this.callbacks.beforeChange(after, before) === true
+      }
+
+      if (shouldDelete) {
+        this.callbacks.setSelected([''])
+
+        // Check if we need to close the dropdown
+        if (this.settings.closeOnSelect) {
+          this.callbacks.close()
+        }
+
+        // Run afterChange callback
+        if (this.callbacks.afterChange) {
+          this.callbacks.afterChange(after)
+        }
+      }
     }
 
     // Add deselect svg
@@ -466,8 +490,11 @@ export default class Render {
 
     // Only add deletion if the option is not mandatory
     if (!option.mandatory) {
+      // Create delete div element
       const deleteDiv = document.createElement('div')
       deleteDiv.classList.add(this.classes.valueDelete)
+
+      // Add delete onclick event
       deleteDiv.onclick = (e: Event) => {
         e.preventDefault()
         e.stopPropagation()
@@ -656,13 +683,18 @@ export default class Render {
 
     // If addable is enabled, add the addable div
     if (this.callbacks.addable) {
+      // Add main class
       addable.classList.add(this.classes.addable)
+
+      // Add svg icon
       const plus = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
       plus.setAttribute('viewBox', '0 0 100 100')
       const plusPath = document.createElementNS('http://www.w3.org/2000/svg', 'path')
       plusPath.setAttribute('d', this.classes.addablePath)
       plus.appendChild(plusPath)
       addable.appendChild(plus)
+
+      // Add click event to addable div
       addable.onclick = (e: Event) => {
         e.preventDefault()
         e.stopPropagation()
@@ -679,35 +711,61 @@ export default class Render {
           return
         }
 
+        // Run finish will be ran at the end of the addable function.
+        // Reason its in a function is so we can run it after the
+        // addable function is done for promise based addables
+        const runFinish = (oo: OptionOptional) => {
+          let newOption = new Option(oo)
+
+          // Call addOption to add the new option
+          this.callbacks.addOption(newOption)
+
+          // set selected value for single and multiple
+          if (this.settings.isMultiple) {
+            let values = this.store.getSelected()
+            values.push(newOption.value)
+            this.callbacks.setSelected(values)
+          } else {
+            this.callbacks.setSelected([newOption.value])
+          }
+
+          // Clear search
+          this.callbacks.search('')
+
+          // Close it only if closeOnSelect = true
+          if (this.settings.closeOnSelect) {
+            setTimeout(() => {
+              // Give it a little padding for a better looking animation
+              this.callbacks.close()
+            }, 100)
+          }
+        }
+
         // Call addable callback
         const addableValue = this.callbacks.addable(inputValue)
 
-        // If the addableValue is a string, we will add it as a new option
-        // Otherwise we will assume it is an option object
-        if (typeof addableValue === 'string') {
-          this.callbacks.addOption(
-            new Option({
-              text: addableValue,
-              value: addableValue,
-            }),
-          )
+        // If addableValue is a promise, wait for it to resolve
+        if (addableValue instanceof Promise) {
+          addableValue.then((value) => {
+            if (typeof value === 'string') {
+              runFinish({
+                text: value,
+                value: value,
+              })
+            } else {
+              runFinish(value)
+            }
+          })
+        } else if (typeof addableValue === 'string') {
+          runFinish({
+            text: addableValue,
+            value: addableValue,
+          })
         } else {
-          this.callbacks.addOption(new Option(addableValue))
+          runFinish(addableValue)
         }
 
-        // Add option to selected
-        this.callbacks.setSelected([inputValue])
-
-        // Clear search
-        this.callbacks.search('')
-
-        // Close it only if closeOnSelect = true
-        if (this.settings.closeOnSelect) {
-          setTimeout(() => {
-            // Give it a little padding for a better looking animation
-            this.callbacks.close()
-          }, 100)
-        }
+        return
       }
       main.appendChild(addable)
 

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

@@ -1,40 +1,127 @@
 import typescript from '@rollup/plugin-typescript'
-import { terser } from 'rollup-plugin-terser'
+import babel from '@rollup/plugin-babel'
+import commonjs from '@rollup/plugin-commonjs'
+import resolve from '@rollup/plugin-node-resolve'
+import terser from '@rollup/plugin-terser'
 
-export default {
-  input: './index.ts',
-  output: [
-    // Default umd
-    {
-      name: 'SlimSelect',
-      file: '../../dist/slimselect.js',
-      format: 'umd',
-      sourcemap: true,
+export default [
+  // CommonJS (for Node) and ES module (for bundlers) build
+  {
+    input: './index.ts',
+    output: {
+      file: '../../dist/slimselect.cjs.js',
+      format: 'cjs',
+      exports: 'default',
     },
-    {
-      name: 'SlimSelect',
+    plugins: [
+      typescript(),
+      resolve(),
+      commonjs(),
+      babel({
+        babelHelpers: 'bundled',
+        exclude: 'node_modules/**',
+        babelrc: false,
+        presets: [
+          [
+            '@babel/env',
+            {
+              modules: false,
+              useBuiltIns: 'usage',
+              targets: 'maintained node versions',
+            },
+          ],
+        ],
+      }),
+    ],
+  },
+
+  // UMD build for browsers
+  {
+    input: './index.ts',
+    output: [
+      {
+        name: 'SlimSelect',
+        file: '../../dist/slimselect.js',
+        format: 'umd',
+      },
+      {
+        name: 'SlimSelect',
+        file: '../../dist/slimselect.umd.js',
+        format: 'umd',
+      },
+    ],
+    plugins: [
+      typescript(),
+      resolve(),
+      commonjs(),
+      babel({
+        babelHelpers: 'bundled',
+        exclude: 'node_modules/**',
+      }),
+    ],
+  },
+
+  // UMD build for browsers minified with terser
+  {
+    input: './index.ts',
+    output: [
+      {
+        name: 'SlimSelect',
+        file: '../../dist/slimselect.min.js',
+        format: 'umd',
+      },
+      {
+        name: 'SlimSelect',
+        file: '../../dist/slimselect.umd.min.js',
+        format: 'umd',
+      },
+    ],
+    plugins: [
+      typescript(),
+      resolve(),
+      commonjs(),
+      babel({
+        babelHelpers: 'bundled',
+        exclude: 'node_modules/**',
+      }),
+      terser(),
+    ],
+  },
+
+  // ES module build for modern browsers
+  {
+    input: './index.ts',
+    output: {
       file: '../../dist/slimselect.es.js',
       format: 'es',
-      sourcemap: true,
     },
-    {
-      name: 'SlimSelect',
-      file: '../../dist/slimselect.cjs.js',
-      format: 'cjs',
-      sourcemap: true,
-    },
-    {
+    plugins: [
+      typescript(),
+      resolve(),
+      commonjs(),
+      babel({
+        babelHelpers: 'bundled',
+        exclude: 'node_modules/**',
+      }),
+    ],
+  },
+
+  // IIFE build for modern browsers
+  {
+    input: './index.ts',
+    output: {
       name: 'SlimSelect',
       file: '../../dist/slimselect.global.js',
       format: 'iife',
-      sourcemap: true,
-    },
-    {
-      name: 'SlimSelect',
-      file: '../../dist/slimselect.umd.js',
-      format: 'umd',
-      sourcemap: true,
     },
-  ],
-  plugins: [typescript(), terser()],
-}
+    plugins: [
+      typescript(),
+      resolve(),
+      commonjs(),
+      babel({
+        babelHelpers: 'bundled',
+        exclude: 'node_modules/**',
+      }),
+    ],
+  },
+]

package/src/slim-select/select.ts

@@ -1,5 +1,5 @@
-import { generateID, kebabCase } from './helper'
-import { DataArray, DataObject, Optgroup, Option } from './store'
+import { generateID, kebabCase } from './helpers'
+import { DataArray, Optgroup, Option } from './store'
 
 export default class Select {
   public select: HTMLSelectElement
@@ -86,7 +86,11 @@ export default class Select {
 
   private observeWrapper(mutations: MutationRecord[]): void {
     if (this.onSelectChange) {
+      // Just in case this triggers a change in the select
+      // we want to stop listening to it while we run onSelectChange
+      this.changeListen(false)
       this.onSelectChange(this.getData())
+      this.changeListen(true)
     }
   }
 
@@ -99,16 +103,21 @@ export default class Select {
     }
 
     // If anything changes in the select then update the data
-    this.observer = new MutationObserver(this.observeWrapper)
+    this.observer = new MutationObserver(this.observeWrapper.bind(this))
   }
 
+  // Start observing the select
   private connectObserver(): void {
     if (this.observer) {
       this.observer.observe(this.select, {
-        attributes: true,
+        // For now we only care about if the children change
         childList: true,
-        characterData: true,
-        subtree: true,
+
+        // We dont care about attributes for now
+        // might need to add this later
+        // attributes: true,
+        // characterData: true,
+        // subtree: true,
       })
     }
   }

package/src/slim-select/settings.ts

@@ -1,4 +1,4 @@
-import { generateID } from './helper'
+import { generateID } from './helpers'
 
 export type SettingsPartial = Partial<Settings>
 

package/src/slim-select/slimselect.scss

@@ -150,12 +150,16 @@
       .ss-value-delete {
         display: flex;
         align-items: center;
+        height: var(--ss-spacing-l);
         width: var(--ss-spacing-l);
         padding: var(--ss-spacing-s) var(--ss-spacing-m);
         cursor: pointer;
         border-left: solid 1px var(--ss-bg-color);
 
         svg {
+          height: var(--ss-spacing-l);
+          width: var(--ss-spacing-l);
+
           path {
             fill: none;
             stroke: var(--ss-bg-color);
@@ -178,6 +182,9 @@
     margin: 0 var(--ss-spacing-m) 0 var(--ss-spacing-m);
 
     svg {
+      width: 8px;
+      height: 8px;
+
       path {
         fill: none;
         stroke: var(--ss-font-color);

package/src/slim-select/store.ts

@@ -1,4 +1,4 @@
-import { generateID } from './helper'
+import { generateID } from './helpers'
 
 export type DataArray = DataObject[]
 export type DataObject = Optgroup | Option