Skip to content

Commit b0f98e0

Browse files
mariusamariusa
authored
Merge pull request #384 from messenjer/refactor/readme-table-of-content
refactor(docs): build the toc with a componentList object
2 parents 0c9e4f1 + 36c1ded commit b0f98e0

File tree

1 file changed

+132
-89
lines changed

1 file changed

+132
-89
lines changed

‎docs/components/README.md

Lines changed: 132 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -4,95 +4,138 @@ BootstrapVue 3 components
44

55
<ClientOnly>
66
<b-list-group>
7-
<b-list-group-item>
8-
<RouterLink to="./Accordion.html">Accordion</RouterLink> — <span class="text-muted">Easily toggle content visibility on your pages. Includes support for making accordions.</span>
9-
</b-list-group-item>
10-
<b-list-group-item>
11-
<RouterLink to="./Alert.html">Alert</RouterLink> — <span class="text-muted">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.</span>
12-
</b-list-group-item>
13-
<b-list-group-item>
14-
<RouterLink to="./Avatar.html">Avatar</RouterLink> — <span class="text-muted">Custom component typically used to display a user profile as a picture, an icon, or short text.</span>
15-
</b-list-group-item>
16-
<b-list-group-item>
17-
<RouterLink to="./Badge.html">Badge</RouterLink> — <span class="text-muted">Small and adaptive tag for adding context to just about any content.</span>
18-
</b-list-group-item>
19-
<b-list-group-item>
20-
<RouterLink to="./Breadcrumb.html">Breadcrumb</RouterLink> — <span class="text-muted">Indicate the current page's location within a navigational hierarchy.</span>
21-
</b-list-group-item>
22-
<b-list-group-item>
23-
<RouterLink to="./Button.html">Button</RouterLink> — <span class="text-muted">Custom button component for actions in forms, dialogs, and more.</span>
24-
</b-list-group-item>
25-
<b-list-group-item>
26-
<RouterLink to="./ButtonGroup.html">Button Group</RouterLink> — <span class="text-muted">Group a series of buttons together on a single line or stack them in a vertical column.</span>
27-
</b-list-group-item>
28-
<b-list-group-item>
29-
<RouterLink to="./ButtonToolbar.html">Button Toolbar</RouterLink> — <span class="text-muted">Group a series of button-groups and/or input-groups together on a single line.</span>
30-
</b-list-group-item>
31-
<b-list-group-item>
32-
<RouterLink to="./Card.html">Card</RouterLink> — <span class="text-muted">A flexible and extensible content container. It includes options for headers and footers, a wide variety of content.</span>
33-
</b-list-group-item>
34-
<b-list-group-item>
35-
<RouterLink to="./Collapse.html">Collapse</RouterLink> — <span class="text-muted">Easily toggle visibility of almost any content on your pages in a vertically collapsing container.</span>
36-
</b-list-group-item>
37-
<b-list-group-item>
38-
<RouterLink to="./Dropdown.html">Dropdown</RouterLink> — <span class="text-muted">Toggleable, contextual overlays for displaying lists of links and actions in a dropdown menu format.</span>
39-
</b-list-group-item>
40-
<b-list-group-item>
41-
<RouterLink to="./Form.html">Form</RouterLink> — <span class="text-muted">Form component and helper components that optionally support inline form styles and validation states.</span>
42-
</b-list-group-item>
43-
<b-list-group-item>
44-
<RouterLink to="./FormCheckbox.html">Form Checkbox</RouterLink> — <span class="text-muted">Custom checkbox input and checkbox group to replace the browser default checkbox input, built on top of semantic and accessible markup. Optionally supports switch styling.</span>
45-
</b-list-group-item>
46-
<b-list-group-item>
47-
<RouterLink to="./FormGroup.html">Form Group</RouterLink> — <span class="text-muted">The easiest way to add some structure to forms.</span>
48-
</b-list-group-item>
49-
<b-list-group-item>
50-
<RouterLink to="./FormInput.html">Form Input</RouterLink> — <span class="text-muted">Create various type inputs such as: text, password, number, url, email, search, range, date and more. </span>
51-
</b-list-group-item>
52-
<b-list-group-item>
53-
<RouterLink to="./FormRadio.html">Form Radio</RouterLink> — <span class="text-muted">Bootstrap's custom radio input to replace the browser default radio input.</span>
54-
</b-list-group-item>
55-
<b-list-group-item>
56-
<RouterLink to="./FormSelect.html">Form Select</RouterLink> — <span class="text-muted">Bootstrap custom select using custom styles. </span>
57-
</b-list-group-item>
58-
<b-list-group-item>
59-
<RouterLink to="./FormTags.html">Form Tags</RouterLink> — <span class="text-muted">Lightweight custom tagged input form control, with options for customized interface rendering, duplicate tag detection and optional tag validation.</span>
60-
</b-list-group-item>
61-
<b-list-group-item>
62-
<RouterLink to="./FormTextarea.html">Form Textarea</RouterLink> — <span class="text-muted">Create multi-line text inputs with support for auto height sizing, minimum and maximum number of rows, and contextual states. </span>
63-
</b-list-group-item>
64-
<b-list-group-item>
65-
<RouterLink to="./Image.html">Image</RouterLink> — <span class="text-muted">Image component with responsive behavior. </span>
66-
</b-list-group-item>
67-
<b-list-group-item>
68-
<RouterLink to="./InputGroup.html">Input Group</RouterLink> — <span class="text-muted">Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs. </span>
69-
</b-list-group-item>
70-
<b-list-group-item>
71-
<RouterLink to="./ListGroup.html">List Group</RouterLink> — <span class="text-muted">A flexible and powerful component for displaying a series of content. List Group items can be modified to support just about any content within.</span>
72-
</b-list-group-item>
73-
<b-list-group-item>
74-
<RouterLink to="./Overlay.html">Overlay</RouterLink> — <span class="text-muted">Visually obscure a particular element or component and its content.</span>
75-
</b-list-group-item>
76-
<b-list-group-item>
77-
<RouterLink to="./Pagination.html">Pagination</RouterLink> — <span class="text-muted">Quick first, previous, next, last, and page buttons for pagination control of another component.</span>
78-
</b-list-group-item>
79-
<b-list-group-item>
80-
<RouterLink to="./Progress.html">Progress</RouterLink> — <span class="text-muted">A custom progress component for displaying simple or complex progress bars, featuring support for horizontally stacked bars, animated backgrounds, and text labels.</span>
81-
</b-list-group-item>
82-
<b-list-group-item>
83-
<RouterLink to="./Spinners.html">Spinner</RouterLink> — <span class="text-muted">The &lt;b-spinner&gt; component can be used to show the loading state in your projects. They're rendered only with basic HTML and CSS as a lightweight Vue functional component.</span>
84-
</b-list-group-item>
85-
<b-list-group-item>
86-
<RouterLink to="./Skeleton.html">Skeleton</RouterLink> — <span class="text-muted">The &lt;b-skeleton&gt; component can be used to scaffold a loading state, while your data is loading.</span>
87-
</b-list-group-item>
88-
<b-list-group-item>
89-
<RouterLink to="./Table.html">Table</RouterLink> — <span class="text-muted">For displaying tabular data. &lt;b-table&gt; supports pagination, filtering, sorting, custom rendering, events, and asynchronous data. For simple display of tabular data without all the fancy features, BootstrapVue also provides lightweight alternative components &lt;b-table-lite&gt; and &lt;b-table-simple&gt;.</span>
90-
</b-list-group-item>
91-
<b-list-group-item>
92-
<RouterLink to="./Tabs.html">Tabs</RouterLink> — <span class="text-muted">Create a widget of tabbable panes of local content.</span>
93-
</b-list-group-item>
94-
<b-list-group-item>
95-
<RouterLink to="./Toast.html">Toast</RouterLink> — <span class="text-muted">Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.</span>
7+
<b-list-group-item v-for="(component, key) in componentList">
8+
<RouterLink :to="`./${key}.html`">{{component.name}}</RouterLink>
9+
<b-badge v-if="component.status=='todo'" variant="warning" pill>TODO</b-badge>
10+
<b-badge v-else-if="component.status=='wip'" variant="warning" pill>WIP</b-badge>
11+
— <span class="text-muted">{{component.description}}</span>
9612
</b-list-group-item>
9713
</b-list-group>
9814
</ClientOnly>
15+
16+
<script setup>
17+
import { ref } from "vue"
18+
19+
const componentList = {
20+
Accordion : {
21+
name: 'Accordion',
22+
description: 'Easily toggle content visibility on your pages. Includes support for making accordions.'
23+
},
24+
Alert: {
25+
name: 'Alert',
26+
description: 'Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.'
27+
},
28+
Avatar: {
29+
name: 'Avatar',
30+
description: 'Custom component typically used to display a user profile as a picture, an icon, or short text.'
31+
},
32+
Badge: {
33+
name: 'Badge',
34+
description: 'Small and adaptive tag for adding context to just about any content.'
35+
},
36+
Breadcrumb: {
37+
name: 'Breadcrumb',
38+
description: `Indicate the current page's location within a navigational hierarchy.`
39+
},
40+
Button: {
41+
name: 'Button',
42+
description: 'Custom button component for actions in forms, dialogs, and more.'
43+
},
44+
ButtonGroup: {
45+
name: 'Button Group',
46+
description: 'Group a series of buttons together on a single line or stack them in a vertical column.'
47+
},
48+
ButtonToolbar: {
49+
name: 'Button Toolbar',
50+
description: 'Group a series of button-groups and/or input-groups together on a single line.'
51+
},
52+
Card: {
53+
name: 'Card',
54+
description: 'A flexible and extensible content container. It includes options for headers and footers, a wide variety of content.'
55+
},
56+
Collapse: {
57+
name: 'Collapse',
58+
description: 'Easily toggle visibility of almost any content on your pages in a vertically collapsing container.'
59+
},
60+
Dropdown: {
61+
name: 'Dropdown',
62+
description: 'Toggleable, contextual overlays for displaying lists of links and actions in a dropdown menu format.'
63+
},
64+
Form: {
65+
name: 'Form',
66+
description: 'Form component and helper components that optionally support inline form styles and validation states.'
67+
},
68+
FormCheckbox: {
69+
name: 'Form Checkbox',
70+
description: 'Custom checkbox input and checkbox group to replace the browser default checkbox input, built on top of semantic and accessible markup. Optionally supports switch styling.'
71+
},
72+
FormGroup: {
73+
name: 'Form Group',
74+
description: 'The easiest way to add some structure to forms.'
75+
},
76+
FormInput: {
77+
name: 'Form Input',
78+
description: 'Create various type inputs such as: text, password, number, url, email, search, range, date and more.'
79+
},
80+
FormRadio: {
81+
name: 'Form Radio',
82+
description: `Bootstrap's custom radio input to replace the browser default radio input.`
83+
},
84+
FormSelect: {
85+
name: 'Form Select',
86+
description: 'Bootstrap custom select using custom styles.'
87+
},
88+
FormTags: {
89+
name: 'Form Tags',
90+
description: 'Lightweight custom tagged input form control, with options for customized interface rendering, duplicate tag detection and optional tag validation.'
91+
},
92+
FormTextarea: {
93+
name: 'Form Textarea',
94+
description: 'Create multi-line text inputs with support for auto height sizing, minimum and maximum number of rows, and contextual states.'
95+
},
96+
Image: {
97+
name: 'Image',
98+
description: 'Image component with responsive behavior.'
99+
},
100+
InputGroup: {
101+
name: 'InputGroup',
102+
description: 'Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs. '
103+
},
104+
ListGroup: {
105+
name: 'ListGroup',
106+
description: 'A flexible and powerful component for displaying a series of content. List Group items can be modified to support just about any content within.'
107+
},
108+
Overlay: {
109+
name: 'Overlay',
110+
description: 'Visually obscure a particular element or component and its content.'
111+
},
112+
Pagination: {
113+
name: 'Pagination',
114+
description: 'Quick first, previous, next, last, and page buttons for pagination control of another component.'
115+
},
116+
Progress: {
117+
name: 'Progress',
118+
description: 'A custom progress component for displaying simple or complex progress bars, featuring support for horizontally stacked bars, animated backgrounds, and text labels.'
119+
},
120+
Spinners: {
121+
name: 'Spinners',
122+
description: `The <spinner> component can be used to show the loading state in your projects. They're rendered only with basic HTML and CSS as a lightweight Vue functional component.`
123+
},
124+
Skeleton: {
125+
name: 'Skeleton',
126+
description: 'The <skeleton> component can be used to scaffold a loading state, while your data is loading.'
127+
},
128+
Table: {
129+
name: 'Table',
130+
description: 'For displaying tabular data. <b-table> supports pagination, filtering, sorting, custom rendering, events, and asynchronous data. For simple display of tabular data without all the fancy features, BootstrapVue also provides lightweight alternative components <b-table-lite> and <b-table-simple>.'
131+
},
132+
Tabs: {
133+
name: 'Tabs',
134+
description: 'Create a widget of tabbable panes of local content.'
135+
},
136+
Toast: {
137+
name: 'Toast',
138+
description: 'Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.',
139+
}
140+
}
141+
</script>

0 commit comments

Comments
 (0)