### Install vue3-flashcards

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/guide/getting-started.md

Install the vue3-flashcards package using npm.

```bash
npm install vue3-flashcards
```

--------------------------------

### Start Development Server

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/CONTRIBUTING.md

Run the development server to start working on the project.

```bash
yarn dev
# or
npm run dev
```

--------------------------------

### Install with pnpm

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/guide/installation.md

Install the vue3-flashcards package using pnpm.

```bash
pnpm add vue3-flashcards
```

--------------------------------

### Handling All Flashcards Events

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/api/flashcards.md

This example shows how to listen for and handle all available events emitted by the Flashcards component. It includes setup for swipe, skip, restore, loop, and drag events.

```vue
<script setup>
function handleSwipeLeft(item) {
  console.log('Swiped left:', item)
  // Add to rejected list, save to database, etc.
}

function handleSwipeRight(item) {
  console.log('Swiped right:', item)
  // Add to approved list, save to database, etc.
}

function handleSwipeTop(item) {
  console.log('Swiped up:', item)
  // Special handling for upward swipes
}

function handleSwipeBottom(item) {
  console.log('Swiped down:', item)
  // Special handling for downward swipes
}

function handleSkip(item) {
  console.log('Skipped:', item)
  // Add to skipped list, analytics, etc.
}

function handleRestore(item) {
  console.log('Restored:', item)
  // Remove from approved/rejected lists, etc.
}

function handleLoop() {
  console.log('New loop cycle started!')
  // Analytics, reset counters, etc.
}

function handleDragStart(item) {
  console.log('Started dragging:', item)
  // Show drag hints, haptic feedback, etc.
}

function handleDragMove(item, type, delta) {
  console.log('Dragging:', item, 'Direction:', type, 'Progress:', delta)
  // Update UI indicators, play sounds, etc.
}

function handleDragEnd(item) {
  console.log('Stopped dragging:', item)
  // Hide drag hints, etc.
}
</script>

<template>
  <FlashCards
    :items="cards"
    :swipe-direction="['left', 'right', 'top']"
    :loop="true"
    @swipe-left="handleSwipeLeft"
    @swipe-right="handleSwipeRight"
    @swipe-top="handleSwipeTop"
    @swipe-bottom="handleSwipeBottom"
    @skip="handleSkip"
    @restore="handleRestore"
    @loop="handleLoop"
    @dragstart="handleDragStart"
    @dragmove="handleDragMove"
    @dragend="handleDragEnd"
  >
    <!-- slots -->
  </FlashCards>
</template>
```

--------------------------------

### Install with Yarn

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/guide/installation.md

Install the vue3-flashcards package using Yarn.

```bash
yarn add vue3-flashcards
```

--------------------------------

### Start Documentation Server

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/CONTRIBUTING.md

Launch the documentation server to preview documentation changes.

```bash
yarn docs:dev
# or
npm run docs:dev
```

--------------------------------

### Install Dependencies

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/CONTRIBUTING.md

Install project dependencies using either Yarn or npm.

```bash
yarn install
# or
npm install
```

--------------------------------

### Install Vue 3 Flashcards

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/README.md

Install the vue3-flashcards package using npm, yarn, or pnpm.

```bash
npm install vue3-flashcards
# or: yarn add vue3-flashcards · pnpm add vue3-flashcards
```

--------------------------------

### FlipCard Component - Index File

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/examples/flip-cards.md

The main entry point for the FlipCard component example. It imports and renders the card components, managing their state and interactions.

```vue
<script setup lang="ts">
import { ref } from 'vue'
import FlipCard from './FlipCard.vue'
import QuestionCard from './QuestionCard.vue'
import AnswerCard from './AnswerCard.vue'

const cards = [
  { id: 1, question: 'What is Vue?', answer: 'A progressive JavaScript framework' },
  { id: 2, question: 'What is Vite?', answer: 'A next generation frontend tooling' },
  { id: 3, question: 'What is Pinia?', answer: 'A state management library for Vue' },
]

const activeCardIndex = ref(0)

function nextCard() {
  activeCardIndex.value = (activeCardIndex.value + 1) % cards.length
}

function prevCard() {
  activeCardIndex.value = (activeCardIndex.value - 1 + cards.length) % cards.length
}
</script>

<template>
  <div class="flip-usage">
    <FlipCard
      v-for="(card, index) in cards"
      :key="card.id"
      :active="index === activeCardIndex"
      @flip="nextCard"
      @dismiss="nextCard"
    >
      <template #front>
        <QuestionCard :question="card.question" />
      </template>
      <template #back>
        <AnswerCard :answer="card.answer" @click="nextCard" />
      </template>
    </FlipCard>

    <div class="navigation">
      <button @click="prevCard">Previous</button>
      <button @click="nextCard">Next</button>
    </div>
  </div>
</template>

<style scoped>
.flip-usage {
  position: relative;
  width: 300px;
  height: 200px;
  margin: 50px auto;
}

.navigation {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.navigation button {
  padding: 10px 20px;
  border: none;
  background-color: #42b983;
  color: white;
  cursor: pointer;
  border-radius: 5px;
}

.navigation button:hover {
  background-color: #349a6e;
}
</style>
```

