ヘッドレスコア
状態を持つコンポーネントはすべて、@thl-ui/core にあるフレームワーク非依存のステートマシンへの薄いバインディングです。これらを直接使って独自のコンポーネントを作ることもできます。どのフレームワークでも、フレームワークなしでも使えます。
ストア
すべてのマシンは小さな observable ストアを公開しています。
ts
interface Store<T> {
get(): T;
set(next: T | ((prev: T) => T)): void;
subscribe(fn: (value: T, prev: T) => void): () => void;
}各フレームワークへの橋渡しは 1 行で済みます。
ts
// React
const state = useStore(machine.state); // @thl-ui/react がエクスポート
// Vue
const state = useStore(machine.state); // @thl-ui/vue がエクスポート → Ref<T>
// Angular
readonly state = storeSignal(machine.state); // @thl-ui/angular がエクスポート → Signal<T>マシン
| ファクトリー | 主な機能 |
|---|---|
createTable({ data, columns, pageSize, rowKey, manual }) | ソート、検索、フィルター、ページング、選択、インライン編集、サーバーモード |
createSelect({ options, multiple, searchable, creatable }) | キーボードナビゲーション、グループ、タグの作成 |
createTabs({ items, active }) | roving tabindex、無効なタブのスキップ |
createSteps({ count, current, linear }) | ステップごとのステータス |
createCarousel({ count, interval, loop }) | 自動再生、一時停止 |
createDisclosure() / createAccordion() | 折りたたみ、パネル |
createSidebar({ breakpoint }) | mini / mobile / user-mini の状態、リサイズ対応 |
createToastManager({ duration, max }) | 表示位置、固定表示、最大キュー数 |
createUpload({ accept, maxSize, request }) | バリデーション（i18n）、進捗、プレビュー |
createIdleTimer({ warnAfter, expireAfter }) | アクティビティイベント |
paginate({ page, total, pageSize, maxPages }) | 省略記号付きのページ項目 |
monthGrid(), weekdayNames(), presetRanges() | Intl 対応のカレンダー |
rules.*, validate(), validateAll() | i18n キーを返す |
例: バニラ TS でカスタムテーブルを作る
ts
import { createTable, createThl } from '@thl-ui/core';
const thl = createThl({ locale: 'ja' });
const table = createTable({
data: employees,
columns: [{ key: 'name', sortable: true }, { key: 'salary', sortable: true }],
pageSize: 5,
rowKey: 'id',
});
table.state.subscribe(render);
table.toggleSort('salary');
table.setSearch('tokyo');
function render() {
const { rows, total, page, pageCount } = table.view();
footer.textContent = thl.t('pagination.showing', { from: (page - 1) * 5 + 1, to: Math.min(page * 5, total), total });
// …rows.map(r => r.row) をレンダリング
}バリデーションルール
ts
import { rules, validate, validateAll } from '@thl-ui/core';
validate('', [rules.required()]); // { key: 'validation.required' }
validate('ab', [rules.minLength(3)]); // { key: 'validation.minLength', params: { min: 3 } }
validateAll({ pw: 'x', confirm: 'y' }, { confirm: [rules.match('pw')] });利用可能: required、email、minLength、maxLength、min、max、number、pattern(re)、match(field)。ルールはただの (value, allValues) => { key, params } | null なので、カスタムルールも簡単に書けます。そのメッセージも組み込みルールと同じように翻訳されます。
ユーティリティ
bem(block, prefix) · cx(...classes) · uid() · focusTrap(el) · scrollLock() · clickOutside(els, fn) · computePosition(anchor, float, placement) · breakpoints · skins · palette。