Skip to content

Commit b38ec28

Browse files
mariusamariusa
authored
Merge pull request #503 from VividLemon/dev
refactor(playground): use layout in components
2 parents a831ce5 + afff4a0 commit b38ec28

36 files changed

+1930
-1416
lines changed

‎apps/playground/src/Views/HomePage.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -153,8 +153,8 @@ const switchActive = (name: string): void => {
153153
const comp = comps.find((el) => el.name === name)
154154
if (comp === undefined || comp.disabled === true) return
155155
const value = comp.name
156-
const ind = active.value.findIndex((el) => el === value)
157-
ind !== -1 ? active.value.splice(ind, 1) : active.value.push(value)
156+
const index = active.value.findIndex((el) => el === value)
157+
index !== -1 ? active.value.splice(index, 1) : active.value.push(value)
158158
if (active.value.length === 0) {
159159
localStorage.removeItem('bv3-playground-dev-active-list')
160160
return

‎apps/playground/src/components/Comps/TBLink.vue

Lines changed: 27 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,32 @@
11
<template>
2-
<!-- Navigation -->
3-
<div class="my-2">
4-
<h2 class="my-3">Navigation (Links)</h2>
5-
<div id="nav">
6-
<b-link :to="{name: 'Home', path: '/' /* path is used when vue-router is not present */}"
7-
>Home</b-link
8-
>
9-
<br />
10-
<b-link
11-
:to="{
12-
name: 'About',
13-
params: {id: '456'},
14-
query: {param: 'someVal'},
15-
path: '/about' /* path is used when vue-router is not present */,
16-
}"
17-
>About</b-link
18-
>
19-
</div>
20-
<p>NB: navigation behavior depends of the usage of "vue-router"</p>
2+
<b-container fluid>
3+
<b-row>
4+
<b-col>
5+
<b-link :to="{name: 'Home', path: '/' /* path is used when vue-router is not present */}"
6+
>Home</b-link
7+
>
8+
</b-col>
9+
</b-row>
10+
<b-row>
11+
<b-col>
12+
<b-link
13+
:to="{
14+
name: 'About',
15+
params: {id: '456'},
16+
query: {param: 'someVal'},
17+
path: '/about' /* path is used when vue-router is not present */,
18+
}"
19+
>About</b-link
20+
>
21+
</b-col>
22+
</b-row>
23+
<b-row>
24+
<b-col>
25+
<p>NB: navigation behavior depends of the usage of "vue-router"</p>
26+
</b-col>
27+
</b-row>
2128
<!-- activate "vue-router" in "main.ts" to test the "router-view" component
2229
<router-view></router-view>
2330
-->
24-
</div>
31+
</b-container>
2532
</template>

‎apps/playground/src/components/Comps/TBadge.vue

