refactor MkKeyValue to composition API

packages/client/src/components/key-value.vue

@@ -10,46 +10,27 @@
 </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue';
+import { } from 'vue';
 import copyToClipboard from '@/scripts/copy-to-clipboard';
 import * as os from '@/os';
 
-export default defineComponent({
+const props = withDefaults(defineProps<{
-	props: {
+	copy: string | null;
-		copy: {
+	oneline: boolean;
-			type: String,
+}>(), {
-			required: false,
+	copy: null,
-			default: null,
+	oneline: false,
-		},
+});
-		oneline: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-	},
 
-	setup(props) {
 const copy_ = () => {
 	copyToClipboard(props.copy);
 	os.success();
 };
-
-		return {
-			copy_
-		};
-	},
-});
 </script>
 
 <style lang="scss" scoped>
 .alqyeyti {
-	> .key, > .value {
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
 	> .key {
 		font-size: 0.85em;
 		padding: 0 0 0.25em 0;
@@ -67,6 +48,9 @@ export default defineComponent({
 
 		> .value {
 			width: 70%;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
 		}
 	}
 }