diff --git a/.eslintignore b/.eslintignore deleted file mode 100644 index baca311b..00000000 --- a/.eslintignore +++ /dev/null @@ -1,3 +0,0 @@ -node_modules/* -/dist/** -.eslintrc.js diff --git a/.eslintrc.js b/.eslintrc.js deleted file mode 100644 index f19d1539..00000000 --- a/.eslintrc.js +++ /dev/null @@ -1,30 +0,0 @@ -module.exports = { - root: true, - env: { - node: true, - }, - extends: [ - 'plugin:vue/vue3-essential', - 'eslint:recommended', - 'plugin:prettier/recommended', - ], - parserOptions: { - parser: '@babel/eslint-parser', - }, - rules: { - 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', - 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', - 'vue/multi-word-component-names': 'off', - }, - overrides: [ - { - files: [ - '**/__tests__/*.{j,t}s?(x)', - '**/tests/unit/**/*.spec.{j,t}s?(x)', - ], - env: { - jest: true, - }, - }, - ], -} diff --git a/.prettierrc.js b/.prettierrc.js index 6ac17b64..61281d24 100644 --- a/.prettierrc.js +++ b/.prettierrc.js @@ -1,7 +1,7 @@ module.exports = { - // jsxBracketSameLine: true, semi: false, trailingComma: "all", singleQuote: true, - tabWidth: 2 + printWidth: 100, + tabWidth: 2, }; diff --git a/LICENSE b/LICENSE new file mode 100644 index 00000000..433069ca --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2025 creativeLabs Łukasz Holeczek. + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. diff --git a/README.md b/README.md index 1f772b7c..5cc0eda5 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,12 @@ +# CoreUI Free Vue Admin Template [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter)](https://twitter.com/intent/tweet?text=CoreUI%20-%20Free%Vue%204%20Admin%20Template%20&url=https://coreui.io&hashtags=bootstrap,admin,template,dashboard,panel,free,angular,react,vue) + +[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://opensource.org/licenses/MIT) [![@coreui coreui](https://img.shields.io/badge/@coreui%20-coreui-lightgrey.svg?style=flat-square)](https://github.com/coreui/coreui) [![npm package][npm-coreui-badge]][npm-coreui] -[![NPM downloads][npm-coreui-download]][npm-coreui] +[![NPM downloads][npm-coreui-download]][npm-coreui] [![@coreui vue](https://img.shields.io/badge/@coreui%20-vue-lightgrey.svg?style=flat-square)](https://github.com/coreui/vue) [![npm package][npm-coreui-vue-badge]][npm-coreui-vue] [![NPM downloads][npm-coreui-vue-download]][npm-coreui-vue] -[![npm next][npm-next]][npm] [npm-coreui]: https://www.npmjs.com/package/@coreui/coreui [npm-coreui-badge]: https://img.shields.io/npm/v/@coreui/coreui.png?style=flat-square @@ -12,17 +14,17 @@ [npm-coreui-vue]: https://www.npmjs.com/package/@coreui/vue [npm-coreui-vue-badge]: https://img.shields.io/npm/v/@coreui/vue.png?style=flat-square [npm-coreui-vue-download]: https://img.shields.io/npm/dm/@coreui/vue.svg?style=flat-square -[npm-next]: https://img.shields.io/npm/v/@coreui/vue/next.png?style=flat-square [npm]: https://www.npmjs.com/package/@coreui/vue -# CoreUI Free Vue Admin Template v4 +[![Bootstrap Admin Template](https://assets.coreui.io/products/coreui-free-bootstrap-admin-template-light-dark.webp)](https://coreui.io/product/free-react-admin-template/) CoreUI is meant to be the UX game changer. Pure & transparent code is devoid of redundant components, so the app is light enough to offer ultimate user experience. This means mobile devices also, where the navigation is just as easy and intuitive as on a desktop or laptop. The CoreUI Layout API lets you customize your project for almost any device – be it Mobile, Web or WebApp – CoreUI covers them all! ## Table of Contents * [Versions](#versions) -* [CoreUI Pro](#coreui-pro) +* [CoreUI PRO](#coreui-pro) +* [CoreUI PRO Vue Admin Templates](#coreui-pro-vue-admin-templates) * [Quick Start](#quick-start) * [Installation](#installation) * [Basic usage](#basic-usage) @@ -31,6 +33,7 @@ CoreUI is meant to be the UX game changer. Pure & transparent code is devoid of * [Versioning](#versioning) * [Creators](#creators) * [Community](#community) +* [Support CoreUI Development](#support-coreui-development) * [Copyright and License](#copyright-and-license) ## Versions @@ -40,12 +43,23 @@ CoreUI is meant to be the UX game changer. Pure & transparent code is devoid of * [CoreUI Free React.js Admin Template](https://github.com/coreui/coreui-free-react-admin-template) * [CoreUI Free Vue.js Admin Template](https://github.com/coreui/coreui-free-vue-admin-template) -## CoreUI Pro +## CoreUI PRO + +* πŸ’ͺ [CoreUI PRO Angular Admin Template](https://coreui.io/product/angular-dashboard-template/) +* πŸ’ͺ [CoreUI PRO Bootstrap Admin Template](https://coreui.io/product/bootstrap-dashboard-template/) +* πŸ’ͺ [CoreUI PRO Next.js Admin Template](https://coreui.io/product/next-js-dashboard-template/) +* πŸ’ͺ [CoreUI PRO React Admin Template](https://coreui.io/product/react-dashboard-template/) +* πŸ’ͺ [CoreUI PRO Vue Admin Template](https://coreui.io/product/vue-dashboard-template/) + +## CoreUI PRO Vue Admin Templates + +| Default Theme | Light Theme | +| --- | --- | +| [![CoreUI PRO Vue Admin Template](https://coreui.io/images/templates/coreui_pro_default_light_dark.webp)](https://coreui.io/product/vue-dashboard-template/?theme=default) | [![CoreUI PRO Vue Admin Template](https://coreui.io/images/templates/coreui_pro_light_light_dark.webp)](https://coreui.io/product/vue-dashboard-template/?theme=light)| -* πŸ’ͺ [CoreUI Pro Angular Admin Template](https://coreui.io/product/angular-dashboard-template/) -* πŸ’ͺ [CoreUI Pro Bootstrap Admin Template](https://coreui.io/product/bootstrap-dashboard-template/) -* πŸ’ͺ [CoreUI Pro React Admin Template](https://coreui.io/product/react-dashboard-template/) -* πŸ’ͺ [CoreUI Pro Vue Admin Template](https://coreui.io/product/vue-dashboard-template/) +| Modern Theme | Bright Theme | +| --- | --- | +| [![CoreUI PRO Vue Admin Template](https://coreui.io/images/templates/coreui_pro_default_v3_light_dark.webp)](https://coreui.io/product/vue-dashboard-template/?theme=modern) | [![CoreUI PRO Vue Admin Template](https://coreui.io/images/templates/coreui_pro_light_v3_light_dark.webp)](https://coreui.io/product/vue-dashboard-template/?theme=bright)| ## Quick Start @@ -68,21 +82,21 @@ $ yarn install ``` bash # dev server with hot reload at http://localhost:3000 -$ npm run serve +$ npm run dev ``` or ``` bash # dev server with hot reload at http://localhost:3000 -$ yarn serve +$ yarn dev ``` Navigate to [http://localhost:3000](http://localhost:3000). The app will automatically reload if you change any of the source files. #### Build -Run `build` to build the project. The build artifacts will be stored in the `build/` directory. +Run `build` to build the project. The build artifacts will be stored in the `dist/` directory. ```bash # build for production with minification @@ -103,27 +117,26 @@ Within the download you'll find the following directories and files, logically g ``` coreui-free-vue-admin-template β”œβ”€β”€ public/ # static files -β”‚ └── index.html # html template -β”‚ β”œβ”€β”€ src/ # project root β”‚ β”œβ”€β”€ assets/ # images, icons, etc. β”‚ β”œβ”€β”€ components/ # common components - header, footer, sidebar, etc. β”‚ β”œβ”€β”€ layouts/ # layout containers β”‚ β”œβ”€β”€ scss/ # scss styles β”‚ β”œβ”€β”€ router # routes config -β”‚ └── store # template state example +β”‚ β”œβ”€β”€ stores/ # template state example β”‚ β”œβ”€β”€ views/ # application views β”‚ β”œβ”€β”€ _nav.js # sidebar navigation config β”‚ β”œβ”€β”€ App.vue β”‚ β”œβ”€β”€ ... β”‚ └── main.js -β”‚ -└── package.json +β”œβ”€β”€ index.html # html template +β”œβ”€β”€ package.json +└── vite.config.mjs ``` ## Documentation -The documentation for the CoreUI Admin Template is hosted at our website [CoreUI for Vue](https://coreui.io/vue/) +The documentation for the CoreUI Admin Template is hosted at our website [CoreUI for Vue](https://coreui.io/vue/docs/templates/installation.html) ## Versioning @@ -134,12 +147,19 @@ See [the Releases section of our project](https://github.com/coreui/coreui-free- ## Creators **Łukasz Holeczek** + * * -* -**CoreUI team** -* https://github.com/orgs/coreui/people +**Andrzej KopaΕ„ski** + +* + +**CoreUI Team** + +* +* +* ## Community @@ -150,46 +170,10 @@ Get updates on CoreUI's development and chat with the project maintainers and co ## Support CoreUI Development -CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing. You can support development by buying the [CoreUI PRO](https://coreui.io/pricing/) or by becoming a sponsor via [Open Collective](https://opencollective.com/coreui/). - - - -### Platinum Sponsors - -Support this project by [becoming a Platinum Sponsor](https://opencollective.com/coreui/contribute/platinum-sponsor-40959/). A large company logo will be added here with a link to your website. - - - -### Gold Sponsors - -Support this project by [becoming a Gold Sponsor](https://opencollective.com/coreui/contribute/gold-sponsor-40960/). A big company logo will be added here with a link to your website. - - - -### Silver Sponsors - -Support this project by [becoming a Silver Sponsor](https://opencollective.com/coreui/contribute/silver-sponsor-40967/). A medium company logo will be added here with a link to your website. - - - -### Bronze Sponsors - -Support this project by [becoming a Bronze Sponsor](https://opencollective.com/coreui/contribute/bronze-sponsor-40966/). The company avatar will show up here with a link to your OpenCollective Profile. - - - -### Backers - -Thanks to all the backers and sponsors! Support this project by [becoming a backer](https://opencollective.com/coreui/contribute/backer-40965/). - - - - +CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing. You can support development by buying the [CoreUI PRO](https://coreui.io/pricing/?framework=vue&src=github-coreui-free-vue-admin-template) or by becoming a sponsor via [Open Collective](https://opencollective.com/coreui/). ## Copyright and License -copyright 2022 creativeLabs Łukasz Holeczek. +copyright 2025 creativeLabs Łukasz Holeczek. - -Code released under [the MIT license](https://github.com/coreui/coreui-free-react-admin-template/blob/master/LICENSE). -There is only one limitation you can't can’t re-distribute the CoreUI as stock. You can’t do this if you modify the CoreUI. In past we faced some problems with persons who tried to sell CoreUI based templates. +Code released under [the MIT license](https://github.com/coreui/coreui-free-react-admin-template/blob/main/LICENSE). diff --git a/babel.config.js b/babel.config.js deleted file mode 100644 index c1b783ea..00000000 --- a/babel.config.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - presets: ['@vue/cli-plugin-babel/preset'], -} diff --git a/cypress.json b/cypress.json deleted file mode 100644 index 470c7201..00000000 --- a/cypress.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "pluginsFile": "tests/e2e/plugins/index.js" -} diff --git a/eslint.config.mjs b/eslint.config.mjs new file mode 100644 index 00000000..5bc1dd17 --- /dev/null +++ b/eslint.config.mjs @@ -0,0 +1,23 @@ +import eslintPluginVue from 'eslint-plugin-vue' +import globals from 'globals' + +export default [ + { ignores: ['dist/', 'eslint.config.mjs'] }, + ...eslintPluginVue.configs['flat/essential'], + { + files: ['src/**/*.{js,vue}'], + languageOptions: { + globals: { + ...globals.browser, + ...globals.node, + }, + ecmaVersion: 'latest', + sourceType: 'module', + }, + rules: { + 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', + 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', + 'vue/multi-word-component-names': 'off', + }, + }, +] diff --git a/public/index.html b/index.html similarity index 94% rename from public/index.html rename to index.html index 73a19d5b..2d8d8ef1 100644 --- a/public/index.html +++ b/index.html @@ -1,9 +1,9 @@ @@ -44,7 +44,8 @@ -
+
+ diff --git a/jest.config.js b/jest.config.js deleted file mode 100644 index 2dac575d..00000000 --- a/jest.config.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - preset: '@vue/cli-plugin-unit-jest', -} diff --git a/jsconfig.json b/jsconfig.json deleted file mode 100644 index 4aafc5f6..00000000 --- a/jsconfig.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "compilerOptions": { - "target": "es5", - "module": "esnext", - "baseUrl": "./", - "moduleResolution": "node", - "paths": { - "@/*": [ - "src/*" - ] - }, - "lib": [ - "esnext", - "dom", - "dom.iterable", - "scripthost" - ] - } -} diff --git a/package.json b/package.json index 0fcfa430..8870c2b7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/coreui-free-vue-admin-template", - "version": "4.2.0", + "version": "5.3.0", "description": "CoreUI Free Vue Admin Template", "bugs": { "url": "https://github.com/coreui/coreui-free-vue-admin-template/issues" @@ -12,46 +12,34 @@ "license": "MIT", "author": "The CoreUI Team (https://github.com/orgs/coreui/people)", "scripts": { - "build": "vue-cli-service build", - "lint": "vue-cli-service lint", - "serve": "vue-cli-service serve", - "test:e2e": "vue-cli-service test:e2e", - "test:unit": "vue-cli-service test:unit" + "dev": "vite --force", + "build": "vite build", + "lint": "eslint", + "preview": "vite preview" }, "dependencies": { - "@coreui/chartjs": "^3.1.2", - "@coreui/coreui": "^4.3.0-beta.0", + "@coreui/chartjs": "^4.1.0", + "@coreui/coreui": "^5.3.1", "@coreui/icons": "^3.0.1", - "@coreui/icons-vue": "2.0.0", + "@coreui/icons-vue": "2.2.0", "@coreui/utils": "^2.0.2", - "@coreui/vue": "^4.9.0-beta.1", - "@coreui/vue-chartjs": "2.1.0", - "core-js": "^3.31.0", - "vue": "^3.3.4", - "vue-router": "^4.2.2", - "vuex": "^4.1.0" + "@coreui/vue": "^5.4.1", + "@coreui/vue-chartjs": "^3.0.0", + "@popperjs/core": "^2.11.8", + "chart.js": "^4.4.7", + "pinia": "^3.0.1", + "simplebar-vue": "^2.4.0", + "vue": "^3.5.13", + "vue-router": "^4.5.0" }, "devDependencies": { - "@babel/core": "^7.22.5", - "@babel/eslint-parser": "^7.22.5", - "@vue/cli-plugin-babel": "~5.0.8", - "@vue/cli-plugin-e2e-cypress": "~5.0.8", - "@vue/cli-plugin-eslint": "~5.0.8", - "@vue/cli-plugin-router": "~5.0.8", - "@vue/cli-plugin-unit-jest": "~5.0.8", - "@vue/cli-plugin-vuex": "~5.0.8", - "@vue/cli-service": "~5.0.8", - "@vue/test-utils": "^2.3.2", - "@vue/vue3-jest": "^29.2.4", - "babel-jest": "^29.5.0", - "cypress": "^12.14.0", - "eslint": "^8.42.0", - "eslint-config-prettier": "^8.8.0", - "eslint-plugin-prettier": "^4.2.1", - "eslint-plugin-vue": "^9.14.1", - "jest": "^29.5.0", - "prettier": "^2.8.8", - "sass": "^1.63.3", - "sass-loader": "^13.3.2" + "@vitejs/plugin-vue": "^5.2.1", + "autoprefixer": "^10.4.20", + "eslint": "^9.20.1", + "eslint-plugin-vue": "^9.32.0", + "globals": "^15.15.0", + "postcss": "^8.5.2", + "sass": "^1.85.0", + "vite": "^6.1.0" } } diff --git a/src/App.vue b/src/App.vue index facb9cf4..a095fda4 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,37 +1,42 @@ - - + + diff --git a/src/_nav.js b/src/_nav.js index f13cfa50..35d9d081 100644 --- a/src/_nav.js +++ b/src/_nav.js @@ -50,6 +50,16 @@ export default [ name: 'Cards', to: '/base/cards', }, + { + component: 'CNavItem', + name: 'Calendar', + href: 'https://coreui.io/vue/docs/components/calendar.html', + external: true, + badge: { + color: 'danger', + text: 'PRO', + }, + }, { component: 'CNavItem', name: 'Carousels', @@ -90,6 +100,25 @@ export default [ name: 'Progress', to: '/base/progress', }, + { + component: 'CNavItem', + name: 'Smart Pagination', + href: 'https://coreui.io/vue/docs/components/smart-pagination.html', + badge: { + color: 'danger', + text: 'PRO', + }, + }, + { + component: 'CNavItem', + name: 'Smart Table', + external: true, + href: 'https://coreui.io/vue/docs/components/smart-table.html', + badge: { + color: 'danger', + text: 'PRO', + }, + }, { component: 'CNavItem', name: 'Spinners', @@ -100,11 +129,26 @@ export default [ name: 'Tables', to: '/base/tables', }, + { + component: 'CNavItem', + name: 'Tabs', + to: '/base/tabs', + }, { component: 'CNavItem', name: 'Tooltips', to: '/base/tooltips', }, + { + component: 'CNavItem', + name: 'Virtual Scroller', + href: 'https://coreui.io/vue/docs/components/virtual-scroller.html', + external: true, + badge: { + color: 'danger', + text: 'PRO', + }, + } ], }, { @@ -123,6 +167,16 @@ export default [ name: 'Button Groups', to: '/buttons/button-groups', }, + { + component: 'CNavItem', + name: 'Loading Button', + href: 'https://coreui.io/vue/docs/components/loading-button.html', + external: true, + badge: { + color: 'danger', + text: 'PRO', + }, + }, { component: 'CNavItem', name: 'Dropdowns', @@ -156,6 +210,16 @@ export default [ name: 'Range', to: '/forms/range', }, + { + component: 'CNavItem', + name: 'Range Slider', + href: 'https://coreui.io/vue/docs/forms/range-slider.html', + external: true, + badge: { + color: 'danger', + text: 'PRO', + }, + }, { component: 'CNavItem', name: 'Input Group', @@ -166,6 +230,45 @@ export default [ name: 'Floating Labels', to: '/forms/floating-labels', }, + { + component: 'CNavItem', + name: 'Date Picker', + href: 'https://coreui.io/vue/docs/forms/date-picker.html', + external: true, + badge: { + color: 'danger', + text: 'PRO', + }, + }, + { + component: 'CNavItem', + name: 'Date Range Picker', + href: 'https://coreui.io/vue/docs/forms/date-range-picker.html', + badge: { + color: 'danger', + text: 'PRO', + }, + }, + { + component: 'CNavItem', + name: 'Rating', + href: 'https://coreui.io/vue/docs/forms/rating.html', + external: true, + badge: { + color: 'danger', + text: 'PRO', + }, + }, + { + component: 'CNavItem', + name: 'Time Picker', + href: 'https://coreui.io/vue/docs/forms/time-picker.html', + external: true, + badge: { + color: 'danger', + text: 'PRO', + }, + }, { component: 'CNavItem', name: 'Layout', @@ -232,6 +335,11 @@ export default [ name: 'Modals', to: '/notifications/modals', }, + { + component: 'CNavItem', + name: 'Toasts', + to: '/notifications/toasts', + }, ], }, { @@ -277,21 +385,4 @@ export default [ }, ], }, - - // { - // component: 'CNavItem', - // name: 'Download CoreUI', - // href: 'http://coreui.io/vue/', - // icon: { name: 'cil-cloud-download', class: 'text-white' }, - // _class: 'bg-success text-white', - // target: '_blank' - // }, - // { - // component: 'CNavItem', - // name: 'Try CoreUI PRO', - // href: 'http://coreui.io/pro/vue/', - // icon: { name: 'cil-layers', class: 'text-white' }, - // _class: 'bg-danger text-white', - // target: '_blank' - // } ] diff --git a/src/assets/brand/logo-negative.js b/src/assets/brand/logo-negative.js deleted file mode 100644 index 1c99aa91..00000000 --- a/src/assets/brand/logo-negative.js +++ /dev/null @@ -1,31 +0,0 @@ -export const logoNegative = [ - '556 134', - ` - coreui vue logo - - - - - - - - - - - - - - - - - - - - - - - - - -`, -] diff --git a/src/assets/brand/logo.js b/src/assets/brand/logo.js index b5e89f3a..a5901345 100644 --- a/src/assets/brand/logo.js +++ b/src/assets/brand/logo.js @@ -1,30 +1,17 @@ export const logo = [ - '556 134', - ` - coreui vue - + '532 116', + ` - - - - - - + - - - - - - - - - - - - + + + + + + `, -] +] \ No newline at end of file diff --git a/src/assets/brand/sygnet.js b/src/assets/brand/sygnet.js index 3a57fbdd..dbda6351 100644 --- a/src/assets/brand/sygnet.js +++ b/src/assets/brand/sygnet.js @@ -1,12 +1,7 @@ export const sygnet = [ - '160 160', - ` - coreui logo - - - - - - -`, -] + '102 115', + ` + + + `, +] \ No newline at end of file diff --git a/src/assets/icons/index.js b/src/assets/icons/index.js index 55c6ddf1..cc20da72 100644 --- a/src/assets/icons/index.js +++ b/src/assets/icons/index.js @@ -49,6 +49,7 @@ import { cilEnvelopeClosed, cilEnvelopeOpen, cilEuro, + cilExternalLink, cilGlobeAlt, cilGrid, cilFile, @@ -107,6 +108,7 @@ export const iconsSet = Object.assign( cilEnvelopeClosed, cilEnvelopeOpen, cilEuro, + cilExternalLink, cilGlobeAlt, cilGrid, cilFile, diff --git a/src/assets/images/components.webp b/src/assets/images/components.webp new file mode 100644 index 00000000..dfdee46b Binary files /dev/null and b/src/assets/images/components.webp differ diff --git a/src/assets/images/icons.webp b/src/assets/images/icons.webp new file mode 100644 index 00000000..b5ca82d0 Binary files /dev/null and b/src/assets/images/icons.webp differ diff --git a/src/components/AppBreadcrumb.vue b/src/components/AppBreadcrumb.vue index 53b29cdc..be83cad9 100644 --- a/src/components/AppBreadcrumb.vue +++ b/src/components/AppBreadcrumb.vue @@ -1,5 +1,30 @@ + + - - + \ No newline at end of file diff --git a/src/components/AppFooter.vue b/src/components/AppFooter.vue index c96c9218..b62df395 100644 --- a/src/components/AppFooter.vue +++ b/src/components/AppFooter.vue @@ -1,5 +1,5 @@ - - diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue index 7b3d9fb8..fda96a89 100644 --- a/src/components/AppHeader.vue +++ b/src/components/AppHeader.vue @@ -1,13 +1,33 @@ + + - - diff --git a/src/components/AppHeaderDropdownAccnt.vue b/src/components/AppHeaderDropdownAccnt.vue index 857bcefa..d51d1fe0 100644 --- a/src/components/AppHeaderDropdownAccnt.vue +++ b/src/components/AppHeaderDropdownAccnt.vue @@ -1,10 +1,19 @@ + + - - diff --git a/src/components/AppSidebar.vue b/src/components/AppSidebar.vue index 2cb1703a..d3ab2f33 100644 --- a/src/components/AppSidebar.vue +++ b/src/components/AppSidebar.vue @@ -1,55 +1,35 @@ + + - - diff --git a/src/components/AppSidebarNav.js b/src/components/AppSidebarNav.js index 25dfb803..1006a9c3 100644 --- a/src/components/AppSidebarNav.js +++ b/src/components/AppSidebarNav.js @@ -1,15 +1,13 @@ import { defineComponent, h, onMounted, ref, resolveComponent } from 'vue' import { RouterLink, useRoute } from 'vue-router' -import { - CBadge, - CSidebarNav, - CNavItem, - CNavGroup, - CNavTitle, -} from '@coreui/vue' +import { cilExternalLink } from '@coreui/icons' +import { CBadge, CSidebarNav, CNavItem, CNavGroup, CNavTitle } from '@coreui/vue' import nav from '@/_nav.js' +import simplebar from 'simplebar-vue' +import 'simplebar-vue/dist/simplebar.min.css' + const normalizePath = (path) => decodeURI(path) .replace(/#.*$/, '') @@ -62,6 +60,8 @@ const AppSidebarNav = defineComponent({ return h( CNavGroup, { + as: 'div', + compact: true, ...(firstRender.value && { visible: item.items.some((child) => isActiveItem(route, child)), }), @@ -79,6 +79,45 @@ const AppSidebarNav = defineComponent({ ) } + if (item.href) { + return h( + resolveComponent(item.component), + { + href: item.href, + target: '_blank', + rel: 'noopener noreferrer', + }, + { + default: () => [ + item.icon + ? h(resolveComponent('CIcon'), { + customClassName: 'nav-icon', + name: item.icon, + }) + : h('span', { class: 'nav-icon' }, h('span', { class: 'nav-icon-bullet' })), + item.name, + item.external && h(resolveComponent('CIcon'), { + class: 'ms-2', + name: 'cil-external-link', + size: 'sm' + }), + item.badge && + h( + CBadge, + { + class: 'ms-auto', + color: item.badge.color, + size: 'sm', + }, + { + default: () => item.badge.text, + }, + ), + ], + }, + ) + } + return item.to ? h( RouterLink, @@ -92,16 +131,18 @@ const AppSidebarNav = defineComponent({ resolveComponent(item.component), { active: props.isActive, + as: 'div', href: props.href, onClick: () => props.navigate(), }, { default: () => [ - item.icon && - h(resolveComponent('CIcon'), { - customClassName: 'nav-icon', - name: item.icon, - }), + item.icon + ? h(resolveComponent('CIcon'), { + customClassName: 'nav-icon', + name: item.icon, + }) + : h('span', { class: 'nav-icon' }, h('span', { class: 'nav-icon-bullet' })), item.name, item.badge && h( @@ -109,6 +150,7 @@ const AppSidebarNav = defineComponent({ { class: 'ms-auto', color: item.badge.color, + size: 'sm', }, { default: () => item.badge.text, @@ -121,7 +163,9 @@ const AppSidebarNav = defineComponent({ ) : h( resolveComponent(item.component), - {}, + { + as: 'div', + }, { default: () => item.name, }, @@ -131,11 +175,14 @@ const AppSidebarNav = defineComponent({ return () => h( CSidebarNav, - {}, + { + as: simplebar, + }, { default: () => nav.map((item) => renderItem(item)), }, ) }, }) + export { AppSidebarNav } diff --git a/src/components/DocsComponents.vue b/src/components/DocsComponents.vue new file mode 100644 index 00000000..7ebc2351 --- /dev/null +++ b/src/components/DocsComponents.vue @@ -0,0 +1,43 @@ + + + diff --git a/src/components/DocsExample.vue b/src/components/DocsExample.vue index 6fa8aa46..31d46bf0 100644 --- a/src/components/DocsExample.vue +++ b/src/components/DocsExample.vue @@ -1,9 +1,20 @@ + + - - diff --git a/src/components/DocsIcons.vue b/src/components/DocsIcons.vue new file mode 100644 index 00000000..ffe0e64d --- /dev/null +++ b/src/components/DocsIcons.vue @@ -0,0 +1,29 @@ + + + diff --git a/src/layouts/DefaultLayout.vue b/src/layouts/DefaultLayout.vue index b230865d..4779d05a 100644 --- a/src/layouts/DefaultLayout.vue +++ b/src/layouts/DefaultLayout.vue @@ -1,10 +1,17 @@ + + - diff --git a/src/main.js b/src/main.js index 5afc2d2d..64a416a6 100644 --- a/src/main.js +++ b/src/main.js @@ -1,19 +1,24 @@ import { createApp } from 'vue' +import { createPinia } from 'pinia' + import App from './App.vue' import router from './router' -import store from './store' import CoreuiVue from '@coreui/vue' import CIcon from '@coreui/icons-vue' import { iconsSet as icons } from '@/assets/icons' +import DocsComponents from '@/components/DocsComponents' import DocsExample from '@/components/DocsExample' +import DocsIcons from '@/components/DocsIcons' const app = createApp(App) -app.use(store) +app.use(createPinia()) app.use(router) app.use(CoreuiVue) app.provide('icons', icons) app.component('CIcon', CIcon) +app.component('DocsComponents', DocsComponents) app.component('DocsExample', DocsExample) +app.component('DocsIcons', DocsIcons) app.mount('#app') diff --git a/src/router/index.js b/src/router/index.js index ff424c75..342b69aa 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -111,6 +111,11 @@ const routes = [ name: 'Tables', component: () => import('@/views/base/Tables.vue'), }, + { + path: '/base/tabs', + name: 'Tabs', + component: () => import('@/views/base/Tabs.vue'), + }, { path: '/base/tooltips', name: 'Tooltips', @@ -130,7 +135,7 @@ const routes = [ children: [ { path: '/buttons/standard-buttons', - name: 'Buttons', + name: 'Button Component', component: () => import('@/views/buttons/Buttons.vue'), }, { @@ -254,6 +259,11 @@ const routes = [ name: 'Modals', component: () => import('@/views/notifications/Modals.vue'), }, + { + path: '/notifications/toasts', + name: 'Toasts', + component: () => import('@/views/notifications/Toasts.vue'), + }, ], }, { @@ -298,7 +308,7 @@ const routes = [ ] const router = createRouter({ - history: createWebHashHistory(process.env.BASE_URL), + history: createWebHashHistory(import.meta.env.BASE_URL), routes, scrollBehavior() { // always scroll to top diff --git a/src/store/index.js b/src/store/index.js deleted file mode 100644 index 1ca85549..00000000 --- a/src/store/index.js +++ /dev/null @@ -1,22 +0,0 @@ -import { createStore } from 'vuex' - -export default createStore({ - state: { - sidebarVisible: '', - sidebarUnfoldable: false, - theme: 'light', - }, - mutations: { - toggleSidebar(state) { - state.sidebarVisible = !state.sidebarVisible - }, - toggleUnfoldable(state) { - state.sidebarUnfoldable = !state.sidebarUnfoldable - }, - updateSidebarVisible(state, payload) { - state.sidebarVisible = payload.value - }, - }, - actions: {}, - modules: {}, -}) diff --git a/src/stores/sidebar.js b/src/stores/sidebar.js new file mode 100644 index 00000000..28c9a044 --- /dev/null +++ b/src/stores/sidebar.js @@ -0,0 +1,17 @@ +import { ref } from 'vue' +import { defineStore } from 'pinia' + +export const useSidebarStore = defineStore('sidebar', () => { + const visible = ref(undefined) + const unfoldable = ref(false) + + const toggleVisible = (value) => { + visible.value = value !== undefined ? value : !visible.value + } + + const toggleUnfoldable = () => { + unfoldable.value = !unfoldable.value + } + + return { visible, unfoldable, toggleVisible, toggleUnfoldable } +}) diff --git a/src/stores/theme.js b/src/stores/theme.js new file mode 100644 index 00000000..7b1a0fbc --- /dev/null +++ b/src/stores/theme.js @@ -0,0 +1,12 @@ +import { ref } from 'vue' +import { defineStore } from 'pinia' + +export const useThemeStore = defineStore('theme', () => { + const theme = ref('light') + + const toggleTheme = (_theme) => { + theme.value = _theme + } + + return { theme, toggleTheme } +}) diff --git a/src/styles/_custom.scss b/src/styles/_custom.scss deleted file mode 100644 index 15d367af..00000000 --- a/src/styles/_custom.scss +++ /dev/null @@ -1 +0,0 @@ -// Here you can add other styles diff --git a/src/styles/_layout.scss b/src/styles/_layout.scss deleted file mode 100644 index 38bfe8c4..00000000 --- a/src/styles/_layout.scss +++ /dev/null @@ -1,6 +0,0 @@ -.wrapper { - width: 100%; - @include ltr-rtl("padding-left", var(--cui-sidebar-occupy-start, 0)); - will-change: auto; - @include transition(padding .15s); -} diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss deleted file mode 100644 index 697b08ad..00000000 --- a/src/styles/_variables.scss +++ /dev/null @@ -1,3 +0,0 @@ -// Variable overrides -// -// If you want to customize your project please add your variables below. diff --git a/src/styles/_example.scss b/src/styles/examples.scss similarity index 77% rename from src/styles/_example.scss rename to src/styles/examples.scss index fdf64254..dbfe258f 100644 --- a/src/styles/_example.scss +++ b/src/styles/examples.scss @@ -1,7 +1,7 @@ -/* stylelint-disable declaration-no-important, scss/selector-no-redundant-nesting-selector */ -@import "https://github.com/@coreui/coreui/scss/functions"; -@import "https://github.com/@coreui/coreui/scss/variables"; -@import "https://github.com/@coreui/coreui/scss/mixins"; +/* stylelint-disable scss/selector-no-redundant-nesting-selector */ +@use "@coreui/coreui/scss/variables" as *; +@use "@coreui/coreui/scss/mixins/breakpoints" as *; +@use "@coreui/coreui/scss/mixins/color-mode" as *; .example { &:not(:first-child) { @@ -9,7 +9,7 @@ } .tab-content { - background-color: var(--#{$prefix}tertiary-bg) !important; + background-color: var(--#{$prefix}tertiary-bg); } & + p { @@ -51,6 +51,8 @@ } // Buttons + .col > .btn, + .col-auto > .btn, > .btn, > .btn-group { margin: .25rem .125rem; @@ -105,10 +107,8 @@ } } -@if $enable-dark-mode { - @include color-mode(dark) { - .example .tab-content { - background-color: var(--#{$prefix}secondary-bg) !important; - } +@include color-mode(dark) { + .example .tab-content { + background-color: var(--#{$prefix}secondary-bg); } -} \ No newline at end of file +} diff --git a/src/styles/style.scss b/src/styles/style.scss index 02f199c4..cf48cfdb 100644 --- a/src/styles/style.scss +++ b/src/styles/style.scss @@ -1,17 +1,67 @@ -// If you want to override variables do it here -@import "https://github.com/variables"; +@use "@coreui/coreui/scss/coreui" as * with ( + $enable-deprecation-messages: false +); +@use "@coreui/chartjs/scss/coreui-chartjs"; +@use "vendors/simplebar"; -$enable-ltr: true; -$enable-rtl: true; +body { + background-color: var(--cui-tertiary-bg); +} -// Import CoreUI for React components library -@import "https://github.com/@coreui/coreui/scss/coreui"; +.wrapper { + width: 100%; + padding-inline: var(--cui-sidebar-occupy-start, 0) var(--cui-sidebar-occupy-end, 0); + will-change: auto; + @include transition(padding .15s); +} -// Import Chart.js custom tooltips styles -@import "https://github.com/@coreui/chartjs/scss/coreui-chartjs"; +.header > .container-fluid, +.sidebar-header { + min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list +} -@import "https://github.com/layout"; -@import "https://github.com/example"; +.sidebar-brand-full { + margin-left: 3px; +} -// If you want to add custom CSS you can put it here. -@import "https://github.com/custom"; +.sidebar-header { + .nav-underline-border { + --cui-nav-underline-border-link-padding-x: 1rem; + --cui-nav-underline-border-gap: 0; + } + + .nav-link { + display: flex; + align-items: center; + min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list + } +} + +.sidebar-toggler { + margin-inline-start: auto; +} + +.sidebar-narrow, +.sidebar-narrow-unfoldable:not(:hover) { + .sidebar-toggler { + margin-inline-end: auto; + } +} + +.header > .container-fluid + .container-fluid { + min-height: 3rem; +} + +.footer { + min-height: calc(3rem + 1px); // stylelint-disable-line function-disallowed-list +} + +@include color-mode(dark) { + body { + background-color: var(--cui-dark-bg-subtle); + } + + .footer { + --cui-footer-bg: var(--cui-body-bg); + } +} diff --git a/src/styles/vendors/simplebar.scss b/src/styles/vendors/simplebar.scss new file mode 100644 index 00000000..59c81b8a --- /dev/null +++ b/src/styles/vendors/simplebar.scss @@ -0,0 +1,5 @@ +.simplebar-content { + display: flex; + flex-direction: column; + min-height: 100%; +} diff --git a/src/views/base/Accordion.vue b/src/views/base/Accordion.vue index e9e5a9fd..98e5b31b 100644 --- a/src/views/base/Accordion.vue +++ b/src/views/base/Accordion.vue @@ -1,12 +1,13 @@ - - diff --git a/src/views/base/Breadcrumbs.vue b/src/views/base/Breadcrumbs.vue index f2840008..c7e214a5 100644 --- a/src/views/base/Breadcrumbs.vue +++ b/src/views/base/Breadcrumbs.vue @@ -1,16 +1,16 @@ - - diff --git a/src/views/base/Cards.vue b/src/views/base/Cards.vue index f838ac75..524cb0f2 100644 --- a/src/views/base/Cards.vue +++ b/src/views/base/Cards.vue @@ -1,12 +1,18 @@ + + + - - + \ No newline at end of file diff --git a/src/views/base/Carousels.vue b/src/views/base/Carousels.vue index a8e50be6..af00c03a 100644 --- a/src/views/base/Carousels.vue +++ b/src/views/base/Carousels.vue @@ -1,12 +1,19 @@ + + - - diff --git a/src/views/base/Collapses.vue b/src/views/base/Collapses.vue index 1e62460d..194bfdfd 100644 --- a/src/views/base/Collapses.vue +++ b/src/views/base/Collapses.vue @@ -1,28 +1,31 @@ + + - - diff --git a/src/views/base/ListGroups.vue b/src/views/base/ListGroups.vue index 13933e3f..4d6a4c4e 100644 --- a/src/views/base/ListGroups.vue +++ b/src/views/base/ListGroups.vue @@ -1,12 +1,13 @@ - - diff --git a/src/views/base/Navs.vue b/src/views/base/Navs.vue index 8440b764..2c544f85 100644 --- a/src/views/base/Navs.vue +++ b/src/views/base/Navs.vue @@ -1,12 +1,13 @@ - - diff --git a/src/views/base/Paginations.vue b/src/views/base/Paginations.vue index 4117743d..2141769e 100644 --- a/src/views/base/Paginations.vue +++ b/src/views/base/Paginations.vue @@ -1,12 +1,13 @@ - - diff --git a/src/views/base/Placeholders.vue b/src/views/base/Placeholders.vue index f8a8f5bd..597748ff 100644 --- a/src/views/base/Placeholders.vue +++ b/src/views/base/Placeholders.vue @@ -1,12 +1,17 @@ + + - - diff --git a/src/views/base/Popovers.vue b/src/views/base/Popovers.vue index f10d0a3c..81147e15 100644 --- a/src/views/base/Popovers.vue +++ b/src/views/base/Popovers.vue @@ -1,6 +1,7 @@ - - diff --git a/src/views/base/Progress.vue b/src/views/base/Progress.vue index 200b2231..68d05fe3 100644 --- a/src/views/base/Progress.vue +++ b/src/views/base/Progress.vue @@ -1,12 +1,13 @@ - - diff --git a/src/views/base/Spinners.vue b/src/views/base/Spinners.vue index 93658024..1f9b6454 100644 --- a/src/views/base/Spinners.vue +++ b/src/views/base/Spinners.vue @@ -1,18 +1,19 @@ - - diff --git a/src/views/base/Tables.vue b/src/views/base/Tables.vue index b0c8acef..8a4061ff 100644 --- a/src/views/base/Tables.vue +++ b/src/views/base/Tables.vue @@ -1,12 +1,13 @@ - - diff --git a/src/views/base/Tabs.vue b/src/views/base/Tabs.vue new file mode 100644 index 00000000..66b6518f --- /dev/null +++ b/src/views/base/Tabs.vue @@ -0,0 +1,163 @@ + diff --git a/src/views/base/Tooltips.vue b/src/views/base/Tooltips.vue index f7195edf..e98467e4 100644 --- a/src/views/base/Tooltips.vue +++ b/src/views/base/Tooltips.vue @@ -1,16 +1,17 @@ - - diff --git a/src/views/buttons/ButtonGroups.vue b/src/views/buttons/ButtonGroups.vue index ecd83ae0..21bfd114 100644 --- a/src/views/buttons/ButtonGroups.vue +++ b/src/views/buttons/ButtonGroups.vue @@ -1,6 +1,7 @@ - - diff --git a/src/views/buttons/Buttons.vue b/src/views/buttons/Buttons.vue index 4dbd6bc7..fd26fe88 100644 --- a/src/views/buttons/Buttons.vue +++ b/src/views/buttons/Buttons.vue @@ -1,12 +1,13 @@ - - diff --git a/src/views/widgets/Widgets.vue b/src/views/widgets/Widgets.vue index c58759dc..906c0712 100644 --- a/src/views/widgets/Widgets.vue +++ b/src/views/widgets/Widgets.vue @@ -1,740 +1,568 @@ - - - + + diff --git a/src/views/widgets/WidgetsStatsTypeA.vue b/src/views/widgets/WidgetsStatsTypeA.vue index 9dd5fbe7..e914b7f2 100644 --- a/src/views/widgets/WidgetsStatsTypeA.vue +++ b/src/views/widgets/WidgetsStatsTypeA.vue @@ -1,22 +1,39 @@ + +