@bridge-ui/vue 0.1.1 → 0.3.0

package/docs/components/Modal.md

@@ -115,25 +115,25 @@ const breakpoint = useBreakpoint();
 
 ## Props
 
-| Prop                  | Type               | Default         | Description                                                                                                        |
-| --------------------- | ------------------ | --------------- | ------------------------------------------------------------------------------------------------------------------ |
-| `align`               | `ModalAlign`       | "middle-center" | Panel position on all breakpoints (`{row}-{column}` grid). Use `useBreakpoint` for a different align per viewport. |
-| `autoFocus`           | `boolean`          | `false`         | When true, focuses the first focusable element inside the dialog on open.                                          |
-| `blur`                | `ModalBlur`        | "none"          | Backdrop blur on the overlay.                                                                                      |
-| `classes`             | `ModalClasses`     | —               | The classes to apply to the modal.                                                                                 |
-| `closeOnEscape`       | `boolean`          | `true`          | Whether the modal closes on escape key press.                                                                      |
-| `closeOnOverlay`      | `boolean`          | `true`          | Whether the modal closes on overlay click.                                                                         |
-| `customProps`         | `ModalCustomProps` | —               | Props forwarded to each modal part.                                                                                |
-| `disableEnforceFocus` | `boolean`          | `false`         | When true, focus is not trapped inside the modal while open.                                                       |
-| `disableRestoreFocus` | `boolean`          | `false`         | When true, focus is not restored to the previously focused element on close.                                       |
-| `disableScrollLock`   | `boolean`          | `false`         | When true, body scroll is not locked while the modal is open.                                                      |
-| `hideBackdrop`        | `boolean`          | `false`         | When true, the backdrop overlay is not rendered.                                                                   |
-| `keepMounted`         | `boolean`          | `false`         | When true, the modal stays mounted in the DOM after closing (hidden).                                              |
-| `persistent`          | `boolean`          | `false`         | When true, escape and overlay clicks do not close the modal.                                                       |
-| `scroll`              | `ModalScroll`      | "body"          | Where scroll happens: the page (`body`) or the dialog panel (`paper`).                                             |
-| `size`                | `ModalSize`        | "md"            | Max width of the dialog from the `sm` breakpoint up (`sm:max-w-*`).                                                |
-| `teleportTo`          | `string \| false`  | "body"          | Where to teleport the modal. Pass `false` to render in place.                                                      |
-| `transition`          | `ModalTransition`  | "fade"          | Enter/leave animation for overlay and panel.                                                                       |
+| Prop                  | Type               | Default         | Description                                                                                                                             |
+| --------------------- | ------------------ | --------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| `align`               | `ModalAlign`       | "middle-center" | Panel position on all breakpoints (`{row}-{column}` grid). Use `useBreakpoint` for a different align per viewport.                      |
+| `autoFocus`           | `boolean`          | `false`         | When true, focuses the first focusable element inside the dialog on open.                                                               |
+| `blur`                | `ModalBlur`        | "none"          | Backdrop blur on the overlay.                                                                                                           |
+| `classes`             | `ModalClasses`     | —               | The classes to apply to the modal.                                                                                                      |
+| `closeOnEscape`       | `boolean`          | `true`          | Whether the modal closes on escape key press.                                                                                           |
+| `closeOnOverlay`      | `boolean`          | `true`          | Whether the modal closes on overlay click.                                                                                              |
+| `customProps`         | `ModalCustomProps` | —               | Props forwarded to each modal part.                                                                                                     |
+| `disableEnforceFocus` | `boolean`          | `false`         | When true, focus is not trapped inside the modal while open.                                                                            |
+| `disableRestoreFocus` | `boolean`          | `false`         | When true, focus is not restored to the previously focused element on close.                                                            |
+| `disableScrollLock`   | `boolean`          | `false`         | When true, body scroll is not locked while the modal is open.                                                                           |
+| `hideBackdrop`        | `boolean`          | `false`         | When true, the backdrop overlay is not rendered.                                                                                        |
+| `keepMounted`         | `boolean`          | `false`         | When true, the modal stays mounted in the DOM after closing (hidden).                                                                   |
+| `persistent`          | `boolean`          | `false`         | When true, escape and overlay clicks do not close the modal.                                                                            |
+| `scroll`              | `ModalScroll`      | "body"          | Where scroll happens: the page (`body`) or the dialog panel (`paper`). `paper` uses `bridge-scroll-fade-y` and `bridge-hide-scrollbar`. |
+| `size`                | `ModalSize`        | "md"            | Max width of the dialog from the `sm` breakpoint up (`sm:max-w-*`).                                                                     |
+| `teleportTo`          | `string \| false`  | "body"          | Where to teleport the modal. Pass `false` to render in place.                                                                           |
+| `transition`          | `ModalTransition`  | "fade"          | Enter/leave animation for overlay and panel.                                                                                            |
 
 ### v-model
 

