@vaadin/date-picker - npm Package Compare versions

Comparing version 23.1.0-alpha3 to 23.1.0-alpha4

package.json

 {
   "name": "@vaadin/date-picker",
-  "version": "23.1.0-alpha3",
+  "version": "23.1.0-alpha4",
   "publishConfig": {
@@ -37,19 +37,19 @@ "access": "public"
     "@polymer/polymer": "^3.2.0",
-    "@vaadin/button": "23.1.0-alpha3",
-    "@vaadin/component-base": "23.1.0-alpha3",
-    "@vaadin/field-base": "23.1.0-alpha3",
-    "@vaadin/input-container": "23.1.0-alpha3",
-    "@vaadin/vaadin-lumo-styles": "23.1.0-alpha3",
-    "@vaadin/vaadin-material-styles": "23.1.0-alpha3",
-    "@vaadin/vaadin-overlay": "23.1.0-alpha3",
-    "@vaadin/vaadin-themable-mixin": "23.1.0-alpha3"
+    "@vaadin/button": "23.1.0-alpha4",
+    "@vaadin/component-base": "23.1.0-alpha4",
+    "@vaadin/field-base": "23.1.0-alpha4",
+    "@vaadin/input-container": "23.1.0-alpha4",
+    "@vaadin/vaadin-lumo-styles": "23.1.0-alpha4",
+    "@vaadin/vaadin-material-styles": "23.1.0-alpha4",
+    "@vaadin/vaadin-overlay": "23.1.0-alpha4",
+    "@vaadin/vaadin-themable-mixin": "23.1.0-alpha4"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/dialog": "23.1.0-alpha3",
-    "@vaadin/polymer-legacy-adapter": "23.1.0-alpha3",
+    "@vaadin/dialog": "23.1.0-alpha4",
+    "@vaadin/polymer-legacy-adapter": "23.1.0-alpha4",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "8c9e64e8dfa158dd52a9bf6da351ff038c88ca85"
+  "gitHead": "aacdb7fe09811894751f0378ff7fb66071892c71"
 }

src/vaadin-date-picker-helper.js

@@ -103,4 +103,4 @@ /**
     month: date.getMonth(),
-    year: date.getFullYear()
+    year: date.getFullYear(),
   };
 }

src/vaadin-date-picker-light.d.ts

@@ -93,3 +93,3 @@ /**
     listener: (this: DatePickerLight, ev: DatePickerLightEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions
+    options?: boolean | AddEventListenerOptions,
   ): void;
@@ -100,3 +100,3 @@
     listener: (this: DatePickerLight, ev: DatePickerLightEventMap[K]) => void,
-    options?: boolean | EventListenerOptions
+    options?: boolean | EventListenerOptions,
   ): void;
@@ -103,0 +103,0 @@ }

src/vaadin-date-picker-light.js

@@ -117,3 +117,3 @@ /**
         type: String,
-        value: 'value'
+        value: 'value',
       },
@@ -127,4 +127,4 @@
         type: Boolean,
-        value: true
-      }
+        value: true,
+      },
     };
@@ -131,0 +131,0 @@ }

src/vaadin-date-picker-mixin.d.ts

@@ -35,3 +35,3 @@ /**
 export declare function DatePickerMixin<T extends Constructor<HTMLElement>>(
-  base: T
+  base: T,
 ): T &
@@ -38,0 +38,0 @@ Constructor<DatePickerMixinClass> &

src/vaadin-date-picker-mixin.js

@@ -29,3 +29,3 @@ /**
         _selectedDate: {
-          type: Date
+          type: Date,
         },
@@ -52,3 +52,3 @@
           notify: true,
-          value: ''
+          value: '',
         },
@@ -71,3 +71,3 @@
           notify: true,
-          observer: '_openedChanged'
+          observer: '_openedChanged',
         },
@@ -88,3 +88,3 @@
         showWeekNumbers: {
-          type: Boolean
+          type: Boolean,
         },
@@ -98,3 +98,3 @@
           type: Boolean,
-          value: false
+          value: false,
         },
@@ -107,3 +107,3 @@
         _fullscreenMediaQuery: {
-          value: '(max-width: 420px), (max-height: 420px)'
+          value: '(max-width: 420px), (max-height: 420px)',
         },
@@ -217,3 +217,3 @@
                 'November',
-                'December'
+                'December',
               ],
@@ -257,6 +257,6 @@ weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
               formatTitle: (monthName, fullYear) => {
-                return monthName + ' ' + fullYear;
-              }
+                return `${monthName} ${fullYear}`;
+              },
             };
-          }
+          },
         },
@@ -275,3 +275,3 @@
           type: String,
-          observer: '_minChanged'
+          observer: '_minChanged',
         },
@@ -290,3 +290,3 @@
           type: String,
-          observer: '_maxChanged'
+          observer: '_maxChanged',
         },
@@ -302,3 +302,3 @@
           // null does not work here because minimizer passes undefined to overlay (#351)
-          value: ''
+          value: '',
         },
@@ -313,3 +313,3 @@
           type: Date,
-          value: ''
+          value: '',
         },
@@ -320,3 +320,3 @@
           type: Boolean,
-          computed: '_isNoInput(inputElement, _fullscreen, _ios, i18n, opened, autoOpenDisabled)'
+          computed: '_isNoInput(inputElement, _fullscreen, _ios, i18n, opened, autoOpenDisabled)',
         },
@@ -327,3 +327,3 @@
           type: Boolean,
-          value: isIOS
+          value: isIOS,
         },
@@ -334,3 +334,3 @@
           type: Boolean,
-          value: document.createElement('div').style.webkitOverflowScrolling === ''
+          value: document.createElement('div').style.webkitOverflowScrolling === '',
         },
@@ -342,3 +342,3 @@
         /** @protected */
-        _overlayInitialized: Boolean
+        _overlayInitialized: Boolean,
       };
