client: refactor components/ripple.vue to composition API

packages/client/src/components/ripple.vue

@@ -56,28 +56,23 @@
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, onMounted } from 'vue';
+<script lang="ts" setup>
+import { onMounted } from 'vue';
 import * as os from '@/os';
 
-export default defineComponent({
-	props: {
-		x: {
-			type: Number,
-			required: true,
-		},
-		y: {
-			type: Number,
-			required: true,
-		},
-		particle: {
-			type: Boolean,
-			required: false,
-			default: true,
-		},
-	},
-	emits: ['end'],
-	setup(props, context) {
+const props = withDefaults(defineProps<{
+	x: number;
+	y: number;
+	particle?: boolean;
+}>(), {
+	particle: true,
+});
+
+const emit = defineEmits<{
+	(ev: 'end'): void;
+}>();
+
+const zIndex = os.claimZIndex('high');
 const particles = [];
 const origin = 64;
 const colors = ['#FF1493', '#00FFFF', '#FFE202'];
@@ -100,16 +95,9 @@ export default defineComponent({
 
 onMounted(() => {
 	window.setTimeout(() => {
-				context.emit('end');
+		emit('end');
 	}, 1100);
 });
-
-		return {
-			particles,
-			zIndex: os.claimZIndex('high'),
-		};
-	},
-});
 </script>
 
 <style lang="scss" scoped>