Add 'pane-width' prop. Bug fixes.

nathanreyes · Jan 17, 2018 · ad6ab59 · ad6ab59
1 parent 23ef833
commit ad6ab59
Show file tree

Hide file tree

Showing 13 changed files with 117 additions and 85 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,14 @@
+# v0.5.4
+## Bug Fixes
+* Pass missing `page` attribute to `header-title` slot
+* Fade input text when dragging date ranges in `v-date-picker`
+
+## Improvements
+* Add `pane-width` prop to `v-calendar` for setting pane width manually
+* Add `pane-width` as a configurable default setting
+* Add `shortMonthLabel` and `shortYearLabel` properties to `page` objects
+* Disable pointer events for day cells not in month if `opacity: 0` in `theme-styles.dayCellNotInMonth` style
+
 # v0.5.3
 ## Bug Fixes
 * Detect date range intersections with `disabled-dates`. Closes #12.

diff --git a/docs/components/app/examples/ExStyling-3.vue b/docs/components/app/examples/ExStyling-3.vue
@@ -6,7 +6,9 @@
     :select-color='selectColor'
     :attributes='attributes'
     :theme-styles='themeStyles'
-    is-inline>
+    is-inline
+    is-expanded
+    :pane-width='290'>
   </v-date-picker>
 </template>
 
