tweak client

packages/client/src/components/launch-pad.vue

@@ -1,5 +1,5 @@
 <template>
-<MkModal ref="modal" v-slot="{ type, maxHeight }" :prefer-type="preferedModalType" :transparent-bg="true" :src="src" @click="modal.close()" @closed="emit('closed')">
+<MkModal ref="modal" v-slot="{ type, maxHeight }" :prefer-type="preferedModalType" :anchor="{ x: 'right', y: 'center' }" :transparent-bg="true" :src="src" @click="modal.close()" @closed="emit('closed')">
 	<div class="szkkfdyq _popup _shadow" :class="{ asDrawer: type === 'drawer' }" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : '' }">
 		<div class="main">
 			<template v-for="item in items">

packages/client/src/components/ui/modal.vue

@@ -30,7 +30,7 @@ type ModalTypes = 'popup' | 'dialog' | 'dialog:top' | 'drawer';
 
 const props = withDefaults(defineProps<{
 	manualShowing?: boolean | null;
-	srcCenter?: boolean;
+	anchor?: { x: string; y: string; };
 	src?: HTMLElement;
 	preferType?: ModalTypes | 'auto';
 	zPriority?: 'low' | 'middle' | 'high';
@@ -39,6 +39,7 @@ const props = withDefaults(defineProps<{
 }>(), {
 	manualShowing: null,
 	src: null,
+	anchor: { x: 'center', y: 'bottom' },
 	preferType: 'auto',
 	zPriority: 'low',
 	noOverlap: true,
@@ -113,16 +114,23 @@ const align = () => {
 	let left;
 	let top;
 
-	if (props.srcCenter) {
-		const x = rect.left + (fixed.value ? 0 : window.pageXOffset) + (props.src.offsetWidth / 2);
-		const y = rect.top + (fixed.value ? 0 : window.pageYOffset) + (props.src.offsetHeight / 2);
-		left = (x - (width / 2));
+	const x = rect.left + (fixed.value ? 0 : window.pageXOffset);
+	const y = rect.top + (fixed.value ? 0 : window.pageYOffset);
+
+	if (props.anchor.x === 'center') {
+		left = x + (props.src.offsetWidth / 2) - (width / 2);
+	} else if (props.anchor.x === 'left') {
+		// TODO
+	} else if (props.anchor.x === 'right') {
+		left = x + props.src.offsetWidth;
+	}
+
+	if (props.anchor.y === 'center') {
 		top = (y - (height / 2));
-	} else {
-		const x = rect.left + (fixed.value ? 0 : window.pageXOffset) + (props.src.offsetWidth / 2);
-		const y = rect.top + (fixed.value ? 0 : window.pageYOffset) + props.src.offsetHeight;
-		left = (x - (width / 2));
-		top = y;
+	} else if (props.anchor.y === 'top') {
+		// TODO
+	} else if (props.anchor.y === 'bottom') {
+		top = y + props.src.offsetHeight;
 	}
 
 	if (fixed.value) {
@@ -136,7 +144,7 @@ const align = () => {
 
 		// 画面から縦にはみ出る場合
 		if (top + height > (window.innerHeight - MARGIN)) {
-			if (props.noOverlap) {
+			if (props.noOverlap && props.anchor.x === 'center') {
 				if (underSpace >= (upperSpace / 3)) {
 					maxHeight.value = underSpace;
 				} else {
@@ -160,7 +168,7 @@ const align = () => {
 
 		// 画面から縦にはみ出る場合
 		if (top + height - window.pageYOffset > (window.innerHeight - MARGIN)) {
-			if (props.noOverlap) {
+			if (props.noOverlap && props.anchor.x === 'center') {
 				if (underSpace >= (upperSpace / 3)) {
 					maxHeight.value = underSpace;
 				} else {
@@ -183,14 +191,23 @@ const align = () => {
 		left = 0;
 	}
 
+	let transformOriginX = 'center';
+	let transformOriginY = 'center';
+
 	if (top > rect.top + (fixed.value ? 0 : window.pageYOffset)) {
-		transformOrigin.value = 'center top';
+		transformOriginY = 'top';
 	} else if ((top + height) <= rect.top + (fixed.value ? 0 : window.pageYOffset)) {
-		transformOrigin.value = 'center bottom';
-	} else {
-		transformOrigin.value = 'center';
+		transformOriginY = 'bottom';
 	}
 
+	if (left > rect.left + (fixed.value ? 0 : window.pageXOffset)) {
+		transformOriginY = 'left';
+	} else if ((left + width) <= rect.left + (fixed.value ? 0 : window.pageXOffset)) {
+		transformOriginY = 'right';
+	}
+
+	transformOrigin.value = `${transformOriginX} ${transformOriginY}`;
+
 	popover.style.left = left + 'px';
 	popover.style.top = top + 'px';
 };

packages/client/src/directives/click-anime.ts

@@ -3,6 +3,7 @@ import { defaultStore } from '@/store';
 
 export default {
 	mounted(el, binding, vn) {
+		/*
 		if (!defaultStore.state.animation) return;
 
 		el.classList.add('_anime_bounce_standBy');
@@ -25,5 +26,6 @@ export default {
 			el.classList.remove('_anime_bounce');
 			el.classList.add('_anime_bounce_standBy');
 		});
+		*/
 	}
 } as Directive;