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

62 lines
1.2 KiB
Vue
Raw Normal View History

2018-03-17 18:26:18 +05:30
<script>
2020-10-24 23:57:45 +05:30
import { GlButton } from '@gitlab/ui';
2018-10-15 14:42:47 +05:30
import { __ } from '~/locale';
2018-11-08 19:23:39 +05:30
2018-10-15 14:42:47 +05:30
/**
* Port of detail_behavior expand button.
*
* @example
* <expand-button>
2021-09-30 23:02:18 +05:30
* <template #expanded>
2018-10-15 14:42:47 +05:30
* Text goes here.
* </template>
* </expand-button>
*/
export default {
name: 'ExpandButton',
2018-11-08 19:23:39 +05:30
components: {
2020-10-24 23:57:45 +05:30
GlButton,
2018-11-08 19:23:39 +05:30
},
2018-10-15 14:42:47 +05:30
data() {
return {
isCollapsed: true,
};
},
computed: {
ariaLabel() {
return __('Click to expand text');
2018-03-17 18:26:18 +05:30
},
2018-10-15 14:42:47 +05:30
},
2018-11-08 19:23:39 +05:30
destroyed() {
this.isCollapsed = true;
},
2018-10-15 14:42:47 +05:30
methods: {
onClick() {
this.isCollapsed = !this.isCollapsed;
2018-03-17 18:26:18 +05:30
},
2018-10-15 14:42:47 +05:30
},
};
2018-03-17 18:26:18 +05:30
</script>
<template>
<span>
2020-10-24 23:57:45 +05:30
<gl-button
2018-03-17 18:26:18 +05:30
v-show="isCollapsed"
:aria-label="ariaLabel"
2018-11-08 19:23:39 +05:30
type="button"
2020-01-01 13:55:28 +05:30
class="js-text-expander-prepend text-expander btn-blank"
2020-10-24 23:57:45 +05:30
icon="ellipsis_h"
2019-02-15 15:39:39 +05:30
@click="onClick"
2020-10-24 23:57:45 +05:30
/>
2020-01-01 13:55:28 +05:30
<span v-if="isCollapsed"> <slot name="short"></slot> </span>
2019-02-15 15:39:39 +05:30
<span v-if="!isCollapsed"> <slot name="expanded"></slot> </span>
2020-10-24 23:57:45 +05:30
<gl-button
2020-01-01 13:55:28 +05:30
v-show="!isCollapsed"
:aria-label="ariaLabel"
type="button"
class="js-text-expander-append text-expander btn-blank"
2020-10-24 23:57:45 +05:30
icon="ellipsis_h"
2020-01-01 13:55:28 +05:30
@click="onClick"
2020-10-24 23:57:45 +05:30
/>
2018-03-17 18:26:18 +05:30
</span>
</template>