/
CollapseButton.vue
76 lines (65 loc) · 2.06 KB
/
CollapseButton.vue
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!-- Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/ -->
<script setup lang="ts">
import { computed } from 'vue'
import CommonButton from '#desktop/components/CommonButton/CommonButton.vue'
import { useLocaleStore } from '#shared/stores/locale.ts'
import { useTouchDevice } from '#shared/composables/useTouchDevice.ts'
import { EnumTextDirection } from '#shared/graphql/types.ts'
const { isTouchDevice } = useTouchDevice()
interface Props {
ownerId: string
isCollapsed?: boolean
group?: 'heading' | 'sidebar'
orientation?: 'horizontal' | 'vertical'
}
const props = withDefaults(defineProps<Props>(), {
orientation: 'horizontal',
isCollapsed: false,
})
defineEmits<{
'toggle-collapse': [MouseEvent]
}>()
const locale = useLocaleStore()
const collapseButtonIcon = computed(() => {
if (props.orientation === 'vertical')
return props.isCollapsed ? 'arrows-expand' : 'arrows-collapse'
if (locale.localeData?.dir === EnumTextDirection.Rtl)
return props.isCollapsed ? 'arrow-bar-left' : 'arrow-bar-right'
return props.isCollapsed ? 'arrow-bar-right' : 'arrow-bar-left'
})
const parentGroupClass = computed(() => {
// Tailwindcss must be able to scan the class names to generate CSS
// https://tailwindcss.com/docs/content-configuration#dynamic-class-names
switch (props.group) {
case 'heading':
return 'group-hover/heading:opacity-100'
case 'sidebar':
return 'group-hover/sidebar:opacity-100'
default:
return ''
}
})
</script>
<template>
<div>
<CommonButton
:class="[
{ 'opacity-0 transition-opacity': !isTouchDevice && parentGroupClass },
'focus:opacity-100',
parentGroupClass,
]"
class="collapse-button"
:icon="collapseButtonIcon"
:aria-expanded="!props.isCollapsed"
:aria-controls="ownerId"
:aria-label="
props.isCollapsed
? $t('Expand this element')
: $t('Collapse this element')
"
size="small"
variant="subtle"
@click="$emit('toggle-collapse', $event)"
/>
</div>
</template>