Skip to content

Commit 569ead6

Browse files
mrholekmrholek
committed
docs: add links to other versions
1 parent 4e6611b commit 569ead6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+321
-15
lines changed

‎packages/docs/.vuepress/theme-coreui/src/client/components/Page.vue

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,24 @@
44
<h1>{{ title }}</h1>
55
<p class="docs-lead fs-4 fw-light">{{ description }}</p>
66
<Ads />
7+
<template v-if="frameworks">
8+
<h2>Other frameworks</h2>
9+
<p>
10+
CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and React
11+
components. To learn more please visit the following pages.
12+
</p>
13+
<ul>
14+
<template v-for="framework in frameworks">
15+
<template v-for="(el, index) in Object.keys(otherFrameworks[framework])">
16+
<li v-if="el !== 'vue'" :key="index">
17+
<a :href="otherFrameworks[framework][el]">{{
18+
el[0].toUpperCase() + el.slice(1)
19+
}} {{ humanize(framework) }}</a>
20+
</li>
21+
</template>
22+
</template>
23+
</ul>
24+
</template>
725
<Content />
826
</div>
927
</div>
@@ -13,6 +31,7 @@
1331
import { defineComponent } from 'vue'
1432
import { usePageFrontmatter } from '@vuepress/client'
1533
import type { DefaultThemeNormalPageFrontmatter } from '../../shared'
34+
import jsonData from './other_frameworks.json'
1635
1736
import Ads from './Ads.vue'
1837
@@ -25,10 +44,27 @@ export default defineComponent({
2544
const frontmatter = usePageFrontmatter<DefaultThemeNormalPageFrontmatter>()
2645
const title = frontmatter.value.title
2746
const description = frontmatter.value.description
47+
const frameworks = frontmatter.value.other_frameworks
48+
? frontmatter.value.other_frameworks.split(', ')
49+
: false
50+
const otherFrameworks = JSON.parse(JSON.stringify(jsonData))
51+
52+
const humanize = (text: string) => {
53+
const string = text
54+
.split('-')
55+
.reduce(
56+
(accumulator, currentValue) =>
57+
accumulator + ' ' + currentValue[0].toUpperCase() + currentValue.slice(1),
58+
)
59+
return string[0].toUpperCase() + string.slice(1)
60+
}
2861
2962
return {
3063
title,
3164
description,
65+
frameworks,
66+
otherFrameworks,
67+
humanize
3268
}
3369
},
3470
})

‎packages/docs/.vuepress/theme-coreui/src/client/components/other_frameworks.json

