技術仕様：lism-adapter.ts - Vue.js アダプタ

技術仕様：lism-adapter.ts (Vue.js アダプター)

lism-adapter.ts は、LismCSS の汎用的なプロパティ仕様を Vue.js のコンポーネントシステム（props, $attrs, class/style バインディング）へと適合させるためのVue.js アダプターです。

概要

LismCSS 公式のコアロジックを Vue.js 環境で効率的に動作させるための架け橋として機能します。

入力: コンポーネントに渡された全属性（props + $attrs）出力: Vue の v-bind に直接渡せるオブジェクト（class, style, その他の HTML 属性）

interface LismOutput {
  class: string[]      // 適用される CSS クラスの配列
  style: Record<string, string | number>  // インラインスタイル
  [key: string]: unknown  // その他の HTML 属性 (id, data-*, aria-* 等)
}

アーキテクチャ

依存関係

LismCSS 本家のロジックと Vue.js を接続するため、以下をインポートして利用しています：

インポート元	用途
`lism-css/config`	`STATES`, `PROPS` の定義データ
`lism-css/lib/getLayoutProps`	`layout` プロパティの展開
`lism-css/lib/isPresetValue`	プリセット値の判定
`lism-css/lib/isTokenValue`	デザイントークン値の判定
`lism-css/lib/getUtilKey`	ユーティリティクラスキーの取得
`lism-css/lib/getMaybeCssVar`	CSS 変数への変換
`lism-css/lib/getBpData`	レスポンシブ（ブレイクポイント）データの解析

処理フロー

アダプターとしての主な役割は、Vue 固有の属性表現を LismCSS が解釈できる形式に整え、最終的に Vue が解釈できるオブジェクトとして出力することです。

Vue 入力 (props + $attrs)
  │
  ├─ 1. Vue 固有の正規化 (アダプターの核となる処理)
  │    ├─ kebab-case → camelCase への全自動変換 (data-/aria-を除く)
  │    └─ 空文字列 → true 変換 (Vue の値なし属性をフラグとして正規化)
  │
  ├─ 2. LismCSS ロジックの呼び出し (getLayoutProps)
  │    └─ レイアウト固有のメタデータ (_propConfig) の生成
  │
  ├─ 3. プロパティ解析ループ
  │    ├─ PROPS にないキーでも _propConfig にあれば解析対象とする
  │    └─ レスポンシブデータの再帰的解析
  │
  ├─ 4. Vue 向け形式への出力
  │    ├─ class (配列形式)
  │    ├─ style (オブジェクト形式)
  │    └─ attrs (パススルーする標準属性)
  │
  └─ 最終出力
       { class: [...], style: {...}, ...attrs }

Vue 固有の正規化処理

1. 全自動ケバブケース変換

Vue テンプレートでは属性を kebab-case で記述するのが一般的ですが、LismCSS 内部の処理ロジックは camelCase を期待しています。本アダプターでは、data- および aria- で始まる属性以外のすべてのハイフン付き属性を camelCase へ自動変換します。

これにより、以下の記述はすべて内部で sideW として扱われ、正しく LismCSS の解析（CSS変数への変換など）が行われます。

:side-w="200px" (kebab)
:sideW="200px" (camel)

2. _propConfig (レイアウト固有設定) の優先参照

sideW や mainW、ar といったプロパティは、グローバルな PROPS 設定には含まれず、getLayoutProps によって動的に生成される _propConfig に含まれます。アダプターの解析ループでは、PROPS に定義がないキーであっても _propConfig に設定が存在する場合は、それを Lism プロパティとして認識し、適切にクラスやスタイル（CSS変数）へ振り分けます。

3. 空文字列 → true 変換 (フラグ正規化)

Vue テンプレートの <Lism bd> は内部で "" となるため、これを JavaScript 側で期待される true へ変換して LismCSS ロジックへ渡します。

ファイル構成

リファクタリングにより、ロジック部分はコンポーネントから独立し、src/core/ ディレクトリに集約されています。

src/core/
├── lism-adapter.ts  # 🔧 本ファイル (Vue.js アダプター)
└── types.ts         # 共通型定義 (LismProps, LismCoreBaseProps 等)

src/components/Lism/
└── Lism.vue         # コアコンポーネント (アダプターを利用して属性をバインド)

まとめ

lism-adapter.ts は単なる「変換器」ではなく、LismCSS という外部仕様を Vue.js というフレームワークに最適化して取り込むためのアダプター層として設計されています。一貫したケバブケースの使用をサポートしつつ、LismCSS の高度なレイアウト機能を Vue 環境でフル活用できるようにしています。