refactor: migrate to <script setup>

.eslintrc.cjs

@@ -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

@@ -1,23 +1,19 @@
-<template>
+<script setup>
-  <router-view />
-</template>
-<script>
 import { onBeforeMount } from 'vue'
 import { useStore } from 'vuex'
 import { useColorModes } from '@coreui/vue'
 
-export default {
+const { isColorModeSet, setColorMode } = useColorModes('coreui-free-vue-admin-template-theme')
-  setup() {
+const store = useStore()
-    const { isColorModeSet, setColorMode } = useColorModes(
-      'coreui-free-vue-admin-template-theme',
-    )
-    const store = useStore()
 
-    onBeforeMount(() => {
+onBeforeMount(() => {
   const urlParams = new URLSearchParams(window.location.href.split('?')[1])
-      const theme =
+  let theme = urlParams.get('theme')
-        urlParams.get('theme') &&
+
-        urlParams.get('theme').match(/^[A-Za-z0-9\s]+/)[0]
+  if (theme !== null && theme.match(/^[A-Za-z0-9\s]+/)) {
+    theme = theme.match(/^[A-Za-z0-9\s]+/)[0]
+  }
+
   if (theme) {
     setColorMode(theme)
     return
@@ -28,11 +24,13 @@ export default {
   }
 
   setColorMode(store.state.theme)
-    })
+})
-  },
-}
 </script>
 
+<template>
+  <router-view />
+</template>
+
 <style lang="scss">
 // Import Main styles for this application
 @import 'styles/style';

src/_nav.js

@@ -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

@@ -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

@@ -12,9 +12,3 @@
     </div>
   </CFooter>
 </template>
-
-<script>
-export default {
-  name: 'AppFooter',
-}
-</script>

src/components/AppHeader.vue

@@ -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

@@ -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>
+      <CDropdownItem> <CIcon icon="cil-user" /> Profile </CDropdownItem>
-        <CIcon icon="cil-user" /> Profile
+      <CDropdownItem> <CIcon icon="cil-settings" /> Settings </CDropdownItem>
-      </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>
+      <CDropdownItem> <CIcon icon="cil-shield-alt" /> Lock Account </CDropdownItem>
-        <CIcon icon="cil-shield-alt" /> Lock Account
+      <CDropdownItem> <CIcon icon="cil-lock-locked" /> Logout </CDropdownItem>
-      </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

@@ -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

@@ -143,4 +143,5 @@ const AppSidebarNav = defineComponent({
       )
   },
 })
+
 export { AppSidebarNav }

src/components/DocsExample.vue

@@ -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

@@ -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

@@ -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,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

@@ -54,9 +54,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'Breadcrumbs',
-}
-</script>

src/views/base/Cards.vue

@@ -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

@@ -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

@@ -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">
+          <p class="text-body-secondary small">You can use a link or a button component.</p>
-            You can use a link or a button component.
-          </p>
           <DocsExample href="components/collapse.html#example">
-            <CButton color="primary" href="#" @click="visible = !visible"
+            <CButton color="primary" href="#" @click="visible = !visible">Link</CButton>
-              >Link</CButton
+            <CButton color="primary" @click="visible = !visible">Button</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
+                  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
-                  accusamus terry richardson ad squid. Nihil anim keffiyeh
+                  richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
-                  helvetica, craft beer labore wes anderson cred nesciunt
+                  cred nesciunt sapiente ea proident.
-                  sapiente ea proident.
                 </CCardBody>
               </CCard>
             </CCollapse>
@@ -30,15 +32,12 @@
         </CCardBody>
       </CCard>
       <CCard class="mb-4">
-        <CCardHeader>
+        <CCardHeader> <strong>Vue Collapse</strong> <small> Horizontal</small> </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>horizontal</code> property to transition the <code>width</code> instead of
-            <code>width</code> instead of <code>height</code> and set a
+            <code>height</code> and set a <code>width</code> on the immediate child element.
-            <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.
+                    This is some placeholder content for a horizontal collapse. It's hidden by
-                    It's hidden by default and shown when triggered.
+                    default and shown when triggered.
                   </CCardBody>
                 </CCard>
               </CCollapse>
@@ -63,21 +62,15 @@
         </CCardBody>
       </CCard>
       <CCard class="mb-4">
-        <CCardHeader>
+        <CCardHeader> <strong>Vue Collapse</strong> <small> multi target</small> </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"
+            <CButton color="primary" @click="visibleA = !visibleA">Toggle first element</CButton>
-              >Toggle first element</CButton
+            <CButton color="primary" @click="visibleB = !visibleB">Toggle second 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
+                      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
-                      accusamus terry richardson ad squid. Nihil anim keffiyeh
+                      richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes
-                      helvetica, craft beer labore wes anderson cred nesciunt
+                      anderson cred nesciunt sapiente ea proident.
-                      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
+                      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
-                      accusamus terry richardson ad squid. Nihil anim keffiyeh
+                      richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes
-                      helvetica, craft beer labore wes anderson cred nesciunt
+                      anderson cred nesciunt sapiente ea proident.
-                      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

@@ -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

@@ -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

