mirror of
https://github.com/amir20/dozzle.git
synced 2025-12-21 13:23:07 +01:00
9f3a256334
* feat: moves to tailwindcss and better component library * update styles * creates toggle component * adds drop down component * cleans up components * removes unused components * uses tailwind for scroll view * removes table component * improves animation * cleans up more styles * uses more tailwind * cleans up more styles with flex * more styles * removes bulma * adds colors * updates modules * fixes bugs * stops importing styles.scss * more clean up * cleans up headers * cleans up title * fixes title * fixes mobile-hidden * fixes shadow * fixes colors * add tailwindcss/nesting * adds more colors * fixes more colors * updates colors * fixes colors * colors * fixes menu on left * menu and modal * menu and modal * fuzzy search * fixes menu on left * remove logs * cleans up search * adds host to search * remove outline from inputs * cleans up left search icon * removes unused styles * fixes docker * removes sass! * cleans up styles * Fixe smobile menu * fixes mobile menu * fixes typecheck * fixes seconday color * adds drop down for container * cleans header css * updates css * fixes other layouts * updates some tests * fixes border * fixes home screen font * fixes top header * fixes tests * fixes fieldlist * fixes complex * cleans up more * removes index * fixes tests * fixes tests * resolves conflicts
76 lines
1.9 KiB
Vue
76 lines
1.9 KiB
Vue
<template>
|
|
<ul v-if="expanded" ref="root" class="ml-8">
|
|
<li v-for="(value, name) in fields">
|
|
<template v-if="isObject(value)">
|
|
<span class="text-light">{{ 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="text-light">{{ name }}=</span>[
|
|
<span class="font-bold" v-for="(item, index) in value">
|
|
<span v-html="JSON.stringify(item)"></span><span v-if="index !== value.length - 1">,</span>
|
|
</span>
|
|
]
|
|
</template>
|
|
<template v-else>
|
|
<a @click="toggleField(name)"> {{ hasField(name) ? "remove" : "add" }} </a>
|
|
<span class="text-light">{{ name }}=</span><span class="font-bold" v-html="value"></span>
|
|
</template>
|
|
</li>
|
|
</ul>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { arrayEquals, isObject } from "@/utils";
|
|
|
|
const {
|
|
fields,
|
|
expanded = false,
|
|
parentKey = [],
|
|
visibleKeys = [],
|
|
} = defineProps<{
|
|
fields: Record<string, any>;
|
|
expanded?: boolean;
|
|
parentKey?: string[];
|
|
visibleKeys?: string[][];
|
|
}>();
|
|
|
|
const root = ref<HTMLElement>();
|
|
|
|
async function toggleField(field: string) {
|
|
const index = fieldIndex(field);
|
|
|
|
if (index > -1) {
|
|
visibleKeys.splice(index, 1);
|
|
} else {
|
|
visibleKeys.push(parentKey.concat(field));
|
|
}
|
|
|
|
await nextTick();
|
|
|
|
root.value?.scrollIntoView({
|
|
block: "center",
|
|
});
|
|
}
|
|
|
|
function hasField(field: string) {
|
|
return fieldIndex(field) > -1;
|
|
}
|
|
|
|
function fieldIndex(field: string) {
|
|
const path = parentKey.concat(field);
|
|
return visibleKeys.findIndex((keys) => arrayEquals(toRaw(keys), toRaw(path)));
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="postcss">
|
|
.text-light {
|
|
@apply text-base-content/70;
|
|
}
|
|
</style>
|