chore: update multiple Vue examples (#271)

* chore: update Coffee warehouse demo * chore: update getting started app * chore: add eslint config file to Typescript+Composition API demo * chore: update Nuxt 2 example * chore: update Vite demo * chore: update Vue 2 Grid performance demo * chore: update Vue 2 Grid performance demo * chore: update Vue 3 Grid performence demo * chore: update Vue 3 Grid performence demo * chore: update getting started with composition API * chore: update eslint file in getting started with composition API * chore: update getting started and getting started + typescript apps * chore: update asp.net core demo * chore: udpate all package.json files. Update Typescript projects * chore: remove not needed archive * chore: update package.json of the ASP.Core project Co-authored-by: Petar Todorov <petar.todorov@progre>
2022-08-09 15:49:16 +03:00 · 2022-08-09 15:49:16 +03:00 · d456d18c27
--- a/examples-standalone/coffee-warehouse/package-lock.json
+++ b/examples-standalone/coffee-warehouse/package-lock.json
--- a/examples-standalone/coffee-warehouse/package.json
+++ b/examples-standalone/coffee-warehouse/package.json
@ -8,33 +8,35 @@
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
-    "@progress/kendo-data-query": "1.5.5",
-    "@progress/kendo-drawing": "1.15.0",
-    "@progress/kendo-licensing": "1.2.1",
-    "@progress/kendo-vue-animation": "^2.6.3",
-    "@progress/kendo-vue-buttons": "^2.6.3",
-    "@progress/kendo-vue-charts": "^2.6.3",
-    "@progress/kendo-vue-data-tools": "^2.6.3",
-    "@progress/kendo-vue-dateinputs": "^2.6.3",
-    "@progress/kendo-vue-dropdowns": "^2.6.3",
-    "@progress/kendo-vue-excel-export": "^2.6.3",
-    "@progress/kendo-vue-form": "^2.6.3",
-    "@progress/kendo-vue-grid": "^2.6.3",
-    "@progress/kendo-vue-inputs": "^2.6.3",
-    "@progress/kendo-vue-intl": "^2.6.3",
-    "@progress/kendo-vue-layout": "^2.6.3",
-    "@progress/kendo-vue-pdf": "^2.6.3",
-    "@progress/kendo-vue-popup": "^2.6.3",
-    "@progress/kendo-vue-upload": "^2.6.3",
-    "@progress/kendo-theme-bootstrap": "^4.42.0",
-    "@progress/kendo-theme-default": "^4.42.0",
-    "@progress/kendo-theme-material": "^4.42.0",
+    "@progress/kendo-data-query": "1.6.0",
+    "@progress/kendo-drawing": "^1.16.3",
+    "@progress/kendo-licensing": "1.2.2",
+    "@progress/kendo-theme-bootstrap": "^5.6.0",
+    "@progress/kendo-theme-default": "^5.6.0",
+    "@progress/kendo-theme-material": "^5.6.0",
+    "@progress/kendo-vue-animation": "^3.5.0",
+    "@progress/kendo-vue-buttons": "^3.5.0",
+    "@progress/kendo-vue-charts": "^3.5.0",
+    "@progress/kendo-vue-data-tools": "^3.5.0",
+    "@progress/kendo-vue-dateinputs": "^3.5.0",
+    "@progress/kendo-vue-dropdowns": "^3.5.0",
+    "@progress/kendo-vue-excel-export": "^3.5.0",
+    "@progress/kendo-vue-form": "^3.5.0",
+    "@progress/kendo-vue-grid": "^3.5.0",
+    "@progress/kendo-vue-indicators": "^3.5.0",
+    "@progress/kendo-vue-inputs": "^3.5.0",
+    "@progress/kendo-vue-intl": "^3.5.0",
+    "@progress/kendo-vue-layout": "^3.5.0",
+    "@progress/kendo-vue-pdf": "^3.5.0",
+    "@progress/kendo-vue-popup": "^3.5.0",
+    "@progress/kendo-vue-progressbars": "^3.5.0",
+    "@progress/kendo-vue-upload": "^3.5.0",
    "cldr-core": "^40.0.0",
    "cldr-dates-full": "^40.0.0",
    "cldr-numbers-full": "^40.0.0",
    "core-js": "3.19.0",
    "hammerjs": "2.0.8",
-    "vue": "3.2.20",
+    "vue": "^3.2.20",
    "vue-router": "^4.0.0"
  },
  "devDependencies": {
--- a/examples-standalone/coffee-warehouse/public/static/themes/kendo-theme-bootstrap/all.css
+++ b/examples-standalone/coffee-warehouse/public/static/themes/kendo-theme-bootstrap/all.css
--- a/examples-standalone/coffee-warehouse/public/static/themes/kendo-theme-default/all.css
+++ b/examples-standalone/coffee-warehouse/public/static/themes/kendo-theme-default/all.css
--- a/examples-standalone/coffee-warehouse/public/static/themes/kendo-theme-material/all.css
+++ b/examples-standalone/coffee-warehouse/public/static/themes/kendo-theme-material/all.css
--- a/examples-standalone/coffee-warehouse/src/components/Header.vue
+++ b/examples-standalone/coffee-warehouse/src/components/Header.vue
@ -6,35 +6,20 @@
        <span class="vl"></span>
        <h2>{{ teamMessage }}</h2>
      </div>
-      <dropdownlist
-        class="localeDropDownList"
-        :value="currentLocale"
-        :text-field="'language'"
-        @change="localeChange"
-        :data-items="locales"
-      >
-      </dropdownlist>
-      <dropdownlist
-        :data-items="themes"
-        :text-field="'text'"
-        :popup-settings="themesPopupSettings"
-        :value-render="myDropDownValueTemplate"
-        class="ddl-theme"
-        @change="onThemeChange"
-      >
+      <DropDownList :style="{ width: '230px' }" class="localeDropDownList" :value="currentLocale"
+        :text-field="'language'" @change="localeChange" :data-items="locales">
+      </DropDownList>
+      <DropDownList :data-items="themes" :text-field="'text'" :popup-settings="themesPopupSettings"
+        :value-render="myDropDownValueTemplate" class="ddl-theme" @change="onThemeChange">
        <template v-slot:myDropDownValueTemplate="{}">
          <div style="margin: auto 8px auto 10px">
            <span class="k-icon k-i-palette"> </span>
          </div>
        </template>
-      </dropdownlist>
-      <avatar
-        :shape="'circle'"
-        :type="'image'"
-        :style="{ width: '40px', height: '40px', 'flex-basis': '40px' }"
-      >
+      </DropDownList>
+      <Avatar :rounded="'full'" :type="'image'" :style="{ width: '40px', height: '40px', 'flex-basis': '40px' }">
        <img src="../assets/images/user.jpg" />
-      </avatar>
+      </Avatar>
    </div>
  </div>
 </template>
@ -45,8 +30,8 @@ import { provideLocalizationService } from "@progress/kendo-vue-intl";

 export default {
  components: {
-    avatar: Avatar,
-    dropdownlist: DropDownList,
+    Avatar,
+    DropDownList,
  },
  emits: {
    localeChange: null,
@ -128,12 +113,15 @@ export default {
 <style scoped>
 .ddl-theme {
  width: 60px;
-}
-.localeDropDownList {
-  min-width: 100px;
+  min-width: 60px;
 }

-.k-widget.k-dropdown {
+.localeDropDownList {
+  min-width: 100px;
+  margin: 10px;
+}
+
+.k-dropdownlist {
  min-height: 30px;
 }
 </style>
--- a/examples-standalone/coffee-warehouse/src/components/ProfileComponents/FormContent.vue
+++ b/examples-standalone/coffee-warehouse/src/components/ProfileComponents/FormContent.vue
@ -128,21 +128,22 @@
    </fieldset>
    <hr />
    <div class="k-form-buttons">
-      <button type="button" class="k-button" @click="clear">
+      <KButton @click="clear">
        {{ cancelMessage }}
-      </button>
-      <button
+      </KButton>
+      <KButton
        type="submit"
-        class="k-button k-primary"
+        :theme-color="'primary'"
        :disabled="!kendoForm.allowSubmit"
      >
        {{ saveChangesMessage }}
-      </button>
+      </KButton>
    </div>
  </form-element>
 </template>
 <script>
 import { Field, FormElement } from "@progress/kendo-vue-form";
+import { Button } from "@progress/kendo-vue-buttons";
 import FormInput from "./FormInput.vue";
 import FormMaskedTextBox from "./FormMaskedTextBox.vue";
 import FormAutoComplete from "./FormAutoComplete.vue";
@ -169,6 +170,7 @@ export default {
    formtextarea: FormTextArea,
    formradiogroup: FormRadioGroup,
    formupload: FormUpload,
+    KButton:Button
  },
  inject: {
    kendoForm: { default: {} },
--- a/examples-standalone/coffee-warehouse/src/components/ProfileComponents/FormTextArea.vue
+++ b/examples-standalone/coffee-warehouse/src/components/ProfileComponents/FormTextArea.vue
@ -5,16 +5,15 @@
        </klabel>
        <div class="k-form-field-wrap">
        <span class="k-textarea">
-            <textarea 
-                class="k-input"
-                style="margin-top: 0px; margin-bottom: 0px; height: 120px;"
+            <KTextArea 
+                style="height: 120px;"
                :valid="valid"
                :value="value"
                :id="id"
                @change="handleChange"
                @blur="handleBlur"
                @focus="handleFocus"
-            ></textarea>
+            ></KTextArea>
          </span>
            <error v-if="showValidationMessage">
                {{validationMessage}}
@ -25,6 +24,7 @@
 </template>
 <script>
 import { FieldWrapper } from "@progress/kendo-vue-form";
+import { TextArea } from "@progress/kendo-vue-inputs";
 import { Error, Hint, Label } from "@progress/kendo-vue-labels";
 export default {
    props: {
@ -44,6 +44,7 @@ export default {
        error: Error,
        hint: Hint,
        klabel: Label,
+        KTextArea: TextArea
    },
    emits: {
        change: null,
--- a/examples-standalone/coffee-warehouse/src/components/ProfileComponents/FormUpload.vue
+++ b/examples-standalone/coffee-warehouse/src/components/ProfileComponents/FormUpload.vue
@ -1,34 +1,17 @@
 <template>
  <fieldwrapper>
    <klabel :editor-id="id" :editor-valid="valid">
-      <avatar
-        :shape="'circle'"
-        :type="'image'"
-        :size="'large'"
-        :style="{ width: '80px', height: '80px', 'flex-basis': '80px' }"
-      >
+      <avatar :rounded="'full'" :type="'image'" :size="'large'"
+        :style="{ width: '80px', height: '80px', 'flex-basis': '80px' }">
        <img src="../../assets/images/user.jpg" />
      </avatar>
    </klabel>
    <div class="k-form-field-wrap">
      <span>
-        <upload
-          :valid="valid"
-          :value="value"
-          :id="id"
-          :auto-upload="false"
-          :multiple="false"
-          :show-file-list="false"
-          :show-action-buttons="false"
-          :files="value"
-          :restrictions="{
+        <upload :valid="valid" :value="value" :id="id" :auto-upload="false" :multiple="false" :show-file-list="false"
+          :show-action-buttons="false" :files="value" :restrictions="{
            allowedExtensions: ['.jpg', '.png'],
-          }"
-          @blur="handleBlur"
-          @focus="handleFocus"
-          @add="onAddHandler"
-          @remove="onRemoveHandler"
-        />
+          }" @blur="handleBlur" @focus="handleFocus" @add="onAddHandler" @remove="onRemoveHandler" />
      </span>
      <error v-if="showValidationMessage">
        {{ validationMessage }}
--- a/examples-standalone/coffee-warehouse/src/components/Team.vue
+++ b/examples-standalone/coffee-warehouse/src/components/Team.vue
@ -3,20 +3,20 @@
    <div class="card-header-wrapper">
      <h3 class="card-title">{{ teamMembersMessage }}</h3>
      <buttongroup>
-        <k-button
+        <KButton
          :togglable="true"
          @click="onTeamChange(25)"
          :selected="myTeamSelected"
        >
          {{ myTeamMessage }}
-        </k-button>
-        <k-button
+        </KButton>
+        <KButton
          :togglable="true"
          @click="onTeamChange(100)"
          :selected="!myTeamSelected"
        >
          {{ allTeamsMessage }}
-        </k-button>
+        </KButton>
      </buttongroup>
      <span></span>
    </div>
@ -45,25 +45,34 @@
        @datastatechange="dataStateChange"
        @expandchange="expandChange"
      >
-        <toolbar>
+       <toolbar>
          <span class="k-textbox k-grid-search k-display-flex">
-            <k-input
+            <k-input :style="{ width: '230px' }"
              :placeholder="gridSearchMessage"
              :value="searchWord"
              @input="onFilter"
            ></k-input>
          </span>
          <span class="export-buttons">
-            <button
+             <dropdownlist
+          :style="{ width: '230px' }"
+              class="localeDropDownList"
+              :value="currentLocale"
+              :text-field="'language'"
+              @change="localeChange"
+              :data-items="locales"
+            >
+            </dropdownlist>
+            <KButton
              title="Export to Excel"
-              class="k-button k-primary"
+              :theme-color="'primary'"
              @click="exportExcel"
            >
-              {{ exportExcelMessage }}</button
+              {{ exportExcelMessage }}</KButton
            >&nbsp;
-            <button class="k-button k-primary" @click="exportPDF">
+            <KButton :theme-color="'primary'" @click="exportPDF">
              {{ exportPdfMessage }}
-            </button>
+            </KButton>
          </span>
        </toolbar>
        <template v-slot:contactTemplate="{ props }">
@ -140,7 +149,7 @@ export default {
    flag: Flag,
    contact: ContactName,
    "k-input": Input,
-    "k-button": Button,
+    KButton: Button,
    buttongroup: ButtonGroup,
  },
  inject: {
--- a/examples-standalone/coffee-warehouse/src/components/myCommandCell.vue
+++ b/examples-standalone/coffee-warehouse/src/components/myCommandCell.vue
@ -1,66 +0,0 @@
-<template>
-    <td v-if="!dataItem['inEdit']" class="k-command-cell">
-        <button
-            class="k-primary k-button k-grid-edit-command"
-            @click="editHandler">
-            Edit
-        </button>
-
-        <button
-            class="k-button k-grid-remove-command"
-            @click="removeHandler">
-            Remove
-        </button>
-    </td>
-    <td v-else class="k-command-cell">
-            <button
-                class="k-button k-grid-save-command"
-                @click="addUpdateHandler">
-                {{dataItem.ProductID? 'Update' : 'Add'}}
-            </button>
-
-            <button
-                class="k-button k-grid-cancel-command"
-                @click="cancelDiscardHandler">
-                {{dataItem.ProductID? 'Cancel' : 'Discard'}}
-            </button>
-        </td>
-</template>
-<script>
-
-export default {
-     props: {
-        field: String,
-        dataItem: Object,
-        format: String,
-        className: String,
-        columnIndex: Number,
-        columnsCount: Number,
-        rowType: String,
-        level: Number,
-        expanded: Boolean,
-        editor: String
-    },
-    setup(props, { emit }){
-        const editHandler = () => {
-            emit('edit', { dataItem: props.dataItem});
-        };
-        const removeHandler = () => {
-            emit('remove', { dataItem: props.dataItem});
-        };
-        const addUpdateHandler = () => {
-            emit('save', { dataItem: props.dataItem});
-        };
-        const cancelDiscardHandler = () => {
-            emit('cancel', { dataItem: props.dataItem});
-        };
-
-        return {
-            editHandler,
-            removeHandler,
-            addUpdateHandler,
-            cancelDiscardHandler
-        };
-    }
-}
-</script>
--- a/getting-started-app-typescript/package.json
+++ b/getting-started-app-typescript/package.json
@ -8,17 +8,18 @@
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
-    "@progress/kendo-data-query": "^1.5.5",
-    "@progress/kendo-drawing": "^1.16.2",
-    "@progress/kendo-licensing": "^1.2.2",
-    "@progress/kendo-theme-default": "^5.1.1",
-    "@progress/kendo-vue-data-tools": "^3.0.5",
-    "@progress/kendo-vue-dateinputs": "^3.0.5",
-    "@progress/kendo-vue-dialogs": "^3.0.5",
-    "@progress/kendo-vue-dropdowns": "^3.0.5",
-    "@progress/kendo-vue-grid": "^3.0.5",
-    "@progress/kendo-vue-inputs": "^3.0.5",
-    "@progress/kendo-vue-intl": "^3.0.5",
+    "@progress/kendo-data-query": "latest",
+    "@progress/kendo-drawing": "latest",
+    "@progress/kendo-licensing": "latest",
+    "@progress/kendo-theme-default": "latest",
+    "@progress/kendo-vue-data-tools": "latest",
+    "@progress/kendo-vue-dateinputs": "latest",
+    "@progress/kendo-vue-dialogs": "latest",
+    "@progress/kendo-vue-dropdowns": "latest",
+    "@progress/kendo-vue-grid": "latest",
+    "@progress/kendo-vue-indicators": "latest",
+    "@progress/kendo-vue-inputs": "latest",
+    "@progress/kendo-vue-intl": "latest",
    "core-js": "^3.6.5",
    "vue": "^3.0.0"
  },
--- a/getting-started-app/package.json
+++ b/getting-started-app/package.json
@ -8,17 +8,19 @@
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
-    "@progress/kendo-data-query": "^1.5.4",
-    "@progress/kendo-drawing": "^1.9.3",
-    "@progress/kendo-theme-default": "^4.27.0",
-    "@progress/kendo-vue-animation": "^1.2.0",
-    "@progress/kendo-vue-data-tools": "^1.2.0",
-    "@progress/kendo-vue-dateinputs": "^1.2.0",
-    "@progress/kendo-vue-dialogs": "^1.2.0",
-    "@progress/kendo-vue-dropdowns": "^1.2.0",
-    "@progress/kendo-vue-grid": "^1.2.0",
-    "@progress/kendo-vue-inputs": "^1.2.0",
-    "@progress/kendo-vue-intl": "^1.2.0",
+    "@progress/kendo-data-query": "latest",
+    "@progress/kendo-drawing": "latest",
+    "@progress/kendo-licensing": "latest",
+    "@progress/kendo-theme-default": "latest",
+    "@progress/kendo-vue-animation": "latest",
+    "@progress/kendo-vue-data-tools": "latest",
+    "@progress/kendo-vue-dateinputs": "latest",
+    "@progress/kendo-vue-dialogs": "latest",
+    "@progress/kendo-vue-dropdowns": "latest",
+    "@progress/kendo-vue-grid": "latest",
+    "@progress/kendo-vue-indicators": "latest",
+    "@progress/kendo-vue-inputs": "latest",
+    "@progress/kendo-vue-intl": "latest",
    "core-js": "^3.6.5",
    "vue": "^3.0.0"
  },
--- a/getting-started-typescript-composition-api/.eslintrc.js
+++ b/getting-started-typescript-composition-api/.eslintrc.js
@ -0,0 +1,28 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es6": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:vue/essential",
+        "plugin:@typescript-eslint/eslint-recommended"
+    ],
+    "globals": {
+        "Atomics": "readonly",
+        "SharedArrayBuffer": "readonly"
+    },
+    "parserOptions": {
+        "ecmaVersion": 2018,
+        "parser": "@typescript-eslint/parser",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "vue",
+        "@typescript-eslint"
+    ],
+    "rules": {
+        "semi": "off",
+        "@typescript-eslint/semi": ["error"]
+    },
+};
--- a/getting-started-typescript-composition-api/package.json
+++ b/getting-started-typescript-composition-api/package.json
@ -8,33 +8,34 @@
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
-    "@progress/kendo-data-query": "^1.5.5",
-    "@progress/kendo-drawing": "^1.16.2",
-    "@progress/kendo-licensing": "^1.2.2",
+    "@progress/kendo-data-query": "latest",
+    "@progress/kendo-drawing": "latest",
+    "@progress/kendo-licensing": "latest",
    "@progress/kendo-theme-default": "^5.1.1",
-    "@progress/kendo-vue-data-tools": "^3.0.5",
-    "@progress/kendo-vue-dateinputs": "^3.0.5",
-    "@progress/kendo-vue-dialogs": "^3.0.5",
-    "@progress/kendo-vue-dropdowns": "^3.0.5",
-    "@progress/kendo-vue-grid": "^3.0.5",
-    "@progress/kendo-vue-inputs": "^3.0.5",
-    "@progress/kendo-vue-intl": "^3.0.5",
+    "@progress/kendo-vue-data-tools": "latest",
+    "@progress/kendo-vue-dateinputs": "latest",
+    "@progress/kendo-vue-dialogs": "latest",
+    "@progress/kendo-vue-dropdowns": "latest",
+    "@progress/kendo-vue-grid": "latest",
+    "@progress/kendo-vue-indicators": "latest",
+    "@progress/kendo-vue-inputs": "latest",
+    "@progress/kendo-vue-intl": "latest",
    "core-js": "^3.6.5",
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-babel": "^4.5.0",
+    "@vue/cli-plugin-eslint": "^4.5.0",
    "@vue/cli-plugin-typescript": "^4.5.15",
-    "@vue/cli-service": "~4.5.0",
+    "@vue/cli-service": "^4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0",
-    "typescript": "~4.1.5"
+    "typescript": "^4.1.5"
  },
  "eslintConfig": {
    "root": true,
--- a/getting-started-typescript-composition-api/src/App.vue
+++ b/getting-started-typescript-composition-api/src/App.vue
@ -2,29 +2,14 @@
  <div id="app">
    <h1>Hello Kendo UI for Vue!</h1>
    <p>
-      <dropdownlist
-        :data-items="categories"
-        :data-item-key="'CategoryID'"
-        :text-field="'CategoryName'"
-        :default-item="defaultItems"
-        @change="handleDropDownChange"
-        @rowclick="rowClick"
-      ></dropdownlist>&nbsp; Selected category ID:
+      <dropdownlist :data-items="categories" :data-item-key="'CategoryID'" :text-field="'CategoryName'"
+        :default-item="defaultItems" @change="handleDropDownChange" @rowclick="rowClick"></dropdownlist>&nbsp; Selected
+      category ID:
      <strong>{{ dropdownlistCategory }}</strong>
    </p>

-    <grid
-      :data-items="dataResult"
-      :pageable="pageable"
-      :sortable="sortable"
-      :sort="sort"
-      :take="take"
-      :skip="skip"
-      :columns="columns"
-      @datastatechange="dataStateChange"
-      @rowclick="rowClick"
-      :style="{ height: '400px' }"
-    >
+    <grid :data-items="dataResult" :pageable="pageable" :sortable="sortable" :sort="sort" :take="take" :skip="skip"
+      :columns="columns" @datastatechange="dataStateChange" @rowclick="rowClick" :style="{ height: '400px' }">
      <template v-slot:discontinuedTemplate="{ props }">
        <td :colspan="1">
          <input type="checkbox" :checked="props.dataItem.Discontinued" disabled="disabled" />
@ -82,7 +67,7 @@ export default defineComponent({
      { field: "ProductName", dir: "asc" }
    ]);

-    const filter = ref<CompositeFilterDescriptor>({logic: "and", filters: []});
+    const filter = ref<CompositeFilterDescriptor>({ logic: "and", filters: [] });


    const columns = [
@ -102,12 +87,12 @@ export default defineComponent({
        filter.value = {
          logic: 'and',
          filters: [{ field: 'CategoryID', operator: 'eq', value: e.target.value.CategoryID }]
-        }
-        skip.value = 0
+        };
+        skip.value = 0;
      } else {
-        filter.value = {} as CompositeFilterDescriptor
-        skip.value = 0
-      };
+        filter.value = {} as CompositeFilterDescriptor;
+        skip.value = 0;
+      }

      const event: GridDataStateChangeEvent = {
        data: {
@ -117,6 +102,7 @@ export default defineComponent({
          filter: filter.value
        }
      };
+
      dataStateChange(event);
    };

@ -151,17 +137,17 @@ export default defineComponent({

    const closeWindow = () => {
      windowVisible.value = false;
-    }
+    };

    return {
      dropdownlistCategory, categories, defaultItems,
      pageable, sortable, dataResult, columns,
      sort, take, skip, gridClickedRow, windowVisible,
      dataStateChange, handleDropDownChange, rowClick, closeWindow,
-    }
+    };
  }

-})
+});
 </script>

 <style>
