@bridge-ui/vue 0.2.0 → 0.3.0

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/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.2.0",
+  "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.2.0",
+    "@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",