Merge branch 'mikolaj' of github.com:mdbootstrap/mdb-docs-and-content

Author: Magda

en/vue/web/docs/components/buttons/o.html

@@ -22,7 +22,7 @@ <h1 class="secondary-heading mb-4">Vue Buttons - Bootstrap 4 & Material Design</
     <section id="basic-buttons">
 
         <!--Title-->
-        <h2 class="title"><strong>Basic buttons</strong></h2>
+        <h2 class="section-heading"><strong>Basic buttons</strong></h2>
 
         <!--Description-->
         <p class="description">MDB includes 7 predefined button styles, each serving its own semantic purpose.</p>
@@ -115,7 +115,7 @@ <h2 class="title"><strong>Basic buttons</strong></h2>
     <section id="additional-buttons">
 
         <!--Title-->
-        <h2 class="title mb-4"><strong>Additional buttons</strong></h2>
+        <h2 class="section-heading mb-4"><strong>Additional buttons</strong></h2>
 
         <!--Section: Live preview-->
         <section>
@@ -259,7 +259,7 @@ <h2 class="title mb-4"><strong>Additional buttons</strong></h2>
     <section id="gradient-buttons">
 
         <!--Title-->
-        <h2 class="title"><strong>Gradient buttons</strong>  <a href="https://mdbootstrap.com/products/vue-ui-kit/" target="_blank" class="btn btn-danger btn-md" role="button">MDB Pro component <i class="far fa-gem ml-1"></i></a></h2>
+        <h2 class="section-heading"><strong>Gradient buttons</strong>  <a href="https://mdbootstrap.com/products/vue-ui-kit/" target="_blank" class="btn btn-danger btn-md" role="button">MDB Pro component <i class="far fa-gem ml-1"></i></a></h2>
 
         <!--Description-->
         <p class="description"></p>
@@ -312,7 +312,7 @@ <h2 class="title"><strong>Gradient buttons</strong>  <a href="https://mdbootstra
     <section id="outline-buttons">
 
         <!--Title-->
-        <h2 class="title"><strong>Outline buttons</strong></h2>
+        <h2 class="section-heading"><strong>Outline buttons</strong></h2>
 
         <!--Description-->
         <p class="description">In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the
@@ -372,7 +372,7 @@ <h2 class="title"><strong>Outline buttons</strong></h2>
     <section id="rounded-buttons">
 
         <!--Title-->
-        <h2 class="title mb-4"><strong>Rounded buttons</strong> <a href="https://mdbootstrap.com/products/vue-ui-kit/" class="btn btn-danger btn-md" role="button">MDB Pro component <i class="far fa-gem ml-1"></i></a></h2>
+        <h2 class="section-heading mb-4"><strong>Rounded buttons</strong> <a href="https://mdbootstrap.com/products/vue-ui-kit/" class="btn btn-danger btn-md" role="button">MDB Pro component <i class="far fa-gem ml-1"></i></a></h2>
 
         <!--Section: Live preview-->
         <section>
@@ -428,7 +428,7 @@ <h2 class="title mb-4"><strong>Rounded buttons</strong> <a href="https://mdboots
     <section id="rounded-outline-buttons">
 
         <!--Title-->
-        <h2 class="title"><strong>Rounded outline buttons</strong> <a href="https://mdbootstrap.com/products/vue-ui-kit/" class="btn btn-danger btn-md" role="button">MDB Pro component <i class="far fa-gem ml-1"></i></a></h2>
+        <h2 class="section-heading"><strong>Rounded outline buttons</strong> <a href="https://mdbootstrap.com/products/vue-ui-kit/" class="btn btn-danger btn-md" role="button">MDB Pro component <i class="far fa-gem ml-1"></i></a></h2>
 
         <!--Section: Live preview-->
         <section>
@@ -484,7 +484,7 @@ <h2 class="title"><strong>Rounded outline buttons</strong> <a href="https://mdbo
     <section id="floating-buttons">
 
         <!--Title-->