--------------------------------

### Conventional Commits Examples

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/CONTRIBUTING.md

Examples of commit messages following the Conventional Commits specification.

```markdown
feat: add new feature
fix: bug fix
docs: documentation changes
style: formatting changes
refactor: code refactoring
test: adding tests
chore: maintenance tasks

Examples:
- feat: add dragThreshold prop to prevent false swipes
- fix: resolve animation timing issue on mobile
- docs: update FlipCard API reference
```

--------------------------------

### Scale Usage Component Implementation

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/examples/scale-transform.md

The `index.vue` file for the scale usage example. This component likely sets up the environment for demonstrating the scale transform.

```vue
<script setup>
import ScaleCard from './ScaleCard.vue'
import { ref } from 'vue'

const cards = ref([
  { id: 1, text: 'Card 1' },
  { id: 2, text: 'Card 2' },
  { id: 3, text: 'Card 3' },
])

const transformStyle = (modelValue) => {
  return `scale(${1 - modelValue * 0.1})
`
}
</script>

<template>
  <div class="scale-usage">
    <FlashCard
      v-for="card in cards"
      :key="card.id"
      :modelValue="card.id === 1 ? 0 : 1"
      :transformStyle="transformStyle"
    >
      {{ card.text }}
    </FlashCard>
  </div>
</template>

<style scoped>
.scale-usage {
  height: 300px;
  width: 300px;
  position: relative;
}

.flash-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #4CAF50;
  color: white;
  font-size: 24px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
</style>
```

--------------------------------

### Tinder Card Usage Example

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/examples/tinder-style.md

This example demonstrates how to use the Tinder-style card component. It imports and renders the main `TinderUsage` component, which likely encapsulates the card logic and UI.

```vue
<script setup>
import TinderUsage from '../../example/tinder-usage/index.vue'
</script>

<ClientOnly>
  <TinderUsage />
</ClientOnly>
```

--------------------------------

### Custom Actions Example: index.vue

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/examples/custom-actions.md

This is the main component that imports and renders the custom actions example. It sets up the flashcard component and uses the 'actions' slot to integrate custom buttons.

```vue
<script setup>
import { ref } from 'vue'
import LearningCard from './LearningCard.vue'
import ActionButtons from './ActionButtons.vue'

const cards = [
  { id: 1, question: 'What is Vue?', answer: 'A progressive JavaScript framework'
  },
  { id: 2, question: 'What is React?', answer: 'A JavaScript library for building user interfaces'
  },
  { id: 3, question: 'What is Angular?', answer: 'A platform for building mobile and desktop web applications'
  }
]

const cardRef = ref(null)

const onSwipe = ({ id, direction }) => {
  console.log(`Card ${id} swiped ${direction}`)
}

const onSkip = (id) => {
  console.log(`Card ${id} skipped`)
}

const onRestore = (id) => {
  console.log(`Card ${id} restored`)
}
</script>

<template>
  <div class="h-96 w-72">
    <FlashCard
      ref="cardRef"
      :cards="cards"
      @swipe="onSwipe"
    >
      <template #actions="{ swipeLeft, swipeRight, restore, skip } ">
        <ActionButtons
          class="mt-4"
          @skip="() => skip(cards[0].id)"
          @restore="() => restore(cards[0].id)"
          @swipe-left="() => swipeLeft(cards[0].id)"
          @swipe-right="() => swipeRight(cards[0].id)"
        />
      </template>

      <template #default="{ card, index }">
        <LearningCard :card="card" :index="index" />
      </template>
    </FlashCard>
  </div>
</template>

```

--------------------------------

### Simplest Deck Setup

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/essentials/index.md

This snippet demonstrates the most basic way to set up a deck of flashcards. It requires passing an array of items to the FlashCards component and rendering each item within the default slot. Ensure you have the FlashCards component imported and the items array defined.

```vue
<script setup>
import { ref } from 'vue'
import { FlashCards } from 'vue3-flashcards'

const cards = ref([
  { id: 1, title: 'First' },
  { id: 2, title: 'Second' },
])
</script>

<template>
  <FlashCards :items="cards">
    <template #default="{ item }">
      <div class="card">
        {{ item.title }}
      </div>
    </template>
  </FlashCards>
</template>

<style scoped>
.card {
  width: 300px;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
</style>
```

--------------------------------

### Basic FlipCard Usage

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/api/flipcard.md

A simple example demonstrating the basic structure of a FlipCard component with front and back content.

```vue
<script setup>
import { FlipCard } from 'vue3-flashcards'
</script>

<template>
  <FlipCard>
    <template #front>
      <div class="card-side front">
        <h3>Front Side</h3>
        <p>Click to flip</p>
      </div>
    </template>
    <template #back>
      <div class="card-side back">
        <h3>Back Side</h3>
        <p>Click to flip back</p>
      </div>
    </template>
  </FlipCard>
</template>
```

--------------------------------

### v1 CSS Keyframes Animation Example

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/guide/migrating-to-v2.md

This example shows how animations were handled in v1 using CSS keyframes and targeting internal classes. This approach is no longer supported in v2.

