1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
<script>
import { GlFormGroup, GlToggle, GlSprintf } from '@gitlab/ui';
import { ENABLED_TEXT, DISABLED_TEXT, ENABLE_TOGGLE_DESCRIPTION } from '../constants';
export default {
components: {
GlFormGroup,
GlToggle,
GlSprintf,
},
props: {
disabled: {
type: Boolean,
required: false,
default: false,
},
value: {
type: Boolean,
required: false,
default: false,
},
},
i18n: {
ENABLE_TOGGLE_DESCRIPTION,
},
computed: {
enabled: {
get() {
return this.value;
},
set(value) {
this.$emit('input', value);
},
},
toggleStatusText() {
return this.enabled ? ENABLED_TEXT : DISABLED_TEXT;
},
},
};
</script>
<template>
<gl-form-group id="expiration-policy-toggle-group" label-for="expiration-policy-toggle">
<div class="gl-display-flex">
<gl-toggle id="expiration-policy-toggle" v-model="enabled" :disabled="disabled" />
<span class="gl-ml-5 gl-line-height-24" data-testid="description">
<gl-sprintf :message="$options.i18n.ENABLE_TOGGLE_DESCRIPTION">
<template #toggleStatus>
<strong>{{ toggleStatusText }}</strong>
</template>
</gl-sprintf>
</span>
</div>
</gl-form-group>
</template>
|
