DOCINFRA-2341_merged_using_automation

ej2-vue/Release-notes/28.1.35.md

@@ -0,0 +1,16 @@
+---
+title: Essential Studio for Vue Weekly Release Release Notes  
+description: Essential Studio for Vue Weekly Release Release Notes  
+platform: ej2-vue
+documentation: ug
+---
+
+# Essential Studio for Vue  Release Notes  
+
+{% include release-info.html date="December 19, 2024"  version="v28.1.35" %}
+
+{% directory path: _includes/release-notes/v28.1.35 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}

ej2-vue/Release-notes/28.1.36.md

@@ -0,0 +1,16 @@
+---
+title: Essential Studio for Vue Weekly Release Release Notes  
+description: Essential Studio for Vue Weekly Release Release Notes  
+platform: ej2-vue
+documentation: ug
+---
+
+# Essential Studio for Vue  Release Notes  
+
+{% include release-info.html date="December 24, 2024"  version="v28.1.36" %}
+
+{% directory path: _includes/release-notes/v28.1.36 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}

ej2-vue/Release-notes/28.1.37.md

@@ -0,0 +1,16 @@
+---
+title: Essential Studio for Vue Weekly Release Release Notes  
+description: Essential Studio for Vue Weekly Release Release Notes  
+platform: ej2-vue
+documentation: ug
+---
+
+# Essential Studio for Vue  Release Notes  
+
+{% include release-info.html date="December 31, 2024"  version="v28.1.37" %}
+
+{% directory path: _includes/release-notes/v28.1.37 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}

ej2-vue/Release-notes/28.1.38.md

@@ -0,0 +1,16 @@
+---
+title: Essential Studio for Vue Weekly Release Release Notes  
+description: Essential Studio for Vue Weekly Release Release Notes  
+platform: ej2-vue
+documentation: ug
+---
+
+# Essential Studio for Vue  Release Notes  
+
+{% include release-info.html date="January 07, 2025"  version="v28.1.38" %}
+
+{% directory path: _includes/release-notes/v28.1.38 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}

ej2-vue/Release-notes/28.1.39.md

@@ -0,0 +1,16 @@
+---
+title: Essential Studio for Vue Weekly Release Release Notes  
+description: Essential Studio for Vue Weekly Release Release Notes  
+platform: ej2-vue
+documentation: ug
+---
+
+# Essential Studio for Vue  Release Notes  
+
+{% include release-info.html date="January 14, 2025"  version="v28.1.39" %}
+
+{% directory path: _includes/release-notes/v28.1.39 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}

ej2-vue/Release-notes/28.1.41.md

@@ -0,0 +1,16 @@
+---
+title: Essential Studio for Vue Weekly Release Release Notes  
+description: Essential Studio for Vue Weekly Release Release Notes  
+platform: ej2-vue
+documentation: ug
+---
+
+# Essential Studio for Vue  Release Notes  
+
+{% include release-info.html date="January 21, 2025"  version="v28.1.41" %}
+
+{% directory path: _includes/release-notes/v28.1.41 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}

ej2-vue/accumulation-chart/advanced-accessibility-configuration.md

