mirror of
https://github.com/zammad/zammad
synced 2026-05-24 09:48:36 +00:00
85 lines
2.6 KiB
Vue
85 lines
2.6 KiB
Vue
<!-- Copyright (C) 2012-2026 Zammad Foundation, https://zammad-foundation.org/ -->
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
|
|
import { useTouchDevice } from '#shared/composables/useTouchDevice.ts'
|
|
import { EnumTextDirection } from '#shared/graphql/types.ts'
|
|
import { i18n } from '#shared/i18n/index.ts'
|
|
import { useLocaleStore } from '#shared/stores/locale.ts'
|
|
|
|
import CommonButton from '#desktop/components/CommonButton/CommonButton.vue'
|
|
|
|
const { isTouchDevice } = useTouchDevice()
|
|
|
|
interface Props {
|
|
ownerId: string
|
|
collapsed?: boolean
|
|
orientation?: 'horizontal' | 'vertical'
|
|
expandLabel?: string
|
|
collapseLabel?: string
|
|
inverse?: boolean
|
|
variant?: 'none' | 'tertiary-gray'
|
|
noPadded?: boolean
|
|
buttonClass?: string
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
orientation: 'horizontal',
|
|
collapsed: false,
|
|
})
|
|
|
|
defineEmits<{
|
|
'toggle-collapse': [MouseEvent]
|
|
}>()
|
|
|
|
const locale = useLocaleStore()
|
|
|
|
const collapseButtonIcon = computed(() => {
|
|
if (props.orientation === 'vertical') return props.collapsed ? 'arrows-expand' : 'arrows-collapse'
|
|
|
|
if (
|
|
(props.inverse && locale.localeData?.dir !== EnumTextDirection.Rtl) ||
|
|
(!props.inverse && locale.localeData?.dir === EnumTextDirection.Rtl)
|
|
)
|
|
return props.collapsed ? 'arrow-bar-left' : 'arrow-bar-right'
|
|
|
|
return props.collapsed ? 'arrow-bar-right' : 'arrow-bar-left'
|
|
})
|
|
|
|
// :TODO think if we add this variant as a Variant of CommonButton
|
|
const variantClass = computed(() => {
|
|
if (props.variant === 'tertiary-gray')
|
|
return 'bg-neutral-500 focus-visible:bg-blue-800 active:dark:bg-blue-800 focus:dark:bg-blue-800 active:bg-blue-800 focus:bg-blue-800 hover:bg-blue-600 hover:dark:bg-blue-900 text-black dark:bg-gray-200 dark:text-white'
|
|
|
|
return ''
|
|
})
|
|
|
|
const labels = computed(() => ({
|
|
expand: props.expandLabel || i18n.t('Expand this element'),
|
|
collapse: props.collapseLabel || i18n.t('Collapse this element'),
|
|
}))
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="flex items-center justify-center focus-within:opacity-100 hover:opacity-100"
|
|
:class="{
|
|
'opacity-0': !isTouchDevice,
|
|
'p-2': !noPadded,
|
|
}"
|
|
>
|
|
<CommonButton
|
|
v-tooltip="collapsed ? labels.expand : labels.collapse"
|
|
class="hover:outline-transparent focus:outline-transparent focus-visible:outline-transparent dark:hover:outline-transparent dark:focus:outline-transparent"
|
|
:class="[variantClass, buttonClass]"
|
|
:icon="collapseButtonIcon"
|
|
:aria-expanded="!collapsed"
|
|
variant="none"
|
|
:aria-controls="ownerId"
|
|
:data-test-id="`controls-${ownerId}`"
|
|
size="small"
|
|
@click="$emit('toggle-collapse', $event)"
|
|
/>
|
|
</div>
|
|
</template>
|