some changes & new components

xaota · Jan 11, 2022 · c8bc67f · c8bc67f
1 parent aeba31a
commit c8bc67f
Show file tree

Hide file tree

Showing 56 changed files with 515 additions and 4,301 deletions.
diff --git a/components/arrow.js b/components/arrow.js
@@ -72,7 +72,7 @@ const style = css`
 
   /** Создание элемента в DOM (DOM доступен) / mount @lifecycle
     * @param {ShadowRoot} node корневой узел элемента
-    * @return {UIArrow} @this текущий компонент
+    * @return {UIArrow} #this текущий компонент
     */
     mount(node) {
       super.mount(node, attributes, properties);

diff --git a/components/blur.js b/components/blur.js
@@ -37,7 +37,7 @@ const style = css`
 
   /** Создание элемента в DOM (DOM доступен) / mount @lifecycle
     * @param {ShadowRoot} node корневой узел элемента
-    * @return {UIBlur} @this текущий компонент
+    * @return {UIBlur} #this текущий компонент
     */
     mount(node) {
       super.mount(node, attributes, properties);

diff --git a/components/calendar.js b/components/calendar.js
@@ -31,7 +31,7 @@ const style = css`
 
   /** Создание элемента в DOM (DOM доступен) / mount @lifecycle
     * @param {ShadowRoot} node корневой узел элемента
-    * @return {UICalendar} @this текущий компонент
+    * @return {UICalendar} #this текущий компонент
     */
     mount(node) {
       super.mount(node, attributes, properties);

diff --git a/components/caption.js b/components/caption.js
@@ -26,6 +26,13 @@ const style = css`
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
+  }
+  slot {
+    color: var(--foreground);
+  }
+  ::slotted(a) {
+    color: var(--foreground);
+    text-decoration: none;
   }`;
 
 const attributes = {}

diff --git a/components/chronics-item.js b/components/chronics-item.js
@@ -31,7 +31,7 @@ const style = css`
 
   /** Создание элемента в DOM (DOM доступен) / mount @lifecycle
     * @param {ShadowRoot} node корневой узел элемента
-    * @return {UIChronicsItem} @this текущий компонент
+    * @return {UIChronicsItem} #this текущий компонент
     */
     mount(node) {
       super.mount(node, attributes, properties);

diff --git a/components/chronics.js b/components/chronics.js
@@ -31,7 +31,7 @@ const style = css`
 
   /** Создание элемента в DOM (DOM доступен) / mount @lifecycle
     * @param {ShadowRoot} node корневой узел элемента
-    * @return {UIChronics} @this текущий компонент
+    * @return {UIChronics} #this текущий компонент
     */
     mount(node) {
       super.mount(node, attributes, properties);

diff --git a/components/copy-icon.js b/components/copy-icon.js
@@ -39,7 +39,7 @@ const style = css`
 
   /** Создание элемента в DOM (DOM доступен) / mount @lifecycle
     * @param {ShadowRoot} node корневой узел элемента
-    * @return {UICopyIcon} @this текущий компонент
+    * @return {UICopyIcon} #this текущий компонент
     */
     mount(node) {
       super.mount(node, attributes, properties);

diff --git a/components/copy.js b/components/copy.js
@@ -34,7 +34,7 @@ const style = css`
 
   /** Создание элемента в DOM (DOM доступен) / mount @lifecycle
     * @param {ShadowRoot} node корневой узел элемента
-    * @return {UICopy} @this текущий компонент
+    * @return {UICopy} #this текущий компонент
     */
     mount(node) {
       super.mount(node, attributes, properties);

diff --git a/components/cover.js b/components/cover.js
@@ -0,0 +1,107 @@
+import Component, { html, css } from '../script/Component.js';
+import $, { slottedValue } from '../script/DOM.js';
+
+const attributes = {};
+const properties = {};
+
+const style = css`
+  :host {
+    display: inline-block;
+    --cover-width-default: 200px;
+    --cover-padding: 6px;
+    position: relative;
+    text-align: left;
+  }
+  :host([view="empty"]) {
+    --cover-width-default: 120px;
+  }
+  :host([view="list"]) {
+    display: inline-flex;
+  }
+  :host([view="list"]), :host([view="text"]) {
+    --cover-width-default: 40px;
+  }
+  #cover {
+    width: var(--cover-width, var(--cover-width-default));
+    height: var(--cover-width, var(--cover-width-default));
+    background-size: cover;
+    background-position: center center;
+    background-repeat: no-repeat;
+    border-radius: var(--cover-padding);
+  }
+  :host([view="text"]) #cover {
+    display: none;
+  }
+  slot {
+    font-size: calc(var(--cover-padding) * 2);
+    display: block;
+  }
+  slot:not([name]) {
+    display: none;
+  }
+  slot[name="caption"] {
+    /* color: rgba(255, 255, 255, 0.92); */
+    color: var(--foreground);
+  }
+  slot[name="description"], slot[name="author"] {
+    /* color: rgba(255, 255, 255, 0.64); */
+    color: var(--foreground-light);
+  }
+  #info {
+    padding: var(--cover-padding);
+  }
+  :host([view="compact"]) #info {
+    padding: 0;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: linear-gradient(transparent, rgba(0, 0, 0, 0.5) 20%, black 90%);
+  }
+  :host([view="empty"]) #info {
+    display: none;
+  }`;
+
+/** Cover {UICover} @class @ui @component <ui-cover />
+  * Covers for media elements
+  */
+  export default class UICover extends Component {
+    static template = html`
+      <template>
+        <style>${style}</style>
+        <div id="cover"></div>
+        <div id="info">
+          <slot name="caption"></slot>
+          <slot name="description"></slot>
+          <slot name="author"></slot>
+          <slot name="keywords"></slot>
+          <slot name="actions"></slot>
+          <slot name="timestamp"></slot>
+        </div>
+        <slot></slot>
+      </template>`;
+
+  // /** Создание компонента {UICover} @constructor
+  //   */
+  //   constructor(store) {
+  //     super();
+  //   }
+
+  /** Создание элемента в DOM (DOM доступен) / mount @lifecycle
+    * @param {ShadowRoot} node корневой узел элемента
+    * @return {UICover} this текущий компонент
+    */
+    mount(node) {
+      super.mount(node, attributes, properties);
+      const slotDefault = $('slot:not([name])', node);
+      const cover = $('#cover', node);
+      slotDefault.addEventListener('slotchange', () => {
+        const url = slottedValue(slotDefault);
+        console.log(url);
+        cover.style.backgroundImage = `url(${url})`;
+      });
+      return this;
+    }
+  }
+
+Component.init(UICover, 'ui-cover', { attributes, properties });
diff --git a/components/dialog.js b/components/dialog.js
@@ -1,6 +1,5 @@
 import Component, { html, css } from '../script/Component.js';
 import { updateChildrenText } from '../script/DOM.js';
-import Deferred from 'javascript-toolbox/library/Deferred.js';
 import UIButton  from './button.js';
 // eslint-disable-next-line no-unused-vars
 import UICaption from './caption.js';
@@ -111,7 +110,13 @@ const properties = {}
       this.cache.root = root;
       this.cache.z = z;
 
-      this.promise = new Deferred();
+      // this.promise = new Deferred();
+      // @TODO:
+      const promise = new Promise((resolve, reject) => {
+        promise.resolve = resolve;
+        promise.reject  = reject;
+      });
+      this.promise = promise;
 
       this.splash = document.createElement('div'); // #ui-popup-splash
       const style = {

diff --git a/components/download.js b/components/download.js
@@ -63,7 +63,7 @@ const style = css`
 
   /** Создание элемента в DOM (DOM доступен) / mount @lifecycle
     * @param {ShadowRoot} node корневой узел элемента
-    * @return {UIDownload} @this текущий компонент
+    * @return {UIDownload} #this текущий компонент
     */
     mount(node) {
       super.mount(node, attributes, properties);

diff --git a/components/fab-tooltip.js b/components/fab-tooltip.js
@@ -39,7 +39,7 @@ const style = css`
 
   /** Создание элемента в DOM (DOM доступен) / mount @lifecycle
     * @param {ShadowRoot} node корневой узел элемента
-    * @return {UIFABTooltip} @this текущий компонент
+    * @return {UIFABTooltip} #this текущий компонент
     */
     mount(node) {
       super.mount(node, attributes, properties);

diff --git a/components/footer.js b/components/footer.js
@@ -32,7 +32,7 @@ const style = css`
 
   /** Создание элемента в DOM (DOM доступен) / mount @lifecycle
     * @param {ShadowRoot} node корневой узел элемента
-    * @return {UIFooter} @this текущий компонент
+    * @return {UIFooter} #this текущий компонент
     */
     mount(node) {
       super.mount(node, attributes, properties);

diff --git a/components/grid.js b/components/grid.js
@@ -1,43 +1,59 @@
 import Component, { html, css } from '../script/Component.js';
+import { cssVariable } from '../script/DOM.js';
 
-const attributes = {};
+const attributes = {
+  /** / columns */
+    columns(root, value) {
+      const temp = value.replace(/\s+/g, '');
+      const valid = /^(\d+-)+\d$/.test(temp);
+      const data = valid
+        ? temp.split('-').map(e => e + 'fr').join(' ')
+        : 'initial';
+      cssVariable('slot', 'grid-columns', data, root);
+    }
+  };
 const properties = {};
 
 const style = css`
   :host {
+    --grid-width: auto;
+    --grid-height: auto;
+    --grid-padding: 40px;
+    --grid-gap: 0;
+    --grid-columns: 1fr;
+  }
+  :host, main, slot {
     display: block;
   }
+  main {
+    margin: 0 auto;
+  }
   slot {
-    display: block;
+    display: grid;
+    margin: 0 auto;
+    width: var(--grid-width);
+    height: var(--grid-height);
+    padding: var(--grid-padding);
+    gap: var(--grid-gap);
+    grid-template-columns: var(--grid-columns);
   }`;
 
 /** Grid {UIGrid} @class @ui @component <ui-grid />
-  * Раскладка
+  * Разделение блоков по сетке
   */
   export default class UIGrid extends Component {
     static template = html`
       <template>
         <style>${style}</style>
-        <slot></slot>
+        <main><slot></slot></main>
       </template>`;
 
-  /** Создание компонента {UIGrid} @constructor
-    * @param {type} store type
-    */
-    constructor(store) {
-      super();
-      this.store({ store });
-    }
-
   /** Создание элемента в DOM (DOM доступен) / mount @lifecycle
     * @param {ShadowRoot} node корневой узел элемента
-    * @return {UIGrid} @this текущий компонент
+    * @return {UIGrid} #this текущий компонент
     */
     mount(node) {
-      super.mount(node, attributes, properties);
-
-      const { store } = this.store();
-      return this;
+      return super.mount(node, attributes, properties);
     }
   }
 

diff --git a/components/header.js b/components/header.js
@@ -5,10 +5,20 @@ const properties = {};
 
 const style = css`
   :host {
-    display: block;
+    display: flex;
+    height: 72px;
+    box-shadow: 0 2px 4px rgb(0 0 0 / 50%);
+    padding: 0 24px;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: nowrap;
+    background: var(--background);
   }
-  slot {
+  slot:not(:empty) {
     display: block;
+  }
+  slot[name="navigation"]::slotted(ui-navigation) {
+    height: 100%;
   }`;
 
 /** Header {UIHeader} @class @ui @component <ui-header />
@@ -18,25 +28,28 @@ const style = css`
     static template = html`
       <template>
         <style>${style}</style>
+        <slot name="logo"></slot>
         <slot></slot>
+        <slot name="navigation"></slot>
+        <slot name="profile"></slot>
       </template>`;
 
-  /** Создание компонента {UIHeader} @constructor
-    * @param {type} store type
-    */
-    constructor(store) {
-      super();
-      this.store({ store });
-    }
+  // /** Создание компонента {UIHeader} @constructor
+  //   * @param {type} store type
+  //   */
+  //   constructor(store) {
+  //     super();
+  //     this.store({ store });
+  //   }
 
   /** Создание элемента в DOM (DOM доступен) / mount @lifecycle
     * @param {ShadowRoot} node корневой узел элемента
-    * @return {UIHeader} @this текущий компонент
+    * @return {UIHeader} #this текущий компонент
     */
     mount(node) {
       super.mount(node, attributes, properties);
 
-      const { store } = this.store();
+      // const { store } = this.store();
       return this;
     }
   }

diff --git a/components/icon.js b/components/icon.js
@@ -48,7 +48,7 @@ const properties = {}
 
   /** Создание элемента в DOM (DOM доступен) / mount @lifecycle
     * @param {ShadowRoot} node корневой узел элемента
-    * @return {UIIcon} @this
+    * @return {UIIcon} this
     */
     mount(node) {
       super.mount(node, attributes, properties);
@@ -82,7 +82,7 @@ Component.init(UIIcon, 'ui-icon', { attributes, properties });
 
     const fragment = document.createElement('template');
     fragment.innerHTML = SVG.trim();
-    const svg = fragment.content.firstChild;
+    const svg = fragment.content.firstChild; // querySelector('svg')
     svg.id = id;
     root.appendChild(svg);
     return svg;

diff --git a/components/layer.js b/components/layer.js
@@ -31,7 +31,7 @@ const style = css`
 
   /** Создание элемента в DOM (DOM доступен) / mount @lifecycle
     * @param {ShadowRoot} node корневой узел элемента
-    * @return {UILayer} @this текущий компонент
+    * @return {UILayer} #this текущий компонент
     */
     mount(node) {
       super.mount(node, attributes, properties);