Merge remote-tracking branch 'refs/remotes/origin/main' into main-beta

ala-n · ala-n · commit 496202788364 · 2024-05-13T16:12:43.000+02:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -74,25 +74,25 @@
     "@exadel/esl": "^4.13.0 || ^5.0.0 || ^5.0.0-beta.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.2.2",
+    "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/commit-analyzer": "^12.0.0",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/github": "^10.0.3",
-    "@semantic-release/npm": "^12.0.0",
+    "@semantic-release/npm": "^12.0.1",
     "@semantic-release/release-notes-generator": "^13.0.0",
-    "@types/prismjs": "^1.26.3",
-    "@typescript-eslint/eslint-plugin": "^7.6.0",
-    "@typescript-eslint/parser": "^7.6.0",
+    "@types/prismjs": "^1.26.4",
+    "@typescript-eslint/eslint-plugin": "^7.8.0",
+    "@typescript-eslint/parser": "^7.8.0",
     "chokidar-cli": "^3.0.0",
     "concurrently": "^8.2.2",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
     "eslint": "^8.57.0",
     "eslint-plugin-editorconfig": "^4.0.3",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-sonarjs": "^0.25.1",
+    "eslint-plugin-sonarjs": "^1.0.3",
     "eslint-plugin-tsdoc": "^0.2.17",
     "foreach-cli": "^1.8.1",
     "husky": "^9.0.11",
@@ -102,11 +102,11 @@
     "lint-staged": "^15.2.2",
     "postcss": "^8.4.36",
     "postcss-less": "^6.0.0",
-    "postcss-preset-env": "^9.5.5",
+    "postcss-preset-env": "^9.5.12",
     "prettier": "^3.2.5",
-    "rimraf": "^5.0.5",
-    "semantic-release": "^23.0.8",
-    "stylelint": "^16.3.1",
+    "rimraf": "^5.0.7",
+    "semantic-release": "^23.1.1",
+    "stylelint": "^16.5.0",
     "stylelint-prettier": "^5.0.0",
     "typescript": "5.4.5"
   },
