@bridge-ui/vue 0.3.0 → 0.5.0

package/docs/components/Sidebar.md

@@ -0,0 +1,281 @@
+# Sidebar
+
+Persistent app-shell rail. Mount `SidebarProvider` around `Sidebar` and `SidebarInset` as siblings. Put `SidebarList` / `Accordion` in the default slot. On small viewports the panel opens as a `Drawer`.
+
+## Import
+
+```ts
+import {
+  Sidebar,
+  SidebarInset,
+  SidebarList,
+  SidebarListItem,
+  SidebarProvider,
+  SidebarTrigger,
+  useSidebar,
+} from "@bridge-ui/vue/Components/Sidebar";
+```
+
+## Prerequisites
+
+Mount `SidebarProvider` around the app shell (`Sidebar` and `SidebarInset` as siblings) before using `SidebarTrigger` or `useSidebar`.
+
+`BridgeUIProvider` still holds theme, tokens, and `defaultProps`. It does not own instance `open` state.
+
+## Examples
+
+### Usage
+
+```vue
+<SidebarProvider>
+  <Sidebar>
+    <SidebarList>
+      <SidebarListItem interactive primary="Home" />
+      <SidebarListItem interactive primary="Settings" />
+    </SidebarList>
+  </Sidebar>
+  <SidebarInset>
+    <SidebarTrigger />
+    <slot />
+  </SidebarInset>
+</SidebarProvider>
+```
+
+### Header and footer
+
+Put brand and account rows in `#header` / `#footer`. `SidebarList` collapses those rows to the start avatar. The end chevron hides while collapsed. Header and footer lists use `classes.root` `p-0` because those slots are already padded.
+
+```vue
+<template>
+  <SidebarList :classes="{ root: 'p-0' }">
+    <SidebarListItem interactive primary="Acme Inc" secondary="Enterprise">
+      <template #end>
+        <Icon icon="chevronUpDown" />
+      </template>
+      <template #start>
+        <Avatar size="sm" rounded="lg" fallback="A" color="primary" />
+      </template>
+    </SidebarListItem>
+  </SidebarList>
+</template>
+```
+
+```vue
+<template>
+  <SidebarList :classes="{ root: 'p-0' }">
+    <SidebarListItem
+      interactive
+      primary="Ada Lovelace"
+      secondary="ada@example.com"
+    >
+      <template #end>
+        <Icon icon="chevronUpDown" />
+      </template>
+      <template #start>
+        <Avatar size="sm" rounded="lg" fallback="AL" />
+      </template>
+    </SidebarListItem>
+  </SidebarList>
+</template>
+```
+
+```vue
+<SidebarProvider>
+  <Sidebar collapsible="icon">
+    <template #header>
+      <Brand />
+    </template>
+    <SidebarList>
+      <SidebarListItem interactive primary="Home" />
+    </SidebarList>
+    <template #footer>
+      <Account />
+    </template>
+  </Sidebar>
+  <SidebarInset>
+    <SidebarTrigger />
+    <slot />
+  </SidebarInset>
+</SidebarProvider>
+```
+
+### Icon collapse
+
+Use `SidebarList` / `SidebarListItem` when `collapsible="icon"`. Collapsed items keep `primary` as an `aria-label` and show it in a `Tooltip` on the whole item. Nested `SidebarList` is hidden. The mobile drawer keeps labels.
+
+```vue
+<template>
+  <SidebarList>
+    <ListSection title="Application" />
+    <SidebarListItem interactive primary="Home">
+      <template #start>
+        <Icon icon="user" />
+      </template>
+    </SidebarListItem>
+  </SidebarList>
+</template>
+```
+
+```vue
+<SidebarProvider>
+  <Sidebar collapsible="icon">
+    <template #header>
+      <Brand />
+    </template>
+    <Nav />
+    <template #footer>
+      <Account />
+    </template>
+  </Sidebar>
+  <SidebarInset>
+    <SidebarTrigger />
+    <slot />
+  </SidebarInset>
+</SidebarProvider>
+```
+
+### Controlled
+
+```vue
+<SidebarProvider v-model="open">
+  <Sidebar>
+    <SidebarList>
+      <SidebarListItem interactive primary="Home" />
+    </SidebarList>
+  </Sidebar>
+  <SidebarInset>
+    <SidebarTrigger />
+    <slot />
+  </SidebarInset>
+</SidebarProvider>
+```
+
+### Right side
+
+```vue
+<SidebarProvider>
+  <Sidebar side="right">
+    <SidebarList>
+      <SidebarListItem interactive primary="Inbox" />
+    </SidebarList>
+  </Sidebar>
+  <SidebarInset>
+    <SidebarTrigger />
+    <slot />
+  </SidebarInset>
+</SidebarProvider>
+```
+
+### Inset variant
+
+```vue
+<SidebarProvider>
+  <Sidebar variant="inset">
+    <SidebarList>
+      <SidebarListItem interactive primary="Home" />
+    </SidebarList>
+  </Sidebar>
+  <SidebarInset>
+    <SidebarTrigger />
+    <slot />
+  </SidebarInset>
+</SidebarProvider>
+```
+
+### Collapsible groups
+
+```vue
+<SidebarProvider>
+  <Sidebar>
+    <Accordion variant="plain">
+      <AccordionItem title="Projects" value="projects">
+        <SidebarList :classes="{ root: 'p-0' }">
+          <SidebarListItem interactive primary="Alpha" />
+          <SidebarListItem interactive primary="Beta" />
+        </SidebarList>
+      </AccordionItem>
+    </Accordion>
+  </Sidebar>
+  <SidebarInset>
+    <SidebarTrigger />
+    <slot />
+  </SidebarInset>
+</SidebarProvider>
+```
+
+## Props (`SidebarProvider`)
+
+| Prop               | Type                         | Default | Description                                  |
+| ------------------ | ---------------------------- | ------- | -------------------------------------------- |
+| `classes`          | `SidebarProviderClasses`     | —       | Part classes (`root`).                       |
+| `customProps`      | `SidebarProviderCustomProps` | —       | Extra props for the layout wrapper.          |
+| `defaultOpen`      | `boolean`                    | `true`  | Uncontrolled initial desktop expanded state. |
+| `v-model`          | `boolean`                    | —       | Controlled desktop expanded state.           |
+| `v-on:open-change` | `(open: boolean)`            | —       | Emitted when desktop `open` should change.   |
+
+## Props (`Sidebar`)
+
+| Prop          | Type                              | Default       | Description                                            |
+| ------------- | --------------------------------- | ------------- | ------------------------------------------------------ |
+| `ariaLabel`   | `string`                          | `"Sidebar"`   | Accessible name for the `aside` and the mobile drawer. |
+| `classes`     | `SidebarClasses`                  | —             | Part classes (`root`, `header`, `content`, …).         |
+| `collapsible` | `"icon" \| "none" \| "offcanvas"` | `"offcanvas"` | How the desktop rail hides.                            |
+| `customProps` | `SidebarCustomProps`              | —             | Extra props for internal parts.                        |
+| `side`        | `"left" \| "right"`               | `"left"`      | Edge the rail docks to.                                |
+| `variant`     | `"inset" \| "sidebar"`            | `"sidebar"`   | Flush rail or padded main column.                      |
+
+## Slots (`Sidebar`)
+
+| Slot      | Description                                 |
+| --------- | ------------------------------------------- |
+| `default` | Rail content (`SidebarList` / `Accordion`). |
+| `footer`  | Sticky footer.                              |
+| `header`  | Sticky header.                              |
+
+## Props (`SidebarInset`)
+
+| Prop          | Type                      | Default | Description                     |
+| ------------- | ------------------------- | ------- | ------------------------------- |
+| `classes`     | `SidebarInsetClasses`     | —       | Part classes (`root`).          |
+| `customProps` | `SidebarInsetCustomProps` | —       | Extra props for the inset root. |
+
+## Props (`SidebarTrigger`)
+
+Renders a `Button`. Forwards native button attributes. Default accessible name is `Toggle sidebar`.
+
+## Props (`SidebarList`)
+
+Same as `List`, plus `icon-only`. Sets `icon-only` when the icon rail is collapsed on desktop. Applies stacked nav chrome (gap, compact rows, nested guide). Override with `icon-only`. Nested `SidebarList` is hidden while collapsed. `ListSection` labels are hidden while collapsed.
+
+## Props (`SidebarListItem`)
+
+Same as `ListItem`, plus `tooltip` / `tooltip-placement`. Applies compact nav chrome. Tooltips only show while the icon rail is collapsed (`primary`, or `tooltip` to override).
+
+## `useSidebar`
+
+Must be called under `SidebarProvider`. Returns a computed context object (`sidebar.value.open`, …).
+
+| Field           | Type                              | Description                                    |
+| --------------- | --------------------------------- | ---------------------------------------------- |
+| `collapsible`   | `"icon" \| "none" \| "offcanvas"` | Mode from the nearest `Sidebar`.               |
+| `isMobile`      | `boolean`                         | Viewport is below `md` (desktop rail CSS).     |
+| `open`          | `boolean`                         | Desktop expanded state.                        |
+| `openMobile`    | `boolean`                         | Mobile drawer visibility.                      |
+| `setOpen`       | `(open: boolean) => void`         | Sets desktop `open`.                           |
+| `setOpenMobile` | `(open: boolean) => void`         | Sets mobile drawer visibility.                 |
+| `side`          | `"left" \| "right"`               | Dock edge.                                     |
+| `state`         | `"collapsed" \| "expanded"`       | Desktop visual state.                          |
+| `toggleSidebar` | `() => void`                      | Toggles desktop `open` or mobile `openMobile`. |
+| `variant`       | `"inset" \| "sidebar"`            | Visual variant.                                |
+
+## Accessibility
+
+- Desktop panel is an `aside` with `aria-label`
+- Offcanvas collapsed panel is `inert` (out of the tab order)
+- Mobile uses `Drawer` (dialog, overlay, Escape)
+- Trigger sets `aria-expanded` and `aria-controls`
+- `SidebarListItem` copies string `primary` to `aria-label` when collapsed
+
+## Related components
+
+Accordion, Avatar, Button, Drawer, List, ListItem, ListSection, Tooltip

