This commit is contained in:
syuilo 2023-01-06 10:11:47 +09:00
parent d25f214a09
commit 9aececc921
3 changed files with 22 additions and 2 deletions

View file

@ -1,5 +1,5 @@
<template>
<MkModal ref="modal" v-slot="{ type, maxHeight }" :z-priority="'high'" :src="src" :transparent-bg="true" @click="modal.close()" @closed="emit('closed')">
<MkModal ref="modal" v-slot="{ type, maxHeight }" :z-priority="'high'" :src="src" :transparent-bg="true" @click="modal.close()" @close="emit('closing')" @closed="emit('closed')">
<MkMenu :items="items" :align="align" :width="width" :max-height="maxHeight" :as-drawer="type === 'drawer'" class="sfhdhdhq" :class="{ drawer: type === 'drawer' }" @close="modal.close()"/>
</MkModal>
</template>
@ -20,6 +20,7 @@ defineProps<{
const emit = defineEmits<{
(ev: 'closed'): void;
(ev: 'closing'): void;
}>();
let modal = $shallowRef<InstanceType<typeof MkModal>>();

View file

@ -18,7 +18,7 @@
>
<slot></slot>
</select>
<div ref="suffixEl" class="suffix"><i class="ti ti-chevron-down"></i></div>
<div ref="suffixEl" class="suffix"><i class="ti ti-chevron-down" :class="[$style.chevron, { [$style.chevronOpening]: opening }]"></i></div>
</div>
<div class="caption"><slot name="caption"></slot></div>
@ -56,6 +56,7 @@ const slots = useSlots();
const { modelValue, autofocus } = toRefs(props);
const v = ref(modelValue.value);
const focused = ref(false);
const opening = ref(false);
const changed = ref(false);
const invalid = ref(false);
const filled = computed(() => v.value !== '' && v.value != null);
@ -119,6 +120,7 @@ onMounted(() => {
const onClick = (ev: MouseEvent) => {
focused.value = true;
opening.value = true;
const menu = [];
let options = slots.default!();
@ -158,6 +160,9 @@ const onClick = (ev: MouseEvent) => {
os.popupMenu(menu, container.value, {
width: container.value.offsetWidth,
onClosing: () => {
opening.value = false;
},
}).then(() => {
focused.value = false;
});
@ -277,3 +282,13 @@ const onClick = (ev: MouseEvent) => {
}
}
</style>
<style lang="scss" module>
.chevron {
transition: transform 0.5s ease;
}
.chevronOpening {
transform: rotateX(180deg);
}
</style>

View file

@ -515,6 +515,7 @@ export function popupMenu(items: MenuItem[] | Ref<MenuItem[]>, src?: HTMLElement
align?: string;
width?: number;
viaKeyboard?: boolean;
onClosing?: () => void;
}) {
return new Promise((resolve, reject) => {
let dispose;
@ -529,6 +530,9 @@ export function popupMenu(items: MenuItem[] | Ref<MenuItem[]>, src?: HTMLElement
resolve();
dispose();
},
closing: () => {
if (options?.onClosing) options.onClosing();
},
}).then(res => {
dispose = res.dispose;
});