├── .browserslistrc
├── .gitattributes
├── public
├── favicon.ico
├── apple-icon.png
├── favicon-16x16.png
├── favicon-32x32.png
├── favicon-96x96.png
├── ms-icon-70x70.png
├── apple-icon-57x57.png
├── apple-icon-60x60.png
├── apple-icon-72x72.png
├── apple-icon-76x76.png
├── ms-icon-144x144.png
├── ms-icon-150x150.png
├── ms-icon-310x310.png
├── android-icon-36x36.png
├── android-icon-48x48.png
├── android-icon-72x72.png
├── android-icon-96x96.png
├── apple-icon-114x114.png
├── apple-icon-120x120.png
├── apple-icon-144x144.png
├── apple-icon-152x152.png
├── apple-icon-180x180.png
├── android-icon-144x144.png
├── android-icon-192x192.png
├── apple-icon-precomposed.png
├── browserconfig.xml
└── manifest.json
├── src
├── assets
│ ├── images
│ │ ├── vue.jpg
│ │ ├── react.jpg
│ │ ├── angular.jpg
│ │ ├── icons.webp
│ │ ├── vue400.jpg
│ │ ├── avatars
│ │ │ ├── 1.jpg
│ │ │ ├── 2.jpg
│ │ │ ├── 3.jpg
│ │ │ ├── 4.jpg
│ │ │ ├── 5.jpg
│ │ │ ├── 6.jpg
│ │ │ ├── 7.jpg
│ │ │ ├── 8.jpg
│ │ │ └── 9.jpg
│ │ └── components.webp
│ ├── brand
│ │ ├── sygnet.js
│ │ └── logo.js
│ └── icons
│ │ └── index.js
├── styles
│ ├── vendors
│ │ └── simplebar.scss
│ ├── style.scss
│ └── examples.scss
├── stores
│ ├── theme.js
│ └── sidebar.js
├── views
│ ├── theme
│ │ ├── ColorTheme.vue
│ │ ├── Colors.vue
│ │ └── Typography.vue
│ ├── charts
│ │ ├── CChartPieExample.vue
│ │ ├── CChartDoughnutExample.vue
│ │ ├── index.js
│ │ ├── CChartLineExample.vue
│ │ ├── CChartBarExample.vue
│ │ ├── CChartPolarAreaExample.vue
│ │ ├── CChartRadarExample.vue
│ │ └── Charts.vue
│ ├── icons
│ │ ├── Flags.vue
│ │ ├── CoreUIIcons.vue
│ │ └── Brands.vue
│ ├── pages
│ │ ├── Page404.vue
│ │ ├── Page500.vue
│ │ ├── Register.vue
│ │ └── Login.vue
│ ├── base
│ │ ├── Breadcrumbs.vue
│ │ ├── Popovers.vue
│ │ ├── Tooltips.vue
│ │ ├── Collapses.vue
│ │ ├── Spinners.vue
│ │ ├── Placeholders.vue
│ │ ├── Tabs.vue
│ │ ├── Carousels.vue
│ │ ├── Paginations.vue
│ │ ├── Progress.vue
│ │ └── Accordion.vue
│ ├── forms
│ │ ├── Range.vue
│ │ ├── Select.vue
│ │ ├── FloatingLabels.vue
│ │ └── FormControl.vue
│ ├── dashboard
│ │ └── MainChart.vue
│ ├── notifications
│ │ ├── Badges.vue
│ │ ├── Alerts.vue
│ │ └── Toasts.vue
│ └── widgets
│ │ └── WidgetsStatsTypeD.vue
├── components
│ ├── AppFooter.vue
│ ├── DocsExample.vue
│ ├── AppBreadcrumb.vue
│ ├── DocsIcons.vue
│ ├── AppSidebar.vue
│ ├── DocsComponents.vue
│ ├── AppHeaderDropdownAccnt.vue
│ ├── AppHeader.vue
│ └── AppSidebarNav.js
├── layouts
│ └── DefaultLayout.vue
├── main.js
└── App.vue
├── .github
├── FUNDING.yml
├── SUPPORT.md
├── ISSUE_TEMPLATE
│ ├── feature_request.md
│ └── bug_report.md
├── workflows
│ ├── npm.yml
│ └── stale.yml
├── COMMIT_CONVENTION.md
├── CODE_OF_CONDUCT.md
└── CONTRIBUTING.md
├── .prettierrc.js
├── .editorconfig
├── .gitignore
├── eslint.config.mjs
├── vite.config.mjs
├── LICENSE
├── package.json
└── index.html
/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 |
--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Enforce Unix newlines
2 | * text=auto eol=lf
3 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-free-vue-admin-template/HEAD/public/favicon.ico
--------------------------------------------------------------------------------
/public/apple-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-free-vue-admin-template/HEAD/public/apple-icon.png
--------------------------------------------------------------------------------
/public/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-free-vue-admin-template/HEAD/public/favicon-16x16.png
--------------------------------------------------------------------------------
/public/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-free-vue-admin-template/HEAD/public/favicon-32x32.png
--------------------------------------------------------------------------------
/public/favicon-96x96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-free-vue-admin-template/HEAD/public/favicon-96x96.png
--------------------------------------------------------------------------------
/public/ms-icon-70x70.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-free-vue-admin-template/HEAD/public/ms-icon-70x70.png
--------------------------------------------------------------------------------
/src/assets/images/vue.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-free-vue-admin-template/HEAD/src/assets/images/vue.jpg
--------------------------------------------------------------------------------
/public/apple-icon-57x57.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-free-vue-admin-template/HEAD/public/apple-icon-57x57.png
--------------------------------------------------------------------------------
/public/apple-icon-60x60.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-free-vue-admin-template/HEAD/public/apple-icon-60x60.png
--------------------------------------------------------------------------------
/public/apple-icon-72x72.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-free-vue-admin-template/HEAD/public/apple-icon-72x72.png
--------------------------------------------------------------------------------
/public/apple-icon-76x76.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-free-vue-admin-template/HEAD/public/apple-icon-76x76.png
--------------------------------------------------------------------------------
/public/ms-icon-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-free-vue-admin-template/HEAD/public/ms-icon-144x144.png
--------------------------------------------------------------------------------
/public/ms-icon-150x150.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-free-vue-admin-template/HEAD/public/ms-icon-150x150.png
--------------------------------------------------------------------------------
/public/ms-icon-310x310.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-free-vue-admin-template/HEAD/public/ms-icon-310x310.png
--------------------------------------------------------------------------------
/src/assets/images/react.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-free-vue-admin-template/HEAD/src/assets/images/react.jpg
--------------------------------------------------------------------------------
/public/android-icon-36x36.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-free-vue-admin-template/HEAD/public/android-icon-36x36.png
--------------------------------------------------------------------------------
/public/android-icon-48x48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-free-vue-admin-template/HEAD/public/android-icon-48x48.png
--------------------------------------------------------------------------------
/public/android-icon-72x72.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-free-vue-admin-template/HEAD/public/android-icon-72x72.png
--------------------------------------------------------------------------------
/public/android-icon-96x96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-free-vue-admin-template/HEAD/public/android-icon-96x96.png
--------------------------------------------------------------------------------
/public/apple-icon-114x114.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-free-vue-admin-template/HEAD/public/apple-icon-114x114.png
--------------------------------------------------------------------------------
/public/apple-icon-120x120.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-free-vue-admin-template/HEAD/public/apple-icon-120x120.png
--------------------------------------------------------------------------------
/public/apple-icon-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-free-vue-admin-template/HEAD/public/apple-icon-144x144.png
--------------------------------------------------------------------------------
/public/apple-icon-152x152.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-free-vue-admin-template/HEAD/public/apple-icon-152x152.png
--------------------------------------------------------------------------------
/public/apple-icon-180x180.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-free-vue-admin-template/HEAD/public/apple-icon-180x180.png
--------------------------------------------------------------------------------
/src/assets/images/angular.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-free-vue-admin-template/HEAD/src/assets/images/angular.jpg
--------------------------------------------------------------------------------
/src/assets/images/icons.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-free-vue-admin-template/HEAD/src/assets/images/icons.webp
--------------------------------------------------------------------------------
/src/assets/images/vue400.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-free-vue-admin-template/HEAD/src/assets/images/vue400.jpg
--------------------------------------------------------------------------------
/public/android-icon-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-free-vue-admin-template/HEAD/public/android-icon-144x144.png
--------------------------------------------------------------------------------
/public/android-icon-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-free-vue-admin-template/HEAD/public/android-icon-192x192.png
--------------------------------------------------------------------------------
/src/assets/images/avatars/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-free-vue-admin-template/HEAD/src/assets/images/avatars/1.jpg
--------------------------------------------------------------------------------
/src/assets/images/avatars/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-free-vue-admin-template/HEAD/src/assets/images/avatars/2.jpg
--------------------------------------------------------------------------------
/src/assets/images/avatars/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-free-vue-admin-template/HEAD/src/assets/images/avatars/3.jpg
--------------------------------------------------------------------------------
/src/assets/images/avatars/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-free-vue-admin-template/HEAD/src/assets/images/avatars/4.jpg
--------------------------------------------------------------------------------
/src/assets/images/avatars/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-free-vue-admin-template/HEAD/src/assets/images/avatars/5.jpg
--------------------------------------------------------------------------------
/src/assets/images/avatars/6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-free-vue-admin-template/HEAD/src/assets/images/avatars/6.jpg
--------------------------------------------------------------------------------
/src/assets/images/avatars/7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-free-vue-admin-template/HEAD/src/assets/images/avatars/7.jpg
--------------------------------------------------------------------------------
/src/assets/images/avatars/8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-free-vue-admin-template/HEAD/src/assets/images/avatars/8.jpg
--------------------------------------------------------------------------------
/src/assets/images/avatars/9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-free-vue-admin-template/HEAD/src/assets/images/avatars/9.jpg
--------------------------------------------------------------------------------
/public/apple-icon-precomposed.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-free-vue-admin-template/HEAD/public/apple-icon-precomposed.png
--------------------------------------------------------------------------------
/src/assets/images/components.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coreui/coreui-free-vue-admin-template/HEAD/src/assets/images/components.webp
--------------------------------------------------------------------------------
/src/styles/vendors/simplebar.scss:
--------------------------------------------------------------------------------
1 | .simplebar-content {
2 | display: flex;
3 | flex-direction: column;
4 | min-height: 100%;
5 | }
6 |
--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | # These are supported funding model platforms
2 |
3 | custom: "https://coreui.io/pricing?support=vue"
4 | open_collective: coreui
5 |
--------------------------------------------------------------------------------
/.prettierrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | semi: false,
3 | trailingComma: "all",
4 | singleQuote: true,
5 | printWidth: 100,
6 | tabWidth: 2,
7 | };
8 |
--------------------------------------------------------------------------------
/public/browserconfig.xml:
--------------------------------------------------------------------------------
1 |
2 | #ffffff
--------------------------------------------------------------------------------
/.github/SUPPORT.md:
--------------------------------------------------------------------------------
1 | ### Bug reports
2 |
3 | See the [contributing guidelines](CONTRIBUTING.md) for sharing bug reports.
4 |
5 | ### How-to
6 |
7 | For general troubleshooting or help getting started:
8 |
9 | - Go to [Discussions](https://github.com/coreui/coreui-free-vue-admin-template/discussions).
10 |
--------------------------------------------------------------------------------
/src/stores/theme.js:
--------------------------------------------------------------------------------
1 | import { ref } from 'vue'
2 | import { defineStore } from 'pinia'
3 |
4 | export const useThemeStore = defineStore('theme', () => {
5 | const theme = ref('light')
6 |
7 | const toggleTheme = (_theme) => {
8 | theme.value = _theme
9 | }
10 |
11 | return { theme, toggleTheme }
12 | })
13 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # Editor configuration, see http://editorconfig.org
2 | root = true
3 |
4 | [*]
5 | charset = utf-8
6 | end_of_line = lf
7 | indent_size = 2
8 | indent_style = space
9 | insert_final_newline = true
10 | trim_trailing_whitespace = true
11 |
12 | [*.md]
13 | max_line_length = off
14 | trim_trailing_whitespace = false
--------------------------------------------------------------------------------
/src/views/theme/ColorTheme.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/src/views/charts/CChartPieExample.vue:
--------------------------------------------------------------------------------
1 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/src/views/charts/CChartDoughnutExample.vue:
--------------------------------------------------------------------------------
1 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/src/components/AppFooter.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
CoreUI
5 |
© {{ new Date().getFullYear() }} creativeLabs.
8 |
9 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/src/stores/sidebar.js:
--------------------------------------------------------------------------------
1 | import { ref } from 'vue'
2 | import { defineStore } from 'pinia'
3 |
4 | export const useSidebarStore = defineStore('sidebar', () => {
5 | const visible = ref(undefined)
6 | const unfoldable = ref(false)
7 |
8 | const toggleVisible = (value) => {
9 | visible.value = value !== undefined ? value : !visible.value
10 | }
11 |
12 | const toggleUnfoldable = () => {
13 | unfoldable.value = !unfoldable.value
14 | }
15 |
16 | return { visible, unfoldable, toggleVisible, toggleUnfoldable }
17 | })
18 |
--------------------------------------------------------------------------------
/src/views/charts/index.js:
--------------------------------------------------------------------------------
1 | import CChartLineExample from './CChartLineExample'
2 | import CChartBarExample from './CChartBarExample'
3 | import CChartDoughnutExample from './CChartDoughnutExample'
4 | import CChartRadarExample from './CChartRadarExample'
5 | import CChartPieExample from './CChartPieExample'
6 | import CChartPolarAreaExample from './CChartPolarAreaExample'
7 |
8 | export {
9 | CChartLineExample,
10 | CChartBarExample,
11 | CChartDoughnutExample,
12 | CChartRadarExample,
13 | CChartPieExample,
14 | CChartPolarAreaExample,
15 | }
16 |
--------------------------------------------------------------------------------
/src/views/charts/CChartLineExample.vue:
--------------------------------------------------------------------------------
1 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/src/layouts/DefaultLayout.vue:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/src/views/charts/CChartBarExample.vue:
--------------------------------------------------------------------------------
1 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Folders to ignore
2 | dist/
3 | node_modules/
4 | tests/e2e/reports/
5 |
6 | # local env files
7 | .env.local
8 | .env.*.local
9 |
10 | # dependencies
11 | /node_modules
12 | package-lock.json
13 | yarn.lock
14 |
15 | # OS or Editor folders
16 | ._*
17 | .cache
18 | .DS_Store
19 | .idea
20 | .project
21 | .settings
22 | .tmproj
23 | *.esproj
24 | *.sublime-project
25 | *.sublime-workspace
26 | *.suo
27 | *.ntvs*
28 | *.njsproj
29 | *.sln
30 | *.sw?
31 | nbproject
32 | Thumbs.db
33 | /.vscode/
34 |
35 | # Numerous always-ignore extensions
36 | *.diff
37 | *.err
38 | *.log
39 | *.orig
40 | *.rej
41 | *.swo
42 | *.swp
43 | *.vi
44 | *.zip
45 | *~
46 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Feature request
3 | about: Suggest an idea for a new feature in CoreUI Free Vue Admin Template.
4 | title: ''
5 | labels: feature
6 | assignees: ''
7 |
8 | ---
9 |
10 | Before opening:
11 |
12 | - [Search for duplicate or closed issues](https://github.com/coreui/coreui-free-vue-admin-template/issues?utf8=%E2%9C%93&q=is%3Aissue)
13 | - Read the [contributing guidelines](https://github.com/coreui/coreui-free-vue-admin-template/blob/main/.github/CONTRIBUTING.md)
14 |
15 | Feature requests must include:
16 |
17 | - As much detail as possible for what we should add and why it's important to Bootstrap
18 | - Relevant links to prior art, screenshots, or live demos whenever possible
19 |
--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
1 | import eslintPluginVue from 'eslint-plugin-vue'
2 | import globals from 'globals'
3 |
4 | export default [
5 | { ignores: ['dist/', 'eslint.config.mjs'] },
6 | ...eslintPluginVue.configs['flat/essential'],
7 | {
8 | files: ['src/**/*.{js,vue}'],
9 | languageOptions: {
10 | globals: {
11 | ...globals.browser,
12 | ...globals.node,
13 | },
14 | ecmaVersion: 'latest',
15 | sourceType: 'module',
16 | },
17 | rules: {
18 | 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
19 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
20 | 'vue/multi-word-component-names': 'off',
21 | },
22 | },
23 | ]
24 |
--------------------------------------------------------------------------------
/src/views/icons/Flags.vue:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 |
11 | CoreUI Icons - Flag
12 |
13 |
14 |
15 |
16 |
17 | {{ toKebabCase(iconName) }}
18 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/src/views/icons/CoreUIIcons.vue:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 |
11 | CoreUI Icons Free
12 |
13 |
14 |
15 |
16 |
17 | {{ toKebabCase(iconName) }}
18 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/src/views/icons/Brands.vue:
--------------------------------------------------------------------------------
1 |
8 |
9 |
10 |
11 |
12 | CoreUI Icons - Brand
13 |
14 |
15 |
16 |
17 |
18 | {{ toKebabCase(iconName) }}
19 |
20 |
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import { createPinia } from 'pinia'
3 |
4 | import App from './App.vue'
5 | import router from './router'
6 |
7 | import CoreuiVue from '@coreui/vue'
8 | import CIcon from '@coreui/icons-vue'
9 | import { iconsSet as icons } from '@/assets/icons'
10 | import DocsComponents from '@/components/DocsComponents'
11 | import DocsExample from '@/components/DocsExample'
12 | import DocsIcons from '@/components/DocsIcons'
13 |
14 | const app = createApp(App)
15 | app.use(createPinia())
16 | app.use(router)
17 | app.use(CoreuiVue)
18 | app.provide('icons', icons)
19 | app.component('CIcon', CIcon)
20 | app.component('DocsComponents', DocsComponents)
21 | app.component('DocsExample', DocsExample)
22 | app.component('DocsIcons', DocsIcons)
23 |
24 | app.mount('#app')
25 |
--------------------------------------------------------------------------------
/.github/workflows/npm.yml:
--------------------------------------------------------------------------------
1 | name: NPM Installation
2 |
3 | on:
4 | push:
5 | branches-ignore:
6 | - "dependabot/**"
7 | schedule:
8 | - cron: '0 0 * * *'
9 |
10 | env:
11 | FORCE_COLOR: 2
12 | NODE: 16
13 |
14 | jobs:
15 | build:
16 | strategy:
17 | matrix:
18 | platform: [ubuntu-latest, windows-latest]
19 | node-version: [16.x, 17.x, 18.x]
20 | runs-on: ${{ matrix.platform }}
21 | steps:
22 | - name: Clone repository
23 | uses: actions/checkout@v3
24 |
25 | - name: Set up Node.js
26 | uses: actions/setup-node@v3
27 | with:
28 | node-version: ${{ env.node-version }}
29 |
30 | - name: Install npm dependencies
31 | run: npm install
32 |
33 | - name: Run build
34 | run: npm run build
35 |
--------------------------------------------------------------------------------
/src/assets/brand/sygnet.js:
--------------------------------------------------------------------------------
1 | export const sygnet = [
2 | '102 115',
3 | `
4 |
5 |
6 | `,
7 | ]
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Bug report
3 | about: Tell us about a bug you may have identified in CoreUI Free Vue Admin Template.
4 | title: ''
5 | labels: ''
6 | assignees: ''
7 |
8 | ---
9 |
10 | Before opening:
11 |
12 | - [Search for duplicate or closed issues](https://github.com/coreui/coreui-free-vue-admin-template/issues?utf8=%E2%9C%93&q=is%3Aissue)
13 | - [Validate](https://html5.validator.nu/) any HTML to avoid common problems
14 | - Read the [contributing guidelines](https://github.com/coreui/coreui-free-vue-admin-template/blob/v4-dev/.github/CONTRIBUTING.md)
15 |
16 | Bug reports must include:
17 |
18 | - Operating system and version (Windows, macOS, Android, iOS)
19 | - Browser and version (Chrome, Firefox, Safari, Microsoft Edge, Opera, Android Browser)
20 | - A [reduced test case](https://css-tricks.com/reduced-test-cases/) or suggested fix using [CodePen](https://codepen.io/) or [JS Bin](https://jsbin.com/)
21 |
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "CoreUI Free Vue Admin Template",
3 | "icons": [
4 | {
5 | "src": "\/android-icon-36x36.png",
6 | "sizes": "36x36",
7 | "type": "image\/png",
8 | "density": "0.75"
9 | },
10 | {
11 | "src": "\/android-icon-48x48.png",
12 | "sizes": "48x48",
13 | "type": "image\/png",
14 | "density": "1.0"
15 | },
16 | {
17 | "src": "\/android-icon-72x72.png",
18 | "sizes": "72x72",
19 | "type": "image\/png",
20 | "density": "1.5"
21 | },
22 | {
23 | "src": "\/android-icon-96x96.png",
24 | "sizes": "96x96",
25 | "type": "image\/png",
26 | "density": "2.0"
27 | },
28 | {
29 | "src": "\/android-icon-144x144.png",
30 | "sizes": "144x144",
31 | "type": "image\/png",
32 | "density": "3.0"
33 | },
34 | {
35 | "src": "\/android-icon-192x192.png",
36 | "sizes": "192x192",
37 | "type": "image\/png",
38 | "density": "4.0"
39 | }
40 | ]
41 | }
42 |
--------------------------------------------------------------------------------
/src/components/DocsExample.vue:
--------------------------------------------------------------------------------
1 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | Preview
18 |
19 |
20 |
21 |
22 |
23 | Code
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/src/components/AppBreadcrumb.vue:
--------------------------------------------------------------------------------
1 |
25 |
26 |
27 |
28 |
34 | {{ item.name }}
35 |
36 |
37 |
--------------------------------------------------------------------------------
/src/views/pages/Page404.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
404
8 |
Oops! You're lost.
9 |
10 | The page you are looking for was not found.
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | Search
19 |
20 |
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/src/views/pages/Page500.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 500
8 | Houston, we have a problem!
9 |
10 | The page you are looking for is temporarily unavailable.
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | Search
19 |
20 |
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 |
32 |
33 |
34 |
35 |
36 |
37 |
43 |
--------------------------------------------------------------------------------
/vite.config.mjs:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import vue from '@vitejs/plugin-vue'
3 | import path from 'node:path'
4 | import autoprefixer from 'autoprefixer'
5 |
6 | export default defineConfig(() => {
7 | return {
8 | plugins: [vue()],
9 | base: './',
10 | css: {
11 | postcss: {
12 | plugins: [
13 | autoprefixer({}), // add options if needed
14 | ],
15 | },
16 | },
17 | resolve: {
18 | alias: [
19 | // webpack path resolve to vitejs
20 | {
21 | find: /^~(.*)$/,
22 | replacement: '$1',
23 | },
24 | {
25 | find: '@/',
26 | replacement: `${path.resolve(__dirname, 'src')}/`,
27 | },
28 | {
29 | find: '@',
30 | replacement: path.resolve(__dirname, '/src'),
31 | },
32 | ],
33 | extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue', '.scss'],
34 | },
35 | server: {
36 | port: 3000,
37 | proxy: {
38 | // https://vitejs.dev/config/server-options.html
39 | },
40 | },
41 | }
42 | })
43 |
--------------------------------------------------------------------------------
/.github/workflows/stale.yml:
--------------------------------------------------------------------------------
1 | # This workflow warns and then closes issues and PRs that have had no activity for a specified amount of time.
2 | #
3 | # You can adjust the behavior by modifying this file.
4 | # For more information, see:
5 | # https://github.com/actions/stale
6 | name: Mark stale issues and pull requests
7 |
8 | on:
9 | schedule:
10 | - cron: '36 2 * * *'
11 |
12 | jobs:
13 | stale:
14 |
15 | runs-on: ubuntu-latest
16 | permissions:
17 | issues: write
18 | pull-requests: write
19 |
20 | steps:
21 | - uses: actions/stale@v3
22 | with:
23 | repo-token: ${{ secrets.GITHUB_TOKEN }}
24 | stale-issue-message: 'This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions'
25 | stale-pr-message: 'This PR has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions'
26 | stale-issue-label: 'no-issue-activity'
27 | stale-pr-label: 'no-pr-activity'
28 |
--------------------------------------------------------------------------------
/src/views/charts/CChartPolarAreaExample.vue:
--------------------------------------------------------------------------------
1 |
31 |
32 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/src/views/theme/Colors.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
9 | Theme colors
10 |
11 |
12 |
13 | Brand Primary Color
14 |
15 | Brand Secondary Color
16 | Brand Success Color
17 | Brand Danger Color
18 | Brand Warning Color
19 | Brand Info Color
20 | Brand Light Color
21 | Brand Dark Color
22 |
23 |
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2025 creativeLabs Łukasz Holeczek.
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 |
--------------------------------------------------------------------------------
/src/views/charts/CChartRadarExample.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
39 |
--------------------------------------------------------------------------------
/src/components/DocsIcons.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | CoreUI Icons package is delivered with more than 1500 icons in multiple formats SVG, PNG,
13 | and Webfonts. CoreUI Icons are beautifully crafted symbols for common actions and items. You
14 | can use them in your digital products for web or mobile app. For more information please
15 | visit our documentation.
16 |
17 |
27 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/src/components/AppSidebar.vue:
--------------------------------------------------------------------------------
1 |
11 |
12 |
13 | sidebar.toggleVisible(value)"
20 | >
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@coreui/coreui-free-vue-admin-template",
3 | "version": "5.4.0",
4 | "description": "CoreUI Free Vue Admin Template",
5 | "bugs": {
6 | "url": "https://github.com/coreui/coreui-free-vue-admin-template/issues"
7 | },
8 | "repository": {
9 | "type": "git",
10 | "url": "git@github.com:coreui/coreui-free-vue-admin-template.git"
11 | },
12 | "license": "MIT",
13 | "author": "The CoreUI Team (https://github.com/orgs/coreui/people)",
14 | "scripts": {
15 | "dev": "vite --force",
16 | "build": "vite build",
17 | "lint": "eslint",
18 | "preview": "vite preview"
19 | },
20 | "dependencies": {
21 | "@coreui/chartjs": "^4.1.0",
22 | "@coreui/coreui": "^5.4.1",
23 | "@coreui/icons": "^3.0.1",
24 | "@coreui/icons-vue": "2.2.0",
25 | "@coreui/utils": "^2.0.2",
26 | "@coreui/vue": "^5.5.0",
27 | "@coreui/vue-chartjs": "^3.0.0",
28 | "@popperjs/core": "^2.11.8",
29 | "chart.js": "^4.5.0",
30 | "pinia": "^3.0.3",
31 | "simplebar-vue": "^2.4.2",
32 | "vue": "^3.5.18",
33 | "vue-router": "^4.5.1"
34 | },
35 | "devDependencies": {
36 | "@vitejs/plugin-vue": "^6.0.1",
37 | "autoprefixer": "^10.4.21",
38 | "eslint": "^9.32.0",
39 | "eslint-plugin-vue": "^10.4.0",
40 | "globals": "^16.3.0",
41 | "postcss": "^8.5.6",
42 | "sass": "^1.90.0",
43 | "vite": "^7.1.0"
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/src/views/charts/Charts.vue:
--------------------------------------------------------------------------------
1 |
11 |
12 |
13 |
14 |
15 |
16 | Line Chart
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | Bar Chart
25 |
26 |
27 |
28 |
29 |
30 | Doughnut Chart
31 |
32 |
33 |
34 |
35 |
36 | Radar Chart
37 |
38 |
39 |
40 |
41 |
42 | Pie Chart
43 |
44 |
45 |
46 |
47 |
48 | Polar Area Chart
49 |
50 |
51 |
52 |
53 |
54 |
--------------------------------------------------------------------------------
/src/components/DocsComponents.vue:
--------------------------------------------------------------------------------
1 |
8 |
9 |
10 |
11 |
12 |
13 |
20 |
21 |
22 | Our Admin Panel isn’t just a mix of third-party components. It’s
23 |
24 | the only open-source Vue dashboard built on a professional, enterprise-grade UI Components
25 | Library
26 |
27 | . This component is part of this library, and we present only the basic usage of it here. To
28 | explore extended examples, detailed API documentation, and customization options, refer to
29 | our docs.
30 |
31 |
41 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/src/styles/style.scss:
--------------------------------------------------------------------------------
1 | @use "@coreui/coreui/scss/coreui" as * with (
2 | $enable-deprecation-messages: false
3 | );
4 | @use "@coreui/chartjs/scss/coreui-chartjs";
5 | @use "vendors/simplebar";
6 |
7 | body {
8 | background-color: var(--cui-tertiary-bg);
9 | }
10 |
11 | .wrapper {
12 | width: 100%;
13 | padding-inline: var(--cui-sidebar-occupy-start, 0) var(--cui-sidebar-occupy-end, 0);
14 | will-change: auto;
15 | @include transition(padding .15s);
16 | }
17 |
18 | .header > .container-fluid,
19 | .sidebar-header {
20 | min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list
21 | }
22 |
23 | .sidebar-brand-full {
24 | margin-left: 3px;
25 | }
26 |
27 | .sidebar-header {
28 | .nav-underline-border {
29 | --cui-nav-underline-border-link-padding-x: 1rem;
30 | --cui-nav-underline-border-gap: 0;
31 | }
32 |
33 | .nav-link {
34 | display: flex;
35 | align-items: center;
36 | min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list
37 | }
38 | }
39 |
40 | .sidebar-toggler {
41 | margin-inline-start: auto;
42 | }
43 |
44 | .sidebar-narrow,
45 | .sidebar-narrow-unfoldable:not(:hover) {
46 | .sidebar-toggler {
47 | margin-inline-end: auto;
48 | }
49 | }
50 |
51 | .header > .container-fluid + .container-fluid {
52 | min-height: 3rem;
53 | }
54 |
55 | .footer {
56 | min-height: calc(3rem + 1px); // stylelint-disable-line function-disallowed-list
57 | }
58 |
59 | @include color-mode(dark) {
60 | body {
61 | background-color: var(--cui-dark-bg-subtle);
62 | }
63 |
64 | .footer {
65 | --cui-footer-bg: var(--cui-body-bg);
66 | }
67 | }
68 |
--------------------------------------------------------------------------------
/src/views/pages/Register.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | Register
10 | Create your account
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | @
19 |
20 |
21 |
22 |
23 |
24 |
25 |
30 |
31 |
32 |
33 |
34 |
35 |
40 |
41 |
42 | Create Account
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
--------------------------------------------------------------------------------
/src/views/base/Breadcrumbs.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vue Breadcrumb
8 |
9 |
10 |
11 | The breadcrumb navigation provides links back to each previous page the user navigated
12 | through and shows the current location in a website or an application. You don’t have to
13 | add separators, because they automatically added in CSS through
14 |
15 | ::before
16 |
17 | and
18 |
19 | content
20 |
21 | .
22 |
23 |
24 |
25 |
26 | Home
27 |
28 | Library
29 |
30 |
31 |
32 | Home
33 |
34 |
35 | Library
36 |
37 | Data
38 |
39 |
40 |
41 | Home
42 |
43 |
44 | Library
45 |
46 |
47 | Data
48 |
49 | Bootstrap
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
--------------------------------------------------------------------------------
/src/components/AppHeaderDropdownAccnt.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
17 | Account
18 |
19 |
20 | Updates
21 | {{ itemsCount }}
22 |
23 |
24 | Messages
25 | {{ itemsCount }}
26 |
27 |
28 | Tasks
29 | {{ itemsCount }}
30 |
31 |
32 | Comments
33 | {{ itemsCount }}
34 |
35 |
39 | Settings
40 |
41 | Profile
42 | Settings
43 |
44 | Payments
45 | {{ itemsCount }}
46 |
47 |
48 | Projects
49 | {{ itemsCount }}
50 |
51 |
52 | Lock Account
53 | Logout
54 |
55 |
56 |
57 |
--------------------------------------------------------------------------------
/src/styles/examples.scss:
--------------------------------------------------------------------------------
1 | /* stylelint-disable scss/selector-no-redundant-nesting-selector */
2 | @use "@coreui/coreui/scss/variables" as *;
3 | @use "@coreui/coreui/scss/mixins/breakpoints" as *;
4 | @use "@coreui/coreui/scss/mixins/color-mode" as *;
5 |
6 | .example {
7 | &:not(:first-child) {
8 | margin-top: 1.5rem;
9 | }
10 |
11 | .tab-content {
12 | background-color: var(--#{$prefix}tertiary-bg);
13 | }
14 |
15 | & + p {
16 | margin-top: 1.5rem;
17 | }
18 |
19 | // Components examples
20 | .preview {
21 | + p {
22 | margin-top: 2rem;
23 | }
24 |
25 | > .form-control {
26 | + .form-control {
27 | margin-top: .5rem;
28 | }
29 | }
30 |
31 | > .nav + .nav,
32 | > .alert + .alert,
33 | > .navbar + .navbar,
34 | > .progress + .progress {
35 | margin-top: 1rem;
36 | }
37 |
38 | > .dropdown-menu {
39 | position: static;
40 | display: block;
41 | }
42 |
43 | > :last-child {
44 | margin-bottom: 0;
45 | }
46 |
47 | // Images
48 | > svg + svg,
49 | > img + img {
50 | margin-left: .5rem;
51 | }
52 |
53 | // Buttons
54 | .col > .btn,
55 | .col-auto > .btn,
56 | > .btn,
57 | > .btn-group {
58 | margin: .25rem .125rem;
59 | }
60 | > .btn-toolbar + .btn-toolbar {
61 | margin-top: .5rem;
62 | }
63 |
64 | // List groups
65 | > .list-group {
66 | max-width: 400px;
67 | }
68 |
69 | > [class*="list-group-horizontal"] {
70 | max-width: 100%;
71 | }
72 |
73 | // Navbars
74 | .fixed-top,
75 | .sticky-top {
76 | position: static;
77 | margin: -1rem -1rem 1rem;
78 | }
79 |
80 | .fixed-bottom {
81 | position: static;
82 | margin: 1rem -1rem -1rem;
83 | }
84 |
85 | @include media-breakpoint-up(sm) {
86 | .fixed-top,
87 | .sticky-top {
88 | margin: -1.5rem -1.5rem 1rem;
89 | }
90 | .fixed-bottom {
91 | margin: 1rem -1.5rem -1.5rem;
92 | }
93 | }
94 |
95 | // Pagination
96 | .pagination {
97 | margin-top: .5rem;
98 | margin-bottom: .5rem;
99 | }
100 |
101 | .docs-example-modal {
102 | .modal {
103 | position: static;
104 | display: block;
105 | }
106 | }
107 | }
108 | }
109 |
110 | @include color-mode(dark) {
111 | .example .tab-content {
112 | background-color: var(--#{$prefix}secondary-bg);
113 | }
114 | }
115 |
--------------------------------------------------------------------------------
/src/views/pages/Login.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | Login
11 | Sign In to your account
12 |
13 |
14 |
15 |
16 |
20 |
21 |
22 |
23 |
24 |
25 |
30 |
31 |
32 |
33 | Login
34 |
35 |
36 |
37 | Forgot password?
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
Sign up
48 |
49 | Lorem ipsum dolor sit amet, consectetur adipisicing elit,
50 | sed do eiusmod tempor incididunt ut labore et dolore magna
51 | aliqua.
52 |
53 |
54 | Register Now!
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | CoreUI Vue.js Admin Template
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
42 |
43 |
44 |
45 | We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.
46 |
47 |
48 |
49 |
50 |
51 |
52 |
--------------------------------------------------------------------------------
/src/views/base/Popovers.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vue Popovers Basic example
8 |
9 |
10 |
11 |
21 | Click to toggle popover
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 | Vue Popover Four directions
31 |
32 |
33 |
34 | Four options are available: top, right, bottom, and left aligned.
35 | Directions are mirrored when using CoreUI for Vue in RTL.
36 |
37 |
38 | Popover on top
47 | Popover on right
56 | Popover on bottom
65 | Popover on left
74 |
75 |
76 |
77 |
78 |
79 |
80 |
--------------------------------------------------------------------------------
/.github/COMMIT_CONVENTION.md:
--------------------------------------------------------------------------------
1 | ## Git Commit Message Convention
2 |
3 | > This is adapted from [Angular's commit convention](https://github.com/conventional-changelog/conventional-changelog/blob/master/packages/conventional-changelog-angular/convention.md).
4 |
5 | #### Examples
6 |
7 | Appears under "Features" header, `compiler` subheader:
8 |
9 | ```
10 | feat(compiler): add 'comments' option
11 | ```
12 |
13 | Appears under "Bug Fixes" header, `sidebar` subheader, with a link to issue #28:
14 |
15 | ```
16 | fix(sidebar): handle events on blur
17 |
18 | close #28
19 | ```
20 |
21 | Appears under "Performance Improvements" header, and under "Breaking Changes" with the breaking change explanation:
22 |
23 | ```
24 | perf(core): improve vdom diffing by removing 'foo' option
25 |
26 | BREAKING CHANGE: The 'foo' option has been removed.
27 | ```
28 |
29 | The following commit and commit `667ecc1` do not appear in the changelog if they are under the same release. If not, the revert commit appears under the "Reverts" header.
30 |
31 | ```
32 | revert: feat(compiler): add 'comments' option
33 |
34 | This reverts commit 667ecc1654a317a13331b17617d973392f415f02.
35 | ```
36 |
37 | ### Full Message Format
38 |
39 | A commit message consists of a **header**, **body** and **footer**. The header has a **type**, **scope** and **subject**:
40 |
41 | ```
42 | ():
43 |
44 |
45 |
46 |
47 | ```
48 |
49 | The **header** is mandatory and the **scope** of the header is optional.
50 |
51 | ### Revert
52 |
53 | If the commit reverts a previous commit, it should begin with `revert: `, followed by the header of the reverted commit. In the body it should say: `This reverts commit .`, where the hash is the SHA of the commit being reverted.
54 |
55 | ### Type
56 |
57 | If the prefix is `feat`, `fix` or `perf`, it will appear in the changelog. However if there is any [BREAKING CHANGE](#footer), the commit will always appear in the changelog.
58 |
59 | Other prefixes are up to your discretion. Suggested prefixes are `docs`, `chore`, `style`, `refactor`, and `test` for non-changelog related tasks.
60 |
61 | ### Scope
62 |
63 | The scope could be anything specifying place of the commit change. For example `core`, `compiler`, `ssr`, `v-model`, `transition` etc...
64 |
65 | ### Subject
66 |
67 | The subject contains succinct description of the change:
68 |
69 | * use the imperative, present tense: "change" not "changed" nor "changes"
70 | * don't capitalize first letter
71 | * no dot (.) at the end
72 |
73 | ### Body
74 |
75 | Just as in the **subject**, use the imperative, present tense: "change" not "changed" nor "changes".
76 | The body should include the motivation for the change and contrast this with previous behavior.
77 |
78 | ### Footer
79 |
80 | The footer should contain any information about **Breaking Changes** and is also the place to
81 | reference GitHub issues that this commit **Closes**.
82 |
83 | **Breaking Changes** should start with the word `BREAKING CHANGE:` with a space or two newlines. The rest of the commit message is then used for this.
--------------------------------------------------------------------------------
/src/views/base/Tooltips.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vue Tooltips Basic example
8 |
9 |
10 |
11 | Hover over the links below to see tooltips:
12 |
13 |
14 |
15 | Tight pants next level keffiyeh
16 | you probably
17 | haven't heard of them. Photo booth beard raw denim letterpress
18 | vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's
19 | fixie sustainable quinoa 8-bit american apparel
20 | have a
21 | terry richardson vinyl chambray. Beard stumptown, cardigans banh
22 | mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko
23 | mcsweeney''s cleanse vegan chambray. A really ironic artisan
24 | whatever keytar
25 | scenester farm-to-table banksy Austin
26 | twitter handle
27 | freegan cred raw denim single-origin coffee viral.
28 |
29 |
30 |
31 | Hover over the links below to see tooltips:
32 |
33 |
34 | Tooltip on top
43 | Tooltip on right
52 | Tooltip on bottom
61 | Tooltip on left
70 |
71 |
72 |
73 |
74 |
75 |
76 |
--------------------------------------------------------------------------------
/src/views/forms/Range.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Vue Range
7 |
8 |
9 | Create custom
10 | <input type="range"> controls with
11 | <CFormRange>.
12 |
13 |
14 | Example range
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | Vue Range Disabled
24 |
25 |
26 |
27 | Add the disabled boolean attribute on an input to give
28 | it a grayed out appearance and remove pointer events.
29 |
30 |
31 | Disabled range
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 | Vue Range Min and max
41 |
42 |
43 |
44 | Range inputs have implicit values for min and
45 | max— 0 and 100, respectively.
46 | You may specify new values for those using the min and
47 | max attributes.
48 |
49 |
50 | Example range
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 | Vue Range Steps
60 |
61 |
62 |
63 | By default, range inputs "snap" to integer values. To change
64 | this, you can specify a step value. In the example
65 | below, we double the number of steps by using
66 | step="0.5".
67 |
68 |
69 | Example range
70 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
--------------------------------------------------------------------------------
/.github/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Contributor Covenant Code of Conduct
2 |
3 | ## Our Pledge
4 |
5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
6 |
7 | ## Our Standards
8 |
9 | Examples of behavior that contributes to creating a positive environment include:
10 |
11 | * Using welcoming and inclusive language
12 | * Being respectful of differing viewpoints and experiences
13 | * Gracefully accepting constructive criticism
14 | * Focusing on what is best for the community
15 | * Showing empathy towards other community members
16 |
17 | Examples of unacceptable behavior by participants include:
18 |
19 | * The use of sexualized language or imagery and unwelcome sexual attention or advances
20 | * Trolling, insulting/derogatory comments, and personal or political attacks
21 | * Public or private harassment
22 | * Publishing others' private information, such as a physical or electronic address, without explicit permission
23 | * Other conduct which could reasonably be considered inappropriate in a professional setting
24 |
25 | ## Our Responsibilities
26 |
27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
28 |
29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
30 |
31 | ## Scope
32 |
33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
34 |
35 | ## Enforcement
36 |
37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at . The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
38 |
39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
40 |
41 | ## Attribution
42 |
43 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
44 |
45 | [homepage]: http://contributor-covenant.org
46 | [version]: http://contributor-covenant.org/version/1/4/
--------------------------------------------------------------------------------
/src/assets/icons/index.js:
--------------------------------------------------------------------------------
1 | import {
2 | cibFacebook,
3 | cibTwitter,
4 | cibLinkedin,
5 | cibFlickr,
6 | cibTumblr,
7 | cibXing,
8 | cibGithub,
9 | cibGoogle,
10 | cibStackoverflow,
11 | cibYoutube,
12 | cibDribbble,
13 | cibInstagram,
14 | cibPinterest,
15 | cibVk,
16 | cibYahoo,
17 | cibBehance,
18 | cibReddit,
19 | cibVimeo,
20 | cibCcMastercard,
21 | cibCcVisa,
22 | cibCcStripe,
23 | cibCcPaypal,
24 | cibCcApplePay,
25 | cibCcAmex,
26 | } from '@coreui/icons'
27 | import { cifUs, cifBr, cifIn, cifFr, cifEs, cifPl } from '@coreui/icons'
28 | import {
29 | cilArrowBottom,
30 | cilArrowRight,
31 | cilArrowTop,
32 | cilBan,
33 | cilBasket,
34 | cilBell,
35 | cilCalculator,
36 | cilCalendar,
37 | cilCloudDownload,
38 | cilChartPie,
39 | cilCheck,
40 | cilChevronBottom,
41 | cilChevronTop,
42 | cilCheckCircle,
43 | cilCode,
44 | cilCommentSquare,
45 | cilContrast,
46 | cilCursor,
47 | cilDrop,
48 | cilDollar,
49 | cilEnvelopeClosed,
50 | cilEnvelopeOpen,
51 | cilEuro,
52 | cilExternalLink,
53 | cilGlobeAlt,
54 | cilGrid,
55 | cilFile,
56 | cilJustifyCenter,
57 | cilLaptop,
58 | cilLayers,
59 | cilLightbulb,
60 | cilList,
61 | cilLocationPin,
62 | cilLockLocked,
63 | cilMagnifyingGlass,
64 | cilMediaPlay,
65 | cilMenu,
66 | cilMoon,
67 | cilNotes,
68 | cilOptions,
69 | cilPencil,
70 | cilPeople,
71 | cilPuzzle,
72 | cilSettings,
73 | cilShieldAlt,
74 | cilSpeech,
75 | cilSpeedometer,
76 | cilStar,
77 | cilSun,
78 | cilTask,
79 | cilUser,
80 | cilUserFemale,
81 | cilUserFollow,
82 | cilXCircle,
83 | } from '@coreui/icons'
84 |
85 | export const iconsSet = Object.assign(
86 | {},
87 | {
88 | cilArrowBottom,
89 | cilArrowRight,
90 | cilArrowTop,
91 | cilBan,
92 | cilBasket,
93 | cilBell,
94 | cilCalculator,
95 | cilCalendar,
96 | cilCloudDownload,
97 | cilChartPie,
98 | cilCheck,
99 | cilChevronBottom,
100 | cilChevronTop,
101 | cilCheckCircle,
102 | cilCode,
103 | cilCommentSquare,
104 | cilContrast,
105 | cilCursor,
106 | cilDrop,
107 | cilDollar,
108 | cilEnvelopeClosed,
109 | cilEnvelopeOpen,
110 | cilEuro,
111 | cilExternalLink,
112 | cilGlobeAlt,
113 | cilGrid,
114 | cilFile,
115 | cilJustifyCenter,
116 | cilLaptop,
117 | cilLayers,
118 | cilLightbulb,
119 | cilList,
120 | cilLocationPin,
121 | cilLockLocked,
122 | cilMagnifyingGlass,
123 | cilMediaPlay,
124 | cilMenu,
125 | cilMoon,
126 | cilNotes,
127 | cilOptions,
128 | cilPencil,
129 | cilPeople,
130 | cilPuzzle,
131 | cilSettings,
132 | cilShieldAlt,
133 | cilSpeech,
134 | cilSpeedometer,
135 | cilStar,
136 | cilSun,
137 | cilTask,
138 | cilUser,
139 | cilUserFemale,
140 | cilUserFollow,
141 | cilXCircle,
142 | },
143 | {
144 | cifUs,
145 | cifBr,
146 | cifIn,
147 | cifFr,
148 | cifEs,
149 | cifPl,
150 | },
151 | {
152 | cibFacebook,
153 | cibTwitter,
154 | cibLinkedin,
155 | cibFlickr,
156 | cibTumblr,
157 | cibXing,
158 | cibGithub,
159 | cibGoogle,
160 | cibStackoverflow,
161 | cibYoutube,
162 | cibDribbble,
163 | cibInstagram,
164 | cibPinterest,
165 | cibVk,
166 | cibYahoo,
167 | cibBehance,
168 | cibReddit,
169 | cibVimeo,
170 | cibCcMastercard,
171 | cibCcVisa,
172 | cibCcStripe,
173 | cibCcPaypal,
174 | cibCcApplePay,
175 | cibCcAmex,
176 | },
177 | )
178 |
--------------------------------------------------------------------------------
/src/views/dashboard/MainChart.vue:
--------------------------------------------------------------------------------
1 |
125 |
126 |
127 |
128 |
129 |
--------------------------------------------------------------------------------
/src/components/AppHeader.vue:
--------------------------------------------------------------------------------
1 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 | Dashboard
33 |
34 |
35 | Users
36 |
37 |
38 | Settings
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
76 | Light
77 |
78 |
85 | Dark
86 |
87 |
94 | Auto
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
--------------------------------------------------------------------------------
/src/views/forms/Select.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vue Select Default
8 |
9 |
10 |
11 |
12 | Open this select menu
13 | One
14 | Two
15 | Three
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | Vue Select Sizing
25 |
26 |
27 |
28 | You may also choose from small and large custom selects to match our
29 | similarly sized text inputs.
30 |
31 |
32 |
37 | Open this select menu
38 | One
39 | Two
40 | Three
41 |
42 |
47 | Open this select menu
48 | One
49 | Two
50 | Three
51 |
52 |
53 |
54 | The multiple attribute is also supported:
55 |
56 |
57 |
62 | Open this select menu
63 | One
64 | Two
65 | Three
66 |
67 |
68 |
69 | As is the html-size property:
70 |
71 |
72 |
77 | Open this select menu
78 | One
79 | Two
80 | Three
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 | Vue Select Disabled
90 |
91 |
92 |
93 | Add the disabled boolean attribute on a select to give
94 | it a grayed out appearance and remove pointer events.
95 |
96 |
97 |
98 | Open this select menu
99 | One
100 | Two
101 | Three
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
--------------------------------------------------------------------------------
/src/views/notifications/Badges.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | Vue Badges Dismissing
10 |
11 |
12 |
13 | Bootstrap badge scale to suit the size of the parent element by
14 | using relative font sizing and em units.
15 |
16 |
17 | Example heading New
18 | Example heading New
19 | Example heading New
20 | Example heading New
21 | Example heading New
22 | Example heading New
23 |
24 |
25 | Badges can be used as part of links or buttons to provide a counter.
26 |
27 |
28 |
29 | Notifications 4
30 |
31 |
32 |
33 | Remark that depending on how you use them, badges may be complicated
34 | for users of screen readers and related assistive technologies.
35 |
36 |
37 | Unless the context is clear, consider including additional context
38 | with a visually hidden piece of additional text.
39 |
40 |
41 |
42 | Profile 9
43 | unread messages
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 | Vue Badges Contextual variations
53 |
54 |
55 |
56 | Add any of the below-mentioned color props to modify
57 | the presentation of a badge.
58 |
59 |
60 | primary
61 | success
62 | danger
63 | warning
64 | info
65 | light
66 | dark
67 |
68 |
69 |
70 |
71 |
72 | Vue Badges Pill badges
73 |
74 |
75 |
76 | Apply the shape="rounded-pill" prop to make
77 | badges rounded.
78 |
79 |
80 |
81 | primary
82 |
83 |
84 | success
85 |
86 |
87 | danger
88 |
89 |
90 | warning
91 |
92 | info
93 | light
94 | dark
95 |
96 |
97 |
98 |
99 |
100 |
101 |
--------------------------------------------------------------------------------
/src/assets/brand/logo.js:
--------------------------------------------------------------------------------
1 | export const logo = [
2 | '532 116',
3 | `
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | `,
17 | ]
--------------------------------------------------------------------------------
/src/views/base/Collapses.vue:
--------------------------------------------------------------------------------
1 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | Vue Collapse
17 |
18 |
19 | You can use a link or a button component.
20 |
21 | Link
22 | Button
23 |
24 |
25 |
26 | Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
27 | richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
28 | cred nesciunt sapiente ea proident.
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 | Vue Collapse Horizontal
37 |
38 |
39 | The collapse plugin also supports horizontal collapsing. Add the
40 | horizontal property to transition the width instead of
41 | height and set a width on the immediate child element.
42 |
43 |
44 | Button
52 |
53 |
54 |
55 |
56 | This is some placeholder content for a horizontal collapse. It's hidden by
57 | default and shown when triggered.
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 | Vue Collapse multi target
67 |
68 |
69 | A <CButton> can show and hide multiple elements.
70 |
71 | Toggle multiple targets
72 |
73 | Toggle first element
74 | Toggle second element
75 | {
79 | visibleA = !visibleA
80 | visibleB = !visibleB
81 | }
82 | "
83 | >
84 | Toggle both elements
85 |
86 |
87 |
88 |
89 |
90 |
91 | Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
92 | richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes
93 | anderson cred nesciunt sapiente ea proident.
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 | Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
103 | richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes
104 | anderson cred nesciunt sapiente ea proident.
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
--------------------------------------------------------------------------------
/src/views/base/Spinners.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vue Spinner Border
8 |
9 |
10 |
11 | Use the border spinners for a lightweight loading indicator.
12 |
13 |
14 |
15 |
16 |
17 | The border spinner uses currentColor for its
18 | border-color. You can use any of our text color
19 | utilities on the standard spinner.
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 | Vue Spinner Growing
38 |
39 |
40 |
41 | If you don'tfancy a border spinner, switch to the grow spinner.
42 | While it doesn't technically spin, it does repeatedly grow!
43 |
44 |
45 |
46 |
47 |
48 | Once again, this spinner is built with currentColor, so
49 | you can easily change its appearance. Here it is in blue, along with
50 | the supported variants.
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 | Vue Spinner Size
69 |
70 |
71 |
72 | Add size="sm" property to make a smaller
73 | spinner that can quickly be used within other components.
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 | Vue Spinner Buttons
86 |
87 |
88 |
89 | Use spinners within buttons to indicate an action is currently
90 | processing or taking place. You may also swap the text out of the
91 | spinner element and utilize button text as needed.
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 | Loading...
100 |
101 |
102 |
103 |
104 |
110 |
111 |
112 |
118 | Loading...
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
--------------------------------------------------------------------------------
/src/views/widgets/WidgetsStatsTypeD.vue:
--------------------------------------------------------------------------------
1 |
32 |
33 |
34 |
35 |
36 |
43 |
44 |
45 |
63 |
64 |
65 |
66 |
67 |
74 |
75 |
76 |
94 |
95 |
96 |
97 |
98 |
105 |
106 |
107 |
125 |
126 |
127 |
128 |
129 |
136 |
137 |
138 |
156 |
157 |
158 |
159 |
160 |
161 |
--------------------------------------------------------------------------------
/src/components/AppSidebarNav.js:
--------------------------------------------------------------------------------
1 | import { defineComponent, h, onMounted, ref, resolveComponent } from 'vue'
2 | import { RouterLink, useRoute } from 'vue-router'
3 |
4 | import { cilExternalLink } from '@coreui/icons'
5 | import { CBadge, CSidebarNav, CNavItem, CNavGroup, CNavTitle } from '@coreui/vue'
6 | import nav from '@/_nav.js'
7 |
8 | import simplebar from 'simplebar-vue'
9 | import 'simplebar-vue/dist/simplebar.min.css'
10 |
11 | const normalizePath = (path) =>
12 | decodeURI(path)
13 | .replace(/#.*$/, '')
14 | .replace(/(index)?\.(html)$/, '')
15 |
16 | const isActiveLink = (route, link) => {
17 | if (link === undefined) {
18 | return false
19 | }
20 |
21 | if (route.hash === link) {
22 | return true
23 | }
24 |
25 | const currentPath = normalizePath(route.path)
26 | const targetPath = normalizePath(link)
27 |
28 | return currentPath === targetPath
29 | }
30 |
31 | const isActiveItem = (route, item) => {
32 | if (isActiveLink(route, item.to)) {
33 | return true
34 | }
35 |
36 | if (item.items) {
37 | return item.items.some((child) => isActiveItem(route, child))
38 | }
39 |
40 | return false
41 | }
42 |
43 | const AppSidebarNav = defineComponent({
44 | name: 'AppSidebarNav',
45 | components: {
46 | CNavItem,
47 | CNavGroup,
48 | CNavTitle,
49 | },
50 | setup() {
51 | const route = useRoute()
52 | const firstRender = ref(true)
53 |
54 | onMounted(() => {
55 | firstRender.value = false
56 | })
57 |
58 | const renderItem = (item) => {
59 | if (item.items) {
60 | return h(
61 | CNavGroup,
62 | {
63 | as: 'div',
64 | compact: true,
65 | ...(firstRender.value && {
66 | visible: item.items.some((child) => isActiveItem(route, child)),
67 | }),
68 | },
69 | {
70 | togglerContent: () => [
71 | h(resolveComponent('CIcon'), {
72 | customClassName: 'nav-icon',
73 | name: item.icon,
74 | }),
75 | item.name,
76 | ],
77 | default: () => item.items.map((child) => renderItem(child)),
78 | },
79 | )
80 | }
81 |
82 | if (item.href) {
83 | return h(
84 | resolveComponent(item.component),
85 | {
86 | href: item.href,
87 | target: '_blank',
88 | rel: 'noopener noreferrer',
89 | },
90 | {
91 | default: () => [
92 | item.icon
93 | ? h(resolveComponent('CIcon'), {
94 | customClassName: 'nav-icon',
95 | name: item.icon,
96 | })
97 | : h('span', { class: 'nav-icon' }, h('span', { class: 'nav-icon-bullet' })),
98 | item.name,
99 | item.external && h(resolveComponent('CIcon'), {
100 | class: 'ms-2',
101 | name: 'cil-external-link',
102 | size: 'sm'
103 | }),
104 | item.badge &&
105 | h(
106 | CBadge,
107 | {
108 | class: 'ms-auto',
109 | color: item.badge.color,
110 | size: 'sm',
111 | },
112 | {
113 | default: () => item.badge.text,
114 | },
115 | ),
116 | ],
117 | },
118 | )
119 | }
120 |
121 | return item.to
122 | ? h(
123 | RouterLink,
124 | {
125 | to: item.to,
126 | custom: true,
127 | },
128 | {
129 | default: (props) =>
130 | h(
131 | resolveComponent(item.component),
132 | {
133 | active: props.isActive,
134 | as: 'div',
135 | href: props.href,
136 | onClick: () => props.navigate(),
137 | },
138 | {
139 | default: () => [
140 | item.icon
141 | ? h(resolveComponent('CIcon'), {
142 | customClassName: 'nav-icon',
143 | name: item.icon,
144 | })
145 | : h('span', { class: 'nav-icon' }, h('span', { class: 'nav-icon-bullet' })),
146 | item.name,
147 | item.badge &&
148 | h(
149 | CBadge,
150 | {
151 | class: 'ms-auto',
152 | color: item.badge.color,
153 | size: 'sm',
154 | },
155 | {
156 | default: () => item.badge.text,
157 | },
158 | ),
159 | ],
160 | },
161 | ),
162 | },
163 | )
164 | : h(
165 | resolveComponent(item.component),
166 | {
167 | as: 'div',
168 | },
169 | {
170 | default: () => item.name,
171 | },
172 | )
173 | }
174 |
175 | return () =>
176 | h(
177 | CSidebarNav,
178 | {
179 | as: simplebar,
180 | },
181 | {
182 | default: () => nav.map((item) => renderItem(item)),
183 | },
184 | )
185 | },
186 | })
187 |
188 | export { AppSidebarNav }
189 |
--------------------------------------------------------------------------------
/src/views/notifications/Alerts.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | Vue Alert
14 |
15 |
16 |
17 | Vue Alert is prepared for any length of text, as well as an optional
18 | close button. For a styling, use one of the
19 | required contextual color props (e.g.,
20 | primary). For inline dismissal, use the
21 |
24 | dismissing prop
25 |
26 | .
27 |
28 |
29 | A simple primary alert—check it out!
32 | A simple secondary alert—check it out!
35 | A simple success alert—check it out!
38 | A simple danger alert—check it out!
39 | A simple warning alert—check it out!
42 | A simple info alert—check it out!
43 | A simple light alert—check it out!
44 | A simple dark alert—check it out!
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 | Vue Alert Link color
53 |
54 |
55 |
56 | Use the <CAlertLink> component to immediately
57 | give matching colored links inside any alert.
58 |
59 |
60 |
61 | A simple primary alert with
62 | an example link . Give it a click
63 | if you like.
64 |
65 |
66 | A simple secondary alert with
67 | an example link . Give it a click
68 | if you like.
69 |
70 |
71 | A simple success alert with
72 | an example link . Give it a click
73 | if you like.
74 |
75 |
76 | A simple danger alert with
77 | an example link . Give it a click
78 | if you like.
79 |
80 |
81 | A simple warning alert with
82 | an example link . Give it a click
83 | if you like.
84 |
85 |
86 | A simple info alert with
87 | an example link . Give it a click
88 | if you like.
89 |
90 |
91 | A simple light alert with
92 | an example link . Give it a click
93 | if you like.
94 |
95 |
96 | A simple dark alert with
97 | an example link . Give it a click
98 | if you like.
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 | Vue Alert Additional content
108 |
109 |
110 |
111 | Alert can also incorporate supplementary components & elements
112 | like heading, paragraph, and divider.
113 |
114 |
115 |
116 | Well done!
117 |
118 | Aww yeah, you successfully read this important alert message.
119 | This example text is going to run a bit longer so that you can
120 | see how spacing within an alert works with this kind of content.
121 |
122 |
123 |
124 | Whenever you need to, be sure to use margin utilities to keep
125 | things nice and tidy.
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 | Vue Alert Dismissing
136 |
137 |
138 |
139 | Alerts can also be easily dismissed. Just add the
140 | dismissible prop.
141 |
142 |
143 |
144 | Go right ahead and click that dimiss over there
145 | on the right.
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
--------------------------------------------------------------------------------
/src/views/base/Placeholders.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 | Vue Placeholder
12 |
13 |
14 |
15 | In the example below, we take a typical card component and recreate
16 | it with placeholders applied to create a "loading card". Size and
17 | proportions are the same between the two.
18 |
19 |
20 |
21 |
22 |
23 |
24 | Card title
25 |
26 | Some quick example text to build on the card title and make
27 | up the bulk of the card's content.
28 |
29 | Go somewhere
30 |
31 |
32 |
33 |
43 | Placeholder
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 | Vue Placeholder
74 |
75 |
76 |
77 | Create placeholders with the
78 | <CPlaceholder> component and a grid column propx
79 | (e.g., :xs="6") to set the width. They can
80 | replace the text inside an element or be added as a modifier class
81 | to an existing component.
82 |
83 |
84 |
85 |
86 |
87 |
95 |
96 |
97 |
98 |
99 |
100 | Vue Placeholder Width
101 |
102 |
103 |
104 | You can change the width through grid column classes,
105 | width utilities, or inline styles.
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 | Vue Placeholder Color
117 |
118 |
119 |
120 | By default, the <CPlaceholder> uses
121 | currentColor. This can be overridden with a custom
122 | color or utility class.
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 | Vue Placeholder Sizing
141 |
142 |
143 |
144 | The size of <CPlaceholder>s are based on the
145 | typographic style of the parent element. Customize them with
146 | size prop: lg, sm, or
147 | xs.
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 | Vue Placeholder Animation
160 |
161 |
162 |
163 | Animate placeholders with animation="glow" or
164 | animation="wave" to better convey the perception of
165 | something being actively loaded.
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
--------------------------------------------------------------------------------
/src/views/forms/FloatingLabels.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vue Floating labels
8 |
9 |
10 |
11 | Wrap a pair of <CFormInput> and
12 | <CFormLabel> elements in
13 | CFormFloating to enable floating labels with textual
14 | form fields. A placeholder is required on each
15 | <CFormInput> as our method of CSS-only floating
16 | labels uses the :placeholder-shown pseudo-element. Also
17 | note that the <CFormInput> must come first so we
18 | can utilize a sibling selector (e.g., ~).
19 |
20 |
21 |
22 |
27 | Email address
28 |
29 |
30 |
35 | Password
36 |
37 |
38 |
39 | When there's a value already defined,
40 | <CFormLabel>
41 | s will automatically adjust to their floated position.
42 |
43 |
44 |
45 |
51 | Input with value
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 | Vue Floating labels Textareas
61 |
62 |
63 |
64 | By default, <CFormTextarea>s will be the same
65 | height as <CFormInput>s.
66 |
67 |
68 |
69 |
73 | Comments
74 |
75 |
76 |
77 | To set a custom height on your <CFormTextarea;>,
78 | do not use the rows attribute. Instead, set an explicit
79 | height (either inline or via custom CSS).
80 |
81 |
82 |
83 |
88 | Comments
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 | Vue Floating labels Selects
98 |
99 |
100 |
101 | Other than <CFormInput>, floating labels are only
102 | available on <CFormSelect>s. They work in the
103 | same way, but unlike <CFormInput>s, they'll
104 | always show the <CFormLabel> in its floated
105 | state.
106 |
107 | Selects with size and multiple are not
108 | supported.
109 |
110 |
111 |
112 |
113 |
117 | Open this select menu
118 | One
119 | Two
120 | Three
121 |
122 | Works with selects
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 | Vue Floating labels Layout
132 |
133 |
134 |
135 | When working with the CoreUI for Bootstrap grid system, be sure to
136 | place form elements within column classes.
137 |
138 |
139 |
140 |
141 |
142 |
148 | Email address
149 |
150 |
151 |
152 |
153 |
157 | Open this select menu
158 | One
159 | Two
160 | Three
161 |
162 | Works with selects
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
--------------------------------------------------------------------------------
/src/views/base/Tabs.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vue Tabs
8 |
9 |
10 |
11 | The basic Vue tabs example uses the variant="tabs" props to
12 | generate a tabbed interface.
13 |
14 |
15 |
16 |
17 | Home
18 | Profile
19 | Contact
20 | Disabled
21 |
22 |
23 | Home tab content
24 | Profile tab content
25 | Contact tab content
26 | Disabled tab content
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 | Vue Tabs Unstyled
36 |
37 |
38 | If you don’t provide the variant prop, the component will default to a
39 | basic style.
40 |
41 |
42 |
43 |
44 | Home
45 | Profile
46 | Contact
47 | Disabled
48 |
49 |
50 | Home tab content
51 | Profile tab content
52 | Contact tab content
53 | Disabled tab content
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 | Vue Tabs Pills
63 |
64 |
65 | Take that same code, but use variant="pills" instead:
66 |
67 |
68 |
69 |
70 | Home
71 | Profile
72 | Contact
73 | Disabled
74 |
75 |
76 |
77 | Home tab content
78 |
79 |
80 | Profile tab content
81 |
82 |
83 | Contact tab content
84 |
85 |
86 | Disabled tab content
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 | Vue Tabs Underline
97 |
98 |
99 | Take that same code, but use variant="underline" instead:
100 |
101 |
102 |
103 |
104 | Home
105 | Profile
106 | Contact
107 | Disabled
108 |
109 |
110 |
111 | Home tab content
112 |
113 |
114 | Profile tab content
115 |
116 |
117 | Contact tab content
118 |
119 |
120 | Disabled tab content
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 | Vue Tabs Underline border
131 |
132 |
133 | Take that same code, but use variant="underline-border" instead:
134 |
135 |
136 |
137 |
138 | Home
139 | Profile
140 | Contact
141 | Disabled
142 |
143 |
144 |
145 | Home tab content
146 |
147 |
148 | Profile tab content
149 |
150 |
151 | Contact tab content
152 |
153 |
154 | Disabled tab content
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
--------------------------------------------------------------------------------
/src/views/base/Carousels.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | Vue Carousels Slide only
14 |
15 |
16 |
17 | Here’s a carousel with slides
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 | Vue Carousels With controls
37 |
38 |
39 |
40 | Adding in the previous and next controls by
41 | controls property.
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 | Vue Carousels With indicators
61 |
62 |
63 |
64 | You can attach the indicators to the carousel, lengthwise the
65 | controls, too.
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 | Vue Carousels With captions
85 |
86 |
87 |
88 | You can add captions to slides with the
89 | <CCarouselCaption> element within any
90 | <CCarouselItem>. They can be immediately hidden
91 | on smaller viewports, as shown below, with optional
92 | display utilities . We hide them with .d-none and draw them back on
95 | medium-sized devices with .d-md-block.
96 |
97 |
98 |
99 |
100 |
101 |
102 | First slide label
103 |
104 | Some representative placeholder content for the first slide.
105 |
106 |
107 |
108 |
109 |
110 |
111 | First slide label
112 |
113 | Some representative placeholder content for the first slide.
114 |
115 |
116 |
117 |
118 |
119 |
120 | First slide label
121 |
122 | Some representative placeholder content for the first slide.
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 | Vue Carousels Crossfade
133 |
134 |
135 |
136 | Add transition="crossfade" to your carousel to
137 | animate slides with a fade transition instead of a slide.
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 | Vue Carousels Dark variant
157 |
158 |
159 |
160 | Add dark property to the CCarousel for
161 | darker controls, indicators, and captions. Controls have been
162 | inverted from their default white fill with the
163 | filter CSS property. Captions and controls have
164 | additional Sass variables that customize the color and
165 | background-color.
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 |
--------------------------------------------------------------------------------
/src/views/base/Paginations.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vue Pagination
8 |
9 |
10 |
11 | We use a large block of connected links for our pagination, making
12 | links hard to miss and easily scalable—all while providing large hit
13 | areas. Pagination is built with list HTML elements so screen readers
14 | can announce the number of available links. Use a wrapping
15 | <nav> element to identify it as a navigation
16 | section to screen readers and other assistive technologies.
17 |
18 |
19 | In addition, as pages likely have more than one such navigation
20 | section, it's advisable to provide a descriptive
21 | aria-label for the <nav> to reflect
22 | its purpose. For example, if the pagination component is used to
23 | navigate between a set of search results, an appropriate label could
24 | be aria-label="Search results pages".
25 |
26 |
27 |
28 | Previous
29 | 1
30 | 2
31 | 3
32 | Next
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 | Vue Pagination Working with icons
42 |
43 |
44 |
45 | Looking to use an icon or symbol in place of text for some
46 | pagination links? Be sure to provide proper screen reader support
47 | with aria attributes.
48 |
49 |
50 |
51 |
52 | «
53 |
54 | 1
55 | 2
56 | 3
57 |
58 | »
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 | Vue Pagination
69 | Disabled and active states
70 |
71 |
72 |
73 | Pagination links are customizable for different circumstances. Use
74 | disabled for links that appear un-clickable and
75 | .active to indicate the current page.
76 |
77 |
78 | While the disabled prop uses
79 | pointer-events: none to try to disable the
80 | link functionality of <a>s, that CSS property is
81 | not yet standardized and doesn'taccount for keyboard navigation.
82 | As such, we always add tabindex="-1" on
83 | disabled links and use custom JavaScript to fully disable their
84 | functionality.
85 |
86 |
89 |
90 |
91 | «
92 |
93 | 1
94 | 2
95 | 3
96 |
97 | »
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 | Vue Pagination Sizing
108 |
109 |
110 |
111 | Fancy larger or smaller pagination? Add
112 | size="lg" or size="sm" for
113 | additional sizes.
114 |
115 |
116 |
117 | Previous
118 | 1
119 | 2
120 | 3
121 | Next
122 |
123 |
124 |
125 |
126 | Previous
127 | 1
128 | 2
129 | 3
130 | Next
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 | Vue Pagination Alignment
140 |
141 |
142 |
143 | Change the alignment of pagination components with
144 | flexbox utilities .
147 |
148 |
149 |
153 | Previous
154 | 1
155 | 2
156 | 3
157 | Next
158 |
159 |
160 |
161 |
165 | Previous
166 | 1
167 | 2
168 | 3
169 | Next
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
--------------------------------------------------------------------------------
/src/views/base/Progress.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vue Progress Basic example
8 |
9 |
10 |
11 | Progress components are built with two HTML elements, some CSS to
12 | set the width, and a few attributes. We don'tuse
13 |
16 | the HTML5 <progress> element
17 |
18 | , ensuring you can stack progress bars, animate them, and place text
19 | labels over them.
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 | Vue Progress Labels
45 |
46 |
47 |
48 | Add labels to your progress bars by placing text within the
49 | <CProgressBar>.
50 |
51 |
52 |
53 | 25%
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 | Vue Progress Height
63 |
64 |
65 |
66 | We only set a height value on the
67 | <CProgress>, so if you change that value the
68 | inner <CProgressBar> will automatically resize
69 | accordingly.
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 | Vue Progress Backgrounds
86 |
87 |
88 |
89 | Use color prop to change the appearance of individual
90 | progress bars.
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 | Vue Progress Multiple bars
113 |
114 |
115 |
116 | Include multiple progress bars in a progress component if you need.
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 | Vue Progress Striped
132 |
133 |
134 |
135 | Add variant="striped" to any
136 | <CProgressBar> to apply a stripe via CSS gradient
137 | over the progress bar's background color.
138 |
139 |
140 |
141 |
146 |
147 |
148 |
153 |
154 |
155 |
160 |
161 |
162 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 | Vue Progress Animated stripes
176 |
177 |
178 |
179 | The striped gradient can also be animated. Add
180 | animated property to
181 | <CProgressBar> to animate the stripes right to
182 | left via CSS3 animations.
183 |
184 |
185 |
186 |
192 |
193 |
194 |
200 |
201 |
202 |
208 |
209 |
210 |
216 |
217 |
218 |
219 |
220 |
221 |
222 |
223 |
--------------------------------------------------------------------------------
/.github/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing to CoreUI
2 |
3 | Looking to contribute something to CoreUI? **Here's how you can help.**
4 |
5 | Please take a moment to review this document in order to make the contribution process easy and effective for everyone involved.
6 |
7 | Following these guidelines helps to communicate that you respect the time of the developers managing and developing this open source project. In return, they should reciprocate that respect in addressing your issue or assessing
8 | patches and features.
9 |
10 | ## Using the issue tracker
11 |
12 | The [issue tracker](https://github.com/coreui/coreui-free-vue-admin-template/issues) is
13 | the preferred channel for [bug reports](#bug-reports), [features requests](#feature-requests)
14 | and [submitting pull requests](#pull-requests), but please respect the following
15 | restrictions:
16 |
17 | * Please **do not** use the issue tracker for personal support requests.
18 |
19 | * Please **do not** post comments consisting solely of "+1" or ":thumbsup:".
20 | Use [GitHub's "vueions" feature](https://github.com/blog/2119-add-vueions-to-pull-requests-issues-and-comments)
21 | instead.
22 |
23 | ## Bug reports
24 |
25 | A bug is a _demonstrable problem_ that is caused by the code in the repository.
26 | Good bug reports are extremely helpful, so thanks!
27 |
28 | Guidelines for bug reports:
29 |
30 | 0. **Validate and lint your code** — to ensure your problem isn't caused by a simple error in your own code.
31 |
32 | 1. **Use the GitHub issue search** — check if the issue has already been reported.
33 |
34 | 2. **Check if the issue has been fixed** — try to reproduce it using the latest `master` or development branch in the repository.
35 |
36 | 3. **Isolate the problem** — ideally create a [reduced test case](https://css-tricks.com/reduced-test-cases/) and a live example. [This JS Bin](http://jsbin.com/lefey/1/edit?html,output) is a helpful template.
37 |
38 |
39 | A good bug report shouldn't leave others needing to chase you up for more
40 | information. Please try to be as detailed as possible in your report. What is
41 | your environment? What steps will reproduce the issue? What browser(s) and OS
42 | experience the problem? Do other browsers show the bug differently? What
43 | would you expect to be the outcome? All these details will help people to fix
44 | any potential bugs.
45 |
46 | Example:
47 |
48 | > Short and descriptive example bug report title
49 | >
50 | > A summary of the issue and the browser/OS environment in which it occurs. If
51 | > suitable, include the steps required to reproduce the bug.
52 | >
53 | > 1. This is the first step
54 | > 2. This is the second step
55 | > 3. Further steps, etc.
56 | >
57 | > `` - a link to the reduced test case
58 | >
59 | > Any other information you want to share that is relevant to the issue being
60 | > reported. This might include the lines of code that you have identified as
61 | > causing the bug, and potential solutions (and your opinions on their
62 | > merits).
63 |
64 | ## Feature requests
65 |
66 | Feature requests are welcome. Before opening a feature request, please take a
67 | moment to find out whether your idea fits with the scope and aims of the
68 | project. It's up to *you* to make a strong case to convince the project's
69 | developers of the merits of this feature. Please provide as much detail
70 | and context as possible.
71 |
72 |
73 | ## Pull requests
74 |
75 | Good pull requests—patches, improvements, new features—are a fantastic
76 | help. They should remain focused in scope and avoid containing unrelated
77 | commits.
78 |
79 | **Please ask first** before embarking on any significant pull request (e.g.
80 | implementing features, refactoring code, porting to a different language),
81 | otherwise you risk spending a lot of time working on something that the
82 | project's developers might not want to merge into the project.
83 |
84 | Adhering to the following process is the best way to get your work
85 | included in the project:
86 |
87 | 1. [Fork](https://help.github.com/fork-a-repo/) the project, clone your fork,
88 | and configure the remotes:
89 |
90 | ```bash
91 | # Clone your fork of the repo into the current directory
92 | git clone https://github.com//coreui-vue.git
93 | # Navigate to the newly cloned directory
94 | cd coreui
95 | # Assign the original repo to a remote called "upstream"
96 | git remote add upstream https://github.com/coreui/coreui-vue.git
97 | ```
98 |
99 | 2. If you cloned a while ago, get the latest changes from upstream:
100 |
101 | ```bash
102 | git checkout master
103 | git pull upstream master
104 | ```
105 |
106 | 3. Create a new topic branch (off the main project development branch) to
107 | contain your feature, change, or fix:
108 |
109 | ```bash
110 | git checkout -b
111 | ```
112 |
113 | 4. Commit your changes in logical chunks. Please adhere to these [git commit
114 | message guidelines](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html)
115 | or your code is unlikely to be merged into the main project. Use Git's
116 | [interactive rebase](https://help.github.com/articles/interactive-rebase)
117 | feature to tidy up your commits before making them public.
118 |
119 | 5. Locally merge (or rebase) the upstream development branch into your topic branch:
120 |
121 | ```bash
122 | git pull [--rebase] upstream master
123 | ```
124 |
125 | 6. Push your topic branch up to your fork:
126 |
127 | ```bash
128 | git push origin
129 | ```
130 |
131 | 7. [Open a Pull Request](https://help.github.com/articles/using-pull-requests/)
132 | with a clear title and description against the `master` branch.
133 |
134 | **IMPORTANT**: By submitting a patch, you agree to allow the project owners to
135 | license your work under the terms of the [MIT License](LICENSE).
136 |
137 | ### Semantic Git commit messages
138 |
139 | Inspired by Sparkbox's awesome article on
140 | [semantic commit messages](http://seesparkbox.com/foundry/semantic_commit_messages).
141 | Please use following commit message format.
142 |
143 | * chore (updating npm tasks etc; no production code change) -> ```git test -m 'chore: commit-message-here'```
144 | * docs (changes to documentation) -> ```git commit -m 'docs: commit-message-here'```
145 | * feat (new feature) -> ```git commit -m 'feat: commit-message-here'```
146 | * fix (bug fix) -> ```git commit -m 'fix: commit-message-here'```
147 | * refactor (refactoring production code) -> ```git commit -m 'refactor: commit-message-here'```
148 | * style (formatting, missing semi colons, etc; no code change) -> ```git commit -m 'style: commit-message-here'```
149 | * test (adding missing tests, refactoring tests; no production code change) -> ```git test -m 'refactor: commit-message-here'```
150 |
151 | ## Code guidelines
152 |
153 | ### HTML
154 |
155 | [Adhere to the Code Guide.](http://codeguide.co/#html)
156 |
157 | - Use tags and elements appropriate for an HTML5 doctype (e.g., self-closing tags).
158 | - Use CDNs and HTTPS for third-party JS when possible. We don't use protocol-relative URLs in this case because they break when viewing the page locally via `file://`.
159 | - Use [WAI-ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) attributes in documentation examples to promote accessibility.
160 |
161 | ### CSS
162 |
163 | [Adhere to the Code Guide.](http://codeguide.co/#css)
164 |
165 | - When feasible, default color palettes should comply with [WCAG color contrast guidelines](http://www.w3.org/TR/WCAG20/#visual-audio-contrast).
166 | - Except in rare cases, don't remove default `:focus` styles (via e.g. `outline: none;`) without providing alternative styles. See [this A11Y Project post](http://a11yproject.com/posts/never-remove-css-outlines) for more details.
167 |
168 | ### JS
169 |
170 | - No semicolons (in client-side JS)
171 | - 2 spaces (no tabs)
172 | - strict mode
173 | - "Attractive"
174 | - Don't use [jQuery event alias convenience methods](https://github.com/jquery/jquery/blob/master/src/event/alias.js) (such as `$().focus()`). Instead, use [`$().trigger(eventType, ...)`](http://api.jquery.com/trigger/) or [`$().on(eventType, ...)`](http://api.jquery.com/on/), depending on whether you're firing an event or listening for an event. (For example, `$().trigger('focus')` or `$().on('focus', function (event) { /* handle focus event */ })`) We do this to be compatible with custom builds of jQuery where the event aliases module has been excluded.
175 |
176 | ## License
177 |
178 | By contributing your code, you agree to license your contribution under the [MIT License](LICENSE).
179 |
--------------------------------------------------------------------------------
/src/views/forms/FormControl.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vue Form Control
8 |
9 |
10 |
11 |
12 |
13 | Email address
16 |
21 |
22 |
23 | Example textarea
26 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 | Vue Form Control Sizing
40 |
41 |
42 |
43 | Set heights using size property like
44 | size="lg" and size="sm".
45 |
46 |
47 |
53 |
54 |
59 |
60 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 | Vue Form Control Disabled
74 |
75 |
76 |
77 | Add the disabled boolean attribute on an input to give
78 | it a grayed out appearance and remove pointer events.
79 |
80 |
81 |
87 |
88 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 | Vue Form Control Readonly
104 |
105 |
106 |
107 | Add the readonly boolean attribute on an input to
108 | prevent modification of the input's value. Read-only inputs
109 | appear lighter (just like disabled inputs), but retain the standard
110 | cursor.
111 |
112 |
113 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 | Vue Form Control Readonly plain text
127 |
128 |
129 |
130 | If you want to have <input readonly> elements in
131 | your form styled as plain text, use the
132 | plain-text boolean property to remove the default form
133 | field styling and preserve the correct margin and padding.
134 |
135 |
136 |
137 |
138 | Email
139 |
140 |
141 |
148 |
149 |
150 |
151 |
152 | Password
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 | Email
164 |
165 |
172 |
173 |
174 |
175 | Password
176 |
177 |
182 |
183 |
184 | Confirm identity
185 |
186 |
187 |
188 |
189 |
190 |
191 |
192 |
193 |
194 | Vue Form Control File input
195 |
196 |
197 |
198 |
199 | Default file input example
200 |
201 |
202 |
203 | Multiple files input example
206 |
207 |
208 |
209 | Disabled file input example
212 |
213 |
214 |
215 | Small file input example
216 |
217 |
218 |
219 | Large file input example
220 |
221 |
222 |
223 |
224 |
225 |
226 |
227 |
228 |
229 | Vue Form Control Color
230 |
231 |
232 |
233 | Color picker
234 |
240 |
241 |
242 |
243 |
244 |
245 |
246 |
--------------------------------------------------------------------------------
/src/views/notifications/Toasts.vue:
--------------------------------------------------------------------------------
1 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | Vue Toast Basic
18 |
19 |
20 | Toasts are as flexible as you need and have very little required markup. At a minimum,
21 | we require a single element to contain your “toasted” content and strongly encourage a
22 | dismiss button.
23 |
24 |
25 |
26 |
27 |
36 |
37 |
38 | CoreUI for Vue.js
39 | 7 min ago
40 |
41 | Hello, world! This is a toast message.
42 |
43 |
44 |
45 | Send a toast
46 |
47 |
48 |
49 | {{ toast.title }}
50 | 7 min ago
51 |
52 |
53 | {{ toast.content }}
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 | Vue Toast Translucent
64 |
65 |
66 | Toasts are slightly translucent to blend in with what's below them.
67 |
68 |
69 |
70 |
71 |
80 |
81 |
82 | CoreUI for Vue.js
83 | 7 min ago
84 |
85 | Hello, world! This is a toast message.
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 | Vue Toast Stacking
94 |
95 |
96 | You can stack toasts by wrapping them in a toast container, which will vertically add
97 | some spacing.
98 |
99 |
100 |
101 |
102 |
103 |
112 |
113 |
114 | CoreUI for Vue.js
115 | 7 min ago
116 |
117 | Hello, world! This is a toast message.
118 |
119 |
120 |
121 |
130 |
131 |
132 | CoreUI for Vue.js
133 | 7 min ago
134 |
135 | Hello, world! This is a toast message.
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 | Vue Toast Custom content
145 |
146 |
147 | Customize your toasts by removing sub-components, tweaking them with
148 | utilities , or by adding your own
149 | markup. Here we've created a simpler toast by removing the default
150 | <CToastHeader>, adding a custom hide icon from
151 | CoreUI Icons , and using some
152 | flexbox utilities to adjust the
153 | layout.
154 |
155 |
156 |
157 |
158 | Hello, world! This is a toast message.
159 |
160 |
161 |
162 |
163 |
164 | Alternatively, you can also add additional controls and components to toasts.
165 |
166 |
167 |
168 |
169 | Hello, world! This is a toast message.
170 |
171 | Take action
172 | Close
175 |
176 |
177 |
178 |
179 |
180 |
181 |
182 |
183 |
184 | Vue Toast Custom content
185 |
186 |
187 | Building on the above example, you can create different toast color schemes with our
188 | color and
189 | background utilities. Here
190 | we've set color="primary" and added
191 | .text-white class to the <Ctoast>, and then set
192 | white property to our close button. For a crisp edge, we remove the default
193 | border with .border-0.
194 |
195 |
196 |
202 |
203 | Hello, world! This is a toast message.
204 |
205 |
206 |
207 |
208 |
209 |
210 |
211 |
212 |
213 |
--------------------------------------------------------------------------------
/src/views/theme/Typography.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Headings
6 |
7 |
8 | Documentation and examples for Bootstrap typography, including
9 | global settings, headings, body text, lists, and more.
10 |
11 |
12 |
13 |
14 | Heading
15 | Example
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | <h1></h1>
24 |
25 |
26 |
27 | h1. Bootstrap heading
30 |
31 |
32 |
33 |
34 |
35 | <h2></h2>
36 |
37 |
38 |
39 | h2. Bootstrap heading
42 |
43 |
44 |
45 |
46 |
47 | <h3></h3>
48 |
49 |
50 |
51 | h3. Bootstrap heading
54 |
55 |
56 |
57 |
58 |
59 | <h4></h4>
60 |
61 |
62 |
63 | h4. Bootstrap heading
66 |
67 |
68 |
69 |
70 |
71 | <h5></h5>
72 |
73 |
74 |
75 | h5. Bootstrap heading
78 |
79 |
80 |
81 |
82 |
83 | <h6></h6>
84 |
85 |
86 |
87 | h6. Bootstrap heading
90 |
91 |
92 |
93 |
94 |
95 |
96 | Headings
97 |
98 |
99 | .h1 through
100 | .h6
101 | classes are also available, for when you want to match the font
102 | styling of a heading but cannot use the associated HTML element.
103 |
104 |
105 |
h1. Bootstrap heading
106 |
h2. Bootstrap heading
107 |
h3. Bootstrap heading
108 |
h4. Bootstrap heading
109 |
h5. Bootstrap heading
110 |
h6. Bootstrap heading
111 |
112 |
113 |
114 |
115 | Display headings
116 |
117 |
118 | Traditional heading elements are designed to work best in the meat
119 | of your page content. When you need a heading to stand out, consider
120 | using a display heading —a larger, slightly more
121 | opinionated heading style.
122 |
123 |
124 |
125 |
126 |
127 | Display 1
130 |
131 |
132 | Display 2
135 |
136 |
137 | Display 3
140 |
141 |
142 | Display 4
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 | Inline text elements
153 |
154 |
155 | Traditional heading elements are designed to work best in the meat
156 | of your page content. When you need a heading to stand out, consider
157 | using a display heading —a larger, slightly more
158 | opinionated heading style.
159 |
160 |
161 |
You can use the mark tag to highlight text.
162 |
163 |
164 | This line of text is meant to be treated as deleted text.
165 |
166 |
167 |
168 |
169 | This line of text is meant to be treated as no longer accurate.
170 |
171 |
172 |
173 |
174 | This line of text is meant to be treated as an addition to the
175 | document.
176 |
177 |
178 |
This line of text will render as underlined
179 |
180 |
181 | This line of text is meant to be treated as fine print.
182 |
183 |
184 |
185 | This line rendered as bold text.
186 |
187 |
This line rendered as italicized text.
188 |
189 |
190 |
191 |
192 | Description list alignment
193 |
194 |
195 | Align terms and descriptions horizontally by using our grid system’s
196 | predefined classes (or semantic mixins). For longer terms, you can
197 | optionally add a
198 | .text-truncate
199 | class to truncate the text with an ellipsis.
200 |
201 |
202 |
203 | Description lists
204 |
205 | A description list is perfect for defining terms.
206 |
207 |
208 | Euismod
209 |
210 |
211 | Vestibulum id ligula porta felis euismod semper eget lacinia
212 | odio sem nec elit.
213 |
214 | Donec id elit non mi porta gravida at eget metus.
215 |
216 |
217 | Malesuada porta
218 |
219 | Etiam porta sem malesuada magna mollis euismod.
220 |
221 |
222 |
223 | Truncated term is truncated
224 |
225 |
226 | Fusce dapibus, tellus ac cursus commodo, tortor mauris
227 | condimentum nibh, ut fermentum massa justo sit amet risus.
228 |
229 |
230 | Nesting
231 |
232 |
233 | Nested definition list
234 |
235 | Aenean posuere, tortor sed cursus feugiat, nunc augue nunc.
236 |
237 |
238 |
239 |
240 |
241 |
242 |
243 |
244 |
245 |
246 |
--------------------------------------------------------------------------------
/src/views/base/Accordion.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vue Accordion
8 |
9 |
10 |
11 | Click the accordions below to expand/collapse the accordion content.
12 |
13 |
14 |
15 |
16 | Accordion Item #1
17 |
18 | This is the first item's accordion body. It
19 | is hidden by default, until the collapse plugin adds the
20 | appropriate classes that we use to style each element. These
21 | classes control the overall appearance, as well as the showing
22 | and hiding via CSS transitions. You can modify any of this
23 | with custom CSS or overriding our default variables. It's also
24 | worth noting that just about any HTML can go within the
25 | .accordion-body, though the transition does limit
26 | overflow.
27 |
28 |
29 |
30 | Accordion Item #2
31 |
32 | This is the second item's accordion body. It
33 | is hidden by default, until the collapse plugin adds the
34 | appropriate classes that we use to style each element. These
35 | classes control the overall appearance, as well as the showing
36 | and hiding via CSS transitions. You can modify any of this
37 | with custom CSS or overriding our default variables. It's also
38 | worth noting that just about any HTML can go within the
39 | .accordion-body, though the transition does limit
40 | overflow.
41 |
42 |
43 |
44 | Accordion Item #3
45 |
46 | This is the third item's accordion body. It
47 | is hidden by default, until the collapse plugin adds the
48 | appropriate classes that we use to style each element. These
49 | classes control the overall appearance, as well as the showing
50 | and hiding via CSS transitions. You can modify any of this
51 | with custom CSS or overriding our default variables. It's also
52 | worth noting that just about any HTML can go within the
53 | .accordion-body, though the transition does limit
54 | overflow.
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 | Vue Accordion Flush
64 |
65 |
66 |
67 | Add flush to remove the default
68 | background-color, some borders, and some rounded
69 | corners to render accordions edge-to-edge with their parent
70 | container.
71 |
72 |
73 |
74 |
75 | Accordion Item #1
76 |
77 | This is the first item's accordion body. It
78 | is hidden by default, until the collapse plugin adds the
79 | appropriate classes that we use to style each element. These
80 | classes control the overall appearance, as well as the showing
81 | and hiding via CSS transitions. You can modify any of this
82 | with custom CSS or overriding our default variables. It's also
83 | worth noting that just about any HTML can go within the
84 | .accordion-body, though the transition does limit
85 | overflow.
86 |
87 |
88 |
89 | Accordion Item #2
90 |
91 | This is the second item's accordion body. It
92 | is hidden by default, until the collapse plugin adds the
93 | appropriate classes that we use to style each element. These
94 | classes control the overall appearance, as well as the showing
95 | and hiding via CSS transitions. You can modify any of this
96 | with custom CSS or overriding our default variables. It's also
97 | worth noting that just about any HTML can go within the
98 | .accordion-body, though the transition does limit
99 | overflow.
100 |
101 |
102 |
103 | Accordion Item #3
104 |
105 | This is the third item's accordion body. It
106 | is hidden by default, until the collapse plugin adds the
107 | appropriate classes that we use to style each element. These
108 | classes control the overall appearance, as well as the showing
109 | and hiding via CSS transitions. You can modify any of this
110 | with custom CSS or overriding our default variables. It's also
111 | worth noting that just about any HTML can go within the
112 | .accordion-body, though the transition does limit
113 | overflow.
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 | Vue Accordion Always open
123 |
124 |
125 |
126 | Add always-open property to make accordion items stay
127 | open when another item is opened.
128 |
129 |
130 |
131 |
132 | Accordion Item #1
133 |
134 | This is the first item's accordion body. It
135 | is hidden by default, until the collapse plugin adds the
136 | appropriate classes that we use to style each element. These
137 | classes control the overall appearance, as well as the showing
138 | and hiding via CSS transitions. You can modify any of this
139 | with custom CSS or overriding our default variables. It's also
140 | worth noting that just about any HTML can go within the
141 | .accordion-body, though the transition does limit
142 | overflow.
143 |
144 |
145 |
146 | Accordion Item #2
147 |
148 | This is the second item's accordion body. It
149 | is hidden by default, until the collapse plugin adds the
150 | appropriate classes that we use to style each element. These
151 | classes control the overall appearance, as well as the showing
152 | and hiding via CSS transitions. You can modify any of this
153 | with custom CSS or overriding our default variables. It's also
154 | worth noting that just about any HTML can go within the
155 | .accordion-body, though the transition does limit
156 | overflow.
157 |
158 |
159 |
160 | Accordion Item #3
161 |
162 | This is the third item's accordion body. It
163 | is hidden by default, until the collapse plugin adds the
164 | appropriate classes that we use to style each element. These
165 | classes control the overall appearance, as well as the showing
166 | and hiding via CSS transitions. You can modify any of this
167 | with custom CSS or overriding our default variables. It's also
168 | worth noting that just about any HTML can go within the
169 | .accordion-body, though the transition does limit
170 | overflow.
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
--------------------------------------------------------------------------------