@progress/kendo-vue-inputs 2.8.0-dev.202201121019 → 3.0.0-dev.202201170830

package/dist/es/colors/ColorPalette.js

@@ -26,6 +26,13 @@ export var DEFAULT_PRESET = 'office'; // tslint:enable:max-line-length
 
 var ColorPaletteVue2 = {
   name: 'KendoColorPalette',
+  // @ts-ignore
+  emits: {
+    'keydown': null,
+    'focus': null,
+    'blur': null,
+    'change': null
+  },
   props: {
     palette: {
       type: [String, Array],

package/dist/es/colors/ColorPicker.js

@@ -157,19 +157,21 @@ var ColorPickerVue2 = {
     var h = gh || createElement;
     var _b = this.$props,
         disabled = _b.disabled,
-        tabIndex = _b.tabIndex; // const dir = useDir(focusableElementGuid, props.dir);
+        tabIndex = _b.tabIndex,
+        dir = _b.dir; // const dir = useDir(focusableElementGuid, props.dir);
 
     return h("span", {
-      "class": this.wrapperClassName // dir={dir}
-      ,
-      id: this.$props.id,
+      "class": this.wrapperClassName,
+      dir: dir,
       attrs: this.v3 ? undefined : {
+        dir: dir,
         id: this.$props.id,
         "aria-labelledby": this.$props.ariaLabelledBy,
         "aria-describedby": this.$props.ariaDescribedBy,
         tabIndex: getTabIndex(tabIndex, disabled),
         title: this.$props.title
       },
+      id: this.$props.id,
       "aria-labelledby": this.$props.ariaLabelledBy,
       "aria-describedby": this.$props.ariaDescribedBy,
       ref: this.focusableElementGuid,
@@ -218,13 +220,14 @@ var ColorPickerVue2 = {
       "class": "k-input-button",
       icon: 'arrow-s'
     }), // @ts-ignore function children
-    h(Picker //  dir={dir}
-    , {
-      open: this.computedOpen,
+    h(Picker, {
+      dir: dir,
       attrs: this.v3 ? undefined : {
+        dir: dir,
         open: this.computedOpen,
         popupAnchor: this.focusableElementGuid
       },
+      open: this.computedOpen,
       onOpen: this.onOpenHandler,
       on: this.v3 ? undefined : {
         "open": this.onOpenHandler
@@ -237,7 +240,8 @@ var ColorPickerVue2 = {
         ,
         on: _this2.v3 ? undefined : {
           "keydown": _this2.onKeyDownHandler,
-          "change": _this2.onPaletteChangeHandler
+          "change": _this2.onPaletteChangeHandler,
+          "blur": _this2.onBlurHandler
         },
         ref: _this2.v3 ? function (el) {
           _this.paletteRef = el;
@@ -246,13 +250,15 @@ var ColorPickerVue2 = {
         attrs: _this2.v3 ? undefined : {
           value: _this2.computedValue || undefined
         },
-        onChange: _this2.onPaletteChangeHandler
+        onChange: _this2.onPaletteChangeHandler,
+        onBlur: _this2.onBlurHandler
       })];
     } : [h(ColorPalette, {
       onKeydown: _this2.onKeyDownHandler,
       on: _this2.v3 ? undefined : {
         "keydown": _this2.onKeyDownHandler,
-        "change": _this2.onPaletteChangeHandler
+        "change": _this2.onPaletteChangeHandler,
+        "blur": _this2.onBlurHandler
       },
       ref: _this2.v3 ? function (el) {
         _this.paletteRef = el;
@@ -261,7 +267,8 @@ var ColorPickerVue2 = {
       attrs: _this2.v3 ? undefined : {
         value: _this2.computedValue || undefined
       },
-      onChange: _this2.onPaletteChangeHandler
+      onChange: _this2.onPaletteChangeHandler,
+      onBlur: _this2.onBlurHandler
     })])]);
   },
   methods: {
@@ -342,11 +349,13 @@ var ColorPickerVue2 = {
       });
     },
     onBlurTimeout: function onBlurTimeout() {
-      if (this.palette && document.activeElement !== this.palette.$el) {
+      var paleteIsFocused = this.palette && document.activeElement === this.palette.$el;
+
+      if (!paleteIsFocused) {
         this.setOpen(false, true);
-        this.focused = false;
       }
 
+      this.focused = paleteIsFocused;
       this.blurTimeoutRef = undefined;
     },
     onBlurHandler: function onBlurHandler(event) {

package/dist/es/input/Input.js

@@ -139,16 +139,19 @@ var InputVue2 = {
     var _a = this.$props,
         label = _a.label,
         id = _a.id,
-        required = _a.required;
+        required = _a.required,
+        validationMessage = _a.validationMessage;
     var inputId = id || this.$data.inputId;
     var textbox = h('input', __assign(__assign({
       domProps: this.v3 ? null : __assign(__assign({}, this.$attrs), {
         placeholder: this.$props.placeholder,
         id: inputId,
         required: required,
-        value: this.computedValue
+        value: this.computedValue,
+        validationMessage: validationMessage
       })
     }, this.$attrs), {
+      validationMessage: validationMessage,
       placeholder: this.$props.placeholder,
       id: inputId,
       required: required,
@@ -307,7 +310,7 @@ var InputVue2 = {
         return {
           'k-floating-label-container': true,
           'k-focus': this.$data.focused,
-          'k-empty': !((this.computedValue === 0 ? true : this.computedValue) || this.$props.placeholder || this.$data.autofill),
+          'k-state-empty': !((this.computedValue === 0 ? true : this.computedValue) || this.$props.placeholder || this.$data.autofill),
           'k-autofill': this.$data.autofill,
           'k-invalid': !isValid && isValid !== undefined,
           'k-rtl': this.$props.dir === 'rtl'

package/dist/es/maskedtextbox/MaskedTextBox.js

@@ -191,7 +191,7 @@ var MaskedTextBoxVue2 = {
         return {
           'k-floating-label-container': true,
           'k-focus': this.currentFocused,
-          'k-empty': !this.computedValue(),
+          'k-state-empty': !this.computedValue(),
           'k-invalid': !isValid && isValid !== undefined,
           'k-rtl': this.$props.dir === 'rtl'
         };

package/dist/es/numerictextbox/NumericTextBox.js

@@ -177,7 +177,7 @@ var NumericTextBoxVue2 = {
         return {
           'k-floating-label-container': true,
           'k-focus': this.$data.focused,
-          'k-empty': !(compValue === 0 ? true : compValue || this.$props.placeholder),
+          'k-state-empty': !(compValue === 0 ? true : compValue || this.$props.placeholder),
           'k-invalid': !isValid && isValid !== undefined,
           'k-rtl': this.$props.dir === 'rtl'
         };

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-inputs',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1641982073,
+    publishDate: 1642407447,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };

package/dist/es/switch/Switch.d.ts

@@ -19,6 +19,10 @@ export interface SwitchChangeEvent {
  * Represents the props of the [Kendo UI for Vue Switch component]({% slug overview_switch %}).
  */
 export interface SwitchProps extends ToggleBaseProps, FormComponentProps {
+    /**
+     * Specifies the `name` of the Switch.
+     */
+    name?: string;
     /**
      * Specifies the `accessKey` of the Switch.
      */

package/dist/es/switch/Switch.js

@@ -21,6 +21,7 @@ var SwitchVue2 = {
     'blur': null
   },
   props: {
+    name: String,
     accessKey: String,
     checked: {
       type: Boolean,
@@ -74,10 +75,6 @@ var SwitchVue2 = {
     },
     tabIndex: Number,
     valid: Boolean,
-    // validate: {
-    //     type: Boolean,
-    //     default: false
-    // },
     validityStyles: {
       type: Boolean,
       default: false
@@ -204,6 +201,7 @@ var SwitchVue2 = {
       attrs: this.v3 ? undefined : {
         type: "checkbox",
         tabIndex: -1,
+        name: this.$props.name,
         required: required !== undefined ? required : false,
         "aria-hidden": true
       },
@@ -216,6 +214,7 @@ var SwitchVue2 = {
         _this.inputRef = el;
       } : 'input',
       tabIndex: -1,
+      name: this.$props.name,
       required: required !== undefined ? required : false,
       "aria-hidden": true,
       value: this.v3 ? this.computedValue : null,
@@ -250,9 +249,6 @@ var SwitchVue2 = {
     element: function element() {
       return this._element;
     },
-    name: function name() {
-      return this.$props.name;
-    },
     validity: function validity() {
       var customError = this.$props.validationMessage !== undefined;
       var isValid = this.$props.valid !== undefined ? this.$props.valid : !this.$props.required ? true : this.computedValue ? true : false;

package/dist/npm/colors/ColorPalette.js

@@ -40,6 +40,13 @@ exports.DEFAULT_PRESET = 'office'; // tslint:enable:max-line-length
 
 var ColorPaletteVue2 = {
   name: 'KendoColorPalette',
+  // @ts-ignore
+  emits: {
+    'keydown': null,
+    'focus': null,
+    'blur': null,
+    'change': null
+  },
   props: {
     palette: {
       type: [String, Array],

package/dist/npm/colors/ColorPicker.js

@@ -169,19 +169,21 @@ var ColorPickerVue2 = {
     var h = gh || createElement;
     var _b = this.$props,
         disabled = _b.disabled,
-        tabIndex = _b.tabIndex; // const dir = useDir(focusableElementGuid, props.dir);
+        tabIndex = _b.tabIndex,
+        dir = _b.dir; // const dir = useDir(focusableElementGuid, props.dir);
 
     return h("span", {
-      "class": this.wrapperClassName // dir={dir}
-      ,
-      id: this.$props.id,
+      "class": this.wrapperClassName,
+      dir: dir,
       attrs: this.v3 ? undefined : {
+        dir: dir,
         id: this.$props.id,
         "aria-labelledby": this.$props.ariaLabelledBy,
         "aria-describedby": this.$props.ariaDescribedBy,
         tabIndex: kendo_vue_common_1.getTabIndex(tabIndex, disabled),
         title: this.$props.title
       },
+      id: this.$props.id,
       "aria-labelledby": this.$props.ariaLabelledBy,
       "aria-describedby": this.$props.ariaDescribedBy,
       ref: this.focusableElementGuid,
@@ -231,12 +233,13 @@ var ColorPickerVue2 = {
       icon: 'arrow-s'
     }), // @ts-ignore function children
     h(Picker_1.Picker, {
-      //  dir={dir}
-      open: this.computedOpen,
+      dir: dir,
       attrs: this.v3 ? undefined : {
+        dir: dir,
         open: this.computedOpen,
         popupAnchor: this.focusableElementGuid
       },
+      open: this.computedOpen,
       onOpen: this.onOpenHandler,
       on: this.v3 ? undefined : {
         "open": this.onOpenHandler
@@ -249,7 +252,8 @@ var ColorPickerVue2 = {
         ,
         on: _this2.v3 ? undefined : {
           "keydown": _this2.onKeyDownHandler,
-          "change": _this2.onPaletteChangeHandler
+          "change": _this2.onPaletteChangeHandler,
+          "blur": _this2.onBlurHandler
         },
         ref: _this2.v3 ? function (el) {
           _this.paletteRef = el;
@@ -258,13 +262,15 @@ var ColorPickerVue2 = {
         attrs: _this2.v3 ? undefined : {
           value: _this2.computedValue || undefined
         },
-        onChange: _this2.onPaletteChangeHandler
+        onChange: _this2.onPaletteChangeHandler,
+        onBlur: _this2.onBlurHandler
       })];
     } : [h(ColorPalette_1.ColorPalette, {
       onKeydown: _this2.onKeyDownHandler,
       on: _this2.v3 ? undefined : {
         "keydown": _this2.onKeyDownHandler,
-        "change": _this2.onPaletteChangeHandler
+        "change": _this2.onPaletteChangeHandler,
+        "blur": _this2.onBlurHandler
       },
       ref: _this2.v3 ? function (el) {
         _this.paletteRef = el;
@@ -273,7 +279,8 @@ var ColorPickerVue2 = {
       attrs: _this2.v3 ? undefined : {
         value: _this2.computedValue || undefined
       },
-      onChange: _this2.onPaletteChangeHandler
+      onChange: _this2.onPaletteChangeHandler,
+      onBlur: _this2.onBlurHandler
     })])]);
   },
   methods: {
@@ -354,11 +361,13 @@ var ColorPickerVue2 = {
       });
     },
     onBlurTimeout: function onBlurTimeout() {
-      if (this.palette && document.activeElement !== this.palette.$el) {
+      var paleteIsFocused = this.palette && document.activeElement === this.palette.$el;
+
+      if (!paleteIsFocused) {
         this.setOpen(false, true);
-        this.focused = false;
       }
 
+      this.focused = paleteIsFocused;
       this.blurTimeoutRef = undefined;
     },
     onBlurHandler: function onBlurHandler(event) {

package/dist/npm/input/Input.js

@@ -150,16 +150,19 @@ var InputVue2 = {
     var _a = this.$props,
         label = _a.label,
         id = _a.id,
-        required = _a.required;
+        required = _a.required,
+        validationMessage = _a.validationMessage;
     var inputId = id || this.$data.inputId;
     var textbox = h('input', __assign(__assign({
       domProps: this.v3 ? null : __assign(__assign({}, this.$attrs), {
         placeholder: this.$props.placeholder,
         id: inputId,
         required: required,
-        value: this.computedValue
+        value: this.computedValue,
+        validationMessage: validationMessage
       })
     }, this.$attrs), {
+      validationMessage: validationMessage,
       placeholder: this.$props.placeholder,
       id: inputId,
       required: required,
@@ -318,7 +321,7 @@ var InputVue2 = {
         return {
           'k-floating-label-container': true,
           'k-focus': this.$data.focused,
-          'k-empty': !((this.computedValue === 0 ? true : this.computedValue) || this.$props.placeholder || this.$data.autofill),
+          'k-state-empty': !((this.computedValue === 0 ? true : this.computedValue) || this.$props.placeholder || this.$data.autofill),
           'k-autofill': this.$data.autofill,
           'k-invalid': !isValid && isValid !== undefined,
           'k-rtl': this.$props.dir === 'rtl'

package/dist/npm/maskedtextbox/MaskedTextBox.js

@@ -203,7 +203,7 @@ var MaskedTextBoxVue2 = {
         return {
           'k-floating-label-container': true,
           'k-focus': this.currentFocused,
-          'k-empty': !this.computedValue(),
+          'k-state-empty': !this.computedValue(),
           'k-invalid': !isValid && isValid !== undefined,
           'k-rtl': this.$props.dir === 'rtl'
         };

package/dist/npm/numerictextbox/NumericTextBox.js

@@ -192,7 +192,7 @@ var NumericTextBoxVue2 = {
         return {
           'k-floating-label-container': true,
           'k-focus': this.$data.focused,
-          'k-empty': !(compValue === 0 ? true : compValue || this.$props.placeholder),
+          'k-state-empty': !(compValue === 0 ? true : compValue || this.$props.placeholder),
           'k-invalid': !isValid && isValid !== undefined,
           'k-rtl': this.$props.dir === 'rtl'
         };

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-vue-inputs',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1641982073,
+    publishDate: 1642407447,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };

package/dist/npm/switch/Switch.d.ts

@@ -19,6 +19,10 @@ export interface SwitchChangeEvent {
  * Represents the props of the [Kendo UI for Vue Switch component]({% slug overview_switch %}).
  */
 export interface SwitchProps extends ToggleBaseProps, FormComponentProps {
+    /**
+     * Specifies the `name` of the Switch.
+     */
+    name?: string;
     /**
      * Specifies the `accessKey` of the Switch.
      */

package/dist/npm/switch/Switch.js

@@ -33,6 +33,7 @@ var SwitchVue2 = {
     'blur': null
   },
   props: {
+    name: String,
     accessKey: String,
     checked: {
       type: Boolean,
@@ -86,10 +87,6 @@ var SwitchVue2 = {
     },
     tabIndex: Number,
     valid: Boolean,
-    // validate: {
-    //     type: Boolean,
-    //     default: false
-    // },
     validityStyles: {
       type: Boolean,
       default: false
@@ -216,6 +213,7 @@ var SwitchVue2 = {
       attrs: this.v3 ? undefined : {
         type: "checkbox",
         tabIndex: -1,
+        name: this.$props.name,
         required: required !== undefined ? required : false,
         "aria-hidden": true
       },
@@ -228,6 +226,7 @@ var SwitchVue2 = {
         _this.inputRef = el;
       } : 'input',
       tabIndex: -1,
+      name: this.$props.name,
       required: required !== undefined ? required : false,
       "aria-hidden": true,
       value: this.v3 ? this.computedValue : null,
@@ -262,9 +261,6 @@ var SwitchVue2 = {
     element: function element() {
       return this._element;
     },
-    name: function name() {
-      return this.$props.name;
-    },
     validity: function validity() {
       var customError = this.$props.validationMessage !== undefined;
       var isValid = this.$props.valid !== undefined ? this.$props.valid : !this.$props.required ? true : this.computedValue ? true : false;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-vue-inputs",
   "description": "Kendo UI for Vue Input package",
-  "version": "2.8.0-dev.202201121019",
+  "version": "3.0.0-dev.202201170830",
   "repository": {
     "type": "git",
     "url": "https://github.com/telerik/kendo-vue.git"
@@ -38,21 +38,21 @@
     "vue": "^2.6.12 || ^3.0.2"
   },
   "dependencies": {
-    "@progress/kendo-vue-buttons": "2.8.0-dev.202201121019",
-    "@progress/kendo-vue-common": "2.8.0-dev.202201121019",
-    "@progress/kendo-vue-labels": "2.8.0-dev.202201121019",
-    "@progress/kendo-vue-popup": "2.8.0-dev.202201121019"
+    "@progress/kendo-vue-buttons": "3.0.0-dev.202201170830",
+    "@progress/kendo-vue-common": "3.0.0-dev.202201170830",
+    "@progress/kendo-vue-labels": "3.0.0-dev.202201170830",
+    "@progress/kendo-vue-popup": "3.0.0-dev.202201170830"
   },
   "devDependencies": {
     "@progress/kendo-data-query": "^1.5.5",
     "@progress/kendo-date-math": "^1.5.4",
     "@progress/kendo-drawing": "^1.8.0",
     "@progress/kendo-licensing": "^1.1.0",
-    "@progress/kendo-vue-buttons": "2.8.0-dev.202201121019",
-    "@progress/kendo-vue-form": "2.8.0-dev.202201121019",
-    "@progress/kendo-vue-intl": "2.8.0-dev.202201121019",
-    "@progress/kendo-vue-labels": "2.8.0-dev.202201121019",
-    "@progress/kendo-vue-tooltip": "2.8.0-dev.202201121019",
+    "@progress/kendo-vue-buttons": "3.0.0-dev.202201170830",
+    "@progress/kendo-vue-form": "3.0.0-dev.202201170830",
+    "@progress/kendo-vue-intl": "3.0.0-dev.202201170830",
+    "@progress/kendo-vue-labels": "3.0.0-dev.202201170830",
+    "@progress/kendo-vue-tooltip": "3.0.0-dev.202201170830",
     "cldr-core": "^34.0.0",
     "cldr-dates-full": "^34.0.0",
     "cldr-numbers-full": "^34.0.0"