Lismコンポーネント

Lism (Vue 向けコアコンポーネント)

LismCSS の基盤となるコアコンポーネント Lism の Vue.js 向けネイティブ実装についてのドキュメントです。

pnpm add lism-ui-vue@alpha

ガイド

LismCSS の強力な Props システム（p, fz, bgcなどのユーティリティクラス付与やスタイル展開）を、Vue.js 開発で直感的に利用できるようにしたベースコンポーネントです。

基本的な使い方

LismCSS 公式で定義されている CSS Props や State Props を、そのまま Vue コンポーネントの属性として渡すことができます。レスポンシブな配列指定などにも完全対応しています。

<script setup lang="ts">
import { Lism } from '@/components'
</script>

<template>
  <!-- Basic: 余白や背景色、ボーダーを設定 -->
  <Lism p="20" bgc="base-2" bd bdrs="2">
    基本的なスタイリング
  </Lism>

  <!-- Responsive: 画面サイズに応じたパディング -->
  <Lism :p="[10, 20, 30]" bgc="brand">
    レスポンシブなパディング
  </Lism>
</template>

Vue テンプレートでの注意事項

Vue テンプレートで LismCSS のプロパティを使用する際、React (JSX) とは異なる記法が必要な場面があります。

1. レスポンシブ配列は v-bind (:) で渡す

レスポンシブ指定で配列を使用する場合、必ず v-bind (:) を使用して JavaScript の配列として渡してください。

<!-- ✅ 正しい: v-bind で JavaScript 配列として渡す -->
<Lism :p="[10, 20, 30]">...</Lism>
<LismBox :fz="['s', 'm']">...</LismBox>

<!-- ❌ 間違い: 文字列リテラルとして渡されてしまう -->
<Lism p="[10, 20, 30]">...</Lism>

理由: v-bind なしの場合、Vue は値を文字列リテラル "[10, 20, 30]" として扱います。LismCSS の内部パーサーは JavaScript 配列を期待しているため、正しく動作しません。

2. フラグ属性（boolean）はそのまま書ける

bd, is-container のようなフラグ属性は、値なしでそのまま記述できます。

<!-- ✅ フラグ属性: 値なしで OK -->
<Lism bd>ボーダーあり</Lism>
<LismContainer is-wrapper="s">...</LismContainer>

<!-- ✅ 明示的に v-bind で true を渡しても OK -->
<Lism :bd="true">ボーダーあり</Lism>

3. kebab-case / camelCase 両方のサポート

Vue テンプレートの慣例に基づき、属性を kebab-case で記述することを推奨しています。内部のアダプターが自動的に camelCase へ変換して LismCSS ロジックへ渡します。

<!-- どちらでも等価に動作します -->
<Lism is-container>...</Lism>
<Lism isContainer>...</Lism>

<!-- レイアウト固有プロパティもサポート -->
<LismSideMain side-w="200px">...</LismSideMain>

4. オブジェクト値も v-bind を使う

hov や css のようにオブジェクトを受け取るプロパティも、v-bind (:) で渡す必要があります。

<Lism :hov="{ bgc: 'brand', c: 'white' }">
  ホバーでスタイルが変わる
</Lism>

命名規則について

Vue.js のスタイルガイドに従い、UI コンポーネントはすべて2単語以上の命名を採用しています。

  • コアコンポーネント (Lism): 本家 LismCSS との名称一致を優先し、あえて単一単語を採用。

  • UI/レイアウトコンポーネント: LismBox, LismFlex, LismSideMain 等、すべて Lism 接頭辞を付けた2単語以上の命名。

レンダリングされる要素の変更 (asプロパティ)

デフォルトでは <div> としてレンダリングされますが、as プロパティを使って出力を変更できます。

以前は標準HTMLタグの指定に tag、Vueコンポーネントの指定に as を使い分けていましたが、現在は as プロパティに一元化されました。

  • as: 標準のHTMLタグ（例: as="section", as="ul"）などを自由に指定可能です。

<!-- 標準HTMLタグの指定 -->
<Lism as="section">...</Lism>

<!-- Vueコンポーネント（NuxtLinkなど）の指定 -->
<Lism as="NuxtLink" to="/">...</Lism>

🛠️ 開発者向けガイド

Lism コンポーネメントおよび内部の変換ロジック（lism-adapter.ts）を保守・拡張する開発者向けの仕様解説です。

アーキテクチャの概要

本実装は、Vue.js に最適化したフルスクラッチのネイティブ実装となっています。

  1. lism-css/config の流用: PROPS や STATES 設定データは本家 LismCSS のコードから直接インポートし、仕様の自動追従を図っています。

  2. getLismPropsVue (Vue最適化): クラスを配列形式、スタイルをオブジェクト形式でパースし、Vue のバインディングパフォーマンスを最大化しています。

Props 定義と @vue-ignore

Lism.vue は膨大なプロパティをサポートしますが、ランタイムのオーバーヘッドを避けるため /* @vue-ignore */ を使用しています。TypeScript 上では型補完を有効にしつつ、ランタイムではすべて $attrs へ流してアダプターで一括処理する設計です。

inheritAttrs: false

すべてのコンポーネントでは defineOptions({ inheritAttrs: false }) を設定しています。これは、Vue の自動適用を無効化し、アダプターで解析した「純粋なクラスとスタイル」のみを確実にバインドするためです。これを忘れると属性が二重に出力される原因となります。