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

docs: update links to the documentation

Browse Source
This commit is contained in:
mrholek
2024-11-15 23:55:19 +01:00
parent c16251acea
commit 2007ccea73
38 changed files with 154 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/images/components.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB

src/assets/images/icons.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 57 KiB

src/components/DocsComponents.vue
+43
View File
@@ -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
+29
View File
@@ -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
+4
View File
@@ -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 -1
View File
@@ -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
+4 -4
View File
@@ -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 user navigated through and shows the current location in a
website or an application. You don’t have to add separators, because
they automatically added in CSS through
The breadcrumb navigation provides links back to each previous page the user navigated
through and shows the current location in a website or an application. You don’t have to
add separators, because 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
+1
View File
@@ -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
+1
View File
@@ -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
+1
View File
@@ -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
View File
@@ -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
View File
@@ -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
View File
@@ -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
+1
View File
@@ -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
View File
@@ -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
View File
@@ -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
View File
@@ -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
View File
@@ -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
View File
@@ -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
View File
@@ -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
View File
@@ -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
View File
@@ -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
View File
@@ -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
View File
@@ -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
View File
@@ -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
View File
@@ -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
View File
@@ -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
View File
@@ -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
View File
@@ -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
View File
@@ -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
+1
View File
@@ -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
+15 -17
View File
@@ -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>
<CCol>
<CCard>
<CCardHeader>CoreUI Icons - Brand</CCardHeader>
<CCardBody>
<CRow class="text-center">
<template v-for="(icon, iconName) in icons" :key="iconName">
<CCol class="mb-5" :xs="3" :sm="2">
<CIcon :content="icon" size="xxl" />
<div>{{ toKebabCase(iconName) }}</div>
</CCol>
</template>
</CRow>
</CCardBody>
</CCard>
</CCol>
</CRow>
<DocsIcons />
<CCard>
<CCardHeader>CoreUI Icons - Brand</CCardHeader>
<CCardBody>
<CRow class="text-center">
<template v-for="(icon, iconName) in icons" :key="iconName">
<CCol class="mb-5" :xs="3" :sm="2">
<CIcon :content="icon" size="xxl" />
<div>{{ toKebabCase(iconName) }}</div>
</CCol>
</template>
</CRow>
</CCardBody>
</CCard>
</template>
src/views/icons/CoreUIIcons.vue
+14 -17
View File
@@ -6,21 +6,18 @@ const icons = freeSet
</script>
<template>
<CRow>
<CCol>
<CCard>
<CCardHeader>CoreUI Icons Free</CCardHeader>
<CCardBody>
<CRow class="text-center">
<template v-for="(icon, iconName) in icons" :key="iconName">
<CCol class="mb-5" :xs="3" :sm="2">
<CIcon :content="icon" size="xxl" />
<div>{{ toKebabCase(iconName) }}</div>
</CCol>
</template>
</CRow>
</CCardBody>
</CCard>
</CCol>
</CRow>
<DocsIcons />
<CCard>
<CCardHeader>CoreUI Icons Free</CCardHeader>
<CCardBody>
<CRow class="text-center">
<template v-for="(icon, iconName) in icons" :key="iconName">
<CCol class="mb-5" :xs="3" :sm="2">
<CIcon :content="icon" size="xxl" />
<div>{{ toKebabCase(iconName) }}</div>
</CCol>
</template>
</CRow>
</CCardBody>
</CCard>
</template>
src/views/icons/Flags.vue
+14 -17
View File
@@ -6,21 +6,18 @@ const icons = flagSet
</script>
<template>
<CRow>
<CCol>
<CCard>
<CCardHeader>CoreUI Icons - Flag</CCardHeader>
<CCardBody>
<CRow class="text-center">
<template v-for="(icon, iconName) in icons" :key="iconName">
<CCol class="mb-5" :xs="3" :sm="2">
<CIcon :content="icon" size="xxl" />
<div>{{ toKebabCase(iconName) }}</div>
</CCol>
</template>
</CRow>
</CCardBody>
</CCard>
</CCol>
</CRow>
<DocsIcons />
<CCard>
<CCardHeader>CoreUI Icons - Flag</CCardHeader>
<CCardBody>
<CRow class="text-center">
<template v-for="(icon, iconName) in icons" :key="iconName">
<CCol class="mb-5" :xs="3" :sm="2">
<CIcon :content="icon" size="xxl" />
<div>{{ toKebabCase(iconName) }}</div>
</CCol>
</template>
</CRow>
</CCardBody>
</CCard>
</template>
src/views/notifications/Alerts.vue
+1
View File
@@ -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
+3
View File
@@ -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
+1
View File
@@ -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
+1
View File
@@ -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>