refactor(client): use setup sugar

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

@@ -1,42 +1,32 @@
 <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 el = ref<HTMLElement>();
+const zIndex = os.claimZIndex('high');
-		const zIndex = os.claimZIndex('high');
 
-		const setPosition = () => {
+const setPosition = () => {
 	if (el.value == null) return;
 
 	const rect = props.source.getBoundingClientRect();
@@ -60,12 +50,12 @@ export default defineComponent({
 
 	el.value.style.left = left + 'px';
 	el.value.style.top = top + 'px';
-		};
+};
 
-		onMounted(() => {
+onMounted(() => {
 	nextTick(() => {
 		if (props.source == null) {
-					context.emit('closed');
+			emit('closed');
 			return;
 		}
 
@@ -86,14 +76,7 @@ export default defineComponent({
 			window.cancelAnimationFrame(loopHandler);
 		});
 	});
-		});
+});
-
-		return {
-			el,
-			zIndex,
-		};
-	},
-})
 </script>
 
 <style lang="scss" scoped>