@@ -350,3 +350,3 @@ }
         '_selectedDateChanged(_selectedDate, i18n.formatDate)',
-        '_focusedDateChanged(_focusedDate, i18n.formatDate)'
+        '_focusedDateChanged(_focusedDate, i18n.formatDate)',
       ];
@@ -400,3 +400,5 @@ }
 
-      this._noInput && event.target.blur();
+      if (this._noInput) {
+        event.target.blur();
+      }
     }
@@ -442,3 +444,3 @@
           this._fullscreen = matches;
-        })
+        }),
       );
@@ -684,3 +686,5 @@
 
-      this.__keepInputValue || this._applyInputValue(selectedDate);
+      if (!this.__keepInputValue) {
+        this._applyInputValue(selectedDate);
+      }
 
@@ -727,3 +731,5 @@ if (value !== this.value) {
         this[property] = date;
-        this.value && this.validate();
+        if (this.value) {
+          this.validate();
+        }
       }
@@ -799,3 +805,3 @@ }
             element: element,
-            oldInlineValue: oldInlineValue
+            oldInlineValue: oldInlineValue,
           });
@@ -836,3 +842,3 @@ }
         this._touchPrevented.forEach(
-          (prevented) => (prevented.element.style.webkitOverflowScrolling = prevented.oldInlineValue)
+          (prevented) => (prevented.element.style.webkitOverflowScrolling = prevented.oldInlineValue),
         );
