61 lines
1.7 KiB
Vue
61 lines
1.7 KiB
Vue
<template>
|
|
<div class="pointer-events-auto relative flex flex-row px-2 pb-4 pr-0">
|
|
<button
|
|
:class="[
|
|
open ? 'bg-gray-200' : 'bg-white',
|
|
'h-8 rounded-bl-md rounded-tl-md px-2 py-2 ring-1 ring-black ring-opacity-5',
|
|
]"
|
|
:title="`${$t(open ? 'common.hide' : 'common.open')} ${$t(
|
|
'planner.panel.open',
|
|
)}`"
|
|
:aria-expanded="open"
|
|
@click="() => (open = !open)"
|
|
>
|
|
<span class="sr-only"
|
|
>{{ $t(open ? 'common.hide' : 'common.open') }}
|
|
{{ $t('planner.panel.open') }}</span
|
|
>
|
|
<ChevronDoubleRightIcon class="h-4 w-4" v-if="open" />
|
|
<ChevronDoubleLeftIcon class="h-4 w-4" v-else />
|
|
</button>
|
|
<Transition
|
|
enter-active-class="transition-max-width ease-out duration-200 overflow-hidden"
|
|
enter-from-class="max-w-0"
|
|
enter-to-class="max-w-xs"
|
|
leave-active-class="transition-max-width ease-in duration-150 overflow-hidden"
|
|
leave-from-class="max-w-xs"
|
|
leave-to-class="max-w-0"
|
|
>
|
|
<div
|
|
class="h-full rounded-bl-md bg-white shadow-lg ring-1 ring-black ring-opacity-5"
|
|
style="height: 40vh"
|
|
v-if="open"
|
|
>
|
|
<div class="flex h-full w-screen max-w-xs flex-col">
|
|
<slot name="header">
|
|
<div
|
|
class="select-none bg-gray-200 px-2 py-1 font-bold uppercase text-gray-400"
|
|
>
|
|
{{ title }}
|
|
</div>
|
|
</slot>
|
|
<slot></slot>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {
|
|
ChevronDoubleRightIcon,
|
|
ChevronDoubleLeftIcon,
|
|
} from '@heroicons/vue/24/outline';
|
|
import { ref } from 'vue';
|
|
|
|
const props = defineProps<{
|
|
title: string;
|
|
}>();
|
|
const open = ref(true);
|
|
</script>
|