Merge pull request #4 from DevExpress-Examples/vue

Vue

Author: LeSe0-devexpress

Vue/package-lock.json

@@ -4,7 +4,7 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --port 5050",
     "prebuild": "devextreme-license --out src/devextreme-license.ts --force",
     "build": "run-p type-check build-only",
     "preview": "vite preview",
@@ -14,8 +14,8 @@
     "lint": "eslint . --fix"
   },
   "dependencies": {
-    "devextreme": "26.1.2-beta",
-    "devextreme-vue": "26.1.2-beta",
+    "devextreme": "26.1.3",
+    "devextreme-vue": "26.1.3",
     "vue": "^3.2.45",
     "vue-router": "^4.1.6"
   },

Vue/package.json

@@ -1,8 +1,7 @@
-.main {
+body {
+  margin: 0;
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: #2c3e50;
-  margin: 50px 50px;
-  width: 90vh;
-}
+}

Vue/src/assets/main.css

@@ -1,28 +1,167 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
 
-import 'devextreme/dist/css/dx.material.blue.light.compact.css';
-import DxButton from 'devextreme-vue/button';
+import 'devextreme/dist/css/dx.fluent.blue.light.css';
+import DxDataGrid, {
+  DxAI,
+  DxAIAssistant,
+  DxColumn,
+  DxFilterRow,
+  DxGroupPanel,
+  DxHeaderFilter,
+  DxPager,
+  DxPaging,
+  DxSearchPanel,
+} from 'devextreme-vue/data-grid';
+import type dxChat from 'devextreme/ui/chat';
+import type { DxChatTypes } from 'devextreme-vue/chat';
+import type { DxButtonGroupTypes } from 'devextreme-vue/button-group';
 
-const props = defineProps({
-  text: {
-    type: String,
-    default: 'count',
+import AIService from '../service';
+import { AI_ASSISTANT_URL, AI_COLUMN_URL, sales } from '../data';
+
+const HELP_PROMPT = `💡 The DataGrid AI Assistant allows you to control the component using natural language. You can execute commands such as the following:
+  • Sort records
+  • Apply a filter
+  • Search for a specific value
+  • Group records by a field
+  • Focus and select rows
+  • Modify paging settings
+  • Pin, resize, and reorder columns
+  • Configure data summaries
+  • Pick a suggestion or enter a custom request to get started.`;
+
+const allowedPageSizes = [10, 25, 50, 100];
+
+const service = new AIService(AI_COLUMN_URL, AI_ASSISTANT_URL);
+const chatRef = ref<dxChat | null>(null);
+
+const chatOptions = {
+  onInitialized: (e: DxChatTypes.InitializedEvent) => {
+    chatRef.value = e.component ?? null;
   },
-});
-const count = ref(0);
-const buttonText = computed < string > (
-  () => `Click ${props.text}: ${count.value}`
-);
-function clickHandler() {
-  count.value += 1;
-}
+  user: { id: 'user' },
+  suggestions: {
+    items: [
+      { text: '💡 Help', prompt: HELP_PROMPT },
+      { text: '🔍 Filter Sector by Health', prompt: 'Filter Sector by Health' },
+      { text: '↕️ Sort by Region', prompt: 'Sort by Region' },
+      { text: '🧩 Group by Product', prompt: 'Group by Product', width: 170 },
+    ],
+    onItemClick: (e: DxButtonGroupTypes.ItemClickEvent) => {
+      const { prompt, text } = e.itemData;
+      const userId = text === '💡 Help' ? 'help' : 'user';
+
+      const message = {
+        id: Date.now(),
+        timestamp: new Date(),
+        author: { id: userId },
+        text: prompt,
+      };
+
+      chatRef.value
+        ?.getDataSource()
+        .store()
+        .push([
+          {
+            type: 'insert',
+            data: message,
+          },
+        ]);
+    },
+  },
+};
 </script>
+
 <template>
-  <div>
-    <DxButton
-      :text="buttonText"
-      @click="clickHandler"
-    />
+  <div class="demo-container">
+    <DxDataGrid
+      id="grid-container"
+      :data-source="sales"
+      :ai-integration="service.columnAiIntegration"
+      :show-borders="true"
+      key-expr="Id"
+      :filter-sync-enabled="true"
+    >
+      <DxSearchPanel
+        :visible="true"
+        :width="240"
+        placeholder="Search..."
+      />
+      <DxGroupPanel :visible="true"/>
+      <DxHeaderFilter :visible="true"/>
+      <DxFilterRow :visible="true"/>
+      <DxPaging :page-size="10"/>
+      <DxPager
+        :visible="true"
+        :allowed-page-sizes="allowedPageSizes"
+        :show-page-size-selector="true"
+      />
+
+      <DxAIAssistant
+        :enabled="true"
+        :ai-integration="service.assistantAiIntegration"
+        :chat="chatOptions"
+      />
+
+      <DxColumn data-field="Product"/>
+      <DxColumn
+        data-field="Amount"
+        caption="Sale Amount"
+        data-type="number"
+        format="currency"
+      />
+      <DxColumn
+        data-field="Region"
+        data-type="string"
+      />
+      <DxColumn
+        data-field="Sector"
+        data-type="string"
+      />
+      <DxColumn
+        data-field="SaleDate"
+        data-type="date"
+      />
+      <DxColumn
+        data-field="Customer"
+        data-type="string"
+      />
+      <DxColumn
+        name="AI column"
+        caption="AI Column"
+        type="ai"
+        :width="200"
+        :fixed="true"
+        fixed-position="right"
+        css-class="ai-cell"
+      >
+        <DxAI
+          :prompt="`
+            Identify the country where product is manufactured.
+            When looking up a country, consider Sector and Customers.
+          `"
+          mode="auto"
+          no-data-text="No data"
+        />
+      </DxColumn>
+    </DxDataGrid>
   </div>
 </template>
+
+<style>
+.demo-container {
+  display: flex;
+  justify-content: center;
+  margin: 20px;
+}
+
+#grid-container {
+  max-width: 1200px;
+  width: 100%;
+}
+
+#grid-container .ai-cell {
+  background-color: var(--dx-datagrid-row-alternation-bg);
+}
+</style>