marzban-dev
77 lines
2.2 KiB
Vue
77 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
// types
|
|
|
|
type Props = {
|
|
title: string;
|
|
modalId: string;
|
|
};
|
|
|
|
const props = defineProps<Props>();
|
|
const { modalId } = toRefs(props);
|
|
|
|
// state
|
|
|
|
const isSideShow = useState(`side-modal-${modalId.value}`, () => false);
|
|
|
|
const isLocked = useScrollLock(window);
|
|
|
|
// watch
|
|
|
|
watch(
|
|
() => isSideShow.value,
|
|
(newValue) => {
|
|
isLocked.value = newValue ? true : false;
|
|
}
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="relative z-1000">
|
|
<div @click="isSideShow = true">
|
|
<slot name="button" />
|
|
</div>
|
|
<div>
|
|
<Transition name="fade">
|
|
<div
|
|
v-if="isSideShow"
|
|
class="size-full fixed inset-0 bg-black/20"
|
|
@click="isSideShow = !isSideShow"
|
|
></div>
|
|
</Transition>
|
|
<Transition name="fade-right">
|
|
<div
|
|
v-show="isSideShow"
|
|
class="flex flex-col w-full lg:w-1/3 bg-white h-full lg:rounded-e-[1.5rem] overflow-hidden fixed top-0 right-0 min-md:flex-col"
|
|
>
|
|
<div
|
|
class="w-full flex justify-between items-center py-[1.5rem] lg:py-[2.5rem] px-[1.5rem] lg:px-[3rem]"
|
|
>
|
|
<span class="typo-h-5 lg:typo-h-4">
|
|
{{ title }}
|
|
</span>
|
|
|
|
<button
|
|
@click="isSideShow = !isSideShow"
|
|
class="cursor-pointer size-[3.5rem] -me-5 flex-center rounded-full"
|
|
>
|
|
<Icon
|
|
name="ci:close"
|
|
size="24"
|
|
class="**:stroke-black"
|
|
/>
|
|
</button>
|
|
</div>
|
|
|
|
<div
|
|
class="size-full flex flex-col grow overflow-y-auto py-[1.5rem] mb-10 px-[1.5rem] lg:px-[3rem]"
|
|
>
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|