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> <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()"/> <MkMenu :items="items" :align="align" :width="width" :max-height="maxHeight" :as-drawer="type === 'drawer'" class="sfhdhdhq" :class="{ drawer: type === 'drawer' }" @close="modal.close()"/>
</MkModal> </MkModal>
</template> </template>
@ -20,6 +20,7 @@ defineProps<{
const emit = defineEmits<{ const emit = defineEmits<{
(ev: 'closed'): void; (ev: 'closed'): void;
(ev: 'closing'): void;
}>(); }>();
let modal = $shallowRef<InstanceType<typeof MkModal>>(); let modal = $shallowRef<InstanceType<typeof MkModal>>();

View file

@ -18,7 +18,7 @@
> >
<slot></slot> <slot></slot>
</select> </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>
<div class="caption"><slot name="caption"></slot></div> <div class="caption"><slot name="caption"></slot></div>
@ -56,6 +56,7 @@ const slots = useSlots();
const { modelValue, autofocus } = toRefs(props); const { modelValue, autofocus } = toRefs(props);
const v = ref(modelValue.value); const v = ref(modelValue.value);
const focused = ref(false); const focused = ref(false);
const opening = ref(false);
const changed = ref(false); const changed = ref(false);
const invalid = ref(false); const invalid = ref(false);
const filled = computed(() => v.value !== '' && v.value != null); const filled = computed(() => v.value !== '' && v.value != null);
@ -119,6 +120,7 @@ onMounted(() => {
const onClick = (ev: MouseEvent) => { const onClick = (ev: MouseEvent) => {
focused.value = true; focused.value = true;
opening.value = true;
const menu = []; const menu = [];
let options = slots.default!(); let options = slots.default!();
@ -158,6 +160,9 @@ const onClick = (ev: MouseEvent) => {
os.popupMenu(menu, container.value, { os.popupMenu(menu, container.value, {
width: container.value.offsetWidth, width: container.value.offsetWidth,
onClosing: () => {
opening.value = false;
},
}).then(() => { }).then(() => {
focused.value = false; focused.value = false;
}); });
@ -277,3 +282,13 @@ const onClick = (ev: MouseEvent) => {
} }
} }
</style> </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; align?: string;
width?: number; width?: number;
viaKeyboard?: boolean; viaKeyboard?: boolean;
onClosing?: () => void;
}) { }) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let dispose; let dispose;
@ -529,6 +530,9 @@ export function popupMenu(items: MenuItem[] | Ref<MenuItem[]>, src?: HTMLElement
resolve(); resolve();
dispose(); dispose();
}, },
closing: () => {
if (options?.onClosing) options.onClosing();
},
}).then(res => { }).then(res => {
dispose = res.dispose; dispose = res.dispose;
}); });