@@ -874,3 +880,5 @@ this._touchPrevented = [];
       if (this._noInput) {
-        this._overlayInitialized && this._overlayContent.focus();
+        if (this._overlayInitialized) {
+          this._overlayContent.focus();
+        }
       } else {
@@ -951,3 +959,3 @@ this.inputElement.focus();
         var allowedKeys = [
-          9 // tab
+          9, // tab
         ];
@@ -1029,4 +1037,3 @@ if (allowedKeys.indexOf(e.keyCode) === -1) {
       const dateObject = this.i18n.parseDate && this.i18n.parseDate(inputValue);
-      const parsedDate =
-        dateObject && this._parseDate(dateObject.year + '-' + (dateObject.month + 1) + '-' + dateObject.day);
+      const parsedDate = dateObject && this._parseDate(`${dateObject.year}-${dateObject.month + 1}-${dateObject.day}`);
       return parsedDate;
@@ -1033,0 +1040,0 @@ }

src/vaadin-date-picker-overlay-content.js

@@ -240,3 +240,3 @@ /**
       selectedDate: {
-        type: Date
+        type: Date,
       },
@@ -250,3 +250,3 @@
         notify: true,
-        observer: '_focusedDateChanged'
+        observer: '_focusedDateChanged',
       },
@@ -261,7 +261,7 @@
         type: Date,
-        observer: '_initialPositionChanged'
+        observer: '_initialPositionChanged',
       },
 
       _originDate: {
-        value: new Date()
+        value: new Date(),
       },
@@ -275,19 +275,19 @@
         type: String,
-        value: '(min-width: 375px)'
+        value: '(min-width: 375px)',
       },
 
       _translateX: {
-        observer: '_translateXChanged'
+        observer: '_translateXChanged',
       },
 
       _yearScrollerWidth: {
-        value: 50
+        value: 50,
       },
 
       i18n: {
-        type: Object
+        type: Object,
       },
 
       showWeekNumbers: {
-        type: Boolean
+        type: Boolean,
       },
@@ -312,3 +312,3 @@
        */
-      label: String
+      label: String,
     };
@@ -339,3 +339,3 @@ }
       'tap',
-      this._toggleYearScroller.bind(this)
+      this._toggleYearScroller.bind(this),
     );
@@ -346,3 +346,3 @@
         this._desktopMode = matches;
-      })
+      }),
     );
@@ -386,3 +386,3 @@ }
     this.dispatchEvent(
-      new CustomEvent('date-selected', { detail: { date: dateToSelect }, bubbles: true, composed: true })
+      new CustomEvent('date-selected', { detail: { date: dateToSelect }, bubbles: true, composed: true }),
     );
@@ -415,3 +415,3 @@ }
         this.$.monthScroller.itemHeight,
-        this.$.monthScroller.clientHeight - this.$.monthScroller.bufferOffset * 2
+        this.$.monthScroller.clientHeight - this.$.monthScroller.bufferOffset * 2,
       );
@@ -555,5 +555,5 @@ const visibleItems = visibleArea / this.$.monthScroller.itemHeight;
               position: this._targetPosition,
-              oldPosition: initialPosition
-            }
-          })
+              oldPosition: initialPosition,
+            },
+          }),
         );
@@ -592,3 +592,3 @@
       min: 0,
-      max: this._yearScrollerWidth
+      max: this._yearScrollerWidth,
     });
@@ -632,3 +632,7 @@ }
   _toggleYearScroller() {
-    this._isYearScrollerVisible() ? this._closeYearScroller() : this._openYearScroller();
+    if (this._isYearScrollerVisible()) {
+      this._closeYearScroller();
+    } else {
+      this._openYearScroller();
+    }
   }
@@ -652,4 +656,4 @@
     if (!this._desktopMode) {
-      this.$.monthScroller.style.transform = 'translateX(' + (x - this._yearScrollerWidth) + 'px)';
-      this.$.yearScroller.style.transform = 'translateX(' + x + 'px)';
+      this.$.monthScroller.style.transform = `translateX(${x - this._yearScrollerWidth}px)`;
+      this.$.yearScroller.style.transform = `translateX(${x}px)`;
     }
@@ -656,0 +660,0 @@ }

src/vaadin-date-picker-overlay.js

