Integrated latest changes at 06-28-2024 4:30:15 AM

Author: SyncfusionBuild

ej2-vue-toc.html

@@ -865,7 +865,7 @@
 </li>
 <li>Collaborative Editing
           <ul>
-             <li><a href="/ej2-vue/document-editor/collaborative-editing/using-dot-net">Using ASP.NET</a></li>
+             <li><a href="/ej2-vue/document-editor/collaborative-editing/using-dot-net">Using ASP.NET Core</a></li>
              <li><a href="/ej2-vue/document-editor/collaborative-editing/using-java">Using Java</a></li>  
         </ul>
 </li>
@@ -1279,9 +1279,8 @@
                 <li><a href="/ej2-vue/grid/grouping/lazy-load-grouping">Lazy Load Grouping</a></li>
             </ul>
         </li>
-        <li>Filtering
+        <li><a href="/ej2-vue/grid/filtering/filtering">Filtering</a>
             <ul>
-                <li><a href="/ej2-vue/grid/filtering/filtering">Filtering</a></li>
                 <li><a href="/ej2-vue/grid/filtering/filter-bar">Filter Bar</a></li>
                 <li><a href="/ej2-vue/grid/filtering/filter-menu">Filter Menu</a></li>
                 <li><a href="/ej2-vue/grid/filtering/excel-like-filter">Excel like filter</a></li>
@@ -1335,14 +1334,9 @@
                 <li><a href="/ej2-vue/grid/pdf-export/exporting-grid-in-server">Exporting Grid in Server</a></li>
             </ul>
         </li>
-        <li>Excel Export
+        <li><a href="/ej2-vue/grid/excel-export/excel-exporting">Excel Export</a>
             <ul>
-                <li><a href="/ej2-vue/grid/excel-export/excel-exporting">Excel Export</a></li>
-                <li><a href="/ej2-vue/grid/excel-export/export-multiple-grids">Export Multiple Grids</a></li>
                 <li><a href="/ej2-vue/grid/excel-export/excel-export-options">Excel Export Options</a></li>
-                <li><a href="/ej2-vue/grid/excel-export/excel-cell-style-customization">Excel Cell Style Customization</a></li>
-                <li><a href="/ej2-vue/grid/excel-export/adding-header-and-footer">Adding Header and Footer</a></li>
-                <li><a href="/ej2-vue/grid/excel-export/exporting-hierarchy-grid">Exporting Hierarchy Grid</a></li>
                 <li><a href="/ej2-vue/grid/excel-export/exporting-with-templates">Excel Exporting with Templates</a></li>
                 <li><a href="/ej2-vue/grid/excel-export/exporting-grid-in-server">Exporting Grid in Server</a></li>
             </ul>

ej2-vue/appearance/icons.md

@@ -98,7 +98,10 @@ The following steps explain the direct rendering of the Syncfusion icon in the H
    The below code snippet represents a complete example of icon usage.
 
 {% tabs %}
