Merge pull request #372 from RabotaRu/v3.2.0

v3.2.0

package.json

@@ -31,7 +31,7 @@
     "@asyncapi/web-component": "0.24.23",
     "@mdi/font": "5.9.55",
     "@mermaid-js/mermaid-mindmap": "9.3.0",
-    "ajv": "8.11.0",
+    "ajv": "8.12.0",
     "ajv-i18n": "4.2.0",
     "axios": "0.21.4",
     "core-js": "3.26.1",
@@ -53,12 +53,9 @@
     "yaml": "1.10.2"
   },
   "devDependencies": {
-    "jasmine-unit-test-generator": "^1.3.1",
-    "jest-test-gen": "^1.4.3",
     "@babel/eslint-parser": "7.19.1",
     "@babel/preset-env": "7.20.2",
     "@babel/preset-typescript": "7.18.6",
-    "babel-plugin-transform-import-meta": "2.2.0",
     "@effortlessmotion/html-webpack-inline-source-plugin": "1.0.3",
     "@types/jest": "29.4.1",
     "@typescript-eslint/eslint-plugin": "5.46.1",
@@ -68,6 +65,7 @@
     "@vue/cli-service": "5.0.8",
     "babel-eslint": "10.1.0",
     "babel-loader": "8.3.0",
+    "babel-plugin-transform-import-meta": "2.2.0",
     "compression": "1.7.4",
     "cors": "2.8.5",
     "css-loader": "3.6.0",
@@ -78,8 +76,10 @@
     "fake-indexeddb": "4.0.1",
     "generator-code": "1.7.1",
     "html-webpack-plugin": "5.5.0",
+    "jasmine-unit-test-generator": "1.3.1",
     "jest": "29.4.1",
     "jest-environment-jsdom": "29.4.1",
+    "jest-test-gen": "1.4.3",
     "md5": "2.3.0",
     "nodemon": "2.0.20",
     "postcss-loader": "2.1.6",
@@ -91,9 +91,10 @@
     "vue-loader": "13.7.3",
     "vue-monaco": "0.3.2",
     "vue-style-loader": "3.1.2",
+    "vue-svg-loader": "0.16.0",
     "vue-template-compiler": "2.7.14",
-    "webpack-pwa-manifest": "4.3.0",
     "webpack-bundle-analyzer": "4.8.0",
+    "webpack-pwa-manifest": "4.3.0",
     "yo": "4.3.0"
   },
   "overrides": {

plugins.json

@@ -1,5 +1,6 @@
 {
     "inbuilt": [
-        "plugins/html"
+        "plugins/html",
+        "plugins/markaper"
     ]
 }

plugins/markaper/components/elements/Content.vue

@@ -0,0 +1,36 @@
+<template>
+  <dochub-object v-if="isObject" v-bind:src="src" />
+  <iframe v-else class="iframe" v-bind:src="src" />
+</template>
+
+<script>
+  export default {
+    name: 'MKRContent',
+    props: {
+      // Требуем обязательно передавать ссылку на объект
+      src: {
+        type: String,
+        required: true
+      }
+    },
+    data() {
+      return {
+      };
+    },
+    computed: {
+      isObject() {
+        return (this.src).slice(0, 1) === '@';
+      }
+    }
+  };
+</script>
+
+<style scoped>
+  .iframe {
+    width: 100%;
+    height: 100%;
+    border: none;    
+    min-height: 480px;
+  }
+  
+</style>

plugins/markaper/components/grid/Columns.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="mkr-grid-row">
+    <dhsection 
+      v-for="(item, index) in items"
+      v-bind:key="index"
+      v-bind:style="makeStyle(item)"
+      class="mkr-grid-col"
+      v-bind:section="item" />
+  </div>
+</template>
+
+<script>
+
+  export default {
+    name: 'MKRColumn',
+    components: {
+      dhsection: () => import('./Section.vue')
+    },
+    props: {
+      // Требуем обязательно передавать структуру секции
+      items: {
+        type: Array,
+        required: true
+      }
+    },
+    data() {
+      return {
+      };
+    },
+    computed: {
+    },
+    methods: {
+      makeStyle(item) {
+        const result = {};
+        item.width && (result['max-width'] = item.width);
+        return result;
+      }
+    }
+
+  };
+</script>
+
+<style scoped>
+  .mkr-grid-row {
+    display: flex;
+  }
+
+  .mkr-grid-col {
+    flex: 1;
+  }
+
+</style>

plugins/markaper/components/grid/Grid.vue

@@ -0,0 +1,107 @@
+<template>
+  <div>
+    <v-alert v-if="error" type="error" v-bind:value="true" style="white-space: pre-wrap;">
+      {{ error }}
+    </v-alert>    
+    <dhsection v-if="!error && model" v-bind:section="model" />
+  </div>
+</template>
+
+<script>
+
+  import DHSection from './Section.vue';
+  import schema from '../../schema/grid';
+  import ajv from 'ajv';
+  const ajv_localize = require('ajv-i18n/localize/ru');
+
+  export default {
+    name: 'MKRGrid',
+    components: {
+      dhsection: DHSection
+    },
+    props: {
+      // Требуем обязательно передавать профайл документа 
+      profile: {
+        type: Object,
+        required: true
+      },
+      // Требуем обязательно передавать функцию получения контента
+      getContent: {
+        type: Function,
+        required: true
+      },
+      // Требуем обязательно передавать функцию доступа к Data Lake
+      pullData: {
+        type: Function,
+        required: true
+      },
+      // Требуем обязательно сообщать путь к объекту описывающему документ в коде
+      path: {
+        type: String,
+        required: true
+      },
+      // Запрашиваем параметры рендеринга
+      params: {
+        type: Object,
+        default: null
+      },
+      // Признак рендеринга для печати
+      toPrint: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data() {
+      return {
+        // Обработчик события обновления
+        refresher: null,
+        // Модель документа
+        model: {},
+        // Информация об ошибке
+        error: null
+      };
+    },
+    watch: {
+      profile() {
+        // При изменении переметров, генерируем событие обновления
+        this.onRefresh();
+      }
+    },
+    mounted() {
+      // При монтировании компонента в DOM, генерируем событие обновления
+      this.onRefresh();
+    },
+    methods: {
+      // Обновляем данные модели разметки
+      doRefresh() {
+        this.pullData().then((result) =>{
+          try {
+            // Валидируем данные по структуре
+            const rules = new ajv({ allErrors: true });
+            const validator = rules.compile(schema);
+            if (!validator(result)) {
+              ajv_localize(validator.errors);
+              this.error = JSON.stringify(validator.errors, null, 4);
+              return;
+            } 
+            // Если все в порядке, обновляем модель
+            this.model = result;
+            this.error = null;
+          } catch (e) {
+            this.error = e;
+          }
+        }).catch((e) => this.error = e);
+      },
+      // Обработчик события обновления
+      onRefresh() {
+        // Если обработчик уже запущен, останавливаем его
+        if (this.refresher) clearTimeout(this.refresher);
+        // Для исключения избыточных обращений к Data Lake откладывам обноление на 50мс
+        this.refresher = setTimeout(this.doRefresh, 50);
+      }
+    }
+  };
+</script>
+
+<style scoped>
+</style>

plugins/markaper/components/grid/Rows.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <dhsection 
+      v-for="(item, index) in items"
+      v-bind:key="index"
+      v-bind:section="item" />
+  </div>
+</template>
+
+<script>
+
+  export default {
+    name: 'MKRRow',
+    components: {
+      dhsection: () => import('./Section.vue')
+    },
+    props: {
+      // Требуем обязательно передавать структуру секции
+      items: {
+        type: Array,
+        required: true
+      }
+    },
+    data() {
+      return {
+      };
+    }
+  };
+</script>
+
+<style scoped>
+</style>

plugins/markaper/components/grid/Section.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="mkr-grid-section" v-bind:style="style.section">
+    <v-card-title v-if="section.title || section.icon">
+      <v-icon v-if="section.icon" left>{{ section.icon }}</v-icon>
+      <span v-if="section.title" class="title"> {{ section.title }}</span>
+    </v-card-title>    
+    <mkrcontent v-if="isContent" v-bind:src="src" v-bind:style="style.content" />
+    <template v-else>
+      <mkrcolumns
+        v-if="(section.type || '').toLowerCase()==='columns'"
+        v-bind:items="items" />
+      <mkrrows
+        v-if="(section.type || '').toLowerCase()==='rows'"
+        v-bind:items="items" />
+    </template>
+  </div>
+</template>
+
+<script>
+
+  import MKRColumns from './Columns.vue';
+  import MKRContent from '../elements/Content.vue';
+  import MKRRows from './Rows.vue';
+  import { appendParams } from '../../helpers/src';
+
+  const contentStyles = ['padding'];
+  
+  export default {
+    name: 'MKRSection',
+    components: {
+      mkrcolumns: MKRColumns,
+      mkrrows: MKRRows,
+      mkrcontent: MKRContent
+    },
+    props: {
+      // Требуем обязательно передавать структуру секции
+      section: {
+        type: Object,
+        required: true
+      }
+    },
+    data() {
+      return {
+      };
+    },
+    computed: {
+      style() {
+        const content = {};
+        const section = {};
+        const style = this.section.style ?? {};
+
+        for (const id in style) {
+          if (contentStyles.indexOf(id) >=0 ) content[id] = style[id];
+          else section[id] = style[id];
+        }
+
+        if (section.border) {
+          section['box-shadow'] = '0 3px 1px -2px #0003, 0 2px 2px 0 #00000024, 0 1px 5px 0 #0000001f';
+        }
+
+        if (section['max-height'] && section['max-width']) section.overflow = 'auto';
+        else if (section['max-height']) section['overflow-y'] = 'auto';
+        else if (section['max-width']) section['overflow-x'] = 'auto';
+
+        return {
+          content,
+          section
+        };
+      },
+      isObject() {
+        return (this.section?.src || '').slice(0, 1) === '@';
+      },
+      src() {
+        return appendParams(this.section.src, this.section.params);
+      },
+      isContent() {
+        return !!this.section?.src;
+      },
+      items() {
+        return this.section?.items || [];
+      }
+    }
+  };
+</script>
+
+<style scoped>
+
+  .mkr-grid-section > .dochub-object {
+    margin: 0 !important;
+    position: relative;
+  }
+
+</style>