Added searchable multiselect

bcgov · Nov 27, 2024 · 1987cbe · 1987cbe
1 parent 1e77679
commit 1987cbe
Show file tree

Hide file tree

Showing 4 changed files with 112 additions and 164 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -50,6 +50,7 @@
     "postinstall-postinstall": "^2.1.0",
     "process": "^0.11.10",
     "rrule": "^2.6.8",
+    "select2": "^4.1.0-rc.0",
     "semantic-ui-css": "git+https://github.com/Semantic-Org/Semantic-UI-CSS.git",
     "socket.io-client": "^4.0.0",
     "stream-browserify": "^3.0.0",
@@ -61,6 +62,7 @@
     "vue-bootstrap-typeahead": "^0.2.6",
     "vue-class-component": "^7.2.3",
     "vue-fragment": "^1.5.2",
+    "vue-multiselect": "^2.1.9",
     "vue-property-decorator": "^9.1.2",
     "vue-router": "3.5.1",
     "vue-search-select": "^2.9.6",

diff --git a/frontend/src/assets/css/q.css b/frontend/src/assets/css/q.css
@@ -265,11 +265,13 @@ input#app_timepicker_id {
   left: unset;
 }
 
-.custom-dropdown > a {
-  padding: 0 !important;
+
+.multiselect__option--highlight {
+  background-color: #ffffff;
+}
+
+.custom-multiselect .multiselect__option {
+  padding: 0;
+  text-wrap: wrap;
 }
 
-.dropdown-scrollable .dropdown-menu {
-  max-height: 300px;
-  overflow-y: auto;
-}