Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

BToast invalid docs #1809

Merged
merged 3 commits into from Mar 10, 2024
Merged

BToast invalid docs #1809

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fd03856
docs(BToast)
Mar 9, 2024
e4cb525
Merge branch 'main' into BToast_Update-documentation
Mar 10, 2024
7e59412
docs(BToast)
Mar 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
34 changes: 24 additions & 10 deletions apps/docs/src/data/components/toast.data.ts
View file
Open in desktop
Expand Up @@ -5,100 +5,114 @@ export default {
{
component: 'BToast',
props: [
{
prop: 'delay',
type: 'string | number',
default: 5000,
},
{
prop: 'bodyClass',
type: 'ClassValue',
default: undefined,
description: 'CSS class (or classes) to add to the toast body element',
},
{
prop: 'body',
type: 'string',
default: undefined,
description: 'The text content of the body',
},
{
prop: 'headerClass',
type: 'ClassValue',
default: undefined,
description: 'CSS class (or classes) to add to the toast header element',
},
{
prop: 'headerTag',
type: 'string',
default: 'div',
},
{
prop: 'animation',
type: 'boolean',
default: true,
description: 'Specify the HTML tag to render instead of the default tag for the footer',
},
{
prop: 'id',
type: 'string',
default: undefined,
description:
'Used to set the `id` attribute on the rendered content, and used as the base to generate any additional element IDs as needed',
},
{
prop: 'isStatus',
type: 'boolean',
default: false,
description:
"When set to 'true', makes the toast have attributes aria-live=polite and role=status. When 'false' aria-live will be 'assertive' and role will be 'alert'",
},
{
prop: 'autoHide',
type: 'boolean',
default: true,
description: 'Used to set if the toast will be dismissed automatically',
},
{
prop: 'noCloseButton',
type: 'boolean',
default: false,
description: 'When set, hides the close button in the toast header',
},
{
prop: 'noFade',
type: 'boolean',
default: false,
description:
'When set to `true`, disables the fade animation/transition on the component',
},
{
prop: 'noHoverPause',
type: 'boolean',
default: false,
description:
'When set, disables the pausing of the auto hide delay when the mouse hovers the toast',
},
{
prop: 'solid',
type: 'boolean',
default: false,
description:
'When set, renders the toast with a solid background rather than translucent',
},
{
prop: 'title',
type: 'string',
default: undefined,
description: "The toast's title text",
},
{
prop: 'modelValue',
type: 'boolean | number',
default: false,
description:
'Sets if the toast is visible or the number of milliseconds that the toast will be dismissed',
},
{
prop: 'toastClass',
type: 'ClassValue',
default: undefined,
description: 'CSS class (or classes) to add to the toast wrapper element',
},
{
prop: 'showOnPause',
type: 'boolean',
default: true,
description: "When set, keeps the toast visible when it's paused",
},
{
prop: 'interval',
type: 'number | string',
default: '1000',
description: 'The interval of which the countdown timer will refresh itself',
},
{
prop: 'progressProps',
type: "Omit<BProgressBarProps, 'label' | 'labelHtml' | 'max' | 'value'>",
default: undefined,
description:
'The properties to define the progress bar in the toast. No toast will be shown if left undefined',
},
],
slots: [],
Expand Down
54 changes: 34 additions & 20 deletions apps/docs/src/docs/components/toast.md
View file
Open in desktop
Expand Up @@ -150,15 +150,18 @@ As you may have noticed, `BToast` counts down similarly to `BAlert` it uses the
<HighlightCard>
<BButton
@click="
show?.('Watch me!', {
title: 'Counting down!',
variant: 'info',
pos: 'middle-center',
value: 10000,
interval: 100,
progressProps: {
variant: 'danger',
},
show?.({
props: {
title: 'Counting down!',
variant: 'info',
pos: 'middle-center',
value: 10000,
interval: 100,
progressProps: {
variant: 'danger',
},
body: 'Watch me!'
}
})
"
>
Expand All @@ -170,14 +173,17 @@ As you may have noticed, `BToast` counts down similarly to `BAlert` it uses the
<template>
<BButton
@click="
show?.('Watch me!', {
title: 'Counting down!',
variant: 'info',
pos: 'middle-center',
value: 10000,
interval: 100,
progressProps: {
variant: 'danger',
show?.({
props: {
title: 'Counting down!',
variant: 'info',
pos: 'middle-center',
value: 10000,
interval: 100,
progressProps: {
variant: 'danger',
},
body: 'Watch me!',
},
})
"
Expand All @@ -204,14 +210,18 @@ As you may have noticed in that example, there was a built-in progress bar. This
`Toast` can accept `BLink` props which will modify its behavior

<HighlightCard>
<BButton @click="show?.('I am a BLink', {href: 'https://getbootstrap.com/', target: '_blank'})">
<BButton @click="show?.({ props: {href: 'https://getbootstrap.com/', target: '_blank', body: 'I am a BLink'}})">
Show
</BButton>
<template #html>

```vue
<template>
<BButton @click="show?.('I am a BLink', {href: 'https://getbootstrap.com/', target: '_blank'})">
<BButton
@click="
show?.({props: {href: 'https://getbootstrap.com/', target: '_blank', body: 'I am a BLink'}})
"
>
Show
</BButton>
</template>
Expand Down Expand Up @@ -266,7 +276,11 @@ let showValue: undefined | symbol

const showMe = () => {
if (typeof showValue === 'symbol') return
showValue = show?.('Showing', {value: true, variant: 'success', pos: 'bottom-center'})
showValue = show?.({
props: {
value: true, variant: 'success', pos: 'bottom-center', body: 'Showing'
}
})
}

const hideMe = () => {
Expand Down