@progress/kendo-vue-inputs 2.7.3 → 3.0.0-dev.202201141128

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (74) hide show
  1. package/dist/cdn/js/kendo-vue-inputs.js +1 -1
  2. package/dist/es/additionalTypes.ts +7 -1
  3. package/dist/es/checkbox/Checkbox.d.ts +5 -6
  4. package/dist/es/checkbox/Checkbox.js +38 -22
  5. package/dist/es/checkbox/interfaces/CheckboxProps.d.ts +24 -0
  6. package/dist/es/colors/ColorPalette.d.ts +6 -6
  7. package/dist/es/colors/ColorPalette.js +12 -4
  8. package/dist/es/colors/ColorPicker.d.ts +5 -6
  9. package/dist/es/colors/ColorPicker.js +66 -58
  10. package/dist/es/colors/Picker.d.ts +5 -6
  11. package/dist/es/colors/Picker.js +3 -3
  12. package/dist/es/colors/interfaces/ColorPickerProps.d.ts +2 -2
  13. package/dist/es/input/Input.d.ts +43 -7
  14. package/dist/es/input/Input.js +46 -23
  15. package/dist/es/main.d.ts +1 -1
  16. package/dist/es/main.js +1 -1
  17. package/dist/es/maskedtextbox/MaskedTextBox.d.ts +5 -6
  18. package/dist/es/maskedtextbox/MaskedTextBox.js +37 -13
  19. package/dist/es/maskedtextbox/MaskedTextBoxProps.d.ts +37 -0
  20. package/dist/es/numerictextbox/NumericTextBox.d.ts +5 -6
  21. package/dist/es/numerictextbox/NumericTextBox.js +60 -36
  22. package/dist/es/numerictextbox/interfaces/NumericTextBoxProps.d.ts +37 -0
  23. package/dist/es/package-metadata.js +1 -1
  24. package/dist/es/radiobutton/RadioButton.d.ts +5 -6
  25. package/dist/es/radiobutton/RadioButton.js +13 -8
  26. package/dist/es/radiobutton/RadioGroup.d.ts +5 -6
  27. package/dist/es/radiobutton/RadioGroup.js +3 -3
  28. package/dist/es/radiobutton/interfaces/RadioButtonProps.d.ts +12 -0
  29. package/dist/es/slider/Slider.d.ts +5 -6
  30. package/dist/es/slider/Slider.js +30 -25
  31. package/dist/es/slider/SliderLabel.d.ts +5 -6
  32. package/dist/es/slider/SliderLabel.js +3 -3
  33. package/dist/es/switch/Switch.d.ts +49 -6
  34. package/dist/es/switch/Switch.js +59 -27
  35. package/dist/es/textarea/TextArea.d.ts +5 -6
  36. package/dist/es/textarea/TextArea.js +40 -11
  37. package/dist/es/textarea/interfaces/TextAreaProps.d.ts +37 -0
  38. package/dist/npm/additionalTypes.ts +7 -1
  39. package/dist/npm/checkbox/Checkbox.d.ts +5 -6
  40. package/dist/npm/checkbox/Checkbox.js +39 -23
  41. package/dist/npm/checkbox/interfaces/CheckboxProps.d.ts +24 -0
  42. package/dist/npm/colors/ColorPalette.d.ts +6 -6
  43. package/dist/npm/colors/ColorPalette.js +13 -5
  44. package/dist/npm/colors/ColorPicker.d.ts +5 -6
  45. package/dist/npm/colors/ColorPicker.js +68 -60
  46. package/dist/npm/colors/Picker.d.ts +5 -6
  47. package/dist/npm/colors/Picker.js +5 -5
  48. package/dist/npm/colors/interfaces/ColorPickerProps.d.ts +2 -2
  49. package/dist/npm/input/Input.d.ts +43 -7
  50. package/dist/npm/input/Input.js +47 -24
  51. package/dist/npm/main.d.ts +1 -1
  52. package/dist/npm/main.js +1 -0
  53. package/dist/npm/maskedtextbox/MaskedTextBox.d.ts +5 -6
  54. package/dist/npm/maskedtextbox/MaskedTextBox.js +38 -14
  55. package/dist/npm/maskedtextbox/MaskedTextBoxProps.d.ts +37 -0
  56. package/dist/npm/numerictextbox/NumericTextBox.d.ts +5 -6
  57. package/dist/npm/numerictextbox/NumericTextBox.js +62 -37
  58. package/dist/npm/numerictextbox/interfaces/NumericTextBoxProps.d.ts +37 -0
  59. package/dist/npm/package-metadata.js +1 -1
  60. package/dist/npm/radiobutton/RadioButton.d.ts +5 -6
  61. package/dist/npm/radiobutton/RadioButton.js +14 -9
  62. package/dist/npm/radiobutton/RadioGroup.d.ts +5 -6
  63. package/dist/npm/radiobutton/RadioGroup.js +5 -5
  64. package/dist/npm/radiobutton/interfaces/RadioButtonProps.d.ts +12 -0
  65. package/dist/npm/slider/Slider.d.ts +5 -6
  66. package/dist/npm/slider/Slider.js +33 -27
  67. package/dist/npm/slider/SliderLabel.d.ts +5 -6
  68. package/dist/npm/slider/SliderLabel.js +5 -5
  69. package/dist/npm/switch/Switch.d.ts +49 -6
  70. package/dist/npm/switch/Switch.js +60 -28
  71. package/dist/npm/textarea/TextArea.d.ts +5 -6
  72. package/dist/npm/textarea/TextArea.js +41 -12
  73. package/dist/npm/textarea/interfaces/TextAreaProps.d.ts +37 -0
  74. package/package.json +10 -9