Lines changed: 241 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,241 @@
1+
{
2+
"accordion": {
3+
"angular": "https://coreui.io/angular/docs/components/accordion",
4+
"bootstrap": "https://coreui.io/docs/components/accordion/",
5+
"react": "https://coreui.io/react/docs/components/accordion/",
6+
"vue": "https://coreui.io/vue/docs/components/accordion.html"
7+
},
8+
"alert": {
9+
"angular": "https://coreui.io/angular/docs/components/alert",
10+
"bootstrap": "https://coreui.io/docs/components/alerts/",
11+
"react": "https://coreui.io/react/docs/components/alert/",
12+
"vue": "https://coreui.io/vue/docs/components/alert.html"
13+
},
14+
"avatar": {
15+
"angular": "https://coreui.io/angular/docs/components/avatar",
16+
"bootstrap": "https://coreui.io/docs/components/avatar/",
17+
"react": "https://coreui.io/react/docs/components/avatar/",
18+
"vue": "https://coreui.io/vue/docs/components/avatar.html"
19+
},
20+
"badge": {
21+
"angular": "https://coreui.io/angular/docs/components/badge",
22+
"bootstrap": "https://coreui.io/docs/components/badge/",
23+
"react": "https://coreui.io/react/docs/components/badge/",
24+
"vue": "https://coreui.io/vue/docs/components/badge.html"
25+
},
26+
"breadcrumb": {
27+
"angular": "https://coreui.io/angular/docs/components/breadcrumb",
28+
"bootstrap": "https://coreui.io/docs/components/breadcrumb/",
29+
"react": "https://coreui.io/react/docs/components/breadcrumb/",
30+
"vue": "https://coreui.io/vue/docs/components/breadcrumb.html"
31+
},
32+
"button": {
33+
"angular": "https://coreui.io/angular/docs/components/button",
34+
"bootstrap": "https://coreui.io/docs/components/buttons/",
35+
"react": "https://coreui.io/react/docs/components/button/",
36+
"vue": "https://coreui.io/vue/docs/components/button.html"
37+
},
38+
"button-group": {
39+
"angular": "https://coreui.io/angular/docs/components/button-group",
40+
"bootstrap": "https://coreui.io/docs/components/button-group/",
41+
"react": "https://coreui.io/react/docs/components/button-group/",
42+
"vue": "https://coreui.io/vue/docs/components/button-group.html"
43+
},
44+
"callout": {
45+
"angular": "https://coreui.io/angular/docs/components/callout",
46+
"bootstrap": "https://coreui.io/docs/components/callout/",
47+
"react": "https://coreui.io/react/docs/components/callout/",
48+
"vue": "https://coreui.io/vue/docs/components/callout.html"
49+
},
50+
"card": {
51+
"angular": "https://coreui.io/angular/docs/components/card",
52+
"bootstrap": "https://coreui.io/docs/components/card/",
53+
"react": "https://coreui.io/react/docs/components/card/",
54+
"vue": "https://coreui.io/vue/docs/components/card.html"
55+
},
56+
"carousel": {
57+
"angular": "https://coreui.io/angular/docs/components/carousel",
58+
"bootstrap": "https://coreui.io/docs/components/carousel/",
59+
"react": "https://coreui.io/react/docs/components/carousel/",
60+
"vue": "https://coreui.io/vue/docs/components/carousel.html"
61+
},
62+
"checkbox": {
63+
"angular": "https://coreui.io/angular/docs/forms/checks-radios",
64+
"bootstrap": "https://coreui.io/docs/forms/checks-radios/",
65+
"react": "https://coreui.io/react/docs/forms/checkbox/",
66+
"vue": "https://coreui.io/vue/docs/forms/checkbox.html"
67+
},
68+
"close-button": {
69+
"angular": "https://coreui.io/angular/docs/components/close-button",
70+
"bootstrap": "https://coreui.io/docs/components/close-button/",
71+
"react": "https://coreui.io/react/docs/components/close-button/",
72+
"vue": "https://coreui.io/vue/docs/components/close-button.html"
73+
},
74+
"collapse": {
75+
"angular": "https://coreui.io/angular/docs/components/collapse",
76+
"bootstrap": "https://coreui.io/docs/components/collapse/",
77+
"react": "https://coreui.io/react/docs/components/collapse/",
78+
"vue": "https://coreui.io/vue/docs/components/collapse.html"
79+
},
80+
"dropdown": {
81+
"angular": "https://coreui.io/angular/docs/components/dropdown",
82+
"bootstrap": "https://coreui.io/docs/components/dropdowns/",
83+
"react": "https://coreui.io/react/docs/components/dropdown/",
84+
"vue": "https://coreui.io/vue/docs/components/dropdown.html"
85+
},
86+
"footer": {
87+
"angular": "https://coreui.io/angular/docs/components/footer",
88+
"bootstrap": "https://coreui.io/docs/components/footer/",
89+
"react": "https://coreui.io/react/docs/components/footer/",
90+
"vue": "https://coreui.io/vue/docs/components/footer.html"
91+
},
92+
"header": {
93+
"angular": "https://coreui.io/angular/docs/components/header",
94+
"bootstrap": "https://coreui.io/docs/components/header/",
95+
"react": "https://coreui.io/react/docs/components/header/",
96+
"vue": "https://coreui.io/vue/docs/components/header.html"
97+
},
98+
"icon": {
99+
"angular": "https://coreui.io/angular/docs/components/icon",
100+
"bootstrap": "https://coreui.io/docs/components/icon/",
101+
"react": "https://coreui.io/react/docs/components/icon/",
102+
"vue": "https://coreui.io/vue/docs/components/icon.html"
103+
},
104+
"image": {
105+
"angular": "https://coreui.io/angular/docs/components/image",
106+
"bootstrap": "https://coreui.io/docs/content/images/",
107+
"react": "https://coreui.io/react/docs/components/image/",
108+
"vue": "https://coreui.io/vue/docs/components/image.html"
109+
},
110+
"input": {
111+
"angular": "https://coreui.io/angular/docs/forms/input",
112+
"bootstrap": "https://coreui.io/docs/forms/form-control/",
113+
"react": "https://coreui.io/react/docs/forms/input/",
114+
"vue": "https://coreui.io/vue/docs/forms/input.html"
115+
},
116+
"input-group": {
117+
"angular": "https://coreui.io/angular/docs/forms/input-group",
118+
"bootstrap": "https://coreui.io/docs/forms/input-group/",
119+
"react": "https://coreui.io/react/docs/forms/input-group/",
120+
"vue": "https://coreui.io/vue/docs/forms/input-group.html"
121+
},
122+
"floating-labels": {
123+
"angular": "https://coreui.io/angular/docs/forms/floating-labels",
124+
"bootstrap": "https://coreui.io/docs/forms/floating-labels/",
125+
"react": "https://coreui.io/react/docs/forms/floating-labels/",
126+
"vue": "https://coreui.io/vue/docs/forms/floating-labels.html"
127+
},
128+
"list-group": {
129+
"angular": "https://coreui.io/angular/docs/components/list-group",
130+
"bootstrap": "https://coreui.io/docs/components/list-group/",
131+
"react": "https://coreui.io/react/docs/components/list-group/",
132+
"vue": "https://coreui.io/vue/docs/components/list-group.html"
133+
},
134+
"modal": {
135+
"angular": "https://coreui.io/angular/docs/components/modal",
136+
"bootstrap": "https://coreui.io/docs/components/modal/",
137+
"react": "https://coreui.io/react/docs/components/modal/",
138+
"vue": "https://coreui.io/vue/docs/components/modal.html"
139+
},
140+
"navbar": {
141+
"bootstrap": "https://coreui.io/docs/components/navbar/",
142+
"react": "https://coreui.io/react/docs/components/navbar/",
143+
"vue": "https://coreui.io/vue/docs/components/navbar.html"
144+
},
145+
"navs-tabs": {
146+
"angular": "https://coreui.io/angular/docs/components/nav",
147+
"bootstrap": "https://coreui.io/docs/components/navs-tabs/",
148+
"react": "https://coreui.io/react/docs/components/navs-tabs/",
149+
"vue": "https://coreui.io/vue/docs/components/navs-tabs.html"
150+
},
151+
"offcanvas": {
152+
"angular": "https://coreui.io/angular/docs/components/offcanvas",
153+
"bootstrap": "https://coreui.io/docs/components/offcanvas/",
154+
"react": "https://coreui.io/react/docs/components/offcanvas/",
155+
"vue": "https://coreui.io/vue/docs/components/offcanvas.html"
156+
},
157+
"pagination": {
158+
"angular": "https://coreui.io/angular/docs/components/pagination",
159+
"bootstrap": "https://coreui.io/docs/components/pagination/",
160+
"react": "https://coreui.io/react/docs/components/pagination/",
161+
"vue": "https://coreui.io/vue/docs/components/pagination.html"
162+
},
163+
"placeholder": {
164+
"angular": "https://coreui.io/angular/docs/components/placeholder",
165+
"bootstrap": "https://coreui.io/docs/components/placeholders/",
166+
"react": "https://coreui.io/react/docs/components/placeholder/",
167+
"vue": "https://coreui.io/vue/docs/components/placeholder.html"
168+
},
169+
"popover": {
170+
"angular": "https://coreui.io/angular/docs/components/popover",
171+
"bootstrap": "https://coreui.io/docs/components/popovers/",
172+
"react": "https://coreui.io/react/docs/components/popover/",
173+
"vue": "https://coreui.io/vue/docs/components/popover.html"
174+
},
175+
"progress": {
176+
"angular": "https://coreui.io/angular/docs/components/progress",
177+
"bootstrap": "https://coreui.io/docs/components/progress/",
178+
"react": "https://coreui.io/react/docs/components/progress/",
179+
"vue": "https://coreui.io/vue/docs/components/progress.html"
180+
},
181+
"radio": {
182+
"angular": "https://coreui.io/angular/docs/forms/checks-radios",
183+
"bootstrap": "https://coreui.io/docs/forms/checks-radios/",
184+
"react": "https://coreui.io/react/docs/forms/radio/",
185+
"vue": "https://coreui.io/vue/docs/forms/radio.html"
186+
},
187+
"range": {
188+
"angular": "https://coreui.io/angular/docs/forms/range",
189+
"bootstrap": "https://coreui.io/docs/forms/range/",
190+
"react": "https://coreui.io/react/docs/forms/range/",
191+
"vue": "https://coreui.io/vue/docs/forms/range.html"
192+
},
193+
"select": {
194+
"angular": "https://coreui.io/angular/docs/forms/select",
195+
"bootstrap": "https://coreui.io/docs/forms/select/",
196+
"react": "https://coreui.io/react/docs/forms/select/",
197+
"vue": "https://coreui.io/vue/docs/forms/select.html"
198+
},
199+
"sidebar": {
200+
"angular": "https://coreui.io/angular/docs/components/sidebar",
201+
"bootstrap": "https://coreui.io/docs/components/sidebar/",
202+
"react": "https://coreui.io/react/docs/components/sidebar/",
203+
"vue": "https://coreui.io/vue/docs/components/sidebar.html"
204+
},
205+
"spinner": {
206+
"angular": "https://coreui.io/angular/docs/components/spinner",
207+
"bootstrap": "https://coreui.io/docs/components/spinners/",
208+
"react": "https://coreui.io/react/docs/components/spinner/",
209+
"vue": "https://coreui.io/vue/docs/components/spinner.html"
210+
},
211+
"switch": {
212+
"angular": "https://coreui.io/angular/docs/forms/checks-radios",
213+
"bootstrap": "https://coreui.io/docs/forms/checks-radios/",
214+
"react": "https://coreui.io/react/docs/forms/switch/",
215+
"vue": "https://coreui.io/vue/docs/forms/switch.html"
216+
},
217+
"table": {
218+
"angular": "https://coreui.io/angular/docs/components/table",
219+
"bootstrap": "https://coreui.io/docs/content/tables/",
220+
"react": "https://coreui.io/react/docs/components/table/",
221+
"vue": "https://coreui.io/vue/docs/components/table.html"
222+
},
223+
"textarea": {
224+
"angular": "https://coreui.io/angular/docs/forms/form-control",
225+
"bootstrap": "https://coreui.io/docs/forms/form-control/",
226+
"react": "https://coreui.io/react/docs/forms/textarea/",
227+
"vue": "https://coreui.io/vue/docs/forms/textarea.html"
228+
},
229+
"toast": {
230+
"angular": "https://coreui.io/angular/docs/components/toast",
231+
"bootstrap": "https://coreui.io/docs/components/toasts/",
232+
"react": "https://coreui.io/react/docs/components/toast/",
233+
"vue": "https://coreui.io/vue/docs/components/toast.html"
234+
},
235+
"tooltip": {
236+
"angular": "https://coreui.io/angular/docs/components/tooltip",
237+
"bootstrap": "https://coreui.io/docs/components/tooltips/",
238+
"react": "https://coreui.io/react/docs/components/tooltip/",
239+
"vue": "https://coreui.io/vue/docs/components/tooltip.html"
240+
}
241+
}

