-
Notifications
You must be signed in to change notification settings - Fork 609
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
93 changed files
with
763 additions
and
378 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,62 +1,67 @@ | ||
| <template> | ||
| <DxChat | ||
| v-model:items="messages" | ||
| v-model:user="currentUser" | ||
| v-model:typing-users="userChatTypingUsers" | ||
| @message-entered="onMessageEntered($event)" | ||
| @typing-start="userChatTypingStart()" | ||
| @typing-end="userChatTypingEnd()" | ||
| ></DxChat> | ||
| <DxChat | ||
| v-model:items="messages" | ||
| v-model:user="supportAgent" | ||
| v-model:typing-users="supportChatTypingUsers" | ||
| @message-entered="onMessageEntered($event)" | ||
| @typing-start="supportChatTypingStart()" | ||
| @typing-end="supportChatTypingEnd()" | ||
| ></DxChat> | ||
| <DxChat | ||
| v-model:items="messages" | ||
| v-model:user="currentUser" | ||
| v-model:typing-users="userChatTypingUsers" | ||
| @message-entered="onMessageEntered($event)" | ||
| @typing-start="userChatTypingStart()" | ||
| @typing-end="userChatTypingEnd()" | ||
| /> | ||
| <DxChat | ||
| v-model:items="messages" | ||
| v-model:user="supportAgent" | ||
| v-model:typing-users="supportChatTypingUsers" | ||
| @message-entered="onMessageEntered($event)" | ||
| @typing-start="supportChatTypingStart()" | ||
| @typing-end="supportChatTypingEnd()" | ||
| /> | ||
| </template> | ||
|
|
||
| <style scoped> | ||
| #app { | ||
| display: flex; | ||
| gap: 20px; | ||
| } | ||
| .dx-chat { | ||
| height: 710px; | ||
| } | ||
| .dx-avatar { | ||
| border: 1px solid var(--dx-color-border); | ||
| } | ||
| </style> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { ref } from 'vue'; | ||
| import DxChat from 'devextreme-vue/chat'; | ||
| import { messages, supportAgent, currentUser } from './data.ts'; | ||
| const userChatTypingUsers = ref([]); | ||
| const supportChatTypingUsers = ref([]); | ||
| function onMessageEntered(event) { | ||
| messages.value = [...messages.value, event.message]; | ||
| } | ||
| function userChatTypingStart() { | ||
| supportChatTypingUsers.value = [currentUser.value]; | ||
| } | ||
| function userChatTypingEnd() { | ||
| supportChatTypingUsers.value = []; | ||
| } | ||
| function supportChatTypingStart() { | ||
| userChatTypingUsers.value = [supportAgent.value]; | ||
| } | ||
| function supportChatTypingEnd() { | ||
| userChatTypingUsers.value = []; | ||
| } | ||
| import { ref } from 'vue'; | ||
| import DxChat from 'devextreme-vue/chat'; | ||
| import { | ||
| messages as initialMessages, | ||
| supportAgent, | ||
| currentUser, | ||
| } from './data.ts'; | ||
| const messages = ref(initialMessages); | ||
| const userChatTypingUsers = ref([]); | ||
| const supportChatTypingUsers = ref([]); | ||
| function onMessageEntered(event) { | ||
| messages.value = [...messages.value, event.message]; | ||
| } | ||
| function userChatTypingStart() { | ||
| supportChatTypingUsers.value = [currentUser]; | ||
| } | ||
| function userChatTypingEnd() { | ||
| supportChatTypingUsers.value = []; | ||
| } | ||
| function supportChatTypingStart() { | ||
| userChatTypingUsers.value = [supportAgent]; | ||
| } | ||
| function supportChatTypingEnd() { | ||
| userChatTypingUsers.value = []; | ||
| } | ||
| </script> | ||
|
|
||
| <style scoped> | ||
| #app { | ||
| display: flex; | ||
| gap: 20px; | ||
| } | ||
| .dx-chat { | ||
| height: 710px; | ||
| } | ||
| .dx-avatar { | ||
| border: 1px solid var(--dx-color-border); | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| DevExpress Pagination UI component allows users to navigate between pages and adjust page size at runtime. The Pagination component in this demo allows users to browse employee cards. | ||
|
|
||
| To set up a Pagination component, specify the following options: | ||
|
|
||
| - [itemCount](/Documentation/ApiReference/UI_Components/dxPagination/Configuration/#itemCount): the total number of elements in the target control. | ||
| - [pageSize](/Documentation/ApiReference/UI_Components/dxPagination/Configuration/#pageSize): the number of items per page. | ||
| - [allowedPageSizes](/Documentation/ApiReference/UI_Components/dxPagination/Configuration/#allowedPageSizes) : available page size choices. | ||
| - [pageIndex](/Documentation/ApiReference/UI_Components/dxPagination/Configuration/#pageIndex): page displayed first. | ||
| - [showNavigationButtons](/Documentation/ApiReference/UI_Components/dxPagination/Configuration/#showNavigationButtons): navigation button visibility. | ||
| - [showInfo](/Documentation/ApiReference/UI_Components/dxPagination/Configuration/#showInfo): information pane visibility. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.