@@ -19,7 +19,7 @@ var __assign = undefined && undefined.__assign || function () {
19
19
  Object.defineProperty(exports, "__esModule", {
20
20
  value: true
21
21
  });
22
- exports.InputVue3 = exports.Input = void 0; // @ts-ignore
22
+ exports.InputVue2 = exports.Input = void 0; // @ts-ignore
23
23
 
24
24
  var Vue = require("vue");
25
25
 
@@ -33,11 +33,10 @@ var package_metadata_1 = require("../package-metadata");
33
33
 
34
34
  var kendo_vue_labels_1 = require("@progress/kendo-vue-labels");
35
35
 
36
- var Input = {
36
+ var InputVue2 = {
37
37
  model: {
38
38
  event: 'changemodel'
39
39
  },
40
- inheritAttrs: false,
41
40
  // @ts-ignore
42
41
  emits: {
43
42
  'input': null,
@@ -69,6 +68,27 @@ var Input = {
69
68
  type: Boolean,
70
69
  default: false
71
70
  },
71
+ size: {
72
+ type: String,
73
+ default: 'medium',
74
+ validator: function validator(value) {
75
+ return [null, 'small', 'medium', 'large'].includes(value);
76
+ }
77
+ },
78
+ rounded: {
79
+ type: String,
80
+ default: 'medium',
81
+ validator: function validator(value) {
82
+ return [null, 'small', 'medium', 'large'].includes(value);
83
+ }
84
+ },
85
+ fillMode: {
86
+ type: String,
87
+ default: 'solid',
88
+ validator: function validator(value) {
89
+ return [null, 'solid', 'flat', 'outline'].includes(value);
90
+ }
91
+ },
72
92
  dir: {
73
93
  type: String
74
94
  },
@@ -127,12 +147,6 @@ var Input = {
127
147
  var h = gh || createElement;
128
148
  var listeners = this.v3 ? this.$attrs : this.$listeners;
129
149
  var isValid = !this.$props.validityStyles || this.validity().valid;
130
- var hasInput = Object.keys(this.$attrs).some(function (attr) {
131
- return attr === 'onInput';
132
- });
133
- var hasModel = Object.keys(this.$attrs).some(function (attr) {
134
- return attr === 'onUpdate:modelValue';
135
- });
136
150
  var _a = this.$props,
137
151
  label = _a.label,
138
152
  id = _a.id,
@@ -150,7 +164,7 @@ var Input = {
150
164
  id: inputId,
151
165
  required: required,
152
166
  value: this.computedValue,
153
- class: __assign({}, this.inputClassNames()),
167
+ class: 'k-input-inner',
154
168
  ref: this.v3 ? function (el) {
155
169
  _this.inputRef = el;
156
170
  } : 'input',
@@ -169,6 +183,9 @@ var Input = {
169
183
  onAnimationstart: this.handleAutoFill,
170
184
  onAnimationend: this.handleAutoFillEnd
171
185
  }));
186
+ var inputWrapper = h("span", {
187
+ "class": this.inputWrapperClass
188
+ }, [textbox]);
172
189
  return label ? // @ts-ignore function children
173
190
  h(kendo_vue_labels_1.FloatingLabel, {
174
191
  label: label,
@@ -188,8 +205,8 @@ var Input = {
188
205
  editorPlaceholder: this.$data.focused ? this.$props.placeholder : '',
189
206
  dir: this.$props.dir
190
207
  }, this.v3 ? function () {
191
- return [textbox];
192
- } : [textbox]) : textbox;
208
+ return [inputWrapper];
209
+ } : [inputWrapper]) : inputWrapper;
193
210
  },
194
211
  methods: {
195
212
  emitFocus: function emitFocus(e) {
@@ -205,13 +222,6 @@ var Input = {
205
222
  this.$data.input.focus();
206
223
  }
207
224
  },
208
- inputClassNames: function inputClassNames() {
209
- var isValid = !this.$data.hasMounted || !this.$props.validityStyles || this.validity().valid;
210
- return {
211
- 'k-textbox': true,
212
- 'k-state-invalid': !isValid && isValid !== undefined
213
- };
214
- },
215
225
  validity: function validity() {
216
226
  var result = {
217
227
  badInput: this.$data.input ? this.$data.input.validity.badInput : false,
@@ -307,14 +317,27 @@ var Input = {
307
317
  var isValid = !this.$data.hasMounted || !this.$props.validityStyles || this.validity().valid;
308
318
  return {
309
319
  'k-floating-label-container': true,
310
- 'k-state-focused': this.$data.focused,
320
+ 'k-focus': this.$data.focused,
311
321
  'k-state-empty': !((this.computedValue === 0 ? true : this.computedValue) || this.$props.placeholder || this.$data.autofill),
312
322
  'k-autofill': this.$data.autofill,
313
- 'k-state-invalid': !isValid && isValid !== undefined,
323
+ 'k-invalid': !isValid && isValid !== undefined,
314
324
  'k-rtl': this.$props.dir === 'rtl'
315
325
  };
316
326
  }
317
327
  },
328
+ inputWrapperClass: function inputWrapperClass() {
329
+ var _a;
330
+
331
+ var _b = this.$props,
332
+ size = _b.size,
333
+ fillMode = _b.fillMode,
334
+ rounded = _b.rounded;
335
+ var isValid = !this.$data.hasMounted || !this.$props.validityStyles || this.validity().valid;
336
+ return _a = {
337
+ 'k-textbox': true,
338
+ 'k-input': true
339
+ }, _a["k-input-" + (kendo_vue_common_1.kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-input-" + fillMode] = fillMode, _a["k-rounded-" + (kendo_vue_common_1.kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded, _a['k-valid'] = isValid, _a['k-invalid'] = !isValid, _a['k-required'] = this.required, _a['k-disabled'] = this.$props.disabled, _a;
340
+ },
318
341
  computedValue: {
319
342
  get: function get() {
320
343
  return this.$data.valueDuringOnChange !== undefined ? this.$data.valueDuringOnChange : this.$props.value !== undefined ? this.$props.value : this.$props.modelValue !== undefined ? this.$props.modelValue : this.$data.currentValue;
@@ -322,6 +345,6 @@ var Input = {
322
345
  }
323
346
  }
324
347
  };
325
- exports.Input = Input;
326
- var InputVue3 = Input;
327
- exports.InputVue3 = InputVue3;
348
+ exports.InputVue2 = InputVue2;
349
+ var Input = InputVue2;
350
+ exports.Input = Input;
@@ -10,7 +10,7 @@ export * from './colors/interfaces/ColorPickerFocusEvent';
10
10
  export * from './colors/interfaces/ColorPickerPaletteSettings';
11
11
  export * from './colors/interfaces/ColorPickerPopupSettings';
12
12
  export * from './colors/interfaces/ColorPickerProps';
13
- export { Switch, SwitchProps, SwitchState, SwitchChangeEvent } from './switch/Switch';
13
+ export { Switch, SwitchVue2, SwitchProps, SwitchState, SwitchChangeEvent } from './switch/Switch';
14
14
  export * from './input/Input';
15
15
  export * from './numerictextbox/NumericTextBox';
16
16
  export * from './maskedtextbox/MaskedTextBox';
package/dist/npm/main.js CHANGED
@@ -23,6 +23,7 @@ __exportStar(require("./colors/interfaces/ColorPickerPopupSettings"), exports);
23
23
  __exportStar(require("./colors/interfaces/ColorPickerProps"), exports);
24
24
  var Switch_1 = require("./switch/Switch");
25
25
  Object.defineProperty(exports, "Switch", { enumerable: true, get: function () { return Switch_1.Switch; } });
26
+ Object.defineProperty(exports, "SwitchVue2", { enumerable: true, get: function () { return Switch_1.SwitchVue2; } });
26
27
  __exportStar(require("./input/Input"), exports);
27
28
  __exportStar(require("./numerictextbox/NumericTextBox"), exports);
28
29
  __exportStar(require("./maskedtextbox/MaskedTextBox"), exports);
@@ -1,5 +1,4 @@
1
- import { DefineComponent } from '../additionalTypes';
2
- import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
1
+ import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
3
2
  declare type DefaultData<V> = object | ((this: V) => MaskedTextBoxData);
4
3
  declare type DefaultMethods<V> = {
5
4
  [key: string]: (this: V, ...args: any[]) => any;
@@ -40,7 +39,7 @@ interface MaskedTextBoxState {
40
39
  /**
41
40
  * @hidden
42
41
  */
43
- export interface MaskedTextBoxMethods extends Vue {
42
+ export interface MaskedTextBoxMethods extends Vue2type {
44
43
  focus: (e: any) => void;
45
44
  computedValue: () => any;
46
45
  rawValue: () => string;
@@ -69,6 +68,6 @@ export interface MaskedTextBoxAll extends MaskedTextBoxMethods, MaskedTextBoxSta
69
68
  /**
70
69
  * Represents the default `MaskedTextBox` component.
71
70
  */
72
- declare let MaskedTextBox: ComponentOptions<Vue, DefaultData<MaskedTextBoxData>, DefaultMethods<MaskedTextBoxAll>, MaskedTextBoxComputed, RecordPropsDefinition<MaskedTextBoxProps>>;
73
- declare const MaskedTextBoxVue3: DefineComponent<MaskedTextBoxProps, any, MaskedTextBoxData, MaskedTextBoxComputed, MaskedTextBoxMethods, {}, {}, {}, string, MaskedTextBoxProps, MaskedTextBoxProps, {}>;
74
- export { MaskedTextBox, MaskedTextBoxVue3 };
71
+ declare let MaskedTextBoxVue2: ComponentOptions<Vue2type, DefaultData<MaskedTextBoxData>, DefaultMethods<MaskedTextBoxAll>, MaskedTextBoxComputed, RecordPropsDefinition<MaskedTextBoxProps>>;
72
+ declare const MaskedTextBox: DefineComponent<MaskedTextBoxProps, any, MaskedTextBoxData, MaskedTextBoxComputed, MaskedTextBoxMethods, {}, {}, {}, string, MaskedTextBoxProps, MaskedTextBoxProps, {}>;
73
+ export { MaskedTextBox, MaskedTextBoxVue2 };
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.MaskedTextBoxVue3 = exports.MaskedTextBox = void 0; // @ts-ignore
6
+ exports.MaskedTextBoxVue2 = exports.MaskedTextBox = void 0; // @ts-ignore
7
7
 
8
8
  var Vue = require("vue");
9
9
 
@@ -23,7 +23,7 @@ var package_metadata_1 = require("../package-metadata");
23
23
  */
24
24
 
25
25
 
26
- var MaskedTextBox = {
26
+ var MaskedTextBoxVue2 = {
27
27
  model: {
28
28
  event: 'changemodel'
29
29
  },
@@ -42,6 +42,27 @@ var MaskedTextBox = {
42
42
  accessKey: String,
43
43
  disabled: Boolean,
44
44
  readonly: Boolean,
45
+ size: {
46
+ type: String,
47
+ default: 'medium',
48
+ validator: function validator(value) {
49
+ return [null, 'small', 'medium', 'large'].includes(value);
50
+ }
51
+ },
52
+ rounded: {
53
+ type: String,
54
+ default: 'medium',
55
+ validator: function validator(value) {
56
+ return [null, 'small', 'medium', 'large', 'full'].includes(value);
57
+ }
58
+ },
59
+ fillMode: {
60
+ type: String,
61
+ default: 'solid',
62
+ validator: function validator(value) {
63
+ return [null, 'solid', 'flat', 'outline'].includes(value);
64
+ }
65
+ },
45
66
  prompt: {
46
67
  type: String,
47
68
  default: '_'
@@ -180,10 +201,10 @@ var MaskedTextBox = {
180
201
  get: function get() {
181
202
  var isValid = !this.hasMounted || !this.$props.validityStyles || this.validity().valid;
182
203
  return {
183
- 'k-textbox-container': true,
184
- 'k-state-focused': this.currentFocused,
204
+ 'k-floating-label-container': true,
205
+ 'k-focus': this.currentFocused,
185
206
  'k-state-empty': !this.computedValue(),
186
- 'k-state-invalid': !isValid && isValid !== undefined,
207
+ 'k-invalid': !isValid && isValid !== undefined,
187
208
  'k-rtl': this.$props.dir === 'rtl'
188
209
  };
189
210
  }
@@ -323,11 +344,18 @@ var MaskedTextBox = {
323
344
  }
324
345
  }
325
346
  },
347
+ // @ts-ignore
326
348
  render: function render(createElement) {
349
+ var _a;
350
+
327
351
  var _this = this;
328
352
 
329
353
  var h = gh || createElement;
330
354
  var inputId = this.$props.id || this.inputId;
355
+ var _b = this.$props,
356
+ size = _b.size,
357
+ fillMode = _b.fillMode,
358
+ rounded = _b.rounded;
331
359
  var isValid = !this.hasMounted || !this.$props.validityStyles || this.validity().valid;
332
360
  var newValue = this.computedValue();
333
361
  var inputValue = this.inputValue;
@@ -336,11 +364,7 @@ var MaskedTextBox = {
336
364
  attrs: this.v3 ? undefined : {
337
365
  dir: this.$props.dir
338
366
  },
339
- "class": kendo_vue_common_1.classNames('k-widget k-maskedtextbox', this.$props.className, {
340
- 'k-state-focused': this.currentFocused,
341
- 'k-state-disabled': this.$props.disabled,
342
- 'k-state-invalid': !isValid
343
- }),
367
+ "class": kendo_vue_common_1.classNames('k-maskedtextbox k-input', (_a = {}, _a["k-input-" + (kendo_vue_common_1.kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-input-" + fillMode] = fillMode, _a["k-rounded-" + (kendo_vue_common_1.kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded, _a['k-valid'] = isValid, _a['k-invalid'] = !isValid, _a['k-required'] = this.required, _a['k-disabled'] = this.$props.disabled, _a)),
344
368
  style: !this.$props.label ? {
345
369
  width: this.$props.width
346
370
  } : undefined
@@ -367,7 +391,7 @@ var MaskedTextBox = {
367
391
  autoCorrect: "off",
368
392
  autoCapitalize: "off",
369
393
  spellCheck: false,
370
- "class": "k-textbox",
394
+ "class": "k-input k-input-inner",
371
395
  value: this.v3 ? newValue : null,
372
396
  domProps: this.v3 ? undefined : {
373
397
  "value": newValue
@@ -417,6 +441,6 @@ var MaskedTextBox = {
417
441
  }, [this.$props.label]) : null]) : component;
418
442
  }
419
443
  };
420
- exports.MaskedTextBox = MaskedTextBox;
421
- var MaskedTextBoxVue3 = MaskedTextBox;
422
- exports.MaskedTextBoxVue3 = MaskedTextBoxVue3;
444
+ exports.MaskedTextBoxVue2 = MaskedTextBoxVue2;
445
+ var MaskedTextBox = MaskedTextBoxVue2;
446
+ exports.MaskedTextBox = MaskedTextBox;
@@ -53,6 +53,43 @@ export interface MaskedTextBoxProps extends FormComponentProps {
53
53
  * Represents the `dir` HTML attribute.
54
54
  */
55
55
  dir?: string;
56
+ /**
57
+ * Configures the `size` of the MaskedTextBox.
58
+ *
59
+ * The available options are:
60
+ * - small
61
+ * - medium
62
+ * - large
63
+ * - null&mdash;Does not set a size `class`.
64
+ *
65
+ * @default `medium`
66
+ */
67
+ size?: null | 'small' | 'medium' | 'large' | string;
68
+ /**
69
+ * Configures the `roundness` of the MaskedTextBox.
70
+ *
71
+ * The available options are:
72
+ * - small
73
+ * - medium
74
+ * - large
75
+ * - full
76
+ * - null&mdash;Does not set a rounded `class`.
77
+ *
78
+ * @default `medium`
79
+ */
80
+ rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
81
+ /**
82
+ * Configures the `fillMode` of the MaskedTextBox.
83
+ *
84
+ * The available options are:
85
+ * - solid
86
+ * - outline
87
+ * - flat
88
+ * - null&mdash;Does not set a fillMode `class`.
89
+ *
90
+ * @default `solid`
91
+ */
92
+ fillMode?: null | 'solid' | 'flat' | 'outline' | string;
56
93
  /**
57
94
  * Sets the `tabIndex` property of the MaskedTextBox.
58
95
  */
@@ -1,5 +1,4 @@
1
- import { DefineComponent } from '../additionalTypes';
2
- import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
1
+ import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
3
2
  import { NumericTextBoxData } from './interfaces/NumericTextBoxData';
4
3
  import { NumericTextBoxProps } from './interfaces/NumericTextBoxProps';
5
4
  declare type DefaultData<V> = object | ((this: V) => NumericTextBoxData);
@@ -71,8 +70,8 @@ export interface NumericTextBoxComputed {
71
70
  /**
72
71
  * @hidden
73
72
  */
74
- export interface NumericTextBoxAll extends Vue, NumericTextBoxMethods, NumericTextBoxComputed, NumericTextBoxState {
73
+ export interface NumericTextBoxAll extends Vue2type, NumericTextBoxMethods, NumericTextBoxComputed, NumericTextBoxState {
75
74
  }
76
- declare let NumericTextBox: ComponentOptions<NumericTextBoxAll, DefaultData<NumericTextBoxData>, DefaultMethods<NumericTextBoxAll>, NumericTextBoxComputed, RecordPropsDefinition<NumericTextBoxProps>>;
77
- declare const NumericTextBoxVue3: DefineComponent<NumericTextBoxProps, any, NumericTextBoxData, NumericTextBoxComputed, NumericTextBoxMethods, {}, {}, {}, string, NumericTextBoxProps, NumericTextBoxProps, {}>;
78
- export { NumericTextBox, NumericTextBoxVue3 };
75
+ declare let NumericTextBoxVue2: ComponentOptions<NumericTextBoxAll, DefaultData<NumericTextBoxData>, DefaultMethods<NumericTextBoxAll>, NumericTextBoxComputed, RecordPropsDefinition<NumericTextBoxProps>>;
76
+ declare const NumericTextBox: DefineComponent<NumericTextBoxProps, any, NumericTextBoxData, NumericTextBoxComputed, NumericTextBoxMethods, {}, {}, {}, string, NumericTextBoxProps, NumericTextBoxProps, {}>;
77
+ export { NumericTextBox, NumericTextBoxVue2 };
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.NumericTextBoxVue3 = exports.NumericTextBox = void 0; // @ts-ignore
6
+ exports.NumericTextBoxVue2 = exports.NumericTextBox = void 0; // @ts-ignore
7
7
 
8
8
  var Vue = require("vue");
9
9
 
@@ -18,6 +18,8 @@ var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
18
18
 
19
19
  var kendo_vue_common_2 = require("@progress/kendo-vue-common");
20
20
 
21
+ var kendo_vue_buttons_1 = require("@progress/kendo-vue-buttons");
22
+
21
23
  var messages_1 = require("./../messages");
22
24
 
23
25
  var utils_1 = require("./utils");
@@ -25,7 +27,7 @@ var utils_1 = require("./utils");
25
27
  var package_metadata_1 = require("../package-metadata");
26
28
 
27
29
  var VALIDATION_MESSAGE = 'Please enter a valid value!';
28
- var NumericTextBox = {
30
+ var NumericTextBoxVue2 = {
29
31
  model: {
30
32
  event: 'changemodel'
31
33
  },
@@ -73,6 +75,27 @@ var NumericTextBox = {
73
75
  type: Boolean,
74
76
  default: undefined
75
77
  },
78
+ size: {
79
+ type: String,
80
+ default: 'medium',
81
+ validator: function validator(value) {
82
+ return [null, 'small', 'medium', 'large'].includes(value);
83
+ }
84
+ },
85
+ rounded: {
86
+ type: String,
87
+ default: 'medium',
88
+ validator: function validator(value) {
89
+ return [null, 'small', 'medium', 'large', 'full'].includes(value);
90
+ }
91
+ },
92
+ fillMode: {
93
+ type: String,
94
+ default: 'solid',
95
+ validator: function validator(value) {
96
+ return [null, 'solid', 'flat', 'outline'].includes(value);
97
+ }
98
+ },
76
99
  required: {
77
100
  type: Boolean,
78
101
  default: false
@@ -168,23 +191,27 @@ var NumericTextBox = {
168
191
  var compValue = this.computedValue;
169
192
  return {
170
193
  'k-floating-label-container': true,
171
- 'k-state-focused': this.$data.focused,
194
+ 'k-focus': this.$data.focused,
172
195
  'k-state-empty': !(compValue === 0 ? true : compValue || this.$props.placeholder),
173
- 'k-state-invalid': !isValid && isValid !== undefined,
196
+ 'k-invalid': !isValid && isValid !== undefined,
174
197
  'k-rtl': this.$props.dir === 'rtl'
175
198
  };
176
199
  }
177
200
  },
178
- wrapperClassNames: {
179
- get: function get() {
180
- var isValid = !this.$props.validityStyles || this.validity().valid;
181
- return {
182
- 'k-numeric-wrap': true,
183
- 'k-state-focused': this.$data.focused,
184
- 'k-state-disabled': this.$props.disabled,
185
- 'k-state-invalid': !isValid || this.$data.isInvalid
186
- };
187
- }
201
+ wrapperClassNames: function wrapperClassNames() {
202
+ var _a;
203
+
204
+ var _b = this.$props,
205
+ size = _b.size,
206
+ fillMode = _b.fillMode,
207
+ rounded = _b.rounded,
208
+ required = _b.required,
209
+ disabled = _b.disabled;
210
+ var isValid = !this.$props.validityStyles || this.validity().valid;
211
+ return _a = {
212
+ 'k-input': true,
213
+ 'k-numerictextbox': true
214
+ }, _a["k-input-" + (kendo_vue_common_1.kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-input-" + fillMode] = fillMode, _a["k-rounded-" + (kendo_vue_common_1.kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded, _a['k-valid'] = isValid, _a['k-invalid'] = !isValid, _a['k-required'] = required, _a['k-disabled'] = disabled, _a;
188
215
  }
189
216
  },
190
217
  methods: {
@@ -280,7 +307,7 @@ var NumericTextBox = {
280
307
  if (newState.valueIsCorrected) {
281
308
  var wrapper = this._elementWrapper;
282
309
 
283
- if (wrapper && wrapper.className.indexOf("k-state-invalid") === -1) {
310
+ if (wrapper && wrapper.className.indexOf("k-invalid") === -1) {
284
311
  this.$data.isInvalid = true;
285
312
  setTimeout(function () {
286
313
  _this.$data.isInvalid = false;
@@ -452,13 +479,9 @@ var NumericTextBox = {
452
479
  dir: this.$props.dir,
453
480
  "aria-disabled": this.$props.disabled ? 'true' : undefined
454
481
  },
455
- "class": 'k-widget k-numerictextbox',
456
- "aria-disabled": this.$props.disabled ? 'true' : undefined
457
- }, [h("span", {
458
482
  "class": this.wrapperClassNames,
459
- ref: this.v3 ? function (el) {
460
- _this.elementWrapperRef = el;
461
- } : 'elementWrapper'
483
+ "aria-disabled": this.$props.disabled ? 'true' : undefined,
484
+ style: this.$attrs.style
462
485
  }, [h("input", {
463
486
  tabIndex: this.$props.tabIndex,
464
487
  attrs: this.v3 ? undefined : {
@@ -487,7 +510,7 @@ var NumericTextBox = {
487
510
  spellCheck: false,
488
511
  autoComplete: "off",
489
512
  autoCorrect: "off",
490
- "class": "k-input k-formatted-value",
513
+ "class": "k-input k-input-inner",
491
514
  id: inputId,
492
515
  value: this.v3 ? this.looseValue : null,
493
516
  domProps: this.v3 ? undefined : {
@@ -513,40 +536,42 @@ var NumericTextBox = {
513
536
  _this.inputRef = el;
514
537
  } : 'input'
515
538
  }), defaultSlot, this.$props.spinners && h("span", {
516
- "class": "k-select",
539
+ "class": "k-input-spinner k-spin-button",
517
540
  onMousedown: this.spinnersWrapperMouseDown,
518
541
  on: this.v3 ? undefined : {
519
542
  "mousedown": this.spinnersWrapperMouseDown
520
543
  }
521
- }, [h("span", {
522
- "class": "k-link k-link-increase",
523
- "aria-label": localizationService.toLanguageString(messages_1.numericIncreaseValue, messages_1.messages[messages_1.numericIncreaseValue]),
544
+ }, [// @ts-ignore
545
+ h(kendo_vue_buttons_1.Button, {
546
+ icon: 'arrow-n',
524
547
  attrs: this.v3 ? undefined : {
548
+ icon: 'arrow-n',
525
549
  "aria-label": localizationService.toLanguageString(messages_1.numericIncreaseValue, messages_1.messages[messages_1.numericIncreaseValue]),
526
550
  title: localizationService.toLanguageString(messages_1.numericIncreaseValue, messages_1.messages[messages_1.numericIncreaseValue])
527
551
  },
552
+ "class": "k-spinner-increase",
553
+ "aria-label": localizationService.toLanguageString(messages_1.numericIncreaseValue, messages_1.messages[messages_1.numericIncreaseValue]),
528
554
  title: localizationService.toLanguageString(messages_1.numericIncreaseValue, messages_1.messages[messages_1.numericIncreaseValue]),
529
555
  onClick: this.increase,
530
556
  on: this.v3 ? undefined : {
531
557
  "click": this.increase
532
558
  }
533
- }, [h("span", {
534
- "class": "k-icon k-i-arrow-n"
535
- })]), h("span", {
536
- "class": "k-link k-link-decrease",
537
- "aria-label": localizationService.toLanguageString(messages_1.numericDecreaseValue, messages_1.messages[messages_1.numericDecreaseValue]),
559
+ }), // @ts-ignore
560
+ h(kendo_vue_buttons_1.Button, {
561
+ "class": "k-spinner-decrease",
562
+ icon: 'arrow-s',
538
563
  attrs: this.v3 ? undefined : {
564
+ icon: 'arrow-s',
539
565
  "aria-label": localizationService.toLanguageString(messages_1.numericDecreaseValue, messages_1.messages[messages_1.numericDecreaseValue]),
540
566
  title: localizationService.toLanguageString(messages_1.numericDecreaseValue, messages_1.messages[messages_1.numericDecreaseValue])
541
567
  },
568
+ "aria-label": localizationService.toLanguageString(messages_1.numericDecreaseValue, messages_1.messages[messages_1.numericDecreaseValue]),
542
569
  title: localizationService.toLanguageString(messages_1.numericDecreaseValue, messages_1.messages[messages_1.numericDecreaseValue]),
543
570
  onClick: this.decrease,
544
571
  on: this.v3 ? undefined : {
545
572
  "click": this.decrease
546
573
  }
547
- }, [h("span", {
548
- "class": "k-icon k-i-arrow-s"
549
- })])])])]);
574
+ })])]);
550
575
  return this.$props.label ? h("span", {
551
576
  "class": this.spanClassNames,
552
577
  onFocusin: this.handleFocus,
@@ -570,6 +595,6 @@ var NumericTextBox = {
570
595
  }, [this.$props.label]) : null]) : numerictextbox;
571
596
  }
572
597
  };
573
- exports.NumericTextBox = NumericTextBox;
574
- var NumericTextBoxVue3 = NumericTextBox;
575
- exports.NumericTextBoxVue3 = NumericTextBoxVue3;
598
+ exports.NumericTextBoxVue2 = NumericTextBoxVue2;
599
+ var NumericTextBox = NumericTextBoxVue2;
600
+ exports.NumericTextBox = NumericTextBox;
@@ -29,6 +29,43 @@ export interface NumericTextBoxProps extends FormComponentProps {
29
29
  * Sets the `tabIndex` property of the NumericTextBox.
30
30
  */
31
31
  tabIndex?: number;
32
+ /**
33
+ * Configures the `size` of the NumericTextBox.
34
+ *
35
+ * The available options are:
36
+ * - small
37
+ * - medium
38
+ * - large
39
+ * - null&mdash;Does not set a size `class`.
40
+ *
41
+ * @default `medium`
42
+ */
43
+ size?: null | 'small' | 'medium' | 'large' | string;
44
+ /**
45
+ * Configures the `roundness` of the NumericTextBox.
46
+ *
47
+ * The available options are:
48
+ * - small
49
+ * - medium
50
+ * - large
51
+ * - full
52
+ * - null&mdash;Does not set a rounded `class`.
53
+ *
54
+ * @default `medium`
55
+ */
56
+ rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
57
+ /**
58
+ * Configures the `fillMode` of the NumericTextBox.
59
+ *
60
+ * The available options are:
61
+ * - solid
62
+ * - outline
63
+ * - flat
64
+ * - null&mdash;Does not set a fillMode `class`.
65
+ *
66
+ * @default `solid`
67
+ */
68
+ fillMode?: null | 'solid' | 'flat' | 'outline' | string;
32
69
  /**
33
70
  * Specifies the `accessKey` of the NumericTextBox.
34
71
  */
@@ -8,7 +8,7 @@ exports.packageMetadata = {
8
8
  name: '@progress/kendo-vue-inputs',
9
9
  productName: 'Kendo UI for Vue',
10
10
  productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
11
- publishDate: 1641561208,
11
+ publishDate: 1642158965,
12
12
  version: '',
13
13
  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'
14
14
  };
@@ -1,5 +1,4 @@
1
- import { DefineComponent } from '../additionalTypes';
2
- import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
1
+ import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
3
2
  declare type DefaultData<V> = object | ((this: V) => {});
4
3
  declare type DefaultMethods<V> = {
5
4
  [key: string]: (this: V, ...args: any[]) => any;
@@ -43,8 +42,8 @@ export interface RadioButtonComputed {
43
42
  /**
44
43
  * @hidden
45
44
  */
46
- export interface RadioButtonAll extends Vue, RadioButtonMethods, RadioButtonComputed, RadioButtonState, RadioButtonData {
45
+ export interface RadioButtonAll extends Vue2type, RadioButtonMethods, RadioButtonComputed, RadioButtonState, RadioButtonData {
47
46
  }
48
- declare let RadioButton: ComponentOptions<RadioButtonAll, DefaultData<RadioButtonData>, DefaultMethods<RadioButtonAll>, RadioButtonComputed, RecordPropsDefinition<RadioButtonProps>>;
49
- declare let RadioButtonVue3: DefineComponent<RadioButtonProps, any, RadioButtonData, RadioButtonComputed, RadioButtonMethods, {}, {}, {}, string, RadioButtonProps, RadioButtonProps, {}>;
50
- export { RadioButton, RadioButtonVue3 };
47
+ declare let RadioButtonVue2: ComponentOptions<RadioButtonAll, DefaultData<RadioButtonData>, DefaultMethods<RadioButtonAll>, RadioButtonComputed, RecordPropsDefinition<RadioButtonProps>>;
48
+ declare let RadioButton: DefineComponent<RadioButtonProps, any, RadioButtonData, RadioButtonComputed, RadioButtonMethods, {}, {}, {}, string, RadioButtonProps, RadioButtonProps, {}>;
49
+ export { RadioButton, RadioButtonVue2 };