feat: new API and DX #129
Open
feat: new API and DX #129
Conversation
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
BREAKING CHANGE: Now composable returns an object containing only each control value. When using multiple controls at the same time, you can access `controlName.value` directly instead of `controlName.value.value` - Refactor `useControls` to return object with control values as refs - Updated tests and remove visibility testing.
- Removed unused imports from boolean.vue and useControls.ts to streamline the code. - This change enhances code readability and maintains a cleaner codebase.
feat!: simplified `useControls` API
- Implemented cleanup logic in the TresLeches component to dispose of controls when the component is unmounted. - Updated useControls.ts to include type imports for better type safety. - Enhanced tests to verify that controls are properly disposed of upon unmounting the TresLeches component.
fix: dispose-controls-on-unmount
- Introduced multiple new Vue components demonstrating different control types: BooleanControlDemo, ColorControlDemo, MultipleControlsDemo, SelectControlDemo, and VectorControlDemo. - Updated routing to include these new components, enhancing the playground's functionality and user experience.
- Introduced two new Vue components: SliderControlDemo and TextControlDemo, showcasing slider and text controls respectively. - Updated routing to include paths for the new components, enhancing the playground's demo capabilities.
- Added @vueuse/motion as a new dependency to enable motion effects in the TresLeches component. - Enhanced the TresLeches component with new resizing and collapsing functionalities, improving user interaction.
- Adjusted snapshot values for BooleanControl tests to reflect changes in dimensions and opacity. - Ensured that the rendered output matches the latest implementation of the BooleanControl component.
- Adjusted snapshot values for ColorControl tests to reflect changes in dimensions and opacity. - Ensured that the rendered output matches the latest implementation of the ColorControl component.
- Adjusted snapshot values to reflect changes in dimensions and opacity for the BooleanControl component. - Ensured that the rendered output matches the latest implementation, improving test accuracy.
feat: collapsible and resizable
commit: |
- Removed unnecessary imports and streamlined the `onChange` function in `TresLeches.vue` to accept a string key directly. - Updated `controlsStore` type definition in `useControls.ts` to use `Record<string, Control>` for better clarity. - Refactored `createControl` function to use reactive properties directly instead of refs, enhancing performance and readability. - Deleted outdated type definitions from `index.d.ts` and migrated to a new `index.ts` file with improved type definitions for `Control` and `SelectOption` using generics
- Introduced multiple new demo components for various control types: ReactiveObjectDemo, BooleanControlDemo, ColorControlDemo, MultipleControlsDemo, SelectControlDemo, SliderControlDemo, TextControlDemo, and VectorControlDemo. - Updated routing to include paths for the new components, enhancing the playground's functionality and user experience. - Added a new 'Controls' section in the index page to organize the control demos. - Adjusted existing routes to remove outdated components and streamline navigation.
- Replaced all instances of the Control type with LechesControl across multiple components including BooleanControl, ButtonControl, ColorControl, ControlInput, ControlLabel, Folder, FPSGraph, NumberControl, SelectControl, SliderControl, TextControl, and VectorControl. - Updated the useControls composable to reflect the new LechesControl type, enhancing type safety and consistency. - Adjusted type definitions in index.ts to support the new LechesControl and LechesSelectOption interfaces, improving clarity and maintainability.
fix: typescript-build-issues
- Updated TypeScript configuration to include path mapping for easier imports. - Modified multiple component tests to remove dynamic style attributes from snapshots, ensuring consistency and accuracy in test results. - Adjusted snapshots for BooleanControl, ButtonControl, ColorControl, Folder, NumberControl, SelectControl, TextControl, TresLeches, and VectorControl to reflect the latest implementation changes.
fix: removed dynamic style tag from html for snapshots
- Introduced `unocss-preset-scrollbar` as a new dependency in `package.json` to enhance scrollbar styling. - Updated various components (BooleanControl, ColorControl, NumberControl, SelectControl, SliderControl, TextControl, and TresLeches) to utilize new scrollbar styles, improving UI consistency. - Adjusted component templates to refine layout and spacing, ensuring better responsiveness and visual appeal. - Updated snapshots for affected components to reflect the latest changes in structure and styling.
feat: add unocss-preset-scrollbar and update component styles
- Updated multiple components (BooleanControl, ColorControl, NumberControl, SelectControl, SliderControl, TextControl, FPSGraph, and TresLeches) to improve styling and responsiveness. - Introduced dark mode support by adding conditional classes for dark themes across various components. - Refactored templates to utilize the new ControlLabel component for consistent labeling. - Adjusted styles to ensure better visual consistency and user experience in both light and dark modes.
- Introduced a new demo component for ButtonControl in `ButtonControlDemo.vue`, showcasing button interactions and controls. - Updated `MultipleControlsDemo.vue` to include an 'Accept' button with logging functionality. - Enhanced routing in `controls.ts` to include the new ButtonControl demo. - Refined styles in `ButtonControl.vue` for improved visual consistency and responsiveness. - Adjusted styles in `ColorControl.vue` and `ControlInput.vue` for better layout and alignment. - Updated `TresLeches.vue` to manage scroll behavior and gradient overlays, enhancing user experience.
feat: dark mode UI
BREAKING CHANGE: `useControls` with folders now return properties prefixed with the folder name, a folder camera with a control position will return a ref `cameraPosition`
fix!: folders controls key handling
feat: folder animations
feat: add slot content support to TresLeches panele
- Introduced a new graph control type for visualizing numeric values over time. - Created `GraphControl.vue` to render the graph based on provided values. - Added `GraphDemo.vue` to showcase the new graph control in action. - Updated `ControlInput.vue` to support rendering of graph controls. - Enhanced `useControls.ts` to handle the new graph type and its onUpdate callback. - Updated documentation to include usage examples for the graph control.
- Introduced `GraphDemo.vue` to visualize a sine wave using the new graph control type. - Modified documentation to reflect the usage of the sine wave in the graph control example.
feat: add graph pane type and corresponding demo component
- Added new controls (number and boolean dropdown) to TheChild component with watch functionality for value changes. - Updated MultipleControlsDemo to use computed properties for dynamic button labels and icons based on dark mode. - Removed unused computed import in SelectControlDemo for cleaner code. - Enhanced TresLeches component to support slot content and improved height calculations for better resizing behavior. - Refactored useControls to simplify unique key generation for controls. - Expanded LechesSelectOption interface to include an alias property and refined control configurations for better type safety.
- Refactored control components to utilize specific control types (e.g., LechesBooleanControl, LechesButtonControl) for improved type safety. - Updated the ControlInput component to accept a union type (LechesControlUnion) for better flexibility in handling different control types. - Enhanced the useControls composable to manage a broader range of control types, including buttons and graphs, with appropriate type guards for runtime checks. - Adjusted the TresLeches component to accommodate the new control types and ensure proper grouping of controls. - Improved the inferType function to return more accurate control types based on the provided values.
- Adjusted padding in snapshot tests for various control components to ensure consistent layout and spacing. - Replaced placeholder divs with conditional rendering comments to improve clarity in the test structure. - Ensured that the visual representation of controls aligns with the latest design specifications.
- Upgraded package versions in package.json and pnpm-lock.yaml for better performance and security, including pnpm, vite, and unocss. - Enhanced the useControls composable to check if the object is reactive before calling toRefs, improving robustness. - Updated stats.html to reflect changes in the data structure and ensure compatibility with the latest features. - Added support for ES module format in vite.config.ts to align with modern JavaScript standards.
- Upgraded package versions in pnpm-lock.yaml and package.json for improved performance and security, including three, unocss, and vitepress-plugin-group-icons. - Removed outdated CSS import instructions from documentation to streamline usage. - Cleaned up the VitePress configuration by removing unnecessary alias definitions. - Enhanced documentation by updating the getting started and use controls guides to reflect the latest changes.
- Removed unnecessary imports from vite.config.ts and VitePress config to streamline the configuration files and improve readability.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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 PR includes:
useControlsAPI, now it returns only control values as refsCloses #104