-{% highlight html tabtitle="app.vue" %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/common/animation-multiple-cs1/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
 {% include code-snippet/common/animation-multiple-cs1/app.vue %}
 {% endhighlight %}
 {% endtabs %}
@@ -107,7 +110,7 @@ The following steps explain the direct rendering of the Syncfusion icon in the H
 
 ### Icon size
 
-The `ej2-icons` package offers options to display icons in different size modes. A user can use different icon sizes in their application based on touch or mouse mode. If the user is using touch mode, add `e-large` class to the element to make the icon easily interactable, or add the `e-small` or `e-medium` class in mouse mode.
+The `ej2-icons` package offers options to display icons in different size modes. A user can use different icon sizes in their application based on touch or mouse mode. If the user is using touch mode, add `e-large` class to the element to make the icon easily interactive, or add the `e-small` or `e-medium` class in mouse mode.
 
 The pre-defined icon size is present in the available classes listed below.
 * `e-small` - Sets the icon size as `8px`.
@@ -123,7 +126,10 @@ The pre-defined icon size is present in the available classes listed below.
     ```
 
 {% tabs %}
-{% highlight html tabtitle="app.vue" %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/common/animation-multiple-cs2/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
 {% include code-snippet/common/animation-multiple-cs2/app.vue %}
 {% endhighlight %}
 {% endtabs %}
@@ -135,7 +141,10 @@ The pre-defined icon size is present in the available classes listed below.
 The Syncfusion Vue icons can be customized with custom color and size by overriding the `e-icons` class. Customizing the icons in the library can be useful for making the icons more visually appealing and fitting to the design of the application. For example, a user can change the color of an icon to match the color scheme of their application, or increase the size of an icon to make it more visible on smaller screens. It may also be useful for creating a consistent look and feel across different parts of the application. Overall, customizing the icons in the library can improve the overall user experience of the application.
 
 {% tabs %}
-{% highlight html tabtitle="app.vue" %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/common/animation-multiple-cs3/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
 {% include code-snippet/common/animation-multiple-cs3/app.vue %}
 {% endhighlight %}
 {% endtabs %}
@@ -178,4 +187,4 @@ The complete package of Essential JS 2 icons is listed below. The corresponding
 
 ### Fluent
 
-<iframe class="doc-sample-frame" src="https://ej2.syncfusion.com/products/icons/fluent/demo.html" style="height:1000px;width:100%;"></iframe>
+<iframe class="doc-sample-frame" src="https://ej2.syncfusion.com/products/icons/fluent/demo.html" style="height:1000px;width:100%;"></iframe>

ej2-vue/appearance/material3.md

@@ -66,7 +66,10 @@ CSS variables allows you to dynamically change color values in real-time using J
 Here you can find the example for Material 3 customization using Css class.
 
 {% tabs %}
-{% highlight html tabtitle="app.vue" %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/common/material3-cs2/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
 {% include code-snippet/common/material3-cs2/app.vue %}
 {% endhighlight %}
 {% endtabs %}
@@ -88,7 +91,10 @@ With this CSS variable support, you can effortlessly customize the color variabl
 Syncfusion has implemented the Material 3 theme, offering both Light and Dark variants. In the Material 3 light theme, there are distinct class variables for both light and dark modes, providing flexibility for seamless switching between the two modes within your application.
 
 {% tabs %}
-{% highlight html tabtitle="app.vue" %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/common/material3-cs1/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
 {% include code-snippet/common/material3-cs1/app.vue %}
 {% endhighlight %}
 {% endtabs %}

ej2-vue/appearance/size-modes.md

@@ -29,7 +29,10 @@ The user can enable touch mode (bigger) for the entire application by adding the
 The user can enable touch mode (bigger) for a component by adding the `e-bigger` class to the `div` element that contains the component. Another way of enabling touch mode is by adding the `e-bigger` class using the available `cssClass` property of the component.
 
 {% tabs %}
-{% highlight html tabtitle="app.vue" %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/common/size-modes-cs1/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
 {% include code-snippet/common/size-modes-cs1/app.vue %}
 {% endhighlight %}
 {% endtabs %}
@@ -41,7 +44,10 @@ The user can enable touch mode (bigger) for a component by adding the `e-bigger`
 The user can change the size mode of the application between touch and normal (mouse) mode at runtime by adding and removing the `e-bigger` class. The following steps explain how to change the size mode of an application at runtime:
 
 {% tabs %}
-{% highlight html tabtitle="app.vue" %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/common/size-modes-cs2/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
 {% include code-snippet/common/size-modes-cs2/app.vue %}
 {% endhighlight %}
 {% endtabs %}
@@ -53,7 +59,10 @@ The user can change the size mode of the application between touch and normal (m
 The user can change the size mode of a component between touch and normal (mouse) mode at runtime by setting the `e-bigger` CSS class.
 
 {% tabs %}
-{% highlight html tabtitle="app.vue" %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/common/size-modes-cs3/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
 {% include code-snippet/common/size-modes-cs3/app.vue %}
 {% endhighlight %}
 {% endtabs %}

ej2-vue/code-snippet/common/animation-multiple-cs1/app-composition.vue

@@ -0,0 +1,37 @@
+
+
+
+<template>
+    <div class="icon-bar">
+        <span class="e-icons e-cut"></span>
+        <span class="e-icons e-copy"></span>
+        <span class="e-icons e-paste"></span>
+    </div>
+</template>
+<script setup>
+</script>
+<style>
+  
+.icon-bar {
+    width: 20%;
+    background-color: lightgrey;
+    overflow: auto;
+    margin-top: 20px;
+    margin-left: 240px;
+}
+
+.icon-bar span {
+    float: left;
+    width: 33%;
+    text-align: center;
+    padding: 12px 0;
+    transition: all 0.3s ease;
+}
+
+.icon-bar span:hover {
+    background-color: #e2e2e2;
+}
+</style>
+
+
+

ej2-vue/code-snippet/common/animation-multiple-cs1/app.vue

@@ -9,10 +9,6 @@
     </div>
 </template>
 <script>
-    import Vue from "vue";
-    export default {
-
-    }
 </script>
 <style>
   

ej2-vue/code-snippet/common/animation-multiple-cs2/app-composition.vue

@@ -0,0 +1,89 @@
+
+
+
+<template>
+    <div>
+        <p><b>Smaller Icons</b></p>
+        <div class="small-icon-bar">
+            <span class="e-icons e-small e-cut"></span>
+            <span class="e-icons e-small e-copy"></span>
+            <span class="e-icons e-small e-paste"></span>
+        </div>
+        <p><b>Medium Icons</b></p>
+        <div class="medium-icon-bar">
+            <span class="e-icons e-medium e-cut"></span>
+            <span class="e-icons e-medium e-copy"></span>
+            <span class="e-icons e-medium e-paste"></span>
+        </div>
+        <p><b>Larger Icons</b></p>
+        <div class="large-icon-bar">
+            <span class="e-icons e-large e-cut"></span>
+            <span class="e-icons e-large e-copy"></span>
+            <span class="e-icons e-large e-paste"></span>
+        </div>
+    </div>
+</template>
+<script setup>
+</script>
+<style>
+  
+.small-icon-bar {
+    width: 20%;
+    background-color: lightgrey;
+    overflow: auto;
+}
+
+.small-icon-bar span:hover {
+    background-color: #e2e2e2;
+}
+
+.small-icon-bar span {
+    float: left;
+    width: 33%;
+    text-align: center;
+    padding: 12px 0;
+    transition: all 0.3s ease;
+    font-size: 36px;
+}
+
+.medium-icon-bar {
+    width: 20%;
+    background-color: lightgrey;
+    overflow: auto;
+}
+
+.medium-icon-bar span:hover {
+    background-color: #e2e2e2;
+}
+
+.medium-icon-bar span {
+    float: left;
+    width: 33%;
+    text-align: center;
+    padding: 12px 0;
+    transition: all 0.3s ease;
+    font-size: 36px;
+}
+
+.large-icon-bar {
+    width: 20%;
+    background-color: lightgrey;
+    overflow: auto;
+}
+
+.large-icon-bar span:hover {
+    background-color: #e2e2e2;
+}
+
+.large-icon-bar span {
+    float: left;
+    width: 33%;
+    text-align: center;
+    padding: 12px 0;
+    transition: all 0.3s ease;
+    font-size: 36px;
+}
+</style>
+
+
+

ej2-vue/code-snippet/common/animation-multiple-cs2/app.vue

@@ -24,10 +24,6 @@
     </div>
 </template>
 <script>
-    import Vue from "vue";
-    export default {
-
-    }
 </script>
 <style>
   

ej2-vue/code-snippet/common/animation-multiple-cs3/app-composition.vue

@@ -0,0 +1,41 @@
+
+
+
+<template>
+    <div class="icon-bar">
+        <span class="e-icons e-cut"></span>
+        <span class="e-icons e-copy"></span>
+        <span class="e-icons e-paste"></span>
+    </div>
+</template>
+<script setup>
+</script>
+<style>
+  
+.e-icons {
+    color: #ffffff;
+}
+
+.icon-bar {
+    width: 20%;
+    background-color: #555;
+    overflow: auto;
+    margin-top: 20px;
+    margin-left: 240px;
+}
+
+.icon-bar span {
+    float: left;
+    width: 33%;
+    text-align: center;
+    padding: 12px 0;
+    transition: all 0.3s ease;
+}
+
+.icon-bar span:hover {
+    background-color: #000;
+}
+</style>
+
+
+

ej2-vue/code-snippet/common/animation-multiple-cs3/app.vue

@@ -9,10 +9,6 @@
     </div>
 </template>
 <script>
-    import Vue from "vue";
-    export default {
-
-    }
 </script>
 <style>
   

ej2-vue/code-snippet/common/animation-multiple-cs4/app-composition.vue

@@ -0,0 +1,34 @@
+<template>
+    <div id='container'>
+        <div ref='element1' id='element1'></div>
+        <div ref='element2' id='element2'></div>
+    </div>
+</template>
+<script setup>
+import { onMounted, ref } from 'vue';
+import { Animation } from '@syncfusion/ej2-base';
+
+const element1 = ref(null);
+const element2 = ref(null);
+
+onMounted(() => {
+    var animation = new Animation();
+    animation.animate(element1.value, { name: 'FadeOut' });
+    animation.animate(element2.value, { name: 'ZoomOut' });
+})
+</script>
+<style>
+#element1,
+#element2 {
+    background: #333333;
+    border: 1px solid #cecece;
+    box-sizing: border-box;
+    float: left;
+    height: 100px;
+    width: 100px;
+}
+
+#element2 {
+    margin-left: 20px;
+}
+</style>