@syncfusion/ej2-vue-layouts 19.2.48 → 19.3.44

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-vue-layouts@*",
-  "_id": "@syncfusion/ej2-vue-layouts@18.3.35",
+  "_id": "@syncfusion/ej2-vue-layouts@18.23.7",
   "_inBundle": false,
-  "_integrity": "sha512-2EO/e9vfMDWTX39Wjv64c/wdHoEY3a07hu/k76/HmTjG6viyJDJzwszB6FlYp1NWRx0C2TLc2M9aneEqUJAtSQ==",
+  "_integrity": "sha512-bfRlp7aQOWF+pSXs1+86wkaUK2NVWXiu3xDrd0MnzMwTqrogWww3Biq1wDCkkTfvfCtIBq1DzduHI//FfejyGg==",
   "_location": "/@syncfusion/ej2-vue-layouts",
   "_phantomChildren": {},
   "_requested": {
@@ -19,8 +19,8 @@
   "_requiredBy": [
     "/"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix/@syncfusion/ej2-vue-layouts/-/ej2-vue-layouts-18.3.35.tgz",
-  "_shasum": "8e8890f91dc483c147957c994790ace7fcc1d839",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix/@syncfusion/ej2-vue-layouts/-/ej2-vue-layouts-18.23.7.tgz",
+  "_shasum": "09e5384648b4e5da86f62145c10b296e0d129d2f",
   "_spec": "@syncfusion/ej2-vue-layouts@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -31,9 +31,9 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~19.2.48",
-    "@syncfusion/ej2-layouts": "19.2.48",
-    "@syncfusion/ej2-vue-base": "~19.2.48"
+    "@syncfusion/ej2-base": "~19.3.43",
+    "@syncfusion/ej2-layouts": "19.3.44",
+    "@syncfusion/ej2-vue-base": "~19.3.43"
   },
   "deprecated": false,
   "description": "A package of Essential JS 2 layout pure CSS components such as card and avatar. The card is used as small container to show content in specific structure, whereas the avatars are icons, initials or figures representing particular person. for Vue",
@@ -65,6 +65,6 @@
     "type": "git",
     "url": "git+https://github.com/syncfusion/ej2-vue-ui-components.git"
   },
-  "version": "19.2.48",
+  "version": "19.3.44",
   "sideEffects": false
 }

package/src/dashboard-layout/dashboardlayout.component.d.ts

@@ -23,7 +23,9 @@ export declare class DashboardLayoutComponent extends ComponentBase {
     };
     tagNameMapper: Object;
     isVue3: boolean;
+    templateCollection: any;
     constructor();
+    clearTemplate(templateNames?: string[]): any;
     setProperties(prop: any, muteOnChange: boolean): void;
     render(createElement: any): any;
     addPanel(panel: Object): void;

package/src/dashboard-layout/dashboardlayout.component.js

@@ -18,7 +18,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { ComponentBase, EJComponentDecorator, getProps, gh } from '@syncfusion/ej2-vue-base';
-import { isNullOrUndefined } from '@syncfusion/ej2-base';
+import { isNullOrUndefined, getValue } from '@syncfusion/ej2-base';
 import { DashboardLayout } from '@syncfusion/ej2-layouts';
 import { PanelsDirective, PanelDirective, PanelsPlugin, PanelPlugin } from './panels.directive';
 import { Options } from 'vue-class-component';
