gitlab-org--gitlab-foss/app/assets/javascripts/vue_shared/components/toggle_button.vue

81 lines
1.6 KiB
Vue

<script>
import { GlLoadingIcon } from '@gitlab/ui';
import { s__ } from '../../locale';
import icon from './icon.vue';
const ICON_ON = 'status_success_borderless';
const ICON_OFF = 'status_failed_borderless';
const LABEL_ON = s__('ToggleButton|Toggle Status: ON');
const LABEL_OFF = s__('ToggleButton|Toggle Status: OFF');
export default {
components: {
icon,
GlLoadingIcon,
},
model: {
prop: 'value',
event: 'change',
},
props: {
name: {
type: String,
required: false,
default: null,
},
value: {
type: Boolean,
required: false,
default: null,
},
disabledInput: {
type: Boolean,
required: false,
default: false,
},
isLoading: {
type: Boolean,
required: false,
default: false,
},
},
computed: {
toggleIcon() {
return this.value ? ICON_ON : ICON_OFF;
},
ariaLabel() {
return this.value ? LABEL_ON : LABEL_OFF;
},
},
methods: {
toggleFeature() {
if (!this.disabledInput) this.$emit('change', !this.value);
},
},
};
</script>
<template>
<label class="toggle-wrapper">
<input v-if="name" :name="name" :value="value" type="hidden" />
<button
:aria-label="ariaLabel"
:class="{
'is-checked': value,
'is-disabled': disabledInput,
'is-loading': isLoading,
}"
type="button"
class="project-feature-toggle"
@click="toggleFeature"
>
<gl-loading-icon class="loading-icon" />
<span class="toggle-icon"> <icon :name="toggleIcon" class="toggle-icon-svg" /> </span>
</button>
</label>
</template>