-        <h2 class="title"><strong>Floating buttons</strong> <a href="https://mdbootstrap.com/products/vue-ui-kit/" class="btn btn-danger btn-md" role="button">MDB Pro component <i class="far fa-gem ml-1"></i></a></h2>
+        <h2 class="section-heading"><strong>Floating buttons</strong> <a href="https://mdbootstrap.com/products/vue-ui-kit/" class="btn btn-danger btn-md" role="button">MDB Pro component <i class="far fa-gem ml-1"></i></a></h2>
 
         <!--Section: Live preview-->
         <section>
@@ -535,7 +535,7 @@ <h2 class="title"><strong>Floating buttons</strong> <a href="https://mdbootstrap
     <section id="fixed-buttons">
 
         <!--Title-->
-        <h2 class="title"><strong>Fixed buttons</strong> <a href="https://mdbootstrap.com/products/vue-ui-kit/" class="btn btn-danger btn-md" role="button">MDB Pro component <i class="far fa-gem ml-1"></i></a></h2>
+        <h2 class="section-heading"><strong>Fixed buttons</strong> <a href="https://mdbootstrap.com/products/vue-ui-kit/" class="btn btn-danger btn-md" role="button">MDB Pro component <i class="far fa-gem ml-1"></i></a></h2>
 
         <!--Description-->
         <p class="description">See the live example of fixed button in the bottom right corner of this page.</p>
@@ -657,7 +657,7 @@ <h4 id=""><strong>"Back to the top" button</strong></h4>
     <section id="flat-button">
 
         <!--Title-->
-        <h2 class="title mb-4"><strong>Flat button </strong> <a href="https://mdbootstrap.com/products/vue-ui-kit/" class="btn btn-danger btn-md" role="button">MDB Pro component <i class="far fa-gem ml-1"></i></a></h2>
+        <h2 class="section-heading mb-4"><strong>Flat button </strong> <a href="https://mdbootstrap.com/products/vue-ui-kit/" class="btn btn-danger btn-md" role="button">MDB Pro component <i class="far fa-gem ml-1"></i></a></h2>
 
 
         <!--Section: Live preview-->
@@ -700,7 +700,7 @@ <h2 class="title mb-4"><strong>Flat button </strong> <a href="https://mdbootstra
     <section id="buttons-with-icons">
 
         <!--Title-->
-        <h2 class="title"><strong>Buttons with icons</strong></h2>
+        <h2 class="section-heading"><strong>Buttons with icons</strong></h2>
 
         <!--Section: Live preview-->
         <section>
@@ -751,7 +751,7 @@ <h2 class="title"><strong>Buttons with icons</strong></h2>
     <section id="button-tags">
 
         <!--Title-->
-        <h2 class="title"><strong>Button tags</strong></h2>
+        <h2 class="section-heading"><strong>Button tags</strong></h2>
 
         <!--Description-->
         <div class="description">
@@ -810,7 +810,7 @@ <h2 class="title"><strong>Button tags</strong></h2>
     <section id="sizes">
 
         <!--Title-->
-        <h2 class="title"><strong>Sizes</strong></h2>
+        <h2 class="section-heading"><strong>Sizes</strong></h2>
 
         <!--Description-->
         <p class="description">Fancy larger or smaller buttons? Add <code>size="lg"</code> or <code>size="sm"</code> for additional sizes.</p>
@@ -932,7 +932,7 @@ <h2 class="title"><strong>Sizes</strong></h2>
     <section id="active-state">
 
         <!--Title-->
-        <h2 class="title mb-4"><strong>Button states</strong></h2>
+        <h2 class="section-heading mb-4"><strong>Button states</strong></h2>
 
         <!--Subheading-->
         <h4 id=""><strong>Active state</strong></h4>
@@ -1038,7 +1038,7 @@ <h4 id="disabled-state"><strong>Disabled state</strong></h4>
     <section id="toggle-states">
 
         <!--Title-->