@@ -13,3 +13,3 @@ /**
 registerStyles('vaadin-date-picker-overlay', datePickerOverlayStyles, {
-  moduleId: 'vaadin-date-picker-overlay-styles'
+  moduleId: 'vaadin-date-picker-overlay-styles',
 });
@@ -16,0 +16,0 @@

src/vaadin-date-picker.d.ts

@@ -141,3 +141,3 @@ /**
     listener: (this: DatePicker, ev: DatePickerEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions
+    options?: boolean | AddEventListenerOptions,
   ): void;
@@ -148,3 +148,3 @@
     listener: (this: DatePicker, ev: DatePickerEventMap[K]) => void,
-    options?: boolean | EventListenerOptions
+    options?: boolean | EventListenerOptions,
   ): void;
@@ -151,0 +151,0 @@ }

src/vaadin-date-picker.js

@@ -116,2 +116,3 @@ /**
  * @mixes InputControlMixin
+ * @mixes DatePickerMixin
  */
@@ -210,3 +211,3 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(ElementMixin(PolymerElement)))) {
         this.ariaTarget = input;
-      })
+      }),
     );
@@ -226,3 +227,3 @@ this.addController(new LabelledInputController(this.inputElement, this._labelController));
     }
-    if (e.detail.sourceEvent && e.detail.sourceEvent.composedPath().indexOf(this) !== -1) {
+    if (e.detail.sourceEvent && e.detail.sourceEvent.composedPath().includes(this)) {
       e.preventDefault();
@@ -229,0 +230,0 @@ }

src/vaadin-infinite-scroller.js

@@ -86,3 +86,3 @@ /**
         type: Number,
-        value: 20
+        value: 20,
       },
@@ -95,3 +95,3 @@
       _initialScroll: {
-        value: 500000
+        value: 500000,
       },
@@ -103,3 +103,3 @@
       _initialIndex: {
-        value: 0
+        value: 0,
       },
@@ -117,4 +117,4 @@
         type: Boolean,
-        observer: '_activated'
-      }
+        observer: '_activated',
+      },
     };
@@ -128,3 +128,3 @@ }
 
-    this.$.fullHeight.style.height = this._initialScroll * 2 + 'px';
+    this.$.fullHeight.style.height = `${this._initialScroll * 2}px`;
 
@@ -141,3 +141,3 @@ const tpl = this.querySelector('template');
         }
-      }
+      },
     });
@@ -177,3 +177,3 @@
     this._buffers[index].translateY = this._buffers[index ? 0 : 1].translateY + this._bufferHeight * (index ? -1 : 1);
-    this._buffers[index].style.transform = 'translate3d(0, ' + this._buffers[index].translateY + 'px, 0)';
+    this._buffers[index].style.transform = `translate3d(0, ${this._buffers[index].translateY}px, 0)`;
     this._buffers[index].updated = false;
@@ -289,3 +289,3 @@ this._buffers.reverse();
     this._buffers.forEach((buffer) => {
-      buffer.style.transform = 'translate3d(0, ' + buffer.translateY + 'px, 0)';
+      buffer.style.transform = `translate3d(0, ${buffer.translateY}px, 0)`;
     });
@@ -308,7 +308,7 @@ this._buffers[0].updated = this._buffers[1].updated = false;
         const itemWrapper = document.createElement('div');
-        itemWrapper.style.height = this.itemHeight + 'px';
+        itemWrapper.style.height = `${this.itemHeight}px`;
         itemWrapper.instance = {};
 
         const contentId = (InfiniteScroller._contentIndex = InfiniteScroller._contentIndex + 1 || 0);
-        const slotName = 'vaadin-infinite-scroller-item-content-' + contentId;
+        const slotName = `vaadin-infinite-scroller-item-content-${contentId}`;
 
@@ -315,0 +315,0 @@ const insertionPoint = document.createElement('slot');

src/vaadin-month-calendar.js

@@ -26,16 +26,6 @@ /**
         #monthGrid {
-          display: block;
-        }
-
-        #monthGrid thead,
-        #monthGrid tbody {
-          display: block;
           width: 100%;
+          border-collapse: collapse;
         }
 
-        [part='weekdays'] {
-          display: flex;
-          flex-grow: 1;
-        }
-
         #days-container tr,
@@ -57,5 +47,3 @@ #weekdays-container tr {
         [part='date'] {
-          display: block;
-          /* Would use calc(100% / 7) but it doesn't work nice on IE */
-          width: 14.285714286%;
+          width: calc(100% / 7);
           padding: 0;
@@ -69,3 +57,9 @@ font-weight: normal;
           flex-shrink: 0;
+          padding: 0;
         }
