Json编辑器

<script setup lang="ts">
    import { JsonViewer } from '@fibrous/semi-ui-vue';

    const data = `{
    "name": "Semi",
    "version": "0.0.0"
}`;
</script>

<template>
    <div :style="{ marginBottom: '16px' }">
        <JsonViewer :height="100" :modelValue="data" :width="700" />
    </div>
</template>

<script setup lang="ts">
    import { JsonViewer } from '@fibrous/semi-ui-vue';

    const data = `{
    "name": "Semi",
    "version": "0.0.0"
}`;
    const wrapperStyle = { marginBottom: '12px', overflow: 'hidden' };
</script>

<template>
    <div>
        <div :style="wrapperStyle">
            <JsonViewer :height="100" :modelValue="data" :options="{ lineHeight: 20 }" :width="700" />
        </div>
        <div :style="wrapperStyle">
            <JsonViewer :height="120" :modelValue="data" :options="{ lineHeight: 24 }" :width="700" />
        </div>
        <div :style="wrapperStyle">
            <JsonViewer :height="120" :modelValue="data" :options="{ lineHeight: 26 }" :width="700" />
        </div>
    </div>
</template>

<script setup lang="ts">
    import { JsonViewer } from '@fibrous/semi-ui-vue';

    const data = `{
    "name": "Semi",
    "version": "0.0.0",
    "description": "Semi Design is a design system that defines a set of mid_back design and front_end basic components."
}`;
    const options = { autoWrap: true };
</script>

<template>
    <div :style="{ marginBottom: '16px' }">
        <JsonViewer :height="120" :modelValue="data" :options="options" :width="700" />
    </div>
</template>

<script setup lang="ts">
    import { useTemplateRef } from 'vue';
    import { Button, JsonViewer, type JsonViewerHandle } from '@fibrous/semi-ui-vue';

    const data = `{
  "name": "Semi",
  "version": "0.0.0"
}`;
    const options = { formatOptions: { tabSize: 4, insertSpaces: true, eol: '\n' } };

    const jsonviewer = useTemplateRef<JsonViewerHandle>('jsonviewer');
</script>

<template>
    <div>
        <Button @click="jsonviewer?.format()">格式化</Button>
        <div :style="{ marginBottom: '16px', marginTop: '16px' }">
            <JsonViewer ref="jsonviewer" :height="100" :modelValue="data" :options="options" :width="700" />
        </div>
    </div>
</template>

<script setup lang="ts">
    import { Image, JsonViewer, Popover, Rating, Tag, type JsonViewerOptions } from '@fibrous/semi-ui-vue';

    const data = `{
  "name": "Semi",
  "version": "2.7.4",
  "rating": 5,
  "tags": ["design", "react", "ui"],
  "image": "/assets/root-web-sites/abstract.jpg"
}`;

    // A rule holds data only; the #customRender slot draws the token and tells the rules apart by name
    const options: JsonViewerOptions = {
        formatOptions: { tabSize: 4, insertSpaces: true, eol: '\n' },
        customRenderRule: [
            { name: 'popover', match: 'Semi' },
            { name: 'rating', match: (value) => value == 5 },
            {
                name: 'tag',
                match: (_value, path) => path === 'root.tags[0]' || path === 'root.tags[1]' || path === 'root.tags[2]',
            },
            { name: 'image', match: /^http/ },
        ],
        readOnly: true,
        autoWrap: true,
    };

    // content is the raw string token with its quotes; without them it is a valid URL
    const unquote = (content: string) => content.replace(/^"|"$/g, '');
</script>

<template>
    <div>
        <div :style="{ marginBottom: '16px', marginTop: '16px' }">
            <JsonViewer :height="200" :modelValue="data" :options="options" :showSearch="false" :width="600">
                <template #customRender="{ item, content }">
                    <Popover v-if="item.name === 'popover'" showArrow trigger="hover">
                        <span>{{ content }}</span>
                        <template #content>我是用户自定义的渲染</template>
                    </Popover>
                    <Rating v-else-if="item.name === 'rating'" :defaultValue="Number(content)" disabled :size="10" />
                    <Tag v-else-if="item.name === 'tag'" shape="circle" size="small">{{ content }}</Tag>
                    <Popover v-else showArrow trigger="hover">
                        <span>{{ content }}</span>
                        <template #content>
                            <Image :height="100" :src="unquote(content)" :width="100" />
                        </template>
                    </Popover>
                </template>
            </JsonViewer>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { IconSearch } from '@fibrous/semi-icons-vue';
    import { Button, JsonViewer } from '@fibrous/semi-ui-vue';

    const data = `{
    "name": "Semi",
    "version": "0.0.0"
}`;
</script>

<template>
    <div :style="{ marginBottom: '16px' }">
        <JsonViewer :height="200" :modelValue="data" :width="700">
            <template #searchButton="{ defaultButton, showSearchBar, onToggleSearchBar }">
                <div :style="{ position: 'absolute', top: '10px', right: '10px', zIndex: 10 }">
                    <Button v-if="!showSearchBar" @click="onToggleSearchBar">
                        <template #icon>
                            <IconSearch />
                        </template>
                        搜索
                    </Button>
                    <component :is="defaultButton" v-else />
                </div>
            </template>
        </JsonViewer>
    </div>
</template>