-        <h2 class="title"><strong>Button plugin</strong></h2>
+        <h2 class="section-heading"><strong>Button plugin</strong></h2>
 
         <!--Description-->
         <p class="description">Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p>

en/vue/web/docs/forms/date-picker/a.html

@@ -321,6 +321,16 @@ <h2 class="section-heading mb-4">
             >
           </td>
         </tr>
+        <tr>
+          <td><code class="text-nowrap">v-on:close</code></td>
+          <td><i>e</i></td>
+          <td>
+            Emitted on datePicker close.
+          </td>
+          <td>
+            <code>&lt;mdb-date-picker @close="onClose" /&gt;</code>
+          </td>
+        </tr>
       </tbody>
     </table>
   </section>

en/vue/web/docs/forms/date-picker/o-ss.html

@@ -4,6 +4,7 @@
 <li class="nav-item"><a class="nav-link" href="#icon-example">Icon</a></li>
 <li class="nav-item"><a class="nav-link" href="#default">Default settings</a></li>
 <li class="nav-item"><a class="nav-link" href="#keyboard">Keyboard navigation</a>
+<li class="nav-item"><a class="nav-link" href="#date-time-picker">Date and time picker</a></li>
   <li class="nav-item"><a class="nav-link" href="#customization">Customization</a>
   <ul class="pl-3">
     <li class="nav-item"><a class="nav-link" href="#strings">Strings</a></li>

en/vue/web/docs/forms/date-picker/o.html

@@ -296,6 +296,74 @@ <h2 class="section-heading mb-4">
 
 </section>
 <!--/Section: -->
+
+<hr class="mt-4 mb-5">
+
+<!--Section: -->
+<section id="date-time-picker">
+
+  <!--Subheading-->
+  <h2 class="section-heading mb-4"><strong>Date and time picker</strong></h2>
+
+  <!--Description-->
+  <p>You can use Date Picker and Time Picker components together to fill one input.</p>
+
+  <!--Section: Code-->
+  <section>
+
+    <mdbsnippet>
+
+      <code data-lang="html" data-name="template">
+        <template>
+          <div>
+            <mdb-input :value="handlePickersValue()" @click.native="$refs.datePicker.open()" />
+            <mdb-date-picker 
+              ref="datePicker"
+              disable-input
+              v-model="datePickerValue"
+              @close="$refs.timePicker.open()" />
+            <mdb-time-picker
+              ref="timePicker"
+              disable-input
+              v-model="timePickerValue" />
+          </div>
+        </template>
+      </code>
+      <code data-lang="js" data-name="script">
+        <script>
+          import { mdbDatePicker, mdbTimePicker, mdbInput } from 'mdbvue';
+          export default {
+            name: 'DatePickerPage',
+            components: {
+              mdbDatePicker,
+              mdbTimePicker,
+              mdbInput
+            },
+            methods: {
+              handlePickersValue() {
+                let output = 'Pick date and time'
+                if (this.datePickerValue && this.timePickerValue) output = `${this.datePickerValue}, ${this.timePickerValue}`
+                else if (this.datePickerValue) output = this.datePickerValue
+                else if (this.timePickerValue) output = this.timePickerValue
+                return output
+              }
+            },
+            data() {
+              return {
+                datePickerValue: '',
+                timePickerValue: ''
+              }
+            }
+          }
+        </script>
+      </code>
+
+    </mdbsnippet>
+
+  </section>
+  <!--Section: Code-->
+
+</section>
 
 <hr class="mt-4 mb-5">
 

en/vue/web/docs/forms/slider/a.html

@@ -79,6 +79,13 @@ <h2 class="section-heading mb-4">
                 <td>Specify slider value</td>
                 <td><code class="language-markup">&lt;mdb-range-input :value="50" ... /&gt;</code></td>
             </tr>
