not-bulma 1.0.61 → 1.0.63

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "not-bulma",
-  "version": "1.0.61",
+  "version": "1.0.63",
   "description": "not-* family UI components on Bulma CSS Framework",
   "main": "src/index.js",
   "svelte": "src/index.js",
@@ -59,7 +59,7 @@
     "bulma-pageloader": "*",
     "bulma-slider": "*",
     "bulma-switch": "^2.0.4",
-    "core-js": "^3.27.2",
+    "core-js": "^3.29.1",
     "mocha": "^10.2.0",
     "not-path": "^1.0.4",
     "not-validation": "^0.0.8",
@@ -68,70 +68,70 @@
     "wolfy87-eventemitter": "^5.2.9"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.12",
+    "@babel/core": "^7.21.3",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-private-methods": "^7.18.6",
     "@babel/plugin-transform-arrow-functions": "^7.20.7",
-    "@babel/plugin-transform-runtime": "^7.19.6",
+    "@babel/plugin-transform-runtime": "^7.21.0",
     "@babel/preset-env": "^7.20.2",
     "@cypress/code-coverage": "^3.10.0",
-    "autoprefixer": "^10.4.13",
+    "autoprefixer": "^10.4.14",
     "babel-cli": "^6.26.0",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^9.1.2",
     "babel-plugin-istanbul": "^6.1.1",
-    "connect-mongo": "^4.6.0",
+    "connect-mongo": "^5.0.0",
     "connect-mongodb-session": "^3.1.1",
     "cors": "^2.8.5",
     "cypress": "*",
-    "eslint": "^8.34.0",
-    "eslint-plugin-storybook": "^0.6.10",
+    "eslint": "^8.36.0",
+    "eslint-plugin-storybook": "^0.6.11",
     "eslint-plugin-svelte3": "^4.0.0",
     "express": "^4.18.2",
     "express-fileupload": "^1.4.0",
     "express-session": "^1.17.3",
     "helmet": "^6.0.1",
     "ink-docstrap": "^1.3.2",
-    "ioredis": "^5.3.0",
+    "ioredis": "^5.3.1",
     "istanbul": "^0.4.5",
     "istanbul-lib-coverage": "^3.2.0",
     "method-override": "^3.0.0",
-    "mongodb-memory-server": "^8.11.4",
-    "mongoose": "^6.9.0",
+    "mongodb-memory-server": "^8.12.1",
+    "mongoose": "^7.0.2",
     "node-sass": "^8.0.0",
     "not-config": "^0.1.5",
     "not-error": "^0.2.9",
-    "not-inform": "^0.0.28",
-    "not-key": "0.0.64",
+    "not-inform": "^0.0.30",
+    "not-key": "0.0.65",
     "not-locale": "^0.0.22",
     "not-log": "0.0.20",
-    "not-node": "^6.1.9",
+    "not-node": "^6.2.11",
     "not-options": "^0.2.0",
-    "not-user": "^0.2.131",
-    "not-ws": "0.1.19",
+    "not-user": "^0.2.136",
+    "not-ws": "0.1.22",
     "npm-run-all": "^4.1.5",
     "nyc": "^15.1.0",
     "postcss-cli": "^10.1.0",
     "pug-cli": "^1.0.0-alpha6",
-    "redis": "^4.6.4",
-    "rollup": "^3.17.2",
+    "redis": "^4.6.5",
+    "rollup": "^3.19.1",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-eslint": "^7.0.0",
-    "rollup-plugin-filesize": "^9.1.2",
+    "rollup-plugin-filesize": "^10.0.0",
     "rollup-plugin-istanbul": "^4.0.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-sass": "^1.12.17",
+    "rollup-plugin-sass": "^1.12.19",
     "rollup-plugin-sizes": "^1.0.5",
-    "rollup-plugin-svelte": "^7.1.0",
-    "sass": "^1.58.0",
+    "rollup-plugin-svelte": "^7.1.4",
+    "sass": "^1.59.3",
     "sass-loader": "^13.2.0",
     "serve": "^14.2.0",