package/docs/components/Pagination.md

@@ -55,9 +55,9 @@ For APIs that do not expose a total page count:
 <Pagination
   mode="simple"
   aria-label="Pagination"
-  @next="fetchPage(nextCursor)"
   :has-next="Boolean(nextCursor)"
-  @previous="fetchPage(prevCursor)"
+  v-on:next="fetchPage(nextCursor)"
   :has-previous="Boolean(prevCursor)"
+  v-on:previous="fetchPage(prevCursor)"
 />
 ```

package/docs/components/Select.md

@@ -2,6 +2,8 @@
 
 Dropdown select with single/multiple value, search, and async data.
 
+The options list uses `bridge-soft-scrollbar`. See [Scroll utilities](../ScrollUtilities.md).
+
 ## Import
 
 ```ts

package/docs/components/Table.md

@@ -0,0 +1,122 @@
+# Table
+
+Presentational table primitives for static or lightly interactive tabular data. Compose with `TableHeader`, `TableBody`, `TableRow`, `TableHead`, and `TableCell`. Sorting, selection, and pagination live on `DataTable`.
+
+## Import
+
+```ts
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@bridge-ui/vue/Components/Table";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<Table>
+  <TableHeader>
+    <TableRow>
+      <TableHead>Name</TableHead>
+      <TableHead>Role</TableHead>
+      <TableHead>Status</TableHead>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow>
+      <TableCell>Ada Lovelace</TableCell>
+      <TableCell>Engineer</TableCell>
+      <TableCell>Active</TableCell>
+    </TableRow>
+  </TableBody>
+</Table>
+```
+
+### Variants
+
+Same three chrome treatments as `DataTable`. Pair with `Pagination` under the table (Table does not render pagination itself):
+
+```vue
+<Table variant="plain" />
+<Pagination :count="12" v-model="page" variant="text" />
+
+<Table variant="ghost" />
+<Pagination :count="12" v-model="page" variant="ghost" />
+
+<Table variant="bordered" />
+<Pagination :count="12" v-model="page" variant="outlined" />
+```
+
+| Table `variant` | Pagination `variant` |
+| --------------- | -------------------- |
+| `plain`         | `text`               |
+| `ghost`         | `ghost`              |
+| `bordered`      | `outlined`           |
+
+`striped` is independent of variant (same as `hoverable`):
+
+```vue
+<Table striped variant="bordered" />
+```
+
+### Rounded
+
+Corner radius on the wrapper, header, and footer. Default `lg`.
+
+```vue
+<Table rounded="none" />
+<Table rounded="xl" variant="ghost" />
+```
+
+### Dense + sticky header
+
+`sticky-header` pins header cells to the nearest scrollport (usually the page). The wrapper skips overflow so the header can stick. For a boxed scroll area, set `overflow-auto` and a max height on `classes.root`.
+
+```vue
+<Table sticky-header size="sm" />
+```
+
+### Numeric cells
+
+```vue
+<Table>
+  <TableHeader>
+    <TableRow>
+      <TableHead>Name</TableHead>
+      <TableHead numeric>Score</TableHead>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow>
+      <TableCell>Ada</TableCell>
+      <TableCell numeric>12</TableCell>
+    </TableRow>
+  </TableBody>
+</Table>
+```
+
+### Caption
+
+```vue
+<Table>
+  <TableCaption>Team roster</TableCaption>
+  <TableHeader>
+    <TableRow>
+      <TableHead>Name</TableHead>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow>
+      <TableCell>Ada Lovelace</TableCell>
+    </TableRow>
+  </TableBody>
+</Table>
+```

