slim-select 2.10.0 → 2.12.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "slim-select",
   "description": "Slim advanced select dropdown",
-  "version": "2.10.0",
+  "version": "2.12.0",
   "author": "Brian Voelker <brian@webiswhatido.com> (http://webiswhatido.com)",
   "homepage": "https://slimselectjs.com",
   "license": "MIT",
@@ -28,9 +28,9 @@
   "sass": "src/slim-select/slimselect.scss",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/slimselect.js",
-      "require": "./dist/slimselect.umd.js",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/slimselect.umd.js"
     },
     "./*": {
       "types": "./dist/*.d.ts"
@@ -51,45 +51,45 @@
     "test:coverage": "jest --coverage"
   },
   "devDependencies": {
-    "@jest/globals": "^29.7.0",
+    "@jest/globals": "^30.0.2",
     "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^28.0.1",
-    "@rollup/plugin-node-resolve": "^15.3.0",
-    "@rollup/plugin-replace": "^6.0.1",
+    "@rollup/plugin-commonjs": "^28.0.6",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-replace": "^6.0.2",
     "@rollup/plugin-terser": "^0.4.4",
-    "@rollup/plugin-typescript": "^12.1.1",
+    "@rollup/plugin-typescript": "^12.1.3",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/user-event": "^14.5.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/downloadjs": "^1.4.6",
-    "@types/jest": "^29.5.14",
-    "@typescript-eslint/eslint-plugin": "^8.8.1",
-    "@typescript-eslint/parser": "^8.8.1",
-    "@vitejs/plugin-vue": "^5.2.0",
+    "@types/jest": "^30.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.34.1",
+    "@typescript-eslint/parser": "^8.34.1",
+    "@vitejs/plugin-vue": "^5.2.4",
     "clipboard": "^2.0.11",
     "downloadjs": "^1.4.7",
-    "eslint": "^9.12.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.2.1",
+    "eslint": "^9.29.0",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-prettier": "^5.5.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.7.0",
+    "jest": "^30.0.2",
     "jest-canvas-mock": "^2.5.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "prettier": "^3.3.3",
-    "prismjs": "^1.29.0",
+    "jest-environment-jsdom": "^30.0.2",
+    "prettier": "^3.5.3",
+    "prismjs": "^1.30.0",
     "rimraf": "^6.0.1",
-    "rollup": "^4.27.3",
+    "rollup": "^4.44.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-typescript2": "^0.36.0",
     "rollup-plugin-vue": "^6.0.0",
-    "sass": "^1.81.0",
-    "ts-jest": "^29.2.5",
+    "sass": "^1.89.2",
+    "ts-jest": "^29.4.0",
     "tslib": "^2.8.1",
-    "typescript": "^5.6.3",
-    "vite": "^5.4.11",
-    "vite-plugin-dts": "^4.3.0",
-    "vue": "^3.5.13",
-    "vue-router": "^4.4.5",
-    "vue-tsc": "^2.1.10",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.5",
+    "vite-plugin-dts": "^4.5.4",
+    "vue": "^3.5.17",
+    "vue-router": "^4.5.1",
+    "vue-tsc": "^2.2.10",
     "vuex": "^4.0.2"
   }
 }

package/src/slim-select/render.test.ts

@@ -200,7 +200,7 @@ describe('render module', () => {
 
       expect(render.main.main.role).toBe('combobox')
       expect(render.main.main.getAttribute('aria-haspopup')).toBe('listbox')
-      expect(render.main.main.getAttribute('aria-controls')).toBe(render.content.main.id)
+      expect(render.main.main.getAttribute('aria-controls')).toBe(render.content.main.dataset.id ?? '')
       expect(render.main.main.getAttribute('aria-expanded')).toBe('false')
       expect(render.content.main.getAttribute('role')).toBe('listbox')
     })
@@ -1142,6 +1142,104 @@ describe('render module', () => {
     })
   })
 
