From a72d78d4449d97b7cae1055e4e6267ffb0a60cae Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Sat, 16 Nov 2024 08:49:20 +0530 Subject: [PATCH 01/17] Integrated latest changes at 11-16-2024 7:30:21 AM --- ej2-vue/uploader/chunk-upload.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/ej2-vue/uploader/chunk-upload.md b/ej2-vue/uploader/chunk-upload.md index 51abb27f5..e1f9ae36c 100644 --- a/ej2-vue/uploader/chunk-upload.md +++ b/ej2-vue/uploader/chunk-upload.md @@ -99,6 +99,10 @@ The following example explains about chunk upload with cancel support. The server-side implementation entirely depends on the application requirements and logic. The following code snippet provides the server-side logic to handle the chunk upload using the uploader components. +>The `chunk-index` and `total-chunk` values are accessible through the form data using `Request.Form`, which retrieves these details from the incoming request. +* `chunk-index` - Indicates the index of the current chunk being received. +* `total-chunk` - Represents the total number of chunks for the file being uploaded. + ```c# public string uploads = Path.Combine(Directory.GetCurrentDirectory(), "Uploaded Files"); // Set your desired upload directory path From 33807f5f466081325789776bf8c7e7496a673193 Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Fri, 22 Nov 2024 08:49:51 +0530 Subject: [PATCH 02/17] Integrated latest changes at 11-22-2024 7:33:16 AM --- .../group/groupchild-cs1/app-composition.vue | 1 + .../diagram/group/groupchild-cs1/app.vue | 1 + .../diagram/group/groupchild-cs1/index.js | 1 + .../{indel.html => index.html} | 0 ej2-vue/diagram/complex-layout.md | 30 ++++---- ej2-vue/diagram/flowchart-layout.md | 24 +++---- ej2-vue/diagram/group.md | 2 +- ej2-vue/diagram/hierarchical-layout.md | 12 ++-- ej2-vue/diagram/layout-customization.md | 68 +++++++++---------- ej2-vue/diagram/layout-event.md | 12 ++-- ej2-vue/diagram/mindmap-layout.md | 14 ++-- ej2-vue/diagram/org-chart.md | 32 ++++----- ej2-vue/diagram/ports-appearance.md | 8 ++- ej2-vue/diagram/radial-layout.md | 12 ++-- ej2-vue/diagram/symbol-palette.md | 14 ++-- ej2-vue/diagram/symmetric-layout.md | 6 +- 16 files changed, 121 insertions(+), 116 deletions(-) rename ej2-vue/code-snippet/diagram/group/groupcollection-cs1/{indel.html => index.html} (100%) diff --git a/ej2-vue/code-snippet/diagram/group/groupchild-cs1/app-composition.vue b/ej2-vue/code-snippet/diagram/group/groupchild-cs1/app-composition.vue index d4acef62e..7c34c3735 100644 --- a/ej2-vue/code-snippet/diagram/group/groupchild-cs1/app-composition.vue +++ b/ej2-vue/code-snippet/diagram/group/groupchild-cs1/app-composition.vue @@ -22,6 +22,7 @@ let diagramInstance = null; onMounted(() => { diagramInstance = diagramRef.value.ej2Instances; + diagramInstance.select([diagramInstance.getObject('group1')]); }); const addChild = () => { diff --git a/ej2-vue/code-snippet/diagram/group/groupchild-cs1/app.vue b/ej2-vue/code-snippet/diagram/group/groupchild-cs1/app.vue index 1c4590554..9032c815d 100644 --- a/ej2-vue/code-snippet/diagram/group/groupchild-cs1/app.vue +++ b/ej2-vue/code-snippet/diagram/group/groupchild-cs1/app.vue @@ -26,6 +26,7 @@ export default { }, mounted() { diagramInstance = this.$refs.diagramRef.ej2Instances; + diagramInstance.select([diagramInstance.getObject('group1')]); }, methods: { addChild() { diff --git a/ej2-vue/code-snippet/diagram/group/groupchild-cs1/index.js b/ej2-vue/code-snippet/diagram/group/groupchild-cs1/index.js index 3f1549f9b..c4ce0f3f1 100644 --- a/ej2-vue/code-snippet/diagram/group/groupchild-cs1/index.js +++ b/ej2-vue/code-snippet/diagram/group/groupchild-cs1/index.js @@ -26,6 +26,7 @@ new Vue({ }, mounted() { diagramInstance = this.$refs.diagramRef.ej2Instances; + diagramInstance.select([diagramInstance.getObject('group1')]); }, methods: { addChild() { diff --git a/ej2-vue/code-snippet/diagram/group/groupcollection-cs1/indel.html b/ej2-vue/code-snippet/diagram/group/groupcollection-cs1/index.html similarity index 100% rename from ej2-vue/code-snippet/diagram/group/groupcollection-cs1/indel.html rename to ej2-vue/code-snippet/diagram/group/groupcollection-cs1/index.html diff --git a/ej2-vue/diagram/complex-layout.md b/ej2-vue/diagram/complex-layout.md index 34e94347e..dffedab6e 100644 --- a/ej2-vue/diagram/complex-layout.md +++ b/ej2-vue/diagram/complex-layout.md @@ -21,14 +21,14 @@ The following example demonstrates how to render a complex hierarchical tree lay {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/complexhiertree-cs1/app-composition.vue %} +{% include code-snippet/diagram/automatic-layout/complexhiertree-cs1/app-composition.vue %} {% endhighlight %} {% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/complexhiertree-cs1/app.vue %} +{% include code-snippet/diagram/automatic-layout/complexhiertree-cs1/app.vue %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/automaticlayout/complexhiertree-cs1" %} +{% previewsample "page.domainurl/code-snippet/diagram/automatic-layout/complexhiertree-cs1" %} ## Complex hierarchical tree layout with DataSource @@ -38,14 +38,14 @@ The following code example illustrates how to create a complex hierarchical tree {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/complexhiertree-cs2/app-composition.vue %} +{% include code-snippet/diagram/automatic-layout/complexhiertree-cs2/app-composition.vue %} {% endhighlight %} {% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/complexhiertree-cs2/app.vue %} +{% include code-snippet/diagram/automatic-layout/complexhiertree-cs2/app.vue %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/automaticlayout/complexhiertree-cs2" %} +{% previewsample "page.domainurl/code-snippet/diagram/automatic-layout/complexhiertree-cs2" %} ![Complex hierarchical tree layout](images/complex-2.png) @@ -61,14 +61,14 @@ The following code example illustrates how to create a complex hierarchical tree {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/complexhiertree-cs3/app-composition.vue %} +{% include code-snippet/diagram/automatic-layout/complexhiertree-cs3/app-composition.vue %} {% endhighlight %} {% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/complexhiertree-cs3/app.vue %} +{% include code-snippet/diagram/automatic-layout/complexhiertree-cs3/app.vue %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/automaticlayout/complexhiertree-cs3" %} +{% previewsample "page.domainurl/code-snippet/diagram/automatic-layout/complexhiertree-cs3" %} >Note: If you want to use line distribution in diagram layout, you need to inject LineDistribution module in the diagram. @@ -86,14 +86,14 @@ The following code illustrates how to allow a linear arrangement in diagram layo {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/complexhiertree-cs4/app-composition.vue %} +{% include code-snippet/diagram/automatic-layout/complexhiertree-cs4/app-composition.vue %} {% endhighlight %} {% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/complexhiertree-cs4/app.vue %} +{% include code-snippet/diagram/automatic-layout/complexhiertree-cs4/app.vue %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/automaticlayout/complexhiertree-cs4" %} +{% previewsample "page.domainurl/code-snippet/diagram/automatic-layout/complexhiertree-cs4" %} ## Enable routing for layout @@ -107,11 +107,11 @@ The following example shows how to activate enableRouting in the layout: {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/complexhiertree-cs5/app-composition.vue %} +{% include code-snippet/diagram/automatic-layout/complexhiertree-cs5/app-composition.vue %} {% endhighlight %} {% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/complexhiertree-cs5/app.vue %} +{% include code-snippet/diagram/automatic-layout/complexhiertree-cs5/app.vue %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/automaticlayout/complexhiertree-cs5" %} +{% previewsample "page.domainurl/code-snippet/diagram/automatic-layout/complexhiertree-cs5" %} diff --git a/ej2-vue/diagram/flowchart-layout.md b/ej2-vue/diagram/flowchart-layout.md index b8cdebc0f..9af6e0128 100644 --- a/ej2-vue/diagram/flowchart-layout.md +++ b/ej2-vue/diagram/flowchart-layout.md @@ -55,14 +55,14 @@ To render `flowchart` layout, you need to set the [`layoutType`](https://ej2.syn {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/flowchart-cs1/app-composition.vue %} +{% include code-snippet/diagram/automatic-layout/flowchart-cs1/app-composition.vue %} {% endhighlight %} {% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/flowchart-cs1/app.vue %} +{% include code-snippet/diagram/automatic-layout/flowchart-cs1/app.vue %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/automaticlayout/flowchart-cs1" %} +{% previewsample "page.domainurl/code-snippet/diagram/automatic-layout/flowchart-cs1" %} ![EJ2 Flowchart layout diagram](./images/flowchart-images/Flowchart_Layout.png) @@ -121,14 +121,14 @@ The following example demonstrates how to render a flowchart layout using nodes {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/flowchart-cs2/app-composition.vue %} +{% include code-snippet/diagram/automatic-layout/flowchart-cs2/app-composition.vue %} {% endhighlight %} {% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/flowchart-cs2/app.vue %} +{% include code-snippet/diagram/automatic-layout/flowchart-cs2/app.vue %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/automaticlayout/flowchart-cs2" %} +{% previewsample "page.domainurl/code-snippet/diagram/automatic-layout/flowchart-cs2" %} ## Customize flowchart layout orientation @@ -207,14 +207,14 @@ The following example shows flowchart layout with `yesBranchDirection` as `SameA {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/flowchart-cs3/app-composition.vue %} +{% include code-snippet/diagram/automatic-layout/flowchart-cs3/app-composition.vue %} {% endhighlight %} {% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/flowchart-cs3/app.vue %} +{% include code-snippet/diagram/automatic-layout/flowchart-cs3/app.vue %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/automaticlayout/flowchart-cs3" %} +{% previewsample "page.domainurl/code-snippet/diagram/automatic-layout/flowchart-cs3" %} The following table will explain the pictorial representation of the behavior: @@ -242,13 +242,13 @@ The following example shows how to set custom text to the yes branch and no bran {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/flowchart-cs4/app-composition.vue %} +{% include code-snippet/diagram/automatic-layout/flowchart-cs4/app-composition.vue %} {% endhighlight %} {% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/flowchart-cs4/app.vue %} +{% include code-snippet/diagram/automatic-layout/flowchart-cs4/app.vue %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/automaticlayout/flowchart-cs4" %} +{% previewsample "page.domainurl/code-snippet/diagram/automatic-layout/flowchart-cs4" %} ![EJ2 Flowchart layout diagram](./images/flowchart-images/Flowchart_CustomYesOrNoBranches.png) \ No newline at end of file diff --git a/ej2-vue/diagram/group.md b/ej2-vue/diagram/group.md index feefdf552..9fe195c87 100644 --- a/ej2-vue/diagram/group.md +++ b/ej2-vue/diagram/group.md @@ -63,7 +63,7 @@ The following code illustrates how to group at runtime. ## UnGroup nodes at runtime -Group node can be unGrouped dynamically, by using the [`diagram.unGroup`](https://ej2.syncfusion.com/vue/documentation/api/diagram/#ungroup) method. The following code example shows how to unGroup group node at runtime. +Group node can be ungrouped dynamically, by using the [`diagram.unGroup`](https://ej2.syncfusion.com/vue/documentation/api/diagram/#ungroup) method. The following code example shows how to ungroup a group node at runtime. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} diff --git a/ej2-vue/diagram/hierarchical-layout.md b/ej2-vue/diagram/hierarchical-layout.md index f5139d856..3519d8be3 100644 --- a/ej2-vue/diagram/hierarchical-layout.md +++ b/ej2-vue/diagram/hierarchical-layout.md @@ -18,14 +18,14 @@ To arrange the nodes in a hierarchical structure, specify the layout [`type`](ht {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/hierarchicallayout-cs-1/app-composition.vue %} +{% include code-snippet/diagram/automatic-layout/hierarchicallayout-cs-1/app-composition.vue %} {% endhighlight %} {% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/hierarchicallayout-cs-1/app.vue %} +{% include code-snippet/diagram/automatic-layout/hierarchicallayout-cs-1/app.vue %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/automaticlayout/hierarchicallayout-cs-1" %} +{% previewsample "page.domainurl/code-snippet/diagram/automatic-layout/hierarchicallayout-cs-1" %} >Note: If you want to use hierarchical tree layout in diagram, you need to inject HierarchicalTree in the diagram. @@ -35,14 +35,14 @@ You can create a hierarchical layout with data Source. The following code demons {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/hierarchicallayout-cs-2/app-composition.vue %} +{% include code-snippet/diagram/automatic-layout/hierarchicallayout-cs-2/app-composition.vue %} {% endhighlight %} {% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/hierarchicallayout-cs-2/app.vue %} +{% include code-snippet/diagram/automatic-layout/hierarchicallayout-cs-2/app.vue %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/automaticlayout/hierarchicallayout-cs-2" %} +{% previewsample "page.domainurl/code-snippet/diagram/automatic-layout/hierarchicallayout-cs-2" %} >Note: If you want to convert the data source into layout, you need to inject DataBinding along with HierarchicalTree module in the diagram. diff --git a/ej2-vue/diagram/layout-customization.md b/ej2-vue/diagram/layout-customization.md index 9d26e4139..4a14119a3 100644 --- a/ej2-vue/diagram/layout-customization.md +++ b/ej2-vue/diagram/layout-customization.md @@ -17,21 +17,21 @@ To explore layout properties, refer to [`Layout Properties`](https://ej2.syncfus ## Layout bounds -Diagram provides support to align the layout within any custom rectvue area. +Diagram provides support to align the layout within any custom rectangular area. The following example shows how to align the layout within the given layout bounds. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/layout-bounds-cs1/app-composition.vue %} +{% include code-snippet/diagram/automatic-layout/layout-bounds-cs1/app-composition.vue %} {% endhighlight %} {% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/layout-bounds-cs1/app.vue %} +{% include code-snippet/diagram/automatic-layout/layout-bounds-cs1/app.vue %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/automaticlayout/layout-bounds-cs1" %} +{% previewsample "page.domainurl/code-snippet/diagram/automatic-layout/layout-bounds-cs1" %} For more information about bounds, refer to [`bounds`](https://ej2.syncfusion.com/vue/documentation/api/diagram/layoutModel/#bounds). @@ -46,14 +46,14 @@ The following code illustrates how to align the layout and how to change layout {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/layout-alignment-cs1/app-composition.vue %} +{% include code-snippet/diagram/automatic-layout/layout-alignment-cs1/app-composition.vue %} {% endhighlight %} {% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/layout-alignment-cs1/app.vue %} +{% include code-snippet/diagram/automatic-layout/layout-alignment-cs1/app.vue %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/automaticlayout/layout-alignment-cs1" %} +{% previewsample "page.domainurl/code-snippet/diagram/automatic-layout/layout-alignment-cs1" %} ## Layout spacing @@ -65,14 +65,14 @@ The following code illustrates how to set the initial horizontal and vertical sp {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/layout-spacing-cs1/app-composition.vue %} +{% include code-snippet/diagram/automatic-layout/layout-spacing-cs1/app-composition.vue %} {% endhighlight %} {% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/layout-spacing-cs1/app.vue %} +{% include code-snippet/diagram/automatic-layout/layout-spacing-cs1/app.vue %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/automaticlayout/layout-spacing-cs1" %} +{% previewsample "page.domainurl/code-snippet/diagram/automatic-layout/layout-spacing-cs1" %} ## Layout margin @@ -84,14 +84,14 @@ The following code demonstrates how to set the initial layout margin and how to {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/layout-margin-cs1/app-composition.vue %} +{% include code-snippet/diagram/automatic-layout/layout-margin-cs1/app-composition.vue %} {% endhighlight %} {% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/layout-margin-cs1/app.vue %} +{% include code-snippet/diagram/automatic-layout/layout-margin-cs1/app.vue %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/automaticlayout/layout-margin-cs1" %} +{% previewsample "page.domainurl/code-snippet/diagram/automatic-layout/layout-margin-cs1" %} ## Layout orientation @@ -114,14 +114,14 @@ The following code demonstrates how to set the initial orientation for the layou {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/layout-orientation-cs1/app-composition.vue %} +{% include code-snippet/diagram/automatic-layout/layout-orientation-cs1/app-composition.vue %} {% endhighlight %} {% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/layout-orientation-cs1/app.vue %} +{% include code-snippet/diagram/automatic-layout/layout-orientation-cs1/app.vue %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/automaticlayout/layout-orientation-cs1" %} +{% previewsample "page.domainurl/code-snippet/diagram/automatic-layout/layout-orientation-cs1" %} ## Exclude from layout @@ -133,14 +133,14 @@ The following code example demonstrates how to exclude a node from the layout an {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/layout-exclude-cs1/app-composition.vue %} +{% include code-snippet/diagram/automatic-layout/layout-exclude-cs1/app-composition.vue %} {% endhighlight %} {% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/layout-exclude-cs1/app.vue %} +{% include code-snippet/diagram/automatic-layout/layout-exclude-cs1/app.vue %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/automaticlayout/layout-exclude-cs1" %} +{% previewsample "page.domainurl/code-snippet/diagram/automatic-layout/layout-exclude-cs1" %} ## Fixed node @@ -150,14 +150,14 @@ Layout provides support to arrange the nodes with reference to the position of a {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/layout-fixed-cs1/app-composition.vue %} +{% include code-snippet/diagram/automatic-layout/layout-fixed-cs1/app-composition.vue %} {% endhighlight %} {% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/layout-fixed-cs1/app.vue %} +{% include code-snippet/diagram/automatic-layout/layout-fixed-cs1/app.vue %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/automaticlayout/layout-fixed-cs1" %} +{% previewsample "page.domainurl/code-snippet/diagram/automatic-layout/layout-fixed-cs1" %} ## Expand and collapse @@ -167,14 +167,14 @@ Diagram allows to expand/collapse the subtrees of a layout. The node’s isExpan {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/layout-expandandcollapse-cs1/app-composition.vue %} +{% include code-snippet/diagram/automatic-layout/layout-expandandcollapse-cs1/app-composition.vue %} {% endhighlight %} {% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/layout-expandandcollapse-cs1/app.vue %} +{% include code-snippet/diagram/automatic-layout/layout-expandandcollapse-cs1/app.vue %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/automaticlayout/layout-expandandcollapse-cs1" %} +{% previewsample "page.domainurl/code-snippet/diagram/automatic-layout/layout-expandandcollapse-cs1" %} For more details about customizing the expand and collapse icon refer [`expand Collapse`](./nodes-expandAndCollapse) @@ -188,14 +188,14 @@ In the following example, the enableAnimation property ensures that the layout c {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/layout-animation-cs1/app-composition.vue %} +{% include code-snippet/diagram/automatic-layout/layout-animation-cs1/app-composition.vue %} {% endhighlight %} {% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/layout-animation-cs1/app.vue %} +{% include code-snippet/diagram/automatic-layout/layout-animation-cs1/app.vue %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/automaticlayout/layout-animation-cs1" %} +{% previewsample "page.domainurl/code-snippet/diagram/automatic-layout/layout-animation-cs1" %} >Note: To enable layout animation, you need to inject LayoutAnimation module in diagram. @@ -209,14 +209,14 @@ Find the code example to create parent - child relation between source and targe {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/layout-parentChildren-cs1/app-composition.vue %} +{% include code-snippet/diagram/automatic-layout/layout-parentChildren-cs1/app-composition.vue %} {% endhighlight %} {% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/layout-parentChildren-cs1/app.vue %} +{% include code-snippet/diagram/automatic-layout/layout-parentChildren-cs1/app.vue %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/automaticlayout/layout-parentChildren-cs1" %} +{% previewsample "page.domainurl/code-snippet/diagram/automatic-layout/layout-parentChildren-cs1" %} ![Layout drag and drop](images/drag-drop-layout.gif) @@ -228,14 +228,14 @@ Find the code example to create parent - child relation between source and targe {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/layout-setNodeTemplete-cs1/app-composition.vue %} +{% include code-snippet/diagram/automatic-layout/layout-setNodeTemplete-cs1/app-composition.vue %} {% endhighlight %} {% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/layout-setNodeTemplete-cs1/app.vue %} +{% include code-snippet/diagram/automatic-layout/layout-setNodeTemplete-cs1/app.vue %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/automaticlayout/layout-setNodeTemplete-cs1" %} +{% previewsample "page.domainurl/code-snippet/diagram/automatic-layout/layout-setNodeTemplete-cs1" %} ## Refresh layout diff --git a/ej2-vue/diagram/layout-event.md b/ej2-vue/diagram/layout-event.md index 0d0d8dce2..eb7778c97 100644 --- a/ej2-vue/diagram/layout-event.md +++ b/ej2-vue/diagram/layout-event.md @@ -53,14 +53,14 @@ The following code example explains the `expandStateChange` event in the diagram {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/layoutEvent-cs1/app-composition.vue %} +{% include code-snippet/diagram/automatic-layout/layoutEvent-cs1/app-composition.vue %} {% endhighlight %} {% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/layoutEvent-cs1/app.vue %} +{% include code-snippet/diagram/automatic-layout/layoutEvent-cs1/app.vue %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/automaticlayout/layoutEvent-cs1" %} +{% previewsample "page.domainurl/code-snippet/diagram/automatic-layout/layoutEvent-cs1" %} ## Animation complete event @@ -69,11 +69,11 @@ The [`animationComplete`](https://ej2.syncfusion.com/vue/documentation/api/diagr {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/layoutEvent-cs2/app-composition.vue %} +{% include code-snippet/diagram/automatic-layout/layoutEvent-cs2/app-composition.vue %} {% endhighlight %} {% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/layoutEvent-cs2/app.vue %} +{% include code-snippet/diagram/automatic-layout/layoutEvent-cs2/app.vue %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/automaticlayout/layoutEvent-cs2" %} +{% previewsample "page.domainurl/code-snippet/diagram/automatic-layout/layoutEvent-cs2" %} diff --git a/ej2-vue/diagram/mindmap-layout.md b/ej2-vue/diagram/mindmap-layout.md index 85dab527b..54c4cc6f8 100644 --- a/ej2-vue/diagram/mindmap-layout.md +++ b/ej2-vue/diagram/mindmap-layout.md @@ -17,19 +17,19 @@ A mind map is a diagram that displays the nodes as a spider diagram organizes in An [`Orientation`](https://ej2.syncfusion.com/vue/documentation/api/diagram/layoutModel/#orientation) of a `MindMapTreeLayout` is used to arrange the tree layout according to a specific direction. By default, the orientation is set to Horizontal. -The following code example illustrates how to create an mindmap layout. +The following code example illustrates how to create an MindMap layout. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/mindmap-cs1/app-composition.vue %} +{% include code-snippet/diagram/automatic-layout/mindmap-cs1/app-composition.vue %} {% endhighlight %} {% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/mindmap-cs1/app.vue %} +{% include code-snippet/diagram/automatic-layout/mindmap-cs1/app.vue %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/automaticlayout/mindmap-cs1" %} +{% previewsample "page.domainurl/code-snippet/diagram/automatic-layout/mindmap-cs1" %} The following table outlines the various orientation types available: @@ -48,13 +48,13 @@ You can also decide the branch for mind map using [`getBranch`](https://ej2.sync {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/mindmap-cs2/app-composition.vue %} +{% include code-snippet/diagram/automatic-layout/mindmap-cs2/app-composition.vue %} {% endhighlight %} {% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/mindmap-cs2/app.vue %} +{% include code-snippet/diagram/automatic-layout/mindmap-cs2/app.vue %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/automaticlayout/mindmap-cs2" %} +{% previewsample "page.domainurl/code-snippet/diagram/automatic-layout/mindmap-cs2" %} ![Mind map layout](images/mindmap.png) \ No newline at end of file diff --git a/ej2-vue/diagram/org-chart.md b/ej2-vue/diagram/org-chart.md index 707f55495..01c912f13 100644 --- a/ej2-vue/diagram/org-chart.md +++ b/ej2-vue/diagram/org-chart.md @@ -15,19 +15,19 @@ An organizational chart is a diagram that displays the structure of an organizat ## Organizational chart with DataSource -The following code example illustrates how to create an organizational chart with DataScource. +The following code example illustrates how to create an organizational chart with DataSource. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/organizational-cs1/app-composition.vue %} +{% include code-snippet/diagram/automatic-layout/organizational-cs1/app-composition.vue %} {% endhighlight %} {% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/organizational-cs1/app.vue %} +{% include code-snippet/diagram/automatic-layout/organizational-cs1/app.vue %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/automaticlayout/organizational-cs1" %} +{% previewsample "page.domainurl/code-snippet/diagram/automatic-layout/organizational-cs1" %} >Note: If you want to use Organizational chart layout in diagram, you need to inject HierarchicalTree module along with DataBinding module in the diagram. @@ -38,14 +38,14 @@ You can render an org-chart layout without using DataSource. The following code {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/organizational-cs2/app-composition.vue %} +{% include code-snippet/diagram/automatic-layout/organizational-cs2/app-composition.vue %} {% endhighlight %} {% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/organizational-cs2/app.vue %} +{% include code-snippet/diagram/automatic-layout/organizational-cs2/app.vue %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/automaticlayout/organizational-cs2" %} +{% previewsample "page.domainurl/code-snippet/diagram/automatic-layout/organizational-cs2" %} ![Organizational chart](images/org-chart.png) @@ -93,14 +93,14 @@ The following example shows how to utilize the `getLayoutInfo` function to custo {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/organizational-cs3/app-composition.vue %} +{% include code-snippet/diagram/automatic-layout/organizational-cs3/app-composition.vue %} {% endhighlight %} {% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/organizational-cs3/app.vue %} +{% include code-snippet/diagram/automatic-layout/organizational-cs3/app.vue %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/automaticlayout/organizational-cs3" %} +{% previewsample "page.domainurl/code-snippet/diagram/automatic-layout/organizational-cs3" %} ### SubTree vertical orientation @@ -110,14 +110,14 @@ The following code example illustrates how to set the vertical arrangement to th {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/organizational-cs4/app-composition.vue %} +{% include code-snippet/diagram/automatic-layout/organizational-cs4/app-composition.vue %} {% endhighlight %} {% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/organizational-cs4/app.vue %} +{% include code-snippet/diagram/automatic-layout/organizational-cs4/app.vue %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/automaticlayout/organizational-cs4" %} +{% previewsample "page.domainurl/code-snippet/diagram/automatic-layout/organizational-cs4" %} ### Assistant @@ -129,14 +129,14 @@ The following code example illustrates how to add assistants to layout. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/organizational-cs5/app-composition.vue %} +{% include code-snippet/diagram/automatic-layout/organizational-cs5/app-composition.vue %} {% endhighlight %} {% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/organizational-cs5/app.vue %} +{% include code-snippet/diagram/automatic-layout/organizational-cs5/app.vue %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/automaticlayout/organizational-cs5" %} +{% previewsample "page.domainurl/code-snippet/diagram/automatic-layout/organizational-cs5" %} ![Assistant](images/assistant.png) diff --git a/ej2-vue/diagram/ports-appearance.md b/ej2-vue/diagram/ports-appearance.md index 5157ff498..7b3ba5f9d 100644 --- a/ej2-vue/diagram/ports-appearance.md +++ b/ej2-vue/diagram/ports-appearance.md @@ -8,6 +8,8 @@ documentation: ug domainurl: ##DomainURL## --- +# Ports appearance in Vue Diagram component + ## Appearance The appearance of ports can be customized by using [`strokeColor`](https://ej2.syncfusion.com/vue/documentation/api/diagram/shapeStyleModel/#strokecolor), [`strokeWidth`](https://ej2.syncfusion.com/vue/documentation/api/diagram/shapeStyleModel/#strokewidth),[`fill`](https://ej2.syncfusion.com/vue/documentation/api/diagram/shapeStyleModel/#fill) and [`opacity`](https://ej2.syncfusion.com/vue/documentation/api/diagram/shapeStyleModel/#opacity) properties of the port. Customize the port size by using the [`width`](https://ej2.syncfusion.com/vue/documentation/api/diagram/pointPortModel/#width) and [`height`](https://ej2.syncfusion.com/vue/documentation/api/diagram/pointPortModel/#height) properties of port. The ports [`visibility`](https://ej2.syncfusion.com/vue/documentation/api/diagram/portVisibility/) property allows you to define, when the port should be visible. @@ -75,14 +77,14 @@ The following code illustrates how to set custom shape to the port. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/diagram/ports/ports-shape/app-composition.vue %} +{% include code-snippet/diagram/ports/ports-app3/app-composition.vue %} {% endhighlight %} {% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/diagram/ports/ports-shape/app.vue %} +{% include code-snippet/diagram/ports/ports-app3/app.vue %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/ports/ports-shape" %} +{% previewsample "page.domainurl/code-snippet/diagram/ports/ports-app3" %} ## Constraints diff --git a/ej2-vue/diagram/radial-layout.md b/ej2-vue/diagram/radial-layout.md index f3aa25cfb..eea83c156 100644 --- a/ej2-vue/diagram/radial-layout.md +++ b/ej2-vue/diagram/radial-layout.md @@ -22,14 +22,14 @@ You can create a radial tree layout with DataSource. The following code example {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/radiallayout-cs1/app-composition.vue %} +{% include code-snippet/diagram/automatic-layout/radiallayout-cs1/app-composition.vue %} {% endhighlight %} {% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/radiallayout-cs1/app.vue %} +{% include code-snippet/diagram/automatic-layout/radiallayout-cs1/app.vue %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/automaticlayout/radiallayout-cs1" %} +{% previewsample "page.domainurl/code-snippet/diagram/automatic-layout/radiallayout-cs1" %} >Note: If you want to convert the data source into layout, you need to inject DataBinding along with RadialTree module in the diagram. @@ -41,14 +41,14 @@ You can render a radial tree layout without using DataSource. The following code {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/radiallayout-cs2/app-composition.vue %} +{% include code-snippet/diagram/automatic-layout/radiallayout-cs2/app-composition.vue %} {% endhighlight %} {% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/radiallayout-cs2/app.vue %} +{% include code-snippet/diagram/automatic-layout/radiallayout-cs2/app.vue %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/automaticlayout/radiallayout-cs2" %} +{% previewsample "page.domainurl/code-snippet/diagram/automatic-layout/radiallayout-cs2" %} >Note: If you want to use radial tree layout in diagram, you need to inject RadialTree in the diagram. diff --git a/ej2-vue/diagram/symbol-palette.md b/ej2-vue/diagram/symbol-palette.md index 8f1b822e4..0a1eb68e7 100644 --- a/ej2-vue/diagram/symbol-palette.md +++ b/ej2-vue/diagram/symbol-palette.md @@ -92,14 +92,14 @@ The following example shows how to render connectors in the symbol palette: {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/diagram/symbol-palette/palettes/palette-con/app-composition.vue %} +{% include code-snippet/diagram/symbol-palette/palettes/palettes-con/app-composition.vue %} {% endhighlight %} {% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/diagram/symbol-palette/palettes/palette-con/app.vue %} +{% include code-snippet/diagram/symbol-palette/palettes/palettes-con/app.vue %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette/palettes/palette-con" %} +{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette/palettes/palettes-con" %} ## Add group nodes in symbol palette @@ -107,18 +107,18 @@ The symbol palette supports adding group nodes. To add group nodes to the palett {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/diagram/symbol-palette/palettes/palette-grp/app-composition.vue %} +{% include code-snippet/diagram/symbol-palette/palettes/palettes-grp/app-composition.vue %} {% endhighlight %} {% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/diagram/symbol-palette/palettes/palette-grp/app.vue %} +{% include code-snippet/diagram/symbol-palette/palettes/palettes-grp/app.vue %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette/palettes/palette-grp"%} +{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette/palettes/palettes-grp"%} ## Drag and drop symbols from palette to diagram -To drag and drop symbols from the palette to the diagram canvas, mousedown on the desired symbol in the palette, drag it to the desired location on the diagram canvas, and release the mouse button to drop it. +To drag and drop symbols from the palette to the diagram canvas, press and hold the mouse button on the desired symbol in the palette, drag it to the desired location on the diagram canvas, and release the mouse button to drop it. ![Drag and drop symbols](images/symbol-palette-drag-drop.gif) diff --git a/ej2-vue/diagram/symmetric-layout.md b/ej2-vue/diagram/symmetric-layout.md index cc4eb06ab..76ba8c3e5 100644 --- a/ej2-vue/diagram/symmetric-layout.md +++ b/ej2-vue/diagram/symmetric-layout.md @@ -22,14 +22,14 @@ The following code illustrates how to arrange the nodes in a radial tree structu {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/symmetric-cs1/app-composition.vue %} +{% include code-snippet/diagram/automatic-layout/symmetric-cs1/app-composition.vue %} {% endhighlight %} {% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/diagram/automaticlayout/symmetric-cs1/app.vue %} +{% include code-snippet/diagram/automatic-layout/symmetric-cs1/app.vue %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/automaticlayout/symmetric-cs1" %} +{% previewsample "page.domainurl/code-snippet/diagram/automatic-layout/symmetric-cs1" %} >Note: If you want to use symmetric layout in diagram, you need to inject SymmetricLayout in the diagram. From 3d97e59100eee0acf9073c294dc2a09fbb42a96f Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Sat, 23 Nov 2024 08:34:19 +0530 Subject: [PATCH 03/17] Integrated latest changes at 11-23-2024 7:30:20 AM --- ej2-vue-toc.html | 4 +- ej2-vue/Release-notes/27.2.3.md | 16 +++ .../item-template-cs1/app-composition.vue | 5 +- .../templates/item-template-cs1/app.vue | 5 +- .../value-template-cs1/app-composition.vue | 5 +- .../templates/value-template-cs1/app.vue | 5 +- .../schedule/calendar-export-cs2/app.vue | 2 +- .../schedule/cell-dimension-cs2/app.vue | 2 +- .../schedule/cell-dimension-cs3/app.vue | 2 +- .../schedule/cell-dimension-cs5/app.vue | 2 +- .../schedule/date-header-cs1/app.vue | 2 +- .../schedule/editor-window-cs3/app.vue | 2 +- .../schedule/localization-cs2/app.vue | 2 +- .../schedule/recur-editor-cs4/app.vue | 7 +- .../schedule/recurrence-cs2/app.vue | 2 +- .../single-level-resource-cs2/app.vue | 2 +- .../schedule/time-zone-cs3/app.vue | 2 +- .../schedule/time-zone-cs5/app.vue | 2 +- .../code-snippet/schedule/view-cs11/app.vue | 2 +- .../schedule/view-cs15/app-composition.vue | 3 +- .../code-snippet/schedule/view-cs15/app.vue | 3 +- .../code-snippet/schedule/view-cs15/index.js | 3 +- .../schedule/year-customizations-cs1/app.vue | 2 +- .../configure-annotation-selector-setting.md | 96 ++++++++++++++ ...pdf-library-bounds-to-pdf-viewer-bounds.md | 119 ++++++++++++++++++ ej2-vue/schedule/accessibility.md | 2 +- ej2-vue/schedule/views.md | 20 +-- 27 files changed, 280 insertions(+), 39 deletions(-) create mode 100644 ej2-vue/Release-notes/27.2.3.md create mode 100644 ej2-vue/pdfviewer/how-to/configure-annotation-selector-setting.md create mode 100644 ej2-vue/pdfviewer/how-to/convert-pdf-library-bounds-to-pdf-viewer-bounds.md diff --git a/ej2-vue-toc.html b/ej2-vue-toc.html index 3f8417f39..c0d98f3ee 100644 --- a/ej2-vue-toc.html +++ b/ej2-vue-toc.html @@ -1977,6 +1977,8 @@
  • Export As Image in Vue Pdfviewer component
  • Custom fonts for Signature and Initial fields
  • Add custom fonts to the PDF Viewer using the PDF document
    • +
  • Configure Annotation selector setting
    • +
  • Convert Pdf Library Bounds to Pdf viewer bounds
  • Troubleshooting @@ -3085,7 +3087,7 @@
  • Release Notes
      -
    • 2024 Volume 3 - 27.*
    • 2024 Volume 2 - 26.*
    • 2024 Volume 1 - 25.*
      • +
    • 2024 Volume 3 - 27.*
    • 2024 Volume 2 - 26.*
    • 2024 Volume 1 - 25.*
    • 2023 Volume 4 - 24.*
    • 2023 Volume 3 - 23.*
    • 2023 Volume 2 - 22.* diff --git a/ej2-vue/Release-notes/27.2.3.md b/ej2-vue/Release-notes/27.2.3.md new file mode 100644 index 000000000..b1fd10acd --- /dev/null +++ b/ej2-vue/Release-notes/27.2.3.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="November 21, 2024" version="v27.2.3" %} + +{% directory path: _includes/release-notes/v27.2.3 %} + +{% include {{file.url}} %} + +{% enddirectory %} \ No newline at end of file diff --git a/ej2-vue/code-snippet/drop-down-tree/templates/item-template-cs1/app-composition.vue b/ej2-vue/code-snippet/drop-down-tree/templates/item-template-cs1/app-composition.vue index a9210a734..406059525 100644 --- a/ej2-vue/code-snippet/drop-down-tree/templates/item-template-cs1/app-composition.vue +++ b/ej2-vue/code-snippet/drop-down-tree/templates/item-template-cs1/app-composition.vue @@ -22,7 +22,8 @@ let data = [ { "id": 11, "pid": 6, "name": "Mary", "job": "Developer " }, { "id": 9, "pid": 1, "name": "Janet Leverling", "job": "HR" } ]; -let itemVue = createApp().component("itemTemplate", { +const app = createApp(); +var demoVue = app.component("itemTemplate", { template: `{{data.name}} - {{data.job}}`, data() { return { data: {} }; @@ -30,7 +31,7 @@ let itemVue = createApp().component("itemTemplate", { }); const itemTemplate = function () { - return { template: itemVue }; + return { template: demoVue }; }; const fields = { dataSource: data, value: 'id', text: 'name', parentValue: "pid", hasChildren: 'hasChild' }; diff --git a/ej2-vue/code-snippet/drop-down-tree/templates/item-template-cs1/app.vue b/ej2-vue/code-snippet/drop-down-tree/templates/item-template-cs1/app.vue index 9ca9ea362..0bda5e8c8 100644 --- a/ej2-vue/code-snippet/drop-down-tree/templates/item-template-cs1/app.vue +++ b/ej2-vue/code-snippet/drop-down-tree/templates/item-template-cs1/app.vue @@ -22,7 +22,8 @@ let data = [ { "id": 11, "pid": 6, "name": "Mary", "job": "Developer " }, { "id": 9, "pid": 1, "name": "Janet Leverling", "job": "HR" } ]; -let itemVue = createApp.component("itemTemplate", { +const app = createApp(); +var demoVue = app.component("itemTemplate", { template: `{{data.name}} - {{data.job}}`, data() { return { data: {} }; @@ -37,7 +38,7 @@ export default { data() { return { itemTemplate: function () { - return { template: itemVue }; + return { template: demoVue }; }, fields: { dataSource: data, value: 'id', text: 'name', parentValue: "pid", hasChildren: 'hasChild' }, } diff --git a/ej2-vue/code-snippet/drop-down-tree/templates/value-template-cs1/app-composition.vue b/ej2-vue/code-snippet/drop-down-tree/templates/value-template-cs1/app-composition.vue index 3ef1a3a09..b40e80957 100644 --- a/ej2-vue/code-snippet/drop-down-tree/templates/value-template-cs1/app-composition.vue +++ b/ej2-vue/code-snippet/drop-down-tree/templates/value-template-cs1/app-composition.vue @@ -22,7 +22,8 @@ let data = [ { "id": 11, "pid": 6, "name": "Mary", "job": "Developer " }, { "id": 9, "pid": 1, "name": "Janet Leverling", "job": "HR" } ]; -let valueVue = createApp().component("valueTemplate", { +const app = createApp(); +var demoVue = app.component("valueTemplate", { template: `{{data.name}} - {{data.job}}`, data() { return { data: {} }; @@ -30,7 +31,7 @@ let valueVue = createApp().component("valueTemplate", { }); const valueTemplate = function () { - return { template: valueVue }; + return { template: demoVue }; }; const fields = { dataSource: data, value: 'id', text: 'name', parentValue: "pid", hasChildren: 'hasChild' }; diff --git a/ej2-vue/code-snippet/drop-down-tree/templates/value-template-cs1/app.vue b/ej2-vue/code-snippet/drop-down-tree/templates/value-template-cs1/app.vue index 6a9262f22..92b45a9cc 100644 --- a/ej2-vue/code-snippet/drop-down-tree/templates/value-template-cs1/app.vue +++ b/ej2-vue/code-snippet/drop-down-tree/templates/value-template-cs1/app.vue @@ -22,7 +22,8 @@ let data = [ { "id": 11, "pid": 6, "name": "Mary", "job": "Developer " }, { "id": 9, "pid": 1, "name": "Janet Leverling", "job": "HR" } ]; -let valueVue = createApp.component("valueTemplate", { +const app = createApp(); +var demoVue = app.component("valueTemplate", { template: `{{data.name}} - {{data.job}}`, data() { return { data: {} }; @@ -37,7 +38,7 @@ export default { data() { return { valueTemplate: function () { - return { template: valueVue }; + return { template: demoVue }; }, fields: { dataSource: data, value: 'id', text: 'name', parentValue: "pid", hasChildren: 'hasChild' }, } diff --git a/ej2-vue/code-snippet/schedule/calendar-export-cs2/app.vue b/ej2-vue/code-snippet/schedule/calendar-export-cs2/app.vue index 886e8a138..a5818b898 100644 --- a/ej2-vue/code-snippet/schedule/calendar-export-cs2/app.vue +++ b/ej2-vue/code-snippet/schedule/calendar-export-cs2/app.vue @@ -18,7 +18,7 @@ diff --git a/ej2-vue/code-snippet/schedule/recurrence-cs2/app.vue b/ej2-vue/code-snippet/schedule/recurrence-cs2/app.vue index 74d82b7b2..370eb48a3 100644 --- a/ej2-vue/code-snippet/schedule/recurrence-cs2/app.vue +++ b/ej2-vue/code-snippet/schedule/recurrence-cs2/app.vue @@ -15,7 +15,7 @@ export default { }, mounted: function () { let recObject = this.$refs.EditorObj; - recObject.endTypes = ["until", "count"]; + recObject.setProperties({ endTypes: ["until", "count"] }); } }; diff --git a/ej2-vue/code-snippet/schedule/single-level-resource-cs2/app.vue b/ej2-vue/code-snippet/schedule/single-level-resource-cs2/app.vue index e1445a544..9a4108b55 100644 --- a/ej2-vue/code-snippet/schedule/single-level-resource-cs2/app.vue +++ b/ej2-vue/code-snippet/schedule/single-level-resource-cs2/app.vue @@ -22,7 +22,7 @@ + +{% endhighlight %} +{% endtabs %} + +#### Key properties include: + +* **selectionBorderColor**: Sets the color for the border around selected annotations. + +* **resizerBorderColor**: Sets the color for the border of the resizer handles. + +* **resizerFillColor**: Defines the fill color for the resizer handles. + +* **resizerSize**: Determines the size of the resizer handles. + +* **selectionBorderThickness**: Specifies how thick the selection border should be. + +* **resizerShape**: Allows you to choose the shape of the resizer handles (e.g., Circle or Square). + +* **selectorLineDashArray**: Specifies the dash pattern for the selector line to enhance visual cues. + +* **resizerLocation**: Determines where the resizer appear in relation to the annotation (e.g., Corners or Edges). + +* **resizerCursorType**: Sets the cursor style when hovering over the resizer, improving user interaction. + +[View sample in GitHub](https://github.com/SyncfusionExamples/vue-pdf-viewer-examples/tree/master/How%20to) diff --git a/ej2-vue/pdfviewer/how-to/convert-pdf-library-bounds-to-pdf-viewer-bounds.md b/ej2-vue/pdfviewer/how-to/convert-pdf-library-bounds-to-pdf-viewer-bounds.md new file mode 100644 index 000000000..de9741dec --- /dev/null +++ b/ej2-vue/pdfviewer/how-to/convert-pdf-library-bounds-to-pdf-viewer-bounds.md @@ -0,0 +1,119 @@ +--- +layout: post +title: Converting Library Bounds in Vue PdfViewer | Syncfusion +description: Learn how to convert Library bounds into Viewer bounds in Syncfusion Vue Pdfviewer component of Syncfusion Essential JS 2 and more. +control: PDF Viewer +platform: ej2-vue +documentation: ug +domainurl: ##DomainURL## +--- + +# Converting PDF Library Bounds to PDF Viewer Bounds + +### Overview + +When exporting annotations from the PDF Library, you may need to convert the bounds values into the PDF Viewer format. This guide will help you achieve that using the Syncfusion PDF Viewer component. + +### How to Convert Bounds Values + +**Step 1:** Initialize the PdfViewer Instance + +Create an instance of the PdfViewer and configure it with the required services. + +**Step 2:** Handle Export Success + +Convert the exported blob URL to an object and then extract and convert the annotation bounds. + +**Step 3:** Create a Function to Convert Blob URL to Object + +This function fetches the blob data and converts it into a JSON object. + +{% tabs %} +{% highlight html tabtitle="Server-Backed" %} + + + + + +{% endhighlight %} +{% endtabs %} + +### Conclusion + +By following these steps, you can successfully convert PDF Library bounds values into PDF Viewer bounds values when exporting annotations as JSON. This will help maintain accuracy in the annotation placement and ensure a seamless user experience. + +[View sample in GitHub](https://github.com/SyncfusionExamples/vue-pdf-viewer-examples/tree/master/How%20to) \ No newline at end of file diff --git a/ej2-vue/schedule/accessibility.md b/ej2-vue/schedule/accessibility.md index f4c331db1..dd3681f32 100644 --- a/ej2-vue/schedule/accessibility.md +++ b/ej2-vue/schedule/accessibility.md @@ -89,7 +89,7 @@ The Scheduler component's accessibility levels are ensured through an [accessibi The accessibility compliance of the Scheduler component is shown in the following sample. Open the [sample](https://ej2.syncfusion.com/accessibility/schedule.html) in a new window to evaluate the accessibility of the Scheduler component with accessibility tools. -{% previewsample "https://ej2.syncfusion.com/accessibility/schedule.html" %} +{% previewsample "page.domainurl/code-snippet/schedule/event-cs1" %} ## See also diff --git a/ej2-vue/schedule/views.md b/ej2-vue/schedule/views.md index 2a9b0b82d..e2c202f4d 100644 --- a/ej2-vue/schedule/views.md +++ b/ej2-vue/schedule/views.md @@ -216,7 +216,7 @@ The following code example shows how to hide the weekend days on `MonthAgenda` v Similar to the day view, timeline day view shows a single day with all its appointments where the time slots are displayed horizontally. By default, the cell height adjusts as per the height set to Scheduler. When the number of appointments exceeds the visible area of the cells, the `+ more` text indicator will be displayed at the bottom to denote the presence of few more appointments in that time range. -To make use of the timeline views (Timeline Day, Timeline Week and Timeline Work Week) on Scheduler, import and inject the module `TimelineViews` from the `ej2-schedule` package. +To make use of the timeline views (Timeline Day, Timeline Week and Timeline Work Week) on Scheduler, import and inject the module `TimelineViews` from the `ej2-vue-schedule` package. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -259,7 +259,7 @@ The following code example depicts how to display the timeline work week view on ### Timeline Month view -A Timeline Month view displays the current month days along with its appointments. To make use of the timeline Month view on Scheduler, import and inject `TimelineMonth` module from the `ej2-schedule` package. +A Timeline Month view displays the current month days along with its appointments. To make use of the timeline Month view on Scheduler, import and inject `TimelineMonth` module from the `ej2-vue-schedule` package. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -278,7 +278,7 @@ A Timeline Month view displays the current month days along with its appointment In Timeline Year view, each row depicts a single resource. Whereas in the vertical view, each resource is grouped parallelly as columns. Here, the resource grouping follows the tree-view like hierarchical grouping structure and can contain any level of child resources. -To make use of the timeline Year view on Scheduler, import and inject `TimelineYear` module from the `ej2-schedule` package. +To make use of the timeline Year view on Scheduler, import and inject `TimelineYear` module from the `ej2-vue-schedule` package. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -303,9 +303,9 @@ The following code example depicts how to group the multiple resources on Timeli
      + :selectedDate='selectedDate' :currentView='currentView' :group='group'> - + @@ -336,6 +336,7 @@ const resourceDataSource = [ { OwnerText: 'Michael', Id: 3, OwnerColor: '#7499e1' } ]; const eventSettings = { dataSource: resourceData }; +const group = { resources: ['Owners'] }; provide('schedule', [TimelineYear]); @@ -359,9 +360,9 @@ provide('schedule', [TimelineYear]);
      + :selectedDate='selectedDate' :currentView='currentView' :group='group'> - + @@ -400,7 +401,10 @@ export default { { OwnerText: 'Steven', Id: 2, OwnerColor: '#f8a398' }, { OwnerText: 'Michael', Id: 3, OwnerColor: '#7499e1' } ], - eventSettings: { dataSource: resourceData } + eventSettings: { dataSource: resourceData }, + group: { + resources: ['Owners'] + }, } }, provide: { From f81f2e46c9f02cf8bd040642e46a949876524ef0 Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Tue, 26 Nov 2024 09:15:54 +0530 Subject: [PATCH 04/17] Integrated latest changes at 11-26-2024 7:30:11 AM --- .../file-manager/toolbar-cs2/app.vue | 33 +++++++++----- .../file-manager/toolbar-cs2/index.js | 44 +++++++++++++------ .../toolbar-cs2/systemjs.config.js | 2 +- 3 files changed, 55 insertions(+), 24 deletions(-) diff --git a/ej2-vue/code-snippet/file-manager/toolbar-cs2/app.vue b/ej2-vue/code-snippet/file-manager/toolbar-cs2/app.vue index 2cea83b01..980138fa5 100644 --- a/ej2-vue/code-snippet/file-manager/toolbar-cs2/app.vue +++ b/ej2-vue/code-snippet/file-manager/toolbar-cs2/app.vue @@ -14,7 +14,9 @@ @@ -45,23 +47,34 @@ export default { getImageUrl: "https://ej2-aspcore-service.azurewebsites.net/api/FileManager/GetImage", uploadUrl: "https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Upload", downloadUrl: "https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Download" - } + }, + label: 'Select All' }; }, + computed: { + chkLabel: { + get: function () { + return this.label; + }, + set: function (label) { + this.label = label; + }, + }, + }, provide: { filemanager: [DetailsView, NavigationPane, Toolbar] }, methods: { - onChange: function(args){ + onChange: function (args) { + var fileObj = this.$refs.filemanagerInstance; if (args.checked) { - this.$refs.fileManagerInstance.selectAll(); - this.$refs.checkBoxInstance.label = 'Unselect All'; - } - else { - this.$refs.fileManagerInstance.clearSelection(); - this.$refs.checkBoxInstance.label = 'Select All'; + fileObj.selectAll(); + this.label = 'Unselect All'; + } else { + fileObj.clearSelection(); + this.label = 'Select All'; } - } + }, } } diff --git a/ej2-vue/code-snippet/file-manager/toolbar-cs2/index.js b/ej2-vue/code-snippet/file-manager/toolbar-cs2/index.js index 00ae9483e..dd36db39b 100644 --- a/ej2-vue/code-snippet/file-manager/toolbar-cs2/index.js +++ b/ej2-vue/code-snippet/file-manager/toolbar-cs2/index.js @@ -1,14 +1,31 @@ import Vue from "vue"; import { FileManagerPlugin, DetailsView, NavigationPane, Toolbar } from "@syncfusion/ej2-vue-filemanager"; - Vue.use(FileManagerPlugin); +import { CheckBox } from '@syncfusion/ej2-buttons'; new Vue({ el: '#app', template: `
      - + + + + + + + + + + + + + + + + + +
      `, @@ -22,8 +39,7 @@ new Vue({ uploadUrl: "https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Upload", downloadUrl: "https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Download" }, - //Custom item added along with default items - toolbarSettings: {items: ["NewFolder", "Custom", "Upload", "Delete", "Download", "Rename", "SortBy", "Refresh", "Selection", "View", "Details"]} + checkBoxInstance: null }; }, provide: { @@ -31,16 +47,18 @@ new Vue({ }, methods: { // Alert displayed for custom toolbar item in toolbarClick event - toolbarClick: function(args){ - if (args.item.text === "Custom") { - alert("You have clicked custom toolbar item") - } + create: function(args){ + this.checkBoxInstance = new CheckBox({ label: 'Select All',checked: false, change: this.onChange }); + this.checkBoxInstance.appendTo('#checkbox1'); }, - toolbarCreate: function(args) { - for(let i: number = 0; i Date: Tue, 26 Nov 2024 20:57:17 +0530 Subject: [PATCH 05/17] Integrated latest changes at 11-26-2024 7:20:59 PM --- ej2-vue/uploader/jwt-authentication.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ej2-vue/uploader/jwt-authentication.md b/ej2-vue/uploader/jwt-authentication.md index c36f6a7b7..b87fd3f84 100644 --- a/ej2-vue/uploader/jwt-authentication.md +++ b/ej2-vue/uploader/jwt-authentication.md @@ -28,7 +28,7 @@ Using the `uploading` and `removing` event argument's, `currentRequest` property The following code snippet provides the client-side logic for adding a JWT token during the save and remove actions. -```vue +``` + +``` ## Template Support for Context menu @@ -125,4 +209,8 @@ The following example shows how to get these events. {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/contextmenu/events-cs1" %} \ No newline at end of file +{% previewsample "page.domainurl/code-snippet/diagram/contextmenu/events-cs1" %} + +## See Also + +* [How to open context menu on left click](https://support.syncfusion.com/kb/article/15103/how-to-perform-clipboard-operation-with-custom-context-menu-on-left-click-using-vue-diagram) \ No newline at end of file diff --git a/ej2-vue/diagram/export.md b/ej2-vue/diagram/export.md index 234119833..6f4300487 100644 --- a/ej2-vue/diagram/export.md +++ b/ej2-vue/diagram/export.md @@ -57,11 +57,11 @@ The diagram provides support to export the desired region of the diagram to vari | pageHeight| number | Sets the page height of the diagram while exporting the diagram into multiple pages.| | pageOrientation | enum | Sets the orientation of the page. | -## File Name +### File Name [`FileName`](https://ej2.syncfusion.com/vue/documentation/api/diagram/iExportOptions/#filename) is the name of the file to be downloaded. By default, the file name is set to **Diagram**. -## Format +### Format [`Format`](https://ej2.syncfusion.com/vue/documentation/api/diagram/iExportOptions/#format) is to specify the type/format of the exported file. By default, the diagram is exported as .jpg format. You can export diagram to the following formats: @@ -82,7 +82,7 @@ The diagram provides support to export the desired region of the diagram to vari {% previewsample "page.domainurl/code-snippet/diagram/export/export-cs1" %} -## Margin +### Margin [`Margin`](https://ej2.syncfusion.com/vue/documentation/api/diagram/iExportOptions/#margin) specifies the amount of space that has to be left around the diagram. @@ -99,7 +99,7 @@ The diagram provides support to export the desired region of the diagram to vari {% previewsample "page.domainurl/code-snippet/diagram/export/export-cs2" %} -## Mode +### Mode [`Mode`](https://ej2.syncfusion.com/vue/documentation/api/diagram/iExportOptions/#mode) specifies whether to export the diagram as an image or to return the base64 data of the diagram. The available export modes are: @@ -136,9 +136,9 @@ export default { } ``` -## Region +### Region -You can export any particular [`region`](https://ej2.syncfusion.com/vue/documentation/api/diagram/iExportOptions/#region) of the diagram and it is categorized into three types as follows. +Exporting particular region of diagram is possible by using the [`region`](https://ej2.syncfusion.com/vue/documentation/api/diagram/iExportOptions/#region) property of the [`exportOptions`](https://ej2.syncfusion.com/vue/documentation/api/diagram/iExportOptions/#iexportoptions). The available export regions are listed in the table below. | Region | Description | |-------- | -------- | @@ -146,6 +146,8 @@ You can export any particular [`region`](https://ej2.syncfusion.com/vue/document | Content | Only the content of the diagram control will be exported | | CustomBounds | The region to be exported will be explicitly defined | +The following example shows how to export diagram with different regions. + {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} {% include code-snippet/diagram/export/export-cs3/app-composition.vue %} @@ -213,7 +215,7 @@ To get the html diagram content, the [`getDiagramContent`](https://ej2.syncfusio {% previewsample "page.domainurl/code-snippet/diagram/export/export-cs6" %} -## Export diagram with stretch option +### Export diagram with stretch option Diagram provides support to export the diagram as image for [`stretch`](https://ej2.syncfusion.com/vue/documentation/api/diagram/iExportOptions/#stretch) option. The exported images will be clearer but larger in file size. diff --git a/ej2-vue/diagram/label-appearance.md b/ej2-vue/diagram/label-appearance.md index e70b0fe25..156df8e88 100644 --- a/ej2-vue/diagram/label-appearance.md +++ b/ej2-vue/diagram/label-appearance.md @@ -30,7 +30,7 @@ The [`visible`](https://helpej2.syncfusion.com/vue/documentation/api/diagram/ann {% previewsample "page.domainurl/code-snippet/diagram/labels/Appear-cs1" %} - ## Horizontal and vertical alignment +## Horizontal and vertical alignment The following tables illustrates all the possible alignments visually with 'offset (0, 0)'. diff --git a/ej2-vue/diagram/nodes-customization.md b/ej2-vue/diagram/nodes-customization.md index 35af3c9c5..a763becb2 100644 --- a/ej2-vue/diagram/nodes-customization.md +++ b/ej2-vue/diagram/nodes-customization.md @@ -156,7 +156,7 @@ constraints property of the node. The following code illustrates how to drop sha ### Customizing shadow effect of the node -The angle, distance, and opacity of the shadow can be customized with the shadow property of the node. The following code example illustrates how to customize shadow. +The [`angle`](https://ej2.syncfusion.com/vue/documentation/api/diagram/shadowModel/#angle), [`distance`](https://ej2.syncfusion.com/vue/documentation/api/diagram/shadowModel/#distance), and [`opacity`](https://ej2.syncfusion.com/vue/documentation/api/diagram/shadowModel/#opacity) of the shadow can be customized with the shadow property of the node. The following code example illustrates how to customize shadow. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} diff --git a/ej2-vue/diagram/nodes.md b/ej2-vue/diagram/nodes.md index 4b0003606..d4a81a673 100644 --- a/ej2-vue/diagram/nodes.md +++ b/ej2-vue/diagram/nodes.md @@ -22,7 +22,7 @@ A node can be created and added to the diagram either programmatically or intera N> Note: There should not be any white-spaces in the ID string while setting the ID. -## Add node through nodes collection +### Add node through nodes collection To create a node, define the [`node`](https://ej2.syncfusion.com/vue/documentation/api/diagram/node) object and add that to nodes collection of the diagram model. The following code example illustrates how to add a node to the diagram. @@ -39,7 +39,7 @@ To create a node, define the [`node`](https://ej2.syncfusion.com/vue/documentati N> Node id should not begin with numbers(should begin with a letter). Node Id should be unique for all the shapes and connectors. -## Add/Remove node at runtime +### Add/Remove node at runtime Nodes can be added at runtime by using public method, [`add`](https://ej2.syncfusion.com/vue/documentation/api/diagram/#add) and can be removed at runtime by using public method, [`remove`](https://ej2.syncfusion.com/vue/documentation/api/diagram/#remove). On adding node at runtime, the nodes collection is changed and the [`collectionChange`](https://ej2.syncfusion.com/vue/documentation/api/diagram/#collectionchange) event will trigger. @@ -57,7 +57,7 @@ The following code illustrates how to add a node. {% previewsample "page.domainurl/code-snippet/diagram/nodes/Node-cs2" %} -## Add collection of nodes at runtime +### Add collection of nodes at runtime The collection of nodes can be dynamically added using [`addElements`](https://ej2.syncfusion.com/vue/documentation/api/diagram/#addelements) method.Each time an element is added to the diagram canvas, the [`collectionChange`](https://ej2.syncfusion.com/vue/documentation/api/diagram#collectionchange) event will be triggered. @@ -74,7 +74,7 @@ The following code illustrates how to add a nodes collection at runtime. {% previewsample "page.domainurl/code-snippet/diagram/nodes/Node-cs3" %} -## Add node from palette +### Add node from palette Nodes can be predefined and added to the palette, and can be dropped into the diagram when needed. For more information about adding nodes from symbol palette, refer to [`Symbol Palette`](https://ej2.syncfusion.com/vue/documentation/api/diagram/symbolPaletteModel). @@ -92,7 +92,7 @@ The following code illustrates how to add a nodes collection at runtime. {% previewsample "page.domainurl/code-snippet/diagram/nodes/Node-cs4" %} -## Create node through data source +### Create node through data source Nodes can be generated automatically with the information provided through data source. The default properties for these nodes are fetched from default settings ([`getNodeDefaults`](https://ej2.syncfusion.com/vue/documentation/api/diagram/#getnodedefaults)). For more information about data source, refer to [`DataBinding`](./data-binding). @@ -110,7 +110,7 @@ The following code illustrates how to add a nodes collection at runtime. {% previewsample "page.domainurl/code-snippet/diagram/nodes/Node-cs5" %} -## Draw nodes +### Draw nodes Nodes can be interactively drawn by clicking and dragging the diagram surface. @@ -155,14 +155,14 @@ The following code example illustrates how to clone node at runtime {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/diagram/nodes/Node-cs1/app-composition.vue %} +{% include code-snippet/diagram/nodes/Node-cs8/app-composition.vue %} {% endhighlight %} {% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/diagram/nodes/Node-cs1/app.vue %} +{% include code-snippet/diagram/nodes/Node-cs8/app.vue %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/nodes/Node-cs1" %} +{% previewsample "page.domainurl/code-snippet/diagram/nodes/Node-cs8" %} ## Add nodes from tree view diff --git a/ej2-vue/diagram/shapes.md b/ej2-vue/diagram/shapes.md index 816b31b39..82b8d9918 100644 --- a/ej2-vue/diagram/shapes.md +++ b/ej2-vue/diagram/shapes.md @@ -149,14 +149,14 @@ To render html node with nodeTemplate we need to define the nodeTemplate in the {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/diagram/shapes/NodeTemplate-cs1/app-composition.vue %} +{% include code-snippet/diagram/shapes/HTML-cs3/app-composition.vue %} {% endhighlight %} {% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/diagram/shapes/NodeTemplate-cs1/app.vue %} +{% include code-snippet/diagram/shapes/HTML-cs3/app.vue %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/shapes/NodeTemplate-cs1" %} +{% previewsample "page.domainurl/code-snippet/diagram/shapes/HTML-cs3" %} #### Functional nodeTemplate @@ -166,14 +166,14 @@ Refer the code example below. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/diagram/shapes/HTML-cs3/app-composition.vue %} +{% include code-snippet/diagram/shapes/NodeTemplate-cs1/app-composition.vue %} {% endhighlight %} {% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/diagram/shapes/HTML-cs3/app.vue %} +{% include code-snippet/diagram/shapes/NodeTemplate-cs1/app.vue %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/shapes/HTML-cs3" %} +{% previewsample "page.domainurl/code-snippet/diagram/shapes/NodeTemplate-cs1" %} ## Native diff --git a/ej2-vue/diagram/tooltip.md b/ej2-vue/diagram/tooltip.md index 6f4e11ad7..d173a87f6 100644 --- a/ej2-vue/diagram/tooltip.md +++ b/ej2-vue/diagram/tooltip.md @@ -43,14 +43,14 @@ The tooltip can be customized for each node and connector. Remove the **InheritT {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/diagram/tooltip/inheritTooltip-cs1/app-composition.vue %} +{% include code-snippet/diagram/tooltip/tooltip-cs2/app-composition.vue %} {% endhighlight %} {% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/diagram/tooltip/inheritTooltip-cs1/app.vue %} +{% include code-snippet/diagram/tooltip/tooltip-cs2/app.vue %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/tooltip/inheritTooltip-cs1" %} +{% previewsample "page.domainurl/code-snippet/diagram/tooltip/tooltip-cs2" %} ## Inherit diagram tooltip @@ -58,14 +58,14 @@ The diagram supports inheriting the diagram tooltip when the mouse hovers over a {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/diagram/tooltip/tooltip-cs2/app-composition.vue %} +{% include code-snippet/diagram/tooltip/inheritTooltip-cs1/app-composition.vue %} {% endhighlight %} {% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/diagram/tooltip/tooltip-cs2/app.vue %} +{% include code-snippet/diagram/tooltip/inheritTooltip-cs1/app.vue %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/tooltip/tooltip-cs2" %} +{% previewsample "page.domainurl/code-snippet/diagram/tooltip/inheritTooltip-cs1" %} ### Disable tooltip at runtime diff --git a/ej2-vue/grid/adaptive.md b/ej2-vue/grid/adaptive.md index dce542109..f07e6d505 100644 --- a/ej2-vue/grid/adaptive.md +++ b/ej2-vue/grid/adaptive.md @@ -16,6 +16,8 @@ The Grid user interface (UI) was redesigned to provide an optimal viewing experi The Syncfusion Vue Grid offers a valuable feature for rendering adaptive dialogs, specifically designed to enhance the user experience on smaller screens. This feature is particularly useful for optimizing the interface on mobile devices or other devices with limited screen space. The functionality is achieved by enabling the [enableAdaptiveUI](https://ej2.syncfusion.com/vue/documentation/api/grid/#enableadaptiveui) property, allowing the grid to render filter, sort, and edit dialogs in full-screen mode. +Additionally, apply the `e-bigger` class to the grid's parent element to enable the adaptive view. + The following sample demonstrates how to enable and utilize adaptive dialogs in the Syncfusion vue Grid: {% tabs %} diff --git a/ej2-vue/treemap/getting-started.md b/ej2-vue/treemap/getting-started.md index c08bd7b63..3c0b2014d 100644 --- a/ej2-vue/treemap/getting-started.md +++ b/ej2-vue/treemap/getting-started.md @@ -10,6 +10,12 @@ domainurl: ##DomainURL## # Getting Started with the Vue TreeMap Component in Vue 2 +This section explains how to customize the TreeMap component and demonstrates its basic usage. + +You can explore some useful features of the TreeMap component in the following video. + +{% youtube "https://www.youtube.com/watch?v=fFSUhC9SAoQ" %} + 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 TreeMap component ## Prerequisites @@ -52,7 +58,7 @@ yarn run serve When creating a new project, choose the option `Default ([Vue 2] babel, eslint)` from the menu. -![Vue 2 project](../appearance/images/vue2-terminal.png) +![Vue 2 project](./images/vue2-terminal.png) Once the `quickstart` project is set up with default settings, proceed to add Syncfusion components to the project. @@ -245,4 +251,4 @@ You can show legend for the tree map by setting the [`visible`] property to true {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/treemap/getting-started-cs17" %} \ No newline at end of file +{% previewsample "page.domainurl/code-snippet/treemap/getting-started-cs17" %} diff --git a/ej2-vue/treemap/images/vue2-terminal.png b/ej2-vue/treemap/images/vue2-terminal.png new file mode 100644 index 0000000000000000000000000000000000000000..39beefaa25348abb1ec9d6bcb4b2f0e1a0e60b0e GIT binary patch literal 9489 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 Date: Fri, 6 Dec 2024 17:07:13 +0530 Subject: [PATCH 13/17] Integrated latest changes at 12-06-2024 2:43:33 PM --- ej2-vue-toc.html | 2 +- ej2-vue/Release-notes/28.1.33.md | 16 ++++++++++++++++ 2 files changed, 17 insertions(+), 1 deletion(-) create mode 100644 ej2-vue/Release-notes/28.1.33.md diff --git a/ej2-vue-toc.html b/ej2-vue-toc.html index eefc90931..2ae93af39 100644 --- a/ej2-vue-toc.html +++ b/ej2-vue-toc.html @@ -3087,7 +3087,7 @@
  • Release Notes
      -
    • 2024 Volume 3 - 27.*
    • 2024 Volume 2 - 26.*
    • 2024 Volume 1 - 25.*
      • +
    • 2024 Volume 4 - 28.*
    • 2024 Volume 3 - 27.*
    • 2024 Volume 2 - 26.*
    • 2024 Volume 1 - 25.*
    • 2023 Volume 4 - 24.*
    • 2023 Volume 3 - 23.*
    • 2023 Volume 2 - 22.* diff --git a/ej2-vue/Release-notes/28.1.33.md b/ej2-vue/Release-notes/28.1.33.md new file mode 100644 index 000000000..bccaa107a --- /dev/null +++ b/ej2-vue/Release-notes/28.1.33.md @@ -0,0 +1,16 @@ +--- +title: Essential Studio for Vue Main Release Release Notes +description: Essential Studio for Vue Main Release Release Notes +platform: ej2-vue +documentation: ug +--- + +# Essential Studio for Vue Release Notes + +{% include release-info.html date="December 12, 2024" version="v28.1.33" %} + +{% directory path: _includes/release-notes/v28.1.33 %} + +{% include {{file.url}} %} + +{% enddirectory %} \ No newline at end of file From 1f79e387b4a15d22230be9de7fe386a452874572 Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Sat, 7 Dec 2024 08:30:33 +0530 Subject: [PATCH 14/17] Integrated latest changes at 12-07-2024 7:30:19 AM --- ej2-vue-toc.html | 2 +- ej2-vue/diagram/accessibility.md | 10 ++++---- ej2-vue/diagram/automatic-layout.md | 4 ++-- ej2-vue/diagram/bezier-controlPoint.md | 4 ++-- ej2-vue/diagram/bezier-segEditOrientation.md | 4 ++-- ej2-vue/diagram/bpmn-activities.md | 4 ++-- ej2-vue/diagram/bpmn-dataObject.md | 4 ++-- ej2-vue/diagram/bpmn-dataSource.md | 4 ++-- ej2-vue/diagram/bpmn-events.md | 4 ++-- ej2-vue/diagram/bpmn-expandSubProcess.md | 4 ++-- ej2-vue/diagram/bpmn-flows.md | 4 ++-- ej2-vue/diagram/bpmn-gateway.md | 4 ++-- ej2-vue/diagram/bpmn-group.md | 4 ++-- ej2-vue/diagram/bpmn-shapes.md | 4 ++-- ej2-vue/diagram/bpmn-textAnnotation.md | 4 ++-- ej2-vue/diagram/commands.md | 4 ++-- ej2-vue/diagram/complex-layout.md | 4 ++-- ej2-vue/diagram/connector-bezier.md | 4 ++-- ej2-vue/diagram/connector-customization.md | 4 ++-- ej2-vue/diagram/connector-events.md | 4 ++-- ej2-vue/diagram/connector-interaction.md | 4 ++-- ej2-vue/diagram/connector-labels.md | 4 ++-- ej2-vue/diagram/connector-orthogonal.md | 4 ++-- ej2-vue/diagram/connector-segments.md | 4 ++-- ej2-vue/diagram/connector-straight.md | 4 ++-- ej2-vue/diagram/connectors.md | 4 ++-- ej2-vue/diagram/constraints.md | 4 ++-- ej2-vue/diagram/context-menu.md | 4 ++-- ej2-vue/diagram/data-binding.md | 4 ++-- ej2-vue/diagram/ej1-migration.md | 4 ++-- ej2-vue/diagram/export.md | 6 ++--- ej2-vue/diagram/flowchart-layout.md | 4 ++-- ej2-vue/diagram/getting-started-vue-3.md | 22 +++++++++--------- ej2-vue/diagram/getting-started.md | 24 ++++++++++---------- ej2-vue/diagram/grid-lines.md | 4 ++-- ej2-vue/diagram/group.md | 4 ++-- ej2-vue/diagram/hierarchical-layout.md | 4 ++-- ej2-vue/diagram/index.md | 4 ++-- ej2-vue/diagram/interaction.md | 4 ++-- ej2-vue/diagram/label-appearance.md | 4 ++-- ej2-vue/diagram/label-events.md | 4 ++-- ej2-vue/diagram/label-interaction.md | 4 ++-- ej2-vue/diagram/labels.md | 4 ++-- ej2-vue/diagram/lane.md | 4 ++-- ej2-vue/diagram/layers.md | 4 ++-- ej2-vue/diagram/layout-customization.md | 4 ++-- ej2-vue/diagram/layout-event.md | 4 ++-- ej2-vue/diagram/localization.md | 4 ++-- ej2-vue/diagram/mindmap-layout.md | 4 ++-- ej2-vue/diagram/multipleSegments.md | 4 ++-- ej2-vue/diagram/node-labels.md | 4 ++-- ej2-vue/diagram/nodes-customization.md | 4 ++-- ej2-vue/diagram/nodes-events.md | 4 ++-- ej2-vue/diagram/nodes-expandAndCollapse.md | 4 ++-- ej2-vue/diagram/nodes-interaction.md | 4 ++-- ej2-vue/diagram/nodes-positioning.md | 4 ++-- ej2-vue/diagram/nodes.md | 4 ++-- ej2-vue/diagram/org-chart.md | 4 ++-- ej2-vue/diagram/overview.md | 4 ++-- ej2-vue/diagram/page-settings.md | 4 ++-- ej2-vue/diagram/palette-customization.md | 4 ++-- ej2-vue/diagram/palette-events.md | 4 ++-- ej2-vue/diagram/phase.md | 4 ++-- ej2-vue/diagram/ports-appearance.md | 4 ++-- ej2-vue/diagram/ports-connector-port.md | 4 ++-- ej2-vue/diagram/ports-interaction.md | 6 ++--- ej2-vue/diagram/ports-positioning.md | 4 ++-- ej2-vue/diagram/ports.md | 4 ++-- ej2-vue/diagram/print.md | 6 ++--- ej2-vue/diagram/quasar.md | 20 ++++++++-------- ej2-vue/diagram/radial-layout.md | 4 ++-- ej2-vue/diagram/ruler.md | 4 ++-- ej2-vue/diagram/scroll-settings.md | 4 ++-- ej2-vue/diagram/serialization.md | 4 ++-- ej2-vue/diagram/shapes.md | 4 ++-- ej2-vue/diagram/style.md | 4 ++-- ej2-vue/diagram/summary.md | 4 ++-- ej2-vue/diagram/swim-lane.md | 4 ++-- ej2-vue/diagram/swimlane-palette.md | 4 ++-- ej2-vue/diagram/symbol-palette.md | 4 ++-- ej2-vue/diagram/symmetric-layout.md | 4 ++-- ej2-vue/diagram/tools.md | 4 ++-- ej2-vue/diagram/tooltip.md | 4 ++-- ej2-vue/diagram/umldiagram.md | 4 ++-- ej2-vue/diagram/undo-redo.md | 4 ++-- ej2-vue/diagram/user-handle.md | 4 ++-- ej2-vue/diagram/virtualization.md | 4 ++-- 87 files changed, 206 insertions(+), 206 deletions(-) diff --git a/ej2-vue-toc.html b/ej2-vue-toc.html index 2ae93af39..802c8336d 100644 --- a/ej2-vue-toc.html +++ b/ej2-vue-toc.html @@ -880,7 +880,7 @@
  • Overview Control
    • -
  • Migration from Essential JS1
    • +
  • Migration from Essential® JS1
  • API Reference
  • diff --git a/ej2-vue/diagram/accessibility.md b/ej2-vue/diagram/accessibility.md index 14a7c168f..7323fb152 100644 --- a/ej2-vue/diagram/accessibility.md +++ b/ej2-vue/diagram/accessibility.md @@ -1,7 +1,7 @@ --- layout: post -title: Accessibility in Vue Diagram component | Syncfusion -description: Learn here all about Accessibility in Syncfusion Vue Diagram component of Syncfusion Essential JS 2 and more. +title: Accessibility in Vue Diagram component | Syncfusion® +description: Learn here all about Accessibility in Syncfusion® Vue Diagram component of Syncfusion Essential® JS 2 and more. control: Accessibility platform: ej2-vue documentation: ug @@ -104,7 +104,7 @@ Attribute provides the text label with some default description for below elemen ### Mobile device support -Syncfusion Diagram component are more user-friendly and accessible to individuals using mobile devices, including those with disabilities. These are designed to be responsive, adaptable to various screen sizes and orientations, and touch-friendly. +Syncfusion® Diagram component are more user-friendly and accessible to individuals using mobile devices, including those with disabilities. These are designed to be responsive, adaptable to various screen sizes and orientations, and touch-friendly. ### Screen Reader Support @@ -112,7 +112,7 @@ The Diagram component supports and its information was dictated properly by the ### Keyboard navigation support -Syncfusion Diagram component support keyboard navigation, allowing users who rely on alternate methods to effortlessly navigate and interact with the component. +Syncfusion® Diagram component support keyboard navigation, allowing users who rely on alternate methods to effortlessly navigate and interact with the component. ## Keyboard interaction @@ -144,4 +144,4 @@ The accessibility compliance of the Diagram component is shown in the following ## See also -- [Accessibility in Syncfusion Vue components](../common/accessibility) +- [Accessibility in Syncfusion® Vue components](../common/accessibility) diff --git a/ej2-vue/diagram/automatic-layout.md b/ej2-vue/diagram/automatic-layout.md index bc500969a..edcb74ce0 100644 --- a/ej2-vue/diagram/automatic-layout.md +++ b/ej2-vue/diagram/automatic-layout.md @@ -1,7 +1,7 @@ --- layout: post -title: Automatic layout in Vue Diagram component | Syncfusion -description: Learn here all about Automatic layout in Syncfusion Vue Diagram component of Syncfusion Essential JS 2 and more. +title: Automatic layout in Vue Diagram component | Syncfusion® +description: Learn here all about Automatic layout in Syncfusion® Vue Diagram component of Syncfusion Essential® JS 2 and more. control: Automatic layout platform: ej2-vue documentation: ug diff --git a/ej2-vue/diagram/bezier-controlPoint.md b/ej2-vue/diagram/bezier-controlPoint.md index f701b8eaa..621fb0802 100644 --- a/ej2-vue/diagram/bezier-controlPoint.md +++ b/ej2-vue/diagram/bezier-controlPoint.md @@ -1,7 +1,7 @@ --- layout: post -title: Bezier control points interaction in Vue Diagram component | Syncfusion -description: Learn here all about Connectors in Syncfusion Vue Diagram component of Syncfusion Essential JS 2 and more. +title: Bezier control points interaction in Vue Diagram component | Syncfusion® +description: Learn here all about Connectors in Syncfusion® Vue Diagram component of Syncfusion Essential® JS 2 and more. control: Bezier control points interaction platform: ej2-vue documentation: ug diff --git a/ej2-vue/diagram/bezier-segEditOrientation.md b/ej2-vue/diagram/bezier-segEditOrientation.md index 138d528eb..4ea9d3e0f 100644 --- a/ej2-vue/diagram/bezier-segEditOrientation.md +++ b/ej2-vue/diagram/bezier-segEditOrientation.md @@ -1,7 +1,7 @@ --- layout: post -title: Bezier Segment edit orientation in Vue Diagram component | Syncfusion -description: Learn here all about Connectors in Syncfusion Vue Diagram component of Syncfusion Essential JS 2 and more. +title: Bezier Segment edit orientation in Vue Diagram component | Syncfusion® +description: Learn here all about Connectors in Syncfusion® Vue Diagram component of Syncfusion Essential® JS 2 and more. control: Bezier Segment edit orientation platform: ej2-vue documentation: ug diff --git a/ej2-vue/diagram/bpmn-activities.md b/ej2-vue/diagram/bpmn-activities.md index 87af96ed9..4e12aab45 100644 --- a/ej2-vue/diagram/bpmn-activities.md +++ b/ej2-vue/diagram/bpmn-activities.md @@ -1,7 +1,7 @@ --- layout: post -title: Bpmn Activity in Vue Diagram component | Syncfusion -description: Learn here all about Bpmn shapes in Syncfusion Vue Diagram component of Syncfusion Essential JS 2 and more. +title: Bpmn Activity in Vue Diagram component | Syncfusion® +description: Learn here all about Bpmn shapes in Syncfusion® Vue Diagram component of Syncfusion Essential® JS 2 and more. control: Bpmn Activity platform: ej2-vue documentation: ug diff --git a/ej2-vue/diagram/bpmn-dataObject.md b/ej2-vue/diagram/bpmn-dataObject.md index b5e58d716..a975e9eb9 100644 --- a/ej2-vue/diagram/bpmn-dataObject.md +++ b/ej2-vue/diagram/bpmn-dataObject.md @@ -1,7 +1,7 @@ --- layout: post -title: Bpmn DataObject in Vue Diagram component | Syncfusion -description: Learn here all about Bpmn shapes in Syncfusion Vue Diagram component of Syncfusion Essential JS 2 and more. +title: Bpmn DataObject in Vue Diagram component | Syncfusion® +description: Learn here all about Bpmn shapes in Syncfusion® Vue Diagram component of Syncfusion Essential® JS 2 and more. control: Bpmn DataObject platform: ej2-vue documentation: ug diff --git a/ej2-vue/diagram/bpmn-dataSource.md b/ej2-vue/diagram/bpmn-dataSource.md index efb36b8f1..5a7c10ee8 100644 --- a/ej2-vue/diagram/bpmn-dataSource.md +++ b/ej2-vue/diagram/bpmn-dataSource.md @@ -1,7 +1,7 @@ --- layout: post -title: Bpmn DataSource in Vue Diagram component | Syncfusion -description: Learn here all about Bpmn shapes in Syncfusion Vue Diagram component of Syncfusion Essential JS 2 and more. +title: Bpmn DataSource in Vue Diagram component | Syncfusion® +description: Learn here all about Bpmn shapes in Syncfusion® Vue Diagram component of Syncfusion Essential® JS 2 and more. control: Bpmn DataSource platform: ej2-vue documentation: ug diff --git a/ej2-vue/diagram/bpmn-events.md b/ej2-vue/diagram/bpmn-events.md index 67d09c52c..0580c026d 100644 --- a/ej2-vue/diagram/bpmn-events.md +++ b/ej2-vue/diagram/bpmn-events.md @@ -1,7 +1,7 @@ --- layout: post -title: Bpmn Events in Vue Diagram component | Syncfusion -description: Learn here all about Bpmn shapes in Syncfusion Vue Diagram component of Syncfusion Essential JS 2 and more. +title: Bpmn Events in Vue Diagram component | Syncfusion® +description: Learn here all about Bpmn shapes in Syncfusion® Vue Diagram component of Syncfusion Essential® JS 2 and more. control: Bpmn Events platform: ej2-vue documentation: ug diff --git a/ej2-vue/diagram/bpmn-expandSubProcess.md b/ej2-vue/diagram/bpmn-expandSubProcess.md index 29c4d0c6d..a90935791 100644 --- a/ej2-vue/diagram/bpmn-expandSubProcess.md +++ b/ej2-vue/diagram/bpmn-expandSubProcess.md @@ -1,7 +1,7 @@ --- layout: post -title: Bpmn Expanded subProcess in Vue Diagram component | Syncfusion -description: Learn here all about Bpmn shapes in Syncfusion Vue Diagram component of Syncfusion Essential JS 2 and more. +title: Bpmn Expanded subProcess in Vue Diagram component | Syncfusion® +description: Learn here all about Bpmn shapes in Syncfusion® Vue Diagram component of Syncfusion Essential® JS 2 and more. control: Bpmn Expanded subProcess platform: ej2-vue documentation: ug diff --git a/ej2-vue/diagram/bpmn-flows.md b/ej2-vue/diagram/bpmn-flows.md index ef25bc3a2..9f582d9b4 100644 --- a/ej2-vue/diagram/bpmn-flows.md +++ b/ej2-vue/diagram/bpmn-flows.md @@ -1,7 +1,7 @@ --- layout: post -title: Bpmn Flows in Vue Diagram component | Syncfusion -description: Learn here all about Bpmn shapes in Syncfusion Vue Diagram component of Syncfusion Essential JS 2 and more. +title: Bpmn Flows in Vue Diagram component | Syncfusion® +description: Learn here all about Bpmn shapes in Syncfusion® Vue Diagram component of Syncfusion Essential® JS 2 and more. control: Bpmn Flows platform: ej2-vue documentation: ug diff --git a/ej2-vue/diagram/bpmn-gateway.md b/ej2-vue/diagram/bpmn-gateway.md index dc0fac51e..c2057eff4 100644 --- a/ej2-vue/diagram/bpmn-gateway.md +++ b/ej2-vue/diagram/bpmn-gateway.md @@ -1,7 +1,7 @@ --- layout: post -title: Bpmn Gateway in Vue Diagram component | Syncfusion -description: Learn here all about Bpmn shapes in Syncfusion Vue Diagram component of Syncfusion Essential JS 2 and more. +title: Bpmn Gateway in Vue Diagram component | Syncfusion® +description: Learn here all about Bpmn shapes in Syncfusion® Vue Diagram component of Syncfusion Essential® JS 2 and more. control: Bpmn Gateway platform: ej2-vue documentation: ug diff --git a/ej2-vue/diagram/bpmn-group.md b/ej2-vue/diagram/bpmn-group.md index 463a81f81..5b9b37d93 100644 --- a/ej2-vue/diagram/bpmn-group.md +++ b/ej2-vue/diagram/bpmn-group.md @@ -1,7 +1,7 @@ --- layout: post -title: Bpmn Group in Vue Diagram component | Syncfusion -description: Learn here all about Bpmn shapes in Syncfusion Vue Diagram component of Syncfusion Essential JS 2 and more. +title: Bpmn Group in Vue Diagram component | Syncfusion® +description: Learn here all about Bpmn shapes in Syncfusion® Vue Diagram component of Syncfusion Essential® JS 2 and more. control: Bpmn Group platform: ej2-vue documentation: ug diff --git a/ej2-vue/diagram/bpmn-shapes.md b/ej2-vue/diagram/bpmn-shapes.md index fc7548b1b..223337af4 100644 --- a/ej2-vue/diagram/bpmn-shapes.md +++ b/ej2-vue/diagram/bpmn-shapes.md @@ -1,7 +1,7 @@ --- layout: post -title: Bpmn shapes in Vue Diagram component | Syncfusion -description: Learn here all about Bpmn shapes in Syncfusion Vue Diagram component of Syncfusion Essential JS 2 and more. +title: Bpmn shapes in Vue Diagram component | Syncfusion® +description: Learn here all about Bpmn shapes in Syncfusion® Vue Diagram component of Syncfusion Essential® JS 2 and more. control: Bpmn shapes platform: ej2-vue documentation: ug diff --git a/ej2-vue/diagram/bpmn-textAnnotation.md b/ej2-vue/diagram/bpmn-textAnnotation.md index d7976e981..9c9492cff 100644 --- a/ej2-vue/diagram/bpmn-textAnnotation.md +++ b/ej2-vue/diagram/bpmn-textAnnotation.md @@ -1,7 +1,7 @@ --- layout: post -title: Bpmn Text annotation in Vue Diagram component | Syncfusion -description: Learn here all about Bpmn shapes in Syncfusion Vue Diagram component of Syncfusion Essential JS 2 and more. +title: Bpmn Text annotation in Vue Diagram component | Syncfusion® +description: Learn here all about Bpmn shapes in Syncfusion® Vue Diagram component of Syncfusion Essential® JS 2 and more. control: Bpmn Text annotation platform: ej2-vue documentation: ug diff --git a/ej2-vue/diagram/commands.md b/ej2-vue/diagram/commands.md index a0aae31f3..36e6c5332 100644 --- a/ej2-vue/diagram/commands.md +++ b/ej2-vue/diagram/commands.md @@ -1,7 +1,7 @@ --- layout: post -title: Commands in Vue Diagram component | Syncfusion -description: Learn here all about Commands in Syncfusion Vue Diagram component of Syncfusion Essential JS 2 and more. +title: Commands in Vue Diagram component | Syncfusion® +description: Learn here all about Commands in Syncfusion® Vue Diagram component of Syncfusion Essential® JS 2 and more. control: Commands platform: ej2-vue documentation: ug diff --git a/ej2-vue/diagram/complex-layout.md b/ej2-vue/diagram/complex-layout.md index dffedab6e..371b86b41 100644 --- a/ej2-vue/diagram/complex-layout.md +++ b/ej2-vue/diagram/complex-layout.md @@ -1,7 +1,7 @@ --- layout: post -title: Complex hierarchical tree layout in Vue Diagram component | Syncfusion -description: Learn here all about Automatic layout in Syncfusion Vue Diagram component of Syncfusion Essential JS 2 and more. +title: Complex hierarchical tree layout in Vue Diagram component | Syncfusion® +description: Learn here all about Automatic layout in Syncfusion® Vue Diagram component of Syncfusion Essential® JS 2 and more. platform: ej2-vue control: Complex hierarchical tree layout documentation: ug diff --git a/ej2-vue/diagram/connector-bezier.md b/ej2-vue/diagram/connector-bezier.md index c6d6c03e5..611801309 100644 --- a/ej2-vue/diagram/connector-bezier.md +++ b/ej2-vue/diagram/connector-bezier.md @@ -1,7 +1,7 @@ --- layout: post -title: Bezier connector in Vue Diagram component | Syncfusion -description: Learn here all about Connectors in Syncfusion Vue Diagram component of Syncfusion Essential JS 2 and more. +title: Bezier connector in Vue Diagram component | Syncfusion® +description: Learn here all about Connectors in Syncfusion® Vue Diagram component of Syncfusion Essential® JS 2 and more. control: Connectors platform: ej2-vue documentation: ug diff --git a/ej2-vue/diagram/connector-customization.md b/ej2-vue/diagram/connector-customization.md index 198d88471..161f1a953 100644 --- a/ej2-vue/diagram/connector-customization.md +++ b/ej2-vue/diagram/connector-customization.md @@ -1,7 +1,7 @@ --- layout: post -title: Connector customization in Vue Diagram component | Syncfusion -description: Learn here all about Connectors in Syncfusion Vue Diagram component of Syncfusion Essential JS 2 and more. +title: Connector customization in Vue Diagram component | Syncfusion® +description: Learn here all about Connectors in Syncfusion® Vue Diagram component of Syncfusion Essential® JS 2 and more. control: Connector customization platform: ej2-vue documentation: ug diff --git a/ej2-vue/diagram/connector-events.md b/ej2-vue/diagram/connector-events.md index afec08984..e3f8cfdcc 100644 --- a/ej2-vue/diagram/connector-events.md +++ b/ej2-vue/diagram/connector-events.md @@ -1,7 +1,7 @@ --- layout: post -title: Connector Events in Vue Diagram component | Syncfusion -description: Learn here all about Connectors in Syncfusion Vue Diagram component of Syncfusion Essential JS 2 and more. +title: Connector Events in Vue Diagram component | Syncfusion® +description: Learn here all about Connectors in Syncfusion® Vue Diagram component of Syncfusion Essential® JS 2 and more. control: Connector Events platform: ej2-vue documentation: ug diff --git a/ej2-vue/diagram/connector-interaction.md b/ej2-vue/diagram/connector-interaction.md index fad54cc62..c22f850b0 100644 --- a/ej2-vue/diagram/connector-interaction.md +++ b/ej2-vue/diagram/connector-interaction.md @@ -1,7 +1,7 @@ --- layout: post -title: Connector Interaction in Vue Diagram component | Syncfusion -description: Learn here all about Connectors in Syncfusion Vue Diagram component of Syncfusion Essential JS 2 and more. +title: Connector Interaction in Vue Diagram component | Syncfusion® +description: Learn here all about Connectors in Syncfusion® Vue Diagram component of Syncfusion Essential® JS 2 and more. control: Connector Interaction platform: ej2-vue documentation: ug diff --git a/ej2-vue/diagram/connector-labels.md b/ej2-vue/diagram/connector-labels.md index 1bf7da872..038ce3cf5 100644 --- a/ej2-vue/diagram/connector-labels.md +++ b/ej2-vue/diagram/connector-labels.md @@ -1,7 +1,7 @@ --- layout: post -title: Connector Labels in Vue Diagram component | Syncfusion -description: Learn here all about Labels in Syncfusion Vue Diagram component of Syncfusion Essential JS 2 and more. +title: Connector Labels in Vue Diagram component | Syncfusion® +description: Learn here all about Labels in Syncfusion® Vue Diagram component of Syncfusion Essential® JS 2 and more. control: Connector Labels platform: ej2-vue documentation: ug diff --git a/ej2-vue/diagram/connector-orthogonal.md b/ej2-vue/diagram/connector-orthogonal.md index 438a394e9..92dd70acf 100644 --- a/ej2-vue/diagram/connector-orthogonal.md +++ b/ej2-vue/diagram/connector-orthogonal.md @@ -1,7 +1,7 @@ --- layout: post -title: Orthogonal connector in Vue Diagram component | Syncfusion -description: Learn here all about Connectors in Syncfusion Vue Diagram component of Syncfusion Essential JS 2 and more. +title: Orthogonal connector in Vue Diagram component | Syncfusion® +description: Learn here all about Connectors in Syncfusion® Vue Diagram component of Syncfusion Essential® JS 2 and more. control: Orthogonal platform: ej2-vue documentation: ug diff --git a/ej2-vue/diagram/connector-segments.md b/ej2-vue/diagram/connector-segments.md index 6a7a50148..8d8f9867f 100644 --- a/ej2-vue/diagram/connector-segments.md +++ b/ej2-vue/diagram/connector-segments.md @@ -1,7 +1,7 @@ --- layout: post -title: Segments in Vue Diagram component | Syncfusion -description: Learn here all about Connectors in Syncfusion Vue Diagram component of Syncfusion Essential JS 2 and more. +title: Segments in Vue Diagram component | Syncfusion® +description: Learn here all about Connectors in Syncfusion® Vue Diagram component of Syncfusion Essential® JS 2 and more. control: Segments platform: ej2-vue documentation: ug diff --git a/ej2-vue/diagram/connector-straight.md b/ej2-vue/diagram/connector-straight.md index 97adce803..a6be35a48 100644 --- a/ej2-vue/diagram/connector-straight.md +++ b/ej2-vue/diagram/connector-straight.md @@ -1,7 +1,7 @@ --- layout: post -title: Straight connector in Vue Diagram component | Syncfusion -description: Learn here all about Connectors in Syncfusion Vue Diagram component of Syncfusion Essential JS 2 and more. +title: Straight connector in Vue Diagram component | Syncfusion® +description: Learn here all about Connectors in Syncfusion® Vue Diagram component of Syncfusion Essential® JS 2 and more. control: Straight platform: ej2-vue documentation: ug diff --git a/ej2-vue/diagram/connectors.md b/ej2-vue/diagram/connectors.md index a1ce5f9aa..679748f31 100644 --- a/ej2-vue/diagram/connectors.md +++ b/ej2-vue/diagram/connectors.md @@ -1,7 +1,7 @@ --- layout: post -title: Connectors in Vue Diagram component | Syncfusion -description: Learn here all about Connectors in Syncfusion Vue Diagram component of Syncfusion Essential JS 2 and more. +title: Connectors in Vue Diagram component | Syncfusion® +description: Learn here all about Connectors in Syncfusion® Vue Diagram component of Syncfusion Essential® JS 2 and more. control: Connectors platform: ej2-vue documentation: ug diff --git a/ej2-vue/diagram/constraints.md b/ej2-vue/diagram/constraints.md index a795d1e21..c27f18365 100644 --- a/ej2-vue/diagram/constraints.md +++ b/ej2-vue/diagram/constraints.md @@ -1,7 +1,7 @@ --- layout: post -title: Constraints in Vue Diagram component | Syncfusion -description: Learn here all about Constraints in Syncfusion Vue Diagram component of Syncfusion Essential JS 2 and more. +title: Constraints in Vue Diagram component | Syncfusion® +description: Learn here all about Constraints in Syncfusion® Vue Diagram component of Syncfusion Essential® JS 2 and more. control: Constraints platform: ej2-vue documentation: ug diff --git a/ej2-vue/diagram/context-menu.md b/ej2-vue/diagram/context-menu.md index 69708ca49..c7a2c640b 100644 --- a/ej2-vue/diagram/context-menu.md +++ b/ej2-vue/diagram/context-menu.md @@ -1,7 +1,7 @@ --- layout: post -title: Context menu in Vue Diagram component | Syncfusion -description: Learn here all about Context menu in Syncfusion Vue Diagram component of Syncfusion Essential JS 2 and more. +title: Context menu in Vue Diagram component | Syncfusion® +description: Learn here all about Context menu in Syncfusion® Vue Diagram component of Syncfusion Essential® JS 2 and more. control: Context menu platform: ej2-vue documentation: ug diff --git a/ej2-vue/diagram/data-binding.md b/ej2-vue/diagram/data-binding.md index 42554cb81..a80b4487c 100644 --- a/ej2-vue/diagram/data-binding.md +++ b/ej2-vue/diagram/data-binding.md @@ -1,7 +1,7 @@ --- layout: post -title: Data binding in Vue Diagram component | Syncfusion -description: Learn here all about Data binding in Syncfusion Vue Diagram component of Syncfusion Essential JS 2 and more. +title: Data binding in Vue Diagram component | Syncfusion® +description: Learn here all about Data binding in Syncfusion® Vue Diagram component of Syncfusion Essential® JS 2 and more. control: Data binding platform: ej2-vue documentation: ug diff --git a/ej2-vue/diagram/ej1-migration.md b/ej2-vue/diagram/ej1-migration.md index 3c53421f3..da372d9d0 100644 --- a/ej2-vue/diagram/ej1-migration.md +++ b/ej2-vue/diagram/ej1-migration.md @@ -1,7 +1,7 @@ --- layout: post -title: EJ1 migration in React Diagram component | Syncfusion -description: Learn here all about EJ1 migration in Syncfusion React Diagram component of Syncfusion Essential JS 2 and more. +title: EJ1 migration in React Diagram component | Syncfusion® +description: Learn here all about EJ1 migration in Syncfusion® React Diagram component of Syncfusion Essential® JS 2 and more. control: EJ1 Migration platform: ej2-vue documentation: ug diff --git a/ej2-vue/diagram/export.md b/ej2-vue/diagram/export.md index 6f4300487..ed031ad0b 100644 --- a/ej2-vue/diagram/export.md +++ b/ej2-vue/diagram/export.md @@ -1,7 +1,7 @@ --- layout: post -title: Export in Vue Diagram component | Syncfusion -description: Learn here all about Export in Syncfusion Vue Diagram component of Syncfusion Essential JS 2 and more. +title: Export in Vue Diagram component | Syncfusion® +description: Learn here all about Export in Syncfusion® Vue Diagram component of Syncfusion Essential® JS 2 and more. control: Export platform: ej2-vue documentation: ug @@ -252,4 +252,4 @@ export default { ## Limitations -Currently, printing diagram with native and HTML nodes is not supported. To overcome this limitation, we make use of the Syncfusion Essential PDF library. This library incorporates the Syncfusion Essential HTML converter, which employs the advanced Blink rendering engine. This converter seamlessly transforms HTML content into images. Refer to [`export Html-and-Native node`](https://support.syncfusion.com/kb/article/15531/how-to-print-or-export-the-html-and-native-node-into-image-format-using-vue-diagram) kb for more information. \ No newline at end of file +Currently, printing diagram with native and HTML nodes is not supported. To overcome this limitation, we make use of the Syncfusion Essential® PDF library. This library incorporates the Syncfusion Essential® HTML converter, which employs the advanced Blink rendering engine. This converter seamlessly transforms HTML content into images. Refer to [`export Html-and-Native node`](https://support.syncfusion.com/kb/article/15531/how-to-print-or-export-the-html-and-native-node-into-image-format-using-vue-diagram) kb for more information. \ No newline at end of file diff --git a/ej2-vue/diagram/flowchart-layout.md b/ej2-vue/diagram/flowchart-layout.md index 9af6e0128..578855ff7 100644 --- a/ej2-vue/diagram/flowchart-layout.md +++ b/ej2-vue/diagram/flowchart-layout.md @@ -1,7 +1,7 @@ --- layout: post -title: Flowchart layout in Vue Diagram component | Syncfusion -description: Learn here all about Flowchart layout in Syncfusion Vue Diagram component of Syncfusion Essential JS 2 and more. +title: Flowchart layout in Vue Diagram component | Syncfusion® +description: Learn here all about Flowchart layout in Syncfusion® Vue Diagram component of Syncfusion Essential® JS 2 and more. platform: ej2-vue control: Flowchart layout documentation: ug diff --git a/ej2-vue/diagram/getting-started-vue-3.md b/ej2-vue/diagram/getting-started-vue-3.md index 6d0dbe7db..057493e91 100644 --- a/ej2-vue/diagram/getting-started-vue-3.md +++ b/ej2-vue/diagram/getting-started-vue-3.md @@ -1,7 +1,7 @@ --- layout: post -title: Vue 3 getting started with the Diagram component | Syncfusion -description: Check out and learn about Vue 3 getting started with the Vue Diagram component of Syncfusion Essential JS 2 and more details. +title: Vue 3 getting started with the Diagram component | Syncfusion® +description: Check out and learn about Vue 3 getting started with the Vue Diagram component of Syncfusion Essential® JS 2 and more details. control: Vue 3 getting started platform: ej2-vue documentation: ug @@ -10,19 +10,19 @@ domainurl: ##DomainURL## # Getting Started with the Vue Diagram Component in Vue 3 -This article provides a step-by-step guide for setting up a [Vite](https://vitejs.dev/) project with a JavaScript environment and integrating the Syncfusion Vue Diagram component using the [Composition API](https://vuejs.org/guide/introduction.html#composition-api) / [Options API](https://vuejs.org/guide/introduction.html#options-api). +This article provides a step-by-step guide for setting up a [Vite](https://vitejs.dev/) project with a JavaScript environment and integrating the Syncfusion® Vue Diagram component using the [Composition API](https://vuejs.org/guide/introduction.html#composition-api) / [Options API](https://vuejs.org/guide/introduction.html#options-api). The `Composition API` is a new feature introduced in Vue.js 3 that provides an alternative way to organize and reuse component logic. It allows developers to write components as functions that use smaller, reusable functions called composition functions to manage their properties and behavior. The `Options API` is the traditional way of writing Vue.js components, where the component logic is organized into a series of options that define the component's properties and behavior. These options include data, methods, computed properties, watchers, life cycle hooks, and more. -To create, edit, and view interactive diagrams using the Syncfusion Vue Diagram component, refer to the below video link. +To create, edit, and view interactive diagrams using the Syncfusion® Vue Diagram component, refer to the below video link. {% youtube "youtube:https://www.youtube.com/watch?v=y11FMmfoqCg" %} ## Prerequisites -[System requirements for Syncfusion Vue UI components](https://ej2.syncfusion.com/vue/documentation/system-requirements/) +[System requirements for Syncfusion® Vue UI components](https://ej2.syncfusion.com/vue/documentation/system-requirements/) ## Set up the Vite project @@ -83,11 +83,11 @@ cd my-project yarn install ``` -Now that `my-project` is ready to run with default settings, let's add Syncfusion components to the project. +Now that `my-project` is ready to run with default settings, let's add Syncfusion® components to the project. -## Add Syncfusion Vue packages +## Add Syncfusion® Vue packages -Syncfusion Vue component packages are available at [npmjs.com](https://www.npmjs.com/search?q=ej2-vue). To use Syncfusion Vue components in the project, install the corresponding npm package. +Syncfusion® Vue component packages are available at [npmjs.com](https://www.npmjs.com/search?q=ej2-vue). To use Syncfusion® Vue components in the project, install the corresponding npm package. This article uses the [Vue Diagram component](https://www.syncfusion.com/vue-components/vue-diagram) as an example. To use the Vue Diagram component in the project, the `@syncfusion/ej2-vue-diagrams` package needs to be installed using the following command: @@ -101,9 +101,9 @@ or yarn add @syncfusion/ej2-vue-diagrams ``` -## Import Syncfusion CSS styles +## Import Syncfusion® CSS styles -You can import themes for the Syncfusion Vue component in various ways, such as using CSS or SASS styles from npm packages, CDN, [CRG](https://ej2.syncfusion.com/javascript/documentation/common/custom-resource-generator/) and [Theme Studio](https://ej2.syncfusion.com/vue/documentation/appearance/theme-studio/). Refer to [themes topic](https://ej2.syncfusion.com/vue/documentation/appearance/theme/) to know more about built-in themes and different ways to refer to themes in a Vue project. +You can import themes for the Syncfusion® Vue component in various ways, such as using CSS or SASS styles from npm packages, CDN, [CRG](https://ej2.syncfusion.com/javascript/documentation/common/custom-resource-generator/) and [Theme Studio](https://ej2.syncfusion.com/vue/documentation/appearance/theme-studio/). Refer to [themes topic](https://ej2.syncfusion.com/vue/documentation/appearance/theme/) to know more about built-in themes and different ways to refer to themes in a Vue project. In this article, `Material` theme is applied using CSS styles, which are available in installed packages. The necessary `Material` CSS styles for the Diagram component and its dependents were imported into the ` + +{% endhighlight %} +{% endtabs %} + +## Add Syncfusion Vue component + +Follow the below steps to add the Vue Chat UI component using `Composition API` or `Options API`: + +1\. First, import and register the Chat UI component in the `script` section of the **src/App.vue** file. If you are using the `Composition API`, you should add the `setup` attribute to the `script` tag to indicate that Vue will be using the `Composition API`. + +{% tabs %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %} + + + +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} + + + +{% endhighlight %} +{% endtabs %} + +2\. In the `template` section, define the Chat UI component. + +{% tabs %} +{% highlight html tabtitle="~/src/App.vue" %} + + + +{% endhighlight %} +{% endtabs %} + +## Run the application + +To run the application, use the following command: + +```bash +npm run serve +``` + +or + +```bash +yarn run serve +``` + +{% previewsample "page.domainurl/code-snippet/chat-ui/getting-started" %} + +## Configure messages and user + +You can use the `messages` property to add messages and the `user` property to configure the current user for the chat. + +{% tabs %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/chat-ui/defaultMessage/app-composition.vue %} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/chat-ui/defaultMessage/app.vue %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chat-ui/defaultMessage" %} diff --git a/ej2-vue/chat-ui/images/defaultMessageSample.png b/ej2-vue/chat-ui/images/defaultMessageSample.png new file mode 100644 index 0000000000000000000000000000000000000000..d84a0a96f1265af2b1ae50bac9d7e371c45dd042 GIT binary patch literal 29361 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 Vue + React + Preact + Lit + Svelte + Others +``` + +3.Choose `JavaScript` as the framework variant to build this Vite project using JavaScript and Vue. + +```bash +? Select a variant: » - Use arrow-keys. Return to submit. +> JavaScript + TypeScript + Customize with create-vue ↗ + Nuxt ↗ +``` + +4.Upon completing the aforementioned steps to create the `my-project`, run the following command to install its dependencies: + +```bash +cd my-project +npm install +``` + +or + +```bash +cd my-project +yarn install +``` + +Now that `my-project` is ready to run with default settings, let's add Syncfusion components to the project. + +## Add Syncfusion Vue packages + +Syncfusion Vue component packages are available at [npmjs.com](https://www.npmjs.com/search?q=ej2-vue). To use Syncfusion Vue components in the project, install the corresponding npm package. + +This article uses the `Vue Chat UI component` as an example. To use the Vue Chat UI component in the project, the `@syncfusion/ej2-vue-interactive-chat` package needs to be installed using the following command: + +```bash +npm install @syncfusion/ej2-vue-interactive-chat --save +``` + +or + +```bash +yarn add @syncfusion/ej2-vue-interactive-chat +``` + +## Import Syncfusion CSS styles + +You can import themes for the Syncfusion Vue component in various ways, such as using CSS or SASS styles from npm packages, CDN, [CRG](https://ej2.syncfusion.com/javascript/documentation/common/custom-resource-generator/) and [Theme Studio](https://ej2.syncfusion.com/vue/documentation/appearance/theme-studio/). Refer to [themes topic](https://ej2.syncfusion.com/vue/documentation/appearance/theme/) to know more about built-in themes and different ways to refer to themes in a Vue project. + +In this article, `Material` theme is applied using CSS styles, which are available in installed packages. The necessary `Material` CSS styles for the Chat UI component and its dependents were imported into the ` + +{% endhighlight %} +{% endtabs %} + +> The order of importing CSS styles should be in line with its dependency graph. + +## Add Syncfusion Vue component + +Follow the below steps to add the Vue Chat UI component using `Composition API` or `Options API`: + +1.First, import and register the Chat UI component in the `script` section of the **src/App.vue** file. If you are using the `Composition API`, you should add the `setup` attribute to the `script` tag to indicate that Vue will be using the `Composition API`. + +{% tabs %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %} + + + +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} + + + +{% endhighlight %} +{% endtabs %} + +2.In the `template` section, define the Chat UI component. + +{% tabs %} +{% highlight html tabtitle="~/src/App.vue" %} + + + +{% endhighlight %} +{% endtabs %} + +Here is the summarized code for the above steps in the **src/App.vue** file: + +{% tabs %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %} + + + + + + + +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} + + + + + +{% endhighlight %} +{% endtabs %} + +## Run the project + +To run the project, use the following command: + +```bash +npm run dev +``` + +or + +```bash +yarn run dev +``` + +## Configure messages and user + +You can use the `messages` property to add messages and the `user` property to map each message to the respective user. + +{% tabs %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/chat-ui/defaultMessage/app-composition.vue %} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/chat-ui/defaultMessage/app.vue %} +{% endhighlight %} +{% endtabs %} + +The output will appear as follows: + +![Output](./images/defaultMessageSample.png) + +For migrating from Vue 2 to Vue 3, refer to the [`migration`](https://ej2.syncfusion.com/vue/documentation/getting-started/vue3-tutorial/#migration-from-vue-2-to-vue-3) documentation. + +## See also + +* [Getting Started with Vue UI Components using Composition API and TypeScript](../getting-started/vue-3-ts-composition.md) +* [Getting Started with Vue UI Components using Options API and TypeScript](../getting-started/vue-3-ts-options.md) diff --git a/ej2-vue/code-snippet/chat-ui/defaultMessage/app-composition.vue b/ej2-vue/code-snippet/chat-ui/defaultMessage/app-composition.vue new file mode 100644 index 000000000..227d96d36 --- /dev/null +++ b/ej2-vue/code-snippet/chat-ui/defaultMessage/app-composition.vue @@ -0,0 +1,47 @@ + + + + + diff --git a/ej2-vue/code-snippet/chat-ui/defaultMessage/app.vue b/ej2-vue/code-snippet/chat-ui/defaultMessage/app.vue new file mode 100644 index 000000000..5512bdfb4 --- /dev/null +++ b/ej2-vue/code-snippet/chat-ui/defaultMessage/app.vue @@ -0,0 +1,56 @@ + + + + diff --git a/ej2-vue/code-snippet/chat-ui/defaultMessage/index.css b/ej2-vue/code-snippet/chat-ui/defaultMessage/index.css new file mode 100644 index 000000000..fd40910d9 --- /dev/null +++ b/ej2-vue/code-snippet/chat-ui/defaultMessage/index.css @@ -0,0 +1,4 @@ + + + + diff --git a/ej2-vue/code-snippet/chat-ui/defaultMessage/index.html b/ej2-vue/code-snippet/chat-ui/defaultMessage/index.html new file mode 100644 index 000000000..ec92199d1 --- /dev/null +++ b/ej2-vue/code-snippet/chat-ui/defaultMessage/index.html @@ -0,0 +1,21 @@ + + + + + + EJ2 Vue Sample + + + + + + + + + + + +
    Loading....
    + + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/chat-ui/defaultMessage/index.js b/ej2-vue/code-snippet/chat-ui/defaultMessage/index.js new file mode 100644 index 000000000..9cd207590 --- /dev/null +++ b/ej2-vue/code-snippet/chat-ui/defaultMessage/index.js @@ -0,0 +1,46 @@ +import Vue from 'vue'; +import { ChatUIPlugin } from "@syncfusion/ej2-vue-interactive-chat"; +Vue.use(ChatUIPlugin); + +new Vue({ + el: '#app', + template: ` +
    +
    + +
    +`, + + data () { + const albert = { + id: "user1", + user: "Albert", + }; + + const michale = { + id: "user2", + user: "Michale Suyama", + }; + return { + messages: [ + { + id: "msg1", + author: albert, + text: "Hi there! How's it going?" + }, + { + id: "msg2", + author: michale, + text: "Hey! I'm doing well, thanks. How about you?" + }, + { + id: "msg3", + author: albert, + text: "Mostly the usual stuff. I did start a new hobby - painting!" + } + ], + currentUser: albert + } + } + +}); \ No newline at end of file diff --git a/ej2-vue/code-snippet/chat-ui/defaultMessage/systemjs.config.js b/ej2-vue/code-snippet/chat-ui/defaultMessage/systemjs.config.js new file mode 100644 index 000000000..6a9051164 --- /dev/null +++ b/ej2-vue/code-snippet/chat-ui/defaultMessage/systemjs.config.js @@ -0,0 +1,34 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js", + "@syncfusion/ej2-vue-interactive-chat": "syncfusion:ej2-vue-interactive-chat/dist/ej2-vue-interactive-chat.umd.min.js", + "@syncfusion/ej2-vue-inputs": "syncfusion:ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js", + "@syncfusion/ej2-vue-navigations": "syncfusion:ej2-vue-navigations/dist/ej2-vue-navigations.umd.min.js" + } +}); + +System.import('index.js'); diff --git a/ej2-vue/code-snippet/chat-ui/getting-started/app-composition.vue b/ej2-vue/code-snippet/chat-ui/getting-started/app-composition.vue new file mode 100644 index 000000000..00cc11bd5 --- /dev/null +++ b/ej2-vue/code-snippet/chat-ui/getting-started/app-composition.vue @@ -0,0 +1,19 @@ + + + + + diff --git a/ej2-vue/code-snippet/chat-ui/getting-started/app.vue b/ej2-vue/code-snippet/chat-ui/getting-started/app.vue new file mode 100644 index 000000000..75df29c54 --- /dev/null +++ b/ej2-vue/code-snippet/chat-ui/getting-started/app.vue @@ -0,0 +1,27 @@ + + + diff --git a/ej2-vue/code-snippet/chat-ui/getting-started/index.css b/ej2-vue/code-snippet/chat-ui/getting-started/index.css new file mode 100644 index 000000000..fd40910d9 --- /dev/null +++ b/ej2-vue/code-snippet/chat-ui/getting-started/index.css @@ -0,0 +1,4 @@ + + + + diff --git a/ej2-vue/code-snippet/chat-ui/getting-started/index.html b/ej2-vue/code-snippet/chat-ui/getting-started/index.html new file mode 100644 index 000000000..ec92199d1 --- /dev/null +++ b/ej2-vue/code-snippet/chat-ui/getting-started/index.html @@ -0,0 +1,21 @@ + + + + + + EJ2 Vue Sample + + + + + + + + + + + +
    Loading....
    + + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/chat-ui/getting-started/index.js b/ej2-vue/code-snippet/chat-ui/getting-started/index.js new file mode 100644 index 000000000..3b9b5bf5f --- /dev/null +++ b/ej2-vue/code-snippet/chat-ui/getting-started/index.js @@ -0,0 +1,19 @@ +import Vue from 'vue'; +import { ChatUIPlugin } from "@syncfusion/ej2-vue-interactive-chat"; +Vue.use(ChatUIPlugin); + +new Vue({ + el: '#app', + template: ` +
    +
    + +
    +`, + + data () { + return { + } + } + +}); \ No newline at end of file diff --git a/ej2-vue/code-snippet/chat-ui/getting-started/systemjs.config.js b/ej2-vue/code-snippet/chat-ui/getting-started/systemjs.config.js new file mode 100644 index 000000000..6a9051164 --- /dev/null +++ b/ej2-vue/code-snippet/chat-ui/getting-started/systemjs.config.js @@ -0,0 +1,34 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js", + "@syncfusion/ej2-vue-interactive-chat": "syncfusion:ej2-vue-interactive-chat/dist/ej2-vue-interactive-chat.umd.min.js", + "@syncfusion/ej2-vue-inputs": "syncfusion:ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js", + "@syncfusion/ej2-vue-navigations": "syncfusion:ej2-vue-navigations/dist/ej2-vue-navigations.umd.min.js" + } +}); + +System.import('index.js'); diff --git a/ej2-vue/code-snippet/gantt/pdf-export-customize-segment-cs1/app-composition.vue b/ej2-vue/code-snippet/gantt/pdf-export-customize-segment-cs1/app-composition.vue new file mode 100644 index 000000000..851db197f --- /dev/null +++ b/ej2-vue/code-snippet/gantt/pdf-export-customize-segment-cs1/app-composition.vue @@ -0,0 +1,66 @@ + + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/gantt/pdf-export-customize-segment-cs1/app.vue b/ej2-vue/code-snippet/gantt/pdf-export-customize-segment-cs1/app.vue new file mode 100644 index 000000000..8cfe70455 --- /dev/null +++ b/ej2-vue/code-snippet/gantt/pdf-export-customize-segment-cs1/app.vue @@ -0,0 +1,79 @@ + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/gantt/pdf-export-customize-segment-cs1/data-source.js b/ej2-vue/code-snippet/gantt/pdf-export-customize-segment-cs1/data-source.js new file mode 100644 index 000000000..cffd5c356 --- /dev/null +++ b/ej2-vue/code-snippet/gantt/pdf-export-customize-segment-cs1/data-source.js @@ -0,0 +1,40 @@ +define(["require", "exports"], function (require, exports) { + "use strict"; + Object.defineProperty(exports, "__esModule", { value: true }); + exports.ganttData = [ + { + TaskID: 1, + TaskName: 'Project Initiation', + StartDate: new Date('04/02/2019'), + EndDate: new Date('04/21/2019'), + subtasks: [ + { + TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50, + Segments: [ + { StartDate: new Date("04/02/2019"), Duration: 2 }, + { StartDate: new Date("04/04/2019"), Duration: 2 } + ] + }, + { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 }, + { + TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50, + Segments: [ + { StartDate: new Date("04/02/2019"), Duration: 2 }, + { StartDate: new Date("04/04/2019"), Duration: 2 } + ] + }, + ] + }, + { + TaskID: 5, + TaskName: 'Project Estimation', + StartDate: new Date('04/02/2019'), + EndDate: new Date('04/21/2019'), + subtasks: [ + { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }, + { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }, + { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 } + ] + }, + ]; +}); diff --git a/ej2-vue/code-snippet/gantt/pdf-export-customize-segment-cs1/index.html b/ej2-vue/code-snippet/gantt/pdf-export-customize-segment-cs1/index.html new file mode 100644 index 000000000..303d777bf --- /dev/null +++ b/ej2-vue/code-snippet/gantt/pdf-export-customize-segment-cs1/index.html @@ -0,0 +1,23 @@ + + + + + + + EJ2 Vue Sample + + + + + + + + + + + +
    Loading....
    + + + + diff --git a/ej2-vue/code-snippet/gantt/pdf-export-customize-segment-cs1/index.js b/ej2-vue/code-snippet/gantt/pdf-export-customize-segment-cs1/index.js new file mode 100644 index 000000000..4138994b5 --- /dev/null +++ b/ej2-vue/code-snippet/gantt/pdf-export-customize-segment-cs1/index.js @@ -0,0 +1,74 @@ + +import Vue from "vue"; +import { GanttPlugin, Toolbar, PdfExport, Edit} from "@syncfusion/ej2-vue-gantt"; +import { ganttData } from './data-source.js'; +import { PdfColor } from '@syncfusion/ej2-pdf-export'; +Vue.use(GanttPlugin); +; +new Vue({ + el: '#app', + template: ` +
    + + + + + + + + +
    +`, + + data: function() { + return { + data: ganttData, + taskFields: { + id: "TaskID", + name: "TaskName", + startDate: "StartDate", + endDate: "EndDate", + duration: "Duration", + progress: "Progress", + child: "subtasks", + segments: "Segments" + }, + editSettings: { + allowEditing: true, + allowDeleting: true, + allowTaskbarEditing: true, + showDeleteConfirmDialog: true + }, + toolbar: ['PdfExport'], + toolbarClick: (args) => { + if (args.item.id === 'GanttContainer_pdfexport') { + var ganttChart = document.getElementById('GanttContainer').ej2_instances[0]; + ganttChart.pdfExport(); + } + }, + pdfQueryTaskbarInfo: (args) => { + if (args.taskbar.taskSegmentStyles) { + args.taskbar.taskSegmentStyles[1].taskColor = new PdfColor(255, 0, 0); + args.taskbar.taskSegmentStyles[1].progressColor = new PdfColor(0, 128, 0); + args.taskbar.taskSegmentStyles[1].taskBorderColor = new PdfColor(0, 0, 0); + } + }, + queryTaskbarInfo: (args) => { + if (args.data.taskData.Segments) { + var segmentIndex = args.taskbarElement.dataset.segmentIndex; + if (Number(segmentIndex) === 1) { + args.taskbarBgColor = 'red'; + args.taskbarBorderColor = 'black'; + args.progressBarBgColor = "green"; + } + } + } + } + }, + + provide: { + gantt: [Toolbar, PdfExport, Edit] + } + +}); \ No newline at end of file diff --git a/ej2-vue/code-snippet/gantt/pdf-export-customize-segment-cs1/systemjs.config.js b/ej2-vue/code-snippet/gantt/pdf-export-customize-segment-cs1/systemjs.config.js new file mode 100644 index 000000000..cbc81fe5c --- /dev/null +++ b/ej2-vue/code-snippet/gantt/pdf-export-customize-segment-cs1/systemjs.config.js @@ -0,0 +1,47 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/24.1.41/" + }, + map: { + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", +vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js", + "@syncfusion/ej2-treegrid": "syncfusion:ej2-treegrid/dist/ej2-treegrid.umd.min.js", + "@syncfusion/ej2-gantt": "syncfusion:ej2-gantt/dist/ej2-gantt.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js", + "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js", + "@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js", + "@syncfusion/ej2-vue-dropdowns": "syncfusion:ej2-vue-dropdowns/dist/ej2-vue-dropdowns.umd.min.js", + "@syncfusion/ej2-vue-gantt": "syncfusion:ej2-vue-gantt/dist/ej2-vue-gantt.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js" + } +}); + +System.import('index.js'); \ No newline at end of file diff --git a/ej2-vue/gantt/pdf-export/customize-pdf-export.md b/ej2-vue/gantt/pdf-export/customize-pdf-export.md index 849be7490..0fa098ae3 100644 --- a/ej2-vue/gantt/pdf-export/customize-pdf-export.md +++ b/ej2-vue/gantt/pdf-export/customize-pdf-export.md @@ -231,4 +231,21 @@ To customize the Gantt style in exported PDF, define the 'ganttStyle' in `pdfExp {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/gantt/pdf-export-cs12" %} \ No newline at end of file +{% previewsample "page.domainurl/code-snippet/gantt/pdf-export-cs12" %} + +## Customize Split Taskbar Segment Colors in PDF + +The PDF export feature in the Gantt Chart allows you to customize the colors of split taskbar segments using the [`taskSegmentStyles`](https://ej2.syncfusion.com/vue/documentation/api/gantt/iTaskbarStyle/#taskSegmentStyles) property inside the [`pdfQueryTaskbarInfo`](https://ej2.syncfusion.com/vue/documentation/api/gantt/#pdfquerytaskbarinfo) event. + +The [`taskSegmentStyles`](https://ej2.syncfusion.com/vue/documentation/api/gantt/iTaskbarStyle/#taskSegmentStyles) property contains a collection of style properties for task segments. By specifying the index of corresponding segment index in this collection you can customize that segment taskbar color, progress color, and its border color. + +{% tabs %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/gantt/pdf-export-customize-segment-cs1/app-composition.vue %} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/gantt/pdf-export-customize-segment-cs1/app.vue %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/gantt/pdf-export-customize-segment-cs1" %} diff --git a/ej2-vue/getting-started/nuxt-3.md b/ej2-vue/getting-started/nuxt-3.md index b5cd4d7b5..6958871a7 100644 --- a/ej2-vue/getting-started/nuxt-3.md +++ b/ej2-vue/getting-started/nuxt-3.md @@ -199,4 +199,4 @@ npm run dev The output will appear as follows: -![Nuxt sample output](../appearance/images/Vue3-grid-demo.PNG) \ No newline at end of file +![Nuxt sample output](../appearance/images/nuxt-3.png) \ No newline at end of file diff --git a/ej2-vue/getting-started/pnpm.md b/ej2-vue/getting-started/pnpm.md index 72a0af7db..82741188d 100644 --- a/ej2-vue/getting-started/pnpm.md +++ b/ej2-vue/getting-started/pnpm.md @@ -212,7 +212,7 @@ pnpm dev The output will appear as follows: -![vue3-js-composition](../appearance/images/vue3-js-composition.png) +![vue3-js-composition](../appearance/images/vue-3-js-composition.png) ## See also diff --git a/ej2-vue/pdfviewer/how-to/show-custom-stamp-item.md b/ej2-vue/pdfviewer/how-to/show-custom-stamp-item.md new file mode 100644 index 000000000..2993a7118 --- /dev/null +++ b/ej2-vue/pdfviewer/how-to/show-custom-stamp-item.md @@ -0,0 +1,134 @@ +--- +layout: post +title: Displaying Custom stamp Items in Vue Pdfviewer component | Syncfusion +description: Learn how to display custom items in the custom stamp Dropdown in Syncfusion Vue Pdfviewer component of Syncfusion Essential JS 2 and more. +control: PDF Viewer +platform: ej2-vue +documentation: ug +domainurl: ##DomainURL## +--- + +# Displaying Custom Items in Custom Stamp Dropdown + +### Overview + +This guide explains how to add and display custom items in the custom stamp dropdown menu of Syncfusion's PDF Viewer using Vue. This feature allows users to easily access and apply custom stamps to their PDF documents. + +### How to Retrieve Base64 Value + +**Step 1:** Follow the steps provided in the [Vue PDF Viewer Getting Started documentation](https://ej2.syncfusion.com/vue/documentation/pdfviewer/getting-started) to create a simple PDF Viewer sample. + +**Step 2:** Configure Custom Stamp Settings + +Within the PDF Viewer setup, utilize `customStampSettings` to specify the custom stamps that should appear in the dropdown menu. + +{% tabs %} +{% highlight html tabtitle="Standalone" %} + + + + + +{% endhighlight %} +{% highlight html tabtitle="Server-Backed" %} + + + + + +{% endhighlight %} +{% endtabs %} + +By following these instructions, you can successfully configure to display custom items in the custom stamp dropdown, allowing users to easily apply personalized stamps to their documents. + +[View sample in GitHub](https://github.com/SyncfusionExamples/vue-pdf-viewer-examples/tree/master/How%20to) \ No newline at end of file From 966c6803cf80dbbd6db44561d7cdd4ea011c0c3d Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Thu, 12 Dec 2024 08:05:15 +0530 Subject: [PATCH 17/17] Integrated latest changes at 12-12-2024 7:30:09 AM --- ej2-vue-toc.html | 13 ++ ej2-vue/chat-ui/accessibility.md | 80 ++++++++ ej2-vue/chat-ui/appearance.md | 71 +++++++ ej2-vue/chat-ui/events.md | 52 +++++ ej2-vue/chat-ui/footer.md | 19 ++ ej2-vue/chat-ui/getting-started.md | 5 +- ej2-vue/chat-ui/globalization.md | 26 +++ ej2-vue/chat-ui/header.md | 165 ++++++++++++++++ ej2-vue/chat-ui/load-on-demand.md | 13 ++ ej2-vue/chat-ui/messages.md | 69 +++++++ ej2-vue/chat-ui/methods.md | 23 +++ ej2-vue/chat-ui/templates.md | 37 ++++ ej2-vue/chat-ui/timebreaks.md | 19 ++ ej2-vue/chat-ui/timestamp.md | 19 ++ ej2-vue/chat-ui/typing-indicator.md | 21 ++ ej2-vue/chat-ui/vue3-getting-started.md | 48 ++--- ej2-vue/circular-gauge/gauge-pointers.md | 20 +- .../appearance/cssClass/app-composition.vue | 35 ++++ .../chat-ui/appearance/cssClass/app.vue | 44 +++++ .../chat-ui/appearance/cssClass/index.css | 14 ++ .../chat-ui/appearance/cssClass/index.html | 21 ++ .../chat-ui/appearance/cssClass/index.js | 32 +++ .../appearance/cssClass/systemjs.config.js | 34 ++++ .../appearance/height/app-composition.vue | 35 ++++ .../chat-ui/appearance/height/app.vue | 44 +++++ .../chat-ui/appearance/height/index.css | 4 + .../chat-ui/appearance/height/index.html | 21 ++ .../chat-ui/appearance/height/index.js | 32 +++ .../appearance/height/systemjs.config.js | 34 ++++ .../placeholder/app-composition.vue | 35 ++++ .../chat-ui/appearance/placeholder/app.vue | 44 +++++ .../chat-ui/appearance/placeholder/index.css | 4 + .../chat-ui/appearance/placeholder/index.html | 21 ++ .../chat-ui/appearance/placeholder/index.js | 32 +++ .../appearance/placeholder/systemjs.config.js | 34 ++++ .../appearance/width/app-composition.vue | 35 ++++ .../chat-ui/appearance/width/app.vue | 44 +++++ .../chat-ui/appearance/width/index.css | 4 + .../chat-ui/appearance/width/index.html | 21 ++ .../chat-ui/appearance/width/index.js | 32 +++ .../appearance/width/systemjs.config.js | 34 ++++ .../defaultMessage/app-composition.vue | 28 +-- .../chat-ui/defaultMessage/app.vue | 52 ++--- .../chat-ui/defaultMessage/index.js | 44 ++--- .../events/created/app-composition.vue | 23 +++ .../chat-ui/events/created/app.vue | 31 +++ .../chat-ui/events/created/index.css | 4 + .../chat-ui/events/created/index.html | 21 ++ .../chat-ui/events/created/index.js | 21 ++ .../chat-ui/events/created/systemjs.config.js | 34 ++++ .../events/messageSend/app-composition.vue | 23 +++ .../chat-ui/events/messageSend/app.vue | 31 +++ .../chat-ui/events/messageSend/index.css | 4 + .../chat-ui/events/messageSend/index.html | 21 ++ .../chat-ui/events/messageSend/index.js | 21 ++ .../events/messageSend/systemjs.config.js | 34 ++++ .../events/userTyping/app-composition.vue | 23 +++ .../chat-ui/events/userTyping/app.vue | 31 +++ .../chat-ui/events/userTyping/index.css | 4 + .../chat-ui/events/userTyping/index.html | 21 ++ .../chat-ui/events/userTyping/index.js | 21 ++ .../events/userTyping/systemjs.config.js | 34 ++++ .../app-composition.vue | 56 ++++++ .../gauge-pointers-drag-cs1/app.vue | 67 +++++++ .../gauge-pointers-drag-cs1/index.css | 5 + .../gauge-pointers-drag-cs1/index.html | 23 +++ .../gauge-pointers-drag-cs1/index.js | 41 ++++ .../systemjs.config.js | 32 +++ .../marker-clusters-cs1/app-composition.vue | 155 +++++++++++++++ .../maps/marker-clusters-cs1/app.vue | 166 ++++++++++++++++ .../marker-clusters-cs1/cluster-france.svg | 31 +++ .../marker-clusters-cs1/cluster-india.svg | 31 +++ .../maps/marker-clusters-cs1/cluster-usa.svg | 31 +++ .../maps/marker-clusters-cs1/index.css | 5 + .../maps/marker-clusters-cs1/index.html | 23 +++ .../maps/marker-clusters-cs1/index.js | 58 ++++++ .../marker-clusters-cs1/systemjs.config.js | 38 ++++ .../maps/marker-clusters-cs1/world-map.js | 186 ++++++++++++++++++ .../app-composition.vue | 41 ++++ .../marker-size-customization-cs1/app.vue | 51 +++++ .../marker-size-customization-cs1/index.css | 5 + .../marker-size-customization-cs1/index.html | 23 +++ .../marker-size-customization-cs1/index.js | 40 ++++ .../systemjs.config.js | 38 ++++ .../world-map.js | 186 ++++++++++++++++++ ej2-vue/maps/markers.md | 34 +++- ej2-vue/spreadsheet/cell-range.md | 15 ++ ej2-vue/spreadsheet/formulas.md | 24 +++ 88 files changed, 3208 insertions(+), 113 deletions(-) create mode 100644 ej2-vue/chat-ui/accessibility.md create mode 100644 ej2-vue/chat-ui/appearance.md create mode 100644 ej2-vue/chat-ui/events.md create mode 100644 ej2-vue/chat-ui/footer.md create mode 100644 ej2-vue/chat-ui/globalization.md create mode 100644 ej2-vue/chat-ui/header.md create mode 100644 ej2-vue/chat-ui/load-on-demand.md create mode 100644 ej2-vue/chat-ui/messages.md create mode 100644 ej2-vue/chat-ui/methods.md create mode 100644 ej2-vue/chat-ui/templates.md create mode 100644 ej2-vue/chat-ui/timebreaks.md create mode 100644 ej2-vue/chat-ui/timestamp.md create mode 100644 ej2-vue/chat-ui/typing-indicator.md create mode 100644 ej2-vue/code-snippet/chat-ui/appearance/cssClass/app-composition.vue create mode 100644 ej2-vue/code-snippet/chat-ui/appearance/cssClass/app.vue create mode 100644 ej2-vue/code-snippet/chat-ui/appearance/cssClass/index.css create mode 100644 ej2-vue/code-snippet/chat-ui/appearance/cssClass/index.html create mode 100644 ej2-vue/code-snippet/chat-ui/appearance/cssClass/index.js create mode 100644 ej2-vue/code-snippet/chat-ui/appearance/cssClass/systemjs.config.js create mode 100644 ej2-vue/code-snippet/chat-ui/appearance/height/app-composition.vue create mode 100644 ej2-vue/code-snippet/chat-ui/appearance/height/app.vue create mode 100644 ej2-vue/code-snippet/chat-ui/appearance/height/index.css create mode 100644 ej2-vue/code-snippet/chat-ui/appearance/height/index.html create mode 100644 ej2-vue/code-snippet/chat-ui/appearance/height/index.js create mode 100644 ej2-vue/code-snippet/chat-ui/appearance/height/systemjs.config.js create mode 100644 ej2-vue/code-snippet/chat-ui/appearance/placeholder/app-composition.vue create mode 100644 ej2-vue/code-snippet/chat-ui/appearance/placeholder/app.vue create mode 100644 ej2-vue/code-snippet/chat-ui/appearance/placeholder/index.css create mode 100644 ej2-vue/code-snippet/chat-ui/appearance/placeholder/index.html create mode 100644 ej2-vue/code-snippet/chat-ui/appearance/placeholder/index.js create mode 100644 ej2-vue/code-snippet/chat-ui/appearance/placeholder/systemjs.config.js create mode 100644 ej2-vue/code-snippet/chat-ui/appearance/width/app-composition.vue create mode 100644 ej2-vue/code-snippet/chat-ui/appearance/width/app.vue create mode 100644 ej2-vue/code-snippet/chat-ui/appearance/width/index.css create mode 100644 ej2-vue/code-snippet/chat-ui/appearance/width/index.html create mode 100644 ej2-vue/code-snippet/chat-ui/appearance/width/index.js create mode 100644 ej2-vue/code-snippet/chat-ui/appearance/width/systemjs.config.js create mode 100644 ej2-vue/code-snippet/chat-ui/events/created/app-composition.vue create mode 100644 ej2-vue/code-snippet/chat-ui/events/created/app.vue create mode 100644 ej2-vue/code-snippet/chat-ui/events/created/index.css create mode 100644 ej2-vue/code-snippet/chat-ui/events/created/index.html create mode 100644 ej2-vue/code-snippet/chat-ui/events/created/index.js create mode 100644 ej2-vue/code-snippet/chat-ui/events/created/systemjs.config.js create mode 100644 ej2-vue/code-snippet/chat-ui/events/messageSend/app-composition.vue create mode 100644 ej2-vue/code-snippet/chat-ui/events/messageSend/app.vue create mode 100644 ej2-vue/code-snippet/chat-ui/events/messageSend/index.css create mode 100644 ej2-vue/code-snippet/chat-ui/events/messageSend/index.html create mode 100644 ej2-vue/code-snippet/chat-ui/events/messageSend/index.js create mode 100644 ej2-vue/code-snippet/chat-ui/events/messageSend/systemjs.config.js create mode 100644 ej2-vue/code-snippet/chat-ui/events/userTyping/app-composition.vue create mode 100644 ej2-vue/code-snippet/chat-ui/events/userTyping/app.vue create mode 100644 ej2-vue/code-snippet/chat-ui/events/userTyping/index.css create mode 100644 ej2-vue/code-snippet/chat-ui/events/userTyping/index.html create mode 100644 ej2-vue/code-snippet/chat-ui/events/userTyping/index.js create mode 100644 ej2-vue/code-snippet/chat-ui/events/userTyping/systemjs.config.js create mode 100644 ej2-vue/code-snippet/circular-gauge/gauge-pointers-drag-cs1/app-composition.vue create mode 100644 ej2-vue/code-snippet/circular-gauge/gauge-pointers-drag-cs1/app.vue create mode 100644 ej2-vue/code-snippet/circular-gauge/gauge-pointers-drag-cs1/index.css create mode 100644 ej2-vue/code-snippet/circular-gauge/gauge-pointers-drag-cs1/index.html create mode 100644 ej2-vue/code-snippet/circular-gauge/gauge-pointers-drag-cs1/index.js create mode 100644 ej2-vue/code-snippet/circular-gauge/gauge-pointers-drag-cs1/systemjs.config.js create mode 100644 ej2-vue/code-snippet/maps/marker-clusters-cs1/app-composition.vue create mode 100644 ej2-vue/code-snippet/maps/marker-clusters-cs1/app.vue create mode 100644 ej2-vue/code-snippet/maps/marker-clusters-cs1/cluster-france.svg create mode 100644 ej2-vue/code-snippet/maps/marker-clusters-cs1/cluster-india.svg create mode 100644 ej2-vue/code-snippet/maps/marker-clusters-cs1/cluster-usa.svg create mode 100644 ej2-vue/code-snippet/maps/marker-clusters-cs1/index.css create mode 100644 ej2-vue/code-snippet/maps/marker-clusters-cs1/index.html create mode 100644 ej2-vue/code-snippet/maps/marker-clusters-cs1/index.js create mode 100644 ej2-vue/code-snippet/maps/marker-clusters-cs1/systemjs.config.js create mode 100644 ej2-vue/code-snippet/maps/marker-clusters-cs1/world-map.js create mode 100644 ej2-vue/code-snippet/maps/marker-size-customization-cs1/app-composition.vue create mode 100644 ej2-vue/code-snippet/maps/marker-size-customization-cs1/app.vue create mode 100644 ej2-vue/code-snippet/maps/marker-size-customization-cs1/index.css create mode 100644 ej2-vue/code-snippet/maps/marker-size-customization-cs1/index.html create mode 100644 ej2-vue/code-snippet/maps/marker-size-customization-cs1/index.js create mode 100644 ej2-vue/code-snippet/maps/marker-size-customization-cs1/systemjs.config.js create mode 100644 ej2-vue/code-snippet/maps/marker-size-customization-cs1/world-map.js diff --git a/ej2-vue-toc.html b/ej2-vue-toc.html index 04ddad5d7..814e63a8e 100644 --- a/ej2-vue-toc.html +++ b/ej2-vue-toc.html @@ -514,6 +514,19 @@
  • CheckBox diff --git a/ej2-vue/chat-ui/accessibility.md b/ej2-vue/chat-ui/accessibility.md new file mode 100644 index 000000000..5edf3ec98 --- /dev/null +++ b/ej2-vue/chat-ui/accessibility.md @@ -0,0 +1,80 @@ +--- +layout: post +title: Accessibility in Vue Chat UI component | Syncfusion +description: Learn here all about Accessibility in Syncfusion Vue Chat UI component of Syncfusion Essential JS 2 and more. +platform: ej2-vue +control: Chat UI +documentation: ug +domainurl: ##DomainURL## +--- + +# Accessibility in Vue Chat UI component + +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. + +The accessibility compliance for the Chat UI component is outlined below. + +| Accessibility Criteria | Compatibility | +| -- | -- | +| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | Yes | +| [Section 508 Support](../common/accessibility#accessibility-standards) | Yes | +| [Screen Reader Support](../common/accessibility#screen-reader-support) | Yes | +| [Right-To-Left Support](../common/accessibility#right-to-left-support) | Yes | +| [Color Contrast](../common/accessibility#color-contrast) | Yes | +| [Mobile Device Support](../common/accessibility#mobile-device-support) | Yes | +| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | Yes | +| [Accessibility Checker Validation](../common/accessibility#ensuring-accessibility) | Yes | +| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | Yes | + + +
    Yes - All features of the component meet the requirement.
    + +
    Intermediate - Some features of the component do not meet the requirement.
    + +
    No - The component does not meet the requirement.
    + +## WAI-ARIA attributes + +The following ARIA attributes are used in the Chat UI component: + +| Attributes | Purpose | +| ------------ | ----------------------- | +| `role=button` | Indicates that the element is clickable and triggers an action when activated by the user. | +| `role=toolbar` | Specifies that the element is a toolbar. | +| `aria-label` | Defines a string value that labels an interactive element for accessibility. | +| `aria-orientation` | Specifies the orientation of the toolbar. | +| `aria-disabled` | Indicates whether the toolbar or element is currently disabled and not interactive. | +| `aria-multiline` | Indicates that a textbox accepts multiple lines of input or only a single line. | + +## Keyboard interaction + +The following keyboard shortcuts are supported by the Chat UI component. + +| **Press** | **To do this** | +| --- | --- | +| Enter | Select the focused item or send a message when the input is focused. | +| Tab | Moves focus forward through the interactive elements. | +| Shift + Tab | Moves focus backward through the interactive elements. | +| Page Up | Scroll up through chat history. | +| Page Down | Scroll down through chat history. | +| Ctrl + Home | Scroll to the first message. | +| Ctrl + End | Scroll to the most recent message. | +Chat UI Toolbars|| +| Left Arrow | Focuses the previous toolbar element. | +| Right Arrow | Focuses the next toolbar element. | +| Enter / Space | Select the focused item or activate the selected option. | +| Home | Moves focus to the first toolbar element. | +| End | Moves focus to the last toolbar element. | + +## Ensuring accessibility + +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. + +## See also + +* [Accessibility in Syncfusion components](../common/accessibility) diff --git a/ej2-vue/chat-ui/appearance.md b/ej2-vue/chat-ui/appearance.md new file mode 100644 index 000000000..fc3478f0d --- /dev/null +++ b/ej2-vue/chat-ui/appearance.md @@ -0,0 +1,71 @@ +--- +layout: post +title: Appearance in Vue Chat UI component | Syncfusion +description: Checkout and learn about Appearance with Vue Chat UI component of Syncfusion Essential JS 2 and more details. +platform: ej2-vue +control: Chat UI +documentation: ug +domainurl: ##DomainURL## +--- + +# Appearance in Vue Chat UI component + +## Setting placeholder + +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…`. + +{% tabs %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/chat-ui/appearance/placeholder/app-composition.vue %} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/chat-ui/appearance/placeholder/app.vue %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chat-ui/appearance/placeholder" %} + +## Setting width + +You can use the `width` property to specify the dimensions of the Chat UI within the application layout. By default, the value is `100%`. + +{% tabs %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/chat-ui/appearance/width/app-composition.vue %} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/chat-ui/appearance/width/app.vue %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chat-ui/appearance/width" %} + +## Setting height + +You can use the `height` property to specify the dimensions of the Chat UI within the application layout. By default, the value is `100%`. + +{% tabs %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/chat-ui/appearance/height/app-composition.vue %} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/chat-ui/appearance/height/app.vue %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chat-ui/appearance/height" %} + +## CssClass + +You can use the `cssClass` property to customize the appearance of the chat UI component. + +{% tabs %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/chat-ui/appearance/cssClass/app-composition.vue %} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/chat-ui/appearance/cssClass/app.vue %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chat-ui/appearance/cssClass" %} diff --git a/ej2-vue/chat-ui/events.md b/ej2-vue/chat-ui/events.md new file mode 100644 index 000000000..cd9ef5f43 --- /dev/null +++ b/ej2-vue/chat-ui/events.md @@ -0,0 +1,52 @@ +--- +layout: post +title: Events in Vue Chat UI component | Syncfusion +description: Checkout and learn about Events with Vue Chat UI component of Syncfusion Essential JS 2 and more details. +platform: ej2-vue +control: Chat UI +documentation: ug +domainurl: ##DomainURL## +--- + +# Events in Vue Chat UI component component + +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. + +## Created + +The Chat UI component triggers the `created` event when the component rendering is completed. + +{% tabs %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/chat-ui/events/created/app-composition.vue %} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/chat-ui/events/created/app.vue %} +{% endhighlight %} +{% endtabs %} + +## Sending message + +The `messageSend` event is triggered before sending a message in the Chat UI component. + +{% tabs %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/chat-ui/events/messageSend/app-composition.vue %} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/chat-ui/events/messageSend/app.vue %} +{% endhighlight %} +{% endtabs %} + +## User Typing + +The `userTyping` event is triggered when the user is typing a message in the Chat UI component. + +{% tabs %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/chat-ui/events/userTyping/app-composition.vue %} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/chat-ui/events/userTyping/app.vue %} +{% endhighlight %} +{% endtabs %} diff --git a/ej2-vue/chat-ui/footer.md b/ej2-vue/chat-ui/footer.md new file mode 100644 index 000000000..8fe2ba1e6 --- /dev/null +++ b/ej2-vue/chat-ui/footer.md @@ -0,0 +1,19 @@ +--- +layout: post +title: Footer in Vue Chat UI component | Syncfusion +description: Checkout and learn about Footer with Vue Chat UI component of Syncfusion Essential JS 2 and more details. +platform: ej2-vue +control: Chat UI +documentation: ug +domainurl: ##DomainURL## +--- + +# Footer in Vue Chat UI component + +## Show or hide footer + +You can use showFooter property to enable or disable the chat footer. + +## Footer template + +> Refer to the [Templates](./templates#footer-template) section for more details about the Footer template. diff --git a/ej2-vue/chat-ui/getting-started.md b/ej2-vue/chat-ui/getting-started.md index b6265681d..2c97c6d3d 100644 --- a/ej2-vue/chat-ui/getting-started.md +++ b/ej2-vue/chat-ui/getting-started.md @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Getting Started with the Vue Chat UI Component in Vue 2 +# Getting Started with the Vue Chat UI component in Vue 2 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). @@ -119,7 +119,6 @@ export default {