Add navigation popover. Simplify header layout

Author: Nathan Reyes

CHANGELOG.md

@@ -1,3 +1,13 @@
+## 0.2.0
+* Simplify header title layout
+* Add navigation panel popover with indicators
+* Add passive event modifiers for touch events
+* Add 'go to today' with header title click
+* Add 'hover' as visibility option for popovers
+* Redesign popovers to display caret arrows
+* Move DateInfo class into separate file
+* Fix date logic for range intersections
+
 ## 0.1.1
 * Add documentation for custom theming
 * Restructure docs component hierarchy

README.md

@@ -1,17 +1,18 @@
 # V-Calendar
 
-> V-Calendar is a lightweight, dependency-free plugin for building attributed calendars in Vue.js.
+> V-Calendar is a clean and lightweight plugin for building attributed calendars in Vue.js.
 
-Visit http://vcalendar.netlify.com for demos and API reference. This plug-in is currently in beta state.
+Visit https://vcalendar.netlify.com for demos and API reference. This plug-in is currently in beta state.
 
 ## Features
 
 * Display clean and simple attributed calendars
 * Built-in support for various attributes, including
   * highlighted regions
-  * indicators
+  * dot and bar indicators
   * day content styles (hovered and non-hovered)
-* Apply attributes over multiple dates or date ranges (start & end dates)
+* Apply attributes for multiple dates or date ranges (start & end dates)
+* Semantic inspired popover navigation panel with month-level attribute indicators
 * Date-picker supporting all native v-calendar props/events with various selection modes
   * single date
   * multiple dates
@@ -37,6 +38,7 @@ import Vue from 'vue';
 import VCalendar from 'v-calendar';
 import 'v-calendar/lib/v-calendar.min.css';
 
+// Use v-calendar, v-date-picker & v-popover components
 Vue.use(VCalendar);
 ```
 

docs/components/api/props.js

@@ -105,8 +105,8 @@ export default [
   },
   {
     name: '<code>popover-visibility: Number</code>',
-    description: '<span class="tag is-warning">Date Picker</span>Visibility state of the popover: Auto: <code>-1</code>, Hidden: <code>0</code>, Visible: <code>1</code>',
-    default: 'Auto: <code>-1</code>',
+    description: '<span class="tag is-warning">Date Picker</span>Visibility state of the popover: <code>"hover"</code>, <code>"focus"</code>, <code>"hidden"</code>, <code>"visible"</code>',
+    default: '<code>"hover"</code>',
   },
   {
     name: '<code>input-class: String</code>',

docs/components/api/sections/SectionApi.vue

@@ -1,6 +1,7 @@
 <template>
 <section id='api' class='section'>
   <div class='container'>
+    <h3 class='title has-text-primary is-spaced'>API</h3>
     <b-message type='is-warning'>
       <span class="tag is-warning">Date Picker</span> Denotes API specific to <i>v-date-picker</i> components only.
     </b-message>

docs/components/api/tables/TableApiPage.vue

@@ -65,6 +65,10 @@ export default {
         propertyName: '<code>nextMonthComps: Object</code>',
         description: 'Components <code>{ <i>days</i>, <i>month</i>, <i>year</i> }</code> for the next month.',
       },
+      {
+        propertyName: '<code>position: Number</code>',
+        description: 'Position of the page. Single Pane: <code>0</code>, Left Pane: <code>1</code>, Right Pane: <code>2</code>',
+      },
       {
         propertyName: '<code>move(<i>month</i>, <i>year</i>): Function</code>',
         description: 'Function that moves to a page with a specified month and year.',

docs/components/app/sections/SectionHeader.vue

@@ -24,9 +24,10 @@
         <nav class='tabs is-boxed'>
           <ul>
             <router-link tag='li' to='/' exact><a>Intro</a></router-link>
-            <router-link tag='li' to='/setup'><a>Setup</a></router-link>
             <router-link tag='li' to='/theming'><a>Theming</a></router-link>
             <router-link tag='li' to='/api'><a>API</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>
         </nav>
       </div>

docs/components/app/sections/SectionNavbar.vue

@@ -17,10 +17,11 @@
       </div>
       <div class='navbar-menu' :class='{ "is-active": isMenuActive }'>
         <div class='navbar-end'>
-          <router-link class='navbar-item is-hidden-tablet' to='/' exact><a>Intro</a></router-link>
-          <router-link class='navbar-item is-hidden-tablet' to='/setup'><a>Setup</a></router-link>
-          <router-link class='navbar-item is-hidden-tablet' to='/styling'><a>Styling</a></router-link>
-          <router-link class='navbar-item is-hidden-tablet' to='/api'><a>API</a></router-link>
+          <router-link class='navbar-item is-hidden-desktop' to='/' exact><a>Intro</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='/api'><a>API</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'>
             <b-icon icon='github'></b-icon>
           </a>

docs/components/blocks/CodeBlock.vue

@@ -1,6 +1,6 @@
 <template>
   <figure class='highlight' :class=' { "offset": offset }'>
-    <button class='button is-small copy-code'>Copy</button>
+    <button class='button is-small copy-code' v-clipboard:copy='code'>Copy</button>
     <pre v-highlight><code :class='lang'>{{ code }}</code></pre>
   </figure>
 </template>