1
0
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:
lana-k
2025-02-01 20:54:26 +01:00
parent 8fa3c2ae58
commit 828cad6439
17 changed files with 92 additions and 52 deletions

View File

@@ -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;
}

View File

@@ -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);

View File

@@ -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 {

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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) {

View File

@@ -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)
}

View File

@@ -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]
}
]
}

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>