zynfly/sqliteviz
1
0
Fork 0
mirror of https://github.com/lana-k/sqliteviz.git synced 2025-12-07 02:28:54 +08:00
Code Issues Projects Releases Wiki Activity

Pivot implementation and redesign (#69)

Browse Source 
- Pivot support implementation 
- Rename queries into inquiries
- Rename editor into workspace
- Change result set format
- New JSON format for inquiries
- Redesign panels
This commit is contained in:
lana-k
2021-08-04 22:20:51 +02:00
committed by GitHub
parent 8d0bc6affe
commit 5017b55944
105 changed files with 4659 additions and 2021 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/CsvImport/csv.js
View File

@@ -10,29 +10,26 @@ export default {
getResult (source) {
const result = {}
if (source.meta.fields) {
result.columns = source.meta.fields.map(col => col.trim())
result.values = source.data.map(row => {
const resultRow = []
source.meta.fields.forEach(col => {
source.meta.fields.forEach(col => {
result[col.trim()] = source.data.map(row => {
let value = row[col]
if (value instanceof Date) {
value = value.toISOString()
}
resultRow.push(value)
return value
})
return resultRow
})
} else {
result.values = source.data.map(row => row.map(value =>
value instanceof Date ? value.toISOString() : value
))
result.columns = []
for (let i = 1; i <= source.data[0].length; i++) {
result.columns.push(`col${i}`)
for (let i = 0; i <= source.data[0].length - 1; i++) {
result[`col${i + 1}`] = source.data.map(row => {
let value = row[i]
if (value instanceof Date) {
value = value.toISOString()
}
return value
})
}
}
return result
},
@@ -55,7 +52,8 @@ export default {
const res = {
data: this.getResult(results),
delimiter: results.meta.delimiter,
hasErrors: false
hasErrors: false,
rowCount: results.data.length
}
res.messages = results.errors.map(msg => {
msg.type = msg.code === 'UndetectableDelimiter' ? 'info' : 'error'

7
src/components/CsvImport/index.vue
View File

@@ -55,9 +55,10 @@
:disabled="disableDialog"
/>
<sql-table
v-if="previewData && (previewData.values.length > 0 || previewData.columns.length > 0)"
v-if="previewData
&& (previewData.rowCount > 0 || Object.keys(previewData).length > 0)
"
:data-set="previewData"
height="160"
class="preview-table"
:preview="true"
/>
@@ -255,7 +256,7 @@ export default {
let end = new Date()
if (!parseResult.hasErrors) {
const rowCount = parseResult.data.values.length
const rowCount = parseResult.rowCount
let period = time.getPeriod(start, end)
parseCsvMsg.type = 'success'

6
src/components/DbUploader.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="db-uploader-container" :style="{ width }">
<change-db-icon v-if="type === 'small'" @click.native="browse"/>
<change-db-icon v-if="type === 'small'" @click="browse"/>
<div v-if="type === 'illustrated'" class="drop-area-container">
<div
class="drop-area"
@@ -110,8 +110,8 @@ export default {
async finish () {
this.$store.commit('setDb', this.newDb)
if (this.$route.path !== '/editor') {
this.$router.push('/editor')
if (this.$route.path !== '/workspace') {
this.$router.push('/workspace')
}
},

110
src/components/IconButton.vue Normal file
View File

@@ -0,0 +1,110 @@
<template>
<div
:class="['icon-btn', { active }, { disabled }]"
@click="onClick"
@mouseenter="showTooltip($event, tooltipPosition)"
@mouseleave="hideTooltip"
>
<div class="icon"><slot /></div>
<div v-show="loading" class="icon-in-progress">
<loading-indicator />
</div>
<span v-if="tooltip" class="icon-tooltip" :style="tooltipStyle" ref="tooltip">
{{ tooltip }}
</span>
</div>
</template>
<script>
import tooltipMixin from '@/tooltipMixin'
import LoadingIndicator from '@/components/LoadingIndicator'
export default {
name: 'SideBarButton',
props: ['active', 'disabled', 'tooltip', 'tooltipPosition', 'loading'],
components: { LoadingIndicator },
mixins: [tooltipMixin],
methods: {
onClick () {
this.hideTooltip()
this.$emit('click')
}
}
}
</script>
<style scoped>
.icon-btn {
box-sizing: border-box;
width: 26px;
height: 26px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.icon-btn:hover {
border: 1px solid var(--color-border);
border-radius: var(--border-radius-medium-2);
}
.icon-btn:hover .icon >>> path,
.icon-btn.active .icon >>> path,
.icon-btn:hover .icon >>> circle,
.icon-btn.active .icon >>> circle {
fill: var(--color-accent);
}
.disabled.icon-btn .icon >>> path,
.disabled.icon-btn .icon >>> circle {
fill: var(--color-border);
}
.disabled.icon-btn {
cursor: default;
pointer-events: none;
}
.disabled.icon-btn:hover .icon >>> path {
fill: var(--color-border);
}
.icon-in-progress {
position: absolute;
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-bg-light);
will-change: opacity;
/*
We need to show loader in 1 sec after starting query execution. We can't do that with
setTimeout because the main thread can be busy by getting a result set from the web worker.
But we can use CSS animation for opacity. Opacity triggers changes only in the Composite Layer
stage in rendering waterfall. Hence it can be processed only with Compositor Thread while
the Main Thread processes a result set.
https://www.viget.com/articles/animation-performance-101-browser-under-the-hood/
*/
animation: show-loader 1s linear 0s 1;
}
@keyframes show-loader {
0% {
opacity: 0;
}
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.icon {
display: flex;
align-items: center;
justify-content: center;
}
</style>

1
src/components/SqlTable/Pager.vue
View File

@@ -49,6 +49,7 @@ export default {
.paginator-continer {
display: flex;
align-items: center;
line-height: 10px;
}
>>> .paginator-page-link {
padding: 2px 3px;

49
src/components/SqlTable/index.vue
View File

@@ -17,20 +17,21 @@
class="table-container"
ref="table-container"
@scroll="onScrollTable"
:style="{maxHeight: `${height}px`}"
>
<table ref="table">
<table ref="table" class="sqliteviz-table">
<thead>
<tr>
<th v-for="(th,index) in dataSet.columns" :key="index" ref="th">
<th v-for="(th, index) in columns" :key="index" ref="th">
<div class="cell-data" :style="cellStyle">{{ th }}</div>
</th>
</tr>
</thead>
<tbody>
<tr v-for="(row,index) in currentPageData" :key="index">
<td v-for="(value, valIndex) in row" :key="valIndex">
<div class="cell-data" :style="cellStyle">{{ value }}</div>
<tr v-for="rowIndex in currentPageData.count" :key="rowIndex">
<td v-for="(col, colIndex) in columns" :key="colIndex">
<div class="cell-data" :style="cellStyle">
{{ dataSet[col][rowIndex - 1 + currentPageData.start] }}
</div>
</td>
</tr>
</tbody>
@@ -39,7 +40,7 @@
</div>
<div class="table-footer">
<div class="table-footer-count">
{{ dataSet.values.length}} {{dataSet.values.length === 1 ? 'row' : 'rows'}} retrieved
{{ rowCount }} {{rowCount === 1 ? 'row' : 'rows'}} retrieved
<span v-if="preview">for preview</span>
<span v-if="time">in {{ time }}</span>
</div>
@@ -54,7 +55,15 @@ import Pager from './Pager'
export default {
name: 'SqlTable',
components: { Pager },
props: ['dataSet', 'time', 'height', 'preview'],
props: {
dataSet: Object,
time: String,
pageSize: {
type: Number,
default: 20
},
preview: Boolean
},
data () {
return {
header: null,
@@ -64,20 +73,30 @@ export default {
}
},
computed: {
columns () {
return Object.keys(this.dataSet)
},
rowCount () {
return this.dataSet[this.columns[0]].length
},
cellStyle () {
const eq = this.tableWidth / this.dataSet.columns.length
const eq = this.tableWidth / this.columns.length
return { maxWidth: `${Math.max(eq, 100)}px` }
},
pageSize () {
return Math.max(Math.floor(this.height / 40), 20)
},
pageCount () {
return Math.ceil(this.dataSet.values.length / this.pageSize)
return Math.ceil(this.rowCount / this.pageSize)
},
currentPageData () {
const start = (this.currentPage - 1) * this.pageSize
return this.dataSet.values.slice(start, start + this.pageSize)
let end = start + this.pageSize
if (end > this.rowCount - 1) {
end = this.rowCount - 1
}
return {
start,
end,
count: end - start + 1
}
}
},
methods: {

16
src/components/svg/addTable.vue
View File

@@ -6,9 +6,9 @@
height="18"
viewBox="0 0 18 18"
fill="none"
@click.stop="$emit('click')"
@mouseover="showTooltip"
@mouseout="hideTooltip"
@click.stop="onClick"
@mouseenter="showTooltip"
@mouseleave="hideTooltip"
>
<g clip-path="url(#clip0)">
<path
@@ -32,7 +32,7 @@
</clipPath>
</defs>
</svg>
<span class="icon-tooltip" :style="tooltipStyle">
<span class="icon-tooltip" :style="tooltipStyle" ref="tooltip">
Add new table from CSV
</span>
</span>
@@ -44,7 +44,13 @@ import tooltipMixin from '@/tooltipMixin'
export default {
name: 'AddTableIcon',
mixins: [tooltipMixin],
props: ['tooltip']
props: ['tooltip'],
methods: {
onClick () {
this.hideTooltip()
this.$emit('click')
}
}
}
</script>

16
src/components/svg/changeDb.vue
View File

@@ -6,16 +6,16 @@
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
@mouseover="showTooltip"
@mouseout="hideTooltip"
@click.stop="onClick"
@mouseenter="showTooltip"
@mouseleave="hideTooltip"
>
<path
d="M3 10.5V12.75C3 14.25 5.2875 15.54 8.25 15.75V13.5825L8.3475 13.5C5.34 13.32 3 12.045 3 10.5ZM9 9.75C5.685 9.75 3 8.4075 3 6.75V9C3 10.6575 5.685 12 9 12C9.2925 12 9.5775 12 9.87 12L12.75 9.09C11.55 9.54 10.2825 9.75 9 9.75ZM9 2.25C5.685 2.25 3 3.5925 3 5.25C3 6.9075 5.685 8.25 9 8.25C12.315 8.25 15 6.9075 15 5.25C15 3.5925 12.315 2.25 9 2.25ZM15.75 8.3475C15.6375 8.3475 15.5325 8.3925 15.4575 8.475L14.7075 9.225L16.245 10.725L16.995 9.975C17.1525 9.825 17.16 9.57 16.995 9.3975L16.065 8.475C15.99 8.3925 15.885 8.3475 15.78 8.3475H15.75ZM14.28 9.66L9.75 14.205V15.75H11.295L15.84 11.1975L14.28 9.66Z"
fill="#A2B1C6"
/>
</svg>
<span class="icon-tooltip" :style="tooltipStyle">
<span class="icon-tooltip" :style="tooltipStyle" ref="tooltip">
Load another database or CSV
</span>
</div>
@@ -26,7 +26,13 @@ import tooltipMixin from '@/tooltipMixin'
export default {
name: 'changeDbIcon',
mixins: [tooltipMixin]
mixins: [tooltipMixin],
methods: {
onClick () {
this.hideTooltip()
this.$emit('click')
}
}
}
</script>

22
src/components/svg/chart.vue Normal file
View File

@@ -0,0 +1,22 @@
<template>
<svg
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.41943 16V10H10.4194V16H8.41943Z" fill="#A2B1C6"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.41943 16L2.41943 10H4.41943V16H2.41943Z" fill="#A2B1C6"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.4194 16V7H13.4194V16H11.4194Z" fill="#A2B1C6"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.4194 16V8H16.4194V16H14.4194Z" fill="#A2B1C6"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.41943 12V16H5.41943V12H7.41943Z" fill="#A2B1C6"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.4332 1.80676L16.6265 6.00001L15.9194 6.70712L12.4055 3.19326L5.93169 9.1691L1.71436 5.55424L2.36515 4.79499L5.90707 7.83092L12.4332 1.80676Z" fill="#A2B1C6"/>
</svg>
</template>
<script>
export default {
name: 'ChartIcon'
}
</script>

19
src/components/svg/dataView.vue Normal file
View File

@@ -0,0 +1,19 @@
<template>
<svg
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5552 6.91522C13.7584 6.91357 13.9535 6.99442 14.096 7.13926L17.2582 10.3541C17.5486 10.6494 17.5447 11.1242 17.2494 11.4147C16.9541 11.7051 16.4793 11.7012 16.1888 11.4059L13.57 8.74357L9.29577 13.2318C9.01977 13.5216 8.56484 13.5436 8.2621 13.2819L5.35435 10.7677L2.03285 13.7321C1.72382 14.0079 1.24971 13.981 0.973901 13.6719C0.69809 13.3629 0.725022 12.8888 1.03406 12.613L4.8471 9.20986C5.12827 8.95892 5.55198 8.95559 5.83705 9.20208L8.70249 11.6797L13.0182 7.14796C13.1583 7.00084 13.3521 6.91686 13.5552 6.91522Z" fill="#A2B1C6"/>
<circle cx="5.50049" cy="6.00339" r="1.5" fill="#A2B1C6"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.036 1.21788L1.96546 1.213C1.14046 1.213 0.465462 1.888 0.465462 2.713L0.464111 15.2821C0.464111 16.1071 1.13911 16.7821 1.96411 16.7821L16.0347 16.787C16.8674 16.787 17.5347 16.1121 17.5347 15.287L17.536 2.71788C17.536 1.88787 16.866 1.21788 16.036 1.21788ZM16.0374 2.71788L1.96424 2.713L1.96289 15.2773L16.036 15.2821L16.0374 2.71788Z" fill="#A2B1C6"/>
</svg>
</template>
<script>
export default {
name: 'DataViewIcon'
}
</script>

17
src/components/svg/export.vue
View File

@@ -6,17 +6,16 @@
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
@click.stop="$emit('click')"
@mouseover="showTooltip"
@mouseout="hideTooltip"
@click.stop="onClick"
@mouseenter="showTooltip($event, tooltipPosition)"
@mouseleave="hideTooltip"
>
<path
d="M10.5 1.5H4.5C3.675 1.5 3 2.175 3 3V15C3 15.825 3.675 16.5 4.5 16.5H13.5C14.325 16.5 15 15.825 15 15V6L10.5 1.5ZM13.5 15H4.5V3H9.75V6.75H13.5V15ZM12 8.25V13.575L10.425 12L8.325 14.1L6.225 12L8.325 9.9L6.675 8.25H12Z"
fill="#A2B1C6"
/>
</svg>
<span class="icon-tooltip" :style="tooltipStyle">
<span class="icon-tooltip" :style="tooltipStyle" ref="tooltip">
{{ tooltip }}
</span>
</span>
@@ -28,7 +27,13 @@ import tooltipMixin from '@/tooltipMixin'
export default {
name: 'ExportIcon',
mixins: [tooltipMixin],
props: ['tooltip']
props: ['tooltip', 'tooltipPosition'],
methods: {
onClick () {
this.hideTooltip()
this.$emit('click')
}
}
}
</script>

16
src/components/svg/hint.vue
View File

@@ -6,14 +6,14 @@
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
@mouseover="showTooltip"
@mouseout="hideTooltip"
@click.stop="onClick"
@mouseenter="showTooltip"
@mouseleave="hideTooltip"
>
<path d="M8.75 14.1666H10.4167V12.5H8.75V14.1666ZM9.58333 16.25C5.90833 16.25 2.91667 13.2583 2.91667 9.58333C2.91667 5.90833 5.90833 2.91667 9.58333 2.91667C13.2583 2.91667 16.25 5.90833 16.25 9.58333C16.25 13.2583 13.2583 16.25 9.58333 16.25ZM9.58333 1.25C8.48898 1.25 7.40535 1.46555 6.3943 1.88434C5.38326 2.30313 4.4646 2.91696 3.69078 3.69078C2.12797 5.25358 1.25 7.3732 1.25 9.58333C1.25 11.7935 2.12797 13.9131 3.69078 15.4759C4.4646 16.2497 5.38326 16.8635 6.3943 17.2823C7.40535 17.7011 8.48898 17.9167 9.58333 17.9167C11.7935 17.9167 13.9131 17.0387 15.4759 15.4759C17.0387 13.9131 17.9167 11.7935 17.9167 9.58333C17.9167 8.48898 17.7011 7.40535 17.2823 6.3943C16.8635 5.38326 16.2497 4.4646 15.4759 3.69078C14.7021 2.91696 13.7834 2.30313 12.7724 1.88434C11.7613 1.46555 10.6777 1.25 9.58333 1.25Z" fill="#A2B1C6"/>
<path d="M9.91601 4.51787C8.98167 4.42606 8.05144 4.69097 7.36309 5.24472C6.68735 5.78828 6.2998 6.56661 6.2998 7.38012H7.92488C7.92488 6.97463 8.11059 6.60187 8.44779 6.33061C8.79784 6.049 9.25647 5.92005 9.73896 5.96755C10.4832 6.04076 11.0828 6.57277 11.1647 7.23265C11.2306 7.764 10.9661 8.28194 10.4744 8.58426C9.38676 9.25303 8.73742 10.343 8.73742 11.5H10.3625C10.3625 10.8243 10.7477 10.184 11.3929 9.78733C12.3808 9.17985 12.9122 8.13913 12.7798 7.07124C12.6144 5.73863 11.41 4.66476 9.91601 4.51787Z" fill="#A2B1C6"/>
</svg>
<span class="icon-tooltip" :style="{...tooltipStyle, maxWidth: maxWidth }">
<span class="icon-tooltip" :style="{...tooltipStyle, maxWidth: maxWidth }" ref="tooltip">
{{ hint }}
</span>
</div>
@@ -25,7 +25,13 @@ import tooltipMixin from '@/tooltipMixin'
export default {
name: 'HintIcon',
props: ['hint', 'maxWidth'],
mixins: [tooltipMixin]
mixins: [tooltipMixin],
methods: {
onClick () {
this.hideTooltip()
this.$emit('click')
}
}
}
</script>

20
src/components/svg/pivot.vue Normal file
View File

@@ -0,0 +1,20 @@
<template>
<svg
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.7661 5.13901L18.3407 9.43008H16.5161V12.8467C16.5161 13.7957 16.2783 14.6451 15.6714 15.2521C15.0645 15.859 14.215 16.0967 13.2661 16.0967H9.84942V17.9214L5.55835 15.3467L9.84942 12.7721V14.5967H13.2661C13.9838 14.5967 14.3844 14.4178 14.6108 14.1914C14.8372 13.965 15.0161 13.5645 15.0161 12.8467V9.43008H13.1914L15.7661 5.13901Z" fill="#A2B1C6"/>
<path d="M6.41943 0H18.4194V4H6.41943V0Z" fill="#A2B1C6"/>
<path d="M0.419434 6H4.41943V18H0.419434V6Z" fill="#A2B1C6"/>
<path d="M0.419434 0H4.41943V4H0.419434V0Z" fill="#A2B1C6"/>
</svg>
</template>
<script>
export default {
name: 'PivotIcon'
}
</script>

5
src/components/svg/png.svg Normal file
View File

@@ -0,0 +1,5 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 5.51953C6.57686 5.51953 4.60547 7.49092 4.60547 9.91406C4.60547 12.3372 6.57686 14.3086 9 14.3086C11.4231 14.3086 13.3945 12.3372 13.3945 9.91406C13.3945 7.49092 11.4231 5.51953 9 5.51953ZM9 12.9023C7.35226 12.9023 6.01172 11.5618 6.01172 9.91406C6.01172 8.26632 7.35226 6.92578 9 6.92578C10.6477 6.92578 11.9883 8.26632 11.9883 9.91406C11.9883 11.5618 10.6477 12.9023 9 12.9023Z" fill="#A2B1C6"/>
<path d="M15.8906 3.41016H13.304C13.2221 3.41016 13.1483 3.36547 13.1104 3.29319L12.3948 1.78945C12.3928 1.78534 12.3908 1.78126 12.3887 1.77718C12.1117 1.22312 11.5548 0.878906 10.9353 0.878906H7.11478C6.49529 0.878906 5.93835 1.22312 5.66135 1.77722C5.65928 1.7813 5.65731 1.78538 5.65534 1.78949L4.9397 3.2933C4.90173 3.36547 4.82797 3.41016 4.74609 3.41016H2.10938C0.946266 3.41016 0 4.35642 0 5.51953V15.0117C0 16.1748 0.946266 17.1211 2.10938 17.1211H15.8906C17.0537 17.1211 18 16.1748 18 15.0117V5.51953C18 4.35642 17.0537 3.41016 15.8906 3.41016ZM16.5938 15.0117C16.5938 15.3994 16.2783 15.7148 15.8906 15.7148H2.10938C1.72167 15.7148 1.40625 15.3994 1.40625 15.0117V5.51953C1.40625 5.13183 1.72167 4.81641 2.10938 4.81641H4.74609C5.36555 4.81641 5.92249 4.47223 6.19952 3.91816C6.2016 3.91409 6.20357 3.90997 6.20557 3.90586L6.92121 2.40205C6.95914 2.32984 7.0329 2.28516 7.11478 2.28516H10.9353C11.0172 2.28516 11.091 2.32984 11.1289 2.40202L11.8445 3.90582C11.8465 3.90994 11.8485 3.91405 11.8506 3.91813C12.1276 4.47219 12.6846 4.81637 13.304 4.81637H15.8906C16.2783 4.81637 16.5938 5.13179 16.5938 5.5195V15.0117Z" fill="#A2B1C6"/>
<path d="M15.1875 6.22266H13.7812V7.62891H15.1875V6.22266Z" fill="#A2B1C6"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

18
src/components/svg/png.vue Normal file
View File

@@ -0,0 +1,18 @@
<template>
<svg
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
>
<path d="M9 5.51953C6.57686 5.51953 4.60547 7.49092 4.60547 9.91406C4.60547 12.3372 6.57686 14.3086 9 14.3086C11.4231 14.3086 13.3945 12.3372 13.3945 9.91406C13.3945 7.49092 11.4231 5.51953 9 5.51953ZM9 12.9023C7.35226 12.9023 6.01172 11.5618 6.01172 9.91406C6.01172 8.26632 7.35226 6.92578 9 6.92578C10.6477 6.92578 11.9883 8.26632 11.9883 9.91406C11.9883 11.5618 10.6477 12.9023 9 12.9023Z" fill="#A2B1C6"/>
<path d="M15.8906 3.41016H13.304C13.2221 3.41016 13.1483 3.36547 13.1104 3.29319L12.3948 1.78945C12.3928 1.78534 12.3908 1.78126 12.3887 1.77718C12.1117 1.22312 11.5548 0.878906 10.9353 0.878906H7.11478C6.49529 0.878906 5.93835 1.22312 5.66135 1.77722C5.65928 1.7813 5.65731 1.78538 5.65534 1.78949L4.9397 3.2933C4.90173 3.36547 4.82797 3.41016 4.74609 3.41016H2.10938C0.946266 3.41016 0 4.35642 0 5.51953V15.0117C0 16.1748 0.946266 17.1211 2.10938 17.1211H15.8906C17.0537 17.1211 18 16.1748 18 15.0117V5.51953C18 4.35642 17.0537 3.41016 15.8906 3.41016ZM16.5938 15.0117C16.5938 15.3994 16.2783 15.7148 15.8906 15.7148H2.10938C1.72167 15.7148 1.40625 15.3994 1.40625 15.0117V5.51953C1.40625 5.13183 1.72167 4.81641 2.10938 4.81641H4.74609C5.36555 4.81641 5.92249 4.47223 6.19952 3.91816C6.2016 3.91409 6.20357 3.90997 6.20557 3.90586L6.92121 2.40205C6.95914 2.32984 7.0329 2.28516 7.11478 2.28516H10.9353C11.0172 2.28516 11.091 2.32984 11.1289 2.40202L11.8445 3.90582C11.8465 3.90994 11.8485 3.91405 11.8506 3.91813C12.1276 4.47219 12.6846 4.81637 13.304 4.81637H15.8906C16.2783 4.81637 16.5938 5.13179 16.5938 5.5195V15.0117Z" fill="#A2B1C6"/>
<path d="M15.1875 6.22266H13.7812V7.62891H15.1875V6.22266Z" fill="#A2B1C6"/>
</svg>
</template>
<script>
export default {
name: 'PngIcon'
}
</script>

17
src/components/svg/run.vue Normal file
View File

@@ -0,0 +1,17 @@
<template>
<svg
width="12"
height="13"
viewBox="0 0 12 13"
fill="none"
>
<path d="M11.1624 6.94358L0.770043 12.9436L0.770043 0.943573L11.1624 6.94358Z" fill="#A2B1C6"/>
</svg>
</template>
<script>
export default {
name: 'RunIcon'
}
</script>

45
src/components/svg/sort.vue Normal file
View File

@@ -0,0 +1,45 @@
<template>
<svg
:class="['sort-icon', { horizontal }, { asc }]"
width="6"
height="12"
viewBox="0 0 6 12"
fill="none"
>
<path d="M2.99932 -3.63032e-05C2.75092 -3.63032e-05 2.54932 0.201563 2.54932 0.449964L2.54932 11.55C2.54932 11.7984 2.75092 12 2.99932 12C3.24772 12 3.44932 11.7984 3.44932 11.55L3.44932 0.449964C3.44932 0.201563 3.24772 -3.63032e-05 2.99932 -3.63032e-05Z" fill="#506784"/>
<path d="M2.99915 1.80492e-05C2.8839 1.80492e-05 2.76865 0.0438534 2.68109 0.132073L0.581055 2.232C0.405273 2.40789 0.405273 2.69287 0.581055 2.86865C0.756946 3.04443 1.04193 3.04443 1.21771 2.86865L2.99969 1.08667L4.78168 2.86865C4.95746 3.04443 5.24255 3.04443 5.41833 2.86865C5.59412 2.69287 5.59412 2.40789 5.41833 2.232L3.3183 0.132073C3.22953 0.0438534 3.11428 1.80492e-05 2.99915 1.80492e-05V1.80492e-05Z" fill="#506784"/>
</svg>
</template>
<script>
export default {
name: 'SortIcon',
props: {
horizontal: {
type: Boolean,
required: false,
default: false
},
asc: {
type: Boolean,
required: false,
default: true
}
}
}
</script>
<style scoped>
svg.asc {
transform: rotate(180deg);
}
svg.horizontal {
transform: rotate(-90deg);
}
svg.horizontal.asc {
transform: rotate(90deg);
}
</style>

25
src/components/svg/sqlEditor.vue Normal file
View File

@@ -0,0 +1,25 @@
<template>
<svg
width="18"
height="19"
viewBox="0 0 18 19"
fill="none"
>
<g clip-path="url(#clip0)">
<path d="M4.5 1.51343H10.5L15 6.01343V8.45284H13.5V6.76343H9.75V3.01343H4.5V8.45284H3V3.01343C3 2.18843 3.675 1.51343 4.5 1.51343Z" fill="#A2B1C6"/>
<path d="M4.28369 14.8127C4.28369 14.5872 4.20312 14.4114 4.04199 14.2854C3.88379 14.1594 3.604 14.0291 3.20264 13.8943C2.80127 13.7595 2.47314 13.6292 2.21826 13.5032C1.38916 13.0959 0.974609 12.5364 0.974609 11.8245C0.974609 11.47 1.07715 11.158 1.28223 10.8884C1.49023 10.616 1.7832 10.405 2.16113 10.2556C2.53906 10.1033 2.96387 10.0271 3.43555 10.0271C3.89551 10.0271 4.30713 10.1091 4.67041 10.2732C5.03662 10.4373 5.3208 10.6716 5.52295 10.9763C5.7251 11.2781 5.82617 11.6238 5.82617 12.0134H4.28809C4.28809 11.7527 4.20752 11.5505 4.04639 11.407C3.88818 11.2634 3.67285 11.1917 3.40039 11.1917C3.125 11.1917 2.90674 11.2532 2.74561 11.3762C2.5874 11.4963 2.5083 11.6501 2.5083 11.8376C2.5083 12.0017 2.59619 12.1511 2.77197 12.2859C2.94775 12.4177 3.25684 12.5554 3.69922 12.699C4.1416 12.8396 4.50488 12.9919 4.78906 13.156C5.48047 13.5544 5.82617 14.1038 5.82617 14.804C5.82617 15.3635 5.61523 15.803 5.19336 16.1223C4.77148 16.4417 4.19287 16.6013 3.45752 16.6013C2.93896 16.6013 2.46875 16.509 2.04688 16.3245C1.62793 16.137 1.31152 15.8821 1.09766 15.5598C0.886719 15.2346 0.78125 14.8611 0.78125 14.4392H2.32812C2.32812 14.782 2.41602 15.0354 2.5918 15.1995C2.77051 15.3606 3.05908 15.4412 3.45752 15.4412C3.7124 15.4412 3.91309 15.387 4.05957 15.2786C4.20898 15.1672 4.28369 15.012 4.28369 14.8127ZM12.0444 13.446C12.0444 14.0378 11.9463 14.5549 11.75 14.9973C11.5537 15.4368 11.2827 15.7898 10.937 16.0564L11.9697 16.8738L11.0161 17.6824L9.64062 16.575C9.51172 16.5925 9.38281 16.6013 9.25391 16.6013C8.70898 16.6013 8.22559 16.4753 7.80371 16.2234C7.38184 15.9714 7.05225 15.6111 6.81494 15.1423C6.58057 14.6736 6.45898 14.1345 6.4502 13.5251V13.1868C6.4502 12.5569 6.56445 12.0032 6.79297 11.5256C7.02441 11.0481 7.35254 10.679 7.77734 10.4182C8.20508 10.1575 8.69434 10.0271 9.24512 10.0271C9.78711 10.0271 10.2705 10.156 10.6953 10.4138C11.1201 10.6716 11.4497 11.0393 11.6841 11.5168C11.9214 11.9915 12.0415 12.5364 12.0444 13.1516V13.446ZM10.4756 13.178C10.4756 12.5422 10.3687 12.0603 10.1548 11.7322C9.94385 11.4011 9.64062 11.2356 9.24512 11.2356C8.83789 11.2356 8.53174 11.3982 8.32666 11.7234C8.12158 12.0486 8.01758 12.5247 8.01465 13.1516V13.446C8.01465 14.0759 8.11865 14.5593 8.32666 14.8962C8.53467 15.2302 8.84375 15.3972 9.25391 15.3972C9.64648 15.3972 9.94678 15.2317 10.1548 14.9006C10.3657 14.5696 10.4727 14.0935 10.4756 13.4724V13.178ZM14.3735 15.3269H17.0586V16.5134H12.8311V10.115H14.3735V15.3269Z" fill="#A2B1C6"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="18" height="18" fill="white" transform="translate(0 0.0134277)"/>
</clipPath>
</defs>
</svg>
</template>
<script>
export default {
name: 'SqlEditorIcon'
}
</script>

21
src/components/svg/table.vue Normal file
View File

@@ -0,0 +1,21 @@
<template>
<svg
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
>
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5 2.16512L3.5 2.16999C2.675 2.16999 2 2.84499 2 3.66999V14.3349C2 15.1599 2.675 15.8349 3.5 15.8349L14.5 15.83C15.3327 15.83 16 15.1551 16 14.33V3.66512C16 2.83511 15.33 2.16512 14.5 2.16512ZM14.5014 3.66512L3.49878 3.66999V14.33L14.5014 14.3251V3.66512Z" fill="#A2B1C6"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.27319 14.7069L6.27319 3.32135L7.77319 3.32135L7.77319 14.7069L6.27319 14.7069Z" fill="#A2B1C6"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.2639 14.6932L10.2639 3.30772L11.7639 3.30772L11.7639 14.6932L10.2639 14.6932Z" fill="#A2B1C6"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.5108 7.48325H2.4895V5.98325H15.5108V7.48325Z" fill="#A2B1C6"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.5108 11.6056H2.4895V10.1056H15.5108V11.6056Z" fill="#A2B1C6"/>
</svg>
</template>
<script>
export default {
name: 'TableIcon'
}
</script>