Skip to content

draft of BApp #2732

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’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 26 commits into from
Aug 22, 2025
Merged

draft of BApp #2732

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
5e185de
draft of BApp
xvaara Jun 6, 2025
7e73b4a
small fiexes
xvaara Jun 6, 2025
c64f48b
fix demos
xvaara Jun 18, 2025
5140398
Merge branch 'main' into bapp-composables-makeover
xvaara Jun 18, 2025
00fa1ee
fix
xvaara Jun 18, 2025
1509c36
move stuff to composables
xvaara Jul 1, 2025
b58ac03
fix test
xvaara Jul 1, 2025
7c5acec
fix few typos, etc
xvaara Jul 1, 2025
7a29874
fix typo
xvaara Jul 1, 2025
8238284
fix bot suggestions
xvaara Jul 1, 2025
5b8d1c2
fix some bugs, convert docs to borchestrator
xvaara Jul 2, 2025
e5c172f
cleanup some code, make defaults reactive
xvaara Aug 1, 2025
5204781
some docs
xvaara Aug 1, 2025
4ee1acb
fix conflict
xvaara Aug 4, 2025
625c549
fix some typos
xvaara Aug 4, 2025
b2f1728
improve docs
xvaara Aug 11, 2025
71268e5
fix url
xvaara Aug 19, 2025
3c655f8
Merge remote-tracking branch 'upstream/main' into bapp-composables-ma…
xvaara Aug 19, 2025
d491f39
fix app.data.ts
xvaara Aug 19, 2025
4971519
small fixes
xvaara Aug 19, 2025
55e3aba
some clarifications
xvaara Aug 19, 2025
83534cc
fix example
xvaara Aug 19, 2025
44b405b
more fixes
xvaara Aug 19, 2025
3037973
update the errors, move teleport inside orchestrator
xvaara Aug 19, 2025
fa9202d
small changes again
xvaara Aug 20, 2025
bbd7a90
smol fxes again
xvaara Aug 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
331 changes: 165 additions & 166 deletions apps/docs/.vitepress/theme/Layout.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,175 +1,174 @@
<!-- eslint-disable vue/multi-word-component-names -->
<template>
<BNavbar
v-b-color-mode="'dark'"
variant="primary"
sticky="top"
toggleable="lg"
:container="isLargeScreen ? true : 'fluid'"
>
<BToastOrchestrator />
<BModalOrchestrator />
<BPopoverOrchestrator />
<BNavbarBrand :to="withBase('/')" class="p-0 me-0 me-lg-2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 953 953"
width="32"
height="32"
version="1.1"
shape-rendering="geometricPrecision"
fill-rule="evenodd"
clip-rule="evenodd"
focusable="false"
role="img"
class="d-block"
>
<title>BootstrapVueNext</title>
<path
fill="currentColor"
d="M92 0h769c50 0 92 42 92 92v769c0 50-42 92-92 92H92c-50 0-92-42-92-92V92C0 42 42 0 92 0zm216 710c100 0 160-50 160-133 0-62-44-107-108-113v-3c48-8 86-52 86-102 0-71-55-117-140-117H111v468h197zM195 307h90c50 0 78 23 78 64 0 44-33 68-91 68h-77V307zm0 338V499h90c64 0 98 25 98 73s-33 73-94 73h-94zm503 65l163-468h-90L652 621h-2L531 242h-92l163 468h96z"
/>
</svg>
</BNavbarBrand>
<BNavbarToggle target="nav-collapse" />
<BCollapse id="nav-collapse" is-nav>
<BNavbarNav>
<BNavItem
v-for="link in headerLinks"
:key="link.route"
:to="link.route"
:active="route.path === `${link.route}.html`"
active-class="active fw-bold"
>{{ link.label }}</BNavItem
<BApp>
<BNavbar
v-b-color-mode="'dark'"
variant="primary"
sticky="top"
toggleable="lg"
:container="isLargeScreen ? true : 'fluid'"
>
<BNavbarBrand :to="withBase('/')" class="p-0 me-0 me-lg-2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 953 953"
width="32"
height="32"
version="1.1"
shape-rendering="geometricPrecision"
fill-rule="evenodd"
clip-rule="evenodd"
focusable="false"
role="img"
class="d-block"
>
</BNavbarNav>
<BNavbarNav class="ms-auto">
<div class="d-flex align-items-center gap-2">
<VPNavBarSearch :class="{dark: colorMode === 'dark'}" />
<div class="d-flex gap-2 flex-wrap socials">
<BNav class="d-flex">
<BNavItem
v-for="link in headerExternalLinks"
:key="link.url"
:href="link.url"
:link-attrs="{'aria-label': link.label}"
target="_blank"
rel="noopener"
link-classes="py-1 px-0"
>
<component :is="link.icon()" height="1.1em" aria-hidden />
</BNavItem>
<div class="border border-secondary ms-2 me-3" />
<ClientOnly>
<BNavItemDropdown toggle-class="px-0">
<!-- TODO there is no way to adjust these options, say if you wanted to remove the padding -->
<template #button-content>
<component
:is="currentIcon"
height="1.1em"
:aria-label="`Toggle theme (${colorMode})`"
class="d-inline-block"
/>
</template>
<BDropdownItem
v-for="el in options"
:key="el"
:active="colorMode === el"
@click="set(el)"
>
<component :is="map[el]" /> {{ el }}
</BDropdownItem>
</BNavItemDropdown>
</ClientOnly>
</BNav>
<title>BootstrapVueNext</title>
<path
fill="currentColor"
d="M92 0h769c50 0 92 42 92 92v769c0 50-42 92-92 92H92c-50 0-92-42-92-92V92C0 42 42 0 92 0zm216 710c100 0 160-50 160-133 0-62-44-107-108-113v-3c48-8 86-52 86-102 0-71-55-117-140-117H111v468h197zM195 307h90c50 0 78 23 78 64 0 44-33 68-91 68h-77V307zm0 338V499h90c64 0 98 25 98 73s-33 73-94 73h-94zm503 65l163-468h-90L652 621h-2L531 242h-92l163 468h96z"
/>
</svg>
</BNavbarBrand>
<BNavbarToggle target="nav-collapse" />
<BCollapse id="nav-collapse" is-nav>
<BNavbarNav>
<BNavItem
v-for="link in headerLinks"
:key="link.route"
:to="link.route"
:active="route.path === `${link.route}.html`"
active-class="active fw-bold"
>{{ link.label }}</BNavItem
>
</BNavbarNav>
<BNavbarNav class="ms-auto">
<div class="d-flex align-items-center gap-2">
<VPNavBarSearch :class="{dark: colorMode === 'dark'}" />
<div class="d-flex gap-2 flex-wrap socials">
<BNav class="d-flex">
<BNavItem
v-for="link in headerExternalLinks"
:key="link.url"
:href="link.url"
:link-attrs="{'aria-label': link.label}"
target="_blank"
rel="noopener"
link-classes="py-1 px-0"
>
<component :is="link.icon()" height="1.1em" aria-hidden />
</BNavItem>
<div class="border border-secondary ms-2 me-3" />
<ClientOnly>
<BNavItemDropdown toggle-class="px-0">
<!-- TODO there is no way to adjust these options, say if you wanted to remove the padding -->
<template #button-content>
<component
:is="currentIcon"
height="1.1em"
:aria-label="`Toggle theme (${colorMode})`"
class="d-inline-block"
/>
</template>
<BDropdownItem
v-for="el in options"
:key="el"
:active="colorMode === el"
@click="set(el)"
>
<component :is="map[el]" /> {{ el }}
</BDropdownItem>
</BNavItemDropdown>
</ClientOnly>
</BNav>
</div>
</div>
</BNavbarNav>
</BCollapse>
</BNavbar>
<ClientOnly>
<div v-if="!isLargeScreen && !page.isNotFound" class="d-flex border-bottom">
<div class="px-3">
<BButton
v-b-toggle.sidebar-menu
class="otp-menu-toggle"
variant="link"
size="sm"
underline-opacity="0"
>
<List aria-hidden />
Browse docs
</BButton>
</div>
</BNavbarNav>
</BCollapse>
</BNavbar>
<ClientOnly>
<div v-if="!isLargeScreen && !page.isNotFound" class="d-flex border-bottom">
<div class="px-3">
<BButton
v-b-toggle.sidebar-menu
class="otp-menu-toggle"
variant="link"
size="sm"
underline-opacity="0"
>
<List aria-hidden />
Browse docs
</BButton>
</div>
<div class="px-3 ms-auto">
<BButton
v-b-toggle.otp-menu
class="otp-menu-toggle"
variant="link"
size="sm"
underline-opacity="0"
>
On this page
<ChevronRight aria-hidden />
</BButton>
</div>
</div>
</ClientOnly>
<BContainer fluid class="container-lg mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<ClientOnly>
<BOffcanvas
id="sidebar-menu"
v-model="sidebar"
responsive="lg"
title="Browse docs"
header-class="d-flex offcanvas-hidden-width"
class="h-100 border-0"
>
<TableOfContentsNav />
</BOffcanvas>
</ClientOnly>
</aside>
<main class="bd-main">
<BRow v-if="page.isNotFound">
<BCol>
<BContainer class="text-center my-auto p-5">
<BRow>
<BCol>
<h1>Oh No!</h1>
</BCol>
</BRow>
<BRow>
<BCol>
<h2>File Not Found</h2>
</BCol>
</BRow>
</BContainer>
</BCol>
</BRow>
<BRow v-else>
<div class="bd-content">
<aside ref="_target" class="otp-sidebar">
<ClientOnly>
<BOffcanvas
id="otp-menu"
v-model="onThisPage"
responsive="lg"
placement="end"
title="On this page"
class="h-100 border-0"
header-class="pb-0 d-flex offcanvas-hidden-width"
body-class="py-2"
>
<PageContents :contents="contents" :active-id="activeId" />
</BOffcanvas>
</ClientOnly>
</aside>
<Content ref="_content" style="height: 100%" class="doc-content" />
<div class="px-3 ms-auto">
<BButton
v-b-toggle.otp-menu
class="otp-menu-toggle"
variant="link"
size="sm"
underline-opacity="0"
>
On this page
<ChevronRight aria-hidden />
</BButton>
</div>
</BRow>
</main>
</BContainer>
</div>
</ClientOnly>
<BContainer fluid class="container-lg mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<ClientOnly>
<BOffcanvas
id="sidebar-menu"
v-model="sidebar"
responsive="lg"
title="Browse docs"
header-class="d-flex offcanvas-hidden-width"
class="h-100 border-0"
>
<TableOfContentsNav />
</BOffcanvas>
</ClientOnly>
</aside>
<main class="bd-main">
<BRow v-if="page.isNotFound">
<BCol>
<BContainer class="text-center my-auto p-5">
<BRow>
<BCol>
<h1>Oh No!</h1>
</BCol>
</BRow>
<BRow>
<BCol>
<h2>File Not Found</h2>
</BCol>
</BRow>
</BContainer>
</BCol>
</BRow>
<BRow v-else>
<div class="bd-content">
<aside ref="_target" class="otp-sidebar">
<ClientOnly>
<BOffcanvas
id="otp-menu"
v-model="onThisPage"
responsive="lg"
placement="end"
title="On this page"
class="h-100 border-0"
header-class="pb-0 d-flex offcanvas-hidden-width"
body-class="py-2"
>
<PageContents :contents="contents" :active-id="activeId" />
</BOffcanvas>
</ClientOnly>
</aside>
<Content ref="_content" style="height: 100%" class="doc-content" />
</div>
</BRow>
</main>
</BContainer>
</BApp>
</template>

