rudeshark.net/packages/client/src/components/MkObjectView.value.vue

191 lines
3.4 KiB
Vue
Raw Normal View History

2022-01-04 15:37:26 +01:00
<template>
2023-04-08 02:01:42 +02:00
<div class="igpposuu _monospace">
<div v-if="value === null" class="null">null</div>
<div
v-else-if="typeof value === 'boolean'"
class="boolean"
:class="{ true: value, false: !value }"
>
{{ value ? "true" : "false" }}
2022-06-29 08:41:06 +02:00
</div>
2023-04-08 02:01:42 +02:00
<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="isArray(value) && isEmpty(value)" class="array empty">
[]
</div>
<div v-else-if="isArray(value)" class="array">
<div v-for="i in value.length" class="element">
{{ i }}: <XValue :value="value[i - 1]" collapsed />
</div>
</div>
<div v-else-if="isObject(value) && isEmpty(value)" class="object empty">
{}
</div>
<div v-else-if="isObject(value)" class="object">
<div v-for="k in Object.keys(value)" class="kv">
<button
class="toggle _button"
:class="{ visible: collapsable(value[k]) }"
@click="collapsed[k] = !collapsed[k]"
>
{{ collapsed[k] ? "+" : "-" }}
2022-06-29 08:41:06 +02:00
</button>
2023-04-08 02:01:42 +02:00
<div class="k">{{ k }}:</div>
<div v-if="collapsed[k]" class="v">
<button
class="_button"
@click="collapsed[k] = !collapsed[k]"
>
<template v-if="typeof value[k] === 'string'"
>"..."</template
>
<template v-else-if="isArray(value[k])">[...]</template>
<template v-else-if="isObject(value[k])"
>{...}</template
>
</button>
</div>
<div v-else class="v"><XValue :value="value[k]" /></div>
2022-01-04 15:37:26 +01:00
</div>
2022-06-29 08:41:06 +02:00
</div>
2022-01-04 15:37:26 +01:00
</div>
</template>
<script lang="ts">
2023-04-08 02:01:42 +02:00
import { computed, defineComponent, reactive, ref } from "vue";
import number from "@/filters/number";
2022-01-04 15:37:26 +01:00
export default defineComponent({
2023-04-08 02:01:42 +02:00
name: "XValue",
2022-01-04 15:37:26 +01:00
props: {
value: {
required: true,
},
},
setup(props) {
2022-06-29 08:41:06 +02:00
const collapsed = reactive({});
if (isObject(props.value)) {
for (const key in props.value) {
collapsed[key] = collapsable(props.value[key]);
}
}
function isObject(v): boolean {
2023-04-08 02:01:42 +02:00
return typeof v === "object" && !Array.isArray(v) && v !== null;
2022-06-29 08:41:06 +02:00
}
function isArray(v): boolean {
return Array.isArray(v);
}
function isEmpty(v): boolean {
2023-04-08 02:01:42 +02:00
return (
(isArray(v) && v.length === 0) ||
(isObject(v) && Object.keys(v).length === 0)
);
2022-06-29 08:41:06 +02:00
}
function collapsable(v): boolean {
return (isObject(v) || isArray(v)) && !isEmpty(v);
}
2022-01-04 15:37:26 +01:00
return {
number,
2022-06-29 08:41:06 +02:00
collapsed,
isObject,
isArray,
isEmpty,
collapsable,
2022-01-04 15:37:26 +01:00
};
2022-06-29 08:41:06 +02:00
},
2022-01-04 15:37:26 +01:00
});
</script>
<style lang="scss" scoped>
.igpposuu {
display: inline;
> .null {
display: inline;
opacity: 0.7;
}
> .boolean {
display: inline;
color: var(--codeBoolean);
2022-06-29 08:41:06 +02:00
&.true {
font-weight: bold;
}
&.false {
opacity: 0.7;
}
2022-01-04 15:37:26 +01:00
}
> .string {
display: inline;
color: var(--codeString);
}
> .number {
display: inline;
color: var(--codeNumber);
}
2022-06-29 08:41:06 +02:00
> .array.empty {
display: inline;
opacity: 0.7;
}
> .array:not(.empty) {
2022-01-04 15:37:26 +01:00
display: inline;
> .element {
display: block;
padding-left: 16px;
}
}
2022-06-29 08:41:06 +02:00
> .object.empty {
display: inline;
opacity: 0.7;
}
> .object:not(.empty) {
2022-01-04 15:37:26 +01:00
display: inline;
> .kv {
display: block;
padding-left: 16px;
2022-06-29 08:41:06 +02:00
> .toggle {
width: 16px;
color: var(--accent);
visibility: hidden;
&.visible {
visibility: visible;
}
}
2022-01-04 15:37:26 +01:00
> .k {
display: inline;
margin-right: 8px;
}
> .v {
display: inline;
}
}
}
}
</style>