├── .editorconfig ├── .eslintrc.cjs ├── .gitignore ├── .prettierrc.json ├── .vscode ├── extensions.json └── settings.json ├── CHANGELOG.md ├── LICENSE.md ├── README.md ├── index.html ├── jsconfig.json ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── demo │ ├── data │ │ ├── countries.json │ │ ├── customers-large.json │ │ ├── customers-medium.json │ │ ├── events.json │ │ ├── icons.json │ │ ├── photos.json │ │ ├── products-orders-small.json │ │ ├── products-small.json │ │ ├── products.json │ │ ├── treenodes.json │ │ └── treetablenodes.json │ └── images │ │ ├── access │ │ └── asset-access.svg │ │ ├── error │ │ └── asset-error.svg │ │ ├── flag │ │ └── flag_placeholder.png │ │ ├── landing │ │ ├── enterprise.svg │ │ ├── free.svg │ │ ├── mockup-desktop.svg │ │ ├── mockup.svg │ │ ├── new-badge.svg │ │ ├── peak-logo.svg │ │ ├── screen-1.png │ │ └── startup.svg │ │ ├── logo-white.svg │ │ └── logo.svg └── favicon.ico ├── src ├── App.vue ├── assets │ ├── demo │ │ ├── code.scss │ │ ├── demo.scss │ │ └── flags │ │ │ └── flags.css │ ├── layout │ │ ├── _core.scss │ │ ├── _footer.scss │ │ ├── _main.scss │ │ ├── _menu.scss │ │ ├── _mixins.scss │ │ ├── _preloading.scss │ │ ├── _responsive.scss │ │ ├── _topbar.scss │ │ ├── _typography.scss │ │ ├── _utils.scss │ │ ├── layout.scss │ │ └── variables │ │ │ ├── _common.scss │ │ │ ├── _dark.scss │ │ │ └── _light.scss │ ├── styles.scss │ └── tailwind.css ├── components │ ├── FloatingConfigurator.vue │ ├── dashboard │ │ ├── BestSellingWidget.vue │ │ ├── NotificationsWidget.vue │ │ ├── RecentSalesWidget.vue │ │ ├── RevenueStreamWidget.vue │ │ └── StatsWidget.vue │ └── landing │ │ ├── FeaturesWidget.vue │ │ ├── FooterWidget.vue │ │ ├── HeroWidget.vue │ │ ├── HighlightsWidget.vue │ │ ├── PricingWidget.vue │ │ └── TopbarWidget.vue ├── layout │ ├── AppConfigurator.vue │ ├── AppFooter.vue │ ├── AppLayout.vue │ ├── AppMenu.vue │ ├── AppMenuItem.vue │ ├── AppSidebar.vue │ ├── AppTopbar.vue │ └── composables │ │ └── layout.js ├── main.js ├── router │ └── index.js ├── service │ ├── CountryService.js │ ├── CustomerService.js │ ├── NodeService.js │ ├── PhotoService.js │ └── ProductService.js └── views │ ├── Dashboard.vue │ ├── pages │ ├── Crud.vue │ ├── Documentation.vue │ ├── Empty.vue │ ├── Landing.vue │ ├── NotFound.vue │ └── auth │ │ ├── Access.vue │ │ ├── Error.vue │ │ └── Login.vue │ └── uikit │ ├── ButtonDoc.vue │ ├── ChartDoc.vue │ ├── FileDoc.vue │ ├── FormLayout.vue │ ├── InputDoc.vue │ ├── ListDoc.vue │ ├── MediaDoc.vue │ ├── MenuDoc.vue │ ├── MessagesDoc.vue │ ├── MiscDoc.vue │ ├── OverlayDoc.vue │ ├── PanelsDoc.vue │ ├── TableDoc.vue │ ├── TimelineDoc.vue │ └── TreeDoc.vue ├── tailwind.config.js ├── vercel.json └── vite.config.mjs /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 4 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | /* eslint-env node */ 2 | require('@rushstack/eslint-patch/modern-module-resolution'); 3 | 4 | module.exports = { 5 | root: true, 6 | env: { 7 | node: true 8 | }, 9 | extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/eslint-config-prettier'], 10 | parserOptions: { 11 | ecmaVersion: 'latest' 12 | }, 13 | rules: { 14 | 'vue/multi-word-component-names': 'off', 15 | 'vue/no-reserved-component-names': 'off', 16 | 'vue/component-tags-order': [ 17 | 'error', 18 | { 19 | order: ['script', 'template', 'style'] 20 | } 21 | ] 22 | } 23 | }; 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | coverage 3 | *.log* 4 | .nuxt 5 | .nitro 6 | .cache 7 | .output 8 | .env 9 | dist 10 | .DS_Store 11 | .idea 12 | .eslintcache 13 | api-generator/typedoc.json 14 | **/.DS_Store 15 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": false, 3 | "tabWidth": 4, 4 | "trailingComma": "none", 5 | "semi": true, 6 | "singleQuote": true, 7 | "vueIndentScriptAndStyle": false, 8 | "printWidth": 250, 9 | "bracketSameLine": false 10 | } 11 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] 3 | } 4 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.codeActionsOnSave": { 3 | "source.fixAll.eslint": "explicit", 4 | "source.organizeImports": "explicit" 5 | }, 6 | "editor.defaultFormatter": "esbenp.prettier-vscode", 7 | "[javascript]": { 8 | "editor.defaultFormatter": "esbenp.prettier-vscode", 9 | "editor.formatOnSave": true 10 | }, 11 | "[vue]": { 12 | "editor.defaultFormatter": "esbenp.prettier-vscode", 13 | "editor.formatOnSave": true 14 | }, 15 | "[typescript]": { 16 | "editor.defaultFormatter": "esbenp.prettier-vscode", 17 | "editor.formatOnSave": true 18 | }, 19 | "[json]": { 20 | "editor.defaultFormatter": "esbenp.prettier-vscode", 21 | "editor.formatOnSave": true 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ## 4.3.0 (2025-02-26) 4 | 5 | **Implemented New Features and Enhancements** 6 | 7 | - Update PrimeVue version 8 | 9 | ## 4.2.0 (2024-12-09) 10 | 11 | **Implemented New Features and Enhancements** 12 | 13 | - Refactored dashboard sections to components 14 | - Migrate sass from @import to @use 15 | 16 | ## 4.1.0 (2024-07-29) 17 | 18 | - Changed menu button location at topbar 19 | - Add border to overlay menu 20 | - Animation for mobile mask 21 | - Fixed chart colors 22 | 23 | ## 4.0.0 (2024-07-29) 24 | 25 | - Updated to PrimeVue v4 26 | 27 | ## 3.10.0 (2024-03-11) 28 | 29 | **Migration Guide** 30 | 31 | - Update theme files. 32 | 33 | **Implemented New Features and Enhancements** 34 | 35 | - Upgrade to PrimeVue 3.49.1 36 | 37 | ## 3.9.0 (2023-11-01) 38 | 39 | **Migration Guide** 40 | 41 | - Update theme files. 42 | 43 | **Implemented New Features and Enhancements** 44 | 45 | - Upgrade to PrimeVue 3.39.0 46 | 47 | ## 3.8.0 (2023-07-24) 48 | 49 | **Migration Guide** 50 | 51 | - Update theme files. 52 | - Update assets style files 53 | - Remove code highlight 54 | 55 | **Implemented New Features and Enhancements** 56 | 57 | - Upgrade to PrimeVue 3.30.2 58 | 59 | ## 3.7.0 (2023-05-06) 60 | 61 | - Upgrade to PrimeVue 3.28.0 62 | 63 | **Implemented New Features and Enhancements** 64 | 65 | ## 3.6.0 (2023-04-12) 66 | 67 | **Implemented New Features and Enhancements** 68 | 69 | - Upgrade to PrimeVue 3.26.1 70 | - Upgrade to vite 4.2.1 71 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2018-2022 PrimeTek 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Sakai is an application template for Vue based on the [create-vue](https://github.com/vuejs/create-vue), the recommended way to start a Vite-powered Vue projects. 2 | 3 | Visit the [documentation](https://sakai.primevue.org/documentation) to get started. 4 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Sakai Vue 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "paths": { 4 | "@/*": [ 5 | "./src/*" 6 | ] 7 | } 8 | }, 9 | "exclude": [ 10 | "node_modules", 11 | "dist" 12 | ] 13 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sakai-vue", 3 | "version": "4.3.0", 4 | "scripts": { 5 | "dev": "vite", 6 | "build": "vite build", 7 | "preview": "vite preview", 8 | "lint": "eslint --fix . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore" 9 | }, 10 | "dependencies": { 11 | "@primeuix/themes": "^1.0.0", 12 | "chart.js": "3.3.2", 13 | "primeicons": "^7.0.0", 14 | "primevue": "^4.3.1", 15 | "tailwindcss-primeui": "^0.5.0", 16 | "vue": "^3.4.34", 17 | "vue-router": "^4.4.0" 18 | }, 19 | "devDependencies": { 20 | "@primevue/auto-import-resolver": "^4.3.1", 21 | "@rushstack/eslint-patch": "^1.8.0", 22 | "@vitejs/plugin-vue": "^5.0.5", 23 | "@vue/eslint-config-prettier": "^9.0.0", 24 | "autoprefixer": "^10.4.19", 25 | "eslint": "^8.57.0", 26 | "eslint-plugin-vue": "^9.23.0", 27 | "postcss": "^8.4.40", 28 | "prettier": "^3.2.5", 29 | "sass": "^1.55.0", 30 | "tailwindcss": "^3.4.6", 31 | "unplugin-vue-components": "^0.27.3", 32 | "vite": "^5.3.1" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {} 5 | } 6 | }; 7 | -------------------------------------------------------------------------------- /public/demo/data/events.json: -------------------------------------------------------------------------------- 1 | { 2 | "data": [ 3 | { 4 | "id": 1, 5 | "title": "All Day Event", 6 | "start": "2021-01-03" 7 | }, 8 | { 9 | "id": 2, 10 | "title": "Long Event", 11 | "start": "2021-01-09", 12 | "end": "2021-01-12" 13 | }, 14 | { 15 | "id": 3, 16 | "title": "Repeating Event", 17 | "start": "2021-01-11T16:00:00" 18 | }, 19 | { 20 | "id": 4, 21 | "title": "Repeating Event", 22 | "start": "2021-01-18T16:00:00" 23 | }, 24 | { 25 | "id": 5, 26 | "title": "Conference", 27 | "start": "2021-01-13", 28 | "end": "2021-01-15" 29 | }, 30 | { 31 | "id": 6, 32 | "title": "Meeting", 33 | "start": "2021-01-14T10:30:00", 34 | "end": "2021-01-14T12:30:00" 35 | }, 36 | { 37 | "id": 7, 38 | "title": "Lunch", 39 | "start": "2021-01-14T12:00:00" 40 | }, 41 | { 42 | "id": 8, 43 | "title": "Meeting", 44 | "start": "2021-01-14T14:30:00" 45 | }, 46 | { 47 | "id": 9, 48 | "title": "Happy Hour", 49 | "start": "2021-01-14T17:30:00" 50 | }, 51 | { 52 | "id": 10, 53 | "title": "Dinner", 54 | "start": "2021-01-14T20:00:00" 55 | }, 56 | { 57 | "id": 11, 58 | "title": "Birthday Party", 59 | "start": "2021-01-15T07:00:00" 60 | }, 61 | { 62 | "id": 12, 63 | "title": "Click for Google", 64 | "url": "http://google.com/", 65 | "start": "2021-01-30" 66 | } 67 | ] 68 | } 69 | -------------------------------------------------------------------------------- /public/demo/data/photos.json: -------------------------------------------------------------------------------- 1 | { 2 | "data":[ 3 | { 4 | "itemImageSrc": "/demo/images/galleria/galleria1.jpg", 5 | "thumbnailImageSrc": "/demo/images/galleria/galleria1s.jpg", 6 | "alt": "Description for Image 1", 7 | "title": "Title 1" 8 | }, 9 | { 10 | "itemImageSrc": "/demo/images/galleria/galleria2.jpg", 11 | "thumbnailImageSrc": "/demo/images/galleria/galleria2s.jpg", 12 | "alt": "Description for Image 2", 13 | "title": "Title 2" 14 | }, 15 | { 16 | "itemImageSrc": "/demo/images/galleria/galleria3.jpg", 17 | "thumbnailImageSrc": "/demo/images/galleria/galleria3s.jpg", 18 | "alt": "Description for Image 3", 19 | "title": "Title 3" 20 | }, 21 | { 22 | "itemImageSrc": "/demo/images/galleria/galleria4.jpg", 23 | "thumbnailImageSrc": "/demo/images/galleria/galleria4s.jpg", 24 | "alt": "Description for Image 4", 25 | "title": "Title 4" 26 | }, 27 | { 28 | "itemImageSrc": "/demo/images/galleria/galleria5.jpg", 29 | "thumbnailImageSrc": "/demo/images/galleria/galleria5s.jpg", 30 | "alt": "Description for Image 5", 31 | "title": "Title 5" 32 | }, 33 | { 34 | "itemImageSrc": "/demo/images/galleria/galleria6.jpg", 35 | "thumbnailImageSrc": "/demo/images/galleria/galleria6s.jpg", 36 | "alt": "Description for Image 6", 37 | "title": "Title 6" 38 | }, 39 | { 40 | "itemImageSrc": "/demo/images/galleria/galleria7.jpg", 41 | "thumbnailImageSrc": "/demo/images/galleria/galleria7s.jpg", 42 | "alt": "Description for Image 7", 43 | "title": "Title 7" 44 | }, 45 | { 46 | "itemImageSrc": "/demo/images/galleria/galleria8.jpg", 47 | "thumbnailImageSrc": "/demo/images/galleria/galleria8s.jpg", 48 | "alt": "Description for Image 8", 49 | "title": "Title 8" 50 | }, 51 | { 52 | "itemImageSrc": "/demo/images/galleria/galleria9.jpg", 53 | "thumbnailImageSrc": "/demo/images/galleria/galleria9s.jpg", 54 | "alt": "Description for Image 9", 55 | "title": "Title 9" 56 | }, 57 | { 58 | "itemImageSrc": "/demo/images/galleria/galleria10.jpg", 59 | "thumbnailImageSrc": "/demo/images/galleria/galleria10s.jpg", 60 | "alt": "Description for Image 10", 61 | "title": "Title 10" 62 | }, 63 | { 64 | "itemImageSrc": "/demo/images/galleria/galleria11.jpg", 65 | "thumbnailImageSrc": "/demo/images/galleria/galleria11s.jpg", 66 | "alt": "Description for Image 11", 67 | "title": "Title 11" 68 | }, 69 | { 70 | "itemImageSrc": "/demo/images/galleria/galleria12.jpg", 71 | "thumbnailImageSrc": "/demo/images/galleria/galleria12s.jpg", 72 | "alt": "Description for Image 12", 73 | "title": "Title 12" 74 | }, 75 | { 76 | "itemImageSrc": "/demo/images/galleria/galleria13.jpg", 77 | "thumbnailImageSrc": "/demo/images/galleria/galleria13s.jpg", 78 | "alt": "Description for Image 13", 79 | "title": "Title 13" 80 | }, 81 | { 82 | "itemImageSrc": "/demo/images/galleria/galleria14.jpg", 83 | "thumbnailImageSrc": "/demo/images/galleria/galleria14s.jpg", 84 | "alt": "Description for Image 14", 85 | "title": "Title 14" 86 | }, 87 | { 88 | "itemImageSrc": "/demo/images/galleria/galleria15.jpg", 89 | "thumbnailImageSrc": "/demo/images/galleria/galleria15s.jpg", 90 | "alt": "Description for Image 15", 91 | "title": "Title 15" 92 | } 93 | ] 94 | } 95 | -------------------------------------------------------------------------------- /public/demo/data/products-small.json: -------------------------------------------------------------------------------- 1 | { 2 | "data": [ 3 | {"id": "1000","code": "f230fh0g3","name": "Bamboo Watch","description": "Product Description","image": "bamboo-watch.jpg","price": 65,"category": "Accessories","quantity": 24,"inventoryStatus": "INSTOCK","rating": 5}, 4 | {"id": "1001","code": "nvklal433","name": "Black Watch","description": "Product Description","image": "black-watch.jpg","price": 72,"category": "Accessories","quantity": 61,"inventoryStatus": "INSTOCK","rating": 4}, 5 | {"id": "1002","code": "zz21cz3c1","name": "Blue Band","description": "Product Description","image": "blue-band.jpg","price": 79,"category": "Fitness","quantity": 2,"inventoryStatus": "LOWSTOCK","rating": 3}, 6 | {"id": "1003","code": "244wgerg2","name": "Blue T-Shirt","description": "Product Description","image": "blue-t-shirt.jpg","price": 29,"category": "Clothing","quantity": 25,"inventoryStatus": "INSTOCK","rating": 5}, 7 | {"id": "1004","code": "h456wer53","name": "Bracelet","description": "Product Description","image": "bracelet.jpg","price": 15,"category": "Accessories","quantity": 73,"inventoryStatus": "INSTOCK","rating": 4}, 8 | {"id": "1005","code": "av2231fwg","name": "Brown Purse","description": "Product Description","image": "brown-purse.jpg","price": 120,"category": "Accessories","quantity": 0,"inventoryStatus": "OUTOFSTOCK","rating": 4}, 9 | {"id": "1006","code": "bib36pfvm","name": "Chakra Bracelet","description": "Product Description","image": "chakra-bracelet.jpg","price": 32,"category": "Accessories","quantity": 5,"inventoryStatus": "LOWSTOCK","rating": 3}, 10 | {"id": "1007","code": "mbvjkgip5","name": "Galaxy Earrings","description": "Product Description","image": "galaxy-earrings.jpg","price": 34,"category": "Accessories","quantity": 23,"inventoryStatus": "INSTOCK","rating": 5}, 11 | {"id": "1008","code": "vbb124btr","name": "Game Controller","description": "Product Description","image": "game-controller.jpg","price": 99,"category": "Electronics","quantity": 2,"inventoryStatus": "LOWSTOCK","rating": 4}, 12 | {"id": "1009","code": "cm230f032","name": "Gaming Set","description": "Product Description","image": "gaming-set.jpg","price": 299,"category": "Electronics","quantity": 63,"inventoryStatus": "INSTOCK","rating": 3} 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /public/demo/data/products.json: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "data": [ 4 | {"id": "1000","code": "f230fh0g3","name": "Bamboo Watch","description": "Product Description","image": "bamboo-watch.jpg","price": 65,"category": "Accessories","quantity": 24,"inventoryStatus": "INSTOCK","rating": 5}, 5 | {"id": "1001","code": "nvklal433","name": "Black Watch","description": "Product Description","image": "black-watch.jpg","price": 72,"category": "Accessories","quantity": 61,"inventoryStatus": "INSTOCK","rating": 4}, 6 | {"id": "1002","code": "zz21cz3c1","name": "Blue Band","description": "Product Description","image": "blue-band.jpg","price": 79,"category": "Fitness","quantity": 2,"inventoryStatus": "LOWSTOCK","rating": 3}, 7 | {"id": "1003","code": "244wgerg2","name": "Blue T-Shirt","description": "Product Description","image": "blue-t-shirt.jpg","price": 29,"category": "Clothing","quantity": 25,"inventoryStatus": "INSTOCK","rating": 5}, 8 | {"id": "1004","code": "h456wer53","name": "Bracelet","description": "Product Description","image": "bracelet.jpg","price": 15,"category": "Accessories","quantity": 73,"inventoryStatus": "INSTOCK","rating": 4}, 9 | {"id": "1005","code": "av2231fwg","name": "Brown Purse","description": "Product Description","image": "brown-purse.jpg","price": 120,"category": "Accessories","quantity": 0,"inventoryStatus": "OUTOFSTOCK","rating": 4}, 10 | {"id": "1006","code": "bib36pfvm","name": "Chakra Bracelet","description": "Product Description","image": "chakra-bracelet.jpg","price": 32,"category": "Accessories","quantity": 5,"inventoryStatus": "LOWSTOCK","rating": 3}, 11 | {"id": "1007","code": "mbvjkgip5","name": "Galaxy Earrings","description": "Product Description","image": "galaxy-earrings.jpg","price": 34,"category": "Accessories","quantity": 23,"inventoryStatus": "INSTOCK","rating": 5}, 12 | {"id": "1008","code": "vbb124btr","name": "Game Controller","description": "Product Description","image": "game-controller.jpg","price": 99,"category": "Electronics","quantity": 2,"inventoryStatus": "LOWSTOCK","rating": 4}, 13 | {"id": "1009","code": "cm230f032","name": "Gaming Set","description": "Product Description","image": "gaming-set.jpg","price": 299,"category": "Electronics","quantity": 63,"inventoryStatus": "INSTOCK","rating": 3}, 14 | {"id": "1010","code": "plb34234v","name": "Gold Phone Case","description": "Product Description","image": "gold-phone-case.jpg","price": 24,"category": "Accessories","quantity": 0,"inventoryStatus": "OUTOFSTOCK","rating": 4}, 15 | {"id": "1011","code": "4920nnc2d","name": "Green Earbuds","description": "Product Description","image": "green-earbuds.jpg","price": 89,"category": "Electronics","quantity": 23,"inventoryStatus": "INSTOCK","rating": 4}, 16 | {"id": "1012","code": "250vm23cc","name": "Green T-Shirt","description": "Product Description","image": "green-t-shirt.jpg","price": 49,"category": "Clothing","quantity": 74,"inventoryStatus": "INSTOCK","rating": 5}, 17 | {"id": "1013","code": "fldsmn31b","name": "Grey T-Shirt","description": "Product Description","image": "grey-t-shirt.jpg","price": 48,"category": "Clothing","quantity": 0,"inventoryStatus": "OUTOFSTOCK","rating": 3}, 18 | {"id": "1014","code": "waas1x2as","name": "Headphones","description": "Product Description","image": "headphones.jpg","price": 175,"category": "Electronics","quantity": 8,"inventoryStatus": "LOWSTOCK","rating": 5}, 19 | {"id": "1015","code": "vb34btbg5","name": "Light Green T-Shirt","description": "Product Description","image": "light-green-t-shirt.jpg","price": 49,"category": "Clothing","quantity": 34,"inventoryStatus": "INSTOCK","rating": 4}, 20 | {"id": "1016","code": "k8l6j58jl","name": "Lime Band","description": "Product Description","image": "lime-band.jpg","price": 79,"category": "Fitness","quantity": 12,"inventoryStatus": "INSTOCK","rating": 3}, 21 | {"id": "1017","code": "v435nn85n","name": "Mini Speakers","description": "Product Description","image": "mini-speakers.jpg","price": 85,"category": "Clothing","quantity": 42,"inventoryStatus": "INSTOCK","rating": 4}, 22 | {"id": "1018","code": "09zx9c0zc","name": "Painted Phone Case","description": "Product Description","image": "painted-phone-case.jpg","price": 56,"category": "Accessories","quantity": 41,"inventoryStatus": "INSTOCK","rating": 5}, 23 | {"id": "1019","code": "mnb5mb2m5","name": "Pink Band","description": "Product Description","image": "pink-band.jpg","price": 79,"category": "Fitness","quantity": 63,"inventoryStatus": "INSTOCK","rating": 4}, 24 | {"id": "1020","code": "r23fwf2w3","name": "Pink Purse","description": "Product Description","image": "pink-purse.jpg","price": 110,"category": "Accessories","quantity": 0,"inventoryStatus": "OUTOFSTOCK","rating": 4}, 25 | {"id": "1021","code": "pxpzczo23","name": "Purple Band","description": "Product Description","image": "purple-band.jpg","price": 79,"category": "Fitness","quantity": 6,"inventoryStatus": "LOWSTOCK","rating": 3}, 26 | {"id": "1022","code": "2c42cb5cb","name": "Purple Gemstone Necklace","description": "Product Description","image": "purple-gemstone-necklace.jpg","price": 45,"category": "Accessories","quantity": 62,"inventoryStatus": "INSTOCK","rating": 4}, 27 | {"id": "1023","code": "5k43kkk23","name": "Purple T-Shirt","description": "Product Description","image": "purple-t-shirt.jpg","price": 49,"category": "Clothing","quantity": 2,"inventoryStatus": "LOWSTOCK","rating": 5}, 28 | {"id": "1024","code": "lm2tny2k4","name": "Shoes","description": "Product Description","image": "shoes.jpg","price": 64,"category": "Clothing","quantity": 0,"inventoryStatus": "INSTOCK","rating": 4}, 29 | {"id": "1025","code": "nbm5mv45n","name": "Sneakers","description": "Product Description","image": "sneakers.jpg","price": 78,"category": "Clothing","quantity": 52,"inventoryStatus": "INSTOCK","rating": 4}, 30 | {"id": "1026","code": "zx23zc42c","name": "Teal T-Shirt","description": "Product Description","image": "teal-t-shirt.jpg","price": 49,"category": "Clothing","quantity": 3,"inventoryStatus": "LOWSTOCK","rating": 3}, 31 | {"id": "1027","code": "acvx872gc","name": "Yellow Earbuds","description": "Product Description","image": "yellow-earbuds.jpg","price": 89,"category": "Electronics","quantity": 35,"inventoryStatus": "INSTOCK","rating": 3}, 32 | {"id": "1028","code": "tx125ck42","name": "Yoga Mat","description": "Product Description","image": "yoga-mat.jpg","price": 20,"category": "Fitness","quantity": 15,"inventoryStatus": "INSTOCK","rating": 5}, 33 | {"id": "1029","code": "gwuby345v","name": "Yoga Set","description": "Product Description","image": "yoga-set.jpg","price": 20,"category": "Fitness","quantity": 25,"inventoryStatus": "INSTOCK","rating": 8} 34 | ] 35 | } 36 | -------------------------------------------------------------------------------- /public/demo/data/treenodes.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": [ 3 | { 4 | "key": "0", 5 | "label": "Documents", 6 | "data": "Documents Folder", 7 | "icon": "pi pi-fw pi-inbox", 8 | "children": [{ 9 | "key": "0-0", 10 | "label": "Work", 11 | "data": "Work Folder", 12 | "icon": "pi pi-fw pi-cog", 13 | "children": [{ "key": "0-0-0", "label": "Expenses.doc", "icon": "pi pi-fw pi-file", "data": "Expenses Document" }, { "key": "0-0-1", "label": "Resume.doc", "icon": "pi pi-fw pi-file", "data": "Resume Document" }] 14 | }, 15 | { 16 | "key": "0-1", 17 | "label": "Home", 18 | "data": "Home Folder", 19 | "icon": "pi pi-fw pi-home", 20 | "children": [{ "key": "0-1-0", "label": "Invoices.txt", "icon": "pi pi-fw pi-file", "data": "Invoices for this month" }] 21 | }] 22 | }, 23 | { 24 | "key": "1", 25 | "label": "Events", 26 | "data": "Events Folder", 27 | "icon": "pi pi-fw pi-calendar", 28 | "children": [ 29 | { "key": "1-0", "label": "Meeting", "icon": "pi pi-fw pi-calendar-plus", "data": "Meeting" }, 30 | { "key": "1-1", "label": "Product Launch", "icon": "pi pi-fw pi-calendar-plus", "data": "Product Launch" }, 31 | { "key": "1-2", "label": "Report Review", "icon": "pi pi-fw pi-calendar-plus", "data": "Report Review" }] 32 | }, 33 | { 34 | "key": "2", 35 | "label": "Movies", 36 | "data": "Movies Folder", 37 | "icon": "pi pi-fw pi-star", 38 | "children": [{ 39 | "key": "2-0", 40 | "icon": "pi pi-fw pi-star", 41 | "label": "Al Pacino", 42 | "data": "Pacino Movies", 43 | "children": [{ "key": "2-0-0", "label": "Scarface", "icon": "pi pi-fw pi-video", "data": "Scarface Movie" }, { "key": "2-0-1", "label": "Serpico", "icon": "pi pi-fw pi-video", "data": "Serpico Movie" }] 44 | }, 45 | { 46 | "key": "2-1", 47 | "label": "Robert De Niro", 48 | "icon": "pi pi-fw pi-star", 49 | "data": "De Niro Movies", 50 | "children": [{ "key": "2-1-0", "label": "Goodfellas", "icon": "pi pi-fw pi-video", "data": "Goodfellas Movie" }, { "key": "2-1-1", "label": "Untouchables", "icon": "pi pi-fw pi-video", "data": "Untouchables Movie" }] 51 | }] 52 | } 53 | ] 54 | } 55 | -------------------------------------------------------------------------------- /public/demo/images/flag/flag_placeholder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/primefaces/sakai-vue/23bcf922ab1826953fc32f85a3b6693a8bce10cc/public/demo/images/flag/flag_placeholder.png -------------------------------------------------------------------------------- /public/demo/images/landing/new-badge.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /public/demo/images/landing/peak-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /public/demo/images/landing/screen-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/primefaces/sakai-vue/23bcf922ab1826953fc32f85a3b6693a8bce10cc/public/demo/images/landing/screen-1.png -------------------------------------------------------------------------------- /public/demo/images/logo-white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | head 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /public/demo/images/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | head 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/primefaces/sakai-vue/23bcf922ab1826953fc32f85a3b6693a8bce10cc/public/favicon.ico -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/assets/demo/code.scss: -------------------------------------------------------------------------------- 1 | pre.app-code { 2 | background-color: var(--code-background); 3 | margin: 0 0 1rem 0; 4 | padding: 0; 5 | border-radius: var(--content-border-radius); 6 | overflow: auto; 7 | 8 | code { 9 | color: var(--code-color); 10 | padding: 1rem; 11 | margin: 0; 12 | line-height: 1.5; 13 | display: block; 14 | font-weight: semibold; 15 | font-family: monaco, Consolas, monospace; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/assets/demo/demo.scss: -------------------------------------------------------------------------------- 1 | @use './code.scss'; 2 | @use './flags/flags.css'; 3 | -------------------------------------------------------------------------------- /src/assets/demo/flags/flags.css: -------------------------------------------------------------------------------- 1 | span.flag{width:44px;height:30px;display:inline-block;}img.flag{width:30px}.flag{background:url(https://primefaces.org/cdn/primevue/images/flag/flags_responsive.png) no-repeat;background-size:100%;vertical-align: middle;}.flag-ad{background-position:0 .413223%}.flag-ae{background-position:0 .826446%}.flag-af{background-position:0 1.239669%}.flag-ag{background-position:0 1.652893%}.flag-ai{background-position:0 2.066116%}.flag-al{background-position:0 2.479339%}.flag-am{background-position:0 2.892562%}.flag-an{background-position:0 3.305785%}.flag-ao{background-position:0 3.719008%}.flag-aq{background-position:0 4.132231%}.flag-ar{background-position:0 4.545455%}.flag-as{background-position:0 4.958678%}.flag-at{background-position:0 5.371901%}.flag-au{background-position:0 5.785124%}.flag-aw{background-position:0 6.198347%}.flag-az{background-position:0 6.61157%}.flag-ba{background-position:0 7.024793%}.flag-bb{background-position:0 7.438017%}.flag-bd{background-position:0 7.85124%}.flag-be{background-position:0 8.264463%}.flag-bf{background-position:0 8.677686%}.flag-bg{background-position:0 9.090909%}.flag-bh{background-position:0 9.504132%}.flag-bi{background-position:0 9.917355%}.flag-bj{background-position:0 10.330579%}.flag-bm{background-position:0 10.743802%}.flag-bn{background-position:0 11.157025%}.flag-bo{background-position:0 11.570248%}.flag-br{background-position:0 11.983471%}.flag-bs{background-position:0 12.396694%}.flag-bt{background-position:0 12.809917%}.flag-bv{background-position:0 13.22314%}.flag-bw{background-position:0 13.636364%}.flag-by{background-position:0 14.049587%}.flag-bz{background-position:0 14.46281%}.flag-ca{background-position:0 14.876033%}.flag-cc{background-position:0 15.289256%}.flag-cd{background-position:0 15.702479%}.flag-cf{background-position:0 16.115702%}.flag-cg{background-position:0 16.528926%}.flag-ch{background-position:0 16.942149%}.flag-ci{background-position:0 17.355372%}.flag-ck{background-position:0 17.768595%}.flag-cl{background-position:0 18.181818%}.flag-cm{background-position:0 18.595041%}.flag-cn{background-position:0 19.008264%}.flag-co{background-position:0 19.421488%}.flag-cr{background-position:0 19.834711%}.flag-cu{background-position:0 20.247934%}.flag-cv{background-position:0 20.661157%}.flag-cx{background-position:0 21.07438%}.flag-cy{background-position:0 21.487603%}.flag-cz{background-position:0 21.900826%}.flag-de{background-position:0 22.31405%}.flag-dj{background-position:0 22.727273%}.flag-dk{background-position:0 23.140496%}.flag-dm{background-position:0 23.553719%}.flag-do{background-position:0 23.966942%}.flag-dz{background-position:0 24.380165%}.flag-ec{background-position:0 24.793388%}.flag-ee{background-position:0 25.206612%}.flag-eg{background-position:0 25.619835%}.flag-eh{background-position:0 26.033058%}.flag-er{background-position:0 26.446281%}.flag-es{background-position:0 26.859504%}.flag-et{background-position:0 27.272727%}.flag-fi{background-position:0 27.68595%}.flag-fj{background-position:0 28.099174%}.flag-fk{background-position:0 28.512397%}.flag-fm{background-position:0 28.92562%}.flag-fo{background-position:0 29.338843%}.flag-fr{background-position:0 29.752066%}.flag-ga{background-position:0 30.165289%}.flag-gd{background-position:0 30.578512%}.flag-ge{background-position:0 30.991736%}.flag-gf{background-position:0 31.404959%}.flag-gh{background-position:0 31.818182%}.flag-gi{background-position:0 32.231405%}.flag-gl{background-position:0 32.644628%}.flag-gm{background-position:0 33.057851%}.flag-gn{background-position:0 33.471074%}.flag-gp{background-position:0 33.884298%}.flag-gq{background-position:0 34.297521%}.flag-gr{background-position:0 34.710744%}.flag-gs{background-position:0 35.123967%}.flag-gt{background-position:0 35.53719%}.flag-gu{background-position:0 35.950413%}.flag-gw{background-position:0 36.363636%}.flag-gy{background-position:0 36.77686%}.flag-hk{background-position:0 37.190083%}.flag-hm{background-position:0 37.603306%}.flag-hn{background-position:0 38.016529%}.flag-hr{background-position:0 38.429752%}.flag-ht{background-position:0 38.842975%}.flag-hu{background-position:0 39.256198%}.flag-id{background-position:0 39.669421%}.flag-ie{background-position:0 40.082645%}.flag-il{background-position:0 40.495868%}.flag-in{background-position:0 40.909091%}.flag-io{background-position:0 41.322314%}.flag-iq{background-position:0 41.735537%}.flag-ir{background-position:0 42.14876%}.flag-is{background-position:0 42.561983%}.flag-it{background-position:0 42.975207%}.flag-jm{background-position:0 43.38843%}.flag-jo{background-position:0 43.801653%}.flag-jp{background-position:0 44.214876%}.flag-ke{background-position:0 44.628099%}.flag-kg{background-position:0 45.041322%}.flag-kh{background-position:0 45.454545%}.flag-ki{background-position:0 45.867769%}.flag-km{background-position:0 46.280992%}.flag-kn{background-position:0 46.694215%}.flag-kp{background-position:0 47.107438%}.flag-kr{background-position:0 47.520661%}.flag-kw{background-position:0 47.933884%}.flag-ky{background-position:0 48.347107%}.flag-kz{background-position:0 48.760331%}.flag-la{background-position:0 49.173554%}.flag-lb{background-position:0 49.586777%}.flag-lc{background-position:0 50%}.flag-li{background-position:0 50.413223%}.flag-lk{background-position:0 50.826446%}.flag-lr{background-position:0 51.239669%}.flag-ls{background-position:0 51.652893%}.flag-lt{background-position:0 52.066116%}.flag-lu{background-position:0 52.479339%}.flag-lv{background-position:0 52.892562%}.flag-ly{background-position:0 53.305785%}.flag-ma{background-position:0 53.719008%}.flag-mc{background-position:0 54.132231%}.flag-md{background-position:0 54.545455%}.flag-me{background-position:0 54.958678%}.flag-mg{background-position:0 55.371901%}.flag-mh{background-position:0 55.785124%}.flag-mk{background-position:0 56.198347%}.flag-ml{background-position:0 56.61157%}.flag-mm{background-position:0 57.024793%}.flag-mn{background-position:0 57.438017%}.flag-mo{background-position:0 57.85124%}.flag-mp{background-position:0 58.264463%}.flag-mq{background-position:0 58.677686%}.flag-mr{background-position:0 59.090909%}.flag-ms{background-position:0 59.504132%}.flag-mt{background-position:0 59.917355%}.flag-mu{background-position:0 60.330579%}.flag-mv{background-position:0 60.743802%}.flag-mw{background-position:0 61.157025%}.flag-mx{background-position:0 61.570248%}.flag-my{background-position:0 61.983471%}.flag-mz{background-position:0 62.396694%}.flag-na{background-position:0 62.809917%}.flag-nc{background-position:0 63.22314%}.flag-ne{background-position:0 63.636364%}.flag-nf{background-position:0 64.049587%}.flag-ng{background-position:0 64.46281%}.flag-ni{background-position:0 64.876033%}.flag-nl{background-position:0 65.289256%}.flag-no{background-position:0 65.702479%}.flag-np{background-position:0 66.115702%}.flag-nr{background-position:0 66.528926%}.flag-nu{background-position:0 66.942149%}.flag-nz{background-position:0 67.355372%}.flag-om{background-position:0 67.768595%}.flag-pa{background-position:0 68.181818%}.flag-pe{background-position:0 68.595041%}.flag-pf{background-position:0 69.008264%}.flag-pg{background-position:0 69.421488%}.flag-ph{background-position:0 69.834711%}.flag-pk{background-position:0 70.247934%}.flag-pl{background-position:0 70.661157%}.flag-pm{background-position:0 71.07438%}.flag-pn{background-position:0 71.487603%}.flag-pr{background-position:0 71.900826%}.flag-pt{background-position:0 72.31405%}.flag-pw{background-position:0 72.727273%}.flag-py{background-position:0 73.140496%}.flag-qa{background-position:0 73.553719%}.flag-re{background-position:0 73.966942%}.flag-ro{background-position:0 74.380165%}.flag-rs{background-position:0 74.793388%}.flag-ru{background-position:0 75.206612%}.flag-rw{background-position:0 75.619835%}.flag-sa{background-position:0 76.033058%}.flag-sb{background-position:0 76.446281%}.flag-sc{background-position:0 76.859504%}.flag-sd{background-position:0 77.272727%}.flag-se{background-position:0 77.68595%}.flag-sg{background-position:0 78.099174%}.flag-sh{background-position:0 78.512397%}.flag-si{background-position:0 78.92562%}.flag-sj{background-position:0 79.338843%}.flag-sk{background-position:0 79.752066%}.flag-sl{background-position:0 80.165289%}.flag-sm{background-position:0 80.578512%}.flag-sn{background-position:0 80.991736%}.flag-so{background-position:0 81.404959%}.flag-sr{background-position:0 81.818182%}.flag-ss{background-position:0 82.231405%}.flag-st{background-position:0 82.644628%}.flag-sv{background-position:0 83.057851%}.flag-sy{background-position:0 83.471074%}.flag-sz{background-position:0 83.884298%}.flag-tc{background-position:0 84.297521%}.flag-td{background-position:0 84.710744%}.flag-tf{background-position:0 85.123967%}.flag-tg{background-position:0 85.53719%}.flag-th{background-position:0 85.950413%}.flag-tj{background-position:0 86.363636%}.flag-tk{background-position:0 86.77686%}.flag-tl{background-position:0 87.190083%}.flag-tm{background-position:0 87.603306%}.flag-tn{background-position:0 88.016529%}.flag-to{background-position:0 88.429752%}.flag-tp{background-position:0 88.842975%}.flag-tr{background-position:0 89.256198%}.flag-tt{background-position:0 89.669421%}.flag-tv{background-position:0 90.082645%}.flag-tw{background-position:0 90.495868%}.flag-ty{background-position:0 90.909091%}.flag-tz{background-position:0 91.322314%}.flag-ua{background-position:0 91.735537%}.flag-ug{background-position:0 92.14876%}.flag-gb,.flag-uk{background-position:0 92.561983%}.flag-um{background-position:0 92.975207%}.flag-us{background-position:0 93.38843%}.flag-uy{background-position:0 93.801653%}.flag-uz{background-position:0 94.214876%}.flag-va{background-position:0 94.628099%}.flag-vc{background-position:0 95.041322%}.flag-ve{background-position:0 95.454545%}.flag-vg{background-position:0 95.867769%}.flag-vi{background-position:0 96.280992%}.flag-vn{background-position:0 96.694215%}.flag-vu{background-position:0 97.107438%}.flag-wf{background-position:0 97.520661%}.flag-ws{background-position:0 97.933884%}.flag-ye{background-position:0 98.347107%}.flag-za{background-position:0 98.760331%}.flag-zm{background-position:0 99.173554%}.flag-zr{background-position:0 99.586777%}.flag-zw{background-position:0 100%} 2 | -------------------------------------------------------------------------------- /src/assets/layout/_core.scss: -------------------------------------------------------------------------------- 1 | html { 2 | height: 100%; 3 | font-size: 14px; 4 | line-height: 1.2; 5 | } 6 | 7 | body { 8 | font-family: 'Lato', sans-serif; 9 | color: var(--text-color); 10 | background-color: var(--surface-ground); 11 | margin: 0; 12 | padding: 0; 13 | min-height: 100%; 14 | -webkit-font-smoothing: antialiased; 15 | -moz-osx-font-smoothing: grayscale; 16 | } 17 | 18 | a { 19 | text-decoration: none; 20 | } 21 | 22 | .layout-wrapper { 23 | min-height: 100vh; 24 | } 25 | -------------------------------------------------------------------------------- /src/assets/layout/_footer.scss: -------------------------------------------------------------------------------- 1 | .layout-footer { 2 | display: flex; 3 | align-items: center; 4 | justify-content: center; 5 | padding: 1rem 0 1rem 0; 6 | gap: 0.5rem; 7 | border-top: 1px solid var(--surface-border); 8 | } 9 | -------------------------------------------------------------------------------- /src/assets/layout/_main.scss: -------------------------------------------------------------------------------- 1 | .layout-main-container { 2 | display: flex; 3 | flex-direction: column; 4 | min-height: 100vh; 5 | justify-content: space-between; 6 | padding: 6rem 2rem 0 2rem; 7 | transition: margin-left var(--layout-section-transition-duration); 8 | } 9 | 10 | .layout-main { 11 | flex: 1 1 auto; 12 | padding-bottom: 2rem; 13 | } 14 | -------------------------------------------------------------------------------- /src/assets/layout/_menu.scss: -------------------------------------------------------------------------------- 1 | @use 'mixins' as *; 2 | 3 | .layout-sidebar { 4 | position: fixed; 5 | width: 20rem; 6 | height: calc(100vh - 8rem); 7 | z-index: 999; 8 | overflow-y: auto; 9 | user-select: none; 10 | top: 6rem; 11 | left: 2rem; 12 | transition: 13 | transform var(--layout-section-transition-duration), 14 | left var(--layout-section-transition-duration); 15 | background-color: var(--surface-overlay); 16 | border-radius: var(--content-border-radius); 17 | padding: 0.5rem 1.5rem; 18 | } 19 | 20 | .layout-menu { 21 | margin: 0; 22 | padding: 0; 23 | list-style-type: none; 24 | 25 | .layout-root-menuitem { 26 | > .layout-menuitem-root-text { 27 | font-size: 0.857rem; 28 | text-transform: uppercase; 29 | font-weight: 700; 30 | color: var(--text-color); 31 | margin: 0.75rem 0; 32 | } 33 | 34 | > a { 35 | display: none; 36 | } 37 | } 38 | 39 | a { 40 | user-select: none; 41 | 42 | &.active-menuitem { 43 | > .layout-submenu-toggler { 44 | transform: rotate(-180deg); 45 | } 46 | } 47 | } 48 | 49 | li.active-menuitem { 50 | > a { 51 | .layout-submenu-toggler { 52 | transform: rotate(-180deg); 53 | } 54 | } 55 | } 56 | 57 | ul { 58 | margin: 0; 59 | padding: 0; 60 | list-style-type: none; 61 | 62 | a { 63 | display: flex; 64 | align-items: center; 65 | position: relative; 66 | outline: 0 none; 67 | color: var(--text-color); 68 | cursor: pointer; 69 | padding: 0.75rem 1rem; 70 | border-radius: var(--content-border-radius); 71 | transition: 72 | background-color var(--element-transition-duration), 73 | box-shadow var(--element-transition-duration); 74 | 75 | .layout-menuitem-icon { 76 | margin-right: 0.5rem; 77 | } 78 | 79 | .layout-submenu-toggler { 80 | font-size: 75%; 81 | margin-left: auto; 82 | transition: transform var(--element-transition-duration); 83 | } 84 | 85 | &.active-route { 86 | font-weight: 700; 87 | color: var(--primary-color); 88 | } 89 | 90 | &:hover { 91 | background-color: var(--surface-hover); 92 | } 93 | 94 | &:focus { 95 | @include focused-inset(); 96 | } 97 | } 98 | 99 | ul { 100 | overflow: hidden; 101 | border-radius: var(--content-border-radius); 102 | 103 | li { 104 | a { 105 | margin-left: 1rem; 106 | } 107 | 108 | li { 109 | a { 110 | margin-left: 2rem; 111 | } 112 | 113 | li { 114 | a { 115 | margin-left: 2.5rem; 116 | } 117 | 118 | li { 119 | a { 120 | margin-left: 3rem; 121 | } 122 | 123 | li { 124 | a { 125 | margin-left: 3.5rem; 126 | } 127 | 128 | li { 129 | a { 130 | margin-left: 4rem; 131 | } 132 | } 133 | } 134 | } 135 | } 136 | } 137 | } 138 | } 139 | } 140 | } 141 | 142 | .layout-submenu-enter-from, 143 | .layout-submenu-leave-to { 144 | max-height: 0; 145 | } 146 | 147 | .layout-submenu-enter-to, 148 | .layout-submenu-leave-from { 149 | max-height: 1000px; 150 | } 151 | 152 | .layout-submenu-leave-active { 153 | overflow: hidden; 154 | transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); 155 | } 156 | 157 | .layout-submenu-enter-active { 158 | overflow: hidden; 159 | transition: max-height 1s ease-in-out; 160 | } 161 | -------------------------------------------------------------------------------- /src/assets/layout/_mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin focused() { 2 | outline-width: var(--focus-ring-width); 3 | outline-style: var(--focus-ring-style); 4 | outline-color: var(--focus-ring-color); 5 | outline-offset: var(--focus-ring-offset); 6 | box-shadow: var(--focus-ring-shadow); 7 | transition: 8 | box-shadow var(--transition-duration), 9 | outline-color var(--transition-duration); 10 | } 11 | 12 | @mixin focused-inset() { 13 | outline-offset: -1px; 14 | box-shadow: inset var(--focus-ring-shadow); 15 | } 16 | -------------------------------------------------------------------------------- /src/assets/layout/_preloading.scss: -------------------------------------------------------------------------------- 1 | .preloader { 2 | position: fixed; 3 | z-index: 999999; 4 | background: #edf1f5; 5 | width: 100%; 6 | height: 100%; 7 | } 8 | .preloader-content { 9 | border: 0 solid transparent; 10 | border-radius: 50%; 11 | width: 150px; 12 | height: 150px; 13 | position: absolute; 14 | top: calc(50vh - 75px); 15 | left: calc(50vw - 75px); 16 | } 17 | 18 | .preloader-content:before, .preloader-content:after{ 19 | content: ''; 20 | border: 1em solid var(--primary-color); 21 | border-radius: 50%; 22 | width: inherit; 23 | height: inherit; 24 | position: absolute; 25 | top: 0; 26 | left: 0; 27 | animation: loader 2s linear infinite; 28 | opacity: 0; 29 | } 30 | 31 | .preloader-content:before{ 32 | animation-delay: 0.5s; 33 | } 34 | 35 | @keyframes loader{ 36 | 0%{ 37 | transform: scale(0); 38 | opacity: 0; 39 | } 40 | 50%{ 41 | opacity: 1; 42 | } 43 | 100%{ 44 | transform: scale(1); 45 | opacity: 0; 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /src/assets/layout/_responsive.scss: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: 1960px) { 2 | .layout-main, 3 | .landing-wrapper { 4 | width: 1504px; 5 | margin-left: auto !important; 6 | margin-right: auto !important; 7 | } 8 | } 9 | 10 | @media (min-width: 992px) { 11 | .layout-wrapper { 12 | &.layout-overlay { 13 | .layout-main-container { 14 | margin-left: 0; 15 | padding-left: 2rem; 16 | } 17 | 18 | .layout-sidebar { 19 | transform: translateX(-100%); 20 | left: 0; 21 | top: 0; 22 | height: 100vh; 23 | border-top-left-radius: 0; 24 | border-bottom-left-radius: 0; 25 | border-right: 1px solid var(--surface-border); 26 | transition: 27 | transform 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99), 28 | left 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99); 29 | box-shadow: 30 | 0px 3px 5px rgba(0, 0, 0, 0.02), 31 | 0px 0px 2px rgba(0, 0, 0, 0.05), 32 | 0px 1px 4px rgba(0, 0, 0, 0.08); 33 | } 34 | 35 | &.layout-overlay-active { 36 | .layout-sidebar { 37 | transform: translateX(0); 38 | } 39 | } 40 | } 41 | 42 | &.layout-static { 43 | .layout-main-container { 44 | margin-left: 22rem; 45 | } 46 | 47 | &.layout-static-inactive { 48 | .layout-sidebar { 49 | transform: translateX(-100%); 50 | left: 0; 51 | } 52 | 53 | .layout-main-container { 54 | margin-left: 0; 55 | padding-left: 2rem; 56 | } 57 | } 58 | } 59 | 60 | .layout-mask { 61 | display: none; 62 | } 63 | } 64 | } 65 | 66 | @media (max-width: 991px) { 67 | .blocked-scroll { 68 | overflow: hidden; 69 | } 70 | 71 | .layout-wrapper { 72 | .layout-main-container { 73 | margin-left: 0; 74 | padding-left: 2rem; 75 | } 76 | 77 | .layout-sidebar { 78 | transform: translateX(-100%); 79 | left: 0; 80 | top: 0; 81 | height: 100vh; 82 | border-top-left-radius: 0; 83 | border-bottom-left-radius: 0; 84 | transition: 85 | transform 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99), 86 | left 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99); 87 | } 88 | 89 | .layout-mask { 90 | display: none; 91 | position: fixed; 92 | top: 0; 93 | left: 0; 94 | z-index: 998; 95 | width: 100%; 96 | height: 100%; 97 | background-color: var(--maskbg); 98 | } 99 | 100 | &.layout-mobile-active { 101 | .layout-sidebar { 102 | transform: translateX(0); 103 | } 104 | 105 | .layout-mask { 106 | display: block; 107 | } 108 | } 109 | } 110 | } 111 | -------------------------------------------------------------------------------- /src/assets/layout/_topbar.scss: -------------------------------------------------------------------------------- 1 | @use 'mixins' as *; 2 | 3 | .layout-topbar { 4 | position: fixed; 5 | height: 4rem; 6 | z-index: 997; 7 | left: 0; 8 | top: 0; 9 | width: 100%; 10 | padding: 0 2rem; 11 | background-color: var(--surface-card); 12 | transition: left var(--layout-section-transition-duration); 13 | display: flex; 14 | align-items: center; 15 | 16 | .layout-topbar-logo-container { 17 | width: 20rem; 18 | display: flex; 19 | align-items: center; 20 | } 21 | 22 | .layout-topbar-logo { 23 | display: inline-flex; 24 | align-items: center; 25 | font-size: 1.5rem; 26 | border-radius: var(--content-border-radius); 27 | color: var(--text-color); 28 | font-weight: 500; 29 | gap: 0.5rem; 30 | 31 | svg { 32 | width: 3rem; 33 | } 34 | 35 | &:focus-visible { 36 | @include focused(); 37 | } 38 | } 39 | 40 | .layout-topbar-action { 41 | display: inline-flex; 42 | justify-content: center; 43 | align-items: center; 44 | border-radius: 50%; 45 | width: 2.5rem; 46 | height: 2.5rem; 47 | color: var(--text-color); 48 | transition: background-color var(--element-transition-duration); 49 | cursor: pointer; 50 | 51 | &:hover { 52 | background-color: var(--surface-hover); 53 | } 54 | 55 | &:focus-visible { 56 | @include focused(); 57 | } 58 | 59 | i { 60 | font-size: 1.25rem; 61 | } 62 | 63 | span { 64 | font-size: 1rem; 65 | display: none; 66 | } 67 | 68 | &.layout-topbar-action-highlight { 69 | background-color: var(--primary-color); 70 | color: var(--primary-contrast-color); 71 | } 72 | } 73 | 74 | .layout-menu-button { 75 | margin-right: 0.5rem; 76 | } 77 | 78 | .layout-topbar-menu-button { 79 | display: none; 80 | } 81 | 82 | .layout-topbar-actions { 83 | margin-left: auto; 84 | display: flex; 85 | gap: 1rem; 86 | } 87 | 88 | .layout-topbar-menu-content { 89 | display: flex; 90 | gap: 1rem; 91 | } 92 | 93 | .layout-config-menu { 94 | display: flex; 95 | gap: 1rem; 96 | } 97 | } 98 | 99 | @media (max-width: 991px) { 100 | .layout-topbar { 101 | padding: 0 2rem; 102 | 103 | .layout-topbar-logo-container { 104 | width: auto; 105 | } 106 | 107 | .layout-menu-button { 108 | margin-left: 0; 109 | margin-right: 0.5rem; 110 | } 111 | 112 | .layout-topbar-menu-button { 113 | display: inline-flex; 114 | } 115 | 116 | .layout-topbar-menu { 117 | position: absolute; 118 | background-color: var(--surface-overlay); 119 | transform-origin: top; 120 | box-shadow: 121 | 0px 3px 5px rgba(0, 0, 0, 0.02), 122 | 0px 0px 2px rgba(0, 0, 0, 0.05), 123 | 0px 1px 4px rgba(0, 0, 0, 0.08); 124 | border-radius: var(--content-border-radius); 125 | padding: 1rem; 126 | right: 2rem; 127 | top: 4rem; 128 | min-width: 15rem; 129 | border: 1px solid var(--surface-border); 130 | 131 | .layout-topbar-menu-content { 132 | gap: 0.5rem; 133 | } 134 | 135 | .layout-topbar-action { 136 | display: flex; 137 | width: 100%; 138 | height: auto; 139 | justify-content: flex-start; 140 | border-radius: var(--content-border-radius); 141 | padding: 0.5rem 1rem; 142 | 143 | i { 144 | font-size: 1rem; 145 | margin-right: 0.5rem; 146 | } 147 | 148 | span { 149 | font-weight: medium; 150 | display: block; 151 | } 152 | } 153 | } 154 | 155 | .layout-topbar-menu-content { 156 | flex-direction: column; 157 | } 158 | } 159 | } 160 | 161 | .config-panel { 162 | .config-panel-label { 163 | font-size: 0.875rem; 164 | color: var(--text-secondary-color); 165 | font-weight: 600; 166 | line-height: 1; 167 | } 168 | 169 | .config-panel-colors { 170 | > div { 171 | padding-top: 0.5rem; 172 | display: flex; 173 | gap: 0.5rem; 174 | flex-wrap: wrap; 175 | justify-content: space-between; 176 | 177 | button { 178 | border: none; 179 | width: 1.25rem; 180 | height: 1.25rem; 181 | border-radius: 50%; 182 | padding: 0; 183 | cursor: pointer; 184 | outline-color: transparent; 185 | outline-width: 2px; 186 | outline-style: solid; 187 | outline-offset: 1px; 188 | 189 | &.active-color { 190 | outline-color: var(--primary-color); 191 | } 192 | } 193 | } 194 | } 195 | 196 | .config-panel-settings { 197 | display: flex; 198 | flex-direction: column; 199 | gap: 0.5rem; 200 | } 201 | } 202 | -------------------------------------------------------------------------------- /src/assets/layout/_typography.scss: -------------------------------------------------------------------------------- 1 | h1, 2 | h2, 3 | h3, 4 | h4, 5 | h5, 6 | h6 { 7 | margin: 1.5rem 0 1rem 0; 8 | font-family: inherit; 9 | font-weight: 700; 10 | line-height: 1.5; 11 | color: var(--text-color); 12 | 13 | &:first-child { 14 | margin-top: 0; 15 | } 16 | } 17 | 18 | h1 { 19 | font-size: 2.5rem; 20 | } 21 | 22 | h2 { 23 | font-size: 2rem; 24 | } 25 | 26 | h3 { 27 | font-size: 1.75rem; 28 | } 29 | 30 | h4 { 31 | font-size: 1.5rem; 32 | } 33 | 34 | h5 { 35 | font-size: 1.25rem; 36 | } 37 | 38 | h6 { 39 | font-size: 1rem; 40 | } 41 | 42 | mark { 43 | background: #fff8e1; 44 | padding: 0.25rem 0.4rem; 45 | border-radius: var(--content-border-radius); 46 | font-family: monospace; 47 | } 48 | 49 | blockquote { 50 | margin: 1rem 0; 51 | padding: 0 2rem; 52 | border-left: 4px solid #90a4ae; 53 | } 54 | 55 | hr { 56 | border-top: solid var(--surface-border); 57 | border-width: 1px 0 0 0; 58 | margin: 1rem 0; 59 | } 60 | 61 | p { 62 | margin: 0 0 1rem 0; 63 | line-height: 1.5; 64 | 65 | &:last-child { 66 | margin-bottom: 0; 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /src/assets/layout/_utils.scss: -------------------------------------------------------------------------------- 1 | /* Utils */ 2 | .clearfix:after { 3 | content: ' '; 4 | display: block; 5 | clear: both; 6 | } 7 | 8 | .card { 9 | background: var(--surface-card); 10 | padding: 2rem; 11 | margin-bottom: 2rem; 12 | border-radius: var(--content-border-radius); 13 | 14 | &:last-child { 15 | margin-bottom: 0; 16 | } 17 | } 18 | 19 | .p-toast { 20 | &.p-toast-top-right, 21 | &.p-toast-top-left, 22 | &.p-toast-top-center { 23 | top: 100px; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/assets/layout/layout.scss: -------------------------------------------------------------------------------- 1 | @use './variables/_common'; 2 | @use './variables/_light'; 3 | @use './variables/_dark'; 4 | @use './_mixins'; 5 | @use './_preloading'; 6 | @use './_core'; 7 | @use './_main'; 8 | @use './_topbar'; 9 | @use './_menu'; 10 | @use './_footer'; 11 | @use './_responsive'; 12 | @use './_utils'; 13 | @use './_typography'; 14 | -------------------------------------------------------------------------------- /src/assets/layout/variables/_common.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | --primary-color: var(--p-primary-color); 3 | --primary-contrast-color: var(--p-primary-contrast-color); 4 | --text-color: var(--p-text-color); 5 | --text-color-secondary: var(--p-text-muted-color); 6 | --surface-border: var(--p-content-border-color); 7 | --surface-card: var(--p-content-background); 8 | --surface-hover: var(--p-content-hover-background); 9 | --surface-overlay: var(--p-overlay-popover-background); 10 | --transition-duration: var(--p-transition-duration); 11 | --maskbg: var(--p-mask-background); 12 | --content-border-radius: var(--p-content-border-radius); 13 | --layout-section-transition-duration: 0.2s; 14 | --element-transition-duration: var(--p-transition-duration); 15 | --focus-ring-width: var(--p-focus-ring-width); 16 | --focus-ring-style: var(--p-focus-ring-style); 17 | --focus-ring-color: var(--p-focus-ring-color); 18 | --focus-ring-offset: var(--p-focus-ring-offset); 19 | --focus-ring-shadow: var(--p-focus-ring-shadow); 20 | } 21 | -------------------------------------------------------------------------------- /src/assets/layout/variables/_dark.scss: -------------------------------------------------------------------------------- 1 | :root[class*='app-dark'] { 2 | --surface-ground: var(--p-surface-950); 3 | --code-background: var(--p-surface-800); 4 | --code-color: var(--p-surface-100); 5 | } 6 | -------------------------------------------------------------------------------- /src/assets/layout/variables/_light.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | --surface-ground: var(--p-surface-100); 3 | --code-background: var(--p-surface-900); 4 | --code-color: var(--p-surface-200); 5 | } 6 | -------------------------------------------------------------------------------- /src/assets/styles.scss: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | @use 'primeicons/primeicons.css'; 3 | @use '@/assets/tailwind.css'; 4 | @use '@/assets/layout/layout.scss'; 5 | @use '@/assets/demo/demo.scss'; 6 | -------------------------------------------------------------------------------- /src/assets/tailwind.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /src/components/FloatingConfigurator.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 22 | -------------------------------------------------------------------------------- /src/components/dashboard/BestSellingWidget.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 97 | -------------------------------------------------------------------------------- /src/components/dashboard/NotificationsWidget.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 79 | -------------------------------------------------------------------------------- /src/components/dashboard/RecentSalesWidget.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 39 | -------------------------------------------------------------------------------- /src/components/dashboard/RevenueStreamWidget.vue: -------------------------------------------------------------------------------- 1 | 90 | 91 | 97 | -------------------------------------------------------------------------------- /src/components/dashboard/StatsWidget.vue: -------------------------------------------------------------------------------- 1 | 63 | -------------------------------------------------------------------------------- /src/components/landing/HeroWidget.vue: -------------------------------------------------------------------------------- 1 | 17 | -------------------------------------------------------------------------------- /src/components/landing/HighlightsWidget.vue: -------------------------------------------------------------------------------- 1 | 41 | -------------------------------------------------------------------------------- /src/components/landing/PricingWidget.vue: -------------------------------------------------------------------------------- 1 | 110 | -------------------------------------------------------------------------------- /src/components/landing/TopbarWidget.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 73 | -------------------------------------------------------------------------------- /src/layout/AppFooter.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 9 | -------------------------------------------------------------------------------- /src/layout/AppLayout.vue: -------------------------------------------------------------------------------- 1 | 57 | 58 | 72 | -------------------------------------------------------------------------------- /src/layout/AppMenu.vue: -------------------------------------------------------------------------------- 1 | 141 | 142 | 150 | 151 | 152 | -------------------------------------------------------------------------------- /src/layout/AppMenuItem.vue: -------------------------------------------------------------------------------- 1 | 70 | 71 | 91 | 92 | 93 | -------------------------------------------------------------------------------- /src/layout/AppSidebar.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/layout/AppTopbar.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 80 | -------------------------------------------------------------------------------- /src/layout/composables/layout.js: -------------------------------------------------------------------------------- 1 | import { computed, reactive } from 'vue'; 2 | 3 | const layoutConfig = reactive({ 4 | preset: 'Aura', 5 | primary: 'emerald', 6 | surface: null, 7 | darkTheme: false, 8 | menuMode: 'static' 9 | }); 10 | 11 | const layoutState = reactive({ 12 | staticMenuDesktopInactive: false, 13 | overlayMenuActive: false, 14 | profileSidebarVisible: false, 15 | configSidebarVisible: false, 16 | staticMenuMobileActive: false, 17 | menuHoverActive: false, 18 | activeMenuItem: null 19 | }); 20 | 21 | export function useLayout() { 22 | const setActiveMenuItem = (item) => { 23 | layoutState.activeMenuItem = item.value || item; 24 | }; 25 | 26 | const toggleDarkMode = () => { 27 | if (!document.startViewTransition) { 28 | executeDarkModeToggle(); 29 | 30 | return; 31 | } 32 | 33 | document.startViewTransition(() => executeDarkModeToggle(event)); 34 | }; 35 | 36 | const executeDarkModeToggle = () => { 37 | layoutConfig.darkTheme = !layoutConfig.darkTheme; 38 | document.documentElement.classList.toggle('app-dark'); 39 | }; 40 | 41 | const toggleMenu = () => { 42 | if (layoutConfig.menuMode === 'overlay') { 43 | layoutState.overlayMenuActive = !layoutState.overlayMenuActive; 44 | } 45 | 46 | if (window.innerWidth > 991) { 47 | layoutState.staticMenuDesktopInactive = !layoutState.staticMenuDesktopInactive; 48 | } else { 49 | layoutState.staticMenuMobileActive = !layoutState.staticMenuMobileActive; 50 | } 51 | }; 52 | 53 | const isSidebarActive = computed(() => layoutState.overlayMenuActive || layoutState.staticMenuMobileActive); 54 | 55 | const isDarkTheme = computed(() => layoutConfig.darkTheme); 56 | 57 | const getPrimary = computed(() => layoutConfig.primary); 58 | 59 | const getSurface = computed(() => layoutConfig.surface); 60 | 61 | return { 62 | layoutConfig, 63 | layoutState, 64 | toggleMenu, 65 | isSidebarActive, 66 | isDarkTheme, 67 | getPrimary, 68 | getSurface, 69 | setActiveMenuItem, 70 | toggleDarkMode 71 | }; 72 | } 73 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | import App from './App.vue'; 3 | import router from './router'; 4 | 5 | import Aura from '@primeuix/themes/aura'; 6 | import PrimeVue from 'primevue/config'; 7 | import ConfirmationService from 'primevue/confirmationservice'; 8 | import ToastService from 'primevue/toastservice'; 9 | 10 | import '@/assets/styles.scss'; 11 | 12 | const app = createApp(App); 13 | 14 | app.use(router); 15 | app.use(PrimeVue, { 16 | theme: { 17 | preset: Aura, 18 | options: { 19 | darkModeSelector: '.app-dark' 20 | } 21 | } 22 | }); 23 | app.use(ToastService); 24 | app.use(ConfirmationService); 25 | 26 | app.mount('#app'); 27 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import AppLayout from '@/layout/AppLayout.vue'; 2 | import { createRouter, createWebHistory } from 'vue-router'; 3 | 4 | const router = createRouter({ 5 | history: createWebHistory(), 6 | routes: [ 7 | { 8 | path: '/', 9 | component: AppLayout, 10 | children: [ 11 | { 12 | path: '/', 13 | name: 'dashboard', 14 | component: () => import('@/views/Dashboard.vue') 15 | }, 16 | { 17 | path: '/uikit/formlayout', 18 | name: 'formlayout', 19 | component: () => import('@/views/uikit/FormLayout.vue') 20 | }, 21 | { 22 | path: '/uikit/input', 23 | name: 'input', 24 | component: () => import('@/views/uikit/InputDoc.vue') 25 | }, 26 | { 27 | path: '/uikit/button', 28 | name: 'button', 29 | component: () => import('@/views/uikit/ButtonDoc.vue') 30 | }, 31 | { 32 | path: '/uikit/table', 33 | name: 'table', 34 | component: () => import('@/views/uikit/TableDoc.vue') 35 | }, 36 | { 37 | path: '/uikit/list', 38 | name: 'list', 39 | component: () => import('@/views/uikit/ListDoc.vue') 40 | }, 41 | { 42 | path: '/uikit/tree', 43 | name: 'tree', 44 | component: () => import('@/views/uikit/TreeDoc.vue') 45 | }, 46 | { 47 | path: '/uikit/panel', 48 | name: 'panel', 49 | component: () => import('@/views/uikit/PanelsDoc.vue') 50 | }, 51 | 52 | { 53 | path: '/uikit/overlay', 54 | name: 'overlay', 55 | component: () => import('@/views/uikit/OverlayDoc.vue') 56 | }, 57 | { 58 | path: '/uikit/media', 59 | name: 'media', 60 | component: () => import('@/views/uikit/MediaDoc.vue') 61 | }, 62 | { 63 | path: '/uikit/message', 64 | name: 'message', 65 | component: () => import('@/views/uikit/MessagesDoc.vue') 66 | }, 67 | { 68 | path: '/uikit/file', 69 | name: 'file', 70 | component: () => import('@/views/uikit/FileDoc.vue') 71 | }, 72 | { 73 | path: '/uikit/menu', 74 | name: 'menu', 75 | component: () => import('@/views/uikit/MenuDoc.vue') 76 | }, 77 | { 78 | path: '/uikit/charts', 79 | name: 'charts', 80 | component: () => import('@/views/uikit/ChartDoc.vue') 81 | }, 82 | { 83 | path: '/uikit/misc', 84 | name: 'misc', 85 | component: () => import('@/views/uikit/MiscDoc.vue') 86 | }, 87 | { 88 | path: '/uikit/timeline', 89 | name: 'timeline', 90 | component: () => import('@/views/uikit/TimelineDoc.vue') 91 | }, 92 | { 93 | path: '/pages/empty', 94 | name: 'empty', 95 | component: () => import('@/views/pages/Empty.vue') 96 | }, 97 | { 98 | path: '/pages/crud', 99 | name: 'crud', 100 | component: () => import('@/views/pages/Crud.vue') 101 | }, 102 | { 103 | path: '/documentation', 104 | name: 'documentation', 105 | component: () => import('@/views/pages/Documentation.vue') 106 | } 107 | ] 108 | }, 109 | { 110 | path: '/landing', 111 | name: 'landing', 112 | component: () => import('@/views/pages/Landing.vue') 113 | }, 114 | { 115 | path: '/pages/notfound', 116 | name: 'notfound', 117 | component: () => import('@/views/pages/NotFound.vue') 118 | }, 119 | 120 | { 121 | path: '/auth/login', 122 | name: 'login', 123 | component: () => import('@/views/pages/auth/Login.vue') 124 | }, 125 | { 126 | path: '/auth/access', 127 | name: 'accessDenied', 128 | component: () => import('@/views/pages/auth/Access.vue') 129 | }, 130 | { 131 | path: '/auth/error', 132 | name: 'error', 133 | component: () => import('@/views/pages/auth/Error.vue') 134 | } 135 | ] 136 | }); 137 | 138 | export default router; 139 | -------------------------------------------------------------------------------- /src/service/PhotoService.js: -------------------------------------------------------------------------------- 1 | export const PhotoService = { 2 | getData() { 3 | return [ 4 | { 5 | itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg', 6 | thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1s.jpg', 7 | alt: 'Description for Image 1', 8 | title: 'Title 1' 9 | }, 10 | { 11 | itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria2.jpg', 12 | thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria2s.jpg', 13 | alt: 'Description for Image 2', 14 | title: 'Title 2' 15 | }, 16 | { 17 | itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria3.jpg', 18 | thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria3s.jpg', 19 | alt: 'Description for Image 3', 20 | title: 'Title 3' 21 | }, 22 | { 23 | itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria4.jpg', 24 | thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria4s.jpg', 25 | alt: 'Description for Image 4', 26 | title: 'Title 4' 27 | }, 28 | { 29 | itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria5.jpg', 30 | thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria5s.jpg', 31 | alt: 'Description for Image 5', 32 | title: 'Title 5' 33 | }, 34 | { 35 | itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria6.jpg', 36 | thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria6s.jpg', 37 | alt: 'Description for Image 6', 38 | title: 'Title 6' 39 | }, 40 | { 41 | itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria7.jpg', 42 | thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria7s.jpg', 43 | alt: 'Description for Image 7', 44 | title: 'Title 7' 45 | }, 46 | { 47 | itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria8.jpg', 48 | thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria8s.jpg', 49 | alt: 'Description for Image 8', 50 | title: 'Title 8' 51 | }, 52 | { 53 | itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria9.jpg', 54 | thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria9s.jpg', 55 | alt: 'Description for Image 9', 56 | title: 'Title 9' 57 | }, 58 | { 59 | itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg', 60 | thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria10s.jpg', 61 | alt: 'Description for Image 10', 62 | title: 'Title 10' 63 | }, 64 | { 65 | itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria11.jpg', 66 | thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria11s.jpg', 67 | alt: 'Description for Image 11', 68 | title: 'Title 11' 69 | }, 70 | { 71 | itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria12.jpg', 72 | thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria12s.jpg', 73 | alt: 'Description for Image 12', 74 | title: 'Title 12' 75 | }, 76 | { 77 | itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria13.jpg', 78 | thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria13s.jpg', 79 | alt: 'Description for Image 13', 80 | title: 'Title 13' 81 | }, 82 | { 83 | itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria14.jpg', 84 | thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria14s.jpg', 85 | alt: 'Description for Image 14', 86 | title: 'Title 14' 87 | }, 88 | { 89 | itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria15.jpg', 90 | thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria15s.jpg', 91 | alt: 'Description for Image 15', 92 | title: 'Title 15' 93 | } 94 | ]; 95 | }, 96 | 97 | getImages() { 98 | return Promise.resolve(this.getData()); 99 | } 100 | }; 101 | -------------------------------------------------------------------------------- /src/views/Dashboard.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 23 | -------------------------------------------------------------------------------- /src/views/pages/Documentation.vue: -------------------------------------------------------------------------------- 1 | 131 | 132 | 150 | -------------------------------------------------------------------------------- /src/views/pages/Empty.vue: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /src/views/pages/Landing.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 24 | -------------------------------------------------------------------------------- /src/views/pages/auth/Access.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 27 | -------------------------------------------------------------------------------- /src/views/pages/auth/Error.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 27 | -------------------------------------------------------------------------------- /src/views/pages/auth/Login.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 59 | 60 | 71 | -------------------------------------------------------------------------------- /src/views/uikit/FileDoc.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 37 | -------------------------------------------------------------------------------- /src/views/uikit/FormLayout.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 |