Skip to content

Commit 51c2532

Browse files
VividLemonVividLemon
committed
docs: add BPlaceholder elements
feat(BPlaceholderButton): create BPlaceholderButton refactor(BPlaceholder): use BPlaceholderButton when not prop noButton feat(BPlaceholderTable): props columns and rows can now be string or number test: for above changes
1 parent db87aeb commit 51c2532

File tree

13 files changed

+733
-125
lines changed

13 files changed

+733
-125
lines changed

‎apps/docs/docs/.vuepress/config.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@ export default defineUserConfig({
8080
'/components/Offcanvas.md',
8181
'/components/Overlay.md',
8282
'/components/Pagination.md',
83+
'/components/Placeholder.md',
8384
'/components/Popover.md',
8485
'/components/Progress.md',
8586
'/components/Skeleton.md',

‎apps/docs/docs/component-references/Card.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -190,6 +190,11 @@
190190
"name": "footer",
191191
"description": "",
192192
"scope": []
193+
},
194+
{
195+
"description": "",
196+
"name": "img",
197+
"scope": []
193198
}
194199
]
195200
},

‎apps/docs/docs/component-references/Placeholder.json

Lines changed: 344 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,344 @@
1+
{
2+
"$schema": "./schema.json",
3+
"name": "@bootstrap-vue-3/placeholder",
4+
"version": "1.0.0",
5+
"meta": {
6+
"title": "Placeholder",
7+
"description": "",
8+
"components": [
9+
{
10+
"component": "BPlaceholder",
11+
"props": [
12+
{
13+
"description": "Overrides the default component html tag",
14+
"prop": "tag",
15+
"type": "string"
16+
},
17+
{
18+
"description": "Specifies the width of the placeholder. Width takes priority over prop cols",
19+
"prop": "width",
20+
"type": "string | number"
21+
},
22+
{
23+
"description": "Specifies the width of the placeholder by using grid col classes",
24+
"prop": "cols",
25+
"type": "string | number"
26+
},
27+
{
28+
"description": "Applies one of the Bootstrap theme color variants to the component",
29+
"prop": "variant",
30+
"type": "ColorVariant"
31+
},
32+
{
33+
"description": "Enlargens the vertical size of the Placeholder. Does not affect width",
34+
"prop": "size",
35+
"type": "PlaceholderSize"
36+
},
37+
{
38+
"description": "Displays an animation affect over the Placeholder",
39+
"prop": "animation",
40+
"type": "PlaceholderAnimation"
41+
}
42+
],
43+
"emits": [],
44+
"slots": []
45+
},
46+
{
47+
"component": "BPlaceholderCard",
48+
"emits": [],
49+
"props": [
50+
{
51+
"description": "Removes the card header",
52+
"prop": "noHeader",
53+
"type": "Booleanish"
54+
},
55+
{
56+
"description": "Passes the width to the Placeholder located in the header",
57+
"prop": "headerWidth",
58+
"type": "string | number"
59+
},
60+
{
61+
"description": "Passes the variant to the Placeholder located in the header",
62+
"prop": "headerVariant",
63+
"type": "ColorVariant"
64+
},
65+
{
66+
"description": "Passes the animation to the Placeholder located in the header",
67+
"prop": "headerAnimation",
68+
"type": "PlaceholderAnimation"
69+
},
70+
{
71+
"description": "Passes the size to the Placeholder located in the header",
72+
"prop": "headerSize",
73+
"type": "PlaceholderSize"
74+
},
75+
{
76+
"description": "Removes the card footer",
77+
"prop": "noFooter",
78+
"type": "Booleanish"
79+
},
80+
{
81+
"description": "Passes the width to the Placeholder located in the footer",
82+
"prop": "footerWidth",
83+
"type": "string | number"
84+
},
85+
{
86+
"description": "Passes the variant to the Placeholder located in the footer",
87+
"prop": "footerVariant",
88+
"type": "ColorVariant"
89+
},
90+
{
91+
"description": "Passes the animation to the Placeholder located in the footer",
92+
"prop": "footerAnimation",
93+
"type": "PlaceholderAnimation"
94+
},
95+
{
96+
"description": "Passes the size to the Placeholder located in the footer",
97+
"prop": "footerSize",
98+
"type": "PlaceholderSize"
99+
},
100+
{
101+
"description": "Passes the variant to the Placeholder located in the main body position",
102+
"prop": "variant",
103+
"type": "ColorVariant"
104+
},
105+
{
106+
"description": "Passes the animation to the Placeholder located in the main body position",
107+
"prop": "animation",
108+
"type": "PlaceholderAnimation"
109+
},
110+
{
111+
"description": "Passes the size to the Placeholder located in the main body position",
112+
"prop": "size",
113+
"type": "PlaceholderSize"
114+
},
115+
{
116+
"description": "Removes the button classes in the Card footer spot to appear as a basic Placeholder",
117+
"prop": "noButton",
118+
"type": "Booleanish"
119+
},
120+
{
121+
"description": "Moves the image to the bottom of the Card",
122+
"prop": "imgBottom",
123+
"type": "Booleanish"
124+
},
125+
{
126+
"description": "Specifies the image src, overrides the blank image",
127+
"prop": "imgSrc",
128+
"type": "string"
129+
},
130+
{
131+
"description": "Changes the color to the blank image",
132+
"prop": "imgBlankColor",
133+
"type": "string"
134+
},
135+
{
136+
"description": "Changes the image height",
137+
"prop": "imgHeight",
138+
"type": "string | number"
139+
},
140+
{
141+
"description": "Removes the image",
142+
"prop": "noImg",
143+
"type": "Booleanish"
144+
}
145+
],
146+
"slots": [
147+
{
148+
"description": "Overrides the img default",
149+
"name": "img",
150+
"scope": []
151+
},
152+
{
153+
"description": "Overrides the header default",
154+
"name": "header",
155+
"scope": []
156+
},
157+
{
158+
"description": "Overrides the default placeholders",
159+
"name": "default",
160+
"scope": []
161+
},
162+
{
163+
"description": "Overrides the footer default",
164+
"name": "footer",
165+
"scope": []
166+
}
167+
]
168+
},
169+
{
170+
"component": "BPlaceholderWrapper",
171+
"emits": [],
172+
"props": [
173+
{
174+
"description": "Determines whether the loading slot should be displayed",
175+
"prop": "loading",
176+
"type": "Booleanish"
177+
}
178+
],
179+
"slots": [
180+
{
181+
"description": "Content to show when the `loading` prop is `false`",
182+
"name": "default",
183+
"scope": []
184+
},
185+
{
186+
"description": "Content to show when the `loading` prop is `true`",
187+
"name": "loading",
188+
"scope": []
189+
}
190+
]
191+
},
192+
{
193+
"component": "BPlaceholderTable",
194+
"emits": [],
195+
"props": [
196+
{
197+
"description": "The number of rows to display in the body of the PlaceholderTable",
198+
"prop": "rows",
199+
"type": "string | number"
200+
},
201+
{
202+
"description": "The number of columns to display in the body of the PlaceholderTable. If footerColumns or headerColumns are undefined, they will use this value",
203+
"prop": "columns",
204+
"type": "string | number"
205+
},
206+
{
207+
"description": "Passes the width to the Placeholders located in the body",
208+
"prop": "cellWidth",
209+
"type": "string | number"
210+
},
211+
{
212+
"description": "Passes the size to the Placeholders located in the body",
213+
"prop": "size",
214+
"type": "PlaceholderSize"
215+
},
216+
{
217+
"description": "Passes the animation to the Placeholders located in the body",
218+
"prop": "animation",
219+
"type": "PlaceholderAnimation"
220+
},
221+
{
222+
"description": "Passes the variant to the Placeholders located in the body",
223+
"prop": "variant",
224+
"type": "ColorVariant"
225+
},
226+
{
227+
"description": "The number of columns to display in the header of the PlaceholderTable",
228+
"prop": "heaaderColumns",
229+
"type": "string | number"
230+
},
231+
{
232+
"description": "Hides the header",
233+
"prop": "hideHeader",
234+
"type": "Booleanish"
235+
},
236+
{
237+
"description": "Passes the width to the Placeholders located in the header",
238+
"prop": "headerCellWidth",
239+
"type": "string | number"
240+
},
241+
{
242+
"description": "Passes the size to the Placeholders located in the header",
243+
"prop": "headerSize",
244+
"type": "PlaceholderSize"
245+
},
246+
{
247+
"description": "Passes the animation to the Placeholders located in the header",
248+
"prop": "headerAnimation",
249+
"type": "PlaceholderAnimation"
250+
},
251+
{
252+
"description": "Passes the variant to the Placeholders located in the header",
253+
"prop": "headerVariant",
254+
"type": "ColorVariant"
255+
},
256+
{
257+
"description": "The number of columns to display in the footer of the PlaceholderTable",
258+
"prop": "footerColumns",
259+
"type": "string | number"
260+
},
261+
{
262+
"description": "The number of columns to display in the header of the PlaceholderTable",
263+
"prop": "headerColumns",
264+
"type": "string | number"
265+
},
266+
{
267+
"description": "Shows the footer",
268+
"prop": "showFooter",
269+
"type": "Booleanish"
270+
},
271+
{
272+
"description": "Passes the width to the Placeholders located in the footer",
273+
"prop": "footerCellWidth",
274+
"type": "string | number"
275+
},
276+
{
277+
"description": "Passes the size to the Placeholders located in the footer",
278+
"prop": "footerSize",
279+
"type": "PlaceholderSize"
280+
},
281+
{
282+
"description": "Passes the animation to the Placeholders located in the footer",
283+
"prop": "footerAnimation",
284+
"type": "PlaceholderAnimation"
285+
},
286+
{
287+
"description": "Passes the variant to the Placeholders located in the footer",
288+
"prop": "footerVariant",
289+
"type": "ColorVariant"
290+
}
291+
],
292+
"slots": [
293+
{
294+
"description": "Overwrites the thead of the table",
295+
"name": "thead",
296+
"scope": []
297+
},
298+
{
299+
"description": "Overwrites the tfoot of the table",
300+
"name": "tfoot",
301+
"scope": []
302+
},
303+
{
304+
"description": "Overwrites the tbody of the table",
305+
"name": "default",
306+
"scope": []
307+
}
308+
]
309+
},
310+
{
311+
"component": "BPlaceholderButton",
312+
"emits": [],
313+
"slots": [],
314+
"props": [
315+
{
316+
"description": "Overrides the default component html tag",
317+
"prop": "tag",
318+
"type": "string"
319+
},
320+
{
321+
"description": "Specifies the width of the placeholder. Width takes priority over prop cols",
322+
"prop": "width",
323+
"type": "string | number"
324+
},
325+
{
326+
"description": "Specifies the width of the placeholder by using grid col classes",
327+
"prop": "cols",
328+
"type": "string | number"
329+
},
330+
{
331+
"description": "Applies one of the Bootstrap theme color variants to the component",
332+
"prop": "variant",
333+
"type": "ColorVariant"
334+
},
335+
{
336+
"description": "Displays an animation affect over the Placeholder",
337+
"prop": "animation",
338+
"type": "PlaceholderAnimation"
339+
}
340+
]
341+
}
342+
]
343+
}
344+
}

‎apps/docs/docs/components/Placeholder.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Placeholder
2+
3+
## Skeleton component differences
4+
5+
The skeleton component is a bootstrap-vue custom component to indicate loading states. As Bootstrap v5 contains a dedicated component for this state, skeleton components are deprecated and will eventually be removed in v0.4.0. Most skeleton components from bootstrap-vue contain a Placeholder counterpart, but with additional features
6+
7+
<ClientOnly>
8+
<ComponentReference></ComponentReference>
9+
</ClientOnly>

‎apps/docs/docs/components/README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,10 @@ const componentList = {
141141
name: 'Pagination',
142142
description: 'Quick first, previous, next, last, and page buttons for pagination control of another component'
143143
},
144+
Placeholder: {
145+
name: 'Placeholder',
146+
description: 'Placeholder components can create a unique appearance to indicate something may still be loading'
147+
},
144148
Popover: {
145149
name: 'Popover',
146150
description: 'Popover provides a tooltip behavior over another component'

0 commit comments

Comments
 (0)