From f4010f78fc4a39787c27f6a42a6287e2d104b501 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 4 Jan 2022 23:37:26 +0900
Subject: [PATCH] tweak ui
---
.../src/components/object-view.value.vue | 108 ++++++++++++++++++
.../client/src/components/object-view.vue | 8 +-
packages/client/src/themes/_dark.json5 | 3 +
packages/client/src/themes/_light.json5 | 3 +
4 files changed, 120 insertions(+), 2 deletions(-)
create mode 100644 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 000000000..6f388636d
--- /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>
diff --git a/packages/client/src/components/object-view.vue b/packages/client/src/components/object-view.vue
index 4334917e6..e9db96de8 100644
--- a/packages/client/src/components/object-view.vue
+++ b/packages/client/src/components/object-view.vue
@@ -1,14 +1,18 @@
<template>
<div class="zhyxdalp">
-
+ <XValue :value="value" :collapsed="false"/>
</div>
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue';
-import number from '@/filters/number';
+import XValue from './object-view.value.vue';
export default defineComponent({
+ components: {
+ XValue
+ },
+
props: {
value: {
type: Object,
diff --git a/packages/client/src/themes/_dark.json5 b/packages/client/src/themes/_dark.json5
index d8be16f60..1d8778879 100644
--- a/packages/client/src/themes/_dark.json5
+++ b/packages/client/src/themes/_dark.json5
@@ -69,6 +69,9 @@
success: '#86b300',
error: '#ec4137',
warn: '#ecb637',
+ codeString: '#ffb675',
+ codeNumber: '#cfff9e',
+ codeBoolean: '#c59eff',
htmlThemeColor: '@bg',
X2: ':darken<2<@panel',
X3: 'rgba(255, 255, 255, 0.05)',
diff --git a/packages/client/src/themes/_light.json5 b/packages/client/src/themes/_light.json5
index 251aa36c7..359b56068 100644
--- a/packages/client/src/themes/_light.json5
+++ b/packages/client/src/themes/_light.json5
@@ -69,6 +69,9 @@
success: '#86b300',
error: '#ec4137',
warn: '#ecb637',
+ codeString: '#b98710',
+ codeNumber: '#0fbbbb',
+ codeBoolean: '#62b70c',
htmlThemeColor: '@bg',
X2: ':darken<2<@panel',
X3: 'rgba(0, 0, 0, 0.05)',