add slimselect to select elements with user content

assets/css/app.scss

@@ -8,6 +8,8 @@ $fa-font-path: "@fortawesome/fontawesome-free/webfonts";
 @import "@fortawesome/fontawesome-free/scss/solid";
 @import "@fortawesome/fontawesome-free/scss/brands";
 
+@import "slim-select/styles";
+
 @import "components";
 
 /* fix firefox scrollbars */
@@ -152,3 +154,57 @@ $fa-font-path: "@fortawesome/fontawesome-free/webfonts";
   0% { opacity: 1; }
   100% { opacity: 0; }
 }
+
+.ss-main {
+  @apply input;
+}
+
+.ss-main.input-primary {
+  @apply border-primary-500 hover:border-primary-600 active:border-primary-600;
+}
+
+.ss-content {
+  @apply input;
+}
+
+.ss-content.input-primary {
+  @apply border-primary-500 hover:border-primary-600 active:border-primary-600;
+}
+
+.ss-content.ss-open-above {
+  border-bottom-left-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+
+.ss-content.ss-open-below {
+  border-top-left-radius: 0px;
+  border-top-right-radius: 0px;
+}
+
+.ss-search input[type="search"] {
+  @apply input;
+}
+
+.ss-content.input-primary .ss-search input[type="search"] {
+  @apply border-primary-500 hover:border-primary-600 active:border-primary-600;
+}
+
+.ss-content.ss-open-above .ss-search {
+  padding: var(--ss-spacing-l) 0 0 0;
+}
+
+.ss-content.ss-open-below .ss-search {
+  padding: 0 0 var(--ss-spacing-l) 0;
+}
+
+.ss-content.ss-open-above .ss-list > *:not(:first-child) {
+  margin: var(--ss-spacing-l) 0 0 0;
+}
+
+.ss-content.ss-open-below .ss-list > *:not(:last-child) {
+  margin: 0 0 var(--ss-spacing-l) 0;
+}
+
+.ss-content .ss-list .ss-option {
+  border-radius: var(--ss-border-radius);
+}

assets/js/app.js

@@ -24,15 +24,16 @@ import 'phoenix_html'
 // Establish Phoenix Socket and LiveView configuration.
 import { Socket } from 'phoenix'
 import { LiveSocket } from 'phoenix_live_view'
-import topbar from 'topbar'
-import ShotLogChart from './shot_log_chart'
 import Date from './date'
 import DateTime from './datetime'
+import ShotLogChart from './shot_log_chart'
+import SlimSelect from './slim_select'
+import topbar from 'topbar'
 
 const csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute('content')
 const liveSocket = new LiveSocket('/live', Socket, {
   params: { _csrf_token: csrfToken },
-  hooks: { Date, DateTime, ShotLogChart }
+  hooks: { Date, DateTime, ShotLogChart, SlimSelect }
 })
 
 // Show progress bar on live navigation and form submits

assets/js/slim_select.js

@@ -0,0 +1,23 @@
+import SlimSelect from 'slim-select'
+
+export default {
+  initalizeSlimSelect (el) {
+    // eslint-disable-next-line no-new
+    el.slimselect = new SlimSelect({ select: el })
+
+    const main = document.querySelector(`.ss-main[data-id="${el.dataset.id}"]`)
+    main.setAttribute('id', `${el.dataset.id}-main`)
+    main.setAttribute('phx-update', 'ignore')
+
+    const content = document.querySelector(`.ss-content[data-id="${el.dataset.id}"]`)
+    content.setAttribute('id', `${el.dataset.id}-content`)
+    content.setAttribute('phx-update', 'ignore')
+  },
+  updated () {
+    this.el.slimselect?.destroy()
+    this.initalizeSlimSelect(this.el)
+  },
+  mounted () {
+    this.initalizeSlimSelect(this.el)
+  }
+}

assets/package-lock.json

@@ -13,6 +13,7 @@
         "phoenix": "file:../deps/phoenix",
         "phoenix_html": "file:../deps/phoenix_html",
         "phoenix_live_view": "file:../deps/phoenix_live_view",
+        "slim-select": "^2.9.2",
         "topbar": "^3.0.0"
       },
       "devDependencies": {
@@ -12197,6 +12198,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/slim-select": {
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/slim-select/-/slim-select-2.9.2.tgz",
+      "integrity": "sha512-3Kxgj7Nk7sHHEu8Xzq70pkNNNdKmOr3OwKOjqSzcGeJ9j2hCOxIvIdYcAqKUM1eRnl+3ycKKK/YrzsjxrxAoZg==",
+      "license": "MIT"
+    },
     "node_modules/sockjs": {
       "version": "0.3.24",
       "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz",

assets/package.json

@@ -20,6 +20,7 @@
     "phoenix": "file:../deps/phoenix",
     "phoenix_html": "file:../deps/phoenix_html",
     "phoenix_live_view": "file:../deps/phoenix_live_view",
+    "slim-select": "^2.9.2",
     "topbar": "^3.0.0"
   },
   "devDependencies": {