Merge branch 'master' of github.com:excid3/tailwindcss-stimulus-compo…

…nents

README.md

@@ -36,7 +36,7 @@ import { Application } from "@hotwired/stimulus"
 const application = Application.start();
 
 // Import and register all TailwindCSS Components or just the ones you need
-import { Alert, Autosave, Dropdown, Modal, Tabs, Popover, Toggle, Slideover } from "tailwindcss-stimulus-components"
+import { Alert, Autosave, ColorPreview, Dropdown, Modal, Tabs, Popover, Toggle, Slideover } from "tailwindcss-stimulus-components"
 application.register('alert', Alert)
 application.register('autosave', Autosave)
 application.register('color-preview', ColorPreview)
@@ -54,7 +54,7 @@ This will start StimulusJS and load any controllers that you have locally and th
 
 * [Alert](/docs/alert.md)
 * [Autosave](/docs/autosave.md)
-* [Color Preview](/docs/color_preview.md)
+* [Color Preview](/docs/color-preview.md)
 * [Dropdown](/docs/dropdown.md)
 * [Modal](/docs/modal.md)
 * [Popover](/docs/popover.md)

docs/modal.md

@@ -11,7 +11,7 @@ application.register('modal', Modal)
 
 ```html
 <div data-controller="modal" data-action="keydown.esc->modal#close" tabindex="-1" class="relative z-10">
-  <a href="#" data-action="click->modal#open" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded">Open Modal</a>
+  <button type="button" data-action="click->modal#open" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Open Modal</button>
 
   <!-- Modal Background -->
   <div class="hidden fixed inset-0 bg-black bg-opacity-80 overflow-y-auto flex items-center justify-center"
@@ -43,4 +43,6 @@ application.register('modal', Modal)
 ```
 
 `data-modal-restore-scroll-value` may be set to `false` to disable
-restoring scroll position.
+restoring scroll position.
+
+`data-modal-open-value` may be set to `true` to open modal on page load.

docs/popover.md

@@ -12,7 +12,7 @@ application.register('popover', Popover)
 ```html
 <p>
   Beginning in 2015, Google introduced what is called the
-    <div class="popover inline-block" data-controller="popover" data-popover-translate-x="0" data-popover-translate-y="-128%" data-action="mouseover->popover#mouseOver mouseout->popover#mouseOut">
+    <div class="popover inline-block" data-controller="popover" data-popover-translate-x="0" data-popover-translate-y="-128%" data-action="mouseover->popover#show mouseout->popover#hide">
       <span class="underline">'local snack pack',</span>
       <div class="content hidden absolute max-w-xs bg-gray-300 rounded p-2" data-popover-target="content">
         Terrible name - we know. But the biggest name in SEO came up with it.

docs/toggle.md

@@ -23,11 +23,11 @@ application.register('toggle', Toggle)
 In this example, clicking the question will toggle the hidden class. The hidden class is the default. If you wish to use a different class, you can use the `data-toggle-class="custom-class"` attribute.
 
 ```html
-<div data-controller='toggle' data-toggle-class='bg-red-900' class="m-2">
+<div data-controller='toggle' class="m-2">
   <div data-action='click->toggle#toggle touch->toggle#toggle' class="bg-gray-900 text-white p-6">
     What is the question?
   </div>
-  <div data-toggle-target='toggleable' class="m-4 bg-red-900">
+  <div data-toggle-target='toggleable' data-toggle-class='bg-red-900' class="m-4 bg-red-900">
     <p>This is the answer</p>
   </div>
 </div>
@@ -48,4 +48,4 @@ while this only shows it
     What is the question?
   </div>
 
-```
+```

index.html

@@ -279,7 +279,7 @@ <h2 class="text-2xl text-gray-800 font-semibold mb-4">Radios as Tabs</h2>
 
       <!-- Toggle -->
       <div class="my-12">
-        <h2 class="text-2xl text-gray-800 font-semibold mb-4">Toggle</h2>
+        <h2 class="text-2xl text-gray-800 font-semibold">Toggle</h2>
         <div data-controller='toggle' class="m-2 p-6 border flex items-center gap-4">
           <button data-action='click->toggle#toggle:prevent touch->toggle#toggle:prevent' class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded">
             Toggle button
@@ -296,26 +296,38 @@ <h2 class="text-2xl text-gray-800 font-semibold mb-4">Toggle</h2>
             <p>This is hidden text...</p>
           </div>
         </div>
-      </div>
-
         <div data-controller='toggle' class="m-2 p-6 border flex items-center gap-4">
           <label class="flex gap-2 items-center">
             <input type="checkbox" data-action="toggle#toggleInput">
             Trigger by checkbox or radio inputs
           </label>
           <div class="hidden bg-yellow-500/20"
