From 5e4877b8a4edaa89d2550e7c03c861536762ea7a Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 4 Jan 2022 23:37:26 +0900
Subject: tweak ui

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

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

diff --git a/packages/client/src/components/object-view.value.vue b/packages/client/src/components/object-view.value.vue
new file mode 100644
index 0000000000..6f388636dd
--- /dev/null
+++ b/packages/client/src/components/object-view.value.vue
@@ -0,0 +1,108 @@
+<template>
+<div class="igpposuu _monospace">
+	<div v-if="value === null" class="null">null</div>
+	<div v-else-if="typeof value === 'boolean'" class="boolean">{{ value ? 'true' : 'false' }}</div>
+	<div v-else-if="typeof value === 'string'" class="string">"{{ value }}"</div>
+	<div v-else-if="typeof value === 'number'" class="number">{{ number(value) }}</div>
+	<div v-else-if="Array.isArray(value)" class="array">
+		<button @click="collapsed_ = !collapsed_">[ {{ collapsed_ ? '+' : '-' }} ]</button>
+		<template v-if="!collapsed_">
+			<div v-for="i in value.length" class="element">
+				{{ i }}: <XValue :value="value[i - 1]" collapsed/>
+			</div>
+		</template>
+	</div>
+	<div v-else-if="typeof value === 'object'" class="object">
+		<button @click="collapsed_ = !collapsed_">{ {{ collapsed_ ? '+' : '-' }} }</button>
+		<template v-if="!collapsed_">
+			<div v-for="k in Object.keys(value)" class="kv">
+				<div class="k">{{ k }}:</div>
+				<div class="v"><XValue :value="value[k]" collapsed/></div>
+			</div>
+		</template>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from 'vue';
+import number from '@/filters/number';
+
+export default defineComponent({
+	name: 'XValue',
+
+	props: {
+		value: {
+			type: Object,
+			required: true,
+		},
+		collapsed: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+	},
+
+	setup(props) {
+		const collapsed_ = ref(props.collapsed);
+
+		return {
+			number,
+			collapsed_,
+		};
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.igpposuu {
+	display: inline;
+
+	> .null {
+		display: inline;
+		opacity: 0.7;
+	}
+
+	> .boolean {
+		display: inline;
+		color: var(--codeBoolean);
+	}
+
+	> .string {
+		display: inline;
+		color: var(--codeString);
+	}
+
+	> .number {
+		display: inline;
+		color: var(--codeNumber);
+	}
+
+	> .array {
+		display: inline;
+
+		> .element {
+			display: block;
+			padding-left: 16px;
+		}
+	}
+
+	> .object {
+		display: inline;
+
+		> .kv {
+			display: block;
+			padding-left: 16px;
+
+			> .k {
+				display: inline;
+				margin-right: 8px;
+			}
+
+			> .v {
+				display: inline;
+			}
+		}
+	}
+}
+</style>
-- 
cgit v1.2.3-freya