diff options
Diffstat (limited to 'app/assets/javascripts/toggles/index.js')
-rw-r--r-- | app/assets/javascripts/toggles/index.js | 65 |
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); + }, + }, + }); + }, + }); +}; |