숫자 편집기

import { createGrid, type ColumnDef, type Row } from '@freegridjs/core';
import { makeRows } from '../data';
import { button, separator, text, tr, type DemoContext } from '../ui';

export default function mount(ctx: DemoContext) {
  const h = (en: string, ko: string) => tr(ctx.lang, { en, ko });
  const data = makeRows(150).map((r, i) => ({ ...r, qty: i % 40, rate: Math.round((i % 20) * 5) / 100, rating: (i % 11) / 2 }));
  const grid = createGrid(ctx.host, {
    columns: [
      { field: 'name', header: h('Name', '이름'), width: 150 },
      { field: 'qty', header: h('Qty (0–99)', '수량(0~99)'), type: 'number', width: 120, editable: true, editor: { type: 'number', min: 0, max: 99 } },
      { field: 'rate', header: h('Rate (step 0.05)', '비율(0.05씩)'), type: 'number', format: '0.00', width: 140, editable: true, editor: { type: 'number', min: 0, max: 1, step: 0.05 } },
      { field: 'rating', header: h('Rating (0–5, 0.5)', '평점(0~5, 0.5씩)'), type: 'number', format: '0.0', width: 150, editable: true, editor: { type: 'number', min: 0, max: 5, step: 0.5 } },
    ],
    data, locale: ctx.lang,
  });
  grid.on('validationFailed', e => ctx.log(`refused ${String(e.value ?? '')}: ${e.message}`));
  text(ctx, h('Double-click a number: ↑ ↓ or ▲▼ step, Shift ×10. Type a value outside the range to see the message.',
    '숫자를 더블클릭하세요. ↑ ↓나 ▲▼로 단계, Shift는 10배. 범위 밖 값을 입력하면 안내가 나옵니다.'));
  separator(ctx);
  // pasting follows the same min / max rule as typing
  const paste = (v: number) => {
    grid.setRange({ start: { rowIndex: 0, colId: 'qty' }, end: { rowIndex: 0, colId: 'qty' } });
    const r = grid.pasteText(String(v));
    ctx.log(r.changed
      ? h(`${v} is within 0–99: pasted into row 1`, `${v}은(는) 0~99 범위 안이라 1행에 붙여넣었습니다`)
      : h(`${v} is outside 0–99: not pasted (skipped ${r.skipped} cell)`, `${v}은(는) 0~99 범위를 벗어나 붙여넣지 않았습니다 (건너뜀 ${r.skipped}칸)`));
  };
  button(ctx, h('Paste 50 into row 1 (accepted)', '1행에 50 붙여넣기 (허용)'), () => paste(50));
  button(ctx, h('Paste 150 into row 1 (refused)', '1행에 150 붙여넣기 (거부)'), () => paste(150));
  return grid;
}