v29.1.33 is released

Author: pipeline

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ej2-vue-samples",
-  "version": "28.1.33",
+  "version": "29.1.33",
   "description": "Examples of Vue UI Components",
   "keywords": [],
   "dependencies": {
@@ -46,7 +46,8 @@
     "form-data": "^4.0.0",
     "openai": "^4.57.3",
     "vue": "3.5.10",
-    "vue-router": "4.2.4"
+    "vue-router": "4.2.4",
+    "@codemirror/lang-html": "^6.0.0"
   },
   "devDependencies": {
     "@microsoft/signalr": "7.0.11",
@@ -69,7 +70,7 @@
     "shelljs": "0.8.5",
     "ts-loader": "5.2.0",
     "typescript": "5.1.6",
-    "webpack": "5.94.0",
+    "webpack": "5.88.2",
     "webpack-cli": "5.1.4"
   },
   "scripts": {

public/styles/common.css

@@ -9,7 +9,7 @@ span.e-input-group.e-control-wrapper.e-ddl {
 }
 
 .container-fluid {
-    padding: 0;
+    padding: 0 !important;
     margin-right: 15px;
     margin-left: 15px;
 }
@@ -61,7 +61,8 @@ span.e-input-group.e-control-wrapper.e-ddl {
     align-items: center;
     justify-content: space-between;
     margin-top: 1px;
-    margin-left: 5px;
+    margin-left: 6px;
+    margin-right: 20px;
     background: transparent;
     height: 32px;
     padding: 8px;
@@ -71,7 +72,6 @@ span.e-input-group.e-control-wrapper.e-ddl {
 #themeMode-switch-btn #sb-icon-text {
     font-size: 14px;
     font-family: "Roboto", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif";
-    margin-top: 2px;
 }
 
 #themeMode-switch-btn .sb-icons {
@@ -281,15 +281,21 @@ span.e-input-group.e-control-wrapper.e-ddl {
     height: 27px;
     text-align: center;
     border-radius: 2px;
-    margin: 0px 27px 0px 28px;
+}
+
+.sb-settings-wrapper {
+    padding: 0 20px 0px 10px;
+}
+
+.sb-search-wrapper {
+    padding: 0px 10px 0px 24px;
 }
 
 .sb-setting-btn {
     width: 32px;
     height: 27px;
     text-align: center;
     border-radius: 2px;
-    margin: 0px 31px 0px 0px;
 }
 #themeMode-switch-btn:hover,
 .sb-search-btn:hover,
@@ -300,7 +306,7 @@ span.e-input-group.e-control-wrapper.e-ddl {
 }
 
 #sb-toggle-left {
-    padding-left: 18px;
+    padding-left: 15px;
     font-size: 24px;
     cursor: pointer;
 }
@@ -331,15 +337,13 @@ span.e-input-group.e-control-wrapper.e-ddl {
 .sb-header-right .sb-icons {
     font-size: 20px;
 }
-.sb-search-splitter {
-    margin-left: 16px;
-}
+
 .sb-header-splitter {
     float: left;
     border-left: 1px solid rgb(196, 196, 196);
     height: 32px;
     margin-top: 8px;
-     
+    padding-right: 22px; 
 }
 
 #search-input-wrapper .sb-reset-icon {
@@ -425,6 +429,7 @@ span.e-input-group.e-control-wrapper.e-ddl {
     height: 32px;
     width: 150px;
     margin-top: 5px;
+    margin-right: 10px;
     cursor: default;
     padding-left: 10px;
     padding-right: 10px;
@@ -447,7 +452,11 @@ span.e-input-group.e-control-wrapper.e-ddl {
     line-height: 18px;
     height: 32px;
     border-color: transparent;
-    margin-left: 24px;
+}
+
+.sb-search-splitter {
+    margin-right: 3px;
+    padding-right: 0px;
 }
 
 .sb-header-settings {
@@ -783,7 +792,7 @@ span.e-input-group.e-control-wrapper.e-ddl {
 .sb-home {
     display: table;
     width: 100%;
-    padding: 12px 16px;
+    padding: 12px 14px;
     height: 66px;
     position: relative;
 }
@@ -951,7 +960,7 @@ span.e-input-group.e-control-wrapper.e-ddl {
 }
 
 .sb-left-pane #sb-left-back {
-    padding: 12px 20px;
+    padding: 12px 18px;
     width: 100%;
     display: table;
     cursor: pointer;
@@ -1038,7 +1047,7 @@ span.e-input-group.e-control-wrapper.e-ddl {
 }
 
 .sb-content-section {
-    background: #FFFFFF;
+    border-radius: 12px;
     border: 1px solid #D7D7D7;
     opacity: 100;
     height: 100%;
@@ -1111,7 +1120,7 @@ a.code:visited {
 
 .sb-bread-crumb {
     padding-top: 6px;
-    padding-bottom: 27px;
+    padding-bottom: 24px;
 }
 
 .sb-action-description {
@@ -2058,7 +2067,7 @@ aside#left-sidebar {
     float: right;
     font-size: 15px;
     font-weight: 600;
-    padding: 11px 29px;
+    padding: 11px 22px;
     box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.20);
     cursor: pointer;
 }
@@ -2157,7 +2166,7 @@ aside#left-sidebar {
         margin: 17px auto 0px;
         float: none;
         width: 242px;
-        padding: 11px 61px;
+        padding: 11px 56px;
     }
 
     .content-area {
@@ -2190,7 +2199,7 @@ aside#left-sidebar {
         margin: 17px auto 0px;
         float: none;
         width: 242px;
-        padding: 11px 61px;
+        padding: 11px 56px;
     }
 
     .content-area {
@@ -2286,7 +2295,7 @@ aside#left-sidebar {
         margin: 11px auto 0px;
         float: none;
         width: 242px;
-        padding: 11px 61px;
+        padding: 11px 56px;
     }
 
     .content-area {

public/styles/themes/bootstrap5.3-dark.css

@@ -1,5 +1,5 @@
 .bootstrap5_3-dark .sb-theme-select {
-    color: #212529;
+    color: transparent;
 }
 
 .bootstrap5_3-dark .e-samplestatus.new.tree,
@@ -19,8 +19,8 @@
 }
 
 .bootstrap5_3-dark .sb-left-pane .e-treeview .e-list-item.e-active>.e-fullrow {
-    background-color: #363636;
-    border-color: #363636;
+    background-color: #316cf4;
+    border-color: #212529;
 }
 
 .bootstrap5_3-dark .sb-left-pane .e-treeview .e-list-item.e-active>.e-text-content .e-list-text {
@@ -45,13 +45,15 @@
 
 body.bootstrap5_3-dark,
 .bootstrap5_3-dark #sb-header-text,
-.bootstrap5_3-dark .control-name,
 .bootstrap5_3-dark .sample-navigation,
-.bootstrap5_3-dark .sb-icon-Popout,
 .bootstrap5_3-dark .sb-switch-popup a {
     color: #fff;
 }
 
+.bootstrap5_3-dark .sb-icon-Popout {
+    color: #a0a1a3;
+}
+
 .bootstrap5_3-dark .sb-header,
 .bootstrap5_3-dark .sb-search-result .e-list-item,
 .bootstrap5_3-dark .sb-search-result .e-list-group-item {
@@ -86,34 +88,59 @@ body.bootstrap5_3-dark,
 .bootstrap5_3-dark .hljs-addition,
 .bootstrap5_3-dark .e-icons.back-icon,
 .bootstrap5_3-dark .sb-plnr-section,
-.bootstrap5_3-dark .sb-bread-crumb,
-.bootstrap5_3-dark .sb-component-name,
-.bootstrap5_3-dark .sb-icon-Home,
 .bootstrap5_3-dark .description-header,
 .bootstrap5_3-dark .sample-navigation>button:hover,
 .bootstrap5_3-dark .sb-switch-popup li:first-child,
-.bootstrap5_3-dark .sb-left-pane .e-listview .e-list-group-item,
 .bootstrap5_3-dark .sb-icon-Hamburger:active,
 .bootstrap5_3-dark .sb-content-tab>.e-tab.e-nested>.e-tab-header>.e-items.e-toolbar-items>.e-toolbar-item>.e-tab-wrap>.e-text-wrap>.e-tab-text,
-.bootstrap5_3-dark .sb-theme-popup li.active .sb-theme-select {
+.bootstrap5_3-dark .sb-theme-popup li.active .sb-theme-select,
+.bootstrap5_3-dark .sb-theme-popup li:hover.active .sb-theme-select {
     color: #0d6efd;
 }
 
+.bootstrap5_3-dark .sb-component-name,
+.bootstrap5_3-dark .sb-action-description {
+    color: #E2E3E3;
+}
+
+.bootstrap5_3-dark .sb-bread-crumb,
+.bootstrap5_3-dark .sb-left-pane .e-listview .e-list-item.e-level-1, 
+.bootstrap5_3-dark .sb-bread-crumb .sb-bread-crumb-text>div, 
+.bootstrap5_3-dark .description-section {
+    color: #dfe2e6;
+}
+
+.bootstrap5_3-dark .sb-icon-Home {
+    color: #a0a1a3;
+}
+
+.bootstrap5_3-dark .sb-left-pane .e-listview .e-list-group-item {
+    color: #fff;
+}
+
+.bootstrap5_3-dark .sb-switch-popup .bootstrap5_3-dark .sb-content-tab-header {
+    background: #212529;
+    border-color: #c1c1c1;
+}
+
 .bootstrap5_3-dark .sb-content-section,
-.bootstrap5_3-dark .sb-switch-popup .bootstrap5_3-dark .sb-content-tab-header,
 .bootstrap5_3-dark .sb-content-section .sb-content-tab-header {
     background: #212529;
-    border-color: #c1c1c1;
+    border-color: #495057;
+    border-radius: 8px;
 }
 
 .bootstrap5_3-dark .sample-navigation>button:hover,
 .bootstrap5_3-dark .sb-plnr-section,
 .bootstrap5_3-dark .sb-icon-Popout:hover,
-.bootstrap5_3-dark .sb-icon-Hamburger,
 .bootstrap5_3-dark .sb-setting-translate,
 .bootstrap5_3-dark .sb-footer-links a,
 .bootstrap5_3-dark .description-section a {
-    color: #0d6efd;
+    color: #6ea8fe;
+}
+
+.bootstrap5_3-dark .sb-icon-Hamburger {
+    color: #508cf5;
 }
 
 .bootstrap5_3-dark code,
@@ -123,7 +150,6 @@ body.bootstrap5_3-dark,
 .bootstrap5_3-dark .sb-src-code,
 .bootstrap5_3-dark .CodeMirror,
 .bootstrap5_3-dark .sb-api-section,
-.bootstrap5_3-dark .sb-theme-popup,
 .bootstrap5_3-dark .copy-tooltip,
 .bootstrap5_3-dark .e-icons.copycode,
 .bootstrap5_3-dark #search-input-wrapper input,
@@ -132,6 +158,11 @@ body.bootstrap5_3-dark,
     background: #212529;
 }
 
+.bootstrap5_3-dark .sb-theme-popup {
+    background-color: #343a40;
+    border: 1px solid #495057;
+}
+
 .bootstrap5_3-dark .sb-search-btn:hover,
 .bootstrap5_3-dark .sb-search-btn.active,
 .bootstrap5_3-dark .sb-setting-btn:hover,
@@ -163,17 +194,20 @@ body.bootstrap5_3-dark,
 }
 
 .bootstrap5_3-dark .sb-left-pane .e-listview .e-list-item.e-active,
-.bootstrap5_3-dark .cont,
-.bootstrap5_3-dark .sb-left-pane .e-treeview .e-list-item.e-hover>.e-fullrow {
+.bootstrap5_3-dark .cont {
     background-color: #0d6efd;
 }
 
+.bootstrap5_3-dark .sb-left-pane .e-treeview .e-list-item.e-hover>.e-fullrow {
+    background-color: #32373c;
+}
+
 .bootstrap5_3-dark .sb-left-pane .e-listview .e-list-item:hover {
     color: aliceblue;
 }
 
 .bootstrap5_3-dark .control-name {
-    color: #ffffff;
+    color: #6ea8fe;
 }
 
 .bootstrap5_3-dark .sb-left-pane,
@@ -199,7 +233,7 @@ body.bootstrap5_3-dark,
 .bootstrap5_3-dark .sb-content-tab>.e-tab.e-nested>.e-tab-header>.e-items.e-toolbar-items>.e-toolbar-item.e-active>.e-tab-wrap>.e-text-wrap>.e-tab-text,
 .bootstrap5_3-dark .sb-content-tab>.e-tab.e-nested>.e-tab-header>.e-items.e-toolbar-items>.e-toolbar-item>.e-tab-wrap>.e-text-wrap>.e-tab-text:hover,
 .bootstrap5_3-dark .sb-search-result .e-list-group-item {
-    color: #0d6efd !important;
+    color: #6ea8fe !important;
 }
 
 .bootstrap5_3-dark .sb-search-input .e-ddl .e-clear-icon {
@@ -234,6 +268,24 @@ body.bootstrap5_3-dark,
     color: transparent;
 }
 
-.bootstrap5_3-dark .sb-theme-popup li:hover.active .sb-theme-select {
-    color: white;
+@media (max-width: 550px) {
+    .bootstrap5_3-dark.e-bigger .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
+        height: 48px;
+        padding-top: 2px;
+    }
+    .bootstrap5_3-dark .sb-mobile-setting {
+        padding-top: 2px;
+    }
+    .bootstrap5_3-dark.e-bigger .sb-content-toolbar {
+        top: 0px;
+    }
+}
+
+.bootstrap5_3-dark .sb-plnr-section {
+    height: 30px;
+    line-height: 25px;
 }
+
+.bootstrap5_3-dark .sb-desktop-setting > :nth-child(4) {
+    padding-right: 15px;
+}

public/styles/themes/bootstrap5.3.css

@@ -21,3 +21,12 @@
 .bootstrap5_3 .e-tab .e-tab-header:not(.e-vertical)::before {
     border-width: 0;
 }
+
+.bootstrap5_3 .sb-plnr-section {
+    height: 30px;
+    line-height: 25px;
+}
+
+.bootstrap5_3 .sb-desktop-setting > :nth-child(4) {
+    padding-right: 15px;
+}