100 lines
8.3 KiB
Markdown
100 lines
8.3 KiB
Markdown
# Vue Site Builder
|
|
|
|
This project is a Vue.js application designed to be a visual site builder, allowing users to drag and drop various UI components onto an artboard, arrange them, and customize their properties. The goal is to provide a flexible and intuitive interface for designing web layouts, adhering to a modern, dark-themed aesthetic with rounded elements and a bluish tint.
|
|
|
|
## Features
|
|
|
|
### Theming & Design
|
|
- **Dark Theme & Modern UI**: The application features a minimal, dark-themed interface with rounded corners on all UI elements and a cohesive bluish tint across various components and controls, ensuring a sleek and consistent user experience.
|
|
|
|
### Project Management
|
|
- **Create New Projects**: Users can start new design projects.
|
|
- **Save/Load Projects**: (Planned/Future Feature) Persistence of project state.
|
|
- **Multiple Pages**: Each project can contain multiple design pages.
|
|
|
|
### Editor Functionality
|
|
|
|
#### Component Library
|
|
- **Diverse UI Components**: A wide range of common UI elements (headings, paragraphs, buttons, inputs, images, cards, navigation, feedback components, **dividers, spacers, video players, and maps**) are available for selection.
|
|
- **Categorized Components**: Components are grouped into logical categories (e.g., Layout, Typography, Forms, Content, Navigation, Feedback, **Media**) for easy discovery.
|
|
- **Drag-and-Drop**: Users can drag components from the library onto the artboard.
|
|
- **Hover Previews**: Hovering over a component in the library displays a scaled-down visual preview of the component, allowing users to quickly see what it looks like before dropping it onto the artboard.
|
|
|
|
#### Artboard
|
|
- **Dynamic Component Rendering**: Components dropped onto the artboard are rendered dynamically based on their `type`, utilizing dedicated Vue components for each UI element to ensure correct visual representation and behavior. Default component styles are theme-consistent and visually distinct.
|
|
- **Responsive Aspect Ratios & Scaling**: The artboard container now correctly scales its content to fit different aspect ratios and zoom levels. Components retain their percentage-based positions and sizes, adapting smoothly to new artboard dimensions without being cut off.
|
|
- **Zoom In/Out**: Users can zoom the artboard to focus on details or get an overview.
|
|
- **Grid System**:
|
|
- **Toggle Grid Lines**: Grid lines can be shown or hidden.
|
|
- **Snap to Grid**: Components can snap to the grid for precise alignment. The visual grid now dynamically scales with the artboard's dimensions and zoom level, ensuring perfect alignment with snapping points.
|
|
- **Component Placement and Manipulation**:
|
|
- **Click-to-Select**: Components can be selected instantly by clicking them on the artboard, allowing immediate access to their properties in the Properties Panel.
|
|
- **Move Tool**: Components can be moved around the artboard by clicking and dragging. The drag interaction is now more responsive with a reduced movement threshold.
|
|
- **Smart Guides**: Visual guides appear to assist with aligning components relative to each other and the artboard (e.g., center alignment, edge alignment), supporting both horizontal and vertical snapping.
|
|
- **Axis Locking**: Holding `Shift` while dragging locks movement to either the horizontal or vertical axis.
|
|
- **Resizable Components**: Selected components display resize handles, allowing users to adjust their width and height.
|
|
|
|
#### Properties Panel
|
|
- **Enhanced Properties Editor**: When a component is selected, a comprehensive properties panel is displayed, allowing granular control over various aspects of the component.
|
|
- **Layout Controls**: Dedicated inputs for `X Position (%)`, `Y Position (%)`, `Width (%)`, and `Height (%)` enable precise placement and sizing.
|
|
- **Extended Style Controls**: Includes inputs for `Background Color`, `Text Color`, `Font Size (px)`, `Padding (px)`, `Border Color`, `Border Style`, `Border Width (px)`, `Border Radius (px)`, and individual `Margin` properties (`Top`, `Right`, `Bottom`, `Left` in px).
|
|
- **Unit Handling**: Numerical style properties (e.g., font size, padding, border width/radius, margins) are correctly handled with 'px' units.
|
|
- **Live Updates**: Changes made in the properties panel are immediately reflected on the artboard.
|
|
|
|
#### Other Panels
|
|
- **Pages Panel**: Manage and navigate between different pages within a project.
|
|
- **Logic Editor**: (Currently a placeholder) Intended for advanced users to add custom logic or interactivity to components.
|
|
|
|
#### Windows
|
|
- **Fixed Panels**: Floating windows/panels (e.g., Component Library, Properties Panel) are now fixed in their positions, providing a stable and uncluttered workspace.
|
|
|
|
## Setup Steps
|
|
|
|
1. **Clone the repository:**
|
|
```bash
|
|
git clone <repository-url>
|
|
cd vue-site-builder
|
|
```
|
|
|
|
2. **Install dependencies:**
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
3. **Run the development server:**
|
|
```bash
|
|
npm run dev
|
|
```
|
|
This will start the Vite development server, usually accessible at `http://localhost:5173/`.
|
|
|
|
## Project Structure (Key Files)
|
|
|
|
- `src/main.js`: Entry point of the Vue application. Initializes Pinia and Vue Router.
|
|
- `src/App.vue`: Main application layout and global CSS variables for theming.
|
|
- `src/router/index.js`: Vue Router configuration.
|
|
- `src/stores/projectStore.js`: Pinia store for managing project state, including pages and components.
|
|
- `src/views/Editor.vue`: The main editor interface, responsible for integrating the component library, canvas, and property panels. It now imports component definitions from `StandardComponents.js`.
|
|
- `src/components/ComponentLibrary.vue`: Displays the list of available UI components that can be dragged onto the artboard. Now includes hover previews.
|
|
- `src/components/Artboard.vue`: The main canvas area where components are dropped and manipulated. Handles drag/drop, movement, resizing, and rendering of dynamic components with proper scaling and grid snapping.
|
|
- `src/components/PropertiesPanel.vue`: Displays and allows editing of selected component properties with enhanced controls.
|
|
- `src/components/DraggablePanel.vue`: (Renamed conceptually to FixedPanel) Base component for fixed UI panels.
|
|
- `src/components/componentMap.js`: Maps component `type` strings to their corresponding Vue render components. Now includes new components like Divider, Spacer, Video, and Map.
|
|
- `StandardComponents.js`: Defines the structure and default properties/styles for all UI components available in the library. This is the central source of truth for component definitions.
|
|
- `src/components/render-components/`: This directory contains individual Vue components (`H1Component.vue`, `ButtonComponent.vue`, `ImgComponent.vue`, **`DividerComponent.vue`, `SpacerComponent.vue`, `VideoComponent.vue`, `MapComponent.vue`**, etc.) responsible for rendering specific UI elements on the artboard. Their default styles are theme-consistent and visually distinct.
|
|
|
|
## Development Notes
|
|
|
|
- **Component Diversity**: The application uses a dynamic component rendering approach. Each UI element (e.g., button, image, input) has its own dedicated Vue component in `src/components/render-components/`. This allows for flexible styling and property management per component type.
|
|
- **Component Definition**: Components available in the library are defined in `StandardComponents.js`. Each definition includes `type`, `name`, `group`, and a `defaults` object containing `props` (for data like `text`, `src`, `placeholder`) and `style` (for CSS properties).
|
|
- **State Management**: `Pinia` is used for global state management, particularly for `projectStore` which holds the current project's data, active page, and components.
|
|
- **Theming**: Global CSS variables in `App.vue` (`--bg-color`, `--panel-color`, `--accent-color`, `--border-color`, `--text-color`, `--border-radius`) provide a centralized and consistent dark theme.
|
|
|
|
## To-Do / Future Enhancements
|
|
|
|
- Implement full functionality for currently placeholder components (e.g., `LogicEditor`).
|
|
- Add more advanced layout tools (e.g., grouping, alignment tools, distribution).
|
|
- Implement Undo/Redo functionality.
|
|
- Integrate persistent storage for projects (e.g., LocalStorage, IndexedDB, or a backend).
|
|
- Further refine the properties panel with dynamic input types based on property types (e.g., dropdowns for enums, toggles for booleans).
|
|
- Code generation: currently logs to console, needs a proper export feature.
|