Skip to content
This repository was archived by the owner on Feb 1, 2026. It is now read-only.

feat: new API and DX#129

Merged
alvarosabu merged 75 commits intomainfrom
next
Oct 4, 2025
Merged

feat: new API and DX#129
alvarosabu merged 75 commits intomainfrom
next

Conversation

@alvarosabu
Copy link
Copy Markdown
Member

@alvarosabu alvarosabu commented Jan 19, 2025

This PR includes:

  • BREAKING CHANGE: Simplified useControls API, now it returns only control values as refs
  • UI Overhaul and fixes, everything should be more aligned and consistent
  • Animated collapsable state
  • Pane is resizable
  • Dark Mode

Closes #104

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.
- 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.
- 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.
@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new bot commented Jan 19, 2025

Open in StackBlitz

npm i https://pkg.pr.new/@tresjs/leches@129

commit: 572f59f

- 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.
- 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.
@alvarosabu alvarosabu changed the title Next feat: new API and DX Jan 20, 2025
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.
@alvarosabu alvarosabu merged commit cbc2614 into main Oct 4, 2025
2 of 4 checks passed
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

Projects

Status: Done

Development

Successfully merging this pull request may close these issues.

Rethink API and DX

1 participant