Skip to content

Commit 966c680

Browse files
SyncfusionBuildSyncfusionBuild
committed
Integrated latest changes at 12-12-2024 7:30:09 AM
1 parent ae766e0 commit 966c680

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

88 files changed

+3208
-113
lines changed

‎ej2-vue-toc.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -514,6 +514,19 @@
514514
<ul>
515515
<li><a href="/ej2-vue/chat-ui/getting-started">Getting Started</a></li>
516516
<li><a href="/ej2-vue/chat-ui/vue3-getting-started">Getting Started with Vue 3</a></li>
517+
<li><a href="/ej2-vue/chat-ui/messages">Messages</a></li>
518+
<li><a href="/ej2-vue/chat-ui/timebreaks">Time break</a></li>
519+
<li><a href="/ej2-vue/chat-ui/timestamp">Timestamp</a></li>
520+
<li><a href="/ej2-vue/chat-ui/typing-indicator">Typing indicator</a></li>
521+
<li><a href="/ej2-vue/chat-ui/load-on-demand">Load on-demand</a></li>
522+
<li><a href="/ej2-vue/chat-ui/header">Header</a></li>
523+
<li><a href="/ej2-vue/chat-ui/footer">Footer</a></li>
524+
<li><a href="/ej2-vue/chat-ui/templates">Templates</a></li>
525+
<li><a href="/ej2-vue/chat-ui/appearance">Appearance</a></li>
526+
<li><a href="/ej2-vue/chat-ui/globalization">Globalization</a></li>
527+
<li><a href="/ej2-vue/chat-ui/accessibility">Accessibility</a></li>
528+
<li><a href="/ej2-vue/chat-ui/methods">Methods</a></li>
529+
<li><a href="/ej2-vue/chat-ui/events">Events</a></li>
517530
</ul>
518531
</li><li>
519532
CheckBox

