Integrations fixes (#1621)

* Nuxt: integration's expansion * Nuxt integration: fixes * Vue: integration expansion * React: integration expansion * Angular: integration expansion * Django: integration expansion * Express: integration expansion * Laravel: integration expansion * Next: integration expansion * Remix: integration expansion * Nuxt integration: typo fix * Solid: integration extension * Svelte: integration expansion
mdbootstrap · Apr 26, 2023 · 21d184a · 21d184a
1 parent 55096ee
commit 21d184a
Show file tree

Hide file tree

Showing 11 changed files with 757 additions and 274 deletions.
diff --git a/site/content/docs/standard/integrations/angular/index.html b/site/content/docs/standard/integrations/angular/index.html
@@ -166,7 +166,8 @@ <h2 class="text-lg font-bold">Step 2</h2>
         theme: {
             extend: {},
         },
-        plugins: [require("tw-elements/dist/plugin")]
+        darkMode: "class",
+        plugins: [require("tw-elements/dist/plugin.cjs")]
         }
         {{< /twsnippet/code >}}
         {{< /twsnippet/wrapper >}}
@@ -189,6 +190,22 @@ <h2 class="text-lg font-bold">Step 3</h2>
         {{< /twsnippet/wrapper >}}
   </div>
 
+  <h2 class="text-lg font-bold">Step 4</h2>
+  <p class="mb-5">
+    Attach the <code>Roboto</code> font in <code>index.html</code>.
+  </p>
+
+  <div class="pb-4">
+    <!--prettier-ignore-->
+    {{< twsnippet/wrapper "index.html" "" "mobile" >}}
+        {{< twsnippet/code active=true lang="HTML" >}}
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap"
+      rel="stylesheet" />
+    {{< /twsnippet/code >}}
+    {{< /twsnippet/wrapper >}}
+  </div>
+
   <h2 class="text-lg font-bold">Step 4</h2>
   <p>Install Tailwind Elements.</p>
 
@@ -209,15 +226,39 @@ <h2 class="text-lg font-bold">Step 5</h2>
 
   <div class="pb-4">
     <!--prettier-ignore-->
-    {{< twsnippet/wrapper "app.component.ts" "" "mobile" >}}
+    {{< twsnippet/wrapper "app.component.ts, app.component.html" "" "mobile" >}}
         {{< twsnippet/code active=true lang="JavaScript" >}}
-        import { Datepicker, Input, initTE } from "tw-elements";
-
-        ngOnInit() {
-          initTE({ Datepicker, Input });
-        }
+        import { Component } from '@angular/core';
+        import { Carousel, Dropdown, initTE } from 'tw-elements';
+
+        @Component({
+          selector: 'app-root',
+          templateUrl: './app.component.html',
+          styleUrls: ['./app.component.css'],
+        })
+        export class AppComponent {
+          ngOnInit() {
+            initTE({ Carousel, Dropdown });
+          }
+        }        
         {{< /twsnippet/code >}}
-        {{< /twsnippet/wrapper >}}
+        {{< twsnippet/code lang="HTML" >}}
+    <div
+      class="relative mb-3"
+      data-te-datepicker-init
+      data-te-input-wrapper-init>
+      <input
+        type="text"
+        class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
+        placeholder="Select a date" />
+      <label
+        for="floatingInput"
+        class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
+        >Select a date</label
+      >
+    </div>
+    {{< /twsnippet/code >}}
+    {{< /twsnippet/wrapper >}}
   </div>
 </section>
 <!--/Creating and configuring Tailwind & Tailwind Elements-->
@@ -240,35 +281,52 @@ <h2 class="text-lg font-bold">Step 5</h2>
   </p>
 
   <h2 class="text-lg font-bold">Step 1</h2>
-  <p class="mb-5">Import components which are you intend to use.</p>
-
-  <div class="pb-4">
-    <!--prettier-ignore-->
-    {{< twsnippet/wrapper "app.component.ts" "" "mobile" >}}
-      {{< twsnippet/code active=true lang="JavaScript" >}}
-        import { Datepicker, Input } from "tw-elements";
-      {{< /twsnippet/code >}}
-    {{< /twsnippet/wrapper >}}
-  </div>
-
-  <h2 class="text-lg font-bold">Step 2</h2>
-  <p class="mb-5">Initialize components in lifecycle hook.</p>
+  <p class="mb-5">
+    Import components which are you intend to use and initialize components in
+    lifecycle hook.
+  </p>
 
   <div class="pb-4">
     <!--prettier-ignore-->