```vue
<FlashCards :items="cards" class="fast-rotate" />

<style>
.fast-rotate .flash-card-animation--right {
  animation: fastSpin 0.4s linear forwards !important;
}
@keyframes fastSpin {
  to { transform: translateX(300px) rotate(360deg); opacity: 0; }
}
</style>
```

--------------------------------

### Peek Animation Example

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/api/flashcards.md

Use the peek method to hint a swipe by nudging the card and then settling it back. The percent is clamped to 0-1.

```javascript
flashcardsRef.value.peek(0.15, 'right') // nudge ~15% to the right
setTimeout(() => flashcardsRef.value.peek(0, 'right'), 250) // settle back
```

--------------------------------

### Basic Flashcards Component Usage

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/README.md

A minimal example demonstrating how to use the FlashCards component with basic swipe event handling and custom card styling.

```vue
<script setup>
import { ref } from 'vue'
import { FlashCards } from 'vue3-flashcards'

const cards = ref([
  { id: 1, title: 'First Card' },
  { id: 2, title: 'Second Card' },
  { id: 3, title: 'Third Card' },
])

function onSwipeRight(item) {
  console.log('liked', item)
}
function onSwipeLeft(item) {
  console.log('passed', item)
}
</script>

<template>
  <FlashCards
    :items="cards"
    @swipe-right="onSwipeRight"
    @swipe-left="onSwipeLeft"
  >
    <template #default="{ item }">
      <div class="card">
        <h2>{{ item.title }}</h2>
      </div>
    </template>
  </FlashCards>
</template>

<style scoped>
.card {
  width: 300px;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
</style>
```

--------------------------------

### dragstart Event

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/api/flashcards.md

Emitted when user starts dragging a card. Fires immediately when dragging begins, before any movement threshold is reached. The payload includes the item being dragged.

```APIDOC
## dragstart

### Description
Emitted when user starts dragging a card. Fires immediately when dragging begins, before any movement threshold is reached.

### Payload
- **item** (T) - The card item being dragged.
```

--------------------------------

### v2 Web Animations API with `animation` Prop

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/guide/migrating-to-v2.md

This example demonstrates the v2 approach using the `animation` prop with a `keyframes` function. The library handles the fly-out, reverse for restore, and animation playback.

```vue
<FlashCards
  :items="cards"
  :animation="animation"
/>

<script setup lang="ts">
import type { AnimationContext } from 'vue3-flashcards'

const animation = {
  // `keyframes` describes ONLY the fly-out (the off-screen end frame), from
  // center. The library starts it from the drag-release point and plays it
  // reversed for restore — you don't write either.
  keyframes: (ctx: AnimationContext): Keyframe => {
    const x = ctx.type === 'left' ? -300 : 300
    return { transform: `translateX(${x}px) rotate(360deg)`, opacity: 0 }
  },
  duration: 400,
  easing: 'linear',
}
</script>
```

--------------------------------

### Vue Transition Effects Source - index.vue

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/examples/transitions.md

This is the main entry point for the transition effects example, likely containing the core logic for managing and applying animations.

```vue
import { defineComponent } from 'vue'
import TransitionCard from './TransitionCard.vue'

export default defineComponent({
  components: {
    TransitionCard,
  },
})

```

--------------------------------

### Custom Actions Example: LearningCard.vue

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/examples/custom-actions.md

This component displays the content of a single flashcard. It receives card data and its index as props.

```vue
<script setup>
defineProps({
  card: {
    type: Object,
    required: true
  },
  index: {
    type: Number,
    required: true
  }
})
</script>

<template>
  <div
    class="h-full w-full select-none break-words rounded-xl bg-white p-6 shadow-md"
  >
    <div class="text-lg font-semibold mb-4">Card {{ index + 1 }}</div>
    <div class="text-4xl font-bold">{{ card.question }}</div>
    <div class="mt-4 text-gray-600">{{ card.answer }}</div>
  </div>
</template>

```

--------------------------------

### FlipCard with Front and Back Content

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/api/flipcard.md

This example shows a complete FlipCard implementation using both `front` and `back` slots. The front content has a click handler to flip the card, and the back content provides an answer with a button to flip back.

```vue
<template>
  <FlipCard>
    <template #front="{ flip }">
      <div class="card-front" @click="flip">
        Question
      </div>
    </template>
    <template #back="{ flip }">
      <div class="card-back">
        <p>Answer: Paris</p>
        <button @click="flip">
          Back to Question
        </button>
      </div>
    </template>
  </FlipCard>
</template>
```

--------------------------------

### Minimal Vue 3 Flashcards Example

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/guide/getting-started.md

A basic Vue 3 component demonstrating the use of the FlashCards component with swipe event handling and a default slot for card content.

```vue
<script setup>
import { ref } from 'vue'
import { FlashCards } from 'vue3-flashcards'

const cards = ref([
  { id: 1, text: 'First Card' },
  { id: 2, text: 'Second Card' },
  { id: 3, text: 'Third Card' },
])

function handleSwipeLeft(item) {
  console.log('Swiped left:', item)
}

function handleSwipeRight(item) {
  console.log('Swiped right:', item)
}
</script>

<template>
  <FlashCards
    :items="cards"
    @swipe-left="handleSwipeLeft"
    @swipe-right="handleSwipeRight"
  >
    <template #default="{ item }">
      <div class="card">
        <h3>{{ item.text }}</h3>
      </div>
    </template>
  </FlashCards>
</template>
```