package/docs/examples/i18n-dictionary.ts

@@ -19,18 +19,24 @@ import type { I18nAdapter } from "@bridge-ui/core/Adapters";
 const MESSAGES: Record<string, Record<string, string>> = {
   "en-US": {},
   "pt-BR": {
+    "OK": "OK",
     "Close": "Fechar",
+    "Reset": "Redefinir",
     "Columns": "Colunas",
     "Search": "Pesquisar",
     "No data": "Sem dados",
     "Per page:": "Por página:",
     "Loading...": "Carregando...",
     "No options": "Nenhuma opção",
+    "Select row": "Selecionar linha",
     "Hide password": "Ocultar senha",
     "Show password": "Mostrar senha",
+    "Filter column": "Filtrar coluna",
     "Clear selection": "Limpar seleção",
     "Decrement value": "Diminuir valor",
     "Increment value": "Aumentar valor",
+    "Select all rows": "Selecionar todas as linhas",
+    "Select all items": "Selecionar todos os itens",
   },
 };
 

package/docs/examples/icon-fontawesome.ts

@@ -27,7 +27,9 @@ import {
   faEyeSlash,
   faFilter,
   faMagnifyingGlass,
+  faMinus,
   faPalette,
+  faPlus,
   faSpinner,
   faTableColumns,
   faTriangleExclamation,
@@ -91,9 +93,11 @@ const icons = {
   eye: faEye,
   bell: faBell,
   user: faUser,
+  plus: faPlus,
   clear: faXmark,
   check: faCheck,
   clock: faClock,
+  minus: faMinus,
   filter: faFilter,
   loader: faSpinner,
   info: faCircleInfo,
@@ -106,6 +110,7 @@ const icons = {
   columns: faTableColumns,
   chevronUpDown: faUpDown,
   calendar: faCalendarDays,
+  panelLeft: faTableColumns,
   search: faMagnifyingGlass,
   alert: faCircleExclamation,
   chevronDown: faChevronDown,

package/docs/examples/icon-heroicons.ts

@@ -8,6 +8,7 @@
 import {
   ArrowDownTrayIcon,
   ArrowPathIcon,
+  Bars3Icon,
   BellIcon,
   CalendarDaysIcon,
   CheckCircleIcon,
@@ -25,6 +26,8 @@ import {
   FunnelIcon,
   InformationCircleIcon,
   MagnifyingGlassIcon,
+  MinusIcon,
+  PlusIcon,
   SwatchIcon,
   UserIcon,
   ViewColumnsIcon,
@@ -40,13 +43,16 @@ const icons = {
   eye: EyeIcon,
   bell: BellIcon,
   user: UserIcon,
+  plus: PlusIcon,
   clear: XMarkIcon,
   check: CheckIcon,
   clock: ClockIcon,
+  minus: MinusIcon,
   error: XCircleIcon,
   filter: FunnelIcon,
   palette: SwatchIcon,
   eyeOff: EyeSlashIcon,
+  panelLeft: Bars3Icon,
   loader: ArrowPathIcon,
   success: CheckCircleIcon,
   chevronUp: ChevronUpIcon,

package/docs/examples/icon-lucide.ts

@@ -25,7 +25,10 @@ import {
   Filter,
   Info,
   Loader2,
+  Minus,
   Palette,
+  PanelLeft,
+  Plus,
   Search,
   TriangleAlert,
   User,
@@ -42,8 +45,10 @@ const icons = {
   bell: Bell,
   info: Info,
   user: User,
+  plus: Plus,
   check: Check,
   clock: Clock,
+  minus: Minus,
   error: CircleX,
   eyeOff: EyeOff,
   filter: Filter,
@@ -56,6 +61,7 @@ const icons = {
   download: Download,
   success: CircleCheck,
   chevronUp: ChevronUp,
+  panelLeft: PanelLeft,
   warning: TriangleAlert,
   chevronDown: ChevronDown,
   chevronLeft: ChevronLeft,

package/docs/examples/icon-phosphor.ts

@@ -23,7 +23,10 @@ import {
   PhFunnel,
   PhInfo,
   PhMagnifyingGlass,
+  PhMinus,
   PhPalette,
+  PhPlus,
+  PhSidebar,
   PhSpinnerGap,
   PhUser,
   PhWarning,
@@ -42,8 +45,10 @@ const icons = {
   bell: PhBell,
   info: PhInfo,
   user: PhUser,
+  plus: PhPlus,
   check: PhCheck,
   clock: PhClock,
+  minus: PhMinus,
   error: PhXCircle,
   filter: PhFunnel,
   columns: PhColumns,
@@ -52,6 +57,7 @@ const icons = {
   warning: PhWarning,
   loader: PhSpinnerGap,
   chevronUp: PhCaretUp,
+  panelLeft: PhSidebar,
   alert: PhWarningCircle,
   success: PhCheckCircle,
   chevronDown: PhCaretDown,

package/docs/examples/icon-tabler.ts

@@ -24,8 +24,11 @@ import {
   IconEyeOff,
   IconFilter,
   IconInfoCircle,
+  IconLayoutSidebar,
   IconLoader2,
+  IconMinus,
   IconPalette,
+  IconPlus,
   IconSearch,
   IconSelector,
   IconUser,
@@ -41,8 +44,10 @@ const icons = {
   clear: IconX,
   bell: IconBell,
   user: IconUser,
+  plus: IconPlus,
   check: IconCheck,
   clock: IconClock,
+  minus: IconMinus,
   error: IconCircleX,
   eyeOff: IconEyeOff,
   filter: IconFilter,
@@ -58,6 +63,7 @@ const icons = {
   warning: IconAlertTriangle,
   chevronUpDown: IconSelector,
   calendar: IconCalendarMonth,
+  panelLeft: IconLayoutSidebar,
   chevronDown: IconChevronDown,
   chevronLeft: IconChevronLeft,
   chevronRight: IconChevronRight,

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "license": "MIT",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "author": "BridgeUI",
   "sideEffects": false,
   "name": "@bridge-ui/vue",
@@ -89,7 +89,7 @@
     }
   },
   "dependencies": {
-    "@bridge-ui/core": "^0.3.0",
+    "@bridge-ui/core": "^0.5.0",
     "clsx": "^2.1.1",
     "es-toolkit": "^1.50.0",
     "tailwind-merge": "^3.6.0"