Lines changed: 31 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,45 @@
11
<template>
2-
<div class="my-2">
3-
<h2>Badge</h2>
4-
<div>
5-
<h4>Simple</h4>
6-
<div class="ms-4">
2+
<b-container fluid>
3+
<b-row>
4+
<b-col>
5+
<b-badge>New</b-badge>
6+
</b-col>
7+
<b-col>
78
<h2>
89
Example heading
910
<b-badge>New</b-badge>
1011
</h2>
12+
</b-col>
13+
<b-col>
1114
<h3>
1215
Example heading
1316
<b-badge>New</b-badge>
1417
</h3>
18+
</b-col>
19+
<b-col>
1520
<h4>
1621
Example heading
1722
<b-badge>New</b-badge>
1823
</h4>
24+
</b-col>
25+
<b-col>
1926
<h5>
2027
Example heading
2128
<b-badge>New</b-badge>
2229
</h5>
30+
</b-col>
31+
<b-col>
2332
<h6>
2433
Example heading
2534
<b-badge>New</b-badge>
2635
</h6>
27-
</div>
28-
</div>
29-
<div class="mt-2">
30-
<h4>Pill badges with color variant</h4>
31-
<div class="ms-4">
36+
</b-col>
37+
</b-row>
38+
<b-row>
39+
<b-col> Variants </b-col>
40+
</b-row>
41+
<b-row>
42+
<b-col>
3243
<b-badge pill variant="primary">Primary</b-badge>
3344
<b-badge pill variant="secondary">Secondary</b-badge>
3445
<b-badge pill variant="success">Success</b-badge>
@@ -37,11 +48,13 @@
3748
<b-badge pill variant="info">Info</b-badge>
3849
<b-badge pill variant="light">Light</b-badge>
3950
<b-badge pill variant="dark">Dark</b-badge>
40-
</div>
41-
</div>
42-
<div class="mt-2">
43-
<h4>Actionable badges</h4>
44-
<div class="ms-4">
51+
</b-col>
52+
</b-row>
53+
<b-row>
54+
<b-col> Actionables </b-col>
55+
</b-row>
56+
<b-row>
57+
<b-col>
4558
<b-badge href="#" variant="primary">Primary</b-badge>
4659
<b-badge href="#" variant="secondary">Secondary</b-badge>
4760
<b-badge href="#" variant="success">Success</b-badge>
@@ -50,7 +63,7 @@
5063
<b-badge href="#" variant="info">Info</b-badge>
5164
<b-badge href="#" variant="light">Light</b-badge>
5265
<b-badge href="#" variant="dark">Dark</b-badge>
53-
</div>
54-
</div>
55-
</div>
66+
</b-col>
67+
</b-row>
68+
</b-container>
5669
</template>

‎apps/playground/src/components/Comps/TBreadcrumb.vue

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
<template>
2-
<div class="my-2">
3-
<h2>Breadcrumb</h2>
4-
<b-breadcrumb />
5-
</div>
2+
<b-container fluid>
3+
<b-row>
4+
<b-col>
5+
<b-breadcrumb />
6+
</b-col>
7+
</b-row>
8+
</b-container>
69
</template>
710

811
<script setup lang="ts">

‎apps/playground/src/components/Comps/TButton.vue

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,19 @@
11
<template>
2-
<b-button v-model:pressed="buttonIsPressed" variant="primary" class="mt-3">Toggle Me</b-button>
3-
<p>
4-
Pressed State:
5-
<strong>{{ buttonIsPressed }}</strong>
6-
</p>
2+
<b-container fluid>
3+
<b-row>
4+
<b-col>
5+
<b-button v-model:pressed="buttonIsPressed" variant="primary" class="mt-3"
6+
>Toggle Me</b-button
7+
>
8+
</b-col>
9+
</b-row>
10+
<b-row>
11+
<b-col>
12+
Pressed State:
13+
<strong>{{ buttonIsPressed }}</strong>
14+
</b-col>
15+
</b-row>
16+
</b-container>
717
</template>
818

919
<script setup lang="ts">

‎apps/playground/src/components/Comps/TCard.vue

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<template>
2-
<div class="my-2">
3-
<h2 class="my-3">Cards</h2>
2+
<b-container fluid>
43
<b-row>
54
<b-col>
65
<b-card
@@ -79,5 +78,5 @@
7978
</b-card>
8079
</b-col>
8180
</b-row>
82-
</div>
81+
</b-container>
8382
</template>

‎apps/playground/src/components/Comps/TCarousel.vue

