Arrays displayed as [object, Object]

[victorlmneves]

I'm wondering why the arrays are displayed as [object, Object] while objects are displayed correctly
From your examples
https://vue3.examples.histoire.dev/story/src-components-codegen-story-vue?variantId=props

On a story that I'm working on

Thanks

[victorlmneves]

Now I understood the reason for rendering [object Object]
It's related to the input being a textarea and saw that you are working on a new element for rendering JSON
[https://github.com//issues/30]

[Akryum]

You can make your own control and display it in the #controls slots 😉

[victorlmneves]

Do you mean to create the JSON builtin control as you already have for input, textarea, radio, checkboxes, and so on?

[Akryum]

You can put any component you want in the controls. So you could totally create some components to edit your story data :)

[victorlmneves]

Going to try to see if I can make it work 😅

[victorlmneves]

@Akryum It's done
Here's the code for someone else who needs to implement

<script setup lang="ts">
import { computed } from 'vue';

const props = withDefaults(
    defineProps<{
        title?: string;
        modelValue: {
            [key: string]: string | unknown;
        };
    }>(),
    { title: 'JSON' }
);
const emit = defineEmits(['update:modelValue']);
const updateValue = (value) => {
    emit('update:modelValue', value);
};
const mutatedJSON = computed({
    get() {
        return JSON.stringify(props.modelValue, null, 4);
    },

    set: (value) => {
        try {
            updateValue(JSON.parse(value));
        } catch (e) {
            return;
        }
    },
});
</script>

<template>
    <HstTextarea
        v-model="mutatedJSON"
        :title="title"
        placeholder="Enter JSON"
    ></HstTextarea>
</template>