‎packages/docs/.vuepress/theme-coreui/src/client/layouts/Layout.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
<p>You can support our Open Source software development in the following ways:</p>
3333
<ul>
3434
<li>
35-
Buy the <a href="https://coreui.io/pricing/?support=vue">CoreUI PRO</a>,
35+
Buy the <a href="https://coreui.io/pricing/?framework=vue&docs=coreui-banner-pro">CoreUI PRO</a>,
3636
and get access to PRO components, and dedicated support.
3737
</li>
3838
<li>

‎packages/docs/components/accordion.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
title: Vue Accordion Component
33
name: Accordion
44
description: Build vertically collapsing accordions in combination with our Vue Collapse component.
5+
other_frameworks: accordion
56
---
67

78
## Examples
@@ -10,7 +11,7 @@ Click the accordions below to expand/collapse the accordion content.
1011

1112
::: demo
1213
<CAccordion>
13-
<CAccordionItem :item-key="1" :style="{ '--cui-accordion-bg': 'red' }">
14+
<CAccordionItem :item-key="1">
1415
<CAccordionHeader>
1516
Accordion Item #1
1617
</CAccordionHeader>

‎packages/docs/components/alert.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
title: Vue Alert Component
33
description: Vue alert component gives contextual feedback information for common user operations. The alert component is delivered with a bunch of usable and adjustable alert messages.
4+
other_frameworks: alert
45
---
56