+  describe('range selection', () => {
+    let render: Render
+    let afterChangeMock: jest.Mock
+
+    beforeEach(() => {
+      // create a new store with 3 options
+      const store = new Store('multiple', [
+        { text: 'test1', value: 'test1' },
+        { text: 'test2', value: 'test2' },
+        { text: 'test3', value: 'test3' }
+      ])
+
+      const settings = new Settings()
+      const classes = new CssClasses()
+
+      afterChangeMock = jest.fn(() => {})
+
+      const callbacks = {
+        open: () => {},
+        close: () => {},
+        addSelected: () => {},
+        setSelected: (value) => {
+          store.setSelectedBy('id', typeof value === 'string' ? [value] : value)
+        },
+        addOption: () => {},
+        search: () => {},
+        afterChange: afterChangeMock
+      } as Callbacks
+
+      render = new Render(settings, classes, store, callbacks)
+      render.settings.isMultiple = true
+      render.settings.closeOnSelect = false
+    })
+
+    test('click holding shift key selects range from last clicked to current', () => {
+      render.renderOptions(render.store.getDataOptions())
+
+      const opts = render.getOptions(false, false, true)
+      expect(opts).toHaveLength(3)
+
+      // click on the first option
+      opts[0].dispatchEvent(new MouseEvent('click'))
+      expect(afterChangeMock).toHaveBeenCalledWith([expect.objectContaining({ value: 'test1' })])
+
+      // click on the last option holding the shift key
+      opts[2].dispatchEvent(new MouseEvent('click', { shiftKey: true }))
+
+      // check that also the middle value is selected
+      expect(afterChangeMock).toHaveBeenCalledWith([
+        expect.objectContaining({ value: 'test1' }),
+        expect.objectContaining({ value: 'test2' }),
+        expect.objectContaining({ value: 'test3' })
+      ])
+    })
+
+    test('click holding shift key selects range from current to last clicked', () => {
+      render.renderOptions(render.store.getDataOptions())
+
+      const opts = render.getOptions(false, false, true)
+      expect(opts).toHaveLength(3)
+
+      // click on the last option
+      opts[2].dispatchEvent(new MouseEvent('click'))
+      expect(afterChangeMock).toHaveBeenCalledWith([expect.objectContaining({ value: 'test3' })])
+
+      // click on the first option holding the shift key
+      opts[0].dispatchEvent(new MouseEvent('click', { shiftKey: true }))
+
+      // check that also the middle value is selected
+      expect(afterChangeMock).toHaveBeenCalledWith([
+        expect.objectContaining({ value: 'test3' }),
+        expect.objectContaining({ value: 'test1' }),
+        expect.objectContaining({ value: 'test2' })
+      ])
+    })
+
+    test('range selection is ignored if range length is greater than maxSelected', () => {
+      render.settings.maxSelected = 2
+      render.renderOptions(render.store.getDataOptions())
+
+      const opts = render.getOptions(false, false, true)
+      expect(opts).toHaveLength(3)
+
+      // click on the first option
+      opts[0].dispatchEvent(new MouseEvent('click'))
+      expect(afterChangeMock).toHaveBeenCalledWith([expect.objectContaining({ value: 'test1' })])
+
+      // click on the last option holding the shift key
+      opts[2].dispatchEvent(new MouseEvent('click', { shiftKey: true }))
+
+      // check that the middle value is NOT selected
+      expect(afterChangeMock).toHaveBeenCalledWith([
+        expect.objectContaining({ value: 'test1' }),
+        expect.objectContaining({ value: 'test3' })
+      ])
+    })
+  })
+
   describe('destroy', () => {
     test('elements get removed', () => {
       expect(render.main.main).toBeInstanceOf(HTMLDivElement)

package/src/slim-select/render.ts

@@ -50,6 +50,8 @@ export default class Render {
   public settings: Settings
   public store: Store
   public callbacks: Callbacks
+  // Used to compute the range selection
+  private lastSelectedOption: Option | null
 
   // Elements
   public main: Main
@@ -63,6 +65,7 @@ export default class Render {
     this.settings = settings
     this.classes = classes
     this.callbacks = callbacks
+    this.lastSelectedOption = null
 
     this.main = this.mainDiv()
     this.content = this.contentDiv()
@@ -162,7 +165,7 @@ export default class Render {
   public updateAriaAttributes() {
     this.main.main.role = 'combobox'
     this.main.main.setAttribute('aria-haspopup', 'listbox')
-    this.main.main.setAttribute('aria-controls', this.content.main.id)
+    this.main.main.setAttribute('aria-controls', this.content.main.dataset.id ?? '')
     this.main.main.setAttribute('aria-expanded', 'false')
     this.content.main.setAttribute('role', 'listbox')
     // do an aria-labelledby here maybe
@@ -517,6 +520,7 @@ export default class Render {
       // Create delete div element
       const deleteDiv = document.createElement('div')
       deleteDiv.classList.add(this.classes.valueDelete)
+      deleteDiv.setAttribute('tabindex', '0')  // Make the div focusable for tab navigation
 
       // Add delete onclick event
       deleteDiv.onclick = (e: Event) => {
@@ -584,6 +588,13 @@ export default class Render {
       deleteDiv.appendChild(deleteSvg)
 
       value.appendChild(deleteDiv)
+
+      // Add keydown event listener for keyboard navigation (Enter key)
+      deleteDiv.onkeydown = (e) => {
+        if (e.key === 'Enter') {
+          deleteDiv.click()  // Trigger the click event when Enter is pressed
+        }
+      }
     }
 
     return value
@@ -983,6 +994,7 @@ export default class Render {
     }
 
     // Append individual options to div container
+    const fragment = document.createDocumentFragment()
     for (const d of data) {
       // Create optgroup
       if (d instanceof Optgroup) {
@@ -1146,17 +1158,18 @@ export default class Render {
         // Loop through options
         for (const o of d.options) {
           optgroupEl.appendChild(this.option(o))
+          fragment.appendChild(optgroupEl)
         }
-
-        // Add optgroup to list
-        this.content.list.appendChild(optgroupEl)
       }
 
       // Create option
       if (d instanceof Option) {
-        this.content.list.appendChild(this.option(d as Option))
+        fragment.appendChild(this.option(d as Option))
       }
     }
+
+    // Append fragment to list
+    this.content.list.appendChild(fragment)
   }
 
   // Create option div element
@@ -1264,6 +1277,27 @@ export default class Render {
         } else {
           // If not selected after would add
           after = before.concat(option)
+
+          // Handles range selection
+          if (!this.settings.closeOnSelect) {
+            if (e.shiftKey && this.lastSelectedOption) {
+              const options = this.store.getDataOptions()
+              let lastClickedOptionIndex = options.findIndex((o: Option) => o.id === this.lastSelectedOption!.id)
+              let currentOptionIndex = options.findIndex((o: Option) => o.id === option.id)
+              if (lastClickedOptionIndex >= 0 && currentOptionIndex >= 0) {
+                // Select the range from the last clicked option to the current one, or vice versa.
+                const startIndex = Math.min(lastClickedOptionIndex, currentOptionIndex)
+                const endIndex = Math.max(lastClickedOptionIndex, currentOptionIndex)
+                const afterRange = options.slice(startIndex, endIndex + 1)
+                if (afterRange.length > 0 && afterRange.length < this.settings.maxSelected) {
+                  // Set the union between the current range and the previously selected values, removing duplicates
+                  after = before.concat(afterRange.filter((a) => !before.find((b) => b.id === a.id)))
+                }
+              }
+            } else if (!option.selected) {
+              this.lastSelectedOption = option
+            }
+          }
         }
       }
 

package/src/slim-select/select.ts

@@ -196,6 +196,7 @@ export default class Select {
       value: option.value,
       text: option.text,
       html: option.dataset && option.dataset.html ? option.dataset.html : '',
+      defaultSelected: option.defaultSelected,
       selected: option.selected,
       display: option.style.display !== 'none',
       disabled: option.disabled,
@@ -378,9 +379,8 @@ export default class Select {
     if (info.html !== '') {
       optionEl.setAttribute('data-html', info.html)
     }
-    if (info.selected) {
-      optionEl.selected = info.selected
-    }
+    optionEl.defaultSelected = info.defaultSelected
+    optionEl.selected = info.selected // Explicitly set selected because defaultSelected: true sets selected to true
     if (info.disabled) {
       optionEl.disabled = true
     }

package/src/slim-select/store.ts

@@ -49,6 +49,7 @@ export interface OptionOptional {
   text: string // Required
   html?: string
   selected?: boolean
+  defaultSelected?: boolean
   display?: boolean
   disabled?: boolean
   mandatory?: boolean
@@ -63,6 +64,7 @@ export class Option {
   value: string
   text: string
   html: string
+  defaultSelected: boolean
   selected: boolean
   display: boolean
   disabled: boolean
@@ -77,6 +79,7 @@ export class Option {
     this.value = option.value === undefined ? option.text : option.value
     this.text = option.text || ''
     this.html = option.html || ''
+    this.defaultSelected = option.defaultSelected !== undefined ? option.defaultSelected : false
     this.selected = option.selected !== undefined ? option.selected : false
     this.display = option.display !== undefined ? option.display : true
     this.disabled = option.disabled !== undefined ? option.disabled : false