fireyy/vue-page-designer
Vue Page Designer
Vue Page Designer est un framework pour construire des éditeurs visuels interactifs basés sur des composants au sein d'applications web. Il fournit une interface glisser-déposer qui permet aux utilisateurs de construire des mises en page web responsive en organisant des composants pré-construits sur un canevas, permettant une composition de page low-code sans codage manuel pour chaque changement de mise en page.
La bibliothèque se distingue par une architecture de plugins modulaire qui permet aux développeurs d'enregistrer des éléments d'interface personnalisés, élargissant les blocs de construction disponibles pour des exigences de conception uniques. Elle utilise une stratégie de rendu récursif pilotée par des objets de configuration hiérarchiques, garantissant que l'espace de travail visuel reste synchronisé avec la structure de données sous-jacente.
Le système inclut des utilitaires complets de gestion d'état qui capturent toute la structure de la page sous forme d'objet de données sérialisé et portable. Cela permet la persistance et la restauration de configurations de conception complexes, prenant en charge des flux de travail où les utilisateurs peuvent enregistrer des brouillons et reprendre le travail entre les sessions. Les développeurs peuvent en outre gérer l'environnement de conception via des contrôles de métadonnées de page globaux, des ajustements de propriétés de composants et une gestion intégrée du téléchargement de fichiers.
Features
- Drag-and-Drop Page Builders - Provides a visual drag-and-drop interface for constructing mobile-responsive web layouts using pre-built components.
- Layout Persisters - Captures page structures as portable, serialized data objects for persistence and later rehydration.
- Low-code - Enables users to construct functional web pages through a visual interface without manual coding.
- Component-Based UI Frameworks - Provides a framework for building interactive design tools that allow users to configure component properties and manage page metadata.
- Visual Page Builders - Provides a drag-and-drop canvas for constructing mobile-responsive web pages by arranging components into a visual structure.
- JSON to Page Rendering - Maps hierarchical JSON configuration objects to dynamic component trees using a recursive rendering strategy.
- Editor State Management - Manages the comprehensive state of the editor to support saving drafts and resuming work across sessions.
- Reactive Configuration Systems - Maintains a reactive source of truth for component properties that automatically triggers UI updates.
- Plugin-Based Architectures - Provides a modular plugin architecture for registering custom interface elements within the design workspace.
- Custom Component Extensions - Allows developers to register custom interface elements to expand the available building blocks for page layouts.
- Drag-and-Drop Event Callbacks - Implements a central event bus to manage drag-and-drop coordinate tracking and element insertion logic.
- Infinite Canvas Coordinate Mapping - Translates mouse and touch coordinates into relative layout constraints for responsive element positioning on the canvas.
- Page Metadata Definitions - Allows developers to define global page attributes including titles, dimensions, and background colors.
- Property Configurations - Enables users to adjust parameters, interaction behaviors, and animation settings for individual elements.
- Integration Frameworks - Allows developers to extend the design workspace by injecting custom interface elements.
- Web Page Construction - Provides a visual interface for creating and persisting page configurations that can be integrated into web applications.
