debian-mirror-gitlab/app/assets/javascripts/vue_shared/components/toggle_button.vue

89 lines
1.8 KiB
Vue
Raw Normal View History

2018-03-17 18:26:18 +05:30
<script>
2020-10-24 23:57:45 +05:30
import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
2018-12-13 13:39:08 +05:30
import { s__ } from '../../locale';
2018-03-17 18:26:18 +05:30
2018-12-13 13:39:08 +05:30
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');
2018-03-17 18:26:18 +05:30
2018-12-13 13:39:08 +05:30
export default {
components: {
2020-10-24 23:57:45 +05:30
GlIcon,
2018-12-13 13:39:08 +05:30
GlLoadingIcon,
},
2018-03-17 18:26:18 +05:30
2018-12-13 13:39:08 +05:30
model: {
prop: 'value',
event: 'change',
},
2018-03-17 18:26:18 +05:30
2018-12-13 13:39:08 +05:30
props: {
name: {
type: String,
required: false,
default: null,
},
value: {
type: Boolean,
required: false,
default: null,
2018-03-17 18:26:18 +05:30
},
2018-12-13 13:39:08 +05:30
disabledInput: {
type: Boolean,
required: false,
default: false,
},
isLoading: {
type: Boolean,
required: false,
default: false,
},
},
2018-03-17 18:26:18 +05:30
2018-12-13 13:39:08 +05:30
computed: {
toggleIcon() {
return this.value ? ICON_ON : ICON_OFF;
},
ariaLabel() {
return this.value ? LABEL_ON : LABEL_OFF;
2018-03-17 18:26:18 +05:30
},
2018-12-13 13:39:08 +05:30
},
2018-03-17 18:26:18 +05:30
2018-12-13 13:39:08 +05:30
methods: {
toggleFeature() {
if (!this.disabledInput) this.$emit('change', !this.value);
2018-03-17 18:26:18 +05:30
},
2018-12-13 13:39:08 +05:30
},
};
2018-03-17 18:26:18 +05:30
</script>
<template>
2021-01-03 14:25:43 +05:30
<label class="gl-mt-2">
2019-02-15 15:39:39 +05:30
<input v-if="name" :name="name" :value="value" type="hidden" />
2018-03-17 18:26:18 +05:30
<button
2020-10-24 23:57:45 +05:30
type="button"
role="switch"
class="project-feature-toggle"
2018-03-17 18:26:18 +05:30
:aria-label="ariaLabel"
2020-10-24 23:57:45 +05:30
:aria-checked="value"
2018-03-17 18:26:18 +05:30
:class="{
'is-checked': value,
2020-10-24 23:57:45 +05:30
'gl-blue-500': value,
2018-03-17 18:26:18 +05:30
'is-disabled': disabledInput,
2019-02-15 15:39:39 +05:30
'is-loading': isLoading,
2018-03-17 18:26:18 +05:30
}"
2020-11-24 15:15:51 +05:30
@click.prevent="toggleFeature"
2018-03-17 18:26:18 +05:30
>
2018-12-05 23:21:45 +05:30
<gl-loading-icon class="loading-icon" />
2020-10-24 23:57:45 +05:30
<span class="toggle-icon">
<gl-icon
:size="18"
:name="toggleIcon"
:class="value ? 'gl-text-blue-500' : 'gl-text-gray-400'"
/>
</span>
2018-03-17 18:26:18 +05:30
</button>
</label>
</template>