feat(uip-settings): new uip-settings tag API

exadel-inc · Oct 10, 2023 · b4e5622 · b4e5622
1 parent c92e5f2
commit b4e5622
Show file tree

Hide file tree

Showing 13 changed files with 300 additions and 102 deletions.
diff --git a/pages/views/examples/example/form.njk b/pages/views/examples/example/form.njk
@@ -24,7 +24,7 @@ title: Example with form
     </form>
   </script>
   <uip-preview class="centered-content" resizable></uip-preview>
-  <uip-settings target=".demo-form">
+  <uip-settings collapsible horizontal="@xs" target=".demo-form">
     <uip-bool-setting label="Email validation" target="#email" mode="append" attribute="class"
                       value="validation-input"></uip-bool-setting>
   </uip-settings>

diff --git a/src/core/base/plugin.less b/src/core/base/plugin.less
@@ -3,10 +3,5 @@
 .uip-plugin {
   &-inner {
     padding: 10px;
-
-    @media @mobile {
-      padding-left: 0;
-      padding-right: 0;
-    }
   }
 }
diff --git a/src/core/base/root.less b/src/core/base/root.less
@@ -7,44 +7,16 @@
   overflow: hidden;
   display: grid;
   align-content: start;
-  grid-template-columns: minmax(calc(100% - 250px), 100%) auto;
-  grid-template-rows: auto auto auto;
+  grid-template-columns: 1fr auto;
+  grid-template-rows: auto auto auto auto;
   grid-template-areas:
     'header header'
-    'preview settings'
+    'preview sidebar'
+    'settings settings'
     'editor editor';
   height: 100%;
   min-height: 100%;
   min-width: 100%;
