Skip to content
This repository was archived by the owner on Mar 27, 2025. It is now read-only.

Commit 6dff95a

Browse files
VividLemonVividLemon
authored
feat(BTooltip): add type interfaces for BPopover props (bootstrap-vue-next#1463)
* feat(BTooltip): add type interfaces for BPopover props * chore: omit tooltip * chore: code style * feat(useToast): add the ability to programatically hide toasts * docs: add bun to scripts * chore: update pnpm
1 parent 13afb66 commit 6dff95a

File tree

11 files changed

+369
-78
lines changed

11 files changed

+369
-78
lines changed

‎apps/docs/src/components/TableOfContentsNav.vue

+1
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,7 @@ const composablesList: {name: string}[] = [
127127
{name: 'useColorMode'},
128128
{name: 'useModal'},
129129
{name: 'useModalController'},
130+
{name: 'useToast'},
130131
]
131132
132133
const directivesList: {name: string}[] = [

‎apps/docs/src/docs.md

+35
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,19 @@ pnpm add unplugin-vue-components -D
6060

6161
</BCard>
6262

63+
</BTab>
64+
<BTab title="BUN">
65+
66+
<BCard class="bg-body-tertiary">
67+
68+
```bash
69+
bun add bootstrap bootstrap-vue-next
70+
71+
bun add unplugin-vue-components -D
72+
```
73+
74+
</BCard>
75+
6376
</BTab>
6477
<BTab title="YARN">
6578

@@ -158,6 +171,17 @@ pnpm add bootstrap bootstrap-vue-next
158171

159172
</BCard>
160173

174+
</BTab>
175+
<BTab title="BUN">
176+
177+
<BCard class="bg-body-tertiary">
178+
179+
```bash
180+
bun add bootstrap bootstrap-vue-next
181+
```
182+
183+
</BCard>
184+
161185
</BTab>
162186
<BTab title="YARN">
163187

@@ -225,6 +249,17 @@ pnpm add bootstrap bootstrap-vue-next @bootstrap-vue-next/nuxt -D
225249

226250
</BCard>
227251

252+
</BTab>
253+
<BTab title="BUN">
254+
255+
<BCard class="bg-body-tertiary">
256+
257+
```bash
258+
bun add bootstrap bootstrap-vue-next @bootstrap-vue-next/nuxt -D
259+
```
260+
261+
</BCard>
262+
228263
</BTab>
229264
<BTab title="YARN">
230265

‎apps/docs/src/docs/components/toast.md

+60-1
Original file line numberDiff line numberDiff line change
@@ -299,6 +299,52 @@ const {show} = useToast()
299299

300300
</HighlightCard>
301301

302+
## Programmatically Hiding a Toast
303+
304+
Hiding a `Toast` programmatically is very simple. Simply use the return value from the show method, and pass it into the hide function
305+
306+
<HighlightCard>
307+
<BButtonGroup>
308+
<BButton @click="showMe" variant="success">
309+
Show the Toast
310+
</BButton>
311+
<BButton @click="hideMe" variant="danger">
312+
Hide the Toast
313+
</BButton>
314+
</BButtonGroup>
315+
<template #html>
316+
317+
```vue
318+
<template>
319+
<BButtonGroup>
320+
<BButton @click="showMe" variant="success"> Show the Toast </BButton>
321+
<BButton @click="hideMe" variant="danger"> Hide the Toast </BButton>
322+
</BButtonGroup>
323+
</template>
324+
325+
<script setup lang="ts">
326+
const {show, hide} = useToast()
327+
328+
let showValue: undefined | symbol
329+
330+
const showMe = () => {
331+
if (typeof showValue === 'symbol') return
332+
// `show` returns a symbol
333+
showValue = show('Showing', {value: true, variant: 'success', pos: 'bottom-center'})
334+
}
335+
336+
const hideMe = () => {
337+
if (showValue === undefined) return
338+
hide(showValue)
339+
showValue = undefined
340+
}
341+
</script>
342+
```
343+
344+
</template>
345+
346+
</HighlightCard>
347+
302348
## Accessibility
303349

304350
Toasts are intended to be **small interruptions** to your visitors or users, so to help those with screen readers and similar assistive technologies, toasts are wrapped in an aria-live region. Changes to live regions (such as injecting/updating a toast component) are automatically announced by screen readers without needing to move the user's focus or otherwise interrupt the user. Additionally, `aria-atomic="true"` is automatically set to ensure that the entire toast is always announced as a single (atomic) unit, rather than announcing what was changed (which could lead to problems if you only update part of the toast's content, or if displaying the same toast content at a later point in time).
@@ -314,7 +360,7 @@ import {BButtonGroup, BButton, BToast, useToast} from 'bootstrap-vue-next'
314360
import HighlightCard from '../../components/HighlightCard.vue'
315361
import {ref} from 'vue'
316362

317-
const {show, toasts} = useToast()
363+
const {show, hide, toasts} = useToast()
318364

319365
const active = ref(true)
320366

@@ -333,4 +379,17 @@ const chunks = [
333379
all[ch] = [].concat(all[ch] || [], one)
334380
return all
335381
}, [])
382+
383+
let showValue: undefined | symbol
384+
385+
const showMe = () => {
386+
if (typeof showValue === 'symbol') return
387+
showValue = show('Showing', {value: true, variant: 'success', pos: 'bottom-center'})
388+
}
389+
390+
const hideMe = () => {
391+
if (showValue === undefined) return
392+
hide(showValue)
393+
showValue = undefined
394+
}
336395
</script>

