1 files changed, 65 insertions, 0 deletions
diff --git a/app/assets/javascripts/toggles/index.js b/app/assets/javascripts/toggles/index.js
new file mode 100644
index 00000000000..046b9fc7dcd
--- /dev/null
+++ b/app/assets/javascripts/toggles/index.js
@@ -0,0 +1,65 @@
+import { kebabCase } from 'lodash';
+import Vue from 'vue';
+import { GlToggle } from '@gitlab/ui';
+import { parseBoolean } from '~/lib/utils/common_utils';
+
+export const initToggle = (el) => {
+  if (!el) {
+    return false;
+  }
+
+  const {
+    name,
+    isChecked,
+    disabled,
+    isLoading,
+    label,
+    help,
+    labelPosition,
+    ...dataset
+  } = el.dataset;
+
+  return new Vue({
+    el,
+    props: {
+      disabled: {
+        type: Boolean,
+        required: false,
+        default: parseBoolean(disabled),
+      },
+      isLoading: {
+        type: Boolean,
+        required: false,
+        default: parseBoolean(isLoading),
+      },
+    },
+    data() {
+      return {
+        value: parseBoolean(isChecked),
+      };
+    },
+    render(h) {
+      return h(GlToggle, {
+        props: {
+          name,
+          value: this.value,
+          disabled: this.disabled,
+          isLoading: this.isLoading,
+          label,
+          help,
+          labelPosition,
+        },
+        class: el.className,
+        attrs: Object.fromEntries(
+          Object.entries(dataset).map(([key, value]) => [`data-${kebabCase(key)}`, value]),
+        ),
+        on: {
+          change: (newValue) => {
+            this.value = newValue;
+            this.$emit('change', newValue);
+          },
+        },
+      });
+    },
+  });
+};