feat: Migrate QInputEx to Quasar v2 and Vue 3

[padeoe]

Summary

This PR provides a comprehensive migration of the QInputEx component library from Quasar v1/Vue 2 to Quasar v2/Vue 3, including a complete Quasar App Extension structure for easy integration.

Motivation

• Quasar v1 is no longer actively maintained
• Vue 3 provides better performance and developer experience
• Many users have requested Quasar v2 compatibility
• Need for easier installation via Quasar App Extension

Changes

Breaking Changes

• Vue 3 Required: Now requires Vue 3.0.0+ (previously Vue 2.x)
• Quasar v2 Required: Now requires Quasar 2.0.0+ (previously Quasar v1)
• v-model syntax: Changed from :value + @input to v-model (uses modelValue prop)
• Event names: @input changed to @update:modelValue
• Vue I18n v9: Now requires vue-i18n 9.0.0+ (previously v8)

New Features

• ✅ Full Vue 3 Composition API support
• ✅ Improved TypeScript integration
• ✅ Better tree-shaking with modern build output
• ✅ Vite-based development environment
• ✅ Complete Quasar App Extension for easy installation
• ✅ Auto-registration of components
• ✅ Optional example page installation

Technical Implementation

1. New Components: Created Vue 3 versions of components

   • qinputex-v2.tsx: Main component using Composition API
   • qinput-history-v2.tsx: History component migrated from class-based to Composition API

2. Type Definitions Updated: All input type definitions updated for Vue 3 context handling

   • Fixed this.$attrs access with optional chaining
   • Updated event handler context binding

3. Fixed Issues:

   • ✅ Popup close button functionality
   • ✅ Date/time picker selection in custom input types
   • ✅ Chinese language support in date picker
   • ✅ Time picker auto-close behavior

4. Quasar App Extension Structure:

   app-extension-qinputex/
   ├── package.json
   ├── README.md
   └── src/
       ├── index.js          # Runtime configuration
       ├── install.js        # Installation script
       ├── uninstall.js      # Cleanup script
       ├── prompts.js        # Installation options
       └── templates/        # Boot file and examples
   

5. Modern Build System:

   • Migrated to Vite for builds
   • ESM and UMD output formats
   • Proper package.json exports field

6. Documentation:

   • Updated README.md with Quasar v2 examples
   • Added comprehensive MIGRATION_GUIDE.md
   • Added technical migration notes in MIGRATION_VUE3_QUASAR2.md
   • Created App Extension README

Installation

As Quasar App Extension (Recommended)

quasar ext add qinputex

Manual Installation

npm install qinputex

Testing

All input types have been tested:

• ✅ Text, textarea, number inputs
• ✅ Date picker with smart close
• ✅ Time picker (with and without seconds)
• ✅ DateTime picker
• ✅ Color picker
• ✅ Password input with visibility toggle
• ✅ Search input with history management
• ✅ App Extension installation process

Migration Guide

A comprehensive migration guide is included to help users upgrade their projects. Key points:

1. Update dependencies (Quasar v2, Vue 3, Vue I18n v9)
2. Change from :value/@input to v-model
3. Update custom input type definitions if any
4. Or simply use: quasar ext add qinputex

Backwards Compatibility

The original v1 components are preserved in their original files. The main export has been updated to use the v2 components, but users can still import v1 components directly if needed during migration.

Checklist

• All components migrated to Vue 3
• TypeScript definitions updated
• Documentation updated
• Migration guide created
• All input types tested
• Debug logs removed
• Code cleaned up
• Quasar App Extension created
• Modern build configuration
• Installation templates created

Related Issues

This PR addresses the need for Quasar v2 compatibility as discussed in various community forums and issues.

---

Note: This is a major version change and will require users to update their projects to Vue 3 and Quasar v2.

🤖 Generated with Claude Code