+            <tr>
+                <td><code class="highlighter-rouge">v-model</code></td>
+                <td><i>Number</i></td>
+                <td><code>50</code></td>
+                <td>Specify slider value with two-way data binding</td>
+                <td><code class="language-markup">&lt;mdb-range-input :v-model="sliderValue" ... /&gt;</code></td>
+            </tr>
         </tbody>
     </table>
 

en/vue/web/docs/forms/slider/o.html

@@ -89,7 +89,7 @@ <h2 class="secondary-heading">
     <mdbsnippet>
       <code data-lang="html" data-name="template">
         <template>
-          <mdb-range-input :min="0" :max="100" :value="50"></mdb-range-input>
+          <mdb-range-input :min="0" :max="100" v-model="rangeValue"></mdb-range-input>
         </template>
       </code>
       <code data-lang="html" data-name="script">
@@ -99,6 +99,11 @@ <h2 class="secondary-heading">
             name: 'SelectPage',
             components: {
               mdbRangeInput
+            },
+            data() {
+              return {
+                rangeValue: 50
+              }
             }
           }
         </script>
@@ -153,10 +158,10 @@ <h2 class="section-heading">
       <code data-lang="html" data-name="template">
         <template>
           <div>
-            <mdb-range-input wrapperClass="my-4 w-25" :min="0" :max="100" :value="50" @getValue="getSliderValue" wrapperClassName></mdb-range-input>
-            <mdb-range-input wrapperClass="my-4 w-50" :min="0" :max="100" :value="50" @getValue="getSliderValue" wrapperClassName></mdb-range-input>
-            <mdb-range-input wrapperClass="my-4 w-75" :min="0" :max="100" :value="50" @getValue="getSliderValue" wrapperClassName></mdb-range-input>
-            <mdb-range-input wrapperClass="my-4 w-100" :min="0" :max="100" :value="50" @getValue="getSliderValue" wrapperClassName></mdb-range-input>
+            <mdb-range-input wrapperClass="my-4 w-25" :min="0" :max="100" v-model="range1Value" wrapperClassName></mdb-range-input>
+            <mdb-range-input wrapperClass="my-4 w-50" :min="0" :max="100" v-model="range2Value" wrapperClassName></mdb-range-input>
+            <mdb-range-input wrapperClass="my-4 w-75" :min="0" :max="100" v-model="range3Value" wrapperClassName></mdb-range-input>
+            <mdb-range-input wrapperClass="my-4 w-100" :min="0" :max="100" v-model="range4Value" wrapperClassName></mdb-range-input>
           </div>
         </template>
       </code>
@@ -167,6 +172,14 @@ <h2 class="section-heading">
             name: 'SelectPage',
             components: {
               mdbRangeInput
+            },
+            data() {
+              return {
+                range1Value: 50,
+                range2Value: 50,
+                range3Value: 50,
+                range4Value: 50
+              }
             }
           }
         </script>
@@ -229,16 +242,16 @@ <h2 class="section-heading">
         <template>
           <div>
             <div class="d-flex justify-content-center my-4">
-                <mdb-range-input wrapperClass="my-4 w-25" :min="20" :max="50" :value="25" @getValue="getSliderValue" wrapperClassName></mdb-range-input>
+                <mdb-range-input wrapperClass="my-4 w-25" :min="20" :max="50" v-model="slider1Value" wrapperClassName></mdb-range-input>
             </div>
             <div class="d-flex justify-content-center my-4">
-                <mdb-range-input wrapperClass="my-4 w-50" :min="0" :max="40" :value="40" @getValue="getSliderValue" wrapperClassName></mdb-range-input>
+                <mdb-range-input wrapperClass="my-4 w-50" :min="0" :max="40" v-model="slider2Value" wrapperClassName></mdb-range-input>
             </div>
             <div class="d-flex justify-content-center my-4">
-                <mdb-range-input wrapperClass="my-4 w-75" :min="0" :max="100" :value="0" @getValue="getSliderValue" wrapperClassName></mdb-range-input>
+                <mdb-range-input wrapperClass="my-4 w-75" :min="0" :max="100" v-model="slider3Value" wrapperClassName></mdb-range-input>
             </div>
             <div class="d-flex justify-content-center my-4">