@@ -55,8 +55,33 @@ var DashboardLayoutComponent = /** @class */ (function (_super) {
         _this.bindProperties();
         _this.ej2Instances._setProperties = _this.ej2Instances.setProperties;
         _this.ej2Instances.setProperties = _this.setProperties;
+        _this.ej2Instances.clearTemplate = _this.clearTemplate;
         return _this;
     }
+    DashboardLayoutComponent.prototype.clearTemplate = function (templateNames) {
+        if (!templateNames) {
+            templateNames = Object.keys(this.templateCollection || {});
+        }
+        if (templateNames.length && this.templateCollection) {
+            for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {
+                var tempName = templateNames_1[_i];
+                var elementCollection = this.templateCollection[tempName];
+                if (elementCollection && elementCollection.length) {
+                    for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {
+                        var ele = elementCollection_1[_a];
+                        var destroy = getValue('__vue__.$destroy', ele);
+                        if (destroy) {
+                            ele.__vue__.$destroy();
+                        }
+                        if (ele.innerHTML) {
+                            ele.innerHTML = '';
+                        }
+                    }
+                    delete this.templateCollection[tempName];
+                }
+            }
+        }
+    };
     DashboardLayoutComponent.prototype.setProperties = function (prop, muteOnChange) {
         var _this = this;
         if (this.isVue3) {
@@ -74,6 +99,7 @@ var DashboardLayoutComponent = /** @class */ (function (_super) {
                         }
                         else {
                             _this.$emit('update:' + key, prop[key]);
+                            _this.$emit('modelchanged', prop[key]);
                         }
                     }
                 });

package/src/splitter/splitter.component.d.ts

@@ -23,7 +23,9 @@ export declare class SplitterComponent extends ComponentBase {
     };
     tagNameMapper: Object;
     isVue3: boolean;
+    templateCollection: any;
     constructor();
+    clearTemplate(templateNames?: string[]): any;
     setProperties(prop: any, muteOnChange: boolean): void;
     render(createElement: any): any;
     addPane(paneProperties: Object, index: number): void;

package/src/splitter/splitter.component.js

@@ -18,7 +18,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { ComponentBase, EJComponentDecorator, getProps, gh } from '@syncfusion/ej2-vue-base';
-import { isNullOrUndefined } from '@syncfusion/ej2-base';
+import { isNullOrUndefined, getValue } from '@syncfusion/ej2-base';
 import { Splitter } from '@syncfusion/ej2-layouts';
 import { PanesDirective, PaneDirective, PanesPlugin, PanePlugin } from './panesettings.directive';
 import { Options } from 'vue-class-component';
@@ -55,8 +55,33 @@ var SplitterComponent = /** @class */ (function (_super) {
         _this.bindProperties();
         _this.ej2Instances._setProperties = _this.ej2Instances.setProperties;
         _this.ej2Instances.setProperties = _this.setProperties;
+        _this.ej2Instances.clearTemplate = _this.clearTemplate;
         return _this;
     }
+    SplitterComponent.prototype.clearTemplate = function (templateNames) {
+        if (!templateNames) {
+            templateNames = Object.keys(this.templateCollection || {});
+        }
+        if (templateNames.length && this.templateCollection) {
+            for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {
+                var tempName = templateNames_1[_i];
+                var elementCollection = this.templateCollection[tempName];
+                if (elementCollection && elementCollection.length) {
+                    for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {
+                        var ele = elementCollection_1[_a];
+                        var destroy = getValue('__vue__.$destroy', ele);
+                        if (destroy) {
+                            ele.__vue__.$destroy();
+                        }
+                        if (ele.innerHTML) {
+                            ele.innerHTML = '';
+                        }
+                    }
+                    delete this.templateCollection[tempName];
+                }
+            }
+        }
+    };
     SplitterComponent.prototype.setProperties = function (prop, muteOnChange) {
         var _this = this;
         if (this.isVue3) {
@@ -74,6 +99,7 @@ var SplitterComponent = /** @class */ (function (_super) {
                         }
                         else {
                             _this.$emit('update:' + key, prop[key]);
+                            _this.$emit('modelchanged', prop[key]);
                         }
                     }
                 });

package/styles/avatar/bootstrap5-dark.css

@@ -0,0 +1,61 @@
+.e-avatar {
+  -ms-flex-line-pack: center;
+      align-content: center;
+  -ms-flex-align: center;
+      align-items: center;
+  background-color: #495057;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  border-radius: 2px;
+  color: #adb5bd;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-size: 14px;
+  font-weight: 500;
+  height: 40px;
+  -ms-flex-pack: center;
+      justify-content: center;
+  overflow: hidden;
+  position: relative;
+  width: 40px;
+  line-height: 22px;
+}
+
+.e-avatar img {
+  height: 100%;
+  width: auto;
+}
+
+.e-avatar.e-avatar-circle {
+  border-radius: 50%;
+}
+
+.e-avatar.e-avatar-xsmall {
+  font-size: 10px;
+  height: 24px;
+  line-height: 16px;
+  width: 24px;
+}
+
+.e-avatar.e-avatar-small {
+  font-size: 12px;
+  height: 32px;
+  line-height: 18px;
+  width: 32px;
+}
+
+.e-avatar.e-avatar-large {
+  font-size: 18px;
+  height: 48px;
+  line-height: 28px;
+  width: 48px;
+}
+
+.e-avatar.e-avatar-xlarge {
+  font-size: 20px;
+  height: 56px;
+  line-height: 28px;
+  width: 56px;
+}

package/styles/avatar/bootstrap5-dark.scss

@@ -0,0 +1 @@
+@import 'ej2-layouts/styles/avatar/bootstrap5-dark.scss';

package/styles/avatar/bootstrap5.css

@@ -0,0 +1,61 @@
+.e-avatar {
+  -ms-flex-line-pack: center;
+      align-content: center;
+  -ms-flex-align: center;
+      align-items: center;
+  background-color: #dee2e6;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  border-radius: 2px;
+  color: #6c757d;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-size: 14px;
+  font-weight: 500;
+  height: 40px;
+  -ms-flex-pack: center;
+      justify-content: center;
+  overflow: hidden;
+  position: relative;
+  width: 40px;
+  line-height: 22px;
+}
+
+.e-avatar img {
+  height: 100%;
+  width: auto;
+}
+
+.e-avatar.e-avatar-circle {
+  border-radius: 50%;
+}
+
+.e-avatar.e-avatar-xsmall {
+  font-size: 10px;
+  height: 24px;
+  line-height: 16px;
+  width: 24px;
+}
+
+.e-avatar.e-avatar-small {
+  font-size: 12px;
+  height: 32px;
+  line-height: 18px;
+  width: 32px;
+}
+
+.e-avatar.e-avatar-large {
+  font-size: 18px;
+  height: 48px;
+  line-height: 28px;
+  width: 48px;
+}
+
+.e-avatar.e-avatar-xlarge {
+  font-size: 20px;
+  height: 56px;
+  line-height: 28px;
+  width: 56px;
+}

package/styles/avatar/bootstrap5.scss

@@ -0,0 +1 @@
+@import 'ej2-layouts/styles/avatar/bootstrap5.scss';

package/styles/bootstrap-dark.css

@@ -649,6 +649,10 @@
   font-size: 14px;
 }
 
+.e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler.e-template-resize-handler::before {
+  content: '';
+}
+
 .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler::before {
   content: '\e984';
   font-family: 'e-icons';
@@ -656,6 +660,10 @@
   transform: rotate(90deg);
 }
 
+.e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler.e-template-resize-handler::before {
+  content: '';
+}
+
 .e-bigger .e-splitter .e-split-bar .e-resize-handler::before {
   font-size: 16px;
 }

package/styles/bootstrap.css

@@ -650,6 +650,10 @@
   font-size: 14px;
 }
 
+.e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler.e-template-resize-handler::before {
+  content: '';
+}
+
 .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler::before {
   content: '\e984';
   font-family: 'e-icons';
@@ -657,6 +661,10 @@
   transform: rotate(90deg);
 }
 
+.e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler.e-template-resize-handler::before {
+  content: '';
+}
+
 .e-bigger .e-splitter .e-split-bar .e-resize-handler::before {
   font-size: 16px;
 }

package/styles/bootstrap4.css

@@ -657,12 +657,20 @@
   font-size: 14px;
 }
 
+.e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler.e-template-resize-handler::before {
+  content: '';
+}
+
 .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler::before {
   content: '\e71b';
   font-family: 'e-icons';
   font-size: 14px;
 }
 
+.e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler.e-template-resize-handler::before {
+  content: '';
+}
+
 .e-bigger .e-splitter .e-split-bar .e-resize-handler::before {
   font-size: 16px;
 }