Introduction
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. Below you can find a list of the most important changes.
Note: The following list is not complete. Only the most key
changes are listed, but you should bear in mind that no component has
remained unchanged.
Migrating from v1.x.x to v2
After updating the TWE Standard from version 1 to 2, there will be a lot of
breaking changes that must be introduced in existing projects to keep them
stable. These changes relate in particular to data attributes,
events, method names and
package file structure. We also changed the design of all
components, so you can dive into and update to match it.
Additionally we've updated and added new functionalities in Alert, Scrollpsy, Stepper, and Toast components which makes them more powerful and easier to use. Necessarily check it out!
Furthermore, we improved RTL support in our package, but we
will still working on upgrading it.
Initialization and components usage
We've changed te name to twe, so now data
attributes look like data-twe-{component-name}-.... For
example, the old data attribute for referencing the dropdpown component
was data-te-dropdown-ref, now it's
data-twe-dropdown-ref.
<div class="relative" data-te-dropdown-ref>
<button
class="flex items-center rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 motion-reduce:transition-none dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
type="button"
id="dropdownMenuButton1"
data-te-dropdown-toggle-ref
aria-expanded="false"
data-te-ripple-init
data-te-ripple-color="light">
Dropdown button
<span class="ml-2 [&>svg]:h-5 [&>svg]:w-5">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor">
<path
fill-rule="evenodd"
d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
clip-rule="evenodd" />
</svg>
</span>
</button>
<ul
class="absolute z-[1000] float-left m-0 hidden min-w-max list-none overflow-hidden rounded-lg border-none bg-white bg-clip-padding text-left text-base shadow-lg dark:bg-surface-dark [&[data-twe-dropdown-show]]:block"
aria-labelledby="dropdownMenuButton1"
data-te-dropdown-menu-ref>
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-te-dropdown-item-ref
>Action</a
>
</li>
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-te-dropdown-item-ref
>Another action</a
>
</li>
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-te-dropdown-item-ref
>Something else here</a
>
</li>
</ul>
</div>
<div class="relative" data-twe-dropdown-ref>
<button
class="flex items-center rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 motion-reduce:transition-none dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
type="button"
id="myDropdown"
data-twe-dropdown-toggle-ref
aria-expanded="false"
data-twe-ripple-init
data-twe-ripple-color="light">
Dropdown button
<span class="ml-2 [&>svg]:h-5 [&>svg]:w-5">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor">
<path
fill-rule="evenodd"
d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
clip-rule="evenodd" />
</svg>
</span>
</button>
<ul
class="absolute z-[1000] float-left m-0 hidden min-w-max list-none overflow-hidden rounded-lg border-none bg-white bg-clip-padding text-left text-base shadow-lg dark:bg-surface-dark [&[data-twe-dropdown-show]]:block"
aria-labelledby="dropdownMenuButton1"
data-twe-dropdown-menu-ref>
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref
>Action</a
>
</li>
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref
>Another action</a
>
</li>
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref
>Something else here</a
>
</li>
</ul>
</div>
Keep in mind, these changes concern the old
initTE method and te variable. Now you should
use twe and initTWE instead of
te and initTE
Note: We recommend to review all instances of these
situations in the existing code and replace them:
initTE => initTWE,data-te => data-twe,data-[te => data-[twe,te. => twe.
// Before
import {
Dropdown,
Ripple,
initTE,
} from "tw-elements";
initTE({ Dropdown, Ripple });
// Now
import {
Dropdown,
Ripple,
initTWE,
} from "tw-elements";
initTWE({ Dropdown, Ripple });
// Before
const myDropdown = document.getElementById('myDropdown');
const myDropdownInstance = new te.Dropdown(myDropdown);
myDropdownInstance.show();
// Now
const myDropdown = document.getElementById('myDropdown');
const myDropdownInstance = new twe.Dropdown(myDropdown);
myDropdownInstance.show();
Package file structure
In the new version, there is no longer dist/ folder in the
source path to our TW Elements package. Now you should import js files
from tw-elements/js/ directory instead of
dist/ directory. Also, the plugin file has been moved to
tw-elements/ directory.
node_modules/
├── ...
├── tw-elements/
│ ├── css/
│ │ └── tw-elements.min.css
│ ├── js/
│ │ ├── tw-elements.es.min.js
│ │ ├── tw-elements.umd.min.js
│ | └── ...
│ ├── ...
│ ├── plugin.cjs
│ └── ...
└── ...
Below you can find an example of the new
tailwind.config.js.
module.exports = {
content: [
"./src/**/*.{html,js}",
"./node_modules/tw-elements/js/**/*.js"
],
plugins: [require("tw-elements/plugin.cjs")],
darkMode: "class"
};
Be aware that the
Charts became a
separate file now - it improved tree shaking what results in decreased
package size. This showed no difference when migrating to UMD format, but
if a user is going to use ES imports then charts need to be imported from
chart.es.min.js file as a separate module.
import { Chart, initTWE } from "tw-elements/js/chart.es.min.js";
initTWE({ Chart });
Events
We've decided to change the names of events to more meaningful and uniform throughout components. We also introduced a few new events to expand possible interactions with components.
| Category | Component Name | Old event name | New event name |
|---|---|---|---|
| Navigation | Offcanvas |
show.te.offcanvas
|
show.twe.offcanvas
|
shown.te.offcanvas
|
shown.twe.offcanvas
|
||
hide.te.offcanvas
|
hide.twe.offcanvas
|
||
hidden.te.offcanvas
|
hidden.twe.offcanvas
|
||
| Scrollspy |
activate.te.scrollspy
|
activate.twe.scrollspy
|
|
| Sidenav |
show.te.sidenav
|
show.twe.sidenav
|
|
shown.te.sidenav
|
shown.twe.sidenav
|
||
hide.te.sidenav
|
hide.twe.sidenav
|
||
hidden.te.sidenav
|
hidden.twe.sidenav
|
||
expand.te.sidenav
|
expand.twe.sidenav
|
||
expanded.te.sidenav
|
expanded.twe.sidenav
|
||
collapse.te.sidenav
|
collapse.twe.sidenav
|
||
collapsed.te.sidenav
|
collapsed.twe.sidenav
|
||
update.te.sidenav
|
update.twe.sidenav
|
||
| Tab |
show.te.tab
|
show.twe.tab
|
|
shown.te.tab
|
shown.twe.tab
|
||
hide.te.tab
|
hide.twe.tab
|
||
hidden.te.tab
|
hidden.twe.tab
|
||
| Components | Alert |
close.te.alert
|
close.twe.alert
|
closed.te.alert
|
closed.twe.alert
|
||
| Carousel |
slide.te.carousel
|
slide.twe.carousel
|
|
slid.te.carousel
|
slid.twe.carousel
|
||
| Collapse |
show.te.collapse
|
show.twe.collapse
|
|
shown.te.collapse
|
shown.twe.collapse
|
||
hide.te.collapse
|
hide.twe.collapse
|
||
hidden.te.collapse
|
hidden.twe.collapse
|
||
| Chips |
add.te.chips
|
add.twe.chips
|
|
arrowDown.te.chips
|
arrowDown.twe.chips
|
||
arrowLeft.te.chips
|
arrowLeft.twe.chips
|
||
arrowRight.te.chips
|
arrowRight.twe.chips
|
||
arrowUp.te.chips
|
arrowUp.twe.chips
|
||
delete.te.chips
|
delete.twe.chips
|
||
| Dropdown |
show.te.dropdown
|
show.twe.dropdown
|
|
shown.te.dropdown
|
shown.twe.dropdown
|
||
hide.te.dropdown
|
hide.twe.dropdown
|
||
hidden.te.dropdown
|
hidden.twe.dropdown
|
||
| Lightbox |
open.te.lightbox
|
open.twe.lightbox
|
|
opened.te.lightbox
|
opened.twe.lightbox
|
||
slide.te.lightbox
|
slide.twe.lightbox
|
||
slided.te.lightbox
|
slid.twe.lightbox
|
||
zoomIn.te.lightbox
|
zoomIn.twe.lightbox
|
||
zoomedIn.te.lightbox
|
zoomedIn.twe.lightbox
|
||
zoomOut.te.lightbox
|
zoomOut.twe.lightbox
|
||
zoomedOut.te.lightbox
|
zoomedOut.twe.lightbox
|
||
close.te.lightbox
|
close.twe.lightbox
|
||
closed.te.lightbox
|
closed.twe.lightbox
|
||
| Modal |
show.te.modal
|
show.twe.modal
|
|
shown.te.modal
|
shown.twe.modal
|
||
hide.te.modal
|
hide.twe.modal
|
||
hidden.te.modal
|
hidden.twe.modal
|
||
hidePrevented.te.modal
|
hidePrevented.twe.modal
|
||
| Popconfirm |
cancel.te.popconfirm
|
cancel.twe.popconfirm
|
|
confirm.te.popconfirm
|
confirm.twe.popconfirm
|
||
| Popover |
show.te.popover
|
show.twe.popover
|
|
shown.te.popover
|
shown.twe.popover
|
||
hide.te.popover
|
hide.twe.popover
|
||
hidden.te.popover
|
hidden.twe.popover
|
||
inserted.te.popover
|
inserted.twe.popover
|
||
| Rating |
onSelect.te.rating
|
scoreSelect.twe.rating
|
|
onHover.te.rating
|
scoreHover.twe.rating
|
||
| Stepper |
onChangeStep.te.stepper
|
stepChange.twe.stepper
|
|
onChangedStep.te.stepper
|
stepChanged.twe.stepper
|
||
-
|
stepValid.twe.stepper
|
||
-
|
stepInvalid.twe.stepper
|
||
| Toast |
show.te.toast
|
show.twe.toast
|
|
shown.te.toast
|
shown.twe.toast
|
||
hide.te.toast
|
hide.twe.toast
|
||
hidden.te.toast
|
hidden.twe.toast
|
||
| Tooltip |
show.te.tooltip
|
show.twe.tooltip
|
|
shown.te.tooltip
|
shown.twe.tooltip
|
||
hide.te.tooltip
|
hide.twe.tooltip
|
||
hidden.te.tooltip
|
hidden.twe.tooltip
|
||
inserted.te.tooltip
|
inserted.twe.tooltip
|
||
| Forms | Autocomplete |
open.te.autocomplete
|
open.twe.autocomplete
|
close.te.autocomplete
|
close.twe.autocomplete
|
||
itemSelect.te.autocomplete
|
itemSelect.twe.autocomplete
|
||
update.te.autocomplete
|
update.twe.autocomplete
|
||
| Datepicker |
open.te.datepicker
|
open.twe.datepicker
|
|
close.te.datepicker
|
close.twe.datepicker
|
||
dateChange.te.datepicker
|
valueChanged.twe.datepicker
|
||
| Multi range |
valueChanged.te.multiRangeSlider
|
valueChanged.twe.multiRangeSlider
|
|
| Datetimepicker |
open.te.datetimepicker
|
open.twe.datetimepicker
|
|
close.te.datetimepicker
|
close.twe.datetimepicker
|
||
datetimeChange.te.datetimepicker
|
valueChanged.twe.datetimepicker
|
||
| Select |
open.te.select
|
open.twe.select
|
|
-
|
opened.twe.select
|
||
close.te.select
|
close.twe.select
|
||
-
|
closed.twe.select
|
||
valueChange.te.select
|
valueChanged.twe.select
|
||
optionSelect.te.select
|
optionSelected.twe.select
|
||
optionDeselect.te.select
|
optionDeselected.twe.select
|
||
| Timepicker |
input.te.timepicker
|
valueChanged.twe.timepicker
|
|
| Validation |
validated.te.validation
|
validated.twe.validation
|
|
valid.te.validation
|
valid.twe.validation
|
||
invalid.te.validation
|
invalid.twe.validation
|
||
changed.te.validation
|
valueChanged.twe.validation
|
||
| Data | Datatable |
update.te.datatable
|
update.twe.datatable
|
selectRows.te.datatable
|
rowSelected.twe.datatable
|
||
render.te.datatable
|
render.twe.datatable
|
||
rowClick.te.datatable
|
rowClicked.twe.datatable
|
||
| Methods | Clipboard |
copy.te.clipboard
|
copied.te.clipboard
|
| Infinite Scroll |
complete.te.infiniteScroll
|
completed.twe.infiniteScroll
|
|
| Lazy loading |
onLoad.te.lazy
|
contentLoaded.twe.lazyLoad
|
|
onError.te.lazy
|
loadingError.twe.lazyLoad
|
||
| Loading management |
show.te.loadingManagement
|
show.twe.loadingManagement
|
|
| Scrollbar |
scrollX.te.ps
|
scrollX.twe.ps
|
|
scrollY.te.ps
|
scrollY.twe.ps
|
||
scrollUp.te.ps
|
scrollUp.twe.ps
|
||
scrollDown.te.ps
|
scrollDown.twe.ps
|
||
scrollLeft.te.ps
|
scrollLeft.twe.ps
|
||
scrollRight.te.ps
|
scrollRight.twe.ps
|
||
scrollYStart.te.ps
|
scrollYStart.twe.ps
|
||
scrollXStart.te.ps
|
scrollXStart.twe.ps
|
||
scrollXEnd.te.ps
|
scrollXEnd.twe.ps
|
||
scrollYEnd.te.ps
|
scrollYEnd.twe.ps
|
||
| Smooth scroll |
scrollCancel.te.smoothScroll
|
scrollCancel.twe.smoothScroll
|
|
scrollEnd.te.smoothScroll
|
scrollEnd.twe.smoothScroll
|
||
scrollStart.te.smoothScroll
|
scrollStart.twe.smoothScroll
|
||
| Sticky |
active.te.sticky
|
activated.twe.sticky
|
|
inactive.te.sticky
|
deactivated.twe.sticky
|
Methods
Same as events some method names were changed for the sake of unification or to accommodate new functionality.
-
Autocomplete- RenamedinitSearchmethod tosearch. -
Stepper- RenamedpreviousStepmethod toprevStep. -
Sticky:-
Renamed
activemethod toactivate. -
Renamed
inactivemethod todeactivate.
-
Renamed