@@ -173,9 +173,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'Paginations',
-}
-</script>

src/views/base/Placeholders.vue

@@ -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

@@ -76,9 +76,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'Popovers',
-}
-</script>

src/views/base/Progress.vue

@@ -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

@@ -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

@@ -985,9 +985,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'Tables',
-}
-</script>

src/views/base/Tooltips.vue

@@ -72,9 +72,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'Tooltips',
-}
-</script>

src/views/buttons/ButtonGroups.vue

@@ -415,9 +415,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'ButtonGroups',
-}
-</script>

src/views/buttons/Buttons.vue

@@ -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

@@ -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

@@ -1,15 +1,7 @@
-<template>
+<script setup>
-  <CChartBar :data="defaultData" />
-</template>
-
-<script>
 import { CChartBar } from '@coreui/vue-chartjs'
-export default {
+
-  name: 'CChartBarExample',
+const data = {
-  components: { CChartBar },
-  computed: {
-    defaultData() {
-      return {
   labels: [
     'January',
     'February',
@@ -31,8 +23,9 @@ export default {
       data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 12],
     },
   ],
-      }
-    },
-  },
 }
 </script>
+
+<template>
+  <CChartBar :data="data" />
+</template>

src/views/charts/CChartDoughnutExample.vue

@@ -1,15 +1,7 @@
-<template>
+<script setup>
-  <CChartDoughnut :data="defaultData" />
-</template>
-
-<script>
 import { CChartDoughnut } from '@coreui/vue-chartjs'
