Update Vue editors demos to composition API style

.eslintrc.js

@@ -511,8 +511,15 @@ module.exports = {
       'utils/templates/Vue/*.vue',
       'utils/templates/Vue/*.js',
     ],
+    parser: 'vue-eslint-parser',
+    'parserOptions': {
+      'parser': '@typescript-eslint/parser',
+    },
+    env: {
+      node: true,
+    },
     extends: [
-      'plugin:vue/recommended',
+      'plugin:vue/vue3-recommended',
     ],
     globals: {
       System: false,
@@ -530,7 +537,7 @@ module.exports = {
       'no-trailing-spaces': 'error',
       'no-new-func': 'error',
       'no-eval': 'error',
-      'no-undef': 'error',
+      'no-undef': 'warn',
       'no-unused-expressions': 'off',
       'no-unused-vars': ['error'],
       'no-extend-native': 'error',

JSDemos/Demos/Autocomplete/Overview/Vue/App.vue

@@ -94,25 +94,22 @@
 
   </div>
 </template>
-<script>
+<script setup lang="ts">
+import { ref } from 'vue';
 import ODataStore from 'devextreme/data/odata/store';
 import { DxAutocomplete } from 'devextreme-vue/autocomplete';
 import CustomStore from 'devextreme/data/custom_store';
 import 'whatwg-fetch';
 import { names, surnames, positions } from './data.js';
 
-function isNotEmpty(value) {
-  return value !== undefined && value !== null && value !== '';
-}
-
-const states = new ODataStore({
+const statesStore = new ODataStore({
   url:
-    'https://js.devexpress.com/Demos/DevAV/odata/States?$select=Sate_ID,State_Long,State_Short',
+      'https://js.devexpress.com/Demos/DevAV/odata/States?$select=Sate_ID,State_Long,State_Short',
   key: 'Sate_ID',
   keyType: 'Int32',
 });
 
-const clientsStore = new CustomStore({
+const clientsCustomStore = new CustomStore({
   key: 'Value',
   useDefaultSearch: true,
   load(loadOptions) {
@@ -136,37 +133,26 @@ const clientsStore = new CustomStore({
   },
 });
 
-export default {
-  components: {
-    DxAutocomplete,
-  },
-  data() {
-    return {
-      firstName: '',
-      lastName: '',
-      position: positions[0],
-      state: '',
-      currentClient: '',
-      fullInfo: '',
+const firstName = ref('');
+const lastName = ref('');
+const position = ref(positions[0]);
+const state = ref('');
+const currentClient = ref('');
+const fullInfo = ref('');
+const states = ref(statesStore);
+const clientsStore = ref(clientsCustomStore);
 
-      names,
-      surnames,
-      positions,
-      states,
-      clientsStore,
-    };
-  },
-  methods: {
-    updateEmployeeInfo() {
-      let fullInfo = '';
-      fullInfo += `${this.firstName || ''} ${this.lastName || ''}`.trim();
-      fullInfo += (fullInfo && this.position) ? `, ${this.position}` : this.position || '';
-      fullInfo += (fullInfo && this.state) ? `, ${this.state}` : this.state || '';
-      fullInfo += (fullInfo && this.currentClient) ? `, ${this.currentClient}` : this.currentClient || '';
-      this.fullInfo = fullInfo;
-    },
-  },
-};
+function updateEmployeeInfo() {
+  let employeeInfo = '';
+  employeeInfo += `${firstName.value || ''} ${lastName.value || ''}`.trim();
+  employeeInfo += (employeeInfo && position) ? `, ${position.value}` : position.value || '';
+  employeeInfo += (employeeInfo && state.value) ? `, ${state.value}` : state.value || '';
+  employeeInfo += (employeeInfo && currentClient.value) ? `, ${currentClient.value}` : currentClient.value || '';
+  fullInfo.value = employeeInfo;
+}
+function isNotEmpty(value) {
+  return value !== undefined && value !== null && value !== '';
+}
 </script>
 <style>
 .employees-data {

JSDemos/Demos/Autocomplete/Overview/Vue/index.html

@@ -7,6 +7,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
     <link rel="stylesheet" type="text/css" href="../../../../../node_modules/devextreme-dist/css/dx.light.css" />
 
+    <script type="module">
+      import * as vueCompilerSFC from "../../../../../node_modules/@vue/compiler-sfc/dist/compiler-sfc.esm-browser.js";
+
+      window.vueCompilerSFC = vueCompilerSFC;
+    </script>
+    <script src="../../../../../node_modules/typescript/lib/typescript.js"></script>
     <script src="../../../../../node_modules/core-js/client/shim.min.js"></script>
     <script src="../../../../../node_modules/systemjs/dist/system.js"></script>
     <script type="text/javascript" src="config.js"></script>

JSDemos/Demos/Calendar/Overview/Vue/App.vue

@@ -100,89 +100,82 @@
     </div>
   </div>
 </template>
-<script>
+<script setup lang="ts">
+import { ref } from 'vue';
 import DxCheckBox from 'devextreme-vue/check-box';
 import DxSelectBox from 'devextreme-vue/select-box';
 import DxDateBox from 'devextreme-vue/date-box';
 import DxCalendar from 'devextreme-vue/calendar';
 
-export default {
-  components: {
-    DxCheckBox,
-    DxSelectBox,
-    DxDateBox,
-    DxCalendar,
-  },
-  data() {
-    return {
-      minDateValue: null,
-      maxDateValue: null,
-      disabledDates: null,
-      firstDay: 0,
-      showWeekNumbers: false,
-      weekNumberRule: 'auto',
-      currentValue: new Date(),
-      zoomLevels: ['month', 'year', 'decade', 'century'],
-      cellTemplate: 'cell',
-      disabled: false,
-      zoomLevel: 'month',
-      weekDays: [
-        { id: 0, text: 'Sunday' },
-        { id: 1, text: 'Monday' },
-        { id: 2, text: 'Tuesday' },
-        { id: 3, text: 'Wednesday' },
-        { id: 4, text: 'Thursday' },
-        { id: 5, text: 'Friday' },
-        { id: 6, text: 'Saturday' },
-      ],
-      weekNumberRules: ['auto', 'firstDay', 'firstFourDays', 'fullWeek'],
-    };
-  },
-  methods: {
-    isWeekend(date) {
-      const day = date.getDay();
-      return day === 0 || day === 6;
-    },
-    setMinDate({ value }) {
-      this.minDateValue = value
-        ? new Date((new Date()).getTime() - 1000 * 60 * 60 * 24 * 3)
-        : null;
-    },
-    setMaxDate({ value }) {
-      this.maxDateValue = value
-        ? new Date((new Date()).getTime() + 1000 * 60 * 60 * 24 * 3)
-        : null;
-    },
-    disableWeekend({ value }) {
-      this.disabledDates = value
-        ? (data) => data.view === 'month' && this.isWeekend(data.date)
-        : null;
-    },
-    useCellTemplate({ value }) {
-      this.cellTemplate = value ? 'custom' : 'cell';
-    },
-    getCellCssClass({ date, view }) {
-      let cssClass = '';
-      const holidays = [[1, 0], [4, 6], [25, 11]];
-
-      if (view === 'month') {
-        if (!date) {
-          cssClass = 'week-number';
-        } else {
-          if (this.isWeekend(date)) { cssClass = 'weekend'; }
-
-          holidays.forEach((item) => {
-            if (date.getDate() === item[0] && date.getMonth() === item[1]) {
-              cssClass = 'holiday';
-            }
-          });
+const minDateValue = ref(null);
+const maxDateValue = ref(null);
+const disabledDates = ref(null);
+const firstDay = ref(0);
+const showWeekNumbers = ref(false);
+const weekNumberRule = ref('auto');
+const currentValue = ref(new Date());
+const zoomLevels = ['month', 'year', 'decade', 'century'];
+const cellTemplate = ref('cell');
+const disabled = ref(false);
+const zoomLevel = ref('month');
+const weekDays = [
+  { id: 0, text: 'Sunday' },
+  { id: 1, text: 'Monday' },
+  { id: 2, text: 'Tuesday' },
+  { id: 3, text: 'Wednesday' },
+  { id: 4, text: 'Thursday' },
+  { id: 5, text: 'Friday' },
+  { id: 6, text: 'Saturday' },
+];
+const weekNumberRules = ['auto', 'firstDay', 'firstFourDays', 'fullWeek'];
+
+function isWeekend(date) {
+  const day = date.getDay();
+  return day === 0 || day === 6;
+}
+
+function setMinDate({ value }) {
+  minDateValue.value = value
+    ? new Date((new Date()).getTime() - 1000 * 60 * 60 * 24 * 3)
+    : null;
+}
+
+function setMaxDate({ value }) {
+  maxDateValue.value = value
+    ? new Date((new Date()).getTime() + 1000 * 60 * 60 * 24 * 3)
+    : null;
+}
+
+function disableWeekend({ value }) {
+  disabledDates.value = value
+    ? (data) => data.view === 'month' && isWeekend(data.date)
+    : null;
+}
+
+function useCellTemplate({ value }) {
+  cellTemplate.value = value ? 'custom' : 'cell';
+}
+
+function getCellCssClass({ date, view }) {
+  let cssClass = '';
+  const holidays = [[1, 0], [4, 6], [25, 11]];
+
+  if (view === 'month') {
+    if (!date) {
+      cssClass = 'week-number';
+    } else {
+      if (isWeekend(date)) { cssClass = 'weekend'; }
+
+      holidays.forEach((item) => {
+        if (date.getDate() === item[0] && date.getMonth() === item[1]) {
+          cssClass = 'holiday';
         }
-      }
+      });
+    }
+  }
 
-      return cssClass;
-    },
-  },
-};
+  return cssClass;
+}
 </script>
 <style scoped>
 #container {

JSDemos/Demos/Calendar/Overview/Vue/index.html

@@ -8,6 +8,12 @@
     <link rel="stylesheet" type="text/css" href="../../../../../node_modules/devextreme-dist/css/dx.light.css" />
     <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
 
+    <script type="module">
+      import * as vueCompilerSFC from "../../../../../node_modules/@vue/compiler-sfc/dist/compiler-sfc.esm-browser.js";
+
+      window.vueCompilerSFC = vueCompilerSFC;
+    </script>
+    <script src="../../../../../node_modules/typescript/lib/typescript.js"></script>
     <script src="../../../../../node_modules/core-js/client/shim.min.js"></script>
     <script src="../../../../../node_modules/systemjs/dist/system.js"></script>
     <script type="text/javascript" src="config.js"></script>

JSDemos/Demos/CheckBox/Overview/Vue/App.vue

@@ -79,42 +79,17 @@
     </div>
   </div>
 </template>
-<script>
+<script setup lang="ts">
+import { ref } from 'vue';
 import { DxCheckBox } from 'devextreme-vue/check-box';
 
-export default {
-  components: {
-    DxCheckBox,
-  },
+const checkBoxValue = ref(null);
 
-  data() {
-    return {
-      checkBoxValue: null,
-    };
-  },
-
-  computed: {
-    checkedLabel() {
-      return { 'aria-label': 'Checked' };
-    },
-    unCheckedLabel() {
-      return { 'aria-label': 'Unchecked' };
-    },
-    indeterminateLabel() {
-      return { 'aria-label': 'Indeterminate' };
-    },
-    threeStateModeLabel() {
-      return { 'aria-label': 'Three state mode' };
-    },
-    handleValueChangeLabel() {
-      return { 'aria-label': 'Handle value change' };
-    },
-    disabledLabel() {
-      return { 'aria-label': 'Disabled' };
-    },
-    customSizeLabel() {
-      return { 'aria-label': 'Custom size' };
-    },
-  },
-};
+const checkedLabel = { 'aria-label': 'Checked' };
+const unCheckedLabel = { 'aria-label': 'Unchecked' };
+const indeterminateLabel = { 'aria-label': 'Indeterminate' };
+const threeStateModeLabel = { 'aria-label': 'Three state mode' };
+const handleValueChangeLabel = { 'aria-label': 'Handle value change' };
+const disabledLabel = { 'aria-label': 'Disabled' };
+const customSizeLabel = { 'aria-label': 'Custom size' };
 </script>

JSDemos/Demos/CheckBox/Overview/Vue/index.html

@@ -8,6 +8,12 @@
     <link rel="stylesheet" type="text/css" href="../../../../../node_modules/devextreme-dist/css/dx.light.css" />
     <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
 
+    <script type="module">
+      import * as vueCompilerSFC from "../../../../../node_modules/@vue/compiler-sfc/dist/compiler-sfc.esm-browser.js";
+
+      window.vueCompilerSFC = vueCompilerSFC;
+    </script>
+    <script src="../../../../../node_modules/typescript/lib/typescript.js"></script>
     <script src="../../../../../node_modules/core-js/client/shim.min.js"></script>
     <script src="../../../../../node_modules/systemjs/dist/system.js"></script>
     <script type="text/javascript" src="config.js"></script>