<template>
  <div class="kole-drawer"><button class="kole-drawer-button kole-drawer-primary" type="button" @click="emit('open')">打开抽屉</button><div v-if="open" class="kole-drawer-drawer-mask" @click.self="props.maskClosable && emit('close')"></div><aside v-if="open" class="kole-drawer-drawer" role="dialog" aria-modal="true"><h3 class="kole-drawer-title">{{ props.title }}</h3><p class="kole-drawer-desc">在当前页面侧向编辑，不丢失列表上下文。</p><div class="kole-drawer-drawer-footer"><button class="kole-drawer-button" type="button" @click="emit('close')">取消</button><button class="kole-drawer-button kole-drawer-primary" type="button" @click="emit('confirm')">确定</button></div></aside></div>
</template>

<script setup>
import { ref, computed } from 'vue';
const props = defineProps({
    open: { type: Boolean, default: false }, // 是否展开
    title: { type: String, default: '编辑资料' }, // 标题
    placement: { type: String, default: 'right' }, // 弹出位置
    maskClosable: { type: Boolean, default: true }, // 点击遮罩是否可关闭
});
const emit = defineEmits(["open", "close", "confirm"]);
const open = ref(Boolean(props.open));

</script>

<style src="./Drawer.css"></style>
