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/.github/FUNDING.yml b/.github/FUNDING.yml index ddf49052..445d216f 100644 --- a/.github/FUNDING.yml +++ b/.github/FUNDING.yml @@ -1,3 +1,4 @@ # These are supported funding model platforms -custom: "https://coreui.io/pro/" +custom: "https://coreui.io/pricing?support=vue" +open_collective: coreui diff --git a/.github/workflows/npm.yml b/.github/workflows/npm.yml new file mode 100644 index 00000000..27f1fd68 --- /dev/null +++ b/.github/workflows/npm.yml @@ -0,0 +1,34 @@ +name: NPM Installation + +on: + push: + branches-ignore: + - "dependabot/**" + schedule: + - cron: '0 0 * * *' + +env: + FORCE_COLOR: 2 + NODE: 16 + +jobs: + build: + strategy: + matrix: + platform: [ubuntu-latest, windows-latest] + node-version: [16.x, 17.x, 18.x] + runs-on: ${{ matrix.platform }} + steps: + - name: Clone repository + uses: actions/checkout@v3 + + - name: Set up Node.js + uses: actions/setup-node@v3 + with: + node-version: ${{ env.node-version }} + + - name: Install npm dependencies + run: npm install + + - name: Run build + run: npm run build diff --git a/.gitignore b/.gitignore index 6c661c5e..74821944 100644 --- a/.gitignore +++ b/.gitignore @@ -7,6 +7,11 @@ tests/e2e/reports/ .env.local .env.*.local +# dependencies +/node_modules +package-lock.json +yarn.lock + # OS or Editor folders ._* .cache 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 e7c35bdb..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,14 +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/) -**Only customers with [Enterpise Membership Plan](https://coreui.io/pro/#buy) have access to private github CoreUI Pro repository.** +## CoreUI PRO Vue Admin Templates -* πŸ’ͺ [CoreUI Pro Bootstrap Admin Template](https://coreui.io/pro/) -* πŸ’ͺ [CoreUI Pro Angular Admin Template](https://coreui.io/pro/angular) -* πŸ’ͺ [CoreUI Pro React Admin Template](https://coreui.io/pro/react) -* πŸ’ͺ [CoreUI Pro Vue Admin Template](https://coreui.io/pro/vue) +| 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)| + +| 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 @@ -70,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 @@ -105,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 @@ -136,30 +147,33 @@ 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 Get updates on CoreUI's development and chat with the project maintainers and community members. - Follow [@core_ui on Twitter](https://twitter.com/core_ui). -- Read and subscribe to [CoreUI Blog](https://blog.coreui.ui/). - -## Copyright and License +- Read and subscribe to [CoreUI Blog](https://coreui.io/blog/). -copyright 2021 creativeLabs Łukasz Holeczek. +## Support CoreUI Development - -Code released under [the MIT license](https://github.com/coreui/coreui-free-vue-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. +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/). -## Support CoreUI Development +## Copyright and License -CoreUI is an MIT licensed open source project and 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 [CoreUI Pro Version](https://coreui.io/pro/). +copyright 2025 creativeLabs Łukasz Holeczek. -We're also open to conversations regarding custom sponsorship / consulting arrangements. Get in touch on [Twitter](https://twitter.com/lukaszholeczek). +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 73% rename from public/index.html rename to index.html index df559041..2d8d8ef1 100644 --- a/public/index.html +++ b/index.html @@ -1,10 +1,10 @@ @@ -32,12 +32,20 @@ + -
+
+ 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 1e74ca23..8870c2b7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/coreui-free-vue-admin-template", - "version": "4.1.0", + "version": "5.3.0", "description": "CoreUI Free Vue Admin Template", "bugs": { "url": "https://github.com/coreui/coreui-free-vue-admin-template/issues" @@ -12,49 +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" - }, - "config": { - "coreui_library_short_version": "4.1" + "dev": "vite --force", + "build": "vite build", + "lint": "eslint", + "preview": "vite preview" }, "dependencies": { - "@coreui/chartjs": "^3.0.0", - "@coreui/coreui": "^4.1.0", - "@coreui/icons": "^2.1.0", - "@coreui/icons-vue": "2.0.0", - "@coreui/utils": "^1.3.1", - "@coreui/vue": "^4.1.0", - "@coreui/vue-chartjs": "2.0.0", - "core-js": "^3.19.0", - "vue": "^3.2.23", - "vue-router": "^4.0.12", - "vuex": "^4.0.2" + "@coreui/chartjs": "^4.1.0", + "@coreui/coreui": "^5.3.1", + "@coreui/icons": "^3.0.1", + "@coreui/icons-vue": "2.2.0", + "@coreui/utils": "^2.0.2", + "@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.12.16", - "@babel/eslint-parser": "^7.12.16", - "@vue/cli-plugin-babel": "~5.0.0-rc.1", - "@vue/cli-plugin-e2e-cypress": "~5.0.0-rc.1", - "@vue/cli-plugin-eslint": "~5.0.0-rc.1", - "@vue/cli-plugin-router": "~5.0.0-rc.1", - "@vue/cli-plugin-unit-jest": "~5.0.0-rc.1", - "@vue/cli-plugin-vuex": "~5.0.0-rc.1", - "@vue/cli-service": "~5.0.0-rc.1", - "@vue/test-utils": "^2.0.0-0", - "@vue/vue3-jest": "^27.0.0-alpha.1", - "babel-jest": "^27.0.6", - "cypress": "^8.7.0", - "eslint": "^7.32.0", - "eslint-config-prettier": "^8.3.0", - "eslint-plugin-prettier": "^4.0.0", - "eslint-plugin-vue": "^8.0.3", - "jest": "^27.0.5", - "prettier": "^2.4.1", - "sass": "^1.32.7", - "sass-loader": "^12.0.0" + "@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 7502212d..a095fda4 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,8 +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 2c292085..cc20da72 100644 --- a/src/assets/icons/index.js +++ b/src/assets/icons/index.js @@ -42,12 +42,14 @@ import { cilCheckCircle, cilCode, cilCommentSquare, + cilContrast, cilCursor, cilDrop, cilDollar, cilEnvelopeClosed, cilEnvelopeOpen, cilEuro, + cilExternalLink, cilGlobeAlt, cilGrid, cilFile, @@ -72,6 +74,7 @@ import { cilSpeech, cilSpeedometer, cilStar, + cilSun, cilTask, cilUser, cilUserFemale, @@ -98,12 +101,14 @@ export const iconsSet = Object.assign( cilCheckCircle, cilCode, cilCommentSquare, + cilContrast, cilCursor, cilDrop, cilDollar, cilEnvelopeClosed, cilEnvelopeOpen, cilEuro, + cilExternalLink, cilGlobeAlt, cilGrid, cilFile, @@ -128,6 +133,7 @@ export const iconsSet = Object.assign( cilSpeech, cilSpeedometer, cilStar, + cilSun, cilTask, cilUser, cilUserFemale, 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 e02b6f14..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/DocsCallout.vue b/src/components/DocsCallout.vue deleted file mode 100644 index 59a495a5..00000000 --- a/src/components/DocsCallout.vue +++ /dev/null @@ -1,54 +0,0 @@ - - - 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 ba72828c..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 84aa0e74..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 7e7d386a..64a416a6 100644 --- a/src/main.js +++ b/src/main.js @@ -1,21 +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 DocsCallout from '@/components/DocsCallout' +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('DocsCallout', DocsCallout) +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 0a195eac..342b69aa 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -17,7 +17,9 @@ const routes = [ // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => - import(/* webpackChunkName: "dashboard" */ '@/views/Dashboard.vue'), + import( + /* webpackChunkName: "dashboard" */ '@/views/dashboard/Dashboard.vue' + ), }, { path: '/theme', @@ -109,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', @@ -128,7 +135,7 @@ const routes = [ children: [ { path: '/buttons/standard-buttons', - name: 'Buttons', + name: 'Button Component', component: () => import('@/views/buttons/Buttons.vue'), }, { @@ -252,6 +259,11 @@ const routes = [ name: 'Modals', component: () => import('@/views/notifications/Modals.vue'), }, + { + path: '/notifications/toasts', + name: 'Toasts', + component: () => import('@/views/notifications/Toasts.vue'), + }, ], }, { @@ -296,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 57dcaeda..00000000 --- a/src/store/index.js +++ /dev/null @@ -1,21 +0,0 @@ -import { createStore } from 'vuex' - -export default createStore({ - state: { - sidebarVisible: '', - sidebarUnfoldable: false, - }, - 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 3ee3142d..00000000 --- a/src/styles/_variables.scss +++ /dev/null @@ -1 +0,0 @@ -// Variable overrides diff --git a/src/styles/_example.scss b/src/styles/examples.scss similarity index 71% rename from src/styles/_example.scss rename to src/styles/examples.scss index f8791fb2..dbfe258f 100644 --- a/src/styles/_example.scss +++ b/src/styles/examples.scss @@ -1,33 +1,23 @@ +/* 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) { margin-top: 1.5rem; } .tab-content { - background-color: $light-50 !important; - - @at-root .dark-theme & { - background-color: rgba(255, 255, 255, .1) !important; - } - } - - code[class*="language-"], - pre[class*="language-"] { - font-size: .875rem !important; - } - - :not(pre) > code[class*="language-"], - pre[class*="language-"] { - background: transparent; + background-color: var(--#{$prefix}tertiary-bg); } & + p { - margin-top: 1.5rem + margin-top: 1.5rem; } // Components examples - .preview, - .preview .col { + .preview { + p { margin-top: 2rem; } @@ -61,6 +51,8 @@ } // Buttons + .col > .btn, + .col-auto > .btn, > .btn, > .btn-group { margin: .25rem .125rem; @@ -105,5 +97,18 @@ margin-top: .5rem; margin-bottom: .5rem; } + + .docs-example-modal { + .modal { + position: static; + display: block; + } + } + } +} + +@include color-mode(dark) { + .example .tab-content { + background-color: var(--#{$prefix}secondary-bg); } } diff --git a/src/styles/style.scss b/src/styles/style.scss index ca22ec0d..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 "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 styles -@import "~@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 Tooltips -@import "~@coreui/chartjs/scss/tooltips"; +.header > .container-fluid, +.sidebar-header { + min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list +} -@import "layout"; -@import "example"; +.sidebar-brand-full { + margin-left: 3px; +} -// If you want to add something do it here -@import "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/Dashboard.vue b/src/views/Dashboard.vue deleted file mode 100644 index 508b2956..00000000 --- a/src/views/Dashboard.vue +++ /dev/null @@ -1,413 +0,0 @@ - - - diff --git a/src/views/base/Accordion.vue b/src/views/base/Accordion.vue index fa490793..98e5b31b 100644 --- a/src/views/base/Accordion.vue +++ b/src/views/base/Accordion.vue @@ -1,18 +1,16 @@ - - diff --git a/src/views/base/Breadcrumbs.vue b/src/views/base/Breadcrumbs.vue index 74a11b2a..c7e214a5 100644 --- a/src/views/base/Breadcrumbs.vue +++ b/src/views/base/Breadcrumbs.vue @@ -1,19 +1,16 @@ - - diff --git a/src/views/base/Cards.vue b/src/views/base/Cards.vue index 70495ae0..524cb0f2 100644 --- a/src/views/base/Cards.vue +++ b/src/views/base/Cards.vue @@ -1,15 +1,18 @@ + + +