From 9aececc921584781247934101b83bfb0f792c889 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 6 Jan 2023 10:11:47 +0900
Subject: [PATCH] :art:

---
 .../frontend/src/components/MkPopupMenu.vue     |  3 ++-
 .../frontend/src/components/form/select.vue     | 17 ++++++++++++++++-
 packages/frontend/src/os.ts                     |  4 ++++
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/components/MkPopupMenu.vue b/packages/frontend/src/components/MkPopupMenu.vue
index b5987715a..34af209c0 100644
--- a/packages/frontend/src/components/MkPopupMenu.vue
+++ b/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>>();
diff --git a/packages/frontend/src/components/form/select.vue b/packages/frontend/src/components/form/select.vue
index 068ca2ebc..4b5a14f5b 100644
--- a/packages/frontend/src/components/form/select.vue
+++ b/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>
diff --git a/packages/frontend/src/os.ts b/packages/frontend/src/os.ts
index a4c34104c..6e36f1837 100644
--- a/packages/frontend/src/os.ts
+++ b/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;
 		});