feat(rtl-option): cosmetic fixes

src/core/base/root.ts

@@ -28,13 +28,13 @@ export class UIPRoot extends ESLBaseElement {
   @attr({defaultValue: 'uip-light'}) public theme: string;
 
   /**
-   * Attribute for controlling UIP components' theme.
-   * Has two values: `uip-light` and `uip-dark`.
+   * Attribute for controlling preview's content direction.
+   * Has two values: `LTR` and `RTL`.
    */
   @attr({defaultValue: 'LTR'}) public direction: string;
 
   /**
-   * Attibute for setup media query rules
+   * Attribute for setup media query rules
    */
   @attr({defaultValue: '@-SM => horizontal'}) public rewriteMode: string;
 
@@ -76,7 +76,7 @@ export class UIPRoot extends ESLBaseElement {
 
   protected attributeChangedCallback(attrName: string, oldVal: string, newVal: string) {
     if (oldVal === newVal) return;
-    if (attrName === 'mode' || attrName === 'theme' || attrName === 'direction') {
+    if (['mode', 'direction', 'theme'].includes(attrName)) {
       this._updateStyles(attrName, oldVal, newVal);
       EventUtils.dispatch(this, 'uip:configchange', {
         bubbles: false,

src/core/preview/preview.ts

@@ -10,6 +10,7 @@ export class UIPPreview extends UIPPlugin {
 
   protected connectedCallback() {
     super.connectedCallback();
+    if (this.root) this.dir = this.root.direction;
 
     this.bindEvents();
   }
@@ -32,7 +33,6 @@ export class UIPPreview extends UIPPlugin {
   /** Callback to catch direction changes from {@link UIPRoot}. */
   @bind
   protected _onRootConfigChange(e: CustomEvent) {
-    console.log(e);
     if (e.detail.attribute !== 'direction') return false;
     this.$inner.dir = e.detail.value;
   }

src/plugins/options/README.md

@@ -5,15 +5,16 @@ Extends [UIPPlugin](src/core/base/README.md#uip-plugin).
 
 ## Description:
 
-**UIPOptions** component supports two settings: **theme** and **mode**.
+**UIPOptions** component supports three settings: **theme**, **mode** and **direction**.
 
-- **Theme** option has two values: *light* (default) and *dark*. It sets color theme for other elements.
-- **Mode** option also has two values: *vertical* (default) and *horizontal*. It controls UIP container's layout.
+- **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.
 
-These options can be manually set (and observed) with corresponding *theme* and *mode* attributes:
+These options can be manually set (and observed) with corresponding attributes:
 
 ```html
-<uip-options label="Options:" mode="horizontal" theme="dark"></uip-options>
+<uip-root mode="horizontal" theme="dark" direction="RTL"></uip-root>
 ```
 
 **UIPOptions** element doesn't produce or observe UIPStateModel changes.