wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

Formatted project

This commit is contained in:
Joan Sanchez 2022-03-24 14:57:11 +01:00
parent ecdb785abb
commit c29a51fc48
50 changed files with 35473 additions and 35606 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.editorconfig
View File

@ -3,7 +3,7 @@ root = true
[*] [*]
charset = utf-8 charset = utf-8
indent_style = space indent_style = space
indent_size = 2 indent_size = 4
end_of_line = lf end_of_line = lf
insert_final_newline = true insert_final_newline = true
trim_trailing_whitespace = true trim_trailing_whitespace = true

22
.eslintrc.js
View File

@ -6,29 +6,29 @@ module.exports = {
parserOptions: { parserOptions: {
parser: '@babel/eslint-parser', parser: '@babel/eslint-parser',
ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
sourceType: 'module' // Allows for the use of imports sourceType: 'module', // Allows for the use of imports
}, },
env: { env: {
browser: true browser: true,
}, },
// Rules order is important, please avoid shuffling them // Rules order is important, please avoid shuffling them
extends: [ extends: [
// Base ESLint recommended rules // Base ESLint recommended rules
// 'eslint:recommended', 'eslint:recommended',
// Uncomment any of the lines below to choose desired strictness, // Uncomment any of the lines below to choose desired strictness,
// but leave only one uncommented! // but leave only one uncommented!
// See https://eslint.vuejs.org/rules/#available-rules // See https://eslint.vuejs.org/rules/#available-rules
'plugin:vue/vue3-essential', // Priority A: Essential (Error Prevention) //'plugin:vue/vue3-essential', // Priority A: Essential (Error Prevention)
// 'plugin:vue/vue3-strongly-recommended', // Priority B: Strongly Recommended (Improving Readability) 'plugin:vue/vue3-strongly-recommended', // Priority B: Strongly Recommended (Improving Readability)
// 'plugin:vue/vue3-recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead) // 'plugin:vue/vue3-recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)
// https://github.com/prettier/eslint-config-prettier#installation // https://github.com/prettier/eslint-config-prettier#installation
// usage with Prettier, provided by 'eslint-config-prettier'. // usage with Prettier, provided by 'eslint-config-prettier'.
'prettier' 'prettier',
], ],
plugins: [ plugins: [
@ -39,7 +39,6 @@ module.exports = {
// https://github.com/typescript-eslint/typescript-eslint/issues/389#issuecomment-509292674 // https://github.com/typescript-eslint/typescript-eslint/issues/389#issuecomment-509292674
// Prettier has not been included as plugin to avoid performance impact // Prettier has not been included as plugin to avoid performance impact
// add it as an extension for your IDE // add it as an extension for your IDE
], ],
globals: { globals: {
@ -55,16 +54,15 @@ module.exports = {
chrome: 'readonly', chrome: 'readonly',
defineProps: 'readonly', // Vue SFC setup compiler macro defineProps: 'readonly', // Vue SFC setup compiler macro
defineEmits: 'readonly', // Vue SFC setup compiler macro defineEmits: 'readonly', // Vue SFC setup compiler macro
defineExpose: 'readonly' // Vue SFC setup compiler macro defineExpose: 'readonly', // Vue SFC setup compiler macro
}, },
// add your custom rules here // add your custom rules here
rules: { rules: {
'prefer-promise-reject-errors': 'off', 'prefer-promise-reject-errors': 'off',
// allow debugger during development only // allow debugger during development only
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
}, },
overrides: [ overrides: [
@ -77,4 +75,4 @@ module.exports = {
], ],
}, },
], ],
} };

6
.postcssrc.js
View File

@ -4,6 +4,6 @@
module.exports = { module.exports = {
plugins: [ plugins: [
// to edit target browsers: use "browserslist" field in package.json // to edit target browsers: use "browserslist" field in package.json
require('autoprefixer') require('autoprefixer'),
] ],
} };

7
.prettierrc.js Normal file
View File

@ -0,0 +1,7 @@
module.exports = {
singleQuote: true,
printWidth: 120,
tabWidth: 4,
semi: true,
endOfLine: 'auto',
};

17
.vscode/settings.json vendored
View File

