Convert event names to lowercase to support in-DOM templates.

CHANGELOG.md

@@ -1,3 +1,6 @@
+## 0.4.2
+* Convert event names to all lowercase to support in-DOM templates. Closes #26.
+
 ## 0.4.1
 * Use local nextTick reference, deleting Vue scope dependency.
 * Fix null attribute bug in date picker.

docs/components/home/tables/TableCalendarEvents.vue

@@ -20,27 +20,27 @@ export default {
   data() {
     const props = [
       {
-        name: '<code>update:fromPage</code>',
+        name: '<code>update:frompage</code>',
         description: 'Calendar left/single pane moved to a different page.',
         parameters: '<code>page: Object</code>',
       },
       {
-        name: '<code>update:toPage</code>',
+        name: '<code>update:topage</code>',
         description: 'Calendar right pane moved to a different page.',
         parameters: '<code>page: Object</code>',
       },
       {
-        name: '<code>daySelect</code>',
+        name: '<code>dayselect</code>',
         description: 'Calendar day cell was selected either by tap on touch devices or by mouse click.',
-        parameters: '<code>dayInfo: Object</code>, <code>attributes: Object</code>',
+        parameters: '<code>dayInfo: Object</cod e>, <code>attributes: Object</code>',
       },
       {
-        name: '<code>dayMouseEnter</code>',
+        name: '<code>daymouseenter</code>',
         description: 'Mouse cursor entered a calendar day cell.',
         parameters: '<code>dayInfo: Object</code>, <code>attributes: Object</code>',
       },
       {
-        name: '<code>dayMouseLeave</code>',
+        name: '<code>daymouseleave</code>',
         description: 'Mouse cursor left a calendar day cell.',
         parameters: '<code>dayInfo: Object</code>, <code>attributes: Object</code>',
       },

docs/components/home/tables/TablePopoverEvents.vue

@@ -20,19 +20,19 @@ export default {
   data() {
     const props = [
       {
-        name: '<code>willAppear</code>',
+        name: '<code>willappear</code>',
         description: 'Content popover is about to appear.',
       },
       {
-        name: '<code>didAppear</code>',
+        name: '<code>didappear</code>',
         description: 'Content popover is about to appear.',
       },
       {
-        name: '<code>willDisappear</code>',
+        name: '<code>willdisappear</code>',
         description: 'Content popover is about to disappear.',
       },
       {
-        name: '<code>didDisappear</code>',
+        name: '<code>diddisappear</code>',
         description: 'Content popover is about to disappear.',
       },
 

docs/components/home/util/calendarProps.js

@@ -11,12 +11,12 @@ export default [
     default: '<code>["S", "M", "T", "W", "T", "F", "S", "S"]</code>',
     themable: true,
   },
-  {
-    name: '<code>first-day-of-week: Number</code>',
-    description: 'Weekday number (1-7, Sun-Sat) to use as the first day of the week.',
-    default: '<code>1</code>',
-    themable: true,
-  },
+  // {
+  //   name: '<code>first-day-of-week: Number</code>',
+  //   description: 'Weekday number (1-7, Sun-Sat) to use as the first day of the week.',
+  //   default: '<code>1</code>',
+  //   themable: true,
+  // },
   {
     name: '<code>from-page: Object</code>',
     description: 'Active page for single paned calendar or the left pane for double paned calendar. Use the <code>.sync</code> modifier for two-way binding.',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "v-calendar",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "A clean and extendable plugin for building simple attributed calendars in Vue.js.",
   "keywords": [
     "vue",

src/components/Calendar.vue

@@ -101,12 +101,14 @@ export default {
     },
     fromPage_(val) {
       this.$emit('update:frompage', val);
+      this.$emit('update:fromPage', val);
       if (!pageIsBeforePage(val, this.toPage_)) {
         this.toPage_ = getNextPage(val);
       }
     },
     toPage_(val) {
       this.$emit('update:topage', val);
+      this.$emit('update:toPage', val);
       if (!pageIsAfterPage(val, this.fromPage_)) {
         this.fromPage_ = getPrevPage(val);
       }

src/components/CalendarPane.vue

@@ -45,7 +45,7 @@
                   v-for='p in pages'
                   :key='p.key'
                   v-if='p === page_'
-                  @click='$emit("titleClick", p)'>
+                  @click='$emit("titleclick", p)'>
                   <slot
                     name='header-title'>
                     {{ `${p.monthLabel} ${p.yearLabel}` }}

src/components/DatePicker.vue

@@ -153,10 +153,12 @@ export default {
       this.toPage_ = val;
     },
     fromPage_(val) {
-      this.$emit('update:frompage', val);
+      this.$emit('update:frompage', val); // Support in-DOM templates (:frompage.sync)
+      this.$emit('update:fromPage', val); // Allow using :from-page.sync
     },
     toPage_(val) {
-      this.$emit('update:topage', val);
+      this.$emit('update:topage', val);   // Support in-DOM templates (:topage.sync)
+      this.$emit('update:toPage', val);   // Allow using :to-page.sync
     },
     mode() {
       // Clear value on select mode change
@@ -185,7 +187,9 @@ export default {
       // Remove parent listeners that we want to intercept and re-broadcast
       const listeners = { ...this.$listeners };
       delete listeners['update:frompage'];
+      delete listeners['update:fromPage'];
       delete listeners['update:topage'];
+      delete listeners['update:toPage'];
       return listeners;
     },
     popoverDidDisappear() {

src/components/DateRangePicker.vue

@@ -2,8 +2,8 @@
 <calendar
   :dayContentHoverStyle='dayContentHoverStyle_'
   :attributes='attributes_'
-  @daySelect='selectDay'
-  @dayMouseEnter='enterDay'
+  @dayselect='selectDay'
+  @daymouseenter='enterDay'
   v-bind='$attrs'
   v-on='$listeners'>
 </calendar> 
@@ -79,7 +79,7 @@ export default {
   methods: {
     touchStartDay(day) {
       this.selectDay(day);
-      this.$emit('dayTouchStart', day);
+      this.$emit('daytouchstart', day);
     },
     selectDay(day) {
       // Done if date selection is invalid

src/components/MultipleDatePicker.vue

@@ -1,7 +1,7 @@
 <template>
 <calendar
   :attributes='attributes_'
-  @daySelect='selectDay'
+  @dayselect='selectDay'
   v-bind='$attrs'
   v-on='$listeners'>
 </calendar>

src/components/Popover.vue

@@ -104,7 +104,10 @@ export default {
     forceHidden() {
       // Reset managed visible state
       if (this.visibleManaged) this.visibleManaged = false;
-      else this.$emit('update:forceHidden', false);
+      else {
+        this.$emit('update:forcehidden', false);
+        this.$emit('update:forceHidden', false);
+      }
     },
     visibility() {
       // Reset managed visible state
@@ -126,7 +129,10 @@ export default {
     },
     visibleAfterDelay(val) {
       // Reset forceHidden state if needed
-      if (!val && this.forceHidden) this.$emit('update:forceHidden', false);
+      if (!val && this.forceHidden) {
+        this.$emit('update:forcehidden', false);
+        this.$emit('update:forceHidden', false);
+      }
     },
   },
   created() {
@@ -193,21 +199,24 @@ export default {
     },
     beforeContentEnter() {
       this.contentTransitioning = true;
-      this.$emit('willAppear');
+      this.$emit('willappear');
     },
     afterContentEnter() {
       this.contentTransitioning = false;
-      this.$emit('didAppear');
+      this.$emit('didappear');
     },
     beforeContentLeave() {
       this.contentTransitioning = true;
-      this.$emit('willDisappear');
+      this.$emit('willdisappear');
     },
     afterContentLeave() {
       this.contentTransitioning = false;
-      this.$emit('didDisappear');
+      this.$emit('diddisappear');
       // Reset forceHidden state if needed
-      if (this.forceHidden) this.$emit('update:forceHidden', false);
+      if (this.forceHidden) {
+        this.$emit('update:forcehidden', false);
+        this.$emit('update:forceHidden', false);
+      }
     },
   },
 };

src/components/SingleDatePicker.vue

@@ -1,7 +1,7 @@
 <template>
   <calendar
     :attributes='attributes_'
-    @daySelect='selectDay'
+    @dayselect='selectDay'
     v-bind='$attrs'
     v-on='$listeners'>
   </calendar>