Add autoinits for tooltips & popover (#1746)

* Add autoinits for tooltips & popover * Add autoinits for tooltips & popover * Add autoinits - demo sites
mdbootstrap · Jul 3, 2023 · c345793 · c345793
1 parent 5cea098
commit c345793
Show file tree

Hide file tree

Showing 12 changed files with 165 additions and 66 deletions.
diff --git a/demo/sites/components/popover.html b/demo/sites/components/popover.html
@@ -59,31 +59,31 @@
 
       <button
         type="button"
-        class="rounded bg-primary px-6 pt-2.5 pb-2 text-xs font-medium uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-primary-700 hover:shadow-lg focus:bg-primary-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-primary-800 active:shadow-lg"
+        class="rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-primary-700 hover:shadow-lg focus:bg-primary-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-primary-800 active:shadow-lg"
         data-te-toggle="popover"
         data-te-placement="top"
         data-te-content="Top popover">
         Popover on top
       </button>
       <button
         type="button"
-        class="rounded bg-primary px-6 pt-2.5 pb-2 text-xs font-medium uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-primary-700 hover:shadow-lg focus:bg-primary-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-primary-800 active:shadow-lg"
+        class="rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-primary-700 hover:shadow-lg focus:bg-primary-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-primary-800 active:shadow-lg"
         data-te-toggle="popover"
         data-te-placement="right"
         data-te-content="Right popover">
         Popover on right
       </button>
       <button
         type="button"
-        class="rounded bg-primary px-6 pt-2.5 pb-2 text-xs font-medium uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-primary-700 hover:shadow-lg focus:bg-primary-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-primary-800 active:shadow-lg"
+        class="rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-primary-700 hover:shadow-lg focus:bg-primary-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-primary-800 active:shadow-lg"
         data-te-toggle="popover"
         data-te-placement="bottom"
         data-te-content="Bottom popover">
         Popover on bottom
       </button>
       <button
         type="button"
-        class="rounded bg-primary px-6 pt-2.5 pb-2 text-xs font-medium uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-primary-700 hover:shadow-lg focus:bg-primary-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-primary-800 active:shadow-lg"
+        class="rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-primary-700 hover:shadow-lg focus:bg-primary-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-primary-800 active:shadow-lg"
         data-te-toggle="popover"
         data-te-placement="left"
         data-te-content="Left popover">
@@ -116,7 +116,7 @@
         data-te-trigger="hover focus"
         data-te-content="Disabled popover">
         <button
-          class="pointer-events-none rounded bg-primary px-6 pt-2.5 pb-2 text-xs font-medium uppercase leading-normal text-white opacity-60 shadow-md transition duration-150 ease-in-out focus:outline-none focus:ring-0"
+          class="pointer-events-none rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white opacity-60 shadow-md transition duration-150 ease-in-out focus:outline-none focus:ring-0"
           type="button"
           disabled>
           Disabled button
@@ -129,22 +129,13 @@
     </div>
     <!-- Theme switcher -->
     <script type="module" src="../../../src/js/theme.js"></script>
+    <!-- MDB -->
+    <script type="module" src="../../../src/js/index.umd.js"></script>
     <!-- PRISM -->
     <script type="module" src="../../dev/js/new-prism.js"></script>
     <!-- MDB SNIPPET -->
     <script type="module" src="../../dev/js/dist/mdbsnippet.min.js"></script>
     <!-- Custom scripts -->
-    <script type="module">
-      import * as te from "../../../src/js/index.umd.js";
-
-      document.addEventListener("DOMContentLoaded", () => {
-        var popoverTriggerList = [].slice.call(
-          document.querySelectorAll('[data-te-toggle="popover"]')
-        );
-        var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
-          return new te.Popover(popoverTriggerEl);
-        });
-      });
-    </script>
+    <script type="text/javascript"></script>
   </body>
 </html>
diff --git a/demo/sites/components/tooltip.html b/demo/sites/components/tooltip.html
@@ -60,31 +60,31 @@
 
       <button
         type="button"
-        class="rounded bg-primary px-6 pt-2.5 pb-2 text-xs font-medium uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-primary-700 hover:shadow-lg focus:bg-primary-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-primary-800 active:shadow-lg"
+        class="rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-primary-700 hover:shadow-lg focus:bg-primary-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-primary-800 active:shadow-lg"
         data-te-toggle="tooltip"
         data-te-placement="top"
         title="Tooltip on top">
         Tooltip on top
       </button>
       <button
         type="button"
-        class="rounded bg-primary px-6 pt-2.5 pb-2 text-xs font-medium uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-primary-700 hover:shadow-lg focus:bg-primary-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-primary-800 active:shadow-lg"
+        class="rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-primary-700 hover:shadow-lg focus:bg-primary-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-primary-800 active:shadow-lg"
         data-te-toggle="tooltip"
         data-te-placement="right"
         title="Tooltip on right">
         Tooltip on right
       </button>
       <button
         type="button"
