From e8005c8d3a6edf2c8cdce3fe098fb9acff8a57c6 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 28 Nov 2021 20:07:37 +0900
Subject: client: refine ui

---
 packages/client/src/components/key-value.vue | 48 ++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 packages/client/src/components/key-value.vue

(limited to 'packages/client/src/components/key-value.vue')

diff --git a/packages/client/src/components/key-value.vue b/packages/client/src/components/key-value.vue
new file mode 100644
index 0000000000..6a9a948ce9
--- /dev/null
+++ b/packages/client/src/components/key-value.vue
@@ -0,0 +1,48 @@
+<template>
+<div class="alqyeyti">
+	<div class="key">
+		<slot name="key"></slot>
+	</div>
+	<div class="value">
+		<slot name="value"></slot>
+		<button v-if="copy" v-tooltip="$ts.copy" class="_textButton" style="margin-left: 0.5em;" @click="copy_"><i class="far fa-copy"></i></button>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import copyToClipboard from '@/scripts/copy-to-clipboard';
+import * as os from '@/os';
+
+export default defineComponent({
+	props: {
+		copy: {
+			type: String,
+			required: false,
+			default: null,
+		},
+	},
+
+	setup(props) {
+		const copy_ = () => {
+			copyToClipboard(props.copy);
+			os.success();
+		};
+
+		return {
+			copy_
+		};
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.alqyeyti {
+	> .key {
+		font-size: 0.85em;
+		padding: 0 0 0.25em 0;
+		opacity: 0.75;
+	}
+}
+</style>
-- 
cgit v1.2.3-freya