refactor(docs): Improve styling

Author: mst101

docs/.vuepress/components/DateDisabled.vue

@@ -2,10 +2,10 @@
   <div>
     <div class="example">
       <h3>With minimum and maximum date range</h3>
-      <DatePicker :disabled-dates="disabledDates" />
+      <DatePicker :disabled-dates="disabledDates" placeholder="Datepicker based on settings below..." />
       <code>
-        &lt;datepicker :disabled-dates="disabledDates"&gt;&lt;/datepicker&gt;
-      </code>
+          &lt;datepicker :disabled-dates="disabledDates"&gt;&lt;/datepicker&gt;
+        </code>
       <div class="settings">
         <h5>Settings</h5>
         <div class="form-group">
@@ -18,45 +18,40 @@
         </div>
         <div class="form-group">
           <label>Disabled Days of Month:</label>
-          <input
-            type="text"
-            value=""
-            placeholder="5,6,12,13"
-            @change="setDisabledDays"
-          />
+          <input type="text" value="" placeholder="5,6,12,13" @change="setDisabledDays" />
         </div>
         <pre>disabled: {{ disabledDates }}</pre>
       </div>
     </div>
 
     <div class="example">
       <h3>Disabled dates</h3>
-      <DatePicker :disabled-dates="disabledFn" />
+      <DatePicker :disabled-dates="disabledFn" placeholder="Datepicker based on settings below..." />
       <code>
-        &lt;datepicker :disabled-dates="disabledFn"&gt;&lt;/datepicker&gt;
-      </code>
+          &lt;datepicker :disabled-dates="disabledFn"&gt;&lt;/datepicker&gt;
+        </code>
       <div class="settings">
         <h5>Settings</h5>
         <pre>
