Internationalization (MeterMessages)

All default copy rendered by the components (titles, loading and empty states, pagination, filter placeholders, …) lives in a single MeterMessages object. Localize by partially overriding it through the messages prop; explicitly passed props such as loading / empty / title still take precedence.

Default messages

import { defaultMeterMessages } from '@meterry/component'

const defaults = {
  caption: 'Meter',
  usageTitle: 'Usage',
  usageLoading: 'Loading usage…',
  usageEmpty: 'No usage in this period.',
  usageChartLabel: 'Usage by time bucket',
  tableTitle: 'Data',
  tableLoading: 'Loading…',
  tableEmpty: 'No data found.',
  chartTitle: 'Chart',
  chartEmpty: 'No data found.',
  clearFilters: 'Clear',
  allFilterOption: 'All',
  filterPlaceholder: (header) => `Filter ${header}`,
  filterBarLabel: 'Filters',
  paginationSummary: ({ total, page, pageCount }) =>
    `${total} items · Page ${page} of ${pageCount}`,
  rowsPerPageLabel: 'Rows per page',
  rowsPerPageOption: (size) => `${size} / page`,
  previousPage: 'Previous',
  nextPage: 'Next',
}

The function-valued keys:

• filterPlaceholder(header) — placeholder for filter inputs;
• paginationSummary({ total, page, pageCount }) — pagination summary;
• rowsPerPageOption(size) — rows-per-page option label.

Example: overriding with another locale

import type { MeterMessages } from '@meterry/component'

const zhMessages: Partial<MeterMessages> = {
  caption: '计量',
  tableTitle: '用量事件',
  tableEmpty: '暂无数据。',
  previousPage: '上一页',
  nextPage: '下一页',
  paginationSummary: ({ total, page, pageCount }) =>
    `共 ${total} 条 · 第 ${page} / ${pageCount} 页`,
}

<MeterTable messages={zhMessages} columns={columns} load={loadRows} />

Filter bar copy

MeterFilterBar also uses MeterMessages:

<MeterFilterBar
  controller={controller}
  messages={{
    filterBarLabel: '公共筛选', // accessible label on the control group
    clearFilters: '清除',
    allFilterOption: '全部',
    filterPlaceholder: (label) => `筛选 ${label}`,
  }}
/>

Pass the same object with :messages in Vue. The visible per-control label comes from definition.label (falling back to its key), not from filterBarLabel; localize definitions too. When constructing a complete MeterMessages object rather than a Partial<MeterMessages>, include filterBarLabel.

All four components (MeterUsage / MeterChart / MeterTable / MeterFilterBar) share the same MeterMessages — override any subset you need.

Tip

Apps usually keep locale message objects such as zhMessages / enMessages as module-level constants and switch the reference through their own i18n solution. As long as the messages object contents stay unchanged, components will not re-render because of it.

Automatic query components

MeterUsageTable and MeterUsageChart reuse table/chart messages and add:

• cursorPaginationSummary({ page, loadedCount }): unknown-total pagination copy; do not describe loadedCount as the full result count.
• usageTableTruncated: aggregate result-limit warning.
• usageChartTruncated: possible incomplete chart warning (visible even with allowPartial).
• retry / refresh: built-in query actions.

Custom error renderers replace the default retry UI. A table pagination slot replaces its pagination and refresh region; preserve the unknown-total semantics when overriding it.