@bridge-ui/vue 0.5.1 → 0.7.0

package/docs/components/I18n.md

@@ -1,6 +1,6 @@
 # i18n
 
-Bridge chrome strings (aria-labels, empty/loading copy) resolve through an optional i18n adapter on `BridgeUIProvider` / `createBridgeUI` (`global.i18n`). Without an adapter, the English source string is returned as-is.
+Bridge chrome strings (aria-labels, empty/loading copy) resolve through an optional i18n adapter on `BridgeUIProvider` / `createBridgeUI` (`global.i18n`). Without an adapter, the English source string is returned, with `{{name}}` replaced from `params`, and `|` plural forms when `count` is set.
 
 Lookup is **gettext-style**: the source English text is the key. Multi-locale
 adapters can keep the active locale internally via optional `setLocale`.
@@ -11,10 +11,14 @@ const resolveMessage = useResolveMessage();
 resolveMessage("Hide password");
 ```
 
-`useResolveMessage` reads the active adapter from context. **Interpolation and
-pluralization are the adapter’s job** (vue-i18n, i18next, or a custom `t`).
-Bridge `setLocale` updates `global.locale` and calls optional `adapter.setLocale`
-— persistence (localStorage, backend) stays in the app.
+`useResolveMessage` reads the active adapter from context. **Pluralization
+uses the `count` argument** on `t(message, count, params)`: vue-i18n / i18next
+handle it in `t`; dictionary adapters call `selectPluralMessage` on `|` forms
+(`one | other`). Without an adapter, `resolveMessage` still replaces `{{name}}`
+and picks `|` forms when `count` is set. Adapters that used `t(message, params)`
+should move interpolation vars to the third argument. Bridge `setLocale`
+updates `global.locale` and calls optional `adapter.setLocale` — persistence
+(localStorage, backend) stays in the app.
 
 Implement `I18nAdapter` as a plain object — Bridge only defines the interface.
 
@@ -44,8 +48,9 @@ const resolveMessage = useResolveMessage();
 
 ### Dictionary adapter
 
-Locale-keyed source→string map (no replace/plural). Optional `setLocale`
-updates the active locale used by `t`.
+Locale-keyed source→string map with `{{name}}` replace. Plural values use
+`one | other` (or `zero | one | other`). Optional `setLocale` updates the
+active locale used by `t`.
 
 ```ts
 import { createBridgeUI } from "@bridge-ui/vue";
