feat: Implement core low-code page designer features#1
Open
feat: Implement core low-code page designer features#1
Conversation
This commit introduces the foundational elements of the Vue 3 + TypeScript low-code page designer. Key features implemented: - Project setup with Vite. - Installation of core dependencies (Element Plus, vue-draggable-next, Pinia, UUID). - Creation of core UI components: Canvas, ComponentLibrary, PropertyEditor. - Definition of PageComponent and PageSchema data structures. - Drag-and-drop functionality from ComponentLibrary to Canvas. - Component selection on canvas and dynamic property/style editing in PropertyEditor. - Dynamic rendering of components on canvas with applied styles and props. - Generation of a PageSchema JSON object representing the design. - Conceptual code generation from PageSchema to a pseudo-markup string. - Basic three-column application layout in App.vue. The designer now allows you to drag components, modify their appearance and properties, and see a representation of the underlying data structure and a conceptual code output.
…prep
This commit introduces several new components to the low-code designer
based on your feedback, and prepares the initial structure for unit tests.
New Components:
- Static Text: Displays read-only text with optional maxLength truncation.
- Number Input: Provides a numerical input field with min, max, and step attributes.
- Select (Dropdown): Allows you to choose from a list of options.
- The PropertyEditor has been enhanced with a dedicated UI for managing
the 'options' (label/value pairs) of the Select component, allowing
for adding, removing, and editing these options.
Unit Test Preparation:
- Externalized the `displayText` function from Canvas.vue to `src/utils/canvasUtils.ts`
for easier testing.
- Created `tests/unit/canvasUtils.spec.ts` with detailed test cases for `displayText`.
- Created `tests/unit/pageStore.spec.ts` with a structural outline and example
test cases for Pinia store actions related to the new components.
(Full execution requires test runner setup).
These additions significantly enhance the versatility of the page designer.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This commit introduces the foundational elements of the Vue 3 + TypeScript low-code page designer.
Key features implemented:
The designer now allows you to drag components, modify their appearance and properties, and see a representation of the underlying data structure and a conceptual code output.