diff --git a/.eslintignore b/.eslintignore deleted file mode 100644 index dc70b364..00000000 --- a/.eslintignore +++ /dev/null @@ -1,4 +0,0 @@ -node_modules/* -/dist/** -.eslintrc.js -vite.config.mjs diff --git a/.eslintrc.cjs b/.eslintrc.cjs deleted file mode 100644 index 7d0be3d2..00000000 --- a/.eslintrc.cjs +++ /dev/null @@ -1,9 +0,0 @@ -/* eslint-env node */ -module.exports = { - extends: ["plugin:vue/vue3-essential", "eslint:recommended"], - 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/LICENSE b/LICENSE index eee6fcc1..433069ca 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2024 creativeLabs Łukasz Holeczek. +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 diff --git a/README.md b/README.md index 9a4e2123..5cc0eda5 100644 --- a/README.md +++ b/README.md @@ -47,6 +47,7 @@ CoreUI is meant to be the UX game changer. Pure & transparent code is devoid of * 💪 [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/) @@ -95,7 +96,7 @@ Navigate to [http://localhost:3000](http://localhost:3000). The app will automat #### 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 @@ -173,6 +174,6 @@ CoreUI is an MIT-licensed open source project and is completely free to use. How ## Copyright and License -copyright 2024 creativeLabs Łukasz Holeczek. +copyright 2025 creativeLabs Łukasz Holeczek. Code released under [the MIT license](https://github.com/coreui/coreui-free-react-admin-template/blob/main/LICENSE). 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/index.html b/index.html index 1c4aae12..2d8d8ef1 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,9 @@ diff --git a/package.json b/package.json index 3b5b531a..8870c2b7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/coreui-free-vue-admin-template", - "version": "5.0.0", + "version": "5.3.0", "description": "CoreUI Free Vue Admin Template", "bugs": { "url": "https://github.com/coreui/coreui-free-vue-admin-template/issues" @@ -14,31 +14,32 @@ "scripts": { "dev": "vite --force", "build": "vite build", - "lint": "eslint \"src/**/*.{js,vue}\"", + "lint": "eslint", "preview": "vite preview" }, "dependencies": { - "@coreui/chartjs": "^4.0.0", - "@coreui/coreui": "^5.0.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": "^5.0.0", + "@coreui/vue": "^5.4.1", "@coreui/vue-chartjs": "^3.0.0", "@popperjs/core": "^2.11.8", - "chart.js": "^4.4.2", - "pinia": "^2.1.7", - "simplebar-vue": "^2.3.3", - "vue": "^3.4.21", - "vue-router": "^4.3.0" + "chart.js": "^4.4.7", + "pinia": "^3.0.1", + "simplebar-vue": "^2.4.0", + "vue": "^3.5.13", + "vue-router": "^4.5.0" }, "devDependencies": { - "@vitejs/plugin-vue": "^5.0.4", - "autoprefixer": "^10.4.19", - "eslint": "^8.57.0", - "eslint-plugin-vue": "^9.24.0", - "postcss": "^8.4.38", - "sass": "^1.72.0", - "vite": "^5.2.6" + "@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 b06f287b..a095fda4 100644 --- a/src/App.vue +++ b/src/App.vue @@ -36,7 +36,7 @@ onBeforeMount(() => { diff --git a/src/_nav.js b/src/_nav.js index 3433bdaf..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', 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/AppSidebarNav.js b/src/components/AppSidebarNav.js index 68c30537..1006a9c3 100644 --- a/src/components/AppSidebarNav.js +++ b/src/components/AppSidebarNav.js @@ -1,6 +1,7 @@ import { defineComponent, h, onMounted, ref, resolveComponent } from 'vue' import { RouterLink, useRoute } from 'vue-router' +import { cilExternalLink } from '@coreui/icons' import { CBadge, CSidebarNav, CNavItem, CNavGroup, CNavTitle } from '@coreui/vue' import nav from '@/_nav.js' @@ -78,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, @@ -110,6 +150,7 @@ const AppSidebarNav = defineComponent({ { class: 'ms-auto', color: item.badge.color, + size: 'sm', }, { default: () => item.badge.text, @@ -144,4 +185,4 @@ const AppSidebarNav = defineComponent({ }, }) -export { AppSidebarNav } \ No newline at end of file +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/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/main.js b/src/main.js index bf8b8e5f..64a416a6 100644 --- a/src/main.js +++ b/src/main.js @@ -7,7 +7,9 @@ import router from './router' 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(createPinia()) @@ -15,6 +17,8 @@ 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 f70246f6..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'), }, { @@ -303,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/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/_theme.scss b/src/styles/_theme.scss deleted file mode 100644 index 49e1c79e..00000000 --- a/src/styles/_theme.scss +++ /dev/null @@ -1,64 +0,0 @@ -body { - background-color: var(--cui-tertiary-bg); -} - -.wrapper { - width: 100%; - @include ltr-rtl("padding-left", var(--cui-sidebar-occupy-start, 0)); - @include ltr-rtl("padding-right", var(--cui-sidebar-occupy-end, 0)); - will-change: auto; - @include transition(padding .15s); -} - -.header > .container-fluid, -.sidebar-header { - min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list -} - -.sidebar-brand-full { - margin-left: 3px; -} - -.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 { - @include ltr-rtl("margin-left", auto); -} - -.sidebar-narrow, -.sidebar-narrow-unfoldable:not(:hover) { - .sidebar-toggler { - @include ltr-rtl("margin-right", auto); - } -} - -.header > .container-fluid + .container-fluid { - min-height: 3rem; -} - -.footer { - min-height: calc(3rem + 1px); // stylelint-disable-line function-disallowed-list -} - -@if $enable-dark-mode { - @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/_variables.scss b/src/styles/_variables.scss deleted file mode 100644 index b0f8a52a..00000000 --- a/src/styles/_variables.scss +++ /dev/null @@ -1,5 +0,0 @@ -// Variable overrides -// -// If you want to customize your project please add your variables below. - -$enable-deprecation-messages: false !default; diff --git a/src/styles/examples.scss b/src/styles/examples.scss index 375fa9a5..dbfe258f 100644 --- a/src/styles/examples.scss +++ b/src/styles/examples.scss @@ -1,10 +1,7 @@ -/* stylelint-disable declaration-no-important, scss/selector-no-redundant-nesting-selector */ - -$enable-deprecation-messages: false !default; - -@import "@coreui/coreui/scss/functions"; -@import "@coreui/coreui/scss/variables"; -@import "@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) { @@ -110,10 +107,8 @@ $enable-deprecation-messages: false !default; } } -@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 4fbc8235..cf48cfdb 100644 --- a/src/styles/style.scss +++ b/src/styles/style.scss @@ -1,15 +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"; -// Import styles -@import "@coreui/coreui/scss/coreui"; -@import "@coreui/chartjs/scss/coreui-chartjs"; +body { + background-color: var(--cui-tertiary-bg); +} -// Vendors -@import "vendors/simplebar"; +.wrapper { + width: 100%; + padding-inline: var(--cui-sidebar-occupy-start, 0) var(--cui-sidebar-occupy-end, 0); + will-change: auto; + @include transition(padding .15s); +} -// Custom styles for this theme -@import "theme"; +.header > .container-fluid, +.sidebar-header { + min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list +} -// If you want to add custom CSS you can put it here -@import "custom"; +.sidebar-brand-full { + margin-left: 3px; +} + +.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/views/base/Accordion.vue b/src/views/base/Accordion.vue index 83edaaf1..98e5b31b 100644 --- a/src/views/base/Accordion.vue +++ b/src/views/base/Accordion.vue @@ -1,7 +1,7 @@ -