@@ -61,14 +66,20 @@ const bridge = createBridgeUI({
 ### Custom adapter
 
 ```ts
-import { get } from "es-toolkit/compat";
-import type { I18nAdapter } from "@bridge-ui/vue";
+import { get, isNil } from "es-toolkit/compat";
+import {
+  interpolateMessage,
+  selectPluralMessage,
+  type I18nAdapter,
+} from "@bridge-ui/vue";
 
 const messages: Record<string, Record<string, string>> = {
   "pt-BR": {
     Close: "Fechar",
     "Hide password": "Ocultar senha",
     "Clear selection": "Limpar seleção",
+    "{{selected}} of {{total}} row(s) selected.":
+      "{{selected}} de {{total}} linha selecionada. | {{selected}} de {{total}} linhas selecionadas.",
   },
 };
 
@@ -78,8 +89,13 @@ const i18n: I18nAdapter = {
   setLocale(next) {
     locale = next;
   },
-  t(message) {
-    return get(messages, [locale, message], message);
+  t(message, count, params) {
+    const translated = get(messages, [locale, message], message);
+    const template = isNil(count)
+      ? translated
+      : selectPluralMessage(translated, count);
+
+    return interpolateMessage(template, params);
   },
 };
 ```
@@ -94,7 +110,7 @@ const vueI18n = createI18n({ legacy: false, locale: "en-US", messages: {} });
 const i18n = createVueI18nAdapter(vueI18n.global);
 
 const resolveMessage = useResolveMessage();
-resolveMessage("{count} item", { count: 3 });
+resolveMessage("{count} item", 3);
 // → vue-i18n handles interpolation / plural rules
 
 setLocale("pt-BR"); // Bridge locale + i18n.locale via adapter.setLocale
@@ -104,22 +120,47 @@ Other ready examples:
 
 | File                 | Library              | Replace / plural |
 | -------------------- | -------------------- | ---------------- |
-| `i18n-dictionary.ts` | In-memory dictionary | No (static map)  |
+| `i18n-dictionary.ts` | In-memory dictionary | Yes (`\|` forms) |
 | `i18n-vue-i18n.ts`   | vue-i18n             | Yes (via lib)    |
 
 ## Chrome strings
 
-| Source (key)      |
-| ----------------- |
-| `Close`           |
-| `Loading...`      |
-| `No options`      |
-| `Show password`   |
-| `Hide password`   |
-| `Clear selection` |
-| `Increment value` |
-| `Decrement value` |
+| Source (key)                                 |
+| -------------------------------------------- |
+| `OK`                                         |
+| `Next`                                       |
+| `Close`                                      |
+| `Reset`                                      |
+| `Search`                                     |
+| `Columns`                                    |
+| `Loading`                                    |
+| `No data`                                    |
+| `Previous`                                   |
+| `Last page`                                  |
+| `Expand row`                                 |
+| `First page`                                 |
+| `Loading...`                                 |
+| `No options`                                 |
+| `Pagination`                                 |
+| `Select row`                                 |
+| `Filter column`                              |
+| `Hide password`                              |
+| `Rows per page`                              |
+| `Show password`                              |
+| `Cancel sorting`                             |
+| `Sort ascending`                             |
+| `Clear selection`                            |
+| `Decrement value`                            |
+| `Increment value`                            |
+| `Select all rows`                            |
+| `Sort descending`                            |
+| `Select all items`                           |
+| `Page {{page}} of {{count}}`                 |
+| `{{selected}} of {{total}} row(s) selected.` |
+
+The selection summary calls `t` with `count` (selected rows). Dictionary
+values for that key use `one | other`.
 
 ## Related components
 
-BridgeUIProvider, PasswordField, NumberField, Select, Listbox, Snackbar
+BridgeUIProvider, DataTable, Pagination, PasswordField, NumberField, Select, Listbox, Snackbar

package/docs/components/Pagination.md

@@ -1,6 +1,6 @@
 # Pagination
 
-Page controls for lists and tables: previous/next, page numbers, and a simple cursor-friendly prev/next mode.
+Page controls for lists and tables: previous/next with labels, page numbers, and a simple cursor-friendly prev/next mode. `Previous` and `Next` resolve through the i18n adapter.
 
 ## Import
 
@@ -27,15 +27,17 @@ const page = ref(1);
 
 ### Variants
 
+`ghost` (default), `text`, `outlined`.
+
 ```vue
-<Pagination :count="12" v-model="page" variant="text" />
 <Pagination :count="12" v-model="page" variant="ghost" />
+<Pagination :count="12" v-model="page" variant="text" />
 <Pagination :count="12" v-model="page" variant="outlined" />
 ```
 
 ### Rounded
 
-Applies to `ghost` item corners and the `outlined` group / edge controls.
+Applies to `ghost` and `text` item corners and the `outlined` group / edge controls.
 
 ```vue
 <Pagination :count="12" rounded="lg" v-model="page" variant="ghost" />

package/docs/components/Table.md

@@ -46,7 +46,7 @@ Same three chrome treatments as `DataTable`. Pair with `Pagination` under the ta
 
 ```vue
 <Table variant="plain" />
-<Pagination :count="12" v-model="page" variant="text" />
+<Pagination :count="12" v-model="page" variant="ghost" />
 
 <Table variant="ghost" />
 <Pagination :count="12" v-model="page" variant="ghost" />
@@ -57,7 +57,7 @@ Same three chrome treatments as `DataTable`. Pair with `Pagination` under the ta
 
 | Table `variant` | Pagination `variant` |
 | --------------- | -------------------- |
-| `plain`         | `text`               |
+| `plain`         | `ghost`              |
 | `ghost`         | `ghost`              |
 | `bordered`      | `outlined`           |
 

package/docs/components/Tabs.md

@@ -1,6 +1,6 @@
 # Tabs
 
-Organize related content into tabbed views. Use with `TabList`, `Tab`, and `TabPanel`. Selected accent uses the semantic `color` palette; inactive tabs use `dark-*`.
+Organize related content into tabbed views. Use with `TabList`, `Tab`, and `TabPanel`. The selected tab uses a quiet surface from `variant`; `color` optionally tints selected text and the `line` / `solid` / `enclosed` indicator.
 
 ## Import
 
@@ -90,10 +90,28 @@ import { TabPanel } from "@bridge-ui/vue/Components/TabPanel";
 
 ### Variants
 
-`line` (default), `plain`, `pill`, `solid`, `enclosed`.
+`pill` (default), `line`, `plain`, `solid`, `enclosed`.
 
 ```vue
-<Tabs v-model="tab" variant="line" color="primary">
+<Tabs v-model="tab">
+  <TabList>
+    <Tab value="one">One</Tab>
+    <Tab value="two">Two</Tab>
+  </TabList>
+  <TabPanel value="one">First</TabPanel>
+  <TabPanel value="two">Second</TabPanel>
+</Tabs>
+
+<Tabs v-model="tab" variant="line">
+  <TabList>
+    <Tab value="one">One</Tab>
+    <Tab value="two">Two</Tab>
+  </TabList>
+  <TabPanel value="one">First</TabPanel>
+  <TabPanel value="two">Second</TabPanel>
+</Tabs>
+
+<Tabs v-model="tab" variant="plain">
   <TabList>
     <Tab value="one">One</Tab>
     <Tab value="two">Two</Tab>
@@ -102,7 +120,7 @@ import { TabPanel } from "@bridge-ui/vue/Components/TabPanel";
   <TabPanel value="two">Second</TabPanel>
 </Tabs>
 
-<Tabs color="dark" v-model="tab" variant="pill">
+<Tabs v-model="tab" variant="solid">
   <TabList>
     <Tab value="one">One</Tab>
     <Tab value="two">Two</Tab>
@@ -152,11 +170,11 @@ import { TabPanel } from "@bridge-ui/vue/Components/TabPanel";
 | Prop          | Type              | Default        |
 | ------------- | ----------------- | -------------- |
 | `activation`  | `TabsActivation`  | `"automatic"`  |
-| `color`       | `TabsColor`       | `"primary"`    |
+| `color`       | `TabsColor`       | `"dark"`       |
 | `keepMounted` | `boolean`         | `true`         |
 | `orientation` | `TabsOrientation` | `"horizontal"` |
 | `size`        | `TabsSize`        | `"md"`         |
-| `variant`     | `TabsVariant`     | `"line"`       |
+| `variant`     | `TabsVariant`     | `"pill"`       |
 
 ### v-model
 

package/docs/components/ToggleGroup.md

@@ -1,6 +1,6 @@
 # ToggleGroup
 
-Segmented control for one or more labeled options in a shared track. Single selection by default; set `multiple` for multi-select. Use `Switch` for on/off. Compose with `ToggleItem`.
+Segmented control for one or more labeled options in a shared track. Single selection by default; set `multiple` for multi-select. Use `ButtonGroup` for grouped actions that do not select a value. Use `Switch` for on/off. Compose with `ToggleItem`.
 
 ## Import
 

package/docs/examples/i18n-dictionary.ts

@@ -5,15 +5,19 @@
  *
  * Source English strings are the lookup keys (same strings Bridge passes to
  * `resolveMessage`). Messages are keyed by locale; optional `setLocale` updates
- * the active locale used by `t`. For replace / pluralization, wrap vue-i18n (or
- * similar) instead.
+ * the active locale used by `t`. `t` replaces `{{name}}` from `params` and
+ * picks `|` plural forms when `count` is set (`one | other`).
  */
 
 // ** External Imports
-import { get } from "es-toolkit/compat";
+import { get, isNil } from "es-toolkit/compat";
 
 // ** Core Imports
-import type { I18nAdapter } from "@bridge-ui/core/Adapters";
+import {
+  interpolateMessage,
+  selectPluralMessage,
+  type I18nAdapter,
+} from "@bridge-ui/core/Adapters";
 
 // prettier-ignore
 const MESSAGES: Record<string, Record<string, string>> = {
@@ -21,22 +25,34 @@ const MESSAGES: Record<string, Record<string, string>> = {
   "pt-BR": {
     "OK": "OK",
     "Close": "Fechar",
-    "Reset": "Redefinir",
+    "Next": "Próxima",
     "Columns": "Colunas",
+    "Reset": "Redefinir",
     "Search": "Pesquisar",
     "No data": "Sem dados",
-    "Per page:": "Por página:",
+    "Previous": "Anterior",
+    "Loading": "Carregando",
+    "Pagination": "Paginação",
+    "Last page": "Última página",
     "Loading...": "Carregando...",
     "No options": "Nenhuma opção",
-    "Select row": "Selecionar linha",
+    "Expand row": "Expandir linha",
+    "First page": "Primeira página",
     "Hide password": "Ocultar senha",
+    "Select row": "Selecionar linha",
     "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",
+    "Rows per page": "Linhas por página",
+    "Sort ascending": "Ordenar crescente",
+    "Cancel sorting": "Cancelar ordenação",
+    "Sort descending": "Ordenar decrescente",
     "Select all items": "Selecionar todos os itens",
+    "Select all rows": "Selecionar todas as linhas",
+    "Page {{page}} of {{count}}": "Página {{page}} de {{count}}",
+    "{{selected}} of {{total}} row(s) selected.": "{{selected}} de {{total}} linha selecionada. | {{selected}} de {{total}} linhas selecionadas.",
   },
 };
 
@@ -51,8 +67,13 @@ export function createDictionaryI18nAdapter(): I18nAdapter {
     setLocale(next) {
       locale = next;
     },
-    t(message) {
-      return get(MESSAGES, [locale, message], message);
+    t(message, count, params) {
+      const translated = get(MESSAGES, [locale, message], message);
+      const template = isNil(count)
+        ? translated
+        : selectPluralMessage(translated, count);
+
+      return interpolateMessage(template, params);
     },
   };
 }

package/docs/examples/i18n-vue-i18n.ts

@@ -3,12 +3,13 @@
  * Copy into your app or wire via `BridgeUIProvider` / `createBridgeUI` `global.i18n`.
  * Not published as an npm package.
  *
- * Passes Bridge source strings and `params` straight to `i18n.t`
- * (interpolation, pluralization, etc. stay in vue-i18n).
+ * Passes Bridge source strings, `count`, and `params` to `i18n.t`
+ * (interpolation and `|` pluralization stay in vue-i18n).
  * `setLocale` on the adapter is invoked by Bridge `setLocale`.
  */
 
 // ** External Imports
+import { isNil } from "es-toolkit/compat";
 import type { Composer } from "vue-i18n";
 
 // ** Core Imports
@@ -23,12 +24,12 @@ export function createVueI18nAdapter(i18n: Composer): I18nAdapter {
     setLocale(locale) {
       i18n.locale.value = locale;
     },
-    t(message, params) {
-      if (params) {
-        return i18n.t(message, params);
+    t(message, count, params) {
+      if (isNil(count)) {
+        return params ? i18n.t(message, params) : i18n.t(message);
       }
 
-      return i18n.t(message);
+      return params ? i18n.t(message, count, params) : i18n.t(message, count);
     },
   };
 }

package/docs/examples/icon-fontawesome.ts

@@ -10,6 +10,8 @@
 // ** External Imports
 import type { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import {
+  faAnglesLeft,
+  faAnglesRight,
   faBell,
   faCalendarDays,
   faCheck,
@@ -117,7 +119,9 @@ const icons = {
   alert: faCircleExclamation,
   chevronDown: faChevronDown,
   chevronLeft: faChevronLeft,
+  chevronsLeft: faAnglesLeft,
   chevronRight: faChevronRight,
+  chevronsRight: faAnglesRight,
   warning: faTriangleExclamation,
 } satisfies Record<SemanticIconName, unknown>;
 

package/docs/examples/icon-heroicons.ts

@@ -13,6 +13,8 @@ import {
   CalendarDaysIcon,
   CheckCircleIcon,
   CheckIcon,
+  ChevronDoubleLeftIcon,
+  ChevronDoubleRightIcon,
   ChevronDownIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
@@ -67,8 +69,10 @@ const icons = {
   chevronDown: ChevronDownIcon,
   chevronLeft: ChevronLeftIcon,
   chevronRight: ChevronRightIcon,
-  warning: ExclamationTriangleIcon,
   chevronUpDown: ChevronUpDownIcon,
+  warning: ExclamationTriangleIcon,
+  chevronsLeft: ChevronDoubleLeftIcon,
+  chevronsRight: ChevronDoubleRightIcon,
 } satisfies Record<SemanticIconName, unknown>;
 
 /**

package/docs/examples/icon-lucide.ts

@@ -12,6 +12,8 @@ import {
   ChevronDown,
   ChevronLeft,
   ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
   ChevronsUpDown,
   ChevronUp,
   CircleAlert,
@@ -68,6 +70,8 @@ const icons = {
   chevronDown: ChevronDown,
   chevronLeft: ChevronLeft,
   chevronRight: ChevronRight,
+  chevronsLeft: ChevronsLeft,
+  chevronsRight: ChevronsRight,
   chevronUpDown: ChevronsUpDown,
 } satisfies Record<SemanticIconName, unknown>;
 

package/docs/examples/icon-phosphor.ts

@@ -8,6 +8,8 @@
 import {
   PhBell,
   PhCalendarDots,
+  PhCaretDoubleLeft,
+  PhCaretDoubleRight,
   PhCaretDown,
   PhCaretLeft,
   PhCaretRight,
@@ -69,6 +71,8 @@ const icons = {
   download: PhDownloadSimple,
   chevronRight: PhCaretRight,
   chevronUpDown: PhCaretUpDown,
+  chevronsLeft: PhCaretDoubleLeft,
+  chevronsRight: PhCaretDoubleRight,
 } satisfies Record<SemanticIconName, unknown>;
 
 /**

package/docs/examples/icon-tabler.ts

@@ -14,6 +14,8 @@ import {
   IconChevronDown,
   IconChevronLeft,
   IconChevronRight,
+  IconChevronsLeft,
+  IconChevronsRight,
   IconChevronUp,
   IconCircleCheck,
   IconCircleX,
@@ -69,6 +71,8 @@ const icons = {
   chevronDown: IconChevronDown,
   chevronLeft: IconChevronLeft,
   chevronRight: IconChevronRight,
+  chevronsLeft: IconChevronsLeft,
+  chevronsRight: IconChevronsRight,
 } satisfies Record<SemanticIconName, unknown>;
 
 /**

package/package.json

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