diff --git a/.eslintrc.cjs b/.eslintrc.cjs index cc788ff..ea8d570 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -5,7 +5,7 @@ module.exports = { root: true, extends: [ 'plugin:vue/vue3-essential', - 'eslint:recommended', + // 'eslint:recommended', '@vue/eslint-config-typescript', './.eslintrc-auto-import.json' ], @@ -186,6 +186,7 @@ module.exports = { 'error', 2 ], - 'vue/multi-word-component-names': 'off' + 'vue/multi-word-component-names': 'off', + 'vue/require-typed-ref': 'error' } }; diff --git a/auto-imports.d.ts b/auto-imports.d.ts index 108a983..1d89ee8 100644 --- a/auto-imports.d.ts +++ b/auto-imports.d.ts @@ -5,66 +5,5 @@ // Generated by unplugin-auto-import export {} declare global { - const EffectScope: typeof import('vue')['EffectScope'] - const computed: typeof import('vue')['computed'] - const createApp: typeof import('vue')['createApp'] - const customRef: typeof import('vue')['customRef'] - const defineAsyncComponent: typeof import('vue')['defineAsyncComponent'] - const defineComponent: typeof import('vue')['defineComponent'] - const effectScope: typeof import('vue')['effectScope'] - const getCurrentInstance: typeof import('vue')['getCurrentInstance'] - const getCurrentScope: typeof import('vue')['getCurrentScope'] - const h: typeof import('vue')['h'] - const inject: typeof import('vue')['inject'] - const isProxy: typeof import('vue')['isProxy'] - const isReactive: typeof import('vue')['isReactive'] - const isReadonly: typeof import('vue')['isReadonly'] - const isRef: typeof import('vue')['isRef'] - const markRaw: typeof import('vue')['markRaw'] - const nextTick: typeof import('vue')['nextTick'] - const onActivated: typeof import('vue')['onActivated'] - const onBeforeMount: typeof import('vue')['onBeforeMount'] - const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave'] - const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate'] - const onBeforeUnmount: typeof import('vue')['onBeforeUnmount'] - const onBeforeUpdate: typeof import('vue')['onBeforeUpdate'] - const onDeactivated: typeof import('vue')['onDeactivated'] - const onErrorCaptured: typeof import('vue')['onErrorCaptured'] - const onMounted: typeof import('vue')['onMounted'] - const onRenderTracked: typeof import('vue')['onRenderTracked'] - const onRenderTriggered: typeof import('vue')['onRenderTriggered'] - const onScopeDispose: typeof import('vue')['onScopeDispose'] - const onServerPrefetch: typeof import('vue')['onServerPrefetch'] - const onUnmounted: typeof import('vue')['onUnmounted'] - const onUpdated: typeof import('vue')['onUpdated'] - const provide: typeof import('vue')['provide'] - const reactive: typeof import('vue')['reactive'] - const readonly: typeof import('vue')['readonly'] - const ref: typeof import('vue')['ref'] - const resolveComponent: typeof import('vue')['resolveComponent'] - const shallowReactive: typeof import('vue')['shallowReactive'] - const shallowReadonly: typeof import('vue')['shallowReadonly'] - const shallowRef: typeof import('vue')['shallowRef'] - const toRaw: typeof import('vue')['toRaw'] - const toRef: typeof import('vue')['toRef'] - const toRefs: typeof import('vue')['toRefs'] - const toValue: typeof import('vue')['toValue'] - const triggerRef: typeof import('vue')['triggerRef'] - const unref: typeof import('vue')['unref'] - const useAttrs: typeof import('vue')['useAttrs'] - const useCssModule: typeof import('vue')['useCssModule'] - const useCssVars: typeof import('vue')['useCssVars'] - const useLink: typeof import('vue-router')['useLink'] - const useRoute: typeof import('vue-router')['useRoute'] - const useRouter: typeof import('vue-router')['useRouter'] - const useSlots: typeof import('vue')['useSlots'] - const watch: typeof import('vue')['watch'] - const watchEffect: typeof import('vue')['watchEffect'] - const watchPostEffect: typeof import('vue')['watchPostEffect'] - const watchSyncEffect: typeof import('vue')['watchSyncEffect'] -} -// for type re-export -declare global { - // @ts-ignore - export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue' + } diff --git a/components.d.ts b/components.d.ts index cccd667..9a038c6 100644 --- a/components.d.ts +++ b/components.d.ts @@ -8,7 +8,11 @@ export {} declare module 'vue' { export interface GlobalComponents { Avatar: typeof import('primevue/avatar')['default'] + Badge: typeof import('primevue/badge')['default'] Button: typeof import('primevue/button')['default'] + InputText: typeof import('primevue/inputtext')['default'] + Menubar: typeof import('primevue/menubar')['default'] + NavbarComponent: typeof import('./src/components/NavbarComponent.vue')['default'] PButton: typeof import('primevue/button')['default'] PSidebar: typeof import('primevue/sidebar')['default'] RouterLink: typeof import('vue-router')['RouterLink'] diff --git a/package.json b/package.json index 99a472a..2ad6534 100644 --- a/package.json +++ b/package.json @@ -12,14 +12,14 @@ "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore" }, "dependencies": { + "@quasar/extras": "^1.16.8", "pinia": "^2.1.7", - "primeflex": "^3.3.1", - "primeicons": "^6.0.1", - "primevue": "^3.40.1", + "quasar": "^2.13.1", "vue": "^3.3.4", "vue-router": "^4.2.5" }, "devDependencies": { + "@quasar/vite-plugin": "^1.6.0", "@rushstack/eslint-patch": "^1.3.3", "@stylistic/eslint-plugin": "^1.1.0", "@tsconfig/node18": "^18.2.2", @@ -34,6 +34,7 @@ "eslint-plugin-vue": "^9.17.0", "jsdom": "^22.1.0", "npm-run-all2": "^6.1.1", + "sass": "1.32.12", "typescript": "~5.2.0", "unplugin-auto-import": "^0.16.7", "unplugin-vue-components": "^0.25.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 94d9801..a178784 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5,18 +5,15 @@ settings: excludeLinksFromLockfile: false dependencies: + '@quasar/extras': + specifier: ^1.16.8 + version: 1.16.8 pinia: specifier: ^2.1.7 version: 2.1.7(typescript@5.2.2)(vue@3.3.8) - primeflex: - specifier: ^3.3.1 - version: 3.3.1 - primeicons: - specifier: ^6.0.1 - version: 6.0.1 - primevue: - specifier: ^3.40.1 - version: 3.40.1(vue@3.3.8) + quasar: + specifier: ^2.13.1 + version: 2.13.1 vue: specifier: ^3.3.4 version: 3.3.8(typescript@5.2.2) @@ -25,6 +22,9 @@ dependencies: version: 4.2.5(vue@3.3.8) devDependencies: + '@quasar/vite-plugin': + specifier: ^1.6.0 + version: 1.6.0(@vitejs/plugin-vue@4.4.1)(quasar@2.13.1)(vite@4.5.0)(vue@3.3.8) '@rushstack/eslint-patch': specifier: ^1.3.3 version: 1.5.1 @@ -67,6 +67,9 @@ devDependencies: npm-run-all2: specifier: ^6.1.1 version: 6.1.1 + sass: + specifier: 1.32.12 + version: 1.32.12 typescript: specifier: ~5.2.0 version: 5.2.2 @@ -81,10 +84,10 @@ devDependencies: version: 0.7.0(vue-router@4.2.5)(vue@3.3.8) vite: specifier: ^4.4.11 - version: 4.5.0(@types/node@18.18.9) + version: 4.5.0(@types/node@18.18.9)(sass@1.32.12) vitest: specifier: ^0.34.6 - version: 0.34.6(jsdom@22.1.0) + version: 0.34.6(jsdom@22.1.0)(sass@1.32.12) vue-tsc: specifier: ^1.8.19 version: 1.8.22(typescript@5.2.2) @@ -707,6 +710,25 @@ packages: resolution: {integrity: sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==} dev: true + /@quasar/extras@1.16.8: + resolution: {integrity: sha512-mNSwQ6wkIVoAemhYdLm9q/FVqLHmVONZgCYdLLeqpakKNsR0r/zHQnCngzdDaXI7veYEvE0uW1gJa1wdQsxXxA==} + dev: false + + /@quasar/vite-plugin@1.6.0(@vitejs/plugin-vue@4.4.1)(quasar@2.13.1)(vite@4.5.0)(vue@3.3.8): + resolution: {integrity: sha512-LmbV76G1CwWZbrEQhqyZpkRQTJyO3xpW55aXY1zWN+JhyUeG77CcMCEWteBVnJ6I6ehUPFDC9ONd2+WlwH6rNQ==} + engines: {node: '>=12'} + peerDependencies: + '@vitejs/plugin-vue': ^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0-beta.0 + quasar: ^2.8.0 + vite: ^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0-beta.0 + vue: ^3.0.0 + dependencies: + '@vitejs/plugin-vue': 4.4.1(vite@4.5.0)(vue@3.3.8) + quasar: 2.13.1 + vite: 4.5.0(@types/node@18.18.9)(sass@1.32.12) + vue: 3.3.8(typescript@5.2.2) + dev: true + /@rollup/pluginutils@5.0.5: resolution: {integrity: sha512-6aEYR910NyP73oHiJglti74iRyOwgFU4x3meH/H8OJx6Ry0j6cOVZ5X/wTvub7G7Ao6qaHBEaNsV3GLJkSsF+Q==} engines: {node: '>=14.0.0'} @@ -972,7 +994,7 @@ packages: '@babel/core': 7.23.3 '@babel/plugin-transform-typescript': 7.23.3(@babel/core@7.23.3) '@vue/babel-plugin-jsx': 1.1.5(@babel/core@7.23.3) - vite: 4.5.0(@types/node@18.18.9) + vite: 4.5.0(@types/node@18.18.9)(sass@1.32.12) vue: 3.3.8(typescript@5.2.2) transitivePeerDependencies: - supports-color @@ -985,7 +1007,7 @@ packages: vite: ^4.0.0 vue: ^3.2.25 dependencies: - vite: 4.5.0(@types/node@18.18.9) + vite: 4.5.0(@types/node@18.18.9)(sass@1.32.12) vue: 3.3.8(typescript@5.2.2) dev: true @@ -2599,22 +2621,6 @@ packages: react-is: 18.2.0 dev: true - /primeflex@3.3.1: - resolution: {integrity: sha512-zaOq3YvcOYytbAmKv3zYc+0VNS9Wg5d37dfxZnveKBFPr7vEIwfV5ydrpiouTft8MVW6qNjfkaQphHSnvgQbpQ==} - dev: false - - /primeicons@6.0.1: - resolution: {integrity: sha512-KDeO94CbWI4pKsPnYpA1FPjo79EsY9I+M8ywoPBSf9XMXoe/0crjbUK7jcQEDHuc0ZMRIZsxH3TYLv4TUtHmAA==} - dev: false - - /primevue@3.40.1(vue@3.3.8): - resolution: {integrity: sha512-TIFjoSUDiTmlxwQddaWckzcPIpj0F8a6ZMnm0tpAD/ieyUIHnNpbAi5de8LQf8eF0b+x5EkOkdjdngSlD+iPCw==} - peerDependencies: - vue: ^3.0.0 - dependencies: - vue: 3.3.8(typescript@5.2.2) - dev: false - /proto-list@1.2.4: resolution: {integrity: sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==} dev: true @@ -2628,6 +2634,10 @@ packages: engines: {node: '>=6'} dev: true + /quasar@2.13.1: + resolution: {integrity: sha512-Q8pNpjPOBn1K5IJ19daI3hAxwnXbHv9EyOiJIZFxA6W0KfVdJwcYJkDcmN2BtCdXxc3QmW8WEZ8+jz3/yp8X8g==} + engines: {node: '>= 10.18.1', npm: '>= 6.13.4', yarn: '>= 1.21.1'} + /querystringify@2.2.0: resolution: {integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==} dev: true @@ -2709,6 +2719,14 @@ packages: resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==} dev: true + /sass@1.32.12: + resolution: {integrity: sha512-zmXn03k3hN0KaiVTjohgkg98C3UowhL1/VSGdj4/VAAiMKGQOE80PFPxFP2Kyq0OUskPKcY5lImkhBKEHlypJA==} + engines: {node: '>=8.9.0'} + hasBin: true + dependencies: + chokidar: 3.5.3 + dev: true + /saxes@6.0.0: resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==} engines: {node: '>=v12.22.7'} @@ -3079,7 +3097,7 @@ packages: spdx-expression-parse: 3.0.1 dev: true - /vite-node@0.34.6(@types/node@18.18.9): + /vite-node@0.34.6(@types/node@18.18.9)(sass@1.32.12): resolution: {integrity: sha512-nlBMJ9x6n7/Amaz6F3zJ97EBwR2FkzhBRxF5e+jE6LA3yi6Wtc2lyTij1OnDMIr34v5g/tVQtsVAzhT0jc5ygA==} engines: {node: '>=v14.18.0'} hasBin: true @@ -3089,7 +3107,7 @@ packages: mlly: 1.4.2 pathe: 1.1.1 picocolors: 1.0.0 - vite: 4.5.0(@types/node@18.18.9) + vite: 4.5.0(@types/node@18.18.9)(sass@1.32.12) transitivePeerDependencies: - '@types/node' - less @@ -3101,7 +3119,7 @@ packages: - terser dev: true - /vite@4.5.0(@types/node@18.18.9): + /vite@4.5.0(@types/node@18.18.9)(sass@1.32.12): resolution: {integrity: sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==} engines: {node: ^14.18.0 || >=16.0.0} hasBin: true @@ -3133,11 +3151,12 @@ packages: esbuild: 0.18.20 postcss: 8.4.31 rollup: 3.29.4 + sass: 1.32.12 optionalDependencies: fsevents: 2.3.3 dev: true - /vitest@0.34.6(jsdom@22.1.0): + /vitest@0.34.6(jsdom@22.1.0)(sass@1.32.12): resolution: {integrity: sha512-+5CALsOvbNKnS+ZHMXtuUC7nL8/7F1F2DnHGjSsszX8zCjWSSviphCb/NuS9Nzf4Q03KyyDRBAXhF/8lffME4Q==} engines: {node: '>=v14.18.0'} hasBin: true @@ -3190,8 +3209,8 @@ packages: strip-literal: 1.3.0 tinybench: 2.5.1 tinypool: 0.7.0 - vite: 4.5.0(@types/node@18.18.9) - vite-node: 0.34.6(@types/node@18.18.9) + vite: 4.5.0(@types/node@18.18.9)(sass@1.32.12) + vite-node: 0.34.6(@types/node@18.18.9)(sass@1.32.12) why-is-node-running: 2.2.2 transitivePeerDependencies: - less diff --git a/src/App.vue b/src/App.vue index 8720caa..6f458ee 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,8 +1,28 @@ + + - - diff --git a/src/assets/main.css b/src/assets/main.css new file mode 100644 index 0000000..d3c150d --- /dev/null +++ b/src/assets/main.css @@ -0,0 +1,3 @@ +body { + margin: 0; +} \ No newline at end of file diff --git a/src/assets/quasar-variables.sass b/src/assets/quasar-variables.sass new file mode 100644 index 0000000..69f69fe --- /dev/null +++ b/src/assets/quasar-variables.sass @@ -0,0 +1,10 @@ +$primary: #1976D2 +$secondary: #26A69A +$accent: #9C27B0 + +$dark: #1D1D1D + +$positive: #21BA45 +$negative: #C10015 +$info: #31CCEC +$warning: #F2C037 diff --git a/src/components/NavbarComponent.vue b/src/components/NavbarComponent.vue new file mode 100644 index 0000000..8adbbcb --- /dev/null +++ b/src/components/NavbarComponent.vue @@ -0,0 +1,22 @@ + + + diff --git a/src/components/SidebarComponent.vue b/src/components/SidebarComponent.vue index 2d129db..4ab0609 100644 --- a/src/components/SidebarComponent.vue +++ b/src/components/SidebarComponent.vue @@ -1,184 +1,74 @@ diff --git a/src/main.ts b/src/main.ts index e538cc0..83cd36d 100644 --- a/src/main.ts +++ b/src/main.ts @@ -5,15 +5,28 @@ import { createPinia } from 'pinia'; -import PrimeVue from 'primevue/config'; -import 'primeflex/primeflex.css'; +import '@/assets/main.css'; + +import { + Quasar +} from 'quasar'; + +// Import icon libraries +import '@quasar/extras/material-icons/material-icons.css'; + +// Import Quasar css +import 'quasar/src/css/index.sass'; import App from './App.vue'; import router from './router'; const app = createApp(App); -app.use(PrimeVue); +app.use(Quasar, { + config: { + dark: true + } +}); app.use(createPinia()); app.use(router); diff --git a/src/router/index.ts b/src/router/index.ts index eb63794..cbae608 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -1,14 +1,22 @@ -import { createRouter, createWebHistory } from 'vue-router'; +import { + createRouter, createWebHistory +} from 'vue-router'; // import HomeView from '../views/HomeView.vue' +import MainPage from '@/views/MainPage.vue'; const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ - // { - // path: '/', - // name: 'home', - // component: HomeView - // }, + { + path: '/', + name: 'home', + component: MainPage + }, + { + path: '/send', + name: 'send', + component: MainPage + } // { // path: '/about', // name: 'about', diff --git a/src/views/MainPage.vue b/src/views/MainPage.vue new file mode 100644 index 0000000..1599c78 --- /dev/null +++ b/src/views/MainPage.vue @@ -0,0 +1,3 @@ + diff --git a/vite.config.ts b/vite.config.ts index 8ebcb00..51ba079 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -10,9 +10,13 @@ import vueJsx from '@vitejs/plugin-vue-jsx'; import Components from 'unplugin-vue-components/vite'; import { - PrimeVueResolver + QuasarResolver } from 'unplugin-vue-components/resolvers'; +import { + quasar, transformAssetUrls +} from '@quasar/vite-plugin'; + import AutoImport from 'unplugin-auto-import/vite'; import VueRouter from 'unplugin-vue-router/vite'; @@ -21,12 +25,7 @@ export default defineConfig({ plugins: [ VueRouter(), Components({ - resolvers: [ PrimeVueResolver({ - importTheme: 'mdc-dark-deeppurple', - importIcons: true, - importStyle: true - // prefix: 'P' - }) ] + resolvers: [ QuasarResolver() ] }), AutoImport({ include: [ @@ -35,11 +34,11 @@ export default defineConfig({ /\.vue\?vue/, // .vue /\.md$/ // .md ], - imports: [ - // presets - 'vue', - 'vue-router' - ], + // imports: [ + // // presets + // 'vue', + // 'vue-router' + // ], dirs: [ './src/components/**' ], dts: true, eslintrc: { @@ -47,8 +46,15 @@ export default defineConfig({ } }), - vue(), - vueJsx() + vue({ + template: { + transformAssetUrls + } + }), + vueJsx(), + quasar({ + sassVariables: 'src/assets/quasar-variables.sass' + }) ], resolve: { alias: {