Steps to reproduce:

(latest version of vue, vue CLI, node etc. installed globally)

• vue create test-project
• cd test-project
• npm install --save @progress/kendo-ui
• npm install --save @progress/kendo-theme-default
• npm install --save @progress/kendo-dateinputs-vue-wrapper
• added Calendar component to App.vue (see https://www.telerik.com/kendo-vue-ui/getting-started/)
• changed the name "kendo-calendar" in HTML template to "Calendar", otherwise I get build errors
• npm run serve --> browse to localhost:8080 --> error in console:

Uncaught ReferenceError: $ is not defined
    at eval (webpack-internal:///./node_modules/@progress/kendo-ui/js/pdf-viewer/pager.js:85)
    at Object.eval (webpack-internal:///./node_modules/@progress/kendo-ui/js/pdf-viewer/pager.js:292)
    at eval (webpack-internal:///./node_modules/@progress/kendo-ui/js/pdf-viewer/pager.js:74)
    at Object.1472 (webpack-internal:///./node_modules/@progress/kendo-ui/js/pdf-viewer/pager.js:75)
    at __webpack_require__ (webpack-internal:///./node_modules/@progress/kendo-ui/js/pdf-viewer/pager.js:21)
    at Object.0 (webpack-internal:///./node_modules/@progress/kendo-ui/js/pdf-viewer/pager.js:49)
    at __webpack_require__ (webpack-internal:///./node_modules/@progress/kendo-ui/js/pdf-viewer/pager.js:21)
    at eval (webpack-internal:///./node_modules/@progress/kendo-ui/js/pdf-viewer/pager.js:41)
    at eval (webpack-internal:///./node_modules/@progress/kendo-ui/js/pdf-viewer/pager.js:44)
    at Object../node_modules/@progress/kendo-ui/js/pdf-viewer/pager.js (app.js:3624)

I could reproduce the error using different Kendo UI for vue components like Buttons etc. (following the getting-started page for the button component). The default vue project template uses Babel and Webpack. Is there a configuration missing for Kendo UI?

I already checked:

• https://www.telerik.com/kendo-vue-ui/getting-started/
• https://www.telerik.com/support/whats-new/kendo-ui?utm_medium=internal&utm_source=yellowribbon&utm_campaign=kendo-ui-vue-awareness-r22019release#vue-updates-in-r2-2019
• https://www.telerik.com/blogs/what-you-need-to-know-about-vue-cli-3
• https://www.telerik.com/blogs/better-tooling-with-the-new-vue-cli
• https://www.telerik.com/blogs/integrating-vue-cli-3-with-kendo-ui
• https://www.telerik.com/blogs/creating-and-managing-vue-projects-with-vue-ui

Hello Team

Selection/Highlight of the Main Menu is incorrect, when the child item of different submenu is chosen. This is UI/UX glitch and would helpful if resolved

Code Snippet : https://stackblitz.com/edit/nrqsrn?file=src%2Fmain.js

Stackblitz example.

The Spreadsheet options are logged in the console in the mounted function. Note that pdf.proxyURL and excel.proxyURL have no values.

I'm submitting a Bug report

Current behavior

<chart :title-text="'Gross domestic product growth /GDP annual %/'" 
        :legend-position="'bottom'"
        :series-defaults-type="'area'"
        :category-axis-categories="categoryAxisData"
        :category-axis-major-grid-lines-visible="false"
        :category-axis-labels-rotation="'auto'"
        :value-axis-labels-format="'{0}%'"
        :value-axis-line-visible="false"
        :value-axis-axis-crossing-value="-10"
        :tooltip-visible="true"
        :tooltip-format="'{0}%'"
        :tooltip-template="tooltipTemplate"
        :theme="'sass'">
    <chart-series-item :name="'India'"
                        :data="indiaData"
                        :line-style="'smooth'">
    </chart-series-item>
    <chart-series-item :name="'World'"
                        :data="worldData"
                        :line-style="'smooth'">
    </chart-series-item>
    <chart-series-item :name="'Haiti'"
                        :data="haitiData"
                        :line-style="'smooth'">
    </chart-series-item>
</chart>

When using the ChartSeriesItem tags to define the data in the Chart component the following error appears in the console once the Vue project is started.

Expected behavior

<chart-series-item :name="'India'"
                        :data="indiaData"
                        :line-style="'smooth'">
    </chart-series-item>
    <chart-series-item :name="'World'"
                        :data="worldData"
                        :line-style="'smooth'">
    </chart-series-item>
    <chart-series-item :name="'Haiti'"
                        :data="haitiData"
                        :line-style="'smooth'">
    </chart-series-item>

Using a definition like the above, we should be able to define Chart's data with no issues.

Minimal reproduction of the problem with instructions

1. Open this project
2. In the console run "npm install"
3. In the console run "npm run serve"
4. Open the URL of the project and see the browser's console

Describe the bug

<multiselect
        :data-items="values"
        :value="values"
      ></multiselect>
...
data() {
    return {
      values: [2,3],
    };

select and item
error:

At TagList.js:81
Uncaught (in promise) TypeError: tagData.text.replace is not a function
at Proxy.eval (TagList.js:81:48)
at Array.map ()
at Proxy.render (TagList.js:75:19)
at renderComponentRoot (runtime-core.esm-bundler.js:623:44)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:4372:57)
at ReactiveEffect.run (reactivity.esm-bundler.js:195:29)
at setupRenderEffect (runtime-core.esm-bundler.js:4498:9)
at mountComponent (runtime-core.esm-bundler.js:4281:9)
at processComponent (runtime-core.esm-bundler.js:4239:17)
at patch (runtime-core.esm-bundler.js:3843:21)

Describe the bug
When using a slot to define the columns in the Wrapper Grid, the result in Vue 2 and Vue 3 is different.

• In Vue 2, if we pass 2 columns to the slot, only these two columns are rendered in the component.
• In Vue 3, no matter how many columns we pass to the slot, the component renders all columns, based on the data in the datasource

To Reproduce
Check the two examples below:

• Vue 2 - https://codesandbox.io/s/jovial-hamilton-k6hfl7?file=/src/App.vue
• Vue 3 - https://codesandbox.io/s/empty-smoke-cnyz0t?file=/src/App.vue

The two examples use the same implementation but the number of columns rendered in each Grid is different

Expected behavior
The two examples should work the same way as in the Vue 2 application.

Screenshots
Vue 2:

Vue 3:

Describe the bug
The @progress/kendo-licensing is missing as peer to data-tools package

The following packages should be added as peer dependencies to the @progress/kendo-vue-data-tools package:

• "@progress/kendo-svg-icons"
• "@progress/kendo-vue-popup"
• "@progress/kendo-vue-animation"

Type in the Currency field in the example page here https://www.telerik.com/kendo-vue-ui/components/inputs/numerictextbox/formats/

After typing in the third digit, caret position moves to the 2nd digit instead of the first or last digit.

Typing in more digits causes the caret to move a position up occasionally.

Caret needs to be consistent on its positioning, either staying in the far left, or to the right before the decimal.

Preferably, this should be a prop to configure.

Also, tabbing out of the field when there are more than 2 decimal places will not format on leave.

The Kendo UI for Vue Scheduler Wrapper doesn't support year view which is available in the jQuery suite.

To reproduce the issue follow the below steps:

1. Open this StackBlitz example
2. From the DropDownList in the upper right corner select "Year"
3. Check the console. The following error appears in it:
   

Expected behavior
The "Year" view should be available in the Kendo UI for Vue Scheduler Wrapper

hhttps://stackblitz.com/edit/kgeavu?file=src/main.vue

the console.log is observed even when selecting other tabs.

The Native NumericTextBox doesn't have the 'k-state-focused' class applied to it, once the component is focused. 

For comparison, the Angular and React versions of the same component get this class applied.

React: https://www.telerik.com/kendo-react-ui/components/inputs/numerictextbox/ 

Angular: https://www.telerik.com/kendo-angular-ui/components/inputs/numerictextbox/ 

Bug report:
https://stackblitz.com/edit/bbuqh1?file=src/main.vue

Steps:
Focus the input, type some text and blur -

Current:
an warning is observed in the console and the types string is passed to the change event.

Expected:
an warning is observed in the console and the types string SHOULD NOT BE passed to the change event.

https://stackblitz.com/edit/gv4uwk?file=src/main.vue

Focus the initial input then press tab
the stepper is focused yet it does not change visually so we know it

expected:
There is a visual initial representation of the focused component

Describe the bug

When the Localization and Intl Providers are used in Vue 2 with Composition API, there is an error in the browser's console that appears initially, before any user interaction. The error is "[Vue warn]: Error in data(): "TypeError: ref is not a function"". After this error appears, no matter what values are passed to both the Localization and Intl components, the are not functioning.

To Reproduce

1. Open this CodeSandbox example
2. Open the browser's console and see the error.

Expected behavior
The Localization and Intl Providers should work correctly in both options and composition API contexts

Screenshots

Describe the bug
There is an incorrect export inside the @progress/kendo-vue-inputs package on line 39 in the @progress/kendo-vue-inputs/dist/esm/main.js file

This import fails because this file does not exist. When we change the above line to:
export * from './signature/interfaces/index.js'; everything works as expected.

A similar issue is found in the following file: @progress/kendo-vue-inputs/dist/esm/signature/Signature.js on line 145

The above should be changed to:
import { hasParent } from './utils/index.js';

Expected behavior
The described above exports should point to existing files

New Native Vue DropDownTree Component

Kendo Splitter component `change` event is triggered from child components e.g. Input/Grid. I have multiple splitters defined, but only parent splitter has `onChange` event listener defined. When changing the text from child containing Kendo Input component which has no change event defined (doesn't really matter if it is), the event is propagated to Splitters `onChange` event and crashes Splitter pane handling. Added `onChange` listener to other Splitters as-well, they all are triggered. Clicking on Grid component checkboxes (is child to Splitter) to select the row will also trigger Splitters `onChange` event. Current workaround is to defined Splitters `@change` event as `@change.self` then the children's `change` events wont trigger it.

When providing the input prop ariaLabelledBy, the resulting rendered element has an attribute of arialabelledby instead of aria-labelledby.

That is, this code:

<span id="my-input-label">My Input Label</span>
<Input aria-labelled-by="my-input-label" />

results in this HTML:

<span data-v-0b8cedaa="" id="my-input-label">My Input Label</span>
<span data-v-0b8cedaa="" class="k-textbox k-input k-input-md k-input-solid k-rounded-md k-required">
  <input id="58c2f77d-91e5-444a-a948-90f4abb960e5" required="" arialabelledby="subject-label" class="k-input-inner">
</span>

But the input's HTML should instead look like:

<input id="58c2f77d-91e5-444a-a948-90f4abb960e5" required="" aria-labelledby="subject-label" class="k-input-inner">