-  disabledDates: {
-    customPredictor: function (date) {
-      const year = date.getFullYear()
-      const month = date.getMonth()
-      const day = date.getDate()
-      // disable every years that are a multiple of 2
-      if (year % 2 === 0) {
-        return true
-      }
-      // disable every months that are a multiple of 3
-      if (month % 3 === 0) {
-        return true
-      }
-      // disable first half of the month when it is a multiple of 2
-      if (month % 2 !== 0 && day &lt; 15) {
-        return true
-      }
+disabledDates: {
+  customPredictor: function (date) {
+    const year = date.getFullYear()
+    const month = date.getMonth()
+    const day = date.getDate()
+    // disable all even years
+    if (year % 2 === 0) {
+      return true
+    }
+    // disable months that are a multiple of 3
+    if (month % 3 === 0) {
+      return true
+    }
+    // disable the first half of all even months
+    if (month % 2 !== 0 && day &lt; 15) {
+      return true
     }
   }
+}
         </pre>
       </div>
     </div>
@@ -108,7 +103,7 @@ export default {
         this.disabledDates = {
           to: null,
           daysOfMonth: this.disabledDates.daysOfMonth,
-          from: this.disabledDates.from,
+          from: `${this.disabledDates.from}`,
         }
       }
       this.disabledDates.to = val

docs/.vuepress/components/DateFormatting.vue

@@ -18,10 +18,31 @@
       :format="customFormatter"
       :parser="customParser"
       :typeable="true"
+      placeholder="Datepicker based on settings below..."
     />
     <code>
       &lt;DatePicker :format="customFormatter" :parser="customParser"/&gt;
     </code>
+
+    <pre>
+import { format, parse } from 'date-fns'
+
+export default {
+  data() {
+    return {
+      format: 'dd.MM.yyyy',
+    }
+  },
+  methods: {
+    customFormatter(date) {
+      return format(date, this.format)
+    },
+    customParser(date) {
+      return parse(date, this.format, new Date())
+    },
+  },
+}
+    </pre>
   </div>
 </template>
 

docs/.vuepress/components/DateHighlighted.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="example">
       <h3>Highlighting Dates</h3>
-      <DatePicker :highlighted="highlighted" />
+      <DatePicker :highlighted="highlighted" placeholder="Datepicker based on settings below..." />
 
       <code>
         &lt;datepicker :highlighted="highlighted"&gt;&lt;/datepicker&gt;
@@ -27,21 +27,21 @@
 
     <div class="example">
       <h3>Highlighting Dates Matching Given Function</h3>
-      <DatePicker :highlighted="highlightedFn" />
+      <DatePicker :highlighted="highlightedFn" placeholder="Datepicker based on settings below..." />
       <code>
         &lt;datepicker :highlighted="highlightedFn"&gt;&lt;/datepicker&gt;
       </code>
       <div class="settings">
         <h5>Settings</h5>
         <pre>
-  highlightedFn: {
-    customPredictor: function (date) {
-      // highlights every day of a month which is a multiple of 4
-      if (date.getDate() % 4 === 0) {
-        return true
-      }
+highlightedFn: {
+  customPredictor: function (date) {
+    // highlights every day of a month which is a multiple of 4
+    if (date.getDate() % 4 === 0) {
+      return true
     }
   }
+}
         </pre>
       </div>
     </div>

docs/.vuepress/components/DatePicker/OpenDate.vue

@@ -16,7 +16,6 @@
       </div>
       <pre>openDate: {{ openDate }}</pre>
     </div>
-    <DatePicker :open-date="openDate" placeholder="Select Date" />
   </div>
 </template>
 

docs/.vuepress/components/DatePicker/UseUtc.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="example">
     <h3>UTC</h3>
     <DatePicker
       v-model="utcDate"

docs/.vuepress/components/DatePicker/YearPickerRange.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="example">
     <div class="settings">
       <h5>Settings</h5>
       <div class="form-group">
@@ -12,7 +12,6 @@
       <pre>yearPickerRange: {{ yearPickerRange }}</pre>
     </div>
     <DatePicker :year-picker-range="yearPickerRange" />
-    <hr />
   </div>
 </template>
 

docs/.vuepress/components/style.css

@@ -15,12 +15,51 @@
 
 .example {
   padding: 0 0 1em;
-  margin-bottom: 2em;
+}
+
+.example code {
+  border: 1px solid #ccc;
+  border-radius: 0.5em;
+  display: block;
+  margin-top: 1em;
+  padding: 1em;
 }
 
 .settings {
-  margin: 2em 0;
-  background: #eeeeee;
+  background: #eee;
+  border: 1px solid #ccc;
+  padding: 1em;
+  margin: 1em 0;
+  border-radius: 0.5em;
+}
+
+.settings h5 {
+  margin: 0;
+  padding: 0;
+}
+
+.settings pre {
+  margin: 0;
+  padding: 0;
+}
+
+.settings label {
+  padding-bottom: 0.3em;
+}
+
+input,
+select {
+  background-color: #fff;
+  border: 1px solid #cccccc;
+  border-radius: 0.3em;
+  box-sizing: border-box;
+  font-size: 100%;
+  padding: .75em .5em;
+  width: 100%;
+}
+
+h3 {
+  padding: 1em 0;
 }
 
 .form-group {
@@ -33,11 +72,13 @@
 }
 
 .example pre {
-  color: #ffffff;
+  color: #333;
 }
 
 .error {
   color: red;
+  font-style: italic;
+  margin-top: 0.5em;
 }
 
 .overflow-scroll {

docs/demo/Disabled/README.md

@@ -1,4 +1,4 @@
-# Disabled
+# Disabled Dates
 
 <ClientOnly>
   <DateDisabled />

docs/demo/README.md

@@ -20,7 +20,7 @@
 <DatePicker v-model="vModelExample" />
 ```
 
-## First day of Week
+## First day of week
 
 <ClientOnly>
   <DatePicker
@@ -46,7 +46,7 @@
 <DatePicker :show-edge-dates="false" />
 ```
 
-## Custom open Date
+## Custom open date
 
 <ClientOnly>
   <DatePicker-OpenDate/>
@@ -121,7 +121,7 @@
 <DatePicker minimum-view="day" maximum-view="month" initial-view="month" />
 ```
 
-## With Button
+## With button
 
 <ClientOnly>
   <DatePicker
@@ -167,7 +167,6 @@
 <style>
 /* @import '../../dist/style.css'; */
 
-/* Start vue-datepicker.css */
 .rtl {
   direction: rtl;
 }
@@ -386,20 +385,4 @@
 .vdp-datepicker__calendar-button.input-group-append {
   padding: 0;
 }
-/* end vue-datepicker.css */
-
-input, select {
-  padding: .75em .5em;
-  font-size: 100%;
-  border: 1px solid #cccccc;
-  width: 100%;
-  box-sizing: border-box;
-}
-pre {
-  color: #ffffff;
-}
-.settings {
-  margin: 2em 0;
-  background: #eeeeee;
-}
 </style>

docs/demo/Typeable/README.md

@@ -1,5 +1,5 @@
 # Typeable
 
 <ClientOnly>
-  <typeable />
+  <DateTypeable />
 </ClientOnly>