67
## Examples

‎packages/docs/components/avatar.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
title: Vue Avatar Component
33
name: Avatar
44
description: Vue avatar component can be used to display circular user profile pictures. Avatar can be used to portray people or objects. It supports images, icons, or letters.
5+
other_frameworks: avatar
56
---
67

78
## Image avatars

‎packages/docs/components/badge.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
title: Vue Badge Component
33
name: Badge
44
description: Vue badge component is small count and labeling component.
5+
other_frameworks: badge
56
---
67

78
## Example

‎packages/docs/components/breadcrumb.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
---
22
title: Vue Breadcrumb Component
33
name: Breadcrumb
4+
description: Vue breadcrumb navigation component which indicates the current location within a navigational hierarchy that automatically adds separators.
5+
other_frameworks: breadcrumb
46
---
57

68

‎packages/docs/components/button-group.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
title: Vue Button Group Component
33
name: Button group
44
description: Vue button group component allows to group a series of buttons and power them with JavaScript.
5+
other_frameworks: button-group
56
---
67

78
## Basic example

‎packages/docs/components/button.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: Vue Buttons Component
33
name: Buttons
44
description: Vue button component for actions in tables, forms, cards, and more. CoreUI for Vue.js provides various styles, states, and size. Ready to use and easy to customize.
5-
5+
other_frameworks: button
66
---
77

88
## Examples

0 commit comments

Comments
 (0)