mirror of
https://github.com/enso-org/enso.git
synced 2024-12-23 04:43:26 +03:00
34 lines
806 B
Vue
34 lines
806 B
Vue
|
<script setup lang="ts">
|
||
|
|
import { ref } from 'vue'
|
||
|
|
|
||
|
|
import SQLVisualization from '@/components/visualizations/SQLVisualization.vue'
|
||
|
|
|
||
|
|
const data = ref<any>({
|
||
|
|
dialect: 'sql',
|
||
|
|
code: `SELECT * FROM \`foo\` WHERE \`a\` = ? AND b LIKE ?;`,
|
||
|
|
interpolations: [
|
||
|
|
// eslint-disable-next-line camelcase
|
||
|
|
{ enso_type: 'Data.Numbers.Number', value: '123' },
|
||
|
|
// eslint-disable-next-line camelcase
|
||
|
|
{ enso_type: 'Builtins.Main.Text', value: "a'bcd" },
|
||
|
|
],
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<Story
|
||
|
|
title="SQL Query"
|
||
|
|
group="visualizations"
|
||
|
|
:layout="{ type: 'grid', width: 400 }"
|
||
|
|
autoPropsDisabled
|
||
|
|
>
|
||
|
|
<div style="height: 322px">
|
||
|
|
<SQLVisualization :data="data" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<template #controls>
|
||
|
|
<HstJson v-model="data" title="data" />
|
||
|
|
</template>
|
||
|
|
</Story>
|
||
|
|
</template>
|