mirror of
https://github.com/lana-k/sqliteviz.git
synced 2025-12-07 02:28:54 +08:00
74 lines
1.5 KiB
Vue
74 lines
1.5 KiB
Vue
<template>
|
|
<div class="side-tool-bar">
|
|
<icon-button
|
|
ref="sqlEditorBtn"
|
|
:active="panel === 'sqlEditor'"
|
|
tooltip="Switch panel to SQL editor"
|
|
tooltipPosition="top-left"
|
|
@click="$emit('switchTo', 'sqlEditor')"
|
|
>
|
|
<sql-editor-icon />
|
|
</icon-button>
|
|
|
|
<icon-button
|
|
ref="tableBtn"
|
|
:active="panel === 'table'"
|
|
tooltip="Switch panel to result set"
|
|
tooltipPosition="top-left"
|
|
@click="$emit('switchTo', 'table')"
|
|
>
|
|
<table-icon />
|
|
</icon-button>
|
|
|
|
<icon-button
|
|
ref="dataViewBtn"
|
|
:active="panel === 'dataView'"
|
|
tooltip="Switch panel to data view"
|
|
tooltipPosition="top-left"
|
|
@click="$emit('switchTo', 'dataView')"
|
|
>
|
|
<data-view-icon />
|
|
</icon-button>
|
|
|
|
<div v-if="$slots.default" class="side-tool-bar-divider" />
|
|
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import IconButton from '@/components/IconButton'
|
|
import TableIcon from '@/components/svg/table'
|
|
import SqlEditorIcon from '@/components/svg/sqlEditor'
|
|
import DataViewIcon from '@/components/svg/dataView'
|
|
|
|
export default {
|
|
name: 'SideToolBar',
|
|
components: {
|
|
IconButton,
|
|
SqlEditorIcon,
|
|
DataViewIcon,
|
|
TableIcon
|
|
},
|
|
props: {
|
|
panel: String
|
|
},
|
|
emits: ['switchTo']
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.side-tool-bar {
|
|
background-color: var(--color-bg-light);
|
|
border-left: 1px solid var(--color-border-light);
|
|
padding: 6px;
|
|
}
|
|
|
|
.side-tool-bar-divider {
|
|
width: 26px;
|
|
height: 1px;
|
|
background: var(--color-border-light);
|
|
margin: 6px 0;
|
|
}
|
|
</style>
|