66 lines
1.3 KiB
JavaScript
66 lines
1.3 KiB
JavaScript
|
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);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
},
|
||
|
|
});
|
||
|
|
};
|