@progress/kendo-vue-inputs 3.4.4 → 3.4.5-dev.202207300828

package/dist/es/colors/ColorInput.js

@@ -24,7 +24,8 @@ import { HexInput } from './HexInput';
 import { Button } from '@progress/kendo-vue-buttons';
 import { Label } from '@progress/kendo-vue-labels';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
-import { messages, colorGradientR, colorGradientHex, colorGradientA, colorGradientB, colorGradientG } from '../messages';
+import { messages, colorGradientR, colorGradientHex, colorGradientA, colorGradientB, colorGradientG, colorGradientRLabel, colorGradientGLabel, colorGradientBLabel, colorGradientALabel, colorGradientInputColorButton } from '../messages';
+import { guid, Keys } from '@progress/kendo-vue-common';
 /**
  * @hidden
  */
@@ -38,12 +39,11 @@ var ColorInputVue2 = {
   name: 'KendoColorInput',
   // @ts-ignore
   emits: {
-    'focus': null,
-    'blur': null,
     'hexchange': null,
     'rgbachange': null
   },
   props: {
+    tabIndex: Number,
     rgba: Object,
     hex: String,
     opacity: Boolean,
@@ -54,11 +54,20 @@ var ColorInputVue2 = {
       default: null
     }
   },
+  created: function created() {
+    this.hexInputId = guid();
+  },
   data: function data() {
     return {
       inputMode: modes[1]
     };
   },
+  mounted: function mounted() {
+    this.lastFocusable = this.$refs.hexinput || this.$refs.numerica || this.$refs.numericb;
+  },
+  updated: function updated() {
+    this.lastFocusable = this.$refs.hexinput || this.$refs.numerica || this.$refs.numericb;
+  },
   // @ts-ignore
   setup: !isV3 ? undefined : function () {
     var v3 = !!isV3;
@@ -70,79 +79,93 @@ var ColorInputVue2 = {
   render: function render(createElement) {
     var h = gh || createElement;
     var localizationService = provideLocalizationService(this);
-    var hexMessage = localizationService.toLanguageString(colorGradientR, messages[colorGradientHex]);
+    var hexMessage = localizationService.toLanguageString(colorGradientHex, messages[colorGradientHex]);
+    var buttonMessage = localizationService.toLanguageString(colorGradientInputColorButton, messages[colorGradientInputColorButton]);
     var rMessage = localizationService.toLanguageString(colorGradientR, messages[colorGradientR]);
-    var gMessage = localizationService.toLanguageString(colorGradientR, messages[colorGradientG]);
-    var bMessage = localizationService.toLanguageString(colorGradientR, messages[colorGradientB]);
-    var aMessage = localizationService.toLanguageString(colorGradientR, messages[colorGradientA]);
+    var gMessage = localizationService.toLanguageString(colorGradientG, messages[colorGradientG]);
+    var bMessage = localizationService.toLanguageString(colorGradientB, messages[colorGradientB]);
+    var aMessage = localizationService.toLanguageString(colorGradientA, messages[colorGradientA]);
+    var rLabelMessage = localizationService.toLanguageString(colorGradientRLabel, messages[colorGradientRLabel]);
+    var gLabelMessage = localizationService.toLanguageString(colorGradientGLabel, messages[colorGradientGLabel]);
+    var bLabelMessage = localizationService.toLanguageString(colorGradientBLabel, messages[colorGradientBLabel]);
+    var aLabelMessage = localizationService.toLanguageString(colorGradientALabel, messages[colorGradientALabel]);
     return h("div", {
       "class": "k-colorgradient-inputs k-hstack"
     }, [h("div", {
       "class": "k-vstack"
     }, [h(Button, {
-      fillMode: 'flat',
+      ariaLabel: buttonMessage,
       attrs: this.v3 ? undefined : {
+        ariaLabel: buttonMessage,
+        tabIndex: this.tabIndex,
+        type: "button",
         fillMode: 'flat',
         icon: 'arrows-kpi'
       },
+      tabIndex: this.tabIndex,
+      type: "button",
+      fillMode: 'flat',
       icon: 'arrows-kpi',
-      onFocus: this.onFocus,
+      "class": "k-colorgradient-toggle-mode k-icon-button",
+      onClick: this.onToggleModeChange,
       on: this.v3 ? undefined : {
-        "focus": this.onFocus,
-        "blur": this.onBlur,
-        "click": this.onToggleModeChange
+        "click": this.onToggleModeChange,
+        "keydown": this.onKeyDown
       },
-      onBlur: this.onBlur,
-      "class": "k-colorgradient-toggle-mode k-icon-button",
-      onClick: this.onToggleModeChange
+      onKeydown: this.onKeyDown
     })]), this.inputMode === 'hex' && h("div", {
       "class": "k-vstack k-flex-1"
     }, [h("span", {
-      "class": "k-hex-value k-textbox k-input"
+      "class": "k-hex-value"
     }, [h(HexInput, {
-      hex: this.$props.hex,
+      id: this.hexInputId,
       attrs: this.v3 ? undefined : {
+        id: this.hexInputId,
+        tabIndex: this.tabIndex,
         hex: this.$props.hex,
         disabled: this.$props.disabled
       },
-      onFocus: this.onFocus,
+      tabIndex: this.tabIndex,
+      hex: this.$props.hex,
+      onHexchange: this.onHexChange,
       on: this.v3 ? undefined : {
-        "focus": this.onFocus,
-        "blur": this.onBlur,
         "hexchange": this.onHexChange
       },
-      onBlur: this.onBlur,
-      onHexchange: this.onHexChange,
-      disabled: this.$props.disabled
+      disabled: this.$props.disabled,
+      ref: 'hexinput'
     })]), // @ts-ignore  function children
     h(Label, {
-      "class": "k-colorgradient-input-label"
+      "class": "k-colorgradient-input-label",
+      "for": this.hexInputId,
+      attrs: this.v3 ? undefined : {
+        "for": this.hexInputId
+      }
     }, this.v3 ? function () {
       return [hexMessage];
     } : [hexMessage])]), (this.inputMode === 'rgb' || this.inputMode === 'rgba') && [h("div", {
       "class": "k-vstack"
     }, [h(NumericTextBox, {
-      value: this.$props.rgba.r,
+      tabIndex: this.tabIndex,
       attrs: this.v3 ? undefined : {
+        tabIndex: this.tabIndex,
         value: this.$props.rgba.r,
         min: 0,
         max: 255,
         spinners: false,
         format: "n",
+        ariaLabel: rLabelMessage,
         disabled: this.$props.disabled
       },
+      value: this.$props.rgba.r,
       min: 0,
       max: 255,
       spinners: false,
       format: "n",
-      onFocus: this.onFocus,
+      ariaLabel: rLabelMessage,
+      onChange: this.onRgbaRChange,
       on: this.v3 ? undefined : {
-        "focus": this.onFocus,
-        "blur": this.onBlur,
         "change": this.onRgbaRChange
       },
-      onBlur: this.onBlur,
-      onChange: this.onRgbaRChange,
       disabled: this.$props.disabled
     }), // @ts-ignore  function children
     h(Label, {
@@ -152,27 +175,27 @@ var ColorInputVue2 = {
     } : [rMessage])]), h("div", {
       "class": "k-vstack"
     }, [h(NumericTextBox, {
-      value: this.$props.rgba.g,
+      tabIndex: this.tabIndex,
       attrs: this.v3 ? undefined : {
+        tabIndex: this.tabIndex,
         value: this.$props.rgba.g,
         min: 0,
         max: 255,
         spinners: false,
         format: "n",
+        ariaLabel: gLabelMessage,
         disabled: this.$props.disabled
       },
+      value: this.$props.rgba.g,
       min: 0,
       max: 255,
       spinners: false,
       format: "n",
-      onFocus: this.onFocus,
+      ariaLabel: gLabelMessage,
+      onChange: this.onRgbaGChange,
       on: this.v3 ? undefined : {
-        "focus": this.onFocus,
-        "blur": this.onBlur,
         "change": this.onRgbaGChange
       },
-      onBlur: this.onBlur,
-      onChange: this.onRgbaGChange,
       disabled: this.$props.disabled
     }), // @ts-ignore  function children
     h(Label, {
@@ -182,28 +205,29 @@ var ColorInputVue2 = {
     } : [gMessage])]), h("div", {
       "class": "k-vstack"
     }, [h(NumericTextBox, {
-      value: this.$props.rgba.b,
+      tabIndex: this.tabIndex,
       attrs: this.v3 ? undefined : {
+        tabIndex: this.tabIndex,
         value: this.$props.rgba.b,
         min: 0,
         max: 255,
         spinners: false,
         format: "n",
+        ariaLabel: bLabelMessage,
         disabled: this.$props.disabled
       },
+      value: this.$props.rgba.b,
       min: 0,
       max: 255,
       spinners: false,
       format: "n",
-      onFocus: this.onFocus,
+      ariaLabel: bLabelMessage,
+      onChange: this.onRgbaBChange,
       on: this.v3 ? undefined : {
-        "focus": this.onFocus,
-        "blur": this.onBlur,
         "change": this.onRgbaBChange
       },
-      onBlur: this.onBlur,
-      onChange: this.onRgbaBChange,
-      disabled: this.$props.disabled
+      disabled: this.$props.disabled,
+      ref: 'numericb'
     }), // @ts-ignore  function children
     h(Label, {
       "class": "k-colorgradient-input-label"
@@ -212,30 +236,31 @@ var ColorInputVue2 = {
     } : [bMessage])])], this.inputMode === 'rgba' && h("div", {
       "class": "k-vstack"
     }, [this.$props.opacity && h(NumericTextBox, {
-      value: this.$props.rgba.a,
+      tabIndex: this.tabIndex,
       attrs: this.v3 ? undefined : {
+        tabIndex: this.tabIndex,
         value: this.$props.rgba.a,
         min: 0,
         max: 1,
         step: 0.01,
         spinners: false,
         format: "n2",
+        ariaLabel: aLabelMessage,
         disabled: this.$props.disabled
       },
+      value: this.$props.rgba.a,
       min: 0,
       max: 1,
       step: 0.01,
       spinners: false,
       format: "n2",
-      onFocus: this.onFocus,
+      ariaLabel: aLabelMessage,
+      onChange: this.onRgbaAChange,
       on: this.v3 ? undefined : {
-        "focus": this.onFocus,
-        "blur": this.onBlur,
         "change": this.onRgbaAChange
       },
-      onBlur: this.onBlur,
-      onChange: this.onRgbaAChange,
-      disabled: this.$props.disabled
+      disabled: this.$props.disabled,
+      ref: 'numerica'
     }), this.$props.opacity && // @ts-ignore  function children
     h(Label, {
       "class": "k-colorgradient-input-label"
@@ -244,12 +269,6 @@ var ColorInputVue2 = {
     } : [aMessage])])]);
   },
   methods: {
-    onFocus: function onFocus(event) {
-      this.$emit('focus', event);
-    },
-    onBlur: function onBlur(event) {
-      this.$emit('blur', event);
-    },
     onHexChange: function onHexChange(event) {
       this.$emit('hexchange', event.hex, event.value, event);
     },
@@ -303,6 +322,11 @@ var ColorInputVue2 = {
       } else {
         this.inputMode = modes[index];
       }
+    },
+    onKeyDown: function onKeyDown(e) {
+      if (e.keyCode === Keys.enter) {
+        e.stopPropagation();
+      }
     }
   }
 };

package/dist/es/colors/ColorPalette.js

@@ -30,11 +30,17 @@ export var DEFAULT_PRESET = 'office';
 
 var ColorPaletteVue2 = {
   name: 'KendoColorPalette',
+  model: {
+    event: 'changemodel'
+  },
   // @ts-ignore
   emits: {
     'keydown': null,
     'focus': null,
     'blur': null,
+    'changemodel': null,
+    'update:modelValue': null,
+    'update:modelRgbaValue': null,
     'change': null
   },
   props: {
@@ -47,6 +53,8 @@ var ColorPaletteVue2 = {
       type: [Number, Object],
       default: DEFAULT_TILE_SIZE
     },
+    modelValue: String,
+    modelRgbaValue: String,
     defaultValue: String,
     value: String,
     disabled: Boolean,
@@ -73,7 +81,7 @@ var ColorPaletteVue2 = {
       return this.$props.value === undefined;
     },
     selectedColor: function selectedColor() {
-      return this.$props.value !== undefined ? this.$props.value : this.currentValue !== undefined ? this.currentValue : this.$props.defaultValue;
+      return this.$props.value !== undefined ? this.$props.value : this.modelValue !== undefined ? this.modelValue : this.modelRgbaValue !== undefined ? this.modelRgbaValue : this.currentValue !== undefined ? this.currentValue : this.$props.defaultValue;
     }
   },
   data: function data() {
@@ -129,7 +137,8 @@ var ColorPaletteVue2 = {
             id: this.createCellId({
               row: rowIndex,
               col: i
-            })
+            }),
+            role: 'gridcell'
           },
           "aria-selected": isSelected ? true : this.$props.disabled ? undefined : false,
           style: {
@@ -150,7 +159,8 @@ var ColorPaletteVue2 = {
             row: rowIndex,
             col: i
           }),
-          key: i
+          key: i,
+          role: 'gridcell'
         });
       }, this);
     };
