GATE01

Install

インストール

@love-rox/ptpt-core は依存として自動的に引き込まれます。vue（>=3.4）はピア依存です。既定の見た目には @love-rox/ptpt-core/styles.css を一度 import してください。

bun

bun add @love-rox/ptpt-vue

pnpm

pnpm add @love-rox/ptpt-vue

npm

npm i @love-rox/ptpt-vue

yarn

yarn add @love-rox/ptpt-vue
GATE02

Usage

使い方

<script setup> でインポートし、<PatapataBoard> に targets 文字列をバインドします。セル数は文字列の長さから決まり、cell-options は全セルに適用されます。class / style はルート要素にそのまま渡ります。

Vue 3vue
<script setup lang="ts">
import { PatapataBoard } from "@love-rox/ptpt-vue";
import { alphanumericPreset } from "@love-rox/ptpt-core/presets/alphanumeric";
import "@love-rox/ptpt-core/styles.css";
</script>

<template>
  <PatapataBoard
    :cell-options="{ preset: alphanumericPreset }"
    targets="TOKYO  "
    flip-mode="replace"
  />
</template>
GATE03

Options

オプション

React 版とまったく同じオプションを受け付けます。共通セルオプションは rehype / Astro とも完全に揃っています。

共通セルオプション

オプション型既定値説明
presetPresetDefinition | stringdefaultPresetフラップに使う文字セット。PresetDefinition（recommendedDuration / locale を既定値に使う）か、フラップ順を表す文字列を渡します。frames とは排他です。
framesFrameInput[]undefined明示的なフレーム集合。文字だけでなく画像や任意要素も指定できます。preset とは排他です。
durationPerFlapnumberプリセットの推奨値、なければ 2001 枚をめくるミリ秒数。プリセットの recommendedDuration を上書きします。
direction'forward' | 'shortest''forward'フレームのリングをめくる向き。shortest は近いほうへ逆回りすることもあります。
reducedMotion'instant' | 'minimal' | 'ignore''instant'OS が「視差効果を減らす」設定のときの挙動。instant は瞬時に切り替えます。

コンポーネント専用プロパティ

オプション型既定値説明
targetstring—変化を監視し、変わるたびにめくる先のスラッグ。
flipMode'replace' | 'queue'undefinedtarget が連続で変わったときの挙動。replace は最新だけ、queue は順番に。
onFlipComplete() => voidundefined各フリップが落ち着いたあとに呼ばれます。
className / stylestring / CSSPropertiesundefinedホスト要素に付与するクラス／スタイル。
GATE04

Behaviour

挙動の注記

  • オプションはマウント時に読まれます。作り直したいときは key を渡してください。target / targets を変えるだけならフリップが走ります。
  • 既定の replace（最新だけにまとめる）に対し、flip-mode="queue" を指定すると連続更新を順番に消化します。
  • 各フリップが落ち着くと flip-complete を emit します。盤面は1つの role="status" ライブリージョンを持ちます。
  • preset には文字列ではなくプリセットオブジェクト（:preset="digitsPreset"）を渡してください。文字列はプリセット名ではなく、フラップの文字列そのものとして扱われます。
GATE05

Related

他のアダプタ

React を使っているなら同じ API の React 版があります。Markdown のレンダリングや静的サイトの生成なら、Vue を持ち込まずに rehype / Astro 版が build 時に処理します。

← パッケージ一覧に戻る