package/docs/components/TimePanel.md

@@ -48,6 +48,8 @@ import { TimePanel } from "@bridge-ui/vue/Components/TimePanel";
 
 Time panel tokens live on `components.TimePanel` (`color`, `rounded`).
 
+Columns use `bridge-scroll-fade-y` and `bridge-hide-scrollbar` by default. Add `bridge-scroll-fade-none` via `classes.column` to disable the fade. See [Scroll utilities](../ScrollUtilities.md).
+
 ## Events
 
 | Event         | Payload                 | Description                    |

package/docs/components/TimeRangePicker.md

@@ -37,7 +37,6 @@ import { TimeRangePicker } from "@bridge-ui/vue/Components/TimeRangePicker";
 | `interval`     | `number`                     | `1`            | Minute step between options.                          |
 | `maxTime`      | `Date`                       | —              | Latest selectable time.                               |
 | `minTime`      | `Date`                       | —              | Earliest selectable time.                             |
-| `orientation`  | `"horizontal" \| "vertical"` | `"horizontal"` | Layout of start / end time panels.                    |
 | `readOnly`     | `boolean`                    | `false`        | Prevents selection.                                   |
 | `rounded`      | `CalendarRounded`            | `"md"`         | Border radius of time tiles and chrome.               |
 | `showFooter`   | `boolean`                    | `false`        | Shows Cancel / Apply. Selection is draft until Apply. |

package/docs/examples/i18n-dictionary.ts

