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

Cambios para la home y la pantalla de producto

This commit is contained in:
Jaume Solís 2023-12-13 13:11:49 +01:00
parent d2d7694548
commit 5b4858ad0c
45 changed files with 16364 additions and 1161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

597
package-lock.json generated
View File

@ -18,10 +18,12 @@
"v-mask": "^2.3.0",
"vee-validate": "^4.12.2",
"vue": "^3.0.0",
"vue-image-zoomer": "^2.2.3",
"vue-router": "^4.0.0",
"zod": "^3.22.4"
},
"devDependencies": {
"@faker-js/faker": "^8.3.1",
"@quasar/app-vite": "^1.3.0",
"@types/node": "^12.20.21",
"@typescript-eslint/eslint-plugin": "^5.10.0",
@ -30,6 +32,7 @@
"eslint": "^8.10.0",
"eslint-config-prettier": "^8.1.0",
"eslint-plugin-vue": "^9.0.0",
"json-server": "^0.17.4",
"prettier": "^2.5.1",
"typescript": "^4.5.4"
},
@ -49,9 +52,9 @@
}
},
"node_modules/@babel/parser": {
"version": "7.23.4",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.4.tgz",
"integrity": "sha512-vf3Xna6UEprW+7t6EtOmFpHNAuxw3xqPZghy+brsnusscJRW5BMUzzHZc5ICjULee81WeUV2jjakG09MDglJXQ==",
"version": "7.23.6",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.6.tgz",
"integrity": "sha512-Z2uID7YJ7oNvAI20O9X0bblw7Qqs8Q2hFy0R9tAfnfLkp5MW0UH9eUvnDSnFwKZ0AvgS1ucqR4KzvVHgnke1VQ==",
"bin": {
"parser": "bin/babel-parser.js"
},
@ -84,9 +87,9 @@
}
},
"node_modules/@eslint/eslintrc": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.3.tgz",
"integrity": "sha512-yZzuIG+jnVu6hNSzFEN07e8BxF3uAzYtQb6uDkaYZLo6oYZDCq454c5kB8zxnzfCYyP4MIuyBn10L0DqwujTmA==",
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
"integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
"dev": true,
"dependencies": {
"ajv": "^6.12.4",
@ -107,14 +110,30 @@
}
},
"node_modules/@eslint/js": {
"version": "8.54.0",
"resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.54.0.tgz",
"integrity": "sha512-ut5V+D+fOoWPgGGNj83GGjnntO39xDy6DWxO0wb7Jp3DcMX0TfIqdzHF85VTQkerdyGmuuMD9AKAo5KiNlf/AQ==",
"version": "8.55.0",
"resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.55.0.tgz",
"integrity": "sha512-qQfo2mxH5yVom1kacMtZZJFVdW+E70mqHMJvVg6WTLo+VBuQJ4TojZlfWBjK0ve5BdEeNAVxOsl/nvNMpJOaJA==",
"dev": true,
"engines": {
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
}
},
"node_modules/@faker-js/faker": {
"version": "8.3.1",
"resolved": "https://registry.npmjs.org/@faker-js/faker/-/faker-8.3.1.tgz",
"integrity": "sha512-FdgpFxY6V6rLZE9mmIBb9hM0xpfvQOSNOLnzolzKwsE1DH+gC7lEKV1p1IbR0lAYyvYd5a4u3qWJzowUkw1bIw==",
"dev": true,
"funding": [
{
"type": "opencollective",
"url": "https://opencollective.com/fakerjs"
}
],
"engines": {
"node": "^14.17.0 || ^16.13.0 || >=18.0.0",
"npm": ">=6.14.13"
}
},
"node_modules/@humanwhocodes/config-array": {
"version": "0.11.13",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
@ -189,12 +208,12 @@
}
},
"node_modules/@quasar/app-vite": {
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/@quasar/app-vite/-/app-vite-1.7.0.tgz",
"integrity": "sha512-GF8jjjG0WI5ngMjGRwEEKFTbMN0vyQywLcumpoPvPJG87b87enrMBTy1Fr3AKcZS7a4wq3g2+46UUzpo60S8ZA==",
"version": "1.7.1",
"resolved": "https://registry.npmjs.org/@quasar/app-vite/-/app-vite-1.7.1.tgz",
"integrity": "sha512-cs3ix7w8f7884JiTp3EW6auZ9R+Fg4qoPxEZ7VRGOrSsUg5oQtR/i91jeQk4Z96J/JUOqtcKqdqbzN4fzaFyIg==",
"dev": true,
"dependencies": {
"@quasar/render-ssr-error": "^1.0.1",
"@quasar/render-ssr-error": "^1.0.3",
"@quasar/vite-plugin": "^1.3.3",
"@rollup/pluginutils": "^4.1.2",
"@types/chrome": "^0.0.208",
@ -274,18 +293,18 @@
}
},
"node_modules/@quasar/extras": {
"version": "1.16.8",
"resolved": "https://registry.npmjs.org/@quasar/extras/-/extras-1.16.8.tgz",
"integrity": "sha512-mNSwQ6wkIVoAemhYdLm9q/FVqLHmVONZgCYdLLeqpakKNsR0r/zHQnCngzdDaXI7veYEvE0uW1gJa1wdQsxXxA==",
"version": "1.16.9",
"resolved": "https://registry.npmjs.org/@quasar/extras/-/extras-1.16.9.tgz",
"integrity": "sha512-SlOhwzXyPQHWgQIS2ncyDdYdksCJvUYNtgsDQqzAKEG3r3d/ejOxvThle79HTK3Q6HB+gQWFG21Ux00Osr5XSw==",
"funding": {
"type": "github",
"url": "https://donate.quasar.dev"
}
},
"node_modules/@quasar/render-ssr-error": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/@quasar/render-ssr-error/-/render-ssr-error-1.0.2.tgz",
"integrity": "sha512-Y0wyqYHVxc1IOBH6pRiKMSWDqO1mwQu11Zo8rw4cBdclPOQqFb7f65UuRbk5LfbqlXV2hYvklNcy0SBAOiAQnw==",
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/@quasar/render-ssr-error/-/render-ssr-error-1.0.3.tgz",
"integrity": "sha512-A8RF99q6/sOSe1Ighnh5syEIbliD3qUYEJd2HyfFyBPSMF+WYGXon5dmzg4nUoK662NgOggInevkDyBDJcZugg==",
"dev": true,
"dependencies": {
"stack-trace": "^1.0.0-pre2"
@ -691,17 +710,6 @@
"zod": "^3.22.4"
}
},
"node_modules/@vee-validate/zod/node_modules/type-fest": {
"version": "4.8.2",
"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.8.2.tgz",
"integrity": "sha512-mcvrCjixA5166hSrUoJgGb9gBQN4loMYyj9zxuMs/66ibHNEFd5JXMw37YVDx58L4/QID9jIzdTBB4mDwDJ6KQ==",
"engines": {
"node": ">=16"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/@vitejs/plugin-vue": {
"version": "2.3.4",
"resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-2.3.4.tgz",
@ -716,49 +724,49 @@
}
},
"node_modules/@vue/compiler-core": {
"version": "3.3.9",
"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.9.tgz",
"integrity": "sha512-+/Lf68Vr/nFBA6ol4xOtJrW+BQWv3QWKfRwGSm70jtXwfhZNF4R/eRgyVJYoxFRhdCTk/F6g99BP0ffPgZihfQ==",
"version": "3.3.11",
"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.11.tgz",
"integrity": "sha512-h97/TGWBilnLuRaj58sxNrsUU66fwdRKLOLQ9N/5iNDfp+DZhYH9Obhe0bXxhedl8fjAgpRANpiZfbgWyruQ0w==",
"dependencies": {
"@babel/parser": "^7.23.3",
"@vue/shared": "3.3.9",
"@babel/parser": "^7.23.5",
"@vue/shared": "3.3.11",
"estree-walker": "^2.0.2",
"source-map-js": "^1.0.2"
}
},
"node_modules/@vue/compiler-dom": {
"version": "3.3.9",
"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.9.tgz",
"integrity": "sha512-nfWubTtLXuT4iBeDSZ5J3m218MjOy42Vp2pmKVuBKo2/BLcrFUX8nCSr/bKRFiJ32R8qbdnnnBgRn9AdU5v0Sg==",
"version": "3.3.11",
"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.11.tgz",
"integrity": "sha512-zoAiUIqSKqAJ81WhfPXYmFGwDRuO+loqLxvXmfUdR5fOitPoUiIeFI9cTTyv9MU5O1+ZZglJVTusWzy+wfk5hw==",
"dependencies": {
"@vue/compiler-core": "3.3.9",
"@vue/shared": "3.3.9"
"@vue/compiler-core": "3.3.11",
"@vue/shared": "3.3.11"
}
},
"node_modules/@vue/compiler-sfc": {
"version": "3.3.9",
"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.9.tgz",
"integrity": "sha512-wy0CNc8z4ihoDzjASCOCsQuzW0A/HP27+0MDSSICMjVIFzk/rFViezkR3dzH+miS2NDEz8ywMdbjO5ylhOLI2A==",
"version": "3.3.11",
"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.11.tgz",
"integrity": "sha512-U4iqPlHO0KQeK1mrsxCN0vZzw43/lL8POxgpzcJweopmqtoYy9nljJzWDIQS3EfjiYhfdtdk9Gtgz7MRXnz3GA==",
"dependencies": {
"@babel/parser": "^7.23.3",
"@vue/compiler-core": "3.3.9",
"@vue/compiler-dom": "3.3.9",
"@vue/compiler-ssr": "3.3.9",
"@vue/reactivity-transform": "3.3.9",
"@vue/shared": "3.3.9",
"@babel/parser": "^7.23.5",
"@vue/compiler-core": "3.3.11",
"@vue/compiler-dom": "3.3.11",
"@vue/compiler-ssr": "3.3.11",
"@vue/reactivity-transform": "3.3.11",
"@vue/shared": "3.3.11",
"estree-walker": "^2.0.2",
"magic-string": "^0.30.5",
"postcss": "^8.4.31",
"postcss": "^8.4.32",
"source-map-js": "^1.0.2"
}
},
"node_modules/@vue/compiler-ssr": {
"version": "3.3.9",
"resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.9.tgz",
"integrity": "sha512-NO5oobAw78R0G4SODY5A502MGnDNiDjf6qvhn7zD7TJGc8XDeIEw4fg6JU705jZ/YhuokBKz0A5a/FL/XZU73g==",
"version": "3.3.11",
"resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.11.tgz",
"integrity": "sha512-Zd66ZwMvndxRTgVPdo+muV4Rv9n9DwQ4SSgWWKWkPFebHQfVYRrVjeygmmDmPewsHyznCNvJ2P2d6iOOhdv8Qg==",
"dependencies": {
"@vue/compiler-dom": "3.3.9",
"@vue/shared": "3.3.9"
"@vue/compiler-dom": "3.3.11",
"@vue/shared": "3.3.11"
}
},
"node_modules/@vue/devtools-api": {
@ -767,60 +775,60 @@
"integrity": "sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA=="
},
"node_modules/@vue/reactivity": {
"version": "3.3.9",
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.9.tgz",
"integrity": "sha512-VmpIqlNp+aYDg2X0xQhJqHx9YguOmz2UxuUJDckBdQCNkipJvfk9yA75woLWElCa0Jtyec3lAAt49GO0izsphw==",
"version": "3.3.11",
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.11.tgz",
"integrity": "sha512-D5tcw091f0nuu+hXq5XANofD0OXnBmaRqMYl5B3fCR+mX+cXJIGNw/VNawBqkjLNWETrFW0i+xH9NvDbTPVh7g==",
"dependencies": {
"@vue/shared": "3.3.9"
"@vue/shared": "3.3.11"
}
},
"node_modules/@vue/reactivity-transform": {
"version": "3.3.9",
"resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.9.tgz",
"integrity": "sha512-HnUFm7Ry6dFa4Lp63DAxTixUp8opMtQr6RxQCpDI1vlh12rkGIeYqMvJtK+IKyEfEOa2I9oCkD1mmsPdaGpdVg==",
"version": "3.3.11",
"resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.11.tgz",
"integrity": "sha512-fPGjH0wqJo68A0wQ1k158utDq/cRyZNlFoxGwNScE28aUFOKFEnCBsvyD8jHn+0kd0UKVpuGuaZEQ6r9FJRqCg==",
"dependencies": {
"@babel/parser": "^7.23.3",
"@vue/compiler-core": "3.3.9",
"@vue/shared": "3.3.9",
"@babel/parser": "^7.23.5",
"@vue/compiler-core": "3.3.11",
"@vue/shared": "3.3.11",
"estree-walker": "^2.0.2",
"magic-string": "^0.30.5"
}
},
"node_modules/@vue/runtime-core": {
"version": "3.3.9",
"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.9.tgz",
"integrity": "sha512-xxaG9KvPm3GTRuM4ZyU8Tc+pMVzcu6eeoSRQJ9IE7NmCcClW6z4B3Ij6L4EDl80sxe/arTtQ6YmgiO4UZqRc+w==",
"version": "3.3.11",
"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.11.tgz",
"integrity": "sha512-g9ztHGwEbS5RyWaOpXuyIVFTschclnwhqEbdy5AwGhYOgc7m/q3NFwr50MirZwTTzX55JY8pSkeib9BX04NIpw==",
"dependencies": {
"@vue/reactivity": "3.3.9",
"@vue/shared": "3.3.9"
"@vue/reactivity": "3.3.11",
"@vue/shared": "3.3.11"
}
},
"node_modules/@vue/runtime-dom": {
"version": "3.3.9",
"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.9.tgz",
"integrity": "sha512-e7LIfcxYSWbV6BK1wQv9qJyxprC75EvSqF/kQKe6bdZEDNValzeRXEVgiX7AHI6hZ59HA4h7WT5CGvm69vzJTQ==",
"version": "3.3.11",
"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.11.tgz",
"integrity": "sha512-OlhtV1PVpbgk+I2zl+Y5rQtDNcCDs12rsRg71XwaA2/Rbllw6mBLMi57VOn8G0AjOJ4Mdb4k56V37+g8ukShpQ==",
"dependencies": {
"@vue/runtime-core": "3.3.9",
"@vue/shared": "3.3.9",
"@vue/runtime-core": "3.3.11",
"@vue/shared": "3.3.11",
"csstype": "^3.1.2"
}
},
"node_modules/@vue/server-renderer": {
"version": "3.3.9",
"resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.9.tgz",
"integrity": "sha512-w0zT/s5l3Oa3ZjtLW88eO4uV6AQFqU8X5GOgzq7SkQQu6vVr+8tfm+OI2kDBplS/W/XgCBuFXiPw6T5EdwXP0A==",
"version": "3.3.11",
"resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.11.tgz",
"integrity": "sha512-AIWk0VwwxCAm4wqtJyxBylRTXSy1wCLOKbWxHaHiu14wjsNYtiRCSgVuqEPVuDpErOlRdNnuRgipQfXRLjLN5A==",
"dependencies": {
"@vue/compiler-ssr": "3.3.9",
"@vue/shared": "3.3.9"
"@vue/compiler-ssr": "3.3.11",
"@vue/shared": "3.3.11"
},
"peerDependencies": {
"vue": "3.3.9"
"vue": "3.3.11"
}
},
"node_modules/@vue/shared": {
"version": "3.3.9",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.9.tgz",
"integrity": "sha512-ZE0VTIR0LmYgeyhurPTpy4KzKsuDyQbMSdM49eKkMnT5X4VfFBLysMzjIZhLEFQYjjOVVfbvUDHckwjDFiO2eA=="
"version": "3.3.11",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.11.tgz",
"integrity": "sha512-u2G8ZQ9IhMWTMXaWqZycnK4UthG1fA238CD+DP4Dm4WJi5hdUKKLg0RMRaRpDPNMdkTwIDkp7WtD0Rd9BH9fLw=="
},
"node_modules/@vueuse/core": {
"version": "10.7.0",
@ -1196,6 +1204,18 @@
}
]
},
"node_modules/basic-auth": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.1.tgz",
"integrity": "sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==",
"dev": true,
"dependencies": {
"safe-buffer": "5.1.2"
},
"engines": {
"node": ">= 0.8"
}
},
"node_modules/binary-extensions": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@ -1293,9 +1313,9 @@
}
},
"node_modules/browserslist": {
"version": "4.22.1",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.1.tgz",
"integrity": "sha512-FEVc202+2iuClEhZhrWy6ZiAcRLvNMyYcxZ8raemul1DYVOVdFsbqckWLdsixQZCpJlwe77Z3UTalE7jsjnKfQ==",
"version": "4.22.2",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.2.tgz",
"integrity": "sha512-0UgcrvQmBDvZHFGdYUehrCNIazki7/lUP3kkoi/r3YB2amZbFM9J43ZRkJTXBUZK4gmx56+Sqk9+Vs9mwZx9+A==",
"dev": true,
"funding": [
{
@ -1312,9 +1332,9 @@
}
],
"dependencies": {
"caniuse-lite": "^1.0.30001541",
"electron-to-chromium": "^1.4.535",
"node-releases": "^2.0.13",
"caniuse-lite": "^1.0.30001565",
"electron-to-chromium": "^1.4.601",
"node-releases": "^2.0.14",
"update-browserslist-db": "^1.0.13"
},
"bin": {
@ -1400,9 +1420,9 @@
}
},
"node_modules/caniuse-lite": {
"version": "1.0.30001565",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001565.tgz",
"integrity": "sha512-xrE//a3O7TP0vaJ8ikzkD2c2NgcVUvsEe2IvFTntV4Yd1Z9FVzh+gW+enX96L0psrbaFMcVcH2l90xNuGDWc8w==",
"version": "1.0.30001568",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001568.tgz",
"integrity": "sha512-vSUkH84HontZJ88MiNrOau1EBrCqEQYgkC5gIySiDlpsm8sGVrhU7Kx4V6h0tnqaHzIHZv08HlJIwPbL4XL9+A==",
"dev": true,
"funding": [
{
@ -1683,6 +1703,15 @@
"integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
"dev": true
},
"node_modules/connect-pause": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/connect-pause/-/connect-pause-0.1.1.tgz",
"integrity": "sha512-a1gSWQBQD73krFXdUEYJom2RTFrWUL3YvXDCRkyv//GVXc79cdW9MngtRuN9ih4FDKBtfJAJId+BbDuX+1rh2w==",
"dev": true,
"engines": {
"node": "*"
}
},
"node_modules/content-disposition": {
"version": "0.5.4",
"resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
@ -1745,6 +1774,19 @@
"integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
"dev": true
},
"node_modules/cors": {
"version": "2.8.5",
"resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
"integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
"dev": true,
"dependencies": {
"object-assign": "^4",
"vary": "^1"
},
"engines": {
"node": ">= 0.10"
}
},
"node_modules/crc-32": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
@ -1797,9 +1839,9 @@
}
},
"node_modules/csstype": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
},
"node_modules/debug": {
"version": "4.3.4",
@ -1932,9 +1974,9 @@
"dev": true
},
"node_modules/electron-to-chromium": {
"version": "1.4.594",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.594.tgz",
"integrity": "sha512-xT1HVAu5xFn7bDfkjGQi9dNpMqGchUkebwf1GL7cZN32NSwwlHRPMSDJ1KN6HkS0bWUtndbSQZqvpQftKG2uFQ==",
"version": "1.4.610",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.610.tgz",
"integrity": "sha512-mqi2oL1mfeHYtOdCxbPQYV/PL7YrQlxbvFEZ0Ee8GbDdShimqt2/S6z2RWqysuvlwdOrQdqvE0KZrBTipAeJzg==",
"dev": true
},
"node_modules/elementtree": {
@ -1973,6 +2015,19 @@
"once": "^1.4.0"
}
},
"node_modules/errorhandler": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/errorhandler/-/errorhandler-1.5.1.tgz",
"integrity": "sha512-rcOwbfvP1WTViVoUjcfZicVzjhjTuhSMntHh6mW3IrEiyE6mJyXvsToJUJGlGlw/2xU9P5whlWNGlIDVeCiT4A==",
"dev": true,
"dependencies": {
"accepts": "~1.3.7",
"escape-html": "~1.0.3"
},
"engines": {
"node": ">= 0.8"
}
},
"node_modules/esbuild": {
"version": "0.14.51",
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.14.51.tgz",
@ -2356,15 +2411,15 @@
}
},
"node_modules/eslint": {
"version": "8.54.0",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.54.0.tgz",
"integrity": "sha512-NY0DfAkM8BIZDVl6PgSa1ttZbx3xHgJzSNJKYcQglem6CppHyMhRIQkBVSSMaSRnLhig3jsDbEzOjwCVt4AmmA==",
"version": "8.55.0",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.55.0.tgz",
"integrity": "sha512-iyUUAM0PCKj5QpwGfmCAG9XXbZCWsqP/eWAWrG/W0umvjuLRBECwSFdt+rCntju0xEH7teIABPwXpahftIaTdA==",
"dev": true,
"dependencies": {
"@eslint-community/eslint-utils": "^4.2.0",
"@eslint-community/regexpp": "^4.6.1",
"@eslint/eslintrc": "^2.1.3",
"@eslint/js": "8.54.0",
"@eslint/eslintrc": "^2.1.4",
"@eslint/js": "8.55.0",
"@humanwhocodes/config-array": "^0.11.13",
"@humanwhocodes/module-importer": "^1.0.1",
"@nodelib/fs.walk": "^1.2.8",
@ -2423,9 +2478,9 @@
}
},
"node_modules/eslint-plugin-vue": {
"version": "9.18.1",
"resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.18.1.tgz",
"integrity": "sha512-7hZFlrEgg9NIzuVik2I9xSnJA5RsmOfueYgsUGUokEDLJ1LHtxO0Pl4duje1BriZ/jDWb+44tcIlC3yi0tdlZg==",
"version": "9.19.2",
"resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.19.2.tgz",
"integrity": "sha512-CPDqTOG2K4Ni2o4J5wixkLVNwgctKXFu6oBpVJlpNq7f38lh9I80pRTouZSJ2MAebPJlINU/KTFSXyQfBUlymA==",
"dev": true,
"dependencies": {
"@eslint-community/eslint-utils": "^4.4.0",
@ -2638,6 +2693,31 @@
"node": ">= 0.10.0"
}
},
"node_modules/express-urlrewrite": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/express-urlrewrite/-/express-urlrewrite-1.4.0.tgz",
"integrity": "sha512-PI5h8JuzoweS26vFizwQl6UTF25CAHSggNv0J25Dn/IKZscJHWZzPrI5z2Y2jgOzIaw2qh8l6+/jUcig23Z2SA==",
"dev": true,
"dependencies": {
"debug": "*",
"path-to-regexp": "^1.0.3"
}
},
"node_modules/express-urlrewrite/node_modules/isarray": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
"integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==",
"dev": true
},
"node_modules/express-urlrewrite/node_modules/path-to-regexp": {
"version": "1.8.0",
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
"integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
"dev": true,
"dependencies": {
"isarray": "0.0.1"
}
},
"node_modules/express/node_modules/debug": {
"version": "2.6.9",
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@ -2926,9 +3006,9 @@
"dev": true
},
"node_modules/fs-extra": {
"version": "11.1.1",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.1.tgz",
"integrity": "sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==",
"version": "11.2.0",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz",
"integrity": "sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==",
"dev": true,
"dependencies": {
"graceful-fs": "^4.2.0",
@ -3025,9 +3105,9 @@
}
},
"node_modules/globals": {
"version": "13.23.0",
"resolved": "https://registry.npmjs.org/globals/-/globals-13.23.0.tgz",
"integrity": "sha512-XAmF0RjlrjY23MA51q3HltdlGxUpXPvg0GioKiD9X6HD28iMjo2dKC8Vqwm7lne4GNr78+RHTfliktR6ZH09wA==",
"version": "13.24.0",
"resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
"integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
"dev": true,
"dependencies": {
"type-fest": "^0.20.2"
@ -3039,6 +3119,18 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/globals/node_modules/type-fest": {
"version": "0.20.2",
"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
"integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
"dev": true,
"engines": {
"node": ">=10"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/globby": {
"version": "11.1.0",
"resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
@ -3426,6 +3518,12 @@
"node": ">=0.10.0"
}
},
"node_modules/is-promise": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
"integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==",
"dev": true
},
"node_modules/is-unicode-supported": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
@ -3483,6 +3581,12 @@
"node": ">=0.10.0"
}
},
"node_modules/jju": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/jju/-/jju-1.4.0.tgz",
"integrity": "sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==",
"dev": true
},
"node_modules/js-yaml": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
@ -3501,12 +3605,54 @@
"integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
"dev": true
},
"node_modules/json-parse-helpfulerror": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/json-parse-helpfulerror/-/json-parse-helpfulerror-1.0.3.tgz",
"integrity": "sha512-XgP0FGR77+QhUxjXkwOMkC94k3WtqEBfcnjWqhRd82qTat4SWKRE+9kUnynz/shm3I4ea2+qISvTIeGTNU7kJg==",
"dev": true,
"dependencies": {
"jju": "^1.1.0"
}
},
"node_modules/json-schema-traverse": {
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
"integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
"dev": true
},
"node_modules/json-server": {
"version": "0.17.4",
"resolved": "https://registry.npmjs.org/json-server/-/json-server-0.17.4.tgz",
"integrity": "sha512-bGBb0WtFuAKbgI7JV3A864irWnMZSvBYRJbohaOuatHwKSRFUfqtQlrYMrB6WbalXy/cJabyjlb7JkHli6dYjQ==",
"dev": true,
"dependencies": {
"body-parser": "^1.19.0",
"chalk": "^4.1.2",
"compression": "^1.7.4",
"connect-pause": "^0.1.1",
"cors": "^2.8.5",
"errorhandler": "^1.5.1",
"express": "^4.17.1",
"express-urlrewrite": "^1.4.0",
"json-parse-helpfulerror": "^1.0.3",
"lodash": "^4.17.21",
"lodash-id": "^0.14.1",
"lowdb": "^1.0.0",
"method-override": "^3.0.0",
"morgan": "^1.10.0",
"nanoid": "^3.1.23",
"please-upgrade-node": "^3.2.0",
"pluralize": "^8.0.0",
"server-destroy": "^1.0.1",
"yargs": "^17.0.1"
},
"bin": {
"json-server": "lib/cli/bin.js"
},
"engines": {
"node": ">=12"
}
},
"node_modules/json-stable-stringify-without-jsonify": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
@ -3619,6 +3765,15 @@
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
"dev": true
},
"node_modules/lodash-id": {
"version": "0.14.1",
"resolved": "https://registry.npmjs.org/lodash-id/-/lodash-id-0.14.1.tgz",
"integrity": "sha512-ikQPBTiq/d5m6dfKQlFdIXFzvThPi2Be9/AHxktOnDSfSxE1j9ICbBT5Elk1ke7HSTgM38LHTpmJovo9/klnLg==",
"dev": true,
"engines": {
"node": ">= 4"
}
},
"node_modules/lodash.defaults": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",
@ -3677,6 +3832,22 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/lowdb": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/lowdb/-/lowdb-1.0.0.tgz",
"integrity": "sha512-2+x8esE/Wb9SQ1F9IHaYWfsC9FIecLOPrK4g17FGEayjUWH172H6nwicRovGvSE2CPZouc2MCIqCI7h9d+GftQ==",
"dev": true,
"dependencies": {
"graceful-fs": "^4.1.3",
"is-promise": "^2.1.0",
"lodash": "4",
"pify": "^3.0.0",
"steno": "^0.4.1"
},
"engines": {
"node": ">=4"
}
},
"node_modules/lower-case": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz",
@ -3730,6 +3901,36 @@
"node": ">= 8"
}
},
"node_modules/method-override": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/method-override/-/method-override-3.0.0.tgz",
"integrity": "sha512-IJ2NNN/mSl9w3kzWB92rcdHpz+HjkxhDJWNDBqSlas+zQdP8wBiJzITPg08M/k2uVvMow7Sk41atndNtt/PHSA==",
"dev": true,
"dependencies": {
"debug": "3.1.0",
"methods": "~1.1.2",
"parseurl": "~1.3.2",
"vary": "~1.1.2"
},
"engines": {
"node": ">= 0.10"
}
},
"node_modules/method-override/node_modules/debug": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
"integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
"dev": true,
"dependencies": {
"ms": "2.0.0"
}
},
"node_modules/method-override/node_modules/ms": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
"dev": true
},
"node_modules/methods": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
@ -3813,6 +4014,49 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/morgan": {
"version": "1.10.0",
"resolved": "https://registry.npmjs.org/morgan/-/morgan-1.10.0.tgz",
"integrity": "sha512-AbegBVI4sh6El+1gNwvD5YIck7nSA36weD7xvIxG4in80j/UoK8AEGaWnnz8v1GxonMCltmlNs5ZKbGvl9b1XQ==",
"dev": true,
"dependencies": {
"basic-auth": "~2.0.1",
"debug": "2.6.9",
"depd": "~2.0.0",
"on-finished": "~2.3.0",
"on-headers": "~1.0.2"
},
"engines": {
"node": ">= 0.8.0"
}
},
"node_modules/morgan/node_modules/debug": {
"version": "2.6.9",
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
"dev": true,
"dependencies": {
"ms": "2.0.0"
}
},
"node_modules/morgan/node_modules/ms": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
"dev": true
},
"node_modules/morgan/node_modules/on-finished": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
"integrity": "sha512-ikqdkGAAyf/X/gPhXGvfgAytDZtDbr+bkNUJ0N9h5MI/dmdgCs3l6hoHrcUv41sRKew3jIwrp4qQDXiK99Utww==",
"dev": true,
"dependencies": {
"ee-first": "1.1.1"
},
"engines": {
"node": ">= 0.8"
}
},
"node_modules/ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@ -3873,9 +4117,9 @@
}
},
"node_modules/node-releases": {
"version": "2.0.13",
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz",
"integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==",
"version": "2.0.14",
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
"integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==",
"dev": true
},
"node_modules/normalize-path": {
@ -3908,6 +4152,15 @@
"url": "https://github.com/fb55/nth-check?sponsor=1"
}
},
"node_modules/object-assign": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
"dev": true,
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/object-inspect": {
"version": "1.13.1",
"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
@ -4153,6 +4406,15 @@
"url": "https://github.com/sponsors/jonschlinkert"
}
},
"node_modules/pify": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
"integrity": "sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==",
"dev": true,
"engines": {
"node": ">=4"
}
},
"node_modules/pinia": {
"version": "2.1.7",
"resolved": "https://registry.npmjs.org/pinia/-/pinia-2.1.7.tgz",
@ -4203,10 +4465,28 @@
}
}
},
"node_modules/please-upgrade-node": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz",
"integrity": "sha512-gQR3WpIgNIKwBMVLkpMUeR3e1/E1y42bqDQZfql+kDeXd8COYfM8PQA4X6y7a8u9Ua9FHmsrrmirW2vHs45hWg==",
"dev": true,
"dependencies": {
"semver-compare": "^1.0.0"
}
},
"node_modules/pluralize": {
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/pluralize/-/pluralize-8.0.0.tgz",
"integrity": "sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==",
"dev": true,
"engines": {
"node": ">=4"
}
},
"node_modules/postcss": {
"version": "8.4.31",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
"integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
"version": "8.4.32",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.32.tgz",
"integrity": "sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==",
"funding": [
{
"type": "opencollective",
@ -4222,7 +4502,7 @@
}
],
"dependencies": {
"nanoid": "^3.3.6",
"nanoid": "^3.3.7",
"picocolors": "^1.0.0",
"source-map-js": "^1.0.2"
},
@ -4322,9 +4602,9 @@
}
},
"node_modules/quasar": {
"version": "2.14.0",
"resolved": "https://registry.npmjs.org/quasar/-/quasar-2.14.0.tgz",
"integrity": "sha512-hxaQ/yd/qNGgpUrww4fQRSpklKnZN90HXhmhmPE5h+yFCcXreU+JgM3m/Mf6Qv7lMNQZQkYipgZ5Ja41DYkVUQ==",
"version": "2.14.1",
"resolved": "https://registry.npmjs.org/quasar/-/quasar-2.14.1.tgz",
"integrity": "sha512-TAIGUgHASlL7COS9qqfDKyV2+WGFcHQseIDTzN+yfXaXY5gn/FZqwkEnb87bgOqgGYw8KJerkfZg3aSel+bLPw==",
"engines": {
"node": ">= 10.18.1",
"npm": ">= 6.13.4",
@ -4566,9 +4846,9 @@
}
},
"node_modules/rollup-plugin-visualizer": {
"version": "5.9.3",
"resolved": "https://registry.npmjs.org/rollup-plugin-visualizer/-/rollup-plugin-visualizer-5.9.3.tgz",
"integrity": "sha512-ieGM5UAbMVqThX67GCuFHu/GkaSXIUZwFKJsSzE+7+k9fibU/6gbUz7SL+9BBzNtv5bIFHj7kEu0TWcqEnT/sQ==",
"version": "5.11.0",
"resolved": "https://registry.npmjs.org/rollup-plugin-visualizer/-/rollup-plugin-visualizer-5.11.0.tgz",
"integrity": "sha512-exM0Ms2SN3AgTzMeW7y46neZQcyLY7eKwWAop1ZoRTCZwyrIRdMMJ6JjToAJbML77X/9N8ZEpmXG4Z/Clb9k8g==",
"dev": true,
"dependencies": {
"open": "^8.4.0",
@ -4691,6 +4971,12 @@
"node": ">=10"
}
},
"node_modules/semver-compare": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz",
"integrity": "sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow==",
"dev": true
},
"node_modules/send": {
"version": "0.18.0",
"resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
@ -4760,6 +5046,12 @@
"node": ">= 0.8.0"
}
},
"node_modules/server-destroy": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/server-destroy/-/server-destroy-1.0.1.tgz",
"integrity": "sha512-rb+9B5YBIEzYcD6x2VKidaa+cqYBJQKnU4oe4E3ANwRRN56yk/ua1YCJT1n21NTS8w6CcOclAKNP3PhdCXKYtQ==",
"dev": true
},
"node_modules/set-function-length": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.1.1.tgz",
@ -4895,6 +5187,15 @@
"node": ">= 0.8"
}
},
"node_modules/steno": {
"version": "0.4.4",
"resolved": "https://registry.npmjs.org/steno/-/steno-0.4.4.tgz",
"integrity": "sha512-EEHMVYHNXFHfGtgjNITnka0aHhiAlo93F7z2/Pwd+g0teG9CnM3JIINM7hVVB5/rhw9voufD7Wukwgtw2uqh6w==",
"dev": true,
"dependencies": {
"graceful-fs": "^4.1.3"
}
},
"node_modules/string_decoder": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
@ -5143,12 +5444,11 @@
}
},
"node_modules/type-fest": {
"version": "0.20.2",
"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
"integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
"dev": true,
"version": "4.8.3",
"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.8.3.tgz",
"integrity": "sha512-//BaTm14Q/gHBn09xlnKNqfI8t6bmdzx2DXYfPBNofN0WUybCEUDcbCWcTa0oF09lzLjZgPphXAsvRiMK0V6Bw==",
"engines": {
"node": ">=10"
"node": ">=16"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
@ -5296,17 +5596,6 @@
"vue": "^3.3.8"
}
},
"node_modules/vee-validate/node_modules/type-fest": {
"version": "4.8.2",
"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.8.2.tgz",
"integrity": "sha512-mcvrCjixA5166hSrUoJgGb9gBQN4loMYyj9zxuMs/66ibHNEFd5JXMw37YVDx58L4/QID9jIzdTBB4mDwDJ6KQ==",
"engines": {
"node": ">=16"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/vite": {
"version": "2.9.16",
"resolved": "https://registry.npmjs.org/vite/-/vite-2.9.16.tgz",
@ -5345,15 +5634,15 @@
}
},
"node_modules/vue": {
"version": "3.3.9",
"resolved": "https://registry.npmjs.org/vue/-/vue-3.3.9.tgz",
"integrity": "sha512-sy5sLCTR8m6tvUk1/ijri3Yqzgpdsmxgj6n6yl7GXXCXqVbmW2RCXe9atE4cEI6Iv7L89v5f35fZRRr5dChP9w==",
"version": "3.3.11",
"resolved": "https://registry.npmjs.org/vue/-/vue-3.3.11.tgz",
"integrity": "sha512-d4oBctG92CRO1cQfVBZp6WJAs0n8AK4Xf5fNjQCBeKCvMI1efGQ5E3Alt1slFJS9fZuPcFoiAiqFvQlv1X7t/w==",
"dependencies": {
"@vue/compiler-dom": "3.3.9",
"@vue/compiler-sfc": "3.3.9",
"@vue/runtime-dom": "3.3.9",
"@vue/server-renderer": "3.3.9",
"@vue/shared": "3.3.9"
"@vue/compiler-dom": "3.3.11",
"@vue/compiler-sfc": "3.3.11",
"@vue/runtime-dom": "3.3.11",
"@vue/server-renderer": "3.3.11",
"@vue/shared": "3.3.11"
},
"peerDependencies": {
"typescript": "*"
@ -5413,6 +5702,14 @@
"node": ">=4.0"
}
},
"node_modules/vue-image-zoomer": {
"version": "2.2.3",
"resolved": "https://registry.npmjs.org/vue-image-zoomer/-/vue-image-zoomer-2.2.3.tgz",
"integrity": "sha512-W7UBLUlkPp7UqAkh/KGOGzNUSPn0cMawxjpwuo+97YR1Ft7WOpGc2T8JWL1N+a+fXE56vVftUYX/XoelqBZdtQ==",
"dependencies": {
"vue": "^3.2.25"
}
},
"node_modules/vue-router": {
"version": "4.2.5",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.2.5.tgz",

8
package.json
View File

@ -8,9 +8,10 @@
"scripts": {
"lint": "eslint --ext .js,.ts,.vue ./",
"format": "prettier --write \"**/*.{js,ts,vue,scss,html,md,json}\" --ignore-path .gitignore",
"test": "echo \"No test specified\" && exit 0",
"dev": "quasar dev -m ssr",
"build": "quasar build -m ssr"
"backend": "json-server -p 5000 -d 3000 -w src/services/json-server/db.json",
"build": "quasar build -m ssr",
"start:build": "npm run build && cd dist/ssr && npm i && npm run start"
},
"dependencies": {
"@quasar/extras": "^1.16.4",
@ -23,10 +24,12 @@
"v-mask": "^2.3.0",
"vee-validate": "^4.12.2",
"vue": "^3.0.0",
"vue-image-zoomer": "^2.2.3",
"vue-router": "^4.0.0",
"zod": "^3.22.4"
},
"devDependencies": {
"@faker-js/faker": "^8.3.1",
"@quasar/app-vite": "^1.3.0",
"@types/node": "^12.20.21",
"@typescript-eslint/eslint-plugin": "^5.10.0",
@ -35,6 +38,7 @@
"eslint": "^8.10.0",
"eslint-config-prettier": "^8.1.0",
"eslint-plugin-vue": "^9.0.0",
"json-server": "^0.17.4",
"prettier": "^2.5.1",
"typescript": "^4.5.4"
},

12
quasar.config.js
View File

@ -27,7 +27,7 @@ module.exports = configure(function (/* ctx */) {
// app boot file (/src/boot)
// --> boot files are part of "main.js"
// https://v2.quasar.dev/quasar-cli-vite/boot-files
boot: ['axios'],
boot: ['axios', { server: false, path: 'brand-colors' }],
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
css: ['app.scss'],
@ -85,7 +85,13 @@ module.exports = configure(function (/* ctx */) {
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#framework
framework: {
config: {},
config: {
loading: {
backgroundColor: 'tomato',
message: 'loading page',
customClass: 'loader',
},
},
// iconSet: 'material-icons', // Quasar icon set
// lang: 'en-US', // Quasar language pack
@ -98,7 +104,7 @@ module.exports = configure(function (/* ctx */) {
// directives: [],
// Quasar plugins
plugins: [],
plugins: ['Meta', 'Loading'],
},
// animations: 'all', // --- includes all animations

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

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

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

@ -26,11 +26,11 @@
<ul class="footer-list footer-secondary">
<li class="footer-list-item list-links">
<router-link to="/">Ramos</router-link><br />
<router-link to="/">Plantas</router-link><br />
<router-link to="/">Nosotros</router-link><br />
<router-link to="/faq">FAQs</router-link><br />
<router-link to="/contacta">Contacta</router-link>
<RouterLink to="/">Ramos</RouterLink><br />
<RouterLink to="/">Plantas</RouterLink><br />
<RouterLink to="/">Nosotros</RouterLink><br />
<RouterLink to="/faq">FAQs</RouterLink><br />
<RouterLink to="/contacta">Contacta</RouterLink>
</li>
<li class="footer-list-item">
@ -39,23 +39,23 @@
envío, calcular un nuevo envío o solicitar recogida, estamos para
ayudarte. <br /><br />
<router-link to="/">
<RouterLink to="/">
<IconArrowCircleRight /> Preguntas frecuentes
</router-link>
</RouterLink>
<br />
<router-link to="/">
<RouterLink to="/">
<IconArrowCircleRight /> Contacta con nosotros
</router-link>
</RouterLink>
</p>
</li>
<li class="footer-list-item">
<p class="footer-list-content">
Floranet &copy;2023 <br /><br />
<router-link to="/">Aviso Legal</router-link> <br />
<router-link to="/">Condiciones de uso</router-link><br />
<router-link to="/">Política de cookies</router-link><br />
<router-link to="/"> Política de Redes Sociales </router-link>
<RouterLink to="/">Aviso Legal</RouterLink> <br />
<RouterLink to="/">Condiciones de uso</RouterLink><br />
<RouterLink to="/">Política de cookies</RouterLink><br />
<RouterLink to="/"> Política de Redes Sociales </RouterLink>
<br /><br />
Desarrollado por diligent

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

@ -1,18 +1,20 @@
<template>
<q-header
class="header-container transparent"
:class="mobileStore.isOpenNav && 'mobile-nav'"
:class="isOpenNav && 'mobile-nav'"
>
<send-banner
left-text="ENVÍO GRATIS a partir de 60€ | Compra el sábado hasta 14h y entrega el domingo"
right-text="Envíos 24-48 h a toda España, Portugal y sur de Francia"
mobile-text="ENVÍO GRATIS a partir de 60€"
v-if="!mobileStore.isOpenNav"
v-if="!isOpenNav"
/>
<div class="header-container-wrapper custom-container">
<LogoWhite v-if="!mobileStore.isOpenNav" />
<LogoGreenLight v-if="mobileStore.isOpenNav" />
<RouterLink to="/">
<LogoWhite v-if="!isOpenNav" />
<LogoGreenLight v-if="isOpenNav" />
</RouterLink>
<nav-links />
@ -24,21 +26,24 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { storeToRefs } from 'pinia';
import { useMobileStore } from 'src/stores/mobileNav';
import LogoGreenLight from '../logo/LogoGreenLight.vue';
import LogoWhite from '../logo/LogoWhite.vue';
import SendBanner from '../ui/SendBanner.vue';
import NavLinks from './NavLinks.vue';
import UserArea from './UserArea.vue';
import { mobileStore } from 'src/stores/mobileNav';
export default defineComponent({
name: 'header-primary',
components: { SendBanner, UserArea, NavLinks, LogoWhite, LogoGreenLight },
setup() {
window.addEventListener('resize', mobileStore.handleResize);
const mobileStore = useMobileStore();
const { isOpenNav } = storeToRefs(mobileStore);
const { handleResize } = mobileStore;
return { mobileStore };
window.addEventListener('resize', handleResize);
return { isOpenNav };
},
});
</script>

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

@ -9,7 +9,9 @@
<div class="header-menu">
<div class="header-container-wrapper custom-container">
<Logo />
<RouterLink to="/">
<LogoWhite />
</RouterLink>
<nav-links />
@ -22,17 +24,20 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { mobileStore } from 'src/stores/mobileNav';
import Logo from '../logo/LogoWhite.vue';
import { useMobileStore } from 'src/stores/mobileNav';
import LogoWhite from '../logo/LogoWhite.vue';
import SendBanner from '../ui/SendBanner.vue';
import NavLinks from './NavLinks.vue';
import UserArea from './UserArea.vue';
export default defineComponent({
name: 'header-secondary',
components: { SendBanner, UserArea, NavLinks, Logo },
components: { SendBanner, UserArea, NavLinks, LogoWhite },
setup() {
window.addEventListener('resize', mobileStore.handleResize);
const mobileStore = useMobileStore();
const { handleResize } = mobileStore;
window.addEventListener('resize', handleResize);
return;
},

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

@ -2,23 +2,23 @@
<nav class="menu-nav">
<ul class="links-list">
<li class="link-item">
<router-link to="/">Ramos</router-link>
<RouterLink to="/">Ramos</RouterLink>
</li>
<li class="link-item">
<router-link to="/">Plantas</router-link>
<RouterLink to="/">Plantas</RouterLink>
</li>
<li class="link-item">
<router-link to="/">Floranet</router-link>
<RouterLink to="/">Floranet</RouterLink>
</li>
<li class="link-item">
<router-link to="/faq">FAQs</router-link>
<RouterLink to="/faq">FAQs</RouterLink>
</li>
<li class="link-item">
<router-link to="/contacta">Contacta</router-link>
<RouterLink to="/contacta">Contacta</RouterLink>
</li>
</ul>
</nav>

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

@ -1,8 +1,8 @@
<template>
<div class="user-area">
<router-link class="user-area-link help" to="/">
<RouterLink class="user-area-link help" to="/">
¿necesitas ayuda?
</router-link>
</RouterLink>
<dropdown-group class="user-area-lang" label="Idioma">
<dropdown-item> EN </dropdown-item>
@ -10,12 +10,12 @@
<dropdown-item> ES </dropdown-item>
</dropdown-group>
<router-link class="user-area-link user" to="/"><icon-user /></router-link>
<router-link class="user-area-link cart" to="/"><icon-cart /></router-link>
<RouterLink class="user-area-link user" to="/"><icon-user /></RouterLink>
<RouterLink class="user-area-link cart" to="/"><icon-cart /></RouterLink>
<q-btn
class="user-area-hamburg"
@click="mobileStore.handleOpenMobileNav"
@click="handleOpenMobileNav"
size="sm"
color="white"
flat
@ -28,7 +28,7 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { mobileStore } from '../../stores/mobileNav';
import { useMobileStore } from '../../stores/mobileNav';
import IconCart from '../icons/IconCart.vue';
import IconHamburger from '../icons/IconHamburger.vue';
import IconUser from '../icons/IconUser.vue';
@ -45,7 +45,9 @@ export default defineComponent({
IconHamburger,
},
setup() {
return { mobileStore };
const mobileStore = useMobileStore();
const { handleOpenMobileNav } = mobileStore;
return { handleOpenMobileNav };
},
});
</script>

35
src/components/icons/IconPencilGreen.vue Normal file
View File

@ -0,0 +1,35 @@
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="21"
viewBox="0 0 20 21"
fill="none"
>
<path
d="M14.6552 9.63057L8.89062 3.875"
stroke="#117564"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M8.50813 15.7689L2.74609 10.0134"
stroke="#D9D9D9"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M7.91827 16.3582L2.25207 16.2626L2.15625 10.6026L11.7739 1L17.5385 6.75305L7.91827 16.3582Z"
stroke="#117564"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M2.25341 16.2625L1.64062 16.8742"
stroke="#117564"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path d="M1 20L19 20" stroke="#117564" stroke-linecap="round" />
</svg>
</template>

27
src/components/icons/IconSearchGray.vue Normal file
View File

@ -0,0 +1,27 @@
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
width="26"
height="25"
viewBox="0 0 26 25"
fill="none"
>
<path
d="M12.9722 16.7742C15.3052 16.7742 17.1964 14.9367 17.1964 12.67C17.1964 10.4034 15.3052 8.56592 12.9722 8.56592C10.6393 8.56592 8.74805 10.4034 8.74805 12.67C8.74805 14.9367 10.6393 16.7742 12.9722 16.7742Z"
stroke="#808080"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M16.1396 15.7478L17.9887 17.5443"
stroke="#808080"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
opacity="0.3"
d="M24.6162 12.6697C24.6162 18.8967 19.4165 23.9691 12.9717 23.9691C6.5269 23.9691 1.32715 18.8967 1.32715 12.6697C1.32715 6.44274 6.5269 1.37036 12.9717 1.37036C19.4165 1.37036 24.6162 6.44274 24.6162 12.6697Z"
stroke="#808080"
/>
</svg>
</template>

22
src/components/icons/social/IconEmail.vue Normal file
View File

@ -0,0 +1,22 @@
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
width="31"
height="30"
viewBox="0 0 31 30"
fill="none"
>
<path
d="M15.2719 30C23.4615 30 30.1005 23.2843 30.1005 15C30.1005 6.71573 23.4615 0 15.2719 0C7.08234 0 0.443359 6.71573 0.443359 15C0.443359 23.2843 7.08234 30 15.2719 30Z"
fill="#FFA300"
/>
<path
d="M20.9197 9.21313L22.8402 17.9423L9.66304 20.9037L7.70508 11.9942L15.8716 17.2463L20.9197 9.21313Z"
fill="white"
/>
<path
d="M19.3932 9.09302L9.26562 11.3742L15.4554 15.3575L19.3932 9.09302Z"
fill="white"
/>
</svg>
</template>

23
src/components/icons/social/IconLinkedin.vue Normal file
View File

@ -0,0 +1,23 @@
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
width="30"
height="30"
viewBox="0 0 30 30"
fill="none"
>
<path
d="M14.8286 30C23.0182 30 29.6571 23.2843 29.6571 15C29.6571 6.71573 23.0182 0 14.8286 0C6.63898 0 0 6.71573 0 15C0 23.2843 6.63898 30 14.8286 30Z"
fill="#2574A0"
/>
<path d="M11.1002 12.2979H7.79102V23.1089H11.1002V12.2979Z" fill="white" />
<path
d="M9.42749 10.8805C10.5097 10.8805 11.3823 9.98515 11.3823 8.88412C11.3823 7.78309 10.5066 6.89087 9.42749 6.89087C8.34529 6.89087 7.47266 7.78309 7.47266 8.88412C7.47266 9.98832 8.34842 10.8805 9.42749 10.8805Z"
fill="white"
/>
<path
d="M16.3875 17.433C16.3875 15.9144 17.0788 15.0063 18.4049 15.0063C19.6216 15.0063 20.2065 15.8764 20.2065 17.433C20.2065 18.9897 20.2065 23.109 20.2065 23.109H23.5C23.5 23.109 23.5 19.1605 23.5 16.2624C23.5 13.3643 21.8767 11.9658 19.6122 11.9658C17.3446 11.9658 16.3907 13.7534 16.3907 13.7534V12.298H13.2129V23.109H16.3875C16.3875 23.109 16.3875 19.0972 16.3875 17.433Z"
fill="white"
/>
</svg>
</template>

43
src/components/icons/social/IconShare.vue Normal file
View File

@ -0,0 +1,43 @@
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
width="30"
height="30"
viewBox="0 0 30 30"
fill="none"
>
<g opacity="0.3">
<circle cx="15" cy="15" r="14.5" stroke="#515252" />
<path
d="M18.7837 13.0906C20.1916 13.0906 21.3329 11.951 21.3329 10.5453C21.3329 9.13957 20.1916 8 18.7837 8C17.3757 8 16.2344 9.13957 16.2344 10.5453C16.2344 11.951 17.3757 13.0906 18.7837 13.0906Z"
stroke="#515252"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M18.7837 22.4212C20.1916 22.4212 21.3329 21.2816 21.3329 19.8759C21.3329 18.4701 20.1916 17.3306 18.7837 17.3306C17.3757 17.3306 16.2344 18.4701 16.2344 19.8759C16.2344 21.2816 17.3757 22.4212 18.7837 22.4212Z"
stroke="#515252"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M9.54928 18.1809C10.9572 18.1809 12.0986 17.0414 12.0986 15.6356C12.0986 14.2299 10.9572 13.0903 9.54928 13.0903C8.14135 13.0903 7 14.2299 7 15.6356C7 17.0414 8.14135 18.1809 9.54928 18.1809Z"
stroke="#515252"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M16.5558 11.7834L11.8516 14.5459"
stroke="#515252"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M16.1024 19.2982L11.9805 17.0154"
stroke="#515252"
stroke-linecap="round"
stroke-linejoin="round"
/>
</g>
</svg>
</template>

18
src/components/icons/social/IconTwitter.vue Normal file
View File

@ -0,0 +1,18 @@
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
width="31"
height="30"
viewBox="0 0 31 30"
fill="none"
>
<path
d="M15.52 30C23.7096 30 30.3486 23.2843 30.3486 15C30.3486 6.71573 23.7096 0 15.52 0C7.33039 0 0.691406 6.71573 0.691406 15C0.691406 23.2843 7.33039 30 15.52 30Z"
fill="#19BDD8"
/>
<path
d="M9.32031 20.176C10.6183 21.0176 12.1603 21.508 13.818 21.508C19.2634 21.508 22.3411 16.8539 22.1565 12.6808C22.7289 12.2631 23.2262 11.7411 23.6203 11.1463C23.0948 11.3836 22.5287 11.5418 21.9345 11.6145C22.5381 11.2475 23.0041 10.6654 23.2231 9.97247C22.657 10.311 22.0283 10.561 21.3621 10.6938C20.8272 10.118 20.0641 9.75732 19.2196 9.75732C17.3273 9.75732 15.9355 11.5449 16.364 13.399C13.9275 13.2756 11.7662 12.0954 10.3181 10.2983C9.54864 11.6335 9.92084 13.3768 11.2251 14.2595C10.7434 14.2437 10.2899 14.1108 9.89581 13.8894C9.86454 15.2657 10.8373 16.5502 12.2479 16.8349C11.835 16.9488 11.3815 16.9742 10.9248 16.8856C11.297 18.0657 12.3792 18.9231 13.6647 18.9453C12.4293 19.9261 10.8779 20.3627 9.32031 20.176Z"
fill="white"
/>
</svg>
</template>

26
src/components/icons/social/IconWhatsapp.vue Normal file
View File

@ -0,0 +1,26 @@
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
width="30"
height="30"
viewBox="0 0 30 30"
fill="none"
>
<path
d="M15.1723 30C23.3619 30 30.0009 23.2843 30.0009 15C30.0009 6.71573 23.3619 0 15.1723 0C6.98273 0 0.34375 6.71573 0.34375 15C0.34375 23.2843 6.98273 30 15.1723 30Z"
fill="#92D107"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M22.5625 14.073C22.4655 10.153 19.2721 7.00488 15.3405 7.00488C11.4559 7.00488 8.29062 10.0802 8.12172 13.9401C8.11859 14.0477 8.11547 14.1521 8.11547 14.2597C8.11547 15.6328 8.49392 16.911 9.15075 18.0057L7.84961 21.8941L11.85 20.6064C12.8853 21.1823 14.0769 21.5113 15.3405 21.5113C19.3315 21.5113 22.5656 18.2652 22.5656 14.2565C22.5656 14.1964 22.5656 14.1331 22.5625 14.073ZM15.3405 20.3565C14.1051 20.3565 12.9603 19.9863 11.997 19.3472L9.66369 20.1002L10.4206 17.8349C9.69184 16.8288 9.26334 15.5948 9.26334 14.2597C9.26334 14.0604 9.27273 13.8642 9.29462 13.668C9.59175 10.5801 12.1909 8.16287 15.3405 8.16287C18.5308 8.16287 21.1518 10.6434 21.3958 13.7851C21.4083 13.9433 21.4177 14.1015 21.4177 14.2597C21.4177 17.6197 18.6903 20.3565 15.3405 20.3565Z"
fill="white"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M18.6525 15.7213C18.4742 15.6328 17.6047 15.2025 17.442 15.1423C17.2794 15.0822 17.1605 15.0538 17.0417 15.2309C16.9228 15.4081 16.5819 15.8099 16.4787 15.927C16.3723 16.0472 16.2722 16.0599 16.094 15.9713C15.9188 15.8827 15.3464 15.696 14.6708 15.0886C14.1454 14.6203 13.7888 14.0382 13.6856 13.861C13.5855 13.6838 13.6762 13.5857 13.7638 13.4971C13.8451 13.4149 13.939 13.2883 14.0297 13.1871C14.0547 13.1554 14.0735 13.1301 14.0953 13.1016C14.136 13.0352 14.1673 12.9751 14.2079 12.8897C14.2674 12.7694 14.2392 12.6682 14.1954 12.5796C14.1516 12.491 13.7951 11.6146 13.6481 11.2603C13.5042 10.9059 13.3541 10.966 13.2477 10.966C13.1476 10.966 13.0288 10.9502 12.9099 10.9502C12.7911 10.9502 12.5972 10.9945 12.4377 11.1717C12.275 11.3488 11.8184 11.7823 11.8184 12.6555C11.8184 12.8612 11.8559 13.0668 11.9091 13.2598C12.0873 13.8863 12.4752 14.402 12.5409 14.4906C12.6284 14.6077 13.7669 16.4617 15.5654 17.1767C17.367 17.8854 17.367 17.6481 17.6922 17.6197C18.0175 17.5912 18.74 17.1925 18.887 16.7749C19.0372 16.3604 19.0372 16.0061 18.9934 15.9302C18.9465 15.8542 18.8276 15.8099 18.6525 15.7213Z"
fill="white"
/>
</svg>
</template>

2
src/components/logo/LogoBlack.vue
View File

@ -48,5 +48,3 @@
</defs>
</svg>
</template>
<style></style>

39
src/components/quasar-components/carousel/ProductCarousel.vue Normal file
View File

@ -0,0 +1,39 @@
<template>
<q-carousel
animated
v-model="slide"
v-model:fullscreen="fullscreen"
thumbnails
infinite
class="product-gallery"
>
<slot></slot>
<template #control>
<q-carousel-control position="top-right" :offset="[18, 18]">
<q-btn
push
round
dense
color="primary"
:icon="fullscreen ? 'fullscreen_exit' : 'fullscreen'"
@click="fullscreen = !fullscreen"
/>
</q-carousel-control>
</template>
</q-carousel>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
name: 'product-carousel',
components: {},
setup() {
return { slide: ref(1), fullscreen: ref(false) };
},
});
</script>
<style lang="scss" scoped></style>

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

@ -8,7 +8,7 @@
navigation-position="right"
style="min-height: 100dvh"
v-model="slide"
:navigation="mobileStore.screenWidth > 768"
:navigation="screenWidth >= 768"
autoplay
infinite
animated
@ -35,7 +35,7 @@
</p>
</header>
<main class="carousel-content-body">
<div class="carousel-content-body">
<div class="carousel-content-item">
<Calendar />
</div>
@ -47,7 +47,7 @@
<button class="btn carousel-content-item">
<IconSearch /> ver disponibilidad
</button>
</main>
</div>
<footer class="carousel-content-footer">
<IconMouse />
@ -60,11 +60,12 @@
import { useIntersectionObserver } from '@vueuse/core';
import { PropType, defineComponent, ref } from 'vue';
import { storeToRefs } from 'pinia';
import Calendar from 'src/components/@inputs/Calendar.vue';
import PostalCode from 'src/components/@inputs/PostalCode.vue';
import IconMouse from 'src/components/icons/IconMouse.vue';
import IconSearch from 'src/components/icons/IconSearch.vue';
import { mobileStore } from 'src/stores/mobileNav';
import { useMobileStore } from 'src/stores/mobileNav';
export default defineComponent({
name: 'vertical-carousel-imgs',
@ -75,16 +76,21 @@ export default defineComponent({
},
},
setup() {
const mobileStore = useMobileStore();
const { screenWidth } = storeToRefs(mobileStore);
const { handleResize } = mobileStore;
const target = ref(null);
const navPos = ref('bottom');
const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
useIntersectionObserver(target, ([{ isIntersecting }]) => {
mobileStore.isCarouselVisible = isIntersecting;
});
document.addEventListener('resize', handleResize);
return {
slide: ref('style'),
navPos,
target,
mobileStore,
screenWidth,
};
},
components: { IconMouse, IconSearch, Calendar, PostalCode },

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

@ -14,9 +14,9 @@
</p>
</header>
<router-link class="btn outlined rounded questions-section-btn" to="/">
<RouterLink class="btn outlined rounded questions-section-btn" to="/">
Habla con nuestro experto <IconChatRoundedFill />
</router-link>
</RouterLink>
</container>
</section>
</template>
@ -24,10 +24,11 @@
<script lang="ts">
import { defineComponent } from 'vue';
import IconChatRoundedFill from '../icons/IconChatRoundedFill.vue';
import Container from '../ui/Container.vue';
export default defineComponent({
name: 'dudas-section',
components: { IconChatRoundedFill },
components: { IconChatRoundedFill, Container },
props: {
isWhite: {
type: Boolean,

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

@ -6,16 +6,16 @@
<h4 class="subtitle">Amplia red de floristerías</h4>
</header>
<main class="info-content-body">
<div class="info-content-body">
<p class="info-content-paragraph">
Conectamos a los floristas con los clientes de forma fácil, rápida y
sin intermediarios.
</p>
<router-link class="btn rounded outlined green-color pd-icon" to="/">
<RouterLink class="btn rounded outlined green-color pd-icon" to="/">
¿Quieres saber más? <IconChatRoundedFill />
</router-link>
</main>
</RouterLink>
</div>
</div>
<div class="info-content service">
@ -24,7 +24,7 @@
<h4 class="subtitle">Servicio de reparto propio</h4>
</header>
<main class="info-content-body">
<div class="info-content-body">
<p class="info-content-paragraph">
Nuestra amplia experiencia en el sector nos ha permitido mejorar
nuestros servicios y adaptarnos al entorno. Consigue un plus de
@ -32,7 +32,7 @@
especializado y en frío. Además, trabajamos con varias agencias de
reparto.
</p>
</main>
</div>
</div>
</section>
</template>

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

@ -13,7 +13,7 @@
</p>
</header>
<main class="question-form">
<div class="question-form">
<header class="question-form-header">
<p class="question-form-paragraph one">
<IconQuestion />Si no encuentras lo que buscas o necesitas ayuda
@ -77,7 +77,7 @@
label="*Acepto los términos y condiciones (Ver), y recibir respuesta comercial por parte de Verdnatura"
/>
</form>
</main>
</div>
</container>
</section>
</template>

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

@ -1,9 +1,9 @@
<template>
<section
class="reasons-container"
style="background-image: url('assets/reasons-bg.png')"
style="background-image: url('../../assets/reasons-bg.png')"
>
<container class="reasons-container-body container-modded">
<Container class="reasons-container-body container-modded">
<header class="reasons-container-header">
<LogoWhite />
@ -12,7 +12,7 @@
</h5>
</header>
<main class="reasons-container-main">
<div class="reasons-container-main">
<ul class="reasons-list-body">
<li class="reason-main-item">
<IconQuality />
@ -41,14 +41,14 @@
</li>
</ul>
<router-link class="btn rounded outlined white-color pd-icon" to="/">
<RouterLink class="btn rounded outlined white-color pd-icon" to="/">
¿Tienes dudas? hablemos <IconChatRoundedFill />
</router-link>
</main>
</container>
</RouterLink>
</div>
</Container>
<footer class="reasons-container-footer">
<container class="container-modded">
<Container class="container-modded">
<ul class="reasons-list-footer">
<li class="reason-footer-item">
<IconCheck />
@ -76,7 +76,7 @@
</p>
</li>
</ul>
</container>
</Container>
</footer>
</section>
</template>

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

@ -1,6 +1,6 @@
<template>
<div class="card-container" :class="size">
<router-link
<RouterLink
:to="`/product/${id}`"
class="card-container-head"
role="heading"
@ -16,9 +16,9 @@
<IconEyes />
<p class="head-hovered-paragraph">Ver producto</p>
</div>
</router-link>
</RouterLink>
<main class="card-container-body">
<div class="card-container-body">
<p class="card-name" v-if="productName">{{ productName }}</p>
<div class="card-values">
@ -27,7 +27,7 @@
{{ valueWithDiscount() }}€
</p>
</div>
</main>
</div>
</div>
</template>

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

@ -1,7 +1,11 @@
<template>
<div class="custom-container" :class="cardContainer && 'cards-container'">
<component
:is="tag"
class="custom-container"
:class="cardContainer && 'cards-container'"
>
<slot></slot>
</div>
</component>
</template>
<script>
@ -18,6 +22,10 @@ export default defineComponent({
type: Boolean,
default: false,
},
tag: {
type: String,
default: 'div',
},
},
});
</script>

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

@ -1,43 +1,56 @@
<template>
<div class="mobile-nav-container">
<div class="mobile-nav-container" :class="!isOpenNav && 'hide'">
<header class="mobile-nav-links">
<router-link class="mobile-link" to="/">Ramos</router-link>
<router-link class="mobile-link" to="/">Plantas</router-link>
<router-link class="mobile-link" to="/">Floranet</router-link>
<router-link class="mobile-link" to="/">FAQs</router-link>
<router-link class="mobile-link" to="/">Contacta</router-link>
<RouterLink class="mobile-link" to="/">Ramos</RouterLink>
<RouterLink class="mobile-link" to="/">Plantas</RouterLink>
<RouterLink class="mobile-link" to="/">Floranet</RouterLink>
<RouterLink class="mobile-link" to="/">FAQs</RouterLink>
<RouterLink class="mobile-link" to="/">Contacta</RouterLink>
</header>
<main class="mobile-nav-lang">
<div class="mobile-nav-lang">
<p class="mobile-lang-paragraph">Idioma</p>
<select class="mobile-lang-select" name="lang">
<option value="">Español</option>
</select>
</main>
</div>
<footer class="mobile-nav-footer">
<router-link to="/" class="btn outlined rounded sm-btn">
<RouterLink to="/" class="btn outlined rounded sm-btn">
¿Tienes dudas? hablemos <IconChatRoundedFill />
</router-link>
</RouterLink>
</footer>
</div>
</template>
<script lang="ts">
import { mobileStore } from 'src/stores/mobileNav';
import { useMobileStore } from 'src/stores/mobileNav';
import { defineComponent } from 'vue';
import { storeToRefs } from 'pinia';
import { defineComponent, watch } from 'vue';
import IconChatRoundedFill from '../icons/IconChatRoundedFill.vue';
export default defineComponent({
name: 'mobile-nav',
components: { IconChatRoundedFill },
setup() {
if (mobileStore.isOpenNav) {
document.body.style.overflow = 'hidden';
}
const mobileStore = useMobileStore();
const { isOpenNav } = storeToRefs(mobileStore);
return;
const setBodyStyle = (overflow: 'hidden' | 'visible') => {
document.body.style.overflow = overflow;
};
watch(isOpenNav, (newValue) => {
if (newValue) {
setBodyStyle('hidden');
window.scrollTo(0, 0);
return;
}
setBodyStyle('visible');
});
return { isOpenNav };
},
});
</script>

12
src/css/app.scss
View File

@ -35,8 +35,17 @@
}
}
.hide {
display: none;
visibility: hidden;
opacity: 0;
}
.product-layout {
padding-top: 200px !important;
@media only screen and (max-width: $med-md) {
padding-top: 90px !important;
}
}
.green-text {
@ -47,7 +56,7 @@
background-color: $secondary-10;
}
button,
// button,
.btn {
all: unset;
user-select: none;
@ -63,6 +72,7 @@ button,
line-height: 22px;
font-size: $font-18;
border-radius: 10px;
position: relative;
cursor: pointer;
transition: 100ms ease-out;
&:disabled {

2
src/css/components/calendar-postalcode.scss
View File

@ -1,7 +1,7 @@
.custom-input-el {
display: flex;
gap: 9px;
align-items: end;
align-items: flex-end;
& svg {
margin-bottom: 4px;
}

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

@ -67,7 +67,7 @@ $text-default: #6d6d6d;
$black: #101010;
$text-black: $black;
$text-gray: #6d6d6d;
$text-gray: $text-default;
$text-white: $white;
$paragraph-color: #50535a;
@ -75,6 +75,7 @@ $text-h1: $white;
$text-h2: $white;
$text-subtitle: $white;
$text-muted: #58585a;
$text-muted-one: #525151;
$text-title-100: $black;
$text-title-80: #10101080;
@ -123,6 +124,7 @@ $font-xxxxsm: 14px;
$font-xxxxxsm: 12px;
$font-copy: 10px;
$font-40: 2.5rem;
$font-35: 2.1875rem;
$font-30: 1.875rem;
$font-28: 1.75rem;

10
src/layouts/CategoryLayout.vue
View File

@ -3,7 +3,7 @@
<q-no-ssr>
<header-secondary />
</q-no-ssr>
<mobile-nav v-if="mobileStore.isOpenNav" />
<mobile-nav />
<q-page-container class="no-padding padding-top more" role="main">
<router-view />
@ -24,7 +24,8 @@ 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 { mobileStore } from 'src/stores/mobileNav';
import { storeToRefs } from 'pinia';
import { useMobileStore } from 'src/stores/mobileNav';
export default defineComponent({
name: 'CategoryLayout',
@ -36,7 +37,10 @@ export default defineComponent({
MobileNav,
},
setup() {
return { mobileStore };
const mobileStore = useMobileStore();
const { isOpenNav } = storeToRefs(mobileStore);
return { isOpenNav };
},
});
</script>

10
src/layouts/CheckoutLayout.vue
View File

@ -3,7 +3,7 @@
<q-no-ssr>
<header-secondary />
</q-no-ssr>
<mobile-nav v-if="mobileStore.isOpenNav" />
<mobile-nav />
<q-page-container class="no-padding padding-top more" role="main">
<router-view />
@ -18,17 +18,21 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { storeToRefs } from 'pinia';
import FooterComponent from 'src/components/footer/FooterComponent.vue';
import HeaderSecondary from 'src/components/header/HeaderSecondary.vue';
import QuestionSection from 'src/components/sections/QuestionSection.vue';
import MobileNav from 'src/components/ui/MobileNav.vue';
import { mobileStore } from 'src/stores/mobileNav';
import { useMobileStore } from 'src/stores/mobileNav';
export default defineComponent({
name: 'ProductLayout',
components: { HeaderSecondary, FooterComponent, QuestionSection, MobileNav },
setup() {
return { mobileStore };
const mobileStore = useMobileStore();
const { isOpenNav } = storeToRefs(mobileStore);
return { isOpenNav };
},
});
</script>

10
src/layouts/DefaultLayout.vue
View File

@ -3,7 +3,7 @@
<q-no-ssr>
<header-secondary />
</q-no-ssr>
<mobile-nav v-if="mobileStore.isOpenNav" />
<mobile-nav />
<q-page-container class="no-padding more product-layout" role="main">
<router-view />
@ -18,17 +18,21 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { storeToRefs } from 'pinia';
import FooterComponent from 'src/components/footer/FooterComponent.vue';
import HeaderSecondary from 'src/components/header/HeaderSecondary.vue';
import ReasonsSection from 'src/components/sections/ReasonsSection.vue';
import MobileNav from 'src/components/ui/MobileNav.vue';
import { mobileStore } from 'src/stores/mobileNav';
import { useMobileStore } from 'src/stores/mobileNav';
export default defineComponent({
name: 'DefaultLayout',
components: { FooterComponent, ReasonsSection, HeaderSecondary, MobileNav },
setup() {
return { mobileStore };
const mobileStore = useMobileStore();
const { isOpenNav } = storeToRefs(mobileStore);
return { isOpenNav };
},
});
</script>

10
src/layouts/HomeLayout.vue
View File

@ -3,7 +3,7 @@
<q-no-ssr>
<header-primary />
</q-no-ssr>
<mobile-nav v-if="mobileStore.isOpenNav" />
<mobile-nav />
<q-page-container class="no-padding" role="main">
<router-view />
@ -20,13 +20,14 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { storeToRefs } from 'pinia';
import FooterComponent from 'src/components/footer/FooterComponent.vue';
import HeaderPrimary from 'src/components/header/HeaderPrimary.vue';
import InfoSection from 'src/components/sections/InfoSection.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 { mobileStore } from 'src/stores/mobileNav';
import { useMobileStore } from 'src/stores/mobileNav';
export default defineComponent({
name: 'HomeLayout',
@ -39,7 +40,10 @@ export default defineComponent({
MobileNav,
},
setup() {
return { mobileStore };
const mobileStore = useMobileStore();
const { isOpenNav } = storeToRefs(mobileStore);
return { isOpenNav };
},
});
</script>

26
src/mock/cards.ts
View File

@ -1,3 +1,5 @@
import { fakerES } from '@faker-js/faker';
export const cardMock = Array.from({ length: 10 }, (_, i) => ({
imgSrc: `assets/flowers/flower-${i + 1}.png`,
discount: i % 2 === 0 ? '10' : '',
@ -7,3 +9,27 @@ export const cardMock = Array.from({ length: 10 }, (_, i) => ({
id: i + 1,
attributes: [''],
}));
interface GenerateFlowersParams {
length: number;
}
export function generateFlowers({ length }: GenerateFlowersParams) {
const flowersMock = Array.from({ length }, (_, i) => ({
id: i + 1,
title: fakerES.commerce.productName(),
description: fakerES.commerce.productDescription(),
price: fakerES.commerce.price({
symbol: '€',
min: 20,
max: 200,
dec: 0,
}),
sku: fakerES.commerce.isbn({ separator: '', variant: 13 }),
category: fakerES.commerce.productMaterial(),
images: Array.from({ length: fakerES.number.int({ min: 2, max: 6 }) }, () =>
fakerES.image.urlPicsumPhotos()
),
}));
return flowersMock;
}

14
src/pages/CategoryPage.vue
View File

@ -21,7 +21,7 @@
</p>
<button
class="filter-btn availability"
class="btn filter-btn availability"
type="button"
@click="modalStore.openModal({ modal: 'availability' })"
>
@ -32,7 +32,7 @@
<div class="product-right-filters">
<button
class="filter-item filters filter-btn"
class="btn filter-item filters filter-btn"
type="button"
@click="modalStore.openModal({ modal: 'filters' })"
>
@ -46,7 +46,7 @@
<span class="green-text">precio</span>
</p>
<button type="button" class="filter-btn price-order">
<button type="button" class="btn filter-btn price-order">
<IconArrowDownWhite />
</button>
</div>
@ -55,7 +55,7 @@
</container>
</header>
<main class="products-section-body">
<div class="products-section-body">
<container cardContainer>
<card
v-for="(
@ -70,12 +70,12 @@
:id="id"
/>
</container>
</main>
</div>
<footer class="products-section-footer">
<router-link class="btn rounded outlined" to="/">
<RouterLink class="btn rounded outlined" to="/">
Ver todos los diseños <IconArrowCircleFilledRight />
</router-link>
</RouterLink>
</footer>
</section>

4
src/pages/CheckoutPage.vue
View File

@ -10,7 +10,7 @@
</p>
</header>
<main class="checkout-container">
<div class="checkout-container">
<div class="checkout-steps">
<div
class="step-item-container"
@ -140,7 +140,7 @@
</div>
<div class="checkout-inform"></div>
</div>
</main>
</div>
</div>
</q-page>
</template>

181
src/pages/HomePage.vue Normal file
View File

@ -0,0 +1,181 @@
<template>
<q-page>
<q-no-ssr>
<VerticalCarouselImgs :imgsArr="slidesContent" class="home-carousel" />
</q-no-ssr>
<!-- <p v-if="mobileStore.isCarouselVisible">Está visível</p>
<p v-if="!mobileStore.isCarouselVisible">Não está visível</p>
<p v-if="mobileStore.isOpenNav">Hamburg ativo</p>
<p v-if="!mobileStore.isOpenNav">Hamburg não ativo</p> -->
<section class="products-section">
<header class="products-section-header section-header">
<h3 class="products-header-title subtitle">
Diseños de ramos más vendidos
</h3>
<p class="products-header-paragraph section-paragraph">
Descripción SEO: Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.
</p>
</header>
<div class="products-body">
<Container cardContainer>
<Card
v-for="(
{ imgSrc, discount, isNew, title, value, id }, i
) in cardMock"
:productValue="value"
:productName="title"
:discount="discount"
:imgSrc="imgSrc"
:isNew="isNew"
:key="i"
:id="id"
/>
</Container>
<RouterLink class="btn rounded outlined" to="/">
Ver todos los diseños <IconArrowCircleFilledRight />
</RouterLink>
</div>
</section>
<section class="products-selection">
<header class="products-selection-header section-header">
<h3 class="products-selection-title subtitle">
Nuestra selección de plantas para el verano
</h3>
<p class="products-selection-paragraph section-paragraph">
Descripción SEO: Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.
</p>
</header>
<div class="products-selection-body">
<!-- <Container> </Container> -->
</div>
<footer class="products-selection-footer">
<RouterLink class="btn rounded outlined pd-icon" to="/">
Ver todas las plantas <IconArrowCircleFilledRight />
</RouterLink>
</footer>
</section>
</q-page>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import IconArrowCircleFilledRight from 'src/components/icons/IconArrowCircleFilledRight.vue';
import VerticalCarouselImgs from 'src/components/quasar-components/carousel/VerticalCarouselImgs.vue';
import Card from 'src/components/ui/Card.vue';
import Container from 'src/components/ui/Container.vue';
import { cardMock } from 'src/mock/cards';
import { useMobileStore } from 'src/stores/mobileNav';
export default defineComponent({
name: 'HomePage',
components: {
IconArrowCircleFilledRight,
VerticalCarouselImgs,
// HorizontalCarousel,
// ButtonComponent,
// SwiperSlide,
Container,
Card,
},
setup() {
const mobileStore = useMobileStore();
const slidesContent = [
'assets/1.jpg',
'assets/2.jpg',
'assets/3.jpg',
'assets/4.jpg',
'assets/5.jpg',
];
return {
slidesContent,
cardMock,
mobileStore,
};
},
});
</script>
<style lang="scss" scoped>
.home-carousel {
margin-bottom: 132px;
@media only screen and (max-width: $med-md) {
margin-bottom: 67px;
}
}
.section-header {
text-align: center;
display: flex;
flex-direction: column;
gap: 25px;
margin-bottom: 65px;
padding-inline: 72px;
& .section-paragraph {
font-size: $font-16;
font-family: $font-questrial;
line-height: 26px;
}
@media only screen and (max-width: $med-xmd) {
padding-inline: 16px;
gap: 22px;
margin-bottom: 33px;
}
}
.products-section {
text-align: center;
margin-bottom: 87px;
& .products-section-header {
& .products-header-title {
}
& .products-header-paragraph {
}
}
& .products-body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 99px;
}
@media only screen and (max-width: $med-xmd) {
& .products-body {
}
}
}
.products-selection {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: $secondary-10;
padding-block: 104px 73px;
@media only screen and (max-width: $med-xmd) {
padding-block: 48px 41px;
}
}
</style>

532
src/pages/ProductPage.vue
View File

@ -2,59 +2,141 @@
<q-page>
<!-- <p>{{ $route.params.id }}</p> -->
<div class="q-pa-md">
<q-carousel
animated
v-model="slide"
v-model:fullscreen="fullscreen"
thumbnails
infinite
>
<Container class="product-container" tag="section">
<ProductCarousel>
<q-carousel-slide
:name="1"
img-src="https://cdn.quasar.dev/img/mountains.jpg"
class="product-gallery-item"
/>
<q-carousel-slide
:name="2"
img-src="https://cdn.quasar.dev/img/parallax1.jpg"
class="product-gallery-item"
/>
<q-carousel-slide
:name="3"
img-src="https://cdn.quasar.dev/img/parallax2.jpg"
class="product-gallery-item"
/>
<q-carousel-slide
:name="4"
img-src="https://cdn.quasar.dev/img/quasar.jpg"
class="product-gallery-item"
/>
</ProductCarousel>
<template #control>
<q-carousel-control position="top-right" :offset="[18, 18]">
<q-btn
push
round
dense
color="white"
text-color="primary"
:icon="fullscreen ? 'fullscreen_exit' : 'fullscreen'"
@click="fullscreen = !fullscreen"
/>
</q-carousel-control>
</template>
</q-carousel>
</div>
<div class="product-content">
<header class="product-content-header">
<h3 class="product-content-title subtitle">Ramo Lucena</h3>
<dudas-section isWhite />
<div class="product-header-block">
<p class="product-content-paragraph">
SKU:
<span class="green-text">52G201</span>
</p>
<p>aqui</p>
<img
src="assets/flowers/flower-1.png"
style="height: 100px; width: 200px"
alt=""
/>
<p class="product-content-paragraph">
Categoría:
<span class="green-text">Ramos</span>
</p>
</div>
</header>
<container class="like-anoter-container gray-bg">
<h3 class="subtitle">Quizás también te gusten estos ramos</h3>
<container cardContainer>
<div class="product-content-body">
<div class="product-content-paragraphs">
<p class="product-price green-text">30€</p>
<p class="product-delivery green-text">Envío Gratuito</p>
<p class="product-description">
Descripción del producto, nombrar las flores y verdes, productos
utilizados en único ramo. Lorem ipsum dolor sit amet,cosed do
eiusmode tempor incididu ut labore et dolo magna alic...
</p>
</div>
<form class="product-form" @submit.prevent="handleDedicationSubmit">
<div class="product-dedication">
<header class="product-dedication-header">
<IconPencilGreen />
<label class="product-dedication-paragraph" for="">
¿Deseas añadir una dedicatoria?
</label>
</header>
<div class="product-dedication-body">
<q-input
v-model="dedication"
bg-color="white"
standout
color="primary"
/>
</div>
</div>
<q-btn type="submit" color="primary" class="btn sm-btn">
AÑADIR AL CARRITO
</q-btn>
</form>
</div>
<footer class="product-content-footer">
<p class="product-share-paragraph">Conmparte con tus amigos</p>
<div class="product-share-content">
<a href="#" class="product-share-item"><IconShare /></a>
<a href="#" class="product-share-item"><IconLinkedin /></a>
<a href="#" class="product-share-item"><IconTwitter /></a>
<a href="#" class="product-share-item"><IconEmail /></a>
<a href="#" class="product-share-item"><IconWhatsapp /></a>
</div>
</footer>
</div>
<div class="product-pag-block">
<q-btn
color="white"
class="btn outlined rounded sm-btn product-pag-item product-prev-btn"
to="/"
>
<IconArrowCircleFilledLeft />
<div class="btn-pag-paragraphs">
<p class="btn-paragraph-top green-text">Produto anterior</p>
<p class="product-paragraph-bottom">Ramo Leticia</p>
</div>
</q-btn>
<q-btn
color="white"
class="btn outlined rounded sm-btn product-pag-item product-next-btn"
to="/"
>
<div class="btn-pag-paragraphs">
<p class="btn-paragraph-top green-text">Siguiente producto</p>
<p class="product-paragraph-bottom">Ramo Rosas</p>
</div>
<IconArrowCircleFilledRight />
</q-btn>
</div>
</Container>
<DudasSection isWhite />
<Container class="like-another-container gray-bg" tag="section">
<header class="like-another-header">
<h3 class="like-another-title subtitle">
Quizás también te gusten estos ramos
</h3>
<p class="like-another-paragraph">
Descripción SEO: Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.
</p>
</header>
<Container cardContainer>
<template
v-for="({ imgSrc, discount, isNew, title, value, id }, i) in cardMock"
>
@ -62,37 +144,405 @@
v-if="i < 4"
:productValue="value"
:productName="title"
:discount="discount"
:discount="discount.toString()"
:imgSrc="imgSrc"
:isNew="isNew"
:key="i"
:id="id"
/>
</template>
</container>
</container>
</Container>
</Container>
</q-page>
</template>
<script lang="ts">
import { fakerES } from '@faker-js/faker';
import { storeToRefs } from 'pinia';
import { useMeta } from 'quasar';
import { MetaOptions } from 'quasar/dist/types/meta';
import { defineComponent, ref } from 'vue';
import IconArrowCircleFilledLeft from 'src/components/icons/IconArrowCircleFilledLeft.vue';
import IconArrowCircleFilledRight from 'src/components/icons/IconArrowCircleFilledRight.vue';
import IconPencilGreen from 'src/components/icons/IconPencilGreen.vue';
import IconEmail from 'src/components/icons/social/IconEmail.vue';
import IconLinkedin from 'src/components/icons/social/IconLinkedin.vue';
import IconShare from 'src/components/icons/social/IconShare.vue';
import IconTwitter from 'src/components/icons/social/IconTwitter.vue';
import IconWhatsapp from 'src/components/icons/social/IconWhatsapp.vue';
import ProductCarousel from 'src/components/quasar-components/carousel/ProductCarousel.vue';
import DudasSection from 'src/components/sections/DudasSection.vue';
import Card from 'src/components/ui/Card.vue';
import Container from 'src/components/ui/Container.vue';
import { cardMock } from 'src/mock/cards';
// import { cardMock } from 'src/mock/cards';
import { useTextInputStore } from 'src/stores/textInput';
const metaData: MetaOptions = {
title: 'Product',
titleTemplate: (title) => `${title} - 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)',
},
},
};
export default defineComponent({
name: 'ProductPage',
components: { DudasSection, Container, Card },
components: {
IconPencilGreen,
// IconSearchGray,
IconWhatsapp,
IconLinkedin,
IconTwitter,
IconShare,
IconEmail,
DudasSection,
Container,
Card,
IconArrowCircleFilledRight,
IconArrowCircleFilledLeft,
ProductCarousel,
},
setup() {
return { cardMock, slide: ref(1), fullscreen: ref(false) };
useMeta(metaData);
const textInputStore = useTextInputStore();
const { dedication } = storeToRefs(textInputStore);
const { handleDedicationSubmit } = textInputStore;
const cardMock = Array.from({ length: 4 }, (_, i) => ({
id: i + 1,
title: fakerES.lorem.word(),
attributes: [''],
imgSrc: `../assets/flowers/flower-${i + 1}.png`,
value: fakerES.commerce.price({ symbol: '€', min: 15, max: 200 }),
isNew: fakerES.datatype.boolean(),
discount: fakerES.number.int({ min: 5, max: 25 }),
}));
return {
cardMock,
slide: ref(1),
fullscreen: ref(false),
handleDedicationSubmit,
dedication,
};
},
});
</script>
<style lang="scss" scoped>
.like-anoter-container {
<style lang="scss">
.product-container {
display: flex;
flex-wrap: wrap;
gap: 136px;
margin-bottom: 100px;
& .product-gallery {
/* flex: 1 0 min(100%, 562px); */
height: 622px;
flex: 1 0 min(100%, 500px);
overflow: initial;
& .q-carousel__slides-container .q-panel {
border-radius: 15px;
overflow: hidden;
}
& .q-carousel__navigation {
bottom: -127px;
left: 0;
right: 0;
& .q-carousel__navigation-inner {
justify-content: flex-start;
gap: 19px;
& .q-carousel__thumbnail {
width: 97px;
height: 107px;
object-fit: cover;
border-radius: 10px;
opacity: 1;
flex: 0 0 97px;
position: relative;
&.q-carousel__thumbnail--active {
border: 1px solid $primary;
}
}
}
}
@media only screen and (max-width: $med-md) {
height: 396px;
& .q-carousel__navigation {
bottom: -83px;
& .q-carousel__navigation-inner {
gap: 12px;
& .q-carousel__thumbnail {
width: 61px;
height: 68px;
flex: 0 0 61px;
&::after {
content: '';
}
&.q-carousel__thumbnail--active {
border: 1px solid $primary;
}
}
}
}
}
}
& .product-content {
flex: 1 0 min(100%, 466px);
margin-bottom: 27px;
& .product-content-header {
margin-bottom: 20px;
& .product-content-title {
margin-bottom: 14px;
opacity: 0.9;
}
& .product-header-block {
& .product-content-paragraph {
font-size: $font-14;
line-height: 21px;
letter-spacing: 0.28px;
color: $text-gray;
}
}
@media only screen and (max-width: $med-md) {
margin-bottom: 30px;
}
}
& .product-content-body {
display: flex;
flex-direction: column;
margin-bottom: 36px;
gap: 60px;
& .product-content-paragraphs {
& .product-price {
font-weight: 500;
letter-spacing: 0.8px;
line-height: 21px;
font-family: $font-lora;
font-size: $font-40;
margin-bottom: 12px;
}
& .product-delivery {
font-size: $font-14;
line-height: 24px;
letter-spacing: 0.28px;
margin-bottom: 20px;
}
& .product-description {
font-size: $font-14;
line-height: 21px;
letter-spacing: 0.28px;
color: $text-gray;
}
}
& .product-form {
display: flex;
flex-direction: column;
gap: 22px;
& .product-dedication {
display: flex;
flex-direction: column;
gap: 22px;
background-color: $secondary-10;
border-radius: 10px;
padding: 18px 31px 28px;
& .product-dedication-header {
display: flex;
align-items: center;
gap: 10px;
}
& .product-dedication-body {
border: 1px solid $secondary-40;
}
}
}
@media only screen and (max-width: $med-md) {
margin-bottom: 30px;
gap: 24px;
& .product-content-paragraphs {
& .product-price {
margin-bottom: 30px;
}
& .product-delivery {
display: none;
}
}
& .product-form .product-dedication {
padding: 18px 26px 28px;
}
}
}
& .product-content-footer {
display: flex;
flex-direction: column;
gap: 10px;
& .product-share-paragraph {
color: $text-muted-one;
font-size: $font-14;
line-height: 21px;
letter-spacing: 0.28px;
}
& .product-share-content {
display: flex;
gap: 6px;
}
@media only screen and (max-width: $med-md) {
align-items: center;
}
}
}
& .product-pag-block {
flex: 1 0 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
& .product-pag-item {
margin-top: 76px;
&::before {
content: '';
display: none;
}
& .q-focus-helper {
display: none;
}
& .q-btn__content {
display: flex;
align-items: center;
justify-content: center;
text-align: start;
gap: 14px;
flex-wrap: nowrap;
}
&.product-prev-btn {
padding: 10px 55px 10px 20px;
}
&.product-next-btn {
padding: 10px 20px 10px 55px;
& .q-btn__content {
text-align: end;
}
}
}
}
@media only screen and (max-width: $med-md) {
display: block;
gap: 130px;
& .product-gallery {
margin-bottom: 130px;
}
& .product-pag-block {
flex: initial;
& .product-pag-item {
margin: initial;
justify-content: center;
align-items: center;
padding: 20px 29px 14px 20px !important;
& .q-btn__content {
gap: 12px;
& > svg {
flex: 0 0 23px;
}
}
&.product-prev-btn,
&.product-next-btn {
padding: 17px 29px 14px 20px;
}
& .btn-pag-paragraphs {
font-size: $font-14;
& p {
font-size: inherit;
}
& .product-paragraph-bottom {
display: none;
}
}
}
}
}
}
.like-another-container {
display: flex;
flex-direction: column;
gap: 82px;
padding-block: 129px 126px;
text-align: center;
& .like-another-header {
display: flex;
flex-direction: column;
gap: 25px;
& .like-another-title {
font-weight: 500;
font-size: $font-35;
line-height: 30px;
}
& .like-another-paragraph {
color: $text-default;
line-height: 26px;
}
}
@media only screen and (max-width: $med-md) {
gap: 61px;
padding-block: 62px 108px;
& .like-another-header {
& .like-another-title {
font-size: $font-24;
}
& .like-another-paragraph {
font-size: $font-14;
line-height: 18px;
}
}
}
}
</style>

13960
src/services/json-server/db.json Normal file
View File

File diff suppressed because it is too large Load Diff

10
src/stores/index.ts
View File

@ -1,5 +1,5 @@
import { store } from 'quasar/wrappers'
import { createPinia } from 'pinia'
import { createPinia } from 'pinia';
import { store } from 'quasar/wrappers';
import { Router } from 'vue-router';
/*
@ -23,10 +23,10 @@ declare module 'pinia' {
*/
export default store((/* { ssrContext } */) => {
const pinia = createPinia()
const pinia = createPinia();
// You can add Pinia plugins here
// pinia.use(SomePiniaPlugin)
return pinia
})
return pinia;
});

7
src/stores/mobileNav.ts
View File

@ -12,13 +12,10 @@ export const useMobileStore = defineStore('mobile', {
this.isOpenNav = !this.isOpenNav;
},
handleResize() {
const screenWidth = screen.width;
this.screenWidth = screenWidth;
if (screenWidth > 768) {
this.screenWidth = screen.width;
if (this.screenWidth > 768) {
this.isOpenNav = false;
}
},
},
});
export const mobileStore = useMobileStore();

2
src/stores/modalStore.ts
View File

@ -33,5 +33,3 @@ export const useModalStore = defineStore('modal', {
},
},
});
export const modalStore = useModalStore();

2
src/stores/rangePrice.ts
View File

@ -23,5 +23,3 @@ export const useRangePriceStore = defineStore('range-price', {
},
},
});
export const rangeStore = useRangePriceStore();

13
src/stores/textInput.ts Normal file
View File

@ -0,0 +1,13 @@
import { defineStore } from 'pinia';
export const useTextInputStore = defineStore('text-input', {
state: () => ({
dedication: '',
}),
actions: {
handleDedicationSubmit() {
console.log(this.dedication);
},
},
});

1646
yarn.lock
View File

File diff suppressed because it is too large Load Diff