-export default {
+
-  name: 'CChartDoughnutExample',
+const data = {
-  components: { CChartDoughnut },
-  computed: {
-    defaultData() {
-      return {
   labels: ['VueJs', 'EmberJs', 'VueJs', 'AngularJs'],
   datasets: [
     {
@@ -17,8 +9,9 @@ export default {
       data: [40, 20, 80, 10],
     },
   ],
-      }
-    },
-  },
 }
 </script>
+
+<template>
+  <CChartDoughnut :data="data" />
+</template>

src/views/charts/CChartLineExample.vue

@@ -1,15 +1,7 @@
-<template>
+<script setup>
-  <CChartLine :data="defaultData" />
-</template>
-
-<script>
 import { CChartLine } from '@coreui/vue-chartjs'
-export default {
+
-  name: 'CChartLineExample',
+const data = {
-  components: { CChartLine },
-  computed: {
-    defaultData() {
-      return {
   labels: ['months', 'a', 'b', 'c', 'd'],
   datasets: [
     {
@@ -23,8 +15,9 @@ export default {
       data: [39, 80, 40, 35, 40, 20, 45],
     },
   ],
-      }
-    },
-  },
 }
 </script>
+
+<template>
+  <CChartLine :data="data" />
+</template>

src/views/charts/CChartPieExample.vue

@@ -1,15 +1,7 @@
-<template>
+<script setup>
-  <CChartPie :data="defaultData" />
-</template>
-
-<script>
 import { CChartPie } from '@coreui/vue-chartjs'
-export default {
+
-  name: 'CChartPieExample',
+const data = {
-  components: { CChartPie },
-  computed: {
-    defaultData() {
-      return {
   labels: ['VueJs', 'EmberJs', 'VueJs', 'AngularJs'],
   datasets: [
     {
@@ -17,8 +9,9 @@ export default {
       data: [40, 20, 80, 10],
     },
   ],
-      }
-    },
-  },
 }
 </script>
+
+<template>
+  <CChartPie :data="data" />
+</template>

src/views/charts/CChartPolarAreaExample.vue

@@ -1,24 +1,8 @@
-<template>
+<script setup>
-  <CChartPolarArea :data="defaultData" />
-</template>
-
-<script>
 import { CChartPolarArea } from '@coreui/vue-chartjs'
-export default {
+
-  name: 'CChartPolarAreaExample',
+const data = {
-  components: { CChartPolarArea },
+  labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
-  computed: {
-    defaultData() {
-      return {
-        labels: [
-          'Eating',
-          'Drinking',
-          'Sleeping',
-          'Designing',
-          'Coding',
-          'Cycling',
-          'Running',
-        ],
   datasets: [
     {
       label: 'My First dataset',
@@ -42,8 +26,9 @@ export default {
   options: {
     aspectRatio: 1.5,
   },
-      }
-    },
-  },
 }
 </script>
+
+<template>
+  <CChartPolarArea :data="data" />
+</template>

src/views/charts/CChartRadarExample.vue

@@ -1,24 +1,12 @@
 <template>
-  <CChartRadar :data="defaultData" />
+  <CChartRadar :data="data" />
 </template>
 
-<script>
+<script setup>
 import { CChartRadar } from '@coreui/vue-chartjs'
-export default {
+
-  name: 'CChartRadarExample',
+const data = {
-  components: { CChartRadar },
+  labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
-  computed: {
-    defaultData() {
-      return {
-        labels: [
-          'Eating',
-          'Drinking',
-          'Sleeping',
-          'Designing',
-          'Coding',
-          'Cycling',
-          'Running',
-        ],
   datasets: [
     {
       label: '2020',
@@ -46,8 +34,5 @@ export default {
   options: {
     aspectRatio: 1.5,
   },
-      }
-    },
-  },
 }
 </script>

src/views/charts/Charts.vue

@@ -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

@@ -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

@@ -1,22 +1,12 @@
-<template>
+<script setup>
-  <CChart type="line" :data="data" :options="options" ref="mainChartRef" />
-</template>
-
-<script>
 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 {
+const mainChartRef = ref()
-  name: 'MainChartExample',
+const data = {
-  components: {
-    CChart,
-  },
-  setup() {
-    const mainChartRef = ref()
-    const data = {
   labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
   datasets: [
     {
@@ -62,9 +52,9 @@ export default {
       data: [65, 65, 65, 65, 65, 65, 65],
     },
   ],
-    }
+}
 
-    const options = {
+const options = {
   maintainAspectRatio: false,
   plugins: {
     legend: {
@@ -108,41 +98,31 @@ export default {
       hoverBorderWidth: 3,
     },
   },
-    }
+}
 
-    onMounted(() => {
+onMounted(() => {
   document.documentElement.addEventListener('ColorSchemeChange', () => {
     if (mainChartRef.value) {
-          mainChartRef.value.chart,
+      mainChartRef.value.chart.options.scales.x.grid.borderColor = getStyle(
-            (options.scales.x.grid.borderColor = getStyle(
         '--cui-border-color-translucent',
-            ))
+      )
-          mainChartRef.value.chart,
+      mainChartRef.value.chart.options.scales.x.grid.color = getStyle(
-            (options.scales.x.grid.color = getStyle(
         '--cui-border-color-translucent',
-            ))
+      )
-          mainChartRef.value.chart,
+      mainChartRef.value.chart.options.scales.x.ticks.color = getStyle('--cui-body-color')
-            (options.scales.x.ticks.color = getStyle('--cui-body-color'))
+      mainChartRef.value.chart.options.scales.y.grid.borderColor = getStyle(
-          mainChartRef.value.chart,
-            (options.scales.y.grid.borderColor = getStyle(
         '--cui-border-color-translucent',
-            ))
+      )
-          mainChartRef.value.chart,
+      mainChartRef.value.chart.options.scales.y.grid.color = getStyle(
-            (options.scales.y.grid.color = getStyle(
         '--cui-border-color-translucent',
-            ))
+      )
-          mainChartRef.value.chart,
+      mainChartRef.value.chart.options.scales.y.ticks.color = getStyle('--cui-body-color')
-            (options.scales.y.ticks.color = getStyle('--cui-body-color'))
       mainChartRef.value.chart.update()
     }
   })
-    })
+})
-
-    return {
-      data,
-      mainChartRef,
-      options,
-    }
-  },
-}
 </script>
+
+<template>
+  <CChart type="line" :data="data" :options="options" ref="mainChartRef" />
+</template>

src/views/forms/ChecksRadios.vue

@@ -396,9 +396,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'ChecksRadios',
-}
-</script>

src/views/forms/FloatingLabels.vue

@@ -170,9 +170,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'FloatingLabels',
-}
-</script>

src/views/forms/FormControl.vue

@@ -242,9 +242,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'FormControl',
-}
-</script>

src/views/forms/InputGroup.vue

@@ -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

@@ -450,9 +450,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'Layout',
-}
-</script>

src/views/forms/Range.vue

@@ -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

@@ -105,10 +105,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  // eslint-disable-next-line
-  name: 'Select',
-}
-</script>

src/views/forms/Validation.vue

@@ -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>
+        <CCardHeader> <strong>Validation</strong> <small>Custom styles</small> </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
+            For custom CoreUI form validation messages, you&#39;ll need to add the
-            the
+            <code>novalidate</code> boolean property to your <code>&lt;CForm&gt;</code>. This
-            <code>novalidate</code> boolean property to your
+            disables the browser default feedback tooltips, but still provides access to the form
-            <code>&lt;CForm&gt;</code>. This disables the browser default
+            validation APIs in JavaScript. Try to submit the form below; our JavaScript will
-            feedback tooltips, but still provides access to the form validation
+            intercept the submit button and relay feedback to you. When attempting to submit,
-            APIs in JavaScript. Try to submit the form below; our JavaScript
+            you&#39;ll see the <code>:invalid</code> and <code>:valid</code> styles applied to your
-            will intercept the submit button and relay feedback to you. When
+            form controls.
-            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,
+            Custom feedback styles apply custom colors, borders, focus styles, and background icons
-            and background icons to better communicate feedback.
+            to better communicate feedback.
           </p>
           <DocsExample href="forms/validation.html">
             <CForm
@@ -48,17 +81,13 @@
                     aria-describedby="inputGroupPrepend"
                     required
                   />
-                  <CFormFeedback invalid>
+                  <CFormFeedback invalid> Please choose a username. </CFormFeedback>
-                    Please choose a username.
-                  </CFormFeedback>
                 </CInputGroup>
               </CCol>
               <CCol :md="6">
                 <CFormLabel for="validationCustom03">City</CFormLabel>
                 <CFormInput id="validationCustom03" required />
-                <CFormFeedback invalid>
+                <CFormFeedback invalid> Please provide a valid city. </CFormFeedback>
-                  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>
+                <CFormFeedback invalid> Please provide a valid city. </CFormFeedback>
-                  Please provide a valid city.
-                </CFormFeedback>
               </CCol>
               <CCol :md="3">
                 <CFormLabel for="validationCustom05">City</CFormLabel>
                 <CFormInput id="validationCustom05" required />
-                <CFormFeedback invalid>
+                <CFormFeedback invalid> Please provide a valid zip. </CFormFeedback>
-                  Please provide a valid zip.
-                </CFormFeedback>
               </CCol>
               <CCol :xs="12">
                 <CFormCheck
@@ -84,9 +109,7 @@
                   label="Agree to terms and conditions"
                   required
                 />
-                <CFormFeedback invalid>
+                <CFormFeedback invalid> You must agree before submitting. </CFormFeedback>
-                  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>
+        <CCardHeader> <strong>Validation</strong> <small>Browser defaults</small> </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
+            Not interested in custom validation feedback messages or writing JavaScript to change
-            JavaScript to change form behaviors? All good, you can use the
+            form behaviors? All good, you can use the browser defaults. Try submitting the form
-            browser defaults. Try submitting the form below. Depending on your
+            below. Depending on your browser and OS, you&#39;ll see a slightly different style of
-            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
+            While these feedback styles cannot be styled with CSS, you can still customize the
-            customize the feedback text through JavaScript.
+            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"
+                <CFormLabel for="validationDefaultUsername">Username</CFormLabel>
-                  >Username</CFormLabel
-                >
                 <CInputGroup class="has-validation">
                   <CInputGroupText id="inputGroupPrepend02">@</CInputGroupText>
                   <CFormInput
@@ -141,17 +159,13 @@
                     aria-describedby="inputGroupPrepend02"
                     required
                   />
-                  <CFormFeedback invalid>
+                  <CFormFeedback invalid> Please choose a username. </CFormFeedback>
-                    Please choose a username.
-                  </CFormFeedback>
                 </CInputGroup>
               </CCol>
               <CCol :md="6">
                 <CFormLabel for="validationDefault03">City</CFormLabel>
                 <CFormInput id="validationDefault03" required />
-                <CFormFeedback invalid>
+                <CFormFeedback invalid> Please provide a valid city. </CFormFeedback>
-                  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>
+                <CFormFeedback invalid> Please provide a valid city. </CFormFeedback>
-                  Please provide a valid city.
-                </CFormFeedback>
               </CCol>
               <CCol :md="3">
                 <CFormLabel for="validationDefault05">City</CFormLabel>
                 <CFormInput id="validationDefault05" required />
-                <CFormFeedback invalid>
+                <CFormFeedback invalid> Please provide a valid zip. </CFormFeedback>
-                  Please provide a valid zip.
-                </CFormFeedback>
               </CCol>
               <CCol :xs="12">
                 <CFormCheck
@@ -177,9 +187,7 @@
                   label="Agree to terms and conditions"
                   required
                 />
-                <CFormFeedback invalid>
+                <CFormFeedback invalid> You must agree before submitting. </CFormFeedback>
-                  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>
+        <CCardHeader> <strong>Validation</strong> <small>Server side</small> </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
+            We recommend using client-side validation, but in case you require server-side
-            server-side validation, you can indicate invalid and valid form
+            validation, you can indicate invalid and valid form fields with <code>invalid</code> and
-            fields with <code>invalid</code> and <code>valid</code> boolean
+            <code>valid</code> boolean properties.
-            properties.
           </p>
           <p class="text-body-secondary small">
-            For invalid fields, ensure that the invalid feedback/error message
+            For invalid fields, ensure that the invalid feedback/error message is associated with
-            is associated with the relevant form field using
+            the relevant form field using
-            <code>aria-describedby</code> (noting that this attribute allows
+            <code>aria-describedby</code> (noting that this attribute allows more than one
-            more than one <code>id</code> to be referenced, in case the field
+            <code>id</code> to be referenced, in case the field already points to additional form
-            already points to additional form text).
+            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
+                <CFormInput id="validationServer01" type="text" value="Mark" valid required />
-                  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
+                <CFormInput id="validationServer02" type="text" value="Otto" valid required />
-                  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
+                  <CFormFeedback invalid>Please choose a username.</CFormFeedback>
-                    >Please choose a username.</CFormFeedback
-                  >
                 </CInputGroup>
               </CCol>
               <CCol :md="6">
                 <CFormLabel for="validationServer03">City</CFormLabel>
-                <CFormInput
+                <CFormInput id="validationServer03" type="text" invalid required />
-                  id="validationServer03"
+                <CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
-                  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
+                <CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
-                  >Please provide a valid city.</CFormFeedback
-                >
               </CCol>
               <CCol :md="3">
                 <CFormLabel for="validationServer05">City</CFormLabel>
-                <CFormInput
+                <CFormInput id="validationServer05" type="text" invalid required />
-                  id="validationServer05"
+                <CFormFeedback invalid>Please provide a valid zip.</CFormFeedback>
-                  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
+                <CFormFeedback invalid>You must agree before submitting.</CFormFeedback>
-                  >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>
+        <CCardHeader> <strong>Validation</strong> <small>Supported elements</small> </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
+            Validation styles are available for the following form controls and components:
-            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"
+                <CFormLabel for="validationTextarea" class="form-label">Textarea</CFormLabel>
-                  >Textarea</CFormLabel
-                >
                 <CFormTextarea
                   id="validationTextarea"
                   placeholder="Required example textarea"
                   invalid
                   required
                 ></CFormTextarea>
-                <CFormFeedback invalid>
+                <CFormFeedback invalid> Please enter a message in the textarea. </CFormFeedback>
-                  Please enter a message in the textarea.
-                </CFormFeedback>
               </div>
               <CFormCheck
                 id="validationFormCheck1"
@@ -340,9 +306,7 @@
                 label="Check this checkbox"
                 required
               />
-              <CFormFeedback invalid
+              <CFormFeedback invalid>Example invalid feedback text</CFormFeedback>
-                >Example invalid feedback text</CFormFeedback
-              >
               <CFormCheck
                 id="validationFormCheck2"
                 type="radio"
@@ -358,9 +322,7 @@
                 label="Or toggle this other radio"
                 required
               />
-              <CFormFeedback invalid
+              <CFormFeedback invalid>More example invalid feedback text</CFormFeedback>
-                >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
+                <CFormFeedback invalid>Example invalid select feedback</CFormFeedback>
-                  >Example invalid select feedback</CFormFeedback
-                >
               </div>
               <div class="mb-3">
                 <CFormInput
@@ -379,14 +339,10 @@
                   aria-label="file example"
                   required
                 />
-                <CFormFeedback invalid
+                <CFormFeedback invalid>Example invalid form file feedback</CFormFeedback>
-                  >Example invalid form file feedback</CFormFeedback
-                >
               </div>
               <div class="mb-3">
-                <CButton type="submit" color="primary" disabled
+                <CButton type="submit" color="primary" disabled>Submit form</CButton>
-                  >Submit form</CButton
-                >
               </div>
             </CForm>
           </DocsExample>
@@ -395,17 +351,13 @@
     </CCol>
     <CCol :xs="12">
       <CCard class="mb-4">
-        <CCardHeader>
+        <CCardHeader> <strong>Validation</strong> <small>Tooltips</small> </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
+            If your form layout allows it, you can swap the text for the tooltip to display
-            to display validation feedback in a styled tooltip. Be sure to have
+            validation feedback in a styled tooltip. Be sure to have a parent with
-            a parent with
+            <code>position: relative</code> on it for tooltip positioning. In the example below, our
-            <code>position: relative</code> on it for tooltip positioning. In
+            column classes have this already, but your project may require an alternative setup.
-            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"
+                <CFormLabel for="validationTooltipUsername">Username</CFormLabel>
-                  >Username</CFormLabel
-                >
                 <CInputGroup class="has-validation">
                   <CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
                   <CFormInput
@@ -436,17 +386,13 @@
                     aria-describedby="inputGroupPrepend"
                     required
                   />
-                  <CFormFeedback tooltip invalid>
+                  <CFormFeedback tooltip invalid> Please choose a username. </CFormFeedback>
-                    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>
+                <CFormFeedback tooltip invalid> Please provide a valid city. </CFormFeedback>
-                  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>
+                <CFormFeedback tooltip invalid> Please provide a valid city. </CFormFeedback>
-                  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>
+                <CFormFeedback tooltip invalid> Please provide a valid zip. </CFormFeedback>
-                  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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -54,11 +54,11 @@
             the presentation of a badge.
           </p>
           <DocsExample href="components/badge.html#contextual-variations">
-            <CBadge color="primary">primary</CBadge>
+            <CBadge color="primary-gradient">primary</CBadge>
-            <CBadge color="success">success</CBadge>
+            <CBadge color="success-gradient">success</CBadge>
-            <CBadge color="danger">danger</CBadge>
+            <CBadge color="danger-gradient">danger</CBadge>
-            <CBadge color="warning">warning</CBadge>
+            <CBadge color="warning-gradient">warning</CBadge>
-            <CBadge color="info">info</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="primary-gradient" shape="rounded-pill">
-            <CBadge color="success" shape="rounded-pill"> success </CBadge>
+              primary
-            <CBadge color="danger" shape="rounded-pill"> danger </CBadge>
+            </CBadge>
-            <CBadge color="warning" shape="rounded-pill"> warning </CBadge>
+            <CBadge color="success-gradient" shape="rounded-pill">
-            <CBadge color="info" shape="rounded-pill"> info </CBadge>
+              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

@@ -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
+            <code>position</code> and <code>display</code> have been overridden). Included are the
-            overridden). Included are the modal header, modal body (required for
+            modal header, modal body (required for <code>padding</code>), and modal footer
-            <code>padding</code>), and modal footer (optional). We ask that you
+            (optional). We ask that you include modal headers with dismiss actions whenever
-            include modal headers with dismiss actions whenever possible, or
+            possible, or provide another explicit dismiss action.
-            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>
+        <CCardHeader> <strong>Vue Modal</strong> <small>Live demo</small> </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
+            Toggle a working modal demo by clicking the button below. It will slide down and fade in
-            slide down and fade in from the top of the page.
+            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
+              <CModalBody>Woohoo, you're reading this text in a modal!</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>
+        <CCardHeader> <strong>Vue Modal</strong> <small>Static backdrop</small> </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>,
+            If you set <code>backdrop</code> property to <code>static</code>, your modal will behave
-            your modal will behave as though the backdrop is static, meaning it
+            as though the backdrop is static, meaning it will not close when clicking outside it.
-            will not close when clicking outside it. Click the button below to
+            Click the button below to try it.
-            try it.
           </p>
           <DocsExample href="components/modal.html#static-backdrop">
             <CButton
@@ -134,9 +147,7 @@
               >
                 <CModalTitle>Modal title</CModalTitle>
               </CModalHeader>
-              <CModalBody
+              <CModalBody>Woohoo, you're reading this text in a modal!</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
+            When modals become too long for the user's viewport or device, they scroll independent
-            scroll independent of the page itself. Try the demo below to see
+            of the page itself. Try the demo below to see what we mean.
-            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
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
-                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
+                  facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
-                  risus, porta ac consectetur ac, vestibulum at eros.
+                  vestibulum at eros.
                 </p>
                 <p>
-                  Praesent commodo cursus magna, vel scelerisque nisl
+                  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
-                  consectetur et. Vivamus sagittis lacus vel augue laoreet
+                  sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
-                  rutrum faucibus dolor auctor.
                 </p>
                 <p>
-                  Aenean lacinia bibendum nulla sed consectetur. Praesent
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-                  commodo cursus magna, vel scelerisque nisl consectetur et.
+                  scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
-                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
+                  metus auctor fringilla.
-                  fringilla.
                 </p>
                 <p>
-                  Cras mattis consectetur purus sit amet fermentum. Cras justo
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
-                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
+                  facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
-                  risus, porta ac consectetur ac, vestibulum at eros.
+                  vestibulum at eros.
                 </p>
                 <p>
-                  Praesent commodo cursus magna, vel scelerisque nisl
+                  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
-                  consectetur et. Vivamus sagittis lacus vel augue laoreet
+                  sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
-                  rutrum faucibus dolor auctor.
                 </p>
                 <p>
-                  Aenean lacinia bibendum nulla sed consectetur. Praesent
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-                  commodo cursus magna, vel scelerisque nisl consectetur et.
+                  scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
-                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
+                  metus auctor fringilla.
-                  fringilla.
                 </p>
                 <p>
-                  Cras mattis consectetur purus sit amet fermentum. Cras justo
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
-                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
+                  facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
-                  risus, porta ac consectetur ac, vestibulum at eros.
+                  vestibulum at eros.
                 </p>
                 <p>
-                  Praesent commodo cursus magna, vel scelerisque nisl
+                  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
-                  consectetur et. Vivamus sagittis lacus vel augue laoreet
+                  sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
-                  rutrum faucibus dolor auctor.
                 </p>
                 <p>
-                  Aenean lacinia bibendum nulla sed consectetur. Praesent
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-                  commodo cursus magna, vel scelerisque nisl consectetur et.
+                  scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
-                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
+                  metus auctor fringilla.
-                  fringilla.
                 </p>
                 <p>
-                  Cras mattis consectetur purus sit amet fermentum. Cras justo
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
-                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
+                  facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
-                  risus, porta ac consectetur ac, vestibulum at eros.
+                  vestibulum at eros.
                 </p>
                 <p>
-                  Praesent commodo cursus magna, vel scelerisque nisl
+                  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
-                  consectetur et. Vivamus sagittis lacus vel augue laoreet
+                  sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
-                  rutrum faucibus dolor auctor.
                 </p>
                 <p>
-                  Aenean lacinia bibendum nulla sed consectetur. Praesent
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-                  commodo cursus magna, vel scelerisque nisl consectetur et.
+                  scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
-                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
+                  metus auctor fringilla.
-                  fringilla.
                 </p>
                 <p>
-                  Cras mattis consectetur purus sit amet fermentum. Cras justo
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
-                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
+                  facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
-                  risus, porta ac consectetur ac, vestibulum at eros.
+                  vestibulum at eros.
                 </p>
                 <p>
-                  Praesent commodo cursus magna, vel scelerisque nisl
+                  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
-                  consectetur et. Vivamus sagittis lacus vel augue laoreet
+                  sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
-                  rutrum faucibus dolor auctor.
                 </p>
                 <p>
-                  Aenean lacinia bibendum nulla sed consectetur. Praesent
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-                  commodo cursus magna, vel scelerisque nisl consectetur et.
+                  scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
-                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
+                  metus auctor fringilla.
-                  fringilla.
                 </p>
                 <p>
-                  Cras mattis consectetur purus sit amet fermentum. Cras justo
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
-                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
+                  facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
-                  risus, porta ac consectetur ac, vestibulum at eros.
+                  vestibulum at eros.
                 </p>
                 <p>
-                  Praesent commodo cursus magna, vel scelerisque nisl
+                  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
-                  consectetur et. Vivamus sagittis lacus vel augue laoreet
+                  sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
-                  rutrum faucibus dolor auctor.
                 </p>
                 <p>
-                  Aenean lacinia bibendum nulla sed consectetur. Praesent
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-                  commodo cursus magna, vel scelerisque nisl consectetur et.
+                  scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
-                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
+                  metus auctor fringilla.
-                  fringilla.
                 </p>
               </CModalBody>
             </CModal>
           </DocsExample>
           <p class="text-body-secondary small">
-            You can also create a scrollable modal that allows scroll the modal
+            You can also create a scrollable modal that allows scroll the modal body by adding
-            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
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
-                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
+                  facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
-                  risus, porta ac consectetur ac, vestibulum at eros.
+                  vestibulum at eros.
                 </p>
                 <p>
-                  Praesent commodo cursus magna, vel scelerisque nisl
+                  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
-                  consectetur et. Vivamus sagittis lacus vel augue laoreet
+                  sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
-                  rutrum faucibus dolor auctor.
                 </p>
                 <p>
-                  Aenean lacinia bibendum nulla sed consectetur. Praesent
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-                  commodo cursus magna, vel scelerisque nisl consectetur et.
+                  scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
-                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
+                  metus auctor fringilla.
-                  fringilla.
                 </p>
                 <p>
-                  Cras mattis consectetur purus sit amet fermentum. Cras justo
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
-                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
+                  facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
-                  risus, porta ac consectetur ac, vestibulum at eros.
+                  vestibulum at eros.
                 </p>
                 <p>
-                  Praesent commodo cursus magna, vel scelerisque nisl
+                  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
-                  consectetur et. Vivamus sagittis lacus vel augue laoreet
+                  sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
-                  rutrum faucibus dolor auctor.
                 </p>
                 <p>
-                  Aenean lacinia bibendum nulla sed consectetur. Praesent
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-                  commodo cursus magna, vel scelerisque nisl consectetur et.
+                  scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
-                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
+                  metus auctor fringilla.
-                  fringilla.
                 </p>
                 <p>
-                  Cras mattis consectetur purus sit amet fermentum. Cras justo
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
-                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
+                  facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
-                  risus, porta ac consectetur ac, vestibulum at eros.
+                  vestibulum at eros.
                 </p>
                 <p>
-                  Praesent commodo cursus magna, vel scelerisque nisl
+                  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
-                  consectetur et. Vivamus sagittis lacus vel augue laoreet
+                  sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
-                  rutrum faucibus dolor auctor.
                 </p>
                 <p>
-                  Aenean lacinia bibendum nulla sed consectetur. Praesent
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-                  commodo cursus magna, vel scelerisque nisl consectetur et.
+                  scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
-                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
+                  metus auctor fringilla.
-                  fringilla.
                 </p>
                 <p>
-                  Cras mattis consectetur purus sit amet fermentum. Cras justo
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
-                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
+                  facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
-                  risus, porta ac consectetur ac, vestibulum at eros.
+                  vestibulum at eros.
                 </p>
                 <p>
-                  Praesent commodo cursus magna, vel scelerisque nisl
+                  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
-                  consectetur et. Vivamus sagittis lacus vel augue laoreet
+                  sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
-                  rutrum faucibus dolor auctor.
                 </p>
                 <p>
-                  Aenean lacinia bibendum nulla sed consectetur. Praesent
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-                  commodo cursus magna, vel scelerisque nisl consectetur et.
+                  scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
-                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
+                  metus auctor fringilla.
-                  fringilla.
                 </p>
                 <p>
-                  Cras mattis consectetur purus sit amet fermentum. Cras justo
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
-                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
+                  facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
-                  risus, porta ac consectetur ac, vestibulum at eros.
+                  vestibulum at eros.
                 </p>
                 <p>
-                  Praesent commodo cursus magna, vel scelerisque nisl
+                  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
-                  consectetur et. Vivamus sagittis lacus vel augue laoreet
+                  sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
-                  rutrum faucibus dolor auctor.
                 </p>
                 <p>
-                  Aenean lacinia bibendum nulla sed consectetur. Praesent
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-                  commodo cursus magna, vel scelerisque nisl consectetur et.
+                  scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
-                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
+                  metus auctor fringilla.
-                  fringilla.
                 </p>
                 <p>
-                  Cras mattis consectetur purus sit amet fermentum. Cras justo
+                  Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
-                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
+                  facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
-                  risus, porta ac consectetur ac, vestibulum at eros.
+                  vestibulum at eros.
                 </p>
                 <p>
-                  Praesent commodo cursus magna, vel scelerisque nisl
+                  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
-                  consectetur et. Vivamus sagittis lacus vel augue laoreet
+                  sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
-                  rutrum faucibus dolor auctor.
                 </p>
                 <p>
-                  Aenean lacinia bibendum nulla sed consectetur. Praesent
+                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-                  commodo cursus magna, vel scelerisque nisl consectetur et.
+                  scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
-                  Donec sed odio dui. Donec ullamcorper nulla non metus auctor
+                  metus auctor fringilla.
-                  fringilla.
                 </p>
               </CModalBody>
             </CModal>
@@ -433,13 +418,11 @@
     </CCol>
     <CCol :xs="12">
       <CCard class="mb-4">
-        <CCardHeader>
+        <CCardHeader> <strong>Vue Modal</strong> <small>Vertically centered</small> </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
+            Add <code>alignment=&#34;center&#34;</code> to <code>&lt;CModal&gt;</code> to vertically
-            <code>&lt;CModal&gt;</code> to vertically center the modal.
+            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
+                Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
-                odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
+                facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
-                risus, porta ac consectetur ac, vestibulum at eros.
+                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
+                Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
-                odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
+                facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
-                risus, porta ac consectetur ac, vestibulum at eros.
+                vestibulum at eros.
               </CModalBody>
               <CModalFooter>
                 <CButton
@@ -546,15 +529,12 @@
     </CCol>
     <CCol :xs="12">
       <CCard class="mb-4">
-        <CCardHeader>
+        <CCardHeader> <strong>Vue Modal</strong> <small>Tooltips and popovers</small> </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;CTooltips&gt;</code> and <code>&lt;CPopovers&gt;</code> can be placed within
-            <code>&lt;CPopovers&gt;</code> can be placed within modals as
+            modals as needed. When modals are closed, any tooltips and popovers within are also
-            needed. When modals are closed, any tooltips and popovers within are
+            automatically dismissed.
-            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
+                  <CLink v-c-tooltip="'Tooltip'">that link</CLink> have tooltips on hover.
-                  on hover.
                 </p>
               </CModalBody>
               <CModalFooter>
@@ -625,15 +604,12 @@
     </CCol>
     <CCol :xs="12">
       <CCard class="mb-4">
-        <CCardHeader>
+        <CCardHeader> <strong>Vue Modal</strong> <small>Optional sizes</small> </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
+            Modals have three optional sizes, available via modifier classes to be placed on a
-            be placed on a
+            <code>&lt;CModal&gt;</code>. These sizes kick in at certain breakpoints to avoid
-            <code>&lt;CModal&gt;</code>. These sizes kick in at certain
+            horizontal scrollbars on narrower viewports.
-            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>
+        <CCardHeader> <strong>Vue Modal</strong> <small>Fullscreen Modal</small> </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
+            Another override is the option to pop up a modal that covers the user viewport,
-            user viewport, available via property <code>fullscrean</code>.
+            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

@@ -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.
+            <a href="https://coreui.io/docs/utilities/background">background</a> utilities. Here
-            Here we&#39;ve set <code>color=&#34;primary&#34;</code> and added
+            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,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,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,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,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

@@ -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

@@ -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"
+            <ColorTheme color="bg-secondary"><h6>Brand Secondary Color</h6></ColorTheme>
-              ><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-success"
+            <ColorTheme color="bg-warning"><h6>Brand Warning Color</h6></ColorTheme>
-              ><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

@@ -243,9 +243,3 @@
     </CCol>
   </CRow>
 </template>
-
-<script>
-export default {
-  name: 'Typography',
-}
-</script>

src/views/widgets/Widgets.vue

@@ -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

@@ -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">
+          <span class="fs-6 fw-normal"> (-12.4% <CIcon icon="cil-arrow-bottom" />) </span>
-            (-12.4% <CIcon icon="cil-arrow-bottom" />)
-          </span>
         </template>
         <template #title>Users</template>
         <template #action>
           <CDropdown placement="bottom-end">
-            <CDropdownToggle
+            <CDropdownToggle color="transparent" class="p-0 text-white" :caret="false">
-              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: [
+              labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-                '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">
+          <span class="fs-6 fw-normal"> (40.9% <CIcon icon="cil-arrow-top" />) </span>
-            (40.9% <CIcon icon="cil-arrow-top" />)
-          </span>
         </template>
         <template #title>Income</template>
         <template #action>
           <CDropdown placement="bottom-end">
-            <CDropdownToggle
+            <CDropdownToggle color="transparent" class="p-0 text-white" :caret="false">
-              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: [
+              labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-                '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">
+          <span class="fs-6 fw-normal"> (84.7% <CIcon icon="cil-arrow-top" />) </span>
-            (84.7% <CIcon icon="cil-arrow-top" />)
-          </span>
         </template>
         <template #title>Conversion Rate</template>
         <template #action>
           <CDropdown placement="bottom-end">
-            <CDropdownToggle
+            <CDropdownToggle color="transparent" class="p-0 text-white" :caret="false">
-              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: [
+              labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-                '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">
+          <span class="fs-6 fw-normal"> (-23.6% <CIcon icon="cil-arrow-bottom" />) </span>
-            (-23.6% <CIcon icon="cil-arrow-bottom" />)
-          </span>
         </template>
         <template #title>Sessions</template>
         <template #action>
           <CDropdown placement="bottom-end">
-            <CDropdownToggle
+            <CDropdownToggle color="transparent" class="p-0 text-white" :caret="false">
-              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: [
+                  data: [78, 81, 80, 45, 34, 12, 40, 85, 65, 23, 12, 98, 34, 84, 67, 82],
-                    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

@@ -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>