@ -173,6 +159,7 @@ export default defineComponent({
  color: #2c3e50;
  margin-top: 60px;
 }
+
 dt {
  font-weight: bold;
 }
--- a/getting-started-typescript-composition-api/src/appdata/categories.ts
+++ b/getting-started-typescript-composition-api/src/appdata/categories.ts
@ -9,4 +9,4 @@ const categories = [
  { "CategoryID": 8, "CategoryName": "Seafood" }
 ];

-export { categories as categoriesData }
+export { categories as categoriesData };
--- a/getting-started-typescript-composition-api/src/main.ts
+++ b/getting-started-typescript-composition-api/src/main.ts
@ -1,5 +1,5 @@
 import '@progress/kendo-theme-default/dist/all.css';
-import { createApp } from 'vue'
-import App from './App.vue'
+import { createApp } from 'vue';
+import App from './App.vue';

-createApp(App).mount('#app')
+createApp(App).mount('#app');
--- a/kendo-nuxt2/components/KendoGrid.vue
+++ b/kendo-nuxt2/components/KendoGrid.vue
@ -37,17 +37,17 @@
                                @change="dropDownChange"
                                :data-items="locales" >
                            </dropdownlist>&nbsp;&nbsp;&nbsp;
-                            <button
-                                title="Export to Excel"
-                                class="k-button k-primary"
+                            <KButton
+                                :theme-color="'primary'"
                                @click="exportExcel"
                            >
                                Export to Excel
-                            </button>&nbsp;
-                            <button class="k-button k-primary"
+                            </KButton>&nbsp;
+                            <KButton 
+                                :theme-color="'primary'"
                                @click="exportPDF">
                                Export to PDF
-                            </button>
+                            </KButton>
                        </toolbar>
                    </Grid>
                </pdfexport>
@ -57,8 +57,10 @@
  </div>
 </template>
 <script>
+import Vue from "vue";
 import { Grid, GridToolbar } from '@progress/kendo-vue-grid';
 import { DropDownList } from '@progress/kendo-vue-dropdowns';
+import { Button } from '@progress/kendo-vue-buttons';
 import { GridPdfExport } from '@progress/kendo-vue-pdf';
 import { saveExcel } from '@progress/kendo-vue-excel-export';
 import { IntlProvider, load, LocalizationProvider, loadMessages, IntlService } from '@progress/kendo-vue-intl';
@ -108,7 +110,8 @@ export default {
        'dropdownlist': DropDownList,
        'intl': IntlProvider,
        'localization': LocalizationProvider,
-        'custom': DetailComponent
+        'custom': DetailComponent,
+        KButton: Button
    },
    data: function () {
        return {
@ -183,10 +186,11 @@ export default {
            });
        },
        expandChange (event) {
+            
            const isExpanded =
                event.dataItem.expanded === undefined ?
                    event.dataItem.aggregates : event.dataItem.expanded;
-            event.dataItem.expanded =  !isExpanded;
+            Vue.set(event.dataItem, "expanded" ,!isExpanded);
        },
        exportExcel () {
            saveExcel({
--- a/kendo-nuxt2/package.json
+++ b/kendo-nuxt2/package.json
@ -9,23 +9,24 @@
    "generate": "nuxt generate"
  },
  "dependencies": {
-    "@progress/kendo-licensing": "1.2.0",
-    "@progress/kendo-vue-animation": "dev",
-    "@progress/kendo-drawing": "1.11.0",
-    "@progress/kendo-data-query": "1.5.5",
-    "@progress/kendo-vue-dropdowns": "dev",
-    "@progress/kendo-vue-charts": "dev",
-    "@progress/kendo-vue-inputs": "dev",
-    "@progress/kendo-vue-intl": "dev",
-    "@progress/kendo-vue-dateinputs": "dev",
-    "@progress/kendo-vue-pdf": "dev",
-    "@progress/kendo-vue-excel-export": "dev",
-    "cldr-core": "36.0.0",
-    "cldr-numbers-full": "36.0.0",
-    "cldr-dates-full": "36.0.0",
-    "@progress/kendo-vue-grid": "dev",
-    "@progress/kendo-vue-data-tools": "dev",
-    "@progress/kendo-vue-popup": "dev",
+    "@progress/kendo-data-query": "latest",
+    "@progress/kendo-drawing": "latest",
+    "@progress/kendo-licensing": "latest",
+    "@progress/kendo-vue-animation": "latest",
+    "@progress/kendo-vue-charts": "latest",
+    "@progress/kendo-vue-data-tools": "latest",
+    "@progress/kendo-vue-dateinputs": "latest",
+    "@progress/kendo-vue-dropdowns": "latest",
+    "@progress/kendo-vue-excel-export": "latest",
+    "@progress/kendo-vue-grid": "latest",
+    "@progress/kendo-vue-indicators": "latest",
+    "@progress/kendo-vue-inputs": "latest",
+    "@progress/kendo-vue-intl": "latest",
+    "@progress/kendo-vue-pdf": "latest",
+    "@progress/kendo-vue-popup": "latest",
+    "cldr-core": "^40.0.0",
+    "cldr-dates-full": "^40.0.0",
+    "cldr-numbers-full": "^40.0.0",
    "core-js": "^3.15.1",
    "nuxt": "^2.15.7"
  },
--- a/kendo-vue-demo-aspnetcore-data/VueJSCore/ClientApp/package.json
+++ b/kendo-vue-demo-aspnetcore-data/VueJSCore/ClientApp/package.json
@ -12,20 +12,22 @@
    "bootstrap": "^4.5.3",
    "core-js": "^3.7.0",
    "vue": "^3.1.2",
-    "@progress/kendo-vue-grid": "2.3.0",
-    "@progress/kendo-data-query": "1.5.5",
-    "@progress/kendo-licensing": "1.1.4",
-    "@progress/kendo-vue-animation": "2.3.0",
-    "@progress/kendo-drawing": "1.10.1",
-    "@progress/kendo-vue-intl": "2.3.0",
-    "@progress/kendo-vue-dropdowns": "2.3.0",
-    "@progress/kendo-vue-buttons": "2.3.0",
-    "@progress/kendo-vue-inputs": "2.3.0",
-    "@progress/kendo-vue-data-tools": "2.3.0",
-    "@progress/kendo-vue-dateinputs": "2.3.0",
-    "@progress/kendo-vue-popup": "2.3.0",
-    "@progress/kendo-vue-pdf": "2.3.0",
-    "@progress/kendo-vue-excel-export": "2.3.0",
+    "@progress/kendo-vue-grid": "latest",
+    "@progress/kendo-data-query": "latest",
+    "@progress/kendo-licensing": "latest",
+    "@progress/kendo-vue-animation": "latest",
+    "@progress/kendo-drawing": "latest",
+    "@progress/kendo-vue-intl": "latest",
+    "@progress/kendo-vue-dropdowns": "latest",
+    "@progress/kendo-vue-buttons": "latest",
+    "@progress/kendo-vue-inputs": "latest",
+    "@progress/kendo-vue-data-tools": "latest",
+    "@progress/kendo-vue-dateinputs": "latest",
+    "@progress/kendo-vue-popup": "latest",
+    "@progress/kendo-vue-pdf": "latest",
+    "@progress/kendo-vue-excel-export": "latest",
+    "@progress/kendo-vue-dialogs": "latest",
+    "@progress/kendo-vue-indicators": "latest",
    "vue-loader-v16": "npm:vue-loader@^16.0.0-alpha.3",
    "vue-router": "^4.0.0-rc.5"
  },
--- a/kendo-vue-demo-aspnetcore-data/kendo-vue-demo-aspnetcore-data.zip
+++ b/kendo-vue-demo-aspnetcore-data/kendo-vue-demo-aspnetcore-data.zip
--- a/kendo-vue-vite/index.html
+++ b/kendo-vue-vite/index.html
@ -3,8 +3,6 @@
 <head>
  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico" />
-  <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-default@latest/dist/all.css"></link>
-  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vite App</title>
 </head>
--- a/kendo-vue-vite/package.json
+++ b/kendo-vue-vite/package.json
@ -8,27 +8,29 @@
  "dependencies": {
    "vue": "^3.0.5",
    "vue-router": "^4.0.0",
-    "@progress/kendo-data-query": "1.5.4",
-    "@progress/kendo-drawing": "1.13.7",
-    "@progress/kendo-licensing": "^1.1.3",
-    "@progress/kendo-vue-animation": "^2.1.0",
-    "@progress/kendo-vue-data-tools": "^2.1.0",
-    "@progress/kendo-vue-dateinputs": "^2.1.0",
-    "@progress/kendo-vue-dialogs": "^2.1.0",
-    "@progress/kendo-vue-dropdowns": "^2.1.0",
-    "@progress/kendo-vue-excel-export": "^2.1.0",
-    "@progress/kendo-vue-grid": "^2.1.0",
-    "@progress/kendo-vue-inputs": "^2.1.0",
-    "@progress/kendo-vue-intl": "^2.1.0",
-    "@progress/kendo-vue-pdf": "^2.1.0",
-    "@progress/kendo-vue-popup": "^2.1.0",
-    "cldr-core": "^38.0.0",
-    "cldr-dates-full": "^38.0.0",
-    "cldr-numbers-full": "^38.0.0"
+    "@progress/kendo-data-query": "latest",
+    "@progress/kendo-drawing": "latest",
+    "@progress/kendo-licensing": "latest",
+    "@progress/kendo-vue-animation": "latest",
+    "@progress/kendo-vue-data-tools": "latest",
+    "@progress/kendo-vue-dateinputs": "latest",
+    "@progress/kendo-vue-dialogs": "latest",
+    "@progress/kendo-vue-dropdowns": "latest",
+    "@progress/kendo-vue-excel-export": "latest",
+    "@progress/kendo-vue-grid": "latest",
+    "@progress/kendo-vue-inputs": "latest",
+    "@progress/kendo-vue-intl": "latest",
+    "@progress/kendo-vue-pdf": "latest",
+    "@progress/kendo-vue-popup": "latest",
+    "@progress/kendo-vue-indicators": "latest",
+    "@progress/kendo-theme-default": "latest",
+    "cldr-core": "^40.0.0",
+    "cldr-dates-full": "^40.0.0",
+    "cldr-numbers-full": "^40.0.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.0.4",
    "@vue/compiler-sfc": "^3.0.5",
-    "vite": "^2.0.0-beta.12"
+    "vite": "^3.0.0"
  }
 }
--- a/kendo-vue-vite/src/components/Dialogs.vue
+++ b/kendo-vue-vite/src/components/Dialogs.vue
@ -1,20 +1,16 @@
 <template>
- <div class="example-wrapper">
+  <div class="example-wrapper">
    <span v-if="!visibleDialog && !visibleWindow">
-      <button class="k-button" @click="toggleDialog">Open Dialog</button>
-      <button class="k-button" @click="toggleWindow">Open Window</button>
+      <KButton @click="toggleDialog">Open Dialog</KButton>
+      <KButton @click="toggleWindow">Open Window</KButton>
    </span>
-    <k-dialog
-      v-if="visibleDialog"
-      :title="'Please confirm'"
-      @close="toggleDialog"
-    >
+    <k-dialog v-if="visibleDialog" :title="'Please confirm'" @close="toggleDialog">
      <p :style="{ margin: '25px', textAlign: 'center' }">
        Are you sure you want to continue?
      </p>
      <dialog-actions-bar>
-        <button class="k-button" @click="toggleDialog">No</button>
-        <button class="k-button" @click="toggleDialog">Yes</button>
+        <KButton @click="toggleDialog">No</KButton>
+        <KButton @click="toggleDialog">Yes</KButton>
      </dialog-actions-bar>
    </k-dialog>
    <window v-if="visibleWindow" :title="'Status'" @close="toggleWindow">
@ -24,14 +20,16 @@
 </template>
 <script>
 import { Dialog, DialogActionsBar, Window } from "@progress/kendo-vue-dialogs";
+import { Button } from "@progress/kendo-vue-buttons";

 export default {
  components: {
    "k-dialog": Dialog,
    window: Window,
-    "dialog-actions-bar": DialogActionsBar
+    "dialog-actions-bar": DialogActionsBar,
+    KButton: Button
  },
-  data: function() {
+  data: function () {
    return {
      visibleDialog: false,
      visibleWindow: false
--- a/kendo-vue-vite/src/components/KendoGrid.vue
+++ b/kendo-vue-vite/src/components/KendoGrid.vue
@ -1,62 +1,41 @@
 <template>
-<div class="example-wrapper">
-  <localization :language="currentLocale.language">
-        <intl :locale="currentLocale.locale" >
-            <div>
-                <pdfexport ref="gridPdfExport">
-                    <Grid 
-                        :style="{ height: '700px', width: '1500px' }"
-                        :sortable="sortable"
-                        :filterable="filterable"
-                        :groupable="groupable"
-                        :reorderable="reorderable"
-                        :pageable="{ buttonCount: 4, pageSizes: true }"
-                        :data-items="dataResult"
-                        :skip="skip" 
-                        :take="take" 
-                        :sort="sort" 
-                        :group="group" 
-                        :filter="filter" 
-                        :columns="columns"
-                        @datastatechange="dataStateChange"
-                        :detail="detailComponent"
-                        :expand-field="'expanded'"
-                        @expandchange="expandChange"
-                        @columnreorder="columnReorder"
-                    >
-                    <template v-slot:myTemplate="{props}">
-                        <custom :data-item="props.dataItem" />
-                    </template>
-                        <toolbar>
-                            Locale:&nbsp;&nbsp;&nbsp;
-                            <dropdownlist
-                                :value="currentLocale"
-                                :text-field="'language'"
-                                @change="dropDownChange"
-                                :data-items="locales" >
-                            </dropdownlist>&nbsp;&nbsp;&nbsp;
-                            <button
-                                title="Export to Excel"
-                                class="k-button k-primary"
-                                @click="exportExcel"
-                            >
-                                Export to Excel
-                            </button>&nbsp;
-                            <button class="k-button k-primary"
-                                @click="exportPDF">
-                                Export to PDF
-                            </button>
-                        </toolbar>
-                    </Grid>
-                </pdfexport>
-            </div>
-        </intl>
-    </localization>
-</div>
+    <div class="example-wrapper">
+        <localization :language="currentLocale.language">
+            <intl :locale="currentLocale.locale">
+                <div>
+                    <pdfexport ref="gridPdfExport">
+                        <Grid :style="{ height: '700px', width: '1500px' }" :sortable="sortable"
+                            :filterable="filterable" :groupable="groupable" :reorderable="reorderable"
+                            :pageable="{ buttonCount: 4, pageSizes: true }" :data-items="dataResult" :skip="skip"
+                            :take="take" :sort="sort" :group="group" :filter="filter" :columns="columns"
+                            @datastatechange="dataStateChange" :detail="detailComponent" :expand-field="'expanded'"
+                            @expandchange="expandChange" @columnreorder="columnReorder">
+                            <template v-slot:myTemplate="{ props }">
+                                <custom :data-item="props.dataItem" />
+                            </template>
+                            <toolbar>
+                                Locale:&nbsp;&nbsp;&nbsp;
+                                <dropdownlist :value="currentLocale" :text-field="'language'" @change="dropDownChange"
+                                    :data-items="locales">
+                                </dropdownlist>&nbsp;&nbsp;&nbsp;
+                                <KButton :theme-color="'primary'" @click="exportExcel">
+                                    Export to Excel
+                                </KButton>&nbsp;
+                                <KButton :theme-color="'primary'" @click="exportPDF">
+                                    Export to PDF
+                                </KButton>
+                            </toolbar>
+                        </Grid>
+                    </pdfexport>
+                </div>
+            </intl>
+        </localization>
+    </div>
 </template>
 <script>
 import { Grid, GridToolbar } from '@progress/kendo-vue-grid';
 import { DropDownList } from '@progress/kendo-vue-dropdowns';
+import { Button } from '@progress/kendo-vue-buttons';
 import { GridPdfExport } from '@progress/kendo-vue-pdf';
 import { saveExcel } from '@progress/kendo-vue-excel-export';
 import { IntlProvider, load, LocalizationProvider, loadMessages, IntlService } from '@progress/kendo-vue-intl';
@ -106,11 +85,12 @@ export default {
        'dropdownlist': DropDownList,
        'intl': IntlProvider,
        'localization': LocalizationProvider,
-        'custom': DetailComponent
+        'custom': DetailComponent,
+        KButton: Button
    },
    data: function () {
        return {
-            
+
            skip: 0,
            take: 20,
            sort: [
@ -121,7 +101,7 @@ export default {
            ],
            filter: null,
            dataResult: [],
-            locales:  [
+            locales: [
                {
                    language: 'en-US',
                    locale: 'en'
@ -138,13 +118,13 @@ export default {
            reorderable: true,
            detailComponent: 'myTemplate',
            columns: [
-                { field: "customerID", width: "200px"},
-                { field: "orderDate", filter: "date", format: "{0:D}", width: "300px"},
-                { field: "shipName", width: "280px"},
-                { field: "freight", filter: "numeric", width: "200px"},
-                { field: "shippedDate", filter: "date", format: "{0:D}", width: "300px"},
-                { field: "employeeID", filter: "numeric", width: "200px"},
-                { field: "orderID", filterable: "false", title: "ID", width: "90px", locked: "true"}
+                { field: "customerID", width: "200px" },
+                { field: "orderDate", filter: "date", format: "{0:D}", width: "300px" },
+                { field: "shipName", width: "280px" },
+                { field: "freight", filter: "numeric", width: "200px" },
+                { field: "shippedDate", filter: "date", format: "{0:D}", width: "300px" },
+                { field: "employeeID", filter: "numeric", width: "200px" },
+                { field: "orderID", filterable: "false", title: "ID", width: "90px", locked: "true" }
            ]
        };
    },
@ -160,7 +140,7 @@ export default {
        this.dataResult = process(orders, dataState);
    },
    methods: {
-        createAppState: function(dataState) {
+        createAppState: function (dataState) {
            this.take = dataState.take;
            this.skip = dataState.skip;
            if (dataState.group) {
@ -170,7 +150,7 @@ export default {
            this.filter = dataState.filter;
            this.sort = dataState.sort;
        },
-        dataStateChange (event) {
+        dataStateChange(event) {
            this.createAppState(event.data);
            this.dataResult = process(orders, {
                skip: this.skip,
@ -180,37 +160,37 @@ export default {
                group: this.group
            });
        },
-        expandChange (event) {
+        expandChange(event) {
            const isExpanded =
                event.dataItem.expanded === undefined ?
                    event.dataItem.aggregates : event.dataItem.expanded;
-            event.dataItem.expanded =  !isExpanded;
+            event.dataItem.expanded = !isExpanded;
        },
-        exportExcel () {
+        exportExcel() {
            saveExcel({
                data: orders,
                fileName: "myFile",
                columns: this.columns
            });
        },
-        exportPDF () {
-            const tempSort = this.sort; 
+        exportPDF() {
+            const tempSort = this.sort;
            this.sort = null;
-            this.$nextTick(()=>{
-               (this.$refs.gridPdfExport).save(process(orders,
-                { skip: this.skip, take: this.take }));
+            this.$nextTick(() => {
+                (this.$refs.gridPdfExport).save(process(orders,
+                    { skip: this.skip, take: this.take }));
                this.sort = tempSort;
            })
        },
-        pageChangeHandler: function(event) {
+        pageChangeHandler: function (event) {
            this.skip = event.page.skip;
            this.take = event.page.take;
        },
-        columnReorder: function(options) {
+        columnReorder: function (options) {
            this.columns = options.columns;
        },
        dropDownChange: function (e) {
-             this.currentLocale = e.target.value;
+            this.currentLocale = e.target.value;
        }
    }
 };
--- a/kendo-vue-vite/src/main.js
+++ b/kendo-vue-vite/src/main.js
@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import router from "./router";
-import App from './App.vue'
+import App from './App.vue';
+import "@progress/kendo-theme-default";

 createApp(App).use(router).mount('#app')
--- a/vue2-grid-performance/package.json
+++ b/vue2-grid-performance/package.json
@ -8,17 +8,18 @@
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
-    "@progress/kendo-data-query": "^1.5.2",
-    "@progress/kendo-drawing": "^1.6.0",
-    "@progress/kendo-licensing": "^1.2.0",
-    "@progress/kendo-vue-data-tools": "^2.3.2",
+    "@progress/kendo-data-query": "latest",
+    "@progress/kendo-drawing": "latest",
+    "@progress/kendo-licensing": "latest",
+    "@progress/kendo-theme-default": "latest",
+    "@progress/kendo-vue-data-tools": "latest",
    "@progress/kendo-vue-dateinputs": "latest",
    "@progress/kendo-vue-dropdowns": "latest",
    "@progress/kendo-vue-excel-export": "latest",
    "@progress/kendo-vue-grid": "latest",
+    "@progress/kendo-vue-indicators": "latest",
    "@progress/kendo-vue-inputs": "latest",
    "@progress/kendo-vue-intl": "latest",
-    "@telerik/kendo-intl": "^2.0.0",
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
--- a/vue2-grid-performance/public/index.html
+++ b/vue2-grid-performance/public/index.html
@ -1,7 +1,6 @@
 <!DOCTYPE html>
 <html lang="">
  <head>
-    <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-default@latest/dist/all.css"></link>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
--- a/vue2-grid-performance/src/App.vue
+++ b/vue2-grid-performance/src/App.vue
@ -1,16 +1,16 @@
 <template>
  <div id="app">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <Grid msg="Welcome to Your Vue.js App"/>
  </div>
 </template>

 <script>
-import HelloWorld from './components/HelloWorld.vue'
+import Grid from './components/Grid.vue'

 export default {
  name: 'App',
  components: {
-    HelloWorld
+    Grid
  }
 }
 </script>
--- a/vue2-grid-performance/src/DataService/index.js
+++ b/vue2-grid-performance/src/DataService/index.js
@ -1,6 +1,3 @@
-
-import { FinancialData } from './local-data/financial-data';
-
 export const updateRandomPrices = (data) => {
    // console.time('randomizerandom');

--- a/vue2-grid-performance/src/DataService/local-data/financial-data.js
+++ b/vue2-grid-performance/src/DataService/local-data/financial-data.js
@ -885,7 +885,7 @@ export const DATA = [
 ];

 export class FinancialData {
-     generateData(count) {
+    generateData(count) {
        console.time('generateData');
        const currData = [];
        for (let i = 0; i < count; i++) {
@ -903,7 +903,7 @@ export class FinancialData {

            for (const mockData of MOCKFINANCEDATA) {
                for (const prop in mockData) {
-                    if (mockData.hasOwnProperty(prop)) {
+                    if (Object.prototype.hasOwnProperty.call(mockData, prop)) {
                        dataObj[prop] = mockData[prop];
                    }
                }
@ -917,7 +917,7 @@ export class FinancialData {
        return currData;
    }

-     updateAllPrices(data) {
+    updateAllPrices(data) {
        const currData = [];
        for (const dataRow of data) {
            const dataObj = Object.assign({}, dataRow);
@ -927,20 +927,17 @@ export class FinancialData {
        return currData;
    }

-     updateRandomPrices(data) {
+    updateRandomPrices(data) {
        const currData = data.slice(0, data.length + 1);
-        let y = 0;
        for (let i = Math.round(Math.random() * 10); i < data.length; i += Math.round(Math.random() * 10)) {
            const dataObj = Object.assign({}, data[i]);
            this.randomizeObjectData(dataObj);
            currData[i] = dataObj;
-            y++;
        }
-        // return {data: currData, recordsUpdated: y };
        return currData;
    }

-     updateRandomPrices2(data) {
+    updateRandomPrices2(data) {
        const currData = data.slice(0, data.length + 1);
        let y = 0;
        for (let i = Math.round(Math.random() * 10); i < data.length; i += Math.round(Math.random() * 10)) {
@ -952,7 +949,7 @@ export class FinancialData {
        return { data: currData, recordsUpdated: y };
    }

-     randomizeObjectData(dataObj) {
+    randomizeObjectData(dataObj) {
        const changeP = 'Change(%)';
        const res = this.generateNewPrice(dataObj.Price);
        dataObj.Change = res.Price - dataObj.Price;
@ -960,7 +957,7 @@ export class FinancialData {
        dataObj[changeP] = res.ChangePercent;
    }

-     generateNewPrice(oldPrice) {
+    generateNewPrice(oldPrice) {
        const rnd = parseFloat(Math.random().toFixed(2));
        const volatility = 2;
        let newPrice = 0;
@ -984,7 +981,7 @@ export class FinancialData {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

-     randomizeCountry(region) {
+    randomizeCountry(region) {
        let country;
        switch (region.Region) {
            case 'North America': {
--- a/vue2-grid-performance/src/components/ChangeCell.vue
+++ b/vue2-grid-performance/src/components/ChangeCell.vue
@ -1,12 +1,12 @@
 <template>
- <td :class="className" colSpan="colSpan">
-            <div :class="currentTrends">
-                {{formattedNumber}}
-            </div>
-        </td>
+    <td :class="className" colSpan="colSpan">
+        <div :class="currentTrends">
+            {{ formattedNumber }}
+        </div>
+    </td>
 </template>
 <script>
-import { formatNumber } from '@telerik/kendo-intl';
+import { provideIntlService } from '@progress/kendo-vue-intl';
 import { trends } from "../utils";

 export default {
@ -23,17 +23,17 @@ export default {
        editor: String
    },
    computed: {
-        formattedNumber(){
-            return formatNumber(this.$props.dataItem[this.$props.field], 'c4', 'en')
+        formattedNumber() {
+            return provideIntlService(this).formatNumber(this.$props.dataItem[this.$props.field], 'c4', 'en')
        },
-        currentTrends(){
+        currentTrends() {
            return trends(this.$props.dataItem);
        },
-        trendsClass(){
+        trendsClass() {
            return {
                'fintech-icons': true,
                ...this.currentTrends
-                };
+            };
        }
    }
 }
--- a/vue2-grid-performance/src/components/ChangePercentCell.vue
+++ b/vue2-grid-performance/src/components/ChangePercentCell.vue
@ -1,12 +1,12 @@
 <template>
- <td :class="className" colSpan="colSpan">
-            <div :class="currentTrends">
-                {{formattedNumber}}%
-            </div>
-        </td>
+    <td :class="className" colSpan="colSpan">
+        <div :class="currentTrends">
+            {{ formattedNumber }}%
+        </div>
+    </td>
 </template>
 <script>
-import { formatNumber } from '@telerik/kendo-intl';
+import { provideIntlService } from '@progress/kendo-vue-intl';
 import { trends } from "../utils";

 export default {
@ -23,17 +23,17 @@ export default {
        editor: String
    },
    computed: {
-        formattedNumber(){
-            return formatNumber(this.$props.dataItem[this.$props.field], '0.##', 'en');
+        formattedNumber() {
+            return provideIntlService(this).formatNumber(this.$props.dataItem[this.$props.field], '0.##', 'en');
        },
-        currentTrends(){
+        currentTrends() {
            return trends(this.$props.dataItem);
        },
-        trendsClass(){
+        trendsClass() {
            return {
                'fintech-icons': true,
                ...this.currentTrends
-                };
+            };
        }
    }
 }
--- a/vue2-grid-performance/src/components/HelloWorld.vue
+++ b/vue2-grid-performance/src/components/HelloWorld.vue
@ -160,7 +160,7 @@ const BUTTON_META = {


 export default {
-  name: 'HelloWorld',
+  name: 'Grid',
  components: {
    grid: Grid,
    toolbar: GridToolbar,
@ -192,7 +192,7 @@ export default {
                    { field: 'Country', width:100 },
                    { field: 'Open Price', width: 120, filter: 'numeric', format:"{0:c4}"},
                    { field: 'Price', width: 130, filter: 'numeric', cell: 'myPriceCell'},
-                    { field: 'Change', width: 90, className: 'numeric change', filter: 'numeric', headerClassName: 'headerAlignStyle', cell: 'myChangeCell' }, 
+                    { field: 'Change', width: 120, className: 'numeric change', filter: 'numeric', headerClassName: 'headerAlignStyle', cell: 'myChangeCell' }, 
                    { field: 'Change(%)', width: 90, className: 'numeric change', filter: 'numeric',  cell: 'myChangePercentCell' },
                    { field: 'Buy', width: 110, filter: 'numeric', format:'{0:c4}' },
                    { field: 'Sell', width: 110, filter: 'numeric', format: '{0:c4}'},
--- a/vue2-grid-performance/src/components/PriceCell.vue
+++ b/vue2-grid-performance/src/components/PriceCell.vue
@ -1,14 +1,14 @@
 <template>
-<td :class="className" colSpan="colSpan">
-            <div :class="trendsClass">
-                <span>{{formattedNumber}}</span>
-               <span v-if="currentTrends.positive" class="k-icon k-i-arrow-60-up" />
-               <span v-if="currentTrends.negative"  class="k-icon k-i-arrow-60-down" />
-            </div>
-        </td>
+    <td :class="className" colSpan="colSpan">
+        <div :class="trendsClass">
+            <span>{{ formattedNumber }}</span>
+            <span v-if="currentTrends.positive" class="k-icon k-i-arrow-60-up" />
+            <span v-if="currentTrends.negative" class="k-icon k-i-arrow-60-down" />
+        </div>
+    </td>
 </template>
 <script>
-import { formatNumber } from '@telerik/kendo-intl';
+import { provideIntlService } from '@progress/kendo-vue-intl';
 import { trends } from "../utils";

 export default {
@ -25,17 +25,17 @@ export default {
        editor: String
    },
    computed: {
-        formattedNumber(){
-            return formatNumber(this.$props.dataItem[this.$props.field], 'c4', 'en')
+        formattedNumber() {
+            return provideIntlService(this).formatNumber(this.$props.dataItem[this.$props.field], 'c4', 'en')
        },
-        currentTrends(){
+        currentTrends() {
            return trends(this.$props.dataItem);
        },
-        trendsClass(){
+        trendsClass() {
            return {
                'fintech-icons': true,
                ...this.currentTrends
-                };
+            };
        }
    }
 }
--- a/vue2-grid-performance/src/main.js
+++ b/vue2-grid-performance/src/main.js
@ -1,5 +1,6 @@
 import Vue from 'vue'
 import App from './App.vue'
+import '@progress/kendo-theme-default'

 Vue.config.productionTip = false

--- a/vue3-grid-performance/package.json
+++ b/vue3-grid-performance/package.json
@ -9,11 +9,18 @@
    "production": "vue-cli-service serve --mode production"
  },
  "dependencies": {
-    "@progress/kendo-data-query": "^1.6.0",
-    "@progress/kendo-theme-default": "^5.5.0",
-    "@progress/kendo-vue-grid": "^3.4.1",
-    "@progress/kendo-vue-inputs": "^3.4.1",
-    "@progress/kendo-vue-intl": "^3.4.1",
+    "@progress/kendo-data-query": "latest",
+    "@progress/kendo-drawing": "latest",
+    "@progress/kendo-licensing": "latest",
+    "@progress/kendo-theme-default": "latest",
+    "@progress/kendo-vue-data-tools": "latest",
+    "@progress/kendo-vue-dateinputs": "latest",
+    "@progress/kendo-vue-dropdowns": "latest",
+    "@progress/kendo-vue-excel-export": "latest",
+    "@progress/kendo-vue-grid": "latest",
+    "@progress/kendo-vue-inputs": "latest",
+    "@progress/kendo-vue-intl": "latest",
+    "@progress/kendo-vue-indicators": "latest",
    "core-js": "^3.8.3",
    "vue": "^3.2.13"
  },
--- a/vue3-typescript-jest-tests/package.json
+++ b/vue3-typescript-jest-tests/package.json
@ -8,14 +8,15 @@
    "test:unit": "vue-cli-service test:unit"
  },
  "dependencies": {
-    "@progress/kendo-licensing": "^1.1.4",
-    "@progress/kendo-vue-data-tools": "latest",
-    "@progress/kendo-vue-dropdowns": "latest",
-    "@progress/kendo-vue-dateinputs": "latest",
    "@progress/kendo-data-query": "latest",
    "@progress/kendo-drawing": "latest",
-    "@progress/kendo-vue-inputs": "latest",
+    "@progress/kendo-licensing": "^1.2.2",
+    "@progress/kendo-vue-data-tools": "latest",
+    "@progress/kendo-vue-dateinputs": "latest",
+    "@progress/kendo-vue-dropdowns": "latest",
    "@progress/kendo-vue-grid": "latest",
+    "@progress/kendo-vue-indicators": "latest",
+    "@progress/kendo-vue-inputs": "latest",
    "@progress/kendo-vue-intl": "latest",
    "core-js": "^3.8.1",
    "vue": "^3.2.9"
@ -27,7 +28,8 @@
    "@vue/cli-plugin-unit-jest": "^4.5.9",
    "@vue/cli-service": "^4.5.9",
    "@vue/compiler-sfc": "^3.1.4",
-    "@vue/test-utils": "^2.0.0-rc.14",
+    "@vue/test-utils": "^2.0.2",
+    "@vue/tsconfig": "^0.1.3",
    "typescript": "^3.9.7",
    "vue-jest": "^5.0.0-alpha.10"
  },
--- a/vue3-typescript-jest-tests/src/App.vue
+++ b/vue3-typescript-jest-tests/src/App.vue
@ -1,33 +1,32 @@
 <template>
  <img alt="Vue logo" src="./assets/logo.png">
-  <HelloWorld   msg="Welcome to Your Vue.js + TypeScript App"/>
-   <div class="col-xs-12 col-sm-7 example-col">
-            <p>DropDownList</p>
-            <dropdownlist  :data-items='sports' :default-value="'Basketball'" ></dropdownlist>
-        </div>
+  <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
+  <div class="col-xs-12 col-sm-7 example-col">
+    <p>DropDownList</p>
+    <dropdownlist :data-items='sports' :default-value="'Basketball'"></dropdownlist>
+  </div>

 </template>

 <script lang="ts">
 import { defineComponent } from 'vue';
 import HelloWorld from './components/HelloWorld.vue';
-import { DropDownList, DropDownListVue3, AutoCompleteProps
-   } from '@progress/kendo-vue-dropdowns';
-
-let ddl: typeof DropDownListVue3 = DropDownList;
+import {
+  DropDownList
+} from '@progress/kendo-vue-dropdowns';

 export default defineComponent({
  name: 'App',
  components: {
    HelloWorld,
-    'dropdownlist': ddl,
+    'dropdownlist': DropDownList,
  },
-  data () {
+  data() {
    return {
-       sports: ["Baseball", "Basketball", "Cricket", "Field Hockey", "Football", "Table Tennis", "Tennis", "Volleyball" ]
+      sports: ["Baseball", "Basketball", "Cricket", "Field Hockey", "Football", "Table Tennis", "Tennis", "Volleyball"]
    }
  }
-});
+} as any);
 </script>

 <style>
--- a/vue3-typescript-jest-tests/tests/unit/example.spec.ts
+++ b/vue3-typescript-jest-tests/tests/unit/example.spec.ts
@ -1,7 +1,7 @@

 import { mount } from '@vue/test-utils'
 // GridVue3 is a special vue 3 type of the Kendo Grid component - in our next major release it will be available in the default Grid object.
-import { GridVue3 as Grid } from '@progress/kendo-vue-grid'
+import { Grid } from '@progress/kendo-vue-grid'

 describe('HelloWorld.vue', () => {