docs: update links to the documentation

src/components/DocsComponents.vue

@@ -0,0 +1,43 @@
+<script setup>
+const props = defineProps({
+  href: String,
+})
+
+import ComponentsImg from '@/assets/images/components.webp'
+</script>
+
+<template>
+  <div class="bg-primary bg-opacity-10 border border-2 border-primary rounded mb-4">
+    <div class="row d-flex align-items-center p-3 px-xl-4 flex-xl-nowrap">
+      <div class="col-xl-auto col-12 d-none d-xl-block p-0">
+        <img
+          class="img-fluid"
+          :src="ComponentsImg"
+          width="160px"
+          height="160px"
+          alt="CoreUI PRO hexagon"
+        />
+      </div>
+      <div class="col-md col-12 px-lg-4">
+        Our Admin Panel isn’t just a mix of third-party components. It’s
+        <strong>
+          the only open-source Vue dashboard built on a professional, enterprise-grade UI Components
+          Library
+        </strong>
+        . This component is part of this library, and we present only the basic usage of it here. To
+        explore extended examples, detailed API documentation, and customization options, refer to
+        our docs.
+      </div>
+      <div class="col-md-auto col-12 mt-3 mt-lg-0">
+        <a
+          class="btn btn-primary text-nowrap text-white"
+          :href="`https://coreui.io/vue/docs/${props.href}`"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Explore Documentation
+        </a>
+      </div>
+    </div>
+  </div>
+</template>

src/components/DocsIcons.vue

@@ -0,0 +1,29 @@
+<script setup>
+import IconsImg from '@/assets/images/icons.webp'
+</script>
+
+<template>
+  <div class="bg-warning bg-opacity-10 border border-2 border-warning rounded mb-4">
+    <div class="row d-flex align-items-center p-3 px-xl-4 flex-xl-nowrap">
+      <div class="col-xl-auto col-12 d-none d-xl-block p-0">
+        <img class="img-fluid" :src="IconsImg" width="160px" height="160px" alt="CoreUI Icons" />
+      </div>
+      <div class="col-md col-12 px-lg-4">
+        CoreUI Icons package is delivered with more than 1500 icons in multiple formats SVG, PNG,
+        and Webfonts. CoreUI Icons are beautifully crafted symbols for common actions and items. You
+        can use them in your digital products for web or mobile app. For more information please
+        visit our documentation.
+      </div>
+      <div class="col-md-auto col-12 mt-3 mt-lg-0">
+        <a
+          class="btn btn-warning text-nowrap text-white"
+          href="https://coreui.io/vue/docs/components/icon.html"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Explore Documentation
+        </a>
+      </div>
+    </div>
+  </div>
+</template>

src/main.js

@@ -7,7 +7,9 @@ import router from './router'
 import CoreuiVue from '@coreui/vue'
 import CIcon from '@coreui/icons-vue'
 import { iconsSet as icons } from '@/assets/icons'
+import DocsComponents from '@/components/DocsComponents'
 import DocsExample from '@/components/DocsExample'
+import DocsIcons from '@/components/DocsIcons'
 
 const app = createApp(App)
 app.use(createPinia())
@@ -15,6 +17,8 @@ app.use(router)
 app.use(CoreuiVue)
 app.provide('icons', icons)
 app.component('CIcon', CIcon)
+app.component('DocsComponents', DocsComponents)
 app.component('DocsExample', DocsExample)
+app.component('DocsIcons', DocsIcons)
 
 app.mount('#app')

src/views/base/Accordion.vue

@@ -1,7 +1,7 @@
-
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/accordion.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Accordion</strong>

src/views/base/Breadcrumbs.vue

@@ -1,16 +1,16 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/breadcrumb.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Breadcrumb</strong>
         </CCardHeader>
         <CCardBody>
           <p class="text-body-secondary small">
-            The breadcrumb navigation provides links back to each previous page
+            The breadcrumb navigation provides links back to each previous page the user navigated
-            the user navigated through and shows the current location in a
+            through and shows the current location in a website or an application. You don’t have to
-            website or an application. You don’t have to add separators, because
+            add separators, because they automatically added in CSS through
-            they automatically added in CSS through
             <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::before">
               <code>::before</code>
             </a>

