New Native Vue DropDownTree Component

Hello,

The GridLayout component is available in other Kendo UI suites like KendoReact for example but is still not provided for Vue. Can you add the GridLayout component to the Kendo UI for Vue Native suite?

Hello,

The StackLayout component is available in other Kendo UI suites like KendoReact for example but is still not provided for Vue. Can you add the StackLayout component to the Kendo UI for Vue Native suite?

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

@open and @close events are not triggered by integration testing tool, even when programmatically calling the event.

We are using cypress 11.1.0

cypress-real-events: 1.7.4 was also used to try of trigger the events but didn't work.

The way we tried this was:

cy.get(element).trigger(‘mouseover’)
cy.get(element).realHover()
cy.get(element).trigger(‘mouseover’)
cy.get(element).trigger(‘mouseenter’)
cy.get(element).then(el => {
    el.dispatchEvent(new MouseEvent(‘mouseenter’, { bubbles:true })
}

Describe the bug
A licensing warning may continue to appear in the browser's console, no matter whether the licensing activation has been successful or not.

The issue is replicable when the user trying to activate a license has had an active license in the past and this license is already expired.

To Reproduce
Because of the specifics of the issue, a project in which the bug can be replicated won't be publicly provided.

Expected behavior
The license activation process should activate one's license no matter the previous licensing history of the user

Hi, team. 

The File Manager component is currently not available in the Kendo UI for Vue suite. Having the component available in Kendo UI for Vue will be a big improvement for the suite. 

Describe the bug
The rowReorder event is missing in the Wrapper Grid component, while it is available in the Kendo UI for jQuery Grid. Currently, the only way the event can be used is by using a code like the below in the mounted hook of the Vue app:

    var grid = this.$refs.grid.kendoWidget();
    grid.bind('rowReorder', function (e) {
      console.log('row', e);
    });

Expected behavior
The rowReorder event should be available for usage as the other events of the Wrapper Grid

Vue Version: 3.2.37

@progress/kendo-vue-layout version: 3.5.1

When using TabStrip in Vue 3 with the Composition API and `<script setup>`, there cannot be anything inside of the TabStrip other than visible markup. If there is an HTMLnode that's a comment, or is hidden using a `v-if,`, then that part of the page will not render and throw an error.

This is the error received:
"`Uncaught (in promise) TypeError: children.forEach is not a function`" quoting a utils.js file line 4.

If my TabStripTabs have a v-if on them to not show if data isn't available for them, then the whole section of the page isn't useable.

Describe the bug
By default, the Dialog component is a modal window. This means that once the Dialog appears, the page elements are the only ones the users can interact with.

Currently, if you use the keyboard navigation functionality of the Dialog, after pressing the Tab key multiple time, the focus will be on the "Open dialog" button below the modal. This should not happen.

To Reproduce

1. Open this StackBlitz example
2. Click on the "Open in new window" button to open the example in a separate window/tab
3. In the new window, click on the "Open dialog" button
4. Once the Dialog is opened, press the Tab button 8 times and press Enter
5. The Dialog will be closed because, after the 8th Enter press, the focus will be again on the "Open dialog" button below the modal area.

Expected behavior
When using the keyboard navigation of the Dialog component, the focus shouldn't be transferred to the elements below the modal area. It should be kept among the elements that are displayed in the Dialog.

When entering a number with decimals in a Native NumericTextBox with a format it rounds up the number if you enter more decimals than the format allows. In this Stackblitz project you can see this behavior.

In the Wrapper NumericTextBox it is possible to add a round property with the value false which prevents the rounding of decimal numbers. Instead of rounding it truncates the number. By my knowledge and what I can find in the Vue documentation this property isn't available in the Native NumericTextBox.

Proposed solution
Add round property with related logic to the native component.

Steps to reproduce

1. Copy and paste the value 12.345
2. See that the value in the input becomes 12.35
3. See that :round="false" does nothing.

Describe the bug
When working with the Wrapper DropDownList, if the component uses the v-model directive, there are some white spaces appearing in the popup of the component.

If the component doesn't use the v-model, the described behavior is not replicable.

To Reproduce

1. Open this StackBlitz example.
2. Select "Fish"
3. Select "Pizza"
4. Repeat steps 2 and 3 multiple times
5. See the white space in the popup

Expected behavior
No white space should appear in the popup of the DropDownList component.

Screenshots

The DatePicker, DateTimePicker, TimePicker, and DateRangePicker components don't provide open and close events that are triggered when the popup of a component is opened/closed. 

We have a window hidden with v show and a DatePicker in it.
When we open the DatePicker and try to hide the Window the popup of the DatePicker stays opened

example and steps in ticket - 1562574

workaround - delay the hiding of the Window with 200 ms to ahve a default hiding of the popup executed:

const toggleDialog = (e) => {
e.preventDefault();
setTimeout(() => {
if (visible.value) {
showPopup.value = false;
}
visible.value = !visible.value;
}, 200);
};

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
When binding the Scheduler Wrapper component to a remote datasource, there are two requests sent to the remote service.

To Reproduce

1. Open this StackBlitz example and run it.
2. Open the Network tab of your browser and see the requests

Expected behavior
Only one request should be sent to the remote service

Screenshots

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

Can you add the Badge component to the Kendo UI for Vue suite?

The Badge is available in the Angular and React suites but is not available for Vue.