mirror of
https://github.com/lana-k/sqliteviz.git
synced 2025-12-06 18:18:53 +08:00
migrate to vite
This commit is contained in:
12
src/App.vue
12
src/App.vue
@@ -33,42 +33,42 @@ export default {
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: "Open Sans";
|
||||
src: url("~@/assets/fonts/OpenSans-Regular.woff2");
|
||||
src: url("@/assets/fonts/OpenSans-Regular.woff2");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Open Sans";
|
||||
src: url("~@/assets/fonts/OpenSans-SemiBold.woff2");
|
||||
src: url("@/assets/fonts/OpenSans-SemiBold.woff2");
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Open Sans";
|
||||
src: url("~@/assets/fonts/OpenSans-Bold.woff2");
|
||||
src: url("@/assets/fonts/OpenSans-Bold.woff2");
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Open Sans";
|
||||
src: url("~@/assets/fonts/OpenSans-Italic.woff2");
|
||||
src: url("@/assets/fonts/OpenSans-Italic.woff2");
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Open Sans";
|
||||
src: url("~@/assets/fonts/OpenSans-SemiBoldItalic.woff2");
|
||||
src: url("@/assets/fonts/OpenSans-SemiBoldItalic.woff2");
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Open Sans";
|
||||
src: url("~@/assets/fonts/OpenSans-BoldItalic.woff2");
|
||||
src: url("@/assets/fonts/OpenSans-BoldItalic.woff2");
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
}
|
||||
|
||||
.dialog-body {
|
||||
min-height: 60px;
|
||||
min-height: 56px;
|
||||
background-color: var(--color-bg-light);
|
||||
padding: 24px;
|
||||
border-top: 1px solid var(--color-border-light);
|
||||
|
||||
@@ -62,14 +62,14 @@
|
||||
margin: 2px;
|
||||
}
|
||||
.sqliteviz-select .multiselect__tag-icon:after {
|
||||
content: url('~@/assets/images/delete-tag.svg');
|
||||
content: url('@/assets/images/delete-tag.svg');
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
.sqliteviz-select .multiselect__tag-icon:focus:after,
|
||||
.sqliteviz-select .multiselect__tag-icon:hover:after {
|
||||
content: url('~@/assets/images/delete-tag-hover.svg');
|
||||
content: url('@/assets/images/delete-tag-hover.svg');
|
||||
}
|
||||
|
||||
.sqliteviz-select .multiselect__tag-icon:focus,
|
||||
@@ -102,7 +102,7 @@
|
||||
}
|
||||
|
||||
.sqliteviz-select .multiselect__select:before {
|
||||
content: url('~@/assets/images/arrow.svg');
|
||||
content: url('@/assets/images/arrow.svg');
|
||||
border: none;
|
||||
top: 0;
|
||||
}
|
||||
@@ -116,7 +116,7 @@
|
||||
}
|
||||
|
||||
.sqliteviz-select .multiselect__select:hover:before {
|
||||
content: url('~@/assets/images/arrow-hover.svg');
|
||||
content: url('@/assets/images/arrow-hover.svg');
|
||||
}
|
||||
|
||||
.sqliteviz-select.multiselect--active .multiselect__tags {
|
||||
|
||||
@@ -7,12 +7,12 @@
|
||||
<img
|
||||
v-show="checked && !disabled"
|
||||
:src="theme === 'light'
|
||||
? require('@/assets/images/checkbox_checked_light.svg')
|
||||
: require('@/assets/images/checkbox_checked.svg')"
|
||||
? '~@/assets/images/checkbox_checked_light.svg'
|
||||
: '~@/assets/images/checkbox_checked.svg'"
|
||||
/>
|
||||
<img
|
||||
v-show="checked && disabled"
|
||||
:src="require('@/assets/images/checkbox_checked_disabled.svg')"
|
||||
src="~@/assets/images/checkbox_checked_disabled.svg"
|
||||
/>
|
||||
<span v-if="label" class="label">{{ label }}</span>
|
||||
</div>
|
||||
|
||||
@@ -16,11 +16,11 @@
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="type === 'illustrated'" id="img-container">
|
||||
<img id="drop-file-top-img" :src="require('@/assets/images/top.svg')" />
|
||||
<img id="drop-file-top-img" src="~@/assets/images/top.svg" />
|
||||
<img
|
||||
id="left-arm-img"
|
||||
:class="{'swing': state === 'dragover'}"
|
||||
:src="require('@/assets/images/leftArm.svg')"
|
||||
src="~@/assets/images/leftArm.svg"
|
||||
/>
|
||||
<img
|
||||
id="file-img"
|
||||
@@ -30,14 +30,14 @@
|
||||
'fly': state === 'dropping',
|
||||
'hidden': state === 'dropped'
|
||||
}"
|
||||
:src="require('@/assets/images/file.png')"
|
||||
src="~@/assets/images/file.png"
|
||||
/>
|
||||
<img id="drop-file-bottom-img" :src="require('@/assets/images/bottom.svg')" />
|
||||
<img id="body-img" :src="require('@/assets/images/body.svg')" />
|
||||
<img id="drop-file-bottom-img" src="~@/assets/images/bottom.svg" />
|
||||
<img id="body-img" src="~@/assets/images/body.svg" />
|
||||
<img
|
||||
id="right-arm-img"
|
||||
:class="{'swing': state === 'dragover'}"
|
||||
:src="require('@/assets/images/rightArm.svg')"
|
||||
src="~@/assets/images/rightArm.svg"
|
||||
/>
|
||||
</div>
|
||||
<div id="error" class="error"></div>
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
{{ loadingMsg }}
|
||||
</div>
|
||||
<div v-else class="loading-dialog-body">
|
||||
<img :src="require('@/assets/images/success.svg')" class="success-icon state-icon" />
|
||||
<img src="~@/assets/images/success.svg" class="success-icon state-icon" />
|
||||
{{ successMsg }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div class="logs-container" ref="logsContainer">
|
||||
<div v-for="(msg, index) in messages" :key="index" class="msg">
|
||||
<img v-if="msg.type === 'error'" :src="require('@/assets/images/error.svg')">
|
||||
<img v-if="msg.type === 'info'" :src="require('@/assets/images/info.svg')" width="20px">
|
||||
<img v-if="msg.type === 'success'" :src="require('@/assets/images/success.svg')">
|
||||
<img v-if="msg.type === 'error'" src="~@/assets/images/error.svg">
|
||||
<img v-if="msg.type === 'info'" src="~@/assets/images/info.svg" width="20px">
|
||||
<img v-if="msg.type === 'success'" src="~@/assets/images/success.svg">
|
||||
<loading-indicator v-if="msg.type === 'loading'" :progress="msg.progress" />
|
||||
<span class="msg-text">{{ serializeMessage(msg) }}</span>
|
||||
</div>
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
>
|
||||
<img
|
||||
class="direction-icon"
|
||||
:src="require('@/assets/images/chevron.svg')"
|
||||
src="~@/assets/images/chevron.svg"
|
||||
:style="directionBeforeIconStyle"
|
||||
>
|
||||
</div>
|
||||
@@ -50,7 +50,7 @@
|
||||
>
|
||||
<img
|
||||
class="direction-icon"
|
||||
:src="require('@/assets/images/chevron.svg')"
|
||||
src="~@/assets/images/chevron.svg"
|
||||
:style="directionAfterIconStyle"
|
||||
>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,11 @@
|
||||
import initSqlJs from 'sql.js/dist/sql-wasm.js'
|
||||
import dbUtils from './_statements'
|
||||
import wasmUrl from 'sql.js/dist/sql-wasm.wasm?url'
|
||||
|
||||
let SQL = null
|
||||
const sqlModuleReady = initSqlJs().then(sqlModule => { SQL = sqlModule })
|
||||
const sqlModuleReady = initSqlJs({
|
||||
locateFile: () => wasmUrl
|
||||
}).then(sqlModule => { SQL = sqlModule })
|
||||
|
||||
function _getDataSourcesFromSqlResult (sqlResult) {
|
||||
if (!sqlResult) {
|
||||
|
||||
@@ -1,7 +1,4 @@
|
||||
import fu from '@/lib/utils/fileIo'
|
||||
// We can import workers like so because of worker-loader:
|
||||
// https://webpack.js.org/loaders/worker-loader/
|
||||
import Worker from './_worker.js'
|
||||
|
||||
// Use promise-worker in order to turn worker into the promise based one:
|
||||
// https://github.com/nolanlawson/promise-worker
|
||||
@@ -10,7 +7,10 @@ import PromiseWorker from 'promise-worker'
|
||||
import events from '@/lib/utils/events'
|
||||
|
||||
function getNewDatabase () {
|
||||
const worker = new Worker()
|
||||
const worker = new Worker(
|
||||
new URL('./_worker.js', import.meta.url),
|
||||
{ type: 'module' }
|
||||
)
|
||||
return new Database(worker)
|
||||
}
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div id="app-info-container">
|
||||
<img
|
||||
id="app-info-icon"
|
||||
:src="require('@/assets/images/info.svg')"
|
||||
src="~@/assets/images/info.svg"
|
||||
@click="$modal.show('app-info')"
|
||||
/>
|
||||
<modal
|
||||
@@ -31,6 +31,7 @@
|
||||
|
||||
<script>
|
||||
import CloseIcon from '@/components/svg/close'
|
||||
import { version } from '../../../package.json'
|
||||
|
||||
export default {
|
||||
name: 'AppDiagnosticInfo',
|
||||
@@ -40,7 +41,7 @@ export default {
|
||||
info: [
|
||||
{
|
||||
name: 'sqliteviz version',
|
||||
info: [require('../../../package.json').version]
|
||||
info: [version]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -119,7 +119,7 @@
|
||||
</div>
|
||||
|
||||
<!--Rename Inquiry dialog -->
|
||||
<modal modal-id="rename" class="dialog">
|
||||
<modal modal-id="rename" class="dialog" content-style="width: 560px;">
|
||||
<div class="dialog-header">
|
||||
Rename inquiry
|
||||
<close-icon @click="$modal.hide('rename')"/>
|
||||
@@ -139,7 +139,7 @@
|
||||
</modal>
|
||||
|
||||
<!--Delete Inquiry dialog -->
|
||||
<modal modal-id="delete" class="dialog">
|
||||
<modal modal-id="delete" class="dialog" content-style="width: 480px;">
|
||||
<div class="dialog-header">
|
||||
Delete {{ deleteGroup ? 'inquiries' : 'inquiry' }}
|
||||
<close-icon @click="$modal.hide('delete')"/>
|
||||
@@ -147,7 +147,7 @@
|
||||
<div class="dialog-body">
|
||||
{{ deleteDialogMsg }}
|
||||
<div v-show="selectedInquiriesCount > selectedNotPredefinedCount" id="note">
|
||||
<img :src="require('@/assets/images/info.svg')">
|
||||
<img src="~@/assets/images/info.svg">
|
||||
Note: Predefined inquiries you've selected won't be deleted
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<nav>
|
||||
<div id="nav-links">
|
||||
<a href="https://sqliteviz.com">
|
||||
<img :src="require('@/assets/images/logo_simple.svg')">
|
||||
<img src="~@/assets/images/logo_simple.svg">
|
||||
</a>
|
||||
<router-link to="/workspace">Workspace</router-link>
|
||||
<router-link to="/inquiries">Inquiries</router-link>
|
||||
@@ -29,14 +29,14 @@
|
||||
</div>
|
||||
|
||||
<!--Save Inquiry dialog -->
|
||||
<modal modal-id="save" class="dialog">
|
||||
<modal modal-id="save" class="dialog" content-style="width: 560px;">
|
||||
<div class="dialog-header">
|
||||
Save inquiry
|
||||
<close-icon @click="cancelSave"/>
|
||||
</div>
|
||||
<div class="dialog-body">
|
||||
<div v-show="isPredefined" id="save-note">
|
||||
<img :src="require('@/assets/images/info.svg')">
|
||||
<img src="~@/assets/images/info.svg">
|
||||
Note: Predefined inquiries can't be edited.
|
||||
That's why your modifications will be saved as a new inquiry. Enter the name for it.
|
||||
</div>
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
</div>
|
||||
|
||||
<!--Close tab warning dialog -->
|
||||
<modal modal-id="close-warn" class="dialog">
|
||||
<modal modal-id="close-warn" class="dialog" content-style="width: 560px;">
|
||||
<div class="dialog-header">
|
||||
Close tab {{
|
||||
closingTab !== null
|
||||
@@ -49,7 +49,7 @@
|
||||
<button class="secondary" @click="closeTab(closingTab)">
|
||||
Close without saving
|
||||
</button>
|
||||
<button class="secondary" @click="$modal.hide('close-warn')">Cancel</button>
|
||||
<button class="secondary" @click="$modal.hide('close-warn')">Don't close</button>
|
||||
<button class="primary" @click="saveAndClose(closingTab)">Save and close</button>
|
||||
</div>
|
||||
</modal>
|
||||
|
||||
Reference in New Issue
Block a user