+
+        :host([week-numbers]) [part='weekday']:not(:empty),
+        :host([week-numbers]) [part='date'] {
+          width: 12.5%;
+        }
       </style>
@@ -141,3 +135,3 @@
         type: Date,
-        value: new Date()
+        value: new Date(),
       },
@@ -150,3 +144,3 @@
         type: Date,
-        notify: true
+        notify: true,
       },
@@ -161,7 +155,7 @@
         type: Boolean,
-        value: false
+        value: false,
       },
 
       i18n: {
-        type: Object
+        type: Object,
       },
@@ -181,3 +175,3 @@
         type: Date,
-        value: null
+        value: null,
       },
@@ -190,3 +184,3 @@
         type: Date,
-        value: null
+        value: null,
       },
@@ -196,3 +190,3 @@
         type: Array,
-        computed: '_getDays(month, i18n.firstDayOfWeek, minDate, maxDate)'
+        computed: '_getDays(month, i18n.firstDayOfWeek, minDate, maxDate)',
       },
@@ -202,3 +196,3 @@
         type: Array,
-        computed: '_getWeeks(_days)'
+        computed: '_getWeeks(_days)',
       },
@@ -209,4 +203,4 @@
         reflectToAttribute: true,
-        computed: '_isDisabled(month, minDate, maxDate)'
-      }
+        computed: '_isDisabled(month, minDate, maxDate)',
+      },
     };
@@ -218,3 +212,3 @@ }
       '_showWeekNumbersChanged(showWeekNumbers, i18n.firstDayOfWeek)',
-      '__focusedDateChanged(focusedDate, _days)'
+      '__focusedDateChanged(focusedDate, _days)',
     ];
@@ -300,3 +294,3 @@ }
         weekDay: day,
-        weekDayShort: weekDayNamesShort[index]
+        weekDayShort: weekDayNamesShort[index],
       };
@@ -378,3 +372,3 @@ });
       this.dispatchEvent(
-        new CustomEvent('date-tap', { detail: { date: e.target.date }, bubbles: true, composed: true })
+        new CustomEvent('date-tap', { detail: { date: e.target.date }, bubbles: true, composed: true }),
       );
@@ -429,13 +423,8 @@ }
 
-    var ariaLabel =
-      this._getDate(date) +
-      ' ' +
-      this.i18n.monthNames[date.getMonth()] +
-      ' ' +
-      date.getFullYear() +
-      ', ' +
-      this.i18n.weekdays[date.getDay()];
+    var ariaLabel = `${this._getDate(date)} ${this.i18n.monthNames[date.getMonth()]} ${date.getFullYear()}, ${
+      this.i18n.weekdays[date.getDay()]
+    }`;
 
     if (this._isToday(date)) {
-      ariaLabel += ', ' + this.i18n.today;
+      ariaLabel += `, ${this.i18n.today}`;
     }
@@ -442,0 +431,0 @@

theme/lumo/vaadin-date-picker-overlay-content-styles.js

