Merge pull request #631 from wenzhixin/feature/vue3

Draft: Feature/vue3

README.md

@@ -9,6 +9,9 @@ Multiple select is a jQuery plugin to select multiple elements with checkboxes :
 
 To get started checkout examples and documentation at <http://multiple-select.wenzhixin.net.cn>.
 
+> [!NOTE]
+> Version 2.x of this package is compatible with Vue 3 default. If you're still on Vue 2, install the previous version with `npm i multiple-select@1`
+
 ## Examples
 
 * http://multiple-select.wenzhixin.net.cn/examples

package.json

@@ -2,7 +2,7 @@
   "name": "multiple-select",
   "main": "dist/multiple-select.min.js",
   "module": "dist/multiple-select-es.min.js",
-  "version": "1.7.0",
+  "version": "2.0.9",
   "type": "module",
   "title": "Multiple Select",
   "description": "Multiple select is a jQuery plugin to select multiple elements with checkboxes :).",
@@ -16,7 +16,7 @@
     "js:build:min": "rollup -c --config-env PRODUCTION",
     "js:build:banner": "find dist -name '*.min.js' -exec headr {} -o {} --version --homepage --author --license \\;",
     "js:build": "run-s js:build:*",
-    "css:build:scss": "node-sass --output-style expanded src -o src",
+    "css:build:scss": "sass --style=expanded src:src",
     "css:build:base": "mkdir -p dist/themes && find src -name '*.css' | sed -e 'p;s/src/dist/' | xargs -n2 cp",
     "css:build:min": "find dist -name '*.css' | sed -e 'p;s/.css/.min.css/' | xargs -n2 cssmin",
     "css:build:banner": "find dist -name '*.min.css' -exec headr {} -o {} --version --homepage --author --license \\;",
@@ -25,7 +25,7 @@
     "build": "run-s lint clean *:build",
     "docs": "cd site/website && yarn install && yarn build",
     "docs-server": "cd site/website && yarn start",
