Add popovers for attributes. Various bug and layout fixes. Closes #13.

CHANGELOG.md

@@ -1,46 +1,61 @@
-## 0.4.3
+# v0.5.0
+## Bug Fixes
+* Day content more vertically centered with `line-height: 1`
+* Strip unused component props
+
+## Improvements
+* Support day popovers for attributes (custom slots supported). Closes #13.
+* Support `dayPopoverContent` theme style
+* Support multiple visibility options for navigation header ('hover', 'focus', 'visible', 'hidden')
+* Simplified popover visibility state transitions
+* Support `span` (day length) in place of `end` date for date ranges
+* Add `targetDate` property to attributes passed in event handlers
+* Extract touch handlers to separate state functions
+* Require Vue v2.5.0+
+
+# v0.4.3
 * Fix bug for duplicated weekday label keys. Closes #28.
 
-## 0.4.2
+# v0.4.2
 * Convert event names to all lowercase to support in-DOM templates. Closes #26.
 
-## 0.4.1
+# v0.4.1
 * Use local nextTick reference, deleting Vue scope dependency.
 * Fix null attribute bug in date picker.
 
-## 0.4.0
+# v0.4.0
 * Fix weekday labels not always having same exact width
 * Add support for complex attribute dates. Closes #7 and #12.
 * Add support for attribute `excludeDates`, date picker `availableDates`. Closes #19.
 * Add support for endless date ranges using null for start/end dates. Closes #20.
 * Add support for attaching custom data to attributes via `customData` property. Closes #21.
 * Add Turkish locale.
 
-## 0.3.3
+# v0.3.3
 * Fix duplicate input event for inline date picker
 
-## 0.3.2
+# v0.3.2
 * Fix styling bug introduced by v0.3.1.
 
-## 0.3.1
+# v0.3.1
 * Fix bug with duplicate events being fired. Closes #15.
 * Fix application of styling for date pickers when not inline. Closes #17.
 
-## 0.3.0
+# v0.3.0
 * Add support for accepting various defaults when calling Vue.use(VCalendar, { ...defaults... })
 * Set default calendar pages to best show date picker values
 * Fix issue where inline date picker would not respond to is-expanded. Fixes #8.
 * Dismiss popovers on navigation month select and date selection. Fixes #9.
 * Fix issue where popover content not properly layered. Fixes #10.
 * Add locale detection and support user-supplied locales for month/weekday labels. Fixes #11.
 
-## 0.2.2
+# v0.2.2
 * Fix bug where is-expanded prop not working for calendar component
 
-## 0.2.1
+# v0.2.1
 * Fix layout bug with navigation panel in Firefox
 
-## 0.2.0
+# v0.2.0
 * Simplify header title layout
 * Add navigation panel popover with indicators
 * Add passive event modifiers for touch events
@@ -50,43 +65,43 @@
 * Move DateInfo class into separate file
 * Fix date logic for range intersections
 
-## 0.1.1
+# v0.1.1
 * Add documentation for custom theming
 * Restructure docs component hierarchy
 * Remove lib files from git tracking
 * Fix layout bug in calendar pane
 * Fix event forwarding for date picker
 
-## 0.1.0
+# v0.1.0
 * Add navigation pickers in calendar headers
 
-## 0.0.9
+# v0.0.9
 * Add support for more flexible month/year navigation
 * Fix popover visibility bug
 * Fix styling bug in date example
 
-## 0.0.8
+# v0.0.8
 * Add support for installing via CDN
 * Add licensing and copyright to README
 * Fix vertically centering header title
 * Fix styling bug with date picker
 * Fix setup instructions
 
-## 0.0.7
+# v0.0.7
 * Add 'theme-styles' prop to calendar for theming
 * Remove a number of '...-style' replaced by theme-styles object
 * Renamed 'select-mode' prop to 'mode' for datepicker
 
-## 0.0.6
+# v0.0.6
 * Fix README
 
-## 0.0.5
+# v0.0.5
 
 * Add tap to dismiss popover
 * Add tint color (with blending) for easy date picker styling
 * Add support for custom title position (left, center, right)
 
-## 0.0.4
+# v0.0.4
 
 * Fix lib subfolder not published
 * Add license declaration

_todos.txt

@@ -1,3 +1,6 @@
+DONE - Popover infringes on trigger content
+DONE - Find solution for popover content styling without overflow = hidden
+DONE - Fix header title nav appearance
 - Add ordinalWeekday and ordinalWeekdayFromEnd props to dayInfo
 
 CALENDAR

docs/components/app/examples/ExStyling-3.vue

@@ -74,7 +74,7 @@ export default {
           bar: {
             backgroundColor: '#fafafa',
           },
-          dates: [barDate],
+          dates: barDate,
         },
       ],
     };

docs/components/app/sections/SectionHeader.vue

@@ -19,12 +19,12 @@
         </transition>
       </div>
     </div>
-    <div class='hero-foot is-hidden-touch'>
+    <div class='hero-foot'>
       <div class='container'>
         <nav class='tabs is-boxed'>
           <ul>
