@vaadin/date-picker - npm Package Compare versions

Comparing version 23.2.0-alpha3 to 23.2.0-alpha4

package.json

 {
   "name": "@vaadin/date-picker",
-  "version": "23.2.0-alpha3",
+  "version": "23.2.0-alpha4",
   "publishConfig": {
@@ -26,3 +26,5 @@ "access": "public"
     "vaadin-*.d.ts",
-    "vaadin-*.js"
+    "vaadin-*.js",
+    "web-types.json",
+    "web-types.lit.json"
   ],
@@ -38,10 +40,10 @@ "keywords": [
     "@polymer/polymer": "^3.2.0",
-    "@vaadin/button": "23.2.0-alpha3",
-    "@vaadin/component-base": "23.2.0-alpha3",
-    "@vaadin/field-base": "23.2.0-alpha3",
-    "@vaadin/input-container": "23.2.0-alpha3",
-    "@vaadin/vaadin-lumo-styles": "23.2.0-alpha3",
-    "@vaadin/vaadin-material-styles": "23.2.0-alpha3",
-    "@vaadin/vaadin-overlay": "23.2.0-alpha3",
-    "@vaadin/vaadin-themable-mixin": "23.2.0-alpha3"
+    "@vaadin/button": "23.2.0-alpha4",
+    "@vaadin/component-base": "23.2.0-alpha4",
+    "@vaadin/field-base": "23.2.0-alpha4",
+    "@vaadin/input-container": "23.2.0-alpha4",
+    "@vaadin/vaadin-lumo-styles": "23.2.0-alpha4",
+    "@vaadin/vaadin-material-styles": "23.2.0-alpha4",
+    "@vaadin/vaadin-overlay": "23.2.0-alpha4",
+    "@vaadin/vaadin-themable-mixin": "23.2.0-alpha4"
   },
@@ -53,3 +55,7 @@ "devDependencies": {
   },
-  "gitHead": "06e5875be93ca50da2846dafc65a8531010c0576"
+  "web-types": [
+    "web-types.json",
+    "web-types.lit.json"
+  ],
+  "gitHead": "cbf5f1d0f38ac9b81c65cf9ef5660182e176e598"
 }

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

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

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

@@ -36,4 +36,3 @@ /**
   base: T,
-): T &
-  Constructor<DatePickerMixinClass> &
+): Constructor<DatePickerMixinClass> &
   Constructor<DelegateFocusMixinClass> &
@@ -43,3 +42,4 @@ Constructor<DisabledMixinClass> &
   Constructor<InputMixinClass> &
-  Constructor<KeyboardMixinClass>;
+  Constructor<KeyboardMixinClass> &
+  T;
 
@@ -46,0 +46,0 @@ export declare class DatePickerMixinClass {

src/vaadin-date-picker-mixin.js

@@ -49,3 +49,2 @@ /**
           type: String,
-          observer: '_valueChanged',
           notify: true,
@@ -268,3 +267,2 @@ value: '',
           type: String,
-          observer: '_minChanged',
         },
@@ -283,3 +281,2 @@
           type: String,
-          observer: '_maxChanged',
         },
@@ -289,3 +286,3 @@
          * The earliest date that can be selected. All earlier dates will be disabled.
-         * @type {Date | string}
+         * @type {Date | undefined}
          * @protected
@@ -295,4 +292,4 @@ */
           type: Date,
-          // Null does not work here because minimizer passes undefined to overlay (#351)
-          value: '',
+          observer: '__minDateChanged',
+          computed: '__computeMinOrMaxDate(min)',
         },
@@ -302,3 +299,3 @@
          * The latest date that can be selected. All later dates will be disabled.
-         * @type {Date | string}
+         * @type {Date | undefined}
          * @protected
@@ -308,3 +305,4 @@ */
           type: Date,
-          value: '',
+          observer: '__maxDateChanged',
+          computed: '__computeMinOrMaxDate(max)',
         },
@@ -699,26 +697,37 @@
 
-    /** @private */
-    _handleDateChange(property, value, oldValue) {
-      if (!value) {
-        this[property] = '';
-        return;
-      }
+    /**
+     * Override the value observer from `InputMixin` to implement custom
+     * handling of the `value` property. The date-picker doesn't forward
+     * the value directly to the input like the default implementation of `InputMixin`.
+     * Instead, it parses the value into a date, puts it in `_selectedDate` which
+     * is then displayed in the input with respect to the specified date format.
+     *
+     * @param {string | undefined} value
+     * @param {string | undefined} oldValue
+     * @protected
+     * @override
+     */
+    _valueChanged(value, oldValue) {
+      const newDate = this._parseDate(value);
 
-      const date = this._parseDate(value);
-      if (!date) {
+      if (value && !newDate) {
+        // The new value cannot be parsed, revert the old value.
         this.value = oldValue;
         return;
       }
-      if (!dateEquals(this[property], date)) {
-        this[property] = date;
-        if (this.value) {
-          this.validate();
+
+      if (value) {
+        if (!dateEquals(this._selectedDate, newDate)) {
+          // Update the date instance only if the date has actually changed.
+          this._selectedDate = newDate;
+
+          if (oldValue !== undefined) {
+            // Validate only if `value` changes after initialization.
+            this.validate();
+          }
         }
+      } else {
+        this._selectedDate = null;
       }
-    }
 
-    /** @private */
-    _valueChanged(value, oldValue) {
-      this._handleDateChange('_selectedDate', value, oldValue);
-
       this._toggleHasValue(!!value);
@@ -728,9 +737,13 @@ }
     /** @private */
-    _minChanged(value, oldValue) {
-      this._handleDateChange('_minDate', value, oldValue);
+    __minDateChanged() {
+      if (this.value) {
+        this.validate();
+      }
     }
 
     /** @private */
-    _maxChanged(value, oldValue) {
-      this._handleDateChange('_maxDate', value, oldValue);
+    __maxDateChanged() {
+      if (this.value) {
+        this.validate();
+      }
     }
@@ -1105,2 +1118,7 @@
 
+    /** @private */
+    __computeMinOrMaxDate(dateString) {
+      return this._parseDate(dateString);
+    }
+
     /**
@@ -1107,0 +1125,0 @@ * Fired when the user commits a value change.

src/vaadin-date-picker.d.ts

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

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

@@ -154,5 +154,5 @@ import '@vaadin/vaadin-lumo-styles/color.js';
 
-const $_documentContainer = document.createElement('template');
+const template = document.createElement('template');
 
-$_documentContainer.innerHTML = `
+template.innerHTML = `
   <style>
@@ -167,2 +167,2 @@ @keyframes vaadin-date-picker-month-calendar-focus-date {
 
-document.head.appendChild($_documentContainer.content);
+document.head.appendChild(template.content);

No alert changes

Improved metrics

Total package byte prevSize

214313

increased by36.55%

Number of package files

34

increased by6.25%

Lines of code

5352

increased by26.29%

Dependency changes

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Updated@vaadin/button@23.2.0-alpha4

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

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

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

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

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

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

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