Forward 'min-date' and 'max-date' props (Closes #78). Add navigation styling (Closes #93). Support synced calendar panes (Closes #80). Add vertical orientation (Closes #89).

Author: Nathan Reyes

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 node_modules/
 dist/
+docs/
 lib/
 working/
 npm-debug.log*

CHANGELOG.md

@@ -1,10 +1,74 @@
+## Bug Fixes
+### `v-date-picker`
+* Fixed glitch with highlight cap animation when `mode === "range"`
+* Fixed bug with `themeStyles.dayContent` style getting ignored. Closes #115.
+
+## Improvements
+### `v-calendar`
+* Added `min-date` prop as a convenient alternative to `min-page`
+* Added `max-date` prop as a convenient alternative to `max-page`
+* Added `is-linked` prop to link panes to consecutive months when `is-double-paned` is set. Closes #80.
+* Added `is-vertical` prop for vertical calendar orientation when `is-double-paned` is set. Closes #89.
+
+### Defaults
+Theme styles modifications. Closes #93.
+
+| Style | Modification | Description |
+| ----- | ------------ | ----- |
+| `horizontalDivider` | Added | Horizontal divider when calendars are in vertical orientation (`is-vertical`) |
+| `navHeader` | Added | Navigation pane header. |
+| `navHeaderTitle` | Added | Navigation pane header title. |
+| `navHeaderArrows` | Added | Navigation pane header arrows. |
+| `navMonthCell` | Added | Navigation pane month cells. |
+| `navYearCell` | Added | Navigation pane year cells. |
+| `header` | Edited | Supports use of function that accepts a [`page`](https://docs.vcalendar.io/api#page-object) object and return a style |
+| `headerTitle` | Edited | Supports use of function that accepts a [`page`](https://docs.vcalendar.io/api#page-object) object and return a style |
+| `headerArrows` | Edited | Supports use of function that accepts a [`page`](https://docs.vcalendar.io/api#page-object) object and return a style |
+| `headerHorizontalDivider` | Edited | Supports use of function that accepts a [`page`](https://docs.vcalendar.io/api#page-object) object and return a style |
+| `weekdays` | Edited | Supports use of function that accepts a [`page`](https://docs.vcalendar.io/api#page-object) object and return a style |
+| `weekdaysHorizontalDivider` | Edited | Supports use of function that accepts a [`page`](https://docs.vcalendar.io/api#page-object) object and return a style |
+| `weeks` | Edited | Supports use of function that accepts a [`page`](https://docs.vcalendar.io/api#page-object) object and return a style |
+| ~~`headerVerticalDivider`~~ | Removed | *Reference note below* |
+| ~~`weekdaysVerticalDivider`~~ | Removed | *Reference note below* |
+| ~~`weeksVerticalDivider`~~ | Removed | *Reference note below* |
+
+* Styles removed in favor of defining functions for the `header`, `weekdays` and `weeks` styles like so...
+
+```html
+<template>
+  <v-calendar :theme-styles='themeStyles'>
+  </v-calendar>
+</template>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      themeStyles: {
+        // Use page position to set left border for the 2nd pane header
+        // NOTE: You can use the `verticalDivider` style to apply a single border. Just use this technique to apply different border styles for specific sections (header, weekdays, weeks)
+        header({ position }) {
+          return (position === 2) && {
+            borderLeft: '1px solid #dadada'
+          };
+        }
+      }
+    }
+  }
+}
+```
+
+### `v-date-picker`
+* `min-date` and `max-date` props are now forwarded to `v-calendar`. Closes #78.
+
 # v0.8.0
 ## Bug Fixes
-`v-date-picker`
+### `v-date-picker`
 * Fixes `select-attribute` and `drag-attribute` props getting written over. Closes #75.
 
 ## Improvements
-`v-calendar`
+### `v-calendar`
 * Attribute types (highlight, bar, dot, contentStyle, popover) can now be defined as functions that accept an object parameter with the following properties and return an object. Closes #81.
 
 | Property Name | Type    | Description |
@@ -20,7 +84,7 @@
 * The `dayContentHover` theme style has been deprecated in favor of using a function to define the `contentStyle`.
 * Support use of a `formats.data` parser to parse attribute dates
 
-`v-date-picker`
+### `v-date-picker`
 * Add `popoverShowClearMargin` prop to apply clear margin when popover appears. Closes #47.
 * Add events for `popover-will-appear`, `popover-did-appear`, `popover-will-disappear` and `popover-did-disappear`
 * `show-popover` prop renamed to `show-day-popover` to avoid confusion with input popover

docs/components/date-picker/examples/ExDatePicker.vue

@@ -15,10 +15,6 @@
             </ul>
           </div>
         </b-tab-item>
-        <!--DatePicker Example Code-->
-        <b-tab-item label='Example Code'>
-          <code-block :code='exDatePickerCode'></code-block>
-        </b-tab-item>
         <!--DatePicker Example Options-->
         <b-tab-item label='Options' icon='gear'>
           <b-field label='Mode'>
@@ -78,7 +74,7 @@
                   v-for='a in popoverAlignments'
                   :key='a'
                   :native-value='a'
-                  v-model='popoverAlignment'>
+                  v-model='popoverAlign'>
                   {{ a }}
                 </b-radio>
               </p>
@@ -102,19 +98,28 @@
             Birthday
           </label>
           <div class='control'>
-            <ex-date-picker
+            <v-date-picker
+              ref='picker'
+              class='picker'
+              :from-page.sync='fromPage'
+              :to-page.sync='toPage'
               :mode='mode'
-              :show-disabled-dates='showDisabledDates'
+              :tint-color='tintColor'
+              :show-caps='showCaps'
+              :show-day-popover='showDayPopover'
+              :disabled-dates='showDisabledDates ? disabledDates : null'
+              :attributes='[]'
               :is-inline='isInline'
               :is-expanded='isExpanded'
+              :input-props='inputProps'
               :popover-expanded='popoverExpanded'
               :popover-visibility='popoverVisibility'
               :popover-direction='popoverDirection'
-              :popover-align='popoverAlignment'
-              :tint-color='tintColor'
-              :show-caps='showCaps'
-              :show-popover='showDayPopover'>
-            </ex-date-picker>          
+              :popover-align='popoverAlign'
+              v-model='selectedValue'
+              is-double-paned
+              is-linked>
+            </v-date-picker>      
           </div>
         </div>
         <div class='field'>
@@ -135,30 +140,32 @@
 </template>
 
 <script>
-import ExDatePicker from '../examples/ExDatePicker';
-import ExDatePickerCode from '!!raw-loader!../examples/ExDatePicker';
-
 export default {
-  components: {
-    ExDatePicker,
-  },
   data() {
     return {
-      exDatePickerCode: ExDatePickerCode,
       mode: 'single',
-      selectedValue: null,
+      selectedValue: new Date(2018, 3, 15),
       showCaps: true,
       showDayPopover: true,
       showDisabledDates: false,
       isInline: false,
       isExpanded: false,
       popoverExpanded: true,
-      popoverVisibility: 'visible',
+      popoverVisibility: 'focus',
       popoverVisibilities: ['hover', 'focus', 'visible', 'hidden'],
       popoverDirection: 'bottom',
       popoverDirections: ['bottom', 'top', 'left', 'right'],
-      popoverAlignment: 'left',
+      popoverAlign: 'left',
       tintColor: '#66b3cc',
+      dragValue: null,
+      fromPage: null,
+      toPage: null,
+      disabledDates: { weekdays: [1, 7] },
+      inputProps: {
+        class: 'input',
+      },
+      // minDate: new Date(2018, 3, 1),
+      // maxDate: new Date(2019, 5, 20),
     };
   },
   computed: {
@@ -178,8 +185,8 @@ export default {
   watch: {
     popoverAlignments(val) {
       if (val && val.length) {
-        if (!this.popoverAlignment || !val.includes(this.popoverAlignment)) {
-          this.popoverAlignment = val[0];
+        if (!this.popoverAlign || !val.includes(this.popoverAlign)) {
+          this.popoverAlign = val[0];
         }
       }
     },

docs/components/date-picker/sections/SectionDatePicker.vue

@@ -19,16 +19,18 @@
             </p>
           </div>
         </b-tab-item>
-        <!--Intro Example Code-->
-        <b-tab-item label='Example Code'>
-          <code-block :code='exIntroCode'></code-block>
-        </b-tab-item>
         <!--Intro Options-->
         <b-tab-item label='Options' icon='gear'>
           <b-field grouped>
             <b-field>
               <b-switch v-model='isDoublePaned'>Double Paned</b-switch>
             </b-field>
+            <b-field>
+              <b-switch v-model='isLinked'>Linked</b-switch>
+            </b-field>
+            <b-field>
+              <b-switch v-model='isVertical'>Vertical</b-switch>
+            </b-field>
             <b-field>
               <b-switch v-model='isExpanded'>Expanded</b-switch>
             </b-field>
@@ -76,38 +78,53 @@
     </div>
     <div class='column'>
       <div class='example-container'>
-        <ex-intro
+        <v-calendar
           :is-double-paned='isDoublePaned'
+          :is-linked='isLinked'
+          :is-vertical='isVertical'
           :is-expanded='isExpanded'
           :nav-visibility='navVisibility'
           :title-position='titlePosition'
           :title-transition='titleTransition'
-          :weeks-transition='weeksTransition'>
-        </ex-intro>
+          :weeks-transition='weeksTransition'
+          :theme-styles='themeStyles'
+          :min-date='new Date()'>
+        </v-calendar>
       </div>
     </div>
   </div>
 </section>
 </template>
 
 <script>
-import ExIntro from '../examples/ExIntro';
-import ExIntroCode from '!!raw-loader!../examples/ExIntro';
-
 export default {
-  components: {
-    ExIntro,
-  },
   data() {
     return {
-      exIntroCode: ExIntroCode,
       isDoublePaned: true,
+      isLinked: false,
+      isVertical: false,
       isExpanded: false,
       navVisibility: 'focus',
       navVisibilities: ['focus', 'hover', 'visible', 'hidden'],
       titlePosition: 'center',
       titleTransition: 'slide-h',
       weeksTransition: 'slide-h',
+      themeStyles: {
+        // navHeaderTitle: {
+        //   color: 'red',
+        // },
+        // navHeaderArrows: {
+        //   color: 'blue',
+        // },
+        // weekdaysHorizontalDivider({ position }) {
+        //   return (
+        //     position === 2 && {
+        //       borderBottom: '1px solid red',
+        //       margin: '0 20px',
+        //     }
+        //   );
+        // },
+      },
     };
   },
 };