diff --git a/site/package.json b/site/package.json
@@ -23,10 +23,10 @@
     "test": "echo \"Warn: no test declared for module\" && exit 0"
   },
   "dependencies": {
-    "@exadel/esl": "^5.0.0-beta.12",
+    "@exadel/esl": "^5.0.0-beta.16",
     "@exadel/ui-playground": "../",
     "@11ty/eleventy": "^2.0.1",
-    "@11ty/eleventy-dev-server": "^1.0.4",
+    "@11ty/eleventy-dev-server": "^2.0.0",
     "clean-css-cli": "^5.6.3",
     "markdown-it": "^14.1.0",
     "markdown-it-replace-link": "^1.2.1",
diff --git a/site/src/page/page.less b/site/src/page/page.less
@@ -95,6 +95,9 @@ hr {
     }
 
     .get-started {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
       margin-top: 10px;
       padding: 0.5rem 2em;
       border-radius: 10px;
diff --git a/src/core/base/base.less b/src/core/base/base.less
@@ -1,7 +1,5 @@
 // Default theme definition
 html {
-  --uip-prview-max-height: 500px;
-
   --uip-bg: #f5f2f0;
   --uip-fg: #000;
 
diff --git a/src/core/base/root.less b/src/core/base/root.less
@@ -8,7 +8,7 @@ uip-root {
   display: grid;
   align-content: start;
   grid-template-columns: 1fr auto;
-  grid-template-rows: auto auto auto auto;
+  grid-template-rows: auto minmax(0, auto);
   grid-template-areas:
     'header header'
     'note sidebar'
diff --git a/src/core/panel/plugin-panel.less b/src/core/panel/plugin-panel.less
@@ -1,7 +1,6 @@
 .uip-plugin-panel {
   display: flex;
   position: relative;
-  max-height: var(--uip-prview-max-height);
 
   &[resizing] .uip-plugin-inner,
   .no-animate & .uip-plugin-inner {
diff --git a/src/core/panel/plugin-panel.vertical.less b/src/core/panel/plugin-panel.vertical.less
@@ -1,7 +1,6 @@
 .uip-plugin-panel.vertical.vertical {
   grid-area: sidebar;
   flex-direction: row;
-  min-height: max(100%, 100px);
 
   .uip-plugin-resize-bar {
     order: -1;
diff --git a/src/core/preview/preview.less b/src/core/preview/preview.less
@@ -1,5 +1,5 @@
 .uip-preview {
-  display: block;
+  display: flex;
   overflow: hidden;
   grid-area: preview;
 
@@ -10,8 +10,6 @@
   background: var(--uip-bg);
 
   &-container {
-    margin: auto;
-
     position: relative;
     display: grid;
     grid-template:
@@ -21,7 +19,7 @@
     grid-template-rows: 1fr auto;
 
     overflow: hidden;
-    width: auto;
+    width: 100%;
     height: auto;
     max-width: 100%;
     max-height: 100%;
diff --git a/src/plugins/note/note.less b/src/plugins/note/note.less
@@ -1,4 +1,5 @@
 uip-note {
+  grid-area: note;
   .uip-note-title {
     font-weight: 600;
   }
diff --git a/src/plugins/registration.less b/src/plugins/registration.less
@@ -2,6 +2,7 @@
 @import './snippets-title/snippets-title.less';
 
 @import './snippets/snippets.less';
+@import './note/note.less';
 
 @import './editor/editor.less';
 @import './settings/settings.less';
diff --git a/src/plugins/settings/README.md b/src/plugins/settings/README.md
@@ -31,6 +31,7 @@ The following attributes used:
 - **label** - setting's displayed name.
 - **target** - sets target to which the setting is attached. If you want to set the same target for all settings, use *target* attribute on *UIPSettings*. 
 - **attribute** - attribute of the *target* which is changed by the setting.
+- **hideable** - hides settings tab when no active settings inside
 
 You can see the examples of custom settings here (these are distributed together with other *UIP* elements):
 - [UIPTextSetting](src/plugins/text-setting/README.md)
@@ -41,7 +42,7 @@ You can see the examples of custom settings here (these are distributed together
 ## Example
 
 ```html
-<uip-settings target=".esl-media">
+<uip-settings hideable target=".esl-media">
   <!--Bool Setting-->
   <uip-bool-setting label="Controls" attribute="controls"></uip-bool-setting>
   <!--Text Setting-->
diff --git a/src/plugins/settings/settings.less b/src/plugins/settings/settings.less
@@ -66,6 +66,10 @@ uip-settings {
   &:not([collapsed]) .uip-plugin-header-icon {
     animation: rotate-back 0.5s linear both;
   }
+
+  &[inactive]&[hideable] {
+    display: none;
+  }
 }
 
 @keyframes rotate {
diff --git a/src/plugins/settings/settings.tsx b/src/plugins/settings/settings.tsx
@@ -106,7 +106,6 @@ export class UIPSettings extends UIPPluginPanel {
 
   /** Handles internal settings items state change */
   @listen('uip:settings:state:change')
-  @decorate(debounce, 100)
   protected onSettingsStateChange(): void {
     this.$$attr('inactive', !this.$activeItems.length);
   }
diff --git a/src/plugins/snippets-list/snippets-list.tsx b/src/plugins/snippets-list/snippets-list.tsx
@@ -27,6 +27,8 @@ export class UIPSnippetsList extends UIPPlugin {
   @attr({defaultValue: 'uip-snippets-item'}) public itemBtnCls: string;
   /** CSS Class added to active snippet */
   @attr({defaultValue: 'uip-snippets-item-active'}) public activeCls: string;
+  /** CSS Class added to isolated snippet */
+  @attr({defaultValue: 'uip-snippets-item-isolated'}) public isolatedCls: string;
 
   @memoize()
   public override get $root(): UIPRoot | null {
@@ -74,6 +76,8 @@ export class UIPSnippetsList extends UIPPlugin {
 
     const classes = [this.itemCls];
     if (snippet.active) classes.push(this.activeCls);
+    if (snippet.isolated) classes.push(this.isolatedCls);
+
     return <li className={classes.join(' ')}>
       <button type="button" className={this.itemBtnCls} uip-snippet-index={index}>{snippet.label}</button>
     </li> as HTMLElement;

Original file line number	Diff line number	Diff line change
`@@ -95,6 +95,9 @@ hr {`
`95`	`95`	`}`
`96`	`96`
`97`	`97`	`.get-started {`
	`98`	`+ display: flex;`
	`99`	`+ flex-direction: column;`
	`100`	`+ align-items: center;`
`98`	`101`	`margin-top: 10px;`
`99`	`102`	`padding: 0.5rem 2em;`
`100`	`103`	`border-radius: 10px;`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`uip-note {`
	`2`	`+ grid-area: note;`
`2`	`3`	`.uip-note-title {`
`3`	`4`	`font-weight: 600;`
`4`	`5`	`}`