-    "simple-svelte-autocomplete": "^2.5.1",
-    "svelte": "^3.55.1",
-    "svelte-loader": "^3.1.5",
-    "terser": "^5.16.5"
+    "simple-svelte-autocomplete": "^2.5.2",
+    "svelte": "^3.57.0",
+    "svelte-loader": "^3.1.7",
+    "terser": "^5.16.6"
   },
   "nyc": {
     "include": [

package/src/elements/list/endless/index.js

@@ -1,6 +1,5 @@
-import UIEndlessListEmptyPlaceholder from './ui.endless.list.empty.placeholder.svelte';
-import UIEndlessListNavigation from './ui.endless.list.navigation.svelte';
-import UIEndlessListSimpleItem from './ui.endless.list.simple.item.svelte';
-import UIEndlessList from './ui.endless.list.svelte';
+import UIEndlessListNavigation from "./ui.endless.list.navigation.svelte";
+import UIEndlessListSimpleItem from "./ui.endless.list.simple.item.svelte";
+import UIEndlessList from "./ui.endless.list.svelte";
 
-export {UIEndlessListEmptyPlaceholder, UIEndlessListNavigation, UIEndlessListSimpleItem, UIEndlessList};
+export { UIEndlessListNavigation, UIEndlessListSimpleItem, UIEndlessList };

package/src/elements/list/endless/ui.endless.list.svelte

@@ -3,7 +3,7 @@
     const dispatch = createEventDispatcher();
 
     import UIEndlessListSimpleItem from "./ui.endless.list.simple.item.svelte";
-    import UIEndlessListEmptyPlaceholder from "..ui.list.empty.placeholder.svelte";
+    import UIEndlessListEmptyPlaceholder from "../ui.list.empty.placeholder.svelte";
     import UIEndlessListNavigation from "./ui.endless.list.navigation.svelte";
 
     export let data = {

package/src/elements/list/index.js

@@ -1,5 +1,4 @@
 import {
-    UIEndlessListEmptyPlaceholder,
     UIEndlessListNavigation,
     UIEndlessListSimpleItem,
     UIEndlessList,
@@ -10,7 +9,6 @@ import UIListItem from "./ui.list.item.svelte";
 import UIListEmptyPlaceholder from "./ui.list.empty.placeholder.svelte";
 
 export {
-    UIEndlessListEmptyPlaceholder,
     UIEndlessListNavigation,
     UIEndlessListSimpleItem,
     UIEndlessList,

package/src/elements/list/ui.list.block.svelte

@@ -0,0 +1,39 @@
+<script>
+    import UIListItem from "not-bulma/src/elements/list/ui.list.item.svelte";
+    import UITitle from "../various/ui.title.svelte";
+    export let idFieldName = "id";
+    export let items = [];
+
+    export let itemClasses = "";
+
+    export let listItemComponent = UIListItem;
+    export let listItemComponentProps = {};
+
+    export let titleComponent = UITitle;
+    export let titleComponentProps = { size: 6 };
+    export let descriptionComponent;
+    export let descriptionComponentProps = {};
+    export let imageComponent;
+    export let imageComponentProps = {};
+</script>
+
+{#each items as item (item[idFieldName])}
+    <svelte:component
+        this={listItemComponent}
+        {...listItemComponentProps}
+        {titleComponent}
+        {titleComponentProps}
+        {descriptionComponent}
+        {descriptionComponentProps}
+        {imageComponent}
+        {imageComponentProps}
+        {...item}
+        classes={itemClasses}
+        value={item}
+        on:click
+        on:clickContent
+        on:clickDescription
+        on:clickImage
+        on:clickTitle
+    />
+{/each}

package/src/elements/list/ui.list.item.svelte

@@ -1,57 +1,95 @@
 <script>
     import { createEventDispatcher } from "svelte";
     const dispatch = createEventDispatcher();
+
+    import UITitle from "../various/ui.title.svelte";
     import UIButtons from "../button/ui.buttons.svelte";
-    export let id;
+
     export let title;
     export let description;
     export let actions = [];
     export let classes = "";
     export let image = "";
+    //value of item, will be passed to event handlers
+    export let value;
+    //customization
+    export let titleComponent = UITitle;
+    export let titleComponentProps = { size: 6 };
+    export let descriptionComponent;
+    export let descriptionComponentProps = {};
+    export let imageComponent;
+    export let imageComponentProps = {};
+
+    function onClick() {
+        dispatch("click", value);
+    }
 </script>
 
-<div
-    class="list-item {classes}"
-    on:click|preventDefault={() => {
-        dispatch("click", { id, title, image });
-    }}
->
+<div class="list-item {classes}" on:click|preventDefault={onClick}>
     {#if image}
         <div
             class="list-item-image"
             on:click|preventDefault={() => {
-                dispatch("clickImage", { id, title, image });
+                onClick();
+                dispatch("clickImage", value);
             }}
         >
-            <figure class="image is-64x64">
-                <img class="is-rounded" src={image} alt={title} />
-            </figure>
+            {#if imageComponent}
+                <svelte:component
+                    this={imageComponent}
+                    value={image}
+                    {...imageComponentProps}
+                />
+            {:else}
+                <figure class="image is-64x64">
+                    <img class="is-rounded" src={image} alt={title} />
+                </figure>
+            {/if}
         </div>
     {/if}
     <div
         class="list-item-content"
         on:click|preventDefault={() => {
-            dispatch("clickContent", { id, title, image });
+            onClick();
+            dispatch("clickContent", value);
         }}
     >
         {#if title}
             <div
                 class="list-item-title"
                 on:click|preventDefault={() => {
-                    dispatch("clickTitle", { id, title, image });
+                    onClick();
+                    dispatch("clickTitle", value);
                 }}
             >
-                {title}
+                {#if titleComponent}
+                    <svelte:component
+                        this={titleComponent}
+                        {title}
+                        {...titleComponentProps}
+                    />
+                {:else}
+                    {description}
+                {/if}
             </div>
         {/if}
         {#if description}
             <div
                 class="list-item-description"
                 on:click|preventDefault={() => {
-                    dispatch("clickDescription", { id, title, image });
+                    onClick();
+                    dispatch("clickDescription", value);
                 }}
             >
-                {description}
+                {#if descriptionComponent}
+                    <svelte:component
+                        this={descriptionComponent}
+                        value={description}
+                        {...descriptionComponentProps}
+                    />
+                {:else}
+                    {description}
+                {/if}
             </div>
         {/if}
     </div>

package/src/elements/list/ui.list.svelte

@@ -1,6 +1,8 @@
 <script>
     import UIListEmptyPlaceholder from "./ui.list.empty.placeholder.svelte";
     import UIListItem from "./ui.list.item.svelte";
+    import UIListBlock from "./ui.list.block.svelte";
+    import UITitle from "../various/ui.title.svelte";
 
     export let classes = "";
     export let items = [];
@@ -12,9 +14,21 @@
 
     export let itemClasses = "";
     export let itemLength;
-
+    export let idFieldName = "id";
+    //customization
+    //empty
     export let emptyListPlaceholderComponent = UIListEmptyPlaceholder;
     export let emptyListPlaceholderComponentProps = {};
+    //item
+    export let listItemComponent = UIListItem;
+    export let listItemComponentProps = {};
+    //item parts
+    export let titleComponent = UITitle;
+    export let titleComponentProps = { size: 6 };
+    export let descriptionComponent;
+    export let descriptionComponentProps = {};
+    export let imageComponent;
+    export let imageComponentProps = {};
 </script>
 
 {#if items.length}
@@ -28,17 +42,24 @@
             ? 'has-overflow-ellipsis'
             : ''} {hiddenImages ? 'has-hidden-images' : ''}"
     >
-        {#each items as item (item.id)}
-            <UIListItem
-                {...item}
-                classes={itemClasses}
-                on:click
-                on:clickContent
-                on:clickDescription
-                on:clickImage
-                on:clickTitle
-            />
-        {/each}
+        <UIListBlock
+            bind:items
+            {itemClasses}
+            {listItemComponent}
+            {listItemComponentProps}
+            {idFieldName}
+            {titleComponent}
+            {titleComponentProps}
+            {descriptionComponent}
+            {descriptionComponentProps}
+            {imageComponent}
+            {imageComponentProps}
+            on:click
+            on:clickContent
+            on:clickDescription
+            on:clickImage
+            on:clickTitle
+        />
     </div>
 {:else}
     <svelte:component

package/src/elements/various/index.js

@@ -1,11 +1,23 @@
-import UIBooleans from './ui.booleans.svelte';
-import UIIndicator from './ui.indicator.svelte';
-import UILoader from './ui.loader.svelte';
-import UIProgress from './ui.progress.svelte';
-import UITag from './ui.tag.svelte';
-import UITitle from './ui.title.svelte';
-import UIErrorsList from './ui.errors.list.svelte';
-import UIUserCard from './ui.user.card.svelte';
-import UISimpleSearchInput from './ui.simple.search.input.svelte';
+import UIBooleans from "./ui.booleans.svelte";
+import UIIndicator from "./ui.indicator.svelte";
+import UILoader from "./ui.loader.svelte";
+import UIProgress from "./ui.progress.svelte";
+import UITag from "./ui.tag.svelte";
+import UITagValue from "./ui.tag.value.svelte";
+import UITitle from "./ui.title.svelte";
+import UIErrorsList from "./ui.errors.list.svelte";
+import UIUserCard from "./ui.user.card.svelte";
+import UISimpleSearchInput from "./ui.simple.search.input.svelte";
 
-export { UIErrorsList, UIBooleans, UIIndicator, UILoader, UIProgress, UITag, UIUserCard, UITitle,UISimpleSearchInput };
+export {
+    UIErrorsList,
+    UIBooleans,
+    UIIndicator,
+    UILoader,
+    UIProgress,
+    UITag,
+    UITagValue,
+    UIUserCard,
+    UITitle,
+    UISimpleSearchInput,
+};

package/src/elements/various/ui.tag.value.svelte

@@ -0,0 +1,17 @@
+<script>
+    import UITag from "./ui.tag.svelte";
+
+    //if we want to address this tag
+    export let id = "taggedValueId";
+    export let title; //UITag props
+    export let value; //UITag props
+</script>
+
+<div class="tags has-addons" {id}>
+    {#if title}
+        <UITag {...title} />
+    {/if}
+    {#if value}
+        <UITag {...value} />
+    {/if}
+</div>

package/src/frame/components/navigation/side/index.js

@@ -186,7 +186,7 @@ class notSideMenu extends Menu {
     static show(e) {
         e && e.preventDefault();
         if (this.isTouch()) {
-            this.classList.add("is-active");
+            this.aside.classList.add("is-active");
         } else {
             this.aside.classList.remove("is-closed");
         }

package/src/frame/crud/controller.crud.js

@@ -1,248 +1,279 @@
-import UICommon from '../../elements/common';
+import UICommon from "../../elements/common";
 
-import notBreadcrumbs from '../components/breadcrumbs';
+import notBreadcrumbs from "../components/breadcrumbs";
 
-import {notForm, notTable, notFormUtils} from '../components';
+import { notForm, notTable, notFormUtils } from "../components";
 
-import notController from '../controller';
-import notCommon from '../common';
+import notController from "../controller";
+import notCommon from "../common";
 
-import CRUDVariantsPreloader from './variants.preloader.js';
-import CRUDRouter from './router.js';
-import CRUDMessage from './message.js';
-import CRUDActions from './actions';
+import CRUDVariantsPreloader from "./variants.preloader.js";
+import CRUDRouter from "./router.js";
+import CRUDMessage from "./message.js";
+import CRUDActions from "./actions";
 
 const BREADCRUMBS = [];
-const TITLE_FIELDS_PRIORITY = ['title', 'label', 'id', 'name'];
+const TITLE_FIELDS_PRIORITY = ["title", "label", "id", "name"];
 
 class notCRUD extends notController {
+    #actions = { ...CRUDActions };
+    #router = CRUDRouter;
+    #preloader = CRUDVariantsPreloader;
+
+    TITLE_FIELDS_PRIORITY = TITLE_FIELDS_PRIORITY;
+    static ERROR_DEFAULT = UICommon.ERROR_DEFAULT;
+
+    TOP_CLASS = ["box"];
+    MAIN_CLASS = ["box"];
+    BOTTOM_CLASS = ["box"];
+
+    constructor(app, name, { actions, router, preloader } = {}) {
+        super(app, `CRUD.${name}`);
+        if (actions) {
+            this.#actions = { ...this.#actions, ...actions };
+        }
+        if (router) {
+            this.#router = router;
+        }
+        if (preloader) {
+            this.#preloader = preloader;
+        }
+        this.ui = {};
+        this.els = {};
+        this.setOptions("names", {
+            module: "",
+            plural: "plural",
+            single: "single",
+        });
+        this.setOptions(
+            "containerSelector",
+            this.app.getOptions("crud.containerSelector")
+        );
+        this.buildFrame();
+        return this;
+    }
+
+    start() {
+        let newHead = [];
+        if (this.getModuleName() && this.getOptions("names.module")) {
+            newHead.push({
+                title: this.getOptions("names.module"),
+                url: false,
+            });
+        }
+        newHead.push({
+            title: this.getOptions("names.plural"),
+            url: this.getModelURL(),
+        });
+        BREADCRUMBS.splice(0, BREADCRUMBS.length, ...newHead);
+        notBreadcrumbs.setHead(BREADCRUMBS).render({
+            root: "",
+            target: this.els.top,
+            navigate: (url) => this.app.getWorking("router").navigate(url),
+        });
+        this.route(this.getOptions("params"));
+    }
+
+    setBreadcrumbs(tail) {
+        notBreadcrumbs.setTail(tail).update();
+    }
+
+    backToList() {
+        this.app.getWorking("router").navigate(this.linkBackToList());
+    }
 
-  #actions = {...CRUDActions};
-  #router = CRUDRouter;
-  #preloader = CRUDVariantsPreloader;
-
-  TITLE_FIELDS_PRIORITY = TITLE_FIELDS_PRIORITY;
-  static ERROR_DEFAULT = UICommon.ERROR_DEFAULT;
-
-  constructor(app, name, { actions, router, preloader} = {}) {
-    super(app, `CRUD.${name}`);
-    if(actions){
-      this.#actions = {...this.#actions, ...actions};
-    }
-    if(router){
-      this.#router = router;
-    }
-    if(preloader){
-      this.#preloader = preloader;
-    }
-    this.ui = {};
-    this.els = {};
-    this.setOptions('names', {
-      module: '',
-      plural: 'plural',
-      single: 'single',
-    });
-    this.setOptions('containerSelector', this.app.getOptions('crud.containerSelector'));
-    this.buildFrame();
-    return this;
-  }
-
-  start(){
-    let newHead = [];
-    if(this.getModuleName() && this.getOptions('names.module')){
-      newHead.push({
-        title: this.getOptions('names.module'),
-        url: false
-      });
-    }
-    newHead.push({
-      title: this.getOptions('names.plural'),
-      url: this.getModelURL()
-    });
-    BREADCRUMBS.splice(0, BREADCRUMBS.length, ...newHead);
-    notBreadcrumbs.setHead(BREADCRUMBS).render({
-      root: '',
-      target: this.els.top,
-      navigate: (url) => this.app.getWorking('router').navigate(url)
-    });
-    this.route(this.getOptions('params'));
-  }
-
-  setBreadcrumbs(tail) {
-    notBreadcrumbs.setTail(tail).update();
-  }
-
-  backToList() {
-    this.app.getWorking('router').navigate(this.linkBackToList());
-  }
-
-  linkBackToList() {
-    return this.getModelURL();
-  }
-
-  afterAction(action = 'list'){
-    let navBack = this.app.getOptions('crud.navigateBackAfter', []);
-    if(navBack && Array.isArray(navBack) && navBack.indexOf(action) > -1){
-      window.history.back();
-    }else{
-      this.backToList();
-    }
-  }
-
-  buildFrame() {
-    let el = document.querySelector(this.app.getOptions('crud.containerSelector', 'body'));
-    while (el.firstChild) {
-      el.removeChild(el.firstChild);
-    }
-    this.els.top = document.createElement('div');
-    this.els.top.id = 'crud-top';
-    this.els.top.classList.add('box');
-    el.appendChild(this.els.top);
-    this.els.main = document.createElement('div');
-    this.els.main.id = 'crud-main';
-    this.els.main.classList.add('box');
-    el.appendChild(this.els.main);
-    this.els.bottom = document.createElement('div');
-    this.els.bottom.id = 'crud-bottom';
-    this.els.bottom.classList.add('box');
-    el.appendChild(this.els.bottom);
-  }
-
-  getContainerTopElement(){
-    return this.els.top;
-  }
-
-  getContainerInnerElement(){
-    return this.els.main;
-  }
-
-  getContainerBottomElement(){
-    return this.els.bottom;
-  }
-
-  async preloadVariants(type = 'list'){
-    await this.#preloader.preload(this, type);
-  }
-
-  getTitleFromLib(propName, id){
-    throw new Error('not suported anymore');
-    //return Form.getVariant(propName, id).title;
-  }
-
-  getItemTitle(item){
-    const fieldName = this.TITLE_FIELDS_PRIORITY.find(
-      (key) => notCommon.objHas(item, key)
-    );
-    if(fieldName){
-      return item[fieldName];
-    }else{
-      return '';
-    }
-  }
-
-  createDefault() {
-    let newRecord = this.getModel({
-      '_id': null,
-      title: this.getOptions('names.single'),
-      products: []
-    });
-    return newRecord;
-  }
-
-  route(params = []) {
-    try{
-      return this.#router.route(this, params);
-    }catch(e){
-      this.report(e);
-      this.showErrorMessage(e);
-    }
-  }
-
-  runAction(actionName, params){
-    if(Object.keys(this.#actions).includes(actionName)){
-      return this.#actions[actionName].run(this, params)
-    }else if(typeof this['run'+ notCommon.capitalizeFirstLetter(actionName)]){
-      throw new Error(`No such action: ${actionName} in contoller ${this.getWorking('name')}`);
-    }
-  }
-
-  goCreate() {
-    this.$destroyUI();
-    this.app.getWorking('router').navigate(this.getModelActionURL(false, 'create'));
-  }
-
-  goDetails(value) {
-    this.$destroyUI();
-    this.app.getWorking('router').navigate(this.getModelActionURL(value, false));
-  }
-
-  goUpdate(value) {
-    this.$destroyUI();
-    this.app.getWorking('router').navigate(this.getModelActionURL(value, 'update'));
-  }
-
-  goDelete(value) {
-    this.$destroyUI();
-    this.app.getWorking('router').navigate(this.getModelActionURL(value, 'delete'));
-  }
-
-  goList() {
-    this.$destroyUI();
-    this.app.getWorking('router').navigate(this.getModelURL());
-  }
-
-  async onActionSubmit(action, item){
-    let state = true;
-    const actionUI = this.ui[action];
-    if(actionUI){
-      try{
-        actionUI.setLoading();
-        let result = await this.getModel(item)[`$${action}`]();
-        state = actionUI.processResult(result);
-      }catch(e){
-        state = actionUI.processResult(e);
-      }finally{
-        actionUI.resetLoading();
-        return state;
-      }
-    }
-    throw new Error('Action UI doesnt exist');
-  }
-
-  $destroyUI() {
-    for (let name in this.ui) {
-      this.ui[name].$destroy && this.ui[name].$destroy();
-      this.ui[name].destroy && this.ui[name].destroy();
-      delete this.ui[name];
-    }
-  }
-
-  showErrorMessage(res){
-    this.error(res);
-    CRUDMessage.error(
-      this,
-      'Произошла ошибка',
-      res.message ? res.message : UICommon.ERROR_DEFAULT
-    );
-  }
-
-  showSuccessMessage(title, message){
-    CRUDMessage.success(
-      this,
-      title,
-      message
-    );
-  }
-
-  setUI(name, val){
-    this.$destroyUI();
-    this.ui[name] = val;
-  }
-
-  getActionUI(){
-    return this.ui[this.getCurrentAction()];
-  }
+    linkBackToList() {
+        return this.getModelURL();
+    }
+
+    afterAction(action = "list") {
+        let navBack = this.app.getOptions("crud.navigateBackAfter", []);
+        if (navBack && Array.isArray(navBack) && navBack.indexOf(action) > -1) {
+            window.history.back();
+        } else {
+            this.backToList();
+        }
+    }
+
+    buildFrame() {
+        let el = document.querySelector(
+            this.app.getOptions("crud.containerSelector", "body")
+        );
+        while (el.firstChild) {
+            el.removeChild(el.firstChild);
+        }
+        this.els.top = document.createElement("div");
+        this.els.top.id = "crud-top";
+        this.getFrameClasses().TOP_CLASS.forEach((name) =>
+            this.els.top.classList.add(name)
+        );
+        el.appendChild(this.els.top);
+        this.els.main = document.createElement("div");
+        this.els.main.id = "crud-main";
+        this.getFrameClasses().MAIN_CLASS.forEach((name) =>
+            this.els.main.classList.add(name)
+        );
+        el.appendChild(this.els.main);
+        this.els.bottom = document.createElement("div");
+        this.els.bottom.id = "crud-bottom";
+        this.getFrameClasses().BOTTOM_CLASS.forEach((name) =>
+            this.els.bottom.classList.add(name)
+        );
+        el.appendChild(this.els.bottom);
+    }
+
+    getFrameClasses() {
+        return {
+            TOP_CLASS: this.TOP_CLASS,
+            MAIN_CLASS: this.MAIN_CLASS,
+            BOTTOM_CLASS: this.BOTTOM_CLASS,
+        };
+    }
 
+    getContainerTopElement() {
+        return this.els.top;
+    }
+
+    getContainerInnerElement() {
+        return this.els.main;
+    }
+
+    getContainerBottomElement() {
+        return this.els.bottom;
+    }
+
+    async preloadVariants(type = "list") {
+        await this.#preloader.preload(this, type);
+    }
+
+    getTitleFromLib(propName, id) {
+        throw new Error("not suported anymore");
+        //return Form.getVariant(propName, id).title;
+    }
+
+    getItemTitle(item) {
+        const fieldName = this.TITLE_FIELDS_PRIORITY.find((key) =>
+            notCommon.objHas(item, key)
+        );
+        if (fieldName) {
+            return item[fieldName];
+        } else {
+            return "";
+        }
+    }
+
+    createDefault() {
+        let newRecord = this.getModel({
+            _id: null,
+            title: this.getOptions("names.single"),
+            products: [],
+        });
+        return newRecord;
+    }
+
+    route(params = []) {
+        try {
+            return this.#router.route(this, params);
+        } catch (e) {
+            this.report(e);
+            this.showErrorMessage(e);
+        }
+    }
+
+    runAction(actionName, params) {
+        if (Object.keys(this.#actions).includes(actionName)) {
+            return this.#actions[actionName].run(this, params);
+        } else if (
+            typeof this["run" + notCommon.capitalizeFirstLetter(actionName)]
+        ) {
+            throw new Error(
+                `No such action: ${actionName} in contoller ${this.getWorking(
+                    "name"
+                )}`
+            );
+        }
+    }
+
+    goCreate() {
+        this.$destroyUI();
+        this.app
+            .getWorking("router")
+            .navigate(this.getModelActionURL(false, "create"));
+    }
+
+    goDetails(value) {
+        this.$destroyUI();
+        this.app
+            .getWorking("router")
+            .navigate(this.getModelActionURL(value, false));
+    }
+
+    goUpdate(value) {
+        this.$destroyUI();
+        this.app
+            .getWorking("router")
+            .navigate(this.getModelActionURL(value, "update"));
+    }
+
+    goDelete(value) {
+        this.$destroyUI();
+        this.app
+            .getWorking("router")
+            .navigate(this.getModelActionURL(value, "delete"));
+    }
+
+    goList() {
+        this.$destroyUI();
+        this.app.getWorking("router").navigate(this.getModelURL());
+    }
+
+    async onActionSubmit(action, item) {
+        let state = true;
+        const actionUI = this.ui[action];
+        if (actionUI) {
+            try {
+                actionUI.setLoading();
+                let result = await this.getModel(item)[`$${action}`]();
+                state = actionUI.processResult(result);
+            } catch (e) {
+                state = actionUI.processResult(e);
+            } finally {
+                actionUI.resetLoading();
+                return state;
+            }
+        }
+        throw new Error("Action UI doesnt exist");
+    }
+
+    $destroyUI() {
+        for (let name in this.ui) {
+            this.ui[name].$destroy && this.ui[name].$destroy();
+            this.ui[name].destroy && this.ui[name].destroy();
+            delete this.ui[name];
+        }
+    }
+
+    showErrorMessage(res) {
+        this.error(res);
+        CRUDMessage.error(
+            this,
+            "Произошла ошибка",
+            res.message ? res.message : UICommon.ERROR_DEFAULT
+        );
+    }
+
+    showSuccessMessage(title, message) {
+        CRUDMessage.success(this, title, message);
+    }
+
+    setUI(name, val) {
+        this.$destroyUI();
+        this.ui[name] = val;
+    }
+
+    getActionUI() {
+        return this.ui[this.getCurrentAction()];
+    }
 }
 
 export default notCRUD;