Lines changed: 49 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,55 @@
11
<template>
2-
<div class="my-2">
3-
<h2>Carousel</h2>
4-
5-
<b-carousel
6-
id="carousel-1"
7-
:interval="4000"
8-
controls
9-
indicators
10-
background="#ababab"
11-
img-width="1024"
12-
img-height="480"
13-
style="text-shadow: 1px 1px 2px #333"
14-
>
15-
<!-- Text slides with image -->
16-
<b-carousel-slide
17-
active
18-
caption="First slide"
19-
text="Nulla vitae elit libero, a pharetra augue mollis interdum."
20-
img-src="https://picsum.photos/1024/480/?image=52"
21-
/>
22-
23-
<!-- Slides with custom text -->
24-
<b-carousel-slide img-src="https://picsum.photos/1024/480/?image=54">
25-
<h1>Hello world!</h1>
26-
</b-carousel-slide>
2+
<b-container fluid>
3+
<b-row>
4+
<b-col>
5+
<b-carousel
6+
id="carousel-1"
7+
:interval="4000"
8+
controls
9+
indicators
10+
background="#ababab"
11+
img-width="1024"
12+
img-height="480"
13+
style="text-shadow: 1px 1px 2px #333"
14+
>
15+
<!-- Text slides with image -->
16+
<b-carousel-slide
17+
active
18+
caption="First slide"
19+
text="Nulla vitae elit libero, a pharetra augue mollis interdum."
20+
img-src="https://picsum.photos/1024/480/?image=52"
21+
/>
2722

28-
<!-- Slides with image only -->
29-
<b-carousel-slide img-src="https://picsum.photos/1024/480/?image=58" />
23+
<!-- Slides with custom text -->
24+
<b-carousel-slide img-src="https://picsum.photos/1024/480/?image=54">
25+
<h1>Hello world!</h1>
26+
</b-carousel-slide>
3027

31-
<!-- Slides with img slot -->
32-
<!-- Note the classes .d-block and .img-fluid to prevent browser default image alignment -->
33-
<b-carousel-slide>
34-
<template #img>
35-
<img
36-
width="1024"
37-
height="480"
38-
src="https://picsum.photos/1024/480/?image=55"
39-
alt="image slot"
40-
/>
41-
</template>
42-
</b-carousel-slide>
28+
<!-- Slides with image only -->
29+
<b-carousel-slide img-src="https://picsum.photos/1024/480/?image=58" />
4330

44-
<!-- Slide with blank fluid image to maintain slide aspect ratio -->
45-
<b-carousel-slide caption="Blank Image" img-blank img-alt="Blank image">
46-
<p>
47-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros felis, tincidunt
48-
a tincidunt eget, convallis vel est. Ut pellentesque ut lacus vel interdum.
49-
</p>
50-
</b-carousel-slide>
51-
</b-carousel>
31+
<!-- Slides with img slot -->
32+
<!-- Note the classes .d-block and .img-fluid to prevent browser default image alignment -->
33+
<b-carousel-slide>
34+
<template #img>
35+
<img
36+
width="1024"
37+
height="480"
38+
src="https://picsum.photos/1024/480/?image=55"
39+
alt="image slot"
40+
/>
41+
</template>
42+
</b-carousel-slide>
5243

53-
<details class="accordion-item">
54-
<summary class="accordion-header">
55-
<div class="details-button">Accordion Item #1</div>
56-
</summary>
57-
<div class="accordion-body">
58-
<strong>This is the first item's accordion body.</strong> It is shown by default, until the
59-
collapse plugin adds the appropriate classes that we use to style each element. These
60-
classes control the overall appearance, as well as the showing and hiding via CSS
61-
transitions. You can modify any of this with custom CSS or overriding our default variables.
62-
It's also worth noting that just about any HTML can go within the
63-
<code>.accordion-body</code>, though the transition does limit overflow.
64-
</div>
65-
</details>
66-
</div>
44+
<!-- Slide with blank fluid image to maintain slide aspect ratio -->
45+
<b-carousel-slide caption="Blank Image" img-blank img-alt="Blank image">
46+
<p>
47+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros felis,
48+
tincidunt a tincidunt eget, convallis vel est. Ut pellentesque ut lacus vel interdum.
49+
</p>
50+
</b-carousel-slide>
51+
</b-carousel>
52+
</b-col>
53+
</b-row>
54+
</b-container>
6755
</template>

0 commit comments

Comments
 (0)