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

refactor: migrate to <script setup>

Browse Source
This commit is contained in:
mrholek
2024-04-29 13:51:42 +02:00
parent 86a084aa4f
commit 43745d958a
63 changed files with 1056 additions and 1754 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.eslintrc.js → .eslintrc.cjs
+2
View File
@@ -1,7 +1,9 @@
/* eslint-env node */
module.exports = {
extends: ["plugin:vue/vue3-essential", "eslint:recommended"],
rules: {
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
'vue/multi-word-component-names': 'off',
},
};
src/App.vue
+24 -26
View File
@@ -1,38 +1,36 @@
<template>
<router-view />
</template>
<script>
<script setup>
import { onBeforeMount } from 'vue'
import { useStore } from 'vuex'
import { useColorModes } from '@coreui/vue'
export default {
setup() {
const { isColorModeSet, setColorMode } = useColorModes(
'coreui-free-vue-admin-template-theme',
)
const store = useStore()
const { isColorModeSet, setColorMode } = useColorModes('coreui-free-vue-admin-template-theme')
const store = useStore()
onBeforeMount(() => {
const urlParams = new URLSearchParams(window.location.href.split('?')[1])
const theme =
urlParams.get('theme') &&
urlParams.get('theme').match(/^[A-Za-z0-9\s]+/)[0]
if (theme) {
setColorMode(theme)
return
}
onBeforeMount(() => {
const urlParams = new URLSearchParams(window.location.href.split('?')[1])
let theme = urlParams.get('theme')
if (isColorModeSet()) {
return
}
if (theme !== null && theme.match(/^[A-Za-z0-9\s]+/)) {
theme = theme.match(/^[A-Za-z0-9\s]+/)[0]
}
setColorMode(store.state.theme)
})
},
}
if (theme) {
setColorMode(theme)
return
}
if (isColorModeSet()) {
return
}
setColorMode(store.state.theme)
})
</script>
<template>
<router-view />
</template>
<style lang="scss">
// Import Main styles for this application
@import 'styles/style';
src/_nav.js
-17
View File
@@ -282,21 +282,4 @@ export default [
},
],
},
// {
// component: 'CNavItem',
// name: 'Download CoreUI',
// href: 'http://coreui.io/vue/',
// icon: { name: 'cil-cloud-download', class: 'text-white' },
// _class: 'bg-success text-white',
// target: '_blank'
// },
// {
// component: 'CNavItem',
// name: 'Try CoreUI PRO',
// href: 'http://coreui.io/pro/vue/',
// icon: { name: 'cil-layers', class: 'text-white' },
// _class: 'bg-danger text-white',
// target: '_blank'
// }
]
src/components/AppBreadcrumb.vue
+25 -34
View File
@@ -1,3 +1,28 @@
<script setup>
import { onMounted, ref } from 'vue'
import router from '@/router'
const breadcrumbs = ref()
const getBreadcrumbs = () => {
return router.currentRoute.value.matched.map((route) => {
return {
active: route.path === router.currentRoute.value.fullPath,
name: route.name,
path: `${router.options.history.base}${route.path}`,
}
})
}
router.afterEach(() => {
breadcrumbs.value = getBreadcrumbs()
})
onMounted(() => {
breadcrumbs.value = getBreadcrumbs()
})
</script>
<template>
<CBreadcrumb class="my-0">
<CBreadcrumbItem
@@ -10,37 +35,3 @@
</CBreadcrumbItem>
</CBreadcrumb>
</template>
<script>
import { onMounted, ref } from 'vue'
import router from '@/router'
export default {
name: 'AppBreadcrumb',
setup() {
const breadcrumbs = ref()
const getBreadcrumbs = () => {
return router.currentRoute.value.matched.map((route) => {
return {
active: route.path === router.currentRoute.value.fullPath,
name: route.name,
path: `${router.options.history.base}${route.path}`,
}
})
}
router.afterEach(() => {
breadcrumbs.value = getBreadcrumbs()
})
onMounted(() => {
breadcrumbs.value = getBreadcrumbs()
})
return {
breadcrumbs,
}
},
}
</script>
src/components/AppFooter.vue
-6
View File
@@ -12,9 +12,3 @@
</div>
</CFooter>
</template>
<script>
export default {
name: 'AppFooter',
}
</script>
src/components/AppHeader.vue
+20 -34
View File
@@ -1,3 +1,23 @@
<script setup>
import { onMounted, ref } from 'vue'
import { useColorModes } from '@coreui/vue'
import AppBreadcrumb from './AppBreadcrumb'
import AppHeaderDropdownAccnt from './AppHeaderDropdownAccnt'
const headerClassNames = ref('mb-4 p-0')
const { colorMode, setColorMode } = useColorModes('coreui-free-vue-admin-template-theme')
onMounted(() => {
document.addEventListener('scroll', () => {
if (document.documentElement.scrollTop > 0) {
headerClassNames.value = 'mb-4 p-0 shadow-sm'
} else {
headerClassNames.value = 'mb-4 p-0'
}
})
})
</script>
<template>
<CHeader position="sticky" :class="headerClassNames">
<CContainer class="border-bottom px-4" fluid>
@@ -83,37 +103,3 @@
</CContainer>
</CHeader>
</template>
<script>
import { onMounted, ref } from 'vue'
import { useColorModes } from '@coreui/vue'
import AppBreadcrumb from './AppBreadcrumb'
import AppHeaderDropdownAccnt from './AppHeaderDropdownAccnt'
export default {
name: 'AppHeader',
components: {
AppBreadcrumb,
AppHeaderDropdownAccnt,
},
setup() {
const headerClassNames = ref('mb-4 p-0')
const { colorMode, setColorMode } = useColorModes('coreui-free-vue-admin-template-theme')
onMounted(() => {
document.addEventListener('scroll', () => {
if (document.documentElement.scrollTop > 0) {
headerClassNames.value = 'mb-4 p-0 shadow-sm'
} else {
headerClassNames.value = 'mb-4 p-0'
}
})
})
return {
headerClassNames,
colorMode,
setColorMode,
}
},
}
</script>
src/components/AppHeaderDropdownAccnt.vue
+10 -25
View File
@@ -1,3 +1,9 @@
<script setup>
import avatar from '@/assets/images/avatars/8.jpg'
const itemsCount = 42
</script>
<template>
<CDropdown placement="bottom-end" variant="nav-item">
<CDropdownToggle class="py-0 pe-0" :caret="false">
@@ -32,12 +38,8 @@
>
Settings
</CDropdownHeader>
<CDropdownItem>
<CIcon icon="cil-user" /> Profile
</CDropdownItem>
<CDropdownItem>
<CIcon icon="cil-settings" /> Settings
</CDropdownItem>
<CDropdownItem> <CIcon icon="cil-user" /> Profile </CDropdownItem>
<CDropdownItem> <CIcon icon="cil-settings" /> Settings </CDropdownItem>
<CDropdownItem>
<CIcon icon="cil-dollar" /> Payments
<CBadge color="secondary" class="ms-auto">{{ itemsCount }}</CBadge>
@@ -47,25 +49,8 @@
<CBadge color="primary" class="ms-auto">{{ itemsCount }}</CBadge>
</CDropdownItem>
<CDropdownDivider />
<CDropdownItem>
<CIcon icon="cil-shield-alt" /> Lock Account
</CDropdownItem>
<CDropdownItem>
<CIcon icon="cil-lock-locked" /> Logout
</CDropdownItem>
<CDropdownItem> <CIcon icon="cil-shield-alt" /> Lock Account </CDropdownItem>
<CDropdownItem> <CIcon icon="cil-lock-locked" /> Logout </CDropdownItem>
</CDropdownMenu>
</CDropdown>
</template>
<script>
import avatar from '@/assets/images/avatars/8.jpg'
export default {
name: 'AppHeaderDropdownAccnt',
setup() {
return {
avatar: avatar,
itemsCount: 42,
}
},
}
</script>
src/components/AppSidebar.vue
+14 -25
View File
@@ -1,3 +1,17 @@
<script setup>
import { computed } from 'vue'
import { RouterLink } from 'vue-router'
import { useStore } from 'vuex'
import { AppSidebarNav } from './AppSidebarNav'
import { logo } from '@/assets/brand/logo'
import { sygnet } from '@/assets/brand/sygnet'
const store = useStore()
const sidebarUnfoldable = computed(() => store.state.sidebarUnfoldable)
const sidebarVisible = computed(() => store.state.sidebarVisible)
</script>
<template>
<CSidebar
class="border-end"
@@ -28,28 +42,3 @@
</CSidebarFooter>
</CSidebar>
</template>
<script>
import { computed } from 'vue'
import { RouterLink } from 'vue-router'
import { useStore } from 'vuex'
import { AppSidebarNav } from './AppSidebarNav'
import { logo } from '@/assets/brand/logo'
import { sygnet } from '@/assets/brand/sygnet'
export default {
name: 'AppSidebar',
components: {
AppSidebarNav,
RouterLink,
},
setup() {
const store = useStore()
return {
logo,
sygnet,
sidebarUnfoldable: computed(() => store.state.sidebarUnfoldable),
sidebarVisible: computed(() => store.state.sidebarVisible),
}
},
}
</script>
src/components/AppSidebarNav.js
+1
View File
@@ -143,4 +143,5 @@ const AppSidebarNav = defineComponent({
)
},
})
export { AppSidebarNav }
src/components/DocsExample.vue
+10 -19
View File
@@ -1,3 +1,13 @@
<script setup>
const props = defineProps({
href: String,
tabContentClass: String,
})
const url = `https://coreui.io/vue/docs/${props.href}`
const addClass = props.tabContentClass
</script>
<template>
<div class="example">
<CNav variant="underline-border">
@@ -21,22 +31,3 @@
</CTabContent>
</div>
</template>
<script>
export default {
name: 'DocsExample',
props: {
href: String,
tabContentClass: String,
},
setup(props) {
const url = `https://coreui.io/vue/docs/${props.href}`
const addClass = props.tabContentClass
return {
addClass,
url,
}
},
}
</script>
src/layouts/DefaultLayout.vue
+7 -16
View File
@@ -1,3 +1,10 @@
<script setup>
import { CContainer } from '@coreui/vue'
import AppFooter from '@/components/AppFooter.vue'
import AppHeader from '@/components/AppHeader.vue'
import AppSidebar from '@/components/AppSidebar.vue'
</script>
<template>
<div>
<AppSidebar />
@@ -12,19 +19,3 @@
</div>
</div>
</template>
<script>
import { CContainer } from '@coreui/vue'
import AppFooter from '@/components/AppFooter.vue'
import AppHeader from '@/components/AppHeader.vue'
import AppSidebar from '@/components/AppSidebar.vue'
export default {
name: 'DefaultLayout',
components: {
AppFooter,
AppHeader,
AppSidebar,
CContainer,
},
}
</script>
src/styles/style.scss
+1
View File
@@ -3,6 +3,7 @@
// Import styles
@import "@coreui/coreui/scss/coreui";
@import "@coreui/chartjs/scss/coreui-chartjs";
// Vendors
@import "vendors/simplebar";
src/views/base/Accordion.vue
+1 -16
View File
@@ -1,3 +1,4 @@
<template>
<CRow>
<CCol :xs="12">
@@ -176,19 +177,3 @@
</CCol>
</CRow>
</template>
<script>
import { ref } from 'vue'
export default {
name: 'Accordion',
setup() {
const activeKey = ref(1)
const flushActiveKey = ref(1)
return {
activeKey,
flushActiveKey,
}
},
}
</script>
src/views/base/Breadcrumbs.vue
-6
View File
@@ -54,9 +54,3 @@
</CCol>
</CRow>
</template>
<script>
export default {
name: 'Breadcrumbs',
}
</script>
src/views/base/Cards.vue
+6 -13
View File
@@ -1,3 +1,8 @@
<script setup>
import VueImg from '@/assets/images/vue.jpg'
</script>
<template>
<CRow>
<CCol :xs="12">
@@ -227,7 +232,7 @@
</p>
<DocsExample href="components/card.html/#header-and-footer">
<CCard>
<CCardHeader component="h5">Header</CCardHeader>
<CCardHeader as="h5">Header</CCardHeader>
<CCardBody>
<CCardTitle>Special title treatment</CCardTitle>
<CCardText>
@@ -968,15 +973,3 @@
</CCol>
</CRow>
</template>
<script>
import VueImg from '@/assets/images/vue.jpg'
export default {
name: 'Cards',
setup() {
return {
VueImg,
}
},
}
</script>
src/views/base/Carousels.vue
+7 -17
View File
@@ -1,3 +1,9 @@
<script setup>
import AngularImg from '@/assets/images/angular.jpg'
import ReactImg from '@/assets/images/react.jpg'
import VueImg from '@/assets/images/vue.jpg'
</script>
<template>
<CRow>
<CCol :xs="12">
@@ -82,7 +88,7 @@
<code>&lt;CCarouselCaption&gt;</code> element within any
<code>&lt;CCarouselItem&gt;</code>. They can be immediately hidden
on smaller viewports, as shown below, with optional
<a href="https://coreui.io/4.0/utilities/display"
<a href="https://coreui.io/docs/utilities/display"
>display utilities</a
>. We hide them with <code>.d-none</code> and draw them back on
medium-sized devices with <code>.d-md-block</code>.
@@ -175,19 +181,3 @@
</CCol>
</CRow>
</template>
<script>
import AngularImg from '@/assets/images/angular.jpg'
import ReactImg from '@/assets/images/react.jpg'
import VueImg from '@/assets/images/vue.jpg'
export default {
name: 'Carousels',
setup() {
return {
AngularImg,
ReactImg,
VueImg,
}
},
}
</script>
src/views/base/Collapses.vue
+29 -57
View File
@@ -1,3 +1,12 @@
<script setup>
import { ref } from 'vue'
const visible = ref(false)
const visibleA = ref(false)
const visibleB = ref(false)
const visibleHorizontal = ref(false)
</script>
<template>
<CRow>
<CCol :xs="12">
@@ -6,23 +15,16 @@
<strong>Vue Collapse</strong>
</CCardHeader>
<CCardBody>
<p class="text-body-secondary small">
You can use a link or a button component.
</p>
<p class="text-body-secondary small">You can use a link or a button component.</p>
<DocsExample href="components/collapse.html#example">
<CButton color="primary" href="#" @click="visible = !visible"
>Link</CButton
>
<CButton color="primary" @click="visible = !visible"
>Button</CButton
>
<CButton color="primary" href="#" @click="visible = !visible">Link</CButton>
<CButton color="primary" @click="visible = !visible">Button</CButton>
<CCollapse :visible="visible">
<CCard class="mt-3">
<CCardBody>
Anim pariatur cliche reprehenderit, enim eiusmod high life
accusamus terry richardson ad squid. Nihil anim keffiyeh
helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident.
</CCardBody>
</CCard>
</CCollapse>
@@ -30,15 +32,12 @@
</CCardBody>
</CCard>
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Collapse</strong> <small> Horizontal</small>
</CCardHeader>
<CCardHeader> <strong>Vue Collapse</strong> <small> Horizontal</small> </CCardHeader>
<CCardBody>
<p class="text-body-secondary small">
The collapse plugin also supports horizontal collapsing. Add the
<code>horizontal</code> property to transition the
<code>width</code> instead of <code>height</code> and set a
<code>width</code> on the immediate child element.
<code>horizontal</code> property to transition the <code>width</code> instead of
<code>height</code> and set a <code>width</code> on the immediate child element.
</p>
<DocsExample href="components/collapse.html#horizontal">
<CButton
@@ -53,8 +52,8 @@
<CCollapse horizontal :visible="visibleHorizontal">
<CCard style="width: 300px">
<CCardBody>
This is some placeholder content for a horizontal collapse.
It's hidden by default and shown when triggered.
This is some placeholder content for a horizontal collapse. It's hidden by
default and shown when triggered.
</CCardBody>
</CCard>
</CCollapse>
@@ -63,21 +62,15 @@
</CCardBody>
</CCard>
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Collapse</strong> <small> multi target</small>
</CCardHeader>
<CCardHeader> <strong>Vue Collapse</strong> <small> multi target</small> </CCardHeader>
<CCardBody>
<p class="text-body-secondary small">
A <code>&lt;CButton&gt;</code> can show and hide multiple elements.
</p>
<h4 class="mt-4">Toggle multiple targets</h4>
<DocsExample href="components/collapse.html#multiple-targets">
<CButton color="primary" @click="visibleA = !visibleA"
>Toggle first element</CButton
>
<CButton color="primary" @click="visibleB = !visibleB"
>Toggle second element</CButton
>
<CButton color="primary" @click="visibleA = !visibleA">Toggle first element</CButton>
<CButton color="primary" @click="visibleB = !visibleB">Toggle second element</CButton>
<CButton
color="primary"
@click="
@@ -94,10 +87,9 @@
<CCollapse :visible="visibleA">
<CCard class="mt-3">
<CCardBody>
Anim pariatur cliche reprehenderit, enim eiusmod high life
accusamus terry richardson ad squid. Nihil anim keffiyeh
helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes
anderson cred nesciunt sapiente ea proident.
</CCardBody>
</CCard>
</CCollapse>
@@ -106,10 +98,9 @@
<CCollapse :visible="visibleB">
<CCard class="mt-3">
<CCardBody>
Anim pariatur cliche reprehenderit, enim eiusmod high life
accusamus terry richardson ad squid. Nihil anim keffiyeh
helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes
anderson cred nesciunt sapiente ea proident.
</CCardBody>
</CCard>
</CCollapse>
@@ -121,22 +112,3 @@
</CCol>
</CRow>
</template>
<script>
import { ref } from 'vue'
export default {
name: 'Collapse',
setup() {
const visible = ref(false)
const visibleA = ref(false)
const visibleB = ref(false)
const visibleHorizontal = ref(false)
return {
visible,
visibleA,
visibleB,
visibleHorizontal,
}
},
}
</script>
src/views/base/ListGroups.vue
+10 -16
View File
@@ -86,19 +86,19 @@
</p>
<DocsExample href="components/list-group.html#links-and-buttons">
<CListGroup>
<CListGroupItem component="a" href="#" active>
<CListGroupItem as="a" href="#" active>
Cras justo odio
</CListGroupItem>
<CListGroupItem component="a" href="#">
<CListGroupItem as="a" href="#">
Dapibus ac facilisis in
</CListGroupItem>
<CListGroupItem component="a" href="#">
<CListGroupItem as="a" href="#">
Morbi leo risus
</CListGroupItem>
<CListGroupItem component="a" href="#">
<CListGroupItem as="a" href="#">
Porta ac consectetur ac
</CListGroupItem>
<CListGroupItem component="a" href="#" disabled>
<CListGroupItem as="a" href="#" disabled>
Vestibulum at eros
</CListGroupItem>
</CListGroup>
@@ -204,7 +204,7 @@
</p>
<DocsExample href="components/list-group.html#contextual-classes">
<CListGroup>
<CListGroupItem component="a" href="#"
<CListGroupItem as="a" href="#"
>Dapibus ac facilisis in</CListGroupItem
>
<CListGroupItem
@@ -219,7 +219,7 @@
'dark',
]"
:key="item"
component="a"
as="a"
href="#"
:color="item"
>A simple {{ item }} list group item</CListGroupItem
@@ -279,7 +279,7 @@
</p>
<DocsExample href="components/list-group.html#custom-content">
<CListGroup>
<CListGroupItem component="a" href="#" active>
<CListGroupItem as="a" href="#" active>
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
@@ -290,7 +290,7 @@
</p>
<small>Donec id elit non mi porta.</small>
</CListGroupItem>
<CListGroupItem component="a" href="#">
<CListGroupItem as="a" href="#">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small class="text-body-secondary">3 days ago</small>
@@ -303,7 +303,7 @@
>Donec id elit non mi porta.</small
>
</CListGroupItem>
<CListGroupItem component="a" href="#">
<CListGroupItem as="a" href="#">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small class="text-body-secondary">3 days ago</small>
@@ -355,9 +355,3 @@
</CCol>
</CRow>
</template>
<script>
export default {
name: 'ListGroups',
}
</script>
src/views/base/Navs.vue
+2 -8
View File
@@ -38,7 +38,7 @@
the extra markup.
</p>
<DocsExample href="components/nav.html#base-nav">
<CNav component="nav">
<CNav as="nav">
<CNavLink href="#" active> Active </CNavLink>
<CNavLink href="#">Link</CNavLink>
<CNavLink href="#">Link</CNavLink>
@@ -265,7 +265,7 @@
</p>
<DocsExample href="components/nav.html#working-with-flex-utilities">
<CNav
component="nav"
as="nav"
variant="pills"
class="flex-column flex-sm-row"
>
@@ -344,9 +344,3 @@
</CCol>
</CRow>
</template>
<script>
export default {
name: 'Navs',
}
</script>
src/views/base/Paginations.vue
-6
View File
@@ -173,9 +173,3 @@
</CCol>
</CRow>
</template>
<script>
export default {
name: 'Paginations',
}
</script>
src/views/base/Placeholders.vue
+7 -15
View File
@@ -1,3 +1,7 @@
<script setup>
import VueImg from '@/assets/images/vue.jpg'
</script>
<template>
<CRow>
<CCol :xs="12">
@@ -26,7 +30,7 @@
</CCard>
<CCard style="width: 18rem">
<CCardImage
component="svg"
as="svg"
orientation="top"
width="100%"
height="162"
@@ -160,11 +164,11 @@
something being <em>actively</em> loaded.
</p>
<DocsExample href="components/placeholder.html#animation">
<CPlaceholder component="p" animation="glow">
<CPlaceholder as="p" animation="glow">
<CPlaceholder :xs="12" />
</CPlaceholder>
<CPlaceholder component="p" animation="wave">
<CPlaceholder as="p" animation="wave">
<CPlaceholder :xs="12" />
</CPlaceholder>
</DocsExample>
@@ -173,15 +177,3 @@
</CCol>
</CRow>
</template>
<script>
import VueImg from '@/assets/images/vue.jpg'
export default {
name: 'Placeholders',
setup() {
return {
VueImg,
}
},
}
</script>
src/views/base/Popovers.vue
-6
View File
@@ -76,9 +76,3 @@
</CCol>
</CRow>
</template>
<script>
export default {
name: 'Popovers',
}
</script>
src/views/base/Progress.vue
+20 -11
View File
@@ -137,16 +137,32 @@
</p>
<DocsExample href="components/progress.html#striped">
<CProgress class="mb-3">
<CProgressBar color="success" variant="striped" :value="25" />
<CProgressBar
color="success"
variant="striped"
:value="25"
/>
</CProgress>
<CProgress class="mb-3">
<CProgressBar color="info" variant="striped" :value="50" />
<CProgressBar
color="info"
variant="striped"
:value="50"
/>
</CProgress>
<CProgress class="mb-3">
<CProgressBar color="warning" variant="striped" :value="75" />
<CProgressBar
color="warning"
variant="striped"
:value="75"
/>
</CProgress>
<CProgress class="mb-3">
<CProgressBar color="danger" variant="striped" :value="100" />
<CProgressBar
color="danger"
variant="striped"
:value="100"
/>
</CProgress>
</DocsExample>
</CCardBody>
@@ -203,10 +219,3 @@
</CCol>
</CRow>
</template>
<script>
export default {
// eslint-disable-next-line
name: 'Progress',
}
</script>
src/views/base/Spinners.vue
+4 -10
View File
@@ -91,17 +91,17 @@
</p>
<DocsExample href="components/spinner.html#buttons">
<CButton disabled>
<CSpinner component="span" size="sm" aria-hidden="true" />
<CSpinner as="span" size="sm" aria-hidden="true" />
</CButton>
<CButton disabled>
<CSpinner component="span" size="sm" aria-hidden="true" />
<CSpinner as="span" size="sm" aria-hidden="true" />
Loading...
</CButton>
</DocsExample>
<DocsExample href="components/spinner.html#buttons">
<CButton disabled>
<CSpinner
component="span"
as="span"
size="sm"
variant="grow"
aria-hidden="true"
@@ -109,7 +109,7 @@
</CButton>
<CButton disabled>
<CSpinner
component="span"
as="span"
size="sm"
variant="grow"
aria-hidden="true"
@@ -122,9 +122,3 @@
</CCol>
</CRow>
</template>
<script>
export default {
name: 'Spinners',
}
</script>
src/views/base/Tables.vue
-6
View File
@@ -985,9 +985,3 @@
</CCol>
</CRow>
</template>
<script>
export default {
name: 'Tables',
}
</script>
src/views/base/Tooltips.vue
-6
View File
@@ -72,9 +72,3 @@
</CCol>
</CRow>
</template>
<script>
export default {
name: 'Tooltips',
}
</script>
src/views/buttons/ButtonGroups.vue
-6
View File
@@ -415,9 +415,3 @@
</CCol>
</CRow>
</template>
<script>
export default {
name: 'ButtonGroups',
}
</script>
src/views/buttons/Buttons.vue
+6 -12
View File
@@ -122,24 +122,24 @@
meaning to assistive technologies such as screen readers.
</p>
<DocsExample href="components/button.html#button-components">
<CButton component="a" color="primary" href="#" role="button">
<CButton as="a" color="primary" href="#" role="button">
Link
</CButton>
<CButton type="submit" color="primary"> Button </CButton>
<CButton
component="input"
as="input"
type="button"
color="primary"
value="Input"
/>
<CButton
component="input"
as="input"
type="submit"
color="primary"
value="Submit"
/>
<CButton
component="input"
as="input"
type="reset"
color="primary"
value="Reset"
@@ -359,11 +359,11 @@
state of the component to assistive technologies.
</p>
<DocsExample href="components/button.html#disabled-state">
<CButton component="a" href="#" color="primary" size="lg" disabled>
<CButton as="a" href="#" color="primary" size="lg" disabled>
Primary link
</CButton>
<CButton
component="a"
as="a"
href="#"
color="secondary"
size="lg"
@@ -434,9 +434,3 @@
</CCol>
</CRow>
</template>
<script>
export default {
name: 'Buttons',
}
</script>
src/views/buttons/Dropdowns.vue
+1 -7
View File
@@ -225,7 +225,7 @@
class="collapse navbar-collapse"
>
<ul class="navbar-nav">
<CDropdown dark component="li" variant="nav-item">
<CDropdown dark as="li" variant="nav-item">
<CDropdownToggle>Dropdown</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
@@ -353,9 +353,3 @@
</CCol>
</CRow>
</template>
<script>
export default {
name: 'Dropdowns',
}
</script>
src/views/charts/CChartBarExample.vue
+27 -34
View File
@@ -1,38 +1,31 @@
<template>
<CChartBar :data="defaultData" />
</template>
<script>
<script setup>
import { CChartBar } from '@coreui/vue-chartjs'
export default {
name: 'CChartBarExample',
components: { CChartBar },
computed: {
defaultData() {
return {
labels: [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December',
],
datasets: [
{
label: 'GitHub Commits',
backgroundColor: '#f87979',
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 12],
},
],
}
const data = {
labels: [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December',
],
datasets: [
{
label: 'GitHub Commits',
backgroundColor: '#f87979',
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 12],
},
},
],
}
</script>
<template>
<CChartBar :data="data" />
</template>
src/views/charts/CChartDoughnutExample.vue
+13 -20
View File
@@ -1,24 +1,17 @@
<template>
<CChartDoughnut :data="defaultData" />
</template>
<script>
<script setup>
import { CChartDoughnut } from '@coreui/vue-chartjs'
export default {
name: 'CChartDoughnutExample',
components: { CChartDoughnut },
computed: {
defaultData() {
return {
labels: ['VueJs', 'EmberJs', 'VueJs', 'AngularJs'],
datasets: [
{
backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
data: [40, 20, 80, 10],
},
],
}
const data = {
labels: ['VueJs', 'EmberJs', 'VueJs', 'AngularJs'],
datasets: [
{
backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
data: [40, 20, 80, 10],
},
},
],
}
</script>
<template>
<CChartDoughnut :data="data" />
</template>
src/views/charts/CChartLineExample.vue
+19 -26
View File
@@ -1,30 +1,23 @@
<template>
<CChartLine :data="defaultData" />
</template>
<script>
<script setup>
import { CChartLine } from '@coreui/vue-chartjs'
export default {
name: 'CChartLineExample',
components: { CChartLine },
computed: {
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],
},
{
label: 'Data Two',
backgroundColor: 'rgb(0,216,255,0.9)',
data: [39, 80, 40, 35, 40, 20, 45],
},
],
}
const data = {
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],
},
},
{
label: 'Data Two',
backgroundColor: 'rgb(0,216,255,0.9)',
data: [39, 80, 40, 35, 40, 20, 45],
},
],
}
</script>
<template>
<CChartLine :data="data" />
</template>
src/views/charts/CChartPieExample.vue
+13 -20
View File
@@ -1,24 +1,17 @@
<template>
<CChartPie :data="defaultData" />
</template>
<script>
<script setup>
import { CChartPie } from '@coreui/vue-chartjs'
export default {
name: 'CChartPieExample',
components: { CChartPie },
computed: {
defaultData() {
return {
labels: ['VueJs', 'EmberJs', 'VueJs', 'AngularJs'],
datasets: [
{
backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
data: [40, 20, 80, 10],
},
],
}
const data = {
labels: ['VueJs', 'EmberJs', 'VueJs', 'AngularJs'],
datasets: [
{
backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
data: [40, 20, 80, 10],
},
},
],
}
</script>
<template>
<CChartPie :data="data" />
</template>
src/views/charts/CChartPolarAreaExample.vue
+29 -44
View File
@@ -1,49 +1,34 @@
<template>
<CChartPolarArea :data="defaultData" />
</template>
<script>
<script setup>
import { CChartPolarArea } from '@coreui/vue-chartjs'
export default {
name: 'CChartPolarAreaExample',
components: { CChartPolarArea },
computed: {
defaultData() {
return {
labels: [
'Eating',
'Drinking',
'Sleeping',
'Designing',
'Coding',
'Cycling',
'Running',
],
datasets: [
{
label: 'My First dataset',
backgroundColor: 'rgba(179,181,198,0.5)',
pointBackgroundColor: 'rgba(179,181,198,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: 'rgba(179,181,198,1)',
pointHoverBorderColor: 'rgba(179,181,198,1)',
data: [65, 59, 90, 81, 56, 55, 40],
},
{
label: 'My Second dataset',
backgroundColor: 'rgba(255,99,132,0.5)',
pointBackgroundColor: 'rgba(255,99,132,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: 'rgba(255,99,132,1)',
pointHoverBorderColor: 'rgba(255,99,132,1)',
data: [28, 48, 40, 19, 96, 27, 100],
},
],
options: {
aspectRatio: 1.5,
},
}
const data = {
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
datasets: [
{
label: 'My First dataset',
backgroundColor: 'rgba(179,181,198,0.5)',
pointBackgroundColor: 'rgba(179,181,198,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: 'rgba(179,181,198,1)',
pointHoverBorderColor: 'rgba(179,181,198,1)',
data: [65, 59, 90, 81, 56, 55, 40],
},
{
label: 'My Second dataset',
backgroundColor: 'rgba(255,99,132,0.5)',
pointBackgroundColor: 'rgba(255,99,132,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: 'rgba(255,99,132,1)',
pointHoverBorderColor: 'rgba(255,99,132,1)',
data: [28, 48, 40, 19, 96, 27, 100],
},
],
options: {
aspectRatio: 1.5,
},
}
</script>
<template>
<CChartPolarArea :data="data" />
</template>
src/views/charts/CChartRadarExample.vue
+30 -45
View File
@@ -1,53 +1,38 @@
<template>
<CChartRadar :data="defaultData" />
<CChartRadar :data="data" />
</template>
<script>
<script setup>
import { CChartRadar } from '@coreui/vue-chartjs'
export default {
name: 'CChartRadarExample',
components: { CChartRadar },
computed: {
defaultData() {
return {
labels: [
'Eating',
'Drinking',
'Sleeping',
'Designing',
'Coding',
'Cycling',
'Running',
],
datasets: [
{
label: '2020',
backgroundColor: 'rgba(179,181,198,0.2)',
borderColor: 'rgba(179,181,198,1)',
pointBackgroundColor: 'rgba(179,181,198,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(179,181,198,1)',
tooltipLabelColor: 'rgba(179,181,198,1)',
data: [65, 59, 90, 81, 56, 55, 40],
},
{
label: '2021',
backgroundColor: 'rgba(255,99,132,0.2)',
borderColor: 'rgba(255,99,132,1)',
pointBackgroundColor: 'rgba(255,99,132,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(255,99,132,1)',
tooltipLabelColor: 'rgba(255,99,132,1)',
data: [28, 48, 40, 19, 96, 27, 100],
},
],
options: {
aspectRatio: 1.5,
},
}
const data = {
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
datasets: [
{
label: '2020',
backgroundColor: 'rgba(179,181,198,0.2)',
borderColor: 'rgba(179,181,198,1)',
pointBackgroundColor: 'rgba(179,181,198,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(179,181,198,1)',
tooltipLabelColor: 'rgba(179,181,198,1)',
data: [65, 59, 90, 81, 56, 55, 40],
},
{
label: '2021',
backgroundColor: 'rgba(255,99,132,0.2)',
borderColor: 'rgba(255,99,132,1)',
pointBackgroundColor: 'rgba(255,99,132,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(255,99,132,1)',
tooltipLabelColor: 'rgba(255,99,132,1)',
data: [28, 48, 40, 19, 96, 27, 100],
},
],
options: {
aspectRatio: 1.5,
},
}
</script>
src/views/charts/Charts.vue
+11 -10
View File
@@ -1,3 +1,14 @@
<script setup>
import {
CChartLineExample,
CChartBarExample,
CChartDoughnutExample,
CChartRadarExample,
CChartPieExample,
CChartPolarAreaExample,
} from './index.js'
</script>
<template>
<CRow>
<CCol :md="6" class="mb-4">
@@ -40,13 +51,3 @@
</CCol>
</CRow>
</template>
<script>
import * as Charts from './index.js'
export default {
name: 'Charts',
components: {
...Charts,
},
}
</script>
src/views/dashboard/Dashboard.vue
+127 -144
View File
@@ -1,3 +1,130 @@
<script setup>
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 MainChart from './MainChart.vue'
import WidgetsStatsA from './../widgets/WidgetsStatsTypeA.vue'
import WidgetsStatsD from './../widgets/WidgetsStatsTypeD.vue'
const progressGroupExample1 = [
{ title: 'Monday', value1: 34, value2: 78 },
{ title: 'Tuesday', value1: 56, value2: 94 },
{ title: 'Wednesday', value1: 12, value2: 67 },
{ title: 'Thursday', value1: 43, value2: 91 },
{ title: 'Friday', value1: 22, value2: 73 },
{ title: 'Saturday', value1: 53, value2: 82 },
{ title: 'Sunday', value1: 9, value2: 69 },
]
const progressGroupExample2 = [
{ title: 'Male', icon: 'cil-user', value: 53 },
{ title: 'Female', icon: 'cil-user-female', value: 43 },
]
const progressGroupExample3 = [
{
title: 'Organic Search',
icon: 'cib-google',
percent: 56,
value: '191,235',
},
{ title: 'Facebook', icon: 'cib-facebook', percent: 15, value: '51,223' },
{ title: 'Twitter', icon: 'cib-twitter', percent: 11, value: '37,564' },
{ title: 'LinkedIn', icon: 'cib-linkedin', percent: 8, value: '27,319' },
]
const tableExample = [
{
avatar: { src: avatar1, status: 'success' },
user: {
name: 'Yiorgos Avraamu',
new: true,
registered: 'Jan 1, 2023',
},
country: { name: 'USA', flag: 'cif-us' },
usage: {
value: 50,
period: 'Jun 11, 2023 - Jul 10, 2023',
color: 'success',
},
payment: { name: 'Mastercard', icon: 'cib-cc-mastercard' },
activity: '10 sec ago',
},
{
avatar: { src: avatar2, status: 'danger' },
user: {
name: 'Avram Tarasios',
new: false,
registered: 'Jan 1, 2023',
},
country: { name: 'Brazil', flag: 'cif-br' },
usage: {
value: 22,
period: 'Jun 11, 2023 - Jul 10, 2023',
color: 'info',
},
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, 2023' },
country: { name: 'India', flag: 'cif-in' },
usage: {
value: 74,
period: 'Jun 11, 2023 - Jul 10, 2023',
color: 'warning',
},
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, 2023' },
country: { name: 'France', flag: 'cif-fr' },
usage: {
value: 98,
period: 'Jun 11, 2023 - Jul 10, 2023',
color: 'danger',
},
payment: { name: 'PayPal', icon: 'cib-cc-paypal' },
activity: 'Last month',
},
{
avatar: { src: avatar5, status: 'success' },
user: {
name: 'Agapetus Tadeáš',
new: true,
registered: 'Jan 1, 2023',
},
country: { name: 'Spain', flag: 'cif-es' },
usage: {
value: 22,
period: 'Jun 11, 2023 - Jul 10, 2023',
color: 'primary',
},
payment: { name: 'Google Wallet', icon: 'cib-cc-apple-pay' },
activity: 'Last week',
},
{
avatar: { src: avatar6, status: 'danger' },
user: {
name: 'Friderik Dávid',
new: true,
registered: 'Jan 1, 2023',
},
country: { name: 'Poland', flag: 'cif-pl' },
usage: {
value: 43,
period: 'Jun 11, 2023 - Jul 10, 2023',
color: 'success',
},
payment: { name: 'Amex', icon: 'cib-cc-amex' },
activity: 'Last week',
},
]
</script>
<template>
<div>
<WidgetsStatsA class="mb-4" />
@@ -208,147 +335,3 @@
</CRow>
</div>
</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 MainChart from './MainChart'
import WidgetsStatsA from './../widgets/WidgetsStatsTypeA.vue'
import WidgetsStatsD from './../widgets/WidgetsStatsTypeD.vue'
export default {
name: 'Dashboard',
components: {
MainChart,
WidgetsStatsA,
WidgetsStatsD,
},
setup() {
const progressGroupExample1 = [
{ title: 'Monday', value1: 34, value2: 78 },
{ title: 'Tuesday', value1: 56, value2: 94 },
{ title: 'Wednesday', value1: 12, value2: 67 },
{ title: 'Thursday', value1: 43, value2: 91 },
{ title: 'Friday', value1: 22, value2: 73 },
{ title: 'Saturday', value1: 53, value2: 82 },
{ title: 'Sunday', value1: 9, value2: 69 },
]
const progressGroupExample2 = [
{ title: 'Male', icon: 'cil-user', value: 53 },
{ title: 'Female', icon: 'cil-user-female', value: 43 },
]
const progressGroupExample3 = [
{
title: 'Organic Search',
icon: 'cib-google',
percent: 56,
value: '191,235',
},
{ title: 'Facebook', icon: 'cib-facebook', percent: 15, value: '51,223' },
{ title: 'Twitter', icon: 'cib-twitter', percent: 11, value: '37,564' },
{ title: 'LinkedIn', icon: 'cib-linkedin', percent: 8, value: '27,319' },
]
const tableExample = [
{
avatar: { src: avatar1, status: 'success' },
user: {
name: 'Yiorgos Avraamu',
new: true,
registered: 'Jan 1, 2023',
},
country: { name: 'USA', flag: 'cif-us' },
usage: {
value: 50,
period: 'Jun 11, 2023 - Jul 10, 2023',
color: 'success',
},
payment: { name: 'Mastercard', icon: 'cib-cc-mastercard' },
activity: '10 sec ago',
},
{
avatar: { src: avatar2, status: 'danger' },
user: {
name: 'Avram Tarasios',
new: false,
registered: 'Jan 1, 2023',
},
country: { name: 'Brazil', flag: 'cif-br' },
usage: {
value: 22,
period: 'Jun 11, 2023 - Jul 10, 2023',
color: 'info',
},
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, 2023' },
country: { name: 'India', flag: 'cif-in' },
usage: {
value: 74,
period: 'Jun 11, 2023 - Jul 10, 2023',
color: 'warning',
},
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, 2023' },
country: { name: 'France', flag: 'cif-fr' },
usage: {
value: 98,
period: 'Jun 11, 2023 - Jul 10, 2023',
color: 'danger',
},
payment: { name: 'PayPal', icon: 'cib-cc-paypal' },
activity: 'Last month',
},
{
avatar: { src: avatar5, status: 'success' },
user: {
name: 'Agapetus Tadeáš',
new: true,
registered: 'Jan 1, 2023',
},
country: { name: 'Spain', flag: 'cif-es' },
usage: {
value: 22,
period: 'Jun 11, 2023 - Jul 10, 2023',
color: 'primary',
},
payment: { name: 'Google Wallet', icon: 'cib-cc-apple-pay' },
activity: 'Last week',
},
{
avatar: { src: avatar6, status: 'danger' },
user: {
name: 'Friderik Dávid',
new: true,
registered: 'Jan 1, 2023',
},
country: { name: 'Poland', flag: 'cif-pl' },
usage: {
value: 43,
period: 'Jun 11, 2023 - Jul 10, 2023',
color: 'success',
},
payment: { name: 'Amex', icon: 'cib-cc-amex' },
activity: 'Last week',
},
]
return {
tableExample,
progressGroupExample1,
progressGroupExample2,
progressGroupExample3,
}
},
}
</script>
src/views/dashboard/MainChart.vue
+114 -134
View File
@@ -1,148 +1,128 @@
<template>
<CChart type="line" :data="data" :options="options" ref="mainChartRef" />
</template>
<script>
<script setup>
import { onMounted, ref } from 'vue'
import { CChart } from '@coreui/vue-chartjs'
import { getStyle } from '@coreui/utils'
const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min)
export default {
name: 'MainChartExample',
components: {
CChart,
},
setup() {
const mainChartRef = ref()
const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
backgroundColor: `rgba(${getStyle('--cui-info-rgb')}, .1)`,
borderColor: getStyle('--cui-info'),
pointHoverBackgroundColor: getStyle('--cui-info'),
borderWidth: 2,
data: [
random(50, 200),
random(50, 200),
random(50, 200),
random(50, 200),
random(50, 200),
random(50, 200),
random(50, 200),
],
fill: true,
},
{
label: 'My Second dataset',
backgroundColor: 'transparent',
borderColor: getStyle('--cui-success'),
pointHoverBackgroundColor: getStyle('--cui-success'),
borderWidth: 2,
data: [
random(50, 200),
random(50, 200),
random(50, 200),
random(50, 200),
random(50, 200),
random(50, 200),
random(50, 200),
],
},
{
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 mainChartRef = ref()
const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
backgroundColor: `rgba(${getStyle('--cui-info-rgb')}, .1)`,
borderColor: getStyle('--cui-info'),
pointHoverBackgroundColor: getStyle('--cui-info'),
borderWidth: 2,
data: [
random(50, 200),
random(50, 200),
random(50, 200),
random(50, 200),
random(50, 200),
random(50, 200),
random(50, 200),
],
}
fill: true,
},
{
label: 'My Second dataset',
backgroundColor: 'transparent',
borderColor: getStyle('--cui-success'),
pointHoverBackgroundColor: getStyle('--cui-success'),
borderWidth: 2,
data: [
random(50, 200),
random(50, 200),
random(50, 200),
random(50, 200),
random(50, 200),
random(50, 200),
random(50, 200),
],
},
{
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,
plugins: {
legend: {
display: false,
},
const options = {
maintainAspectRatio: false,
plugins: {
legend: {
display: false,
},
},
scales: {
x: {
grid: {
color: getStyle('--cui-border-color-translucent'),
drawOnChartArea: false,
},
scales: {
x: {
grid: {
color: getStyle('--cui-border-color-translucent'),
drawOnChartArea: false,
},
ticks: {
color: getStyle('--cui-body-color'),
},
},
y: {
beginAtZero: true,
border: {
color: getStyle('--cui-border-color-translucent'),
},
grid: {
color: getStyle('--cui-border-color-translucent'),
},
max: 250,
ticks: {
color: getStyle('--cui-body-color'),
maxTicksLimit: 5,
stepSize: Math.ceil(250 / 5),
},
},
ticks: {
color: getStyle('--cui-body-color'),
},
elements: {
line: {
tension: 0.4,
},
point: {
radius: 0,
hitRadius: 10,
hoverRadius: 4,
hoverBorderWidth: 3,
},
},
y: {
beginAtZero: true,
border: {
color: getStyle('--cui-border-color-translucent'),
},
}
onMounted(() => {
document.documentElement.addEventListener('ColorSchemeChange', () => {
if (mainChartRef.value) {
mainChartRef.value.chart,
(options.scales.x.grid.borderColor = getStyle(
'--cui-border-color-translucent',
))
mainChartRef.value.chart,
(options.scales.x.grid.color = getStyle(
'--cui-border-color-translucent',
))
mainChartRef.value.chart,
(options.scales.x.ticks.color = getStyle('--cui-body-color'))
mainChartRef.value.chart,
(options.scales.y.grid.borderColor = getStyle(
'--cui-border-color-translucent',
))
mainChartRef.value.chart,
(options.scales.y.grid.color = getStyle(
'--cui-border-color-translucent',
))
mainChartRef.value.chart,
(options.scales.y.ticks.color = getStyle('--cui-body-color'))
mainChartRef.value.chart.update()
}
})
})
return {
data,
mainChartRef,
options,
}
grid: {
color: getStyle('--cui-border-color-translucent'),
},
max: 250,
ticks: {
color: getStyle('--cui-body-color'),
maxTicksLimit: 5,
stepSize: Math.ceil(250 / 5),
},
},
},
elements: {
line: {
tension: 0.4,
},
point: {
radius: 0,
hitRadius: 10,
hoverRadius: 4,
hoverBorderWidth: 3,
},
},
}
onMounted(() => {
document.documentElement.addEventListener('ColorSchemeChange', () => {
if (mainChartRef.value) {
mainChartRef.value.chart.options.scales.x.grid.borderColor = getStyle(
'--cui-border-color-translucent',
)
mainChartRef.value.chart.options.scales.x.grid.color = getStyle(
'--cui-border-color-translucent',
)
mainChartRef.value.chart.options.scales.x.ticks.color = getStyle('--cui-body-color')
mainChartRef.value.chart.options.scales.y.grid.borderColor = getStyle(
'--cui-border-color-translucent',
)
mainChartRef.value.chart.options.scales.y.grid.color = getStyle(
'--cui-border-color-translucent',
)
mainChartRef.value.chart.options.scales.y.ticks.color = getStyle('--cui-body-color')
mainChartRef.value.chart.update()
}
})
})
</script>
<template>
<CChart type="line" :data="data" :options="options" ref="mainChartRef" />
</template>
src/views/forms/ChecksRadios.vue
-6
View File
@@ -396,9 +396,3 @@
</CCol>
</CRow>
</template>
<script>
export default {
name: 'ChecksRadios',
}
</script>
src/views/forms/FloatingLabels.vue
-6
View File
@@ -170,9 +170,3 @@
</CCol>
</CRow>
</template>
<script>
export default {
name: 'FloatingLabels',
}
</script>
src/views/forms/FormControl.vue
-6
View File
@@ -242,9 +242,3 @@
</CCol>
</CRow>
</template>
<script>
export default {
name: 'FormControl',
}
</script>
src/views/forms/InputGroup.vue
+4 -10
View File
@@ -400,7 +400,7 @@
<CCardBody>
<DocsExample href="forms/input-group.html#custom-select">
<CInputGroup class="mb-3">
<CInputGroupText component="label" for="inputGroupSelect01">
<CInputGroupText as="label" for="inputGroupSelect01">
Options
</CInputGroupText>
<CFormSelect id="inputGroupSelect01">
@@ -417,7 +417,7 @@
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
<CInputGroupText component="label" for="inputGroupSelect02">
<CInputGroupText as="label" for="inputGroupSelect02">
Options
</CInputGroupText>
</CInputGroup>
@@ -461,14 +461,14 @@
<CCardBody>
<DocsExample href="forms/input-group.html#custom-file-input">
<CInputGroup class="mb-3">
<CInputGroupText component="label" for="inputGroupFile01">
<CInputGroupText as="label" for="inputGroupFile01">
Upload
</CInputGroupText>
<CFormInput id="inputGroupFile01" type="file" />
</CInputGroup>
<CInputGroup class="mb-3">
<CFormInput id="inputGroupFile02" type="file" />
<CInputGroupText component="label" for="inputGroupFile02">
<CInputGroupText as="label" for="inputGroupFile02">
Upload
</CInputGroupText>
</CInputGroup>
@@ -510,9 +510,3 @@
</CCol>
</CRow>
</template>
<script>
export default {
name: 'InputGroup',
}
</script>
src/views/forms/Layout.vue
-6
View File
@@ -450,9 +450,3 @@
</CCol>
</CRow>
</template>
<script>
export default {
name: 'Layout',
}
</script>
src/views/forms/Range.vue
+2 -8
View File
@@ -47,7 +47,7 @@
</p>
<DocsExample href="forms/range.html#min-and-max">
<CFormLabel for="customRange2">Example range</CFormLabel>
<CFormRange id="customRange2" :min="0" :max="5" value="3" />
<CFormRange id="customRange2" :min="0" :max="5" :value="3" />
</DocsExample>
</CCardBody>
</CCard>
@@ -71,7 +71,7 @@
:min="0"
:max="5"
:step="0.5"
value="3"
:value="3"
/>
</DocsExample>
</CCardBody>
@@ -79,9 +79,3 @@
</CCol>
</CRow>
</template>
<script>
export default {
name: 'Range',
}
</script>
src/views/forms/Select.vue
-7
View File
@@ -105,10 +105,3 @@
</CCol>
</CRow>
</template>
<script>
export default {
// eslint-disable-next-line
name: 'Select',
}
</script>
src/views/forms/Validation.vue
+104 -201
View File
@@ -1,25 +1,58 @@
<script setup>
import { ref } from 'vue'
const validatedCustom01 = ref(false)
const validatedDefault01 = ref(false)
const validatedTooltip01 = ref(false)
const handleSubmitCustom01 = (event) => {
const form = event.currentTarget
if (form.checkValidity() === false) {
event.preventDefault()
event.stopPropagation()
}
validatedCustom01.value = true
}
const handleSubmitDefault01 = (event) => {
const form = event.currentTarget
if (form.checkValidity() === false) {
event.preventDefault()
event.stopPropagation()
}
validatedDefault01.value = true
}
const handleSubmitTooltip01 = (event) => {
const form = event.currentTarget
if (form.checkValidity() === false) {
event.preventDefault()
event.stopPropagation()
}
validatedTooltip01.value = true
}
</script>
<template>
<CRow>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Validation</strong> <small>Custom styles</small>
</CCardHeader>
<CCardHeader> <strong>Validation</strong> <small>Custom styles</small> </CCardHeader>
<CCardBody>
<p class="text-body-secondary small">
For custom CoreUI form validation messages, you&#39;ll need to add
the
<code>novalidate</code> boolean property to your
<code>&lt;CForm&gt;</code>. This disables the browser default
feedback tooltips, but still provides access to the form validation
APIs in JavaScript. Try to submit the form below; our JavaScript
will intercept the submit button and relay feedback to you. When
attempting to submit, you&#39;ll see the <code>:invalid</code> and
<code>:valid</code> styles applied to your form controls.
For custom CoreUI form validation messages, you&#39;ll need to add the
<code>novalidate</code> boolean property to your <code>&lt;CForm&gt;</code>. This
disables the browser default feedback tooltips, but still provides access to the form
validation APIs in JavaScript. Try to submit the form below; our JavaScript will
intercept the submit button and relay feedback to you. When attempting to submit,
you&#39;ll see the <code>:invalid</code> and <code>:valid</code> styles applied to your
form controls.
</p>
<p class="text-body-secondary small">
Custom feedback styles apply custom colors, borders, focus styles,
and background icons to better communicate feedback.
Custom feedback styles apply custom colors, borders, focus styles, and background icons
to better communicate feedback.
</p>
<DocsExample href="forms/validation.html">
<CForm
@@ -48,17 +81,13 @@
aria-describedby="inputGroupPrepend"
required
/>
<CFormFeedback invalid>
Please choose a username.
</CFormFeedback>
<CFormFeedback invalid> Please choose a username. </CFormFeedback>
</CInputGroup>
</CCol>
<CCol :md="6">
<CFormLabel for="validationCustom03">City</CFormLabel>
<CFormInput id="validationCustom03" required />
<CFormFeedback invalid>
Please provide a valid city.
</CFormFeedback>
<CFormFeedback invalid> Please provide a valid city. </CFormFeedback>
</CCol>
<CCol :md="3">
<CFormLabel for="validationCustom04">City</CFormLabel>
@@ -66,16 +95,12 @@
<option disabled>Choose...</option>
<option>...</option>
</CFormSelect>
<CFormFeedback invalid>
Please provide a valid city.
</CFormFeedback>
<CFormFeedback invalid> Please provide a valid city. </CFormFeedback>
</CCol>
<CCol :md="3">
<CFormLabel for="validationCustom05">City</CFormLabel>
<CFormInput id="validationCustom05" required />
<CFormFeedback invalid>
Please provide a valid zip.
</CFormFeedback>
<CFormFeedback invalid> Please provide a valid zip. </CFormFeedback>
</CCol>
<CCol :xs="12">
<CFormCheck
@@ -84,9 +109,7 @@
label="Agree to terms and conditions"
required
/>
<CFormFeedback invalid>
You must agree before submitting.
</CFormFeedback>
<CFormFeedback invalid> You must agree before submitting. </CFormFeedback>
</CCol>
<CCol :xs="12">
<CButton color="primary" type="submit">Submit form</CButton>
@@ -98,20 +121,17 @@
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Validation</strong> <small>Browser defaults</small>
</CCardHeader>
<CCardHeader> <strong>Validation</strong> <small>Browser defaults</small> </CCardHeader>
<CCardBody>
<p class="text-body-secondary small">
Not interested in custom validation feedback messages or writing
JavaScript to change form behaviors? All good, you can use the
browser defaults. Try submitting the form below. Depending on your
browser and OS, you&#39;ll see a slightly different style of
Not interested in custom validation feedback messages or writing JavaScript to change
form behaviors? All good, you can use the browser defaults. Try submitting the form
below. Depending on your browser and OS, you&#39;ll see a slightly different style of
feedback.
</p>
<p class="text-body-secondary small">
While these feedback styles cannot be styled with CSS, you can still
customize the feedback text through JavaScript.
While these feedback styles cannot be styled with CSS, you can still customize the
feedback text through JavaScript.
</p>
<DocsExample href="forms/validation.html#browser-defaults">
<CForm
@@ -130,9 +150,7 @@
<CFormFeedback valid> Looks good! </CFormFeedback>
</CCol>
<CCol :md="4">
<CFormLabel for="validationDefaultUsername"
>Username</CFormLabel
>
<CFormLabel for="validationDefaultUsername">Username</CFormLabel>
<CInputGroup class="has-validation">
<CInputGroupText id="inputGroupPrepend02">@</CInputGroupText>
<CFormInput
@@ -141,17 +159,13 @@
aria-describedby="inputGroupPrepend02"
required
/>
<CFormFeedback invalid>
Please choose a username.
</CFormFeedback>
<CFormFeedback invalid> Please choose a username. </CFormFeedback>
</CInputGroup>
</CCol>
<CCol :md="6">
<CFormLabel for="validationDefault03">City</CFormLabel>
<CFormInput id="validationDefault03" required />
<CFormFeedback invalid>
Please provide a valid city.
</CFormFeedback>
<CFormFeedback invalid> Please provide a valid city. </CFormFeedback>
</CCol>
<CCol :md="3">
<CFormLabel for="validationDefault04">City</CFormLabel>
@@ -159,16 +173,12 @@
<option disabled>Choose...</option>
<option>...</option>
</CFormSelect>
<CFormFeedback invalid>
Please provide a valid city.
</CFormFeedback>
<CFormFeedback invalid> Please provide a valid city. </CFormFeedback>
</CCol>
<CCol :md="3">
<CFormLabel for="validationDefault05">City</CFormLabel>
<CFormInput id="validationDefault05" required />
<CFormFeedback invalid>
Please provide a valid zip.
</CFormFeedback>
<CFormFeedback invalid> Please provide a valid zip. </CFormFeedback>
</CCol>
<CCol :xs="12">
<CFormCheck
@@ -177,9 +187,7 @@
label="Agree to terms and conditions"
required
/>
<CFormFeedback invalid>
You must agree before submitting.
</CFormFeedback>
<CFormFeedback invalid> You must agree before submitting. </CFormFeedback>
</CCol>
<CCol :xs="12">
<CButton color="primary" type="submit">Submit form</CButton>
@@ -191,48 +199,33 @@
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Validation</strong> <small>Server side</small>
</CCardHeader>
<CCardHeader> <strong>Validation</strong> <small>Server side</small> </CCardHeader>
<CCardBody>
<p class="text-body-secondary small">
We recommend using client-side validation, but in case you require
server-side validation, you can indicate invalid and valid form
fields with <code>invalid</code> and <code>valid</code> boolean
properties.
We recommend using client-side validation, but in case you require server-side
validation, you can indicate invalid and valid form fields with <code>invalid</code> and
<code>valid</code> boolean properties.
</p>
<p class="text-body-secondary small">
For invalid fields, ensure that the invalid feedback/error message
is associated with the relevant form field using
<code>aria-describedby</code> (noting that this attribute allows
more than one <code>id</code> to be referenced, in case the field
already points to additional form text).
For invalid fields, ensure that the invalid feedback/error message is associated with
the relevant form field using
<code>aria-describedby</code> (noting that this attribute allows more than one
<code>id</code> to be referenced, in case the field already points to additional form
text).
</p>
<DocsExample href="forms/validation.html#server-side">
<CForm class="row g-3 needs-validation">
<CCol ::md="4">
<CCol :md="4">
<CFormLabel for="validationServer01">Email</CFormLabel>
<CFormInput
id="validationServer01"
type="text"
value="Mark"
valid
required
/>
<CFormInput id="validationServer01" type="text" value="Mark" valid required />
<CFormFeedback valid>Looks good!</CFormFeedback>
</CCol>
<CCol ::md="4">
<CCol :md="4">
<CFormLabel for="validationServer02">Email</CFormLabel>
<CFormInput
id="validationServer02"
type="text"
value="Otto"
valid
required
/>
<CFormInput id="validationServer02" type="text" value="Otto" valid required />
<CFormFeedback valid>Looks good!</CFormFeedback>
</CCol>
<CCol ::md="4">
<CCol :md="4">
<CFormLabel for="validationServerUsername">Username</CFormLabel>
<CInputGroup class="has-validation">
<CInputGroupText id="inputGroupPrepend03">@</CInputGroupText>
@@ -244,22 +237,13 @@
invalid
required
/>
<CFormFeedback invalid
>Please choose a username.</CFormFeedback
>
<CFormFeedback invalid>Please choose a username.</CFormFeedback>
</CInputGroup>
</CCol>
<CCol :md="6">
<CFormLabel for="validationServer03">City</CFormLabel>
<CFormInput
id="validationServer03"
type="text"
invalid
required
/>
<CFormFeedback invalid
>Please provide a valid city.</CFormFeedback
>
<CFormInput id="validationServer03" type="text" invalid required />
<CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
</CCol>
<CCol :md="3">
<CFormLabel for="validationServer04">City</CFormLabel>
@@ -267,21 +251,12 @@
<option disabled>Choose...</option>
<option>...</option>
</CFormSelect>
<CFormFeedback invalid
>Please provide a valid city.</CFormFeedback
>
<CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
</CCol>
<CCol :md="3">
<CFormLabel for="validationServer05">City</CFormLabel>
<CFormInput
id="validationServer05"
type="text"
invalid
required
/>
<CFormFeedback invalid
>Please provide a valid zip.</CFormFeedback
>
<CFormInput id="validationServer05" type="text" invalid required />
<CFormFeedback invalid>Please provide a valid zip.</CFormFeedback>
</CCol>
<CCol :xs="12">
<CFormCheck
@@ -291,9 +266,7 @@
invalid
required
/>
<CFormFeedback invalid
>You must agree before submitting.</CFormFeedback
>
<CFormFeedback invalid>You must agree before submitting.</CFormFeedback>
</CCol>
<CCol :xs="12">
<CButton color="primary" type="submit"> Submit form </CButton>
@@ -305,13 +278,10 @@
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Validation</strong> <small>Supported elements</small>
</CCardHeader>
<CCardHeader> <strong>Validation</strong> <small>Supported elements</small> </CCardHeader>
<CCardBody>
<p class="text-body-secondary small">
Validation styles are available for the following form controls and
components:
Validation styles are available for the following form controls and components:
</p>
<ul>
<li><code>&lt;CFormInput&gt;</code>s</li>
@@ -321,18 +291,14 @@
<DocsExample href="forms/validation.html#supported-elements">
<CForm :validated="true">
<div class="mb-3">
<CFormLabel for="validationTextarea" class="form-label"
>Textarea</CFormLabel
>
<CFormLabel for="validationTextarea" class="form-label">Textarea</CFormLabel>
<CFormTextarea
id="validationTextarea"
placeholder="Required example textarea"
invalid
required
></CFormTextarea>
<CFormFeedback invalid>
Please enter a message in the textarea.
</CFormFeedback>
<CFormFeedback invalid> Please enter a message in the textarea. </CFormFeedback>
</div>
<CFormCheck
id="validationFormCheck1"
@@ -340,9 +306,7 @@
label="Check this checkbox"
required
/>
<CFormFeedback invalid
>Example invalid feedback text</CFormFeedback
>
<CFormFeedback invalid>Example invalid feedback text</CFormFeedback>
<CFormCheck
id="validationFormCheck2"
type="radio"
@@ -358,9 +322,7 @@
label="Or toggle this other radio"
required
/>
<CFormFeedback invalid
>More example invalid feedback text</CFormFeedback
>
<CFormFeedback invalid>More example invalid feedback text</CFormFeedback>
<div class="mb-3">
<CFormSelect required aria-label="select example">
<option>Open this select menu</option>
@@ -368,9 +330,7 @@
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
<CFormFeedback invalid
>Example invalid select feedback</CFormFeedback
>
<CFormFeedback invalid>Example invalid select feedback</CFormFeedback>
</div>
<div class="mb-3">
<CFormInput
@@ -379,14 +339,10 @@
aria-label="file example"
required
/>
<CFormFeedback invalid
>Example invalid form file feedback</CFormFeedback
>
<CFormFeedback invalid>Example invalid form file feedback</CFormFeedback>
</div>
<div class="mb-3">
<CButton type="submit" color="primary" disabled
>Submit form</CButton
>
<CButton type="submit" color="primary" disabled>Submit form</CButton>
</div>
</CForm>
</DocsExample>
@@ -395,17 +351,13 @@
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Validation</strong> <small>Tooltips</small>
</CCardHeader>
<CCardHeader> <strong>Validation</strong> <small>Tooltips</small> </CCardHeader>
<CCardBody>
<p class="text-body-secondary small">
If your form layout allows it, you can swap the text for the tooltip
to display validation feedback in a styled tooltip. Be sure to have
a parent with
<code>position: relative</code> on it for tooltip positioning. In
the example below, our column classes have this already, but your
project may require an alternative setup.
If your form layout allows it, you can swap the text for the tooltip to display
validation feedback in a styled tooltip. Be sure to have a parent with
<code>position: relative</code> on it for tooltip positioning. In the example below, our
column classes have this already, but your project may require an alternative setup.
</p>
<DocsExample href="forms/validation.html#tooltips">
<CForm
@@ -425,9 +377,7 @@
<CFormFeedback tooltip valid> Looks good! </CFormFeedback>
</CCol>
<CCol :md="4" class="position-relative">
<CFormLabel for="validationTooltipUsername"
>Username</CFormLabel
>
<CFormLabel for="validationTooltipUsername">Username</CFormLabel>
<CInputGroup class="has-validation">
<CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
<CFormInput
@@ -436,17 +386,13 @@
aria-describedby="inputGroupPrepend"
required
/>
<CFormFeedback tooltip invalid>
Please choose a username.
</CFormFeedback>
<CFormFeedback tooltip invalid> Please choose a username. </CFormFeedback>
</CInputGroup>
</CCol>
<CCol :md="6" class="position-relative">
<CFormLabel for="validationTooltip03">City</CFormLabel>
<CFormInput id="validationTooltip03" required />
<CFormFeedback tooltip invalid>
Please provide a valid city.
</CFormFeedback>
<CFormFeedback tooltip invalid> Please provide a valid city. </CFormFeedback>
</CCol>
<CCol :md="3" class="position-relative">
<CFormLabel for="validationTooltip04">City</CFormLabel>
@@ -454,16 +400,12 @@
<option disabled value="">Choose...</option>
<option>...</option>
</CFormSelect>
<CFormFeedback tooltip invalid>
Please provide a valid city.
</CFormFeedback>
<CFormFeedback tooltip invalid> Please provide a valid city. </CFormFeedback>
</CCol>
<CCol :md="3" class="position-relative">
<CFormLabel for="validationTooltip05">City</CFormLabel>
<CFormInput id="validationTooltip05" required />
<CFormFeedback tooltip invalid>
Please provide a valid zip.
</CFormFeedback>
<CFormFeedback tooltip invalid> Please provide a valid zip. </CFormFeedback>
</CCol>
<CCol :xs="12" class="position-relative">
<CButton color="primary" type="submit">Submit form</CButton>
@@ -475,42 +417,3 @@
</CCol>
</CRow>
</template>
<script>
export default {
name: 'Validation',
data: () => {
return {
validatedCustom01: null,
validatedDefault01: null,
validatedTooltip01: null,
}
},
methods: {
handleSubmitCustom01(event) {
const form = event.currentTarget
if (form.checkValidity() === false) {
event.preventDefault()
event.stopPropagation()
}
this.validatedCustom01 = true
},
handleSubmitDefault01(event) {
const form = event.currentTarget
if (form.checkValidity() === false) {
event.preventDefault()
event.stopPropagation()
}
this.validatedDefault01 = true
},
handleSubmitTooltip01(event) {
const form = event.currentTarget
if (form.checkValidity() === false) {
event.preventDefault()
event.stopPropagation()
}
this.validatedTooltip01 = true
},
},
}
</script>
src/views/icons/Brands.vue
+7 -17
View File
@@ -1,3 +1,10 @@
<script setup>
import { brandSet } from '@coreui/icons'
const toKebabCase = (str) => str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
const icons = brandSet
</script>
<template>
<CRow>
<CCol>
@@ -17,20 +24,3 @@
</CCol>
</CRow>
</template>
<script>
import { brandSet } from '@coreui/icons'
export default {
name: 'CoreUIIcons',
setup() {
const toKebabCase = (str) =>
str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
const icons = brandSet
return {
icons,
toKebabCase,
}
},
}
</script>
src/views/icons/CoreUIIcons.vue
+7 -17
View File
@@ -1,3 +1,10 @@
<script setup>
import { freeSet } from '@coreui/icons'
const toKebabCase = (str) => str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
const icons = freeSet
</script>
<template>
<CRow>
<CCol>
@@ -17,20 +24,3 @@
</CCol>
</CRow>
</template>
<script>
import { freeSet } from '@coreui/icons'
export default {
name: 'CoreUIIcons',
setup() {
const toKebabCase = (str) =>
str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
const icons = freeSet
return {
icons,
toKebabCase,
}
},
}
</script>
src/views/icons/Flags.vue
+7 -17
View File
@@ -1,3 +1,10 @@
<script setup>
import { flagSet } from '@coreui/icons'
const toKebabCase = (str) => str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
const icons = flagSet
</script>
<template>
<CRow>
<CCol>
@@ -17,20 +24,3 @@
</CCol>
</CRow>
</template>
<script>
import { flagSet } from '@coreui/icons'
export default {
name: 'CoreUIIcons',
setup() {
const toKebabCase = (str) =>
str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
const icons = flagSet
return {
icons,
toKebabCase,
}
},
}
</script>
src/views/notifications/Alerts.vue
+7 -12
View File
@@ -1,3 +1,9 @@
<script setup>
const alert = () => {
console.log('👋 Well, hi there! Thanks for dismissing me.')
}
</script>
<template>
<CRow>
<CCol :xs="12">
@@ -133,7 +139,7 @@
<code>dismissible</code> prop.
</p>
<DocsExample href="components/alert.html#dismissing">
<CAlert color="warning" dismissible @dismiss="alert">
<CAlert color="warning" dismissible @close="alert()">
<strong>Go right ahead</strong> and click that dimiss over there
on the right.
</CAlert>
@@ -143,14 +149,3 @@
</CCol>
</CRow>
</template>
<script>
export default {
name: 'Alerts',
methods: {
alert: function () {
alert('👋 Well, hi there! Thanks for dismissing me.')
},
},
}
</script>
src/views/notifications/Badges.vue
+18 -16
View File
@@ -54,11 +54,11 @@
the presentation of a badge.
</p>
<DocsExample href="components/badge.html#contextual-variations">
<CBadge color="primary">primary</CBadge>
<CBadge color="success">success</CBadge>
<CBadge color="danger">danger</CBadge>
<CBadge color="warning">warning</CBadge>
<CBadge color="info">info</CBadge>
<CBadge color="primary-gradient">primary</CBadge>
<CBadge color="success-gradient">success</CBadge>
<CBadge color="danger-gradient">danger</CBadge>
<CBadge color="warning-gradient">warning</CBadge>
<CBadge color="info-gradient">info</CBadge>
<CBadge color="light">light</CBadge>
<CBadge color="dark">dark</CBadge>
</DocsExample>
@@ -74,11 +74,19 @@
badges rounded.
</p>
<DocsExample href="components/badge.html#pill-badges">
<CBadge color="primary" shape="rounded-pill"> primary </CBadge>
<CBadge color="success" shape="rounded-pill"> success </CBadge>
<CBadge color="danger" shape="rounded-pill"> danger </CBadge>
<CBadge color="warning" shape="rounded-pill"> warning </CBadge>
<CBadge color="info" shape="rounded-pill"> info </CBadge>
<CBadge color="primary-gradient" shape="rounded-pill">
primary
</CBadge>
<CBadge color="success-gradient" shape="rounded-pill">
success
</CBadge>
<CBadge color="danger-gradient" shape="rounded-pill">
danger
</CBadge>
<CBadge color="warning-gradient" shape="rounded-pill">
warning
</CBadge>
<CBadge color="info-gradient" shape="rounded-pill"> info </CBadge>
<CBadge color="light" shape="rounded-pill"> light </CBadge>
<CBadge color="dark" shape="rounded-pill"> dark </CBadge>
</DocsExample>
@@ -87,9 +95,3 @@
</CCol>
</CRow>
</template>
<script>
export default {
name: 'Badges',
}
</script>
src/views/notifications/Modals.vue
+154 -222
View File
@@ -1,3 +1,24 @@
<script setup>
import { ref } from 'vue'
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 tooltipsAndPopoversDemo= 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)
</script>
<template>
<CRow>
<CCol :xs="12">
@@ -8,11 +29,10 @@
<CCardBody>
<p class="text-body-secondary small">
Below is a static modal example (meaning its
<code>position</code> and <code>display</code> have been
overridden). Included are the modal header, modal body (required for
<code>padding</code>), and modal footer (optional). We ask that you
include modal headers with dismiss actions whenever possible, or
provide another explicit dismiss action.
<code>position</code> and <code>display</code> have been overridden). Included are the
modal header, modal body (required for <code>padding</code>), and modal footer
(optional). We ask that you include modal headers with dismiss actions whenever
possible, or provide another explicit dismiss action.
</p>
<DocsExample href="components/modal.html#modal-components">
<CModal
@@ -36,13 +56,11 @@
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Modal</strong> <small>Live demo</small>
</CCardHeader>
<CCardHeader> <strong>Vue Modal</strong> <small>Live demo</small> </CCardHeader>
<CCardBody>
<p class="text-body-secondary small">
Toggle a working modal demo by clicking the button below. It will
slide down and fade in from the top of the page.
Toggle a working modal demo by clicking the button below. It will slide down and fade in
from the top of the page.
</p>
<DocsExample href="components/modal.html#live-demo">
<CButton
@@ -72,9 +90,7 @@
>
<CModalTitle>Modal title</CModalTitle>
</CModalHeader>
<CModalBody
>Woohoo, you're reading this text in a modal!</CModalBody
>
<CModalBody>Woohoo, you're reading this text in a modal!</CModalBody>
<CModalFooter>
<CButton
color="secondary"
@@ -95,15 +111,12 @@
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Modal</strong> <small>Static backdrop</small>
</CCardHeader>
<CCardHeader> <strong>Vue Modal</strong> <small>Static backdrop</small> </CCardHeader>
<CCardBody>
<p class="text-body-secondary small">
If you set <code>backdrop</code> property to <code>static</code>,
your modal will behave as though the backdrop is static, meaning it
will not close when clicking outside it. Click the button below to
try it.
If you set <code>backdrop</code> property to <code>static</code>, your modal will behave
as though the backdrop is static, meaning it will not close when clicking outside it.
Click the button below to try it.
</p>
<DocsExample href="components/modal.html#static-backdrop">
<CButton
@@ -134,9 +147,7 @@
>
<CModalTitle>Modal title</CModalTitle>
</CModalHeader>
<CModalBody
>Woohoo, you're reading this text in a modal!</CModalBody
>
<CModalBody>Woohoo, you're reading this text in a modal!</CModalBody>
<CModalFooter>
<CButton
color="secondary"
@@ -162,9 +173,8 @@
</CCardHeader>
<CCardBody>
<p class="text-body-secondary small">
When modals become too long for the user's viewport or device, they
scroll independent of the page itself. Try the demo below to see
what we mean.
When modals become too long for the user's viewport or device, they scroll independent
of the page itself. Try the demo below to see what we mean.
</p>
<DocsExample href="components/modal.html#scrolling-long-content">
<CButton
@@ -196,107 +206,94 @@
</CModalHeader>
<CModalBody>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo
odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
risus, porta ac consectetur ac, vestibulum at eros.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Vivamus sagittis lacus vel augue laoreet
rutrum faucibus dolor auctor.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent
commodo cursus magna, vel scelerisque nisl consectetur et.
Donec sed odio dui. Donec ullamcorper nulla non metus auctor
fringilla.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo
odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
risus, porta ac consectetur ac, vestibulum at eros.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Vivamus sagittis lacus vel augue laoreet
rutrum faucibus dolor auctor.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent
commodo cursus magna, vel scelerisque nisl consectetur et.
Donec sed odio dui. Donec ullamcorper nulla non metus auctor
fringilla.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo
odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
risus, porta ac consectetur ac, vestibulum at eros.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Vivamus sagittis lacus vel augue laoreet
rutrum faucibus dolor auctor.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent
commodo cursus magna, vel scelerisque nisl consectetur et.
Donec sed odio dui. Donec ullamcorper nulla non metus auctor
fringilla.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo
odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
risus, porta ac consectetur ac, vestibulum at eros.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Vivamus sagittis lacus vel augue laoreet
rutrum faucibus dolor auctor.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent
commodo cursus magna, vel scelerisque nisl consectetur et.
Donec sed odio dui. Donec ullamcorper nulla non metus auctor
fringilla.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo
odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
risus, porta ac consectetur ac, vestibulum at eros.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Vivamus sagittis lacus vel augue laoreet
rutrum faucibus dolor auctor.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent
commodo cursus magna, vel scelerisque nisl consectetur et.
Donec sed odio dui. Donec ullamcorper nulla non metus auctor
fringilla.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo
odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
risus, porta ac consectetur ac, vestibulum at eros.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Vivamus sagittis lacus vel augue laoreet
rutrum faucibus dolor auctor.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent
commodo cursus magna, vel scelerisque nisl consectetur et.
Donec sed odio dui. Donec ullamcorper nulla non metus auctor
fringilla.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
metus auctor fringilla.
</p>
</CModalBody>
</CModal>
</DocsExample>
<p class="text-body-secondary small">
You can also create a scrollable modal that allows scroll the modal
body by adding
You can also create a scrollable modal that allows scroll the modal body by adding
<code>scrollable</code> prop.
</p>
<DocsExample href="components/modal.html#scrolling-long-content">
@@ -330,100 +327,88 @@
</CModalHeader>
<CModalBody>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo
odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
risus, porta ac consectetur ac, vestibulum at eros.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Vivamus sagittis lacus vel augue laoreet
rutrum faucibus dolor auctor.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent
commodo cursus magna, vel scelerisque nisl consectetur et.
Donec sed odio dui. Donec ullamcorper nulla non metus auctor
fringilla.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo
odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
risus, porta ac consectetur ac, vestibulum at eros.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Vivamus sagittis lacus vel augue laoreet
rutrum faucibus dolor auctor.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent
commodo cursus magna, vel scelerisque nisl consectetur et.
Donec sed odio dui. Donec ullamcorper nulla non metus auctor
fringilla.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo
odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
risus, porta ac consectetur ac, vestibulum at eros.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Vivamus sagittis lacus vel augue laoreet
rutrum faucibus dolor auctor.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent
commodo cursus magna, vel scelerisque nisl consectetur et.
Donec sed odio dui. Donec ullamcorper nulla non metus auctor
fringilla.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo
odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
risus, porta ac consectetur ac, vestibulum at eros.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Vivamus sagittis lacus vel augue laoreet
rutrum faucibus dolor auctor.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent
commodo cursus magna, vel scelerisque nisl consectetur et.
Donec sed odio dui. Donec ullamcorper nulla non metus auctor
fringilla.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo
odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
risus, porta ac consectetur ac, vestibulum at eros.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Vivamus sagittis lacus vel augue laoreet
rutrum faucibus dolor auctor.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent
commodo cursus magna, vel scelerisque nisl consectetur et.
Donec sed odio dui. Donec ullamcorper nulla non metus auctor
fringilla.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo
odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
risus, porta ac consectetur ac, vestibulum at eros.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Vivamus sagittis lacus vel augue laoreet
rutrum faucibus dolor auctor.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent
commodo cursus magna, vel scelerisque nisl consectetur et.
Donec sed odio dui. Donec ullamcorper nulla non metus auctor
fringilla.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
metus auctor fringilla.
</p>
</CModalBody>
</CModal>
@@ -433,13 +418,11 @@
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Modal</strong> <small>Vertically centered</small>
</CCardHeader>
<CCardHeader> <strong>Vue Modal</strong> <small>Vertically centered</small> </CCardHeader>
<CCardBody>
<p class="text-body-secondary small">
Add <code>alignment=&#34;center&#34;</code> to
<code>&lt;CModal&gt;</code> to vertically center the modal.
Add <code>alignment=&#34;center&#34;</code> to <code>&lt;CModal&gt;</code> to vertically
center the modal.
</p>
<DocsExample href="components/modal.html#vertically-centered">
<CButton
@@ -471,9 +454,9 @@
<CModalTitle>Modal title</CModalTitle>
</CModalHeader>
<CModalBody>
Cras mattis consectetur purus sit amet fermentum. Cras justo
odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
risus, porta ac consectetur ac, vestibulum at eros.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
vestibulum at eros.
</CModalBody>
<CModalFooter>
<CButton
@@ -522,9 +505,9 @@
<CModalTitle>Modal title</CModalTitle>
</CModalHeader>
<CModalBody>
Cras mattis consectetur purus sit amet fermentum. Cras justo
odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
risus, porta ac consectetur ac, vestibulum at eros.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
vestibulum at eros.
</CModalBody>
<CModalFooter>
<CButton
@@ -546,15 +529,12 @@
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Modal</strong> <small>Tooltips and popovers</small>
</CCardHeader>
<CCardHeader> <strong>Vue Modal</strong> <small>Tooltips and popovers</small> </CCardHeader>
<CCardBody>
<p class="text-body-secondary small">
<code>&lt;CTooltips&gt;</code> and
<code>&lt;CPopovers&gt;</code> can be placed within modals as
needed. When modals are closed, any tooltips and popovers within are
also automatically dismissed.
<code>&lt;CTooltips&gt;</code> and <code>&lt;CPopovers&gt;</code> can be placed within
modals as needed. When modals are closed, any tooltips and popovers within are also
automatically dismissed.
</p>
<DocsExample href="components/modal.html#tooltips-and-popovers">
<CButton
@@ -601,8 +581,7 @@
<h5>Tooltips in a modal</h5>
<p>
<CLink v-c-tooltip="'Tooltip'">This link</CLink> and
<CLink v-c-tooltip="'Tooltip'">that link</CLink> have tooltips
on hover.
<CLink v-c-tooltip="'Tooltip'">that link</CLink> have tooltips on hover.
</p>
</CModalBody>
<CModalFooter>
@@ -625,15 +604,12 @@
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Modal</strong> <small>Optional sizes</small>
</CCardHeader>
<CCardHeader> <strong>Vue Modal</strong> <small>Optional sizes</small> </CCardHeader>
<CCardBody>
<p class="text-body-secondary small">
Modals have three optional sizes, available via modifier classes to
be placed on a
<code>&lt;CModal&gt;</code>. These sizes kick in at certain
breakpoints to avoid horizontal scrollbars on narrower viewports.
Modals have three optional sizes, available via modifier classes to be placed on a
<code>&lt;CModal&gt;</code>. These sizes kick in at certain breakpoints to avoid
horizontal scrollbars on narrower viewports.
</p>
<table class="table">
<thead>
@@ -777,13 +753,11 @@
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Modal</strong> <small>Fullscreen Modal</small>
</CCardHeader>
<CCardHeader> <strong>Vue Modal</strong> <small>Fullscreen Modal</small> </CCardHeader>
<CCardBody>
<p class="text-body-secondary small">
Another override is the option to pop up a modal that covers the
user viewport, available via property <code>fullscrean</code>.
Another override is the option to pop up a modal that covers the user viewport,
available via property <code>fullscrean</code>.
</p>
<table class="table">
<thead>
@@ -1018,45 +992,3 @@
</CCol>
</CRow>
</template>
<script>
import { ref } from 'vue'
export default {
name: 'Modals',
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,
visibleStaticBackdropDemo,
visibleScrollingLongContentDemo,
visibleScrollableDemo,
visibleVerticallyCenteredDemo,
visibleVerticallyCenteredScrollableDemo,
xlDemo,
lgDemo,
smDemo,
fullscreenDemo,
fullscreenSmDemo,
fullscreenMdDemo,
fullscreenLgDemo,
fullscreenXlDemo,
fullscreenXxlDemo,
}
},
}
</script>
src/views/notifications/Toasts.vue
+15 -23
View File
@@ -1,3 +1,14 @@
<script setup>
const toasts = []
const createToast = () => {
toasts.push({
title: 'new toast',
content: 'Lorem ipsum dolor cet emit',
})
}
</script>
<template>
<CRow>
<CCol :xs="12">
@@ -32,7 +43,7 @@
<DocsExample href="components/toast.html">
<CButton color="primary" @click="createToast">Send a toast</CButton>
<CToaster placement="top-end">
<CToast v-for="(toast, index) in toasts" visible :key="index">
<CToast v-for="(toast, index) in toasts" :visible="true" :key="index">
<CToastHeader closeButton>
<span class="me-auto fw-bold">{{ toast.title }}</span>
<small>7 min ago</small>
@@ -157,7 +168,7 @@
Hello, world! This is a toast message.
<div class="mt-2 pt-2 border-top">
<CButton type="button" color="primary" size="sm"> Take action </CButton>
<CToastClose component="CButton" color="secondary" size="sm" class="ms-1"
<CToastClose as="CButton" color="secondary" size="sm" class="ms-1"
>Close</CToastClose
>
</div>
@@ -174,8 +185,8 @@
<p class="text-body-secondary small">
Building on the above example, you can create different toast color schemes with our
<a href="https://coreui.io/docs/utilities/colors">color</a> and
<a href="https://coreui.io/docs/utilities/background">background</a> utilities.
Here we&#39;ve set <code>color=&#34;primary&#34;</code> and added
<a href="https://coreui.io/docs/utilities/background">background</a> utilities. Here
we&#39;ve set <code>color=&#34;primary&#34;</code> and added
<code>.text-white</code> class to the <code>&lt;Ctoast&gt;</code>, and then set
<code>white</code> property to our close button. For a crisp edge, we remove the default
border with <code>.border-0</code>.
@@ -198,22 +209,3 @@
</CCol>
</CRow>
</template>
<script>
export default {
data() {
return {
toasts: [],
}
},
methods: {
createToast() {
this.toasts.push({
title: 'new toast',
content: 'Lorem ipsum dolor cet emit',
})
},
},
}
</script>
src/views/pages/Login.vue
+1 -7
View File
@@ -1,5 +1,5 @@
<template>
<div class="bg-body-tertiary min-vh-100 d-flex flex-row align-items-center">
<div class="wrapper min-vh-100 d-flex flex-row align-items-center">
<CContainer>
<CRow class="justify-content-center">
<CCol :md="8">
@@ -62,9 +62,3 @@
</CContainer>
</div>
</template>
<script>
export default {
name: 'Login',
}
</script>
src/views/pages/Page404.vue
+1 -7
View File
@@ -1,5 +1,5 @@
<template>
<div class="bg-body-tertiary min-vh-100 d-flex flex-row align-items-center">
<div class="wrapper min-vh-100 d-flex flex-row align-items-center">
<CContainer>
<CRow class="justify-content-center">
<CCol :md="6">
@@ -22,9 +22,3 @@
</CContainer>
</div>
</template>
<script>
export default {
name: 'Page404',
}
</script>
src/views/pages/Page500.vue
+1 -7
View File
@@ -1,5 +1,5 @@
<template>
<div class="bg-body-tertiary min-vh-100 d-flex flex-row align-items-center">
<div class="wrapper min-vh-100 d-flex flex-row align-items-center">
<CContainer>
<CRow class="justify-content-center">
<CCol :md="6">
@@ -22,9 +22,3 @@
</CContainer>
</div>
</template>
<script>
export default {
name: 'Page500',
}
</script>
src/views/pages/Register.vue
+1 -7
View File
@@ -1,5 +1,5 @@
<template>
<div class="bg-body-tertiary min-vh-100 d-flex flex-row align-items-center">
<div class="bwrapper min-vh-100 d-flex flex-row align-items-center">
<CContainer>
<CRow class="justify-content-center">
<CCol :md="9" :lg="7" :xl="6">
@@ -49,9 +49,3 @@
</CContainer>
</div>
</template>
<script>
export default {
name: 'Register',
}
</script>
src/views/theme/ColorTheme.vue
+7 -13
View File
@@ -1,21 +1,15 @@
<script setup>
const props = defineProps({
color: String
})
</script>
<template>
<CCol :xl="2" :md="4" :sm="6" :xs="12" class="mb-4">
<div
:class="['theme-color w-75 rounded mb-3', color]"
:class="['theme-color w-75 rounded mb-3', props.color]"
style="padding-top: 75%"
></div>
<slot></slot>
</CCol>
</template>
<script>
export default {
name: 'ColorTheme',
props: {
color: {
type: String,
default: undefined,
},
},
}
</script>
src/views/theme/Colors.vue
+8 -20
View File
@@ -1,3 +1,7 @@
<script setup>
import ColorTheme from './ColorTheme.vue'
</script>
<template>
<CRow>
<CCol>
@@ -8,18 +12,10 @@
<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>
@@ -29,11 +25,3 @@
</CCol>
</CRow>
</template>
<script>
import ColorTheme from './ColorTheme'
export default {
name: 'Colors',
components: { ColorTheme },
}
</script>
src/views/theme/Typography.vue
-6
View File
@@ -243,9 +243,3 @@
</CCol>
</CRow>
</template>
<script>
export default {
name: 'Typography',
}
</script>
src/views/widgets/Widgets.vue
+52 -72
View File
@@ -1,3 +1,55 @@
<script setup>
import { getStyle } from '@coreui/utils'
import { CChart } from '@coreui/vue-chartjs'
import WidgetsStatsA from './WidgetsStatsTypeA.vue'
import WidgetsStatsD from './WidgetsStatsTypeD.vue'
const widgetStatsE = {
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
optionsBar: {
maintainAspectRatio: false,
plugins: {
legend: {
display: false,
},
},
scales: {
x: {
display: false,
},
y: {
display: false,
},
},
},
optionsLine: {
maintainAspectRatio: false,
elements: {
line: {
tension: 0.4,
},
point: {
radius: 0,
},
},
plugins: {
legend: {
display: false,
},
},
scales: {
x: {
display: false,
},
y: {
display: false,
},
},
},
}
</script>
<template>
<CCard class="mb-4">
<CCardHeader>
@@ -514,75 +566,3 @@
</CCardBody>
</CCard>
</template>
<script>
import { getStyle } from '@coreui/utils'
import { CChart } from '@coreui/vue-chartjs'
import WidgetsStatsA from './WidgetsStatsTypeA.vue'
import WidgetsStatsD from './WidgetsStatsTypeD.vue'
export default {
name: 'Widgets',
components: {
CChart,
WidgetsStatsA,
WidgetsStatsD,
},
setup() {
const widgetStatsE = {
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
optionsBar: {
maintainAspectRatio: false,
plugins: {
legend: {
display: false,
},
},
scales: {
x: {
display: false,
},
y: {
display: false,
},
},
},
optionsLine: {
maintainAspectRatio: false,
elements: {
line: {
tension: 0.4,
},
point: {
radius: 0,
},
},
plugins: {
legend: {
display: false,
},
},
scales: {
x: {
display: false,
},
y: {
display: false,
},
},
},
}
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' },
],
}
},
}
</script>
src/views/widgets/WidgetsStatsTypeA.vue
+35 -98
View File
@@ -1,21 +1,38 @@
<script setup>
import { onMounted, ref } from 'vue'
import { CChart } from '@coreui/vue-chartjs'
import { getStyle } from '@coreui/utils'
const widgetChartRef1 = ref()
const widgetChartRef2 = ref()
onMounted(() => {
document.documentElement.addEventListener('ColorSchemeChange', () => {
if (widgetChartRef1.value) {
widgetChartRef1.value.chart.data.datasets[0].pointBackgroundColor = getStyle('--cui-primary')
widgetChartRef1.value.chart.update()
}
if (widgetChartRef2.value) {
widgetChartRef2.value.chart.data.datasets[0].pointBackgroundColor = getStyle('--cui-info')
widgetChartRef2.value.chart.update()
}
})
})
</script>
<template>
<CRow :xs="{ gutter: 4 }">
<CCol :sm="6" :xl="4" :xxl="3">
<CWidgetStatsA color="primary">
<template #value
>26K
<span class="fs-6 fw-normal">
(-12.4% <CIcon icon="cil-arrow-bottom" />)
</span>
<span class="fs-6 fw-normal"> (-12.4% <CIcon icon="cil-arrow-bottom" />) </span>
</template>
<template #title>Users</template>
<template #action>
<CDropdown placement="bottom-end">
<CDropdownToggle
color="transparent"
class="p-0 text-white"
:caret="false"
>
<CDropdownToggle color="transparent" class="p-0 text-white" :caret="false">
<CIcon icon="cil-options" class="text-white" />
</CDropdownToggle>
<CDropdownMenu>
@@ -32,15 +49,7 @@
style="height: 70px"
ref="widgetChartRef1"
:data="{
labels: [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
],
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
@@ -102,18 +111,12 @@
<CWidgetStatsA color="info">
<template #value
>$6.200
<span class="fs-6 fw-normal">
(40.9% <CIcon icon="cil-arrow-top" />)
</span>
<span class="fs-6 fw-normal"> (40.9% <CIcon icon="cil-arrow-top" />) </span>
</template>
<template #title>Income</template>
<template #action>
<CDropdown placement="bottom-end">
<CDropdownToggle
color="transparent"
class="p-0 text-white"
:caret="false"
>
<CDropdownToggle color="transparent" class="p-0 text-white" :caret="false">
<CIcon icon="cil-options" class="text-white" />
</CDropdownToggle>
<CDropdownMenu>
@@ -130,15 +133,7 @@
style="height: 70px"
ref="widgetChartRef2"
:data="{
labels: [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
],
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
@@ -199,18 +194,12 @@
<CWidgetStatsA color="warning">
<template #value
>2.49%
<span class="fs-6 fw-normal">
(84.7% <CIcon icon="cil-arrow-top" />)
</span>
<span class="fs-6 fw-normal"> (84.7% <CIcon icon="cil-arrow-top" />) </span>
</template>
<template #title>Conversion Rate</template>
<template #action>
<CDropdown placement="bottom-end">
<CDropdownToggle
color="transparent"
class="p-0 text-white"
:caret="false"
>
<CDropdownToggle color="transparent" class="p-0 text-white" :caret="false">
<CIcon icon="cil-options" class="text-white" />
</CDropdownToggle>
<CDropdownMenu>
@@ -226,15 +215,7 @@
class="mt-3"
style="height: 70px"
:data="{
labels: [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
],
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
@@ -283,18 +264,12 @@
<CWidgetStatsA color="danger">
<template #value
>44K
<span class="fs-6 fw-normal">
(-23.6% <CIcon icon="cil-arrow-bottom" />)
</span>
<span class="fs-6 fw-normal"> (-23.6% <CIcon icon="cil-arrow-bottom" />) </span>
</template>
<template #title>Sessions</template>
<template #action>
<CDropdown placement="bottom-end">
<CDropdownToggle
color="transparent"
class="p-0 text-white"
:caret="false"
>
<CDropdownToggle color="transparent" class="p-0 text-white" :caret="false">
<CIcon icon="cil-options" class="text-white" />
</CDropdownToggle>
<CDropdownMenu>
@@ -333,10 +308,7 @@
label: 'My First dataset',
backgroundColor: 'rgba(255,255,255,.2)',
borderColor: 'rgba(255,255,255,.55)',
data: [
78, 81, 80, 45, 34, 12, 40, 85, 65, 23, 12, 98, 34, 84, 67,
82,
],
data: [78, 81, 80, 45, 34, 12, 40, 85, 65, 23, 12, 98, 34, 84, 67, 82],
barPercentage: 0.6,
},
],
@@ -378,38 +350,3 @@
</CCol>
</CRow>
</template>
<script>
import { onMounted, ref } from 'vue'
import { CChart } from '@coreui/vue-chartjs'
import { getStyle } from '@coreui/utils'
export default {
name: 'WidgetsStatsA',
components: {
CChart,
},
setup() {
const widgetChartRef1 = ref()
const widgetChartRef2 = ref()
onMounted(() => {
document.documentElement.addEventListener('ColorSchemeChange', () => {
if (widgetChartRef1.value) {
widgetChartRef1.value.chart.data.datasets[0].pointBackgroundColor =
getStyle('--cui-primary')
widgetChartRef1.value.chart.update()
}
if (widgetChartRef2.value) {
widgetChartRef2.value.chart.data.datasets[0].pointBackgroundColor =
getStyle('--cui-info')
widgetChartRef2.value.chart.update()
}
})
})
return { getStyle, widgetChartRef1, widgetChartRef2 }
},
}
</script>
src/views/widgets/WidgetsStatsTypeD.vue
+32 -43
View File
@@ -1,3 +1,35 @@
<script setup>
import { CChart } from '@coreui/vue-chartjs'
const options = {
elements: {
line: {
tension: 0.4,
},
point: {
radius: 0,
hitRadius: 10,
hoverRadius: 4,
hoverBorderWidth: 3,
},
},
maintainAspectRatio: false,
plugins: {
legend: {
display: false,
},
},
scales: {
x: {
display: false,
},
y: {
display: false,
},
},
}
</script>
<template>
<CRow :xs="{ gutter: 4 }">
<CCol :sm="6" :xl="4" :xxl="3">
@@ -126,46 +158,3 @@
</CCol>
</CRow>
</template>
<script>
import { CChart } from '@coreui/vue-chartjs'
export default {
name: 'WidgetsStatsD',
components: {
CChart,
},
setup() {
const options = {
elements: {
line: {
tension: 0.4,
},
point: {
radius: 0,
hitRadius: 10,
hoverRadius: 4,
hoverBorderWidth: 3,
},
},
maintainAspectRatio: false,
plugins: {
legend: {
display: false,
},
},
scales: {
x: {
display: false,
},
y: {
display: false,
},
},
}
return {
options,
}
},
}
</script>