-               data-toggle-target='toggleable'
-               data-transition-enter="transition-all ease-linear duration-300"
-               data-transition-enter-from="opacity-0 h-0"
-               data-transition-enter-to="opacity-100"
-               data-transition-leave="transition-all ease-linear duration-300"
-               data-transition-leave-from="opacity-100"
-               data-transition-leave-to="opacity-0"
-               >
+                data-toggle-target='toggleable'
+                data-transition-enter="transition-all ease-linear duration-300"
+                data-transition-enter-from="opacity-0 h-0"
+                data-transition-enter-to="opacity-100"
+                data-transition-leave="transition-all ease-linear duration-300"
+                data-transition-leave-from="opacity-100"
+                data-transition-leave-to="opacity-0"
+                >
             <p>This is hidden text...</p>
           </div>
         </div>
 
+        <div data-controller='toggle' class="m-2 p-6 border flex items-center gap-4">
+          <button data-action='click->toggle#toggle:prevent touch->toggle#toggle:prevent' class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded">
+            Toggle button with custom classes
+          </button>
+          <div class="opacity-50 bg-yellow-500/20"
+                data-toggle-target='toggleable'
+                data-toggle-class="opacity-50"
+                >
+            <p>This is toggleable text...</p>
+          </div>
+        </div>
+      </div>
+
+
       <!-- Color Picker and Preview -->
       <div class="my-12">
         <h2 class="text-2xl text-gray-800 font-semibold mb-4">Color Picker and Preview</h2>

src/transition.js

@@ -24,12 +24,13 @@ export async function enter(element) {
   const transitionClasses = element.dataset.transitionEnter || "enter"
   const fromClasses = element.dataset.transitionEnterFrom || "enter-from"
   const toClasses = element.dataset.transitionEnterTo || "enter-to"
+  const toggleClass = element.dataset.toggleClass || "hidden"
 
   // Prepare transition
   element.classList.add(...transitionClasses.split(" "))
   element.classList.add(...fromClasses.split(" "))
   element.classList.remove(...toClasses.split(" "))
-  element.classList.remove("hidden")
+  element.classList.remove(...toggleClass.split(" "))
 
   await nextFrame()
 
@@ -47,6 +48,7 @@ export async function leave(element) {
   const transitionClasses = element.dataset.transitionLeave || "leave"
   const fromClasses = element.dataset.transitionLeaveFrom || "leave-from"
   const toClasses = element.dataset.transitionLeaveTo || "leave-to"
+  const toggleClass = element.dataset.toggleClass || "hidden"
 
   // Prepare transition
   element.classList.add(...transitionClasses.split(" "))
@@ -62,7 +64,7 @@ export async function leave(element) {
     await afterTransition(element)
   } finally {
     element.classList.remove(...transitionClasses.split(" "))
-    element.classList.add("hidden")
+    element.classList.add(...toggleClass.split(" "))
   }
 }
 

test/toggle_test.js

@@ -40,4 +40,55 @@ describe('ToggleController', () => {
       expect(target.className.includes('hidden')).to.equal(false)
     })
   })
+
+  describe('#toggle with custom class', () => {
+    beforeEach(async () => {
+      await fixture(html`
+        <div data-controller="toggle" class="m-2">
+          <div
+            id="toggleAction"
+            data-action="click->toggle#toggle"
+            class="bg-gray-900 text-white p-6"
+          >
+            What is the question?
+          </div>
+          <div
+             id="toggleTarget"
+             data-toggle-target="toggleable"
+             data-toggle-class="class1 class2"
+             class="class1 class2 m-4"
+             data-transition-enter-to="opacity-100"
+             >
+            <p>This is the answer</p>
+          </div>
+        </div>
+      `)
+
+      const application = Application.start()
+      application.register('toggle', Toggle)
+    })
+
+    it('removes class1 and class2', async () => {
+      const action = document.querySelector('#toggleAction')
+      const target = document.querySelector('#toggleTarget')
+
+      action.click()
+
+      await nextFrame()
+      expect(target.className.includes('class1')).to.equal(false)
+      expect(target.className.includes('class2')).to.equal(false)
+    }),
+    it('re-adds class1 and class2', async () => {
+      const action = document.querySelector('#toggleAction')
+      const target = document.querySelector('#toggleTarget')
+
+      action.click()
+      await nextFrame()
+      action.click()
+      await nextFrame()
+
+      expect(target.className.includes('class1')).to.equal(true)
+      expect(target.className.includes('class2')).to.equal(true)
+    })
+  })
 })