@@ -214,3 +214,3 @@ import '@vaadin/vaadin-lumo-styles/color.js';
   `,
-  { moduleId: 'lumo-date-picker-overlay-content' }
+  { moduleId: 'lumo-date-picker-overlay-content' },
 );

theme/lumo/vaadin-date-picker-overlay-styles.js

@@ -57,3 +57,3 @@ import '@vaadin/vaadin-lumo-styles/sizing.js';
 registerStyles('vaadin-date-picker-overlay', [menuOverlay, datePickerOverlay], {
-  moduleId: 'lumo-date-picker-overlay'
+  moduleId: 'lumo-date-picker-overlay',
 });

theme/lumo/vaadin-month-calendar-styles.js

@@ -71,2 +71,7 @@ import '@vaadin/vaadin-lumo-styles/color.js';
 
+    :host([week-numbers]) [part='weekday']:not(:empty),
+    :host([week-numbers]) [part='date'] {
+      width: calc((100% - var(--lumo-size-xs)) / 7);
+    }
+
     /* Today date */
@@ -147,3 +152,3 @@
   `,
-  { moduleId: 'lumo-month-calendar' }
+  { moduleId: 'lumo-month-calendar' },
 );
@@ -150,0 +155,0 @@

theme/material/vaadin-date-picker-overlay-content-styles.js

@@ -175,3 +175,3 @@ import '@vaadin/vaadin-material-styles/color.js';
   `,
-  { moduleId: 'material-date-picker-overlay-content' }
+  { moduleId: 'material-date-picker-overlay-content' },
 );

theme/material/vaadin-date-picker-overlay-styles.js

@@ -44,3 +44,3 @@ import { overlay } from '@vaadin/vaadin-material-styles/mixins/overlay.js';
 registerStyles('vaadin-date-picker-overlay', [overlay, datePickerOverlay], {
-  moduleId: 'material-date-picker-overlay'
+  moduleId: 'material-date-picker-overlay',
 });

theme/material/vaadin-month-calendar-styles.js

@@ -119,3 +119,3 @@ import '@vaadin/vaadin-material-styles/color.js';
   `,
-  { moduleId: 'material-date-picker-month-calendar' }
+  { moduleId: 'material-date-picker-month-calendar' },
 );

No alert changes

Improved metrics

Total package byte prevSize

154811

increased by0.13%

Lines of code

4150

increased by0.14%

Dependency changes

• + Added@vaadin/button@23.1.0-alpha4(transitive)

• + Added@vaadin/component-base@23.1.0-alpha4(transitive)

• + Added@vaadin/field-base@23.1.0-alpha4(transitive)

• + Added@vaadin/icon@23.1.0-alpha4(transitive)

• + Added@vaadin/input-container@23.1.0-alpha4(transitive)

• + Added@vaadin/vaadin-lumo-styles@23.1.0-alpha4(transitive)

• + Added@vaadin/vaadin-material-styles@23.1.0-alpha4(transitive)

• + Added@vaadin/vaadin-overlay@23.1.0-alpha4(transitive)

• + Added@vaadin/vaadin-themable-mixin@23.1.0-alpha4(transitive)

• - Removed@vaadin/button@23.1.0-alpha3(transitive)

• - Removed@vaadin/component-base@23.1.0-alpha3(transitive)

• - Removed@vaadin/field-base@23.1.0-alpha3(transitive)

• - Removed@vaadin/icon@23.1.0-alpha3(transitive)

• - Removed@vaadin/input-container@23.1.0-alpha3(transitive)

• - Removed@vaadin/vaadin-lumo-styles@23.1.0-alpha3(transitive)

• - Removed@vaadin/vaadin-material-styles@23.1.0-alpha3(transitive)

• - Removed@vaadin/vaadin-overlay@23.1.0-alpha3(transitive)

• - Removed@vaadin/vaadin-themable-mixin@23.1.0-alpha3(transitive)

• Updated@vaadin/button@23.1.0-alpha4

• Updated@vaadin/component-base@23.1.0-alpha4

• Updated@vaadin/field-base@23.1.0-alpha4

• Updated@vaadin/input-container@23.1.0-alpha4

• Updated@vaadin/vaadin-lumo-styles@23.1.0-alpha4

• Updated@vaadin/vaadin-material-styles@23.1.0-alpha4

• Updated@vaadin/vaadin-overlay@23.1.0-alpha4

• Updated@vaadin/vaadin-themable-mixin@23.1.0-alpha4