src/views/base/Cards.vue

@@ -6,6 +6,7 @@ import VueImg from '@/assets/images/vue.jpg'
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/card.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Card</strong> <small>Example</small>

src/views/base/Carousels.vue

@@ -7,6 +7,7 @@ import VueImg from '@/assets/images/vue.jpg'
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/carousel.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Carousels</strong> <small>Slide only</small>

src/views/base/Collapses.vue

@@ -10,6 +10,7 @@ const visibleHorizontal = ref(false)
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/collapse.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Collapse</strong>

src/views/base/ListGroups.vue

@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/list-group.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue List Group</strong> <small>Basic example</small>

src/views/base/Navs.vue

@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/nav.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Navs</strong> <small>Base navs</small>

src/views/base/Paginations.vue

@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/pagination.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Pagination</strong>

src/views/base/Placeholders.vue

@@ -5,6 +5,7 @@ import VueImg from '@/assets/images/vue.jpg'
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/placeholder.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Placeholder</strong>

src/views/base/Popovers.vue

@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/popover.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Popovers</strong> <small>Basic example</small>

src/views/base/Progress.vue

@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/progress.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Progress</strong> <small>Basic example</small>

src/views/base/Spinners.vue

@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/spinner.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Spinner</strong> <small>Border</small>

src/views/base/Tables.vue

@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/table.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Table</strong> <small>Basic example</small>

src/views/base/Tabs.vue

@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/tabs.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Tabs</strong>

src/views/base/Tooltips.vue

@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/tooltip.html" />
       <CCard>
         <CCardHeader>
           <strong>Vue Tooltips</strong> <small>Basic example</small>

src/views/buttons/ButtonGroups.vue

@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/button-group.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Button Group</strong> <span>Basic example</span>

src/views/buttons/Buttons.vue

@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/button.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Button</strong>

src/views/buttons/Dropdowns.vue

@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/dropdown.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Dropdown</strong> <small>Single button</small>

src/views/forms/ChecksRadios.vue

@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="forms/checks-radios.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Checkbox</strong>

src/views/forms/FloatingLabels.vue

@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="forms/floating-labels.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Floating labels</strong>

src/views/forms/FormControl.vue

@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="forms/form-control.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Form Control</strong>

src/views/forms/InputGroup.vue

@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="forms/input-group.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Input group</strong> <small>Basic example</small>

src/views/forms/Layout.vue

@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="forms/layout.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Layout</strong> <small>Form grid</small>

src/views/forms/Range.vue

@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="forms/range.html" />
       <CCard class="mb-4">
         <CCardHeader> <strong>Vue Range</strong> <small></small> </CCardHeader>
         <CCardBody>

src/views/forms/Select.vue

@@ -1,6 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="forms/select.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Select</strong> <small>Default</small>

src/views/forms/Validation.vue

