@operato/data-grist 10.9.0 → 10.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/data-grist",
-  "version": "10.9.0",
+  "version": "10.10.1",
   "description": "User interface for grid (desktop) and list (mobile)",
   "author": "heartyoh",
   "type": "module",
@@ -69,11 +69,12 @@
   "dependencies": {
     "@material/web": "^2.0.0",
     "@operato/headroom": "^10.0.0",
-    "@operato/input": "^10.9.0",
-    "@operato/p13n": "^10.9.0",
-    "@operato/popup": "^10.9.0",
+    "@operato/i18n": "^10.0.0",
+    "@operato/input": "^10.10.1",
+    "@operato/p13n": "^10.10.0",
+    "@operato/popup": "^10.10.0",
     "@operato/pull-to-refresh": "^10.0.0",
-    "@operato/styles": "^10.9.0",
+    "@operato/styles": "^10.10.0",
     "@operato/time-calculator": "^10.0.0",
     "@operato/utils": "^10.7.0",
     "i18next": "^24.2.1",
@@ -114,5 +115,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "5282356a0fbf7601a1bd023cf65ba5dc60986337"
+  "gitHead": "b40e170b9e6a24e28935300dd2c77d8b8e5ce8a2"
 }

package/test/accessible-name.test.ts

@@ -0,0 +1,406 @@
+import { expect, fixture } from '@open-wc/testing'
+import { html } from 'lit'
+
+import '../src/data-grid/data-grid.js'
+import '../src/data-grid/data-grid-body.js'
+import { buildColumn } from '../src/configure/column-builder.js'
+import { columnText } from '../src/utils/column-text.js'
+import { ZERO_CONFIG, ZERO_DATA } from '../src/configure/zero-config.js'
+
+/**
+ * Accessible names on the inputs inside the grid.
+ *
+ * ## Why this is tested
+ *
+ * Several inputs here had no name: the row-select checkboxes, the header filter boxes, and the IME
+ * buffer that holds focus. Position carries the meaning for a sighted reader — a narrow leftmost
+ * column means row select, a box under a header name filters that column — but position is a
+ * picture, not a relationship, so nothing of it reaches a screen reader.
+ *
+ * ## What has to hold
+ *
+ * The name has one source. Editing `header` must change what is announced, which means callers
+ * cannot spell the name out again. `columnText()` is that source.
+ *
+ * `buildColumn` turns a string header into `() => header`, and that function returns a lit template
+ * the name cannot be read back out of. The name was disappearing right there.
+ */
+
+describe('column name has one source', () => {
+  it('keeps the plain text after a string header becomes a function', () => {
+    const column = buildColumn({ type: 'string', name: 'palletId', header: '파렛트 번호' })
+
+    expect(columnText(column)).to.equal('파렛트 번호')
+  })
+
+  it('keeps it when the string arrives as header.renderer', () => {
+    const column = buildColumn({ type: 'string', name: 'palletId', header: { renderer: '파렛트 번호' } })
+
+    expect(columnText(column)).to.equal('파렛트 번호')
+  })
+
+  it('lets label: true inherit the header name', () => {
+    const column = buildColumn({ type: 'string', name: 'palletId', header: '파렛트 번호', label: true })
+
+    expect(columnText(column)).to.equal('파렛트 번호')
+  })
+
+  it('falls back to column.name when the header is drawn by a function', () => {
+    const column = buildColumn({ type: 'string', name: 'palletId', header: { renderer: () => html`<i>x</i>` } })
+
+    expect(columnText(column)).to.equal('palletId')
+  })
+
+  it('invents no name when there is no column', () => {
+    expect(columnText(undefined)).to.equal('')
+    expect(columnText(null)).to.equal('')
+  })
+})
+
+describe('row-select boxes are named', () => {
+  const columns = [
+    { type: 'gutter', gutterName: 'row-selector', name: '__selected__', multiple: true },
+    { type: 'string', name: 'palletId', header: '파렛트 번호' }
+  ].map(buildColumn)
+
+  it('says which row each checkbox selects', async () => {
+    const body: any = await fixture(html`
+      <ox-grid-body
+        .config=${{ ...ZERO_CONFIG, columns }}
+        .columns=${columns}
+        .data=${{ ...ZERO_DATA, records: [{ palletId: 'P-0001' }, { palletId: 'P-0002' }] }}
+      ></ox-grid-body>
+    `)
+
+    await body.updateComplete
+
+    /* The checkboxes live one shadow root deeper, inside each ox-grid-field. */
+    const fields = Array.from(body.renderRoot.querySelectorAll('ox-grid-field')) as any[]
+
+    await Promise.all(fields.map(field => field.updateComplete))
+
+    const boxes = fields.flatMap(field =>
+      Array.from(field.renderRoot?.querySelectorAll('input[type=checkbox], input[type=radio]') || [])
+    ) as HTMLInputElement[]
+
+    expect(boxes.length, 'found no row-select box').to.be.greaterThan(0)
+    boxes.forEach(box =>
+      expect(box.getAttribute('aria-label'), 'an unnamed checkbox is left').to.be.a('string').and.not.equal('')
+    )
+  })
+})
+
+describe('IME buffer names the cell it stands in for', () => {
+  const columns = [
+    { type: 'string', name: 'palletId', header: '파렛트 번호' },
+    { type: 'string', name: 'location', header: '보관 위치' }
+  ].map(buildColumn)
+
+  async function bodyFocusedAt(column: number) {
+    const body: any = await fixture(html`
+      <ox-grid-body
+        .config=${{ ...ZERO_CONFIG, columns }}
+        .columns=${columns}
+        .data=${{ ...ZERO_DATA, records: [{ palletId: 'P-0001', location: 'A-01' }] }}
+        .focused=${{ row: 0, column }}
+      ></ox-grid-body>
+    `)
+
+    await body.updateComplete
+
+    return body.renderRoot.querySelector('#ime-buffer') as HTMLInputElement
+  }
+
+  it('reads the first column while focus sits there', async () => {
+    expect((await bodyFocusedAt(0)).getAttribute('aria-label')).to.contain('파렛트 번호')
+  })
+
+  it('changes what it reads when focus moves a column over', async () => {
+    expect((await bodyFocusedAt(1)).getAttribute('aria-label')).to.contain('보관 위치')
+  })
+
+  it('stays visible to assistive tech — it is where focus lands', async () => {
+    expect((await bodyFocusedAt(0)).getAttribute('aria-hidden')).to.be.null
+  })
+})
+
+/**
+ * Table semantics.
+ *
+ * ## Why this is tested
+ *
+ * The grid is drawn with CSS grid: cells sit flat and there is no row element. Rows are a picture
+ * made of equal offsetTop, so a screen reader saw a pile of inputs rather than a table — no "this
+ * is a table", no "row 3 column 3", no "40 rows in all".
+ *
+ * Adding row wrappers can break two things at once:
+ *
+ * ```
+ * semantics   grid / row / columnheader / gridcell have to nest correctly
+ * layout      display: contents must generate no box; if it does, the columns collapse
+ * ```
+ *
+ * The second one is why geometry is asserted: cells in a row must step right, and rows must step
+ * down.
+ */
+describe('grid declares itself a grid', () => {
+  /* ox-grid takes already-compiled columns; compiling them is ox-grist's job. */
+  const columns = [
+    { type: 'gutter', gutterName: 'row-selector', name: '__selected__', multiple: true },
+    { type: 'string', name: 'palletId', header: '파렛트 번호', sortable: true },
+    { type: 'string', name: 'location', header: '보관 위치', sortable: true }
+  ].map(buildColumn)
+
+  async function grid(overrides: any = {}) {
+    const el: any = await fixture(html`
+      <ox-grid
+        aria-label="입고 대기 목록"
+        .config=${{ ...ZERO_CONFIG, columns, rows: { ...ZERO_CONFIG.rows } }}
+        .data=${{
+          page: 1,
+          limit: 20,
+          total: 40,
+          records: [
+            { palletId: 'P-0001', location: 'A-01' },
+            { palletId: 'P-0002', location: 'A-02' }
+          ],
+          ...overrides
+        }}
+      ></ox-grid>
+    `)
+
+    await el.updateComplete
+
+    const header = el.renderRoot.querySelector('ox-grid-header')
+    const body = el.renderRoot.querySelector('ox-grid-body')
+
+    await header?.updateComplete
+    await body?.updateComplete
+
+    return { el, header, body }
+  }
+
+  it('nests grid, row and cell', async () => {
+    const { el, header, body } = await grid()
+
+    const grid_ = el.renderRoot.querySelector('[role=grid]')
+
+    expect(grid_, 'no role=grid').to.exist
+    expect(header.getAttribute('role')).to.equal('rowgroup')
+    expect(body.getAttribute('role')).to.equal('rowgroup')
+
+    expect(header.renderRoot.querySelectorAll('[role=row]').length).to.equal(1)
+    expect(body.renderRoot.querySelectorAll('[role=row]').length).to.equal(2)
+    expect(header.renderRoot.querySelectorAll('[role=columnheader]').length).to.equal(3)
+  })
+
+  it('counts the whole table, not the page on screen', async () => {
+    const { el } = await grid()
+
+    const grid_ = el.renderRoot.querySelector('[role=grid]')
+
+    /* One header row plus 40 records. Two rows drawn is still a 40-row table. */
+    expect(grid_.getAttribute('aria-rowcount')).to.equal('41')
+    expect(grid_.getAttribute('aria-colcount')).to.equal('3')
+    expect(grid_.getAttribute('aria-label')).to.equal('입고 대기 목록')
+  })
+
+  it('numbers page 2 from row 22, not back at 1', async () => {
+    const { body } = await grid({ page: 2 })
+
+    const rows = Array.from(body.renderRoot.querySelectorAll('[role=row]')) as HTMLElement[]
+
+    /* One header row plus 20 records on page 1. */
+    expect(rows[0].getAttribute('aria-rowindex')).to.equal('22')
+    expect(rows[1].getAttribute('aria-rowindex')).to.equal('23')
+  })
+
+  it('numbers columns and leaves the width filler uncounted', async () => {
+    const { body } = await grid()
+
+    const row = body.renderRoot.querySelector('[role=row]') as HTMLElement
+    const cells = Array.from(row.querySelectorAll('[role=gridcell]')) as HTMLElement[]
+
+    expect(cells.map(cell => cell.getAttribute('aria-colindex'))).to.deep.equal(['1', '2', '3'])
+    expect(row.querySelectorAll('[role=presentation]').length, 'the filler was counted as a cell').to.equal(1)
+  })
+
+  it('states sort direction in text, not only as an arrow', async () => {
+    const el: any = await fixture(html`
+      <ox-grid
+        .config=${{ ...ZERO_CONFIG, columns, rows: { ...ZERO_CONFIG.rows } }}
+        .sorters=${[{ name: 'palletId', desc: true }]}
+        .data=${{ records: [{ palletId: 'P-0001', location: 'A-01' }] }}
+      ></ox-grid>
+    `)
+
+    await el.updateComplete
+
+    const header = el.renderRoot.querySelector('ox-grid-header')
+    await header.updateComplete
+
+    const headers = Array.from(header.renderRoot.querySelectorAll('[role=columnheader]')) as HTMLElement[]
+    const sorts = headers.map(cell => cell.getAttribute('aria-sort'))
+
+    /* A gutter cannot be sorted; claiming otherwise announces a control that is not there. */
+    expect(sorts[0]).to.be.null
+    expect(sorts[1], 'sorted descending').to.equal('descending')
+    expect(sorts[2], 'sortable but not currently sorted').to.equal('none')
+  })
+
+  it('keeps the layout — a row wrapper that generates a box collapses the grid', async () => {
+    const { body } = await grid()
+
+    const rows = Array.from(body.renderRoot.querySelectorAll('[role=row]')) as HTMLElement[]
+    const first = Array.from(rows[0].children) as HTMLElement[]
+
+    expect(getComputedStyle(rows[0]).display).to.equal('contents')
+
+    /* Cells step right; stacked at one x means the columns are gone. */
+    const lefts = first.map(cell => cell.offsetLeft)
+    expect(new Set(lefts).size, 'cells stacked at the same x').to.be.greaterThan(1)
+    lefts.slice(1).forEach((left, index) => expect(left).to.be.greaterThan(lefts[index]))
+
+    /* Rows step down. */
+    const firstTop = (rows[0].children[0] as HTMLElement).offsetTop
+    const secondTop = (rows[1].children[0] as HTMLElement).offsetTop
+    expect(secondTop, 'two rows at the same y').to.be.greaterThan(firstTop)
+  })
+})
+
+/**
+ * Grouped headers.
+ *
+ * The header becomes two rows and ungrouped columns span both (`.span-both`). Placement runs
+ * through CSS `grid-row` / `grid-column`, which makes this the riskiest spot for a row wrapper.
+ */
+describe('grouped header spans two rows', () => {
+  const columns = [
+    { type: 'string', name: 'palletId', header: '파렛트 번호' },
+    { type: 'string', name: 'width', header: { renderer: '폭', group: '치수' } },
+    { type: 'string', name: 'height', header: { renderer: '높이', group: '치수' } }
+  ].map(buildColumn)
+
+  async function grouped() {
+    const el: any = await fixture(html`
+      <ox-grid
+        .config=${{ ...ZERO_CONFIG, columns, rows: { ...ZERO_CONFIG.rows } }}
+        .data=${{ total: 1, records: [{ palletId: 'P-0001', width: '1200', height: '900' }] }}
+      ></ox-grid>
+    `)
+
+    await el.updateComplete
+
+    const header = el.renderRoot.querySelector('ox-grid-header')
+    const body = el.renderRoot.querySelector('ox-grid-body')
+
+    await header.updateComplete
+    await body.updateComplete
+
+    return { el, header, body }
+  }
+
+  it('counts two header rows so the body starts at row 3', async () => {
+    const { el, header, body } = await grouped()
+
+    expect(header.renderRoot.querySelectorAll('[role=row]').length).to.equal(2)
+
+    /* Two header rows plus one record. */
+    expect(el.renderRoot.querySelector('[role=grid]').getAttribute('aria-rowcount')).to.equal('3')
+
+    const rows = Array.from(body.renderRoot.querySelectorAll('[role=row]')) as HTMLElement[]
+    expect(rows[0].getAttribute('aria-rowindex')).to.equal('3')
+  })
+
+  it('says how many columns a group covers', async () => {
+    const { header } = await grouped()
+
+    const cells = Array.from(header.renderRoot.querySelectorAll('[role=columnheader]')) as HTMLElement[]
+    const first = cells[0]
+    const group = cells.find(cell => cell.getAttribute('aria-colspan'))
+
+    /* An ungrouped column spans both header rows. */
+    expect(first.getAttribute('aria-rowspan')).to.equal('2')
+    expect(first.getAttribute('aria-colindex')).to.equal('1')
+
+    /* The group header covers columns 2 and 3. */
+    expect(group, 'found no group header').to.exist
+    expect(group!.getAttribute('aria-colindex')).to.equal('2')
+    expect(group!.getAttribute('aria-colspan')).to.equal('2')
+  })
+
+  it('keeps two-row header placement — group sits above its leaf columns', async () => {
+    const { header } = await grouped()
+
+    const cells = Array.from(header.renderRoot.querySelectorAll('[role=columnheader]')) as HTMLElement[]
+    const group = cells.find(cell => cell.getAttribute('aria-colspan'))!
+    const leaf = cells.find(cell => !cell.getAttribute('aria-colspan') && cell !== cells[0])!
+
+    expect(leaf.offsetTop, 'group header and its leaf column at the same height').to.be.greaterThan(group.offsetTop)
+    expect(group.offsetWidth, 'group header does not cover two columns').to.be.greaterThan(leaf.offsetWidth)
+  })
+})
+
+/**
+ * The grid wrapper must not disturb the surrounding layout.
+ *
+ * `role=grid` admits only rows, so the settings-button slot and the pager moved outside the
+ * wrapper. Two things then depend on this structure:
+ *
+ * ```
+ * column layout      the host is a flex column. A wrapper that generates a box swallows header
+ *                    and body into one flex item, and the body's flex: 1 stops working
+ * sibling selector   "show the settings button on header hover" is an adjacent-sibling rule, so
+ *                    the button has to sit directly after the wrapper
+ * ```
+ */
+describe('grid wrapper stays out of the layout', () => {
+  const columns = [
+    { type: 'string', name: 'palletId', header: '파렛트 번호' },
+    { type: 'string', name: 'location', header: '보관 위치' }
+  ].map(buildColumn)
+
+  it('places the settings button after the grid, not inside it', async () => {
+    const el: any = await fixture(html`
+      <ox-grid
+        .config=${{ ...ZERO_CONFIG, columns, rows: { ...ZERO_CONFIG.rows } }}
+        .data=${{ total: 1, records: [{ palletId: 'P-0001', location: 'A-01' }] }}
+      ></ox-grid>
+    `)
+
+    await el.updateComplete
+
+    const grid = el.renderRoot.querySelector('[role=grid]') as HTMLElement
+    const setting = el.renderRoot.querySelector('div[setting]') as HTMLElement
+
+    expect(setting, 'no settings slot').to.exist
+    expect(grid.contains(setting), 'settings button inside the grid breaks table reading').to.be.false
+    expect(grid.nextElementSibling, 'adjacent-sibling rule no longer holds').to.equal(setting)
+  })
+
+  it('leaves header and body as flex items of the host', async () => {
+    const el: any = await fixture(html`
+      <div style="height: 300px; display: flex">
+        <ox-grid
+          style="flex: 1"
+          .config=${{ ...ZERO_CONFIG, columns, rows: { ...ZERO_CONFIG.rows } }}
+          .data=${{ total: 1, records: [{ palletId: 'P-0001', location: 'A-01' }] }}
+        ></ox-grid>
+      </div>
+    `)
+
+    const grid = el.querySelector('ox-grid') as any
+    await grid.updateComplete
+
+    const wrapper = grid.renderRoot.querySelector('[role=grid]') as HTMLElement
+    const header = grid.renderRoot.querySelector('ox-grid-header') as HTMLElement
+    const body = grid.renderRoot.querySelector('ox-grid-body') as HTMLElement
+
+    expect(getComputedStyle(wrapper).display).to.equal('contents')
+
+    /* The body takes the remaining height; a wrapper with a box shrinks it to header height. */
+    expect(body.offsetHeight, 'body does not take the remaining height').to.be.greaterThan(100)
+    expect(body.offsetTop, 'body is not below the header').to.be.greaterThan(0)
+    expect(header.offsetTop).to.equal(0)
+  })
+})