@@ -173,9 +183,10 @@ var ColorPaletteVue2 = {
         attrs: this.v3 ? undefined : {
           id: this.$props.id,
           "aria-disabled": this.$props.disabled ? 'true' : undefined,
-          "aria-activedescendant": selectedCellCoords && this.createCellId(selectedCellCoords),
+          "aria-activedescendant": focusedCellCoords && this.createCellId(focusedCellCoords),
           "aria-labelledby": this.$props.ariaLabelledBy,
           "aria-describedby": this.$props.ariaDescribedBy,
+          role: "grid",
           tabindex: getTabIndex(this.$props.tabIndex, this.$props.disabled)
         },
         "class": className,
@@ -188,17 +199,14 @@ var ColorPaletteVue2 = {
         onFocusout: this.onBlur,
         onKeydown: this.onKeyDown,
         "aria-disabled": this.$props.disabled ? 'true' : undefined,
-        "aria-activedescendant": selectedCellCoords && this.createCellId(selectedCellCoords),
+        "aria-activedescendant": focusedCellCoords && this.createCellId(focusedCellCoords),
         "aria-labelledby": this.$props.ariaLabelledBy,
         "aria-describedby": this.$props.ariaDescribedBy,
+        role: "grid",
         tabindex: getTabIndex(this.$props.tabIndex, this.$props.disabled),
         ref: setRef(this, 'wrapper')
       }, [h("div", {
-        "class": "k-colorpalette-table-wrap",
-        role: "grid",
-        attrs: this.v3 ? undefined : {
-          role: "grid"
-        }
+        "class": "k-colorpalette-table-wrap"
       }, [h("table", {
         "class": "k-colorpalette-table k-palette",
         role: "presentation",
@@ -221,19 +229,19 @@ var ColorPaletteVue2 = {
     onKeyDown: function onKeyDown(event) {
       switch (event.keyCode) {
         case Keys.down:
-          this.handleCellNavigation(0, 1);
+          this.handleCellNavigation(event, 0, 1);
           break;
 
         case Keys.up:
-          this.handleCellNavigation(0, -1);
+          this.handleCellNavigation(event, 0, -1);
           break;
 
         case Keys.right:
-          this.handleCellNavigation(1, 0);
+          this.handleCellNavigation(event, 1, 0);
           break;
 
         case Keys.left:
-          this.handleCellNavigation(-1, 0);
+          this.handleCellNavigation(event, -1, 0);
           break;
 
         case Keys.enter:
@@ -271,7 +279,9 @@ var ColorPaletteVue2 = {
         target: this
       });
     },
-    handleCellNavigation: function handleCellNavigation(horizontalStep, verticalStep) {
+    handleCellNavigation: function handleCellNavigation(event, horizontalStep, verticalStep) {
+      event.preventDefault();
+
       if (this.focusedColorCooridanates) {
         var newCoords = this.paletteService.getNextCell(this.focusedColorCooridanates, horizontalStep, verticalStep);
         this.focusedColor = this.paletteService.getColorAt(newCoords);
@@ -287,11 +297,15 @@ var ColorPaletteVue2 = {
       this.dispatchChangeEvent(this.focusedColor, event);
     },
     dispatchChangeEvent: function dispatchChangeEvent(value, event) {
+      var rgbaValue = parseColor(value, 'rgba');
+      this.$emit('changemodel', value);
+      this.$emit('update:modelValue', value);
+      this.$emit('update:modelRgbaValue', rgbaValue);
       this.$emit('change', {
         event: event,
         component: this,
         value: value,
-        rgbaValue: parseColor(value, 'rgba')
+        rgbaValue: rgbaValue
       });
     },
     getPaletteInfo: function getPaletteInfo() {

package/dist/es/colors/ColorPicker.d.ts

@@ -14,6 +14,7 @@ export interface ColorPickerHandle {
  * @hidden
  */
 export interface ColorPickerState {
+    _popupId: string;
     focusableElementGuid: string;
     palette: any | null;
     blurTimeout: any | undefined;