-    {{< twsnippet/wrapper "app.component.ts" "" "mobile" >}}
-      {{< twsnippet/code active=true lang="JavaScript" >}}
-        ngOnInit() {
-          const myInput = new Input(document.getElementById("myDatepicker"));
-          const options = {
-            format: "dd-mm-yyyy",
-          };
-          const myDatepicker = new Datepicker(
-            document.getElementById("myDatepicker"),
-            options
-          );
-        };
-      {{< /twsnippet/code >}}
+    {{< twsnippet/wrapper "app.component.ts, app.component.html" "" "mobile" >}}
+        {{< twsnippet/code active=true lang="JavaScript" >}}
+        import { Component } from '@angular/core';
+        import { Carousel, Dropdown, initTE } from 'tw-elements';
+
+        @Component({
+          selector: 'app-root',
+          templateUrl: './app.component.html',
+          styleUrls: ['./app.component.css'],
+        })
+        export class AppComponent {
+          ngOnInit() {
+            const myInput = new Input(document.getElementById("myDatepicker"));
+            const options = {
+              format: "dd-mm-yyyy",
+            };
+            const myDatepicker = new Datepicker(
+              document.getElementById("myDatepicker"),
+              options
+            );
+          }
+        }        
+        {{< /twsnippet/code >}}
+        {{< twsnippet/code lang="HTML" >}}
+    <div
+      class="relative mb-3"
+      data-te-datepicker-init
+      data-te-input-wrapper-init>
+      <input
+        type="text"
+        class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
+        placeholder="Select a date" />
+      <label
+        for="floatingInput"
+        class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
+        >Select a date</label
+      >
+    </div>
+    {{< /twsnippet/code >}}
     {{< /twsnippet/wrapper >}}
   </div>
 </section>

diff --git a/site/content/docs/standard/integrations/django/index.html b/site/content/docs/standard/integrations/django/index.html
@@ -216,7 +216,7 @@ <h2 class="text-lg font-bold">Step 2</h2>
               extend: {},
             },
             darkMode: "class",
-            plugins: [require("tw-elements/dist/plugin")],
+            plugins: [require("tw-elements/dist/plugin.cjs")],
           };
         {{< /twsnippet/code >}}
         {{< /twsnippet/wrapper >}}
@@ -292,6 +292,22 @@ <h2 class="text-lg font-bold">Step 6</h2>
   </div>
 
   <h2 class="text-lg font-bold">Step 7</h2>
+  <p class="mb-5">
+    Attach the <code>Roboto</code> font in <code>home.html</code>.
+  </p>
+
+  <div class="pb-4">
+    <!--prettier-ignore-->
+    {{< twsnippet/wrapper "home.html" "" "mobile" >}}
+    {{< twsnippet/code active=true lang="HTML" >}}
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap"
+      rel="stylesheet" />
+    {{< /twsnippet/code >}}
+    {{< /twsnippet/wrapper >}}
+  </div>
+
+  <h2 class="text-lg font-bold">Step 8</h2>
   <p class="mb-5">
     Create <code>views.py</code> file in <code>mysite</code> folder and put in
     there render for your first / home page.
@@ -309,7 +325,7 @@ <h2 class="text-lg font-bold">Step 7</h2>
         {{< /twsnippet/wrapper >}}
   </div>
 
-  <h2 class="text-lg font-bold">Step 8</h2>
+  <h2 class="text-lg font-bold">Step 9</h2>
   <p class="mb-5">
     Then in <code>urls.py</code> file (located in <code>mysite</code> folder)
     add import newly created <code>views.py</code> file and attach urls for

diff --git a/site/content/docs/standard/integrations/express/index.html b/site/content/docs/standard/integrations/express/index.html
@@ -176,7 +176,8 @@ <h2 class="text-lg font-bold">Step 2</h2>
             "./src/**/*.{html,js,css}",
             "./node_modules/tw-elements/dist/js/**/*.js",
           ],