@@ -20,6 +20,10 @@ const MESSAGES: Record<string, Record<string, string>> = {
   "en-US": {},
   "pt-BR": {
     "Close": "Fechar",
+    "Columns": "Colunas",
+    "Search": "Pesquisar",
+    "No data": "Sem dados",
+    "Per page:": "Por página:",
     "Loading...": "Carregando...",
     "No options": "Nenhuma opção",
     "Hide password": "Ocultar senha",

package/docs/examples/icon-fontawesome.ts

@@ -22,10 +22,14 @@ import {
   faCircleInfo,
   faCircleXmark,
   faClock,
+  faDownload,
   faEye,
   faEyeSlash,
+  faFilter,
+  faMagnifyingGlass,
   faPalette,
   faSpinner,
+  faTableColumns,
   faTriangleExclamation,
   faUpDown,
   faUser,
@@ -90,15 +94,19 @@ const icons = {
   clear: faXmark,
   check: faCheck,
   clock: faClock,
+  filter: faFilter,
   loader: faSpinner,
   info: faCircleInfo,
   eyeOff: faEyeSlash,
   palette: faPalette,
   error: faCircleXmark,
+  download: faDownload,
   success: faCircleCheck,
   chevronUp: faChevronUp,
+  columns: faTableColumns,
   chevronUpDown: faUpDown,
   calendar: faCalendarDays,
+  search: faMagnifyingGlass,
   alert: faCircleExclamation,
   chevronDown: faChevronDown,
   chevronLeft: faChevronLeft,

package/docs/examples/icon-heroicons.ts

@@ -6,6 +6,7 @@
 
 // ** External Imports
 import {
+  ArrowDownTrayIcon,
   ArrowPathIcon,
   BellIcon,
   CalendarDaysIcon,
@@ -21,9 +22,12 @@ import {
   ExclamationTriangleIcon,
   EyeIcon,
   EyeSlashIcon,
+  FunnelIcon,
   InformationCircleIcon,
+  MagnifyingGlassIcon,
   SwatchIcon,
   UserIcon,
+  ViewColumnsIcon,
   XCircleIcon,
   XMarkIcon,
 } from "@heroicons/vue/24/outline";
@@ -40,12 +44,16 @@ const icons = {
   check: CheckIcon,
   clock: ClockIcon,
   error: XCircleIcon,
+  filter: FunnelIcon,
   palette: SwatchIcon,
   eyeOff: EyeSlashIcon,
   loader: ArrowPathIcon,
   success: CheckCircleIcon,
   chevronUp: ChevronUpIcon,
+  columns: ViewColumnsIcon,
   calendar: CalendarDaysIcon,
+  download: ArrowDownTrayIcon,
+  search: MagnifyingGlassIcon,
   info: InformationCircleIcon,
   alert: ExclamationCircleIcon,
   chevronDown: ChevronDownIcon,

package/docs/examples/icon-lucide.ts

@@ -18,11 +18,15 @@ import {
   CircleCheck,
   CircleX,
   Clock,
+  Columns3,
+  Download,
   Eye,
   EyeOff,
+  Filter,
   Info,
   Loader2,
   Palette,
+  Search,
   TriangleAlert,
   User,
   X,
@@ -42,10 +46,14 @@ const icons = {
   clock: Clock,
   error: CircleX,
   eyeOff: EyeOff,
+  filter: Filter,
+  search: Search,
   loader: Loader2,
   palette: Palette,
+  columns: Columns3,
   alert: CircleAlert,
   calendar: Calendar,
+  download: Download,
   success: CircleCheck,
   chevronUp: ChevronUp,
   warning: TriangleAlert,

package/docs/examples/icon-phosphor.ts

@@ -16,9 +16,13 @@ import {
   PhCheck,
   PhCheckCircle,
   PhClock,
+  PhColumns,
+  PhDownloadSimple,
   PhEye,
   PhEyeSlash,
+  PhFunnel,
   PhInfo,
+  PhMagnifyingGlass,
   PhPalette,
   PhSpinnerGap,
   PhUser,
@@ -41,6 +45,8 @@ const icons = {
   check: PhCheck,
   clock: PhClock,
   error: PhXCircle,
+  filter: PhFunnel,
+  columns: PhColumns,
   eyeOff: PhEyeSlash,
   palette: PhPalette,
   warning: PhWarning,
@@ -51,6 +57,8 @@ const icons = {
   chevronDown: PhCaretDown,
   chevronLeft: PhCaretLeft,
   calendar: PhCalendarDots,
+  search: PhMagnifyingGlass,
+  download: PhDownloadSimple,
   chevronRight: PhCaretRight,
   chevronUpDown: PhCaretUpDown,
 } satisfies Record<SemanticIconName, unknown>;

package/docs/examples/icon-tabler.ts

@@ -18,11 +18,15 @@ import {
   IconCircleCheck,
   IconCircleX,
   IconClock,
+  IconColumns3,
+  IconDownload,
   IconEye,
   IconEyeOff,
+  IconFilter,
   IconInfoCircle,
   IconLoader2,
   IconPalette,
+  IconSearch,
   IconSelector,
   IconUser,
   IconX,
@@ -41,10 +45,14 @@ const icons = {
   clock: IconClock,
   error: IconCircleX,
   eyeOff: IconEyeOff,
+  filter: IconFilter,
+  search: IconSearch,
   loader: IconLoader2,
   info: IconInfoCircle,
   palette: IconPalette,
+  columns: IconColumns3,
   alert: IconAlertCircle,
+  download: IconDownload,
   success: IconCircleCheck,
   chevronUp: IconChevronUp,
   warning: IconAlertTriangle,

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "license": "MIT",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "author": "BridgeUI",
   "sideEffects": false,
   "name": "@bridge-ui/vue",
@@ -80,10 +80,16 @@
     "docs"
   ],
   "peerDependencies": {
+    "@tanstack/vue-table": "^8.21.0",
     "vue": "^3.4.0"
   },
+  "peerDependenciesMeta": {
+    "@tanstack/vue-table": {
+      "optional": true
+    }
+  },
   "dependencies": {
-    "@bridge-ui/core": "^0.1.1",
+    "@bridge-ui/core": "^0.3.0",
     "clsx": "^2.1.1",
     "es-toolkit": "^1.50.0",
     "tailwind-merge": "^3.6.0"
@@ -107,6 +113,7 @@
     "@tabler/icons-vue": "^3.46.0",
     "@tailwindcss/cli": "^4.3.3",
     "@tailwindcss/vite": "^4.3.3",
+    "@tanstack/vue-table": "^8.21.3",
     "@types/luxon": "^3.7.4",
     "@types/node": "^24.13.3",
     "@vue/language-core": "^3.3.9",