intial commit

xaota · Aug 19, 2020 · f1ae14c · f1ae14c
commit f1ae14c
Show file tree

Hide file tree

Showing 81 changed files with 9,138 additions and 0 deletions.
diff --git a/.github/ISSUE_TEMPLATE/bug.md b/.github/ISSUE_TEMPLATE/bug.md
@@ -0,0 +1,24 @@
+---
+name: Сообщение об ошибке
+about: Опишите багу и укажите severity / priority
+
+---
+
+```html
+<ui->
+```
+описание компонента: #
+
+### Где повторяется
+
+### Шаги воспроизведения
+1.
+
+### Ожидаемые результаты
+- [ ]
+
+### Скриншоты
+
+### Автотест (опционально)
+
+### Дополнительная информация
diff --git a/.github/ISSUE_TEMPLATE/component.md b/.github/ISSUE_TEMPLATE/component.md
@@ -0,0 +1,16 @@
+---
+name: Создание нового компонента
+about: Укажите примеры использования и опишите компонент
+
+---
+
+```js
+import UI from '/ui/components//ui-.js';
+```
+|       branch      | pull-request |
+| :---------------: | :----------: |
+| `task/master/#`   | #            |
+
+- [ ] Компонент для
+- [ ] Цвета оформления зависят от
+- [ ] `disabled`-атрибут
diff --git a/.github/ISSUE_TEMPLATE/feature-request.md b/.github/ISSUE_TEMPLATE/feature-request.md
@@ -0,0 +1,16 @@
+---
+name: Новая функциональность
+about: Опишите идею или предложение
+
+---
+
+### Питч (описание в одну строку)
+Подробнее опишите идею, проблему или предложение.
+
+### Проблематика
+Кому будет интересно, какую проблему решает ваше предложение
+
+### Альтернативы
+Придумайте ещё несколько вариантов решения реализации / решения
+
+### Дополнительная информация
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -0,0 +1,11 @@
+```html
+<ui->
+```
+
+resolve # |
+
+- [x]
+
+### Автотест (если есть)
+
+### Дополнительная информация
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,4 @@
+.DS_Store
+node_modules/
+
+.history/
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,8 @@
+.eslintrc
+.vscode/
+.babelrc
+.prettierrc.json
+
+node_modules/
+.history/
+.DS_Store
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,13 @@
+{
+  "files.exclude": {
+    "**/.history": true
+  },
+  "files.watcherExclude": {
+    "**/.history": true,
+    "**/dist/*": true
+  },
+  "search.exclude": {
+    "**/.history": true,
+    "**/dist/*": true
+  }
+}
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,24 @@
+This is free and unencumbered software released into the public domain.
+
+Anyone is free to copy, modify, publish, use, compile, sell, or
+distribute this software, either in source code form or as a compiled
+binary, for any purpose, commercial or non-commercial, and by any
+means.
+
+In jurisdictions that recognize copyright laws, the author or authors
+of this software dedicate any and all copyright interest in the
+software to the public domain. We make this dedication for the benefit
+of the public at large and to the detriment of our heirs and
+successors. We intend this dedication to be an overt act of
+relinquishment in perpetuity of all present and future rights to this
+software under copyright law.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
+For more information, please refer to <http://unlicense.org>
diff --git a/asset/icons.svg.js b/asset/icons.svg.js
diff --git a/components/audio.js b/components/audio.js
@@ -0,0 +1,47 @@
+import Component, {html, css} from '../script/Component.js';
+import {updateChildrenAttribute} from '../script/DOM.js';
+
+const style = css`
+  :host {display: block}
+  audio {
+    border-radius: 0;
+    outline: none;
+    background-color: #F3F4F5;
+    display: block;
+    width: 100%;
+  }`;
+
+const attributes = {
+  /** src */
+    src(root, value) { updateChildrenAttribute(root, 'audio', 'src', value) }
+  }
+const properties = {}
+
+/** {UIAudio} @class
+  * @description Элемент для воспроизведения аудиофайлов
+  */
+  export default class UIAudio extends Component {
+    static template = html`
+      <template>
+        <style>${style}</style>
+        <audio controls></audio>
+      </template>`;
+
+  /** Создание компонента {UIAudio} @constructor
+    * @param {string?} src адрес аудиофайла
+    */
+    constructor(src) {
+      super();
+      if (src) this.src = src;
+    }
+
+  /** Создание элемента в DOM (DOM доступен) / mount @lifecycle
+    * @param {ShadowRoot} node корневой узел элемента
+    * @return {UIAudio} текущий компонент
+    */
+    mount(node) {
+      return super.mount(node, attributes, properties);
+    }
+  }
+
+Component.init(UIAudio, 'ui-audio', {attributes, properties});
diff --git a/components/avatar.js b/components/avatar.js
@@ -0,0 +1,136 @@
+import Component, {html, css, url} from '../script/Component.js';
+import {updateChildrenAttribute, updateChildrenText} from '../script/DOM.js';
+import UIText from './text.js';
+import UIIcon from './icon.js';
+
+const style = css`
+  @import "${url('../style/color.css', import.meta.url)}";
+  :host {
+    display: inline-block;
+    border-radius: 50%;
+    overflow: hidden;
+
+    --size: 48px;
+
+    width: var(--size);
+    height: var(--size);
+    background-color: var(--fill-static);
+    color: var(--fill-stroke);
+
+    font-family: CustomSansSerif, 'Lucida Grande', Arial, sans-serif;
+    font-size: calc(var(--size) / 2);
+    font-weight: 100;
+    line-height: var(--size);
+    text-align: center;
+
+    position: relative;
+  }
+
+  ui-icon {
+    position: absolute;
+    width: 70%;
+    height: 70%;
+    left: 15%;
+    top: 14%;
+    display: none;
+  }
+
+  :host > img:not([src]) ~ ui-icon:not(:empty) {
+    display: block;
+  }
+
+  ui-icon:not(:empty) + ui-text {
+    display: none;
+  }
+
+  :host > img {
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+  }
+
+  :host > img[src$=".svg"] ~ ui-text,
+  :host > img[src$=".svg"] ~ ui-icon {
+    display: none;
+  }
+
+  slot {
+    display: none;
+  }`;
+
+const attributes = {
+  /** size */
+    size(root, value) {
+      if (value === null) return;
+      this.style.setProperty('--size', value)
+    },
+  /** src */
+    src(root, value) { updateChildrenAttribute(root, 'img', 'src', value) },
+  /** icon */
+    icon(root, value) { updateChildrenText(root, 'ui-icon', value) },
+  /** color */
+    color(root, value) {
+      this.style.backgroundColor = value;
+    }
+  }
+const properties = {}
+
+/** Компонент отображения аватара пользователя @class {UIAvatar} @extends {Component}
+  * Порядок наложения атрибутов: color->+innerText->icon->src
+  * letter устанавливается автоматически из переданного innerText
+  */
+  export default class UIAvatar extends Component {
+    static template = html`
+      <template>
+        <style>${style}</style>
+        <slot></slot>
+        <img src="" alt="" />
+        <ui-icon>create</ui-icon>
+        <ui-text></ui-text>
+      </template>`;
+
+  /** Создание компонента {UIAvatar} @constructor
+    * @param {string|object} options название аватара или его опции
+    */
+    constructor(options) {
+      super();
+      if (!options) return;
+      if (!options.text) options = {text: options};
+      this.innerText = options.text;
+      if (options.src)   this.src   = options.src;
+      if (options.icon)  this.icon  = options.icon;
+      if (options.size)  this.size  = options.size;
+      if (options.color) this.color = options.color;
+    }
+
+  /** Создание элемента в DOM (DOM доступен) / mount @lifecycle
+    * @param {ShadowRoot} node корневой узел элемента
+    * @return {Component} @this {UIAvatar} текущий компонент
+    */
+    mount(node) {
+      super.mount(node, attributes, properties);
+      const slot = node.querySelector('slot');
+      slot.addEventListener('slotchange', _ => {
+        const value = letter(this.innerText);
+        updateChildrenText(node, 'ui-text', value);
+      });
+      return this;
+    }
+  }
+
+Component.init(UIAvatar, 'ui-avatar', {attributes, properties});
+
+// #region [Private]
+/** setText */
+function letter(value) {
+  return value
+    .trim()
+    .split(/\s+/)
+    .slice(0, 2)
+    .map(e => e.charAt(0))
+    .join('')
+    .toUpperCase();
+}
+// #endregion