‎apps/docs/src/docs/composables.md

+12
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,18 @@ const composablesList: {name: string; description: string}[] = [
2323
{
2424
name: 'useColorMode',
2525
description: 'Implement a color scheme to reactively use light/dark or other color modes. Light and dark themes are included by default, but you can create more by reviewing the usage on the Bootstrap v5 documentation (Color Modes)'
26+
},
27+
{
28+
name: 'useModal',
29+
description: 'Conveniently hide or show modals programmatically from anywhere in the app',
30+
},
31+
{
32+
name: 'useModalController',
33+
description: 'Hide modals from anywhere in the app, or close all modals from one source using this utility',
34+
},
35+
{
36+
name: 'useToast',
37+
description: 'Conveniently orchestrate a push notification system by showing or hiding Toasts with our useToast composable system',
2638
}
2739
]
2840

‎apps/docs/src/docs/composables/useToast.md

+129
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
# useModal
2+
3+
<ClientOnly>
4+
<Teleport to=".bd-toc">
5+
6+
[[toc]]
7+
8+
</Teleport>
9+
</ClientOnly>
10+
11+
<div class="lead mb-5">
12+
13+
`useToast` is used to create `Toasts` on demand. You must have initialized the `BToaster` component once in your application. This is covered mostly under the [components docs](/docs/components/toast) section. So, this will be more in depth as to what the composable does. The following examples are shown in the component documentation
14+
15+
</div>
16+
17+
## Showing a Toast
18+
19+
Showing a toast is done through the show method
20+
21+
<HighlightCard>
22+
<BButton @click="show('Hello World!')">Show</BButton>
23+
<template #html>
24+
25+
```vue
26+
<template>
27+
<BButton @click="show('Hello World!')">Show</BButton>
28+
</template>
29+
30+
<script setup lang="ts">
31+
const {show} = useToast()
32+
</script>
33+
```
34+
35+
</template>
36+
</HighlightCard>
37+
38+
The show method returns a symbol. This symbol is a unique id. Since `Toasts` are fluid and can move around a lot, returning the index at a given point in time is not ideal for obvious reasons. So, for use with the hide method, we need to give you a unique identifier
39+
40+
## Hiding a Toast
41+
42+
We then use that returned id to hide a `Toast`
43+
44+
<HighlightCard>
45+
<BButtonGroup>
46+
<BButton @click="showMe" variant="success">
47+
Show the Toast
48+
</BButton>
49+
<BButton @click="hideMe" variant="danger">
50+
Hide the Toast
51+
</BButton>
52+
</BButtonGroup>
53+
<template #html>
54+
55+
```vue
56+
<template>
57+
<BButtonGroup>
58+
<BButton @click="showMe" variant="success"> Show the Toast </BButton>
59+
<BButton @click="hideMe" variant="danger"> Hide the Toast </BButton>
60+
</BButtonGroup>
61+
</template>
62+
63+
<script setup lang="ts">
64+
const {show, hide} = useToast()
65+
66+
let showValue: undefined | symbol
67+
68+
const showMe = () => {
69+
if (typeof showValue === 'symbol') return
70+
// `show` returns a symbol
71+
showValue = show('Showing', {value: true, variant: 'success', pos: 'bottom-center'})
72+
}
73+
74+
const hideMe = () => {
75+
if (showValue === undefined) return
76+
hide(showValue)
77+
showValue = undefined
78+
}
79+
</script>
80+
```
81+
82+
</template>
83+
84+
</HighlightCard>
85+
86+
## The `toasts` Value
87+
88+
Not covered in the component docs is the value `toasts` returned by the composable. This is mostly an internal value used by the `BToaster` component for actually rendering your `BToast` component. This is actually how the entire thing functions! It is simply the array of `Toasts`. Its not a very useful property externally. Keep in mind, this is all global. If you add a Toast from one place, it will always be added from to this array. There is no separation. Functionally it is quite similar to `useBreadcrumb`
89+
90+
<HighlightCard>
91+
<BButton @click="show('Hello World!')">Show</BButton>
92+
{{ toasts }}
93+
<template #html>
94+
95+
```vue
96+
<template>
97+
<BButton @click="show('Hello World!')">Show</BButton>
98+
{{ toasts }}
99+
</template>
100+
101+
<script setup lang="ts">
102+
const {show, toasts} = useToast()
103+
</script>
104+
```
105+
106+
</template>
107+
</HighlightCard>
108+
109+
<script setup lang="ts">
110+
import {data} from '../../data/components/toast.data'
111+
import {BButton, useToast} from 'bootstrap-vue-next'
112+
import HighlightCard from '../../components/HighlightCard.vue'
113+
114+
const {show, hide, toasts} = useToast()
115+
116+
let showValue: undefined | symbol
117+
118+
const showMe = () => {
119+
if (typeof showValue === 'symbol') return
120+
showValue = show('Showing', {value: true, variant: 'success', pos: 'bottom-center'})
121+
}
122+
123+
const hideMe = () => {
124+
if (showValue === undefined) return
125+
hide(showValue)
126+
showValue = undefined
127+
}
128+
129+
</script>

