sean/manja_dev_ui
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

refactor: update example views

Browse Source
This commit is contained in:
Łukasz Holeczek
2021-08-30 14:47:25 +02:00
parent a759550fb5
commit 1f5cad7f05
42 changed files with 2501 additions and 2112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/Dashboard.vue
+73 -94
View File
@@ -2,15 +2,15 @@
<div>
<WidgetsStatsA />
<CRow>
<CCol md="12">
<CCol :md="12">
<CCard class="mb-4">
<CCardBody>
<CRow>
<CCol sm="5">
<CCol :sm="5">
<h4 id="traffic" class="card-title mb-0">Traffic</h4>
<div class="small text-medium-emphasis">January 2021</div>
</CCol>
<CCol sm="7" class="d-none d-md-block">
<CCol :sm="7" class="d-none d-md-block">
<CButton color="primary" class="float-end">
<CIcon icon="cil-cloud-download" />
</CButton>
@@ -91,14 +91,14 @@
</CRow>
<WidgetsStatsD />
<CRow>
<CCol md="12">
<CCol :md="12">
<CCard class="mb-4">
<CCardHeader> Traffic &amp; Sales </CCardHeader>
<CCardBody>
<CRow>
<CCol sm="12" lg="6">
<CCol :sm="12" :lg="6">
<CRow>
<CCol sm="6">
<CCol :sm="6">
<div
class="
border-start border-start-4 border-start-info
@@ -111,7 +111,7 @@
<div class="fs-5 fw-semibold">9,123</div>
</div>
</CCol>
<CCol sm="6">
<CCol :sm="6">
<div
class="
border-start border-start-4 border-start-danger
@@ -192,9 +192,9 @@
</div>
</div>
</CCol>
<CCol sm="12" lg="6">
<CCol :sm="12" :lg="6">
<CRow>
<CCol sm="6">
<CCol :sm="6">
<div
class="
border-start border-start-4 border-start-warning
@@ -207,7 +207,7 @@
<div class="fs-5 fw-semibold">78,623</div>
</div>
</CCol>
<CCol sm="6">
<CCol :sm="6">
<div
class="
border-start border-start-4 border-start-success
@@ -341,7 +341,7 @@
<CTableDataCell>
<div>{{ item.user.name }}</div>
<div class="small text-medium-emphasis">
<span>{{ item.user.new ? "New" : "Recurring" }}</span> |
<span>{{ item.user.new ? 'New' : 'Recurring' }}</span> |
{{ item.user.registered }}
</div>
</CTableDataCell>
@@ -388,139 +388,118 @@
</template>
<script>
import avatar1 from "./../assets/images/avatars/1.jpg";
import avatar2 from "./../assets/images/avatars/2.jpg";
import avatar3 from "./../assets/images/avatars/3.jpg";
import avatar4 from "./../assets/images/avatars/4.jpg";
import avatar5 from "./../assets/images/avatars/5.jpg";
import avatar6 from "./../assets/images/avatars/6.jpg";
import MainChartExample from "./charts/MainChartExample";
import avatar1 from './../assets/images/avatars/1.jpg'
import avatar2 from './../assets/images/avatars/2.jpg'
import avatar3 from './../assets/images/avatars/3.jpg'
import avatar4 from './../assets/images/avatars/4.jpg'
import avatar5 from './../assets/images/avatars/5.jpg'
import avatar6 from './../assets/images/avatars/6.jpg'
import MainChartExample from './charts/MainChartExample'
import WidgetsStatsA from './widgets/WidgetsStatsTypeA.vue'
import WidgetsStatsD from './widgets/WidgetsStatsTypeD.vue'
export default {
name: "Dashboard",
name: 'Dashboard',
components: {
MainChartExample,
WidgetsStatsA,
WidgetsStatsD,
},
data() {
return {
selected: "Month",
tableItems: [
setup() {
const tableItems = [
{
avatar: { src: avatar1, status: "success" },
avatar: { src: avatar1, status: 'success' },
user: {
name: "Yiorgos Avraamu",
name: 'Yiorgos Avraamu',
new: true,
registered: "Jan 1, 2021",
registered: 'Jan 1, 2021',
},
country: { name: "USA", flag: "cif-us" },
country: { name: 'USA', flag: 'cif-us' },
usage: {
value: 50,
period: "Jun 11, 2021 - Jul 10, 2021",
color: "success",
period: 'Jun 11, 2021 - Jul 10, 2021',
color: 'success',
},
payment: { name: "Mastercard", icon: "cib-cc-mastercard" },
activity: "10 sec ago",
payment: { name: 'Mastercard', icon: 'cib-cc-mastercard' },
activity: '10 sec ago',
},
{
avatar: { src: avatar2, status: "danger" },
avatar: { src: avatar2, status: 'danger' },
user: {
name: "Avram Tarasios",
name: 'Avram Tarasios',
new: false,
registered: "Jan 1, 2021",
registered: 'Jan 1, 2021',
},
country: { name: "Brazil", flag: "cif-br" },
country: { name: 'Brazil', flag: 'cif-br' },
usage: {
value: 22,
period: "Jun 11, 2021 - Jul 10, 2021",
color: "info",
period: 'Jun 11, 2021 - Jul 10, 2021',
color: 'info',
},
payment: { name: "Visa", icon: "cib-cc-visa" },
activity: "5 minutes ago",
payment: { name: 'Visa', icon: 'cib-cc-visa' },
activity: '5 minutes ago',
},
{
avatar: { src: avatar3, status: "warning" },
user: { name: "Quintin Ed", new: true, registered: "Jan 1, 2021" },
country: { name: "India", flag: "cif-in" },
avatar: { src: avatar3, status: 'warning' },
user: { name: 'Quintin Ed', new: true, registered: 'Jan 1, 2021' },
country: { name: 'India', flag: 'cif-in' },
usage: {
value: 74,
period: "Jun 11, 2021 - Jul 10, 2021",
color: "warning",
period: 'Jun 11, 2021 - Jul 10, 2021',
color: 'warning',
},
payment: { name: "Stripe", icon: "cib-cc-stripe" },
activity: "1 hour ago",
payment: { name: 'Stripe', icon: 'cib-cc-stripe' },
activity: '1 hour ago',
},
{
avatar: { src: avatar4, status: "secondary" },
user: { name: "Enéas Kwadwo", new: true, registered: "Jan 1, 2021" },
country: { name: "France", flag: "cif-fr" },
avatar: { src: avatar4, status: 'secondary' },
user: { name: 'Enéas Kwadwo', new: true, registered: 'Jan 1, 2021' },
country: { name: 'France', flag: 'cif-fr' },
usage: {
value: 98,
period: "Jun 11, 2021 - Jul 10, 2021",
color: "danger",
period: 'Jun 11, 2021 - Jul 10, 2021',
color: 'danger',
},
payment: { name: "PayPal", icon: "cib-cc-paypal" },
activity: "Last month",
payment: { name: 'PayPal', icon: 'cib-cc-paypal' },
activity: 'Last month',
},
{
avatar: { src: avatar5, status: "success" },
avatar: { src: avatar5, status: 'success' },
user: {
name: "Agapetus Tadeáš",
name: 'Agapetus Tadeáš',
new: true,
registered: "Jan 1, 2021",
registered: 'Jan 1, 2021',
},
country: { name: "Spain", flag: "cif-es" },
country: { name: 'Spain', flag: 'cif-es' },
usage: {
value: 22,
period: "Jun 11, 2021 - Jul 10, 2021",
color: "primary",
period: 'Jun 11, 2021 - Jul 10, 2021',
color: 'primary',
},
payment: { name: "Google Wallet", icon: "cib-cc-apple-pay" },
activity: "Last week",
payment: { name: 'Google Wallet', icon: 'cib-cc-apple-pay' },
activity: 'Last week',
},
{
avatar: { src: avatar6, status: "danger" },
avatar: { src: avatar6, status: 'danger' },
user: {
name: "Friderik Dávid",
name: 'Friderik Dávid',
new: true,
registered: "Jan 1, 2021",
registered: 'Jan 1, 2021',
},
country: { name: "Poland", flag: "cif-pl" },
country: { name: 'Poland', flag: 'cif-pl' },
usage: {
value: 43,
period: "Jun 11, 2021 - Jul 10, 2021",
color: "success",
period: 'Jun 11, 2021 - Jul 10, 2021',
color: 'success',
},
payment: { name: "Amex", icon: "cib-cc-amex" },
activity: "Last week",
payment: { name: 'Amex', icon: 'cib-cc-amex' },
activity: 'Last week',
},
],
tableFields: [
{ key: "avatar", label: "", _classes: "text-center" },
{ key: "user" },
{ key: "country", _classes: "text-center" },
{ key: "usage" },
{ key: "payment", label: "Payment method", _classes: "text-center" },
{ key: "activity" },
],
};
},
methods: {
color(value) {
let $color;
if (value <= 25) {
$color = "info";
} else if (value > 25 && value <= 50) {
$color = "success";
} else if (value > 50 && value <= 75) {
$color = "warning";
} else if (value > 75 && value <= 100) {
$color = "danger";
]
return {
tableItems,
}
return $color;
},
},
};
}
</script>
src/views/base/Accordion.vue
+9 -9
View File
@@ -20,7 +20,7 @@
:collapsed="activeKey !== 1"
@click="
() => {
activeKey === 1 ? (activeKey = 0) : (activeKey = 1);
activeKey === 1 ? (activeKey = 0) : (activeKey = 1)
}
"
>
@@ -47,7 +47,7 @@
:collapsed="activeKey !== 2"
@click="
() => {
activeKey === 2 ? (activeKey = 0) : (activeKey = 2);
activeKey === 2 ? (activeKey = 0) : (activeKey = 2)
}
"
>
@@ -74,7 +74,7 @@
:collapsed="activeKey !== 3"
@click="
() => {
activeKey === 3 ? (activeKey = 0) : (activeKey = 3);
activeKey === 3 ? (activeKey = 0) : (activeKey = 3)
}
"
>
@@ -120,7 +120,7 @@
() => {
flushActiveKey === 1
? (flushActiveKey = 0)
: (flushActiveKey = 1);
: (flushActiveKey = 1)
}
"
>
@@ -149,7 +149,7 @@
() => {
flushActiveKey === 2
? (flushActiveKey = 0)
: (flushActiveKey = 2);
: (flushActiveKey = 2)
}
"
>
@@ -178,7 +178,7 @@
() => {
flushActiveKey === 3
? (flushActiveKey = 0)
: (flushActiveKey = 3);
: (flushActiveKey = 3)
}
"
>
@@ -210,7 +210,7 @@
<script>
import { ref } from 'vue'
export default {
name: "Accordion",
name: 'Accordion',
setup() {
const activeKey = ref(1)
const flushActiveKey = ref(1)
@@ -219,6 +219,6 @@ export default {
activeKey,
flushActiveKey,
}
}
};
},
}
</script>
src/views/base/Breadcrumbs.vue
+2 -2
View File
@@ -60,6 +60,6 @@
<script>
export default {
name: "Breadcrumbs",
};
name: 'Breadcrumbs',
}
</script>
src/views/base/Cards.vue
+30 -19
View File
@@ -167,7 +167,7 @@
</p>
<DocsExample href="components/card/#list-groups">
<CRow>
<CCol lg="{4}">
<CCol :lg="4">
<CCard>
<CListGroup flush>
<CListGroupItem>Cras justo odio</CListGroupItem>
@@ -176,7 +176,7 @@
</CListGroup>
</CCard>
</CCol>
<CCol lg="{4}">
<CCol :lg="4">
<CCard>
<CCardHeader>Header</CCardHeader>
<CListGroup flush>
@@ -186,7 +186,7 @@
</CListGroup>
</CCard>
</CCol>
<CCol lg="{4}">
<CCol :lg="4">
<CCard>
<CListGroup flush>
<CListGroupItem>Cras justo odio</CListGroupItem>
@@ -342,7 +342,7 @@
</p>
<DocsExample href="components/card/#sizing">
<CRow>
<CCol sm="{6}">
<CCol :sm="6">
<CCard>
<CCardBody>
<CCardTitle>Special title treatment</CCardTitle>
@@ -354,7 +354,7 @@
</CCardBody>
</CCard>
</CCol>
<CCol sm="{6}">
<CCol :sm="6">
<CCard>
<CCardBody>
<CCardTitle>Special title treatment</CCardTitle>
@@ -542,7 +542,7 @@
</p>
<DocsExample href="components/card/#image-caps">
<CRow>
<CCol lg="{6}">
<CCol :lg="6">
<CCard class="mb-3">
<CCardImage
component="svg"
@@ -577,7 +577,7 @@
</CCardBody>
</CCard>
</CCol>
<CCol lg="{6}">
<CCol :lg="6">
<CCard class="mb-3">
<CCardBody>
<CCardTitle>Card title</CCardTitle>
@@ -638,7 +638,7 @@
color: 'danger', textColor: 'white' }, { color: 'warning' }, {
color: 'info', textColor: 'white' }, { color: 'light' }, { color:
'dark', textColor: 'white' }, ].map((item, index) => (
<CCol lg="{4}" key="{index}">
<CCol :lg="4" key="{index}">
<CCard
color="{item.color}"
textColor="{item.textColor}"
@@ -710,21 +710,32 @@
shown below.
</p>
<DocsExample href="components/card/#top-border">
<template v-for="(item) in [
<template
v-for="item in [
{ color: 'primary', textColor: 'primary' },
{ color: 'secondary', textColor: 'secondary' },
{ color: 'success', textColor: 'success' },
{ color: 'danger', textColor: 'danger' },
{ color: 'warning', textColor: 'warning' },
{ color: 'info', textColor: 'info' },
{ color: 'light'},
{ color: 'dark'}
]" :key="item.color">
<CCard :textColor="item.textColor" class="mb-3 border-top-3" :class="'border-top-' + item.color" style="max-width: 18rem">
{ color: 'light' },
{ color: 'dark' },
]"
:key="item.color"
>
<CCard
:textColor="item.textColor"
class="mb-3 border-top-3"
:class="'border-top-' + item.color"
style="max-width: 18rem"
>
<CCardHeader>Header</CCardHeader>
<CCardBody>
<CCardTitle>{{item.color}} card title</CCardTitle>
<CCardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CCardText>
<CCardTitle>{{ item.color }} card title</CCardTitle>
<CCardText
>Some quick example text to build on the card title and make
up the bulk of the card's content.</CCardText
>
</CCardBody>
</CCard>
</template>
@@ -975,7 +986,7 @@
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 }">
<CRow :xs="{ cols: 1, gutter: 4 }" :md="{ cols: 2 }">
<CCol xs>
<CCard>
<CCardImage
@@ -1123,7 +1134,7 @@
you&#39;ll see the fourth card wrap.
</p>
<DocsExample href="components/card/#grid-cards">
<CRow xs="{ cols: 1, gutter: 4 }" md="{ cols: 3 }">
<CRow :xs="{ cols: 1, gutter: 4 }" :md="{ cols: 3 }">
<CCol xs>
<CCard>
<CCardImage
@@ -1274,6 +1285,6 @@
<script>
export default {
name: "Cards",
};
name: 'Cards',
}
</script>
src/views/base/Collapses.vue
+11 -7
View File
@@ -60,7 +60,7 @@
Toggle both elements
</CButton>
<CRow>
<CCol xs="6">
<CCol :xs="6">
<CCollapse :visible="visibleA">
<CCard class="mt-3">
<CCardBody>
@@ -72,7 +72,7 @@
</CCard>
</CCollapse>
</CCol>
<CCol xs="6">
<CCol :xs="6">
<CCollapse :visible="visibleB">
<CCard class="mt-3">
<CCardBody>
@@ -93,13 +93,17 @@
</template>
<script>
import { ref } from 'vue'
export default {
name: 'Breadcrumbs',
data() {
name: 'Collapse',
setup() {
const visible = ref(false)
const visibleA = ref(false)
const visibleB = ref(false)
return {
visible: false,
visibleA: false,
visibleB: false,
visible,
visibleA,
visibleB,
}
},
}
src/views/base/Navbars.vue
+207 -104
View File
@@ -6,41 +6,46 @@
<strong>Vue Navbars</strong>
</CCardHeader>
<CCardBody>
<h4 class="mt-4">Basic usage of navbar</h4>
<DocsExample href="components/navbar.html#basic-usage">
<CNavbar expand="lg" colorScheme="light" class="bg-light">
<CContainer fluid>
<CNavbarBrand href="#">Navbar</CNavbarBrand>
<CNavbarToggler @click="visible = !visible"/>
<CNavbarToggler @click="visible = !visible" />
<CCollapse class="navbar-collapse" :visible="visible">
<CNavbarNav>
<CNavItem>
<CNavLink href="#" active>
Home
</CNavLink>
<CNavLink href="#" active> Home </CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CDropdown variant="nav-item" :popper="false">
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
<CDropdownToggle color="secondary"
>Dropdown button</CDropdownToggle
>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownItem href="#"
>Something else here</CDropdownItem
>
</CDropdownMenu>
</CDropdown>
<CNavItem>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
<CNavLink href="#" disabled> Disabled </CNavLink>
</CNavItem>
</CNavbarNav>
<CForm class="d-flex">
<CFormInput type="search" class="me-2" placeholder="Search"/>
<CButton type="submit" color="success" variant="outline">Search</CButton>
<CFormInput
type="search"
class="me-2"
placeholder="Search"
/>
<CButton type="submit" color="success" variant="outline"
>Search</CButton
>
</CForm>
</CCollapse>
</CContainer>
@@ -49,7 +54,7 @@
<h4 class="mt-4">Vue nav brand</h4>
<CRow>
<CCol md="6">
<CCol :md="6">
<DocsExample href="components/navbar.html#brand">
<CNavbar colorScheme="light" class="bg-light">
<CContainer fluid>
@@ -58,7 +63,7 @@
</CNavbar>
</DocsExample>
</CCol>
<CCol md="6">
<CCol :md="6">
<DocsExample href="components/navbar.html#brand">
<CNavbar colorScheme="light" class="bg-light">
<CContainer fluid>
@@ -67,23 +72,35 @@
</CNavbar>
</DocsExample>
</CCol>
<CCol md="6">
<CCol :md="6">
<DocsExample href="components/navbar.html#brand">
<CNavbar colorScheme="light" class="bg-light">
<CContainer fluid>
<CNavbarBrand href="#">
<img src="/images/brand/coreui-signet.svg" alt="" width="22" height="24"/>
<img
src="/images/brand/coreui-signet.svg"
alt=""
width="22"
height="24"
/>
</CNavbarBrand>
</CContainer>
</CNavbar>
</DocsExample>
</CCol>
<CCol md="6">
<CCol :md="6">
<DocsExample href="components/navbar.html#brand">
<CNavbar colorScheme="light" class="bg-light">
<CContainer fluid>
<CNavbarBrand href="#">
<img src="/images/brand/coreui-signet.svg" alt="" width="22" height="24" class="d-inline-block align-top"/> CoreUI
<img
src="/images/brand/coreui-signet.svg"
alt=""
width="22"
height="24"
class="d-inline-block align-top"
/>
CoreUI
</CNavbarBrand>
</CContainer>
</CNavbar>
@@ -96,13 +113,15 @@
<CNavbar expand="lg" colorScheme="light" class="bg-light">
<CContainer fluid>
<CNavbarBrand href="#">Navbar</CNavbarBrand>
<CNavbarToggler aria-label="Toggle navigation" aria-expanded={visible} @click="visible = !visible"/>
<CNavbarToggler
aria-label="Toggle navigation"
aria-expanded="{visible}"
@click="visible = !visible"
/>
<CCollapse class="navbar-collapse" :visible="visible">
<CNavbarNav>
<CNavItem>
<CNavLink href="#" active>
Home
</CNavLink>
<CNavLink href="#" active> Home </CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Features</CNavLink>
@@ -116,7 +135,9 @@
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownItem href="#"
>Something else here</CDropdownItem
>
</CDropdownMenu>
</CDropdown>
</CNavbarNav>
@@ -130,8 +151,10 @@
<CNavbar colorScheme="light" class="bg-light">
<CContainer fluid>
<CForm class="d-flex">
<CFormInput type="search" class="me-2" placeholder="Search"/>
<CButton type="submit" color="success" variant="outline">Search</CButton>
<CFormInput type="search" class="me-2" placeholder="Search" />
<CButton type="submit" color="success" variant="outline"
>Search</CButton
>
</CForm>
</CContainer>
</CNavbar>
@@ -142,12 +165,13 @@
<CContainer fluid>
<CNavbarBrand href="#">Navbar</CNavbarBrand>
<CForm class="d-flex">
<CFormInput type="search" class="me-2" placeholder="Search"/>
<CButton type="submit" color="success" variant="outline">Search</CButton>
<CFormInput type="search" class="me-2" placeholder="Search" />
<CButton type="submit" color="success" variant="outline"
>Search</CButton
>
</CForm>
</CContainer>
</CNavbar>
</DocsExample>
<h4 class="mt-4">Vue navbar with input group</h4>
<DocsExample href="components/navbar.html#forms">
@@ -155,7 +179,11 @@
<CForm class="container-fluid">
<CInputGroup>
<CInputGroupText id="basic-addon1">@</CInputGroupText>
<CFormInput placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"/>
<CFormInput
placeholder="Username"
aria-label="Username"
aria-describedby="basic-addon1"
/>
</CInputGroup>
</CForm>
</CNavbar>
@@ -165,8 +193,20 @@
<DocsExample href="components/navbar.html#forms">
<CNavbar colorScheme="light" class="bg-light">
<CForm class="container-fluid justify-content-start">
<CButton type="button" color="success" variant="outline" class="me-2">Main button</CButton>
<CButton type="button" color="secondary" variant="outline" size="sm">Smaller button</CButton>
<CButton
type="button"
color="success"
variant="outline"
class="me-2"
>Main button</CButton
>
<CButton
type="button"
color="secondary"
variant="outline"
size="sm"
>Smaller button</CButton
>
</CForm>
</CNavbar>
</DocsExample>
@@ -185,109 +225,143 @@
<CNavbar expand="lg" colorScheme="dark" class="bg-dark">
<CContainer fluid>
<CNavbarBrand href="#">Navbar</CNavbarBrand>
<CNavbarToggler aria-label="Toggle navigation" aria-expanded={visible} @click="visible = !visible"/>
<CNavbarToggler
aria-label="Toggle navigation"
aria-expanded="{visible}"
@click="visible = !visible"
/>
<CCollapse class="navbar-collapse" :visible="visible">
<CNavbarNav>
<CNavItem>
<CNavLink href="#" active>
Home
</CNavLink>
<CNavLink href="#" active> Home </CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CDropdown variant="nav-item" :popper="false">
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
<CDropdownToggle color="secondary"
>Dropdown button</CDropdownToggle
>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownItem href="#"
>Something else here</CDropdownItem
>
</CDropdownMenu>
</CDropdown>
<CNavItem>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
<CNavLink href="#" disabled> Disabled </CNavLink>
</CNavItem>
</CNavbarNav>
<CForm class="d-flex">
<CFormInput type="search" class="me-2" placeholder="Search"/>
<CButton type="submit" color="light" variant="outline">Search</CButton>
<CFormInput
type="search"
class="me-2"
placeholder="Search"
/>
<CButton type="submit" color="light" variant="outline"
>Search</CButton
>
</CForm>
</CCollapse>
</CContainer>
</CNavbar>
<br/>
<br />
<CNavbar expand="lg" colorScheme="dark" class="bg-primary">
<CContainer fluid>
<CNavbarBrand href="#">Navbar</CNavbarBrand>
<CNavbarToggler aria-label="Toggle navigation" aria-expanded={visible} @click="visible = !visible"/>
<CNavbarToggler
aria-label="Toggle navigation"
aria-expanded="{visible}"
@click="visible = !visible"
/>
<CCollapse class="navbar-collapse" :visible="visible">
<CNavbarNav>
<CNavItem>
<CNavLink href="#" active>
Home
</CNavLink>
<CNavLink href="#" active> Home </CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CDropdown variant="nav-item" :popper="false">
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
<CDropdownToggle color="secondary"
>Dropdown button</CDropdownToggle
>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownItem href="#"
>Something else here</CDropdownItem
>
</CDropdownMenu>
</CDropdown>
<CNavItem>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
<CNavLink href="#" disabled> Disabled </CNavLink>
</CNavItem>
</CNavbarNav>
<CForm class="d-flex">
<CFormInput type="search" class="me-2" placeholder="Search"/>
<CButton type="submit" color="light" variant="outline">Search</CButton>
<CFormInput
type="search"
class="me-2"
placeholder="Search"
/>
<CButton type="submit" color="light" variant="outline"
>Search</CButton
>
</CForm>
</CCollapse>
</CContainer>
</CNavbar>
<br/>
<CNavbar expand="lg" colorScheme="light" style="background-color:#e3f2fd;">
<br />
<CNavbar
expand="lg"
colorScheme="light"
style="background-color: #e3f2fd"
>
<CContainer fluid>
<CNavbarBrand href="#">Navbar</CNavbarBrand>
<CNavbarToggler aria-label="Toggle navigation" aria-expanded={visible} @click="visible = !visible"/>
<CNavbarToggler
aria-label="Toggle navigation"
aria-expanded="{visible}"
@click="visible = !visible"
/>
<CCollapse class="navbar-collapse" :visible="visible">
<CNavbarNav>
<CNavItem>
<CNavLink href="#" active>
Home
</CNavLink>
<CNavLink href="#" active> Home </CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CDropdown variant="nav-item" :popper="false">
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
<CDropdownToggle color="secondary"
>Dropdown button</CDropdownToggle
>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownItem href="#"
>Something else here</CDropdownItem
>
</CDropdownMenu>
</CDropdown>
<CNavItem>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
<CNavLink href="#" disabled> Disabled </CNavLink>
</CNavItem>
</CNavbarNav>
<CForm class="d-flex">
<CFormInput type="search" class="me-2" placeholder="Search"/>
<CButton type="submit" color="primary" variant="outline">Search</CButton>
<CFormInput
type="search"
class="me-2"
placeholder="Search"
/>
<CButton type="submit" color="primary" variant="outline"
>Search</CButton
>
</CForm>
</CCollapse>
</CContainer>
@@ -296,7 +370,7 @@
<h4 class="mt-4">Vue navbar placement</h4>
<CRow>
<CCol md="6">
<CCol :md="6">
<DocsExample href="components/navbar.html#placement">
<CNavbar colorScheme="light" class="bg-light">
<CContainer fluid>
@@ -305,27 +379,39 @@
</CNavbar>
</DocsExample>
</CCol>
<CCol md="6">
<CCol :md="6">
<DocsExample href="components/navbar.html#placement">
<CNavbar colorScheme="light" class="bg-light" placement="fixed-top">
<CNavbar
colorScheme="light"
class="bg-light"
placement="fixed-top"
>
<CContainer fluid>
<CNavbarBrand href="#">Fixed top</CNavbarBrand>
</CContainer>
</CNavbar>
</DocsExample>
</CCol>
<CCol md="6">
<CCol :md="6">
<DocsExample href="components/navbar.html#placement">
<CNavbar colorScheme="light" class="bg-light" placement="fixed-bottom">
<CNavbar
colorScheme="light"
class="bg-light"
placement="fixed-bottom"
>
<CContainer fluid>
<CNavbarBrand href="#">Fixed bottom</CNavbarBrand>
</CContainer>
</CNavbar>
</DocsExample>
</CCol>
<CCol md="6">
<CCol :md="6">
<DocsExample href="components/navbar.html#placement">
<CNavbar colorScheme="light" class="bg-light" placement="sticky-top">
<CNavbar
colorScheme="light"
class="bg-light"
placement="sticky-top"
>
<CContainer fluid>
<CNavbarBrand href="#">Sticky top</CNavbarBrand>
</CContainer>
@@ -339,27 +425,33 @@
<DocsExample href="components/navbar.html#forms">
<CNavbar expand="lg" colorScheme="light" class="bg-light">
<CContainer fluid>
<CNavbarToggler aria-label="Toggle navigation" aria-expanded={visible} @click="visible = !visible"/>
<CNavbarToggler
aria-label="Toggle navigation"
aria-expanded="{visible}"
@click="visible = !visible"
/>
<CCollapse class="navbar-collapse" :visible="visible">
<CNavbarBrand href="#">Hidden brand</CNavbarBrand>
<CNavbarNav class="me-auto mb-2 mb-lg-0">
<CNavItem>
<CNavLink href="#" active>
Home
</CNavLink>
<CNavLink href="#" active> Home </CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
<CNavLink href="#" disabled> Disabled </CNavLink>
</CNavItem>
</CNavbarNav>
<CForm class="d-flex">
<CFormInput type="search" class="me-2" placeholder="Search"/>
<CButton type="submit" color="success" variant="outline">Search</CButton>
<CFormInput
type="search"
class="me-2"
placeholder="Search"
/>
<CButton type="submit" color="success" variant="outline"
>Search</CButton
>
</CForm>
</CCollapse>
</CContainer>
@@ -370,26 +462,32 @@
<CNavbar expand="lg" colorScheme="light" class="bg-light">
<CContainer fluid>
<CNavbarBrand href="#">Navbar</CNavbarBrand>
<CNavbarToggler aria-label="Toggle navigation" aria-expanded={visible} @click="visible = !visible"/>
<CNavbarToggler
aria-label="Toggle navigation"
aria-expanded="{visible}"
@click="visible = !visible"
/>
<CCollapse class="navbar-collapse" :visible="visible">
<CNavbarNav class="me-auto mb-2 mb-lg-0">
<CNavItem>
<CNavLink href="#" active>
Home
</CNavLink>
<CNavLink href="#" active> Home </CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
<CNavLink href="#" disabled> Disabled </CNavLink>
</CNavItem>
</CNavbarNav>
<CForm class="d-flex">
<CFormInput type="search" class="me-2" placeholder="Search"/>
<CButton type="submit" color="success" variant="outline">Search</CButton>
<CFormInput
type="search"
class="me-2"
placeholder="Search"
/>
<CButton type="submit" color="success" variant="outline"
>Search</CButton
>
</CForm>
</CCollapse>
</CContainer>
@@ -400,33 +498,38 @@
<DocsExample href="components/navbar.html#forms">
<CNavbar expand="lg" colorScheme="light" class="bg-light">
<CContainer fluid>
<CNavbarToggler aria-label="Toggle navigation" aria-expanded={visible} @click="visible = !visible"/>
<CNavbarToggler
aria-label="Toggle navigation"
aria-expanded="{visible}"
@click="visible = !visible"
/>
<CNavbarBrand href="#">Navbar</CNavbarBrand>
<CCollapse class="navbar-collapse" :visible="visible">
<CNavbarNav class="me-auto mb-2 mb-lg-0">
<CNavItem>
<CNavLink href="#" active>
Home
</CNavLink>
<CNavLink href="#" active> Home </CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
<CNavLink href="#" disabled> Disabled </CNavLink>
</CNavItem>
</CNavbarNav>
<CForm class="d-flex">
<CFormInput type="search" class="me-2" placeholder="Search"/>
<CButton type="submit" color="success" variant="outline">Search</CButton>
<CFormInput
type="search"
class="me-2"
placeholder="Search"
/>
<CButton type="submit" color="success" variant="outline"
>Search</CButton
>
</CForm>
</CCollapse>
</CContainer>
</CNavbar>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -435,6 +538,6 @@
<script>
export default {
name: "Navbars",
};
name: 'Navbars',
}
</script>
src/views/base/Navs.vue
+77 -106
View File
@@ -10,17 +10,16 @@
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
The base <code>.nav</code> component is built with flexbox and provide a strong
foundation for building all types of navigation components. It includes some style
overrides (for working with lists), some link padding for larger hit areas, and basic
disabled styling.
The base <code>.nav</code> component is built with flexbox and
provide a strong foundation for building all types of navigation
components. It includes some style overrides (for working with
lists), some link padding for larger hit areas, and basic disabled
styling.
</p>
<DocsExample href="components/nav.html#base-nav">
<CNav>
<CNavItem>
<CNavLink href="#" active>
Active
</CNavLink>
<CNavLink href="#" active> Active </CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
@@ -29,29 +28,25 @@
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
<CNavLink href="#" disabled> Disabled </CNavLink>
</CNavItem>
</CNav>
</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 <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.
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
<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.
</p>
<DocsExample href="components/nav.html#base-nav">
<CNav component="nav">
<CNavLink href="#" active>
Active
</CNavLink>
<CNavLink href="#" active> Active </CNavLink>
<CNavLink href="#">Link</CNavLink>
<CNavLink href="#">Link</CNavLink>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
<CNavLink href="#" disabled> Disabled </CNavLink>
</CNav>
</DocsExample>
</CCardBody>
@@ -68,8 +63,8 @@
<a href="https://coreui.io/docs/layout/grid/#horizontal-alignment">
flexbox utilities
</a>
. By default, navs are left-aligned, but you can easily change them to center or right
aligned.
. By default, navs are left-aligned, but you can easily change them
to center or right aligned.
</p>
<p class="text-medium-emphasis small">
Centered with <code>.justify-content-center</code>:
@@ -77,9 +72,7 @@
<DocsExample href="components/nav.html#horizontal-alignment">
<CNav class="justify-content-center">
<CNavItem>
<CNavLink href="#" active>
Active
</CNavLink>
<CNavLink href="#" active> Active </CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
@@ -88,9 +81,7 @@
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
<CNavLink href="#" disabled> Disabled </CNavLink>
</CNavItem>
</CNav>
</DocsExample>
@@ -100,9 +91,7 @@
<DocsExample href="components/nav.html#base-nav">
<CNav class="justify-content-end">
<CNavItem>
<CNavLink href="#" active>
Active
</CNavLink>
<CNavLink href="#" active> Active </CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
@@ -111,9 +100,7 @@
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
<CNavLink href="#" disabled> Disabled </CNavLink>
</CNavItem>
</CNav>
</DocsExample>
@@ -127,16 +114,16 @@
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Stack your navigation by changing the flex item direction with the{' '}
<code>.flex-column</code> utility. Need to stack them on some viewports but not
others? Use the responsive versions (e.g., <code>.flex-sm-column</code>).
Stack your navigation by changing the flex item direction with the{'
'}
<code>.flex-column</code> utility. Need to stack them on some
viewports but not others? Use the responsive versions (e.g.,
<code>.flex-sm-column</code>).
</p>
<DocsExample href="components/nav.html#vertical">
<CNav class="flex-column">
<CNavItem>
<CNavLink href="#" active>
Active
</CNavLink>
<CNavLink href="#" active> Active </CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
@@ -145,9 +132,7 @@
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
<CNavLink href="#" disabled> Disabled </CNavLink>
</CNavItem>
</CNav>
</DocsExample>
@@ -161,15 +146,14 @@
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Takes the basic nav from above and adds the <code>variant=&#34;tabs&#34;</code> class
to generate a tabbed interface
Takes the basic nav from above and adds the
<code>variant=&#34;tabs&#34;</code> class to generate a tabbed
interface
</p>
<DocsExample href="components/nav.html#tabs">
<CNav variant="tabs">
<CNavItem>
<CNavLink href="#" active>
Active
</CNavLink>
<CNavLink href="#" active> Active </CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
@@ -178,9 +162,7 @@
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
<CNavLink href="#" disabled> Disabled </CNavLink>
</CNavItem>
</CNav>
</DocsExample>
@@ -194,14 +176,13 @@
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Take that same HTML, but use <code>variant=&#34;pills&#34;</code> instead:
Take that same HTML, but use
<code>variant=&#34;pills&#34;</code> instead:
</p>
<DocsExample href="components/nav.html#pills">
<CNav variant="pills">
<CNavItem>
<CNavLink href="#" active>
Active
</CNavLink>
<CNavLink href="#" active> Active </CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
@@ -210,9 +191,7 @@
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
<CNavLink href="#" disabled> Disabled </CNavLink>
</CNavItem>
</CNav>
</DocsExample>
@@ -226,17 +205,16 @@
</CCardHeader>
<CCardBody>
<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 <code>layout=&#34;fill&#34;</code>. Notice that all
horizontal space is occupied, but not every nav item has the same width.
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
<code>layout=&#34;fill&#34;</code>. Notice that all horizontal space
is occupied, but not every nav item has the same width.
</p>
<DocsExample href="components/nav.html#fill-and-justify">
<CNav variant="pills" layout="fill">
<CNavItem>
<CNavLink href="#" active>
Active
</CNavLink>
<CNavLink href="#" active> Active </CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
@@ -245,23 +223,20 @@
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
<CNavLink href="#" disabled> Disabled </CNavLink>
</CNavItem>
</CNav>
</DocsExample>
<p class="text-medium-emphasis small">
For equal-width elements, use <code>layout=&#34;justified&#34;</code>. All horizontal
space will be occupied by nav links, but unlike the .nav-fill above, every nav item
will be the same width.
For equal-width elements, use
<code>layout=&#34;justified&#34;</code>. All horizontal space will
be occupied by nav links, but unlike the .nav-fill above, every nav
item will be the same width.
</p>
<DocsExample href="components/nav.html#fill-and-justify">
<CNav variant="pills" layout="justified">
<CNavItem>
<CNavLink href="#" active>
Active
</CNavLink>
<CNavLink href="#" active> Active </CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
@@ -270,9 +245,7 @@
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
<CNavLink href="#" disabled> Disabled </CNavLink>
</CNavItem>
</CNav>
</DocsExample>
@@ -286,22 +259,24 @@
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
If you need responsive nav variations, consider using a series of{' '}
<a href="https://coreui.io/docs/utilities/flex">flexbox utilities</a>. While more
verbose, these utilities offer greater customization across responsive breakpoints. In
the example below, our nav will be stacked on the lowest breakpoint, then adapt to a
horizontal layout that fills the available width starting from the small breakpoint.
If you need responsive nav variations, consider using a series of{'
'}
<a href="https://coreui.io/docs/utilities/flex">flexbox utilities</a
>. While more verbose, these utilities offer greater customization
across responsive breakpoints. In the example below, our nav will be
stacked on the lowest breakpoint, then adapt to a horizontal layout
that fills the available width starting from the small breakpoint.
</p>
<DocsExample href="components/nav.html#working-with-flex-utilities">
<CNav component="nav" variant="pills" class="flex-column flex-sm-row">
<CNavLink href="#" active>
Active
</CNavLink>
<CNav
component="nav"
variant="pills"
class="flex-column flex-sm-row"
>
<CNavLink href="#" active> Active </CNavLink>
<CNavLink href="#">Link</CNavLink>
<CNavLink href="#">Link</CNavLink>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
<CNavLink href="#" disabled> Disabled </CNavLink>
</CNav>
</DocsExample>
</CCardBody>
@@ -316,12 +291,12 @@
<DocsExample href="components/nav.html#tabs-with-dropdowns">
<CNav>
<CNavItem>
<CNavLink href="#" active>
Active
</CNavLink>
<CNavLink href="#" active> Active </CNavLink>
</CNavItem>
<CDropdown variant="nav-item">
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
<CDropdownToggle color="secondary"
>Dropdown button</CDropdownToggle
>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
@@ -332,9 +307,7 @@
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
<CNavLink href="#" disabled> Disabled </CNavLink>
</CNavItem>
</CNav>
</DocsExample>
@@ -350,12 +323,12 @@
<DocsExample href="components/nav.html#pills-with-dropdowns">
<CNav variant="pills">
<CNavItem>
<CNavLink href="#" active>
Active
</CNavLink>
<CNavLink href="#" active> Active </CNavLink>
</CNavItem>
<CDropdown variant="nav-item">
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
<CDropdownToggle color="secondary"
>Dropdown button</CDropdownToggle
>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
@@ -366,9 +339,7 @@
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
<CNavLink href="#" disabled> Disabled </CNavLink>
</CNavItem>
</CNav>
</DocsExample>
@@ -380,6 +351,6 @@
<script>
export default {
name: "Navs",
};
name: 'Navs',
}
</script>
src/views/base/Paginations.vue
+7 -4
View File
@@ -67,7 +67,8 @@
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Pagination</strong> <small>Disabled and active states</small>
<strong>Vue Pagination</strong>
<small>Disabled and active states</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
@@ -84,7 +85,9 @@
disabled links and use custom JavaScript to fully disable their
functionality.
</p>
<DocsExample href="components/pagination.html#disabled-and-active-states">
<DocsExample
href="components/pagination.html#disabled-and-active-states"
>
<CPagination aria-label="Page navigation example">
<CPaginationItem aria-label="Previous" disabled>
<span aria-hidden="true">&laquo;</span>
@@ -176,6 +179,6 @@
<script>
export default {
name: "Paginations",
};
name: 'Paginations',
}
</script>
src/views/base/Progress.vue
+2 -2
View File
@@ -209,6 +209,6 @@
<script>
export default {
name: "Progress",
};
name: 'Progress',
}
</script>
src/views/base/Tables.vue
+5 -4
View File
@@ -451,8 +451,9 @@
</DocsExample>
<p class="text-medium-emphasis small">
<a href="https://coreui.io/docs/4.0/utilities/borders#border-color">
Border color utilities </a
> can be added to change colors:
Border color utilities
</a>
can be added to change colors:
</p>
<DocsExample href="components/table.html#bordered-tables">
<CTable bordered borderColor="primary">
@@ -990,6 +991,6 @@
<script>
export default {
name: "Tables",
};
name: 'Tables',
}
</script>
src/views/buttons/ButtonGroups.vue
+76 -45
View File
@@ -70,7 +70,8 @@
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Button Group</strong> <span>Checkbox and radio button groups</span>
<strong>Vue Button Group</strong>
<span>Checkbox and radio button groups</span>
</CCardHeader>
<CCardBody>
<p>
@@ -84,12 +85,24 @@
role="group"
aria-label="Basic checkbox toggle button group"
>
<CFormCheck :button="{ color: 'primary', variant: 'outline' }" id="btncheck1"
autoComplete="off" label="Checkbox 1" />
<CFormCheck :button="{ color: 'primary', variant: 'outline' }"
id="btncheck2" autoComplete="off" label="Checkbox 2" />
<CFormCheck :button="{ color: 'primary', variant: 'outline' }"
id="btncheck3" autoComplete="off" label="Checkbox 3" />
<CFormCheck
:button="{ color: 'primary', variant: 'outline' }"
id="btncheck1"
autoComplete="off"
label="Checkbox 1"
/>
<CFormCheck
:button="{ color: 'primary', variant: 'outline' }"
id="btncheck2"
autoComplete="off"
label="Checkbox 2"
/>
<CFormCheck
:button="{ color: 'primary', variant: 'outline' }"
id="btncheck3"
autoComplete="off"
label="Checkbox 3"
/>
</CButtonGroup>
</DocsExample>
<DocsExample
@@ -99,12 +112,29 @@
role="group"
aria-label="Basic checkbox toggle button group"
>
<CFormCheck type="radio" :button="{ color: 'primary', variant: 'outline' }"
name="btnradio" id="btnradio1" autoComplete="off" label="Radio 1"
/> <CFormCheck type="radio" :button="{ color: 'primary', variant: 'outline' }"
name="btnradio" id="btnradio2" autoComplete="off" label="Radio 2"
/> <CFormCheck type="radio" :button="{ color: 'primary', variant: 'outline' }"
name="btnradio" id="btnradio3" autoComplete="off" label="Radio 3"
<CFormCheck
type="radio"
:button="{ color: 'primary', variant: 'outline' }"
name="btnradio"
id="btnradio1"
autoComplete="off"
label="Radio 1"
/>
<CFormCheck
type="radio"
:button="{ color: 'primary', variant: 'outline' }"
name="btnradio"
id="btnradio2"
autoComplete="off"
label="Radio 2"
/>
<CFormCheck
type="radio"
:button="{ color: 'primary', variant: 'outline' }"
name="btnradio"
id="btnradio3"
autoComplete="off"
label="Radio 3"
/>
</CButtonGroup>
</DocsExample>
@@ -127,30 +157,18 @@
role="group"
aria-label="Toolbar with button groups"
>
<CButtonGroup
class="me-2"
role="group"
aria-label="First group"
>
<CButtonGroup class="me-2" role="group" aria-label="First group">
<CButton color="primary">1</CButton>
<CButton color="primary">2</CButton>
<CButton color="primary">3</CButton>
<CButton color="primary">4</CButton>
</CButtonGroup>
<CButtonGroup
class="me-2"
role="group"
aria-label="Second group"
>
<CButtonGroup class="me-2" role="group" aria-label="Second group">
<CButton color="secondary">5</CButton>
<CButton color="secondary">6</CButton>
<CButton color="secondary">7</CButton>
</CButtonGroup>
<CButtonGroup
class="me-2"
role="group"
aria-label="Third group"
>
<CButtonGroup class="me-2" role="group" aria-label="Third group">
<CButton color="info">8</CButton>
</CButtonGroup>
</CButtonToolbar>
@@ -166,11 +184,7 @@
role="group"
aria-label="Toolbar with button groups"
>
<CButtonGroup
class="me-2"
role="group"
aria-label="First group"
>
<CButtonGroup class="me-2" role="group" aria-label="First group">
<CButton color="secondary" variant="outline"> 1 </CButton>
<CButton color="secondary" variant="outline"> 2 </CButton>
<CButton color="secondary" variant="outline"> 3 </CButton>
@@ -190,11 +204,7 @@
role="group"
aria-label="Toolbar with button groups"
>
<CButtonGroup
class="me-2"
role="group"
aria-label="First group"
>
<CButtonGroup class="me-2" role="group" aria-label="First group">
<CButton color="secondary" variant="outline"> 1 </CButton>
<CButton color="secondary" variant="outline"> 2 </CButton>
<CButton color="secondary" variant="outline"> 3 </CButton>
@@ -373,13 +383,34 @@
role="group"
aria-label="Vertical button group"
>
<CFormCheck type="radio" :button="{ color: 'danger', variant: 'outline' }"
name="vbtnradio" id="vbtnradio1" autoComplete="off" label="Radio
1" defaultChecked /> <CFormCheck type="radio" :button="{ color: 'danger', variant: 'outline' }"
name="vbtnradio" id="vbtnradio2" autoComplete="off" label="Radio
2" /> <CFormCheck type="radio" :button="{ color: 'danger', variant: 'outline' }"
name="vbtnradio" id="vbtnradio3" autoComplete="off" label="Radio
3" />
<CFormCheck
type="radio"
:button="{ color: 'danger', variant: 'outline' }"
name="vbtnradio"
id="vbtnradio1"
autoComplete="off"
label="Radio
1"
defaultChecked
/>
<CFormCheck
type="radio"
:button="{ color: 'danger', variant: 'outline' }"
name="vbtnradio"
id="vbtnradio2"
autoComplete="off"
label="Radio
2"
/>
<CFormCheck
type="radio"
:button="{ color: 'danger', variant: 'outline' }"
name="vbtnradio"
id="vbtnradio3"
autoComplete="off"
label="Radio
3"
/>
</CButtonGroup>
</DocsExample>
</CCardBody>
src/views/buttons/Buttons.vue
+1 -1
View File
@@ -242,7 +242,7 @@
:disabled="state === 'disabled' ? true : false"
variant="ghost"
>
<CIcon icon="{cilBell}" class="me-2" />
<CIcon icon="cil-bell" class="me-2" />
{{ color.charAt(0).toUpperCase() + color.slice(1) }}
</CButton>
</template>
src/views/charts/CChartDoughnutExample.vue
+7 -14
View File
@@ -1,7 +1,5 @@
<template>
<CChartDoughnut
:data="defaultData"
/>
<CChartDoughnut :data="defaultData" />
</template>
<script>
@@ -10,22 +8,17 @@ export default {
name: 'CChartDoughnutExample',
components: { CChartDoughnut },
computed: {
defaultData () {
defaultData() {
return {
labels: ['VueJs', 'EmberJs', 'VueJs', 'AngularJs'],
datasets: [
{
backgroundColor: [
'#41B883',
'#E46651',
'#00D8FF',
'#DD1B16'
],
data: [40, 20, 80, 10]
}
backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
data: [40, 20, 80, 10],
},
],
}
}
}
},
},
}
</script>
src/views/charts/CChartLineExample.vue
+8 -8
View File
@@ -1,5 +1,5 @@
<template>
<CChartLine :data="defaultData"/>
<CChartLine :data="defaultData" />
</template>
<script>
@@ -8,23 +8,23 @@ export default {
name: 'CChartLineExample',
components: { CChartLine },
computed: {
defaultData () {
defaultData() {
return {
labels: ['months', 'a', 'b', 'c', 'd'],
datasets: [
{
label: 'Data One',
backgroundColor: 'rgb(228,102,81,0.9)',
data: [30, 39, 10, 50, 30, 70, 35]
data: [30, 39, 10, 50, 30, 70, 35],
},
{
label: 'Data Two',
backgroundColor: 'rgb(0,216,255,0.9)',
data: [39, 80, 40, 35, 40, 20, 45]
}
]
}
}
data: [39, 80, 40, 35, 40, 20, 45],
},
],
}
},
},
}
</script>
src/views/charts/CChartPieExample.vue
+7 -14
View File
@@ -1,7 +1,5 @@
<template>
<CChartPie
:data="defaultData"
/>
<CChartPie :data="defaultData" />
</template>
<script>
@@ -10,22 +8,17 @@ export default {
name: 'CChartPieExample',
components: { CChartPie },
computed: {
defaultData () {
defaultData() {
return {
labels: ['VueJs', 'EmberJs', 'VueJs', 'AngularJs'],
datasets: [
{
backgroundColor: [
'#41B883',
'#E46651',
'#00D8FF',
'#DD1B16'
backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
data: [40, 20, 80, 10],
},
],
data: [40, 20, 80, 10]
}
]
}
}
}
},
},
}
</script>
src/views/charts/CChartPolarAreaExample.vue
+17 -11
View File
@@ -1,7 +1,5 @@
<template>
<CChartPolarArea
:data="defaultData"
/>
<CChartPolarArea :data="defaultData" />
</template>
<script>
@@ -10,9 +8,17 @@ export default {
name: 'CChartPolarAreaExample',
components: { CChartPolarArea },
computed: {
defaultData () {
defaultData() {
return {
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
labels: [
'Eating',
'Drinking',
'Sleeping',
'Designing',
'Coding',
'Cycling',
'Running',
],
datasets: [
{
label: 'My First dataset',
@@ -21,7 +27,7 @@ export default {
pointBorderColor: '#fff',
pointHoverBackgroundColor: 'rgba(179,181,198,1)',
pointHoverBorderColor: 'rgba(179,181,198,1)',
data: [65, 59, 90, 81, 56, 55, 40]
data: [65, 59, 90, 81, 56, 55, 40],
},
{
label: 'My Second dataset',
@@ -30,14 +36,14 @@ export default {
pointBorderColor: '#fff',
pointHoverBackgroundColor: 'rgba(255,99,132,1)',
pointHoverBorderColor: 'rgba(255,99,132,1)',
data: [28, 48, 40, 19, 96, 27, 100]
}
data: [28, 48, 40, 19, 96, 27, 100],
},
],
options: {
aspectRatio: 1.5
}
}
aspectRatio: 1.5,
},
}
},
},
}
</script>
src/views/charts/CChartRadarExample.vue
+17 -11
View File
@@ -1,7 +1,5 @@
<template>
<CChartRadar
:data="defaultData"
/>
<CChartRadar :data="defaultData" />
</template>
<script>
@@ -10,9 +8,17 @@ export default {
name: 'CChartRadarExample',
components: { CChartRadar },
computed: {
defaultData () {
defaultData() {
return {
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
labels: [
'Eating',
'Drinking',
'Sleeping',
'Designing',
'Coding',
'Cycling',
'Running',
],
datasets: [
{
label: '2020',
@@ -23,7 +29,7 @@ export default {
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(179,181,198,1)',
tooltipLabelColor: 'rgba(179,181,198,1)',
data: [65, 59, 90, 81, 56, 55, 40]
data: [65, 59, 90, 81, 56, 55, 40],
},
{
label: '2021',
@@ -34,14 +40,14 @@ export default {
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(255,99,132,1)',
tooltipLabelColor: 'rgba(255,99,132,1)',
data: [28, 48, 40, 19, 96, 27, 100]
}
data: [28, 48, 40, 19, 96, 27, 100],
},
],
options: {
aspectRatio: 1.5
}
}
aspectRatio: 1.5,
},
}
},
},
}
</script>
src/views/charts/Charts.vue
+9 -11
View File
@@ -2,42 +2,40 @@
<CRow>
<CCol :md="6" class="mb-4">
<CCard>
<CCardHeader>
Line Chart
</CCardHeader>
<CCardHeader> Line Chart </CCardHeader>
<CCardBody>
<CChartLineExample/>
<CChartLineExample />
</CCardBody>
</CCard>
</CCol>
<CCol :md="6" class="mb-4">
<CCard>
<CCardHeader>Bar Chart</CCardHeader>
<CCardBody><CChartBarExample/></CCardBody>
<CCardBody><CChartBarExample /></CCardBody>
</CCard>
</CCol>
<CCol :md="6" class="mb-4">
<CCard>
<CCardHeader>Doughnut Chart</CCardHeader>
<CCardBody><CChartDoughnutExample/></CCardBody>
<CCardBody><CChartDoughnutExample /></CCardBody>
</CCard>
</CCol>
<CCol :md="6" class="mb-4">
<CCard>
<CCardHeader>Radar Chart</CCardHeader>
<CCardBody><CChartRadarExample/></CCardBody>
<CCardBody><CChartRadarExample /></CCardBody>
</CCard>
</CCol>
<CCol :md="6" class="mb-4">
<CCard>
<CCardHeader>Pie Chart</CCardHeader>
<CCardBody><CChartPieExample/></CCardBody>
<CCardBody><CChartPieExample /></CCardBody>
</CCard>
</CCol>
<CCol :md="6" class="mb-4">
<CCard>
<CCardHeader>Polar Area Chart</CCardHeader>
<CCardBody><CChartPolarAreaExample/></CCardBody>
<CCardBody><CChartPolarAreaExample /></CCardBody>
</CCard>
</CCol>
</CRow>
@@ -48,7 +46,7 @@ import * as Charts from './index.js'
export default {
name: 'Charts',
components: {
...Charts
}
...Charts,
},
}
</script>
src/views/charts/MainChartExample.vue
+23 -23
View File
@@ -10,27 +10,27 @@
</template>
<script>
import { CChart } from "@coreui/vue-chartjs";
import { getStyle, hexToRgba } from "@coreui/utils/src";
import { CChart } from '@coreui/vue-chartjs'
import { getStyle, hexToRgba } from '@coreui/utils/src'
function random(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
return Math.floor(Math.random() * (max - min + 1) + min)
}
export default {
name: "MainChartExample",
name: 'MainChartExample',
components: {
CChart,
},
setup() {
const data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: "My First dataset",
backgroundColor: hexToRgba(getStyle("--cui-info"), 10),
borderColor: getStyle("--cui-info"),
pointHoverBackgroundColor: getStyle("--cui-info"),
label: 'My First dataset',
backgroundColor: hexToRgba(getStyle('--cui-info'), 10),
borderColor: getStyle('--cui-info'),
pointHoverBackgroundColor: getStyle('--cui-info'),
borderWidth: 2,
data: [
random(50, 200),
@@ -44,10 +44,10 @@ export default {
fill: true,
},
{
label: "My Second dataset",
backgroundColor: "transparent",
borderColor: getStyle("--cui-success"),
pointHoverBackgroundColor: getStyle("--cui-success"),
label: 'My Second dataset',
backgroundColor: 'transparent',
borderColor: getStyle('--cui-success'),
pointHoverBackgroundColor: getStyle('--cui-success'),
borderWidth: 2,
data: [
random(50, 200),
@@ -60,16 +60,16 @@ export default {
],
},
{
label: "My Third dataset",
backgroundColor: "transparent",
borderColor: getStyle("--cui-danger"),
pointHoverBackgroundColor: getStyle("--cui-danger"),
label: 'My Third dataset',
backgroundColor: 'transparent',
borderColor: getStyle('--cui-danger'),
pointHoverBackgroundColor: getStyle('--cui-danger'),
borderWidth: 1,
borderDash: [8, 5],
data: [65, 65, 65, 65, 65, 65, 65],
},
],
};
}
const options = {
maintainAspectRatio: false,
@@ -104,18 +104,18 @@ export default {
hoverBorderWidth: 3,
},
},
};
}
return {
data,
options,
};
}
},
methods: {
aa(value, value2) {
console.log(value);
console.log(value2);
console.log(value)
console.log(value2)
},
},
};
}
</script>
src/views/charts/index.js
+1 -1
View File
@@ -11,5 +11,5 @@ export {
CChartDoughnutExample,
CChartRadarExample,
CChartPieExample,
CChartPolarAreaExample
CChartPolarAreaExample,
}
src/views/forms/ChecksRadios.vue
+2 -2
View File
@@ -406,6 +406,6 @@
<script>
export default {
name: "ChecksRadios",
};
name: 'ChecksRadios',
}
</script>
src/views/forms/FloatingLabels.vue
+57 -30
View File
@@ -1,5 +1,5 @@
<template>
<CRow>
<CRow>
<CCol :xs="12">
<DocsCallout name="Floating Label" href="forms/floating-labels.html" />
</CCol>
@@ -10,25 +10,36 @@
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Wrap a pair of <code>&lt;CFormInput&gt;</code> and <code>&lt;CFormLabel&gt;</code>
elements in <code>CFormFloating</code> to enable floating labels with textual form
fields. A <code>placeholder</code> is required on each <code>&lt;CFormInput&gt;</code>
as our method of CSS-only floating labels uses the <code>:placeholder-shown</code>
pseudo-element. Also note that the <code>&lt;CFormInput&gt;</code> must come first so
we can utilize a sibling selector (e.g., <code>~</code>).
Wrap a pair of <code>&lt;CFormInput&gt;</code> and
<code>&lt;CFormLabel&gt;</code> elements in
<code>CFormFloating</code> to enable floating labels with textual
form fields. A <code>placeholder</code> is required on each
<code>&lt;CFormInput&gt;</code> as our method of CSS-only floating
labels uses the <code>:placeholder-shown</code> pseudo-element. Also
note that the <code>&lt;CFormInput&gt;</code> must come first so we
can utilize a sibling selector (e.g., <code>~</code>).
</p>
<DocsExample href="forms/floating-labels.html">
<CFormFloating class="mb-3">
<CFormInput type="email" id="floatingInput" placeholder="name@example.com" />
<CFormInput
type="email"
id="floatingInput"
placeholder="name@example.com"
/>
<CFormLabel htmlFor="floatingInput">Email address</CFormLabel>
</CFormFloating>
<CFormFloating>
<CFormInput type="password" id="floatingPassword" placeholder="Password" />
<CFormInput
type="password"
id="floatingPassword"
placeholder="Password"
/>
<CFormLabel htmlFor="floatingPassword">Password</CFormLabel>
</CFormFloating>
</DocsExample>
<p class="text-medium-emphasis small">
When there&#39;s a <code>value</code> already defined, <code>&lt;CFormLabel&gt;</code>
When there&#39;s a <code>value</code> already defined,
<code>&lt;CFormLabel&gt;</code>
s will automatically adjust to their floated position.
</p>
<DocsExample href="forms/floating-labels.html">
@@ -39,7 +50,9 @@
placeholder="name@example.com"
defaultValue="test@example.com"
/>
<CFormLabel htmlFor="floatingInputValue">Input with value</CFormLabel>
<CFormLabel htmlFor="floatingInputValue"
>Input with value</CFormLabel
>
</CFormFloating>
</DocsExample>
</CCardBody>
@@ -52,8 +65,8 @@
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
By default, <code>&lt;CFormTextarea&gt;</code>s will be the same height as
<code>&lt;CFormInput&gt;</code>s.
By default, <code>&lt;CFormTextarea&gt;</code>s will be the same
height as <code>&lt;CFormInput&gt;</code>s.
</p>
<DocsExample href="forms/floating-labels.html#textareas">
<CFormFloating>
@@ -65,9 +78,9 @@
</CFormFloating>
</DocsExample>
<p class="text-medium-emphasis small">
To set a custom height on your <code>&lt;CFormTextarea;&gt;</code>, do not use the
<code>rows</code> attribute. Instead, set an explicit <code>height</code> (either
inline or via custom CSS).
To set a custom height on your <code>&lt;CFormTextarea;&gt;</code>,
do not use the <code>rows</code> attribute. Instead, set an explicit
<code>height</code> (either inline or via custom CSS).
</p>
<DocsExample href="forms/floating-labels.html#textareas">
<CFormFloating>
@@ -89,23 +102,30 @@
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Other than <code>&lt;CFormInput&gt;</code>, floating labels are only available on
<code>&lt;CFormSelect&gt;</code>s. They work in the same way, but unlike
<code>&lt;CFormInput&gt;</code>s, they&#39;ll always show the
<code>&lt;CFormLabel&gt;</code> in its floated state.
Other than <code>&lt;CFormInput&gt;</code>, floating labels are only
available on <code>&lt;CFormSelect&gt;</code>s. They work in the
same way, but unlike <code>&lt;CFormInput&gt;</code>s, they&#39;ll
always show the <code>&lt;CFormLabel&gt;</code> in its floated
state.
<strong>
Selects with <code>size</code> and <code>multiple</code> are not supported.
Selects with <code>size</code> and <code>multiple</code> are not
supported.
</strong>
</p>
<DocsExample href="forms/floating-labels.html#selects">
<CFormFloating>
<CFormSelect id="floatingSelect" aria-label="Floating label select example">
<CFormSelect
id="floatingSelect"
aria-label="Floating label select example"
>
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
<CFormLabel htmlFor="floatingSelect">Works with selects</CFormLabel>
<CFormLabel htmlFor="floatingSelect"
>Works with selects</CFormLabel
>
</CFormFloating>
</DocsExample>
</CCardBody>
@@ -118,8 +138,8 @@
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
When working with the CoreUI for Bootstrap grid system, be sure to place form elements
within column classes.
When working with the CoreUI for Bootstrap grid system, be sure to
place form elements within column classes.
</p>
<DocsExample href="forms/floating-labels.html#layout">
<CRow :xs="{ gutter: 2 }">
@@ -131,18 +151,25 @@
placeholder="name@example.com"
defaultValue="email@example.com"
/>
<CFormLabel htmlFor="floatingInputGrid">Email address</CFormLabel>
<CFormLabel htmlFor="floatingInputGrid"
>Email address</CFormLabel
>
</CFormFloating>
</CCol>
<CCol md>
<CFormFloating>
<CFormSelect id="floatingSelectGrid" aria-label="Floating label select example">
<CFormSelect
id="floatingSelectGrid"
aria-label="Floating label select example"
>
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
<CFormLabel htmlFor="floatingSelectGrid">Works with selects</CFormLabel>
<CFormLabel htmlFor="floatingSelectGrid"
>Works with selects</CFormLabel
>
</CFormFloating>
</CCol>
</CRow>
@@ -155,6 +182,6 @@
<script>
export default {
name: "FloatingLabels",
};
name: 'FloatingLabels',
}
</script>
src/views/forms/InputGroup.vue
+80 -44
View File
@@ -1,18 +1,18 @@
<template>
<CRow>
<CCol xs=12>
<CRow>
<CCol :xs="12">
<DocsCallout name="Input Group" href="forms/input-group.html" />
</CCol>
<CCol xs=12>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Input group</strong> <small>Basic example</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Place one add-on or button on either side of an input. You may also place one on both
sides of an input. Remember to place <code>&lt;CFormLabel&gt;</code>s outside the
input group.
Place one add-on or button on either side of an input. You may also
place one on both sides of an input. Remember to place
<code>&lt;CFormLabel&gt;</code>s outside the input group.
</p>
<DocsExample href="forms/input-group.html">
<CInputGroup class="mb-3">
@@ -33,7 +33,9 @@
</CInputGroup>
<CFormLabel for="basic-url">Your vanity URL</CFormLabel>
<CInputGroup class="mb-3">
<CInputGroupText id="basic-addon3">https://example.com/users/</CInputGroupText>
<CInputGroupText id="basic-addon3"
>https://example.com/users/</CInputGroupText
>
<CFormInput id="basic-url" aria-describedby="basic-addon3" />
</CInputGroup>
<CInputGroup class="mb-3">
@@ -54,16 +56,16 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs=12>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Input group</strong> <small>Wrapping</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Input groups wrap by default via <code>flex-wrap: wrap</code> in order to accommodate
custom form field validation within an input group. You may disable this with
<code>.flex-nowrap</code>.
Input groups wrap by default via <code>flex-wrap: wrap</code> in
order to accommodate custom form field validation within an input
group. You may disable this with <code>.flex-nowrap</code>.
</p>
<DocsExample href="forms/input-group.html#wrapping">
<CInputGroup class="flex-nowrap">
@@ -78,19 +80,23 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs=12>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Input group</strong> <small>Sizing</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Add the relative form sizing classes to the <code>&lt;CInputGroup&gt;</code> itself
and contents within will automatically resize—no need for repeating the form control
size classes on each element.
Add the relative form sizing classes to the
<code>&lt;CInputGroup&gt;</code> itself and contents within will
automatically resize—no need for repeating the form control size
classes on each element.
</p>
<p class="text-medium-emphasis small">
<strong>Sizing on the individual input group elements isn&#39;tsupported.</strong>
<strong
>Sizing on the individual input group elements
isn&#39;tsupported.</strong
>
</p>
<DocsExample href="forms/input-group.html#sizing">
<CInputGroup size="sm" class="mb-3">
@@ -101,7 +107,9 @@
/>
</CInputGroup>
<CInputGroup class="mb-3">
<CInputGroupText id="inputGroup-sizing-default">Default</CInputGroupText>
<CInputGroupText id="inputGroup-sizing-default"
>Default</CInputGroupText
>
<CFormInput
aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-default"
@@ -118,14 +126,15 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs=12>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Input group</strong> <small>Checkboxes and radios</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Place any checkbox or radio option within an input group&#39;s addon instead of text.
Place any checkbox or radio option within an input group&#39;s addon
instead of text.
</p>
<DocsExample href="forms/input-group.html#checkboxes-and-radios">
<CInputGroup class="mb-3">
@@ -152,16 +161,16 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs=12>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Input group</strong> <small>Multiple inputs</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
While multiple <code>&lt;CFormInput&gt;</code>s are supported visually, validation
styles are only available for input groups with a single
<code>&lt;CFormInput&gt;</code>.
While multiple <code>&lt;CFormInput&gt;</code>s are supported
visually, validation styles are only available for input groups with
a single <code>&lt;CFormInput&gt;</code>.
</p>
<DocsExample href="forms/input-group.html#multiple-inputs">
<CInputGroup>
@@ -173,24 +182,28 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs=12>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Input group</strong> <small>Multiple addons</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Multiple add-ons are supported and can be mixed with checkbox and radio input
versions..
Multiple add-ons are supported and can be mixed with checkbox and
radio input versions..
</p>
<DocsExample href="forms/input-group.html#multiple-addons">
<CInputGroup class="mb-3">
<CInputGroupText>$</CInputGroupText>
<CInputGroupText>0.00</CInputGroupText>
<CFormInput aria-label="Dollar amount (with dot and two decimal places)" />
<CFormInput
aria-label="Dollar amount (with dot and two decimal places)"
/>
</CInputGroup>
<CInputGroup>
<CFormInput aria-label="Dollar amount (with dot and two decimal places)" />
<CFormInput
aria-label="Dollar amount (with dot and two decimal places)"
/>
<CInputGroupText>$</CInputGroupText>
<CInputGroupText>0.00</CInputGroupText>
</CInputGroup>
@@ -198,19 +211,24 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs=12>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Input group</strong> <small>Button addons</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Multiple add-ons are supported and can be mixed with checkbox and radio input
versions..
Multiple add-ons are supported and can be mixed with checkbox and
radio input versions..
</p>
<DocsExample href="forms/input-group.html#button-addons">
<CInputGroup class="mb-3">
<CButton type="button" color="secondary" variant="outline" id="button-addon1">
<CButton
type="button"
color="secondary"
variant="outline"
id="button-addon1"
>
Button
</CButton>
<CFormInput
@@ -225,7 +243,12 @@
aria-label="Recipient's username"
aria-describedby="button-addon2"
/>
<CButton type="button" color="secondary" variant="outline" id="button-addon2">
<CButton
type="button"
color="secondary"
variant="outline"
id="button-addon2"
>
Button
</CButton>
</CInputGroup>
@@ -236,7 +259,10 @@
<CButton type="button" color="secondary" variant="outline">
Button
</CButton>
<CFormInput placeholder="" aria-label="Example text with two button addons" />
<CFormInput
placeholder=""
aria-label="Example text with two button addons"
/>
</CInputGroup>
<CInputGroup>
<CFormInput
@@ -254,7 +280,7 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs=12>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Input group</strong> <small>Buttons with dropdowns</small>
@@ -322,7 +348,7 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs=12>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Input group</strong> <small>Segmented buttons</small>
@@ -343,10 +369,14 @@
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CFormInput aria-label="Text input with segmented dropdown button" />
<CFormInput
aria-label="Text input with segmented dropdown button"
/>
</CInputGroup>
<CInputGroup>
<CFormInput aria-label="Text input with segmented dropdown button" />
<CFormInput
aria-label="Text input with segmented dropdown button"
/>
<CDropdown alignment="end" variant="input-group">
<CButton type="button" color="secondary" variant="outline">
Action
@@ -365,7 +395,7 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs=12>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Input group</strong> <small>Custom select</small>
@@ -398,7 +428,10 @@
<CButton type="button" color="secondary" variant="outline">
Button
</CButton>
<CFormSelect id="inputGroupSelect03" aria-label="Example select with button addon">
<CFormSelect
id="inputGroupSelect03"
aria-label="Example select with button addon"
>
<option>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
@@ -406,7 +439,10 @@
</CFormSelect>
</CInputGroup>
<CInputGroup>
<CFormSelect id="inputGroupSelect04" aria-label="Example select with button addon">
<CFormSelect
id="inputGroupSelect04"
aria-label="Example select with button addon"
>
<option>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
@@ -420,7 +456,7 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs=12>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Input group</strong> <small>Custom file input</small>
@@ -480,6 +516,6 @@
<script>
export default {
name: "InputGroup",
};
name: 'InputGroup',
}
</script>
src/views/forms/Layout.vue
+3 -3
View File
@@ -76,14 +76,14 @@
<CFormLabel for="inputCity">City</CFormLabel>
<CFormInput id="inputCity" />
</CCol>
<CCol md="{4}">
<CCol :md="4">
<CFormLabel for="inputState">State</CFormLabel>
<CFormSelect id="inputState">
<option>Choose...</option>
<option>...</option>
</CFormSelect>
</CCol>
<CCol md="{2}">
<CCol :md="2">
<CFormLabel for="inputZip">Zip</CFormLabel>
<CFormInput id="inputZip" />
</CCol>
@@ -266,7 +266,7 @@
</p>
<DocsExample href="forms/layout.html#column-sizing">
<CRow class="g-3">
<CCol sm="{7}">
<CCol :sm="7">
<CFormInput placeholder="City" aria-label="City" />
</CCol>
<CCol sm>
src/views/forms/Range.vue
+3 -5
View File
@@ -5,9 +5,7 @@
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Range</strong> <small></small>
</CCardHeader>
<CCardHeader> <strong>Vue Range</strong> <small></small> </CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Create custom
@@ -87,6 +85,6 @@
<script>
export default {
name: "Range",
};
name: 'Range',
}
</script>
src/views/forms/Select.vue
+2 -2
View File
@@ -111,6 +111,6 @@
<script>
export default {
name: "Select",
};
name: 'Select',
}
</script>
src/views/forms/Validation.vue
+36 -36
View File
@@ -28,7 +28,7 @@
:validated="validatedCustom01"
@submit="handleSubmitCustom01"
>
<CCol md="4">
<CCol :md="4">
<CFormLabel for="validationCustom01">Email</CFormLabel>
<CFormInput
id="validationCustom01"
@@ -37,7 +37,7 @@
/>
<CFormFeedback valid> Looks good! </CFormFeedback>
</CCol>
<CCol md="4">
<CCol :md="4">
<CFormLabel for="validationCustom02">Email</CFormLabel>
<CFormInput
id="validationCustom02"
@@ -46,7 +46,7 @@
/>
<CFormFeedback valid> Looks good! </CFormFeedback>
</CCol>
<CCol md="4">
<CCol :md="4">
<CFormLabel for="validationCustomUsername">Username</CFormLabel>
<CInputGroup class="has-validation">
<CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
@@ -61,14 +61,14 @@
</CFormFeedback>
</CInputGroup>
</CCol>
<CCol md="6">
<CCol :md="6">
<CFormLabel for="validationCustom03">City</CFormLabel>
<CFormInput id="validationCustom03" required />
<CFormFeedback invalid>
Please provide a valid city.
</CFormFeedback>
</CCol>
<CCol md="3">
<CCol :md="3">
<CFormLabel for="validationCustom04">City</CFormLabel>
<CFormSelect id="validationCustom04">
<option disabled>Choose...</option>
@@ -78,7 +78,7 @@
Please provide a valid city.
</CFormFeedback>
</CCol>
<CCol md="3">
<CCol :md="3">
<CFormLabel for="validationCustom05">City</CFormLabel>
<CFormInput id="validationCustom05" required />
<CFormFeedback invalid>
@@ -127,7 +127,7 @@
:validated="validatedDefault01"
@submit="handleSubmitDefault01"
>
<CCol md="4">
<CCol :md="4">
<CFormLabel for="validationDefault01">Email</CFormLabel>
<CFormInput
id="validationDefault01"
@@ -136,7 +136,7 @@
/>
<CFormFeedback valid> Looks good! </CFormFeedback>
</CCol>
<CCol md="4">
<CCol :md="4">
<CFormLabel for="validationDefault02">Email</CFormLabel>
<CFormInput
id="validationDefault02"
@@ -145,7 +145,7 @@
/>
<CFormFeedback valid> Looks good! </CFormFeedback>
</CCol>
<CCol md="4">
<CCol :md="4">
<CFormLabel for="validationDefaultUsername"
>Username</CFormLabel
>
@@ -162,14 +162,14 @@
</CFormFeedback>
</CInputGroup>
</CCol>
<CCol md="6">
<CCol :md="6">
<CFormLabel for="validationDefault03">City</CFormLabel>
<CFormInput id="validationDefault03" required />
<CFormFeedback invalid>
Please provide a valid city.
</CFormFeedback>
</CCol>
<CCol md="3">
<CCol :md="3">
<CFormLabel for="validationDefault04">City</CFormLabel>
<CFormSelect id="validationDefault04">
<option disabled>Choose...</option>
@@ -179,7 +179,7 @@
Please provide a valid city.
</CFormFeedback>
</CCol>
<CCol md="3">
<CCol :md="3">
<CFormLabel for="validationDefault05">City</CFormLabel>
<CFormInput id="validationDefault05" required />
<CFormFeedback invalid>
@@ -226,7 +226,7 @@
</p>
<DocsExample href="forms/validation.html#server-side">
<CForm class="row g-3 needs-validation">
<CCol :md="4">
<CCol ::md="4">
<CFormLabel htmlFor="validationServer01">Email</CFormLabel>
<CFormInput
type="text"
@@ -237,7 +237,7 @@
/>
<CFormFeedback valid>Looks good!</CFormFeedback>
</CCol>
<CCol :md="4">
<CCol ::md="4">
<CFormLabel htmlFor="validationServer02">Email</CFormLabel>
<CFormInput
type="text"
@@ -248,7 +248,7 @@
/>
<CFormFeedback valid>Looks good!</CFormFeedback>
</CCol>
<CCol :md="4">
<CCol ::md="4">
<CFormLabel htmlFor="validationServerUsername"
>Username</CFormLabel
>
@@ -432,7 +432,7 @@
:validated="validatedTooltip01"
@submit="handleSubmitTooltip01"
>
<CCol md="4" class="position-relative">
<CCol :md="4" class="position-relative">
<CFormLabel for="validationTooltip01">Email</CFormLabel>
<CFormInput
id="validationTooltip01"
@@ -441,7 +441,7 @@
/>
<CFormFeedback tooltip valid> Looks good! </CFormFeedback>
</CCol>
<CCol md="4" class="position-relative">
<CCol :md="4" class="position-relative">
<CFormLabel for="validationTooltip02">Email</CFormLabel>
<CFormInput
id="validationTooltip02"
@@ -450,7 +450,7 @@
/>
<CFormFeedback tooltip valid> Looks good! </CFormFeedback>
</CCol>
<CCol md="4" class="position-relative">
<CCol :md="4" class="position-relative">
<CFormLabel for="validationTooltipUsername"
>Username</CFormLabel
>
@@ -467,14 +467,14 @@
</CFormFeedback>
</CInputGroup>
</CCol>
<CCol md="6" class="position-relative">
<CCol :md="6" class="position-relative">
<CFormLabel for="validationTooltip03">City</CFormLabel>
<CFormInput id="validationTooltip03" required />
<CFormFeedback tooltip invalid>
Please provide a valid city.
</CFormFeedback>
</CCol>
<CCol md="3" class="position-relative">
<CCol :md="3" class="position-relative">
<CFormLabel for="validationTooltip04">City</CFormLabel>
<CFormSelect id="validationTooltip04" required>
<option disabled value="">Choose...</option>
@@ -484,7 +484,7 @@
Please provide a valid city.
</CFormFeedback>
</CCol>
<CCol md="3" class="position-relative">
<CCol :md="3" class="position-relative">
<CFormLabel for="validationTooltip05">City</CFormLabel>
<CFormInput id="validationTooltip05" required />
<CFormFeedback tooltip invalid>
@@ -504,39 +504,39 @@
<script>
export default {
name: "Validation",
name: 'Validation',
data: () => {
return {
validatedCustom01: null,
validatedDefault01: null,
validatedTooltip01: null,
};
}
},
methods: {
handleSubmitCustom01(event) {
const form = event.currentTarget;
const form = event.currentTarget
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
event.preventDefault()
event.stopPropagation()
}
this.validatedCustom01 = true;
this.validatedCustom01 = true
},
handleSubmitDefault01(event) {
const form = event.currentTarget;
const form = event.currentTarget
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
event.preventDefault()
event.stopPropagation()
}
this.validatedDefault01 = true;
this.validatedDefault01 = true
},
handleSubmitTooltip01(event) {
const form = event.currentTarget;
const form = event.currentTarget
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
event.preventDefault()
event.stopPropagation()
}
this.validatedTooltip01 = true;
this.validatedTooltip01 = true
},
},
};
}
</script>
src/views/icons/Brands.vue
+14 -15
View File
@@ -3,14 +3,14 @@
<CCol>
<CCard>
<CCardHeader>
<strong>Vue Brands</strong>
<strong>Vue CoreUI Brand Icons</strong>
</CCardHeader>
<CCardBody>
<CRow class="text-center">
<template v-for="(brand, brandName) in brands" :key="brandName">
<CCol class="mb-5" col="3" sm="2">
<CIcon size="lg" :content="brand" />
<div>{{ toKebabCase(brandName) }}</div>
<template v-for="(icon, iconName) in icons" :key="iconName">
<CCol class="mb-5" :xs="3" :sm="2">
<CIcon :content="icon" size="xxl" />
<div>{{ toKebabCase(iconName) }}</div>
</CCol>
</template>
</CRow>
@@ -21,18 +21,17 @@
</template>
<script>
import { brandSet as brands } from '@coreui/icons'
import { brandSet } from '@coreui/icons'
export default {
name: 'Brands',
data: function () {
name: 'CoreUIIcons',
setup() {
const toKebabCase = (str) => str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
const icons = brandSet
return {
brands: brands,
icons,
toKebabCase
}
}
},
methods: {
toKebabCase(str) {
return str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
},
},
}
</script>
src/views/icons/CoreUIIcons.vue
+10 -11
View File
@@ -7,9 +7,9 @@
</CCardHeader>
<CCardBody>
<CRow class="text-center">
<template v-for="(icon, iconName) in freeSet" :key="iconName">
<CCol class="mb-5" col="3" sm="2">
<CIcon :content="icon" size="lg" />
<template v-for="(icon, iconName) in icons" :key="iconName">
<CCol class="mb-5" :xs="3" :sm="2">
<CIcon :content="icon" size="xxl" />
<div>{{ toKebabCase(iconName) }}</div>
</CCol>
</template>
@@ -24,15 +24,14 @@
import { freeSet } from '@coreui/icons'
export default {
name: 'CoreUIIcons',
data: function () {
setup() {
const toKebabCase = (str) => str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
const icons = freeSet
return {
freeSet: freeSet,
icons,
toKebabCase
}
}
},
methods: {
toKebabCase(str) {
return str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
},
},
}
</script>
src/views/icons/Flags.vue
+13 -19
View File
@@ -3,19 +3,14 @@
<CCol>
<CCard>
<CCardHeader>
<strong>Vue Flags</strong>
<strong>Vue CoreUI Flag Icons</strong>
</CCardHeader>
<CCardBody>
<CRow class="text-center">
<!-- For using the flags inline with text add the classes
<code>.flag-icon</code> and <code>.flag-icon-xx</code>
(where xx is the ISO 3166-1-alpha-2 code of a country) to an empty
span. If you want to have a squared version flag then add the class
flag-icon-squared as well. -->
<template v-for="(flag, flagName) in flagSet" :key="flagName">
<CCol class="mb-5" col="3" sm="2">
<CIcon size="lg" :content="flag" />
<div>{{ toKebabCase(flagName) }}</div>
<template v-for="(icon, iconName) in icons" :key="iconName">
<CCol class="mb-5" :xs="3" :sm="2">
<CIcon :content="icon" size="xxl" />
<div>{{ toKebabCase(iconName) }}</div>
</CCol>
</template>
</CRow>
@@ -28,16 +23,15 @@
<script>
import { flagSet } from '@coreui/icons'
export default {
name: 'Flags',
data: function () {
name: 'CoreUIIcons',
setup() {
const toKebabCase = (str) => str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
const icons = flagSet
return {
flagSet: flagSet,
icons,
toKebabCase
}
}
},
methods: {
toKebabCase(str) {
return str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
},
},
}
</script>
src/views/notifications/Alerts.vue
+7 -7
View File
@@ -10,10 +10,10 @@
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Vue Alert is prepared for any length of text, as well as an
optional close button. For a styling, use one of the
<strong>required</strong> contextual <code>color</code> props
(e.g., <code>primary</code>). For inline dismissal, use the
Vue Alert is prepared for any length of text, as well as an optional
close button. For a styling, use one of the
<strong>required</strong> contextual <code>color</code> props (e.g.,
<code>primary</code>). For inline dismissal, use the
<a
href="https://coreui.io/vue/docs/4.0/components/alert.html#dismissing"
>
@@ -149,11 +149,11 @@
<script>
export default {
name: "Alerts",
name: 'Alerts',
methods: {
alert: function () {
alert("👋 Well, hi there! Thanks for dismissing me.");
alert('👋 Well, hi there! Thanks for dismissing me.')
},
},
};
}
</script>
src/views/notifications/Badges.vue
+2 -2
View File
@@ -93,6 +93,6 @@
<script>
export default {
name: "Badges",
};
name: 'Badges',
}
</script>
src/views/notifications/Modals.vue
+33 -16
View File
@@ -1024,25 +1024,42 @@
</template>
<script>
import { ref } from 'vue'
export default {
name: 'Modals',
data: function () {
setup() {
const visibleLiveDemo = ref(false)
const visibleStaticBackdropDemo = ref(false)
const visibleScrollingLongContentDemo = ref(false)
const visibleScrollableDemo = ref(false)
const visibleVerticallyCenteredDemo = ref(false)
const visibleVerticallyCenteredScrollableDemo = ref(false)
const xlDemo = ref(false)
const lgDemo = ref(false)
const smDemo = ref(false)
const fullscreenDemo = ref(false)
const fullscreenSmDemo = ref(false)
const fullscreenMdDemo = ref(false)
const fullscreenLgDemo = ref(false)
const fullscreenXlDemo = ref(false)
const fullscreenXxlDemo = ref(false)
return {
visibleLiveDemo: false,
visibleStaticBackdropDemo: false,
visibleScrollingLongContentDemo: false,
visibleScrollableDemo: false,
visibleVerticallyCenteredDemo: false,
visibleVerticallyCenteredScrollableDemo: false,
xlDemo: false,
lgDemo: false,
smDemo: false,
fullscreenDemo: false,
fullscreenSmDemo: false,
fullscreenMdDemo: false,
fullscreenLgDemo: false,
fullscreenXlDemo: false,
fullscreenXxlDemo: false,
visibleLiveDemo,
visibleStaticBackdropDemo,
visibleScrollingLongContentDemo,
visibleScrollableDemo,
visibleVerticallyCenteredDemo,
visibleVerticallyCenteredScrollableDemo,
xlDemo,
lgDemo,
smDemo,
fullscreenDemo,
fullscreenSmDemo,
fullscreenMdDemo,
fullscreenLgDemo,
fullscreenXlDemo,
fullscreenXxlDemo,
}
},
}
src/views/pages/Login.vue
+70
View File
@@ -0,0 +1,70 @@
<template>
<div class="bg-light min-vh-100 d-flex flex-row align-items-center">
<CContainer>
<CRow class="justify-content-center">
<CCol :md="8">
<CCardGroup>
<CCard class="p-4">
<CCardBody>
<CForm>
<h1>Login</h1>
<p class="text-medium-emphasis">Sign In to your account</p>
<CInputGroup class="mb-3">
<CInputGroupText>
<CIcon icon="cil-user" />
</CInputGroupText>
<CFormInput
placeholder="Username"
autoComplete="username"
/>
</CInputGroup>
<CInputGroup class="mb-4">
<CInputGroupText>
<CIcon icon="cil-lock-locked" />
</CInputGroupText>
<CFormInput
type="password"
placeholder="Password"
autoComplete="current-password"
/>
</CInputGroup>
<CRow>
<CCol :xs="6">
<CButton color="primary" class="px-4"> Login </CButton>
</CCol>
<CCol :xs="6" class="text-right">
<CButton color="link" class="px-0">
Forgot password?
</CButton>
</CCol>
</CRow>
</CForm>
</CCardBody>
</CCard>
<CCard class="text-white bg-primary py-5" style="width: 44%">
<CCardBody class="text-center">
<div>
<h2>Sign up</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.
</p>
<CButton color="light" variant="outline" class="mt-3">
Register Now!
</CButton>
</div>
</CCardBody>
</CCard>
</CCardGroup>
</CCol>
</CRow>
</CContainer>
</div>
</template>
<script>
export default {
name: 'Login',
}
</script>
src/views/pages/Page404.vue
+30
View File
@@ -0,0 +1,30 @@
<template>
<div class="bg-light min-vh-100 d-flex flex-row align-items-center">
<CContainer>
<CRow class="justify-content-center">
<CCol :md="6">
<div class="clearfix">
<h1 class="float-start display-3 me-4">404</h1>
<h4 class="pt-3">Oops! You're lost.</h4>
<p class="text-medium-emphasis float-start">
The page you are looking for was not found.
</p>
</div>
<CInputGroup class="input-prepend">
<CInputGroupText>
<CIcon icon="cil-magnifying-glass" />
</CInputGroupText>
<CFormInput type="text" placeholder="What are you looking for?" />
<CButton color="info">Search</CButton>
</CInputGroup>
</CCol>
</CRow>
</CContainer>
</div>
</template>
<script>
export default {
name: 'Page404',
}
</script>
src/views/pages/Page500.vue
+30
View File
@@ -0,0 +1,30 @@
<template>
<div class="bg-light min-vh-100 d-flex flex-row align-items-center">
<CContainer>
<CRow class="justify-content-center">
<CCol :md="6">
<span class="clearfix">
<h1 class="float-start display-3 me-4">500</h1>
<h4 class="pt-3">Houston, we have a problem!</h4>
<p class="text-medium-emphasis float-start">
The page you are looking for is temporarily unavailable.
</p>
</span>
<CInputGroup class="input-prepend">
<CInputGroupText>
<CIcon icon="cil-magnifying-glass" />
</CInputGroupText>
<CFormInput type="text" placeholder="What are you looking for?" />
<CButton color="info">Search</CButton>
</CInputGroup>
</CCol>
</CRow>
</CContainer>
</div>
</template>
<script>
export default {
name: 'Page500',
}
</script>
src/views/pages/Register.vue
+57
View File
@@ -0,0 +1,57 @@
<template>
<div class="bg-light min-vh-100 d-flex flex-row align-items-center">
<CContainer>
<CRow class="justify-content-center">
<CCol :md="9" :lg="7" :xl="6">
<CCard class="mx-4">
<CCardBody class="p-4">
<CForm>
<h1>Register</h1>
<p class="text-medium-emphasis">Create your account</p>
<CInputGroup class="mb-3">
<CInputGroupText>
<CIcon icon="cil-user" />
</CInputGroupText>
<CFormInput placeholder="Username" autoComplete="username" />
</CInputGroup>
<CInputGroup class="mb-3">
<CInputGroupText>@</CInputGroupText>
<CFormInput placeholder="Email" autoComplete="email" />
</CInputGroup>
<CInputGroup class="mb-3">
<CInputGroupText>
<CIcon icon="cil-lock-locked" />
</CInputGroupText>
<CFormInput
type="password"
placeholder="Password"
autoComplete="new-password"
/>
</CInputGroup>
<CInputGroup class="mb-4">
<CInputGroupText>
<CIcon icon="cil-lock-locked" />
</CInputGroupText>
<CFormInput
type="password"
placeholder="Repeat password"
autoComplete="new-password"
/>
</CInputGroup>
<div class="d-grid">
<CButton color="success">Create Account</CButton>
</div>
</CForm>
</CCardBody>
</CCard>
</CCol>
</CRow>
</CContainer>
</div>
</template>
<script>
export default {
name: 'Register',
}
</script>
src/views/theme/ColorTheme.vue
+4 -6
View File
@@ -1,21 +1,19 @@
<template>
<CCol xl="2" md="4" sm="6" :xs="12" class="mb-4">
<CCol :xl="2" :md="4" :sm="6" :xs="12" class="mb-4">
<div
:class="['theme-color w-75 rounded mb-3', color]"
style="padding-top:75%;"
style="padding-top: 75%"
></div>
<slot></slot>
<ColorView/>
<ColorView />
</CCol>
</template>
<script>
//import ColorView from './ColorView'
export default {
name: 'ColorTheme',
// components: { ColorView },
props: {
color: String,
}
},
}
</script>
src/views/theme/Colors.vue
+16 -10
View File
@@ -2,18 +2,24 @@
<CRow>
<CCol>
<CCard>
<CCardHeader>
<CIcon icon="cil-drop"/> Theme colors
</CCardHeader>
<CCardHeader> <CIcon icon="cil-drop" /> Theme colors </CCardHeader>
<CCardBody>
<CRow>
<ColorTheme color="bg-primary">
<h6>Brand Primary Color</h6>
</ColorTheme>
<ColorTheme color="bg-secondary"><h6>Brand Secondary Color</h6></ColorTheme>
<ColorTheme color="bg-success"><h6>Brand Success Color</h6></ColorTheme>
<ColorTheme color="bg-danger"><h6>Brand Danger Color</h6></ColorTheme>
<ColorTheme color="bg-warning"><h6>Brand Warning Color</h6></ColorTheme>
<ColorTheme color="bg-secondary"
><h6>Brand Secondary Color</h6></ColorTheme
>
<ColorTheme color="bg-success"
><h6>Brand Success Color</h6></ColorTheme
>
<ColorTheme color="bg-danger"
><h6>Brand Danger Color</h6></ColorTheme
>
<ColorTheme color="bg-warning"
><h6>Brand Warning Color</h6></ColorTheme
>
<ColorTheme color="bg-info"><h6>Brand Info Color</h6></ColorTheme>
<ColorTheme color="bg-light"><h6>Brand Light Color</h6></ColorTheme>
<ColorTheme color="bg-dark"><h6>Brand Dark Color</h6></ColorTheme>
@@ -27,7 +33,7 @@
<script>
import ColorTheme from './ColorTheme'
export default {
name: "Colors",
components: { ColorTheme }
};
name: 'Colors',
components: { ColorTheme },
}
</script>
src/views/theme/Typography.vue
+77 -48
View File
@@ -2,12 +2,12 @@
<CRow>
<CCol>
<CCard>
<CCardHeader>
Headings
</CCardHeader>
<CCardHeader> Headings </CCardHeader>
<CCardBody>
<p>Documentation and examples for Bootstrap typography,
including global settings, headings, body text, lists, and more.</p>
<p>
Documentation and examples for Bootstrap typography, including
global settings, headings, body text, lists, and more.
</p>
<CTable>
<CTableHead>
<CTableRow>
@@ -24,7 +24,9 @@
</code>
</p>
</CTableDataCell>
<CTableDataCell><span class="h1">h1. Bootstrap heading</span></CTableDataCell>
<CTableDataCell
><span class="h1">h1. Bootstrap heading</span></CTableDataCell
>
</CTableRow>
<CTableRow>
<CTableDataCell>
@@ -34,7 +36,9 @@
</code>
</p>
</CTableDataCell>
<CTableDataCell><span class="h2">h2. Bootstrap heading</span></CTableDataCell>
<CTableDataCell
><span class="h2">h2. Bootstrap heading</span></CTableDataCell
>
</CTableRow>
<CTableRow>
<CTableDataCell>
@@ -44,7 +48,9 @@
</code>
</p>
</CTableDataCell>
<CTableDataCell><span class="h3">h3. Bootstrap heading</span></CTableDataCell>
<CTableDataCell
><span class="h3">h3. Bootstrap heading</span></CTableDataCell
>
</CTableRow>
<CTableRow>
<CTableDataCell>
@@ -54,7 +60,9 @@
</code>
</p>
</CTableDataCell>
<CTableDataCell><span class="h4">h4. Bootstrap heading</span></CTableDataCell>
<CTableDataCell
><span class="h4">h4. Bootstrap heading</span></CTableDataCell
>
</CTableRow>
<CTableRow>
<CTableDataCell>
@@ -64,7 +72,9 @@
</code>
</p>
</CTableDataCell>
<CTableDataCell><span class="h5">h5. Bootstrap heading</span></CTableDataCell>
<CTableDataCell
><span class="h5">h5. Bootstrap heading</span></CTableDataCell
>
</CTableRow>
<CTableRow>
<CTableDataCell>
@@ -74,16 +84,16 @@
</code>
</p>
</CTableDataCell>
<CTableDataCell><span class="h6">h6. Bootstrap heading</span></CTableDataCell>
<CTableDataCell
><span class="h6">h6. Bootstrap heading</span></CTableDataCell
>
</CTableRow>
</CTableBody>
</CTable>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
Headings
</CCardHeader>
<CCardHeader> Headings </CCardHeader>
<CCardBody>
<p>
<code class="highlighter-rouge">.h1</code> through
@@ -102,30 +112,36 @@
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
Display headings
</CCardHeader>
<CCardHeader> Display headings </CCardHeader>
<CCardBody>
<p>
Traditional heading elements are designed to work best in the meat
of your page content. When you need a heading to stand out,
consider using a <strong>display heading</strong>—a larger,
slightly more opinionated heading style.
of your page content. When you need a heading to stand out, consider
using a <strong>display heading</strong>—a larger, slightly more
opinionated heading style.
</p>
<div class="bd-example bd-example-type">
<CTable>
<CTableBody>
<CTableRow>
<CTableDataCell><span class="display-1">Display 1</span></CTableDataCell>
<CTableDataCell
><span class="display-1">Display 1</span></CTableDataCell
>
</CTableRow>
<CTableRow>
<CTableDataCell><span class="display-2">Display 2</span></CTableDataCell>
<CTableDataCell
><span class="display-2">Display 2</span></CTableDataCell
>
</CTableRow>
<CTableRow>
<CTableDataCell><span class="display-3">Display 3</span></CTableDataCell>
<CTableDataCell
><span class="display-3">Display 3</span></CTableDataCell
>
</CTableRow>
<CTableRow>
<CTableDataCell><span class="display-4">Display 4</span></CTableDataCell>
<CTableDataCell
><span class="display-4">Display 4</span></CTableDataCell
>
</CTableRow>
</CTableBody>
</CTable>
@@ -133,45 +149,53 @@
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
Inline text elements
</CCardHeader>
<CCardHeader> Inline text elements </CCardHeader>
<CCardBody>
<p>
Traditional heading elements are designed to work best in the meat
of your page content. When you need a heading to stand out,
consider using a <strong>display heading</strong>—a larger,
slightly more opinionated heading style.
of your page content. When you need a heading to stand out, consider
using a <strong>display heading</strong>—a larger, slightly more
opinionated heading style.
</p>
<div class="bd-example">
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>
<p>
<del>
This line of text is meant to be treated as deleted text.
</del></p>
<p><s>
</del>
</p>
<p>
<s>
This line of text is meant to be treated as no longer accurate.
</s></p>
<p><ins>
This line of text is meant to be treated as an addition to the document.
</ins></p>
</s>
</p>
<p>
<ins>
This line of text is meant to be treated as an addition to the
document.
</ins>
</p>
<p><u>This line of text will render as underlined</u></p>
<p><small>
<p>
<small>
This line of text is meant to be treated as fine print.
</small></p>
<p><sCTableRowong>This line rendered as bold text.</sCTableRowong></p>
</small>
</p>
<p>
<sCTableRowong>This line rendered as bold text.</sCTableRowong>
</p>
<p><em>This line rendered as italicized text.</em></p>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
Description list alignment
</CCardHeader>
<CCardHeader> Description list alignment </CCardHeader>
<CCardBody>
<p>
Align terms and descriptions horizontally by using our grid system’s
predefined classes (or semantic mixins). For longer terms, you can
optionally add a <code class="highlighter-rouge">.text-truncate</code>
optionally add a
<code class="highlighter-rouge">.text-truncate</code>
class to truncate the text with an ellipsis.
</p>
<div class="bd-example">
@@ -183,7 +207,10 @@
<dt class="col-sm-3">Euismod</dt>
<dd class="col-sm-9">
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
<p>
Vestibulum id ligula porta felis euismod semper eget lacinia
odio sem nec elit.
</p>
<p>Donec id elit non mi porta gravida at eget metus.</p>
</dd>
@@ -192,7 +219,9 @@
Etiam porta sem malesuada magna mollis euismod.
</dd>
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dt class="col-sm-3 text-truncate">
Truncated term is truncated
</dt>
<dd class="col-sm-9">
Fusce dapibus, tellus ac cursus commodo, tortor mauris
condimentum nibh, ut fermentum massa justo sit amet risus.
@@ -217,6 +246,6 @@
<script>
export default {
name: "Typography",
};
name: 'Typography',
}
</script>
src/views/widgets/Widgets.vue
+30 -30
View File
@@ -652,37 +652,37 @@
</template>
<script>
import { getStyle } from "@coreui/utils";
import { CChart } from "@coreui/vue-chartjs";
import WidgetsStatsA from "./WidgetsStatsTypeA.vue";
import WidgetsStatsD from "./WidgetsStatsTypeD.vue";
import Example from "../../components/DocsExample.vue";
import { getStyle } from '@coreui/utils'
import { CChart } from '@coreui/vue-chartjs'
import WidgetsStatsA from './WidgetsStatsTypeA.vue'
import WidgetsStatsD from './WidgetsStatsTypeD.vue'
import Example from '../../components/DocsExample.vue'
export default {
name: "Widgets",
name: 'Widgets',
components: {
CChart,
WidgetsStatsA,
WidgetsStatsD,
Example,
},
data() {
setup() {
const widgetStatsE = {
labels: [
"M",
"T",
"W",
"T",
"F",
"S",
"S",
"M",
"T",
"W",
"T",
"F",
"S",
"S",
"M",
'M',
'T',
'W',
'T',
'F',
'S',
'S',
'M',
'T',
'W',
'T',
'F',
'S',
'S',
'M',
],
optionsBar: {
maintainAspectRatio: false,
@@ -724,19 +724,19 @@ export default {
},
},
},
};
}
return {
getStyle,
widgetStatsE,
widgetProgressIconItems: [
{ color: "primary", icon: "cil-puzzle" },
{ color: "success", icon: "cil-speedometer" },
{ color: "danger", icon: "cil-cursor" },
{ color: "info", icon: "cil-drop" },
{ color: "secondary", icon: "cil-pencil" },
{ color: 'primary', icon: 'cil-puzzle' },
{ color: 'success', icon: 'cil-speedometer' },
{ color: 'danger', icon: 'cil-cursor' },
{ color: 'info', icon: 'cil-drop' },
{ color: 'secondary', icon: 'cil-pencil' },
],
};
}
},
};
}
</script>
src/views/widgets/WidgetsStatsTypeA.vue
+4 -4
View File
@@ -1,7 +1,7 @@
<template>
<CRow>
<CCol :xs="3">
<CWidgetStatsA class="mb-3" color="primary">
<CWidgetStatsA class="mb-4" color="primary">
<template #value
>26K
<span class="fs-6 fw-normal">
@@ -96,7 +96,7 @@
</CWidgetStatsA>
</CCol>
<CCol :xs="3">
<CWidgetStatsA class="mb-3" color="info">
<CWidgetStatsA class="mb-4" color="info">
<template #value
>$6.200
<span class="fs-6 fw-normal">
@@ -190,7 +190,7 @@
</CWidgetStatsA>
</CCol>
<CCol :xs="3">
<CWidgetStatsA class="mb-3" color="warning">
<CWidgetStatsA class="mb-4" color="warning">
<template #value
>2.49%
<span class="fs-6 fw-normal">
@@ -271,7 +271,7 @@
</CWidgetStatsA>
</CCol>
<CCol :xs="3">
<CWidgetStatsA class="mb-3" color="danger">
<CWidgetStatsA class="mb-4" color="danger">
<template #value
>44K
<span class="fs-6 fw-normal">