verdnatura/salix-front
verdnatura
/
salix-front
1
2
Fork 1
Code Issues Pull Requests 57 Releases Wiki Activity

Removed editor settings and eslint formatter

This commit is contained in:
Joan Sanchez 2022-03-14 11:31:37 +01:00
parent cbfcb237eb
commit 69728b32cb
48 changed files with 2847 additions and 469 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintrc.js
View File

@ -80,7 +80,7 @@ module.exports = {
// TypeScript
quotes: ['warn', 'single', { avoidEscape: true }],
'@typescript-eslint/explicit-function-return-type': 'off',
"@typescript-eslint/unbound-method": "off",
'@typescript-eslint/unbound-method': 'off',
'@typescript-eslint/no-unsafe-assignment': 'off',
'@typescript-eslint/no-unsafe-member-access': 'off',

1
.gitignore vendored
View File

@ -3,7 +3,6 @@
node_modules
# Quasar core related directories
.quasar
/dist
# Cordova related directories and files

39
.quasar/app.js Normal file
View File

@ -0,0 +1,39 @@
/**
* THIS FILE IS GENERATED AUTOMATICALLY.
* DO NOT EDIT.
*
* You are probably looking on adding startup/initialization code.
* Use "quasar new boot <name>" and add it there.
* One boot file per concern. Then reference the file(s) in quasar.conf.js > boot:
* boot: ['file', ...] // do not add ".js" extension to it.
*
* Boot files are your "main.js"
**/
import { Quasar } from 'quasar';
import RootComponent from 'app/src/App.vue';
import createRouter from 'app/src/router/index';
export default async function (createAppFn, quasarUserOptions) {
// create store and router instances
const router = typeof createRouter === 'function' ? await createRouter({}) : createRouter;
// Create the app instance.
// Here we inject into it the Quasar UI, the router & possibly the store.
const app = createAppFn(RootComponent);
app.config.devtools = true;
app.use(Quasar, quasarUserOptions);
// Expose the app, the router and the store.
// Note that we are not mounting the app here, since bootstrapping will be
// different depending on whether we are in a browser or on the server.
return {
app,
router,
};
}

100
.quasar/client-entry.js Normal file
View File

@ -0,0 +1,100 @@
/**
* THIS FILE IS GENERATED AUTOMATICALLY.
* DO NOT EDIT.
*
* You are probably looking on adding startup/initialization code.
* Use "quasar new boot <name>" and add it there.
* One boot file per concern. Then reference the file(s) in quasar.conf.js > boot:
* boot: ['file', ...] // do not add ".js" extension to it.
*
* Boot files are your "main.js"
**/
import { createApp } from 'vue';
import '@quasar/extras/roboto-font/roboto-font.css';
import '@quasar/extras/material-icons/material-icons.css';
// We load Quasar stylesheet file
import 'quasar/dist/quasar.sass';
import 'src/css/app.scss';
import createQuasarApp from './app.js';
import quasarUserOptions from './quasar-user-options.js';
console.info('[Quasar] Running SPA.');
const publicPath = ``;
async function start({ app, router }, bootFiles) {
let hasRedirected = false;
const getRedirectUrl = (url) => {
try {
return router.resolve(url).href;
} catch (err) {}
return Object(url) === url ? null : url;
};
const redirect = (url) => {
hasRedirected = true;
if (typeof url === 'string' && /^https?:\/\//.test(url)) {
window.location.href = url;
return;
}
const href = getRedirectUrl(url);
// continue if we didn't fail to resolve the url
if (href !== null) {
window.location.href = href;
window.location.reload();
}
};
const urlPath = window.location.href.replace(window.location.origin, '');
for (let i = 0; hasRedirected === false && i < bootFiles.length; i++) {
try {
await bootFiles[i]({
app,
router,
ssrContext: null,
redirect,
urlPath,
publicPath,
});
} catch (err) {
if (err && err.url) {
redirect(err.url);
return;
}
console.error('[Quasar] boot error:', err);
return;
}
}
if (hasRedirected === true) {
return;
}
app.use(router);
app.mount('#q-app');
}
createQuasarApp(createApp, quasarUserOptions).then((app) => {
return Promise.all([
import(/* webpackMode: "eager" */ 'boot/i18n'),
import(/* webpackMode: "eager" */ 'boot/axios'),
]).then((bootFiles) => {
const boot = bootFiles.map((entry) => entry.default).filter((entry) => typeof entry === 'function');
start(app, boot);
});
});

113
.quasar/client-prefetch.js Normal file
View File

@ -0,0 +1,113 @@
/**
* THIS FILE IS GENERATED AUTOMATICALLY.
* DO NOT EDIT.
*
* You are probably looking on adding startup/initialization code.
* Use "quasar new boot <name>" and add it there.
* One boot file per concern. Then reference the file(s) in quasar.conf.js > boot:
* boot: ['file', ...] // do not add ".js" extension to it.
*
* Boot files are your "main.js"
**/
import App from 'app/src/App.vue';
let appPrefetch =
typeof App.preFetch === 'function'
? App.preFetch
: // Class components return the component options (and the preFetch hook) inside __c property
App.__c !== void 0 && typeof App.__c.preFetch === 'function'
? App.__c.preFetch
: false;
function getMatchedComponents(to, router) {
const route = to ? (to.matched ? to : router.resolve(to).route) : router.currentRoute;
if (!route) {
return [];
}
return Array.prototype.concat.apply(
[],
route.matched.map((m) => {
return Object.keys(m.components).map((key) => {
const comp = m.components[key];
return {
path: m.path,
c: comp,
};
});
})
);
}
export function addPreFetchHooks(router, publicPath) {
// Add router hook for handling preFetch.
// Doing it after initial route is resolved so that we don't double-fetch
// the data that we already have. Using router.beforeResolve() so that all
// async components are resolved.
router.beforeResolve((to, from, next) => {
const urlPath = window.location.href.replace(window.location.origin, ''),
matched = getMatchedComponents(to, router),
prevMatched = getMatchedComponents(from, router);
let diffed = false;
const preFetchList = matched
.filter((m, i) => {
return (
diffed ||
(diffed =
!prevMatched[i] || prevMatched[i].c !== m.c || m.path.indexOf('/:') > -1) // does it has params?
);
})
.filter(
(m) =>
m.c !== void 0 &&
(typeof m.c.preFetch === 'function' ||
// Class components return the component options (and the preFetch hook) inside __c property
(m.c.__c !== void 0 && typeof m.c.__c.preFetch === 'function'))
)
.map((m) => (m.c.__c !== void 0 ? m.c.__c.preFetch : m.c.preFetch));
if (appPrefetch !== false) {
preFetchList.unshift(appPrefetch);
appPrefetch = false;
}
if (preFetchList.length === 0) {
return next();
}
let hasRedirected = false;
const redirect = (url) => {
hasRedirected = true;
next(url);
};
const proceed = () => {
if (hasRedirected === false) {
next();
}
};
preFetchList
.reduce(
(promise, preFetch) =>
promise.then(
() =>
hasRedirected === false &&
preFetch({
currentRoute: to,
previousRoute: from,
redirect,
urlPath,
publicPath,
})
),
Promise.resolve()
)
.then(proceed)
.catch((e) => {
console.error(e);
proceed();
});
});
}

15
.quasar/quasar-user-options.js Normal file
View File

@ -0,0 +1,15 @@
/**
* THIS FILE IS GENERATED AUTOMATICALLY.
* DO NOT EDIT.
*
* You are probably looking on adding startup/initialization code.
* Use "quasar new boot <name>" and add it there.
* One boot file per concern. Then reference the file(s) in quasar.conf.js > boot:
* boot: ['file', ...] // do not add ".js" extension to it.
*
* Boot files are your "main.js"
**/
import { Notify } from 'quasar';
export default { config: {}, plugins: { Notify } };

15
.vscode/extensions.json vendored
View File

@ -1,15 +0,0 @@
{
"recommendations": [
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode",
"editorconfig.editorconfig",
"johnsoncodehk.volar",
"wayou.vscode-todo-highlight"
],
"unwantedRecommendations": [
"octref.vetur",
"hookyqr.beautify",
"dbaeumer.jshint",
"ms-vscode.vscode-typescript-tslint-plugin"
]
}

47
.vscode/settings.json vendored
View File

@ -1,42 +1,7 @@
{
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": true,
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": [
"source.fixAll.eslint"
],
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"vue"
],
"typescript.tsdk": "node_modules/typescript/lib",
"[typescript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"[jsonc]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
"[json]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"[vue]": {
"editor.defaultFormatter": "johnsoncodehk.volar"
},
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"json.schemas": [
{
"fileMatch": [
"cypress.json"
],
"url": "https://on.cypress.io/cypress.schema.json"
}
]
}
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": true,
"editor.formatOnSave": true,
"editor.codeActionsOnSave": ["source.fixAll.eslint"],
"eslint.validate": ["javascript", "javascriptreact", "typescript", "vue"]
}

