chore: update to kendo v3

package.json

@@ -8,7 +8,8 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@progress/kendo-theme-bootstrap": "^4.42.0",
+    "@progress/kendo-theme-bootstrap": "^5.0.1",
+    "@progress/kendo-vue-progressbars": "^3.0.1",
     "bootstrap": "4.6.0",
     "core-js": "^3.6.5",
     "rxjs": "6.4.0",
@@ -19,22 +20,22 @@
     "@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.2",
-    "@progress/kendo-vue-buttons": "^2.6.2",
-    "@progress/kendo-vue-charts": "^2.6.2",
-    "@progress/kendo-vue-data-tools": "^2.6.2",
-    "@progress/kendo-vue-dateinputs": "^2.6.2",
-    "@progress/kendo-vue-dropdowns": "^2.6.2",
-    "@progress/kendo-vue-excel-export": "^2.6.2",
-    "@progress/kendo-vue-grid": "^2.6.2",
-    "@progress/kendo-vue-inputs": "^2.6.2",
-    "@progress/kendo-vue-intl": "^2.6.2",
-    "@progress/kendo-vue-pdf": "^2.6.2",
-    "@progress/kendo-vue-popup": "^2.6.2",
-    "@progress/kendo-vue-layout": "^2.6.2",
-    "@progress/kendo-vue-dialogs": "^2.6.2",
-    "@progress/kendo-vue-form": "^2.6.2",
-    "@progress/kendo-vue-upload": "^2.6.2",
+    "@progress/kendo-vue-animation": "^3.0.1",
+    "@progress/kendo-vue-buttons": "^3.0.1",
+    "@progress/kendo-vue-charts": "^3.0.1",
+    "@progress/kendo-vue-data-tools": "^3.0.1",
+    "@progress/kendo-vue-dateinputs": "^3.0.1",
+    "@progress/kendo-vue-dropdowns": "^3.0.1",
+    "@progress/kendo-vue-excel-export": "^3.0.1",
+    "@progress/kendo-vue-grid": "^3.0.1",
+    "@progress/kendo-vue-inputs": "^3.0.1",
+    "@progress/kendo-vue-intl": "^3.0.1",
+    "@progress/kendo-vue-pdf": "^3.0.1",
+    "@progress/kendo-vue-popup": "^3.0.1",
+    "@progress/kendo-vue-layout": "^3.0.1",
+    "@progress/kendo-vue-dialogs": "^3.0.1",
+    "@progress/kendo-vue-form": "^3.0.1",
+    "@progress/kendo-vue-upload": "^3.0.1",
     "hammerjs": "2.0.8",
     "@typescript-eslint/eslint-plugin": "^4.18.0",
     "@typescript-eslint/parser": "^4.18.0",

src/components/detail/ItemDetails.vue

@@ -4,7 +4,7 @@
       <div class="form-group row">
         <label class="col-sm-2 col-form-label">Title</label>
         <div class="col-sm-10">
-          <kendo-input style="width:100%" v-model="itemForm.title" @blur="onBlurTextField" name="title"/>
+          <kendo-input v-model="itemForm.title" @blur="onBlurTextField" name="title"/>
 
         </div>
       </div>
@@ -12,19 +12,18 @@
       <div class="form-group row">
         <label class="col-sm-2 col-form-label">Description</label>
         <div class="col-sm-10">
-          <textarea
-            class="k-textbox"
+          <kendo-textarea
             v-model="itemForm.description"
             @blur="onBlurTextField"
             name="description"
-            style="width:100%; height:60px;"
-          ></textarea>
+            style="height:60px;"
+          ></kendo-textarea>
         </div>
       </div>
       <div class="form-group row">
         <label class="col-sm-2 col-form-label">Item Type</label>
         <div class="col-sm-10">
-           <kendo-dropdownlist
+           <kendo-dropdownlist 
             v-model="itemForm.typeStr"
             :data-items="itemTypesProvider"
             @change="onNonTextFieldChange"
@@ -167,8 +166,8 @@ import {
   PtItemDetailsEditFormModel,
   ptItemToFormModel,
 } from "@/shared/models/forms/pt-item-details-edit-form";
-import { DropDownListVue3 as DropDownList, DropDownListChangeEvent } from '@progress/kendo-vue-dropdowns';
-import { Input, SliderVue3 as Slider, SliderChangeEvent } from '@progress/kendo-vue-inputs';
+import { DropDownList, DropDownListChangeEvent } from '@progress/kendo-vue-dropdowns';
+import { Input, Slider, TextArea, SliderChangeEvent } from '@progress/kendo-vue-inputs';
 import { Upload, UploadOnStatusChangeEvent } from '@progress/kendo-vue-upload';
 import { PtItemType } from "@/core/models/domain/types";
 import { PriorityEnum } from "@/core/models/domain/enums";
@@ -177,6 +176,7 @@ import { getIndicatorClass } from '@/shared/helpers/priority-styling';
 export default defineComponent({
   name: "PtItemChitchat",
   components: {
+    'kendo-textarea': TextArea,
     'kendo-input': Input,
     'kendo-dropdownlist': DropDownList,
     "kendo-slider": Slider,

src/views/BacklogPage.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div
+    <div 
       class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3"
     >
       <h1 class="h2">Backlog</h1>

src/views/DashboardPage.vue

@@ -32,9 +32,9 @@
           </kendo-combobox>
 
           <kendo-buttongroup>
-            <kendo-button :look="'flat'" :icon="'calendar'" @click="onMonthRangeTap(3)">3 Months</kendo-button>
-            <kendo-button :look="'flat'" :icon="'calendar'" @click="onMonthRangeTap(6)">6 Months</kendo-button>
-            <kendo-button :look="'flat'" :icon="'calendar'" @click="onMonthRangeTap(12)">1 Year</kendo-button>
+            <kendo-button :fill-mode="'flat'" :icon="'calendar'" @click="onMonthRangeTap(3)">3 Months</kendo-button>
+            <kendo-button :fill-mode="'flat'" :icon="'calendar'" @click="onMonthRangeTap(6)">6 Months</kendo-button>
+            <kendo-button :fill-mode="'flat'" :icon="'calendar'" @click="onMonthRangeTap(12)">1 Year</kendo-button>
           </kendo-buttongroup>
         </div>
       </div>
@@ -63,7 +63,7 @@
                   :axis-base-unit="'months'"
                 />
               </ChartCategoryAxis>
-              <ChartLegend :position="'bottom'" />
+              <ChartLegend :position="'bottom'"  />
               <ChartSeriesDefaults :type="'column'" :stack="true" :gap="0.06" />
               <ChartSeries>
                 <ChartSeriesItem