some changes

xaota · Jun 17, 2021 · f45deeb · f45deeb
1 parent b5df539
commit f45deeb
Show file tree

Hide file tree

Showing 17 changed files with 138 additions and 38 deletions.
diff --git a/components/button-tooltip-icon.js b/components/button-tooltip-icon.js
@@ -12,14 +12,14 @@ const style = css`
     width: 100%;
   }`;
 
-const attributes = {
+  const attributes = {
     text(root, value) { updateChildrenAttribute(root, 'ui-button-icon', 'text', value) },
     mode(root, value) { updateChildrenAttribute(root, 'ui-button-icon', 'mode', value) },
     content(root, value) { updateChildrenAttribute(root, 'ui-tooltip', 'content', value) },
     x(root, value) { updateChildrenAttribute(root, 'ui-tooltip', 'x', value) },
     y(root, value) { updateChildrenAttribute(root, 'ui-tooltip', 'y', value) }
   }
-const properties = {
+  const properties = {
     disabled(root, value) { updateChildrenAttribute(root, 'ui-button', 'disabled', value) }
   }
 

diff --git a/components/button.js b/components/button.js
@@ -93,6 +93,7 @@ const style = css`
   slot {
     display: block;
     position: relative;
+    font-family: var(--font);
   }
 
   :slotted(*) {

diff --git a/components/caption.js b/components/caption.js
@@ -21,6 +21,11 @@ const style = css`
   }
   :host([left]) {
     text-align: left;
+  }
+  :host([no-wrap]) {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
   }`;
 
 const attributes = {}

diff --git a/components/copyright.js b/components/copyright.js
@@ -1,4 +1,6 @@
 import Component, { html, css } from '../script/Component.js';
+// eslint-disable-next-line no-unused-vars
+import UIText from './text.js';
 
 const style = css`
   :host {
@@ -16,7 +18,7 @@ const properties = {}
     static template = html`
       <template>
         <style>${style}</style>
-        &copy; <slot></slot>
+        <ui-text>&copy; <slot></slot></ui-text>
       </template>`;
 
   /** Создание компонента {UIText} @constructor

diff --git a/components/fab-tooltip.js b/components/fab-tooltip.js
@@ -0,0 +1,50 @@
+import Component, { html, css } from '../script/Component.js';
+import { updateChildrenAttribute } from '../script/DOM.js';
+/* eslint-disable no-unused-vars */
+import UIFAB from './fab.js';
+import UITooltip from './tooltip.js';
+/* eslint-enable no-unused-vars */
+
+  const attributes = {
+  /** */
+    content(root, value) { updateChildrenAttribute(root, 'ui-tooltip', 'content', value) },
+  /** */
+    x(root, value) { updateChildrenAttribute(root, 'ui-tooltip', 'x', value) },
+  /** */
+    y(root, value) { updateChildrenAttribute(root, 'ui-tooltip', 'y', value) }
+  }
+
+  const properties = {
+  /** */
+    disabled(root, value) { updateChildrenAttribute(root, 'ui-button', 'disabled', value) }
+  }
+
+const style = css`
+  :host {
+    display: block;
+  }
+  slot {
+    display: block;
+  }`;
+
+/** FABTooltip {UIFABTooltip} @class @ui @component <ui-fb-tooltip />
+  * Floating Action Button with tooltip
+  */
+  export default class UIFABTooltip extends Component {
+    static template = html`
+      <template>
+        <style>${style}</style>
+        <ui-tooltip><ui-fab><slot></slot></ui-fab></ui-tooltip>
+      </template>`;
+
+  /** Создание элемента в DOM (DOM доступен) / mount @lifecycle
+    * @param {ShadowRoot} node корневой узел элемента
+    * @return {UIFABTooltip} @this текущий компонент
+    */
+    mount(node) {
+      super.mount(node, attributes, properties);
+      return this;
+    }
+  }
+
+Component.init(UIFABTooltip, 'ui-fab-tooltip', { attributes, properties });
diff --git a/components/fab.js b/components/fab.js
@@ -1,4 +1,5 @@
 import Component, { html, css } from '../script/Component.js';
+// eslint-disable-next-line no-unused-vars
 import UIIcon from './icon.js';
 
 const style = css`
@@ -69,7 +70,8 @@ const properties = {}
     * @return {Component} @this {UIFAB} текущий компонент
     */
     mount(node) {
-      return super.mount(node, attributes, properties);
+      super.mount(node, attributes, properties);
+      return this;
     }
   }
 

diff --git a/components/footer.js b/components/footer.js
@@ -6,6 +6,7 @@ const properties = {};
 const style = css`
   :host {
     display: block;
+    text-align: center;
   }
   slot {
     display: block;

diff --git a/components/numeric-amount.js b/components/numeric-amount.js
@@ -14,15 +14,8 @@ export const CURRENCIES = {
 const attributes = {
   /** / label */
     label(root, value) {
-      const label = value?.toUpperCase() || '';
-      const html = (CURRENCIES[label] || label)?.trim() || '';
-      let data = html;
-      if (html.startsWith('&#') && html.slice(-1) === ';') {
-        const temp = document.createElement('span');
-        temp.innerHTML = html;
-        data = temp.textContent;
-      };
-      updateChildrenAttribute(root, 'ui-numeric', 'label', data);
+      const label = currency(value);
+      updateChildrenAttribute(root, 'ui-numeric', 'label', label);
     },
   /** / precision */
     precision(root, value) { updateChildrenAttribute(root, 'ui-numeric', 'precision', value) }
@@ -41,9 +34,19 @@ const style = css`
     static template = html`
       <template>
         <style>${style}</style>
-        <ui-numeric><slot></slot></ui-numeric>
+        <ui-numeric precision="2"><slot></slot></ui-numeric>
       </template>`;
 
+  /** Создание компонента {UINumericAmount} @constructor
+    * @param {number} amount сумма
+    * @param {string} currency валюта
+    */
+    constructor(amount, currency) {
+      super();
+      if (amount !== undefined) this.innerText = amount.toString();
+      if (currency) this.label = currency;
+    }
+
   /** Создание элемента в DOM (DOM доступен) / mount @lifecycle
     * @param {ShadowRoot} node корневой узел элемента
     * @return {UINumericAmount} @this текущий компонент
@@ -54,3 +57,16 @@ const style = css`
   }
 
 Component.init(UINumericAmount, 'ui-numeric-amount', { attributes, properties });
+
+/** Знак валюты / currency @export */
+  export function currency(value) {
+    const label = value?.toUpperCase() || '';
+    const html = (CURRENCIES[label] || label)?.trim() || '';
+    let data = html;
+    if (html.startsWith('&#') && html.slice(-1) === ';') {
+      const temp = document.createElement('span');
+      temp.innerHTML = html;
+      data = temp.textContent;
+    };
+    return data;
+  }
diff --git a/components/numeric-percent.js b/components/numeric-percent.js
@@ -24,6 +24,14 @@ const style = css`
         <ui-numeric label="%"><slot></slot></ui-numeric>
       </template>`;
 
+  /** Создание компонента {UINumericPercent} @constructor
+    * @param {number} value устанавливаемое значение
+    */
+    constructor(value) {
+      super();
+      if (value !== undefined) this.innerText = value;
+    }
+
   /** Создание элемента в DOM (DOM доступен) / mount @lifecycle
     * @param {ShadowRoot} node корневой узел элемента
     * @return {UINumericPercent} @this текущий компонент

diff --git a/components/numeric.js b/components/numeric.js
@@ -40,11 +40,12 @@ const style = css`
 
   /** Создание компонента {UINumeric} @constructor
     * @param {number} value устанавливаемое значение
+    * @param {string} label устанавливаемое значение
     */
-    constructor(value) {
+    constructor(value, label) {
       super();
-      if (value === undefined) return;
-      this.innerText = value;
+      if (value !== undefined) this.innerText = value;
+      if (label) this.label = label;
     }
 
   /** Создание элемента в DOM (DOM доступен) / mount @lifecycle
@@ -81,15 +82,16 @@ Component.init(UINumeric, 'ui-numeric', { attributes, properties });
  * @param {number} [precision=2] точность (знаков после запятой)
  * @param {string} [thousand=' '] разделитель разрядов
  * @param {string} [decimal=','] разделитель дробной части
+ * @param {boolean} showPositiveSign показывать знак + (если число положительное)
  * @return {string} форматированное число
  */
-  export function numeric(value, precision = 2, thousand = '.', decimal = ',') {
+  export function numeric(value, precision = 2, thousand = '.', decimal = ',', showPositiveSign = false) {
     /** @type {number} */
     const data = Number.parseFloat(value);
     if (Number.isNaN(data)) return '';
 
     /** @type {string} */
-    const integerReverse = Math.trunc(precision > 0 ? data : Math.round(data)).toString().split('').reverse().join('');
+    const integerReverse = Math.abs(Math.trunc(precision > 0 ? data : Math.round(data))).toString().split('').reverse().join('');
 
     /** @type {string} */
     const integer = [...(integerReverse.matchAll(/\d{1,3}/g))]
@@ -99,5 +101,6 @@ Component.init(UINumeric, 'ui-numeric', { attributes, properties });
 
     const fraction = precision > 0 ? Math.round(data * Math.pow(10, precision)).toString().slice(-precision) : '';
 
-    return precision > 0 ? integer + decimal + fraction : integer;
+    const string = precision > 0 ? integer + decimal + fraction.padEnd(precision, '0') : integer;
+    return (value < 0 ? '-' : showPositiveSign ? '+' : '') + string;
   }
diff --git a/components/panel.js b/components/panel.js
@@ -15,6 +15,10 @@ const style = css`
     background: var(--background-panel);
   }
 
+  :host([center]) {
+    text-align: center;
+  }
+
   div.root {
     display: flex;
     flex-direction: column;

diff --git a/components/showcase-item.js b/components/showcase-item.js
@@ -1,8 +1,10 @@
 import Component, { html, css } from '../script/Component.js';
 import { updateChildrenText } from '../script/DOM.js';
+// eslint-disable-next-line no-unused-vars
 import UIIcon from './icon.js';
 
 const attributes = {
+/** / icon */
   icon(root, value) { updateChildrenText(root, 'ui-icon', value) }
 };
 const properties = {};
@@ -15,6 +17,7 @@ const style = css`
     padding: 0.4em;
     cursor: pointer;
     position: relative;
+    box-sizing: border-box;
   }
   :host(:hover) {
     border-color: var(--color-edge-accent);
@@ -24,6 +27,9 @@ const style = css`
     height: 100%;
     text-align: center;
   }
+  :host(:empty) slot {
+    min-width: 1rem;
+  }
   ui-icon {
     position: absolute;
     top: 50%;
@@ -48,12 +54,6 @@ const style = css`
         <ui-icon></ui-icon>
       </template>`;
 
-  /** Создание компонента {UIShowCase} @constructor
-    */
-    constructor() {
-      super();
-    }
-
   /** Создание элемента в DOM (DOM доступен) / mount @lifecycle
     * @param {ShadowRoot} node корневой узел элемента
     * @return {UIShowCase} @this текущий компонент

diff --git a/components/showcase.js b/components/showcase.js
@@ -14,7 +14,10 @@ const style = css`
     justify-content: space-around;
     align-items: stretch;
     flex-wrap: wrap;
-    row-gap: var(--padding-showcase, 1rem);
+    gap: var(--padding-showcase, 1rem);
+  }
+  :host([align="left"]) slot {
+    justify-content: left;
   }`;
 
 /** Витрина {Showcase} @class @ui @component <ui-showcase />

diff --git a/components/statistic.js b/components/statistic.js
@@ -6,7 +6,10 @@ const attributes = {
     icon(root, value) { updateChildrenText(root, 'ui-icon', value); },
 
   /** / caption */
-    caption(root, value) { updateChildrenText(root, 'p', value); }
+    caption(root, value) { updateChildrenText(root, 'p', value); },
+
+  /** / mode */
+    mode() {}
 };
 const properties = {};
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@xaota/ui",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "",
   "main": "./index.js",
   "exports": {
@@ -19,11 +19,12 @@
     "url": "git+https://github.com/xaota/ui.git"
   },
   "keywords": [
-    "api",
-    "storage",
     "javascript",
     "browser",
-    "es-module"
+    "es-module",
+    "native",
+    "web-components",
+    "ui"
   ],
   "author": "xaota",
   "license": "Unlicense",

diff --git a/script/Component.js b/script/Component.js
@@ -41,7 +41,8 @@ const state = Symbol('state');
       event = detail !== null || (!event.type && event.includes('-'))
         ? new CustomEvent(event, { detail, ...options })
         : typeof event === 'object' ? event : new Event(event);
-      return this.dispatchEvent(event);
+      this.dispatchEvent(event);
+      return this;
     }
 
   /** connectedCallback */
@@ -50,7 +51,8 @@ const state = Symbol('state');
       if (this.shadowRoot.firstChild) return; // ! loaded @TODO: перенос узла
 
       const template = this.constructor.template.content.cloneNode(true);
-      this.ready(template).attach(template);
+      this.ready(template)
+      this.attach(template);
       this[state] = 'attached';
       this.mount(this.shadowRoot);
       this[state] = 'mounted';
@@ -93,8 +95,8 @@ const state = Symbol('state');
       return this;
     }
 
-  /** render */
-    render(node) { // перерендеринг компонента, если требуется
+  /** перерендеринг компонента, если требуется / render */
+    render(node) {
       return this;
     }
 

diff --git a/script/DOM.js b/script/DOM.js
@@ -88,8 +88,7 @@
     } while (self instanceof HTMLSlotElement);
 
     const value = self?.nodeValue;
-    if (!value) return;
-
+    if (value === undefined || value === null) return;
     return value.trim();
   }