verdnatura/floranet
verdnatura
/
floranet
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Ajustar diseño y cambiar proyecto a js #3

Merged
pablone merged 7 commits from develop into master 2024-01-11 06:20:29 +00:00
Conversation 0 Commits 7 Files Changed 100 +1516 -17205
100 changed files with 1516 additions and 17205 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintignore
View File

@ -4,5 +4,4 @@
/.quasar /.quasar
/node_modules /node_modules
.eslintrc.js .eslintrc.js
/src-ssr
/quasar.config.*.temporary.compiled* /quasar.config.*.temporary.compiled*

44
.eslintrc.cjs
View File

@ -4,19 +4,14 @@ module.exports = {
// Remove this if you have an higher level ESLint config file (it usually happens into a monorepos) // Remove this if you have an higher level ESLint config file (it usually happens into a monorepos)
root: true, root: true,
// https://eslint.vuejs.org/user-guide/#how-to-use-a-custom-parser
// Must use parserOptions instead of "parser" to allow vue-eslint-parser to keep working
// `parser: 'vue-eslint-parser'` is already included with any 'plugin:vue/**' config and should be omitted
parserOptions: { parserOptions: {
parser: require.resolve('@typescript-eslint/parser'), ecmaVersion: 2021, // Allows for the parsing of modern ECMAScript features
extraFileExtensions: [ '.vue' ]
}, },
env: { env: {
browser: true,
es2021: true,
node: true, node: true,
'vue/setup-compiler-macros': true browser: true,
'vue/setup-compiler-macros': true,
}, },
// Rules order is important, please avoid shuffling them // Rules order is important, please avoid shuffling them
@ -24,10 +19,6 @@ module.exports = {
// Base ESLint recommended rules // Base ESLint recommended rules
// 'eslint:recommended', // 'eslint:recommended',
// https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#usage
// ESLint typescript rules
'plugin:@typescript-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
@ -37,21 +28,17 @@ module.exports = {
// 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: [
// required to apply rules which need type information
'@typescript-eslint',
// https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-files // https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-files
// required to lint *.vue files // required to lint *.vue files
'vue' 'vue',
// 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: {
@ -64,27 +51,14 @@ module.exports = {
__QUASAR_SSR_PWA__: 'readonly', __QUASAR_SSR_PWA__: 'readonly',
process: 'readonly', process: 'readonly',
Capacitor: 'readonly', Capacitor: 'readonly',
chrome: 'readonly' chrome: 'readonly',
}, },
// add your custom rules here // add your custom rules here
rules: { rules: {
'prefer-promise-reject-errors': 'off', 'prefer-promise-reject-errors': 'off',
quotes: ['warn', 'single', { avoidEscape: true }],
// this rule, if on, would require explicit return type on the `render` function
'@typescript-eslint/explicit-function-return-type': 'off',
// in plain CommonJS modules, you can't use `import foo = require('foo')` to pass this rule, so it has to be disabled
'@typescript-eslint/no-var-requires': 'off',
// The core 'no-unused-vars' rules (in the eslint:recommended ruleset)
// does not work with type definitions
'no-unused-vars': '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',
} },
} };

4
.prettierrc
View File

@ -1,4 +0,0 @@
{
"singleQuote": true,
"semi": true
}

35
.vscode/settings.json vendored
View File

@ -1,27 +1,22 @@
{ {
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": true,
"editor.formatOnSave": true, "editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": [
"source.addMissingImports",
"source.organizeImports",
"source.fixAll.eslint"
],
"eslint.validate": ["javascript", "javascriptreact", "typescript", "vue"],
"typescript.tsdk": "node_modules/typescript/lib",
"editor.formatOnPaste": true, "editor.formatOnPaste": true,
"editor.minimap.enabled": false, "editor.minimap.enabled": false,
"editor.tabSize": 2, "editor.tabSize": 2,
"editor.fontSize": 14, "editor.fontSize": 14,
"editor.fontWeight": "normal", "editor.fontWeight": "normal",
"editor.guides.highlightActiveBracketPair": true, "editor.guides.highlightActiveBracketPair": true,
"editor.bracketPairColorization.enabled": true,
"editor.bracketPairColorization.independentColorPoolPerBracketType": true, "editor.bracketPairColorization.independentColorPoolPerBracketType": true,
"editor.guides.bracketPairs": true,
"editor.guides.bracketPairsHorizontal": true, "editor.guides.bracketPairsHorizontal": true,
"editor.acceptSuggestionOnEnter": "smart", "editor.acceptSuggestionOnEnter": "smart",
"editor.tabCompletion": "on", "editor.tabCompletion": "on",
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.linkedEditing": true, "editor.linkedEditing": true,
"terminal.integrated.cursorStyleInactive": "line", "terminal.integrated.cursorStyleInactive": "line",
"workbench.iconTheme": "material-icon-theme",
"workbench.colorTheme": "Default Dark+",
"files.exclude": { "files.exclude": {
"**/.git": true, "**/.git": true,
"**/.svn": true, "**/.svn": true,
@ -32,11 +27,16 @@
}, },
"files.trimTrailingWhitespace": true, "files.trimTrailingWhitespace": true,
"files.trimFinalNewlines": true, "files.trimFinalNewlines": true,
"material-icon-theme.files.color": "#42a5f5",
"material-icon-theme.folders.theme": "specific",
"material-icon-theme.activeIconPack": "react",
"material-icon-theme.folders.color": "#42a5f5",
"prettier.arrowParens": "always", "prettier.arrowParens": "always",
"prettier.tabWidth": 2, "prettier.tabWidth": 2,
"prettier.singleQuote": true, "prettier.singleQuote": true,
"prettier.semi": true, "prettier.semi": true,
"prettier.printWidth": 175, "prettier.printWidth": 175,
"eslint.validate": ["javascript", "javascriptvue"],
"explorer.compactFolders": false, "explorer.compactFolders": false,
"terminal.integrated.env.windows": {}, "terminal.integrated.env.windows": {},
"git.enableSmartCommit": true, "git.enableSmartCommit": true,
@ -44,7 +44,6 @@
"console-ninja.fontSize": 12, "console-ninja.fontSize": 12,
"git.autofetch": true, "git.autofetch": true,
"git.confirmSync": false, "git.confirmSync": false,
"errorLens.excludeBySource": ["eslint(react/prop-types)"],
"javascript.updateImportsOnFileMove.enabled": "always", "javascript.updateImportsOnFileMove.enabled": "always",
"console-ninja.featureSet": "Community", "console-ninja.featureSet": "Community",
"liveServer.settings.donotShowInfoMsg": true, "liveServer.settings.donotShowInfoMsg": true,
@ -56,16 +55,24 @@
"terminal.integrated.enableImages": true, "terminal.integrated.enableImages": true,
"figma.autocompleteBlocks": true, "figma.autocompleteBlocks": true,
"figma.assetExportDirectory": "src/assets", "figma.assetExportDirectory": "src/assets",
"editor.codeActionsOnSave": [
"source.addMissingImports",
"source.organizeImports",
"source.fixAll.eslint"
],
"liveServer.settings.donotVerifyTags": true, "liveServer.settings.donotVerifyTags": true,
"gitlens.gitCommands.skipConfirmations": ["fetch:command", "switch:command"], "gitlens.gitCommands.skipConfirmations": ["fetch:command", "switch:command"],
"symbols.hidesExplorerArrows": false, "symbols.hidesExplorerArrows": false,
"editor.fontFamily": "CaskaydiaCove Nerd Font",
"diffEditor.ignoreTrimWhitespace": false, "diffEditor.ignoreTrimWhitespace": false,
"terminal.integrated.fontFamily": "CaskaydiaCove Nerd Font",
"svg.preview.mode": "svg", "svg.preview.mode": "svg",
"[svg]": { "[svg]": {
"editor.defaultFormatter": "jock.svg" "editor.defaultFormatter": "jock.svg"
}, },
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"workbench.tree.indent": 16, "workbench.tree.indent": 16,
"git.ignoreRebaseWarning": true "window.zoomLevel": 0,
"git.ignoreRebaseWarning": true,
"editor.largeFileOptimizations": false
} }

10
README.md
View File

@ -3,6 +3,7 @@
A floranet app A floranet app
## 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-vite/quasar-config-js). See [Configuring quasar.config.js](https://v2.quasar.dev/quasar-cli-vite/quasar-config-js).

8
index.html
View File

@ -43,6 +43,14 @@
href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Mulish:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&family=Questrial&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Mulish:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&family=Questrial&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>
<script
src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-element-bundle.min.js"
defer
></script>
</head> </head>
<body> <body>
<!-- quasar:entry-point --> <!-- quasar:entry-point -->

17
jsconfig.json Normal file
View File

@ -0,0 +1,17 @@
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"src/*": ["src/*"],
"app/*": ["*"],
"components/*": ["src/components/*"],
"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": ["dist", ".quasar", "node_modules"]
}

583
package-lock.json generated
View File