2
cypress.json
View File

@ -12,4 +12,4 @@
"testFiles": "**/*.spec.js",
"supportFile": "test/cypress/support/unit.js"
}
}
}

3
jest.config.js
View File

@ -74,8 +74,7 @@ module.exports = {
// (sync) .babelrc, .babelrc.js, babel.config.js, package.json
// https://github.com/tleunen/find-babel-config/issues/33
'.*\\.vue$': 'vue-jest',
'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
'jest-transform-stub',
'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
},
transformIgnorePatterns: [`node_modules/(?!(${esModules}))`],
snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],

2
package.json
View File

@ -57,4 +57,4 @@
"npm": ">= 6.13.4",
"yarn": ">= 1.21.1"
}
}
}

11
quasar.extensions.json
View File

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

2
quasar.testing.json
View File

@ -8,4 +8,4 @@
"unit-cypress": {
"runnerCommand": "cypress run-ct"
}
}
}

2
src/boot/axios.ts
View File

@ -4,7 +4,6 @@ import axios, { AxiosInstance } from 'axios';
import { useSession } from 'src/composables/useSession';
const { getToken } = useSession();
declare module '@vue/runtime-core' {
interface ComponentCustomProperties {
$axios: AxiosInstance;
@ -34,7 +33,6 @@ axios.interceptors.request.use(
}
);
export default boot(({ app }) => {
// for use inside Vue files (Options API) through this.$axios and this.$api

2
src/boot/i18n.ts
View File

@ -13,4 +13,4 @@ export default boot(({ app }) => {
app.use(i18n);
});
export { i18n };
export { i18n };

6
src/components/Navbar.vue
View File

@ -1,7 +1,7 @@
<template>
<q-header class="bg-dark" color="white" elevated bordered>
<q-toolbar class="q-py-sm q-px-md">
<q-btn flat @click="$emit('on-toggle-drawer')" round dense icon="menu" />
<q-btn flat @click="$emit('toggle-drawer')" round dense icon="menu" />
<router-link to="/">
<q-btn flat round class="q-ml-xs" v-if="$q.screen.gt.xs">
<q-avatar square size="md">
@ -51,4 +51,8 @@ const session = useSession();
const state = useState();
const user = state.getUser();
const token = session.getToken();
defineEmits<{
(event: 'toggle-drawer'): void;
}>();
</script>

13
src/components/QuasarButton.vue
View File

@ -1,19 +1,12 @@
<template>
<q-btn
data-cy="button"
label="test emit"
color="positive"
rounded
icon="edit"
@click="$emit('test')"
/>
<q-btn data-cy="button" label="test emit" color="positive" rounded icon="edit" @click="$emit('test')" />
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
name: 'QuasarButton',
emits: ['test'],
name: 'QuasarButton',
emits: ['test'],
});
</script>

102
src/components/QuasarDialog.vue
View File

@ -1,21 +1,16 @@
<template>
<!-- notice dialogRef here -->
<q-dialog ref="dialogRef" @hide="onDialogHide" data-cy="dialog">
<q-card class="q-dialog-plugin">
<q-card-section>{{ message }}</q-card-section>
<!-- notice dialogRef here -->
<q-dialog ref="dialogRef" @hide="onDialogHide" data-cy="dialog">
<q-card class="q-dialog-plugin">
<q-card-section>{{ message }}</q-card-section>
<!-- buttons example -->
<q-card-actions align="right">
<q-btn
data-cy="ok-button"
color="primary"
label="OK"
@click="onOKClick"
/>
<q-btn color="primary" label="Cancel" @click="onCancelClick" />
</q-card-actions>
</q-card>
</q-dialog>
<!-- buttons example -->
<q-card-actions align="right">
<q-btn data-cy="ok-button" color="primary" label="OK" @click="onOKClick" />
<q-btn color="primary" label="Cancel" @click="onCancelClick" />
</q-card-actions>
</q-card>
</q-dialog>
</template>
<script>
@ -23,49 +18,48 @@ import { useDialogPluginComponent } from 'quasar';
import { defineComponent } from 'vue';
export default defineComponent({
name: 'QuasarDialog',
props: {
message: {
type: String,
required: true,
name: 'QuasarDialog',
props: {
message: {
type: String,
required: true,
},
},
},
// REQUIRED; need to specify some events that your
// component will emit through useDialogPluginComponent()
emits: useDialogPluginComponent.emits,
// REQUIRED; need to specify some events that your
// component will emit through useDialogPluginComponent()
emits: useDialogPluginComponent.emits,
setup() {
// REQUIRED; must be called inside of setup()
const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
useDialogPluginComponent();
// dialogRef - Vue ref to be applied to QDialog
// onDialogHide - Function to be used as handler for @hide on QDialog
// onDialogOK - Function to call to settle dialog with "ok" outcome
// example: onDialogOK() - no payload
// example: onDialogOK({ /*.../* }) - with payload
// onDialogCancel - Function to call to settle dialog with "cancel" outcome
setup() {
// REQUIRED; must be called inside of setup()
const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent();
// dialogRef - Vue ref to be applied to QDialog
// onDialogHide - Function to be used as handler for @hide on QDialog
// onDialogOK - Function to call to settle dialog with "ok" outcome
// example: onDialogOK() - no payload
// example: onDialogOK({ /*.../* }) - with payload
// onDialogCancel - Function to call to settle dialog with "cancel" outcome
return {
// This is REQUIRED;
// Need to inject these (from useDialogPluginComponent() call)
// into the vue scope for the vue html template
dialogRef,
onDialogHide,
return {
// This is REQUIRED;
// Need to inject these (from useDialogPluginComponent() call)
// into the vue scope for the vue html template
dialogRef,
onDialogHide,
// other methods that we used in our vue html template;
// these are part of our example (so not required)
onOKClick() {
// on OK, it is REQUIRED to
// call onDialogOK (with optional payload)
onDialogOK();
// or with payload: onDialogOK({ ... })
// ...and it will also hide the dialog automatically
},
// other methods that we used in our vue html template;
// these are part of our example (so not required)
onOKClick() {
// on OK, it is REQUIRED to
// call onDialogOK (with optional payload)
onDialogOK();
// or with payload: onDialogOK({ ... })
// ...and it will also hide the dialog automatically
},
// we can passthrough onDialogCancel directly
onCancelClick: onDialogCancel,
};
},
// we can passthrough onDialogCancel directly
onCancelClick: onDialogCancel,
};
},
});
</script>

46
src/components/QuasarDrawer.vue
View File

@ -1,33 +1,33 @@
<template>
<q-drawer
v-model="showDrawer"
show-if-above
:width="200"
:breakpoint="700"
elevated
data-cy="drawer"
class="bg-primary text-white"
>
<q-scroll-area class="fit">
<div class="q-pa-sm">
<div v-for="n in 50" :key="n">Drawer {{ n }} / 50</div>
</div>
<q-btn data-cy="button">Am I on screen?</q-btn>
</q-scroll-area>
</q-drawer>
<q-drawer
v-model="showDrawer"
show-if-above
:width="200"
:breakpoint="700"
elevated
data-cy="drawer"
class="bg-primary text-white"
>
<q-scroll-area class="fit">
<div class="q-pa-sm">
<div v-for="n in 50" :key="n">Drawer {{ n }} / 50</div>
</div>
<q-btn data-cy="button">Am I on screen?</q-btn>
</q-scroll-area>
</q-drawer>
</template>
<script>
import { ref, defineComponent } from 'vue';
export default defineComponent({
name: 'QuasarDrawer',
setup() {
const showDrawer = ref(true);
name: 'QuasarDrawer',
setup() {
const showDrawer = ref(true);
return {
showDrawer,
};
},
return {
showDrawer,
};
},
});
</script>

22
src/components/QuasarPageSticky.vue
View File

@ -1,21 +1,21 @@
<template>
<q-page-sticky position="bottom-right" :offset="[18, 18]">
<q-btn data-cy="button" rounded color="accent" icon="arrow_forward">
{{ title }}
</q-btn>
</q-page-sticky>
<q-page-sticky position="bottom-right" :offset="[18, 18]">
<q-btn data-cy="button" rounded color="accent" icon="arrow_forward">
{{ title }}
</q-btn>
</q-page-sticky>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
name: 'QuasarPageSticky',
props: {
title: {
type: String,
required: true,
name: 'QuasarPageSticky',
props: {
title: {
type: String,
required: true,
},
},
},
});
</script>

29
src/components/QuasarTooltip.vue
View File

@ -1,28 +1,21 @@
<template>
<q-btn color="primary" data-cy="button">
Button
<q-tooltip
v-model="showTooltip"
data-cy="tooltip"
class="bg-red"
:offset="[10, 10]"
>
Here I am!
</q-tooltip>
</q-btn>
<q-btn color="primary" data-cy="button">
Button
<q-tooltip v-model="showTooltip" data-cy="tooltip" class="bg-red" :offset="[10, 10]"> Here I am! </q-tooltip>
</q-btn>
</template>
<script>
import { ref, defineComponent } from 'vue';
export default defineComponent({
name: 'QuasarTooltip',
setup() {
const showTooltip = ref(true);
name: 'QuasarTooltip',
setup() {
const showTooltip = ref(true);
return {
showTooltip,
};
},
return {
showTooltip,
};
},
});
</script>

17
src/components/UserPanel.vue
View File

@ -11,12 +11,7 @@
true-value="en"
v-model="locale"
/>
<q-toggle
v-model="darkMode"
checked-icon="dark_mode"
color="orange"
unchecked-icon="light_mode"
/>
<q-toggle v-model="darkMode" checked-icon="dark_mode" color="orange" unchecked-icon="light_mode" />
<q-btn color="orange" outline size="sm" label="Settings" icon="settings" />
</div>
@ -36,15 +31,7 @@
</div>
<div class="text-subtitle3 text-grey-7 q-mb-xs">@{{ user.username }}</div>
<q-btn
color="orange"
flat
label="Log Out"
size="sm"
icon="logout"
@click="logout()"
v-close-popup
/>
<q-btn color="orange" flat label="Log Out" size="sm" icon="logout" @click="logout()" v-close-popup />
</div>
</div>
</q-menu>

60
src/components/__tests__/QuasarButton.e2e.spec.js
View File

@ -2,43 +2,41 @@ import { mount } from '@cypress/vue';
import QuasarButton from '../QuasarButton.vue';
describe('QuasarButton', () => {
it('renders a message', () => {
const label = 'Hello there';
mount(QuasarButton, {
props: {
label,
},
it('renders a message', () => {
const label = 'Hello there';
mount(QuasarButton, {
props: {
label,
},
});
cy.dataCy('button').should('contain', label);
});
cy.dataCy('button').should('contain', label);
});
it('renders another message', () => {
const label = 'Will this work?';
mount(QuasarButton, {
props: {
label,
},
});
it('renders another message', () => {
const label = 'Will this work?';
mount(QuasarButton, {
props: {
label,
},
cy.dataCy('button').should('contain', label);
});
cy.dataCy('button').should('contain', label);
});
it('should have a `positive` color', () => {
mount(QuasarButton);
it('should have a `positive` color', () => {
mount(QuasarButton);
cy.dataCy('button').should('have.backgroundColor', 'var(--q-positive)').should('have.color', 'white');
});
cy.dataCy('button')
.should('have.backgroundColor', 'var(--q-positive)')
.should('have.color', 'white');
});
it('should emit `test` upon click', () => {
mount(QuasarButton);
it('should emit `test` upon click', () => {
mount(QuasarButton);
cy.dataCy('button')
.click()
.should(() => {
expect(Cypress.vueWrapper.emitted('test')).to.have.length(1);
});
});
cy.dataCy('button')
.click()
.should(() => {
expect(Cypress.vueWrapper.emitted('test')).to.have.length(1);
});
});
});

32
src/components/__tests__/QuasarDialog.spec.js
View File

@ -3,22 +3,22 @@ import DialogWrapper from 'app/test/cypress/wrappers/DialogWrapper.vue';
import QuasarDialog from '../QuasarDialog.vue';
describe('QuasarDialog', () => {
it('should show a dialog with a message', () => {
const message = 'Hello, I am a dialog';
mount(DialogWrapper, {
props: {
component: QuasarDialog,
componentProps: {
message,
},
},
it('should show a dialog with a message', () => {
const message = 'Hello, I am a dialog';
mount(DialogWrapper, {
props: {
component: QuasarDialog,
componentProps: {
message,
},
},
});
cy.dataCy('dialog').should('exist').should('contain', message);
});
cy.dataCy('dialog').should('exist').should('contain', message);
});
it('should close a dialog when clikcing ok', () => {
// The dialog is still visible from the previous test
cy.dataCy('dialog').should('exist').dataCy('ok-button').click();
cy.dataCy('dialog').should('not.exist');
});
it('should close a dialog when clikcing ok', () => {
// The dialog is still visible from the previous test
cy.dataCy('dialog').should('exist').dataCy('ok-button').click();
cy.dataCy('dialog').should('not.exist');
});
});

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

@ -3,19 +3,13 @@ import LayoutContainer from 'app/test/cypress/wrappers/LayoutContainer.vue';
import QuasarDrawer from '../QuasarDrawer.vue';
describe('QuasarDrawer', () => {
it('should show a drawer', () => {
mount(LayoutContainer, {
props: {
component: QuasarDrawer,
},
it('should show a drawer', () => {
mount(LayoutContainer, {
props: {
component: QuasarDrawer,
},
});
cy.dataCy('drawer').should('exist').dataCy('button').should('not.be.visible');
cy.get('.q-scrollarea .scroll').scrollTo('bottom', { duration: 500 }).dataCy('button').should('be.visible');
});
cy.dataCy('drawer')
.should('exist')
.dataCy('button')
.should('not.be.visible');
cy.get('.q-scrollarea .scroll')
.scrollTo('bottom', { duration: 500 })
.dataCy('button')
.should('be.visible');
});
});

30
src/components/__tests__/QuasarPageSticky.spec.js
View File

@ -3,20 +3,20 @@ import LayoutContainer from 'app/test/cypress/wrappers/LayoutContainer.vue';
import QuasarPageSticky from '../QuasarPageSticky.vue';
describe('QuasarPageSticky', () => {
it('should show a sticky at the bottom-right of the page', () => {
mount(LayoutContainer, {
props: {
component: QuasarPageSticky,
title: 'Test',
},
});
it('should show a sticky at the bottom-right of the page', () => {
mount(LayoutContainer, {
props: {
component: QuasarPageSticky,
title: 'Test',
},
});
cy.dataCy('button')
.should('be.visible')
.should(($el) => {
const rect = $el[0].getBoundingClientRect();
expect(rect.bottom).to.equal(window.innerHeight - 18);
expect(rect.right).to.equal(window.innerWidth - 18);
});
});
cy.dataCy('button')
.should('be.visible')
.should(($el) => {
const rect = $el[0].getBoundingClientRect();
expect(rect.bottom).to.equal(window.innerHeight - 18);
expect(rect.right).to.equal(window.innerWidth - 18);
});
});
});

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

@ -2,10 +2,10 @@ import { mount } from '@cypress/vue';
import QuasarTooltip from '../QuasarTooltip.vue';
describe('QuasarTooltip', () => {
it('should show a tooltip', () => {
mount(QuasarTooltip);
it('should show a tooltip', () => {
mount(QuasarTooltip);
cy.dataCy('button').trigger('mouseover');
cy.dataCy('tooltip').contains('Here I am!');
});
cy.dataCy('button').trigger('mouseover');
cy.dataCy('tooltip').contains('Here I am!');
});
});

2
src/composables/useRole.ts
View File

@ -15,4 +15,4 @@ export function useRole() {
hasAny,
};
}
*/
*/

2
src/css/app.scss
View File

@ -1,2 +1,2 @@
// app global css in SCSS form
@import './icons.scss';
@import './icons.scss';

2259
src/css/fonts/selection.json
View File

File diff suppressed because one or more lines are too long

44
src/i18n/en/index.ts
View File

@ -1,35 +1,35 @@
export default {
globals: {
lang: {
'es': 'Spanish',
'en': 'English'
}
es: 'Spanish',
en: 'English',
},
},
errors: {
'statusUnauthorized': 'Access denied',
'statusInternalServerError': 'An internal server error has ocurred'
statusUnauthorized: 'Access denied',
statusInternalServerError: 'An internal server error has ocurred',
},
login: {
'title': 'Login',
'username': 'Username',
'password': 'Password',
'submit': 'Log in',
'keepLogin': 'Keep me logged in',
'loginSuccess': 'You have successfully logged in',
'loginError': 'Invalid username or password'
title: 'Login',
username: 'Username',
password: 'Password',
submit: 'Log in',
keepLogin: 'Keep me logged in',
loginSuccess: 'You have successfully logged in',
loginError: 'Invalid username or password',
},
customer: {},
components: {
'topbar': {},
'userPanel': {
'settings': 'Settings',
'logOut': 'Log Out'
}
topbar: {},
userPanel: {
settings: 'Settings',
logOut: 'Log Out',
},
},
pages: {
'logIn': 'Log In',
'dashboard': 'Dashboard',
'customers': 'Customers',
'list': 'List',
}
logIn: 'Log In',
dashboard: 'Dashboard',
customers: 'Customers',
list: 'List',
},
};

50
src/i18n/es/index.ts
View File

@ -1,29 +1,29 @@
export default {
'globals': {
'lang': {
'es': 'Español',
'en': 'Inglés'
}
globals: {
lang: {
es: 'Español',
en: 'Inglés',
},
},
'errors': {
'statusUnauthorized': 'Acceso denegado',
'statusInternalServerError': 'Ha ocurrido un error interno del servidor'
errors: {
statusUnauthorized: 'Acceso denegado',
statusInternalServerError: 'Ha ocurrido un error interno del servidor',
},
'login': {
'title': 'Iniciar sesión',
'username': 'Nombre de usuario',
'password': 'Contraseña',
'submit': 'Iniciar sesión',
'keepLogin': 'Mantener sesión iniciada',
'loginSuccess': 'Inicio de sesión correcto',
'loginError': 'Nombre de usuario o contraseña incorrectos'
login: {
title: 'Iniciar sesión',
username: 'Nombre de usuario',
password: 'Contraseña',
submit: 'Iniciar sesión',
keepLogin: 'Mantener sesión iniciada',
loginSuccess: 'Inicio de sesión correcto',
loginError: 'Nombre de usuario o contraseña incorrectos',
},
'customer': {},
'components': {
'topbar': {},
'userPanel': {
'settings': 'Configuración',
'logOut': 'Cerrar sesión'
}
}
}
customer: {},
components: {
topbar: {},
userPanel: {
settings: 'Configuración',
logOut: 'Cerrar sesión',
},
},
};

4
src/i18n/index.ts
View File

@ -2,6 +2,6 @@ import en from './en';
import es from './es';
export default {
'en': en,
'es': es,
en: en,
es: es,
};

44
src/index.template.html
View File

@ -1,28 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<title><%= productName %></title>
<head>
<title>
<%= productName %>
</title>
<meta charset="utf-8" />
<meta name="description" content="<%= productDescription %>" />
<meta name="format-detection" content="telephone=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 charset="utf-8" />
<meta name="description" content="<%= productDescription %>" />
<meta name="format-detection" content="telephone=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<% } %>" />
<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="32x32" href="icons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png" />
<link rel="icon" type="image/ico" href="favicon.ico" />
</head>
<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="32x32" href="icons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png" />
<link rel="icon" type="image/ico" href="favicon.ico" />
</head>
<body>
<!-- DO NOT touch the following DIV -->
<div id="q-app"></div>
</body>
</html>
<body>
<!-- DO NOT touch the following DIV -->
<div id="q-app"></div>
</body>
</html>

19
src/layouts/Main.vue
View File

@ -1,6 +1,6 @@
<template>
<q-layout view="hHh lpR fFf">
<Navbar @on-toggle-drawer="onToggleDrawer()" />
<Navbar @toggle-drawer="onToggleDrawer()" />
<q-drawer
v-model="drawer"
show-if-above
@ -13,23 +13,13 @@
>
<q-scroll-area class="fit text-grey-8">
<q-list padding>
<q-item
clickable
v-ripple
:to="{ path: '/dashboard' }"
active-class="text-orange"
>
<q-item clickable v-ripple :to="{ path: '/dashboard' }" active-class="text-orange">
<q-item-section avatar>
<q-icon name="dashboard" />
</q-item-section>
<q-item-section>Dashboard</q-item-section>
</q-item>
<q-item
clickable
v-ripple
:to="{ path: '/customer' }"
active-class="text-orange"
>
<q-item clickable v-ripple :to="{ path: '/customer' }" active-class="text-orange">
<q-item-section avatar>
<q-icon name="people" />
</q-item-section>
@ -86,5 +76,4 @@ function onToggleDrawer(): void {
}
</script>
<style lang="scss" scoped>
</style>
<style lang="scss" scoped></style>

21
src/pages/Login/Login.vue
View File

@ -11,25 +11,14 @@
true-value="en"
v-model="locale"
/>
<q-toggle
v-model="darkMode"
checked-icon="dark_mode"
color="orange"
unchecked-icon="light_mode"
/>
<q-toggle v-model="darkMode" checked-icon="dark_mode" color="orange" unchecked-icon="light_mode" />
</q-toolbar>
</q-header>
<q-page-container>
<q-page>
<div id="login">
<q-card class="login q-pa-xl">
<q-img
src="~/assets/logo.svg"
alt="Logo"
fit="contain"
:ratio="16 / 9"
class="q-mb-md"
/>
<q-img src="~/assets/logo.svg" alt="Logo" fit="contain" :ratio="16 / 9" class="q-mb-md" />
<q-form @submit="onSubmit" class="q-gutter-md">
<q-input
filled
@ -52,11 +41,7 @@
(val: string) => (val && val.length > 0) || 'Please type something',
]"
/>
<q-toggle
v-model="keepLogin"
:label="t('login.keepLogin')"
color="orange"
/>
<q-toggle v-model="keepLogin" :label="t('login.keepLogin')" color="orange" />
<div>
<q-btn :label="t('login.submit')" type="submit" color="orange" />

10
src/pages/NotFound.vue
View File

@ -5,15 +5,7 @@
<div class="text-h2" style="opacity: 0.4">Oops. Nothing here...</div>
<q-btn
class="q-mt-xl"
color="white"
text-color="blue"
unelevated
to="/"
label="Go Home"
no-caps
/>
<q-btn class="q-mt-xl" color="white" text-color="blue" unelevated to="/" label="Go Home" no-caps />
</div>
</div>
</template>

18
src/router/index.ts
View File

@ -1,10 +1,5 @@
import { route } from 'quasar/wrappers';
import {
createMemoryHistory,
createRouter,
createWebHashHistory,
createWebHistory,
} from 'vue-router';
import { createMemoryHistory, createRouter, createWebHashHistory, createWebHistory } from 'vue-router';
import routes from './routes';
import { i18n } from 'src/boot/i18n';
import { useSession } from 'src/composables/useSession';
@ -22,8 +17,8 @@ export default route(function (/* { store, ssrContext } */) {
const createHistory = process.env.SERVER
? createMemoryHistory
: process.env.VUE_ROUTER_MODE === 'history'
? createWebHistory
: createWebHashHistory;
? createWebHistory
: createWebHashHistory;
const Router = createRouter({
scrollBehavior: () => ({ left: 0, top: 0 }),
@ -32,13 +27,10 @@ export default route(function (/* { store, ssrContext } */) {
// Leave this as is and make changes in quasar.conf.js instead!
// quasar.conf.js -> build -> vueRouterMode
// 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),
});
Router.beforeEach((to, from, next) => {
const { isLoggedIn } = session;
if (!isLoggedIn && to.name !== 'Login') {
@ -56,7 +48,6 @@ export default route(function (/* { store, ssrContext } */) {
const { t } = i18n.global;
let title = '';
const parent = to.matched[1];
if (parent) {
const parentMeta: Meta = parent.meta;
@ -76,6 +67,5 @@ export default route(function (/* { store, ssrContext } */) {
document.title = title;
});
return Router;
});

8
test/cypress/fixtures/example.json
View File

@ -1,5 +1,5 @@
{
"name": "Using fixtures to represent data",
"email": "hello@cypress.io",
"body": "Fixtures are a great way to mock data for responses to routes"
}
"name": "Using fixtures to represent data",
"email": "hello@cypress.io",
"body": "Fixtures are a great way to mock data for responses to routes"
}

12
test/cypress/integration/home.spec.js
View File

@ -6,12 +6,12 @@
// This test will pass when run against a clean Quasar project
describe('Landing', () => {
beforeEach(() => {
cy.visit('/');
});
it('.should() - assert that <title> is correct', () => {
cy.title().should('include', 'Salix');
});
beforeEach(() => {
cy.visit('/');
});
it('.should() - assert that <title> is correct', () => {
cy.title().should('include', 'Salix');
});
});
// ** The following code is an example to show you how to write some tests for your home page **

16
test/cypress/plugins/index.js
View File

@ -15,19 +15,17 @@
// cypress/plugins/index.js
const {
injectDevServer,
} = require('@quasar/quasar-app-extension-testing-e2e-cypress/cct-dev-server');
const { injectDevServer } = require('@quasar/quasar-app-extension-testing-e2e-cypress/cct-dev-server');
/**
* @type {Cypress.PluginConfig}
*/
module.exports = async (on, config) => {
// Enable component testing, you can safely remove this
// if you don't plan to use Cypress for unit tests
// if (config.testingType === 'component') {
// await injectDevServer(on, config);
// }
// Enable component testing, you can safely remove this
// if you don't plan to use Cypress for unit tests
// if (config.testingType === 'component') {
// await injectDevServer(on, config);
// }
return config;
return config;
};

2
test/cypress/support/unit.js
View File

@ -36,7 +36,7 @@ import { Dialog } from 'quasar';
// For example use the actual i18n instance or mock it
// config.global.plugins.push(i18n);
config.global.mocks = {
$t: () => '',
$t: () => '',
};
// Overwrite the transition and transition-group stubs which are stubbed by test-utils by default.

34
test/cypress/wrappers/DialogWrapper.vue
View File

@ -3,24 +3,24 @@ import { defineComponent } from 'vue';
import { Dialog } from 'quasar';
export default defineComponent({
name: 'DialogWrapper',
props: {
component: {
type: Object,
required: true,
name: 'DialogWrapper',
props: {
component: {
type: Object,
required: true,
},
componentProps: {
type: Object,
default: () => ({}),
},
},
componentProps: {
type: Object,
default: () => ({}),
},
},
setup(props) {
Dialog.create({
component: props.component,
setup(props) {
Dialog.create({
component: props.component,
// props forwarded to your custom component
componentProps: props.componentProps,
});
},
// props forwarded to your custom component
componentProps: props.componentProps,
});
},
});
</script>

20
test/cypress/wrappers/LayoutContainer.vue
View File

@ -1,20 +1,20 @@
<template>
<q-layout>
<component :is="component" v-bind="$attrs" />
</q-layout>
<q-layout>
<component :is="component" v-bind="$attrs" />
</q-layout>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
name: 'LayoutContainer',
inheritAttrs: false,
props: {
component: {
type: Object,
required: true,
name: 'LayoutContainer',
inheritAttrs: false,
props: {
component: {
type: Object,
required: true,
},
},
},
});
</script>

2
test/jest/__tests__/MyButton.spec.js
View File

@ -19,7 +19,7 @@ describe('MyButton', () => {
const wrapper = mount(MyButton);
const { vm } = wrapper;
expect((vm.$el).textContent).toContain('rocket muffin');
expect(vm.$el.textContent).toContain('rocket muffin');
expect(wrapper.find('.content').text()).toContain('rocket muffin');
});

1
test/jest/__tests__/demo/MyButton.vue
View File

@ -12,7 +12,6 @@ const input = ref('rocket muffin');
function increment() {
counter.value += props.incrementStep;
}
</script>
<template>

1
test/jest/__tests__/demo/MyDialog.vue
View File

@ -1,4 +1,3 @@
<script lang="ts" setup>
import { ref } from 'vue';
const isDialogOpen = ref(false);

2
tsconfig.json
View File

@ -3,4 +3,4 @@
"compilerOptions": {
"baseUrl": "."
}
}
}