Introduce "none" trigger types fixing #181.

content/components/popover.md

@@ -477,7 +477,7 @@ Use the following options as the third parameter for the Popover object to set t
                     String
                 </td>
                 <td class="px-6 py-4">
-                    Set the event type that will trigger the popover content choosing between <code class="text-purple-600 dark:text-purple-400">hover|click</code>.
+                    Set the event type that will trigger the popover content choosing between <code class="text-purple-600 dark:text-purple-400">hover|click|none</code>.
                 </td>
             </tr>
             <tr class="border-b dark:bg-gray-800 dark:border-gray-700">
@@ -513,6 +513,17 @@ Use the following options as the third parameter for the Popover object to set t
                     Set a callback function when the popover is shown.
                 </td>
             </tr>
+            <tr class="border-b dark:bg-gray-800 dark:border-gray-700">
+                <td class="px-6 py-4 font-medium">
+                    <code class="text-blue-600 dark:text-blue-400">onToggle</code>
+                </td>
+                <td class="px-6 py-4 font-medium">
+                    Function
+                </td>
+                <td class="px-6 py-4">
+                    Set a callback function when the popover visibility has been toggled.
+                </td>
+            </tr>
         </tbody>
     </table>
 </div>
@@ -550,6 +561,22 @@ Use the methods from the Popover object to programmatically show or hide the pop
                     Use this method on the Popover object to hide the popover content.
                 </td>
             </tr>
+            <tr class="border-b dark:bg-gray-800 dark:border-gray-700">
+                <td class="px-6 py-4 font-medium">
+                    <code class="text-blue-600 dark:text-blue-400">toggle()</code>
+                </td>
+                <td class="px-6 py-4">
+                    Use this method on the Popover object to toggle the visibility of the popover content.
+                </td>
+            </tr>
+            <tr class="border-b dark:bg-gray-800 dark:border-gray-700">
+                <td class="px-6 py-4 font-medium">
+                    <code class="text-blue-600 dark:text-blue-400">isVisible()</code>
+                </td>
+                <td class="px-6 py-4">
+                    Use this function to check if the popover is visible or not.
+                </td>
+            </tr>
         </tbody>
     </table>
 </div>
@@ -579,6 +606,9 @@ const options = {
   },
   onShow: () => {
       console.log('popover is hidden');
+  },
+  onToggle: () => {
+      console.log('popover is toggled');
   }
 };
 ```
@@ -602,13 +632,19 @@ popover.show();
 
 // hide the popover
 popover.hide();
+
+// toggle the popover
+popover.toggle();
+
+// check if popover is visible
+popover.isVisible();
 ```
 
 ### HTML Markup
 
 Use the following HTML code for the JavaScript example above.
 
-```html
+<!-- ```html -->
 <button id="popoverButton" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Default popover</button>
 <div data-popover id="popoverContent" role="tooltip" class="absolute z-10 invisible inline-block w-64 text-sm font-light text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800">
     <div class="px-3 py-2 bg-gray-100 border-b border-gray-200 rounded-t-lg dark:border-gray-600 dark:bg-gray-700">
@@ -619,7 +655,7 @@ Use the following HTML code for the JavaScript example above.
     </div>
     <div data-popper-arrow></div>
 </div>
-```
+<!-- ``` -->
 
 ### TypeScript
 
@@ -647,6 +683,9 @@ const options: PopoverOptions = {
   },
   onShow: () => {
       console.log('popover is hidden');
+  },
+  onToggle: () => {
+      console.log('popover is toggled');
   }
 };
 

content/components/speed-dial.md

@@ -870,7 +870,7 @@ Use the following options as the third parameter for the Speed Dial object to se
                     String
                 </td>
                 <td class="px-6 py-4">
-                    Set the event type that will trigger the speed dial choosing between <code class="text-purple-600 dark:text-purple-400">hover|click</code>.
+                    Set the event type that will trigger the speed dial choosing between <code class="text-purple-600 dark:text-purple-400">hover|click|none</code>.
                 </td>
             </tr>
             <tr class="border-b dark:bg-gray-800 dark:border-gray-700">

