Skip to content

Commit dda2ace

Browse files
VividLemonVividLemon
committed
refactor: move comps into their own area
1 parent 37f8a56 commit dda2ace

Some content is hidden

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

43 files changed

+2209
-2202
lines changed

‎apps/playground/src/App.vue

Lines changed: 1 addition & 2164 deletions
Large diffs are not rendered by default.

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

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<template>
2+
<div class="my-2">
3+
<h2 id="content" class="bd-title">Accordion</h2>
4+
<p class="bd-lead">
5+
Build vertically collapsing accordions in combination with our Collapse JavaScript plugin.
6+
</p>
7+
8+
<b-card no-body title="holaprop" sub-title="sdf" header="hola" footer="chau">
9+
<template #footer>
10+
<em>Footer Slot</em>
11+
</template>
12+
13+
<b-card-body>
14+
<b-card-title>Card title</b-card-title>
15+
<b-card-sub-title>Card subtitle</b-card-sub-title>
16+
</b-card-body>
17+
<b-accordion flush>
18+
<b-accordion-item id="iddddd" title="Accordion Item #1" visible>
19+
<strong>This is the first item's accordion body.</strong> It is shown by default, until
20+
the collapse plugin adds the appropriate classes that we use to style each element. These
21+
classes control the overall appearance, as well as the showing and hiding via CSS
22+
transitions. You can modify any of this with custom CSS or overriding our default
23+
variables. It's also worth noting that just about any HTML can go within the
24+
<code>.accordion-body</code>, though the transition does limit overflow.
25+
</b-accordion-item>
26+
27+
<b-accordion-item title="Accordion Item #2">
28+
<strong>This is the second item's accordion body.</strong> It is hidden by default, until
29+
the collapse plugin adds the appropriate classes that we use to style each element. These
30+
classes control the overall appearance, as well as the showing and hiding via CSS
31+
transitions. You can modify any of this with custom CSS or overriding our default
32+
variables. It's also worth noting that just about any HTML can go within the
33+
<code>.accordion-body</code>, though the transition does limit overflow.
34+
</b-accordion-item>
35+
36+
<b-accordion-item title="Accordion Item #3">
37+
<strong>This is the third item's accordion body.</strong> It is hidden by default, until
38+
the collapse plugin adds the appropriate classes that we use to style each element. These
39+
classes control the overall appearance, as well as the showing and hiding via CSS
40+
transitions. You can modify any of this with custom CSS or overriding our default
41+
variables. It's also worth noting that just about any HTML can go within the
42+
<code>.accordion-body</code>, though the transition does limit overflow.
43+
</b-accordion-item>
44+
</b-accordion>
45+
</b-card>
46+
</div>
47+
</template>

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<template>
2+
<div class="my-2">
3+
<h2>Alerts</h2>
4+
<b-alert variant="primary" show>A simple primary alert—check it out!</b-alert>
5+
<b-alert variant="warning" show dismissible>
6+
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
7+
</b-alert>
8+
</div>
9+
</template>

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<template>
2+
<div class="my-2">
3+
<div>
4+
<h2>Avatars</h2>
5+
<b-avatar button class="me-1" icon="person-fill" variant="secondary" />
6+
<b-avatar button class="me-1" text="BV" />
7+
<b-avatar button class="me-5" src="https://placekitten.com/300/300" />
8+
9+
<b-avatar class="me-2" icon="person-fill" size="sm" square />
10+
<b-avatar class="me-2" icon="person-fill" variant="success" rounded />
11+
<b-avatar class="me-5" icon="person-fill" variant="warning" size="lg" />
12+
13+
<b-avatar class="me-2" text="ED" size="sm" square text-variant="dark" />
14+
<b-avatar class="me-2" text="ED" variant="success" rounded />
15+
<b-avatar class="me-5" text="ED" variant="warning" text-variant="danger" size="lg" />
16+
17+
<b-avatar class="me-2" src="https://placekitten.com/300/300" button size="sm" square />
18+
<b-avatar class="me-2" src="https://placekitten.com/300/300" button rounded />
19+
<b-avatar class="me-5" src="https://placekitten.com/300/300" button size="lg" />
20+
21+
<b-avatar class="me-2" size="lg">
22+
<span class="fw-bold">custom</span>
23+
</b-avatar>
24+
</div>
25+
</div>
26+
</template>

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<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>
21+
<!-- activate "vue-router" in "main.ts" to test the "router-view" component
22+
<router-view></router-view>
23+
-->
24+
</div>
25+
</template>

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

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<template>
2+
<div class="my-2">
3+
<h2>Badge</h2>
4+
<div>
5+
<h4>Simple</h4>
6+
<div class="ms-4">
7+
<h2>
8+
Example heading
9+
<b-badge>New</b-badge>
10+
</h2>
11+
<h3>
12+
Example heading
13+
<b-badge>New</b-badge>
14+
</h3>
15+
<h4>
16+
Example heading
17+
<b-badge>New</b-badge>
18+
</h4>
19+
<h5>
20+
Example heading
21+
<b-badge>New</b-badge>
22+
</h5>
23+
<h6>
24+
Example heading
25+
<b-badge>New</b-badge>
26+
</h6>
27+
</div>
28+
</div>
29+
<div class="mt-2">
30+
<h4>Pill badges with color variant</h4>
31+
<div class="ms-4">
32+
<b-badge pill variant="primary">Primary</b-badge>
33+
<b-badge pill variant="secondary">Secondary</b-badge>
34+
<b-badge pill variant="success">Success</b-badge>
35+
<b-badge pill variant="danger">Danger</b-badge>
36+
<b-badge pill variant="warning">Warning</b-badge>
37+
<b-badge pill variant="info">Info</b-badge>
38+
<b-badge pill variant="light">Light</b-badge>
39+
<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">
45+
<b-badge href="#" variant="primary">Primary</b-badge>
46+
<b-badge href="#" variant="secondary">Secondary</b-badge>
47+
<b-badge href="#" variant="success">Success</b-badge>
48+
<b-badge href="#" variant="danger">Danger</b-badge>
49+
<b-badge href="#" variant="warning">Warning</b-badge>
50+
<b-badge href="#" variant="info">Info</b-badge>
51+
<b-badge href="#" variant="light">Light</b-badge>
52+
<b-badge href="#" variant="dark">Dark</b-badge>
53+
</div>
54+
</div>
55+
</div>
56+
</template>

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<template>
2+
<div class="my-2">
3+
<h2>Breadcrumb</h2>
4+
<b-breadcrumb />
5+
</div>
6+
</template>
7+
8+
<script setup lang="ts">
9+
import {onMounted} from 'vue'
10+
import {useBreadcrumb} from 'bootstrap-vue-3'
11+
12+
const breadcrumb = useBreadcrumb()
13+
14+
onMounted(() => {
15+
breadcrumb.items.push({
16+
text: 'Home',
17+
href: '/home',
18+
})
19+
20+
breadcrumb.items.push({
21+
text: 'Hello',
22+
})
23+
})
24+
</script>

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<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>
7+
</template>
8+
9+
<script setup lang="ts">
10+
import {ref} from 'vue'
11+
12+
const buttonIsPressed = ref(false)
13+
</script>

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

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<template>
2+
<div class="my-2">
3+
<h2 class="my-3">Cards</h2>
4+
<b-row>
5+
<b-col>
6+
<b-card
7+
no-body
8+
style="max-width: 20rem"
9+
img-src="https://placekitten.com/380/200"
10+
img-alt="Image"
11+
img-top
12+
>
13+
<template #header>
14+
<h4 class="mb-0">Hello World</h4>
15+
</template>
16+
17+
<b-card-body>
18+
<b-card-title>Card Title</b-card-title>
19+
<b-card-sub-title class="mb-2">Card Sub Title</b-card-sub-title>
20+
<b-card-text>
21+
Some quick example text to build on the card title and make up the bulk of the card's
22+
content.
23+
</b-card-text>
24+
</b-card-body>
25+
26+
<b-list-group flush>
27+
<b-list-group-item>Cras justo odio</b-list-group-item>
28+
<b-list-group-item>Dapibus ac facilisis in</b-list-group-item>
29+
<b-list-group-item>Vestibulum at eros</b-list-group-item>
30+
</b-list-group>
31+
32+
<b-card-body>
33+
<a href="#" class="card-link">Card link</a>
34+
<a href="#" class="card-link">Another link</a>
35+
</b-card-body>
36+
37+
<b-card-footer>This is a footer</b-card-footer>
38+
39+
<b-card-img src="https://placekitten.com/480/210" alt="Image" bottom />
40+
</b-card>
41+
</b-col>
42+
<b-col>
43+
<b-card
44+
title="Card Title"
45+
img-src="https://picsum.photos/600/300/?image=25"
46+
img-alt="Image"
47+
img-top
48+
tag="article"
49+
style="max-width: 20rem"
50+
class="mb-2"
51+
>
52+
<b-card-text>
53+
Some quick example text to build on the card title and make up the bulk of the card's
54+
content.
55+
</b-card-text>
56+
57+
<b-button href="#" variant="primary">Go somewhere</b-button>
58+
</b-card>
59+
</b-col>
60+
<b-col cols="6">
61+
<b-card no-body class="overflow-hidden" style="max-width: 540px">
62+
<b-row class="g-0">
63+
<b-col md="6">
64+
<b-card-img
65+
src="https://picsum.photos/400/400/?image=20"
66+
alt="Image"
67+
class="rounded-0"
68+
/>
69+
</b-col>
70+
<b-col md="6">
71+
<b-card-body title="Horizontal Card">
72+
<b-card-text>
73+
This is a wider card with supporting text as a natural lead-in to additional
74+
content. This content is a little bit longer.
75+
</b-card-text>
76+
</b-card-body>
77+
</b-col>
78+
</b-row>
79+
</b-card>
80+
</b-col>
81+
</b-row>
82+
</div>
83+
</template>

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

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<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>
27+
28+
<!-- Slides with image only -->
29+
<b-carousel-slide img-src="https://picsum.photos/1024/480/?image=58" />
30+
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>
43+
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>
52+
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>
67+
</template>

0 commit comments

Comments
 (0)