refactor: button.vue to composition api

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

@@ -1,18 +1,6 @@
 <template>
-<button
-	v-if="!link" class="bghgjjyj _button"
-	:class="{ inline, primary, gradate, danger, rounded, full }"
-	:type="type"
-	@click="$emit('click', $event)"
-	@mousedown="onMousedown"
->
-	<div ref="ripples" class="ripples"></div>
-	<div class="content">
-		<slot></slot>
-	</div>
-</button>
 <MkA
-	v-else class="bghgjjyj _button"
+	v-if="link && to" class="bghgjjyj _button"
 	:class="{ inline, primary, gradate, danger, rounded, full }"
 	:to="to"
 	@mousedown="onMousedown"
@@ -22,82 +10,64 @@
 		<slot></slot>
 	</div>
 </MkA>
+<button
+	v-else ref="button"
+	class="bghgjjyj _button"
+	:class="{ inline, primary, gradate, danger, rounded, full }"
+	:type="type"
+	@click="emit('click', $event)"
+	@mousedown="onMousedown"
+>
+	<div ref="ripples" class="ripples"></div>
+	<div class="content">
+		<slot></slot>
+	</div>
+</button>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue';
+import { onMounted, nextTick } from 'vue';
 
-export default defineComponent({
+const props = defineProps<{
-	props: {
+	type?: 'button' | 'submit' | 'reset';
-		type: {
+	primary?: boolean;
-			type: String,
+	gradate?: boolean;
-			required: false,
+	rounded?: boolean;
-		},
+	inline?: boolean;
-		primary: {
+	link?: boolean;
-			type: Boolean,
+	to?: string;
-			required: false,
+	autofocus?: boolean;
-			default: false,
+	wait?: boolean;
-		},
+	danger?: boolean;
-		gradate: {
+	full?: boolean;
-			type: Boolean,
+}>();
-			required: false,
+
-			default: false,
+const emit = defineEmits<{
-		},
+	(ev: 'click', mouseEvent: MouseEvent): void;
-		rounded: {
+}>();
-			type: Boolean,
+
-			required: false,
+let button: HTMLElement | null = $ref(null);
-			default: false,
+let ripples: HTMLElement | null = $ref(null);
-		},
+
-		inline: {
+onMounted(() => {
-			type: Boolean,
+	if (props.autofocus) {
-			required: false,
+		nextTick(() => {
-			default: false,
+			button?.focus();
-		},
-		link: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-		to: {
-			type: String,
-			required: false,
-		},
-		autofocus: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-		wait: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-		danger: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-		full: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-	},
-	emits: ['click'],
-	mounted() {
-		if (this.autofocus) {
-			this.$nextTick(() => {
-				this.$el.focus();
 		});
 	}
-	},
+});
-	methods: {
+
-		onMousedown(evt: MouseEvent) {
+type Point = {
-			function distance(p, q) {
+	x: number;
+	y: number;
+};
+
+function onMousedown(evt: MouseEvent): void {
+	function distance(p: Point, q: Point): number {
 		return Math.hypot(p.x - q.x, p.y - q.y);
 	}
 
-			function calcCircleScale(boxW, boxH, circleCenterX, circleCenterY) {
+	function calcCircleScale(boxW: number, boxH: number, circleCenterX: number, circleCenterY: number): number {
 		const origin = { x: circleCenterX, y: circleCenterY };
 		const dist1 = distance({ x: 0, y: 0 }, origin);
 		const dist2 = distance({ x: boxW, y: 0 }, origin);
@@ -106,18 +76,19 @@ export default defineComponent({
 		return Math.max(dist1, dist2, dist3, dist4) * 2;
 	}
 
-			const rect = evt.target.getBoundingClientRect();
+	const targetEl = evt.target as HTMLElement;
+	const rect = targetEl.getBoundingClientRect();
 
 	const ripple = document.createElement('div');
 	ripple.style.top = (evt.clientY - rect.top - 1).toString() + 'px';
 	ripple.style.left = (evt.clientX - rect.left - 1).toString() + 'px';
 
-			this.$refs.ripples.appendChild(ripple);
+	ripples?.appendChild(ripple);
 
 	const circleCenterX = evt.clientX - rect.left;
 	const circleCenterY = evt.clientY - rect.top;
 
-			const scale = calcCircleScale(evt.target.clientWidth, evt.target.clientHeight, circleCenterX, circleCenterY);
+	const scale = calcCircleScale(targetEl.clientWidth, targetEl.clientHeight, circleCenterX, circleCenterY);
 
 	window.setTimeout(() => {
 		ripple.style.transform = 'scale(' + (scale / 2) + ')';
@@ -127,11 +98,9 @@ export default defineComponent({
 		ripple.style.opacity = '0';
 	}, 1000);
 	window.setTimeout(() => {
-				if (this.$refs.ripples) this.$refs.ripples.removeChild(ripple);
+		ripples?.removeChild(ripple);
 	}, 2000);
-		},
+}
-	},
-});
 </script>
 
 <style lang="scss" scoped>