@bridge-ui/vue 0.3.0 → 0.4.0

package/dist/theme.css

@@ -170,15 +170,51 @@
   }
 }
 
-/**
- * FormField slot adornments (`bridge-start-adornment` / `bridge-end-adornment`).
- * Parent `.group/field` sets `data-bridge-rounded` from FormField `rounded`.
- * Suffix `!` overrides Button/Badge `rounded-*` from the utilities layer.
- */
+/* Adornment radius from `data-bridge-rounded`. Underlined: top corner only. */
 @layer components {
   .bridge-end-adornment,
   .bridge-start-adornment {
-    @apply h-full min-h-0 rounded-none!;
+    @apply min-h-0 rounded-none!;
+  }
+
+  [data-bridge-rounded="none"] .bridge-end-adornment {
+    @apply rounded-s-none! rounded-e-none!;
+  }
+
+  [data-bridge-rounded="xs"] .bridge-end-adornment {
+    @apply rounded-s-none! rounded-e-xs!;
+  }
+
+  [data-bridge-rounded="sm"] .bridge-end-adornment {
+    @apply rounded-s-none! rounded-e-sm!;
+  }
+
+  [data-bridge-rounded="md"] .bridge-end-adornment {
+    @apply rounded-s-none! rounded-e-md!;
+  }
+
+  [data-bridge-rounded="lg"] .bridge-end-adornment {
+    @apply rounded-s-none! rounded-e-lg!;
+  }
+
+  [data-bridge-rounded="xl"] .bridge-end-adornment {
+    @apply rounded-s-none! rounded-e-xl!;
+  }
+
+  [data-bridge-rounded="2xl"] .bridge-end-adornment {
+    @apply rounded-s-none! rounded-e-2xl!;
+  }
+
+  [data-bridge-rounded="3xl"] .bridge-end-adornment {
+    @apply rounded-s-none! rounded-e-3xl!;
+  }
+
+  [data-bridge-rounded="4xl"] .bridge-end-adornment {
+    @apply rounded-s-none! rounded-e-4xl!;
+  }
+
+  [data-bridge-rounded="full"] .bridge-end-adornment {
+    @apply rounded-s-none! rounded-e-full!;
   }
 
   [data-bridge-rounded="none"] .bridge-start-adornment {
@@ -221,44 +257,12 @@
     @apply rounded-s-full! rounded-e-none!;
   }
 
-  [data-bridge-rounded="none"] .bridge-end-adornment {
-    @apply rounded-s-none! rounded-e-none!;
-  }
-
-  [data-bridge-rounded="xs"] .bridge-end-adornment {
-    @apply rounded-s-none! rounded-e-xs!;
-  }
-
-  [data-bridge-rounded="sm"] .bridge-end-adornment {
-    @apply rounded-s-none! rounded-e-sm!;
-  }
-
-  [data-bridge-rounded="md"] .bridge-end-adornment {
-    @apply rounded-s-none! rounded-e-md!;
-  }
-
-  [data-bridge-rounded="lg"] .bridge-end-adornment {
-    @apply rounded-s-none! rounded-e-lg!;
-  }
-
-  [data-bridge-rounded="xl"] .bridge-end-adornment {
-    @apply rounded-s-none! rounded-e-xl!;
-  }
-
-  [data-bridge-rounded="2xl"] .bridge-end-adornment {
-    @apply rounded-s-none! rounded-e-2xl!;
+  [data-bridge-variant="underlined"] .bridge-end-adornment {
+    @apply rounded-ee-none!;
   }
 
-  [data-bridge-rounded="3xl"] .bridge-end-adornment {
-    @apply rounded-s-none! rounded-e-3xl!;
-  }
-
-  [data-bridge-rounded="4xl"] .bridge-end-adornment {
-    @apply rounded-s-none! rounded-e-4xl!;
-  }
-
-  [data-bridge-rounded="full"] .bridge-end-adornment {
-    @apply rounded-s-none! rounded-e-full!;
+  [data-bridge-variant="underlined"] .bridge-start-adornment {
+    @apply rounded-es-none!;
   }
 
   .bridge-field-adornment-button {

package/docs/components/DataTable.md

@@ -46,7 +46,7 @@ DataTable chrome (`plain` / `ghost` / `bordered`). Built-in `Pagination` follows
 <DataTable striped :rows="users" :columns="columns" />
 ```
 
-`:full="false"` sizes columns to content instead of stretching the table:
+`:full="false"` sizes columns to content instead of stretching the table. The bordered wrapper, per-page select, and pagination follow that width. Default `full` stretches the table to the wrapper width:
 
 ```vue
 <DataTable :full="false" :rows="users" :columns="columns" />
@@ -126,18 +126,6 @@ Slot replaces the built-in Pagination and/or per-page Select (`#pagination` / `#
 </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
@@ -212,7 +200,18 @@ Table-level slots stay `empty` / `expanded` / `footer` / `item.{id}` / `item` /
 
 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.
+Set `searchable` on a column to add a text field in that same overlay. Queries are stored in `columnSearch` (column id → string), not used to filter the option list.
+
+Column filters open in a `FieldOverlay`. Default `filter-overlay` is `auto` (`menu` on desktop, `drawer` on mobile). Pass `menu`, `modal`, or `drawer` to pin a shell:
+
+```vue
+<DataTable
+  :rows="users"
+  :columns="columns"
+  filter-overlay="drawer"
+  v-model:filters="filters"
+/>
+```
 
 ```vue
 <DataTable
@@ -253,7 +252,7 @@ Client-side filtering applies when the table is not server-paged (`page` + `page
 const columns = [
   {
     id: "name",
-    width: 160,
+    width: 120,
     header: "Name",
     sticky: "start",
     cell: (row) => row.name,
@@ -283,12 +282,39 @@ const columns = [
 ];
 ```
 
+### Column classes
+
+`classes.header` and `classes.cell` merge onto that column’s `th` / `td`. Use width utilities for breakpoint-based sizing. Do not set `width` on the same column when the class should control width — inline `width` wins.
+
+```ts
+const columns = [
+  {
+    id: "name",
+    header: "Name",
+    cell: (row) => row.name,
+    classes: {
+      cell: "w-24 sm:w-40",
+      header: "w-24 sm:w-40",
+    },
+  },
+];
+```
+
 ### 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.
 
+The panel opens in a `FieldOverlay`. Default `columns-overlay` is `auto` (`menu` on desktop, `drawer` on mobile). Pass `menu`, `modal`, or `drawer` to pin a shell.
+
+When unset, `columns-show-footer` is `true` for `modal` / `drawer` (`false` for `menu`). Reset restores hideable columns; OK commits and closes. Closing without OK discards.
+
 ```vue
-<DataTable :rows="users" :columns="columns" v-model:hidden-columns="hidden" />
+<DataTable
+  :rows="users"
+  :columns="columns"
+  columns-overlay="drawer"
+  v-model:hidden-columns="hidden"
+/>
 ```
 
 ### Search

package/docs/components/NumberField.md

@@ -28,6 +28,16 @@ import { NumberField } from "@bridge-ui/vue/Components/NumberField";
 />
 ```
 
+### Control variants
+
+```vue
+<NumberField label="Stacked" />
+
+<NumberField label="Split" control-variant="split" />
+
+<NumberField label="Inline" control-variant="inline" />
+```
+
 ### Min, max, and step
 
 ```vue
@@ -51,12 +61,13 @@ import { NumberField } from "@bridge-ui/vue/Components/NumberField";
 
 ### NumberField-specific
 
-| Prop      | Type                 | Default | Description                               |
-| --------- | -------------------- | ------- | ----------------------------------------- |
-| `classes` | `NumberFieldClasses` | —       | The classes to apply to the number field. |
-| `max`     | `number`             | —       | The maximum value.                        |
-| `min`     | `number`             | —       | The minimum value.                        |
-| `step`    | `number`             | 1       | The step increment value.                 |
+| Prop             | Type                               | Default     | Description                                                                                            |
+| ---------------- | ---------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------ |
+| `classes`        | `NumberFieldClasses`               | —           | The classes to apply to the number field.                                                              |
+| `controlVariant` | `"inline" \| "split" \| "stacked"` | `"stacked"` | Layout of increment and decrement controls. `split` uses minus/plus icons and occupies the start slot. |
+| `max`            | `number`                           | —           | The maximum value.                                                                                     |
+| `min`            | `number`                           | —           | The minimum value.                                                                                     |
+| `step`           | `number`                           | 1           | The step increment value.                                                                              |
 
 ### v-model
 

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,

package/docs/examples/icon-heroicons.ts

@@ -25,6 +25,8 @@ import {
   FunnelIcon,
   InformationCircleIcon,
   MagnifyingGlassIcon,
+  MinusIcon,
+  PlusIcon,
   SwatchIcon,
   UserIcon,
   ViewColumnsIcon,
@@ -40,9 +42,11 @@ const icons = {
   eye: EyeIcon,
   bell: BellIcon,
   user: UserIcon,
+  plus: PlusIcon,
   clear: XMarkIcon,
   check: CheckIcon,
   clock: ClockIcon,
+  minus: MinusIcon,
   error: XCircleIcon,
   filter: FunnelIcon,
   palette: SwatchIcon,

package/docs/examples/icon-lucide.ts

@@ -25,7 +25,9 @@ import {
   Filter,
   Info,
   Loader2,
+  Minus,
   Palette,
+  Plus,
   Search,
   TriangleAlert,
   User,
@@ -42,8 +44,10 @@ const icons = {
   bell: Bell,
   info: Info,
   user: User,
+  plus: Plus,
   check: Check,
   clock: Clock,
+  minus: Minus,
   error: CircleX,
   eyeOff: EyeOff,
   filter: Filter,

package/docs/examples/icon-phosphor.ts

@@ -23,7 +23,9 @@ import {
   PhFunnel,
   PhInfo,
   PhMagnifyingGlass,
+  PhMinus,
   PhPalette,
+  PhPlus,
   PhSpinnerGap,
   PhUser,
   PhWarning,
@@ -42,8 +44,10 @@ const icons = {
   bell: PhBell,
   info: PhInfo,
   user: PhUser,
+  plus: PhPlus,
   check: PhCheck,
   clock: PhClock,
+  minus: PhMinus,
   error: PhXCircle,
   filter: PhFunnel,
   columns: PhColumns,

package/docs/examples/icon-tabler.ts

@@ -25,7 +25,9 @@ import {
   IconFilter,
   IconInfoCircle,
   IconLoader2,
+  IconMinus,
   IconPalette,
+  IconPlus,
   IconSearch,
   IconSelector,
   IconUser,
@@ -41,8 +43,10 @@ const icons = {
   clear: IconX,
   bell: IconBell,
   user: IconUser,
+  plus: IconPlus,
   check: IconCheck,
   clock: IconClock,
+  minus: IconMinus,
   error: IconCircleX,
   eyeOff: IconEyeOff,
   filter: IconFilter,

package/package.json

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