feat(rtl-option): replace dir attribute with styles

src/core/base/root.ts

@@ -31,7 +31,7 @@ export class UIPRoot extends ESLBaseElement {
    * Attribute for controlling preview's content direction.
    * Has two values: `LTR` and `RTL`.
    */
-  @attr({defaultValue: 'LTR'}) public direction: string;
+  @attr({defaultValue: 'ltr'}) public direction: string;
 
   /**
    * Attribute for setup media query rules

src/core/preview/preview.ts

@@ -8,38 +8,15 @@ import {UIPPlugin} from '../base/plugin';
 export class UIPPreview extends UIPPlugin {
   static is = 'uip-preview';
 
-  protected connectedCallback() {
-    super.connectedCallback();
-    if (this.root) this.$inner.dir = this.root.direction;
-
-    this.bindEvents();
-  }
-
   @bind
   protected _onRootStateChange(): void {
     if (this.$inner.parentElement === this) this.removeChild(this.$inner);
     this.$inner.innerHTML = this.model!.html;
     this.appendChild(this.$inner);
   }
 
-  protected bindEvents() {
-    this.root?.addEventListener('uip:configchange', this._onRootConfigChange);
-  }
-
-  protected unbindEvents() {
-    this.root?.removeEventListener('uip:configchange', this._onRootConfigChange);
-  }
-
-  /** Callback to catch direction changes from {@link UIPRoot}. */
-  @bind
-  protected _onRootConfigChange(e: CustomEvent) {
-    if (e.detail.attribute !== 'direction') return false;
-    this.$inner.dir = e.detail.value;
-  }
-
   protected disconnectedCallback() {
     if (this.$inner.parentElement === this) this.removeChild(this.$inner);
-    this.unbindEvents();
     super.disconnectedCallback();
   }
 }

src/plugins/options/README.md

@@ -9,12 +9,12 @@ Extends [UIPPlugin](src/core/base/README.md#uip-plugin).
 
 - **Theme** can be *light* (default) and *dark*. It sets color theme for other elements.
 - **Mode** can be *vertical* (default) and *horizontal*. It controls UIP container's layout.
-- **Direction** can be *LTR* (default) and *RTL*. It changes the direction of preview's content.
+- **Direction** can be *ltr* (default) and *rtl*. It changes the direction of preview's content.
 
 These options can be manually set (and observed) with corresponding attributes:
 
 ```html
-<uip-root mode="horizontal" theme="dark" direction="RTL"></uip-root>
+<uip-root mode="horizontal" theme="dark" direction="rtl"></uip-root>
 ```
 
 **UIPOptions** element doesn't produce or observe UIPStateModel changes.

src/plugins/options/option/direction.less

@@ -0,0 +1,13 @@
+.uip-root {
+  &.rtl-direction {
+    & > .uip-preview {
+      direction: rtl;
+    }
+  }
+
+  &.ltr-direction {
+    & > .uip-preview {
+      direction: ltr;
+    }
+  }
+}

src/plugins/options/options.less

@@ -1,5 +1,6 @@
 @import "./option/mode";
 @import "./option/theme";
+@import "./option/direction";
 
 .uip-options {
   display: flex;

src/plugins/options/options.ts

@@ -81,13 +81,13 @@ export class UIPOptions extends UIPPlugin {
     const dirOptionId = randUID();
     $dir.innerHTML = `
         <div class="option-item">
-            <input type="radio" id=${dirOptionId}-uip-ltr name=${dirOptionId}-dir direction="LTR"
-            class="option-radio-btn" ${this.root?.direction === 'LTR' ? 'checked' : ''}>
+            <input type="radio" id=${dirOptionId}-uip-ltr name=${dirOptionId}-dir direction="ltr"
+            class="option-radio-btn" ${this.root?.direction === 'ltr' ? 'checked' : ''}>
             <label class="option-label" for=${dirOptionId}-uip-ltr>LTR</label>
         </div>
         <div class="option-item">
-            <input type="radio" id=${dirOptionId}-uip-rtl name=${dirOptionId}-dir direction="RTL"
-            class="option-radio-btn" ${this.root?.direction === 'RTL' ? 'checked' : ''}>
+            <input type="radio" id=${dirOptionId}-uip-rtl name=${dirOptionId}-dir direction="rtl"
+            class="option-radio-btn" ${this.root?.direction === 'rtl' ? 'checked' : ''}>
             <label class="option-label" for=${dirOptionId}-uip-rtl>RTL</label>
         </div>`;
     this.appendChild($dir);