feat: new API and DX #129
Open
feat: new API and DX #129
Conversation
This file contains 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
- Added new `ParentChildDemo.vue` and `TheChild.vue` components to demonstrate parent-child relationships in the playground. - Updated routing in `basic.ts` to include the new Parent Child demo. - Made minor adjustments to auto-import and component declaration files for better type handling.
… shortcuts for UnoCSS - Updated multiple components (BooleanControl, ButtonControl, ColorControl, NumberControl, SelectControl, SliderControl, TextControl, and VectorControl) to use a unified `tl-leches-input` class for consistent styling. - Added a new shortcut in `vite.config.ts` for `tl-leches-input` to streamline styling across input elements. - Improved button styles in `ButtonControl.vue` for better visual consistency. - Enhanced focus styles in `BooleanControl.vue` and other components for improved accessibility and user experience.
- Added `vite-svg-loader` to `package.json` for improved SVG handling in the project. - Updated `vite.config.ts` to include the SVG loader in the Vite plugins. - Refactored multiple demo components (BooleanDemo, IconDemo, RangeDemo, SingleControlDemo, etc.) to streamline control usage and improve layout consistency. - Removed the `VisibilityDemo.vue` component and its references from the documentation. - Introduced new demo components for multiple instances showcasing the use of `TresLeches` in different contexts. - Updated snapshots to reflect changes in component structure and styling.
…yout and functionality - Updated NumberControl.vue to adjust input width for better responsiveness. - Enhanced TresLeches.vue by adding extra height for FPS graph, improving height calculation logic, and refining scroll handling. - Introduced gradient visibility updates during resizing and scrolling for a smoother user experience.
- Introduced new `float` prop to control panel layout - Updated TresLeches component to support stacked and floating modes - Added documentation for stacked mode in advanced section - Created StackedDemo component to showcase stacked layout - Improved panel styling and responsiveness - Updated multiple files to support new stacked mode functionality
…mo styling - Created a new `DemoLayout.vue` component in the documentation theme - Added UnoCSS shortcuts `leches-demo-layout` and `leches-demo-preview` in `vite.config.ts` - Refactored multiple demo components to use the new layout and preview classes - Improved consistency and readability of demo component layouts
- Removed redundant class checks in ButtonControl.test.ts - Updated Folder.test.ts to use new input ID format with 'default-' prefix - Simplified test assertions to focus on component rendering
…instances feat: multiple improvements UI instances
…on styles - Updated snapshot tests for BooleanControl, ButtonControl, ColorControl, Folder, NumberControl, SelectControl, TextControl, and VectorControl - Removed data-v-* attributes from button elements - Added focus and outline styles to various input and control elements - Simplified and standardized input and button class names
Update snapshot tests with consistent input ID prefixing and remove merge conflict markers
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
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