content/components/tooltips.md

@@ -238,7 +238,7 @@ Use the following options as the third parameter for the Tooltip class to set th
                     String
                 </td>
                 <td class="px-6 py-4">
-                    Set the event type that will trigger the tooltip content choosing between <code class="text-purple-600 dark:text-purple-400">hover|click</code>.
+                    Set the event type that will trigger the tooltip content choosing between <code class="text-purple-600 dark:text-purple-400">hover|click|none</code>.
                 </td>
             </tr>
             <tr class="border-b dark:bg-gray-800 dark:border-gray-700">
@@ -263,6 +263,17 @@ Use the following options as the third parameter for the Tooltip class to set th
                     Set a callback function when the tooltip is shown.
                 </td>
             </tr>
+            <tr class="border-b dark:bg-gray-800 dark:border-gray-700">
+                <td class="px-6 py-4 font-medium">
+                    <code class="text-blue-600 dark:text-blue-400">onToggle</code>
+                </td>
+                <td class="px-6 py-4 font-medium">
+                    Function
+                </td>
+                <td class="px-6 py-4">
+                    Set a callback function when the tooltip visibility is toggled.
+                </td>
+            </tr>
         </tbody>
     </table>
 </div>
@@ -300,6 +311,14 @@ Use the methods from the Tooltip object to programmatically show or hide the too
                     Use this method on the Tooltip object to hide the tooltip content.
                 </td>
             </tr>
+            <tr class="border-b dark:bg-gray-800 dark:border-gray-700">
+                <td class="px-6 py-4 font-medium">
+                    <code class="text-blue-600 dark:text-blue-400">toggle()</code>
+                </td>
+                <td class="px-6 py-4">
+                    Use this method on the Tooltip object to toggle the visibility of the tooltip content.
+                </td>
+            </tr>
         </tbody>
     </table>
 </div>
@@ -328,6 +347,9 @@ const options = {
   },
   onShow: () => {
       console.log('tooltip is hidden');
+  },
+  onToggle: () => {
+      console.log('tooltip is toggled');
   }
 };
 ```
@@ -351,6 +373,9 @@ tooltip.show();
 
 // hide the tooltip
 tooltip.hide();
+
+// toggle the tooltip
+tooltip.toggle();
 ```
 
 ### HTML Markup
@@ -390,6 +415,9 @@ const options: TooltipOptions = {
   },
   onShow: () => {
       console.log('tooltip is hidden');
+  },
+  onToggle: () => {
+      console.log('tooltip is toggled');
   }
 };
 

src/components/dial/index.ts