@@ -22,6 +24,7 @@ export default {
     const startDate = new Date(thisMonthYear, thisMonth, barDate.getDate() - barDate.getDay());
     const endDate = new Date(startDate);
     endDate.setDate(startDate.getDate() + 6);
+    const hSpacing = '15px';
     return {
       selectedDate: {
         start: startDate,
@@ -30,15 +33,13 @@ export default {
       themeStyles: {
         wrapper: {
           border: '0',
-          padding: '10px',
           background: 'linear-gradient(to bottom right, #ff5050, #ff66b3)',
-          width: '300px',
           boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.14), 0 6px 20px 0 rgba(0, 0, 0, 0.13)',
           borderRadius: '5px',
         },
         header: {
           color: '#fafafa',
-          padding: '10px 5px 20px 5px',
+          padding: `20px ${hSpacing}`,
         },
         headerHorizontalDivider: {
           borderTop: 'solid rgba(255, 255, 255, 0.2) 1px',
@@ -47,7 +48,10 @@ export default {
         weekdays: {
           color: '#6eded1',
           fontWeight: '600',
-          padding: '20px 5px 5px 5px',
+          padding: `20px ${hSpacing} 5px ${hSpacing}`,
+        },
+        weeks: {
+          padding: `0 ${hSpacing} 10px ${hSpacing}`,
         },
         dayContent: {
           color: '#fafafa',

diff --git a/docs/components/home/util/calendarProps.js b/docs/components/home/util/calendarProps.js
@@ -46,6 +46,11 @@ export default [
     default: '<code>false</code>',
     themable: true,
   },
+  {
+    name: '<code>pane-width: Number</code>',
+    description: 'Width of a single pane, in pixels.',
+    default: '<code>256</code>',
+  },
   {
     name: '<code>is-expanded: Boolean</code>',
     description: 'Expands calendar or calendars to fill the full width of its container.',

diff --git a/index.html b/index.html
@@ -11,6 +11,7 @@
   </head>
   <body>
     <div id="app"></div>
+    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Promise,Array.prototype.find"></script>
     <!-- built files will be auto injected -->
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "v-calendar",
-  "version": "0.5.3",
+  "version": "0.5.4",
   "description": "A clean and extendable plugin for building simple attributed calendars in Vue.js.",
   "keywords": [
     "vue",

diff --git a/src/components/Calendar.vue b/src/components/Calendar.vue
@@ -2,7 +2,7 @@
 <div
   class='c-pane-container'
   :class='{ "is-double-paned": isDoublePaned_, "is-expanded": isExpanded }'
-  :style='themeStyles_.wrapper'>
+  :style='wrapperStyle'>
   <calendar-pane
     :position='isDoublePaned_ ? 1 : 0'
     :page.sync='fromPage_'
@@ -65,6 +65,7 @@ export default {
     toPage: Object,
     isDoublePaned: Boolean,
     isExpanded: Boolean,
+    paneWidth: { type: Number, default: defaults.paneWidth },
     themeStyles: Object,
     attributes: Array,
   },
@@ -77,7 +78,7 @@ export default {
   },
   computed: {
     isDoublePaned_() {
-      return this.isDoublePaned && this.windowWidth >= 480;
+      return this.isDoublePaned && this.windowWidth >= ((2 * this.paneWidth) + 30);
     },
     paneCentered() {
       return this.isDoublePaned && !this.isDoublePaned_;
@@ -91,8 +92,24 @@ export default {
       return null;
     },
     themeStyles_() {
+      if (!this.themeStyles) return defaults.themeStyles;
       // Mix user supplied styles with default styles
-      return { ...defaults.themeStyles, ...this.themeStyles };
+      return Object.keys(defaults.themeStyles).reduce((obj, key) => {
+        if (Object.prototype.hasOwnProperty.call(this.themeStyles, key)) {
+          obj[key] = {
+            ...defaults.themeStyles[key],
+            ...this.themeStyles[key],
+          };
+        }
+        return obj;
+      }, { ...defaults.themeStyles });
+    },
+    wrapperStyle() {
+      const minWidth = `${this.isDoublePaned_ ? this.paneWidth * 2 : this.paneWidth}px`;
+      return {
+        ...this.themeStyles_.wrapper,
+        minWidth,
+      };
     },
     attributes_() {
       return AttributeStore(this.attributes);
@@ -180,12 +197,10 @@ export default {
   line-height: 1.5
   color: $font-color
   min-width: $pane-width
-  width: $pane-width
   -webkit-font-smoothing: antialiased
   -moz-osx-font-smoothing: grayscale
   &.is-double-paned
     min-width: $pane-width * 2
-    width: $pane-width * 2
   &.is-expanded
     width: 100%
 

diff --git a/src/components/CalendarDay.vue b/src/components/CalendarDay.vue
@@ -153,15 +153,18 @@ export default {
     },
     dayCellStyle() {
       // Merge 'not in month' style if needed
-      return this.inMonth ? this.styles.dayCell : {
+      return {
         ...this.styles.dayCell,
-        ...this.styles.dayCellNotInMonth,
+        ...(!this.inMonth && this.styles.dayCellNotInMonth),
       };
     },
     contentStyle_() {
-      let style = this.contentStyle;
-      if (this.isHovered) style = { ...style, ...this.contentHoverStyle };
-      return style;
+      const disableEvents = this.dayCellStyle && (parseFloat(this.dayCellStyle.opacity) === 0 || this.dayCellStyle.pointerEvents === 'none');
+      return {
+        ...this.contentStyle,
+        ...(this.isHovered && this.contentHoverStyle),
+        ...(disableEvents && { pointerEvents: 'none' }),
+      };
     },
     attributesList() {
       return this.attributes.find(this.dayInfo);

diff --git a/src/components/CalendarPane.vue b/src/components/CalendarPane.vue
@@ -3,9 +3,10 @@
   ref='pane'
   :class='["c-pane", { "is-single": position === 0 }]'>
   <!--Header-->
-  <div class='c-header-wrapper'>
+  <div class='c-section-wrapper'>
     <!--Header vertical divider-->
     <div
+      class='c-vertical-divider'
       :style='verticalDividers.header'
       v-if='verticalDividers.header'>
     </div>
@@ -48,7 +49,8 @@
                 :key='p.key'
                 v-if='p === page_'>
                 <slot
-                  name='header-title'>
+                  name='header-title'
+                  :page='p'>
                   {{ `${p.monthLabel} ${p.yearLabel}` }}
                 </slot>
               </div>
@@ -76,42 +78,44 @@
         </div>
       </div>
     </slot>
-  </div>
-  <!--Header horizontal divider-->
-  <div
-    class='c-horizontal-divider'
-    :style='headerHorizontalDividerStyle_'
-    v-if='headerHorizontalDividerStyle_'>
+    <!--Header horizontal divider-->
+    <div
+      class='c-horizontal-divider'
+      :style='headerHorizontalDividerStyle_'
+      v-if='headerHorizontalDividerStyle_'>
+    </div>
   </div>
   <!--Weekdays-->
-  <div class='c-weekdays-wrapper'>
+  <div class='c-section-wrapper'>
     <!--Weekday vertical divider-->
     <div
+      class='c-vertical-divider'
       :style='verticalDividers.weekdays'
       v-if='verticalDividers.weekdays'>
     </div>
+    <!--Weekday labels-->
     <div
       class='c-weekdays'
       :style='weekdayStyle_'>
-      <!--Weekday labels-->
       <div
         v-for='(weekday, i) in weekdayLabels_'
         :key='i + 1'
         class='c-weekday'>
         {{ weekday }}
       </div>
     </div>
-  </div>
-  <!--Weekday horizontal divider-->
-  <div
-    class='c-horizontal-divider'
-    :style='weekdaysHorizontalDividerStyle_'
-    v-if='weekdaysHorizontalDividerStyle_'>
+    <!--Weekday horizontal divider-->
+    <div
+      class='c-horizontal-divider'
+      :style='weekdaysHorizontalDividerStyle_'
+      v-if='weekdaysHorizontalDividerStyle_'>
+    </div>
   </div>
   <!--Weeks-->
-  <div class='c-weeks-wrapper'>
+  <div class='c-section-wrapper'>
     <!--Weeks vertical divider-->
     <div
+      class='c-vertical-divider'
       :style='verticalDividers.weeks'
       v-if='verticalDividers.weeks'>
     </div>
@@ -382,7 +386,9 @@ export default {
           key,
           month,
           year,
+          shortMonthLabel: defaults.shortMonthLabels[month - 1],
           monthLabel: this.monthLabels[month - 1],
+          shortYearLabel: year.toString().substring(2),
           yearLabel: year.toString(),
           monthComps,
           prevMonthComps,
@@ -447,9 +453,10 @@ export default {
   &.is-single
     width: 100%
 
-.c-header-wrapper
+.c-section-wrapper
+  position: relative
   display: flex
-  z-index: 1
+  flex-direction: column
 
 .c-header
   flex: 1
@@ -502,8 +509,12 @@ export default {
 .c-horizontal-divider
   align-self: center
 
-.c-weekdays-wrapper
+.c-vertical-divider
   display: flex
+  align-items: center
+  position: absolute
+  left: 0
+  height: 100%
 
 .c-weekdays
   flex-grow: 1
@@ -518,9 +529,6 @@ export default {
   flex: 1
   cursor: default
 
-.c-weeks-wrapper
-  display: flex
-
 .c-weeks
   flex-grow: 1
   padding: $weeks-padding

diff --git a/src/components/DatePicker.vue b/src/components/DatePicker.vue
@@ -31,7 +31,7 @@
     <input
       ref='input'
       type='text'
-      :class='[inputClass, { "c-input-drag": !value && dragValue }]'
+      :class='[inputClass, { "c-input-drag": dragValue }]'
       :style='inputStyle'
       :placeholder='inputPlaceholder_'
       :value='inputValue'