🚨TW Elements 2.0.0 released❕
Tags: news, tailwindcss, frontend, webdev
Published: 2024-03-05 13:00:00

**TW Elements UI Kit/Library**

Bootstrap components recreated with Tailwind CSS, but with better design & more functionalities

TWE package went through a serious refactoring and unification process. We have changed a lot of things to make TWE more consistent and easier to use. Our team has also addressed lots of issues and improved the overall customization options for our components.

**Breaking changes:**

- Changed name te to twe in data attributes, events, methods etc.
- Unified event and method names, added new events, removed some methods
- Changed package file structure
- Charts became a separate file - removed dynamic import and built as a different module
- Deleted most arbitrary classes across all components and replaced them with Tailwind CSS or custom TWE classes - extended plugin
- Improved RTL support in our package
- Added unit tests for all components in the package

**Migration Guide:**

To make the transition to TWE v2 easier we prepared a list of changes needed in existing projects, which you can find in the [Migration guide](https://tw-elements.com/docs/standard/getting-started/migration-guide/).

**Design updates:**

Implemented a comprehensive theming system that extends across all components, allowing for greater customization and visual coherence throughout the package.

**New features:**

- Updated paths in tailiwnd.config.js snippets - changes connected with package file structure
- Added Icons Integration tutorial
- Updated Django Integration tutorial - added initializing via JS section
- Added Qwik Integration tutorial
- Added ASP.NET Integration tutorial
- Added Class customization tutorial
- Extended shadows
- Updated icons across all components

_Alert and Toast_ - added new functionalities and new examples:
- position, container and offset options

_Stepper_ - added new functionalities and new examples:
- Validation functionalities in Linear Stepper - default HTML validation and with Validation component

_Mobile Stepper_ - stepperMobileBackBtn, stepperMobileBackBtnIcon, stepperMobileBarBreakpoint, stepperMobileNextBtn, stepperMobileNextBtnIcon, stepperMobileOfTxt and stepperMobileStepTxt options
- Possibility to toggle to Vertical or Mobile Stepper on smaller screens - stepperMobileBreakpoint, stepperVerticalBreakpoint
- data-twe-stepper-optional attribute which marks a step as optional
- stepperHeadClick options which block the possibility of changing a step by clicking on another step

_Scrollspy_ - added new functionalities and new examples:
- collapsible and smooth scroll options

_Search_ - added new examples

_Spinner / Loader_ - added new examples

**Content & Styles:**

_Animations_ - removed init and autoInit methods

**Navigation:**

_Sidenav:_
- Fixed an issue with Ripple in the update method
- Fixed wrong data attribute name for active sidenav state
- Added a data-twe-sidenav-slim-active attribute that changes upon switching from full to slim sidenav

**Components:**

_Carousel:_
- Fixed jQueryInterface and dispose methods
- Fixed an issue with not triggering interval when the ride option is true and slides are manually changed (e.g. via the next method)
- Fixed an issue with initialization via JS without data-twe-carousel-init which made the component not animate when changing slides

_Chips_ - Fixed dispose method and add.twe.chips event

_Popconfirm_
- Added FocusTrap
- Fixed an issue with scrolling in Popconfirm modal - disabled scrolling when the modal is opened and restored it when the modal is closed
- Fixed the way of adding event listeners, the cancel event and dispose method

_Rating_ - Fixed dispose method

_Tooltip and Popover_ - updated default component template

**Forms:**

_Autocomplete:_
- Fixed an issue with clicking on No results found field
- Added offset option which allows to customize the popper offset
- Fixed issues with input focus after closing the dropdown on the ESC key
- Fixed toggling aria-expanded value

_Select:_
- Fixed toggling aria-expanded value
- Fixed an issue with Multiselect with labels - after opening the dropdown the middle notch had a border top
- Fixed an issue where after filtering options and closing the dropdown, the setValue method was not functioning and caused the select to malfunction upon reopening

**Data:**

_Charts_ - made the config parameter optional within the update method

_Datatables_ - fixed wrong element and method in PerfectScrollbar usage

**Utils:**

_Backdrop _- fix an issue with undefined class

**TW Elements 2.0 - Check it out [here](https://tw-elements.com)**