sean/manja_ui_dev
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Merge branch 'dev'

Browse Source
This commit is contained in:
Łukasz Holeczek
2021-11-01 00:03:55 +01:00
parent a11e5dfdfa 863efa04dc
commit 0712ea9524
45 changed files with 1009 additions and 1340 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.eslintignore
-5
View File
@@ -1,8 +1,3 @@
node_modules/*
./node_modules/**
**/node_modules/**
/dist/**
.eslintrc.js
/Users/lukaszholeczek/CoreUI/@coreui/icons-vue/**/*
/Users/lukaszholeczek/CoreUI/@coreui/icons-vue/
**/*
babel.config.js
+1 -1
View File
@@ -1,3 +1,3 @@
module.exports = {
presets: ['@vue/cli-plugin-babel/preset']
presets: ['@vue/cli-plugin-babel/preset'],
}
package.json
+3 -4
View File
@@ -1,6 +1,6 @@
{
"name": "@coreui/coreui-free-vue-admin-template",
"version": "4.0.0",
"version": "4.0.1",
"description": "CoreUI Free Vue Admin Template",
"bugs": {
"url": "https://github.com/coreui/coreui-free-vue-admin-template/issues"
@@ -27,7 +27,7 @@
"@coreui/icons": "^2.1.0",
"@coreui/icons-vue": "2.0.0",
"@coreui/utils": "^1.3.1",
"@coreui/vue": "^4.0.0",
"@coreui/vue": "^4.0.1",
"@coreui/vue-chartjs": "2.0.0",
"core-js": "^3.19.0",
"vue": "^3.2.19",
@@ -36,7 +36,7 @@
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.14",
"@vue/cli-plugin-e2e-nightwatch": "~4.5.14",
"@vue/cli-plugin-e2e-cypress": "~4.5.14",
"@vue/cli-plugin-eslint": "~4.5.14",
"@vue/cli-plugin-router": "~4.5.14",
"@vue/cli-plugin-unit-jest": "~4.5.14",
@@ -49,7 +49,6 @@
"eslint": "^7.32.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^7.20.0",
"geckodriver": "^2.0.4",
"prettier": "^2.4.1",
"sass": "^1.43.3",
"sass-loader": "^10.2.0",
public/index.html
+1 -1
View File
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<!--
* CoreUI Vue.js Admin Template
* @version v4.0.0
* @version v4.0.1
* @link https://coreui.io/vue/
* Copyright (c) 2021 creativeLabs Łukasz Holeczek
* License (https://coreui.io/pro/license)
src/App.vue
+2 -3
View File
@@ -3,7 +3,6 @@
</template>
<style lang="scss">
// Import Main styles for this application
@import 'styles/style';
// Import Main styles for this application
@import 'styles/style';
</style>
src/assets/icons/index.js
+10 -10
View File
@@ -22,9 +22,9 @@ import {
cibCcStripe,
cibCcPaypal,
cibCcApplePay,
cibCcAmex
} from "@coreui/icons";
import { cifUs, cifBr, cifIn, cifFr, cifEs, cifPl } from "@coreui/icons";
cibCcAmex,
} from '@coreui/icons'
import { cifUs, cifBr, cifIn, cifFr, cifEs, cifPl } from '@coreui/icons'
import {
cilArrowBottom,
cilArrowRight,
@@ -76,8 +76,8 @@ import {
cilUser,
cilUserFemale,
cilUserFollow,
cilXCircle
} from "@coreui/icons";
cilXCircle,
} from '@coreui/icons'
export const iconsSet = Object.assign(
{},
@@ -132,7 +132,7 @@ export const iconsSet = Object.assign(
cilUser,
cilUserFemale,
cilUserFollow,
cilXCircle
cilXCircle,
},
{
cifUs,
@@ -140,7 +140,7 @@ export const iconsSet = Object.assign(
cifIn,
cifFr,
cifEs,
cifPl
cifPl,
},
{
cibFacebook,
@@ -166,6 +166,6 @@ export const iconsSet = Object.assign(
cibCcStripe,
cibCcPaypal,
cibCcApplePay,
cibCcAmex
}
);
cibCcAmex,
},
)
src/components/AppBreadcrumb.vue
+1 -1
View File
@@ -2,9 +2,9 @@
<CBreadcrumb class="d-md-down-none me-auto mb-0">
<CBreadcrumbItem
v-for="item in breadcrumbs"
:key="item"
:href="item.active ? '' : item.path"
:active="item.active"
:key="item"
>
{{ item.name }}
</CBreadcrumbItem>
src/components/AppHeader.vue
-1
View File
@@ -55,7 +55,6 @@ export default {
AppHeaderDropdownAccnt,
},
setup() {
return {
logo,
}
src/components/AppSidebar.vue
+2 -2
View File
@@ -13,12 +13,12 @@
>
<CSidebarBrand>
<CIcon
customClassName="sidebar-brand-full"
custom-class-name="sidebar-brand-full"
:icon="logoNegative"
:height="35"
/>
<CIcon
customClassName="sidebar-brand-narrow"
custom-class-name="sidebar-brand-narrow"
:icon="sygnet"
:height="35"
/>
src/components/AppSidebarNav.js
+29 -21
View File
@@ -1,39 +1,45 @@
import { defineComponent, h, onMounted, ref, resolveComponent } from 'vue'
import { RouterLink, useRoute } from 'vue-router'
import { CBadge, CSidebarNav, CNavItem, CNavGroup, CNavTitle } from '@coreui/vue'
import {
CBadge,
CSidebarNav,
CNavItem,
CNavGroup,
CNavTitle,
} from '@coreui/vue'
import nav from '@/_nav.js'
const normalizePath = (path) =>
decodeURI(path)
.replace(/#.*$/, '')
.replace(/(index)?\.(html)$/, '')
decodeURI(path)
.replace(/#.*$/, '')
.replace(/(index)?\.(html)$/, '')
const isActiveLink = (route, link) => {
if (link === undefined) {
return false
}
if (link === undefined) {
return false
}
if (route.hash === link) {
return true
}
if (route.hash === link) {
return true
}
const currentPath = normalizePath(route.path)
const targetPath = normalizePath(link)
const currentPath = normalizePath(route.path)
const targetPath = normalizePath(link)
return currentPath === targetPath
return currentPath === targetPath
}
const isActiveItem = (route, item) => {
if (isActiveLink(route, item.to)) {
return true
}
if (isActiveLink(route, item.to)) {
return true
}
if (item.items) {
return item.items.some((child) => isActiveItem(route, child))
}
if (item.items) {
return item.items.some((child) => isActiveItem(route, child))
}
return false
return false
}
const AppSidebarNav = defineComponent({
@@ -56,7 +62,9 @@ const AppSidebarNav = defineComponent({
return h(
CNavGroup,
{
...firstRender.value && { visible: item.items.some((child) => isActiveItem(route, child))}
...(firstRender.value && {
visible: item.items.some((child) => isActiveItem(route, child)),
}),
},
{
togglerContent: () => [
src/components/DocsCallout.vue
+10 -6
View File
@@ -1,16 +1,20 @@
<template>
<CCallout color="info" class="bg-white">
{{content
{{
content
? content
: `A Vue ${name} component ${
plural ? 'have' : 'has'
} been created as a native Vue.js version
of Bootstrap ${name}. ${name} ${plural ? 'are' : 'is'} delivered with some new features,
variants, and unique design that matches CoreUI Design System requirements.`}}
of Bootstrap ${name}. ${name} ${
plural ? 'are' : 'is'
} delivered with some new features,
variants, and unique design that matches CoreUI Design System requirements.`
}}
<br />
<br />
For more information please visit our official
<CLink :href="href" target="_blank">
<CLink :href="url" target="_blank">
documentation of CoreUI Components Library for Vue.js
</CLink>
.
@@ -40,10 +44,10 @@ export default {
plural: Boolean,
},
setup(props) {
const href = `https://coreui.io/vue/docs/${packageJson.config.coreui_library_short_version}/${props.href}`
const url = `https://coreui.io/vue/docs/${packageJson.config.coreui_library_short_version}/${props.url}`
return {
href,
url,
}
},
}
src/components/DocsExample.vue
+3 -3
View File
@@ -7,7 +7,7 @@
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink :href="href" target="_blank">
<CNavLink :href="url" target="_blank">
<CIcon icon="cil-code" class="me-2" />
Code
</CNavLink>
@@ -33,10 +33,10 @@ export default {
},
},
setup(props) {
const href = `https://coreui.io/vue/docs/${pkg.config.coreui_library_short_version}/${props.href}`
const url = `https://coreui.io/vue/docs/${pkg.config.coreui_library_short_version}/${props.href}`
return {
href,
url,
}
},
}
src/layouts/DefaultLayout.vue
+6 -6
View File
@@ -13,18 +13,18 @@
</div>
</template>
<script>
import { CContainer, CDropdown, CDropdownItem } from "@coreui/vue";
import AppFooter from "@/components/AppFooter.vue";
import AppHeader from "@/components/AppHeader.vue";
import AppSidebar from "@/components/AppSidebar.vue";
import { CContainer } from '@coreui/vue'
import AppFooter from '@/components/AppFooter.vue'
import AppHeader from '@/components/AppHeader.vue'
import AppSidebar from '@/components/AppSidebar.vue'
export default {
name: "DefaultLayout",
name: 'DefaultLayout',
components: {
AppFooter,
AppHeader,
AppSidebar,
CContainer,
},
};
}
</script>
src/router/index.js
+3 -3
View File
@@ -274,17 +274,17 @@ const routes = [
{
path: '500',
name: 'Page500',
component: () => import('@/views/pages/Page500')
component: () => import('@/views/pages/Page500'),
},
{
path: 'login',
name: 'Login',
component: () => import('@/views/pages/Login')
component: () => import('@/views/pages/Login'),
},
{
path: 'register',
name: 'Register',
component: () => import('@/views/pages/Register')
component: () => import('@/views/pages/Register'),
},
],
},
src/store/index.js
+1 -1
View File
@@ -14,7 +14,7 @@ export default createStore({
},
updateSidebarVisible(state, payload) {
state.sidebarVisible = payload.value
}
},
},
actions: {},
modules: {},
src/views/Dashboard.vue
+24 -8
View File
@@ -128,9 +128,15 @@
</CCol>
</CRow>
<hr class="mt-0" />
<div class="progress-group mb-4" v-for="item in progressGroupExample1" :key="item.title">
<div
v-for="item in progressGroupExample1"
:key="item.title"
class="progress-group mb-4"
>
<div class="progress-group-prepend">
<span class="text-medium-emphasis small">{{item.title}}</span>
<span class="text-medium-emphasis small">{{
item.title
}}</span>
</div>
<div class="progress-group-bars">
<CProgress thin color="info" :value="item.value1" />
@@ -168,11 +174,15 @@
</CCol>
</CRow>
<hr class="mt-0" />
<div class="progress-group" v-for="item in progressGroupExample2" :key="item.title">
<div
v-for="item in progressGroupExample2"
:key="item.title"
class="progress-group"
>
<div class="progress-group-header">
<CIcon :icon="item.icon" class="me-2" size="lg" />
<span class="title">{{item.title}}</span>
<span class="ms-auto fw-semibold">{{item.value}}%</span>
<span class="title">{{ item.title }}</span>
<span class="ms-auto fw-semibold">{{ item.value }}%</span>
</div>
<div class="progress-group-bars">
<CProgress thin :value="item.value" color="warning" />
@@ -181,13 +191,19 @@
<div class="mb-5"></div>
<div class="progress-group" v-for="item in progressGroupExample3" :key="item.title">
<div
v-for="item in progressGroupExample3"
:key="item.title"
class="progress-group"
>
<div class="progress-group-header">
<CIcon :icon="item.icon" class="me-2" size="lg" />
<span class="title">Organic Search</span>
<span class="ms-auto fw-semibold">
{{item.value}}
<span class="text-medium-emphasis small">({{item.percent}}%)</span>
{{ item.value }}
<span class="text-medium-emphasis small"
>({{ item.percent }}%)</span
>
</span>
</div>
<div class="progress-group-bars">
src/views/base/Accordion.vue
+8 -8
View File
@@ -14,7 +14,7 @@
</p>
<DocsExample href="components/accordion">
<CAccordion>
<CAccordionItem :itemKey="1">
<CAccordionItem :item-key="1">
<CAccordionHeader> Accordion Item #1 </CAccordionHeader>
<CAccordionBody>
<strong>This is the first item's accordion body.</strong> It
@@ -28,7 +28,7 @@
overflow.
</CAccordionBody>
</CAccordionItem>
<CAccordionItem :itemKey="2">
<CAccordionItem :item-key="2">
<CAccordionHeader> Accordion Item #2 </CAccordionHeader>
<CAccordionBody>
<strong>This is the second item's accordion body.</strong> It
@@ -42,7 +42,7 @@
overflow.
</CAccordionBody>
</CAccordionItem>
<CAccordionItem :itemKey="3">
<CAccordionItem :item-key="3">
<CAccordionHeader> Accordion Item #3 </CAccordionHeader>
<CAccordionBody>
<strong>This is the third item's accordion body.</strong> It
@@ -125,12 +125,12 @@
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Add <code>alwaysOpen</code> property to make accordion items stay
Add <code>always-open</code> property to make accordion items stay
open when another item is opened.
</p>
<DocsExample href="components/accordion#always-open">
<CAccordion :activeItemKey="2" alwaysOpen>
<CAccordionItem :itemKey="1">
<CAccordion :active-item-key="2" always-open>
<CAccordionItem :item-key="1">
<CAccordionHeader> Accordion Item #1 </CAccordionHeader>
<CAccordionBody>
<strong>This is the first item's accordion body.</strong> It
@@ -144,7 +144,7 @@
overflow.
</CAccordionBody>
</CAccordionItem>
<CAccordionItem :itemKey="2">
<CAccordionItem :item-key="2">
<CAccordionHeader> Accordion Item #2 </CAccordionHeader>
<CAccordionBody>
<strong>This is the second item's accordion body.</strong> It
@@ -158,7 +158,7 @@
overflow.
</CAccordionBody>
</CAccordionItem>
<CAccordionItem :itemKey="3">
<CAccordionItem :item-key="3">
<CAccordionHeader> Accordion Item #3 </CAccordionHeader>
<CAccordionBody>
<strong>This is the third item's accordion body.</strong> It
src/views/base/Cards.vue
+12 -15
View File
@@ -571,7 +571,7 @@
<CCard
class="mb-3"
:color="item.color"
:textColor="item.textColor"
:text-color="item.textColor"
>
<CCardHeader>Header</CCardHeader>
<CCardBody>
@@ -593,7 +593,7 @@
>border utilities</a
>
to change just the <code>border-color</code> of a card. Note that
you can set <code>textColor</code> property on the
you can set <code>text-color</code> property on the
<code>&lt;CCard&gt;</code> or a subset of the card&#39;s contents as
shown below.
</p>
@@ -612,7 +612,7 @@
:key="item"
>
<CCard
:textColor="item.textColor"
:text-color="item.textColor"
class="mb-3"
:class="'border-' + item.color"
style="max-width: 18rem"
@@ -635,7 +635,7 @@
>border utilities</a
>
to change just the <code>border-color</code> of a card. Note that
you can set <code>textColor</code> property on the
you can set <code>text-color</code> property on the
<code>&lt;CCard&gt;</code> or a subset of the card&#39;s contents as
shown below.
</p>
@@ -654,7 +654,7 @@
:key="item.color"
>
<CCard
:textColor="item.textColor"
:text-color="item.textColor"
class="mb-3 border-top-3"
:class="'border-top-' + item.color"
style="max-width: 18rem"
@@ -802,16 +802,13 @@
<CCardBody>
<p class="text-medium-emphasis small">
Use the <code>CRow</code> component and set
<code
>&#123;xs|sm|md|lg|xl|xxl&#125;="&#123; cols: *
&#125;"</code
>
<code>&#123;xs|sm|md|lg|xl|xxl&#125;="&#123; cols: * &#125;"</code>
property to control how many grid columns (wrapped around your
cards) you show per row. For example, here&#39;s
<code>xs="&#123;cols: 1&#125;"</code> laying out the cards
on one column, and
<code>md="&#123;cols: 1&#125;"</code> splitting four cards
to equal width across multiple rows, from the medium breakpoint up.
<code>xs="&#123;cols: 1&#125;"</code> laying out the cards on one
column, and <code>md="&#123;cols: 1&#125;"</code> splitting four
cards to equal width across multiple rows, from the medium
breakpoint up.
</p>
<DocsExample href="components/card/#grid-cards">
<CRow :xs="{ cols: 1, gutter: 4 }" :md="{ cols: 2 }">
@@ -890,8 +887,8 @@
</CRow>
</DocsExample>
<p class="text-medium-emphasis small">
Change it to <code>md="&#123; cols: 3&#125;"</code> and
you&#39;ll see the fourth card wrap.
Change it to <code>md="&#123; cols: 3&#125;"</code> and you&#39;ll
see the fourth card wrap.
</p>
<DocsExample href="components/card/#grid-cards">
<CRow :xs="{ cols: 1, gutter: 4 }" :md="{ cols: 3 }">
src/views/base/Carousels.vue
+19 -91
View File
@@ -15,25 +15,13 @@
<DocsExample href="components/carousel.html#slides-only">
<CCarousel>
<CCarouselItem>
<img
class="d-block w-100"
:src="VueImg"
alt="slide 1"
/>
<img class="d-block w-100" :src="VueImg" alt="slide 1" />
</CCarouselItem>
<CCarouselItem>
<img
class="d-block w-100"
:src="ReactImg"
alt="slide 2"
/>
<img class="d-block w-100" :src="ReactImg" alt="slide 2" />
</CCarouselItem>
<CCarouselItem>
<img
class="d-block w-100"
:src="AngularImg"
alt="slide 3"
/>
<img class="d-block w-100" :src="AngularImg" alt="slide 3" />
</CCarouselItem>
</CCarousel>
</DocsExample>
@@ -51,25 +39,13 @@
<DocsExample href="components/carousel.html#with-controls">
<CCarousel controls>
<CCarouselItem>
<img
class="d-block w-100"
:src="VueImg"
alt="slide 1"
/>
<img class="d-block w-100" :src="VueImg" alt="slide 1" />
</CCarouselItem>
<CCarouselItem>
<img
class="d-block w-100"
:src="ReactImg"
alt="slide 2"
/>
<img class="d-block w-100" :src="ReactImg" alt="slide 2" />
</CCarouselItem>
<CCarouselItem>
<img
class="d-block w-100"
:src="AngularImg"
alt="slide 3"
/>
<img class="d-block w-100" :src="AngularImg" alt="slide 3" />
</CCarouselItem>
</CCarousel>
</DocsExample>
@@ -87,25 +63,13 @@
<DocsExample href="components/carousel.html#with-indicators">
<CCarousel controls indicators>
<CCarouselItem>
<img
class="d-block w-100"
:src="VueImg"
alt="slide 1"
/>
<img class="d-block w-100" :src="VueImg" alt="slide 1" />
</CCarouselItem>
<CCarouselItem>
<img
class="d-block w-100"
:src="ReactImg"
alt="slide 2"
/>
<img class="d-block w-100" :src="ReactImg" alt="slide 2" />
</CCarouselItem>
<CCarouselItem>
<img
class="d-block w-100"
:src="AngularImg"
alt="slide 3"
/>
<img class="d-block w-100" :src="AngularImg" alt="slide 3" />
</CCarouselItem>
</CCarousel>
</DocsExample>
@@ -129,11 +93,7 @@
<DocsExample href="components/carousel.html#with-captions">
<CCarousel controls indicators>
<CCarouselItem>
<img
class="d-block w-100"
:src="VueImg"
alt="slide 1"
/>
<img class="d-block w-100" :src="VueImg" alt="slide 1" />
<CCarouselCaption class="d-none d-md-block">
<h5>First slide label</h5>
<p>
@@ -142,11 +102,7 @@
</CCarouselCaption>
</CCarouselItem>
<CCarouselItem>
<img
class="d-block w-100"
:src="ReactImg"
alt="slide 2"
/>
<img class="d-block w-100" :src="ReactImg" alt="slide 2" />
<CCarouselCaption class="d-none d-md-block">
<h5>First slide label</h5>
<p>
@@ -155,11 +111,7 @@
</CCarouselCaption>
</CCarouselItem>
<CCarouselItem>
<img
class="d-block w-100"
:src="AngularImg"
alt="slide 3"
/>
<img class="d-block w-100" :src="AngularImg" alt="slide 3" />
<CCarouselCaption class="d-none d-md-block">
<h5>First slide label</h5>
<p>
@@ -183,25 +135,13 @@
<DocsExample href="components/carousel.html#crossfade">
<CCarousel controls indicators transition="crossfade">
<CCarouselItem>
<img
class="d-block w-100"
:src="VueImg"
alt="slide 1"
/>
<img class="d-block w-100" :src="VueImg" alt="slide 1" />
</CCarouselItem>
<CCarouselItem>
<img
class="d-block w-100"
:src="ReactImg"
alt="slide 2"
/>
<img class="d-block w-100" :src="ReactImg" alt="slide 2" />
</CCarouselItem>
<CCarouselItem>
<img
class="d-block w-100"
:src="AngularImg"
alt="slide 3"
/>
<img class="d-block w-100" :src="AngularImg" alt="slide 3" />
</CCarouselItem>
</CCarousel>
</DocsExample>
@@ -223,25 +163,13 @@
<DocsExample href="components/carousel.html#dark-variant">
<CCarousel controls indicators dark>
<CCarouselItem>
<img
class="d-block w-100"
:src="VueImg"
alt="slide 1"
/>
<img class="d-block w-100" :src="VueImg" alt="slide 1" />
</CCarouselItem>
<CCarouselItem>
<img
class="d-block w-100"
:src="ReactImg"
alt="slide 2"
/>
<img class="d-block w-100" :src="ReactImg" alt="slide 2" />
</CCarouselItem>
<CCarouselItem>
<img
class="d-block w-100"
:src="AngularImg"
alt="slide 3"
/>
<img class="d-block w-100" :src="AngularImg" alt="slide 3" />
</CCarouselItem>
</CCarousel>
</DocsExample>
@@ -263,6 +191,6 @@ export default {
ReactImg,
VueImg,
}
}
},
}
</script>
src/views/base/ListGroups.vue
+4 -4
View File
@@ -192,8 +192,8 @@
'light',
'dark',
]"
:color="item"
:key="item"
:color="item"
>A simple {{ item }} list group item</CListGroupItem
>
</CListGroup>
@@ -221,10 +221,10 @@
'light',
'dark',
]"
:key="item"
component="a"
href="#"
:color="item"
:key="item"
>A simple {{ item }} list group item</CListGroupItem
>
</CListGroup>
@@ -340,10 +340,10 @@
<CFormCheck label="Cras justo odio" />
</CListGroupItem>
<CListGroupItem>
<CFormCheck label="Dapibus ac facilisis in" defaultChecked />
<CFormCheck label="Dapibus ac facilisis in" checked />
</CListGroupItem>
<CListGroupItem>
<CFormCheck label="Morbi leo risus" defaultChecked />
<CFormCheck label="Morbi leo risus" checked />
</CListGroupItem>
<CListGroupItem>
<CFormCheck label="orta ac consectetur ac" />
src/views/base/Navs.vue
+4 -5
View File
@@ -34,9 +34,8 @@
</DocsExample>
<p class="text-medium-emphasis small">
Classes are used throughout, so your markup can be super flexible.
Use{' '}
<code>&lt;ul&gt;</code>s like above, <code>&lt;ol&gt;</code> if the
order of your items is important, or roll your own with a
Use <code>&lt;ul&gt;</code>s like above, <code>&lt;ol&gt;</code> if
the order of your items is important, or roll your own with a
<code>&lt;nav&gt;</code> element. Because the .nav uses display:
flex, the nav links behave the same as nav items would, but without
the extra markup.
@@ -59,7 +58,7 @@
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Change the horizontal alignment of your nav with{' '}
Change the horizontal alignment of your nav with
<a href="https://coreui.io/docs/layout/grid/#horizontal-alignment">
flexbox utilities
</a>
@@ -207,7 +206,7 @@
<p class="text-medium-emphasis small">
Force your <code>.nav</code>&#39;s contents to extend the full
available width one of two modifier classes. To proportionately fill
all available space with your{' '} <code>.nav-item</code>s, use
all available space with your <code>.nav-item</code>s, use
<code>layout=&#34;fill&#34;</code>. Notice that all horizontal space
is occupied, but not every nav item has the same width.
</p>
src/views/base/Popovers.vue
+6 -6
View File
@@ -11,14 +11,14 @@
<CCardBody>
<DocsExample href="components/popover.html#example">
<CButton
color="danger"
size="lg"
v-c-popover="{
header: 'Popover title',
content:
'And here\’s some amazing content. It’s very engaging. Right?',
placement: 'right',
}"
color="danger"
size="lg"
>
Click to toggle popover
</CButton>
@@ -38,39 +38,39 @@
</p>
<DocsExample href="components/popover.html#four-directions">
<CButton
color="secondary"
v-c-popover="{
content:
'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
placement: 'top',
}"
color="secondary"
>Popover on top</CButton
>
<CButton
color="secondary"
v-c-popover="{
content:
'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
placement: 'right',
}"
color="secondary"
>Popover on right</CButton
>
<CButton
color="secondary"
v-c-popover="{
content:
'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
placement: 'bottom',
}"
color="secondary"
>Popover on bottom</CButton
>
<CButton
color="secondary"
v-c-popover="{
content:
'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
placement: 'left',
}"
color="secondary"
>Popover on left</CButton
>
</DocsExample>
src/views/base/Tables.vue
+19 -19
View File
@@ -38,7 +38,7 @@
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
@@ -153,7 +153,7 @@
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
@@ -187,7 +187,7 @@
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
@@ -218,7 +218,7 @@
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
@@ -262,7 +262,7 @@
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
@@ -293,7 +293,7 @@
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
@@ -324,7 +324,7 @@
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
@@ -364,7 +364,7 @@
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colSpan="2" active>
<CTableDataCell colspan="2" active>
Larry the Bird
</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
@@ -397,7 +397,7 @@
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colSpan="2" active>
<CTableDataCell colspan="2" active>
Larry the Bird
</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
@@ -443,7 +443,7 @@
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
@@ -456,7 +456,7 @@
can be added to change colors:
</p>
<DocsExample href="components/table.html#bordered-tables">
<CTable bordered borderColor="primary">
<CTable bordered border-color="primary">
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
@@ -480,7 +480,7 @@
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
@@ -523,7 +523,7 @@
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
@@ -554,7 +554,7 @@
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
@@ -599,7 +599,7 @@
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
@@ -730,7 +730,7 @@
<CTableDataCell>@mdo</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell colSpan="4">
<CTableHeaderCell colspan="4">
<CTable>
<CTableHead>
<CTableRow>
@@ -767,7 +767,7 @@
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
@@ -845,7 +845,7 @@
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
@@ -885,7 +885,7 @@
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
src/views/base/Tooltips.vue
+4 -4
View File
@@ -34,39 +34,39 @@
</p>
<DocsExample href="components/tooltip.html">
<CButton
color="secondary"
v-c-tooltip="{
content:
'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
placement: 'top',
}"
color="secondary"
>Tooltip on top</CButton
>
<CButton
color="secondary"
v-c-tooltip="{
content:
'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
placement: 'right',
}"
color="secondary"
>Tooltip on right</CButton
>
<CButton
color="secondary"
v-c-tooltip="{
content:
'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
placement: 'bottom',
}"
color="secondary"
>Tooltip on bottom</CButton
>
<CButton
color="secondary"
v-c-tooltip="{
content:
'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
placement: 'left',
}"
color="secondary"
>Tooltip on left</CButton
>
</DocsExample>
src/views/buttons/ButtonGroups.vue
+19 -19
View File
@@ -86,21 +86,21 @@
aria-label="Basic checkbox toggle button group"
>
<CFormCheck
:button="{ color: 'primary', variant: 'outline' }"
id="btncheck1"
autoComplete="off"
:button="{ color: 'primary', variant: 'outline' }"
autocomplete="off"
label="Checkbox 1"
/>
<CFormCheck
:button="{ color: 'primary', variant: 'outline' }"
id="btncheck2"
autoComplete="off"
:button="{ color: 'primary', variant: 'outline' }"
autocomplete="off"
label="Checkbox 2"
/>
<CFormCheck
:button="{ color: 'primary', variant: 'outline' }"
id="btncheck3"
autoComplete="off"
:button="{ color: 'primary', variant: 'outline' }"
autocomplete="off"
label="Checkbox 3"
/>
</CButtonGroup>
@@ -113,27 +113,27 @@
aria-label="Basic checkbox toggle button group"
>
<CFormCheck
id="btnradio1"
type="radio"
:button="{ color: 'primary', variant: 'outline' }"
name="btnradio"
id="btnradio1"
autoComplete="off"
autocomplete="off"
label="Radio 1"
/>
<CFormCheck
id="btnradio2"
type="radio"
:button="{ color: 'primary', variant: 'outline' }"
name="btnradio"
id="btnradio2"
autoComplete="off"
autocomplete="off"
label="Radio 2"
/>
<CFormCheck
id="btnradio3"
type="radio"
:button="{ color: 'primary', variant: 'outline' }"
name="btnradio"
id="btnradio3"
autoComplete="off"
autocomplete="off"
label="Radio 3"
/>
</CButtonGroup>
@@ -384,30 +384,30 @@
aria-label="Vertical button group"
>
<CFormCheck
id="vbtnradio1"
type="radio"
:button="{ color: 'danger', variant: 'outline' }"
name="vbtnradio"
id="vbtnradio1"
autoComplete="off"
autocomplete="off"
label="Radio
1"
defaultChecked
checked
/>
<CFormCheck
id="vbtnradio2"
type="radio"
:button="{ color: 'danger', variant: 'outline' }"
name="vbtnradio"
id="vbtnradio2"
autoComplete="off"
autocomplete="off"
label="Radio
2"
/>
<CFormCheck
id="vbtnradio3"
type="radio"
:button="{ color: 'danger', variant: 'outline' }"
name="vbtnradio"
id="vbtnradio3"
autoComplete="off"
autocomplete="off"
label="Radio
3"
/>
src/views/buttons/Buttons.vue
+2 -8
View File
@@ -294,10 +294,7 @@
]"
:key="color"
>
<CButton
:color="color"
shape="rounded-pill"
>
<CButton :color="color" shape="rounded-pill">
{{ color.charAt(0).toUpperCase() + color.slice(1) }}
</CButton>
</template>
@@ -325,10 +322,7 @@
]"
:key="color"
>
<CButton
:color="color"
shape="rounded-0"
>
<CButton :color="color" shape="rounded-0">
{{ color.charAt(0).toUpperCase() + color.slice(1) }}
</CButton>
</template>
src/views/buttons/Dropdowns.vue
+1 -1
View File
@@ -224,8 +224,8 @@
<span class="navbar-toggler-icon"></span>
</button>
<div
class="collapse navbar-collapse"
id="navbarNavDarkDropdown"
class="collapse navbar-collapse"
>
<ul class="navbar-nav">
<CDropdown dark component="li" variant="nav-item">
src/views/forms/ChecksRadios.vue
+54 -58
View File
@@ -14,7 +14,7 @@
<CFormCheck
id="flexCheckChecked"
label="Checked checkbox"
defaultChecked
checked
/>
</DocsExample>
</CCardBody>
@@ -33,11 +33,7 @@
</p>
<DocsExample href="forms/checks-radios.html#disabled">
<CFormCheck label="Disabled checkbox" disabled />
<CFormCheck
label="Disabled checked checkbox"
defaultChecked
disabled
/>
<CFormCheck label="Disabled checked checkbox" checked disabled />
</DocsExample>
</CCardBody>
</CCard>
@@ -55,17 +51,17 @@
</p>
<DocsExample href="forms/checks-radios.html#radios">
<CFormCheck
id="flexRadioDefault1"
type="radio"
name="flexRadioDefault"
id="flexRadioDefault1"
label="Default radio"
/>
<CFormCheck
id="flexRadioDefault2"
type="radio"
name="flexRadioDefault"
id="flexRadioDefault2"
label="Checked radio"
defaultChecked
checked
/>
</DocsExample>
</CCardBody>
@@ -79,18 +75,18 @@
<CCardBody>
<DocsExample href="forms/checks-radios.html#disabled-1">
<CFormCheck
id="flexRadioDisabled"
type="radio"
name="flexRadioDisabled"
id="flexRadioDisabled"
label="Disabled radio"
disabled
/>
<CFormCheck
id="flexRadioCheckedDisabled"
type="radio"
name="flexRadioDisabled"
id="flexRadioCheckedDisabled"
label="Disabled checked radio"
defaultChecked
checked
disabled
/>
</DocsExample>
@@ -110,23 +106,23 @@
</p>
<DocsExample href="forms/checks-radios.html#switches">
<CFormSwitch
label="Default switch checkbox input"
id="formSwitchCheckDefault"
label="Default switch checkbox input"
/>
<CFormSwitch
label="Checked switch checkbox input"
id="formSwitchCheckChecked"
defaultChecked
label="Checked switch checkbox input"
checked
/>
<CFormSwitch
label="Disabled switch checkbox input"
id="formSwitchCheckDisabled"
label="Disabled switch checkbox input"
disabled
/>
<CFormSwitch
label="Disabled checked switch checkbox input"
id="formSwitchCheckCheckedDisabled"
defaultChecked
label="Disabled checked switch checkbox input"
checked
disabled
/>
</DocsExample>
@@ -141,18 +137,18 @@
<CCardBody>
<DocsExample href="forms/checks-radios.html#sizes">
<CFormSwitch
label="Default switch checkbox input"
id="formSwitchCheckDefault"
label="Default switch checkbox input"
/>
<CFormSwitch
id="formSwitchCheckDefaultLg"
size="lg"
label="Large switch checkbox input"
id="formSwitchCheckDefaultLg"
/>
<CFormSwitch
id="formSwitchCheckDefaultXL"
size="xl"
label="Extra large switch checkbox input"
id="formSwitchCheckDefaultXL"
/>
</DocsExample>
</CCardBody>
@@ -175,24 +171,24 @@
</DocsExample>
<DocsExample href="forms/checks-radios.html#default-stacked">
<CFormCheck
id="exampleRadios1"
type="radio"
name="exampleRadios"
id="exampleRadios1"
value="option1"
label="Default radio"
defaultChecked
checked
/>
<CFormCheck
id="exampleRadios2"
type="radio"
name="exampleRadios"
id="exampleRadios2"
value="option2"
label="Second default radio"
/>
<CFormCheck
id="exampleRadios3"
type="radio"
name="exampleRadios"
id="exampleRadios3"
value="option3"
label="Disabled radio"
disabled
@@ -213,11 +209,11 @@
<code>&lt;CFormCheck&gt;</code>.
</p>
<DocsExample href="forms/checks-radios.html#inline">
<CFormCheck inline id="inlineCheckbox1" value="option1" label="1" />
<CFormCheck inline id="inlineCheckbox2" value="option2" label="2" />
<CFormCheck id="inlineCheckbox1" inline value="option1" label="1" />
<CFormCheck id="inlineCheckbox2" inline value="option2" label="2" />
<CFormCheck
inline
id="inlineCheckbox3"
inline
value="option3"
label="3 (disabled)"
disabled
@@ -225,26 +221,26 @@
</DocsExample>
<DocsExample href="forms/checks-radios.html#inline">
<CFormCheck
id="inlineCheckbox1"
inline
type="radio"
name="inlineRadioOptions"
id="inlineCheckbox1"
value="option1"
label="1"
/>
<CFormCheck
id="inlineCheckbox2"
inline
type="radio"
name="inlineRadioOptions"
id="inlineCheckbox2"
value="option2"
label="2"
/>
<CFormCheck
id="inlineCheckbox3"
inline
type="radio"
name="inlineRadioOptions"
id="inlineCheckbox3"
value="option3"
label="3 (disabled)"
disabled
@@ -269,9 +265,9 @@
</div>
<div>
<CFormCheck
id="radioNoLabel"
type="radio"
name="radioNoLabel"
id="radioNoLabel"
value=""
aria-label="..."
/>
@@ -294,26 +290,26 @@
</p>
<DocsExample href="forms/checks-radios.html#toggle-buttons">
<CFormCheck
:button="{ color: 'primary' }"
id="btn-check"
autoComplete="off"
:button="{ color: 'primary' }"
autocomplete="off"
label="Single toggle"
/>
</DocsExample>
<DocsExample href="forms/checks-radios.html#toggle-buttons">
<CFormCheck
:button="{ color: 'primary' }"
id="btn-check-2"
autoComplete="off"
:button="{ color: 'primary' }"
autocomplete="off"
label="Checked"
defaultChecked
checked
/>
</DocsExample>
<DocsExample href="forms/checks-radios.html#toggle-buttons">
<CFormCheck
:button="{ color: 'primary' }"
id="btn-check-3"
autoComplete="off"
:button="{ color: 'primary' }"
autocomplete="off"
label="Disabled"
disabled
/>
@@ -321,37 +317,37 @@
<h3>Radio toggle buttons</h3>
<DocsExample href="forms/checks-radios.html#toggle-buttons">
<CFormCheck
id="option1"
:button="{ color: 'secondary' }"
type="radio"
name="options"
id="option1"
autoComplete="off"
autocomplete="off"
label="Checked"
defaultChecked
checked
/>
<CFormCheck
id="option2"
:button="{ color: 'secondary' }"
type="radio"
name="options"
id="option2"
autoComplete="off"
autocomplete="off"
label="Radio"
/>
<CFormCheck
id="option3"
:button="{ color: 'secondary' }"
type="radio"
name="options"
id="option3"
autoComplete="off"
autocomplete="off"
label="Radio"
disabled
/>
<CFormCheck
id="option4"
:button="{ color: 'secondary' }"
type="radio"
name="options"
id="option4"
autoComplete="off"
autocomplete="off"
label="Radio"
/>
</DocsExample>
@@ -363,37 +359,37 @@
<DocsExample href="forms/checks-radios.html#toggle-buttons">
<div>
<CFormCheck
:button="{ color: 'primary', variant: 'outline' }"
id="btn-check-outlined"
autoComplete="off"
:button="{ color: 'primary', variant: 'outline' }"
autocomplete="off"
label="Single toggle"
/>
</div>
<div>
<CFormCheck
:button="{ color: 'secondary', variant: 'outline' }"
id="btn-check-2-outlined"
autoComplete="off"
:button="{ color: 'secondary', variant: 'outline' }"
autocomplete="off"
label="Checked"
defaultChecked
checked
/>
</div>
<div>
<CFormCheck
id="success-outlined"
:button="{ color: 'success', variant: 'outline' }"
type="radio"
name="options-outlined"
id="success-outlined"
autoComplete="off"
autocomplete="off"
label="Radio"
defaultChecked
checked
/>
<CFormCheck
id="danger-outlined"
:button="{ color: 'danger', variant: 'outline' }"
type="radio"
name="options-outlined"
id="danger-outlined"
autoComplete="off"
autocomplete="off"
label="Radio"
/>
</div>
src/views/forms/FloatingLabels.vue
+15 -21
View File
@@ -22,19 +22,19 @@
<DocsExample href="forms/floating-labels.html">
<CFormFloating class="mb-3">
<CFormInput
type="email"
id="floatingInput"
type="email"
placeholder="name@example.com"
/>
<CFormLabel htmlFor="floatingInput">Email address</CFormLabel>
<CFormLabel for="floatingInput">Email address</CFormLabel>
</CFormFloating>
<CFormFloating>
<CFormInput
type="password"
id="floatingPassword"
type="password"
placeholder="Password"
/>
<CFormLabel htmlFor="floatingPassword">Password</CFormLabel>
<CFormLabel for="floatingPassword">Password</CFormLabel>
</CFormFloating>
</DocsExample>
<p class="text-medium-emphasis small">
@@ -45,14 +45,12 @@
<DocsExample href="forms/floating-labels.html">
<CFormFloating>
<CFormInput
type="email"
id="floatingInputValue"
type="email"
placeholder="name@example.com"
defaultValue="test@example.com"
value="test@example.com"
/>
<CFormLabel htmlFor="floatingInputValue"
>Input with value</CFormLabel
>
<CFormLabel for="floatingInputValue">Input with value</CFormLabel>
</CFormFloating>
</DocsExample>
</CCardBody>
@@ -74,7 +72,7 @@
id="floatingTextarea"
placeholder="Leave a comment here"
></CFormTextarea>
<CFormLabel htmlFor="floatingTextarea">Comments</CFormLabel>
<CFormLabel for="floatingTextarea">Comments</CFormLabel>
</CFormFloating>
</DocsExample>
<p class="text-medium-emphasis small">
@@ -85,11 +83,11 @@
<DocsExample href="forms/floating-labels.html#textareas">
<CFormFloating>
<CFormTextarea
placeholder="Leave a comment here"
id="floatingTextarea2"
placeholder="Leave a comment here"
style="height: 100px"
></CFormTextarea>
<CFormLabel htmlFor="floatingTextarea2">Comments</CFormLabel>
<CFormLabel for="floatingTextarea2">Comments</CFormLabel>
</CFormFloating>
</DocsExample>
</CCardBody>
@@ -123,9 +121,7 @@
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
<CFormLabel htmlFor="floatingSelect"
>Works with selects</CFormLabel
>
<CFormLabel for="floatingSelect">Works with selects</CFormLabel>
</CFormFloating>
</DocsExample>
</CCardBody>
@@ -146,14 +142,12 @@
<CCol md>
<CFormFloating>
<CFormInput
type="email"
id="floatingInputGrid"
type="email"
placeholder="name@example.com"
defaultValue="email@example.com"
value="email@example.com"
/>
<CFormLabel htmlFor="floatingInputGrid"
>Email address</CFormLabel
>
<CFormLabel for="floatingInputGrid">Email address</CFormLabel>
</CFormFloating>
</CCol>
<CCol md>
@@ -167,7 +161,7 @@
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
<CFormLabel htmlFor="floatingSelectGrid"
<CFormLabel for="floatingSelectGrid"
>Works with selects</CFormLabel
>
</CFormFloating>
src/views/forms/FormControl.vue
+24 -24
View File
@@ -16,8 +16,8 @@
>Email address</CFormLabel
>
<CFormInput
type="email"
id="exampleFormControlInput1"
type="email"
placeholder="name@example.com"
/>
</div>
@@ -92,7 +92,7 @@
placeholder="Disabled readonly input"
aria-label="Disabled input example"
disabled
readOnly
readonly
/>
<br />
</DocsExample>
@@ -106,7 +106,7 @@
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Add the <code>readOnly</code> boolean attribute on an input to
Add the <code>readonly</code> boolean attribute on an input to
prevent modification of the input&#39;s value. Read-only inputs
appear lighter (just like disabled inputs), but retain the standard
cursor.
@@ -116,7 +116,7 @@
type="text"
placeholder="Readonly input here..."
aria-label="readonly input example"
readOnly
readonly
/>
</DocsExample>
</CCardBody>
@@ -131,21 +131,21 @@
<p class="text-medium-emphasis small">
If you want to have <code>&lt;input readonly&gt;</code> elements in
your form styled as plain text, use the
<code>plainText</code> boolean property to remove the default form
<code>plain-text</code> boolean property to remove the default form
field styling and preserve the correct margin and padding.
</p>
<DocsExample href="components/accordion">
<DocsExample href="forms/form-control.html#readonly-plain-text">
<CRow class="mb-3">
<CFormLabel for="staticEmail" class="col-sm-2 col-form-label">
Email
</CFormLabel>
<div class="col-sm-10">
<CFormInput
type="text"
id="staticEmail"
defaultValue="email@example.com"
readOnly
plainText
type="text"
value="email@example.com"
readonly
plain-text
/>
</div>
</CRow>
@@ -154,22 +154,22 @@
Password
</CFormLabel>
<div class="col-sm-10">
<CFormInput type="password" id="inputPassword" />
<CFormInput id="inputPassword" type="password" />
</div>
</CRow>
</DocsExample>
<DocsExample href="components/accordion">
<DocsExample href="forms/form-control.html#readonly-plain-text">
<CForm class="row g-3">
<div class="col-auto">
<CFormLabel for="staticEmail2" class="visually-hidden">
Email
</CFormLabel>
<CFormInput
type="text"
id="staticEmail2"
defaultValue="email@example.com"
readOnly
plainText
type="text"
value="email@example.com"
readonly
plain-text
/>
</div>
<div class="col-auto">
@@ -177,8 +177,8 @@
Password
</CFormLabel>
<CFormInput
type="password"
id="inputPassword2"
type="password"
placeholder="Password"
/>
</div>
@@ -199,27 +199,27 @@
<DocsExample href="forms/form-control.html#file-input">
<div class="mb-3">
<CFormLabel for="formFile">Default file input example</CFormLabel>
<CFormInput type="file" id="formFile" />
<CFormInput id="formFile" type="file" />
</div>
<div class="mb-3">
<CFormLabel for="formFileMultiple"
>Multiple files input example</CFormLabel
>
<CFormInput type="file" id="formFileMultiple" multiple />
<CFormInput id="formFileMultiple" type="file" multiple />
</div>
<div class="mb-3">
<CFormLabel for="formFileDisabled"
>Disabled file input example</CFormLabel
>
<CFormInput type="file" id="formFileDisabled" disabled />
<CFormInput id="formFileDisabled" type="file" disabled />
</div>
<div class="mb-3">
<CFormLabel for="formFileSm">Small file input example</CFormLabel>
<CFormInput type="file" size="sm" id="formFileSm" />
<CFormInput id="formFileSm" type="file" size="sm" />
</div>
<div>
<CFormLabel for="formFileLg">Large file input example</CFormLabel>
<CFormInput type="file" size="lg" id="formFileLg" />
<CFormInput id="formFileLg" type="file" size="lg" />
</div>
</DocsExample>
</CCardBody>
@@ -234,9 +234,9 @@
<DocsExample href="forms/form-control.html#color">
<CFormLabel for="exampleColorInput">Color picker</CFormLabel>
<CFormInput
type="color"
id="exampleColorInput"
defaultValue="#563d7c"
type="color"
value="#563d7c"
title="Choose your color"
/>
</DocsExample>
src/views/forms/InputGroup.vue
+8 -8
View File
@@ -224,10 +224,10 @@
<DocsExample href="forms/input-group.html#button-addons">
<CInputGroup class="mb-3">
<CButton
id="button-addon1"
type="button"
color="secondary"
variant="outline"
id="button-addon1"
>
Button
</CButton>
@@ -244,10 +244,10 @@
aria-describedby="button-addon2"
/>
<CButton
id="button-addon2"
type="button"
color="secondary"
variant="outline"
id="button-addon2"
>
Button
</CButton>
@@ -467,42 +467,42 @@
<CInputGroupText component="label" for="inputGroupFile01">
Upload
</CInputGroupText>
<CFormInput type="file" id="inputGroupFile01" />
<CFormInput id="inputGroupFile01" type="file" />
</CInputGroup>
<CInputGroup class="mb-3">
<CFormInput type="file" id="inputGroupFile02" />
<CFormInput id="inputGroupFile02" type="file" />
<CInputGroupText component="label" for="inputGroupFile02">
Upload
</CInputGroupText>
</CInputGroup>
<CInputGroup class="mb-3">
<CButton
id="inputGroupFileAddon03"
type="button"
color="secondary"
variant="outline"
id="inputGroupFileAddon03"
>
Button
</CButton>
<CFormInput
type="file"
id="inputGroupFile03"
type="file"
aria-describedby="inputGroupFileAddon03"
aria-label="Upload"
/>
</CInputGroup>
<CInputGroup>
<CFormInput
type="file"
id="inputGroupFile04"
type="file"
aria-describedby="inputGroupFileAddon04"
aria-label="Upload"
/>
<CButton
id="inputGroupFileAddon04"
type="button"
color="secondary"
variant="outline"
id="inputGroupFileAddon04"
>
Button
</CButton>
src/views/forms/Layout.vue
+16 -16
View File
@@ -55,11 +55,11 @@
<CForm class="row g-3">
<CCol :md="6">
<CFormLabel for="inputEmail4">Email</CFormLabel>
<CFormInput type="email" id="inputEmail4" />
<CFormInput id="inputEmail4" type="email" />
</CCol>
<CCol :md="6">
<CFormLabel for="inputPassword4">Password</CFormLabel>
<CFormInput type="password" id="inputPassword4" />
<CFormInput id="inputPassword4" type="password" />
</CCol>
<CCol :xs="12">
<CFormLabel for="inputAddress">Address</CFormLabel>
@@ -89,8 +89,8 @@
</CCol>
<CCol :xs="12">
<CFormCheck
type="checkbox"
id="gridCheck"
type="checkbox"
label="Check me out"
/>
</CCol>
@@ -129,7 +129,7 @@
Email
</CFormLabel>
<CCol :sm="10">
<CFormInput type="email" id="inputEmail3" />
<CFormInput id="inputEmail3" type="email" />
</CCol>
</CRow>
<CRow class="mb-3">
@@ -140,31 +140,31 @@
Password
</CFormLabel>
<CCol :sm="10">
<CFormInput type="password" id="inputPassword3" />
<CFormInput id="inputPassword3" type="password" />
</CCol>
</CRow>
<fieldset class="row mb-3">
<legend class="col-form-label col-sm-2 pt-0">Radios</legend>
<CCol :sm="10">
<CFormCheck
id="gridRadios1"
type="radio"
name="gridRadios"
id="gridRadios1"
value="option1"
label="First radio"
defaultChecked
checked
/>
<CFormCheck
id="gridRadios2"
type="radio"
name="gridRadios"
id="gridRadios2"
value="option2"
label="Second radio"
/>
<CFormCheck
id="gridRadios3"
type="radio"
name="gridRadios"
id="gridRadios3"
value="option3"
label="Third disabled radio"
disabled
@@ -174,8 +174,8 @@
<CRow class="mb-3">
<div class="col-sm-10 offset-sm-2">
<CFormCheck
type="checkbox"
id="gridCheck1"
type="checkbox"
label="Example checkbox"
/>
</div>
@@ -209,9 +209,9 @@
</CFormLabel>
<CCol :sm="10">
<CFormInput
id="colFormLabelSm"
type="email"
class="form-control form-control-sm"
id="colFormLabelSm"
placeholder="col-form-label-sm"
/>
</CCol>
@@ -222,8 +222,8 @@
</CFormLabel>
<CCol :sm="10">
<CFormInput
type="email"
id="colFormLabel"
type="email"
placeholder="col-form-label"
/>
</CCol>
@@ -237,9 +237,9 @@
</CFormLabel>
<CCol :sm="10">
<CFormInput
id="colFormLabelLg"
type="email"
class="form-control form-control-lg"
id="colFormLabelLg"
placeholder="col-form-label-lg"
/>
</CCol>
@@ -327,8 +327,8 @@
</CCol>
<CCol xs="auto">
<CFormCheck
type="checkbox"
id="autoSizingCheck"
type="checkbox"
label="Remember me"
/>
</CCol>
@@ -377,8 +377,8 @@
</CCol>
<CCol xs="auto">
<CFormCheck
type="checkbox"
id="autoSizingCheck2"
type="checkbox"
label="Remember me"
/>
</CCol>
@@ -435,8 +435,8 @@
</CCol>
<CCol :xs="12">
<CFormCheck
type="checkbox"
id="inlineFormCheck"
type="checkbox"
label="Remember me"
/>
</CCol>
src/views/forms/Range.vue
+3 -3
View File
@@ -50,7 +50,7 @@
</p>
<DocsExample href="forms/range.html#min-and-max">
<CFormLabel for="customRange2">Example range</CFormLabel>
<CFormRange :min="0" :max="5" defaultValue="3" id="customRange2" />
<CFormRange id="customRange2" :min="0" :max="5" value="3" />
</DocsExample>
</CCardBody>
</CCard>
@@ -70,11 +70,11 @@
<DocsExample href="forms/range.html#steps">
<CFormLabel for="customRange3">Example range</CFormLabel>
<CFormRange
id="customRange3"
:min="0"
:max="5"
:step="0.5"
defaultValue="3"
id="customRange3"
value="3"
/>
</DocsExample>
</CCardBody>
src/views/forms/Select.vue
+1 -1
View File
@@ -68,7 +68,7 @@
</CFormSelect>
</DocsExample>
<p class="text-medium-emphasis small">
As is the <code>htmlSize</code> property:
As is the <code>html-size</code> property:
</p>
<DocsExample href="forms/select.html#sizing">
<CFormSelect
src/views/forms/Validation.vue
+40 -66
View File
@@ -9,7 +9,7 @@
<p class="text-medium-emphasis small">
For custom CoreUI form validation messages, you&#39;ll need to add
the
<code>noValidate</code> boolean property to your
<code>novalidate</code> boolean property to your
<code>&lt;CForm&gt;</code>. This disables the browser default
feedback tooltips, but still provides access to the form validation
APIs in JavaScript. Try to submit the form below; our JavaScript
@@ -24,26 +24,18 @@
<DocsExample href="forms/validation.html">
<CForm
class="row g-3 needs-validation"
noValidate
novalidate
:validated="validatedCustom01"
@submit="handleSubmitCustom01"
>
<CCol :md="4">
<CFormLabel for="validationCustom01">Email</CFormLabel>
<CFormInput
id="validationCustom01"
defaultValue="Mark"
required
/>
<CFormInput id="validationCustom01" value="Mark" required />
<CFormFeedback valid> Looks good! </CFormFeedback>
</CCol>
<CCol :md="4">
<CFormLabel for="validationCustom02">Email</CFormLabel>
<CFormInput
id="validationCustom02"
defaultValue="Otto"
required
/>
<CFormInput id="validationCustom02" value="Otto" required />
<CFormFeedback valid> Looks good! </CFormFeedback>
</CCol>
<CCol :md="4">
@@ -52,7 +44,7 @@
<CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
<CFormInput
id="validationCustomUsername"
defaultValue=""
value=""
aria-describedby="inputGroupPrepend"
required
/>
@@ -87,8 +79,8 @@
</CCol>
<CCol :xs="12">
<CFormCheck
type="checkbox"
id="invalidCheck"
type="checkbox"
label="Agree to terms and conditions"
required
/>
@@ -129,20 +121,12 @@
>
<CCol :md="4">
<CFormLabel for="validationDefault01">Email</CFormLabel>
<CFormInput
id="validationDefault01"
defaultValue="Mark"
required
/>
<CFormInput id="validationDefault01" value="Mark" required />
<CFormFeedback valid> Looks good! </CFormFeedback>
</CCol>
<CCol :md="4">
<CFormLabel for="validationDefault02">Email</CFormLabel>
<CFormInput
id="validationDefault02"
defaultValue="Otto"
required
/>
<CFormInput id="validationDefault02" value="Otto" required />
<CFormFeedback valid> Looks good! </CFormFeedback>
</CCol>
<CCol :md="4">
@@ -153,7 +137,7 @@
<CInputGroupText id="inputGroupPrepend02">@</CInputGroupText>
<CFormInput
id="validationDefaultUsername"
defaultValue=""
value=""
aria-describedby="inputGroupPrepend02"
required
/>
@@ -188,8 +172,8 @@
</CCol>
<CCol :xs="12">
<CFormCheck
type="checkbox"
id="invalidCheck"
type="checkbox"
label="Agree to terms and conditions"
required
/>
@@ -227,37 +211,35 @@
<DocsExample href="forms/validation.html#server-side">
<CForm class="row g-3 needs-validation">
<CCol ::md="4">
<CFormLabel htmlFor="validationServer01">Email</CFormLabel>
<CFormLabel for="validationServer01">Email</CFormLabel>
<CFormInput
type="text"
id="validationServer01"
defaultValue="Mark"
valid
required
/>
<CFormFeedback valid>Looks good!</CFormFeedback>
</CCol>
<CCol ::md="4">
<CFormLabel htmlFor="validationServer02">Email</CFormLabel>
<CFormInput
type="text"
id="validationServer02"
defaultValue="Otto"
value="Mark"
valid
required
/>
<CFormFeedback valid>Looks good!</CFormFeedback>
</CCol>
<CCol ::md="4">
<CFormLabel htmlFor="validationServerUsername"
>Username</CFormLabel
>
<CFormLabel for="validationServer02">Email</CFormLabel>
<CFormInput
id="validationServer02"
type="text"
value="Otto"
valid
required
/>
<CFormFeedback valid>Looks good!</CFormFeedback>
</CCol>
<CCol ::md="4">
<CFormLabel for="validationServerUsername">Username</CFormLabel>
<CInputGroup class="has-validation">
<CInputGroupText id="inputGroupPrepend03">@</CInputGroupText>
<CFormInput
type="text"
id="validationServerUsername"
defaultValue=""
type="text"
value=""
aria-describedby="inputGroupPrepend03"
invalid
required
@@ -268,10 +250,10 @@
</CInputGroup>
</CCol>
<CCol :md="6">
<CFormLabel htmlFor="validationServer03">City</CFormLabel>
<CFormLabel for="validationServer03">City</CFormLabel>
<CFormInput
type="text"
id="validationServer03"
type="text"
invalid
required
/>
@@ -280,7 +262,7 @@
>
</CCol>
<CCol :md="3">
<CFormLabel htmlFor="validationServer04">City</CFormLabel>
<CFormLabel for="validationServer04">City</CFormLabel>
<CFormSelect id="validationServer04" invalid>
<option disabled>Choose...</option>
<option>...</option>
@@ -290,10 +272,10 @@
>
</CCol>
<CCol :md="3">
<CFormLabel htmlFor="validationServer05">City</CFormLabel>
<CFormLabel for="validationServer05">City</CFormLabel>
<CFormInput
type="text"
id="validationServer05"
type="text"
invalid
required
/>
@@ -303,8 +285,8 @@
</CCol>
<CCol :xs="12">
<CFormCheck
type="checkbox"
id="invalidCheck"
type="checkbox"
label="Agree to terms and conditions"
invalid
required
@@ -353,8 +335,8 @@
</CFormFeedback>
</div>
<CFormCheck
class="mb-3"
id="validationFormCheck1"
class="mb-3"
label="Check this checkbox"
required
/>
@@ -362,17 +344,17 @@
>Example invalid feedback text</CFormFeedback
>
<CFormCheck
id="validationFormCheck2"
type="radio"
name="radio-stacked"
id="validationFormCheck2"
label="Check this checkbox"
required
/>
<CFormCheck
id="validationFormCheck3"
class="mb-3"
type="radio"
name="radio-stacked"
id="validationFormCheck3"
label="Or toggle this other radio"
required
/>
@@ -392,8 +374,8 @@
</div>
<div class="mb-3">
<CFormInput
type="file"
id="validationTextarea"
type="file"
aria-label="file example"
required
/>
@@ -428,26 +410,18 @@
<DocsExample href="forms/validation.html#tooltips">
<CForm
class="row g-3 needs-validation"
noValidate
novalidate
:validated="validatedTooltip01"
@submit="handleSubmitTooltip01"
>
<CCol :md="4" class="position-relative">
<CFormLabel for="validationTooltip01">Email</CFormLabel>
<CFormInput
id="validationTooltip01"
defaultValue="Mark"
required
/>
<CFormInput id="validationTooltip01" value="Mark" required />
<CFormFeedback tooltip valid> Looks good! </CFormFeedback>
</CCol>
<CCol :md="4" class="position-relative">
<CFormLabel for="validationTooltip02">Email</CFormLabel>
<CFormInput
id="validationTooltip02"
defaultValue="Otto"
required
/>
<CFormInput id="validationTooltip02" value="Otto" required />
<CFormFeedback tooltip valid> Looks good! </CFormFeedback>
</CCol>
<CCol :md="4" class="position-relative">
@@ -458,7 +432,7 @@
<CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
<CFormInput
id="validationTooltipUsername"
defaultValue=""
value=""
aria-describedby="inputGroupPrepend"
required
/>
src/views/icons/Brands.vue
+6 -7
View File
@@ -3,13 +3,11 @@
<CCol>
<DocsCallout
name="CoreUI Brand Icons"
href="components/chart"
href="components/icon"
content="CoreUI Brand Icons. CoreUI Icons package is delivered with more than 1500 icons in multiple formats SVG, PNG, and Webfonts. CoreUI Icons are beautifully crafted symbols for common actions and items. You can use them in your digital products for web or mobile app."
/>
<CCard>
<CCardHeader>
CoreUI Icons - Brand
</CCardHeader>
<CCardHeader>CoreUI Icons - Brand</CCardHeader>
<CCardBody>
<CRow class="text-center">
<template v-for="(icon, iconName) in icons" :key="iconName">
@@ -30,13 +28,14 @@ import { brandSet } from '@coreui/icons'
export default {
name: 'CoreUIIcons',
setup() {
const toKebabCase = (str) => str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
const toKebabCase = (str) =>
str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
const icons = brandSet
return {
icons,
toKebabCase
toKebabCase,
}
}
},
}
</script>
src/views/icons/CoreUIIcons.vue
+6 -7
View File
@@ -3,13 +3,11 @@
<CCol>
<DocsCallout
name="CoreUI Icons"
href="components/chart"
href="components/icon"
content="CoreUI Icons. CoreUI Icons package is delivered with more than 1500 icons in multiple formats SVG, PNG, and Webfonts. CoreUI Icons are beautifully crafted symbols for common actions and items. You can use them in your digital products for web or mobile app."
/>
<CCard>
<CCardHeader>
CoreUI Icons Free
</CCardHeader>
<CCardHeader>CoreUI Icons Free</CCardHeader>
<CCardBody>
<CRow class="text-center">
<template v-for="(icon, iconName) in icons" :key="iconName">
@@ -30,13 +28,14 @@ import { freeSet } from '@coreui/icons'
export default {
name: 'CoreUIIcons',
setup() {
const toKebabCase = (str) => str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
const toKebabCase = (str) =>
str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
const icons = freeSet
return {
icons,
toKebabCase
toKebabCase,
}
}
},
}
</script>
src/views/icons/Flags.vue
+6 -7
View File
@@ -3,13 +3,11 @@
<CCol>
<DocsCallout
name="CoreUI Flag Icons"
href="components/chart"
href="components/icon"
content="CoreUI Flag Icons. CoreUI Icons package is delivered with more than 1500 icons in multiple formats SVG, PNG, and Webfonts. CoreUI Icons are beautifully crafted symbols for common actions and items. You can use them in your digital products for web or mobile app."
/>
<CCard>
<CCardHeader>
CoreUI Icons - Flag
</CCardHeader>
<CCardHeader>CoreUI Icons - Flag</CCardHeader>
<CCardBody>
<CRow class="text-center">
<template v-for="(icon, iconName) in icons" :key="iconName">
@@ -30,13 +28,14 @@ import { flagSet } from '@coreui/icons'
export default {
name: 'CoreUIIcons',
setup() {
const toKebabCase = (str) => str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
const toKebabCase = (str) =>
str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
const icons = flagSet
return {
icons,
toKebabCase
toKebabCase,
}
}
},
}
</script>
src/views/notifications/Modals.vue
+8 -9
View File
@@ -103,10 +103,10 @@
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
If you don’t provide an <code>onDimsiss</code> handler to the Modal
component, your modal will behave as though the backdrop is static,
meaning it will not close when clicking outside it. Click the button
below to try it.
If you set <code>backdrop</code> property to <code>static</code>,
your modal will behave as though the backdrop is static, meaning it
will not close when clicking outside it. Click the button below to
try it.
</p>
<DocsExample href="components/modal.html#static-backdrop">
<CButton
@@ -165,10 +165,9 @@
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
If you don’t provide an <code>onDimsiss</code> handler to the Modal
component, your modal will behave as though the backdrop is static,
meaning it will not close when clicking outside it. Click the button
below to try it.
When modals become too long for the user's viewport or device, they
scroll independent of the page itself. Try the demo below to see
what we mean.
</p>
<DocsExample href="components/modal.html#scrolling-long-content">
<CButton
@@ -593,11 +592,11 @@
<p>
This
<CButton
color="secondary"
v-c-popover="{
header: 'Popover title',
content: 'Popover body content is set in this property.',
}"
color="secondary"
>button</CButton
>
</p>
src/views/pages/Login.vue
+2 -2
View File
@@ -15,7 +15,7 @@
</CInputGroupText>
<CFormInput
placeholder="Username"
autoComplete="username"
autocomplete="username"
/>
</CInputGroup>
<CInputGroup class="mb-4">
@@ -25,7 +25,7 @@
<CFormInput
type="password"
placeholder="Password"
autoComplete="current-password"
autocomplete="current-password"
/>
</CInputGroup>
<CRow>
src/views/pages/Register.vue
+4 -4
View File
@@ -12,11 +12,11 @@
<CInputGroupText>
<CIcon icon="cil-user" />
</CInputGroupText>
<CFormInput placeholder="Username" autoComplete="username" />
<CFormInput placeholder="Username" autocomplete="username" />
</CInputGroup>
<CInputGroup class="mb-3">
<CInputGroupText>@</CInputGroupText>
<CFormInput placeholder="Email" autoComplete="email" />
<CFormInput placeholder="Email" autocomplete="email" />
</CInputGroup>
<CInputGroup class="mb-3">
<CInputGroupText>
@@ -25,7 +25,7 @@
<CFormInput
type="password"
placeholder="Password"
autoComplete="new-password"
autocomplete="new-password"
/>
</CInputGroup>
<CInputGroup class="mb-4">
@@ -35,7 +35,7 @@
<CFormInput
type="password"
placeholder="Repeat password"
autoComplete="new-password"
autocomplete="new-password"
/>
</CInputGroup>
<div class="d-grid">
src/views/theme/ColorTheme.vue
+4 -1
View File
@@ -12,7 +12,10 @@
export default {
name: 'ColorTheme',
props: {
color: String,
color: {
type: String,
default: undefined,
},
},
}
</script>
src/views/widgets/WidgetsStatsTypeA.vue
+3 -3
View File
@@ -369,11 +369,11 @@
</template>
<script>
import { CChart } from "@coreui/vue-chartjs";
import { CChart } from '@coreui/vue-chartjs'
export default {
name: "WidgetsStatsA",
name: 'WidgetsStatsA',
components: {
CChart,
},
};
}
</script>
src/views/widgets/WidgetsStatsTypeD.vue
+11 -11
View File
@@ -132,7 +132,7 @@
color="warning"
:values="[
{ title: 'events', value: '12+' },
{ title: 'meetings', value: '4' },
{ title: 'meetings', value: '4' },
]"
>
<template #icon
@@ -155,11 +155,11 @@
datasets: [
{
backgroundColor: 'rgba(255,255,255,.1)',
borderColor: 'rgba(255,255,255,.55)',
pointHoverBackgroundColor: '#fff',
borderWidth: 2,
data: [35, 23, 56, 22, 97, 23, 64],
fill: true,
borderColor: 'rgba(255,255,255,.55)',
pointHoverBackgroundColor: '#fff',
borderWidth: 2,
data: [35, 23, 56, 22, 97, 23, 64],
fill: true,
},
],
}"
@@ -172,9 +172,9 @@
</template>
<script>
import { CChart } from "@coreui/vue-chartjs";
import { CChart } from '@coreui/vue-chartjs'
export default {
name: "WidgetsStatsD",
name: 'WidgetsStatsD',
components: {
CChart,
},
@@ -205,11 +205,11 @@ export default {
display: false,
},
},
};
}
return {
options,
};
}
},
};
}
</script>
yarn.lock
+604 -836
View File
File diff suppressed because it is too large Load Diff