Update Vue demos dataGrid to composition API style

JSDemos/Demos/DataGrid/AdvancedMasterDetailView/Vue/AddressTab.vue

@@ -14,27 +14,16 @@
   </DxForm>
 </template>
 
-<script>
-
+<script setup lang="ts">
 import { DxForm } from 'devextreme-vue/form';
 
-export default {
-  components: { DxForm },
-  props: {
-    data: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  data() {
-    return {
-      items: ['Address', 'City', 'Region', 'PostalCode', 'Country', 'Phone'],
-    };
-  },
-  methods: {
-    customizeItem(item) {
-      item.template = 'form-item';
-    },
-  },
+defineProps<{
+  data: object
+}>();
+
+const items = ['Address', 'City', 'Region', 'PostalCode', 'Country', 'Phone'];
+
+const customizeItem = (item) => {
+  item.template = 'form-item';
 };
 </script>

JSDemos/Demos/DataGrid/AdvancedMasterDetailView/Vue/App.vue

@@ -22,34 +22,20 @@
   </DxDataGrid>
 </template>
 
-<script>
+<script setup lang="ts">
 import {
   DxDataGrid,
   DxColumn,
   DxPaging,
   DxMasterDetail,
 } from 'devextreme-vue/data-grid';
-
 import { createStore } from 'devextreme-aspnet-data-nojquery';
 import MasterDetail from './MasterDetail.vue';
 
 const url = 'https://js.devexpress.com/Demos/Mvc/api/DataGridAdvancedMasterDetailView';
 
-export default {
-  components: {
-    DxDataGrid,
-    DxColumn,
-    DxPaging,
-    DxMasterDetail,
-    MasterDetail,
-  },
-  data() {
-    return {
-      suppliersData: createStore({
-        key: 'SupplierID',
-        loadUrl: `${url}/GetSuppliers`,
-      }),
-    };
-  },
-};
+const suppliersData = createStore({
+  key: 'SupplierID',
+  loadUrl: `${url}/GetSuppliers`,
+});
 </script>

JSDemos/Demos/DataGrid/AdvancedMasterDetailView/Vue/MasterDetail.vue

@@ -21,21 +21,13 @@
   </DxTabPanel>
 </template>
 
-<script>
+<script setup lang="ts">
 import { DxTabPanel, DxItem } from 'devextreme-vue/tab-panel';
-
 import OrdersTab from './OrdersTab.vue';
 import AddressTab from './AddressTab.vue';
 
-export default {
-  components: {
-    DxTabPanel, DxItem, OrdersTab, AddressTab,
-  },
-  props: {
-    masterDetailData: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-};
+defineProps<{
+  masterDetailData: any
+}>();
+
 </script>

JSDemos/Demos/DataGrid/AdvancedMasterDetailView/Vue/OrderHistory.vue

@@ -42,7 +42,7 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import {
   DxDataGrid,
   DxColumn,
@@ -51,36 +51,20 @@ import {
   DxTotalItem,
   DxValueFormat,
 } from 'devextreme-vue/data-grid';
-
 import { createStore } from 'devextreme-aspnet-data-nojquery';
+import { computed } from 'vue';
+
+const props = defineProps<{
+  productId: number | null
+}>();
 
 const url = 'https://js.devexpress.com/Demos/Mvc/api/DataGridAdvancedMasterDetailView';
 
-export default {
-  components: {
-    DxDataGrid,
-    DxColumn,
-    DxPaging,
-    DxSummary,
-    DxTotalItem,
-    DxValueFormat,
-  },
-  props: {
-    productId: {
-      type: Number,
-      default: null,
-    },
-  },
-  computed: {
-    orderHistoryStore() {
-      return this.productId === null ? null : {
-        store: createStore({
-          key: 'OrderID',
-          loadParams: { ProductID: this.productId },
-          loadUrl: `${url}/GetOrdersByProduct`,
-        }),
-      };
-    },
-  },
-};
+const orderHistoryStore = computed(() => (props.productId === null ? null : {
+  store: createStore({
+    key: 'OrderID',
+    loadParams: { ProductID: props.productId },
+    loadUrl: `${url}/GetOrdersByProduct`,
+  }),
+}));
 </script>

JSDemos/Demos/DataGrid/AdvancedMasterDetailView/Vue/OrdersTab.vue

@@ -24,26 +24,15 @@
   </DxForm>
 </template>
 
-<script>
-
+<script setup lang="ts">
+import { ref } from 'vue';
 import { DxForm, DxItem, DxLabel } from 'devextreme-vue/form';
 import ProductSelectBox from './ProductSelectBox.vue';
 import OrderHistory from './OrderHistory.vue';
 
-export default {
-  components: {
-    DxForm, DxItem, DxLabel, ProductSelectBox, OrderHistory,
-  },
-  props: {
-    supplierId: {
-      type: Number,
-      default: null,
-    },
-  },
-  data() {
-    return {
-      chosenProductId: null,
-    };
-  },
-};
+defineProps<{
+  supplierId: number
+}>();
+
+const chosenProductId = ref<null | number>(null);
 </script>

JSDemos/Demos/DataGrid/AdvancedMasterDetailView/Vue/ProductSelectBox.vue

@@ -3,46 +3,40 @@
     :defer-rendering="false"
     :data-source="dataSource"
     :input-attr="{ 'aria-label': 'Product' }"
-    :value="value"
+    :value="productId"
     value-expr="ProductID"
     display-expr="ProductName"
     @valueChanged="$emit('product-changed', $event.value)"
   />
 </template>
 
-<script>
-
+<script setup lang="ts">
+import { ref } from 'vue';
 import DxSelectBox from 'devextreme-vue/select-box';
 import { createStore } from 'devextreme-aspnet-data-nojquery';
 
+defineEmits(['product-changed']);
+
+const props = defineProps<{
+  supplierId: number
+}>();
+
 const url = 'https://js.devexpress.com/Demos/Mvc/api/DataGridAdvancedMasterDetailView';
 
-export default {
-  components: { DxSelectBox },
-  props: {
-    supplierId: {
-      type: Number,
-      default: null,
-    },
-  },
-  data() {
-    return {
-      dataSource: createStore({
-        key: 'ProductID',
-        loadParams: { SupplierID: this.supplierId },
-        loadUrl: `${url}/GetProductsBySupplier`,
-        onLoaded: this.setDefaultValue,
-      }),
-      value: null,
-    };
-  },
-  methods: {
-    setDefaultValue(items) {
-      const firstItem = items[0];
-      if (firstItem && this.value === null) {
-        this.value = firstItem.ProductID;
-      }
-    },
-  },
-};
+const dataSource = createStore({
+  key: 'ProductID',
+  loadParams: { SupplierID: props.supplierId },
+  loadUrl: `${url}/GetProductsBySupplier`,
+  onLoaded: setDefaultValue,
+});
+
+const productId = ref(null);
+
+function setDefaultValue(items) {
+  const firstItem = items[0];
+
+  if (firstItem && productId.value === null) {
+    productId.value = firstItem.ProductID;
+  }
+}
 </script>

JSDemos/Demos/DataGrid/AdvancedMasterDetailView/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="styles.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/DataGrid/AjaxRequest/Vue/App.vue

@@ -5,18 +5,8 @@
     data-source="../../../../data/customers.json"
   />
 </template>
-<script>
-
+<script setup lang="ts">
 import DxDataGrid from 'devextreme-vue/data-grid';
 
-export default {
-  components: {
-    DxDataGrid,
-  },
-  data() {
-    return {
-      columns: ['CompanyName', 'City', 'State', 'Phone', 'Fax'],
-    };
-  },
-};
+const columns = ['CompanyName', 'City', 'State', 'Phone', 'Fax'];
 </script>

JSDemos/Demos/DataGrid/AjaxRequest/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/DataGrid/Appearance/Vue/App.vue

@@ -67,27 +67,16 @@
     </div>
   </div>
 </template>
-<script>
+<script setup lang="ts">
+import { ref } from 'vue';
 import { DxDataGrid, DxColumn } from 'devextreme-vue/data-grid';
 import { DxCheckBox } from 'devextreme-vue/check-box';
-import service from './data.js';
+import { employees } from './data.js';
 
-export default {
-  components: {
-    DxDataGrid,
-    DxColumn,
-    DxCheckBox,
-  },
-  data() {
-    return {
-      employees: service.getEmployees(),
-      showColumnLines: false,
-      showRowLines: true,
-      showBorders: true,
-      rowAlternationEnabled: true,
-    };
-  },
-};
+const showColumnLines = ref(false);
+const showRowLines = ref(true);
+const showBorders = ref(true);
+const rowAlternationEnabled = ref(true);
 </script>
 <style scoped>
 .options {

JSDemos/Demos/DataGrid/Appearance/Vue/data.js

@@ -1,4 +1,4 @@
-const employees = [{
+export const employees = [{
   ID: 1,
   FirstName: 'John',
   LastName: 'Heart',
@@ -129,9 +129,3 @@ const employees = [{
   State: 'California',
   City: 'San Jose',
 }];
-
-export default {
-  getEmployees() {
-    return employees;
-  },
-};

JSDemos/Demos/DataGrid/Appearance/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>