@@ -0,0 +1,74 @@
+---
+layout: post
+title: Accessibility customization in Syncfusion Vue Pie chart component.
+description: Learn here all about Accessibility customization in Syncfusion Vue Accumulation chart component of Syncfusion Essential JS 2 and more.
+control: Accessibility customization
+platform: ej2-vue
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Accessibility customization
+
+The Syncfusion® Vue Accumulation Chart component is structured to visualize data in a graphical manner. It provides robust customization options for accessibility, allowing you to enhance the user experience for those with disabilities. The main attributes of the Vue Accumulation Chart component's accessibility customization are briefly explained in this section.
+
+The accumulation chart component has a number of characteristics that enable accessibility features to be customized, including:
+
+* [`accessibilityDescription`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/accessibilityModel/#accessibilitydescription) - Provides a text description for the accumulation chart, improving support for screen readers.
+* [`accessibilityRole`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/accessibilityModel/#accessibilityrole) - Specifies the role of the accumulation chart, helping screen readers to identify the element appropriately.
+* [`focusable`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/accessibilityModel/#focusable) - Allows the accumulation chart to receive focus, making it accessible via keyboard navigation.
+* [`focusBorderColor`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/#focusbordercolor) - Sets the color of the focus border, enhancing visibility when the accumulation chart is focused.
+* [`focusBorderMargin`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/#focusbordermargin) - Defines the margin around the focus border.
+* [`focusBorderWidth`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/#focusborderwidth) - Specifies the width of the focus border.
+* [`tabIndex`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/accessibilityModel/#tabindex) - Specifies the tab order for the accumulation chart element, enabling efficient keyboard navigation.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chart/accessibility/pie-chart/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chart/accessibility/pie-chart/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/accessibility/pie-chart" %}
+
+## Series
+
+The [`series`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/#series) supports the customization of accessibility for data points, allowing key characteristics to be adjusted for enhanced accessibility, such as:
+
+* [`accessibilityDescription`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/accessibilityModel/#accessibilitydescription) - Provides a text description for the series root element, enhancing support for screen readers.
+* [`accessibilityRole`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/accessibilityModel/#accessibilityrole) - Specifies the role of the series, helping screen readers to identify the element appropriately.
+* [`focusable`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/accessibilityModel/#focusable) - Allows the series to receive focus, making it accessible via keyboard navigation.
+* [`tabIndex`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/accessibilityModel/#tabindex) - Specifies the tab order of the series element, enabling efficient keyboard navigation.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chart/accessibility/series/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chart/accessibility/series/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/accessibility/series" %}
+
+## Legend
+
+The [`legendSettings`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/#legendsettings) provide information about the series shown in the accumulation chart. The following [`accessibility`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/legendSettingsModel/#accessibility) properties in [`legendSettings`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/#legendsettings) can be used to alter the accessibility of the accumulation chart's legend:
+
+* [`accessibilityDescription`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/accessibilityModel/#accessibilitydescription) - Provides a text description for the legend root element, enhancing support for screen readers..
+* [`accessibilityRole`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/accessibilityModel/#accessibilityrole) - Specifies the role of the legend items to screen readers, providing appropriate context.
+* [`focusable`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/accessibilityModel/#focusable) - Specifies whether legend items are focusable via keyboard navigation.
+* [`tabIndex`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/accessibilityModel/#tabindex) - Specifies the tab order of the legend element, enabling efficient keyboard navigation.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chart/accessibility/legend/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chart/accessibility/legend/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/accessibility/legend" %}

ej2-vue/accumulation-chart/legend.md

@@ -187,4 +187,19 @@ The [`itemPadding`](https://ej2.syncfusion.com/vue/documentation/api/accumulatio
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "page.domainurl/code-snippet/chart/series/pie-cs19" %}
+{% previewsample "page.domainurl/code-snippet/chart/series/pie-cs19" %}
+
+## Legend layout
+
+The [`layout`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/legendSettingsModel/#layout) property in [`legendSettings`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/#legendsettings) allows you to display the legend either horizontally or vertically. By default, the [`layout`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/legendSettingsModel/#layout) is set to **Auto**. The [`maximumColumns`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/legendSettingsModel/#maximumcolumns) property in [`legendSettings`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/#legendsettings) defines the maximum number of columns that can be displayed within the available space when using the auto layout. Additionally, enabling the [`fixedWidth`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/legendSettingsModel/#fixedwidth) property in [`legendSettings`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/#legendsettings) ensures that all legend items are displayed with equal widths. The width of each item is determined by the maximum width among the legend items.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chart/series/pie-cs41/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chart/series/pie-cs41/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/series/pie-cs41" %}

ej2-vue/accumulation-chart/tool-tip.md

@@ -128,4 +128,19 @@ By default, tooltip shows information of x and y value in points. You can show m
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "page.domainurl/code-snippet/chart/series/pie-cs33" %}
+{% previewsample "page.domainurl/code-snippet/chart/series/pie-cs33" %}
+
+## Enable highlight
+
+By setting the [`enableHighlight`](https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/tooltipSettingsModel/#enablehighlight) property to **true**, the hovered pie slice is highlighted, while the remaining slices are dimmed, enhancing focus and clarity.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chart/series/pie-cs42/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chart/series/pie-cs42/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/series/pie-cs42" %}

ej2-vue/appearance/css-variables.md

@@ -17,16 +17,19 @@ Syncfusion currently offers two modern and highly customizable themes using CSS
 * Material 3 Theme
 * Fluent 2 Theme
 * Bootstrap 5.3 Theme
+* Tailwind 3.4 Theme
 
 ## CSS themes - Syncfusion Vue components
 
-[Material 3](https://m3.material.io/), [Fluent 2](https://fluent2.microsoft.design/get-started/whatisnew) and [Bootstrap 5.3](https://getbootstrap.com/docs/5.3/getting-started/introduction/) themes have been introduced across all EJ2 Controls, featuring both `light` and `dark` variants. This themes utilizes `CSS variables` to allow easy customization of control colors in CSS format. With this implementation, users can seamlessly switch between light and dark color schemes, providing a flexible solution to meet their preferences and application needs.
+[Material 3](https://m3.material.io/), [Fluent 2](https://fluent2.microsoft.design/get-started/whatisnew), [Bootstrap 5.3](https://getbootstrap.com/docs/5.3/getting-started/introduction/) and [Tailwind 3.4](https://tailwindcss.com/docs/installation) themes have been introduced across all EJ2 Controls, featuring both `light` and `dark` variants. This themes utilizes `CSS variables` to allow easy customization of control colors in CSS format. With this implementation, users can seamlessly switch between light and dark color schemes, providing a flexible solution to meet their preferences and application needs.
 
 > Kindly note that in the Material 3 theme, CSS variables with rgb() values are used for color variables. The use of hex values in this context may lead to improper functionality. For example, in previous versions of the Material theme or other themes, the primary color variable was defined as follows: $primary: #6200ee;. However, in the Material 3 theme, the primary color variable is defined as follows: --color-sf-primary: 98, 0, 238;.
 
 ### Utilization of CSS variables in modern themes
 
-Modern themes like Material 3, Fluent 2 and Bootstrap 5.3 incorporate support with CSS variables, where `Material 3` utilizes `rgb()` values for customizing colors while `Fluent 2` uses `hex` values for color customization. `Bootstrap 5.3` allows color customization with both  `rgb()` and `hex` values. For more information you can refer this [documentation](./theme#syncfusion-material-3-theme) for color variables of these themes.  The examples below shows CSS variables with their values used for the respective themes.
+Modern themes make it easy to change the colors of controls using CSS variables. Each theme has its own way of setting these variables, so it's important to follow the specific instructions for each theme. Doing this helps keep the styling consistent and efficient across different parts of your application.
+
+Below are examples of how CSS variables can be defined for these themes:
 
 {% tabs %}
 {% highlight ts tabtitle="material3.css" %}
@@ -38,6 +41,9 @@ Modern themes like Material 3, Fluent 2 and Bootstrap 5.3 incorporate support wi
 {% highlight ts tabtitle="bootstrap5.3.css" %}
 {% include code-snippet/common/css-value-cs1/bootstrap5.3.css %}
 {% endhighlight %}
+{% highlight css tabtitle="tailwind3.4.css" %}
+{% include code-snippet/common/css-value-cs1/tailwind3.css %}
+{% endhighlight %}
 {% endtabs %}
 
 ### How to get these themes?
@@ -52,9 +58,11 @@ To access themes provided by Syncfusion, you have two primary options,
 |Package  | [Material 3 Light](https://www.npmjs.com/package/@syncfusion/ej2-material3-theme) | [Material 3 Dark](https://www.npmjs.com/package/@syncfusion/ej2-material3-dark-theme) |
 |  | [Fluent 2 Light](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) | [Fluent 2 Dark](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-dark-theme) |
 |  | [Bootstrap 5.3 Light](https://www.npmjs.com/package/@syncfusion/ej2-bootstrap5.3-theme) | [Bootstrap 5.3 Dark](https://www.npmjs.com/package/@syncfusion/ej2-bootstrap5.3-dark-theme) |
+|  | [Tailwind 3.4 Light](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) | [Tailwind 3.4 Dark](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-dark-theme) |
 | CDN  | [Material 3 Light](https://cdn.syncfusion.com/ej2/27.1.48/material3.css)  |  [Material 3 Dark](https://cdn.syncfusion.com/ej2/27.1.48/material3-dark.css)  |
 |  |  [Fluent 2 light](https://cdn.syncfusion.com/ej2/27.1.48/fluent2.css)  |  [Fluent 2 Dark](https://cdn.syncfusion.com/ej2/27.1.48/fluent2-dark.css)  |
 |  |  [Bootstrap5.3 light](https://cdn.syncfusion.com/ej2/27.1.48/bootstrap5.3.css)  |  [Bootstrap 5.3 Dark](https://cdn.syncfusion.com/ej2/27.1.48/bootstrap5.3-dark.css)  |
+|  | [Tailwind 3.4 Light](https://cdn.syncfusion.com/ej2/28.1.33/tailwind3.css) | [Tailwind 3.4 Dark](https://cdn.syncfusion.com/ej2/28.1.33/tailwind3-dark.css) |
 
 ### Color Customization in themes
 
@@ -116,11 +124,29 @@ Example for `Bootstrap 5.3` customization using CSS class.
 
 ![customized primary value](images/bootstrap5.3-customize.png)
 
+Example for `Tailwind 3.4` customization using CSS class.
+
+{% tabs %}
+{% highlight html tabtitle="app.vue" %}
+{% include code-snippet/common/tailwind3-cs2/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/common/tailwind3-cs2" %}
+
+**Default primary value**
+
+![default primary value](images/tailwind3-default.png)
+
+**Customized primary value**
+
+![customized primary value](images/tailwind3-customize.png)
+
 With this CSS variable support, you can effortlessly customize the color variable values for Syncfusion Vue Components.
 
 ### Switching Light and Dark mode with CSS variables
 
-Switching between modes has become easier with the updated modern themes, which offer Light and Dark variants. In both the `Material 3` and `Fluent 2` light themes, there are distinct class variables for light and dark modes in a `single file`, providing flexibility for seamless switching between the two modes within your application.
+Switching between modes has become easier with the updated modern themes, which offer Light and Dark variants. In all themes, there are distinct class variables for light and dark modes in a `single file`, providing flexibility for seamless switching between the two modes within your application.
 
 {% tabs %}
 {% highlight html tabtitle="app.vue" %}
@@ -154,9 +180,21 @@ Similar to `Fluent 2`, we offer both Light and Dark variants with `Bootstrap 5.3
 
 {% previewsample "page.domainurl/code-snippet/common/bootstrap5.3-cs1" %}
 
+### Mode switching in Tailwind 3.4 theme
+
+Similar to `Fluent 2`, we offer both Light and Dark variants with `Tailwind 3.4`. In the Tailwind 3.4 theme, there are distinct class variables for light and dark modes, as shown in the preview below.
+
+{% tabs %}
+{% highlight html tabtitle="app.vue" %}
+{% include code-snippet/common/tailwind3-cs1/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/common/tailwind3-cs1" %}
+
 ### How to switch dark mode?
 
-To activate dark mode, just append the `e-dark-mode` class to the body section of your application for both `Material 3`, `Fluent 2` and `Bootstrap 5.3` themes. Once applied, the theme seamlessly switches to dark mode. Please refer to the example image below for visual guidance.
+To activate dark mode, just append the `e-dark-mode` class to the body section of your application for both `Material 3`, `Fluent 2`, `Bootstrap 5.3` and `Tailwind 3.4` themes. Once applied, the theme seamlessly switches to dark mode. Please refer to the example image below for visual guidance.
 
 `Material 3` dark mode
 
@@ -170,6 +208,10 @@ To activate dark mode, just append the `e-dark-mode` class to the body section o
 
 ![dark mode](images/bootstrap5.3-dark.png)
 
+`Tailwind 3.4` dark mode
+
+![dark mode](images/tailwind3-dark.png)
+
 ### ThemeStudio Application
 
 The ThemeStudio application now includes seamless integration with the Material 3, Fluent 2 and Bootstrap 5.3 themes, offering a comprehensive solution for customization requirements. This enhancement enables users to effortlessly customize and personalize their themes.