Merge pull request #266 from Hugo-Le-Goff/patch-1

Author: excid3

docs/dropdown.md

@@ -45,3 +45,19 @@ The code above will toggle the dropdown component, if you needed to only perform
 data-action="click->dropdown#show"
 data-action="click->dropdown#hide"
 ```
+
+### Transitions
+
+The Dropdown component allows you to natively personalize the css transitions as described in the [transition](/docs/transition.md) utility.
+
+In the table below are detailed the defaults tansitions options values, and the data classes attributes you can apply to your controller element to customize your transitions.
+
+| Options   | Default value                      | HTML data atribute               |
+|-----------|------------------------------------|----------------------------------|
+| enter     | `transition ease-out duration-100` | `data-dropdown-enter-class`      |
+| enterFrom | `transform opacity-0 scale-95`     | `data-dropdown-enter-from-class` |
+| enterTo   | `transform opacity-100 scale-100`  | `data-dropdown-enter-to-class`   |
+| leave     | `transition ease-in duration-75`   | `data-dropdown-leave-class`      |
+| leaveFrom | `transform opacity-100 scale-100`  | `data-dropdown-leave-from-class` |
+| leaveTo   | `transform opacity-0 scale-95`     | `data-dropdown-leave-to-class`   |
+| toggle    | `hidden`                           | `data-dropdown-toggle-class`     |

docs/transition.md

@@ -9,6 +9,7 @@ import { Controller } from "@hotwired/stimulus"
 
 class CustomController extends Controller {
     static targets = ['content']
+    static classes = ['enter', 'enterFrom', 'enterTo', 'leave', 'leaveFrom', 'leaveTo', 'toggle']
 
     showContent() {
       transition(this.contentTarget, true, this.defaultOptions())
@@ -20,13 +21,13 @@ class CustomController extends Controller {
 
     defaultOptions() {
       return {
-        enter: this.hasEnterClass ? this.enterClass : 'transition ease-out duration-100',
-        enterFrom: this.hasEnterFromClass ? this.enterFromClass : 'transform opacity-0 scale-95',
-        enterTo: this.hasEnterToClass ? this.enterToClass : 'transform opacity-100 scale-100',
-        leave: this.hasLeaveClass ? this.leaveClass : 'transition ease-in duration-75',
-        leaveFrom: this.hasLeaveFromClass ? this.leaveFromClass : 'transform opacity-100 scale-100',
-        leaveTo: this.hasLeaveToClass ? this.leaveToClass : 'transform opacity-0 scale-95',
-        toggleClass: this.hasToggleClass ? this.toggleClass : 'hidden',
+        enter: this.hasEnterClass ? this.enterClasses.join(' ') : 'transition ease-out duration-100',
+        enterFrom: this.hasEnterFromClass ? this.enterFromClasses.join(' ') : 'transform opacity-0 scale-95',
+        enterTo: this.hasEnterToClass ? this.enterToClasses.join(' ') : 'transform opacity-100 scale-100',
+        leave: this.hasLeaveClass ? this.leaveClasses.join(' ') : 'transition ease-in duration-75',
+        leaveFrom: this.hasLeaveFromClass ? this.leaveFromClasses.join(' ') : 'transform opacity-100 scale-100',
+        leaveTo: this.hasLeaveToClass ? this.leaveToClasses.join(' ') : 'transform opacity-0 scale-95',
+        toggleClass: this.hasToggleClass ? this.toggleClasses.join(' ') : 'hidden',
       }
     }
 }
@@ -45,12 +46,12 @@ on an element by element basis
   <div class="hidden absolute left-0 bottom-7 w-max bg-white border border-gray-200 shadow rounded p-2"
        data-custom-target="content"       
 
-       data-custom-enter="transition ease-out duration-100"
-       data-custom-enter-from="transform opacity-0 scale-95"
-       data-custom-enter-to="transform opacity-100 scale-100"
-       data-custom-leave="transition ease-in duration-75"
-       data-custom-leave-from="transform opacity-100 scale-100"
-       data-custom-leave-to="transform opacity-0 scale-95-0" 
+       data-custom-enter-class="transition ease-out duration-100"
+       data-custom-enter-from-class="transform opacity-0 scale-95"
+       data-custom-enter-to-class="transform opacity-100 scale-100"
+       data-custom-leave-class="transition ease-in duration-75"
+       data-custom-leave-from-class="transform opacity-100 scale-100"
+       data-custom-leave-to-class="transform opacity-0 scale-95-0" 
        data-toggle="hidden"        
     >
     Content

src/dropdown.js

@@ -85,19 +85,19 @@ export default class extends Controller {
   get transitionOptions() {
     // once the Class API default values are available, we can simplify this
     return {
-      enter: this.hasEnterClass ? this.enterClass : 'transition ease-out duration-100',
-      enterFrom: this.hasEnterFromClass ? this.enterFromClass : 'transform opacity-0 scale-95',
-      enterTo: this.hasEnterToClass ? this.enterToClass : 'transform opacity-100 scale-100',
-      leave: this.hasLeaveClass ? this.leaveClass : 'transition ease-in duration-75',
-      leaveFrom: this.hasLeaveFromClass ? this.leaveFromClass : 'transform opacity-100 scale-100',
-      leaveTo: this.hasLeaveToClass ? this.leaveToClass : 'transform opacity-0 scale-95',
-      toggleClass: this.hasToggleClass ? this.toggleClass : 'hidden',
+      enter: this.hasEnterClass ? this.enterClasses.join(' ') : 'transition ease-out duration-100',
+      enterFrom: this.hasEnterFromClass ? this.enterFromClasses.join(' ') : 'transform opacity-0 scale-95',
+      enterTo: this.hasEnterToClass ? this.enterToClasses.join(' ') : 'transform opacity-100 scale-100',
+      leave: this.hasLeaveClass ? this.leaveClasses.join(' ') : 'transition ease-in duration-75',
+      leaveFrom: this.hasLeaveFromClass ? this.leaveFromClasses.join(' ') : 'transform opacity-100 scale-100',
+      leaveTo: this.hasLeaveToClass ? this.leaveToClasses.join(' ') : 'transform opacity-0 scale-95',
+      toggleClass: this.hasToggleClass ? this.toggleClasses.join(' ') : 'hidden',
     }
   }
 
   // Ensures the menu is hidden before Turbo caches the page
   beforeCache() {
     this.openValue = false
-    this.menuTarget.classList.add("hidden")
+    this.menuTarget.classList.add(this.transitionOptions.toggleClass)
   }
 }