--------------------------------

### Custom Transform Function Example

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/advanced/custom-transforms.md

Provide a custom transform function to the `transform-style` prop to control card movement and scaling.

```vue
<script setup>
const customTransform = ({ deltaX, deltaY, rotation }) => {
  // Custom logic
  return `translate(${deltaX}px, ${deltaY}px) scale(${scale})`
}
</script>

<template>
  <FlashCards :transform-style="customTransform" :items="cards">
    <!-- ... -->
  </FlashCards>
</template>
```

--------------------------------

### Common Animation Keyframe Patterns

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/advanced/transition-effects.md

Examples of common off-screen end frames for `animation.keyframes`, including fast spin, scale to zero, 3D flip, and elastic bounce effects.

```typescript
// Fast spin
return { transform: `translateX(${x}px) rotate(720deg)`, opacity: 0 }
```

```typescript
// Scale to zero
return { transform: `translateX(${x}px) scale(0)`, opacity: 0 }
```

```typescript
// 3D flip
return { transform: `translateX(${x}px) rotateY(180deg) rotateX(45deg)`, opacity: 0 }
```

```typescript
// Elastic bounce (pair with an overshoot easing)
return { transform: `translateX(${x}px) scale(1.3) rotate(15deg)`, opacity: 0 }
// :animation="{ keyframes, easing: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)' }"
```

--------------------------------

### Vue Component for Virtual Rendering Example

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/examples/virtual-rendering.md

This is the main component that utilizes virtual rendering. It imports and uses the `VirtualCard` component to display items from a large dataset.

```vue
<script setup>
import { ref } from 'vue'
import VirtualCard from './VirtualCard.vue'

const items = ref([
  { id: 1, text: 'Card 1' },
  { id: 2, text: 'Card 2' },
  { id: 3, text: 'Card 3' },
  { id: 4, text: 'Card 4' },
  { id: 5, text: 'Card 5' },
  { id: 6, text: 'Card 6' },
  { id: 7, text: 'Card 7' },
  { id: 8, text: 'Card 8' },
  { id: 9, text: 'Card 9' },
  { id: 10, text: 'Card 10' }
])

const renderLimit = 5
</script>

<template>
  <div class="virtual-usage">
    <div class="card-container">
      <VirtualCard
        v-for="item in items"
        :key="item.id"
        :item="item"
        :render-limit="renderLimit"
      />
    </div>
  </div>
</template>

<style scoped>
.virtual-usage {
  height: 300px;
  overflow-y: auto;
}

.card-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}
</style>

```

--------------------------------

### Handle Loop Event in FlashCards

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/advanced/loop-mode.md

Listen for the `@loop` event to be notified when the deck has completed a full cycle and is starting over. This is useful for tracking mastery or triggering actions.

```vue
<script setup>
function handleLoop() {
  console.log('All cards shown, starting over')
}
</script>

<template>
  <FlashCards :loop="true" :items="cards" @loop="handleLoop">
    <!-- ... -->
  </FlashCards>
</template>
```

--------------------------------

### FlashCards Actions Slot Example

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/essentials/actions.md

Access swipe methods like swipeLeft, swipeRight, and restore directly from the actions slot to bind them to custom buttons.

```vue
<FlashCards ref="flashcardsRef" :items="cards">
  <template #default="{ item }">
    <!-- card content -->
  </template>

  <template #actions="{ swipeLeft, swipeRight, swipeTop, swipeBottom, restore, skip }">
    <button @click="swipeLeft">Dislike</button>
    <button @click="swipeRight">Like</button>
    <button @click="restore">Undo</button>
  </template>
</FlashCards>
```

--------------------------------

### Flashcard Component Implementation

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/examples/basic-usage.md

The core implementation of the flashcard component. It utilizes props like 'items' to define the card data and provides slots for custom content. This example demonstrates how to structure the component for basic functionality.

```vue
<script setup lang="ts">
import { ref } from 'vue'

const items = ref([
  {
    id: 1,
    title: 'What is Vue.js?',
    content: 'Vue.js is a progressive JavaScript framework for building user interfaces.'
  },
  {
    id: 2,
    title: 'What is a Component?',
    content: 'Components are reusable Vue instances with a name.'
  },
  {
    id: 3,
    title: 'What is a Slot?',
    content: 'Slots are a way to insert content into child components.'
  }
])

const swipeLeft = (item) => {
  console.log('Swiped left:', item)
}

const swipeRight = (item) => {
  console.log('Swiped right:', item)
}
</script>

<template>
  <Flashcard
    :items="items"
    @swipe-left="swipeLeft"
    @swipe-right="swipeRight"
  >
    <template #default="{ item }">
      <div class="w-full h-full flex flex-col items-center justify-center p-4">
        <div class="text-2xl font-bold mb-4">{{ item.title }}</div>
        <div class="text-lg">{{ item.content }}</div>
      </div>
    </template>
  </Flashcard>
</template>

<style scoped>
/* Add any specific styles here if needed */
</style>
```

--------------------------------

### Infinite Loop Usage Example

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/examples/infinite-loop.md