-    "css:dev": "node-sass --watch --output-style expanded src -o src",
+    "css:dev": "sass --watch --style=expanded src:src",
     "dev": "yarn css:dev & yarn docs-server"
   },
   "peerDependencies": {
@@ -63,7 +63,7 @@
     "getopts": "^2.3.0",
     "glob": "^10.3.10",
     "headr": "^0.0.4",
-    "node-sass": "^9.0.0",
+    "sass": "^1.69.5",
     "npm-run-all": "^4.1.5",
     "rollup": "^4.5.1",
     "rollup-plugin-inject": "^3.0.2",

src/MultipleSelect.js

@@ -2,11 +2,12 @@ import Constants from './constants/index.js'
 import VirtualScroll from './virtual-scroll/index.js'
 import {
   compareObjects,
-  removeDiacritics,
   findByParam,
-  setDataKeys,
+  getDocumentClickEvent,
+  removeDiacritics,
   removeUndefined,
-  getDocumentClickEvent
+  setDataKeys,
+  toRaw
 } from './utils/index.js'
 
 class MultipleSelect {
@@ -158,7 +159,15 @@ class MultipleSelect {
               value: it
             }
           }
-          return it
+
+          if (it.children?.length) {
+            return {
+              ...it,
+              children: it.children.map(it => ({ ...it }))
+            }
+          }
+
+          return { ...it }
         })
       } else if (typeof this.options.data === 'object') {
         for (const [value, text] of Object.entries(this.options.data)) {
@@ -199,8 +208,8 @@ class MultipleSelect {
       row.disabled = groupDisabled || elm.disabled
       row.classes = elm.getAttribute('class') || ''
       row.title = elm.getAttribute('title') || ''
-      if ($elm.data('value')) {
-        row._value = $elm.data('value') // value for object
+      if (elm._value || $elm.data('value')) {
+        row._value = elm._value || $elm.data('value') // value for object
       }
       if (Object.keys($elm.data()).length) {
         row._data = $elm.data()
@@ -464,11 +473,7 @@ class MultipleSelect {
     const customStyle = this.options.styler(row)
     const style = customStyle ? `style="${customStyle}"` : ''
 
-    classes += row.classes || ''
-
-    if (level && this.options.single) {
-      classes += `option-level-${level} `
-    }
+    classes += `${row.classes || ''} option-level-${level} `
 
     if (row.divider) {
       return '<li class="option-divider"/>'
@@ -807,7 +812,7 @@ class MultipleSelect {
 
     if (this.$selectAll.length) {
       this.$selectAll.prop('checked', this.allSelected)
-        .closest('li').toggle(!noResult)
+        .closest('li').toggleClass('selected', this.allSelected).toggle(!noResult)
     }
 
     this.$noResults.toggle(noResult)
@@ -880,7 +885,9 @@ class MultipleSelect {
         if (type === 'text') {
           selected = values.includes($('<div>').html(row.text).text().trim())
         } else {
-          selected = values.includes(row._value || row.value)
+          const value = toRaw(row._value || row.value)
+
+          selected = values.some(item => toRaw(item) === value)
           if (!selected && row.value === `${+row.value}`) {
             selected = values.includes(+row.value)
           }

src/multiple-select.scss

@@ -228,6 +228,10 @@
         }
       }
 
+      &.group ~ li.option-level-1:not(.hide-radio) > label {
+        padding-left: 40px;
+      }
+
       &.option-divider {
         padding: 0;
         border-top: 1px solid #e9ecef;

src/utils/index.js

@@ -15,6 +15,32 @@ const compareObjects = (objectA, objectB, compareLength) => {
   return true
 }
 
+const findByParam = (data, param, value) => {
+  for (const row of data) {
+    if (
+      row[param] === value ||
+      row[param] === `${+row[param]}` && +row[param] === value
+    ) {
+      return row
+    }
+    if (row.type === 'optgroup') {
+      for (const child of row.children) {
+        if (
+          child[param] === value ||
+          child[param] === `${+child[param]}` && +child[param] === value
+        ) {
+          return child
+        }
+      }
+    }
+  }
+}
+
+const getDocumentClickEvent = (id = '') => {
+  id = id || `${+new Date()}${~~(Math.random() * 1000000)}`
+  return `click.multiple-select-${id}`
+}
+
 const removeDiacritics = str => {
   if (str.normalize) {
     return str.normalize('NFD').replace(/[\u0300-\u036F]/g, '')
@@ -111,6 +137,11 @@ const removeDiacritics = str => {
   }, str)
 }
 
+const removeUndefined = obj => {
+  Object.keys(obj).forEach(key => obj[key] === undefined ? delete obj[key] : '')
+  return obj
+}
+
 const setDataKeys = data => {
   let total = 0
 
@@ -140,42 +171,19 @@ const setDataKeys = data => {
   return total
 }
 
-const findByParam = (data, param, value) => {
-  for (const row of data) {
-    if (
-      row[param] === value ||
-      row[param] === `${+row[param]}` && +row[param] === value
-    ) {
-      return row
-    }
-    if (row.type === 'optgroup') {
-      for (const child of row.children) {
-        if (
-          child[param] === value ||
-          child[param] === `${+child[param]}` && +child[param] === value
-        ) {
-          return child
-        }
-      }
-    }
+const toRaw = proxy => {
+  if (proxy && typeof proxy === 'object' && proxy.__v_raw) {
+    return proxy.__v_raw
   }
-}
-
-const removeUndefined = obj => {
-  Object.keys(obj).forEach(key => obj[key] === undefined ? delete obj[key] : '')
-  return obj
-}
-
-const getDocumentClickEvent = (id = '') => {
-  id = id || `${+new Date()}${~~(Math.random() * 1000000)}`
-  return `click.multiple-select-${id}`
+  return proxy
 }
 
 export {
   compareObjects,
-  removeDiacritics,
-  setDataKeys,
   findByParam,
+  getDocumentClickEvent,
+  removeDiacritics,
   removeUndefined,
-  getDocumentClickEvent
+  setDataKeys,
+  toRaw
 }