Core Types マニュアル (types.ts)

src/core/types.ts では、Lism UI-Vue の根幹をなすプロパティの型定義を行っています。LismCSS(本家)の型と、Vue 向けの独自の型がどのように組み合わされているかを以下で解説します。


1. コアスタイル・レイアウトプロパティの型

本家の lism-css から、カラーやマージンなどのスタイル関連プロパティの定義をインポートし、基底型としてまとめています。

LismCoreBaseProps

export type LismCoreBaseProps = Partial<PropValueTypes & TraitProps & LayoutProps>
  • 説明: LismCSS 本家の「純粋なCSSとレイアウト関連のプロパティ」のみを集めた型です。以前の StateProps から TraitProps へ名称が更新されています。

  • 特徴: これには as などの HTML 描画に関する指定は含まれていません。


2. Vue コンポーネント用の基底型

上記のスタイルプロパティに、Vueのコンポーネントとして出力するための仕組み(タグ名の指定など)を加えた型です。

LismBaseProps

export type LismBaseProps = LismCoreBaseProps & {
  as?: keyof HTMLElementTagNameMap | (string & {}) | Component
  hov?: (string & {}) | 'o' | 'c' | ... | (Partial<PropValueTypes> & { ... })
  set?: SetPropValue
  unset?: SetPropValue
  util?: UtilPropValue
  atomic?: AtomicProps['atomic']
  exProps?: Record<string, unknown>
}
  • 説明: プロジェクト内のほぼ全てのコンポーネント(LismBoxやLismCenterなど)で Props のベースとして使用される重要な型です。

  • 特徴:

    • as: レンダリングするHTML要素やVueコンポーネントを指定します。

    • hov: ホバー時のスタイル。文字列による簡易指定に加え、オブジェクト形式での詳細指定が可能です。

    • set / unset: set-- および unset-- クラスを付与するためのプロパティです。

    • util: Lism CSS のユーティリティクラス(u--)を付与します。

    • atomic: Atomic Primitive(divider, spacer等)を指定します。

LismProps

export type LismProps = LismBaseProps & {
  [key: string]: unknown
}
  • 説明: LismBaseProps を拡張して、任意の属性(class, style, data-* など)を許可するためのインデックスシグネチャを持たせています。


3. セマンティックラッパーごとの厳格な型定義

TextInline などのセマンティックな意味を持つコンポーネントには、さらなる型制限・拡張を行うための専用 Props 型を用意しています。

TextProps / GroupProps / InlineProps

本家 LismCSS からインポートした TextAllowedTag(例: 'p' | 'div' | ...)などを as 型に上書き拡張しています。

export type TextProps = LismBaseProps & { as?: TextAllowedTag }

これにより、例えば <LismText as=" と打ち込んだときに、pdiv といった限定的なサジェストがエディタ上で優先して表示されます。

独自のプロパティを持つ型

  • HeadingProps: lv (1〜6) プロパティを持ちます。

  • LinkProps: href, target, rel, download プロパティを持ちます。

  • DecoratorProps: 本家 Decorator 固有の size 等を持ちます。