dbdoc_engine 0.1.0

data/app/javascript/dbdoc_engine/controllers/select2_controller.js

@@ -0,0 +1,67 @@
+// app/javascript/controllers/select2_controller.js
+import { Controller } from "@hotwired/stimulus"
+
+// Load Select2 CSS
+const loadCSS = () => {
+  const link = document.createElement('link')
+  link.rel = 'stylesheet'
+  link.href = 'https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css'
+  document.head.appendChild(link)
+}
+
+// Load jQuery + Select2 JS
+const loadJS = (src) =>
+  new Promise((resolve) => {
+    const script = document.createElement('script')
+    script.src = src
+    script.onload = resolve
+    document.head.appendChild(script)
+  })
+
+let assetsLoaded = false
+
+export default class extends Controller {
+  static targets = ["select"]
+  static values = { placeholder: String }
+
+  async connect() {
+    if (!assetsLoaded) {
+      loadCSS()
+      await loadJS('https://code.jquery.com/jquery-3.7.1.min.js')
+      await loadJS('https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js')
+      assetsLoaded = true
+    }
+
+    const placeholder = this.hasPlaceholderValue ? this.placeholderValue :
+      (this.selectTarget.dataset.select2PlaceholderValue || 'Select an option')
+
+    $(this.selectTarget).select2({
+      placeholder,
+      allowClear: true,
+      width: '100%'
+    })
+
+    $(this.selectTarget).on('select2:select select2:clear', () => {
+      this.selectTarget.dispatchEvent(new Event('change', { bubbles: true }))
+    })
+  }
+
+  disconnect() {
+    if (window.$) {
+      $(this.selectTarget).select2('destroy')
+    }
+  }
+
+  refresh() {
+    if (window.$) {
+      $(this.selectTarget).select2('destroy')
+      const placeholder = this.hasPlaceholderValue ? this.placeholderValue :
+        (this.selectTarget.dataset.select2PlaceholderValue || 'Select an option')
+      $(this.selectTarget).select2({
+        placeholder,
+        allowClear: true,
+        width: '100%'
+      })
+    }
+  }
+}