2018-01-03 21:03:39 +00:00
|
|
|
<script>
|
2020-07-30 06:09:55 +00:00
|
|
|
import { GlButton } from '@gitlab/ui';
|
2018-04-19 15:07:11 +00:00
|
|
|
import { __ } from '~/locale';
|
2018-06-20 07:36:50 +00:00
|
|
|
|
2018-04-19 15:07:11 +00:00
|
|
|
/**
|
|
|
|
* Port of detail_behavior expand button.
|
|
|
|
*
|
|
|
|
* @example
|
|
|
|
* <expand-button>
|
2021-06-25 00:08:34 +00:00
|
|
|
* <template #expanded>
|
2018-04-19 15:07:11 +00:00
|
|
|
* Text goes here.
|
|
|
|
* </template>
|
|
|
|
* </expand-button>
|
|
|
|
*/
|
|
|
|
export default {
|
|
|
|
name: 'ExpandButton',
|
2018-06-20 07:36:50 +00:00
|
|
|
components: {
|
2020-07-30 06:09:55 +00:00
|
|
|
GlButton,
|
2018-06-20 07:36:50 +00:00
|
|
|
},
|
2018-04-19 15:07:11 +00:00
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
isCollapsed: true,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
ariaLabel() {
|
|
|
|
return __('Click to expand text');
|
2018-01-03 21:03:39 +00:00
|
|
|
},
|
2018-04-19 15:07:11 +00:00
|
|
|
},
|
2018-06-20 07:36:50 +00:00
|
|
|
destroyed() {
|
|
|
|
this.isCollapsed = true;
|
|
|
|
},
|
2018-04-19 15:07:11 +00:00
|
|
|
methods: {
|
|
|
|
onClick() {
|
|
|
|
this.isCollapsed = !this.isCollapsed;
|
2018-01-03 21:03:39 +00:00
|
|
|
},
|
2018-04-19 15:07:11 +00:00
|
|
|
},
|
|
|
|
};
|
2018-01-03 21:03:39 +00:00
|
|
|
</script>
|
|
|
|
<template>
|
|
|
|
<span>
|
2020-07-30 06:09:55 +00:00
|
|
|
<gl-button
|
2018-01-03 21:03:39 +00:00
|
|
|
v-show="isCollapsed"
|
2018-01-05 10:56:09 +00:00
|
|
|
:aria-label="ariaLabel"
|
2018-06-11 09:49:47 +00:00
|
|
|
type="button"
|
2019-11-22 09:06:20 +00:00
|
|
|
class="js-text-expander-prepend text-expander btn-blank"
|
2020-07-30 06:09:55 +00:00
|
|
|
icon="ellipsis_h"
|
2018-11-16 20:07:38 +00:00
|
|
|
@click="onClick"
|
2020-07-30 06:09:55 +00:00
|
|
|
/>
|
2019-11-22 09:06:20 +00:00
|
|
|
<span v-if="isCollapsed"> <slot name="short"></slot> </span>
|
2018-11-16 20:07:38 +00:00
|
|
|
<span v-if="!isCollapsed"> <slot name="expanded"></slot> </span>
|
2020-07-30 06:09:55 +00:00
|
|
|
<gl-button
|
2019-11-22 09:06:20 +00:00
|
|
|
v-show="!isCollapsed"
|
|
|
|
:aria-label="ariaLabel"
|
|
|
|
type="button"
|
|
|
|
class="js-text-expander-append text-expander btn-blank"
|
2020-07-30 06:09:55 +00:00
|
|
|
icon="ellipsis_h"
|
2019-11-22 09:06:20 +00:00
|
|
|
@click="onClick"
|
2020-07-30 06:09:55 +00:00
|
|
|
/>
|
2018-01-03 21:03:39 +00:00
|
|
|
</span>
|
|
|
|
</template>
|