@kazuhi-ra/turnbox-vue

Vue adapter for TURNBOX.js. Compound component and useTurnBox composable.

Requires Vue 3 or later.

Installation

npm install @kazuhi-ra/turnbox-vue

Compound Component

<template>
  <TurnBox.Root :faces="2" :duration="400">
    <TurnBox.Face>
      Front<TurnBox.Button>Flip</TurnBox.Button>
    </TurnBox.Face>
    <TurnBox.Face>
      <TurnBox.Button direction="prev">Flip back</TurnBox.Button>Back
    </TurnBox.Face>
  </TurnBox.Root>
</template>

<script setup>
import { TurnBox } from "@kazuhi-ra/turnbox-vue";
</script>

External control via ref

<template>
  <TurnBox.Root :faces="4" :duration="400" :ref="handle">
    <TurnBox.Face>Face 1</TurnBox.Face>
    <TurnBox.Face>Face 2</TurnBox.Face>
    <TurnBox.Face>Face 3</TurnBox.Face>
    <TurnBox.Face>Face 4</TurnBox.Face>
  </TurnBox.Root>
  <button @click="handle?.next()">Next</button>
  <button @click="handle?.prev()">Back</button>
</template>

<script setup>
import { ref } from "vue";
import { TurnBox, type TurnBoxRootHandle } from "@kazuhi-ra/turnbox-vue";

const handle = ref<TurnBoxRootHandle | null>(null);
</script>

TurnBoxRootHandle

| Method | Description | | --- | --- | | next() | Go to the next face | | prev() | Go to the previous face | | goTo(face, animation?) | Go to the specified face (animation defaults to true) | | getCurrentFace() | Current face number (1-based) | | isAnimating() | Whether an animation is in progress |

TurnBox.Button props

| Prop | Type | Default | Description | | --- | --- | --- | --- | | direction | "next" \| "prev" | "next" | Go to the next or previous face | | to | number | | Jump to a specific face (takes priority over direction) |

Forwards standard attrs (class, style, etc.) to the native <button>.

useTurnBox composable

<script setup>
import { useTurnBox } from "@kazuhi-ra/turnbox-vue";

const { containerRef, currentFace, isAnimating, next, prev, goTo } = useTurnBox({
  faces: 2,
  duration: 400,
});
</script>

<template>
  <div ref="containerRef">
    <div>Front</div>
    <div>Back</div>
  </div>
</template>

UseTurnBoxReturn

| Field | Type | Description | | --- | --- | --- | | containerRef | Ref<HTMLElement \| null> | Attach to the container element | | currentFace | Ref<number> | Current face number (1-based) | | isAnimating | Ref<boolean> | Whether an animation is in progress | | next() | () => void | Go to the next face | | prev() | () => void | Go to the previous face | | goTo(face, animation?) | (face: number, animation?: boolean) => void | Go to the specified face |

TurnBox.Provider

Use TurnBox.Provider to override reduceAnimation for a subtree. Without a Provider the default is "system setting".

<TurnBox.Provider reduce-animation="never">
  <App />
</TurnBox.Provider>

Options

See shared options.

License

MIT