コンテンツにスキップ

@lh-ui/share

lh-ui ファミリー唯一のフレームワーク非依存共有層 —— 56 個の core コンポーネント純関数、12 個の共有コア、中華風テーマシステム、純 emitter の国際化、58 セットのコンポーネントスタイルソース。ひとつのロジックで、Vue3 / Vue2 / React / uniapp の全 UI ライブラリを支えます。

Core 純関数

56 個のコンポーネントのクラス名計算・ステートマシン・アクセシビリティ属性パックは、すべてゼロ依存の純関数です。フレームワーク層は配線だけを担い、ロジックは単一ソース、単体テストも唯一のコピーです。

共有コア

popper 位置決定エンジン、仮想スクロール、フォーカストラップ、キーボードナビゲーション、sx スタイル props、数値サニタイズ——12 個のモジュールが各端からそのまま再利用されます。

中華風テーマ

5 つの内蔵プリセット(青花瓷(せいがじ)/ 松花绿(しょうかりょく)/ 朱砂(しゅしゃ)/ 水墨(すいぼく)/ 藤黄(とうおう))、CSS 変数 + ダークモード + 紋様システムを備え、AA コントラストスクリプトが見張っています。

純 emitter 国際化

LhLocale は純粋なイベントエミッターで、フレームワークのリアクティビティを一切持ちません。各端は独自のシグナル機構で version を購読します。

スタイルの唯一ソース

styles/ はファミリー全体のコンポーネント BEM スタイルの唯一ソースです。トランジションのクラス名は 3 つの mixin が Vue2 / Vue3 / React の差異を統合します。

フレームワーク依存ゼロ

external: [] による完全ゼロ依存バンドル。verify:dts ゲートにより、成果物にフレームワークのインポートが一切現れないことが保証されます。

  • 各端 UI ライブラリの開発者(lh-ui-plus / lh-ui-vue2 / lh-ui-react / lh-ui-uniapp):各純関数のシグネチャ、戻り値、境界条件、そしてスタイルトークンの上書き方法を調べるため。
  • share を直接使う独立開発者:プロジェクトにアクセシビリティのベースラインと中華風テーマのトークンだけが欲しく、UI ライブラリは一切導入しない場合。
  • コントリビューター:ディレクトリの責務、レッドライン、検証とリリースの流れを把握するため。
- `src/core/<コンポーネント>/` —— 純関数ロジック(logic.ts / types.ts)、フレームワークインポートなし
- `src/core/shared/` —— コンポーネント横断の共有コア(popper / virtual / sx / keyboard …)
- `src/theme/` —— テーマ TS 側:型 + 5 つのプリセット + ランタイムプリミティブ
- `styles/` —— コンポーネント BEM スタイルの唯一ソース + theme/common/*.scss トークン
- `src/{constants,locales,types,utils}/` —— 定数 / 言語パック / 型 / ユーティリティ

次のステップ:クイックスタート でパッケージをインストールしスタイルを読み込む。またはパッケージエントリとサブパスを直接見て、オンデマンドインポートの方法を把握しましょう。

Copyright © 2024-2026 FengMo WenXue