@bridge-ui/vue 0.2.0 → 0.3.0

package/dist/Components/Table/tableInjectionKey.d.ts

@@ -0,0 +1,114 @@
+import { ComputedRef, InjectionKey } from 'vue';
+import { TableAlign } from '@bridge-ui/core/Tokens';
+/**
+ * Table section for row hover / stripe and sticky header cells.
+ */
+export type TableSection = "body" | "footer" | "header";
+/**
+ * Merged token classes for table parts.
+ */
+export type TableTokenClasses = {
+    /**
+     * Merged align class maps for cells and header cells.
+     */
+    align: TableAlign;
+    /**
+     * Footer corner radius classes.
+     */
+    roundedFooter?: string;
+    /**
+     * Header corner radius classes.
+     */
+    roundedHeader?: string;
+    /**
+     * Caption size classes.
+     */
+    sizeCaption?: string;
+    /**
+     * Body cell size classes.
+     */
+    sizeCell?: string;
+    /**
+     * Header cell size classes.
+     */
+    sizeHead?: string;
+    /**
+     * Body variant classes.
+     */
+    variantBody?: string;
+    /**
+     * Caption variant classes.
+     */
+    variantCaption?: string;
+    /**
+     * Body cell variant classes.
+     */
+    variantCell?: string;
+    /**
+     * Footer variant classes.
+     */
+    variantFooter?: string;
+    /**
+     * Header cell variant classes.
+     */
+    variantHead?: string;
+    /**
+     * Header variant classes.
+     */
+    variantHeader?: string;
+    /**
+     * Sticky header cell variant classes.
+     */
+    variantHeadSticky?: string;
+    /**
+     * Row variant classes.
+     */
+    variantRow?: string;
+    /**
+     * Hoverable body row variant classes.
+     */
+    variantRowHover?: string;
+    /**
+     * Striped body row variant classes.
+     */
+    variantRowStriped?: string;
+};
+/**
+ * Shared table chrome for `Table*` descendants.
+ */
+export type TableContextValue = {
+    /**
+     * Whether the table is full width.
+     */
+    full: boolean;
+    /**
+     * Whether body rows show hover styles.
+     */
+    hoverable: boolean;
+    /**
+     * Registry / instance classes for parts.
+     */
+    mergedClasses: {
+        body?: string;
+        caption?: string;
+        cell?: string;
+        footer?: string;
+        head?: string;
+        header?: string;
+        row?: string;
+    };
+    /**
+     * Whether header cells stick to the nearest scrollport (usually the page).
+     */
+    stickyHeader: boolean;
+    /**
+     * Whether body rows alternate surfaces.
+     */
+    striped: boolean;
+    /**
+     * Merged token classes for parts.
+     */
+    tokenClasses: TableTokenClasses;
+};
+export declare const TABLE_INJECTION_KEY: InjectionKey<ComputedRef<TableContextValue>>;
+export declare const TABLE_SECTION_INJECTION_KEY: InjectionKey<ComputedRef<TableSection>>;

package/dist/Components/Table/tableInjectionKey.js

@@ -0,0 +1,4 @@
+//#region src/Components/Table/tableInjectionKey.ts
+var e = Symbol("bridge-table"), t = Symbol("bridge-table-section");
+//#endregion
+export { e as TABLE_INJECTION_KEY, t as TABLE_SECTION_INJECTION_KEY };

package/dist/Components/TextField/composables/useTextField.d.ts