<script setup lang="ts">
Expand Down
2 changes: 0 additions & 2 deletions apps/docs/.vitepress/theme/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import {appInfoKey} from './keys'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue-next/dist/bootstrap-vue-next.css'
import {createBootstrap} from 'bootstrap-vue-next/plugins/createBootstrap'

export default {
extends: DefaultTheme,
Expand All @@ -31,6 +30,5 @@ export default {
discordUrl: 'https://discord.gg/j2Mtcny',
opencollectiveUrl: 'https://opencollective.com/bootstrap-vue-next',
})
ctx.app.use(createBootstrap())
},
} satisfies Theme
7 changes: 4 additions & 3 deletions apps/docs/src/components/TableOfContentsNav.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,7 @@ const headerLinks = [
]

const componentsList: {name: string}[] = [
{name: 'App'},
{name: 'Accordion'},
{name: 'Alert'},
{name: 'Avatar'},
Expand Down Expand Up @@ -136,6 +137,7 @@ const componentsList: {name: string}[] = [
{name: 'Modal'},
{name: 'Nav'},
{name: 'Navbar'},
{name: 'Orchestrator'},
{name: 'Offcanvas'},
{name: 'Overlay'},
{name: 'Pagination'},
Expand All @@ -153,10 +155,9 @@ const composablesList: {name: string}[] = [
{name: 'useBreadcrumb'},
{name: 'useColorMode'},
{name: 'useModal'},
{name: 'useModalController'},
{name: 'useToastController'},
{name: 'usePopover'},
{name: 'useToast'},
{name: 'useToggle'},
{name: 'usePopoverController'},
]

const directivesList: {name: string}[] = [
Expand Down
5 changes: 3 additions & 2 deletions apps/docs/src/components/UsePluginAlert.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
<template>
<NoteAlert>
You must have initialized the createBootstrap plugin for this to work properly. Read
<BLink :to="withBase('/docs#install')">here</BLink>
If not using <code>&lt;BApp&gt;</code>, you must have initialized the createBootstrap plugin for
this to work properly. Read
<BLink :to="withBase('/docs#plugin-approach-legacy')">here</BLink>
</NoteAlert>
</template>

Expand Down
Loading