add slimselect to select elements with user content

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)
+  }
+}