This snippet demonstrates how to use the InfiniteUsage component to enable infinite card swiping. It's ideal for small content sets or practice modes.

```vue
<script setup>
import InfiniteUsage from '../../example/infinite-usage/index.vue'
</script>

<ClientOnly>
  <InfiniteUsage />
</ClientOnly>
```

--------------------------------

### Configure 4-Directional Swipe

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/example/tinder-usage/README.md

Configure the FlashCards component to enable left, right, and top swipe directions. This setup allows for distinct actions for each swipe direction.

```vue
<FlashCards
  :items="items"
  swipe-direction="['left', 'right', 'top']"
  @swipe-left="(item) => handleSwipe(item, 'left')"
  @swipe-right="(item) => handleSwipe(item, 'right')"
  @swipe-top="(item) => handleSwipe(item, 'top')"
>
```

--------------------------------

### Custom Actions Example: ActionButtons.vue

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/examples/custom-actions.md

This component provides the UI for custom action buttons like skip, restore, swipe left, and swipe right. It emits events when buttons are clicked.

```vue
<script setup>
defineEmits(['skip', 'restore', 'swipe-left', 'swipe-right'])
</script>

<template>
  <div class="flex justify-center gap-4">
    <button
      @click="$emit('skip')"
      class="rounded-lg bg-blue-500 px-4 py-2 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
    >
      Skip
    </button>
    <button
      @click="$emit('restore')"
      class="rounded-lg bg-green-500 px-4 py-2 text-white hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50"
    >
      Restore
    </button>
    <button
      @click="$emit('swipe-left')"
      class="rounded-lg bg-red-500 px-4 py-2 text-white hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50"
    >
      Swipe Left
    </button>
    <button
      @click="$emit('swipe-right')"
      class="rounded-lg bg-purple-500 px-4 py-2 text-white hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50"
    >
      Swipe Right
    </button>
  </div>
</template>

```

--------------------------------

### Run Build

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/CONTRIBUTING.md

Execute the build process to generate production-ready files.

```bash
yarn build
```

--------------------------------

### loop Event

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/api/flashcards.md

Emitted when a new loop cycle starts in loop mode. This event fires when all cards have been swiped and the component starts over from the beginning. Only triggered when `loop` prop is enabled.

```APIDOC
## loop

### Description
Emitted when a new loop cycle starts in loop mode. This event fires when all cards have been swiped and the component starts over from the beginning. Only triggered when `loop` prop is enabled.

### Payload
None
```

--------------------------------

### Vue Component for LimitCard Example

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/examples/drag-limits.md

This Vue component, LimitCard.vue, is likely a child component used within the drag limit examples, possibly representing a draggable card that is subject to the defined limits.

```vue
<<< ../../example/limit-usage/LimitCard.vue [LimitCard.vue]
```

--------------------------------

### Run Linting

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/CONTRIBUTING.md

Execute the linter to check code style and identify potential issues.

```bash
yarn lint
```

--------------------------------

### Disabled FlipCard Example

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/api/flipcard.md

Use the `disabled` prop to prevent user interaction with the FlipCard. Set `disabled` to `true` to disable flipping.

```vue
<template>
  <FlipCard :disabled="!allowFlipping">
    <template #front>
      <div class="locked-card">
        <h3>🔒 Locked</h3>
        <p>Complete previous level to unlock</p>
      </div>
    </template>
  </FlipCard>
</template>
```

--------------------------------

### Project Structure Overview

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/CONTRIBUTING.md

An overview of the main directories and their purposes within the Vue3 Flashcards project.

```tree
vue3-flashcards/
├── src/                 # Source code
│   ├── FlashCard.vue   # Main FlashCards component
│   └── index.ts        # Entry point
├── example/            # Interactive examples
├── docs/              # VitePress documentation
├── dist/              # Built files
└── types/             # TypeScript definitions
```

--------------------------------

### Clone Repository

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/CONTRIBUTING.md

Clone the Vue3 Flashcards repository to your local machine after forking it on GitHub.

```bash
git clone https://github.com/YOUR_USERNAME/vue3-flashcards.git
cd vue3-flashcards
```

--------------------------------

### Programmatic Card Swiping and Actions

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/api/flashcards.md

Demonstrates how to use template refs to call methods like swipeLeft, swipeRight, swipeTop, skip, peek, and reset on the FlashCards component.

```vue
<script setup>
const flashcardsRef = ref()

function programmaticSwipeLeft() {
  flashcardsRef.value.swipeLeft()
}

function programmaticSwipeRight() {
  flashcardsRef.value.swipeRight()
}

function programmaticSwipeTop() {
  flashcardsRef.value.swipeTop()
}

function programmaticSkip() {
  flashcardsRef.value.skip()
}

function hintSwipe() {
  // Nudge the card to hint a swipe, then settle it back.
  flashcardsRef.value.peek(0.15, 'right')
  setTimeout(() => flashcardsRef.value.peek(0, 'right'), 250)
}

function animatedReset() {
  flashcardsRef.value.reset({ animated: true, delay: 300 })
}
</script>

<template>
  <FlashCards ref="flashcardsRef" :items="cards" />
  <button @click="programmaticSwipeLeft">
    ❌ Nope
  </button>
  <button @click="programmaticSwipeRight">
    ❤️ Like
  </button>
  <button @click="programmaticSwipeTop">
    ⭐ Super
  </button>
  <button @click="programmaticSkip">
    Skip
  </button>
  <button @click="hintSwipe">
    Hint
  </button>
  <button @click="animatedReset">
    Animated Reset
  </button>
</template>
```

