53 lines
1.2 KiB
Vue
53 lines
1.2 KiB
Vue
|
<script>
|
||
|
|
import { GlFormGroup, GlToggle, GlSprintf } from '@gitlab/ui';
|
||
|
|
import { ENABLED_TOGGLE_DESCRIPTION, DISABLED_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,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
enabled: {
|
||
|
|
get() {
|
||
|
|
return this.value;
|
||
|
|
},
|
||
|
|
set(value) {
|
||
|
|
this.$emit('input', value);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
toggleText() {
|
||
|
|
return this.enabled ? ENABLED_TOGGLE_DESCRIPTION : DISABLED_TOGGLE_DESCRIPTION;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</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="toggleText">
|
||
|
|
<template #strong="{content}">
|
||
|
|
<strong>{{ content }}</strong>
|
||
|
|
</template>
|
||
|
|
</gl-sprintf>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</gl-form-group>
|
||
|
|
</template>
|