wip: refactor(client): migrate components to composition api
This commit is contained in:
		@@ -1,41 +1,22 @@
 | 
			
		||||
<template>
 | 
			
		||||
<div class="hpaizdrt" :style="bg">
 | 
			
		||||
	<img v-if="info.faviconUrl" class="icon" :src="info.faviconUrl"/>
 | 
			
		||||
	<span class="name">{{ info.name }}</span>
 | 
			
		||||
	<img v-if="instance.faviconUrl" class="icon" :src="instance.faviconUrl"/>
 | 
			
		||||
	<span class="name">{{ instance.name }}</span>
 | 
			
		||||
</div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script lang="ts">
 | 
			
		||||
import { defineComponent } from 'vue';
 | 
			
		||||
import { instanceName } from '@/config';
 | 
			
		||||
<script lang="ts" setup>
 | 
			
		||||
import { } from 'vue';
 | 
			
		||||
 | 
			
		||||
export default defineComponent({
 | 
			
		||||
	props: {
 | 
			
		||||
		instance: {
 | 
			
		||||
			type: Object,
 | 
			
		||||
			required: false
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
const props = defineProps<{
 | 
			
		||||
	instance: any; // TODO
 | 
			
		||||
}>();
 | 
			
		||||
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			info: this.instance || {
 | 
			
		||||
				faviconUrl: '/favicon.ico',
 | 
			
		||||
				name: instanceName,
 | 
			
		||||
				themeColor: (document.querySelector('meta[name="theme-color-orig"]') as HTMLMetaElement)?.content
 | 
			
		||||
			}
 | 
			
		||||
		}
 | 
			
		||||
	},
 | 
			
		||||
const themeColor = props.instance.themeColor || '#777777';
 | 
			
		||||
 | 
			
		||||
	computed: {
 | 
			
		||||
		bg(): any {
 | 
			
		||||
			const themeColor = this.info.themeColor || '#777777';
 | 
			
		||||
			return {
 | 
			
		||||
				background: `linear-gradient(90deg, ${themeColor}, ${themeColor + '00'})`
 | 
			
		||||
			};
 | 
			
		||||
		}
 | 
			
		||||
	}
 | 
			
		||||
});
 | 
			
		||||
const bg = {
 | 
			
		||||
	background: `linear-gradient(90deg, ${themeColor}, ${themeColor + '00'})`
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style lang="scss" scoped>
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user