--------------------------------

### Comparing Virtual Rendering Performance

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/advanced/virtual-rendering.md

Demonstrates the difference in DOM nodes between rendering a large dataset without virtual rendering and with a specified `render-limit`. Use virtual rendering for significant performance gains with large datasets.

```vue
<!-- Without virtual rendering -->
<FlashCards :items="Array(10000)">
  <!-- 10,000 DOM nodes -->
</FlashCards>

<!-- With virtual rendering -->
<FlashCards :items="Array(10000)" :render-limit="5">
  <!-- Only 5 DOM nodes -->
</FlashCards>
```

--------------------------------

### Use via CDN

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/guide/installation.md

Import the FlashCards component directly from a CDN link in your HTML file using a script tag with type module.

```html
<script type="module">
  import { FlashCards } from 'https://unpkg.com/vue3-flashcards?module'
</script>

```

--------------------------------

### FlipCard Component Usage

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/examples/flip-cards.md

Demonstrates the basic usage of the FlipCard component, including importing and rendering it within a Vue application. This is suitable for beginners learning to integrate flip card functionality.

```vue
<script setup>
import FlipUsage from '../../example/flip-usage/index.vue'
</script>

<ClientOnly>
  <FlipUsage />
</ClientOnly>
```

--------------------------------

### Scale Transform Usage Example

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/examples/scale-transform.md

This snippet shows how to use the custom scale transform in a Vue component. It imports and renders a `ScaleUsage` component, which likely utilizes the scale transform internally.

```vue
<script setup>
import ScaleUsage from '../../example/scale-usage/index.vue'
</script>

<ClientOnly>
  <ScaleUsage />
</ClientOnly>
```

--------------------------------

### FlashCards with Simple Array Items in Loop Mode

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/advanced/loop-mode.md

Demonstrates loop mode with a simple array of strings as items. The cards will cycle endlessly through 'A', 'B', and 'C'.

```vue
<FlashCards
  :loop="true"
  :items="['A', 'B', 'C']"
>
  <!-- Swipes: A → B → C → A → B → C → ... -->
</FlashCards>
```

--------------------------------

### Update FlashCards Plugin Configuration from v0.x to v1.0+

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/guide/migrating-to-v2.md

When using the Vue plugin, update the configuration object to reflect prop renames. For example, change `threshold` to `swipeThreshold`, `infinite` to `loop`, and `virtualBuffer` to `renderLimit`.

```typescript
// ❌ v0.x
app.use(FlashCardsPlugin, {
  flashCards: { threshold: 150, infinite: true, virtualBuffer: 5 }
})

// ✅ v1.0+
app.use(FlashCardsPlugin, {
  flashCards: { swipeThreshold: 150, loop: true, renderLimit: 5 }
})
```

--------------------------------

### Import TypeScript Definitions

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/api/index.md

Import the necessary TypeScript types for FlashCards and FlipCard components. Ensure these types are correctly referenced in your project.

```typescript
import type { FlashCardsProps, FlipCardProps } from 'vue3-flashcards'
```

--------------------------------

### FlipCard Component Basic Usage

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/essentials/flip-cards.md

Demonstrates how to use the independent FlipCard component. Import FlipCard and use a ref to control its flip method. This is useful for creating interactive cards with front and back content.

```vue
<script setup>
import { FlipCard } from 'vue3-flashcards'
import { ref } from 'vue'

const flipCardRef = ref()

function flip() {
  flipCardRef.value.flip()
}
</script>

<template>
  <FlipCard ref="flipCardRef">
    <template #front>
      <div>Front content</div>
    </template>
    <template #back>
      <div>Back content</div>
    </template>
  </FlipCard>

  <button @click="flip">Flip</button>
</template>
```

--------------------------------

### Create Feature Branch

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/CONTRIBUTING.md

Create a new Git branch for implementing a new feature.

```bash
git checkout -b feat/your-feature-name
```

--------------------------------

### Define Card Interface and Data

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/api/flashcards.md

Define the structure for your flashcards using TypeScript interfaces and initialize a reactive array of cards.

```typescript
interface Card {
  id: number
  title: string
  description: string
  image?: string
}

interface ResetOptions {
  animated?: boolean // Show restore animations (default: false)
  delay?: number // Delay between animations in ms (default: 200)
}

const cards = ref<Card[]>([
  { id: 1, title: 'Card 1', description: 'First card' }
])
```

--------------------------------

### swipeTop()

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/api/flashcards.md

Triggers an upward swipe animation on the current card.

```APIDOC
## swipeTop()

### Description
Triggers upward swipe animation on the current card.

### Method
`() => void`
```

--------------------------------

### Replace Template-Ref Methods from v1 to v2

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/guide/migrating-to-v2.md

