feat: complete UX API rework of panel-plugins

pages/views/examples/example/form.njk

@@ -27,7 +27,7 @@ title: Example with form
 
   <uip-preview class="centered-content" resizable></uip-preview>
 
-  <uip-settings collapsible horizontal="@xs" target=".demo-form">
+  <uip-settings collapsible vertical="@+sm" target=".demo-form">
     <uip-bool-setting label="Email validation" target="#email" mode="append" attribute="class" value="validation-input"></uip-bool-setting>
   </uip-settings>
 

pages/views/index.njk

@@ -25,7 +25,8 @@ isLandingPage: true
       </div>
     </script>
     <uip-preview></uip-preview>
-    <uip-settings collapsible target=".logo-content">
+
+    <uip-settings collapsible vertical="@+sm" target=".logo-content">
       <uip-text-setting label="Alternative Button Text:" target=".get-started" attribute="data-test-msg"></uip-text-setting>
       <uip-slider-setting label="Width:" target=".logo-content svg" attribute="width" min="100" max="500"></uip-slider-setting>
       <uip-select-setting label="Color:" attribute="class" mode="append">
@@ -34,6 +35,7 @@ isLandingPage: true
         <option value="purple-clr">Purple</option>
       </uip-select-setting>
     </uip-settings>
+
     <uip-editor collapsible></uip-editor>
   </uip-root>
 </section>

src/core/base/base.less

@@ -0,0 +1,21 @@
+// Default theme definition
+html {
+  --uip-prview-max-height: 500px;
+
+  --uip-plugin-fg: #000;
+  --uip-plugin-bg: #f5f2f0;
+  --uip-plugin-divider: #ccc;
+  --uip-plugin-divider-v: #ebebeb;
+  --uip-plugin-header-bg: #ccc;
+  --uip-plugin-header-fg: #000;
+}
+
+// Default dark theme definition
+[dark-theme] {
+  --uip-plugin-fg: #ccc;
+  --uip-plugin-bg: #2f2f2f;
+  --uip-plugin-divider: #ebebeb;
+  --uip-plugin-divider-v: #ebebeb;
+  --uip-plugin-header-bg: #2f2f2f;
+  --uip-plugin-header-fg: #ccc;
+}

src/core/base/plugin.less

@@ -4,4 +4,9 @@
   &-inner {
     padding: 10px;
   }
+
+  &-inner-bg {
+    color: var(--uip-plugin-fg);
+    background: var(--uip-plugin-bg);
+  }
 }

src/core/base/plugin.tsx → src/core/base/plugin.ts

@@ -1,5 +1,3 @@
-import React from 'jsx-dom';
-
 import {ESLBaseElement} from '@exadel/esl/modules/esl-base-element/core';
 import {attr, memoize} from '@exadel/esl/modules/esl-utils/decorators';
 
@@ -28,13 +26,6 @@ export abstract class UIPPlugin extends ESLBaseElement {
     return this.root ? this.root.model : null;
   }
 