@@ -35,15 +35,15 @@ class Dial implements DialInterface {
             const triggerEventTypes = this._getTriggerEventTypes(
                 this._options.triggerType
             );
-            triggerEventTypes.show.forEach((ev: string) => {
+            triggerEventTypes.showEvents.forEach((ev: string) => {
                 this._triggerEl.addEventListener(ev, () => {
                     this.show();
                 });
                 this._targetEl.addEventListener(ev, () => {
                     this.show();
                 });
             });
-            triggerEventTypes.hide.forEach((ev: string) => {
+            triggerEventTypes.hideEvents.forEach((ev: string) => {
                 this._parentEl.addEventListener(ev, () => {
                     if (!this._parentEl.matches(':hover')) {
                         this.hide();
@@ -95,18 +95,23 @@ class Dial implements DialInterface {
         switch (triggerType) {
             case 'hover':
                 return {
-                    show: ['mouseenter', 'focus'],
-                    hide: ['mouseleave', 'blur'],
+                    showEvents: ['mouseenter', 'focus'],
+                    hideEvents: ['mouseleave', 'blur'],
                 };
             case 'click':
                 return {
-                    show: ['click', 'focus'],
-                    hide: ['focusout', 'blur'],
+                    showEvents: ['click', 'focus'],
+                    hideEvents: ['focusout', 'blur'],
+                };
+            case 'none':
+                return {
+                    showEvents: [],
+                    hideEvents: [],
                 };
             default:
                 return {
-                    show: ['mouseenter', 'focus'],
-                    hide: ['mouseleave', 'blur'],
+                    showEvents: ['mouseenter', 'focus'],
+                    hideEvents: ['mouseleave', 'blur'],
                 };
         }
     }

src/components/dial/types.ts

@@ -1,10 +1,10 @@
 import { DialInterface } from './interface';
 
-export declare type TriggerType = 'click' | 'hover';
+export declare type TriggerType = 'click' | 'hover' | 'none';
 
 export declare type TriggerEventTypes = {
-    show: string[];
-    hide: string[];
+    showEvents: string[];
+    hideEvents: string[];
 };
 
 export declare type DialOptions = {

src/components/popover/index.ts

@@ -13,13 +13,15 @@ const Default: PopoverOptions = {
     triggerType: 'hover',
     onShow: () => {},
     onHide: () => {},
+    onToggle: () => {},
 };
 
 class Popover implements PopoverInterface {
     _targetEl: HTMLElement;
     _triggerEl: HTMLElement;
     _options: PopoverOptions;
     _popperInstance: PopperInstance;
+    _visible: boolean;
 
     constructor(
         targetEl: HTMLElement | null = null,
@@ -30,6 +32,7 @@ class Popover implements PopoverInterface {
         this._triggerEl = triggerEl;
         this._options = { ...Default, ...options };
         this._popperInstance = this._createPopperInstance();
+        this._visible = false;
         this._init();
     }
 
@@ -89,6 +92,11 @@ class Popover implements PopoverInterface {
                     showEvents: ['click', 'focus'],
                     hideEvents: ['focusout', 'blur'],
                 };
+            case 'none':
+                return {
+                    showEvents: [],
+                    hideEvents: [],
+                };
             default:
                 return {
                     showEvents: ['mouseenter', 'focus'],
@@ -97,6 +105,19 @@ class Popover implements PopoverInterface {
         }
     }
 
+    isVisible() {
+        return this._visible;
+    }
+
+    toggle() {
+        if (this.isVisible()) {
+            this.hide();
+        } else {
+            this.show();
+        }
+        this._options.onToggle(this);
+    }
+
     show() {
         this._targetEl.classList.remove('opacity-0', 'invisible');
         this._targetEl.classList.add('opacity-100', 'visible');
@@ -113,6 +134,9 @@ class Popover implements PopoverInterface {
         // Update its position
         this._popperInstance.update();
 
+        // set visibility to true
+        this._visible = true;
+
         // callback function
         this._options.onShow(this);
     }
@@ -130,6 +154,9 @@ class Popover implements PopoverInterface {
             ],
         }));
 
+        // set visibility to false
+        this._visible = false;
+
         // callback function
         this._options.onHide(this);
     }

src/components/popover/interface.ts

@@ -1,4 +1,4 @@
-import { PopoverOptions } from './types';
+import { PopoverOptions, TriggerType, TriggerEventTypes } from './types';
 import type { Instance as PopperInstance } from '@popperjs/core';
 
 export declare interface PopoverInterface {
@@ -7,6 +7,9 @@ export declare interface PopoverInterface {
     _options: PopoverOptions;
     _popperInstance: PopperInstance;
 
+    _getTriggerEvents(triggerType: TriggerType): TriggerEventTypes;
+    isVisible(): boolean;
     show(): void;
     hide(): void;
+    toggle(): void;
 }

src/components/popover/types.ts

@@ -1,10 +1,18 @@
 import { PopoverInterface } from './interface';
 import type { Placement } from '@popperjs/core';
 
+export declare type TriggerType = 'click' | 'hover' | 'none';
+
+export declare type TriggerEventTypes = {
+    showEvents: string[];
+    hideEvents: string[];
+};
+
 export declare type PopoverOptions = {
     placement?: Placement;
     offset?: number;
-    triggerType?: string;
+    triggerType?: TriggerType;
     onShow?: (tooltip: PopoverInterface) => void;
     onHide?: (tooltip: PopoverInterface) => void;
+    onToggle?: (tooltip: PopoverInterface) => void;
 };