vue-mermaid - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

dist/vue-mermaid.js

@@ -1,1 +0,1 @@
-define(["mermaid"],function(n){"use strict";function e(n,e,t){return e in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t,n}function t(n){return i(n)||r(n)||o()}function i(n){if(Array.isArray(n)){for(var e=0,t=new Array(n.length);e<n.length;e++)t[e]=n[e];return t}}function r(n){if(Symbol.iterator in Object(n)||"[object Arguments]"===Object.prototype.toString.call(n))return Array.from(n)}function o(){throw new TypeError("Invalid attempt to spread non-iterable instance")}function a(){const n=document.head||document.getElementsByTagName("head")[0],e=a.styles||(a.styles={}),t="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());return function(i,r){if(!document.querySelector('style[data-vue-ssr-id~="'+i+'"]')){const o=t?r.media||"default":i,a=e[o]||(e[o]={ids:[],parts:[],element:void 0});if(!a.ids.includes(i)){let e=r.source,d=a.ids.length;if(a.ids.push(i),t&&(a.element=a.element||document.querySelector("style[data-group="+o+"]")),!a.element){const e=a.element=document.createElement("style");e.type="text/css",r.media&&e.setAttribute("media",r.media),t&&(e.setAttribute("data-group",o),e.setAttribute("data-next-index","0")),n.appendChild(e)}if(t&&(d=parseInt(a.element.getAttribute("data-next-index")),a.element.setAttribute("data-next-index",d+1)),a.element.styleSheet)a.parts.push(e),a.element.styleSheet.cssText=a.parts.filter(Boolean).join("\n");else{const n=document.createTextNode(e),t=a.element.childNodes;t[d]&&a.element.removeChild(t[d]),t.length?a.element.insertBefore(n,t[d]):a.element.appendChild(n)}}}}}function d(n){n.component("vue-mermaid",l)}n=n&&n.hasOwnProperty("default")?n.default:n;const c={name:"VueMermaid",props:{type:{type:String,default:"graph TD"},nodes:{type:Array,required:!0},styles:{type:Array,default:function(){return[]}},config:{type:Object,default:function(){return{theme:"default",startOnLoad:!1}}}},mounted:function(){this.init(),this.loadNodes()},computed:{parseCode:function(){var n=this.nodes,i=this.styles;if(Array.isArray(n)&&n.length>0){var r=function(n,i){return Object.assign.apply(Object,[{}].concat(t(n.map(function(n){return e({},n[i],n)}))))}(n,"id"),o=this.type+"\n",a=o+n.map(function(n){return n.next&&n.next.length>0?n.next.map(function(e){var t=r[e]||r[e.id];if(null!=t&&void 0!==t){var i=e.link?"|"+e.link+"|":"";return"".concat(n.id,"(").concat(n.text,")--\x3e").concat(i).concat(t.id,"(").concat(t.text,")")}return"".concat(n.id,"(").concat(n.text,")")}).join("\n"):"".concat(n.id,"(").concat(n.text,")")}).join("\n")+"\n"+i.join(" \n")+"\n"+n.filter(function(n){return n.editable}).map(function(n){return"click ".concat(n.id,' mermaidClick "edit"')}).join("\n");return this.load(a),a}return""}},methods:{loadNodes:function(){this.load(this.parseCode)},init:function(){var e=this;window.mermaidClick=function(n){e.edit(n)},n.initialize(this.config)},load:function(e){if(e){var t=document.getElementById("mermaid");t.removeAttribute("data-processed"),t.replaceChild(document.createTextNode(e),t.firstChild),n.init(e,t)}},edit:function(n){this.$emit("nodeClick",n)}}};var s=function(){var n=this,e=n.$createElement;return(n._self._c||e)("div",{staticClass:"mermaid",attrs:{id:"mermaid"}},[n._v("\n  "+n._s(n.parseCode)+"\n")])},u=[];s._withStripped=!0;var l=function(n,e,t,i,r,o,a,d){const c=("function"==typeof t?t.options:t)||{};c.__file="/Users/liu/githome/vue-mermaid/src/vue-mermaid.vue",c.render||(c.render=n.render,c.staticRenderFns=n.staticRenderFns,c._compiled=!0,r&&(c.functional=!0)),c._scopeId=i;{let n;if(e&&(n=function(n){e.call(this,a(n))}),void 0!==n)if(c.functional){const e=c.render;c.render=function(t,i){return n.call(i),e(t,i)}}else{const e=c.beforeCreate;c.beforeCreate=e?[].concat(e,n):[n]}}return c}({render:s,staticRenderFns:u},function(n){n&&n("data-v-dea1fd00_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"vue-mermaid.vue"},media:void 0})},c,void 0,!1,void 0,a,void 0);return{install:d}});
+define(["mermaid"],function(n){"use strict";function e(n,e,t){return e in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t,n}function t(n){return i(n)||r(n)||o()}function i(n){if(Array.isArray(n)){for(var e=0,t=new Array(n.length);e<n.length;e++)t[e]=n[e];return t}}function r(n){if(Symbol.iterator in Object(n)||"[object Arguments]"===Object.prototype.toString.call(n))return Array.from(n)}function o(){throw new TypeError("Invalid attempt to spread non-iterable instance")}function a(){const n=document.head||document.getElementsByTagName("head")[0],e=a.styles||(a.styles={}),t="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());return function(i,r){if(!document.querySelector('style[data-vue-ssr-id~="'+i+'"]')){const o=t?r.media||"default":i,a=e[o]||(e[o]={ids:[],parts:[],element:void 0});if(!a.ids.includes(i)){let e=r.source,d=a.ids.length;if(a.ids.push(i),t&&(a.element=a.element||document.querySelector("style[data-group="+o+"]")),!a.element){const e=a.element=document.createElement("style");e.type="text/css",r.media&&e.setAttribute("media",r.media),t&&(e.setAttribute("data-group",o),e.setAttribute("data-next-index","0")),n.appendChild(e)}if(t&&(d=parseInt(a.element.getAttribute("data-next-index")),a.element.setAttribute("data-next-index",d+1)),a.element.styleSheet)a.parts.push(e),a.element.styleSheet.cssText=a.parts.filter(Boolean).join("\n");else{const n=document.createTextNode(e),t=a.element.childNodes;t[d]&&a.element.removeChild(t[d]),t.length?a.element.insertBefore(n,t[d]):a.element.appendChild(n)}}}}}function d(n){n.component("vue-mermaid",l)}n=n&&n.hasOwnProperty("default")?n.default:n;const c={name:"VueMermaid",props:{type:{type:String,default:"graph TD"},nodes:{type:Array,required:!0},styles:{type:Array,default:function(){return[]}},config:{type:Object,default:function(){return{theme:"default",startOnLoad:!1}}}},data:function(){return{edges:[{type:"default",open:"[",close:"]"},{type:"round",open:"(",close:")"},{type:"circle",open:"((",close:"))"},{type:"asymetric",open:">",close:"]"},{type:"rhombus",open:"{",close:"}"}]}},mounted:function(){this.init(),this.loadNodes()},computed:{nodeObject:function(){var n=this.nodes;if(Array.isArray(n)&&n.length>0){return function(n,i){return Object.assign.apply(Object,[{}].concat(t(n.map(function(n){return e({},n[i],n)}))))}(n,"id")}return{}},parseCode:function(){var n=this,e=this.nodes,t=this.styles;if(Array.isArray(e)&&e.length>0){var i=this.type+"\n",r=i+e.map(function(e){return e.next&&e.next.length>0?e.next.map(function(t){var i=n.nodeObject[t]||n.nodeObject[t.id];return null!=i&&void 0!==i?"".concat(n.buildNode(e)).concat(n.buildLink(e)).concat(n.buildNode(i)):"".concat(n.buildNode(e))}).join("\n"):"".concat(n.buildNode(e),"\n                    click ").concat(e.id," clickTest\n                    ")}).join("\n")+"\n"+t.join(" \n")+"\n"+e.filter(function(n){return n.editable}).map(function(n){return"click ".concat(n.id,' mermaidClick "edit"')}).join("\n");return this.load(r),r}return""}},methods:{buildNode:function(n){var e=n.edgeType?this.edges.find(function(e){return e.type===n.edgeType}):this.edges.find(function(n){return"default"===n.type});return"".concat(n.id).concat(e.open).concat(n.text).concat(e.close)},buildLink:function(n){return n.link?n.link:"--\x3e"},loadNodes:function(){this.load(this.parseCode)},init:function(){var e=this;window.mermaidClick=function(n){e.edit(n)},n.initialize(this.config)},load:function(e){if(e){var t=document.getElementById("mermaid");t.removeAttribute("data-processed"),t.replaceChild(document.createTextNode(e),t.firstChild),n.init(e,t)}},edit:function(n){this.$emit("nodeClick",n)}}};var s=function(){var n=this,e=n.$createElement;return(n._self._c||e)("div",{staticClass:"mermaid",attrs:{id:"mermaid"}},[n._v(n._s(n.parseCode))])},u=[];s._withStripped=!0;var l=function(n,e,t,i,r,o,a,d){const c=("function"==typeof t?t.options:t)||{};c.__file="/Users/liu/githome/vue-mermaid/src/vue-mermaid.vue",c.render||(c.render=n.render,c.staticRenderFns=n.staticRenderFns,c._compiled=!0,r&&(c.functional=!0)),c._scopeId=i;{let n;if(e&&(n=function(n){e.call(this,a(n))}),void 0!==n)if(c.functional){const e=c.render;c.render=function(t,i){return n.call(i),e(t,i)}}else{const e=c.beforeCreate;c.beforeCreate=e?[].concat(e,n):[n]}}return c}({render:s,staticRenderFns:u},function(n){n&&n("data-v-0e25ce70_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"vue-mermaid.vue"},media:void 0})},c,void 0,!1,void 0,a,void 0);return{install:d}});

