mirror of
https://github.com/amir20/dozzle.git
synced 2025-12-24 06:28:42 +01:00
c835f51cc4
* WIP for using json all the time * Updates to render * adds a new component for json * Updates styles * Adds nesting * Adds field list * Adds expanding * Adds new composable for event source * Creates an add button * Removes unused code * Adds and removes fields with defaults * Fixes jumping when adding new fields * Returns JSON correctly * Fixes little bugs * Fixes js tests * Adds vscode * Fixes json buffer error * Fixes extra line * Fixes tests * Fixes tests and adds support for search * Refactors visible payload keys to a composable * Fixes typescript errors and refactors * Fixes visible keys by ComputedRef<Ref> * Fixes search bugs * Updates tests * Fixes go tests * Fixes scroll view * Fixes vue tsc errors * Fixes EOF error * Fixes build error * Uses application/ld+json * Fixes arrays and records * Marks for json too
85 lines
2.1 KiB
Vue
85 lines
2.1 KiB
Vue
<template>
|
|
<ul v-if="expanded" ref="root">
|
|
<li v-for="(value, name) in fields">
|
|
<template v-if="isObject(value)">
|
|
<span class="has-text-grey">{{ name }}=</span>
|
|
<field-list
|
|
:fields="value"
|
|
:parent-key="parentKey.concat(name)"
|
|
:visible-keys="visibleKeys"
|
|
expanded
|
|
></field-list>
|
|
</template>
|
|
<template v-else-if="Array.isArray(value)">
|
|
<a @click="toggleField(name)"> {{ hasField(name) ? "remove" : "add" }} </a>
|
|
<span class="has-text-grey">{{ name }}=</span>[
|
|
<span class="has-text-weight-bold" v-for="(item, index) in value">
|
|
{{ item }}
|
|
<span v-if="index !== value.length - 1">,</span>
|
|
</span>
|
|
]
|
|
</template>
|
|
<template v-else>
|
|
<a @click="toggleField(name)"> {{ hasField(name) ? "remove" : "add" }} </a>
|
|
<span class="has-text-grey">{{ name }}=</span><span class="has-text-weight-bold">{{ value }}</span>
|
|
</template>
|
|
</li>
|
|
</ul>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { arrayEquals, isObject } from "@/utils";
|
|
import { nextTick, PropType, ref, toRaw } from "vue";
|
|
|
|
const props = defineProps({
|
|
fields: {
|
|
type: Object as PropType<Record<string, any>>,
|
|
required: true,
|
|
},
|
|
expanded: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
parentKey: {
|
|
type: Array as PropType<string[]>,
|
|
default: [],
|
|
},
|
|
visibleKeys: {
|
|
type: Array as PropType<string[][]>,
|
|
default: [],
|
|
},
|
|
});
|
|
|
|
const root = ref<HTMLElement>();
|
|
|
|
async function toggleField(field: string) {
|
|
const index = fieldIndex(field);
|
|
|
|
if (index > -1) {
|
|
props.visibleKeys.splice(index, 1);
|
|
} else {
|
|
props.visibleKeys.push(props.parentKey.concat(field));
|
|
}
|
|
|
|
await nextTick();
|
|
|
|
root.value?.scrollIntoView({
|
|
block: "center",
|
|
});
|
|
}
|
|
|
|
function hasField(field: string) {
|
|
return fieldIndex(field) > -1;
|
|
}
|
|
|
|
function fieldIndex(field: string) {
|
|
const path = props.parentKey.concat(field);
|
|
return props.visibleKeys.findIndex((keys) => arrayEquals(toRaw(keys), toRaw(path)));
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
ul {
|
|
margin-left: 2em;
|
|
}
|
|
</style>
|