-        class="rounded bg-primary px-6 pt-2.5 pb-2 text-xs font-medium uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-primary-700 hover:shadow-lg focus:bg-primary-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-primary-800 active:shadow-lg"
+        class="rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-primary-700 hover:shadow-lg focus:bg-primary-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-primary-800 active:shadow-lg"
         data-te-toggle="tooltip"
         data-te-placement="bottom"
         title="Tooltip on bottom">
         Tooltip on bottom
       </button>
       <button
         type="button"
-        class="rounded bg-primary px-6 pt-2.5 pb-2 text-xs font-medium uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-primary-700 hover:shadow-lg focus:bg-primary-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-primary-800 active:shadow-lg"
+        class="rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-primary-700 hover:shadow-lg focus:bg-primary-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-primary-800 active:shadow-lg"
         data-te-toggle="tooltip"
         data-te-placement="left"
         title="Tooltip on left">
@@ -97,7 +97,7 @@
 
       <button
         type="button"
-        class="rounded bg-primary px-6 pt-2.5 pb-2 text-xs font-medium uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-primary-700 hover:shadow-lg focus:bg-primary-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-primary-800 active:shadow-lg"
+        class="rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-primary-700 hover:shadow-lg focus:bg-primary-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-primary-800 active:shadow-lg"
         data-te-toggle="tooltip"
         data-te-html="true"
         title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
@@ -114,7 +114,7 @@
         data-te-toggle="tooltip"
         title="Disabled tooltip">
         <button
-          class="pointer-events-none rounded bg-primary px-6 pt-2.5 pb-2 text-xs font-medium uppercase leading-normal text-white opacity-60 shadow-md transition duration-150 ease-in-out focus:outline-none focus:ring-0"
+          class="pointer-events-none rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white opacity-60 shadow-md transition duration-150 ease-in-out focus:outline-none focus:ring-0"
           type="button"
           disabled>
           Disabled button
@@ -128,22 +128,13 @@
       charset="utf-8"></script>
     <!-- Theme switcher -->
     <script type="module" src="../../../src/js/theme.js"></script>
+    <!-- MDB -->
+    <script type="module" src="../../../src/js/index.umd.js"></script>
     <!-- PRISM -->
     <script type="module" src="../../dev/js/new-prism.js"></script>
     <!-- MDB SNIPPET -->
     <script type="module" src="../../dev/js/dist/mdbsnippet.min.js"></script>
     <!-- Custom scripts -->
-    <script type="module">
-      import * as te from "../../../src/js/index.umd.js";
-
-      document.addEventListener("DOMContentLoaded", () => {
-        var tooltipTriggerList = [].slice.call(
-          document.querySelectorAll('[data-te-toggle="tooltip"]')
-        );
-        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
-          return new te.Tooltip(tooltipTriggerEl);
-        });
-      });
-    </script>
+    <script type="module"></script>
   </body>
 </html>
diff --git a/site/content/docs/standard/components/popover/a-ss.html b/site/content/docs/standard/components/popover/a-ss.html
@@ -2,6 +2,9 @@
 ---
 
 <li class="mb-1 pl-[9px] text-[0.85rem]" data-te-spy-active>
+  <a href="#api-section-import">Import</a>
+</li>
+<li class="mb-1 pl-[9px] text-[0.85rem]">
   <a href="#api-section-usage">Usage</a>
 </li>
 <li class="mb-1 pl-[9px] text-[0.85rem]">

diff --git a/site/content/docs/standard/components/popover/a.html b/site/content/docs/standard/components/popover/a.html
@@ -3,6 +3,45 @@
 
 <!-- Section: Docs content-->
 <section>
+  <!--Section: Import-->
+  <section id="api-section-import">
+    <!--Title-->
+    <h2
+      class="mb-5 mt-0 text-3xl font-semibold leading-normal text-gray-800 dark:text-gray-200"
+      id="import"
+      data-te-spy-item>
+      Import
+    </h2>
+
+    <p>
+      Importing components depends on how your application works. If you intend
+      to use the Tailwind Elements <code>ES</code> format, you must first import
+      the component and then initialize it with the <code>initTE</code> method.
+      If you are going to use the <code>UMD</code> format, just import the
+      <code>tw-elements</code> package.
+    </p>
+
+    <!--Section: Code-->
+    {{< twsnippet/no-demo id="api-example41" >}}
+    <section class="!visible hidden" data-te-collapse-item id="api-example41">
+      <div class="pt-4">
+        {{< twsnippet/wrapper "javascript,umd" >}}
+        <!-- prettier-ignore -->
+        {{< twsnippet/code active=true lang="js" >}}
+        import { Popover, initTE } from "tw-elements";
+        initTE({ Popover });
+        {{< /twsnippet/code >}}
+        <!-- prettier-ignore -->
+        {{< twsnippet/code lang="js" >}}
+        import "tw-elements";
+        {{< /twsnippet/code >}}
+        {{< /twsnippet/wrapper >}}
+      </div>
+    </section>
+    <!--Section: Code-->
+  </section>
+  <!--Section: Import-->
+
   <!-- Section: Usage-->
   <section id="api-section-usage">
     <!-- Title -->