package/test/row-hover-visible.test.ts

@@ -12,7 +12,7 @@ import { DataGrid } from '../src/data-grid/data-grid.js'
  * 줄과 띠가 나란히 안 보여도 그 시험은 전부 초록이다. 실제로 그랬다.
  *
  * ```
- * [재봤음] 2026-09-04 · operato-plant 인원 화면(어두운 모드)
+ * [확인함] 2026-09-04 · operato-plant 인원 화면(어두운 모드)
  *   줄 rgb(30 34 40) · 띠 rgb(26 30 35) → 대비 1.048   보이지 않는다
  *   그때 고정 열 시험 열여섯 건은 전부 초록이었다
  * ```
@@ -123,7 +123,7 @@ const 팔레트들 = {
  * 얼마나 벌어져야 보이나.
  *
  * 지나는 줄 표시는 **훨씬 옅어야 한다** — 고른 줄과 같은 무게로 그리면 무엇이 골라졌는지 흐려진다.
- * 그래서 큰 값을 요구하지 않는다. 다만 1.05 는 눈에 안 들어온다(위 [재봤음]). 눈으로 확인한 값이
+ * 그래서 큰 값을 요구하지 않는다. 다만 1.05 는 눈에 안 들어온다(위 [확인함]). 눈으로 확인한 값이
  * 1.11 · 1.14 이므로 그 아래에 문턱을 둔다.
  */
 const 최소분리 = 1.08

package/translations/en.json

@@ -6,10 +6,18 @@
   "label.accumulator_max": "min",
   "label.accumulator_min": "max",
   "label.accumulator_sum": "sum",
+  "label.filter": "filter",
+  "text.grid-cell-input": "{name} input",
+  "text.grid-cell-input-plain": "cell input",
   "text.grid-clear-search": "clear the search or filters to see everything",
+  "text.grid-filter-from": "{name} filter, from",
+  "text.grid-filter-of": "{name} filter",
+  "text.grid-filter-to": "{name} filter, to",
   "text.grid-no-records": "nothing to show",
   "text.grid-nothing-found": "nothing found",
   "text.grid-open-editor": "press to edit",
+  "text.grid-select-all-records": "select all rows",
+  "text.grid-select-record": "select row {row}",
   "text.grid-total-records": "{total} in total",
   "text.input-secret-hide": "hide",
   "text.input-secret-placeholder": "enter secret information",

package/translations/ja.json

@@ -6,10 +6,18 @@
   "label.accumulator_max": "最小",
   "label.accumulator_min": "最大",
   "label.accumulator_sum": "合計",
+  "label.filter": "フィルター",
+  "text.grid-cell-input": "{name} 入力",
+  "text.grid-cell-input-plain": "セル入力",
   "text.grid-clear-search": "検索語やフィルターを消すと全体が表示されます",
+  "text.grid-filter-from": "{name} フィルター 開始値",
+  "text.grid-filter-of": "{name} フィルター",
+  "text.grid-filter-to": "{name} フィルター 終了値",
   "text.grid-no-records": "まだ何もありません",
   "text.grid-nothing-found": "見つかりませんでした",
   "text.grid-open-editor": "押して編集します",
+  "text.grid-select-all-records": "すべての行を選択",
+  "text.grid-select-record": "{row} 行目を選択",
   "text.grid-total-records": "全 {total} 件",
   "text.input-secret-hide": "非表示",
   "text.input-secret-placeholder": "機密情報を入力",

package/translations/ko.json

@@ -7,10 +7,17 @@
   "label.accumulator_min": "최대",
   "label.accumulator_sum": "합계",
   "label.filter": "필터",
+  "text.grid-cell-input": "{name} 입력",
+  "text.grid-cell-input-plain": "칸 입력",
   "text.grid-clear-search": "검색어나 필터를 지우면 전체가 보입니다",
+  "text.grid-filter-from": "{name} 필터 시작값",
+  "text.grid-filter-of": "{name} 필터",
+  "text.grid-filter-to": "{name} 필터 끝값",
   "text.grid-no-records": "아직 아무것도 없습니다",
   "text.grid-nothing-found": "찾는 것이 없습니다",
   "text.grid-open-editor": "눌러서 고칩니다",
+  "text.grid-select-all-records": "모든 행 선택",
+  "text.grid-select-record": "{row}번째 행 선택",
   "text.grid-total-records": "모두 {total}건",
   "text.input-secret-hide": "숨기기",
   "text.input-secret-placeholder": "보안 정보 입력",

package/translations/ms.json

@@ -6,10 +6,18 @@
   "label.accumulator_max": "Minimum",
   "label.accumulator_min": "Maksimum",
   "label.accumulator_sum": "Jumlah",
+  "label.filter": "penapis",
+  "text.grid-cell-input": "input {name}",
+  "text.grid-cell-input-plain": "input sel",
   "text.grid-clear-search": "kosongkan carian atau penapis untuk melihat semua",
+  "text.grid-filter-from": "penapis {name}, dari",
+  "text.grid-filter-of": "penapis {name}",
+  "text.grid-filter-to": "penapis {name}, hingga",
   "text.grid-no-records": "tiada apa-apa untuk dipaparkan",
   "text.grid-nothing-found": "tiada apa-apa dijumpai",
   "text.grid-open-editor": "tekan untuk mengedit",
+  "text.grid-select-all-records": "pilih semua baris",
+  "text.grid-select-record": "pilih baris {row}",
   "text.grid-total-records": "{total} kesemuanya",
   "text.input-secret-hide": "Sembunyi",
   "text.input-secret-placeholder": "Masukkan maklumat rahsia",

package/translations/zh.json

@@ -6,10 +6,18 @@
   "label.accumulator_max": "最小",
   "label.accumulator_min": "最大",
   "label.accumulator_sum": "总和",
+  "label.filter": "筛选",
+  "text.grid-cell-input": "{name} 输入",
+  "text.grid-cell-input-plain": "单元格输入",
   "text.grid-clear-search": "清除搜索或筛选即可查看全部",
+  "text.grid-filter-from": "{name} 筛选起始值",
+  "text.grid-filter-of": "{name} 筛选",
+  "text.grid-filter-to": "{name} 筛选结束值",
   "text.grid-no-records": "还没有任何记录",
   "text.grid-nothing-found": "没有找到",
   "text.grid-open-editor": "点击进行编辑",
+  "text.grid-select-all-records": "选择所有行",
+  "text.grid-select-record": "选择第 {row} 行",
   "text.grid-total-records": "共 {total} 条",
   "text.input-secret-hide": "隐藏",
   "text.input-secret-placeholder": "输入机密信息",