A Vue 3 component that provides an intuitive and interactive way to manage arrays of strings with real-time updates and smooth animations.
- Dynamic array management through an intuitive UI
- Real-time array updates with v-model support
- Smooth animations for adding and removing items
- Responsive design that works on all screen sizes
- Keyboard navigation support
- Automatic empty input for adding new values
- Clean and modern design with hover effects
- Built with Vue 3 and TypeScript
- Uses Tailwind CSS for styling
- Includes comprehensive test suite
- Fully responsive design
<script setup lang="ts">
import { ref } from 'vue';
import XArray from './components/XArray.vue';
const myArray = ref<string[]>(['one', 'two']);
</script>
<template>
<XArray v-model="myArray" />
</template>- v-model Support: Accepts and updates an array of strings
- Dynamic Inputs: Each string is rendered as a separate input field
- Auto-cleanup: Empty values are automatically removed from the array
- Add New Values: Always shows one empty input for adding new values
- Keyboard Navigation:
- Enter: Move to next input
- Backspace: Remove empty value and move to previous input
# Install dependencies
npm install
# Start development server
npm run dev
# Run tests
npm run test
# Build for production
npm run buildThe component includes a comprehensive test suite that verifies:
- v-model integration
- Input rendering
- Value updates
- Empty value handling
- Extra input functionality
- Dynamic array management
- Modern browsers (Chrome, Firefox, Safari, Edge)
- Responsive design for mobile and desktop views
MIT