arrmatura 4.2.2 → 5.0.2

package/README.md

@@ -1,49 +1,54 @@
 # Arrmatura
 
-`Arrmatura` introduces an ultimate `specification-as-a-code` approach to develop a data-driven systems by defining and composing components in a declarative way.
-
-`Arrmatura` is intended to be
+`Arrmatura` is a mimimalistic component framework that designed to be:
 
 - declarative and codeless
+- reactive and functional
 - non-obtrusive, platform-independent
-- reactive and functional oriented
 - easy to learn and get started.
 
-`Arrmatura` is a minimalistic UI framework, that enriches the pure HTML with components, arrows and pipes.
-
-Born-for-dom, it is also may be adopted to develop wide range of modular component-based applications.
-
 # Get Started
 
     npm i arrmatura
 
-```javascript
-import { launch } from "arrmatura";
+./templates.xml
+
+```xml
+<component id="Application">
+    <Main name="Joe"/>
+</component>
 
-const components = `<component id="Footer">
-          <Button title=":send_title|upper">
-        </component>`;
+<component id="Main">
+    <Button title="{:greeting}, {name|upper}!">
+</component>
+```
+
+index.ts
 
-launch({
-  types: [Application, SomeService, components],
-  template: "<Application />",
+```javascript
+import { arrmatura } from 'arrmatura';
+import templates from './templates.xml';
+
+arrmatura('<Application />', {
+  types: [templates],
   resources: {
-    send_title: "Send",
+    greeting: 'Hello',
   },
-  pipes: {
+  functions: {
     upper: (x) => x.toUpperCase(),
   },
 });
 ```
 
-Please take a look into [Todo App](https://alitskevich.github.io/arrmatura/todo.html) to get very basic insight how it works.
-
 # Documentation
 
-- [Glossary](md/GLOSSARY.md)
-- [Templates](md/TEMPLATE.md)
-- [Custom components](md/CUSTOM.md)
+- [Glossary](manuals/GLOSSARY.md)
+- [Templates](manuals/TEMPLATE.md)
+- [Custom components](manuals/CUSTOM.md)
 
-# Usages
+# Samples
 
-- [Grodno.co](https://grodno.co)
+- [TodoMVC](https://alitskevich.github.io/arrmatura/todo.html) ([source](https://github.com/alitskevich/arrmatura/blob/master/docs/todo.html))
+- [Tasks list](https://alitskevich.github.io/arrmatura/task.html) ([source](https://github.com/alitskevich/arrmatura/tree/master/app-task))
+- [Game Solver](https://dlitskevich.github.io/solver/) ([source](https://github.com/dlitskevich/solver/tree/master/app))
+- [Input Templates](https://alitskevich.github.io/templain/) ([source](https://github.com/alitskevich/templain/tree/master/app))

package/commons/auth/UserService.ts

@@ -0,0 +1,107 @@
+import { Service } from '../services/Service';
+import { urlAppendParams } from 'urls';
+import { LocalStorage } from '../services/LocalStorage';
+
+export class UserService extends Service {
+  url: string = '';
+  kind: string = '$user';
+  local: LocalStorage = new LocalStorage('local');
+  token: any;
+  $info: unknown;
+
+  init() {
+    return this.syncUserInfo();
+  }
+
+  syncUserInfo() {
+    const token = this.token || this.local?.get('$token');
+
+    return !token
+      ? null
+      : {
+          isLoading: true,
+          '*': fetch(urlAppendParams(this.url, { action: 'user', token }), { redirect: 'follow' })
+            .then((res) => res.json())
+            .then(({ info, error }) => {
+              if (error) throw error;
+              this.log('sync' + this.kind, info);
+              this.local?.set('$token', token);
+              return { info, isLoading: false };
+            })
+            .catch((err) => {
+              this.toast({ mode: 'error', message: 'Ошибка: ' + JSON.stringify(err?.message || err || 'unknown') });
+              return { info: null, isLoading: false };
+            }),
+        };
+  }
+
+  set info(info: unknown) {
+    this.$info = info;
+    this.local?.set(this.kind, info);
+  }
+
+  get info() {
+    const info = this.$info || this.local?.get(this.kind);
+    return info;
+  }
+
+  get isSignedIn() {
+    return this.info?.id;
+  }
+
+  async update(delta: Delta) {
+    const now = Date.now();
+    const { since, items: items0 = [] } = this.local?.get(this.kind) || { since: 0, items: {} };
+
+    this.log('update', delta);
+
+    return {
+      busy: true,
+      '*': fetch(this.url, {
+        method: 'POST',
+        mode: 'cors',
+        redirect: 'follow',
+        body: JSON.stringify({ action: 'upsert', delta }),
+      })
+        .then((res) => res.json())
+        .then(({ id, error }) => {
+          if (error) throw error;
+          // items: items1 }
+          this.log('update sync' + this.kind, now, id);
+          // const items = { ...items0, ...arrayToObject(items1) };
+          this.toast('Сохранено успешно');
+
+          // this.local?.set(this.kind, { since: now, items });
+          return { busy: false }; //items,
+        })
+        .catch((err) => {
+          this.toast({ mode: 'error', message: 'Ошибка: update ' + JSON.stringify(err?.message || err || 'unknown') });
+          return { busy: false };
+        }),
+    };
+  }
+
+  onUpdate(data, { info }) {
+    return {
+      info: { ...info, ...data },
+    };
+  }
+
+  onLogin() {
+    return {
+      info: { id: 1, name: 'Me' },
+    };
+  }
+
+  onShowProfile(showProfile = false) {
+    return {
+      showProfile,
+    };
+  }
+
+  onLogout() {
+    return {
+      info: { id: 0, name: 'Me222' },
+    };
+  }
+}

package/commons/auth/index.ts

@@ -0,0 +1,4 @@
+import user from './user.xml';
+import { UserService } from './UserService';
+
+export default [user, UserService];

package/commons/auth/user.xml

@@ -0,0 +1,66 @@
+<component id="UserBar">
+  <div class="float-right">
+    <UserLoading ui:if="<-user.isLoading">
+      <ui:else>
+        <NoUserPanel ui:if="<-user.isSignedIn|not">
+          <ui:else>
+            <UserPanel ui:props="<-user.info" defaultImage="assets/img/avatar-1.png"/>
+          </ui:else>
+        </NoUserPanel>
+      </ui:else>
+    </UserLoading>
+  </div>
+</component>
+
+<component id="UserLoading">
+  <div class="tile tile-centered">
+    <div class="tile-action">
+      <div class="dropdown dropdown-right">
+        <a class="btn btn-link dropdown-toggle" tabindex="0">
+          <div class="mx-2 loading"></div>
+        </a>
+      </div>
+    </div>
+  </div>
+</component>
+
+<component id="UserPanel">
+  <div class="tile tile-centered">
+    <div class="tile-icon">
+      <div class="example-tile-icon c-hand" click="-> user.showProfile|truthy">
+        <figure class="avatar">
+          <img src="{image|or:@defaultImage}" alt="{name}" />
+        </figure>
+      </div>
+    </div>
+    <div class="tile-action">
+      <div class="dropdown dropdown-right">
+        <a class="btn btn-link dropdown-toggle" tabindex="0">
+          <i class="icon icon-more-vert"></i >
+        </a>
+        <ul class="menu">
+          <li class="menu-item">
+            <a click="-> user.logout">⏹️Vyxod</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</component>
+
+<component id="NoUserPanel">
+  <div class="tile tile-centered">
+    <div class="tile-action">
+      <div class="dropdown dropdown-right">
+        <a class="btn btn-link dropdown-toggle" tabindex="0">
+          <i class="icon icon-more-vert"></i >
+        </a>
+        <ul class="menu">
+          <li class="menu-item">
+            <a click="-> user.login">▶️Vxod</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</component>

package/commons/components/buttons.xml

@@ -0,0 +1,23 @@
+<component id="Btn">
+  <button class="
+      btn btn-{mode}
+      {primary|then:btn-primary}
+      {disabled|or:@busy|then:disabled}
+      {class}
+      {large|then:btn-lg}
+      {link|then:btn-link}
+      c-hand
+    " style="{style}" data={data} click="{action}">
+    <span ui:if="{busy}" class="mx-2">
+      <i class="loading"></i>
+    </span>
+    <Icon ui:if="{icon}" bundle="{iconBundle}" type="{icon}" class="mr-2" />
+    <span ui:if="{title}" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">{title}</span>
+  </button>
+</component>
+
+<component id="FAB">
+  <button class="btn {tooltip|then:tooltip} tooltip-left fixed bg-error s-circle centroid c-hand {class} {disabled|or:@busy|then:disabled}  {busy|then:loading}" style="position: fixed; border: none; right: 1.5rem; bottom: 1.5rem; width: 2.5rem; height: 2.5rem;" data="{data}" data-tooltip="{tooltip|or:}" click="{action}">
+    <Icon type="{icon|or:plus}" />
+  </button>
+</component>

package/commons/components/index.ts

@@ -0,0 +1,13 @@
+import buttons from './buttons.xml';
+import table from './table.xml';
+import inputs from './inputs.xml';
+import media from './media.xml';
+import modal from './modal.xml';
+import navigation from './navigation.xml';
+import layouts from './layouts.xml';
+import viewport from './viewport.xml';
+import toasts from './toasts.xml';
+import searchbar from './searchbar.xml';
+import popups from './popups.xml';
+
+export default [buttons, media, table, modal, navigation, toasts, viewport, layouts, inputs, searchbar, popups];

package/commons/components/inputs.xml

@@ -0,0 +1,33 @@
+<component id="Select">
+  <select class="{class}" change="{change}" multiple="{multiple}" disabled="{disabled}" data="{data}">
+    <option selected="{value|not}" value="" ui:if="{value|not|or:@emptyCaption}">{emptyCaption}</option>
+    <option ui:for="option of options" selected="{option.id|equals:@value}" value="{option.id}">{option.name}</option>
+  </select>
+</component>
+
+<component id="RadioGroup">
+  <div class="{class}">
+    <label class="form-radio" ui:for="option of options">
+      <input type="radio" name="{id|or:rg}" value="{option.id}" checked="{option.id|equals:@value}" change="{change}" data="{data}" disabled="{disabled}" />
+      <i class="form-icon"></i>{option.name}
+    </label>
+  </div>
+</component>
+
+<component id="Dropdown">
+  <div class="dropdown">
+    <a href="#" class="btn btn-link dropdown-toggle" tabindex="0">
+      {data|selectedName}<i class="icon icon-caret"></i>
+    </a>
+    <!-- menu component -->
+    <ul class="menu" style="right: 0; left: auto">
+      <li ui:for="item of data" class="menu-item {item.id|equals:@value|then:active}" data-id="{item.id}" data-name="{item.name}" click="{change}">
+        <a>{item.name}</a>
+      </li>
+    </ul>
+  </div>
+</component>
+
+<component id="DateTimeInput">
+  <input class="form-input flatpickr-input" init="{:support.initFlatpickr}" disabled="{disabled}" type="text" placeholder="{placeholder}" value="{value|support.setFlatpickrValue}" change="{change}" />
+</component>

package/commons/components/layouts.xml

@@ -0,0 +1,77 @@
+<component id="Container">
+  <div class="container {class}" style="max-width: 720px;">
+    <a name="top"></a>
+    <ui:slot />
+  </div>
+</component>
+
+<component id="Panel">
+  <h6 class="mt-2 pt-2 px-2 text-gray" ui:if="caption">{caption}</h6>
+  <div class="panel {class}" style="{style}">
+    <small class="p-2 bg-secondary" ui:if="{hint}">{hint}</small>
+    <div class="panel-header" ui:if="slot(title)">
+      <div class="panel-title">
+        <ui:slot id="title" key="panel-title" />
+      </div>
+    </div>
+    <div class="panel-nav" ui:if="slot(nav)">
+      <ui:slot id="nav" />
+    </div>
+    <div class="panel-body p-2">
+      <ui:slot />
+    </div>
+    <div class="panel-footer" ui:if="slot(footer)">
+      <ui:slot id="footer" />
+    </div>
+  </div>
+</component>
+
+<component id="Tile">
+  <div class="tile {centered|then:tile-centered} m-2 {class}">
+    <div class="tile-icon" ui:if="{image}">
+      <Avatar src="{image}" />
+    </div>
+    <div class="tile-icon" ui:if="{icon}">
+      <Icon type="{icon}" />
+    </div>
+    <div class="tile-content">
+      <div class="tile-title text-bold" ui:if="{title}">{title}</div>
+      <div class="tile-subtitle" ui:if="{subtitle}">{subtitle}</div>
+      <ui:slot />
+    </div>
+    <div class="tile-action btn-group" ui:if="slot(actions)">
+      <ui:slot id="actions" />
+    </div>
+  </div>
+</component>
+
+<component id="Card">
+  <div class="card" style="{style}">
+    <div class="card-image" ui:if="{image}">
+      <img src="{image}" class="img-responsive" />
+    </div>
+    <div class="card-header">
+      <a ui:if="{title}" href="{link}">
+        <h5 class="card-title">{title}</h5>
+      </a>
+      <div ui:if="{subtitle}" class="card-subtitle text-gray">{subtitle}</div>
+      <ui:slot id="header" />
+    </div>
+    <div class="card-body">
+      <ui:slot />
+    </div>
+    <div class="card-footer">
+      <ui:slot id="footer" />
+    </div>
+  </div>
+</component>
+
+<component id="Hero">
+  <div class="hero bg-dark p-0">
+    <div class="hero-body px-2">
+      <h1>{title}</h1>
+    </div>
+  </div>
+</component>
+
+

package/commons/components/media.xml

@@ -0,0 +1,21 @@
+<component id="Icon">
+  <i class="icon icon-{type} {class}" style="{style}" data="{data}" click="{click}"></i>
+</component>
+
+<component id="Img">
+  <img src="{src|or:@default}" alt="{alt}" class="img {class}" style="{style}" />
+</component>
+
+<component id="ImgLogo">
+  <img src="{src}" class="{class}" error="->" data-src="/assets/logo.jpg" />
+</component>
+
+<component id="IFrame">
+  <iframe width="100%" height="450" frameborder="0" style="border: 0;" src="{src}" allowfullscreen="1"></iframe>
+</component>
+
+<component id="Avatar">
+  <figure class="avatar {large|then:avatar-lg}">
+    <img src="{src}" alt="{alt}" default="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />
+  </figure>
+</component>

package/commons/components/modal.xml

@@ -0,0 +1,37 @@
+<component id="Modal">
+  <!-- 
+  
+  Modal component:
+
+  Slots:
+    - header
+    - default
+    - footer
+
+  Properties:
+    - open: boolean
+    - close: procedure
+    - title: string
+    - mode: lg|sm
+
+  -->
+  <div class="modal modal-{mode} {open|then:active}">
+    <a class="modal-overlay" aria-label="Close" click="{close}"></a>
+    <div class="modal-container" style="padding:0;max-height: {mode|equals:lg|then:100:70}vh">
+      <div class="modal-header" style="padding-bottom:0;">
+        <a class="btn btn-clear float-right" aria-label=":close" click="{close}"></a>
+        <div class="modal-title h5" ui:if="{title}">{title}</div>
+        <ui:slot id="header" />
+      </div>
+      <div class="modal-body" style="">
+        <div class="content">
+          <ui:slot />
+        </div>
+      </div>
+      <div class="modal-footer">
+        <ui:slot id="footer" />
+      </div>
+    </div>
+  </div>
+</component>
+

package/commons/components/navigation.xml

@@ -0,0 +1,59 @@
+<component id="Tabs">
+  <ul class="tab tab-block">
+    <li class="tab-item {item.id|equals:@value|then:active} c-hand" ui:for="item of items">
+      <a data-id="{item.id}" click="{change}">
+        <Icon ui:if="{item.icon}" type="{item.icon}" bundle="{item.iconBundle}" class="mx-2" />
+        {item.name|or:@item.id}
+      </a>
+    </li>
+  </ul>
+</component>
+
+<component id="BackButton">
+  <a class="mx-2" style="border: none; width: 1.5rem; z-index: 5" href="{href}">
+    <Icon type="back" />
+  </a>
+</component>
+
+<component id="Navbar">
+  <header class="navbar sticky {class} bg-secondary" style="min-height: 48px;flex-wrap: nowrap;margin:0;">
+    <section class="navbar-section">
+      <div class="m-2 flexoid items-center">
+        <ui:slot id="left" />
+        <h5 class="m-1 text-dark {badge|then:badge}" style="vertical-align: middle" data-badge="{badge}" ui:if="{caption}">{caption}</h5>
+      </div>
+    </section>
+    <section class="navbar-center" ui:if="{logo}">
+      <img src="{logo}" style="max-height: 44px" />
+    </section>
+    <section class="navbar-section flex-0 mx-2" ui:if="slot(right)">
+      <ui:slot id="right" />
+    </section>
+  </header>
+</component>
+
+<component id="PageRouter">
+  <ui:tag tag="{host|capitalize|or:Loader}Page" path={path} ui:props="{params}" params="{params}" />
+</component>
+
+<component id="LoaderPage">
+  <LoadingIndicator />
+</component>
+
+<component id="NavTree">
+  <ul class="nav">
+    <li class="nav-item {item.class}" ui:for="item of data">
+      <NavLink href="{item.id}">
+        <span>{item.name}</span>
+        <span ui:if="{item.label}" class="label label-error">{item.label}</span>
+      </NavLink>
+      <NavTree ui:if="{item.subs}" data="{item.subs}" />
+    </li>
+  </ul>
+</component>
+
+<component id="NavLink">
+  <a data-value="{href}" click="-> nav.hash" class="c-hand {class}">
+    <ui:slot />
+  </a>
+</component>

package/commons/components/popups.xml

@@ -0,0 +1,12 @@
+<component id="Popover">
+  <div class="popover popover-right">
+    <ui:slot />
+    <div class="popover-container">
+      <div class="card">
+        <div class="card-header">
+          <ui:slot id="body" />
+        </div>
+      </div>
+    </div>
+  </div>
+</component>

package/commons/components/searchbar.xml

@@ -0,0 +1,40 @@
+<component id="SearchBar">
+  <span class="ant-input-search ant-input-affix-wrapper">
+    <input placeholder="Поиск..." class="ant-input" type="text" value="{value}" enter="{action}" style="min-height: 40px" />
+    <span class="ant-input-suffix">
+      <i class="anticon anticon-search ant-input-search-icon" style="margin-top: 4px"></i>
+    </span>
+  </span>
+</component>
+
+<component id="SearchBarWithSuggestions">
+  <ui:fragment ui:if="opened.value">
+    <ui:then>
+      <div class="form-autocomplete mx-2">
+        <!-- autocomplete input container -->
+        <div class="form-autocomplete-input form-input input-sm">
+          <div class="input-group input-inline">
+            <input class="form-input" type="search" autofocus placeholder=":kluq_poshuku" keypress="{input}" value="{value}" style="max-width:120px;width:inherit" />
+            <i class="icon icon-cross m-2 c-hand" data-value="" click="{enter}" ui:if="value"></i>
+            <i class="icon icon-search m-2 c-hand" click="->opened|assignKeyValue:value:false" ui:if="value|not"></i>
+          </div>
+        </div>
+        <ul class="menu" style="min-width: 120px;max-height:7rem;overflow-y:auto;" ui:if="{suggestions}">
+          <li class="menu-item" ui:for="item of suggestions" data-value="{item.id}" click="{enter}">
+            <a>
+              <div class="tile tile-centered">
+                <div class="tile-content">{item.name}</div>
+              </div>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </ui:then>
+    <ui:else>
+      <div class="mx-2" click="{open|bindArgs:true}">
+        <i class="icon icon-search m-2 c-hand" click="->opened|assignKeyValue:value:true"></i>
+      </div>
+    </ui:else>
+  </ui:fragment>
+
+</component>