Add navigation popover. Simplify header layout

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>

docs/components/gallery/pages/PageGallery.vue

@@ -0,0 +1,15 @@
+<template>
+<div>
+  <section-examples></section-examples>
+</div>
+</template>
+
+<script>
+import SectionExamples from '../sections/SectionExamples';
+
+export default {
+  components: {
+    SectionExamples,
+  },
+};
+</script>

docs/components/theming/sections/SectionExamples.vue → docs/components/gallery/sections/SectionExamples.vue

@@ -1,8 +1,10 @@
 <template>
 <section id='examples' class='section'>
   <div class='container'>
-    <h4 class='title is-4 is-spaced'>Examples</h4>
-    <hr>
+    <h3 class='title has-text-primary is-spaced'>Gallery</h3>
+    <b-message type='is-warning'>
+      <strong>Note:</strong> This page is currently in work.
+    </b-message>
     <div
       class='example'
       v-for='(example, i) in examples'
@@ -42,7 +44,7 @@ export default {
     return {
       examples: [
         {
-          title: 'Datepicker w/ styled header & weekdays',
+          title: 'Date picker w/ styled header & weekdays',
           code: ExStyling1Code,
           component: ExStyling1,
         },

docs/components/home/examples/ExDatePicker.vue

@@ -6,6 +6,7 @@
     :disabled-dates='showDisabledDates ? disabledDates : null'
     :attributes='[todayAttribute]'
     :is-inline='isInline'
+    :popover-visibility='popoverVisibility'
     :popover-direction='popoverDirection'
     :popover-align='popoverAlign'
     indicators-offset='4px'
@@ -29,6 +30,7 @@ export default {
     showDisabledDates: Boolean,
     isInline: Boolean,
     isExpanded: Boolean,
+    popoverVisibility: { type: String, default: 'hover' },
     popoverDirection: { type: String, default: 'bottom' },
     popoverAlign: { type: String, default: 'left' },
   },

docs/components/home/sections/SectionDatePicker.vue

@@ -36,6 +36,13 @@
               <b-switch v-model='isInline'>Inline</b-switch>
             </b-field>
             <div v-if='!isInline'>
+              <b-field label='Popover Visibility'>
+                <b-select v-model='popoverVisibility'>
+                  <option v-for='visibility in popoverVisibilities' :value='visibility' :key='visibility'>
+                    {{ visibility }}
+                  </option>
+                </b-select>
+              </b-field>
               <b-field label='Popover Direction'>
                 <b-select v-model='popoverDirection'>
                   <option v-for='direction in popoverDirections' :value='direction' :key='direction'>
@@ -66,6 +73,7 @@
             :mode='mode'
             :show-disabled-dates='showDisabledDates'
             :is-inline='isInline'
+            :popover-visibility='popoverVisibility'
             :popover-direction='popoverDirection'
             :popover-align='popoverAlignment'
             :select-color='selectColor'
@@ -93,6 +101,8 @@ export default {
       selectedValue: null,
       showDisabledDates: false,
       isInline: false,
+      popoverVisibility: 'hover',
+      popoverVisibilities: ['hover', 'focus', 'visible', 'hidden'],
       popoverDirection: 'bottom',
       popoverDirections: ['bottom', 'top', 'left', 'right'],
       popoverAlignment: 'left',

docs/components/home/sections/SectionIntro.vue

@@ -32,7 +32,7 @@
               <b-field label='Title Position'>
                 <p class='control'>
                   <b-radio v-model='titlePosition' native-value='left'>Left</b-radio>
-                  <b-radio v-model='titlePosition' native-value=''>Center</b-radio>
+                  <b-radio v-model='titlePosition' native-value='center'>Center</b-radio>
                   <b-radio v-model='titlePosition' native-value='right'>Right</b-radio>
                 </p>
               </b-field>
@@ -86,7 +86,7 @@ export default {
     return {
       exIntroCode: ExIntroCode,
       isDoublePaned: true,
-      titlePosition: '',
+      titlePosition: 'center',
       titleTransition: 'slide-h',
       weeksTransition: 'slide-h',
     };

docs/components/setup/sections/SectionSetup.vue

@@ -1,6 +1,7 @@
 <template>
 <section id='setup' class='section'>
   <div class='container'>
+    <h3 class='title has-text-primary is-spaced'>Setup</h3>
     <b-message type='is-warning'>
       <a href='https://vuejs.org' target='_blank'>Vue.js</a> version <strong>2.4.2+</strong> is required.
     </b-message>

docs/components/theming/pages/PageTheming.vue

@@ -2,20 +2,17 @@
 <div>
   <section-intro></section-intro>
   <section-styles></section-styles>
-  <section-examples></section-examples>
 </div>
 </template>
 
 <script>
 import SectionIntro from '../sections/SectionIntro';
 import SectionStyles from '../sections/SectionStyles';
-import SectionExamples from '../sections/SectionExamples';
 
 export default {
   components: {
     SectionIntro,
     SectionStyles,
-    SectionExamples,
   },
 };
 </script>

docs/components/theming/sections/SectionIntro.vue

@@ -11,7 +11,7 @@
           This requires that if you are displaying a calendar in your application, it may need to fit within an overall design theme set up for your site.
         </p>
         <p>
-          Generally speaking, these are some specific props that can be used to customize the overall display of calendar components.
+          Generally speaking, these are some specific props that can be used to customize the overall display of your calendar.
         </p>
       </div>
       <table-props></table-props>

docs/docs.js

@@ -1,13 +1,15 @@
 import Vue from 'vue';
 import Buefy from 'buefy';
 import hljs from 'highlight.js';
+import VueClipboard from 'vue-clipboard2';
 import VCalendar from '../src/lib';
 import App from './App';
 import router from './router';
 import CodeBlock from './components/blocks/CodeBlock';
 import './styles/app.scss';
 
 Vue.config.productionTip = false;
+Vue.use(VueClipboard);
 Vue.use(Buefy, {
   defaultIconPack: 'fa',
 });

docs/router/index.js

@@ -2,9 +2,10 @@ import Vue from 'vue';
 import Router from 'vue-router';
 
 const PageHome = () => import('../components/home/pages/PageHome');
-const PageSetup = () => import('../components/setup/pages/PageSetup');
 const PageTheming = () => import('../components/theming/pages/PageTheming');
 const PageApi = () => import('../components/api/pages/PageApi');
+const PageGallery = () => import('../components/gallery/pages/PageGallery');
+const PageSetup = () => import('../components/setup/pages/PageSetup');
 
 Vue.use(Router);
 
@@ -16,10 +17,6 @@ export default new Router({
       path: '/',
       component: PageHome,
     },
-    {
-      path: '/setup',
-      component: PageSetup,
-    },
     {
       path: '/theming',
       component: PageTheming,
@@ -28,5 +25,13 @@ export default new Router({
       path: '/api',
       component: PageApi,
     },
+    {
+      path: '/gallery',
+      component: PageGallery,
+    },
+    {
+      path: '/setup',
+      component: PageSetup,
+    },
   ],
 });

package.json

@@ -1,9 +1,14 @@
 {
   "name": "v-calendar",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "A clean and extendable plugin for building simple attributed calendars in Vue.js.",
-  "keywords": ["vue", "calendar", "highlights", "indicators"],
-  "homepage": "vcalendar.netlify.com",
+  "keywords": [
+    "vue",
+    "calendar",
+    "highlights",
+    "indicators"
+  ],
+  "homepage": "https://vcalendar.netlify.com",
   "author": "Nathan Reyes <[email protected]>",
   "main": "lib/v-calendar.min.js",
   "files": [
@@ -90,6 +95,7 @@
     "sinon": "^2.1.0",
     "sinon-chai": "^2.8.0",
     "url-loader": "^0.5.8",
+    "vue-clipboard2": "0.0.7",
     "vue-loader": "^12.1.0",
     "vue-router": "^2.6.0",
     "vue-style-loader": "^3.0.1",

src/components/Calendar.vue

@@ -10,6 +10,7 @@
     :max-page='maxFromPage'
     :styles='themeStyles_'
     :attributes='attributes_'
+    @titleClick='titleClick'
     v-bind='$attrs'
     v-on='$listeners'>
   </calendar-pane>
@@ -21,6 +22,7 @@
     :max-page='maxPage'
     :styles='themeStyles_'
     :attributes='attributes_'
+    @titleClick='titleClick'
     v-bind='$attrs'
     v-on='$listeners'>
   </calendar-pane>
@@ -32,22 +34,22 @@ import CalendarPane from './CalendarPane';
 import Tag from './Tag';
 import '../assets/fonts/vcalendar/vcalendar.scss';
 import '../styles/lib.sass';
+import DateInfo from '../utils/dateInfo';
 import {
   themeStyles,
   getHighlight,
   dot,
   bar,
 } from '../utils/defaults';
-
 import {
   todayComps,
+  pageIsEqualToPage,
   pageIsBeforePage,
   pageIsAfterPage,
   getPrevPage,
   getNextPage,
   getPageBetweenPages,
   getFirstValidPage,
-  DateInfo,
 } from '../utils/helpers';
 
 export default {
@@ -103,7 +105,7 @@ export default {
       if (!this.attributes || !this.attributes.length) return [];
       return this.attributes.map((a, i) => {
         const newAttribute = {
-          key: a.key || i.toString(),
+          key: a.key || (i + 1).toString(),
           dates: a.dates.map(d => (d instanceof DateInfo ? d : new DateInfo(d, a.order))),
           order: a.order || 0,
         };
@@ -178,6 +180,14 @@ export default {
     refreshToPage() {
       this.toPage_ = this.getValidToPage(this.toPage, getNextPage(this.fromPage_));
     },
+    titleClick(page) {
+      if (pageIsEqualToPage(page, todayComps)) return;
+      if (page.position < 2) {
+        this.fromPage_ = getFirstValidPage(todayComps, pageIsBeforePage(page, todayComps) ? this.maxFromPage : this.minPage);
+      } else {
+        this.toPage_ = getFirstValidPage(todayComps, pageIsBeforePage(page, todayComps) ? this.maxPage : this.minToPage);
+      }
+    },
     getValidFromPage(...args) {
       return getFirstValidPage(
         ...args.map(p => getPageBetweenPages(p, this.minPage, this.maxPage)),