‎apps/docs/src/docs/icons.md

+22
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,17 @@ pnpm add unplugin-icons unplugin-vue-components @vue/compiler-sfc -D
4040

4141
</BCard>
4242

43+
</BTab>
44+
<BTab title="BUN">
45+
46+
<BCard class="bg-body-tertiary">
47+
48+
```bash
49+
bun add unplugin-icons unplugin-vue-components @vue/compiler-sfc -D
50+
```
51+
52+
</BCard>
53+
4354
</BTab>
4455
<BTab title="YARN">
4556

@@ -145,6 +156,17 @@ pnpm add unplugin-icons @vue/compiler-sfc @iconify-json/bi -D
145156

146157
</BCard>
147158

159+
</BTab>
160+
<BTab title="BUN">
161+
162+
<BCard class="bg-body-tertiary">
163+
164+
```bash
165+
bun add unplugin-icons @vue/compiler-sfc @iconify-json/bi -D
166+
```
167+
168+
</BCard>
169+
148170
</BTab>
149171
<BTab title="YARN">
150172

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -45,5 +45,5 @@
4545
"npm": ">=7.0.0",
4646
"node": ">=14.0.0"
4747
},
48-
"packageManager": "[email protected].4"
48+
"packageManager": "[email protected].5"
4949
}

0 commit comments

Comments
 (0)