-            <router-link tag='li' to='/' exact><a>Components</a></router-link>
-            <router-link tag='li' to='/theming'><a>Theming</a></router-link>
+            <router-link tag='li' to='/' exact><a>Calendar</a></router-link>
+            <router-link tag='li' to='/datepicker'><a>Date Picker</a></router-link>
             <router-link tag='li' to='/gallery'><a>Gallery</a></router-link>
             <router-link tag='li' to='/setup'><a>Setup</a></router-link>
           </ul>
@@ -61,6 +61,7 @@ export default {
 .hero-body
   margin-top: 30px
   margin-bottom: 30px
+  min-height: 300px
 
 .tag
   margin-top: 10px
@@ -76,7 +77,7 @@ export default {
 .c-container-2
   position: absolute
   left: 70%
-  margin-top: -170px
+  margin-top: -160px
   margin-left: -150px
   border-radius: 5px
   z-index: 20
@@ -101,7 +102,7 @@ export default {
   .c-container-2
     position: relative
     left: 0
-    margin-top: 20px
+    margin-top: 40px
     margin-left: 0
   
 </style>

docs/components/app/sections/SectionNavbar.vue

@@ -17,8 +17,8 @@
       </div>
       <div class='navbar-menu' :class='{ "is-active": isMenuActive }'>
         <div class='navbar-end'>
-          <router-link class='navbar-item is-hidden-desktop' to='/' exact><a>Components</a></router-link>
-          <router-link class='navbar-item is-hidden-desktop' to='/theming'><a>Theming</a></router-link>
+          <router-link class='navbar-item is-hidden-desktop' to='/' exact><a>Calendar</a></router-link>
+          <router-link class='navbar-item is-hidden-desktop' to='/datepicker'><a>Date Picker</a></router-link>
           <router-link class='navbar-item is-hidden-desktop' to='/gallery'><a>Gallery</a></router-link>
           <router-link class='navbar-item is-hidden-desktop' to='/setup'><a>Setup</a></router-link>
           <a class='navbar-item' title='Github' href='https://github.com/nathanreyes/v-calendar' target='_blank'>

docs/components/app/tables/TableObject.vue

@@ -1,7 +1,7 @@
 <template>
 <b-table
   :data='properties'>
-  <template scope='props'>
+  <template slot-scope='props'>
     <b-table-column label='Property'>
       <span v-html='props.row.propertyName'></span>
     </b-table-column>

docs/components/app/tables/TableObjects.vue

@@ -1,7 +1,7 @@
 <template>
 <b-table
   :data='properties'>
-  <template scope='props'>
+  <template slot-scope='props'>
     <b-table-column label='Property'>
       <span v-html='props.row.propertyName'></span>
     </b-table-column>

docs/components/app/tables/TableProps.vue

@@ -2,7 +2,7 @@
 <div>
   <b-table
     :data='props'>
-    <template scope='props'>
+    <template slot-scope='props'>
       <b-table-column :style='{minWidth:"280px"}' label='Name'>
         <span v-html='props.row.name'></span>
       </b-table-column>

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

@@ -15,8 +15,7 @@
     :popover-direction='popoverDirection'
     :popover-align='popoverAlign'
     inputClass='input'
-    v-model='selectedValue'
-    is-double-paned>
+    v-model='selectedValue'>
   </v-date-picker>
 </template>
 
@@ -40,15 +39,6 @@ export default {
       toPage: null,
       selectedValue: new Date(),
       disabledDates: { weekdays: [1, 7] },
-      todayAttribute: {
-        contentStyle: {
-          color: '#ffffff',
-          backgroundColor: '#ff9999',
-          border: 'solid 1px #ff8080',
-          fontWeight: 600,
-        },
-        dates: [new Date()],
-      },
     };
   },
 };

docs/components/home/examples/ExDatePickerSlot.vue → docs/components/date-picker/examples/ExDatePickerSlot.vue

@@ -3,7 +3,7 @@
   mode='single'
   v-model='selectedValue'
   is-expanded>
-  <template scope='props'>
+  <template slot-scope='props'>
     <b-field :type='inputState.type'>
       <b-input
         type='text'

docs/components/date-picker/pages/PageDatePicker.vue

@@ -0,0 +1,26 @@
+<template>
+<div class='container'>
+  <section-date-picker></section-date-picker>
+  <section-date-picker-slot></section-date-picker-slot>
+  <section-date-picker-api></section-date-picker-api>
+</div>
+</template>
+
+<script>
+import SectionDatePicker from '../sections/SectionDatePicker';
+import SectionDatePickerSlot from '../sections/SectionDatePickerSlot';
+import SectionDatePickerApi from '../sections/SectionDatePickerApi';
+
+export default {
+  components: {
+    SectionDatePicker,
+    SectionDatePickerSlot,
+    SectionDatePickerApi,
+  },
+};
+</script>
+
+<style lang='sass' scoped>
+.container
+  margin-top: 30px
+</style>