Migrate from using `approve()` and `reject()` as template-ref methods in v1 to the new directional methods `swipeRight()` and `swipeLeft()` in v2. These new methods are consistent across all swipe modes.

```typescript
// ❌ v1
flashcardsRef.value.approve()
flashcardsRef.value.reject()

// ✅ v2
flashcardsRef.value.swipeRight()
flashcardsRef.value.swipeLeft()
```

--------------------------------

### Enable Flashcards Resistance with Defaults

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/api/flashcards.md

Enables the rubber-band resistance effect with default threshold and strength values.

```vue
<FlashCards :items="cards" :resistance="{}" />
```

--------------------------------

### Enable Confirm Before Swiping

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/essentials/accessibility.md

Implement a two-step confirmation flow for swipes using `confirmOnKey`. The first key press nudges the card, and a second confirms the action. Escape cancels.

```vue
<FlashCards :items="cards" :a11y="{ confirmOnKey: true }" />
```

--------------------------------

### Hint (Peek) Card Programmatically

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/essentials/actions.md

Use the 'peek' ref-only method to nudge a card towards a direction without completing the swipe. This is useful for previews or confirmation flows.

```vue
<script setup>
import { ref } from 'vue'

const flashcardsRef = ref()

function hint() {
  // Nudge ~15% to the right, then settle back to center.
  flashcardsRef.value.peek(0.15, 'right')
  setTimeout(() => flashcardsRef.value.peek(0, 'right'), 250)
}
</script>

<template>
  <FlashCards ref="flashcardsRef" :items="cards" />
  <button @click="hint">Hint</button>
</template>
```

--------------------------------

### skip()

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/api/flashcards.md

Triggers a skip animation for the current card, moving to the next card without a directional swipe.

```APIDOC
## skip()

### Description
Triggers skip animation on the current card - moves to next card without swiping in any direction.

### Method
`() => void`
```

--------------------------------

### Card Styling with CSS

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/essentials/card-content.md

Apply CSS to style the appearance of individual cards. Cards are positioned absolutely and sized by their container.

```css
.card {
  width: 300px;
  height: 400px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
```

--------------------------------

### peek(percent, direction)

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/api/flashcards.md

Moves the active card towards a specified direction by a given percentage without completing the swipe. This is useful for providing visual hints or implementing confirmation flows.

```APIDOC
## peek(percent, direction)

### Description
Moves the active card toward `direction` to `percent` (a `0`–`1` fraction of [`swipeThreshold`](#swipethreshold)) **without** completing the swipe — the same rotation/scale ([`transformStyle`](#transformstyle)) and directional indicators react exactly as they do mid-drag. Useful for hints (nudge the card to invite a swipe) and for building a "confirm before swiping" flow.
  - `percent` is clamped to `0`–`1`. `peek(0, direction)` settles the card back to center.
  - `direction` is required. A direction that is not enabled is ignored, so `peek` can never reveal a pose the user could not reach by dragging.

### Method
`(percent: number, direction: 'top' | 'left' | 'right' | 'bottom') => void`

### Parameters
#### Path Parameters
- **percent** (number) - Required - The percentage to move the card (0 to 1).
- **direction** (string) - Required - The direction to peek ('top', 'left', 'right', or 'bottom').

### Request Example
```javascript
flashcardsRef.value.peek(0.15, 'right') // nudge ~15% to the right
setTimeout(() => flashcardsRef.value.peek(0, 'right'), 250) // settle back
```
```

--------------------------------

### Push Branch to Fork

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/CONTRIBUTING.md

Push your local feature or fix branch to your GitHub fork.

```bash
git push origin your-branch-name
```

--------------------------------

### Set Stack Size

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/advanced/stack-configuration.md

Configure the number of cards displayed behind the active card. The default is 0, meaning no stacking.

```vue
<FlashCards :stack="3" :items="cards">
  <!-- Shows 3 cards behind the active card -->
</FlashCards>
```

--------------------------------

### Configure Flashcards Resistance Threshold

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/api/flashcards.md

Sets a custom threshold for when resistance begins and defines the swipe threshold.

```vue
<FlashCards
  :items="cards"
  :resistance="{ threshold: 100 }"
  :swipe-threshold="150"
/>
```

--------------------------------

### Tracking Drag State

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/essentials/events.md

Monitor drag interactions in real-time. `dragstart` and `dragend` provide the item, while `dragmove` includes the item, direction, and drag delta.

```vue
<script setup>
import { ref } from 'vue'

const isDragging = ref(false)

// type: 'left' | 'right' | 'top' | 'bottom' | null
// delta: -1 to 1 (how far toward the swipe threshold)
function handleDragMove(item, type, delta) {
  console.log(`dragging ${item.id} toward ${type} (${delta.toFixed(2)})`)
}
</script>

<template>
  <FlashCards
    :items="cards"
    @dragstart="isDragging = true"
    @dragmove="handleDragMove"
    @dragend="isDragging = false"
  >
    <template #default="{ item }">
      <!-- card content -->
    </template>
  </FlashCards>
</template>
```

--------------------------------

### Basic Usage Component

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/examples/basic-usage.md

This is the main component for basic flashcard usage. It expects an array of items for the cards and allows custom content rendering via the default slot. Swipe events can be handled for user interactions.

