v1.0.0

🎉 Vue3 Flashcards v1.0.0

Vue3 Flashcards v1.0.0 is here! 🚀

🎯 Release Goals

This v1.0.0 release focuses on API stabilization and consistency:

• API Stabilization: Establish a consistent API that follows semantic versioning going forward
• Improved Naming: Clean up prop names for better developer experience
• New Features: Add vertical swiping support alongside existing horizontal mode
• Migration Guide: Provide clear upgrade path for existing users

---

⚠️ Breaking Changes

Important: This release contains several breaking changes to improve API consistency and developer experience.

🔄 Prop Renames (Breaking Changes)

The following props have been renamed for better clarity and consistency:

Old Prop Name	New Prop Name	Reason
trackBy	itemKey	More descriptive - clearly indicates it's the key used to track items
threshold	swipeThreshold	More specific - clarifies this is the swipe completion threshold
maxDraggingX	maxDragX	Shorter, cleaner naming consistent with maxDragY
maxDraggingY	maxDragY	Shorter, cleaner naming consistent with maxDragX
infinite	loop	More precise terminology - cards loop rather than being infinite
virtualBuffer	renderLimit	More descriptive - clearly indicates DOM rendering limits

🔧 Behavior Changes

• Reset method: The reset() method now ignores the waitAnimationEnd prop to ensure reliable reset functionality
• Text selection: Automatic prevention of text selection during drag interactions (when drag is enabled)

---

✨ New Features

🔄 Vertical Swipe Direction Support

New swipeDirection prop with support for both horizontal and vertical swiping:

<!-- Horizontal swiping (default) - traditional left/right with rotation -->
<FlashCards :items="cards" swipe-direction="horizontal" />

<!-- Vertical swiping - up/down with scaling effects -->
<FlashCards :items="cards" swipe-direction="vertical" />

Key differences between directions:

• Horizontal: Swipe left/right, rotation transform, horizontal exit animations
• Vertical: Swipe up/down, scaling transform, vertical exit animations

🔧 Enhanced Actions Slot

The actions slot now includes an isStart property:

<template #actions="{ approve, reject, restore, reset, isEnd, isStart, canRestore }">
  <button :disabled="isStart || !canRestore" @click="restore">
    ↩️ Restore
  </button>
</template>

---

🐛 Bug Fixes

• Fixed reset functionality to work reliably regardless of waitAnimationEnd setting
• Improved reset method signature consistency
• Enhanced text selection prevention during drag interactions
• Corrected CSS transition class naming
• Simplified stack list logic for better maintainability and performance

---

📖 Migration Guide

Step 1: Update Prop Names

Replace the old prop names with their new equivalents:

<!-- ❌ Before (v0.x) -->
<FlashCards
  :items="cards"
  track-by="id"
  :threshold="150"
  :max-dragging-x="200"
  :max-dragging-y="100"
  :infinite="true"
  :virtual-buffer="5"
/>

<!-- ✅ After (v1.0+) -->
<FlashCards
  :items="cards"
  item-key="id"
  :swipe-threshold="150"
  :max-drag-x="200"
  :max-drag-y="100"
  :loop="true"
  :render-limit="5"
/>

Step 2: Update Global Configuration

If using the Vue plugin or Nuxt module:

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

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

Step 3: Review Custom CSS

Check for any custom CSS targeting the old transition class names and update accordingly.

Step 4: Test Reset Functionality

The reset() method behavior has improved - test that it works as expected in your implementation.

---

🎯 What's Next

We're committed to maintaining API stability while continuing to enhance the library:

• Keyboard Navigation: Arrow keys, Enter, Space, and Tab support
• Enhanced Animations: Spring physics and improved visual feedback
• Advanced Events: Granular drag events (onDragStart, onDragMove, onDragCancel, onDragCommit)
• Multi-Direction Swipes: Support for 4+ swipe directions with custom actions
• Composable API: Vue composable for programmatic control
• Accessibility: Screen reader support and focus management
• Advanced Interactions: Instagram/TikTok-style vertical scrolling modes
• Shuffle & Reorder: Animated card shuffling and manual reordering

Get Involved

• 🐛 Report Issues: GitHub Issues
• 💡 Feature Requests: We welcome your ideas and suggestions!
• 📚 Documentation: Help us improve our docs
• ⭐ Star the Project: Show your support on GitHub

---

🙏 Acknowledgments

Thank you to our early adopters and contributors who helped shape this stable release. Your feedback has been invaluable in creating a robust and developer-friendly API.

---

📦 Installation & Upgrade

# npm
npm install vue3-flashcards@latest

# yarn
yarn add vue3-flashcards@latest

# pnpm
pnpm add vue3-flashcards@latest

---

Documentation: https://vad1ym.github.io/vue3-flashcards

Interactive Demo: https://vad1ym.github.io/vue3-flashcards/interactive-demo.html