@ -2,22 +2,13 @@
"editor.bracketPairColorization.enabled": true, "editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": true, "editor.guides.bracketPairs": true,
"editor.formatOnSave": true, "editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode", "editor.defaultFormatter": "johnsoncodehk.volar",
"editor.codeActionsOnSave": [ "editor.codeActionsOnSave": ["source.fixAll.eslint"],
"source.fixAll.eslint" "eslint.validate": ["javascript", "javascriptreact", "typescript", "vue"],
],
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"vue"
],
"jest.jestCommandLine": "jest", "jest.jestCommandLine": "jest",
"json.schemas": [ "json.schemas": [
{ {
"fileMatch": [ "fileMatch": ["cypress.json"],
"cypress.json"
],
"url": "https://on.cypress.io/cypress.schema.json" "url": "https://on.cypress.io/cypress.schema.json"
} }
] ]

10
README.md
View File

@ -3,6 +3,7 @@
Salix front-end Salix front-end
## Install the dependencies ## Install the dependencies
```bash ```bash
yarn yarn
# or # or
@ -10,32 +11,33 @@ npm install
``` ```
### Start the app in development mode (hot-code reloading, error reporting, etc.) ### Start the app in development mode (hot-code reloading, error reporting, etc.)
```bash ```bash
quasar dev quasar dev
``` ```
### Lint the files ### Lint the files
```bash ```bash
yarn lint yarn lint
# or # or
npm run lint npm run lint
``` ```
### Format the files ### Format the files
```bash ```bash
yarn format yarn format
# or # or
npm run format npm run format
``` ```
### Build the app for production ### Build the app for production
```bash ```bash
quasar build quasar build
``` ```
### Customize the configuration ### Customize the configuration
See [Configuring quasar.config.js](https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js). See [Configuring quasar.config.js](https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js).

14
jest.config.js
View File

