refactor(client): use setup sugar

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

@@ -1,38 +1,28 @@
 <template>
-<transition :name="$store.state.animation ? 'tooltip' : ''" appear @after-leave="$emit('closed')">
+<transition :name="$store.state.animation ? 'tooltip' : ''" appear @after-leave="emit('closed')">
 	<div v-show="showing" ref="el" class="buebdbiu _acrylic _shadow" :style="{ zIndex, maxWidth: maxWidth + 'px' }">
 		<slot>{{ text }}</slot>
 	</div>
 </transition>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, nextTick, onMounted, onUnmounted, ref } from 'vue';
+import { nextTick, onMounted, onUnmounted, ref } from 'vue';
 import * as os from '@/os';
 
-export default defineComponent({
+const props = withDefaults(defineProps<{
-	props: {
+	showing: boolean;
-		showing: {
+	source: HTMLElement;
-			type: Boolean,
+	text?: string;
-			required: true,
+	maxWidth?; number;
-		},
+}>(), {
-		source: {
+	maxWidth: 250,
-			required: true,
+});
-		},
-		text: {
-			type: String,
-			required: false
-		},
-		maxWidth: {
-			type: Number,
-			required: false,
-			default: 250,
-		},
-	},
 
-	emits: ['closed'],
+const emit = defineEmits<{
+	(ev: 'closed'): void;
+}>();
 
-	setup(props, context) {
 const el = ref<HTMLElement>();
 const zIndex = os.claimZIndex('high');
 
@@ -65,7 +55,7 @@ export default defineComponent({
 onMounted(() => {
 	nextTick(() => {
 		if (props.source == null) {
-					context.emit('closed');
+			emit('closed');
 			return;
 		}
 
@@ -87,13 +77,6 @@ export default defineComponent({
 		});
 	});
 });
-
-		return {
-			el,
-			zIndex,
-		};
-	},
-})
 </script>
 
 <style lang="scss" scoped>