-          plugins: [require("tw-elements/dist/plugin")]
+          darkMode: "class",
+          plugins: [require("tw-elements/dist/plugin.cjs")]
           }
         {{< /twsnippet/code >}}
         {{< /twsnippet/wrapper >}}
@@ -242,6 +243,22 @@ <h2 class="text-lg font-bold">Step 6</h2>
   </div>
 
   <h2 class="text-lg font-bold">Step 7</h2>
+  <p class="mb-5">
+    Attach the <code>Roboto</code> font in <code>index.ejs</code>.
+  </p>
+
+  <div class="pb-4">
+    <!--prettier-ignore-->
+    {{< twsnippet/wrapper "index.html" "" "mobile" >}}
+        {{< twsnippet/code active=true lang="HTML" >}}
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap"
+      rel="stylesheet" />
+    {{< /twsnippet/code >}}
+    {{< /twsnippet/wrapper >}}
+  </div>
+
+  <h2 class="text-lg font-bold">Step 8</h2>
   <p class="mb-5">
     In <code>index.ejs</code> file, at the end of <code>body</code> link script
     for Tailwind Elements JS file.

diff --git a/site/content/docs/standard/integrations/laravel/index.html b/site/content/docs/standard/integrations/laravel/index.html
@@ -130,7 +130,8 @@ <h2 class="text-lg font-bold">Step 2</h2>
           theme: {
               extend: {},
           },
-          plugins: [require("tw-elements/dist/plugin")]
+          darkMode: "class",
+          plugins: [require("tw-elements/dist/plugin.cjs")]
           }
         {{< /twsnippet/code >}}
         {{< /twsnippet/wrapper >}}
@@ -162,15 +163,31 @@ <h2 class="text-lg font-bold">Step 4</h2>
 
   <div class="pb-4">
     <!--prettier-ignore-->
-    {{< twsnippet/wrapper "Terminal" "" "mobile" >}}
-        {{< twsnippet/code active=true lang="plaintext" type="terminal" >}}
+    {{< twsnippet/wrapper "welcome.blade.php" "" "mobile" >}}
+        {{< twsnippet/code active=true lang="HTML" >}}
           @vite('resources/css/app.css')
           @vite('resources/js/app.js')
         {{< /twsnippet/code >}}
         {{< /twsnippet/wrapper >}}
   </div>
 
   <h2 class="text-lg font-bold">Step 5</h2>
+  <p class="mb-5">
+    Attach the <code>Roboto</code> font in <code>welcome.blade.php</code>.
+  </p>
+
+  <div class="pb-4">
+    <!--prettier-ignore-->
+    {{< twsnippet/wrapper "welcome.blade.php" "" "mobile" >}}
+        {{< twsnippet/code active=true lang="HTML" >}}
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap"
+      rel="stylesheet" />
+    {{< /twsnippet/code >}}
+    {{< /twsnippet/wrapper >}}
+  </div>
+
+  <h2 class="text-lg font-bold">Step 6</h2>
   <p class="mb-5">Install Tailwind Elements.</p>
 
   <div class="pb-4">
@@ -182,7 +199,7 @@ <h2 class="text-lg font-bold">Step 5</h2>
         {{< /twsnippet/wrapper >}}
   </div>
 
-  <h2 class="text-lg font-bold">Step 6</h2>
+  <h2 class="text-lg font-bold">Step 7</h2>
   <p class="mb-5">
     Import components which are you intend to use and necessary function
     <code>initTE</code> in <code>app.js</code> file which is located in
@@ -220,12 +237,14 @@ <h2 class="text-lg font-bold">Step 6</h2>
   </p>
 
   <h2 class="text-lg font-bold">Step 1</h2>
-  <p class="mb-5">Initialize components.</p>
+  <p class="mb-5">Import and initialize components.</p>
 
   <div class="pb-4">
     <!--prettier-ignore-->
     {{< twsnippet/wrapper "app.js" "" "mobile" >}}
       {{< twsnippet/code active=true lang="JavaScript" >}}
+          import { Datepicker, Input } from "tw-elements";
+
           const myInput = new Input(document.getElementById("myDatepicker"));
           const options = {
             format: "dd-mm-yyyy",