1 files changed, 42 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/listbox_input/init_listbox_inputs.js b/app/assets/javascripts/vue_shared/components/listbox_input/init_listbox_inputs.js
new file mode 100644
index 00000000000..ad89b78b521
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/listbox_input/init_listbox_inputs.js
@@ -0,0 +1,42 @@
+import Vue from 'vue';
+import ListboxInput from '~/vue_shared/components/listbox_input/listbox_input.vue';
+
+export const initListboxInputs = () => {
+  const els = [...document.querySelectorAll('.js-listbox-input')];
+
+  els.forEach((el, index) => {
+    const { label, description, name, defaultToggleText, value = null } = el.dataset;
+    const { id } = el;
+    const items = JSON.parse(el.dataset.items);
+
+    return new Vue({
+      el,
+      name: `ListboxInputRoot${index + 1}`,
+      data() {
+        return {
+          selected: value,
+        };
+      },
+      render(createElement) {
+        return createElement(ListboxInput, {
+          on: {
+            select: (newValue) => {
+              this.selected = newValue;
+            },
+          },
+          props: {
+            label,
+            description,
+            name,
+            defaultToggleText,
+            selected: this.selected,
+            items,
+          },
+          attrs: {
+            id,
+          },
+        });
+      },
+    });
+  });
+};