debian-mirror-gitlab/app/assets/javascripts/registry/settings/components/expiration_toggle.vue
2021-04-17 20:07:23 +05:30

62 lines
1.4 KiB
Vue

<script>
import { GlFormGroup, GlToggle, GlSprintf } from '@gitlab/ui';
import { s__ } from '~/locale';
import { ENABLED_TOGGLE_DESCRIPTION, DISABLED_TOGGLE_DESCRIPTION } from '../constants';
export default {
i18n: {
toggleLabel: s__('ContainerRegistry|Enable expiration policy'),
},
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"
:label="$options.i18n.toggleLabel"
label-position="hidden"
: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>