@@ -170,7 +170,7 @@ export declare function useTextField(props: TextFieldOwnProps): {
             dir?: string | undefined | undefined;
             draggable?: (boolean | "true" | "false") | undefined;
             enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-            enterKeyHint?: "done" | "search" | "enter" | "go" | "next" | "previous" | "send" | undefined;
+            enterKeyHint?: "search" | "done" | "enter" | "go" | "next" | "previous" | "send" | undefined;
             hidden?: "" | "until-found" | "hidden" | (boolean | "true" | "false") | undefined;
             inert?: (boolean | "true" | "false") | undefined;
             placeholder?: string | undefined | undefined;

package/dist/Components/Textarea/composables/useTextarea.d.ts

@@ -171,7 +171,7 @@ export declare function useTextarea(props: TextareaOwnProps, textareaRef: Ref<nu
             dir?: string | undefined | undefined;
             draggable?: (boolean | "true" | "false") | undefined;
             enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-            enterKeyHint?: "done" | "search" | "enter" | "go" | "next" | "previous" | "send" | undefined;
+            enterKeyHint?: "search" | "done" | "enter" | "go" | "next" | "previous" | "send" | undefined;
             hidden?: "" | "until-found" | "hidden" | (boolean | "true" | "false") | undefined;
             inert?: (boolean | "true" | "false") | undefined;
             placeholder?: string | undefined | undefined;

package/dist/Components/TimeField/composables/useTimeField.d.ts

@@ -181,7 +181,7 @@ export declare function useTimeField(props: TimeFieldOwnProps, model: Ref<null |
             dir?: string | undefined | undefined;
             draggable?: (boolean | "true" | "false") | undefined;
             enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-            enterKeyHint?: "done" | "search" | "enter" | "go" | "next" | "previous" | "send" | undefined;
+            enterKeyHint?: "search" | "done" | "enter" | "go" | "next" | "previous" | "send" | undefined;
             hidden?: "" | "until-found" | "hidden" | (boolean | "true" | "false") | undefined;
             inert?: (boolean | "true" | "false") | undefined;
             placeholder?: string | undefined | undefined;
@@ -730,6 +730,7 @@ export declare function useTimeField(props: TimeFieldOwnProps, model: Ref<null |
             disableAutoFocus?: boolean;
             disableScrollLock?: boolean;
             keepMounted?: boolean;
+            matchWidth?: boolean;
             offset?: number;
             onShowChange?: (show: boolean) => void;
             persistent?: boolean;

package/dist/Components/TimeRangeField/composables/useTimeRangeField.d.ts

@@ -181,7 +181,7 @@ export declare function useTimeRangeField(props: TimeRangeFieldOwnProps, model:
             dir?: string | undefined | undefined;
             draggable?: (boolean | "true" | "false") | undefined;
             enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-            enterKeyHint?: "done" | "search" | "enter" | "go" | "next" | "previous" | "send" | undefined;
+            enterKeyHint?: "search" | "done" | "enter" | "go" | "next" | "previous" | "send" | undefined;
             hidden?: "" | "until-found" | "hidden" | (boolean | "true" | "false") | undefined;
             inert?: (boolean | "true" | "false") | undefined;
             placeholder?: string | undefined | undefined;
@@ -722,6 +722,7 @@ export declare function useTimeRangeField(props: TimeRangeFieldOwnProps, model:
             disableAutoFocus?: boolean;
             disableScrollLock?: boolean;
             keepMounted?: boolean;
+            matchWidth?: boolean;
             offset?: number;
             onShowChange?: (show: boolean) => void;
             persistent?: boolean;

package/docs/README.md

@@ -22,6 +22,7 @@ Component reference and adapter samples for **Vue**. This folder ships with the
 - [Checkbox](./components/Checkbox.md)
 - [ColorField](./components/ColorField.md)
 - [ColorPicker](./components/ColorPicker.md)
+- [DataTable](./components/DataTable.md)
 - [DateField](./components/DateField.md)
 - [DatePicker](./components/DatePicker.md)
 - [DateRangeField](./components/DateRangeField.md)
@@ -54,6 +55,7 @@ Component reference and adapter samples for **Vue**. This folder ships with the
 - [Spinner](./components/Spinner.md)
 - [Stepper](./components/Stepper.md)
 - [Switch](./components/Switch.md)
+- [Table](./components/Table.md)
 - [Tabs](./components/Tabs.md)
 - [Textarea](./components/Textarea.md)
 - [TextField](./components/TextField.md)

package/docs/components/CalendarDate.md

@@ -19,7 +19,7 @@ import { CalendarDate } from "@bridge-ui/vue/Components/CalendarDate";
   range
   v-model="range"
   :view-date="month"
-  @view-date-change="month = $event"
+  v-on:view-date-change="month = $event"
 />
 ```
 

package/docs/components/DataTable.md

@@ -0,0 +1,345 @@
+# DataTable
+
+Opinionated data grid: columns, rows, sorting, selection, empty/loading, and pagination wiring. DataTable composes `Table` (`<table>` / `thead` / `tbody`) for layout, sticky header, and column alignment. `size`, `variant`, `full`, `striped`, `hoverable`, and `rounded` are forwarded to `Table`. Chrome tokens (`size`, `variant`, `rounded`, column `align`) live on `Table`. Apps own the fetch; Bridge owns interaction and chrome.
+
+## Import
+
+```ts
+import { DataTable } from "@bridge-ui/vue/Components/DataTable";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<DataTable
+  :rows="users"
+  v-model:sorting="sorting"
+  :get-row-id="(row) => row.id"
+  :columns="[
+    { id: 'name', header: 'Name', cell: (row) => row.name },
+    { id: 'role', header: 'Role', cell: (row) => row.role, sortable: true },
+  ]"
+/>
+```
+
+### Variants
+
+DataTable chrome (`plain` / `ghost` / `bordered`). Built-in `Pagination` follows the matching variant unless the `pagination` slot overrides it:
+
+```vue
+<DataTable :rows="users" variant="plain" :columns="columns" />
+<DataTable :rows="users" variant="ghost" :columns="columns" />
+<DataTable :rows="users" variant="bordered" :columns="columns" />
+```
+
+| DataTable `variant` | Pagination `variant` |
+| ------------------- | -------------------- |
+| `plain`             | `text`               |
+| `ghost`             | `ghost`              |
+| `bordered`          | `outlined`           |
+
+`striped` is independent of variant:
+
+```vue
+<DataTable striped :rows="users" :columns="columns" />
+```
+
+`:full="false"` sizes columns to content instead of stretching the table:
+
+```vue
+<DataTable :full="false" :rows="users" :columns="columns" />
+```
+
+`sticky-header` pins header cells to the page. `"boxed"` pins them inside the wrapper — set a max height on `classes.wrapper` or `classes.root`:
+
+```vue
+<DataTable sticky-header :rows="users" :columns="columns" />
+<DataTable
+  :rows="users"
+  :columns="columns"
+  sticky-header="boxed"
+  :classes="{ wrapper: 'max-h-96' }"
+/>
+```
+
+### Selection + pagination
+
+Built-in Pagination when `page` is set with `page-count` or `total-count` (server fetch stays in the app). `page` + `per-page` without those totals slices `rows` locally. `per-page` also renders a Select (`per-page-options`, default 10 / 25 / 50 / 100). `#pagination` and `#perPage` replace each control:
+
+```vue
+<DataTable
+  :rows="users"
+  :columns="columns"
+  v-model:page="page"
+  :page-count="pageCount"
+  v-model:selection="selected"
+  :get-row-id="(row) => row.id"
+/>
+```
+
+Client paging slices `rows`. Server paging with a total uses `total-count` instead of `page-count`:
+
+```vue
+<DataTable
+  :rows="users"
+  :columns="columns"
+  v-model:page="page"
+  v-model:per-page="perPage"
+/>
+
+<DataTable
+  :rows="pageRows"
+  :columns="columns"
+  v-model:page="page"
+  :total-count="total"
+  v-model:per-page="perPage"
+/>
+```
+
+Slot replaces the built-in Pagination and/or per-page Select (`#pagination` / `#perPage`; slot props match the built-ins):
+
+```vue
+<DataTable :rows="users" :columns="columns" :get-row-id="(row) => row.id">
+  <template #pagination>
+    <Pagination
+      mode="simple"
+      :has-next="Boolean(nextCursor)"
+      v-on:next="fetchPage(nextCursor)"
+      :has-previous="Boolean(prevCursor)"
+      v-on:previous="fetchPage(prevCursor)"
+    />
+  </template>
+
+  <template #per-page="{ perPage, options, onPerPageChange }">
+    <select
+      :value="perPage"
+      aria-label="Rows per page"
+      v-on:change="onPerPageChange(Number($event.target.value))"
+    >
+      <option v-for="value in options" :key="value" :value="value">
+        {{ value }}
+      </option>
+    </select>
+  </template>
+</DataTable>
+```
+
+Align the built-in Pagination with `pagination-align` (`start` / `center` / `end`, default `end`):
+
+```vue
+<DataTable
+  :rows="users"
+  :columns="columns"
+  v-model:page="page"
+  :page-count="pageCount"
+  pagination-align="start"
+/>
+```
+
+When `page` and `page-count` (or `total-count`) are set, DataTable does not sort or filter `rows` locally — bind `sorting` / `filters` / `page` / `per-page` and fetch the current page in the app:
+
+```vue
+<DataTable
+  :rows="pageRows"
+  :columns="columns"
+  v-model:page="page"
+  :page-count="pageCount"
+  v-model:filters="filters"
+  v-model:sorting="sorting"
+/>
+```
+
+### Empty, loading, and footer
+
+Empty rows show a default empty state; `#empty` replaces it. `loading` keeps the table visible. `loadingVariant="overlay"` (default) dims the table with a spin; `loadingVariant="bar"` dims the table and draws a progress line under the header. `#loading` replaces the indicator. `#footer` renders below the table, above pagination:
+
+```vue
+<DataTable :rows="[]" :columns="columns" :loading="isLoading">
+  <template #empty>No users</template>
+  <template #footer>Here is footer</template>
+</DataTable>
+```
+
+```vue
+<DataTable
+  :rows="users"
+  :columns="columns"
+  :loading="isLoading"
+  loading-variant="bar"
+/>
+```
+
+Install `@tanstack/vue-table` next to `@bridge-ui/vue` when you use `DataTable`. The public API stays `columns` / `rows` / `sorting` / `selection` / `filters` / `columnSearch` / `hiddenColumns` / `search` / `expanded` — the table engine is not exported.
+
+### Columns
+
+Cell content is the column accessor (`row[id]`, or `accessor`) unless you override it. `cell` on the column is for portable renderers (`h(…)` or JSX). `#item.{id}` wins over `cell` and stays in the template:
+
+```vue
+<DataTable :rows="users" :columns="columns">
+  <template #item.role="{ row }">
+    <Badge>{{ row.role }}</Badge>
+  </template>
+</DataTable>
+```
+
+```ts
+const columns = [
+  { id: "name", header: "Name" },
+  { id: "role", header: "Role" },
+];
+```
+
+Table-level slots stay `empty` / `expanded` / `footer` / `item.{id}` / `item` / `loading` / `pagination` / `perPage` / `search` / `toolbar` / `toolbarActions`. `#item` is a catch-all when `#item.{id}` is not set.
+
+### Selection
+
+`selectionMode="multiple"` (default) uses checkboxes and select-all. `selectionMode="single"` uses radios and keeps at most one id. `v-model:selection` is always `string[]`.
+
+```vue
+<DataTable
+  :rows="users"
+  :columns="columns"
+  selection-mode="single"
+  v-model:selection="selected"
+  :get-row-id="(row) => row.id"
+/>
+```
+
+### Filters
+
+Set `filters` on a column to show a funnel in that header. The panel uses checkboxes (`filterMultiple`, default) or radios (`:filter-multiple="false"`), and **Select all items** for multiple filters. Nested `children` render as a group in the same panel. **OK** commits; **Reset** clears the draft (commit on **OK**); closing without **OK** discards it.
+
+Set `searchable` on a column to add a text field in that same menu. Queries are stored in `columnSearch` (column id → string), not used to filter the option list.
+
+```vue
+<DataTable
+  :rows="users"
+  :columns="columns"
+  v-model:filters="filters"
+  v-model:column-search="columnSearch"
+/>
+```
+
+```ts
+const columns = [
+  {
+    id: "name",
+    header: "Name",
+    searchable: true,
+    cell: (row) => row.name,
+  },
+  {
+    id: "role",
+    header: "Role",
+    cell: (row) => row.role,
+    filters: [
+      { label: "Engineer", value: "Engineer" },
+      { label: "Researcher", value: "Researcher" },
+    ],
+  },
+];
+```
+
+Client-side filtering applies when the table is not server-paged (`page` + `pageCount`). With server paging, `filters` and `columnSearch` are still controlled — the app owns the fetch.
+
+### Sticky columns
+
+`sticky="start"` or `sticky="end"` pins a column while the table scrolls horizontally. Selection and expand chrome pin to start when any data column uses `sticky="start"`.
+
+```ts
+const columns = [
+  {
+    id: "name",
+    width: 160,
+    header: "Name",
+    sticky: "start",
+    cell: (row) => row.name,
+  },
+  { id: "role", header: "Role", cell: (row) => row.role },
+  {
+    id: "actions",
+    header: "Actions",
+    sticky: "end",
+    cell: (row) => row.id,
+  },
+];
+```
+
+### Ellipsis
+
+`ellipsis` truncates overflowing cell text. The tooltip uses the column accessor (or `row[id]`).
+
+```ts
+const columns = [
+  {
+    id: "name",
+    header: "Name",
+    ellipsis: true,
+    cell: (row) => row.name,
+  },
+];
+```
+
+### Column visibility
+
+Pass `hiddenColumns` and/or listen to `update:hiddenColumns` to show a **Columns** icon in the toolbar. `hideable: false` keeps a column out of the toggle (or disabled). At least one column stays visible.
+
+```vue
+<DataTable :rows="users" :columns="columns" v-model:hidden-columns="hidden" />
+```
+
+### Search
+
+Pass `search` and/or listen to `update:search` to show a search field in the toolbar. Client-side tables filter visible columns; server-paged tables emit the query only.
+
+```vue
+<DataTable :rows="users" :columns="columns" v-model:search="search" />
+```
+
+### Toolbar
+
+`#toolbar` is the leading region (left). `#toolbar-actions` sits in the end cluster beside Columns and Search. The toolbar shows when either slot is set, or when Columns / Search are enabled.
+
+```vue
+<DataTable :rows="users" :columns="columns" v-model:search="search">
+  <template #toolbar-actions>
+    <Button v-on:click="onPrint">Print</Button>
+  </template>
+</DataTable>
+```
+
+### Expand
+
+Controlled `expanded` row ids. `#expanded="{ row }"` renders in a spanning row under the data row.
+
+```vue
+<DataTable
+  :rows="users"
+  :columns="columns"
+  v-model:expanded="expanded"
+  :get-row-id="(row) => row.id"
+>
+  <template #expanded="{ row }">
+    {{ row.bio }}
+  </template>
+</DataTable>
+```
+
+### Summary
+
+Set `summary` on a column to render a footer row over the current (filtered) rows. Chrome cells stay empty.
+
+```ts
+const columns = [
+  { id: "name", header: "Name", cell: (row) => row.name },
+  {
+    id: "role",
+    header: "Role",
+    cell: (row) => row.role,
+    summary: (items) => `${items.length} roles`,
+  },
+];
+```

package/docs/components/DateField.md

@@ -64,8 +64,8 @@ Replaces Cancel / Apply on the nested picker. `apply()` commits and closes; `can
 ```vue
 <DateField overlay="modal">
   <template #footer="{ apply, cancel }">
-    <button type="button" @click="cancel">Discard</button>
-    <button type="button" @click="apply">Save</button>
+    <button type="button" v-on:click="cancel">Discard</button>
+    <button type="button" v-on:click="apply">Save</button>
   </template>
 </DateField>
 ```

package/docs/components/DatePicker.md

@@ -17,7 +17,7 @@ import { DatePicker } from "@bridge-ui/vue/Components/DatePicker";
 
 <DatePicker v-model="date" />
 
-<DatePicker range show-footer v-model="range" @cancel="() => {}" />
+<DatePicker range show-footer v-model="range" v-on:cancel="() => {}" />
 ```
 
 ### Custom footer
@@ -27,8 +27,8 @@ Call `apply()` to commit and close the overlay, or `cancel()` to discard and clo
 ```vue
 <DatePicker show-footer>
   <template #footer="{ apply, cancel }">
-    <button type="button" @click="cancel">Discard</button>
-    <button type="button" @click="apply">Save</button>
+    <button type="button" v-on:click="cancel">Discard</button>
+    <button type="button" v-on:click="apply">Save</button>
   </template>
 </DatePicker>
 ```

package/docs/components/DateRangePicker.md

@@ -21,7 +21,7 @@ import { DateRangePicker } from "@bridge-ui/vue/Components/DateRangePicker";
 
 <DateRangePicker orientation="vertical" />
 
-<DateRangePicker show-footer v-model="range" @cancel="() => {}" />
+<DateRangePicker show-footer v-model="range" v-on:cancel="() => {}" />
 ```
 
 ## Props

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)"
 />
 ```