package.json

 {
   "name": "vue-mermaid",
   "description": "flowchart of mermaid with vue componet",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "main": "dist/vue-mermaid.js",
   "author": "mark_tun <[e-mail]>",
+  "contributors": ["Filipe Pinheiro <[e-mail]>"],
   "license": "MIT",
@@ -8,0 +9,0 @@ "files": [

README.md

@@ -20,3 +20,3 @@ # vue-mermaid
 
-### register component
+### Register component
 
@@ -28,3 +28,3 @@ ```js
 
-### use component
+### Use component
 
@@ -36,6 +36,6 @@ ```js
       data:[
-        {id:'1',text:'A',next:['2']},
-        {id:'2',text:'B',next:['3']},
+        {id:'1',text:'A',link:'---',next:['2'],editable:true},
+        {id:'2',text:'B',edgeType:'circle',next:['3']},
         {id:'3',text:'C',next:['4','6']},
-        {id:'4',text:'D',next:['5']},
+        {id:'4',text:'D',link:'-- This is the text ---',next:['5']},
         {id:'5',text:'E'},
@@ -45,17 +45,25 @@ {id:'6',text:'F'}
     }
+  },
+  methods:{
+    editNode(nodeId) {
+     alert(nodeId);
+    },
   }
 }
 ```
+#### Possible edgeType values:
+![edge.default](./img/edge_types.png)
 
-### template
 
+### Template
+
 ```vue
 <template>
-  <vue-mermaid :nodes="data"></vue-mermaid>
+  <vue-mermaid :nodes="data" type="graph LR" @nodeClick="editNode"></vue-mermaid>
 </template>
 ```
 
-### result
+### Result
 
-![Flowchart](./img/flow.jpg)
+![Flowchart](./img/flow.png)
 
@@ -62,0 +70,0 @@ ## Build Setup

No alert changes

Improved metrics

Total package byte prevSize

12295

increased by25.57%

Number of package files

7

increased by16.67%

Lines of code

25

increased by8.7%

Number of lines in readme file

75

increased by11.94%

No dependency changes