‎ej2-vue/chat-ui/accessibility.md

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
---
2+
layout: post
3+
title: Accessibility in Vue Chat UI component | Syncfusion
4+
description: Learn here all about Accessibility in Syncfusion Vue Chat UI component of Syncfusion Essential JS 2 and more.
5+
platform: ej2-vue
6+
control: Chat UI
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Accessibility in Vue Chat UI component
12+
13+
The Chat UI component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
14+
15+
The accessibility compliance for the Chat UI component is outlined below.
16+
17+
| Accessibility Criteria | Compatibility |
18+
| -- | -- |
19+
| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
20+
| [Section 508 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
21+
| [Screen Reader Support](../common/accessibility#screen-reader-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
22+
| [Right-To-Left Support](../common/accessibility#right-to-left-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
23+
| [Color Contrast](../common/accessibility#color-contrast) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
24+
| [Mobile Device Support](../common/accessibility#mobile-device-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
25+
| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
26+
| [Accessibility Checker Validation](../common/accessibility#ensuring-accessibility) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
27+
| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
28+
29+
<style>
30+
.post .post-content img {
31+
display: inline-block;
32+
margin: 0.5em 0;
33+
}
34+
</style>
35+
<div><img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> - All features of the component meet the requirement.</div>
36+
37+
<div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> - Some features of the component do not meet the requirement.</div>
38+
39+
<div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png" alt="No"> - The component does not meet the requirement.</div>
40+
41+
## WAI-ARIA attributes
42+
43+
The following ARIA attributes are used in the Chat UI component:
44+
45+
| Attributes | Purpose |
46+
| ------------ | ----------------------- |
47+
| `role=button` | Indicates that the element is clickable and triggers an action when activated by the user. |
48+
| `role=toolbar` | Specifies that the element is a toolbar. |
49+
| `aria-label` | Defines a string value that labels an interactive element for accessibility. |
50+
| `aria-orientation` | Specifies the orientation of the toolbar. |
51+
| `aria-disabled` | Indicates whether the toolbar or element is currently disabled and not interactive. |
52+
| `aria-multiline` | Indicates that a textbox accepts multiple lines of input or only a single line. |
53+
54+
## Keyboard interaction
55+
56+
The following keyboard shortcuts are supported by the Chat UI component.
57+
58+
| **Press** | **To do this** |
59+
| --- | --- |
60+
| <kbd>Enter</kbd> | Select the focused item or send a message when the input is focused. |
61+
| <kbd>Tab</kbd> | Moves focus forward through the interactive elements. |
62+
| <kbd>Shift + Tab</kbd> | Moves focus backward through the interactive elements. |
63+
| <kbd>Page Up</kbd> | Scroll up through chat history. |
64+
| <kbd>Page Down</kbd> | Scroll down through chat history. |
65+
| <kbd>Ctrl + Home</kbd> | Scroll to the first message. |
66+
| <kbd>Ctrl + End</kbd> | Scroll to the most recent message. |
67+
<b>Chat UI Toolbars</b>||
68+
| <kbd>Left Arrow</kbd> | Focuses the previous toolbar element. |
69+
| <kbd>Right Arrow</kbd> | Focuses the next toolbar element. |
70+
| <kbd>Enter / Space</kbd> | Select the focused item or activate the selected option. |
71+
| <kbd>Home</kbd> | Moves focus to the first toolbar element. |
72+
| <kbd>End</kbd> | Moves focus to the last toolbar element. |
73+
74+
## Ensuring accessibility
75+
76+
The Chat UI component's accessibility levels are ensured through an [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing.
77+
78+
## See also
79+
80+
* [Accessibility in Syncfusion components](../common/accessibility)

‎ej2-vue/chat-ui/appearance.md

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
---
2+
layout: post
3+
title: Appearance in Vue Chat UI component | Syncfusion
4+
description: Checkout and learn about Appearance with Vue Chat UI component of Syncfusion Essential JS 2 and more details.
5+
platform: ej2-vue
6+
control: Chat UI
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Appearance in Vue Chat UI component
12+
13+
## Setting placeholder
14+
15+
You can use the `placeholder` property to display the placeholder text that appears in the message input field to guide users on what to type. The default is `Type your message…`.
16+
17+
{% tabs %}
18+
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
19+
{% include code-snippet/chat-ui/appearance/placeholder/app-composition.vue %}
20+
{% endhighlight %}
21+
{% highlight html tabtitle="Options API (~/src/App.vue)" %}
22+
{% include code-snippet/chat-ui/appearance/placeholder/app.vue %}
23+
{% endhighlight %}
24+
{% endtabs %}
25+
26+
{% previewsample "page.domainurl/code-snippet/chat-ui/appearance/placeholder" %}
27+
28+
## Setting width
29+
30+
You can use the `width` property to specify the dimensions of the Chat UI within the application layout. By default, the value is `100%`.
31+
32+
{% tabs %}
33+
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
34+
{% include code-snippet/chat-ui/appearance/width/app-composition.vue %}
35+
{% endhighlight %}
36+
{% highlight html tabtitle="Options API (~/src/App.vue)" %}
37+
{% include code-snippet/chat-ui/appearance/width/app.vue %}
38+
{% endhighlight %}
39+
{% endtabs %}
40+
41+
{% previewsample "page.domainurl/code-snippet/chat-ui/appearance/width" %}
42+
43+
## Setting height
44+
45+
You can use the `height` property to specify the dimensions of the Chat UI within the application layout. By default, the value is `100%`.
46+
47+
{% tabs %}
48+
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
49+
{% include code-snippet/chat-ui/appearance/height/app-composition.vue %}
50+
{% endhighlight %}
51+
{% highlight html tabtitle="Options API (~/src/App.vue)" %}
52+
{% include code-snippet/chat-ui/appearance/height/app.vue %}
53+
{% endhighlight %}
54+
{% endtabs %}
55+
56+
{% previewsample "page.domainurl/code-snippet/chat-ui/appearance/height" %}
57+
58+
## CssClass
59+
60+
You can use the `cssClass` property to customize the appearance of the chat UI component.
61+
62+
{% tabs %}
63+
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
64+
{% include code-snippet/chat-ui/appearance/cssClass/app-composition.vue %}
65+
{% endhighlight %}
66+
{% highlight html tabtitle="Options API (~/src/App.vue)" %}
67+
{% include code-snippet/chat-ui/appearance/cssClass/app.vue %}
68+
{% endhighlight %}
69+
{% endtabs %}
70+
71+
{% previewsample "page.domainurl/code-snippet/chat-ui/appearance/cssClass" %}

‎ej2-vue/chat-ui/events.md

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
---
2+
layout: post
3+
title: Events in Vue Chat UI component | Syncfusion
4+
description: Checkout and learn about Events with Vue Chat UI component of Syncfusion Essential JS 2 and more details.
5+
platform: ej2-vue
6+
control: Chat UI
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Events in Vue Chat UI component component
12+
13+
This section describes the Chat UI events that will be triggered when appropriate actions are performed. The following events are available in the Chat UI component.
14+
15+
## Created
16+
17+
The Chat UI component triggers the `created` event when the component rendering is completed.
18+
19+
{% tabs %}
20+
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
21+
{% include code-snippet/chat-ui/events/created/app-composition.vue %}
22+
{% endhighlight %}
23+
{% highlight html tabtitle="Options API (~/src/App.vue)" %}
24+
{% include code-snippet/chat-ui/events/created/app.vue %}
25+
{% endhighlight %}
26+
{% endtabs %}
27+
28+
## Sending message
29+
30+
The `messageSend` event is triggered before sending a message in the Chat UI component.
31+
32+
{% tabs %}
33+
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
34+
{% include code-snippet/chat-ui/events/messageSend/app-composition.vue %}
35+
{% endhighlight %}
36+
{% highlight html tabtitle="Options API (~/src/App.vue)" %}
37+
{% include code-snippet/chat-ui/events/messageSend/app.vue %}
38+
{% endhighlight %}
39+
{% endtabs %}
40+
41+
## User Typing
42+
43+
The `userTyping` event is triggered when the user is typing a message in the Chat UI component.
44+
45+
{% tabs %}
46+
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
47+
{% include code-snippet/chat-ui/events/userTyping/app-composition.vue %}
48+
{% endhighlight %}
49+
{% highlight html tabtitle="Options API (~/src/App.vue)" %}
50+
{% include code-snippet/chat-ui/events/userTyping/app.vue %}
51+
{% endhighlight %}
52+
{% endtabs %}

‎ej2-vue/chat-ui/footer.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
layout: post
3+
title: Footer in Vue Chat UI component | Syncfusion
4+
description: Checkout and learn about Footer with Vue Chat UI component of Syncfusion Essential JS 2 and more details.
5+
platform: ej2-vue
6+
control: Chat UI
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Footer in Vue Chat UI component
12+
13+
## Show or hide footer
14+
15+
You can use showFooter property to enable or disable the chat footer.
16+
17+
## Footer template
18+
19+
> Refer to the [Templates](./templates#footer-template) section for more details about the Footer template.

‎ej2-vue/chat-ui/getting-started.md

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ documentation: ug
88
domainurl: ##DomainURL##
99
---
1010

11-
# Getting Started with the Vue Chat UI Component in Vue 2
11+
# Getting Started with the Vue Chat UI component in Vue 2
1212

1313
This article provides a step-by-step guide for setting up a Vue 2 project using [Vue-CLI](https://cli.vuejs.org/) and integrating the Syncfusion Vue Chat UI component using the [Composition API](https://vuejs.org/guide/introduction.html#composition-api) / [Options API](https://vuejs.org/guide/introduction.html#options-api).
1414

@@ -119,7 +119,6 @@ export default {
119119
<template>
120120
<div id="app">
121121
<div id='container' style="height: 400px; width: 400px;">
122-
<br>
123122
<ejs-chatui></ejs-chatui>
124123
</div>
125124
</div>
@@ -146,7 +145,7 @@ yarn run serve
146145

147146
## Configure messages and user
148147

149-
You can use the `messages` property to add messages and the `user` property to configure the current user for the chat.
148+
You can use the `<e-messages>` tag directive to group all the messages and `<e-message>` tag to define each message and the `user` property to configure the current user for the chat.
150149

151150
{% tabs %}
152151
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}

‎ej2-vue/chat-ui/globalization.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
layout: post
3+
title: Globalization in Vue Chat UI component | Syncfusion
4+
description: Checkout and learn about Globalization with Vue Chat UI component of Syncfusion Essential JS 2 and more details.
5+
platform: ej2-vue
6+
control: Chat UI
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Globalization in Vue Chat UI component
12+
13+
## Localization
14+
15+
The Chat UI can be localized to any culture by defining the text of the Chat UI in the corresponding culture. The default locale of the Chat UI is `en` (English). The following table represents the default text of the Chat UI in `en` culture.
16+
17+
|KEY|Text|
18+
|----|----|
19+
|oneUserTyping|{0} is typing|
20+
|twoUserTyping|{0} and {1} are typing|
21+
|threeUserTyping|{0}, {1}, and {2} other are typing|
22+
|multipleUsersTyping|{0}, {1}, and {2} others are typing|
23+
24+
## RTL
25+
26+
RTL provides an option to switch the text direction and layout of the Chat UI component from right to left by setting the `enableRtl` property to `true`.

0 commit comments

Comments
 (0)