@ -14,27 +14,24 @@
"axios": "^1.2.1", "axios": "^1.2.1",
"pinia": "^2.0.11", "pinia": "^2.0.11",
"quasar": "^2.6.0", "quasar": "^2.6.0",
"v-mask": "^2.3.0",
"vee-validate": "^4.12.2", "vee-validate": "^4.12.2",
"vue": "^3.0.0", "vue": "^3.0.0",
"vue-i18n": "^9.0.0",
"vue-image-zoomer": "^2.2.3", "vue-image-zoomer": "^2.2.3",
"vue-router": "^4.0.0", "vue-router": "^4.0.0",
"zod": "^3.22.4" "zod": "^3.22.4"
}, },
"devDependencies": { "devDependencies": {
"@babel/types": "^7.23.6",
"@faker-js/faker": "^8.3.1", "@faker-js/faker": "^8.3.1",
"@intlify/vite-plugin-vue-i18n": "^3.3.1",
"@quasar/app-vite": "^1.3.0", "@quasar/app-vite": "^1.3.0",
"@types/node": "^12.20.21",
"@typescript-eslint/eslint-plugin": "^5.10.0",
"@typescript-eslint/parser": "^5.10.0",
"autoprefixer": "^10.4.2", "autoprefixer": "^10.4.2",
"eslint": "^8.10.0", "eslint": "^8.10.0",
"eslint-config-prettier": "^8.1.0", "eslint-config-prettier": "^8.1.0",
"eslint-plugin-vue": "^9.0.0", "eslint-plugin-vue": "^9.0.0",
"json-server": "^0.17.4", "json-server": "^0.17.4",
"prettier": "^2.5.1", "postcss": "^8.4.14",
"typescript": "^4.5.4" "prettier": "^2.5.1"
}, },
"engines": { "engines": {
"node": "^18 || ^16 || ^14.19", "node": "^18 || ^16 || ^14.19",
@ -51,24 +48,6 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/@babel/helper-string-parser": {
"version": "7.23.4",
"resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz",
"integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==",
"dev": true,
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@babel/helper-validator-identifier": {
"version": "7.22.20",
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
"integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
"dev": true,
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@babel/parser": { "node_modules/@babel/parser": {
"version": "7.23.6", "version": "7.23.6",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.6.tgz", "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.6.tgz",
@ -80,20 +59,6 @@
"node": ">=6.0.0" "node": ">=6.0.0"
} }
}, },
"node_modules/@babel/types": {
"version": "7.23.6",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.6.tgz",
"integrity": "sha512-+uarb83brBzPKN38NX1MkB6vb6+mwvR6amUulqAE7ccQw1pEl+bCia9TbdG1lsnFP7lZySvUn37CHyXQdfTwzg==",
"dev": true,
"dependencies": {
"@babel/helper-string-parser": "^7.23.4",
"@babel/helper-validator-identifier": "^7.22.20",
"to-fast-properties": "^2.0.0"
},
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@eslint-community/eslint-utils": { "node_modules/@eslint-community/eslint-utils": {
"version": "4.4.0", "version": "4.4.0",
"resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@ -199,6 +164,101 @@
"integrity": "sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==", "integrity": "sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==",
"dev": true "dev": true
}, },
"node_modules/@intlify/bundle-utils": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/@intlify/bundle-utils/-/bundle-utils-2.2.2.tgz",
"integrity": "sha512-vngkvlIVV8ZJoyC5VqMvqJd2nvsx+qMN7pQjPiPjOrVndeiR7Dlue0k86Q8FsFUzyksW3HJZZi833ldxwbFzTA==",
"dev": true,
"dependencies": {
"@intlify/message-compiler": "^9.1.0",
"@intlify/shared": "^9.1.0",
"jsonc-eslint-parser": "^1.0.1",
"source-map": "^0.6.1",
"yaml-eslint-parser": "^0.3.2"
},
"engines": {
"node": ">= 12"
},
"peerDependenciesMeta": {
"petite-vue-i18n": {
"optional": true
},
"vue-i18n": {
"optional": true
}
}
},
"node_modules/@intlify/core-base": {
"version": "9.8.0",
"resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.8.0.tgz",
"integrity": "sha512-UxaSZVZ1DwqC/CltUZrWZNaWNhfmKtfyV4BJSt/Zt4Or/fZs1iFj0B+OekYk1+MRHfIOe3+x00uXGQI4PbO/9g==",
"dependencies": {
"@intlify/message-compiler": "9.8.0",
"@intlify/shared": "9.8.0"
},
"engines": {
"node": ">= 16"
},
"funding": {
"url": "https://github.com/sponsors/kazupon"
}
},
"node_modules/@intlify/message-compiler": {
"version": "9.8.0",
"resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.8.0.tgz",
"integrity": "sha512-McnYWhcoYmDJvssVu6QGR0shqlkJuL1HHdi5lK7fNqvQqRYaQ4lSLjYmZxwc8tRNMdIe9/KUKfyPxU9M6yCtNQ==",
"dependencies": {
"@intlify/shared": "9.8.0",
"source-map-js": "^1.0.2"
},
"engines": {
"node": ">= 16"
},
"funding": {
"url": "https://github.com/sponsors/kazupon"
}
},
"node_modules/@intlify/shared": {
"version": "9.8.0",
"resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.8.0.tgz",
"integrity": "sha512-TmgR0RCLjzrSo+W3wT0ALf9851iFMlVI9EYNGeWvZFUQTAJx0bvfsMlPdgVtV1tDNRiAfhkFsMKu6jtUY1ZLKQ==",
"engines": {
"node": ">= 16"
},
"funding": {
"url": "https://github.com/sponsors/kazupon"
}
},
"node_modules/@intlify/vite-plugin-vue-i18n": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/@intlify/vite-plugin-vue-i18n/-/vite-plugin-vue-i18n-3.4.0.tgz",
"integrity": "sha512-XXcZBgwJ+3FRu11c4ARoY9N00kElPii0/jNZ49qR045Ka7/YGCwb1Ku14BBlMSEHiHDSjLQknLwrJKSQGVZLyA==",
"dev": true,
"dependencies": {
"@intlify/bundle-utils": "^2.2.2",
"@intlify/shared": "^9.1.0",
"@rollup/pluginutils": "^4.1.0",
"debug": "^4.3.1",
"fast-glob": "^3.2.5",
"source-map": "0.6.1"
},
"engines": {
"node": ">= 12"
},
"peerDependencies": {
"petite-vue-i18n": "^9.1.0",
"vite": "^2.0.0",
"vue-i18n": "^9.1.0"
},
"peerDependenciesMeta": {
"petite-vue-i18n": {
"optional": true
},
"vue-i18n": {
"optional": true
}
}
},
"node_modules/@jridgewell/sourcemap-codec": { "node_modules/@jridgewell/sourcemap-codec": {
"version": "1.4.15", "version": "1.4.15",
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz", "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
@ -476,12 +536,6 @@
"integrity": "sha512-D0CFMMtydbJAegzOyHjtiKPLlvnm3iTZyZRSZoLq2mRhDdmLfIWOCYPfQJ4cu2erKghU++QvjcUjp/5h7hESpA==", "integrity": "sha512-D0CFMMtydbJAegzOyHjtiKPLlvnm3iTZyZRSZoLq2mRhDdmLfIWOCYPfQJ4cu2erKghU++QvjcUjp/5h7hESpA==",
"dev": true "dev": true
}, },
"node_modules/@types/json-schema": {
"version": "7.0.15",
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
"integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
"dev": true
},
"node_modules/@types/mime": { "node_modules/@types/mime": {
"version": "1.3.5", "version": "1.3.5",
"resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.5.tgz", "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.5.tgz",
@ -506,12 +560,6 @@
"integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==", "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==",
"dev": true "dev": true
}, },
"node_modules/@types/semver": {
"version": "7.5.6",
"resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.6.tgz",
"integrity": "sha512-dn1l8LaMea/IjDoHNd9J52uBbInB796CDffS6VdIxvqYCPSG0V0DzHp76GpaWnlhg88uYyPbXCDIowa86ybd5A==",
"dev": true
},
"node_modules/@types/send": { "node_modules/@types/send": {
"version": "0.17.4", "version": "0.17.4",
"resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.4.tgz", "resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.4.tgz",
@ -538,194 +586,6 @@
"resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz", "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
"integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==" "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="
}, },
"node_modules/@typescript-eslint/eslint-plugin": {
"version": "5.62.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz",
"integrity": "sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==",
"dev": true,
"dependencies": {
"@eslint-community/regexpp": "^4.4.0",
"@typescript-eslint/scope-manager": "5.62.0",
"@typescript-eslint/type-utils": "5.62.0",
"@typescript-eslint/utils": "5.62.0",
"debug": "^4.3.4",
"graphemer": "^1.4.0",
"ignore": "^5.2.0",
"natural-compare-lite": "^1.4.0",
"semver": "^7.3.7",
"tsutils": "^3.21.0"
},
"engines": {
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/typescript-eslint"
},
"peerDependencies": {
"@typescript-eslint/parser": "^5.0.0",
"eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
},
"peerDependenciesMeta": {
"typescript": {
"optional": true
}
}
},
"node_modules/@typescript-eslint/parser": {
"version": "5.62.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.62.0.tgz",
"integrity": "sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==",
"dev": true,
"dependencies": {
"@typescript-eslint/scope-manager": "5.62.0",
"@typescript-eslint/types": "5.62.0",
"@typescript-eslint/typescript-estree": "5.62.0",
"debug": "^4.3.4"
},
"engines": {
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/typescript-eslint"
},
"peerDependencies": {
"eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
},
"peerDependenciesMeta": {
"typescript": {
"optional": true
}
}
},
"node_modules/@typescript-eslint/scope-manager": {
"version": "5.62.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.62.0.tgz",
"integrity": "sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==",
"dev": true,
"dependencies": {
"@typescript-eslint/types": "5.62.0",
"@typescript-eslint/visitor-keys": "5.62.0"
},
"engines": {
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/typescript-eslint"
}
},
"node_modules/@typescript-eslint/type-utils": {
"version": "5.62.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.62.0.tgz",
"integrity": "sha512-xsSQreu+VnfbqQpW5vnCJdq1Z3Q0U31qiWmRhr98ONQmcp/yhiPJFPq8MXiJVLiksmOKSjIldZzkebzHuCGzew==",
"dev": true,
"dependencies": {
"@typescript-eslint/typescript-estree": "5.62.0",
"@typescript-eslint/utils": "5.62.0",
"debug": "^4.3.4",
"tsutils": "^3.21.0"
},
"engines": {
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/typescript-eslint"
},
"peerDependencies": {
"eslint": "*"
},
"peerDependenciesMeta": {
"typescript": {
"optional": true
}
}
},
"node_modules/@typescript-eslint/types": {
"version": "5.62.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.62.0.tgz",
"integrity": "sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==",
"dev": true,
"engines": {
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/typescript-eslint"
}
},
"node_modules/@typescript-eslint/typescript-estree": {
"version": "5.62.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.62.0.tgz",
"integrity": "sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==",
"dev": true,
"dependencies": {
"@typescript-eslint/types": "5.62.0",
"@typescript-eslint/visitor-keys": "5.62.0",
"debug": "^4.3.4",
"globby": "^11.1.0",
"is-glob": "^4.0.3",
"semver": "^7.3.7",
"tsutils": "^3.21.0"
},
"engines": {
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/typescript-eslint"
},
"peerDependenciesMeta": {
"typescript": {
"optional": true
}
}
},
"node_modules/@typescript-eslint/utils": {
"version": "5.62.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.62.0.tgz",
"integrity": "sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==",
"dev": true,
"dependencies": {
"@eslint-community/eslint-utils": "^4.2.0",
"@types/json-schema": "^7.0.9",
"@types/semver": "^7.3.12",
"@typescript-eslint/scope-manager": "5.62.0",
"@typescript-eslint/types": "5.62.0",
"@typescript-eslint/typescript-estree": "5.62.0",
"eslint-scope": "^5.1.1",
"semver": "^7.3.7"
},
"engines": {
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/typescript-eslint"
},
"peerDependencies": {
"eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
}
},
"node_modules/@typescript-eslint/visitor-keys": {
"version": "5.62.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.62.0.tgz",
"integrity": "sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==",
"dev": true,
"dependencies": {
"@typescript-eslint/types": "5.62.0",
"eslint-visitor-keys": "^3.3.0"
},
"engines": {
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/typescript-eslint"
}
},
"node_modules/@ungap/structured-clone": { "node_modules/@ungap/structured-clone": {
"version": "1.2.0", "version": "1.2.0",
"resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz", "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
@ -1134,15 +994,6 @@
"integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==", "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
"dev": true "dev": true
}, },
"node_modules/array-union": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
"integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
"dev": true,
"engines": {
"node": ">=8"
}
},
"node_modules/astral-regex": { "node_modules/astral-regex": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz", "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz",
@ -1960,18 +1811,6 @@
"npm": "1.2.8000 || >= 1.4.16" "npm": "1.2.8000 || >= 1.4.16"
} }
}, },
"node_modules/dir-glob": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
"integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
"dev": true,
"dependencies": {
"path-type": "^4.0.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/doctrine": { "node_modules/doctrine": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz", "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@ -2530,17 +2369,28 @@
"eslint": "^6.2.0 || ^7.0.0 || ^8.0.0" "eslint": "^6.2.0 || ^7.0.0 || ^8.0.0"
} }
}, },
"node_modules/eslint-scope": { "node_modules/eslint-utils": {
"version": "5.1.1", "version": "2.1.0",
"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz", "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.1.0.tgz",
"integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==", "integrity": "sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"esrecurse": "^4.3.0", "eslint-visitor-keys": "^1.1.0"
"estraverse": "^4.1.1"
}, },
"engines": { "engines": {
"node": ">=8.0.0" "node": ">=6"
},
"funding": {
"url": "https://github.com/sponsors/mysticatea"
}
},
"node_modules/eslint-utils/node_modules/eslint-visitor-keys": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
"integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
"dev": true,
"engines": {
"node": ">=4"
} }
}, },
"node_modules/eslint-visitor-keys": { "node_modules/eslint-visitor-keys": {
@ -2651,15 +2501,6 @@
"node": ">=4.0" "node": ">=4.0"
} }
}, },
"node_modules/estraverse": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
"integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
"dev": true,
"engines": {
"node": ">=4.0"
}
},
"node_modules/estree-walker": { "node_modules/estree-walker": {
"version": "2.0.2", "version": "2.0.2",
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
@ -3163,26 +3004,6 @@
"url": "https://github.com/sponsors/sindresorhus" "url": "https://github.com/sponsors/sindresorhus"
} }
}, },
"node_modules/globby": {
"version": "11.1.0",
"resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
"integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
"dev": true,
"dependencies": {
"array-union": "^2.1.0",
"dir-glob": "^3.0.1",
"fast-glob": "^3.2.9",
"ignore": "^5.2.0",
"merge2": "^1.4.1",
"slash": "^3.0.0"
},
"engines": {
"node": ">=10"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/gopd": { "node_modules/gopd": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz", "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
@ -3691,6 +3512,66 @@
"integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==", "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
"dev": true "dev": true
}, },
"node_modules/jsonc-eslint-parser": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/jsonc-eslint-parser/-/jsonc-eslint-parser-1.4.1.tgz",
"integrity": "sha512-hXBrvsR1rdjmB2kQmUjf1rEIa+TqHBGMge8pwi++C+Si1ad7EjZrJcpgwym+QGK/pqTx+K7keFAtLlVNdLRJOg==",
"dev": true,
"dependencies": {
"acorn": "^7.4.1",
"eslint-utils": "^2.1.0",
"eslint-visitor-keys": "^1.3.0",
"espree": "^6.0.0",
"semver": "^6.3.0"
},
"engines": {
"node": ">=8.10.0"
}
},
"node_modules/jsonc-eslint-parser/node_modules/acorn": {
"version": "7.4.1",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
"integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
"dev": true,
"bin": {
"acorn": "bin/acorn"
},
"engines": {
"node": ">=0.4.0"
}
},
"node_modules/jsonc-eslint-parser/node_modules/eslint-visitor-keys": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
"integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
"dev": true,
"engines": {
"node": ">=4"
}
},
"node_modules/jsonc-eslint-parser/node_modules/espree": {
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/espree/-/espree-6.2.1.tgz",
"integrity": "sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==",
"dev": true,
"dependencies": {
"acorn": "^7.1.1",
"acorn-jsx": "^5.2.0",
"eslint-visitor-keys": "^1.1.0"
},
"engines": {
"node": ">=6.0.0"
}
},
"node_modules/jsonc-eslint-parser/node_modules/semver": {
"version": "6.3.1",
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
"dev": true,
"bin": {
"semver": "bin/semver.js"
}
},
"node_modules/jsonfile": { "node_modules/jsonfile": {
"version": "6.1.0", "version": "6.1.0",
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz", "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
@ -4124,12 +4005,6 @@
"integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==", "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
"dev": true "dev": true
}, },
"node_modules/natural-compare-lite": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz",
"integrity": "sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==",
"dev": true
},
"node_modules/negotiator": { "node_modules/negotiator": {
"version": "0.6.3", "version": "0.6.3",
"resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz", "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
@ -4412,15 +4287,6 @@
"integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==", "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==",
"dev": true "dev": true
}, },
"node_modules/path-type": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
"integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
"dev": true,
"engines": {
"node": ">=8"
}
},
"node_modules/picocolors": { "node_modules/picocolors": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@ -5158,15 +5024,6 @@
"integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==", "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
"dev": true "dev": true
}, },
"node_modules/slash": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
"integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
"dev": true,
"engines": {
"node": ">=8"
}
},
"node_modules/slice-ansi": { "node_modules/slice-ansi": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz", "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz",
@ -5397,15 +5254,6 @@
"node": ">=0.6.0" "node": ">=0.6.0"
} }
}, },
"node_modules/to-fast-properties": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
"integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
"dev": true,
"engines": {
"node": ">=4"
}
},
"node_modules/to-regex-range": { "node_modules/to-regex-range": {
"version": "5.0.1", "version": "5.0.1",
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@ -5433,27 +5281,6 @@
"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==", "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
"dev": true "dev": true
}, },
"node_modules/tsutils": {
"version": "3.21.0",
"resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
"integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
"dev": true,
"dependencies": {
"tslib": "^1.8.1"
},
"engines": {
"node": ">= 6"
},
"peerDependencies": {
"typescript": ">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta"
}
},
"node_modules/tsutils/node_modules/tslib": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
"dev": true
},
"node_modules/type-check": { "node_modules/type-check": {
"version": "0.4.0", "version": "0.4.0",
"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@ -5494,7 +5321,8 @@
"version": "4.9.5", "version": "4.9.5",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
"integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
"devOptional": true, "optional": true,
"peer": true,
"bin": { "bin": {
"tsc": "bin/tsc", "tsc": "bin/tsc",
"tsserver": "bin/tsserver" "tsserver": "bin/tsserver"
@ -5593,11 +5421,6 @@
"node": ">= 0.4.0" "node": ">= 0.4.0"
} }
}, },
"node_modules/v-mask": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/v-mask/-/v-mask-2.3.0.tgz",
"integrity": "sha512-ap7pTtCTvj25CqX4VYXqudCBd0+XvYyhiiLbzWQQR7AMQosJ2+DPu0a94P9stk0EGmGcmYxJaPkFkfjD8hquWQ=="
},
"node_modules/vary": { "node_modules/vary": {
"version": "1.1.2", "version": "1.1.2",
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@ -5725,6 +5548,25 @@
"node": ">=4.0" "node": ">=4.0"
} }
}, },
"node_modules/vue-i18n": {
"version": "9.8.0",
"resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.8.0.tgz",
"integrity": "sha512-Izho+6PYjejsTq2mzjcRdBZ5VLRQoSuuexvR8029h5CpN03FYqiqBrShMyf2I1DKkN6kw/xmujcbvC+4QybpsQ==",
"dependencies": {
"@intlify/core-base": "9.8.0",
"@intlify/shared": "9.8.0",
"@vue/devtools-api": "^6.5.0"
},
"engines": {
"node": ">= 16"
},
"funding": {
"url": "https://github.com/sponsors/kazupon"
},
"peerDependencies": {
"vue": "^3.0.0"
}
},
"node_modules/vue-image-zoomer": { "node_modules/vue-image-zoomer": {
"version": "2.2.3", "version": "2.2.3",
"resolved": "https://registry.npmjs.org/vue-image-zoomer/-/vue-image-zoomer-2.2.3.tgz", "resolved": "https://registry.npmjs.org/vue-image-zoomer/-/vue-image-zoomer-2.2.3.tgz",
@ -5835,6 +5677,35 @@
"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
"dev": true "dev": true
}, },
"node_modules/yaml": {
"version": "1.10.2",
"resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
"integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
"dev": true,
"engines": {
"node": ">= 6"
}
},
"node_modules/yaml-eslint-parser": {
"version": "0.3.2",
"resolved": "https://registry.npmjs.org/yaml-eslint-parser/-/yaml-eslint-parser-0.3.2.tgz",
"integrity": "sha512-32kYO6kJUuZzqte82t4M/gB6/+11WAuHiEnK7FreMo20xsCKPeFH5tDBU7iWxR7zeJpNnMXfJyXwne48D0hGrg==",
"dev": true,
"dependencies": {
"eslint-visitor-keys": "^1.3.0",
"lodash": "^4.17.20",
"yaml": "^1.10.0"
}
},
"node_modules/yaml-eslint-parser/node_modules/eslint-visitor-keys": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
"integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
"dev": true,
"engines": {
"node": ">=4"
}
},
"node_modules/yargs": { "node_modules/yargs": {
"version": "17.7.2", "version": "17.7.2",
"resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz", "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",

40
package.json
View File

@ -6,42 +6,38 @@
"author": "user", "author": "user",
"private": true, "private": true,
"scripts": { "scripts": {
"lint": "eslint --ext .js,.ts,.vue ./", "lint": "eslint --ext .js,.vue ./",
"format": "prettier --write \"**/*.{js,ts,vue,scss,html,md,json}\" --ignore-path .gitignore", "format": "prettier --write \"**/*.{js,vue,scss,html,md,json}\" --ignore-path .gitignore",
"dev": "quasar dev -m ssr", "dev": "quasar dev -m ssr",
"backend": "json-server -p 5000 -d 3000 -w src/services/json-server/db.json",
"build": "quasar build -m ssr", "build": "quasar build -m ssr",
"start:build": "npm run build && cd dist/ssr && npm i && npm run start", "start:build": "npm run build && cd dist/ssr && npm i && npm run start",
"typecheck": "tsc --project tsconfig.json --noEmit" "backend": "json-server -p 5000 -d 600 -w src/services/json-server/db.json"
}, },
"dependencies": { "dependencies": {
"@quasar/extras": "^1.16.4",
"@vee-validate/zod": "^4.12.2", "@vee-validate/zod": "^4.12.2",
"@vueuse/core": "^10.7.0", "@vueuse/core": "^10.7.0",
"axios": "^1.2.1",
"pinia": "^2.0.11",
"quasar": "^2.6.0",
"v-mask": "^2.3.0",
"vee-validate": "^4.12.2", "vee-validate": "^4.12.2",
"vue": "^3.0.0",
"vue-image-zoomer": "^2.2.3", "vue-image-zoomer": "^2.2.3",
"vue-router": "^4.0.0", "zod": "^3.22.4",
"zod": "^3.22.4" "axios": "^1.2.1",
"vue-i18n": "^9.0.0",
"pinia": "^2.0.11",
"@quasar/extras": "^1.16.4",
"quasar": "^2.6.0",
"vue": "^3.0.0",
"vue-router": "^4.0.0"
}, },
"devDependencies": { "devDependencies": {
"@babel/types": "^7.23.6",
"@faker-js/faker": "^8.3.1", "@faker-js/faker": "^8.3.1",
"@quasar/app-vite": "^1.3.0",
"@types/node": "^12.20.21",
"@typescript-eslint/eslint-plugin": "^5.10.0",
"@typescript-eslint/parser": "^5.10.0",
"autoprefixer": "^10.4.2",
"eslint": "^8.10.0",
"eslint-config-prettier": "^8.1.0",
"eslint-plugin-vue": "^9.0.0",
"json-server": "^0.17.4", "json-server": "^0.17.4",
"eslint": "^8.10.0",
"eslint-plugin-vue": "^9.0.0",
"eslint-config-prettier": "^8.1.0",
"prettier": "^2.5.1", "prettier": "^2.5.1",
"typescript": "^4.5.4" "@intlify/vite-plugin-vue-i18n": "^3.3.1",
"@quasar/app-vite": "^1.3.0",
"autoprefixer": "^10.4.2",
"postcss": "^8.4.14"
}, },
"engines": { "engines": {
"node": "^18 || ^16 || ^14.19", "node": "^18 || ^16 || ^14.19",

10
postcss.config.cjs
View File

@ -13,9 +13,9 @@ module.exports = {
'last 4 Android versions', 'last 4 Android versions',
'last 4 ChromeAndroid versions', 'last 4 ChromeAndroid versions',
'last 4 FirefoxAndroid versions', 'last 4 FirefoxAndroid versions',
'last 4 iOS versions' 'last 4 iOS versions',
] ],
}) }),
// https://github.com/elchininet/postcss-rtlcss // https://github.com/elchininet/postcss-rtlcss
// If you want to support RTL css, then // If you want to support RTL css, then
@ -23,5 +23,5 @@ module.exports = {
// 2. optionally set quasar.config.js > framework > lang to an RTL language // 2. optionally set quasar.config.js > framework > lang to an RTL language
// 3. uncomment the following line: // 3. uncomment the following line:
// require('postcss-rtlcss') // require('postcss-rtlcss')
] ],
} };

BIN
public/assets/empty-img.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

69
quasar.config.js
View File