-                <mdb-range-input wrapperClass="my-4 w-100" :min="40" :max="100" :value="50" @getValue="getSliderValue" wrapperClassName></mdb-range-input>
+                <mdb-range-input wrapperClass="my-4 w-100" :min="40" :max="100" v-model="slider4Value" wrapperClassName></mdb-range-input>
             </div>
           </div>
         </template>
@@ -250,6 +263,14 @@ <h2 class="section-heading">
             name: 'SelectPage',
             components: {
               mdbRangeInput
+            },
+            data() {
+              return {
+                range1Value: 25,
+                range2Value: 40,
+                range3Value: 0,
+                range4Value: 50
+              }
             }
           }
         </script>

en/vue/web/docs/forms/switch/a.html

@@ -49,35 +49,42 @@ <h2 class="section-heading mb-4">
                 <td><i>Boolean</i></td>
                 <td><code>false</code></td>
                 <td>Turn the switch on</td>
-                <td><code class="language-markup">&lt;mdb-switch-input checked ... /&gt;</code></td>
+                <td><code class="language-markup">&lt;mdb-switch checked ... /&gt;</code></td>
             </tr>
             <tr>
                 <td><code class="highlighter-rouge">disabled</code></td>
                 <td><i>Boolean</i></td>
                 <td><code>false</code></td>
                 <td>Disable input</td>
-                <td><code class="language-markup">&lt;mdb-switch-input disabled ... /&gt;</code></td>
+                <td><code class="language-markup">&lt;mdb-switch disabled ... /&gt;</code></td>
             </tr>
             <tr>
                 <td><code class="highlighter-rouge">classes</code></td>
                 <td><i>String</i></td>
                 <td><code></code></td>
                 <td>Override or extend the styles applied to the component.</td>
-                <td><code class="language-markup">&lt;mdb-switch-input classes="..." ... /&gt;</code></td>
+                <td><code class="language-markup">&lt;mdb-switch classes="..." ... /&gt;</code></td>
             </tr>
             <tr>
                 <td><code class="highlighter-rouge">offLabel</code></td>
                 <td><i>String</i></td>
                 <td><code>Off</code></td>
                 <td>Label for false event</td>
-                <td><code class="language-markup">&lt;mdb-switch-input offLabel="Off" ... /&gt;</code></td>
+                <td><code class="language-markup">&lt;mdb-switch offLabel="Off" ... /&gt;</code></td>
             </tr>
             <tr>
                 <td><code class="highlighter-rouge">onLabel</code></td>
                 <td><i>String</i></td>
                 <td><code>On</code></td>
                 <td>Label for false event</td>
-                <td><code class="language-markup">&lt;mdb-switch-input onLabel="On" ... /&gt;</code></td>
+                <td><code class="language-markup">&lt;mdb-switch onLabel="On" ... /&gt;</code></td>
+            </tr>
+            <tr>
+                <td><code class="highlighter-rouge">v-model</code></td>
+                <td><i>Boolean</i></td>
+                <td><code>false</code></td>
+                <td>Switch value</td>
+                <td><code class="language-markup">&lt;mdb-switch v-model="switchValue" ... /&gt;</code></td>
             </tr>
         </tbody>
     </table>
@@ -109,10 +116,10 @@ <h2 class="section-heading mb-4">
         </thead>
         <tbody>
             <tr>
-                <td><code style="word-break: normal">v-on:getValue</code></td>
+                <td><code class="text-nowrap">v-on:getValue</code></td>
                 <td><i>value</i></td>
                 <td>Returns input value. Use this method instead of v-model to handle input value changes.</td>
-                <td><code class="language-markup">&lt;mdb-switch-input @getValue="getSwitchValue" /&gt;</code></td>
+                <td><code class="language-markup">&lt;mdb-switch @getValue="getSwitchValue" /&gt;</code></td>
             </tr>
         </tbody>
     </table>