+
+
+
+```
+
+### Step 4: Update Custom Input Types
+
+If you have custom input types, update them for Vue 3 compatibility:
+
+```javascript
+// Updated for Vue 3
+const MyCustomInput = {
+ name: 'my-custom',
+ type: 'text',
+ attaches: {
+ append: {
+ icon: 'event',
+ popup: {
+ name: 'QDate',
+ on: {
+ input(value, reason, detail, attach) {
+ // Use optional chaining for safety
+ const smartClosed = this.$attrs?.smartClosed
+ if (smartClosed !== false && ['day', 'today'].includes(reason)) {
+ attach.popup?.hide?.()
+ }
+ return value
+ }
+ }
+ }
+ }
+ }
+}
+```
+
+## Common Issues and Solutions
+
+### Issue 1: Component not updating
+
+**Problem:** The component value doesn't update when using v-model.
+
+**Solution:** Make sure you're using `v-model` or the explicit `:model-value` and `@update:model-value` syntax.
+
+### Issue 2: TypeScript errors
+
+**Problem:** TypeScript errors with Vue 3 types.
+
+**Solution:** Update your TypeScript configuration and ensure you have the latest Vue 3 type definitions:
+
+```json
+{
+ "compilerOptions": {
+ "target": "esnext",
+ "module": "esnext",
+ "moduleResolution": "node",
+ "lib": ["esnext", "dom"],
+ "jsx": "preserve"
+ }
+}
+```
+
+### Issue 3: Popup not closing
+
+**Problem:** Date/time popups don't close automatically.
+
+**Solution:** Check your popup close logic and ensure you're calling the hide method correctly:
+
+```javascript
+attach.popup?.hide?.()
+```
+
+### Issue 4: i18n Errors
+
+**Problem:** Vue I18n errors after migration.
+
+**Solution:** Update to Vue I18n v9 and use the new API:
+
+```javascript
+import { createI18n } from 'vue-i18n'
+
+const i18n = createI18n({
+ locale: 'en-us',
+ fallbackLocale: 'en-us',
+ messages: {
+ // your messages
+ }
+})
+```
+
+## New Features in v2
+
+- Full Vue 3 Composition API support
+- Better TypeScript integration
+- Improved performance
+- Modern build output (ES modules)
+
+## Need Help?
+
+If you encounter issues not covered in this guide:
+
+1. Check the [README](./README.md) for updated usage examples
+2. Review the component source code for API changes
+3. Open an issue on the GitHub repository
+
+Happy migrating! ๐
\ No newline at end of file
diff --git a/MIGRATION_VUE3_QUASAR2.md b/MIGRATION_VUE3_QUASAR2.md
new file mode 100644
index 0000000..7b6af0e
--- /dev/null
+++ b/MIGRATION_VUE3_QUASAR2.md
@@ -0,0 +1,54 @@
+# Vue 3 and Quasar v2 Migration Updates
+
+This document summarizes the changes made to the QInputEx type files for Vue 3 and Quasar v2 compatibility.
+
+## Updated Files
+
+### 1. `/src/components/qinputex/consts.ts`
+- Replaced Vue 2 imports (`VueConstructor`, `vue-property-decorator`) with Vue 3 equivalents
+- Updated type definitions to use `Component` and `DefineComponent` from Vue 3
+- Changed `Vue` references to `VueComponent` for better Vue 3 compatibility
+
+### 2. `/src/components/qinputex/types/time.ts`
+- Added explicit `this: any` typing to event handler functions
+- Updated `$attrs` access to use optional chaining (`this.$attrs?.smartClosed`)
+- Added comments explaining Vue 3 context handling
+
+### 3. `/src/components/qinputex/types/datetime.ts`
+- Updated both date and time popup input handlers with explicit `this: any` typing
+- Changed `$attrs` access to use optional chaining in both handlers
+- Added Vue 3 compatibility comments
+
+### 4. `/src/components/qinputex/types/fulltime.ts`
+- Added explicit `this: any` typing to the input event handler
+- Updated `$attrs` access pattern for Vue 3 compatibility
+- Added explanatory comments
+
+### 5. `/src/components/qinputex/types/password.ts`
+- Added clarifying comments to the click handler
+- The password type was already Vue 3 compatible
+
+### 6. `/src/components/qinputex/types/search/search.ts`
+- Updated the search method to use optional chaining for `$attrs` access
+- Fixed the click handler typing from `InputType` to `any`
+- Added explicit `this: any` to the history click handler
+- Updated method call pattern in the icon click handler
+
+### 7. `/src/components/qinputex/types/color.ts`
+- No changes needed - this file was already Vue 3 compatible
+
+## Key Changes for Vue 3 Compatibility
+
+1. **Event Handler Context**: All event handlers now explicitly declare `this: any` as their first parameter to ensure proper typing in Vue 3.
+
+2. **`$attrs` Access**: Updated all `this.$attrs` access to use optional chaining (`this.$attrs?.propertyName`) for safer access in Vue 3.
+
+3. **Type Imports**: Replaced Vue 2 specific imports with Vue 3 equivalents in the consts.ts file.
+
+4. **Method Binding**: Updated method calls to use explicit binding patterns where needed (e.g., `this.props.search.call(this)`).
+
+## Notes
+
+- The main component file (`qinputex.ts`) still uses `vue-property-decorator` which may need to be migrated to Vue 3 Composition API in the future.
+- All popup handling remains compatible with Quasar v2's QPopupProxy component.
+- Event emission patterns (`this.$emit`) remain the same in Vue 3.
\ No newline at end of file
diff --git a/PR_DESCRIPTION.md b/PR_DESCRIPTION.md
new file mode 100644
index 0000000..2180723
--- /dev/null
+++ b/PR_DESCRIPTION.md
@@ -0,0 +1,90 @@
+# Migrate QInputEx to Quasar v2 and Vue 3
+
+## Summary
+
+This PR provides a comprehensive migration of the QInputEx component library from Quasar v1/Vue 2 to Quasar v2/Vue 3. All component functionality has been preserved while updating to modern Vue 3 patterns and APIs.
+
+## Motivation
+
+- Quasar v1 is no longer actively maintained
+- Vue 3 provides better performance and developer experience
+- Many users have requested Quasar v2 compatibility
+
+## 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
+
+### 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. **Documentation**:
+ - Updated README.md with Quasar v2 examples
+ - Added comprehensive MIGRATION_GUIDE.md
+ - Added technical migration notes in MIGRATION_VUE3_QUASAR2.md
+
+## 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
+
+## 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
+
+## 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.
+
+## Screenshots
+
+[The functionality remains visually identical to v1]
+
+## Checklist
+
+- [x] All components migrated to Vue 3
+- [x] TypeScript definitions updated
+- [x] Documentation updated
+- [x] Migration guide created
+- [x] All input types tested
+- [x] Debug logs removed
+- [x] Code cleaned up
+
+## 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.
\ No newline at end of file
diff --git a/README.md b/README.md
index 40a5553..dfa2f8b 100644
--- a/README.md
+++ b/README.md
@@ -1,167 +1,224 @@
-# The Advance Input Component for Quasar@v1
+# QInputEx - Advanced Input Component for Quasar v2
-The Advance Input Component for Quasar is used as single-line input box for date, time, password, color, selete etc.
+An advanced input component for Quasar Framework v2 that provides enhanced input types including date, time, password, color, search, and more.

-## Usage
-
-Above Quasar@v1.0.0-beta.11.
+## Features
-You should enable these quasar components before used(`quasar.conf.js`):
+- ๐ฏ **Multiple Input Types**: date, time, datetime, fulltime, password, color, search, and more
+- ๐ **Search with History**: Built-in search history management with pinned items
+- ๐ **Smart Date/Time Pickers**: Integrated with Quasar's QDate and QTime components
+- ๐จ **Color Picker**: Built-in color selection support
+- ๐ **Password Toggle**: Show/hide password functionality
+- ๐ฐ **Custom Input Types**: Easy to create and register new input types
+- ๐ช **TypeScript Support**: Full TypeScript support with type definitions
+- ๐ **Vue 3 & Composition API**: Built for Vue 3 with Composition API
-QBtn, QIcon, QPopupProxy, QCard, QCardSection, QToolbar, QToolbarTitle,
-QInput, QSelect, QDate, QTime, QColor, QChip
+## Requirements
-The quasar directive: `close-popup` and the `vue-i18n` plugin.
+- Quasar v2.0.0+
+- Vue 3.0.0+
+- Vue I18n 9.0.0+
-There are four internal slots as the same as the `QInput` component:
+## Installation
-* `before`
-* `prepend`
-* `append`
-* `after`
+### As a Quasar App Extension (Recommended)
-There are new two external slots in the `QInputEx` component:
+```bash
+quasar ext add qinputex
+```
-* `top`: the slot on the top of QInput Component
-* `bottom`: the slot on the bottom of QInput Component
+This will handle all the setup automatically, including:
+- Installing the npm package
+- Registering components globally
+- Adding necessary boot files
+- Configuring your project
-new properties:
+### Manual Installation
-* `type` *string|InputType*
- * `string`: the exists(registered) input type name.
- * `InputType`: customize input type or override exists InputType.
- * name *string* : it will override the exists InputType if the name is exists
-* `slots`: (TODO: not done)
- * `replaced`: `{'slotName': true } | 'slotName' | ['slotName', ...]`
- * replaced the original attach slot, not insert to the original attach slot if true.
- * `afterAttach`: `{'slotName': true } | 'slotName' | ['slotName', ...]`
- * the user defined slot will be inserted after the original attach slot if true.
+```bash
+npm install qinputex
+# or
+yarn add qinputex
+# or
+pnpm add qinputex
+```
-The `qinputex/dist/` is output for `es2015`, `esm`, `umd`, `cjs`.
+### Quasar Configuration
+
+Enable required Quasar components in your `quasar.config.js`:
+
+```javascript
+framework: {
+ components: [
+ 'QBtn',
+ 'QIcon',
+ 'QPopupProxy',
+ 'QCard',
+ 'QCardSection',
+ 'QToolbar',
+ 'QToolbarTitle',
+ 'QInput',
+ 'QSelect',
+ 'QDate',
+ 'QTime',
+ 'QColor',
+ 'QChip'
+ ]
+}
+```
-`require('qinputex/dist/es2015/components/qinputex/qinputex')` will only register the basic input types(text, textarea, number) to `QInputEx`.
+## Usage
-`require('qinputex/dist/es2015/')` will register all input types to `QInputEx`
+### Basic Usage
-* text, textarea, number
-* color
-* date
-* datetime
-* fulltime
-* time
-* password: show password or not.
-* search:
- * `search` event
- * `q-input-history` as chips
- * history: ['search history', 'history2', ...]
- * pinHistory: fixed position
- * [{icon:'cake',value:'some cake', textColor: 'white', color:'secondary'}],
- * maxHistory: 3 the max history item to keep.
- * icon: 'search' default chip icon.
- * color: 'primary' default chip color,
- * textColor: 'white' default chip text color...
+```vue
+
+
+
-### Demo
+
+```
-@Component({
- components: {
- QInputEx,
- }
-})
-export class MyApp extends Vue {
- protected searchHistory: InputHistoryItem[] = [];
- render(h: CreateElement) {
- // return h(QInputEx, {props:{type: 'color', value: '#ff0000'}})
- return ;
- return console.log(`search... ${text}`)}
- q-input-history={{
- history: this.searchHistory,
- pinHistory:[{icon:'cake',value:'nice cake'}],
- maxHistory: 3,
- icon: 'search',
- color: 'white',
- textColor: 'black',
- }}
- />;
+### Available Input Types
+
+- `text` - Standard text input
+- `textarea` - Multi-line text input
+- `number` - Number input
+- `date` - Date picker (YYYY/MM/DD)
+- `time` - Time picker (HH:mm)
+- `fulltime` - Time picker with seconds (HH:mm:ss)
+- `datetime` - Combined date and time picker
+- `color` - Color picker
+- `password` - Password input with visibility toggle
+- `search` - Search input with history management
+
+### Search Input with History
+
+```vue
+
+
+
+
+
```
-## Create a new input type
+### Slots
-It can register other input types more easy. such as the date type for QDate:
+QInputEx supports all QInput slots plus two additional external slots:
-```ts
-import { QInputEx, register, InputType } from 'qinputex';
+**Internal slots** (same as QInput):
+- `before`
+- `prepend`
+- `append`
+- `after`
-function padStr(value: number, size: number = 2): string {
- var s = String(value);
- while (s.length < size) {s = "0" + s;}
- return s;
-}
+**External slots** (new):
+- `top` - Content above the input
+- `bottom` - Content below the input
-function getCurrentYM() {
- const vDate = new Date();
- const result = vDate.getFullYear() + '/' + padStr(vDate.getMonth()+1, 2);
- return result;
-}
+### Custom Input Types
+
+You can create and register custom input types:
-export const DateInput: InputType = {
- name: 'date',
- type: 'text',
+```javascript
+import { register } from 'qinputex'
+
+const CustomDateInput = {
+ name: 'custom-date',
+ type: 'tel',
mask: 'date',
rules: ['date'],
attaches: {
- 'append': {
+ append: {
icon: 'event',
popup: {
- ref: 'date',
name: 'QDate',
attrs: {
- 'default-year-month': getCurrentYM()
+ 'today-btn': true,
+ mask: 'YYYY/MM/DD'
},
on: {
input(value, reason, detail, attach) {
- // close the popup.
- if (['day', 'today'].indexOf(reason) !== -1) attach.popup.hide();
- // if you wanna change the value here:
- return value;
+ // Auto-close on date selection
+ if (['day', 'today'].includes(reason)) {
+ attach.popup?.hide()
+ }
+ return value
}
}
}
-
}
}
}
-const PasswordInput = {
- name: 'password',
- type: 'password',
- attaches: {
- 'before': {
- icon: 'vpn_key',
- },
- 'append': {
- icon: 'visibility',
- click: function() {
- this.isVisiblePwd = !this.isVisiblePwd;
- this.attaches.append.icon = this.isVisiblePwd ? 'visibility_off' : 'visibility';
- this.nativeType = this.isVisiblePwd ? 'text': 'password';
- }
- }
- }
-}
+register(CustomDateInput)
+```
+
+## Migration from Quasar v1
+
+If you're migrating from Quasar v1, please refer to the [Migration Guide](./MIGRATION_GUIDE.md).
-register(DateInput);
-register(PasswordInput);
+Key changes:
+- Use `v-model` instead of `:value` and `@input`
+- Vue 3 Composition API support
+- Updated event names (e.g., `@update:modelValue`)
+
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Start dev server
+pnpm dev
+
+# Build for production
+pnpm build
+
+# Run tests
+pnpm test
```
+## License
+
+MIT
+
+## Contributing
+Contributions are welcome! Please feel free to submit a Pull Request.
\ No newline at end of file
diff --git a/app-extension-qinputex/README.md b/app-extension-qinputex/README.md
new file mode 100644
index 0000000..075f097
--- /dev/null
+++ b/app-extension-qinputex/README.md
@@ -0,0 +1,134 @@
+# Quasar App Extension - QInputEx
+
+> Advanced Input Component for Quasar Framework v2
+
+This is the official Quasar App Extension for QInputEx, providing an easy way to add advanced input components to your Quasar project.
+
+## Features
+
+- ๐ฏ **Multiple Input Types**: date, time, datetime, fulltime, password, color, search
+- ๐ **Search with History**: Built-in search history management
+- ๐ **Smart Date/Time Pickers**: Integrated with Quasar's components
+- ๐จ **Easy Installation**: One command to add to your project
+- ๐ **Auto Import**: Components are automatically registered globally
+
+## Install
+
+```bash
+quasar ext add qinputex
+```
+
+## Uninstall
+
+```bash
+quasar ext remove qinputex
+```
+
+## Usage
+
+Once installed, you can use QInputEx components in your templates without importing:
+
+```vue
+
+
+
+
+
+
+
+```
+
+### Available Input Types
+
+- `text` - Standard text input
+- `textarea` - Multi-line text input
+- `number` - Number input
+- `date` - Date picker (YYYY/MM/DD)
+- `time` - Time picker (HH:mm)
+- `fulltime` - Time picker with seconds (HH:mm:ss)
+- `datetime` - Combined date and time picker
+- `color` - Color picker
+- `password` - Password input with visibility toggle
+- `search` - Search input with history management
+
+### Search Input with History
+
+```vue
+
+
+
+
+
+```
+
+### Slots
+
+QInputEx supports all QInput slots plus two additional:
+
+- `top` - Content above the input
+- `bottom` - Content below the input
+
+```vue
+
+
+ Top content
+
+
+
Bottom content
+
+
+```
+
+## Manual Import
+
+If you prefer manual imports or need tree-shaking:
+
+```javascript
+import { QInputEx } from 'qinputex'
+
+export default {
+ components: {
+ QInputEx
+ }
+}
+```
+
+## API
+
+See the [main QInputEx documentation](https://github.com/snowyu/qinputex) for detailed API reference.
+
+## Support
+
+- [GitHub Issues](https://github.com/snowyu/qinputex/issues)
+- [Documentation](https://github.com/snowyu/qinputex)
+
+## License
+
+MIT
\ No newline at end of file
diff --git a/app-extension-qinputex/package.json b/app-extension-qinputex/package.json
new file mode 100644
index 0000000..dc4dcd4
--- /dev/null
+++ b/app-extension-qinputex/package.json
@@ -0,0 +1,39 @@
+{
+ "name": "quasar-app-extension-qinputex",
+ "version": "2.0.0",
+ "description": "QInputEx - Advanced Input Component for Quasar Framework v2",
+ "author": "Riceball LEE ",
+ "license": "MIT",
+ "main": "src/index.js",
+ "publishConfig": {
+ "access": "public"
+ },
+ "bugs": "https://github.com/snowyu/qinputex/issues",
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/snowyu/qinputex.git"
+ },
+ "homepage": "https://github.com/snowyu/qinputex",
+ "dependencies": {
+ "qinputex": "^2.0.0"
+ },
+ "peerDependencies": {
+ "quasar": "^2.0.0"
+ },
+ "engines": {
+ "node": ">= 14"
+ },
+ "keywords": [
+ "quasar",
+ "quasar-app-extension",
+ "quasar-v2",
+ "input",
+ "date",
+ "time",
+ "datetime",
+ "color",
+ "password",
+ "search",
+ "qinputex"
+ ]
+}
\ No newline at end of file
diff --git a/app-extension-qinputex/src/index.js b/app-extension-qinputex/src/index.js
new file mode 100644
index 0000000..01661f6
--- /dev/null
+++ b/app-extension-qinputex/src/index.js
@@ -0,0 +1,70 @@
+/**
+ * Quasar App Extension index/runner script
+ * (runs on each dev/build)
+ *
+ * Docs: https://quasar.dev/app-extensions/development-guide/index-api
+ * API: https://github.com/quasarframework/quasar/blob/master/app/lib/app-extension/IndexAPI.js
+ */
+
+export default function (api) {
+ // Quasar compatibility check
+ api.compatibleWith('quasar', '^2.0.0')
+ api.compatibleWith('@quasar/app-vite', '^1.0.0 || ^2.0.0')
+ api.compatibleWith('@quasar/app-webpack', '^3.0.0 || ^4.0.0')
+
+ // Register boot file
+ api.extendQuasarConf((conf, api) => {
+ // Make sure qinputex boot file is registered
+ const bootFile = '~quasar-app-extension-qinputex/src/boot/register.js'
+ if (!conf.boot.includes(bootFile)) {
+ conf.boot.push(bootFile)
+ }
+
+ // Add qinputex transpile
+ conf.build = conf.build || {}
+ conf.build.transpileDependencies = conf.build.transpileDependencies || []
+
+ const transpileTargets = ['qinputex', 'quasar-app-extension-qinputex']
+ transpileTargets.forEach(target => {
+ if (!conf.build.transpileDependencies.some(dep =>
+ dep instanceof RegExp ? dep.test(target) : dep === target
+ )) {
+ conf.build.transpileDependencies.push(target)
+ }
+ })
+
+ // Ensure required Quasar components are included
+ if (api.hasVite !== true && conf.framework && conf.framework.components) {
+ const requiredComponents = [
+ 'QBtn',
+ 'QIcon',
+ 'QPopupProxy',
+ 'QCard',
+ 'QCardSection',
+ 'QToolbar',
+ 'QToolbarTitle',
+ 'QInput',
+ 'QSelect',
+ 'QDate',
+ 'QTime',
+ 'QColor',
+ 'QChip'
+ ]
+
+ requiredComponents.forEach(component => {
+ if (!conf.framework.components.includes(component)) {
+ conf.framework.components.push(component)
+ }
+ })
+ }
+ })
+
+ // Chain webpack config
+ if (api.hasVite !== true) {
+ api.chainWebpack((chain) => {
+ // Add alias for easier imports
+ chain.resolve.alias
+ .set('qinputex', api.resolve.app('node_modules/qinputex'))
+ })
+ }
+}
\ No newline at end of file
diff --git a/app-extension-qinputex/src/install.js b/app-extension-qinputex/src/install.js
new file mode 100644
index 0000000..e59ff82
--- /dev/null
+++ b/app-extension-qinputex/src/install.js
@@ -0,0 +1,52 @@
+/**
+ * Quasar App Extension install script
+ *
+ * Docs: https://quasar.dev/app-extensions/development-guide/install-api
+ * API: https://github.com/quasarframework/quasar/blob/master/app/lib/app-extension/InstallAPI.js
+ */
+
+import { existsSync, readFileSync, writeFileSync } from 'fs'
+import { join } from 'path'
+
+export default function (api) {
+ // Quasar compatibility check
+ api.compatibleWith('quasar', '^2.0.0')
+ api.compatibleWith('@quasar/app-vite', '^1.0.0 || ^2.0.0')
+ api.compatibleWith('@quasar/app-webpack', '^3.0.0 || ^4.0.0')
+
+ // We always install the boot file
+ api.render('./templates', {}, true)
+
+ // Prompts flow
+ if (api.prompts.examples) {
+ // Create example page
+ const examplesPath = api.resolve.src('pages/QInputExExamples.vue')
+ if (!existsSync(examplesPath)) {
+ api.render('./templates/examples', {}, true)
+
+ console.log('๐ฆ QInputEx examples page created at src/pages/QInputExExamples.vue')
+ console.log('๐ก Add a route to this page in your routes configuration')
+ }
+ }
+
+ // Update i18n if present
+ const i18nPath = api.resolve.src('i18n/index.js')
+ if (existsSync(i18nPath)) {
+ console.log('๐ Detected i18n - QInputEx comes with built-in i18n support')
+ }
+
+ // Success message
+ console.log('โจ QInputEx App Extension has been installed!')
+ console.log('')
+ console.log('๐ Documentation: https://github.com/snowyu/qinputex')
+ console.log('')
+ console.log('๐ To get started:')
+ console.log(' - Import and use QInputEx in your components:')
+ console.log(' import { QInputEx } from \'qinputex\'')
+ console.log(' - Or use it globally (already registered via boot file)')
+ console.log('')
+
+ if (api.prompts.examples) {
+ console.log('๐ Example page available at: src/pages/QInputExExamples.vue')
+ }
+}
\ No newline at end of file
diff --git a/app-extension-qinputex/src/prompts.js b/app-extension-qinputex/src/prompts.js
new file mode 100644
index 0000000..b9859ae
--- /dev/null
+++ b/app-extension-qinputex/src/prompts.js
@@ -0,0 +1,36 @@
+/**
+ * Quasar App Extension prompts script
+ *
+ * Docs: https://quasar.dev/app-extensions/development-guide/prompts-api
+ */
+
+export default function () {
+ return [
+ {
+ name: 'examples',
+ type: 'confirm',
+ message: 'Install example page?',
+ default: true
+ },
+ {
+ name: 'importStrategy',
+ type: 'list',
+ message: 'How do you want to import QInputEx?',
+ choices: [
+ {
+ name: 'Auto import (Recommended - Only imports what you use)',
+ value: 'auto'
+ },
+ {
+ name: 'Import all input types',
+ value: 'all'
+ },
+ {
+ name: 'Manual import (You handle the imports)',
+ value: 'manual'
+ }
+ ],
+ default: 'auto'
+ }
+ ]
+}
\ No newline at end of file
diff --git a/app-extension-qinputex/src/templates/examples/src/pages/QInputExExamples.vue b/app-extension-qinputex/src/templates/examples/src/pages/QInputExExamples.vue
new file mode 100644
index 0000000..f39c875
--- /dev/null
+++ b/app-extension-qinputex/src/templates/examples/src/pages/QInputExExamples.vue
@@ -0,0 +1,190 @@
+
+
+