@ -18,11 +18,7 @@ module.exports = {
// watch: true, // watch: true,
collectCoverage: false, collectCoverage: false,
coverageDirectory: '<rootDir>/test/jest/coverage', coverageDirectory: '<rootDir>/test/jest/coverage',
collectCoverageFrom: [ collectCoverageFrom: ['<rootDir>/src/**/*.vue', '<rootDir>/src/**/*.js', '<rootDir>/src/**/*.jsx'],
'<rootDir>/src/**/*.vue',
'<rootDir>/src/**/*.js',
'<rootDir>/src/**/*.jsx',
],
// Needed in JS codebases too because of feature flags // Needed in JS codebases too because of feature flags
coveragePathIgnorePatterns: ['/node_modules/', '.d.ts$'], coveragePathIgnorePatterns: ['/node_modules/', '.d.ts$'],
coverageThreshold: { coverageThreshold: {
@ -33,10 +29,7 @@ module.exports = {
// statements: 50 // statements: 50
}, },
}, },
testMatch: [ testMatch: ['<rootDir>/test/jest/__tests__/**/*.(spec|test).js', '<rootDir>/src/**/*.jest.(spec|test).js'],
'<rootDir>/test/jest/__tests__/**/*.(spec|test).js',
'<rootDir>/src/**/*.jest.(spec|test).js',
],
moduleFileExtensions: ['vue', 'js', 'jsx', 'json'], moduleFileExtensions: ['vue', 'js', 'jsx', 'json'],
moduleNameMapper: { moduleNameMapper: {
'^quasar$': 'quasar/dist/quasar.esm.prod.js', '^quasar$': 'quasar/dist/quasar.esm.prod.js',
@ -53,8 +46,7 @@ module.exports = {
transform: { transform: {
'.*\\.vue$': 'vue-jest', '.*\\.vue$': 'vue-jest',
'.*\\.js$': 'babel-jest', '.*\\.js$': 'babel-jest',
'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
'jest-transform-stub',
// use these if NPM is being flaky, care as hosting could interfere with these // use these if NPM is being flaky, care as hosting could interfere with these
// '.*\\.vue$': '@quasar/quasar-app-extension-testing-unit-jest/node_modules/vue-jest', // '.*\\.vue$': '@quasar/quasar-app-extension-testing-unit-jest/node_modules/vue-jest',
// '.*\\.js$': '@quasar/quasar-app-extension-testing-unit-jest/node_modules/babel-jest' // '.*\\.js$': '@quasar/quasar-app-extension-testing-unit-jest/node_modules/babel-jest'

42
jsconfig.json
View File

@ -2,38 +2,16 @@
"compilerOptions": { "compilerOptions": {
"baseUrl": ".", "baseUrl": ".",
"paths": { "paths": {
"src/*": [ "src/*": ["src/*"],
"src/*" "app/*": ["*"],
], "components/*": ["src/components/*"],
"app/*": [ "layouts/*": ["src/layouts/*"],
"*" "pages/*": ["src/pages/*"],
], "assets/*": ["src/assets/*"],
"components/*": [ "boot/*": ["src/boot/*"],
"src/components/*" "stores/*": ["src/stores/*"],
], "vue$": ["node_modules/vue/dist/vue.runtime.esm-bundler.js"]
"layouts/*": [
"src/layouts/*"
],
"pages/*": [
"src/pages/*"
],
"assets/*": [
"src/assets/*"
],
"boot/*": [
"src/boot/*"
],
"stores/*": [
"src/stores/*"
],
"vue$": [
"node_modules/vue/dist/vue.runtime.esm-bundler.js"
]
} }
}, },
"exclude": [ "exclude": ["dist", ".quasar", "node_modules"]
"dist",
".quasar",
"node_modules"
]
} }

73
quasar.config.js
View File

@ -8,9 +8,7 @@
// Configuration for your app // Configuration for your app
// https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js // https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js
const ESLintPlugin = require('eslint-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin')
const { configure } = require('quasar/wrappers'); const { configure } = require('quasar/wrappers');
@ -25,15 +23,10 @@ module.exports = configure(function (ctx) {
// app boot file (/src/boot) // app boot file (/src/boot)
// --> boot files are part of "main.js" // --> boot files are part of "main.js"
// https://v2.quasar.dev/quasar-cli-webpack/boot-files // https://v2.quasar.dev/quasar-cli-webpack/boot-files
boot: [ boot: ['i18n', 'axios'],
'i18n',
'axios',
],
// https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-css // https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-css
css: [ css: ['app.scss'],
'app.scss'
],
// https://github.com/quasarframework/quasar/tree/dev/extras // https://github.com/quasarframework/quasar/tree/dev/extras
extras: [ extras: [
@ -74,19 +67,17 @@ module.exports = configure(function (ctx) {
// "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain // "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
chainWebpack(chain) { chainWebpack(chain) {
chain.plugin('eslint-webpack-plugin') chain.plugin('eslint-webpack-plugin').use(ESLintPlugin, [{ extensions: ['js', 'vue'] }]);
.use(ESLintPlugin, [{ extensions: [ 'js', 'vue' ] }]) },
}
}, },
// Full list of options: https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-devServer // Full list of options: https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-devServer
devServer: { devServer: {
server: { server: {
type: 'http' type: 'http',
}, },
port: 8080, port: 8080,
open: true // opens browser window automatically open: true, // opens browser window automatically
}, },
// https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-framework // https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-framework
@ -104,7 +95,7 @@ module.exports = configure(function (ctx) {
// directives: [], // directives: [],
// Quasar plugins // Quasar plugins
plugins: [] plugins: [],
}, },
// animations: 'all', // --- includes all animations // animations: 'all', // --- includes all animations
@ -124,17 +115,14 @@ module.exports = configure(function (ctx) {
maxAge: 1000 * 60 * 60 * 24 * 30, maxAge: 1000 * 60 * 60 * 24 * 30,
// Tell browser when a file from the server should expire from cache (in ms) // Tell browser when a file from the server should expire from cache (in ms)
chainWebpackWebserver(chain) { chainWebpackWebserver(chain) {
chain.plugin('eslint-webpack-plugin') chain.plugin('eslint-webpack-plugin').use(ESLintPlugin, [{ extensions: ['js'] }]);
.use(ESLintPlugin, [{ extensions: [ 'js' ] }])
}, },
middlewares: [ middlewares: [
ctx.prod ? 'compression' : '', ctx.prod ? 'compression' : '',
'render' // keep this as last one 'render', // keep this as last one
] ],
}, },
// https://v2.quasar.dev/quasar-cli-webpack/developing-pwa/configuring-pwa // https://v2.quasar.dev/quasar-cli-webpack/developing-pwa/configuring-pwa
@ -146,11 +134,9 @@ module.exports = configure(function (ctx) {
// if using workbox in InjectManifest mode // if using workbox in InjectManifest mode
chainWebpackCustomSW(chain) { chainWebpackCustomSW(chain) {
chain.plugin('eslint-webpack-plugin') chain.plugin('eslint-webpack-plugin').use(ESLintPlugin, [{ extensions: ['js'] }]);
.use(ESLintPlugin, [{ extensions: [ 'js' ] }])
}, },
manifest: { manifest: {
name: `Salix`, name: `Salix`,
short_name: `Salix`, short_name: `Salix`,
@ -163,30 +149,30 @@ module.exports = configure(function (ctx) {
{ {
src: 'icons/icon-128x128.png', src: 'icons/icon-128x128.png',
sizes: '128x128', sizes: '128x128',
type: 'image/png' type: 'image/png',
}, },
{ {
src: 'icons/icon-192x192.png', src: 'icons/icon-192x192.png',
sizes: '192x192', sizes: '192x192',
type: 'image/png' type: 'image/png',
}, },
{ {
src: 'icons/icon-256x256.png', src: 'icons/icon-256x256.png',
sizes: '256x256', sizes: '256x256',
type: 'image/png' type: 'image/png',
}, },
{ {
src: 'icons/icon-384x384.png', src: 'icons/icon-384x384.png',
sizes: '384x384', sizes: '384x384',
type: 'image/png' type: 'image/png',
}, },
{ {
src: 'icons/icon-512x512.png', src: 'icons/icon-512x512.png',
sizes: '512x512', sizes: '512x512',
type: 'image/png' type: 'image/png',
} },
] ],
} },
}, },
// Full list of options: https://v2.quasar.dev/quasar-cli-webpack/developing-cordova-apps/configuring-cordova // Full list of options: https://v2.quasar.dev/quasar-cli-webpack/developing-cordova-apps/configuring-cordova
@ -196,7 +182,7 @@ module.exports = configure(function (ctx) {
// Full list of options: https://v2.quasar.dev/quasar-cli-webpack/developing-capacitor-apps/configuring-capacitor // Full list of options: https://v2.quasar.dev/quasar-cli-webpack/developing-capacitor-apps/configuring-capacitor
capacitor: { capacitor: {
hideSplashscreen: true hideSplashscreen: true,
}, },
// Full list of options: https://v2.quasar.dev/quasar-cli-webpack/developing-electron-apps/configuring-electron // Full list of options: https://v2.quasar.dev/quasar-cli-webpack/developing-electron-apps/configuring-electron
@ -205,13 +191,11 @@ module.exports = configure(function (ctx) {
packager: { packager: {
// https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options
// OS X / Mac App Store // OS X / Mac App Store
// appBundleId: '', // appBundleId: '',
// appCategoryType: '', // appCategoryType: '',
// osxSign: '', // osxSign: '',
// protocol: 'myapp://path', // protocol: 'myapp://path',
// Windows only // Windows only
// win32metadata: { ... } // win32metadata: { ... }
}, },
@ -219,23 +203,18 @@ module.exports = configure(function (ctx) {
builder: { builder: {
// https://www.electron.build/configuration/configuration // https://www.electron.build/configuration/configuration
appId: 'salix-front' appId: 'salix-front',
}, },
// "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain // "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
chainWebpackMain(chain) { chainWebpackMain(chain) {
chain.plugin('eslint-webpack-plugin') chain.plugin('eslint-webpack-plugin').use(ESLintPlugin, [{ extensions: ['js'] }]);
.use(ESLintPlugin, [{ extensions: [ 'js' ] }])
}, },
chainWebpackPreload(chain) { chainWebpackPreload(chain) {
chain.plugin('eslint-webpack-plugin') chain.plugin('eslint-webpack-plugin').use(ESLintPlugin, [{ extensions: ['js'] }]);
.use(ESLintPlugin, [{ extensions: [ 'js' ] }])
}, },
},
} };
}
}); });

8
quasar.extensions.json
View File

@ -1,13 +1,9 @@
{ {
"@quasar/testing-unit-jest": { "@quasar/testing-unit-jest": {
"babel": "babelrc", "babel": "babelrc",
"options": [ "options": ["scripts"]
"scripts"
]
}, },
"@quasar/testing-e2e-cypress": { "@quasar/testing-e2e-cypress": {
"options": [ "options": ["scripts"]
"scripts"
]
} }
} }

9
src/App.vue
View File

@ -2,10 +2,7 @@
<router-view /> <router-view />
</template> </template>
<script> <script setup>
import { defineComponent } from 'vue' const derp = ['asd'];
console.log(derp);
export default defineComponent({
name: 'App'
})
</script> </script>

14
src/boot/axios.js
View File

@ -1,5 +1,5 @@
import { boot } from 'quasar/wrappers' import { boot } from 'quasar/wrappers';
import axios from 'axios' import axios from 'axios';
// Be careful when using SSR for cross-request state pollution // Be careful when using SSR for cross-request state pollution
// due to creating a Singleton instance here; // due to creating a Singleton instance here;
@ -7,18 +7,18 @@ import axios from 'axios'
// good idea to move this instance creation inside of the // good idea to move this instance creation inside of the
// "export default () => {}" function below (which runs individually // "export default () => {}" function below (which runs individually
// for each client) // for each client)
const api = axios.create({ baseURL: 'https://api.example.com' }) const api = axios.create({ baseURL: 'https://api.example.com' });
export default boot(({ app }) => { export default boot(({ app }) => {
// for use inside Vue files (Options API) through this.$axios and this.$api // for use inside Vue files (Options API) through this.$axios and this.$api
app.config.globalProperties.$axios = axios app.config.globalProperties.$axios = axios;
// ^ ^ ^ this will allow you to use this.$axios (for Vue Options API form) // ^ ^ ^ this will allow you to use this.$axios (for Vue Options API form)
// so you won't necessarily have to import axios in each vue file // so you won't necessarily have to import axios in each vue file
app.config.globalProperties.$api = api app.config.globalProperties.$api = api;
// ^ ^ ^ this will allow you to use this.$api (for Vue Options API form) // ^ ^ ^ this will allow you to use this.$api (for Vue Options API form)
// so you can easily perform requests against your app's API // so you can easily perform requests against your app's API
}) });
export { api } export { api };

14
src/boot/i18n.js
View File

@ -1,13 +1,13 @@
import { boot } from 'quasar/wrappers' import { boot } from 'quasar/wrappers';
import { createI18n } from 'vue-i18n' import { createI18n } from 'vue-i18n';
import messages from 'src/i18n' import messages from 'src/i18n';
export default boot(({ app }) => { export default boot(({ app }) => {
const i18n = createI18n({ const i18n = createI18n({
locale: 'en-US', locale: 'en-US',
messages messages,
}) });
// Set i18n instance on app // Set i18n instance on app
app.use(i18n) app.use(i18n);
}) });

28
src/components/EssentialLink.vue
View File

@ -1,14 +1,6 @@
<template> <template>
<q-item <q-item clickable tag="a" target="_blank" :href="link">
clickable <q-item-section v-if="icon" avatar>
tag="a"
target="_blank"
:href="link"
>
<q-item-section
v-if="icon"
avatar
>
<q-icon :name="icon" /> <q-icon :name="icon" />
</q-item-section> </q-item-section>
@ -20,30 +12,30 @@
</template> </template>
<script> <script>
import { defineComponent } from 'vue' import { defineComponent } from 'vue';
export default defineComponent({ export default defineComponent({
name: 'EssentialLink', name: 'EssentialLink',
props: { props: {
title: { title: {
type: String, type: String,
required: true required: true,
}, },
caption: { caption: {
type: String, type: String,
default: '' default: '',
}, },
link: { link: {
type: String, type: String,
default: '#' default: '#',
}, },
icon: { icon: {
type: String, type: String,
default: '' default: '',
} },
} },
}) });
</script> </script>

9
src/components/QuasarButton.vue
View File

@ -1,12 +1,5 @@
<template> <template>
<q-btn <q-btn data-cy="button" label="test emit" color="positive" rounded icon="edit" @click="$emit('test')" />
data-cy="button"
label="test emit"
color="positive"
rounded
icon="edit"
@click="$emit('test')"
/>
</template> </template>
<script> <script>

10
src/components/QuasarDialog.vue
View File

@ -6,12 +6,7 @@
<!-- buttons example --> <!-- buttons example -->
<q-card-actions align="right"> <q-card-actions align="right">
<q-btn <q-btn data-cy="ok-button" color="primary" label="OK" @click="onOKClick" />
data-cy="ok-button"
color="primary"
label="OK"
@click="onOKClick"
/>
<q-btn color="primary" label="Cancel" @click="onCancelClick" /> <q-btn color="primary" label="Cancel" @click="onCancelClick" />
</q-card-actions> </q-card-actions>
</q-card> </q-card>
@ -37,8 +32,7 @@ export default defineComponent({
setup() { setup() {
// REQUIRED; must be called inside of setup() // REQUIRED; must be called inside of setup()
const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent();
useDialogPluginComponent();
// dialogRef - Vue ref to be applied to QDialog // dialogRef - Vue ref to be applied to QDialog
// onDialogHide - Function to be used as handler for @hide on QDialog // onDialogHide - Function to be used as handler for @hide on QDialog
// onDialogOK - Function to call to settle dialog with "ok" outcome // onDialogOK - Function to call to settle dialog with "ok" outcome

9
src/components/QuasarTooltip.vue
View File

@ -1,14 +1,7 @@
<template> <template>
<q-btn color="primary" data-cy="button"> <q-btn color="primary" data-cy="button">
Button Button
<q-tooltip <q-tooltip v-model="showTooltip" data-cy="tooltip" class="bg-red" :offset="[10, 10]"> Here I am! </q-tooltip>
v-model="showTooltip"
data-cy="tooltip"
class="bg-red"
:offset="[10, 10]"
>
Here I am!
</q-tooltip>
</q-btn> </q-btn>
</template> </template>

4
src/components/__tests__/QuasarButton.spec.js
View File

@ -27,9 +27,7 @@ describe('QuasarButton', () => {
it('should have a `positive` color', () => { it('should have a `positive` color', () => {
mount(QuasarButton); mount(QuasarButton);
cy.dataCy('button') cy.dataCy('button').should('have.backgroundColor', 'var(--q-positive)').should('have.color', 'white');
.should('have.backgroundColor', 'var(--q-positive)')
.should('have.color', 'white');
}); });
it('should emit `test` upon click', () => { it('should emit `test` upon click', () => {

10
src/components/__tests__/QuasarDrawer.spec.js
View File

@ -9,13 +9,7 @@ describe('QuasarDrawer', () => {
component: QuasarDrawer, component: QuasarDrawer,
}, },
}); });
cy.dataCy('drawer') cy.dataCy('drawer').should('exist').dataCy('button').should('not.be.visible');
.should('exist') cy.get('.q-scrollarea .scroll').scrollTo('bottom', { duration: 500 }).dataCy('button').should('be.visible');
.dataCy('button')
.should('not.be.visible');
cy.get('.q-scrollarea .scroll')
.scrollTo('bottom', { duration: 500 })
.dataCy('button')
.should('be.visible');
}); });
}); });

16
src/css/quasar.variables.scss
View File

@ -12,13 +12,13 @@
// to match your app's branding. // to match your app's branding.
// Tip: Use the "Theme Builder" on Quasar's documentation website. // Tip: Use the "Theme Builder" on Quasar's documentation website.
$primary : #1976D2; $primary: #1976d2;
$secondary : #26A69A; $secondary: #26a69a;
$accent : #9C27B0; $accent: #9c27b0;
$dark : #1D1D1D; $dark: #1d1d1d;
$positive : #21BA45; $positive: #21ba45;
$negative : #C10015; $negative: #c10015;
$info : #31CCEC; $info: #31ccec;
$warning : #F2C037; $warning: #f2c037;

4
src/i18n/en-US/index.js
View File

@ -3,5 +3,5 @@
export default { export default {
failed: 'Action failed', failed: 'Action failed',
success: 'Action was successful' success: 'Action was successful',
} };

6
src/i18n/index.js
View File

@ -1,5 +1,5 @@
import enUS from './en-US' import enUS from './en-US';
export default { export default {
'en-US': enUS 'en-US': enUS,
} };

23
src/index.template.html
View File

@ -3,17 +3,20 @@
<head> <head>
<title><%= productName %></title> <title><%= productName %></title>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta name="description" content="<%= productDescription %>"> <meta name="description" content="<%= productDescription %>" />
<meta name="format-detection" content="telephone=no"> <meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no"> <meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>"> <meta
name="viewport"
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>"
/>
<link rel="icon" type="image/png" sizes="128x128" href="icons/favicon-128x128.png"> <link rel="icon" type="image/png" sizes="128x128" href="icons/favicon-128x128.png" />
<link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png" />
<link rel="icon" type="image/ico" href="favicon.ico"> <link rel="icon" type="image/ico" href="favicon.ico" />
</head> </head>
<body> <body>
<!-- DO NOT touch the following DIV --> <!-- DO NOT touch the following DIV -->

67
src/layouts/MainLayout.vue
View File

@ -2,40 +2,19 @@
<q-layout view="lHh Lpr lFf"> <q-layout view="lHh Lpr lFf">
<q-header elevated> <q-header elevated>
<q-toolbar> <q-toolbar>
<q-btn <q-btn flat dense round icon="menu" aria-label="Menu" @click="toggleLeftDrawer" />
flat
dense
round
icon="menu"
aria-label="Menu"
@click="toggleLeftDrawer"
/>
<q-toolbar-title> <q-toolbar-title> Quasar App </q-toolbar-title>
Quasar App
</q-toolbar-title>
<div>Quasar v{{ $q.version }}</div> <div>Quasar v{{ $q.version }}</div>
</q-toolbar> </q-toolbar>
</q-header> </q-header>
<q-drawer <q-drawer v-model="leftDrawerOpen" show-if-above bordered>
v-model="leftDrawerOpen"
show-if-above
bordered
>
<q-list> <q-list>
<q-item-label <q-item-label header> Essential Links </q-item-label>
header
>
Essential Links
</q-item-label>
<EssentialLink <EssentialLink v-for="link in essentialLinks" :key="link.title" v-bind="link" />
v-for="link in essentialLinks"
:key="link.title"
v-bind="link"
/>
</q-list> </q-list>
</q-drawer> </q-drawer>
@ -46,71 +25,71 @@
</template> </template>
<script> <script>
import { defineComponent, ref } from 'vue' import { defineComponent, ref } from 'vue';
import EssentialLink from 'components/EssentialLink.vue' import EssentialLink from 'components/EssentialLink.vue';
const linksList = [ const linksList = [
{ {
title: 'Docs', title: 'Docs',
caption: 'quasar.dev', caption: 'quasar.dev',
icon: 'school', icon: 'school',
link: 'https://quasar.dev' link: 'https://quasar.dev',
}, },
{ {
title: 'Github', title: 'Github',
caption: 'github.com/quasarframework', caption: 'github.com/quasarframework',
icon: 'code', icon: 'code',
link: 'https://github.com/quasarframework' link: 'https://github.com/quasarframework',
}, },
{ {
title: 'Discord Chat Channel', title: 'Discord Chat Channel',
caption: 'chat.quasar.dev', caption: 'chat.quasar.dev',
icon: 'chat', icon: 'chat',
link: 'https://chat.quasar.dev' link: 'https://chat.quasar.dev',
}, },
{ {
title: 'Forum', title: 'Forum',
caption: 'forum.quasar.dev', caption: 'forum.quasar.dev',
icon: 'record_voice_over', icon: 'record_voice_over',
link: 'https://forum.quasar.dev' link: 'https://forum.quasar.dev',
}, },
{ {
title: 'Twitter', title: 'Twitter',
caption: '@quasarframework', caption: '@quasarframework',
icon: 'rss_feed', icon: 'rss_feed',
link: 'https://twitter.quasar.dev' link: 'https://twitter.quasar.dev',
}, },
{ {
title: 'Facebook', title: 'Facebook',
caption: '@QuasarFramework', caption: '@QuasarFramework',
icon: 'public', icon: 'public',
link: 'https://facebook.quasar.dev' link: 'https://facebook.quasar.dev',
}, },
{ {
title: 'Quasar Awesome', title: 'Quasar Awesome',
caption: 'Community Quasar projects', caption: 'Community Quasar projects',
icon: 'favorite', icon: 'favorite',
link: 'https://awesome.quasar.dev' link: 'https://awesome.quasar.dev',
} },
] ];
export default defineComponent({ export default defineComponent({
name: 'MainLayout', name: 'MainLayout',
components: { components: {
EssentialLink EssentialLink,
}, },
setup() { setup() {
const leftDrawerOpen = ref(false) const leftDrawerOpen = ref(false);
return { return {
essentialLinks: linksList, essentialLinks: linksList,
leftDrawerOpen, leftDrawerOpen,
toggleLeftDrawer() { toggleLeftDrawer() {
leftDrawerOpen.value = !leftDrawerOpen.value leftDrawerOpen.value = !leftDrawerOpen.value;
} },
} };
} },
}) });
</script> </script>

24
src/pages/ErrorNotFound.vue
View File

@ -1,31 +1,19 @@
<template> <template>
<div class="fullscreen bg-blue text-white text-center q-pa-md flex flex-center"> <div class="fullscreen bg-blue text-white text-center q-pa-md flex flex-center">
<div> <div>
<div style="font-size: 30vh"> <div style="font-size: 30vh">404</div>
404
</div>
<div class="text-h2" style="opacity:.4"> <div class="text-h2" style="opacity: 0.4">Oops. Nothing here...</div>
Oops. Nothing here...
</div>
<q-btn <q-btn class="q-mt-xl" color="white" text-color="blue" unelevated to="/" label="Go Home" no-caps />
class="q-mt-xl"
color="white"
text-color="blue"
unelevated
to="/"
label="Go Home"
no-caps
/>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { defineComponent } from 'vue' import { defineComponent } from 'vue';
export default defineComponent({ export default defineComponent({
name: 'ErrorNotFound' name: 'ErrorNotFound',
}) });
</script> </script>

12
src/pages/IndexPage.vue
View File

@ -1,17 +1,13 @@
<template> <template>
<q-page class="flex flex-center"> <q-page class="flex flex-center">
<img <img alt="Quasar logo" src="~assets/quasar-logo-vertical.svg" style="width: 200px; height: 200px" />
alt="Quasar logo"
src="~assets/quasar-logo-vertical.svg"
style="width: 200px; height: 200px"
>
</q-page> </q-page>
</template> </template>
<script> <script>
import { defineComponent } from 'vue' import { defineComponent } from 'vue';
export default defineComponent({ export default defineComponent({
name: 'IndexPage' name: 'IndexPage',
}) });
</script> </script>

18
src/router/index.js
View File

@ -1,6 +1,6 @@
import { route } from 'quasar/wrappers' import { route } from 'quasar/wrappers';
import { createRouter, createMemoryHistory, createWebHistory, createWebHashHistory } from 'vue-router' import { createRouter, createMemoryHistory, createWebHistory, createWebHashHistory } from 'vue-router';
import routes from './routes' import routes from './routes';
/* /*
* If not building with SSR mode, you can * If not building with SSR mode, you can
@ -14,7 +14,9 @@ import routes from './routes'
export default route(function (/* { store, ssrContext } */) { export default route(function (/* { store, ssrContext } */) {
const createHistory = process.env.SERVER const createHistory = process.env.SERVER
? createMemoryHistory ? createMemoryHistory
: (process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory) : process.env.VUE_ROUTER_MODE === 'history'
? createWebHistory
: createWebHashHistory;
const Router = createRouter({ const Router = createRouter({
scrollBehavior: () => ({ left: 0, top: 0 }), scrollBehavior: () => ({ left: 0, top: 0 }),
@ -23,8 +25,8 @@ export default route(function (/* { store, ssrContext } */) {
// Leave this as is and make changes in quasar.conf.js instead! // Leave this as is and make changes in quasar.conf.js instead!
// quasar.conf.js -> build -> vueRouterMode // quasar.conf.js -> build -> vueRouterMode
// quasar.conf.js -> build -> publicPath // quasar.conf.js -> build -> publicPath
history: createHistory(process.env.MODE === 'ssr' ? void 0 : process.env.VUE_ROUTER_BASE) history: createHistory(process.env.MODE === 'ssr' ? void 0 : process.env.VUE_ROUTER_BASE),
}) });
return Router return Router;
}) });

13
src/router/routes.js
View File

@ -1,19 +1,16 @@
const routes = [ const routes = [
{ {
path: '/', path: '/',
component: () => import('layouts/MainLayout.vue'), component: () => import('layouts/MainLayout.vue'),
children: [ children: [{ path: '', component: () => import('pages/IndexPage.vue') }],
{ path: '', component: () => import('pages/IndexPage.vue') }
]
}, },
// Always leave this as last one, // Always leave this as last one,
// but you can also remove it // but you can also remove it
{ {
path: '/:catchAll(.*)*', path: '/:catchAll(.*)*',
component: () => import('pages/ErrorNotFound.vue') component: () => import('pages/ErrorNotFound.vue'),
} },
] ];
export default routes export default routes;

4
test/jest/__tests__/MyDialog.spec.js
View File

@ -23,8 +23,6 @@ describe('MyDialog', () => {
it('can check the inner text of the dialog', () => { it('can check the inner text of the dialog', () => {
const wrapper = new DOMWrapper(document.body); const wrapper = new DOMWrapper(document.body);
expect(wrapper.find('.q-dialog').html()).toContain( expect(wrapper.find('.q-dialog').html()).toContain('Custom dialog which should be tested');
'Custom dialog which should be tested',
);
}); });
}); });