-
Notifications
You must be signed in to change notification settings - Fork 131
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add carets next to brackets for expanding/collapsing #169
Comments
For now, I've done this dirty hack (Vue 3, composition api): <template>
<VueJsonPretty
ref="vjp"
:data="data"
/>
</template>
<script setup lang="ts">
import { ref, watch } from "vue";
import VueJsonPretty from "vue-json-pretty";
import "vue-json-pretty/lib/styles.css";
import { useMutationObserver } from "@vueuse/core";
const vjp = ref(null);
const updateBrackets = () => {
for (const element of document.querySelectorAll(".vjs-tree__brackets")) {
const bracket = element as HTMLElement;
const text = bracket.innerText.trim();
const starts = text.startsWith("{") || text.startsWith("[");
const ends = text.endsWith("}") || text.endsWith("]");
bracket.dataset.debug = [text, starts, ends].join(" ");
if (starts && ends) bracket.dataset.action = "expand";
else if (starts) bracket.dataset.action = "collapse";
else bracket.dataset.action = "";
}
};
watch(vjp, updateBrackets);
useMutationObserver(vjp, updateBrackets, { subtree: true, childList: true });
</script>
<style lang="scss">
.vjs-tree__brackets[data-action="collapse"]:before {
content: "▾ ";
}
.vjs-tree__brackets[data-action="expand"]:before {
content: "▸ ";
}
</style> If a fix doesn't get implemented, hopefully this will help someone. It just listens for any change to the component (with mutation observer, very inefficient in this case), and tags each bracket with whether it should have an "expand" or a "collapse" arrow, then adds the arrow with CSS. |
@vincerubinetti |
The part about adding the carets via a CSS pseudo element I think is a good idea, but the rest of the code is a hack. Shouldn't need to use a mutation observer when there's actual Vue lifecycle hooks to listen to. So the above code can't be (shouldn't be) copied and pasted into a PR, no. I can try to look at the code to do a real PR, but I have no familiarity with the code and don't have much time. |
Currently, you have to click directly on the brackets to expand/collapse. As far as I know, this UI behavior does not exist in any other product/program for a tree display like this. The Chrome dev tools shows nested objects with little ▸ symbols, for example. I don't think users will know to click on the brackets, and their mouse hitboxes are small enough that they may never hover over them by accident.
Adding ▸ and ▾ carets would be a good idea, and or making the hitbox for expanding/collapsing the whole row instead of just the bracket
<span>
.The text was updated successfully, but these errors were encountered: