TW-Elements

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
• 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.

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

Fixed & improved:

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

In this release, we are introducing new Autocomplete and Multi Range Slider components. We also updated integration tutorials and added new guides for SvelteKit and Bun. Our team has also addressed lots of issues and improved the overall customization options for our components.

New features

#1932: Added new shadow classes to the TW Elements plugin and updated the Shadows page - by @juujisai
#2040: Prepared environment for unit testing - by @Trochonovitz
#2064: Added Bun integration guide - by @juujisai
#2108: Added SvelteKit integration tutorial - by @iprzybysz

New components

#2008: Added Autocomplete component - by @juujisai
#2152: Added Multi Range Slider component - by @iprzybysz

Docs

#1641: Fixed issue where links from API tabs section won't change the tab to API - by @juujisai
#1937: Fixed Charts examples where options were not provided correctly - by @iprzybysz
#1948: Updated integration tutorials and added section with troubleshooting - by @iprzybysz
#1953: Fixed issue with search results from external domains not opening in a new tab - by @juujisai
#1960: Updated the optimization page information about the initTE method - by @letzfets
#1982: Updated Charts examples size on mobiles - by @njolipatrick, @juujisai
#2010: Added Roboto import to tutorials - by @juujisai
#2027: Renamed zip package to twe-starter - by @juujisai
#2039: Updated toasts icons - by @Trochonovitz
#2045: Fixed Modal examples visibility on smaller screens - by @Trochonovitz
#2047: Removed outdated Tab color example - by @Trochonovitz
#2074: Fixed event name in Datetimepicker documentation - by @juujisai
#2083: Fixed mobile styling on the main page and Search page - by @juujisai
#2094: Updated search.json file - by @juujisai
#2105: Updated snippets on Getting Started page - by @iprzybysz
#2117: Fixed a typo inside flexbox tutorial - by @Mike2020x
#2138: Removed double inits from components snippets - by @iprzybysz
#2148: Fixed typo in Vertically Centered Modal snippet - by @liamka

Fixed & improved

#1929: Updated dropdown animation for the Select component - by @iprzybysz
#1938: Fixed issue with setValue method not triggering events in Multiple Select - by @Trochonovitz
#1947: Fixed issues with datepicker and timepicker options in Datetimepicker - by @juujisai
#1986: Removed inheriting name attribute by Select input element - by @Trochonovitz
#1997: Added arrow customization to Select component - by @Trochonovitz
#2005: Added autoclose option to remove Alert from DOM after closing - by @Trochonovitz
#2006: Fixed errors that occured when disposing the Rating component - by @Trochonovitz
#2106: Fixed issue with Modals dispose method not removing event listeners - by @Trochonovitz
#2012: Improved reading of the main colors for the Ripple component - by @juujisai
#2036: Datatables - Fixed issue with not beeing able to scroll on the table on smaller screens - by @Trochonovitz
#2043: Fixed the interval option for Animations - by @iprzybysz
#2046: Fixed flashing outline border inside Chips - by @Trochonovitz
#2050: Fixed Input issues with label width when initialized via JS - by @Trochonovitz
#2051: Updated component intros - by @juujisai
#2055: Added option to customize animation duration inside Dropdowns - by @juujisai
#2062: Added listeners for Select value changes inside the Validation component - by @juujisai
#2075: Added current Datetimepicker value to the datetimeChange.te.datetimepicker event - by @Trochonovitz
#2080: Added possibility for backdrop customization in Modals - by @juujisai
#2098: Added possiblity to customize classes of the select all option inside the Select Multiple component - by @juujisai
#2112: Improved reading of delay time after which the Modals display change - by @iprzybysz
#2116: Improved reading of transition duration for the Select component - by @iprzybysz
#2119: Improved step change animation for the Stepper component - by @juujisai
#2121: Select - fixed cross-site scripting issue - by @iprzybysz
#2122: Fixed issues with Sidenav right not showing when horizontal scrollbar is visible - by @iprzybysz
#2127: Fixed issues with Timepicker not updating the modal after time was set by hand inside the input - by @iprzybysz
#2132: Fixed issues with Stepper events - added onChangeStep and onChangedStep events - by @juujisai
#2135: Fixed issues with doubleclicking the inline datepicker inside Datetimepicker component - by @juujisai
#2174: Fixed disabling completed steps in no-editable Stepper - by @mako3577
#2189: Fixed issues with timepicker dispose method causing dropdowns to stop working - by @iprzybysz

We are thrilled to announce the stable release of Tailwind Elements v1.0.0! In this release we fixed few issues and made sure that the components are working as expected. We hope you will enjoy the Tailwind Elements!

Note: Checkout the Quick Start page to see how to add options to the initTE method.

Docs

#1906: Fixed modal examples that had input in them - by @juujisai

Fixed & improved

#1913: Fixed issues with dismissing components - by @juujisai
#1902: Updated Tailwind Elements starter content - by @juujisai
#1893: The initTE method now allows users to specify additional options - by @juujisai

We're excited to introduce the Release Candidate version of Tailwind Elements, bringing us just a step away from the v1.0.0 release.

In this release, we were working on few new components and fixing some minor bugs. Let us know what you think about the new validation component and what we can further improve!

New features

#1569: Added Extended animations - by @iprzybysz
#1599: Added non-invasive modal and new modal examples - by @juujisai

New components

#1561: Clipboard - by @iprzybysz
#1562: Infinite scroll - by @iprzybysz
#1563: Lazy loading - by @iprzybysz
#1564: Loading management - by @iprzybysz
#1566: Smooth scroll - by @iprzybysz
#1567: Sticky - by @iprzybysz
#1568: Touch - by @iprzybysz
#1132: Validation - by @juujisai
#1558: Datetimepicker - by @juujisai

Docs

#1840: Added technology switcher to the main navbar - by @juujisai
#1867: Added border and border radius to videos on Quick Start page - by @juujisai
#1570: Added Privacy and GDPR Policy page - by @juujisai
#1852: Fixed init via JS snippet for Animations - by @iprzybysz
#1870: Fixed Select with CSS classes snippet - by @iprzybysz

Fixed & improved

#1573: Fixed Animations issues on smaller screens - by @iprzybysz
#1571: Improved styling for footer elements - by @iprzybysz
#1572: Fixed Placeholders issues on smaller screens - by @iprzybysz
#1844: Fixed colors of change time buttons in inline timepicker - by @iprzybysz
#1845: Fixed issues with changing time by arrows in inline timepicker - by @iprzybysz
#1877: Fixed issues with dropdowns inside navbar examples going off-viewport - by @iprzybysz
#1869: Fixed issues with css sourcemaps - by @juujisai

In this release, we're introducing several new components and implementing numerous improvements and bug fixes. Notably, we've included a detailed guide on working with Legacy documentation and informative tutorials on effectively utilizing Internationalization (i18n) with Tailwind Elements. Additionally, we've also updated the look of some of our components and the layout of our documentation.

New features

• #1341: CLA signing bot - by @smolenski-mikolaj, @juujisai
• #1372: Added local installation guide for Legacy docs - by @iprzybysz
• #1555: Added Charts advanced page - by @juujisai
• #1635: Added new examples of navbars in documentation - by @iprzybysz
• #1664: Added new design blocks landing pages - by @martussky
• #1665: Added new design blocks demo landing pages - by @martussky
• #1700: Added autoinits for Tooltips and Popover - by @iprzybysz
• #1554: Created a new Internationalization guide - by @iprzybysz
• #1610: Added new Card examples - by @iprzybysz

New components

• #1556: Datatables - by @iprzybysz
• #1557: Lightbox - by @iprzybysz
• #1560: Rating - by @juujisai
• #1565: Scrollbar - by @juujisai
• #1559: Popconfirm - by @iprzybysz

Docs

• #1519: Update next integration tutorials to fix issues with incompatibility - by @juujisai
• #1550: Update the integration tutorials for the latest TE version - by @Trochonovitz
• #1629: Update the look of the main sidenav - by @juujisai
• #1626: Added Note About Using Hover With Animation - by @Yarob50
• #1633: Added offset to scrollspy in documentation - by @iprzybysz
• #1632: Updated footer - by @marveluck
• #1645: Updated the dark mode design in Prism - by @juujisai
• #1692: Added necessary module types to script tags - by @juujisai
• #1735: Updated info about React Tailwind Elements in React integration tutorial - by @filipkappa
• #1770: Updated notes about required node version after latest vite release - by @juujisai
• #1766: Fixed code indentation in integration tutorial snippets - by @iprzybysz
• #1805: Fixed typo in breadcrumbs file structure - by @juujisai

Optimization & refactor

• #1345: Scroll to top button - code update, new preview - by @juujisai
• #1506: Update the initialization of Carousel component and fix the autoplay issues - by @iprzybysz
• #1538: Unify and change the Chips init - by @juujisai
• #1543: Added possibility to change the input options and classes of the select component - by @iprzybysz
• #1565: Added Scrollbar component to Sidenav - by @juujisai
• #1623: Changed default line-height for paragraphs - by @iprzybysz
• #1686: Removed h1 & code hardcoded styles from TE - by @juujisai

Fixed & improved

• #1380: Fixed typos in Colors - by @martussky
• #1440: Fixed placeholder showing only for multiselect - by @juujisai
• #1536: Fixed issues with Scrollspy misalignment when loading page with anchor - by @juujisai
• #1578: Removed fixed width classes from code snippets - by @Trochonovitz
• #1594: Fixed mask color on hover for a card - by @martussky
• #1595: Fixed color class in the color docs - by @martussky
• #1596: Fixed hover effects color in the docs - by @martussky
• #1628: Charts - fixed issue with formatter when darkmode is on - by @juujisai
• #1630: Added darker background for examples in Cards and Navbars - by @iprzybysz
• #1643: Updated error message design in Timepicker - by @iprzybysz
• #1644: Form templates - update code in snippets - by @iprzybysz
• #1659: Fixed issues with clicking on Sidenav on iPhones - by @juujisai
• #1687: Fixed description in Paragraph documentation - by @iprzybysz
• #1667: Fixed issues with custom containers in inline Datepicker - by @iprzybysz
• #1689: Fixed "xs" breakpoint in plugin.cjs - by @juujisai
• #1701: Fixed issues with multiple initializations via initTE method - by @juujisai
• #1729: Fixed typos in scrollspy documentation - by @juujisai
• #1731: Fixed snippet for datepicker with translations - by @juujisai
• #1779: Update the dark mode background for Select inside the input group page - by @iprzybysz
• #1777: Fixed issues with clearing the select when default selected value was set - by @iprzybysz
• #1793: Fixed the position in vertical steppers - by @juujisai
• #1798: Ripple - fixed class customization - by @juujisai
• #1619: Fixed dispose method for Select component - by @vadim-pavlov
• #1680: Fixed typos in colors and tabs pages - by @whamtet
• #1807: Fixed issues with autoinits added to body element - by @juujisai
• #1815: Fixed issues with dismissing Alert component - by @juujisai
• #1738: Update scrollspy position calculation - by @AngeloKarugo

Dark mode integration

• #1179: Range - by @martussky
• #1582: Improved dark mode integration for charts - by @juujisai, @iprzybysz