@ -8,7 +8,8 @@
// Configuration for your app // Configuration for your app
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js
const { configure } = require('quasar/wrappers'); const { configure } = require("quasar/wrappers");
const path = require("path");
module.exports = configure(function (/* ctx */) { module.exports = configure(function (/* ctx */) {
return { return {
@ -27,10 +28,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-vite/boot-files // https://v2.quasar.dev/quasar-cli-vite/boot-files
boot: ['axios', { server: false, path: 'brand-colors' }], boot: ["i18n", "axios"],
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
css: ['app.scss'], css: ["app.scss"],
// https://github.com/quasarframework/quasar/tree/dev/extras // https://github.com/quasarframework/quasar/tree/dev/extras
extras: [ extras: [
@ -42,18 +43,18 @@ module.exports = configure(function (/* ctx */) {
// 'line-awesome', // 'line-awesome',
// 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both! // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
'roboto-font', // optional, you are not bound to it "roboto-font", // optional, you are not bound to it
'material-icons', // optional, you are not bound to it "material-icons", // optional, you are not bound to it
], ],
// Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#build // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#build
build: { build: {
target: { target: {
browser: ['es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1'], browser: ["es2019", "edge88", "firefox78", "chrome87", "safari13.1"],
node: 'node16', node: "node16",
}, },
vueRouterMode: 'hash', // available values: 'hash', 'history' vueRouterMode: "hash", // available values: 'hash', 'history'
// vueRouterBase, // vueRouterBase,
// vueDevtools, // vueDevtools,
// vueOptionsAPI: false, // vueOptionsAPI: false,
@ -70,11 +71,31 @@ module.exports = configure(function (/* ctx */) {
// distDir // distDir
// extendViteConf (viteConf) {}, // extendViteConf (viteConf) {},
// viteVuePluginOptions: {}, viteVuePluginOptions: {
template: {
compilerOptions: {
isCustomElement: (tag) =>
["swiper-slide", "swiper-container"].includes(tag),
},
},
},
// vitePlugins: [ vitePlugins: [
// [ 'package-name', { ..options.. } ] [
// ] "@intlify/vite-plugin-vue-i18n",
{
// if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false`
// compositionOnly: false,
// if you want to use named tokens in your Vue I18n messages, such as 'Hello {name}',
// you need to set `runtimeOnly: false`
// runtimeOnly: false,
// you need to set i18n resource including paths !
include: path.resolve(__dirname, "./src/i18n/**"),
},
],
],
}, },
// Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#devServer // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#devServer
@ -85,13 +106,7 @@ module.exports = configure(function (/* ctx */) {
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#framework // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#framework
framework: { framework: {
config: { config: {},
loading: {
backgroundColor: 'tomato',
message: 'loading page',
customClass: 'loader',
},
},
// iconSet: 'material-icons', // Quasar icon set // iconSet: 'material-icons', // Quasar icon set
// lang: 'en-US', // Quasar language pack // lang: 'en-US', // Quasar language pack
@ -104,7 +119,7 @@ module.exports = configure(function (/* ctx */) {
// directives: [], // directives: [],
// Quasar plugins // Quasar plugins
plugins: ['Meta', 'Loading'], plugins: ["Meta", "Loading"],
}, },
// animations: 'all', // --- includes all animations // animations: 'all', // --- includes all animations
@ -140,16 +155,16 @@ module.exports = configure(function (/* ctx */) {
// (gets superseded if process.env.PORT is specified at runtime) // (gets superseded if process.env.PORT is specified at runtime)
middlewares: [ middlewares: [
'render', // keep this as last one "render", // keep this as last one
], ],
}, },
// https://v2.quasar.dev/quasar-cli-vite/developing-pwa/configuring-pwa // https://v2.quasar.dev/quasar-cli-vite/developing-pwa/configuring-pwa
pwa: { pwa: {
workboxMode: 'generateSW', // or 'injectManifest' workboxMode: "generateSW", // or 'injectManifest'
injectPwaMetaTags: true, injectPwaMetaTags: true,
swFilename: 'sw.js', swFilename: "sw.js",
manifestFilename: 'manifest.json', manifestFilename: "manifest.json",
useCredentialsForManifestTag: false, useCredentialsForManifestTag: false,
// useFilenameHashes: true, // useFilenameHashes: true,
// extendGenerateSWOptions (cfg) {} // extendGenerateSWOptions (cfg) {}
@ -175,7 +190,7 @@ module.exports = configure(function (/* ctx */) {
inspectPort: 5858, inspectPort: 5858,
bundler: 'packager', // 'packager' or 'builder' bundler: "packager", // 'packager' or 'builder'
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
@ -191,13 +206,13 @@ module.exports = configure(function (/* ctx */) {
builder: { builder: {
// https://www.electron.build/configuration/configuration // https://www.electron.build/configuration/configuration
appId: 'floranet', appId: "floranet",
}, },
}, },
// Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-browser-extensions/configuring-bex // Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-browser-extensions/configuring-bex
bex: { bex: {
contentScripts: ['my-content-script'], contentScripts: ["my-content-script"],
// extendBexScriptsConf (esbuildConf) {} // extendBexScriptsConf (esbuildConf) {}
// extendBexManifestJson (json) {} // extendBexManifestJson (json) {}

13
src-ssr/middlewares/render.ts → src-ssr/middlewares/render.js
View File

@ -1,5 +1,4 @@
import { RenderError } from '@quasar/app-vite'; import { ssrMiddleware } from "quasar/wrappers";
import { ssrMiddleware } from 'quasar/wrappers';
// This middleware should execute as last one // This middleware should execute as last one
// since it captures everything and tries to // since it captures everything and tries to
@ -8,15 +7,15 @@ import { ssrMiddleware } from 'quasar/wrappers';
export default ssrMiddleware(({ app, resolve, render, serve }) => { export default ssrMiddleware(({ app, resolve, render, serve }) => {
// we capture any other Express route and hand it // we capture any other Express route and hand it
// over to Vue and Vue Router to render our page // over to Vue and Vue Router to render our page
app.get(resolve.urlPath('*'), (req, res) => { app.get(resolve.urlPath("*"), (req, res) => {
res.setHeader('Content-Type', 'text/html'); res.setHeader("Content-Type", "text/html");
render(/* the ssrContext: */ { req, res }) render(/* the ssrContext: */ { req, res })
.then((html) => { .then((html) => {
// now let's send the rendered html to the client // now let's send the rendered html to the client
res.send(html); res.send(html);
}) })
.catch((err: RenderError) => { .catch((err) => {
// oops, we had an error while rendering the page // oops, we had an error while rendering the page
// we were told to redirect to another URL // we were told to redirect to another URL
@ -31,7 +30,7 @@ export default ssrMiddleware(({ app, resolve, render, serve }) => {
// Should reach here only if no "catch-all" route // Should reach here only if no "catch-all" route
// is defined in /src/routes // is defined in /src/routes
res.status(404).send('404 | Page Not Found'); res.status(404).send("404 | Page Not Found");
} else if (process.env.DEV) { } else if (process.env.DEV) {
// well, we treat any other code as error; // well, we treat any other code as error;
// if we're in dev mode, then we can use Quasar CLI // if we're in dev mode, then we can use Quasar CLI
@ -48,7 +47,7 @@ export default ssrMiddleware(({ app, resolve, render, serve }) => {
// Render Error Page on production or // Render Error Page on production or
// create a route (/src/routes) for an error page and redirect to it // create a route (/src/routes) for an error page and redirect to it
res.status(500).send('500 | Internal Server Error'); res.status(500).send("500 | Internal Server Error");
if (process.env.DEBUGGING) { if (process.env.DEBUGGING) {
console.error(err.stack); console.error(err.stack);

12
src-ssr/server.ts → src-ssr/server.js
View File

@ -9,15 +9,15 @@
* Make sure to yarn add / npm install (in your project root) * Make sure to yarn add / npm install (in your project root)
* anything you import here (except for express and compression). * anything you import here (except for express and compression).
*/ */
import express from 'express'; import compression from "compression";
import compression from 'compression'; import express from "express";
import { import {
ssrClose, ssrClose,
ssrCreate, ssrCreate,
ssrListen, ssrListen,
ssrRenderPreloadTag, ssrRenderPreloadTag,
ssrServeStaticContent, ssrServeStaticContent,
} from 'quasar/wrappers'; } from "quasar/wrappers";
/** /**
* Create your webserver and return its instance. * Create your webserver and return its instance.
@ -31,7 +31,7 @@ export const create = ssrCreate((/* { ... } */) => {
// attackers can use this header to detect apps running Express // attackers can use this header to detect apps running Express
// and then launch specifically-targeted attacks // and then launch specifically-targeted attacks
app.disable('x-powered-by'); app.disable("x-powered-by");
// place here any middlewares that // place here any middlewares that
// absolutely need to run before anything else // absolutely need to run before anything else
@ -57,7 +57,7 @@ export const listen = ssrListen(async ({ app, port, isReady }) => {
await isReady(); await isReady();
return app.listen(port, () => { return app.listen(port, () => {
if (process.env.PROD) { if (process.env.PROD) {
console.log('Server listening at port ' + port); console.log("Server listening at port " + port);
} }
}); });
}); });
@ -130,5 +130,5 @@ export const renderPreloadTag = ssrRenderPreloadTag((file) => {
return `<link rel="preload" href="${file}" as="image" type="image/png">`; return `<link rel="preload" href="${file}" as="image" type="image/png">`;
} }
return ''; return "";
}); });

2
src/App.vue
View File

@ -2,7 +2,7 @@
<router-view /> <router-view />
</template> </template>
<script lang="ts"> <script lang="js">
jsolis marked this conversation as resolved
pablone commented 2024-01-04 10:39:55 +00:00
Review
Copy Link

no es necesario especificar el js

no es necesario especificar el js
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
export default defineComponent({ export default defineComponent({

BIN
src/assets/empty-img.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

13
src/boot/axios.ts → src/boot/axios.js
View File

@ -1,12 +1,5 @@
import { boot } from 'quasar/wrappers'; import axios from "axios";
import axios, { AxiosInstance } from 'axios'; import { boot } from "quasar/wrappers";
declare module '@vue/runtime-core' {
interface ComponentCustomProperties {
$axios: AxiosInstance;
$api: AxiosInstance;
}
}
// 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;
@ -14,7 +7,7 @@ declare module '@vue/runtime-core' {
// 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: "http://localhost:5000/" });
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

6
src/boot/brand-colors.ts
View File

@ -1,6 +0,0 @@
import { setCssVar } from 'quasar';
import { boot } from 'quasar/wrappers';
export default boot(() => {
setCssVar('primary-light', '#cdebd2');
});

14
src/boot/i18n.js Normal file
View File

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

6
src/components/@inputs/Calendar.vue
View File

@ -46,7 +46,7 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="js">
import { toTypedSchema } from '@vee-validate/zod'; import { toTypedSchema } from '@vee-validate/zod';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { useFormStore } from 'src/stores/forms'; import { useFormStore } from 'src/stores/forms';
@ -77,7 +77,7 @@ export default defineComponent({
}); });
const [calendar, calendarAttrs] = defineField('date'); const [calendar, calendarAttrs] = defineField('date');
const onBlur = () => { const onBlur = () => {
availability.value.date = calendar.value as string; availability.value.date = calendar.value;
}; };
return { return {
@ -90,7 +90,7 @@ export default defineComponent({
updateProxy() { updateProxy() {
proxyDate.value = availability.value.date; proxyDate.value = availability.value.date;
}, },
optionsValidDates(date: string) { optionsValidDates(date) {
return date >= fullCurrentDate /* && date <= '2019/02/15' */; return date >= fullCurrentDate /* && date <= '2019/02/15' */;
}, },
save() { save() {

4
src/components/@inputs/PostalCode.vue
View File

@ -22,7 +22,7 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="js">
import { toTypedSchema } from '@vee-validate/zod'; import { toTypedSchema } from '@vee-validate/zod';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { useFormStore } from 'src/stores/forms'; import { useFormStore } from 'src/stores/forms';
@ -48,7 +48,7 @@ export default defineComponent({
}); });
const [postalCode, postalCodeAttrs] = defineField('postalCode'); const [postalCode, postalCodeAttrs] = defineField('postalCode');
const onBlur = () => { const onBlur = () => {
availability.value.postalCode = postalCode.value as string; availability.value.postalCode = postalCode.value ;
}; };
return { return {

2
src/components/@inputs/PriceRange.vue
View File

@ -24,7 +24,7 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="js">
import { useRangePriceStore } from 'src/stores/rangePrice'; import { useRangePriceStore } from 'src/stores/rangePrice';
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';

6
src/components/@inputs/SortSelect.vue
View File

@ -34,9 +34,9 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="js">
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { Order, useFormStore } from 'src/stores/forms'; import { useFormStore } from 'src/stores/forms';
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
export default defineComponent({ export default defineComponent({
@ -46,7 +46,7 @@ export default defineComponent({
const formStore = useFormStore(); const formStore = useFormStore();
const { sortProductFilters } = storeToRefs(formStore); const { sortProductFilters } = storeToRefs(formStore);
function handleOrder(order: Order) { function handleOrder(order) {
sortProductFilters.value.order = order; sortProductFilters.value.order = order;
sortProductFilters.value.isOpenOrderFilter = false; sortProductFilters.value.isOpenOrderFilter = false;
} }

4
src/components/footer/FooterComponent.vue
View File

@ -67,7 +67,7 @@
</q-footer> </q-footer>
</template> </template>
<script> <script lang="js">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import IconArrowCircleRight from '../icons/IconArrowCircleRight.vue'; import IconArrowCircleRight from '../icons/IconArrowCircleRight.vue';
@ -113,7 +113,7 @@ a:hover {
position: relative; position: relative;
flex: 0 0 min(100%, 560px); flex: 0 0 min(100%, 560px);
&::after { &::after {
content: ''; content: "";
position: absolute; position: absolute;
width: 1px; width: 1px;
background-color: $white; background-color: $white;

2
src/components/header/HeaderPrimary.vue
View File

@ -23,7 +23,7 @@
</q-header> </q-header>
</template> </template>
<script lang="ts"> <script lang="js">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';

2
src/components/header/HeaderSecondary.vue
View File

@ -21,7 +21,7 @@
</q-header> </q-header>
</template> </template>
<script lang="ts"> <script lang="js">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import { useMobileStore } from 'src/stores/mobileNav'; import { useMobileStore } from 'src/stores/mobileNav';

2
src/components/header/NavLinks.vue
View File

@ -24,7 +24,7 @@
</nav> </nav>
</template> </template>
<script lang="ts"> <script lang="js">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
export default defineComponent({ export default defineComponent({

58
src/components/header/UserArea.vue
View File

@ -9,6 +9,9 @@
<RouterLink class="user-area-link user" to="/"><icon-user /></RouterLink> <RouterLink class="user-area-link user" to="/"><icon-user /></RouterLink>
<RouterLink class="user-area-link cart" to="/checkout"> <RouterLink class="user-area-link cart" to="/checkout">
<icon-cart /> <icon-cart />
<span class="cart-count" :class="cartLength > 0 && 'active'">
{{ cartLength }}
</span>
</RouterLink> </RouterLink>
<q-btn <q-btn
@ -24,17 +27,20 @@
</div> </div>
</template> </template>
<script lang="ts"> <script>
import { defineComponent } from 'vue'; import { defineComponent } from "vue";
import { useMobileStore } from '../../stores/mobileNav';
import IconCart from '../icons/IconCart.vue'; import IconCart from "components/icons/IconCart.vue";
import IconHamburger from '../icons/IconHamburger.vue'; import IconHamburger from "components/icons/IconHamburger.vue";
import IconUser from '../icons/IconUser.vue'; import IconUser from "components/icons/IconUser.vue";
import DropdownGroup from '../quasar-components/dropdown/DropdownGroup.vue'; import DropdownGroup from "components/quasar-components/dropdown/DropdownGroup.vue";
import DropdownItem from '../quasar-components/dropdown/DropdownItem.vue'; import DropdownItem from "components/quasar-components/dropdown/DropdownItem.vue";
import { storeToRefs } from "pinia";
import { useCartStore } from "src/stores/cart";
import { useMobileStore } from "stores/mobileNav";
export default defineComponent({ export default defineComponent({
name: 'user-area', name: "user-area",
components: { components: {
IconCart, IconCart,
IconUser, IconUser,
@ -45,7 +51,9 @@ export default defineComponent({
setup() { setup() {
const mobileStore = useMobileStore(); const mobileStore = useMobileStore();
const { handleOpenMobileNav } = mobileStore; const { handleOpenMobileNav } = mobileStore;
return { handleOpenMobileNav }; const cartStore = useCartStore();
const { cartLength } = storeToRefs(cartStore);
return { handleOpenMobileNav, cartLength };
}, },
}); });
</script> </script>
@ -60,8 +68,34 @@ export default defineComponent({
color: $white; color: $white;
&.user, &.user,
&.cart { &.cart {
width: 16px; display: inline-flex;
height: 16px; position: relative;
width: 20px;
height: 14px;
& .cart-count {
position: absolute;
top: -7px;
right: -6px;
width: 14px;
height: 14px;
display: grid;
place-items: center;
background-color: $primary-light;
color: $primary;
font-size: $font-10;
font-family: $font-questrial;
border-radius: 50%;
padding: 2px;
transition: 200ms ease-in;
transform: scale(0);
opacity: 0;
visibility: hidden;
&.active {
transform: scale(1);
opacity: 1;
visibility: visible;
}
}
} }
} }

19
src/components/icons/credit-flags/IconAny.vue
View File

@ -1,7 +1,20 @@
<template><svg width="29" height="19" viewBox="0 0 29 19" fill="none" xmlns="http://www.w3.org/2000/svg"> <template>
<svg
width="29"
height="19"
viewBox="0 0 29 19"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="29" height="19" rx="3" fill="#01326F" /> <rect width="29" height="19" rx="3" fill="#01326F" />
<path d="M17.1001 14.1905H11.748V4.81104H17.1001V14.1905Z" fill="#6C6BBD" /> <path d="M17.1001 14.1905H11.748V4.81104H17.1001V14.1905Z" fill="#6C6BBD" />
<path d="M12.0917 9.49997C12.0917 7.59731 13.0052 5.90247 14.4279 4.81025C13.3875 4.01156 12.0746 3.53485 10.6477 3.53485C7.26957 3.53485 4.53125 6.20549 4.53125 9.49997C4.53125 12.7945 7.26957 15.4651 10.6477 15.4651C12.0746 15.4651 13.3875 14.9884 14.4279 14.1897C13.0052 13.0975 12.0917 11.4026 12.0917 9.49997Z" fill="#0099DF"/> <path
<path d="M24.3189 9.49997C24.3189 12.7945 21.5806 15.4651 18.2025 15.4651C16.7756 15.4651 15.4626 14.9884 14.4219 14.1897C15.8449 13.0975 16.7585 11.4026 16.7585 9.49997C16.7585 7.59731 15.8449 5.90247 14.4219 4.81025C15.4626 4.01156 16.7756 3.53485 18.2025 3.53485C21.5806 3.53485 24.3189 6.20549 24.3189 9.49997Z" fill="#EB001B"/> d="M12.0917 9.49997C12.0917 7.59731 13.0052 5.90247 14.4279 4.81025C13.3875 4.01156 12.0746 3.53485 10.6477 3.53485C7.26957 3.53485 4.53125 6.20549 4.53125 9.49997C4.53125 12.7945 7.26957 15.4651 10.6477 15.4651C12.0746 15.4651 13.3875 14.9884 14.4279 14.1897C13.0052 13.0975 12.0917 11.4026 12.0917 9.49997Z"
fill="#0099DF"
/>
<path
d="M24.3189 9.49997C24.3189 12.7945 21.5806 15.4651 18.2025 15.4651C16.7756 15.4651 15.4626 14.9884 14.4219 14.1897C15.8449 13.0975 16.7585 11.4026 16.7585 9.49997C16.7585 7.59731 15.8449 5.90247 14.4219 4.81025C15.4626 4.01156 16.7756 3.53485 18.2025 3.53485C21.5806 3.53485 24.3189 6.20549 24.3189 9.49997Z"
fill="#EB001B"
/>
</svg> </svg>
</template> </template>

54
src/components/icons/credit-flags/IconExprex.vue
View File

@ -1,54 +0,0 @@
<template>
<svg
width="29"
height="19"
viewBox="0 0 29 19"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_79_1742)">
<rect width="29" height="19" rx="3" fill="#1D71B9" />
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M17.4941 15.4503V9.1377L29.0158 9.14802V10.8917L27.684 12.2791L29.0158 13.6799V15.4603H26.8897L25.7598 14.2445L24.6377 15.4652L17.4941 15.4503Z"
fill="white"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M18.2637 14.7579V9.83228H22.5468V10.967H19.6508V11.7373H22.4778V12.8533H19.6508V13.6098H22.5468V14.7579H18.2637Z"
fill="#1D71B9"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M22.5254 14.7578L24.895 12.2923L22.5254 9.83252H24.3594L25.8076 11.3935L27.2598 9.83252H29.0154V9.87113L26.696 12.2923L29.0154 14.6882V14.7578H27.2422L25.7684 13.1811L24.3096 14.7578H22.5254Z"
fill="#1D71B9"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M18.0319 3.53491H20.8092L21.7846 5.69494V3.53491H25.2135L25.8047 5.15321L26.3979 3.53491H29.016V9.84716H15.1797L18.0319 3.53491Z"
fill="white"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M18.5578 4.2207L16.3164 9.14212H17.8536L18.2763 8.15654H20.5674L20.9901 9.14212H22.5653L20.3334 4.2207H18.5578ZM18.7503 7.05206L19.4222 5.48537L20.0938 7.05206H18.7503Z"
fill="#1D71B9"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M22.5449 9.14139V4.21997L24.7055 4.22723L25.8174 7.2528L26.9367 4.21997H29.0161V9.14139L27.6781 9.15286V5.77213L26.4149 9.14139H25.1932L23.9038 5.76066V9.14139H22.5449Z"
fill="#1D71B9"
/>
</g>
<defs>
<clipPath id="clip0_79_1742">
<rect width="29" height="19" rx="3" fill="white" />
</clipPath>
</defs>
</svg>
</template>

7
src/components/icons/svg/example.svg Normal file
View File

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" width="23" height="22" viewBox="0 0 23 22" fill="none">
<ellipse cx="11.5" cy="11" rx="11.5" ry="11" transform="rotate(-180 11.5 11)" fill="#117564" />
<path d="M13.6904 16.2383L9.61959 12.1516C8.84245 11.3714 8.84217 10.1098 9.61895 9.32931L13.6904 5.23828"
fill="#117564" />
<path d="M13.6904 16.2383L9.61959 12.1516C8.84245 11.3714 8.84217 10.1098 9.61895 9.32931L13.6904 5.23828"
stroke="#CDEBD2" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 530 B

87
src/components/quasar-components/carousel/HorizontalCarousel.vue
View File

@ -1,87 +0,0 @@
<template>
<Swiper
:space-between="screenWidth > 1024 ? 56 : 25"
:slides-per-view="'auto'"
:centered-slides="true"
:modules="modules"
:grabCursor="true"
:loop="true"
:pagination="{
dynamicBullets: true,
clickable: true,
}"
:keyboard="{
enabled: true,
}"
@swiper="onSwiper"
>
<slot></slot>
</Swiper>
</template>
<script lang="ts">
import { storeToRefs } from 'pinia';
import { Autoplay, Keyboard, Navigation, Pagination } from 'swiper/modules';
import type { Swiper as SwiperTypes } from 'swiper/types';
import { Swiper } from 'swiper/vue';
import { defineComponent } from 'vue';
import { useMobileStore } from 'src/stores/mobileNav';
import { useSwiperStore } from 'src/stores/swiper';
export default defineComponent({
components: {
Swiper,
},
setup() {
const swiperStore = useSwiperStore();
const { swiperCtx } = storeToRefs(swiperStore);
function onSwiper(swiper: SwiperTypes) {
swiperCtx.value = swiper;
}
const mobileStore = useMobileStore();
const { screenWidth } = storeToRefs(mobileStore);
return {
onSwiper,
screenWidth,
modules: [Navigation, Pagination, Keyboard, Autoplay],
};
},
});
</script>
<style lang="scss">
.swiper {
height: 100%;
width: 100%;
& .swiper-wrapper .swiper-slide {
width: 360px !important;
}
& .swiper-button-prev,
& .swiper-button-next {
background-repeat: no-repeat;
background-position: center;
&::after,
&::before {
display: none;
}
}
& .swiper-button-prev {
background-image: url('../../icons/svg/ArrowCircleFilledLeft.svg');
}
& .swiper-button-next {
background-image: url('../../icons/svg/ArrowCircleFilledRight.svg');
}
& .swiper-pagination {
& .swiper-pagination-bullet.swiper-pagination-bullet-active {
background-color: $primary;
}
}
}
</style>

2
src/components/quasar-components/carousel/ProductCarousel.vue
View File

@ -24,7 +24,7 @@
</q-carousel> </q-carousel>
</template> </template>
<script lang="ts"> <script lang="js">
import { defineComponent, ref } from 'vue'; import { defineComponent, ref } from 'vue';
export default defineComponent({ export default defineComponent({

8
src/components/quasar-components/carousel/VerticalCarouselImgs.vue
View File

@ -54,9 +54,9 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="js">
import { useIntersectionObserver } from '@vueuse/core'; import { useIntersectionObserver } from '@vueuse/core';
import { PropType, defineComponent, ref } from 'vue'; import { defineComponent, ref } from 'vue';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import Calendar from 'src/components/@inputs/Calendar.vue'; import Calendar from 'src/components/@inputs/Calendar.vue';
@ -68,7 +68,7 @@ export default defineComponent({
name: 'vertical-carousel-imgs', name: 'vertical-carousel-imgs',
props: { props: {
imgsArr: { imgsArr: {
type: Array as PropType<string[]>, type: Array,
default: () => [''], default: () => [''],
}, },
}, },
@ -144,7 +144,7 @@ export default defineComponent({
flex: 1; flex: 1;
position: relative; position: relative;
&:first-child::after { &:first-child::after {
content: ''; content: "";
position: absolute; position: absolute;
width: 1px; width: 1px;
opacity: 0.2; opacity: 0.2;

4
src/components/quasar-components/dropdown/DropdownGroup.vue
View File

@ -6,7 +6,7 @@
</q-btn-dropdown> </q-btn-dropdown>
</template> </template>
<script lang="ts"> <script lang="js">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
export default defineComponent({ export default defineComponent({
@ -25,7 +25,7 @@ export default defineComponent({
.q-btn { .q-btn {
text-transform: initial; text-transform: initial;
&::before { &::before {
content: ''; content: "";
all: unset; all: unset;
} }
} }

4
src/components/quasar-components/dropdown/DropdownItem.vue
View File

@ -8,7 +8,7 @@
</q-item> </q-item>
</template> </template>
<script lang="ts"> <script lang="js">
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { useLanguageStore } from 'src/stores/language'; import { useLanguageStore } from 'src/stores/language';
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
@ -26,7 +26,7 @@ export default defineComponent({
const { lang } = storeToRefs(langStore); const { lang } = storeToRefs(langStore);
return { return {
onItemClick(currentLang: string) { onItemClick(currentLang) {
lang.value = currentLang; lang.value = currentLang;
}, },
}; };

2
src/components/sections/DudasSection.vue
View File

@ -21,7 +21,7 @@
</section> </section>
</template> </template>
<script lang="ts"> <script lang="js">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import IconChatRoundedFill from '../icons/IconChatRoundedFill.vue'; import IconChatRoundedFill from '../icons/IconChatRoundedFill.vue';
import Container from '../ui/Container.vue'; import Container from '../ui/Container.vue';

2
src/components/sections/InfoSection.vue
View File

@ -40,7 +40,7 @@
</section> </section>
</template> </template>
<script lang="ts"> <script lang="js">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import IconCarr from '../icons/IconCar.vue'; import IconCarr from '../icons/IconCar.vue';
import IconChatRoundedFill from '../icons/IconChatRoundedFill.vue'; import IconChatRoundedFill from '../icons/IconChatRoundedFill.vue';

2
src/components/sections/QuestionSection.vue
View File

@ -32,7 +32,7 @@
</section> </section>
</template> </template>
<script lang="ts"> <script lang="js">
import { defineComponent, ref } from 'vue'; import { defineComponent, ref } from 'vue';
import IconQuestion from '../icons/IconQuestion.vue'; import IconQuestion from '../icons/IconQuestion.vue';

2
src/components/sections/ReasonsSection.vue
View File

@ -84,7 +84,7 @@
</section> </section>
</template> </template>
<script lang="ts"> <script lang="js">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import IconChatRoundedFill from '../icons/IconChatRoundedFill.vue'; import IconChatRoundedFill from '../icons/IconChatRoundedFill.vue';
import IconCheck from '../icons/IconCheck.vue'; import IconCheck from '../icons/IconCheck.vue';

112
src/components/swiper/Swiper.vue
View File

@ -1,4 +1,49 @@
<script> <template>
<q-btn
title="previous button"
class="swiper-btn prev"
color="primary"
size="sm"
@click="handlePrev"
round
flat
>
<IconArrowCircleFilledLeft />
</q-btn>
<swiper-container
class="swiper"
:space-between="screenWidth > 1024 ? 56 : 25"
:slides-per-view="'auto'"
:centered-slides="true"
:grabCursor="true"
:navigation="true"
:loop="true"
:pagination="{
dynamicBullets: true,
clickable: true,
}"
:keyboard="{
enabled: true,
}"
>
<slot></slot>
</swiper-container>
<q-btn
title="next button"
class="swiper-btn next"
color="primary"
size="sm"
@click="handleNext"
round
flat
>
<IconArrowCircleFilledRight />
</q-btn>
</template>
<script lang="js">
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { defineComponent, onMounted, ref } from 'vue'; import { defineComponent, onMounted, ref } from 'vue';
@ -21,7 +66,8 @@ export default defineComponent({
onMounted(() => { onMounted(() => {
// console.log('Montado!'); // console.log('Montado!');
/*swiperContainer.value =
swiperContainer.value =
document.querySelector('swiper-container').shadowRoot; document.querySelector('swiper-container').shadowRoot;
prevSwiperBtn.value = swiperContainer.value.querySelector( prevSwiperBtn.value = swiperContainer.value.querySelector(
'.swiper-button-prev' '.swiper-button-prev'
@ -33,9 +79,21 @@ export default defineComponent({
nextSwiperBtn.value.style.display = swiperDisplay; nextSwiperBtn.value.style.display = swiperDisplay;
prevSwiperBtn.value.style.display = swiperDisplay; prevSwiperBtn.value.style.display = swiperDisplay;
nextBtn.value = document.querySelector('.swiper-btn.next'); nextBtn.value = document.querySelector('.swiper-btn.next');
prevBtn.value = document.querySelector('.swiper-btn.prev');*/ prevBtn.value = document.querySelector('.swiper-btn.prev');
}); });
/* onUpdated(() => {
jsolis marked this conversation as resolved
pablone commented 2024-01-04 11:07:14 +00:00
Review
Copy Link

código comentado se puede eliminar git no se olvida de el

código comentado se puede eliminar git no se olvida de el
console.log('Atualizado!');
console.groupCollapsed('%c Custom', 'color: tomato;');
console.log({ prevBtn: prevBtn.value, nextBtn: nextBtn.value });
console.groupEnd();
console.groupCollapsed('%c Swiper', 'color: hotpink;');
console.log(prevSwiperBtn.value);
console.groupEnd();
}); */
return { return {
screenWidth, screenWidth,
handlePrev() { handlePrev() {
@ -50,55 +108,13 @@ export default defineComponent({
}, },
}); });
</script> </script>
<template>
<q-btn
title="previous button"
class="swiper-btn prev"
color="primary"
size="sm"
@click="handlePrev"
round
flat
>
<IconArrowCircleFilledLeft />
</q-btn>
<!--<swiper-container
class="swiper"
:space-between="screenWidth > 1024 ? 56 : 25"
:slides-per-view="'auto'"
:centered-slides="true"
:grabCursor="true"
:navigation="true"
:loop="true"
:pagination="{
dynamicBullets: true,
clickable: true,
}"
:keyboard="{
enabled: true,
}"
>
<slot></slot>
</swiper-container>-->
<q-btn
title="next button"
class="swiper-btn next"
color="primary"
size="sm"
@click="handleNext"
round
flat
>
<IconArrowCircleFilledRight />
</q-btn>
</template>
<style lang="scss"> <style lang="scss">
.swiper { .swiper {
height: 100%; height: 100%;
width: 100%; width: 100%;
&::after { &::after {
content: ''; content: "";
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
@ -128,11 +144,11 @@ export default defineComponent({
} }
& .swiper-button-prev { & .swiper-button-prev {
background-image: url('../../icons/svg/ArrowCircleFilledLeft.svg'); background-image: url("../../icons/svg/ArrowCircleFilledLeft.svg");
} }
& .swiper-button-next { & .swiper-button-next {
background-image: url('../../icons/svg/ArrowCircleFilledRight.svg'); background-image: url("../../icons/svg/ArrowCircleFilledRight.svg");
} }
& .swiper-pagination { & .swiper-pagination {

2
src/components/ui/Button.vue
View File

@ -4,7 +4,7 @@
</button> </button>
</template> </template>
<script lang="ts"> <script lang="js">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
export default defineComponent({ export default defineComponent({

7
src/components/ui/Card.vue
View File

@ -36,11 +36,10 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="js">
import { PropType, defineComponent, ref } from 'vue'; import { defineComponent, ref } from 'vue';
import IconEyes from '../icons/IconEyes.vue'; import IconEyes from '../icons/IconEyes.vue';
type Size = 'sm-card' | 'md-card' | 'lg-card';
export default defineComponent({ export default defineComponent({
name: 'card-component', name: 'card-component',
@ -70,7 +69,7 @@ export default defineComponent({
default: false, default: false,
}, },
size: { size: {
type: String as PropType<Size>, type: String,
default: '', default: '',
}, },
alt: { alt: {

2
src/components/ui/Chat.vue
View File

@ -2,7 +2,7 @@
<q-btn flat @click="handleClick"><IconChat /></q-btn> <q-btn flat @click="handleClick"><IconChat /></q-btn>
</template> </template>
<script lang="ts"> <script lang="js">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import IconChat from '../icons/IconChat.vue'; import IconChat from '../icons/IconChat.vue';

6
src/components/ui/Container.vue
View File

@ -9,10 +9,10 @@
</template> </template>
<script> <script>
import { defineComponent } from 'vue'; import { defineComponent } from "vue";
export default defineComponent({ export default defineComponent({
name: 'container-element', name: "container-element",
props: { props: {
cardContainer: { cardContainer: {
type: Boolean, type: Boolean,
@ -24,7 +24,7 @@ export default defineComponent({
}, },
tag: { tag: {
type: String, type: String,
default: 'div', default: "div",
}, },
}, },
}); });

4
src/components/ui/MobileNav.vue
View File

@ -31,7 +31,7 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="js">
import { useMobileStore } from 'src/stores/mobileNav'; import { useMobileStore } from 'src/stores/mobileNav';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
@ -45,7 +45,7 @@ export default defineComponent({
const mobileStore = useMobileStore(); const mobileStore = useMobileStore();
const { isOpenNav } = storeToRefs(mobileStore); const { isOpenNav } = storeToRefs(mobileStore);
function setBodyStyle(overflow: 'hidden' | 'visible') { function setBodyStyle(overflow) {
document.body.style.overflow = overflow; document.body.style.overflow = overflow;
} }

9
src/components/ui/Modal.vue
View File

@ -55,8 +55,8 @@
</q-dialog> </q-dialog>
</template> </template>
<script lang="ts"> <script lang="js">
import { PropType, defineComponent } from 'vue'; import { defineComponent } from 'vue';
import { useModalStore } from 'src/stores/modalStore'; import { useModalStore } from 'src/stores/modalStore';
import Calendar from '../@inputs/Calendar.vue'; import Calendar from '../@inputs/Calendar.vue';
@ -65,7 +65,6 @@ import PriceRange from '../@inputs/PriceRange.vue';
import IconCloseModal from '../icons/IconCloseModal.vue'; import IconCloseModal from '../icons/IconCloseModal.vue';
import IconSearch from '../icons/IconSearch.vue'; import IconSearch from '../icons/IconSearch.vue';
type ModalModel = 'isOpenAvailability' | 'isOpenFilters';
export default defineComponent({ export default defineComponent({
name: 'modal-component', name: 'modal-component',
@ -78,7 +77,7 @@ export default defineComponent({
}, },
props: { props: {
modalItem: { modalItem: {
type: String as PropType<ModalModel>, type: String,
default: '', default: '',
}, },
}, },
@ -196,7 +195,7 @@ export default defineComponent({
position: relative; position: relative;
gap: 60px; gap: 60px;
&::after { &::after {
content: ''; content: "";
position: absolute; position: absolute;
width: 1px; width: 1px;
height: 100%; height: 100%;

53
src/components/ui/QuestionForm.vue
View File

@ -9,7 +9,7 @@
bg-color="white" bg-color="white"
label="Nombre" label="Nombre"
class="name" class="name"
standout outlined
/> />
<q-input <q-input
v-model="secondName" v-model="secondName"
@ -19,7 +19,7 @@
bg-color="white" bg-color="white"
label="Apellidos" label="Apellidos"
class="nickname" class="nickname"
standout outlined
/> />
<q-input <q-input
v-model="email" v-model="email"
@ -30,7 +30,7 @@
type="email" type="email"
label="Email" label="Email"
class="email" class="email"
standout outlined
/> />
<q-input <q-input
v-model="phone" v-model="phone"
@ -42,7 +42,7 @@
label="Teléfono" label="Teléfono"
class="telephone" class="telephone"
mask="(##) ##### ####" mask="(##) ##### ####"
standout outlined
/> />
<q-input <q-input
v-model="query" v-model="query"
@ -52,7 +52,7 @@
bg-color="white" bg-color="white"
label="Motivo de consulta" label="Motivo de consulta"
class="consult" class="consult"
standout outlined
/> />
<q-input <q-input
v-model="message" v-model="message"
@ -64,7 +64,7 @@
class="message" class="message"
type="textarea" type="textarea"
autogrow autogrow
standout outlined
/> />
<q-checkbox <q-checkbox
v-model="terms" v-model="terms"
@ -90,17 +90,17 @@
</form> </form>
</template> </template>
<script lang="ts"> <script>
import { useQuasar } from 'quasar'; import { useQuasar } from "quasar";
import { useFormStore } from 'src/stores/forms'; import { useFormStore } from "src/stores/forms";
import { useForm } from 'vee-validate'; import { useForm } from "vee-validate";
import { defineComponent } from 'vue'; import { defineComponent } from "vue";
import IconArrowRightOne from 'src/components/icons/IconArrowRightOne.vue'; import IconArrowRightOne from "src/components/icons/IconArrowRightOne.vue";
import { questionSchema } from 'src/utils/zod/schemas/questionSchema'; import { questionSchema } from "src/utils/zod/schemas/questionSchema";
export default defineComponent({ export default defineComponent({
name: 'QuestionForm', name: "QuestionForm",
components: { IconArrowRightOne }, components: { IconArrowRightOne },
setup() { setup() {
const $q = useQuasar(); const $q = useQuasar();
@ -113,13 +113,13 @@ export default defineComponent({
terms: false, terms: false,
}, },
}); });
const [firstName, firstNameAttrs] = defineField('name'); const [firstName, firstNameAttrs] = defineField("name");
const [secondName, secondNameAttrs] = defineField('surname'); const [secondName, secondNameAttrs] = defineField("surname");
const [email, emailAttrs] = defineField('email'); const [email, emailAttrs] = defineField("email");
const [phone, phoneAttrs] = defineField('phone'); const [phone, phoneAttrs] = defineField("phone");
const [query, queryAttrs] = defineField('query'); const [query, queryAttrs] = defineField("query");
const [message, messageAttrs] = defineField('message'); const [message, messageAttrs] = defineField("message");
const [terms, termsAttrs] = defineField('terms'); const [terms, termsAttrs] = defineField("terms");
const onSubmit = handleSubmit((values) => { const onSubmit = handleSubmit((values) => {
console.log(values); console.log(values);
@ -127,16 +127,11 @@ export default defineComponent({
handleReset(); handleReset();
if (!terms.value) { if (!terms.value) {
$q.notify({ $q.notify({
color: 'negative', color: "negative",
message: 'Primero tienes que aceptar la licencia y las condiciones', message: "Primero tienes que aceptar la licencia y las condiciones",
}); });
return; return;
} }
$q.notify({
icon: 'done',
color: 'positive',
message: 'Enviado',
});
}); });
return { return {
@ -189,7 +184,7 @@ export default defineComponent({
margin-bottom: 30px; margin-bottom: 30px;
color: #fff; color: #fff;
& div[role='alert'] { & div[role="alert"] {
color: #fff !important; color: #fff !important;
} }
} }

4
src/components/ui/SendBanner.vue
View File

@ -8,7 +8,7 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="js">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
export default defineComponent({ export default defineComponent({
@ -42,7 +42,7 @@ export default defineComponent({
position: relative; position: relative;
&::after { &::after {
content: ''; content: "";
position: absolute; position: absolute;
inset: 0; inset: 0;
background-color: $primary-dark; background-color: $primary-dark;

14
src/css/app.scss
View File

@ -1,11 +1,11 @@
// app global css in SCSS form // app global css in SCSS form
@import './pages/home.scss'; @import "./pages/home.scss";
@import './pages/categoria.scss'; @import "./pages/categoria.scss";
@import './pages/product.scss'; @import "./pages/product.scss";
@import './pages/checkout.scss'; @import "./pages/checkout.scss";
@import './pages/contacta.scss'; @import "./pages/contacta.scss";
@import './pages/faq.scss'; @import "./pages/faq.scss";
@import './components/calendar-postalcode.scss'; @import "./components/calendar-postalcode.scss";
:root { :root {
--swiper-theme-color: #117564; --swiper-theme-color: #117564;

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

@ -96,11 +96,11 @@ $text-normal-10: #24242410;
$grey-700: #f9f9f9; $grey-700: #f9f9f9;
//! Font family //! Font family
$font-lora: 'Lora', serif; $font-lora: "Lora", serif;
jsolis marked this conversation as resolved
pablone commented 2024-01-04 11:08:16 +00:00
Review
Copy Link

porque cambias las comillas?

porque cambias las comillas?
$font-roboto: 'Roboto', sans-serif; $font-roboto: "Roboto", sans-serif;
$font-mulish: 'Mulish', sans-serif; $font-mulish: "Mulish", sans-serif;
$font-questrial: 'Questrial', sans-serif; $font-questrial: "Questrial", sans-serif;
$font-montserrat: 'Montserrat', sans-serif; $font-montserrat: "Montserrat", sans-serif;
//! Price font //! Price font
$text-price-font: $font-questrial; $text-price-font: $font-questrial;

9
src/env.d.ts vendored
View File

@ -1,9 +0,0 @@
/* eslint-disable */
declare namespace NodeJS {
interface ProcessEnv {
NODE_ENV: string;
VUE_ROUTER_MODE: 'hash' | 'history' | 'abstract' | undefined;
VUE_ROUTER_BASE: string | undefined;
}
}

7
src/i18n/en-US/index.js Normal file
View File

@ -0,0 +1,7 @@
// This is just an example,
// so you can safely delete all default props below
export default {
failed: "Action failed",
success: "Action was successful",
};

5
src/i18n/index.js Normal file
View File

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

21
src/layouts/CategoryLayout.vue
View File

@ -15,20 +15,21 @@
<footer-component /> <footer-component />
</q-layout> </q-layout>
</template> </template>
<script lang="ts">
import { defineComponent } from 'vue';
import FooterComponent from 'src/components/footer/FooterComponent.vue'; <script lang="js">
import HeaderSecondary from 'src/components/header/HeaderSecondary.vue'; import { defineComponent } from "vue";
import QuestionSection from 'src/components/sections/QuestionSection.vue';
import ReasonsSection from 'src/components/sections/ReasonsSection.vue';
import MobileNav from 'src/components/ui/MobileNav.vue';
import { storeToRefs } from 'pinia'; import FooterComponent from "src/components/footer/FooterComponent.vue";
import { useMobileStore } from 'src/stores/mobileNav'; import HeaderSecondary from "src/components/header/HeaderSecondary.vue";
import QuestionSection from "src/components/sections/QuestionSection.vue";
import ReasonsSection from "src/components/sections/ReasonsSection.vue";
import MobileNav from "src/components/ui/MobileNav.vue";
import { storeToRefs } from "pinia";
import { useMobileStore } from "src/stores/mobileNav";
export default defineComponent({ export default defineComponent({
name: 'CategoryLayout', name: "CategoryLayout",
components: { components: {
HeaderSecondary, HeaderSecondary,
FooterComponent, FooterComponent,

2
src/layouts/CheckoutLayout.vue
View File

@ -17,7 +17,7 @@
</q-layout> </q-layout>
</template> </template>
<script lang="ts"> <script lang="js">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';

2
src/layouts/DefaultLayout.vue
View File

@ -15,7 +15,7 @@
</q-layout> </q-layout>
</template> </template>
<script lang="ts"> <script lang="js">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';

2
src/layouts/HomeLayout.vue
View File

@ -17,7 +17,7 @@
</q-layout> </q-layout>
</template> </template>
<script lang="ts"> <script lang="js">
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';

11
src/mock/cards.ts → src/mock/cards.js
View File

@ -1,4 +1,4 @@
import { fakerES } from '@faker-js/faker'; import { fakerES } from "@faker-js/faker";
export const cardMock = Array.from({ length: 8 }, (_, i) => ({ export const cardMock = Array.from({ length: 8 }, (_, i) => ({
id: i + 1, id: i + 1,
@ -13,21 +13,18 @@ export const cardMock = Array.from({ length: 8 }, (_, i) => ({
// value: '25,90', // value: '25,90',
})); }));
interface GenerateFlowersParams { export function generateFlowers({ length }) {
length: number;
}
export function generateFlowers({ length }: GenerateFlowersParams) {
const flowersMock = Array.from({ length }, (_, i) => ({ const flowersMock = Array.from({ length }, (_, i) => ({
id: i + 1, id: i + 1,
title: fakerES.commerce.productName(), title: fakerES.commerce.productName(),
description: fakerES.commerce.productDescription(), description: fakerES.commerce.productDescription(),
price: fakerES.commerce.price({ price: fakerES.commerce.price({
symbol: '€', symbol: "€",
min: 20, min: 20,
max: 200, max: 200,
dec: 0, dec: 0,
}), }),
sku: fakerES.commerce.isbn({ separator: '', variant: 13 }), sku: fakerES.commerce.isbn({ separator: "", variant: 13 }),
category: fakerES.commerce.productMaterial(), category: fakerES.commerce.productMaterial(),
images: Array.from({ length: fakerES.number.int({ min: 2, max: 6 }) }, () => images: Array.from({ length: fakerES.number.int({ min: 2, max: 6 }) }, () =>
fakerES.image.urlPicsumPhotos() fakerES.image.urlPicsumPhotos()

117
src/pages/CategoryPage.vue
View File

@ -4,7 +4,9 @@
<header class="products-section-header"> <header class="products-section-header">
<Container> <Container>
<div class="product-header-content"> <div class="product-header-content">
<h3 class="product-header-title subtitle">Ramos para obsequiar</h3> <h3 class="product-header-title subtitle">
{{ sortProductFilters.category }} para obsequiar
</h3>
<p class="product-header-paragraph"> <p class="product-header-paragraph">
Descripción SEO: Lorem ipsum dolor sit amet, consectetur Descripción SEO: Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et adipiscing elit, sed do eiusmod tempor incididunt ut labore et
@ -22,7 +24,7 @@
class="green-text" class="green-text"
> >
25 Julio en 25 Julio en
{{ availability.postalCode.replace('-', '') }}</span {{ availability.postalCode.replace("-", "") }}</span
> >
</p> </p>
@ -55,9 +57,9 @@
<div class="order-filters"> <div class="order-filters">
<p class="filter-paragraph"> <p class="filter-paragraph">
Ordenar por: Ordenar por:
<span class="green-text">{{ <span class="green-text">
orderText[sortProductFilters.order as Order] || '' {{ orderText[sortProductFilters.order] || "" }}
}}</span> </span>
</p> </p>
<SortSelect v-if="sortProductFilters.isOpenOrderFilter" /> <SortSelect v-if="sortProductFilters.isOpenOrderFilter" />
@ -107,77 +109,62 @@
</q-page> </q-page>
</template> </template>
<script lang="ts"> <script>
import { fakerES } from '@faker-js/faker'; import { fakerES } from "@faker-js/faker";
import { storeToRefs } from 'pinia'; import { storeToRefs } from "pinia";
import { import {
defineAsyncComponent, defineAsyncComponent,
defineComponent, defineComponent,
onMounted,
onUpdated, onUpdated,
reactive, reactive,
ref, ref,
} from 'vue'; watch,
import { useRoute } from 'vue-router'; } from "vue";
import { useRoute } from "vue-router";
import SortSelect from 'src/components/@inputs/SortSelect.vue'; import SortSelect from "src/components/@inputs/SortSelect.vue";
import IconArrowCircleFilledRight from 'src/components/icons/IconArrowCircleFilledRight.vue'; import IconArrowCircleFilledRight from "src/components/icons/IconArrowCircleFilledRight.vue";
import IconArrowDownWhite from 'src/components/icons/IconArrowDownWhite.vue'; import IconArrowDownWhite from "src/components/icons/IconArrowDownWhite.vue";
import IconFilter from 'src/components/icons/IconFilter.vue'; import IconFilter from "src/components/icons/IconFilter.vue";
import IconPencil from 'src/components/icons/IconPencil.vue'; import IconPencil from "src/components/icons/IconPencil.vue";
import Container from 'src/components/ui/Container.vue'; import Container from "src/components/ui/Container.vue";
import { Category, Order, useFormStore } from 'src/stores/forms'; import { useFormStore } from "src/stores/forms";
import { useModalStore } from 'src/stores/modalStore'; import { useModalStore } from "src/stores/modalStore";
type MonthES =
| 'Enero'
| 'Febrero'
| 'Marzo'
| 'Abril'
| 'Mayo'
| 'Junio'
| 'Julio'
| 'Agosto'
| 'Septiembre'
| 'Octubre'
| 'Noviembre'
| 'Diciembre';
export default defineComponent({ export default defineComponent({
name: 'CategoryPage', name: "CategoryPage",
components: { components: {
IconArrowCircleFilledRight, IconArrowCircleFilledRight,
IconArrowDownWhite, IconArrowDownWhite,
IconPencil, IconPencil,
IconFilter, IconFilter,
Container, Container,
DudasSection: defineAsyncComponent( DudasSection: defineAsyncComponent(() =>
() => import('src/components/sections/DudasSection.vue') import("src/components/sections/DudasSection.vue")
), ),
Modal: defineAsyncComponent(() => import('src/components/ui/Modal.vue')), Modal: defineAsyncComponent(() => import("src/components/ui/Modal.vue")),
Card: defineAsyncComponent(() => import('src/components/ui/Card.vue')), Card: defineAsyncComponent(() => import("src/components/ui/Card.vue")),
SortSelect, SortSelect,
}, },
setup() { setup() {
const modalStore = useModalStore(); const modalStore = useModalStore();
const formStore = useFormStore(); const formStore = useFormStore();
const { availability, sortProductFilters } = storeToRefs(formStore); const { availability, sortProductFilters } = storeToRefs(formStore);
const monthES: Record<number, MonthES> = reactive({ const monthES = reactive({
0: 'Enero', 0: "Enero",
1: 'Febrero', 1: "Febrero",
2: 'Marzo', 2: "Marzo",
3: 'Abril', 3: "Abril",
4: 'Mayo', 4: "Mayo",
5: 'Junio', 5: "Junio",
6: 'Julio', 6: "Julio",
7: 'Agosto', 7: "Agosto",
8: 'Septiembre', 8: "Septiembre",
9: 'Octubre', 9: "Octubre",
10: 'Noviembre', 10: "Noviembre",
11: 'Diciembre', 11: "Diciembre",
}); });
const isOpenOrder = ref(false); const isOpenOrder = ref(false);
const category = ref('');
const route = useRoute(); const route = useRoute();
const cardsMock = Array.from({ length: 8 }, (_, i) => ({ const cardsMock = Array.from({ length: 8 }, (_, i) => ({
id: i + 1, id: i + 1,
@ -187,20 +174,24 @@ export default defineComponent({
title: fakerES.commerce.product(), title: fakerES.commerce.product(),
value: fakerES.commerce.price({ min: 30, max: 100 }), value: fakerES.commerce.price({ min: 30, max: 100 }),
})); }));
const orderText: Record<Order, string> = { const orderText = {
'lowest-price': 'menor precio', "lowest-price": "menor precio",
'highest-price': 'mayor precio', "highest-price": "mayor precio",
recommended: 'recomendados', recommended: "recomendados",
latest: 'más recientes', latest: "más recientes",
}; };
onMounted(() => { watch(
sortProductFilters.value.category = route.path.split('/')[3] as Category; () => route.path,
}); (newPatch) => {
sortProductFilters.value.category = newPatch.split("/")[2];
}
);
onUpdated(() => { onUpdated(() => {
console.log('Atualizado!'); console.groupCollapsed("%c Updated!", "color: green;");
console.log(sortProductFilters.value); console.log(sortProductFilters.value);
console.groupEnd();
}); });
function openOrderFilter() { function openOrderFilter() {
@ -216,7 +207,6 @@ export default defineComponent({
modalStore, modalStore,
orderText, orderText,
cardsMock, cardsMock,
category,
}; };
}, },
}); });
@ -238,6 +228,9 @@ export default defineComponent({
text-align: center; text-align: center;
gap: 25px; gap: 25px;
margin-bottom: 93px; margin-bottom: 93px;
& .product-header-title::first-letter {
text-transform: capitalize;
}
} }
& .product-header-filters { & .product-header-filters {

334
src/pages/CheckoutPage.vue
View File

@ -125,24 +125,6 @@
/> />
</div> </div>
<div class="field-control field-select">
<q-select
name="city"
v-model="city"
v-bind:="cityAttrs"
:error="!!errors.city"
:error-message="errors.city"
:options="optionsCity.data"
:label="
formPersonalData.data.city.length
? formPersonalData.data.city
: 'Ciudad*'
"
stack-label
outlined
/>
</div>
<div class="field-control field-select"> <div class="field-control field-select">
<q-select <q-select
name="province" name="province"
@ -150,13 +132,30 @@
v-bind:="provinceAttrs" v-bind:="provinceAttrs"
:error="!!errors.province" :error="!!errors.province"
:error-message="errors.province" :error-message="errors.province"
:options="optionsProvince.data" :options="provinceOptions"
option-value="code"
option-label="name"
:label=" :label="
formPersonalData.data.province !province
? formPersonalData.data.province ? 'Complete la dirección y el código postal'
: 'Provincia*' : 'Provincia*'
" "
stack-label stack-label
map-options
emit-value
outlined
/>
</div>
<div class="field-control field-select">
<q-input
placeholder="Ciudade*"
name="city"
type="text"
v-model="city"
v-bind:="cityAttrs"
:error="!!errors.city"
:error-message="errors.city"
outlined outlined
/> />
</div> </div>
@ -257,7 +256,10 @@
</div> </div>
<aside class="checkout-aside"> <aside class="checkout-aside">
<div class="checkout-delivery-date" v-if="true"> <div
class="checkout-delivery-date"
:class="(meta.valid || !checkoutBlock) && 'active'"
>
<header class="checkout-aside-header green-text"> <header class="checkout-aside-header green-text">
<strong class="checkout-aside-title"> <strong class="checkout-aside-title">
Fecha de entrega Fecha de entrega
@ -278,11 +280,15 @@
<div class="checkout-summary-body gray-bg"> <div class="checkout-summary-body gray-bg">
<ul class="checkout-summary-list"> <ul class="checkout-summary-list">
<li class="checkout-summary-item"> <li
<p>Ramo Lucena <span>30,00€</span></p> class="checkout-summary-item"
</li> v-for="({ title, price }, index) in cart"
<li class="checkout-summary-item"> :key="index"
<p>Ramo Lucena <span>30,00€</span></p> >
<p>
{{ title }}
<span>{{ price }}</span>
</p>
</li> </li>
</ul> </ul>
@ -291,7 +297,9 @@
<footer class="checkout-summary-footer"> <footer class="checkout-summary-footer">
<p class="checkout-summary-paragraph">Total</p> <p class="checkout-summary-paragraph">Total</p>
<p class="checkout-summary-paragraph summary-price">67€</p> <p class="checkout-summary-paragraph summary-price">
{{ totalPrice }}€
</p>
</footer> </footer>
</div> </div>
@ -350,7 +358,11 @@
<div class="checkout-success-body"> <div class="checkout-success-body">
<div class="checkout-success-content"> <div class="checkout-success-content">
<ul class="checkout-success-list"> <ul class="checkout-success-list">
<li class="checkout-success-item"> <li
v-for="({ title, price }, index) in cart"
:key="index"
class="checkout-success-item"
>
<div class="checkout-item-content"> <div class="checkout-item-content">
<div class="checkout-product-details"> <div class="checkout-product-details">
<img <img
@ -358,25 +370,12 @@
alt="product" alt="product"
class="checkout-product-img" class="checkout-product-img"
/> />
<p class="checkout-product-title">Ramo Lucena</p> <p class="checkout-product-title">{{ title }}</p>
</div> </div>
<p class="checkout-product-price">30.00€</p> <p class="checkout-product-price">
</div> {{ price }}
</li> </p>
<li class="checkout-success-item">
<div class="checkout-item-content">
<div class="checkout-product-details">
<img
src="../assets/checkout-flower.png"
alt="product"
class="checkout-product-img"
/>
<p class="checkout-product-title">Ramo Lucena</p>
</div>
<p class="checkout-product-price">30.00€</p>
</div> </div>
</li> </li>
</ul> </ul>
@ -384,7 +383,7 @@
<footer class="checkout-success-footer"> <footer class="checkout-success-footer">
<p class="checkout-success-paragraph">Total</p> <p class="checkout-success-paragraph">Total</p>
<p class="checkout-success-paragraph">67.00€</p> <p class="checkout-success-paragraph">{{ totalPrice }}.00€</p>
jsolis marked this conversation as resolved
pablone commented 2024-01-04 11:10:51 +00:00
Review
Copy Link

no hace falta añadir el .00

no hace falta añadir el .00
</footer> </footer>
</div> </div>
</div> </div>
@ -393,197 +392,171 @@
</q-page> </q-page>
</template> </template>
<script lang="ts"> <script>
import { useForm } from 'vee-validate'; import { toTypedSchema } from "@vee-validate/zod";
import { defineComponent, reactive, ref } from 'vue'; import { storeToRefs } from "pinia";
import { useForm } from "vee-validate";
import { defineComponent, reactive, ref } from "vue";
import { toTypedSchema } from '@vee-validate/zod'; import IconAny from "src/components/icons/credit-flags/IconAny.vue";
import IconAny from 'src/components/icons/credit-flags/IconAny.vue'; import IconExpress from "src/components/icons/credit-flags/IconExpress.vue";
import IconExpress from 'src/components/icons/credit-flags/IconExpress.vue'; import IconMaster from "src/components/icons/credit-flags/IconMaster.vue";
import IconMaster from 'src/components/icons/credit-flags/IconMaster.vue'; import IconVisa from "src/components/icons/credit-flags/IconVisa.vue";
import IconVisa from 'src/components/icons/credit-flags/IconVisa.vue'; import Container from "src/components/ui/Container.vue";
import Container from 'src/components/ui/Container.vue'; import { useCartStore } from "src/stores/cart";
import { useFormStore } from 'src/stores/forms'; import { useFormStore } from "src/stores/forms";
import { checkoutSchema } from 'src/utils/zod/schemas/checkoutSchema'; import { checkoutSchema } from "src/utils/zod/schemas/checkoutSchema";
interface StepsProps {
value: number;
name: string;
description: string;
active: boolean;
}
interface FormPersonalData {
name: string;
surname: string;
address: string;
postalCode: string;
phone: string;
city: string;
province: string;
}
export default defineComponent({ export default defineComponent({
name: 'CheckoutPage', name: "CheckoutPage",
components: { components: {
Container, Container,
IconAny, IconAny,
IconVisa, IconVisa,
IconExpress, IconExpress,
IconMaster, IconMaster,
// StepByStep,
}, },
setup() { setup() {
const cartStore = useCartStore();
const { cart, totalPrice } = storeToRefs(cartStore);
const formStore = useFormStore(); const formStore = useFormStore();
const { handleCheckoutData } = formStore; const { handleCheckoutData } = formStore;
const { meta, errors, handleSubmit, defineField, resetForm } = useForm({ const { meta, errors, handleSubmit, defineField, resetForm } = useForm({
validationSchema: toTypedSchema(checkoutSchema), validationSchema: toTypedSchema(checkoutSchema),
initialValues: { initialValues: {
paymentMethod: 'credit', paymentMethod: "credit",
terms: false, terms: false,
}, },
}); });
const [name, nameAttrs] = defineField('name'); const [name, nameAttrs] = defineField("name");
const [surname, surnameAttrs] = defineField('surname'); const [surname, surnameAttrs] = defineField("surname");
const [address, addressAttrs] = defineField('address'); const [address, addressAttrs] = defineField("address");
const [postalCode, postalCodeAttrs] = defineField('postalCode'); const [postalCode, postalCodeAttrs] = defineField("postalCode");
const [phone, phoneAttrs] = defineField('phone'); const [phone, phoneAttrs] = defineField("phone");
const [city, cityAttrs] = defineField('city'); const [city, cityAttrs] = defineField("city");
const [province, provinceAttrs] = defineField('province'); const [province, provinceAttrs] = defineField("province");
const [senderName, senderNameAttrs] = defineField('senderName'); const [senderName, senderNameAttrs] = defineField("senderName");
const [senderCifNif, senderCifNifAttrs] = defineField('senderCifNif'); const [senderCifNif, senderCifNifAttrs] = defineField("senderCifNif");
const [senderEmail, senderEmailAttrs] = defineField('senderEmail'); const [senderEmail, senderEmailAttrs] = defineField("senderEmail");
const [senderPhone, senderPhoneAttrs] = defineField('senderPhone'); const [senderPhone, senderPhoneAttrs] = defineField("senderPhone");
const [senderNotes, senderNotesAttrs] = defineField('senderNotes'); const [senderNotes, senderNotesAttrs] = defineField("senderNotes");
const [paymentMethod, paymentMethodAttrs] = defineField('paymentMethod'); const [paymentMethod, paymentMethodAttrs] = defineField("paymentMethod");
const [terms, termsAttrs] = defineField('terms'); const [terms, termsAttrs] = defineField("terms");
const stepActive = reactive({ data: 1 }); const stepActive = reactive({ data: 1 });
const stepList = reactive<{ data: StepsProps[] }>({ const stepList = reactive({
data: [ data: [
{ {
value: 1, value: 1,
name: 'Paso 1', name: "Paso 1",
description: 'Datos de facturación', description: "Datos de facturación",
active: true, active: true,
}, },
{ {
value: 2, value: 2,
name: 'Paso 2', name: "Paso 2",
description: 'Confirmación', description: "Confirmación",
active: false, active: false,
}, },
{ {
value: 3, value: 3,
name: 'Paso 3', name: "Paso 3",
description: 'Pago', description: "Pago",
active: false, active: false,
}, },
], ],
}); });
const checkoutBlock = ref(true); const checkoutBlock = ref(true);
// const successblock = document.querySelector('#success-block');
const onSubmit = handleSubmit((values) => { const onSubmit = handleSubmit((values) => {
handleCheckoutData(values); handleCheckoutData(values);
stepList.data[2].active = true; stepList.data[2].active = true;
checkoutBlock.value = false; checkoutBlock.value = false;
// successblock?.scrollIntoView({ behavior: 'smooth' });
resetForm(); resetForm();
}); });
const handleClickStep = (value: number) => { const handleClickStep = (value) => {
stepActive['data'] = value; stepActive["data"] = value;
}; };
const stepsFormated = () => { const stepsFormated = () => {
return stepList['data'].map((step) => { return stepList["data"].map((step) => {
if (step.value === stepActive['data']) { if (step.value === stepActive["data"]) {
return { ...step, active: true }; return { ...step, active: true };
} }
return step; return step;
}); });
}; };
const optionsCity = reactive<{ data: string[] }>({ const provinceOptions = ref([
pablone commented 2024-01-04 11:13:56 +00:00
Review
Copy Link

las provincias te las podemos pasar con otro proc creo que es lo más adecuado

las provincias te las podemos pasar con otro proc creo que es lo más adecuado
jsolis commented 2024-01-10 16:08:25 +00:00
Review
Copy Link

Ok, pero de momento lo tengo así, si me das el procedimiento lo pongo

Ok, pero de momento lo tengo así, si me das el procedimiento lo pongo
data: ['Complete la dirección y el código postal'], { code: "01", name: "Araba/Álava" },
}); { code: "02", name: "Albacete" },
{ code: "03", name: "Alicante/Alacant" },
const optionsProvince = reactive<{ data: string[] }>({ { code: "04", name: "Almería" },
data: ['Complete la dirección, código postal y seleccione la ciudad'], { code: "05", name: "Ávila" },
}); { code: "06", name: "Badajoz" },
{ code: "07", name: "Balears, Illes" },
const formPersonalData = reactive<{ data: FormPersonalData }>({ { code: "08", name: "Barcelona" },
data: { { code: "09", name: "Burgos" },
name: '', { code: "10", name: "Cáceres" },
surname: '', { code: "11", name: "Cádiz" },
address: '', { code: "12", name: "Castellón/Castelló" },
postalCode: '', { code: "13", name: "Ciudad Real" },
phone: '', { code: "14", name: "Córdoba" },
city: '', { code: "15", name: "Coruña, A" },
province: '', { code: "16", name: "Cuenca" },
}, { code: "17", name: "Girona" },
}); { code: "18", name: "Granada" },
/* watch( { code: "19", name: "Guadalajara" },
() => formPersonalData.data.postalCode, { code: "20", name: "Gipuzkoa" },
() => { { code: "21", name: "Huelva" },
if ( { code: "22", name: "Huesca" },
formPersonalData.data.postalCode.length > 0 && { code: "23", name: "Jaén" },
formPersonalData.data.address.length > 0 { code: "24", name: "León" },
) { { code: "25", name: "Lleida" },
return (optionsCity.data = [ { code: "26", name: "Rioja, La" },
'Sevilha', { code: "27", name: "Lugo" },
'Málaga', { code: "28", name: "Madrid" },
'Granada', { code: "29", name: "Málaga" },
'Santiago de Compostela', { code: "30", name: "Murcia" },
'Bilbao', { code: "31", name: "Navarra" },
{ code: "32", name: "Ourense" },
{ code: "33", name: "Asturias" },
{ code: "34", name: "Palencia" },
{ code: "35", name: "Palmas, Las" },
{ code: "36", name: "Pontevedra" },
{ code: "37", name: "Salamanca" },
{ code: "38", name: "Santa Cruz de Tenerife" },
{ code: "39", name: "Cantabria" },
{ code: "40", name: "Segovia" },
{ code: "41", name: "Sevilla" },
{ code: "42", name: "Soria" },
{ code: "43", name: "Tarragona" },
{ code: "44", name: "Teruel" },
{ code: "45", name: "Toledo" },
{ code: "46", name: "Valencia/València" },
{ code: "47", name: "Valladolid" },
{ code: "48", name: "Bizkaia" },
{ code: "49", name: "Zamora" },
{ code: "50", name: "Zaragoza" },
{ code: "51", name: "Ceuta" },
{ code: "52", name: "Melilla" },
]); ]);
}
optionsCity.data = ['Complete la dirección y el código postal'];
formPersonalData.data.city = '';
}
);
watch(
() => formPersonalData.data.city,
() => {
if (
formPersonalData.data.postalCode.length > 0 &&
formPersonalData.data.address.length > 0 &&
formPersonalData.data.city.length > 0
) {
return (optionsProvince.data = [
'Barcelona',
'Valência',
'Málaga',
'Alicante',
'Sevilha',
]);
}
optionsProvince.data = [
'Complete la dirección, código postal y seleccione la ciudad',
];
formPersonalData.data.postalCode = '';
}
);
function onSubmitPersonalData(_e: Event) {
console.log(formPersonalData.data);
} */
return { return {
handleClickStep, handleClickStep,
stepsFormated, stepsFormated,
formPersonalData, onSubmit,
optionsProvince,
optionsCity,
stepList, stepList,
provinceOptions,
totalPrice,
step: ref(1), step: ref(1),
cart,
checkoutBlock, checkoutBlock,
meta, meta,
errors, errors,
onSubmit,
name, name,
nameAttrs, nameAttrs,
surname, surname,
@ -650,6 +623,7 @@ export default defineComponent({
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 50%; border-radius: 50%;
user-select: none;
.step-value { .step-value {
font-family: $font-questrial; font-family: $font-questrial;
color: $primary-dark; color: $primary-dark;
@ -726,11 +700,23 @@ export default defineComponent({
& .checkout-delivery-date { & .checkout-delivery-date {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
user-select: none;
gap: 18px; gap: 18px;
padding: 16px 23px 18px; padding: 0 23px 0;
background-color: $primary-light; background-color: $primary-light;
transition: 200ms ease-in;
opacity: 0;
visibility: hidden;
height: 0;
overflow: hidden;
&.active {
height: min-content;
padding-block: 16px 18px;
opacity: 1;
visibility: visible;
margin-bottom: 21px; margin-bottom: 21px;
} }
}
& .checkout-summary { & .checkout-summary {
margin-bottom: 33px; margin-bottom: 33px;

2
src/pages/ContactaPage.vue
View File

@ -6,7 +6,7 @@
</q-page> </q-page>
</template> </template>
<script lang="ts"> <script lang="js">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
export default defineComponent({ export default defineComponent({

2
src/pages/ErrorNotFound.vue
View File

@ -20,7 +20,7 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="js">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
export default defineComponent({ export default defineComponent({

2
src/pages/FaqPage.vue
View File

@ -6,7 +6,7 @@
</q-page> </q-page>
</template> </template>
<script lang="ts"> <script lang="js">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
export default defineComponent({ export default defineComponent({

2
src/pages/HomePage.vue
View File

@ -100,7 +100,7 @@
</q-page> </q-page>
</template> </template>
<script lang="ts"> <script lang="js">
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { defineAsyncComponent, defineComponent, ref } from 'vue'; import { defineAsyncComponent, defineComponent, ref } from 'vue';

244
src/pages/ProductPage.vue
View File

@ -28,37 +28,73 @@
<div class="product-content"> <div class="product-content">
<header class="product-content-header"> <header class="product-content-header">
<h3 class="product-content-title subtitle">Ramo Lucena</h3> <h3 class="product-content-title subtitle">
{{ currentProduct.value?.title }}
<q-skeleton type="rect" v-if="!currentProduct.value?.title" />
</h3>
<!-- <div>{{ currentData.value }}</div> -->
<div class="product-header-block"> <div class="product-header-block">
<p class="product-content-paragraph"> <p class="product-content-paragraph">
SKU: SKU:
<span class="green-text">52G201</span> <span class="green-text" style="display: inline-flex">
{{ currentProduct.value?.sku }}
<q-skeleton
width="100px"
type="text"
v-if="!currentProduct.value?.sku"
/>
</span>
</p> </p>
<p class="product-content-paragraph"> <p class="product-content-paragraph">
Categoría: Categoría:
<span class="green-text">Ramos</span> <span class="green-text">
{{ currentProduct.value?.category }}
<q-skeleton
type="text"
width="50px"
v-if="!currentProduct.value?.category"
/>
</span>
</p> </p>
</div> </div>
</header> </header>
<div class="product-content-body"> <div class="product-content-body">
<div class="product-content-paragraphs"> <div class="product-content-paragraphs">
<p class="product-price green-text">30€</p> <p class="product-price green-text">
{{ currentProduct.value?.price }}
<q-skeleton
type="text"
height="90px"
width="80px"
v-if="!currentProduct.value?.price"
/>
</p>
<p class="product-delivery green-text">Envío Gratuito</p> <p class="product-delivery green-text">Envío Gratuito</p>
<p class="product-description"> <p class="product-description">
Descripción del producto, nombrar las flores y verdes, productos {{ currentProduct.value?.description }}
utilizados en único ramo. Lorem ipsum dolor sit amet,cosed do <q-skeleton
eiusmode tempor incididu ut labore et dolo magna alic... type="text"
v-if="!currentProduct.value?.description"
/>
<q-skeleton
type="text"
v-if="!currentProduct.value?.description"
/>
</p> </p>
</div> </div>
<form class="product-form" @submit.prevent="handleDedicationSubmit"> <form class="product-form" @submit="onSubmit">
<div class="product-dedication"> <div class="product-dedication">
<header class="product-dedication-header"> <header class="product-dedication-header">
<IconPencilGreen /> <IconPencilGreen />
<label class="product-dedication-paragraph" for=""> <label
class="product-dedication-paragraph"
for="dedication-btn"
>
¿Deseas añadir una dedicatoria? ¿Deseas añadir una dedicatoria?
</label> </label>
</header> </header>
@ -66,16 +102,22 @@
<div class="product-dedication-body"> <div class="product-dedication-body">
<q-input <q-input
v-model="dedication" v-model="dedication"
v-bind="dedicationAttrs"
bg-color="white" bg-color="white"
standout
color="primary" color="primary"
outlined
id="dedication-btn"
/> />
</div> </div>
</div> </div>
<q-btn type="submit" color="primary" class="btn sm-btn"> <q-btn
AÑADIR AL CARRITO :loading="addCartLoadingBtn"
</q-btn> type="submit"
color="primary"
class="btn sm-btn"
label="AÑADIR AL CARRITO"
/>
</form> </form>
</div> </div>
@ -92,28 +134,42 @@
</footer> </footer>
</div> </div>
<div class="product-pag-block"> <div
class="product-pag-block"
:style="+$route.params.id === 1 && 'justify-content: flex-end;'"
>
<q-btn <q-btn
color="white" color="white"
class="btn outlined rounded sm-btn product-pag-item product-prev-btn" class="btn outlined rounded sm-btn product-pag-item product-prev-btn"
to="/" :to="`${+$route.params.id - 1}`"
v-if="+$route.params.id > 1"
> >
<IconArrowCircleFilledLeft /> <IconArrowCircleFilledLeft />
<div class="btn-pag-paragraphs"> <div class="btn-pag-paragraphs">
<p class="btn-paragraph-top green-text">Produto anterior</p> <p class="btn-paragraph-top green-text">Produto anterior</p>
<p class="product-paragraph-bottom">Ramo Leticia</p> <p
class="product-paragraph-bottom"
:title="prevProduct.value?.title"
>
{{ prevProduct.value?.title }}
</p>
</div> </div>
</q-btn> </q-btn>
<q-btn <q-btn
color="white" color="white"
class="btn outlined rounded sm-btn product-pag-item product-next-btn" class="btn outlined rounded sm-btn product-pag-item product-next-btn"
to="/" :to="`${+$route.params.id + 1}`"
> >
<div class="btn-pag-paragraphs"> <div class="btn-pag-paragraphs">
<p class="btn-paragraph-top green-text">Siguiente producto</p> <p class="btn-paragraph-top green-text">Siguiente producto</p>
<p class="product-paragraph-bottom">Ramo Rosas</p> <p
class="product-paragraph-bottom"
:title="nextProduct.value?.title"
>
{{ nextProduct.value?.title }}
</p>
</div> </div>
<IconArrowCircleFilledRight /> <IconArrowCircleFilledRight />
@ -156,55 +212,34 @@
</q-page> </q-page>
</template> </template>
<script lang="ts"> <script>
import { fakerES } from '@faker-js/faker'; import { fakerES } from "@faker-js/faker";
import { storeToRefs } from 'pinia'; import { useMeta } from "quasar";
import { useMeta } from 'quasar'; import { useForm } from "vee-validate";
import { MetaOptions } from 'quasar/dist/types/meta'; import { defineComponent, onBeforeMount, ref, watch } from "vue";
import { defineComponent, ref } from 'vue'; import { useRoute } from "vue-router";
import IconArrowCircleFilledLeft from 'src/components/icons/IconArrowCircleFilledLeft.vue'; import IconArrowCircleFilledLeft from "components/icons/IconArrowCircleFilledLeft.vue";
import IconArrowCircleFilledRight from 'src/components/icons/IconArrowCircleFilledRight.vue'; import IconArrowCircleFilledRight from "components/icons/IconArrowCircleFilledRight.vue";
import IconPencilGreen from 'src/components/icons/IconPencilGreen.vue'; import IconPencilGreen from "components/icons/IconPencilGreen.vue";
import IconEmail from 'src/components/icons/social/IconEmail.vue'; import IconEmail from "components/icons/social/IconEmail.vue";
import IconLinkedin from 'src/components/icons/social/IconLinkedin.vue'; import IconLinkedin from "components/icons/social/IconLinkedin.vue";
import IconShare from 'src/components/icons/social/IconShare.vue'; import IconShare from "components/icons/social/IconShare.vue";
import IconTwitter from 'src/components/icons/social/IconTwitter.vue'; import IconTwitter from "components/icons/social/IconTwitter.vue";
import IconWhatsapp from 'src/components/icons/social/IconWhatsapp.vue'; import IconWhatsapp from "components/icons/social/IconWhatsapp.vue";
import ProductCarousel from 'src/components/quasar-components/carousel/ProductCarousel.vue'; import ProductCarousel from "components/quasar-components/carousel/ProductCarousel.vue";
import DudasSection from 'src/components/sections/DudasSection.vue'; import DudasSection from "components/sections/DudasSection.vue";
import Card from 'src/components/ui/Card.vue'; import Card from "components/ui/Card.vue";
import Container from 'src/components/ui/Container.vue'; import Container from "components/ui/Container.vue";
// import { cardMock } from 'src/mock/cards';
import { useTextInputStore } from 'src/stores/textInput';
const metaData: MetaOptions = { import { storeToRefs } from "pinia";
title: 'Product', import { dedicationSchema } from "src/utils/zod/schemas";
titleTemplate: (title) => `${title} - FloraNet`, import { useCartStore } from "stores/cart";
meta: {
description: { name: 'description', content: 'Page 1' },
keywords: { name: 'keywords', content: 'Quasar website' },
equiv: {
'http-equiv': 'Content-Type',
content: 'text/html; charset=UTF-8',
},
ogTitle: {
property: 'og:title',
template(ogTitle) {
return `${ogTitle} - FloraNet`;
},
},
noscript: {
default: 'This is content for browsers with no JS (or disabled JS)',
},
},
};
export default defineComponent({ export default defineComponent({
name: 'ProductPage', name: "ProductPage",
components: { components: {
IconPencilGreen, IconPencilGreen,
// IconSearchGray,
IconWhatsapp, IconWhatsapp,
IconLinkedin, IconLinkedin,
IconTwitter, IconTwitter,
@ -218,27 +253,82 @@ export default defineComponent({
ProductCarousel, ProductCarousel,
}, },
setup() { setup() {
useMeta(metaData); const route = useRoute();
const textInputStore = useTextInputStore();
const { dedication } = storeToRefs(textInputStore);
const { handleDedicationSubmit } = textInputStore;
const cardMock = Array.from({ length: 4 }, (_, i) => ({ const cardMock = Array.from({ length: 4 }, (_, i) => ({
id: i + 1, id: i + 1,
title: fakerES.lorem.word(), title: fakerES.lorem.word(),
attributes: [''], attributes: [""],
imgSrc: `../assets/flowers/flower-${i + 1}.png`, imgSrc: `../assets/flowers/flower-${i + 1}.png`,
value: fakerES.commerce.price({ symbol: '€', min: 15, max: 200 }), value: fakerES.commerce.price({ symbol: "€", min: 15, max: 200 }),
isNew: fakerES.datatype.boolean(), isNew: fakerES.datatype.boolean(),
discount: fakerES.number.int({ min: 5, max: 25 }), discount: fakerES.number.int({ min: 5, max: 25 }),
})); }));
useMeta({
title: "Product",
titleTemplate: (title) => `${title} ${route.params.id} - FloraNet`,
meta: {
description: { name: "description", content: "Page 1" },
keywords: { name: "keywords", content: "Quasar website" },
equiv: {
"http-equiv": "Content-Type",
content: "text/html; charset=UTF-8",
},
ogTitle: {
property: "og:title",
template(ogTitle) {
return `${ogTitle} - FloraNet`;
},
},
noscript: {
default: "This is content for browsers with no JS (or disabled JS)",
},
},
});
const cartStore = useCartStore();
const { addToCart, getProduct } = cartStore;
const { prevProduct, currentProduct, nextProduct, addCartLoadingBtn } =
storeToRefs(cartStore);
onBeforeMount(() => {
getProduct(+route.params.id);
});
watch(
() => route.params.id,
(newId) => {
getProduct(+newId);
}
);
const currentData = ref({});
watch(currentProduct.value, (newData) => {
const { id, ...newDataWhithoutId } = newData.value;
currentData.value = { ...newDataWhithoutId, productId: +route.params.id };
});
const { handleSubmit, defineField, handleReset } = useForm({
validationSchema: dedicationSchema,
});
const [dedication, dedicationAttrs] = defineField("dedication");
const onSubmit = handleSubmit(() => {
addToCart(currentData.value, dedication);
handleReset();
});
return { return {
cardMock, cardMock,
slide: ref(1), slide: ref(1),
fullscreen: ref(false), fullscreen: ref(false),
handleDedicationSubmit,
dedication, dedication,
dedicationAttrs,
onSubmit,
addCartLoadingBtn,
prevProduct,
currentProduct,
nextProduct,
currentData,
}; };
}, },
}); });
@ -293,7 +383,7 @@ export default defineComponent({
height: 68px; height: 68px;
flex: 0 0 61px; flex: 0 0 61px;
&::after { &::after {
content: ''; content: "";
} }
&.q-carousel__thumbnail--active { &.q-carousel__thumbnail--active {
@ -321,6 +411,9 @@ export default defineComponent({
line-height: 21px; line-height: 21px;
letter-spacing: 0.28px; letter-spacing: 0.28px;
color: $text-gray; color: $text-gray;
& .green-text {
display: inline-flex;
}
} }
} }
@ -432,7 +525,7 @@ export default defineComponent({
& .product-pag-item { & .product-pag-item {
margin-top: 76px; margin-top: 76px;
&::before { &::before {
content: ''; content: "";
display: none; display: none;
} }
@ -449,6 +542,15 @@ export default defineComponent({
flex-wrap: nowrap; flex-wrap: nowrap;
} }
& .btn-pag-paragraphs {
& .product-paragraph-bottom {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 15ch;
}
}
&.product-prev-btn { &.product-prev-btn {
padding: 10px 55px 10px 20px; padding: 10px 55px 10px 20px;
} }

9
src/quasar.d.ts vendored
View File

@ -1,9 +0,0 @@
/* eslint-disable */
// Forces TS to apply `@quasar/app-vite` augmentations of `quasar` package
// Removing this would break `quasar/wrappers` imports as those typings are declared
// into `@quasar/app-vite`
// As a side effect, since `@quasar/app-vite` reference `quasar` to augment it,
// this declaration also apply `quasar` own
// augmentations (eg. adds `$q` into Vue component context)
/// <reference types="@quasar/app-vite" />

11
src/router/index.ts → src/router/index.js
View File

@ -1,12 +1,11 @@
import { route } from 'quasar/wrappers'; import { route } from "quasar/wrappers";
import { import {
createMemoryHistory, createMemoryHistory,
createRouter, createRouter,
createWebHashHistory, createWebHashHistory,
createWebHistory, createWebHistory,
} from 'vue-router'; } 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
@ -20,7 +19,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 }),

71
src/router/routes.js Normal file
View File

@ -0,0 +1,71 @@
const routes = [
{
path: "/",
component: () => import("layouts/HomeLayout.vue"),
redirect: "/",
children: [
{
path: "",
name: "Home",
component: () => import("pages/HomePage.vue"),
},
],
},
{
path: "/categoria",
component: () => import("layouts/CategoryLayout.vue"),
redirect: "/categoria",
children: [
{
path: "ramos",
name: "Category",
component: () => import("pages/CategoryPage.vue"),
},
{
path: "plantas",
name: "Plantas",
component: () => import("pages/CategoryPage.vue"),
},
],
},
{
path: "/checkout",
component: () => import("layouts/CheckoutLayout.vue"),
redirect: "/checkout",
children: [
{
path: "",
name: "Checkout",
component: () => import("pages/CheckoutPage.vue"),
},
],
},
{
path: "/product/:id",
component: () => import("layouts/DefaultLayout.vue"),
redirect: "/product/:id",
children: [
{
path: "",
name: "Product",
component: () => import("pages/ProductPage.vue"),
},
],
},
{
path: "/faq",
name: "Faq",
component: () => import("pages/FaqPage.vue"),
},
{
path: "/contacta",
name: "Contacta",
component: () => import("pages/ContactaPage.vue"),
},
{
path: "/:catchAll(.*)*",
component: () => import("pages/ErrorNotFound.vue"),
},
];
export default routes;

73
src/router/routes.ts
View File

@ -1,73 +0,0 @@
import { RouteRecordRaw } from 'vue-router';
const routes: RouteRecordRaw[] = [
{
path: '/',
component: () => import('layouts/HomeLayout.vue'),
redirect: '/',
children: [
{
path: '',
name: 'Home',
component: () => import('pages/HomePage.vue'),
},
],
},
{
path: '/categoria',
component: () => import('layouts/CategoryLayout.vue'),
redirect: '/categoria',
children: [
{
path: 'ramos',
name: 'Category',
component: () => import('pages/CategoryPage.vue'),
},
{
path: 'plantas',
name: 'Plantas',
component: () => import('pages/CategoryPage.vue'),
},
],
},
{
path: '/checkout',
component: () => import('layouts/CheckoutLayout.vue'),
redirect: '/checkout',
children: [
{
path: '',
name: 'Checkout',
component: () => import('pages/CheckoutPage.vue'),
},
],
},
{
path: '/product/:id',
component: () => import('layouts/DefaultLayout.vue'),
redirect: '/product/:id',
children: [
{
path: '',
name: 'Product',
component: () => import('pages/ProductPage.vue'),
},
],
},
{
path: '/faq',
name: 'Faq',
component: () => import('pages/FaqPage.vue'),
},
{
path: '/contacta',
name: 'Contacta',
component: () => import('pages/ContactaPage.vue'),
},
{
path: '/:catchAll(.*)*',
component: () => import('pages/ErrorNotFound.vue'),
},
];
export default routes;

12647
src/services/json-server/db.json
View File

File diff suppressed because it is too large Load Diff

10
src/shims-vue.d.ts vendored
View File

@ -1,10 +0,0 @@
/* eslint-disable */
/// <reference types="vite/client" />
// Mocks all files ending in `.vue` showing them as plain Vue instances
declare module '*.vue' {
import type { DefineComponent } from 'vue';
const component: DefineComponent<{}, {}, any>;
export default component;
}

112
src/stores/cart.js Normal file
View File

@ -0,0 +1,112 @@
import { defineStore } from "pinia";
import { api } from "src/boot/axios";
import { computed, reactive, ref } from "vue";
export const useCartStore = defineStore("cart", () => {
const cart = ref([]);
const dedicationTxt = ref("");
const prevProduct = reactive({});
const currentProduct = reactive({});
const nextProduct = reactive({});
const addCartLoadingBtn = ref(false);
const cartLength = computed(() => cart.value.length);
const totalPrice = computed(() => {
return cart.value.reduce((acc, { price }) => {
if (price) {
const priceWithoutLetter = price?.replace("€", "");
return +priceWithoutLetter + acc;
}
}, 0);
});
/**
*
* @param debug Allow the data console - boolean
*
*/
async function getCart({ debug }) {
try {
const { data } = await api.get("cart");
cart.value = data;
if (debug) {
console.groupCollapsed("%c Cart is fetched!", "color: green;");
console.table(cart.value);
console.groupEnd();
}
} catch (err) {
/* throw */ new Error(`FATAL ERROR ::: ${err}`);
}
}
getCart({ debug: true });
/**
*
* @param id Id to get product
* @returns 'id: number; title: string; description: string; price: string; sku: string; category: string; images: string[]'
*
*/
async function getProduct(id) {
if (id) {
try {
const { data } = await api.get(`flowers/${id}`);
currentProduct.value = data;
const { data: dataNext } = await api.get(`flowers/${id + 1}`);
if (dataNext) {
nextProduct.value = dataNext;
}
console.groupCollapsed("%c Produtos recebido!", "color: green;");
if (id - 1 > 0) {
const { data: dataPrev } = await api.get(`flowers/${id - 1}`);
prevProduct.value = dataPrev;
console.table(prevProduct.value);
}
console.table(currentProduct.value);
console.table(nextProduct.value);
console.groupEnd();
} catch (err) {
new Error(`FATAL ERROR ::: ${err}`);
}
}
}
async function addToCart(product, dedication) {
cart.value.push({ ...product.value });
dedicationTxt.value = dedication;
addCartLoadingBtn.value = true;
try {
await api.post("cart", product);
addCartLoadingBtn.value = false;
} catch (err) {
addCartLoadingBtn.value = false;
new Error(`FATAL ERROR ::: ${err}`);
}
console.groupCollapsed("%c Adicionado com sucesso!", "color: green");
console.table(cart.value);
console.groupEnd();
}
function removeFromCart(id) {
cart.value = cart.value.filter((p) => p.id !== id);
api.delete(`cart/${id}`);
}
return {
cart,
totalPrice,
dedicationTxt,
cartLength,
prevProduct,
currentProduct,
nextProduct,
addCartLoadingBtn,
addToCart,
removeFromCart,
getProduct,
getCart,
};
});

58
src/stores/forms.js Normal file
View File

@ -0,0 +1,58 @@
import { defineStore } from "pinia";
export const useFormStore = defineStore("forms", {
state: () => ({
sortProductFilters: {
isOpenOrderFilter: false,
order: undefined,
price: undefined,
category: "ramos",
},
question: {
name: "",
surname: "",
email: "",
phone: "",
query: "",
message: "",
terms: false,
},
availability: {
date: "",
postalCode: "",
},
checkout: {
name: "",
surname: "",
address: "",
postalCode: "",
city: "",
province: "",
phone: "",
senderName: "",
senderCifNif: "",
senderEmail: "",
senderPhone: "",
senderNotes: "",
paymentMethod: "credit",
terms: false,
},
}),
actions: {
handleQuestionData(values) {
console.log(values);
this.question = values;
},
handleAvailabilityData(values) {
console.log(values);
this.availability = values;
},
handleCheckoutData(values) {
// console.log(values);
this.checkout = values;
},
},
});

75
src/stores/forms.ts
View File

@ -1,75 +0,0 @@
import { defineStore } from 'pinia';
import { AvailabilityForm } from 'src/utils/zod/schemas/availabilitySchema';
import type { CheckoutForm } from 'src/utils/zod/schemas/checkoutSchema';
import type { QuestionForm } from 'src/utils/zod/schemas/questionSchema';
export type Order = 'lowest-price' | 'highest-price' | 'latest' | 'recommended';
export type Category = 'ramos' | 'plantas';
interface UseFormStoreState {
sortProductFilters: {
isOpenOrderFilter: boolean;
order?: Order;
price?: number;
category: Category;
};
question: QuestionForm;
availability: AvailabilityForm;
checkout: CheckoutForm;
}
export const useFormStore = defineStore('forms', {
state: (): UseFormStoreState => ({
sortProductFilters: {
isOpenOrderFilter: false,
order: undefined,
price: undefined,
category: 'ramos',
},
question: {
name: '',
surname: '',
email: '',
phone: '',
query: '',
message: '',
terms: false,
},
availability: {
date: '',
postalCode: '',
},
checkout: {
name: '',
surname: '',
address: '',
postalCode: '',
city: '',
province: '',
phone: '',
senderName: '',
senderCifNif: '',
senderEmail: '',
senderPhone: '',
senderNotes: '',
paymentMethod: 'credit',
terms: false,
},
}),
actions: {
handleQuestionData(values: QuestionForm) {
console.log(values);
this.question = values;
},
handleAvailabilityData(values: typeof this.availability) {
console.log(values);
this.availability = values;
},
handleCheckoutData(values: CheckoutForm) {
// console.log(values);
this.checkout = values;
},
},
});

20
src/stores/index.js Normal file
View File

@ -0,0 +1,20 @@
import { createPinia } from "pinia";
import { store } from "quasar/wrappers";
/*
* If not building with SSR mode, you can
* directly export the Store instantiation;
*
* The function below can be async too; either use
* async/await or return a Promise which resolves
* with the Store instance.
*/
export default store((/* { ssrContext } */) => {
const pinia = createPinia();
// You can add Pinia plugins here
// pinia.use(SomePiniaPlugin)
return pinia;
});

32
src/stores/index.ts
View File

@ -1,32 +0,0 @@
import { createPinia } from 'pinia';
import { store } from 'quasar/wrappers';
import { Router } from 'vue-router';
/*
* When adding new properties to stores, you should also
* extend the `PiniaCustomProperties` interface.
* @see https://pinia.vuejs.org/core-concepts/plugins.html#typing-new-store-properties
*/
declare module 'pinia' {
export interface PiniaCustomProperties {
readonly router: Router;
}
}
/*
* If not building with SSR mode, you can
* directly export the Store instantiation;
*
* The function below can be async too; either use
* async/await or return a Promise which resolves
* with the Store instance.
*/
export default store((/* { ssrContext } */) => {
const pinia = createPinia();
// You can add Pinia plugins here
// pinia.use(SomePiniaPlugin)
return pinia;
});

7
src/stores/language.js Normal file
View File

@ -0,0 +1,7 @@
import { defineStore } from "pinia";
export const useLanguageStore = defineStore("language", {
state: () => ({
lang: "es",
}),
});

7
src/stores/language.ts
View File

@ -1,7 +0,0 @@
import { defineStore } from 'pinia';
export const useLanguageStore = defineStore('language', {
state: () => ({
lang: 'es',
}),
});

4
src/stores/mobileNav.ts → src/stores/mobileNav.js
View File

@ -1,6 +1,6 @@
import { defineStore } from 'pinia'; import { defineStore } from "pinia";
export const useMobileStore = defineStore('mobile', { export const useMobileStore = defineStore("mobile", {
state: () => ({ state: () => ({
isOpenNav: false, isOpenNav: false,
isCarouselVisible: false, isCarouselVisible: false,

26
src/stores/modalStore.js Normal file
View File

@ -0,0 +1,26 @@
import { defineStore } from "pinia";
export const useModalStore = defineStore("modal", {
state: () => ({
isOpenAvailability: false,
isOpenFilters: false,
}),
actions: {
openModal({ modal }) {
const open = {
availability: () =>
(this.isOpenAvailability = !this.isOpenAvailability),
filters: () => (this.isOpenFilters = !this.isOpenFilters),
};
open[modal]();
},
handleSubmit({ isModalContent }) {
const isModal = {
isOpenAvailability: () => "Contenido modal availability",
isOpenFilters: () => "Contenido modal filters",
};
console.log(isModal[isModalContent]());
},
},
});

35
src/stores/modalStore.ts
View File

@ -1,35 +0,0 @@
import { defineStore } from 'pinia';
type Modal = 'availability' | 'filters';
interface ModalParams {
modal: Modal;
}
interface HandleSubmitModalParams {
isModalContent: 'isOpenAvailability' | 'isOpenFilters';
}
export const useModalStore = defineStore('modal', {
state: () => ({
isOpenAvailability: false,
isOpenFilters: false,
}),
actions: {
openModal({ modal }: ModalParams) {
const open = {
availability: () =>
(this.isOpenAvailability = !this.isOpenAvailability),
filters: () => (this.isOpenFilters = !this.isOpenFilters),
};
open[modal]();
},
handleSubmit({ isModalContent }: HandleSubmitModalParams) {
const isModal = {
isOpenAvailability: () => 'Contenido modal availability',
isOpenFilters: () => 'Contenido modal filters',
};
console.log(isModal[isModalContent]());
},
},
});

20
src/stores/rangePrice.js Normal file
View File

@ -0,0 +1,20 @@
import { defineStore } from "pinia";
export const useRangePriceStore = defineStore("range-price", {
state: () => ({
rangeValue: {
min: 0,
max: 200,
},
}),
actions: {
handlePriceRange({ min, max }) {
console.log(min, max);
this.rangeValue = {
max,
min,
};
},
},
});

25
src/stores/rangePrice.ts
View File

@ -1,25 +0,0 @@
import { defineStore } from 'pinia';
type HandlePriceRangeParams = {
min: number;
max: number;
};
export const useRangePriceStore = defineStore('range-price', {
state: () => ({
rangeValue: {
min: 0,
max: 200,
},
}),
actions: {
handlePriceRange({ min, max }: HandlePriceRangeParams) {
console.log(min, max);
this.rangeValue = {
max,
min,
};
},
},
});

6
src/stores/textInput.ts → src/stores/textInput.js
View File

@ -1,8 +1,8 @@
import { defineStore } from 'pinia'; import { defineStore } from "pinia";
export const useTextInputStore = defineStore('text-input', { export const useTextInputStore = defineStore("text-input", {
state: () => ({ state: () => ({
dedication: '', dedication: "",
}), }),
actions: { actions: {

1
src/types/global.ts
View File

@ -1 +0,0 @@
export type Modify<T, R> = Omit<T, keyof R> & R;

4
src/utils/zod/functions.ts → src/utils/zod/functions.js
View File

@ -1,6 +1,6 @@
export function handlePhoneVal(val: string) { export function handlePhoneVal(val) {
const regex = /[\(\) ]/g; const regex = /[\(\) ]/g;
const valWithoutSpaceAndParenteses = val.replace(regex, ''); const valWithoutSpaceAndParenteses = val.replace(regex, "");
const valLength = valWithoutSpaceAndParenteses.length; const valLength = valWithoutSpaceAndParenteses.length;
return valLength > 0 && valLength === 11; return valLength > 0 && valLength === 11;

8
src/utils/zod/globalProperties.ts → src/utils/zod/globalProperties.js
View File

@ -1,12 +1,12 @@
import { z } from 'zod'; import { z } from "zod";
import * as M from './messages'; import * as M from "./messages";
export const postalCode = z export const postalCode = z
.string({ required_error: M.requiredMessage }) .string({ required_error: M.requiredMessage })
.refine((val) => { .refine((val) => {
const valWithoutHifen = val.replaceAll('-', ''); const valWithoutHifen = val.replaceAll("-", "");
const valLength = valWithoutHifen.length; const valLength = valWithoutHifen.length;
return valLength === 8 && valLength >= 1; return valLength === 8 && valLength >= 1;
}, 'El código postal debe tener 8 caracteres numéricos válidos'); }, "El código postal debe tener 8 caracteres numéricos válidos");

4
src/utils/zod/index.js Normal file
View File

@ -0,0 +1,4 @@
export * from "./functions";
export * from "./globalProperties";
export * from "./messages";
export * from "./regex";

9
src/utils/zod/messages.js Normal file
View File

@ -0,0 +1,9 @@
export const nameMessage =
"Sólo se aceptan una palabra y caracteres no numéricos";
export const phoneMessage =
"El número de teléfono debe contener 11 caracteres numéricos válidos";
export const onlyMinimumTwoCharacters = "Añade al menos dos caracteres";
export const onlyTextMessage = "Sólo son válidas las letras";
export const requiredMessage = "Campo obligatorio";
export const emailMessage =
"Introduzca una dirección de correo electrónico válida.";

7
src/utils/zod/messages.ts
View File

@ -1,7 +0,0 @@
export const nameMessage =
'Sólo se aceptan una palabra y caracteres no numéricos';
export const phoneMessage =
'El número de teléfono debe contener 11 caracteres numéricos válidos';
export const requiredMessage = 'Campo obligatorio';
export const emailMessage =
'Introduzca una dirección de correo electrónico válida.';

2
src/utils/zod/regex.js Normal file
View File

@ -0,0 +1,2 @@
export const justOneWord = /^[A-Za-z]+$/;
export const justLetters = /^[A-Za-z ]+$/;

1
src/utils/zod/regex.ts
View File

@ -1 +0,0 @@
export const justOneWord = /^[A-Za-z]+$/;

11
src/utils/zod/schemas/availabilitySchema.ts → src/utils/zod/schemas/availabilitySchema.js
View File

@ -1,18 +1,17 @@
import { z } from 'zod'; import { z } from "zod";
import { postalCode } from './../globalProperties'; import { postalCode } from "..";
const availabilityObj = { const availabilityObj = {
date: z.string().refine((val) => { date: z.string().refine((val) => {
const [day, month, year] = val.split('/'); const [day, month, year] = val.split("/");
const regex = /\//g; const regex = /\//g;
const valWithoutSlash = val.replace(regex, ''); const valWithoutSlash = val.replace(regex, "");
const data = new Date(`${year}-${month}-${day}`); const data = new Date(`${year}-${month}-${day}`);
const today = new Date(); const today = new Date();
return valWithoutSlash.length === 8 && data >= today; return valWithoutSlash.length === 8 && data >= today;
}, 'La fecha no puede ser inferior al día de hoy!'), }, "La fecha no puede ser inferior al día de hoy!"),
postalCode, postalCode,
}; };
export const availabilitySchema = z.object(availabilityObj); export const availabilitySchema = z.object(availabilityObj);
export type AvailabilityForm = z.infer<typeof availabilitySchema>;

24
src/utils/zod/schemas/checkoutSchema.ts → src/utils/zod/schemas/checkoutSchema.js
View File

@ -1,10 +1,8 @@
import { z } from 'zod'; import { z } from "zod";
import { handlePhoneVal } from '../functions'; import { handlePhoneVal, justLetters, justOneWord, postalCode } from "..";
import { postalCode } from '../globalProperties';
import { justOneWord } from '../regex';
import * as M from '../messages'; import * as M from "../messages";
const checkoutObjVal = { const checkoutObjVal = {
name: z name: z
@ -15,24 +13,27 @@ const checkoutObjVal = {
.regex(justOneWord, M.nameMessage), .regex(justOneWord, M.nameMessage),
address: z.string({ required_error: M.requiredMessage }), address: z.string({ required_error: M.requiredMessage }),
postalCode, postalCode,
city: z.string({ required_error: M.requiredMessage }).min(3), city: z
province: z.string({ required_error: M.requiredMessage }).min(3), .string({ required_error: M.requiredMessage })
.min(2, M.onlyMinimumTwoCharacters)
.regex(justLetters, M.onlyTextMessage),
province: z.string({ required_error: M.requiredMessage }),
phone: z phone: z
.string({ required_error: M.requiredMessage }) .string({ required_error: M.requiredMessage })
.refine(handlePhoneVal, M.phoneMessage), .refine(handlePhoneVal, M.phoneMessage),
senderName: z.string().regex(justOneWord, M.nameMessage), senderName: z.string().regex(justOneWord, M.nameMessage),
senderCifNif: z senderCifNif: z
.string() .string()
.length(9, 'El código postal debe tener 9 caracteres numéricos válidos'), .length(9, "El código postal debe tener 9 caracteres numéricos válidos"),
senderEmail: z.string().email(M.emailMessage), senderEmail: z.string().email(M.emailMessage),
senderPhone: z.string().refine(handlePhoneVal, M.phoneMessage), senderPhone: z.string().refine(handlePhoneVal, M.phoneMessage),
senderNotes: z.string(), senderNotes: z.string(),
paymentMethod: z.enum(['credit', 'stripe'], { paymentMethod: z.enum(["credit", "stripe"], {
required_error: 'Seleccione uno de los métodos de pago', required_error: "Seleccione uno de los métodos de pago",
}), }),
terms: z.boolean().refine((val) => { terms: z.boolean().refine((val) => {
return val === true; return val === true;
}, 'Acepte las condiciones antes de continuar con la compra'), }, "Acepte las condiciones antes de continuar con la compra"),
}; };
export const checkoutSchema = z.object(checkoutObjVal).partial({ export const checkoutSchema = z.object(checkoutObjVal).partial({
@ -42,4 +43,3 @@ export const checkoutSchema = z.object(checkoutObjVal).partial({
senderPhone: true, senderPhone: true,
senderNotes: true, senderNotes: true,
}); });
export type CheckoutForm = z.infer<typeof checkoutSchema>;

21
src/utils/zod/schemas/dedicationSchema.js Normal file
View File

@ -0,0 +1,21 @@
import { toTypedSchema } from "@vee-validate/zod";
import { z } from "zod";
const dedicationObj = {
id: z.number(),
title: z.string(),
description: z.string(),
price: z.string(),
sku: z.string(),
category: z.string(),
attributes: z.string().array(),
imgSrc: z.string(),
value: z.string(),
isNew: z.boolean(),
discount: z.string(),
dedication: z.string(),
};
export const dedicationSchema = toTypedSchema(
z.object(dedicationObj).partial()
);

4
src/utils/zod/schemas/index.js Normal file
View File

@ -0,0 +1,4 @@
export * from "./availabilitySchema";
export * from "./checkoutSchema";
export * from "./dedicationSchema";
export * from "./questionSchema";

20
src/utils/zod/schemas/questionSchema.ts → src/utils/zod/schemas/questionSchema.js
View File

@ -1,9 +1,8 @@
import { toTypedSchema } from '@vee-validate/zod'; import { toTypedSchema } from "@vee-validate/zod";
import { z } from 'zod'; import { z } from "zod";
import { handlePhoneVal } from '../functions'; import { handlePhoneVal, justOneWord } from "..";
import * as M from '../messages'; import * as M from "../messages";
import { justOneWord } from '../regex';
const questionObjVal = { const questionObjVal = {
name: z name: z
@ -16,14 +15,13 @@ const questionObjVal = {
phone: z phone: z
.string({ required_error: M.requiredMessage }) .string({ required_error: M.requiredMessage })
.refine(handlePhoneVal, M.phoneMessage), .refine(handlePhoneVal, M.phoneMessage),
query: z.string({ required_error: M.requiredMessage }), query: z.string({ required_error: M.requiredMessage }).min(1),
message: z.string({ required_error: M.requiredMessage }), message: z.string({ required_error: M.requiredMessage }).min(1),
terms: z.boolean({ required_error: M.requiredMessage }).refine((val) => { terms: z.boolean({ required_error: M.requiredMessage }).refine((val) => {
return val === true; return val === true;
}), }),
}; };
const questionType = z.object(questionObjVal); export const questionSchema = toTypedSchema(
export type QuestionForm = z.infer<typeof questionType>; z.object(questionObjVal).required()
);
export const questionSchema = toTypedSchema(z.object(questionObjVal));

8
tsconfig.json
View File

@ -1,8 +0,0 @@
{
"extends": "@quasar/app-vite/tsconfig-preset",
"compilerOptions": {
"baseUrl": "."
},
"include": ["src/**/*"],
"exclude": ["node_modules", "dist"]
}

3190
yarn.lock
View File

File diff suppressed because it is too large Load Diff