diff --git a/site/content/docs/standard/components/popover/index-js.html b/site/content/docs/standard/components/popover/index-js.html
diff --git a/site/content/docs/standard/components/popover/index.html b/site/content/docs/standard/components/popover/index.html
@@ -12,6 +12,7 @@
 menu:
   components:
     name: "Popover"
+autoinits: "Popover"
 ---
 
 <!-- Section: Basic example -->
@@ -66,11 +67,12 @@
       {{< twsnippet/code lang="js" >}}
       // Initialization for ES Users
       import {
+        Popover,
         Ripple,
         initTE,
       } from "tw-elements";
 
-      initTE({ Ripple });
+      initTE({ Popover, Ripple });
       {{< /twsnippet/code >}}
       {{< /twsnippet/wrapper >}}
     </div>
@@ -460,11 +462,12 @@
       {{< twsnippet/code lang="js" >}}
       // Initialization for ES Users
       import {
+        Popover,
         Ripple,
         initTE,
       } from "tw-elements";
 
-      initTE({ Ripple });
+      initTE({ Popover, Ripple });
       {{< /twsnippet/code >}}
       {{< /twsnippet/wrapper >}}
     </div>
@@ -528,11 +531,12 @@
       {{< twsnippet/code lang="js" >}}
       // Initialization for ES Users
       import {
+        Popover,
         Ripple,
         initTE,
       } from "tw-elements";
 
-      initTE({ Ripple });
+      initTE({ Popover, Ripple });
       {{< /twsnippet/code >}}
       {{< /twsnippet/wrapper >}}
     </div>
@@ -598,11 +602,12 @@
       {{< twsnippet/code lang="js" >}}
       // Initialization for ES Users
       import {
+        Popover,
         Ripple,
         initTE,
       } from "tw-elements";
 
-      initTE({ Ripple });
+      initTE({ Popover, Ripple });
       {{< /twsnippet/code >}}
       {{< /twsnippet/wrapper >}}
     </div>

diff --git a/site/content/docs/standard/components/tooltip/a-ss.html b/site/content/docs/standard/components/tooltip/a-ss.html
@@ -2,6 +2,9 @@
 ---
 
 <li class="mb-1 pl-[9px] text-[0.85rem]" data-te-spy-active>
+  <a href="#api-section-import">Import</a>
+</li>
+<li class="mb-1 pl-[9px] text-[0.85rem]">
   <a href="#api-section-usage">Usage</a>
 </li>
 <li class="mb-1 pl-[9px] text-[0.85rem]">

diff --git a/site/content/docs/standard/components/tooltip/a.html b/site/content/docs/standard/components/tooltip/a.html
@@ -3,6 +3,47 @@
 
 <!-- Section: Docs content-->
 <section>
+  <!--Section: Import-->
+  <section id="api-section-import">
+    <!--Title-->
+    <h2
+      class="mb-5 mt-0 text-3xl font-semibold leading-normal text-gray-800 dark:text-gray-200"
+      id="import"
+      data-te-spy-item>
+      Import
+    </h2>
+
+    <p>
+      Importing components depends on how your application works. If you intend
+      to use the Tailwind Elements <code>ES</code> format, you must first import
+      the component and then initialize it with the <code>initTE</code> method.
+      If you are going to use the <code>UMD</code> format, just import the
+      <code>tw-elements</code> package.
+    </p>
+
+    <!--Section: Code-->
+    {{< twsnippet/no-demo id="api-example41" >}}
+    <section class="!visible hidden" data-te-collapse-item id="api-example41">
+      <div class="pt-4">
+        {{< twsnippet/wrapper "javascript,umd" >}}
+        <!-- prettier-ignore -->
+        {{< twsnippet/code active=true lang="js" >}}
+        import { Tooltip, initTE } from "tw-elements";
+        initTE({ Tooltip });
+        {{< /twsnippet/code >}}
+        <!-- prettier-ignore -->
+        {{< twsnippet/code lang="js" >}}
+        import "tw-elements";
+        {{< /twsnippet/code >}}
+        {{< /twsnippet/wrapper >}}
+      </div>
+    </section>
+    <!--Section: Code-->
+  </section>
+  <!--Section: Import-->
+
+  <hr class="mb-5 dark:border-gray-600" />
+
   <!-- Section: Usage-->
   <section id="api-section-usage">
     <!-- Title -->