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. セマンティックラッパーごとの厳格な型定義
Text や Inline などのセマンティックな意味を持つコンポーネントには、さらなる型制限・拡張を行うための専用 Props 型を用意しています。
TextProps / GroupProps / InlineProps 等
本家 LismCSS からインポートした TextAllowedTag(例: 'p' | 'div' | ...)などを as 型に上書き拡張しています。
export type TextProps = LismBaseProps & { as?: TextAllowedTag }これにより、例えば <LismText as=" と打ち込んだときに、p や div といった限定的なサジェストがエディタ上で優先して表示されます。
独自のプロパティを持つ型
HeadingProps:lv(1〜6) プロパティを持ちます。LinkProps:href,target,rel,downloadプロパティを持ちます。DecoratorProps: 本家 Decorator 固有のsize等を持ちます。