-
-  @media @mobile {
-    grid-template-rows: auto auto auto auto;
-    grid-template-areas:
-      'header'
-      'settings'
-      'preview'
-      'editor';
-  }
-
-  &[settings-collapsed] > .uip-settings {
-    max-width: 0;
-    max-height: 0;
-    transition:
-      max-width 0.3s ease-in-out,
-      max-height 0s 0.3s;
-
-    &-inner {
-      visibility: hidden;
-      transition: visibility 0s 0.3s;
-    }
-
-    @media @mobile {
-      max-width: 100%;
-      transition: max-height 0.3s ease-in-out;
-
-      .scrollbar-collapsed();
-    }
-  }
 }
 
 .uip-alert-info {

diff --git a/src/plugins/editor/editor.tsx b/src/plugins/editor/editor.tsx
@@ -104,6 +104,7 @@ export class UIPEditor extends UIPPlugin {
   }
 
   protected override attributeChangedCallback(attrName: string, oldVal: string, newVal: string): void {
+    super.attributeChangedCallback(attrName, oldVal, newVal);
     this.$header.remove();
     memoize.clear(this, '$header');
     this.insertAdjacentElement('afterbegin', this.$header);

diff --git a/src/plugins/header/options/options.ts b/src/plugins/header/options/options.ts
@@ -82,16 +82,6 @@ export class UIPOptions extends UIPPlugin {
     this.options.forEach((option) => this.append(option));
   }
 
-  /**
-   * Handles {@link UIPRoot} `uip:configchange` event to
-   * manage {@link UIPOption} active state
-   */
-  @listen({event: 'uip:configchange', target: '::parent(.uip-root)'})
-  protected _onRootConfigChange(e: CustomEvent): void {
-    const option = this.options.get(e.detail.attribute);
-    option?.toggleState(e.detail.value !== null);
-  }
-
   /**
    * Handles {@link UIPOption} `click` event
    * to manage {@link UIPRoot} options attributes

diff --git a/src/plugins/registration.ts b/src/plugins/registration.ts
@@ -16,6 +16,7 @@ export {UIPSetting, UIPSettings, UIPTextSetting, UIPBoolSetting, UIPSelectSettin
 export {UIPOptions, UIPOptionIcons, UIPEditor, UIPSnippets, UIPHeader};
 
 export const registerSettings = (): void => {
+  UIPSettings.register();
   UIPBoolSetting.register();
   UIPTextSetting.register();
   UIPSelectSetting.register();
@@ -28,5 +29,4 @@ export const registerPlugins = (): void => {
   UIPOptions.register();
   UIPSnippets.register();
   UIPEditor.register();
-  UIPSettings.register();
 };
diff --git a/src/plugins/settings/base-setting/base-setting.less b/src/plugins/settings/base-setting/base-setting.less
@@ -1,8 +1,6 @@
 .uip-setting {
+  display: none;
+}
+.uip-settings-container .uip-setting {
   display: block;
-  width: 100%;
-
-  &:not(:first-child) {
-    margin-top: 10px;
-  }
 }
diff --git a/src/plugins/settings/base-setting/base-setting.ts b/src/plugins/settings/base-setting/base-setting.ts
@@ -13,6 +13,7 @@ import type {UIPStateModel} from '../../../core/base/model';
  */
 export abstract class UIPSetting extends UIPPlugin {
   public static override is = 'uip-setting';
+  public static readonly isSetting = (el: Node): el is UIPSetting => el && (el instanceof UIPSetting);
 
   /** No matching value message */
   @prop('No select match') public NO_MATCH_MSG: string;
@@ -39,8 +40,7 @@ export abstract class UIPSetting extends UIPPlugin {
   }
 
   protected override connectedCallback(): void {
-    const $host = this.closest('[uip-settings-holder]');
-    if ($host && ($host as UIPSettings).add(this)) return;
+    this.$$fire('uip:settings:invalidate');
     super.connectedCallback();
     this.classList.add(UIPSetting.is);
     this._onRootStateChange();

diff --git a/src/plugins/settings/settings.horizontal.less b/src/plugins/settings/settings.horizontal.less
@@ -0,0 +1,74 @@
+.uip-settings.horizontal {
+
+  grid-area: settings;
+  flex-direction: column;
+
+  .uip-settings-header {
+    padding: 2px 10px;
+  }
+
+  .uip-settings-inner {
+    height: var(--uip-settings-height);
+    max-height: 200px;
+
+    transition:
+      visibility 0s linear,
+      padding-top 0.5s linear,
+      padding-bottom 0.5s linear,
+      max-height 0.5s linear;
+  }
+
+  &[collapsed] .uip-settings-inner {
+    max-height: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+
+    transition:
+      visibility 0.5s linear,
+      padding-top 0.5s linear,
+      padding-bottom 0.5s linear,
+      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);
+  }
+
+  .uip-settings-inner {
+    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;
+  }
+
+  &[collapsible] .uip-settings-header::after {
+    content: '';
+    justify-self: flex-end;
+    position: relative;
+    margin: 5px 10px;
+    top: -2px;
+    width: 7px;
+    height: 7px;
+    z-index: 1;
+    pointer-events: none;
+
+    border-left: 2px solid currentColor;
+    border-top: 2px solid currentColor;
+
+    transform: rotate(225deg);
+    transform-origin: center;
+    transition:
+      transform 0.5s ease-in-out,
+      top 0.5s ease-in-out;
+  }
+
+  &[collapsible][collapsed] .uip-settings-header::after {
+    top: 2px;
+    transform: rotate(45deg);
+  }
+}
diff --git a/src/plugins/settings/settings.icon.tsx b/src/plugins/settings/settings.icon.tsx
@@ -0,0 +1,8 @@
+/* eslint-disable-file max-len */
+import React from 'jsx-dom';
+
+export const SettingsIcon = (): SVGElement => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="#1f1f1f" stroke="#1f1f1f" stroke-width=".5" viewBox="0 0 24 24">
+    <path d="m13.302.632.645 2.424.099.358.382.1a9.53 9.53 0 0 1 4.21 2.269l.278.263.382-.102 2.551-.684 1.305 2.115-1.915 1.734-.288.26.105.358c.218.766.326 1.53.326 2.273 0 .743-.108 1.507-.326 2.273l-.105.359.288.26 1.915 1.733-1.305 2.115-2.55-.684-.383-.102-.277.263a9.53 9.53 0 0 1-4.21 2.27l-.383.099-.099.358-.645 2.424h-2.604l-.645-2.424-.099-.358-.382-.1a9.53 9.53 0 0 1-4.21-2.269l-.278-.263-.382.102-2.551.684-1.305-2.115 1.915-1.734.288-.26-.105-.358A8.326 8.326 0 0 1 2.618 12c0-.743.108-1.507.326-2.273l.105-.359-.288-.26L.846 7.376 2.15 5.26l2.55.684.383.102.277-.263a9.53 9.53 0 0 1 4.21-2.27l.383-.099.099-.358.645-2.424h2.604ZM12 17.345c3.144 0 5.702-2.398 5.702-5.345 0-2.947-2.558-5.345-5.702-5.345S6.298 9.053 6.298 12c0 2.947 2.558 5.345 5.702 5.345ZM13.828 0h-3.656l-.776 2.901c-1.73.435-3.28 1.28-4.512 2.435l-3.056-.82L0 7.484l2.295 2.079A8.901 8.901 0 0 0 1.944 12c0 .845.126 1.658.35 2.438L0 16.515l1.828 2.968 3.056-.82c1.232 1.155 2.783 2 4.512 2.435L10.172 24h3.656l.776-2.901a10.23 10.23 0 0 0 4.512-2.434l3.056.819L24 16.516l-2.295-2.078c.221-.78.351-1.593.351-2.438 0-.842-.126-1.658-.35-2.434L24 7.486l-1.828-2.97-3.056.82A10.292 10.292 0 0 0 14.604 2.9L13.828 0ZM12 16.714c-2.775 0-5.028-2.112-5.028-4.714 0-2.602 2.253-4.714 5.028-4.714 2.775 0 5.028 2.112 5.028 4.714 0 2.602-2.253 4.714-5.028 4.714Z"/>
+  </svg>
+) as SVGElement;
diff --git a/src/plugins/settings/settings.less b/src/plugins/settings/settings.less
@@ -1,47 +1,91 @@
 @import (reference) '../../common/mixins.less';
 @import (reference) '../../common/variables.less';
 
+html {
+  --uip-settings-divider: #ccc;
+  --uip-settings-divider-v: @section-border;
+  --uip-settings-header-bg: #ccc;
+  --uip-settings-header-fg: #000;
+}
+
+uip-settings {
+  display: none;
+}
 .uip-settings {
-  grid-area: settings;
-  width: 250px;
-  max-width: 250px;
-  max-height: 100%;
-  overflow: hidden;
-  transition:
-    max-width 0.3s ease-in-out,
-    max-height 0s;
+  grid-area: sidebar;
+
+  display: flex;
+  overflow: auto;
   accent-color: @dark-text;
 
   &-inner {
+    flex: 1 1 auto;
+    display: flex;
     position: relative;
-    height: 100%;
-    width: 250px;
-    border-left: 1px solid @section-border;
+    overflow: hidden;
+    padding: 0;
+  }
 
-    .esl-scrollbar {
-      padding-right: 0;
-    }
+  &-container {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    order: 0;
+
+    gap: 20px;
+    min-width: 200px;
+    padding: 20px 10px;
   }
 
-  .settings-list {
-    height: 100%;
-    padding: 0 5px;
+  &-scrollbar {
+    position: relative;
+    flex: 0 0 auto;
+    order: 1;
+
+    &[inactive] {
+      display: none;
+    }
   }
 
-  @media @mobile {
-    width: 100%;
-    max-width: 100%;
-    max-height: 300px;
-    transition: max-height 0.3s ease-in-out;
+  &-header {
+    position: relative;
+    display: flex;
+    align-items: center;
+    font-weight: 500;
+
+    flex: 0 0 auto;
+
+    color: var(--uip-settings-header-fg, #000);
+    background: var(--uip-settings-header-bg, transparent);
 
-    &-inner {
+    &-title:not(:empty) {
+      flex: 1 1 auto;
+      padding: 5px;
+    }
+
+    &-trigger {
+      position: absolute;
+      top: 0;
+      left: 0;
       width: 100%;
-      padding: 15px 10px 20px 0;
+      height: 100%;
+      z-index: 1;
 
-      border-left: none;
-      border-bottom: 1px solid @section-border;
+      background: transparent;
+      border: none;
+      box-shadow: none;
+      appearance: none;
+    }
 
-      .scrollbar-expanded();
+    &-icon {
+      display: inline-flex;
+      width: 1.25rem;
+      height: 1.25rem;
+      margin-block: -5px;
+      transform-origin: center center;
     }
   }
 }
+
+@import "./settings.vertical.less";
+@import "./settings.horizontal.less";