🎨

packages/frontend/src/components/MkPopupMenu.vue

@@ -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>>();

packages/frontend/src/components/form/select.vue

@@ -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>

packages/frontend/src/os.ts

@@ -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;
 		});