firefish/packages/client/src/components/MkPopupMenu.vue
ThatOneCalculator 5d06aa5f13
chore: 🚨 lint
2023-09-01 16:27:33 -07:00

58 lines
1 KiB
Vue

<template>
<MkModal
ref="modal"
v-slot="{ type, maxHeight }"
:z-priority="'high'"
:src="src"
:transparent-bg="true"
tabindex="-1"
@click="modal?.close()"
@closed="emit('closed')"
>
<MkMenu
:items="items"
:align="align"
:width="width"
:max-height="maxHeight"
:as-drawer="type === 'drawer'"
class="sfhdhdhq"
:class="{ drawer: type === 'drawer' }"
:no-return-focus="noReturnFocus"
@close="modal?.close()"
/>
</MkModal>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import MkModal from "./MkModal.vue";
import MkMenu from "./MkMenu.vue";
import type { MenuItem } from "@/types/menu";
defineProps<{
items: MenuItem[];
align?: "center" | string;
width?: number;
viaKeyboard?: boolean;
src?: any;
noReturnFocus?;
}>();
const emit = defineEmits<{
(ev: "closed"): void;
}>();
const modal = ref<InstanceType<typeof MkModal>>();
</script>
<style lang="scss" scoped>
.sfhdhdhq {
&.drawer {
border-radius: 24px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
}
</style>