Getting Started
Plugin System
Extend VueAirport functionality with plugins.
Plugins are modules that extend the functionality of the library. They are now organized into two separate packages:
@vue-airport/plugins-base: Core plugins (Active Item, Debounce, History)@vue-airport/plugins-validation: Validation plugins (Validation, Constraints)
Plugin Structure
Each plugin is grouped in its respective package. To use a plugin, import it from the appropriate package:
// Core plugins
import { createActiveItemPlugin } from '@vue-airport/plugins-base'
// Validation plugins
import { createValidationPlugin } from '@vue-airport/plugins-validation'
Available Plugins
Base Plugins (@vue-airport/plugins-base)
- Active Item: Manage the active element
- Debounce: Execution delay management
- History: History management
Validation Plugins (@vue-airport/plugins-validation)
- Validation: Form validation logic
- Constraints: Constraint-based validation
Adding a Plugin
To add a plugin, create a new file in the src folder of the relevant package (plugins-base or plugins-validation) and export it in the package's index.ts.
Usage Example
import { useActiveItem } from '@vue-airport/plugins-base'
const activeItem = useActiveItem()
import { useValidation } from '@vue-airport/plugins-validation'
const validation = useValidation()
import { useCheckIn } from 'vue-airport';
import {
createActiveItemPlugin,
createHistoryPlugin,
createValidationPlugin
} from '@vue-airport/plugins-base';
const { createDesk } = useCheckIn<TabItem>();
const { desk } = createDesk('tabs', {
plugins: [
createValidationPlugin({ required: ['label'] }),
createActiveItemPlugin(),
createHistoryPlugin({ maxHistory: 50 })
]
});
// All plugins work together:
// 1. Validation checks data
// 2. Active item can be set
// 3. History records everything
Plugin order matters! Plugins are executed in the order they're provided. For example, validation should typically come before other plugins.
Creating Custom Plugins
You can create your own plugins by implementing the CheckInPlugin interface:
import type { CheckInPlugin, DeskCore } from 'vue-airport';
interface MyData {
count: number;
}
const createCounterPlugin = (): CheckInPlugin<MyData> => ({
name: 'counter',
version: '1.0.0',
// Initialize plugin state
install: (desk: DeskCore<MyData>) => {
const totalCount = ref(0);
(desk as any).totalCount = totalCount;
// Return cleanup function
return () => {
totalCount.value = 0;
};
},
// Hook into check-in
onCheckIn: (id, data) => {
console.log(`Adding ${data.count} to total`);
},
// Add custom methods
methods: {
getTotalCount(desk: CheckInDesk<MyData>): number {
return (desk as any).totalCount?.value || 0;
},
incrementTotal(desk: CheckInDesk<MyData>, amount: number) {
const totalCount = (desk as any).totalCount;
if (totalCount) {
totalCount.value += amount;
}
}
},
// Add computed properties
computed: {
hasItems(desk: CheckInDesk<MyData>): boolean {
return desk.registry.value.size > 0;
}
}
});
// Use the custom plugin
const { createDesk } = useCheckIn<MyData>();
const { desk } = createDesk('counter', {
plugins: [createCounterPlugin()]
});
// Access plugin features
desk.incrementTotal(10);
console.log(desk.getTotalCount()); // 10
console.log(desk.hasItems); // false (no items checked in yet)
Plugin Interface
The complete plugin interface:
interface CheckInPlugin<T = any> {
/** Unique plugin name */
name: string;
/** Optional version */
version?: string;
/** Called when plugin is installed (return cleanup function) */
install?: (desk: CheckInDesk<T>) => void | (() => void);
/** Called before check-in (return false to cancel) */
onBeforeCheckIn?: (id: string | number, data: T) => void | boolean;
/** Called after successful check-in */
onCheckIn?: (id: string | number, data: T) => void;
/** Called before item update (return false to cancel) */
onBeforeUpdate?: (id: string | number, data: Partial<T>) => void | boolean;
/** Called after successful item update */
onUpdate?: (id: string | number, data: T) => void;
/** Called before check-out (return false to cancel) */
onBeforeCheckOut?: (id: string | number) => void | boolean;
/** Called after successful check-out */
onCheckOut?: (id: string | number) => void;
/** Custom methods to add to desk */
methods?: Record<string, (desk: CheckInDesk<T>, ...args: any[]) => any>;
/** Computed properties to add to desk */
computed?: Record<string, (desk: CheckInDesk<T>) => any>;
}
Next Steps
- Explore the Active Item Plugin for single-selection scenarios
- Optimize performance with the Debounce Plugin
- Track operations with the History Plugin
- Learn about the Validation Plugin for data integrity
- Enforce business rules with the Constraints Plugin
- See the Plugin Stack for a complete working implementation