```vue
<script setup>
import BasicUsage from '../../example/basic-usage/index.vue'
</script>

<ClientOnly>
  <BasicUsage />
</ClientOnly>
```

--------------------------------

### restore()

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/api/flashcards.md

Returns to the previous card if available. This method allows users to undo the last swipe action.

```APIDOC
## restore()

### Description
Returns to the previous card if available.

### Method
`() => void`
```

--------------------------------

### Configure Nuxt Module

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/guide/installation.md

Integrate vue3-flashcards into your Nuxt application by adding it to the nuxt.config.ts file and setting module-specific options. Components are auto-imported.

```typescript
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['vue3-flashcards/nuxt'],
  flashcards: {
    stack: 3,
    swipeThreshold: 150,
  }
})

```

--------------------------------

### reset(options?)

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/api/flashcards.md

Resets all cards to their initial state, clearing swipe history and removing animating cards. Options can be provided to enable animations and set delays.

```APIDOC
## reset(options?)

### Description
Resets all cards to their initial state. Clears the swipe history and removes all animating cards, effectively returning the component to its starting state.

### Method
`(options?: ResetOptions) => void`

### Parameters
#### Path Parameters
- **options** (object) - Optional - Configuration options for resetting.
  - **animated** (boolean) - Optional - If true, restores cards one by one with animations (default: false).
  - **delay** (number) - Optional - Delay between animations in ms when animated=true (default: 200).

### Request Example
```javascript
// Instant reset (default)
flashcardsRef.value.reset()

// Animated reset with default delay (200ms)
flashcardsRef.value.reset({ animated: true })

// Animated reset with custom delay
flashcardsRef.value.reset({ animated: true, delay: 500 })
```
```

--------------------------------

### FlipCard with Front Content and Reveal Button

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/api/flipcard.md

This snippet demonstrates how to use the `front` slot of the FlipCard component. It includes a button that triggers the `flip` method to reveal the back content.

```vue
<template>
  <FlipCard>
    <template #front="{ flip }">
      <div class="card-front">
        <h3>Question</h3>
        <p>What is the capital of France?</p>
        <button @click="flip">
          Reveal Answer
        </button>
      </div>
    </template>
  </FlipCard>
</template>
```

--------------------------------

### FlashCards with All Four Swipe Directions

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/api/flashcards.md

Configure FlashCards to support swiping in all four directions: left, right, top, and bottom. This provides the most flexible interaction model.

```vue
<FlashCards :items="cards" :swipe-direction="['left', 'right', 'top', 'bottom']" />
```

--------------------------------

### Handling Special Events

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/essentials/events.md

Utilize special events like `restore`, `skip`, and `loop` for specific card states and component behaviors.

```vue
<FlashCards
  :items="cards"
  @restore="handleRestore"
  @skip="handleSkip"
  @loop="handleLoop"
>
  <!-- ... -->
</FlashCards>
```

--------------------------------

### renderLimit

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/api/flashcards.md

Specifies the number of cards to render in the DOM, used for virtual rendering with large datasets.

```APIDOC
## `renderLimit`

### Description
Number of cards to render in dom. Used for virtual rendering with large datasets. Can't be lower than 1.

### Type
`number`

### Default
`3`

### Example
```vue
<FlashCards :items="cards" :render-limit="5" />
```
```

--------------------------------

### flip() Method

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/api/flipcard.md

Programmatically flips the card. This method respects the `disabled` and `waitAnimationEnd` props.

```APIDOC
## Method: flip()

### Description
Programmatically flips the card. This method respects the `disabled` and `waitAnimationEnd` props.

### Usage
Call this method on the FlipCard instance to trigger a flip.

```javascript
flipCardRef.value.flip()
```
```

--------------------------------

### Pull Request Template

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/CONTRIBUTING.md

A template for creating pull request descriptions, including change type, testing status, and related issues.

```markdown
## Description
Brief description of changes

## Type of Change
- [ ] Bug fix
- [ ] New feature
- [ ] Documentation update
- [ ] Breaking change

## Testing
- [ ] Tested locally
- [ ] Build passes
- [ ] Examples work correctly

## Related Issues
Fixes #(issue number)
```

--------------------------------

### loop

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/api/flashcards.md

Enables loop swiping mode, allowing cards to loop endlessly after reaching the end of the dataset.

```APIDOC
## `loop`

### Description
Enables loop swiping mode. When enabled, cards will loop endlessly after reaching the end. Useful for small datasets where you want continuous swiping.

### Type
`boolean`

### Default
`false`

### Example
```vue
<FlashCards :items="cards" :loop="true" />
```
```

--------------------------------

### stack

Source: https://github.com/vad1ym/vue3-flashcards/blob/main/docs/api/flashcards.md

Determines the number of cards to show stacked behind the active card, creating a visual depth effect.

```APIDOC
## `stack`

### Description
Number of cards to show stacked behind the active card. Creates a visual depth effect where multiple cards are visible with scaling and positioning offsets.

### Type
`number`

### Default
`0`

### Warning
When stack is greater than renderLimit, renderLimit is automatically increased to stack + 2 to ensure proper rendering.

### Example
```vue
<FlashCards :items="cards" :stack="5" />
```
```