@@ -38,6 +38,7 @@ const handleSubmitTooltip01 = (event) => {
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="forms/validation.html" />
       <CCard class="mb-4">
         <CCardHeader> <strong>Validation</strong> <small>Custom styles</small> </CCardHeader>
         <CCardBody>

src/views/icons/Brands.vue

@@ -1,26 +1,24 @@
 <script setup>
 import { brandSet } from '@coreui/icons'
+import DocsIcons from '../../components/DocsIcons.vue';
 
 const toKebabCase = (str) => str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
 const icons = brandSet
 </script>
 
 <template>
-  <CRow>
+  <DocsIcons />
-    <CCol>
+  <CCard>
-      <CCard>
+    <CCardHeader>CoreUI Icons - Brand</CCardHeader>
-        <CCardHeader>CoreUI Icons - Brand</CCardHeader>
+    <CCardBody>
-        <CCardBody>
+      <CRow class="text-center">
-          <CRow class="text-center">
+        <template v-for="(icon, iconName) in icons" :key="iconName">
-            <template v-for="(icon, iconName) in icons" :key="iconName">
+          <CCol class="mb-5" :xs="3" :sm="2">
-              <CCol class="mb-5" :xs="3" :sm="2">
+            <CIcon :content="icon" size="xxl" />
-                <CIcon :content="icon" size="xxl" />
+            <div>{{ toKebabCase(iconName) }}</div>
-                <div>{{ toKebabCase(iconName) }}</div>
+          </CCol>
-              </CCol>
+        </template>
-            </template>
+      </CRow>
-          </CRow>
+    </CCardBody>
-        </CCardBody>
+  </CCard>
-      </CCard>
-    </CCol>
-  </CRow>
 </template>

src/views/icons/CoreUIIcons.vue

@@ -6,21 +6,18 @@ const icons = freeSet
 </script>
 
 <template>
-  <CRow>
+  <DocsIcons />
-    <CCol>
+  <CCard>
-      <CCard>
+    <CCardHeader>CoreUI Icons Free</CCardHeader>
-        <CCardHeader>CoreUI Icons Free</CCardHeader>
+    <CCardBody>
-        <CCardBody>
+      <CRow class="text-center">
-          <CRow class="text-center">
+        <template v-for="(icon, iconName) in icons" :key="iconName">
-            <template v-for="(icon, iconName) in icons" :key="iconName">
+          <CCol class="mb-5" :xs="3" :sm="2">
-              <CCol class="mb-5" :xs="3" :sm="2">
+            <CIcon :content="icon" size="xxl" />
-                <CIcon :content="icon" size="xxl" />
+            <div>{{ toKebabCase(iconName) }}</div>
-                <div>{{ toKebabCase(iconName) }}</div>
+          </CCol>
-              </CCol>
+        </template>
-            </template>
+      </CRow>
-          </CRow>
+    </CCardBody>
-        </CCardBody>
+  </CCard>
-      </CCard>
-    </CCol>
-  </CRow>
 </template>

src/views/icons/Flags.vue

@@ -6,21 +6,18 @@ const icons = flagSet
 </script>
 
 <template>
-  <CRow>
+  <DocsIcons />
-    <CCol>
+  <CCard>
-      <CCard>
+    <CCardHeader>CoreUI Icons - Flag</CCardHeader>
-        <CCardHeader>CoreUI Icons - Flag</CCardHeader>
+    <CCardBody>
-        <CCardBody>
+      <CRow class="text-center">
-          <CRow class="text-center">
+        <template v-for="(icon, iconName) in icons" :key="iconName">
-            <template v-for="(icon, iconName) in icons" :key="iconName">
+          <CCol class="mb-5" :xs="3" :sm="2">
-              <CCol class="mb-5" :xs="3" :sm="2">
+            <CIcon :content="icon" size="xxl" />
-                <CIcon :content="icon" size="xxl" />
+            <div>{{ toKebabCase(iconName) }}</div>
-                <div>{{ toKebabCase(iconName) }}</div>
+          </CCol>
-              </CCol>
+        </template>
-            </template>
+      </CRow>
-          </CRow>
+    </CCardBody>
-        </CCardBody>
+  </CCard>
-      </CCard>
-    </CCol>
-  </CRow>
 </template>

src/views/notifications/Alerts.vue

@@ -7,6 +7,7 @@ const alert = () => {
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/alert.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Alert</strong>

src/views/notifications/Badges.vue

@@ -1,5 +1,8 @@
 <template>
   <CRow>
+    <CCol :xs="12">
+      <DocsComponents href="components/badge.html" />
+    </CCol>
     <CCol :lg="6">
       <CCard class="mb-4">
         <CCardHeader>

src/views/notifications/Modals.vue

@@ -22,6 +22,7 @@ const fullscreenXxlDemo = ref(false)
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/modal.html" />
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Modals</strong>

src/views/notifications/Toasts.vue

@@ -12,6 +12,7 @@ const createToast = () => {
 <template>
   <CRow>
     <CCol :xs="12">
+      <DocsComponents href="components/toast.html" />
       <CCard class="mb-4">
         <CCardHeader> <strong>Vue Toast</strong> <small>Basic</small> </CCardHeader>
         <CCardBody>