-  /** {@link UIPPlugin} section wrapper */
-  @memoize()
-  protected get $inner(): HTMLElement {
-    const pluginType = this.constructor as typeof UIPPlugin;
-    return <div className={`${pluginType.is}-inner uip-plugin-inner`}></div> as HTMLElement;
-  }
-
   protected connectedCallback(): void {
     super.connectedCallback();
     this.classList.add('uip-plugin');

src/core/panel/plugin-panel.header.less

@@ -0,0 +1,54 @@
+.uip-plugin-header {
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  flex: 0 0 auto;
+
+  color: var(--uip-plugin-header-fg, #000);
+  background: var(--uip-plugin-header-bg, transparent);
+
+  font-weight: 500;
+
+  .uip-plugin[label] &,
+  .uip-plugin[collapsible] & {
+    padding: 2px 10px;
+  }
+
+  &-icon {
+    display: inline-flex;
+    width: 1.25rem;
+    height: 1.25rem;
+    margin-inline-end: 5px;
+    transform-origin: center center;
+
+    > svg {
+      fill: currentColor;
+      stroke: currentColor;
+    }
+  }
+
+  &-title {
+    margin-inline-end: auto;
+  }
+
+  &-title:not(:empty) {
+    flex: 1 1 auto;
+    padding: 5px;
+    line-height: 1em;
+  }
+
+  &-trigger {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+
+    background: transparent;
+    border: none;
+    box-shadow: none;
+    appearance: none;
+  }
+}

src/plugins/settings/settings.horizontal.less → src/core/panel/plugin-panel.horizontal.less

@@ -1,24 +1,27 @@
-.uip-settings.horizontal {
-
-  grid-area: settings;
+.uip-plugin-panel:not(.vertical) {
   flex-direction: column;
+  margin-bottom: 1px;
 
-  .uip-settings-header {
-    padding: 2px 10px;
-  }
-
-  .uip-settings-inner {
-    height: var(--uip-settings-height);
-    max-height: 200px;
+  .uip-plugin-inner {
+    position: relative;
+    height: auto;
+    overflow: hidden;
+    width: 100%;
+    max-width: 100%;
+    max-height: 325px;
 
     transition:
       visibility 0s linear,
       padding-top 0.5s linear,
       padding-bottom 0.5s linear,
       max-height 0.5s linear;
+
+    border-left: none;
+    border-right: none;
+    border-block: 1px solid var(--uip-plugin-divider, transparent);
   }
 
-  &[collapsed] .uip-settings-inner {
+  &[collapsed] .uip-plugin-inner {
     max-height: 0;
     padding-top: 0;
     padding-bottom: 0;
@@ -30,27 +33,13 @@
       max-height 0.5s linear;
   }
 
-  .uip-settings-header {
-    width: 100%;
-    border-top: 1px solid var(--uip-settings-divider, transparent);
-    border-bottom: 1px solid var(--uip-settings-divider, transparent);
-
-    &-icon {
-      margin-inline-end: 5px;
-    }
-  }
-
-  .uip-settings-inner {
+  .uip-plugin-header {
+    padding: 5px 10px;
     width: 100%;
-    max-width: 100%;
-    max-height: 300px;
-    border-left: none;
-    border-right: none;
-    border-top: 1px solid @section-border;
-    border-bottom: 1px solid @section-border;
+    border-block: 1px solid var(--uip-plugin-divider, transparent);
   }
 
-  &[collapsible] .uip-settings-header::after {
+  &[collapsible] .uip-plugin-header::after {
     content: '';
     justify-self: flex-end;
     position: relative;
@@ -71,7 +60,7 @@
       top 0.5s ease-in-out;
   }
 
-  &[collapsible][collapsed] .uip-settings-header::after {
+  &[collapsible][collapsed] .uip-plugin-header::after {
     top: 2px;
     transform: rotate(45deg);
   }

src/core/panel/plugin-panel.less

@@ -0,0 +1,13 @@
+.uip-plugin-panel {
+  display: flex;
+  position: relative;
+  max-height: var(--uip-prview-max-height);
+
+  .no-animate & .uip-plugin-inner {
+    transition: none;
+  }
+}
+
+@import "./plugin-panel.header.less";
+@import "./plugin-panel.horizontal.less";
+@import "./plugin-panel.vertical.less";

src/core/panel/plugin-panel.tsx

@@ -0,0 +1,64 @@
+import {CSSClassUtils} from '@exadel/esl/modules/esl-utils/dom';
+import {skipOneRender} from '@exadel/esl/modules/esl-utils/async';
+import {ESLMediaQuery} from '@exadel/esl/modules/esl-media-query/core';
+import {attr, boolAttr, listen} from '@exadel/esl/modules/esl-utils/decorators';
+
+import {UIPPlugin} from '../base/plugin';
+
+export class UIPPluginPanel extends UIPPlugin {
+
+  public static observedAttributes: string[] = ['vertical', 'collapsed', 'compact', ...UIPPlugin.observedAttributes];
+
+  /** Marker to make header compact */
+  @boolAttr() public compact: boolean;
+
+  /** Marker to collapse editor area */
+  @boolAttr() public collapsed: boolean;
+
+  /** Marker to make enable toggle collapse action for section header */
+  @boolAttr() public collapsible: boolean;
+
+  /** Marker to make plugin panel vertical */
+  @attr({defaultValue: 'not all'}) public vertical: string;
+
+  protected override connectedCallback(): void {
+    super.connectedCallback();
+    this.classList.add('uip-plugin-panel');
+    this._onLayoutModeChange();
+  }
+
+  protected attributeChangedCallback(attrName: string, oldVal: string, newVal: string): void {
+    super.attributeChangedCallback(attrName, oldVal, newVal);
+    const type = this.constructor as typeof UIPPluginPanel;
+    if (attrName === 'vertical') {
+      this.$$off(this._onLayoutModeChange);
+      this.$$on(this._onLayoutModeChange);
+      this._onLayoutModeChange();
+    }
+    if (attrName === 'compact') {
+      this.root?.classList.toggle(type.is + '-compact', this.compact);
+    }
+  }
+
+  /** Handle collapsing trigger clicks */
+  @listen({
+    event: 'click',
+    selector: '.uip-plugin-header-trigger',
+  })
+  protected _onCollapseClick(): void {
+    if (this.collapsible) this.collapsed = !this.collapsed;
+  }
+
+  @listen({
+    event: 'change',
+    target: (settings: UIPPluginPanel) => ESLMediaQuery.for(settings.vertical)
+  })
+  protected _onLayoutModeChange(): void {
+    const type = this.constructor as typeof UIPPluginPanel;
+    const isVertical = ESLMediaQuery.for(this.vertical).matches;
+    this.$$cls('vertical', isVertical);
+    this.root && CSSClassUtils.toggle(this.root, type.is + '-vertical', isVertical);
+    this.root && CSSClassUtils.add(this.root, 'no-animate', this);
+    skipOneRender(() => this.root && CSSClassUtils.remove(this.root, 'no-animate', this));
+  }
+}

src/core/panel/plugin-panel.vertical.less

@@ -0,0 +1,47 @@
+.uip-plugin-panel.vertical.vertical {
+  --uip-plugin-header-bg: transparent;
+
+  grid-area: sidebar;
+  flex-direction: row;
+
+  .uip-plugin-inner {
+    width: 250px;
+    max-width: 250px;
+    max-height: 100%;
+
+    transition:
+      visibility 0s linear,
+      padding-left 0.3s linear,
+      padding-right 0.3s linear,
+      max-width 0.3s linear;
+  }
+
+  &[collapsed] .uip-plugin-inner {
+    max-width: 0;
+    padding-left: 0;
+    padding-right: 0;
+
+    transition:
+      visibility 0.3s linear,
+      padding-left 0.3s linear,
+      padding-right 0.3s linear,
+      max-width 0.3s linear;
+  }
+
+  .uip-plugin-header {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 10px 4px;
+    border-inline-end: 1px solid var(--uip-plugin-divider-v, transparent);
+  }
+
+  .uip-plugin-header-title {
+    display: none;
+  }
+
+  .uip-plugin-header-icon {
+    width: 1.25rem;
+    margin-inline-end: 0;
+  }
+}

src/core/preview/preview.tsx

@@ -19,6 +19,13 @@ export class UIPPreview extends UIPPlugin {
     return (<span class={type.is + '-stub'}/>) as HTMLElement;
   }
 
+  /** {@link UIPPlugin} section wrapper */
+  @memoize()
+  protected get $inner(): HTMLElement {
+    const pluginType = this.constructor as typeof UIPPlugin;
+    return <div className={`${pluginType.is}-inner uip-plugin-inner`}></div> as HTMLElement;
+  }
+
   /** Changes preview markup from state changes */
   @bind
   protected _onRootStateChange(): void {

src/core/registration.less

@@ -1,3 +1,7 @@
+@import "./base/base.less";
 @import './base/root.less';
 @import './base/plugin.less';
+
+@import './panel/plugin-panel.less';
+
 @import './preview/preview.less';