mali-applet-ui 0.0.49 → 0.0.52

package/components/ml-approval-record/ml-approval-record.vue

@@ -4,7 +4,7 @@
       <view class="ml-approval-record-header-title">审批记录</view>
     </view>
     <view class="ml-approval-record-body">
-      <view class="ml-approval-record-list" v-for="(group, gIndex) in options" :key="gIndex">
+      <view class="ml-approval-record-list" v-for="(group, gIndex) in flowOptions" :key="gIndex">
         <view class="ml-approval-record-flow-line"></view>
         <view class="ml-approval-record-item">
           <view class="ml-approval-record-item-title">{{ group.name }}</view>
@@ -37,11 +37,46 @@
 </template>
 
 <script>
+import globalStore from '../../config/store'
+
 export default {
   name: 'MlApprovalRecord',
   props: {
     value: Array,
+    code: String,
     options: Array
+  },
+  data () {
+    return {
+      flowOptions: []
+    }
+  },
+  watch: {
+    code () {
+      this.load()
+    }
+  },
+  created () {
+    this.flowOptions = this.options || []
+    this.load()
+  },
+  methods: {
+    load () {
+      if (!this.code) {
+        return
+      }
+      if (globalStore.approval && globalStore.approval.record) {
+        const optionMethod = globalStore.approval.record.optionMethod
+        if (optionMethod) {
+          Promise.resolve(optionMethod({
+            value: this.value,
+            code: this.code
+          })).then(options => {
+            this.flowOptions = options
+          })
+        }
+      }
+    }
   }
 }
 </script>

package/components/ml-approval-select/ml-approval-select.vue

@@ -4,7 +4,8 @@
       <view class="ml-approval-select-header-title">审批流程</view>
     </view>
     <view class="ml-approval-select-body">
-      <view class="ml-approval-select-list" v-for="(group, gIndex) in options" :key="gIndex">
+      <view class="ml-approval-select-list" v-for="(group, gIndex) in flowOptions" :key="gIndex">
+        <view class="ml-approval-select-flow-line"></view>
         <view class="ml-approval-select-item">
           <view class="ml-approval-select-item-title">{{ group.name }}</view>
         </view>
@@ -12,9 +13,6 @@
           <view class="ml-approval-select-user-item" v-for="(item, uIndex) in group.users" :key="uIndex">
             <image class="ml-approval-select-user-picture" :src="item.picture" mode="scaleToFill"></image>
             <view class="ml-approval-select-user-name">{{ item.name }}</view>
-            <view class="ml-approval-select-user-remove">
-              <ml-icon name="close"></ml-icon>
-            </view>
           </view>
           <view class="ml-approval-select-user-add" @click="openAddUser">
             <view class="ml-approval-select-user-add-icon">
@@ -24,24 +22,49 @@
         </view>
       </view>
     </view>
-
-    <uni-popup ref="popup" type="bottom">
-      <text>Popup</text>
-      <button @click="close">关闭</button>
-    </uni-popup>
   </view>
 </template>
 
 <script>
+import globalStore from '../../config/store'
+
 export default {
   name: 'MlApprovalSelect',
   props: {
     value: Array,
+    code: String,
     options: Array
   },
+  data () {
+    return {
+      flowOptions: []
+    }
+  },
+  watch: {
+    code () {
+      this.load()
+    }
+  },
+  created () {
+    this.flowOptions = this.options || []
+    this.load()
+  },
   methods: {
-    openAddUser () {
-      this.$refs.popup.open()
+    load () {
+      if (!this.code) {
+        return
+      }
+      if (globalStore.approval && globalStore.approval.select) {
+        const optionMethod = globalStore.approval.select.optionMethod
+        if (optionMethod) {
+          Promise.resolve(optionMethod({
+            value: this.value,
+            code: this.code
+          })).then(options => {
+            this.flowOptions = options
+          })
+        }
+      }
     }
   }
 }
@@ -59,49 +82,77 @@ export default {
   line-height: 60rpx;
 }
 .ml-approval-select-list {
+  position: relative;
   padding-bottom: 10rpx;
+  .ml-approval-select-flow-line {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 4rpx;
+    background: #D9D9D9;
+    &::before {
+      content: "";
+      position: absolute;
+      top: 12rpx;
+      left: -10rpx;
+      width: 24rpx;
+      height: 24rpx;
+      border-radius: 50%;
+      background: #D9D9D9;
+    }
+  }
+  &:first-child {
+    .ml-approval-select-flow-line {
+      top: 12rpx;
+      &::before {
+        top: 0;
+      }
+    }
+  }
+  &:last-child {
+    .ml-approval-select-flow-line {
+      height: 30rpx;
+    }
+  }
 }
 .ml-approval-select-item-title {
-  padding-left: 20rpx;
+  padding-left: 40rpx;
   line-height: 50rpx;
 }
 .ml-approval-select-users {
   display: flex;
   flex-direction: row;
-  flex-wrap: wrap;
+  padding-left: 40rpx;
 }
 .ml-approval-select-user-item {
-  position: relative;
+  display: flex;
+  flex-direction: column;
   padding: 10rpx;
-  width: 150rpx;
   text-align: center;
+  width: 140rpx;
   .ml-approval-select-user-picture {
     width: 100rpx;
     height: 100rpx;
     border-radius: 50%;
+    margin: 0 auto;
   }
   .ml-approval-select-user-name {
+    display: inline-block;
+    vertical-align: middle;
+    max-width: 150rpx;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
+    margin-right: 10rpx;
     font-size: 24rpx;
-  }
-  .ml-approval-select-user-remove {
-    position: absolute;
-    top: 0;
-    right: 10rpx;
-    width: 40rpx;
-    height: 40rpx;
-    line-height: 40rpx;
-    border-radius: 50%;
-    text-align: center;
-    color: #ffffff;
-    background: rgba(0, 0, 0, 0.45);
+    color: rgba(0, 0, 0, 0.85);
   }
 }
 .ml-approval-select-user-add {
+  display: flex;
+  flex-direction: column;
   padding: 10rpx;
-  width: 160rpx;
   text-align: center;
   .ml-approval-select-user-add-icon {
     width: 100rpx;
@@ -114,4 +165,4 @@ export default {
     overflow: hidden;
   }
 }
-</style>
+</style>

package/components/ml-chunk-item/ml-chunk-item.vue

@@ -45,8 +45,9 @@ export default {
 .ml-chunk-item {
   display: flex;
   flex-direction: column;
-  padding: 20rpx 10rpx;
+  padding: 20rpx;
   line-height: 50rpx;
+  font-size: $uni-font-size-base;
   $spans: 4.16667%, 8.33333%, 12.5%, 16.66667%, 20.83333%, 25%, 29.16667%, 33.33333%,
           37.5%, 41.66667%, 45.83333%, 50%, 54.16667%, 58.33333%, 62.5%, 66.66667%,
           70.83333%, 75%, 79.16667%, 83.33333%, 87.5%, 91.66667%, 95.83333%, 100%;

package/components/ml-form/ml-form.vue

@@ -3,7 +3,17 @@
     <slot>
       <view v-for="(item, index) in items" :key="index">
         <ml-form-group v-if="item.children && item.children.length" :title="item.title">
-          <ml-form-item v-for="(cItem, cIndex) in item.children" :key="cIndex" :title="cItem.title" :field="cItem.field" :itemRender="cItem.itemRender" @modelvalue="updateModel"></ml-form-item>
+          <ml-form-item
+            v-for="(cItem, cIndex) in item.children"
+            :key="cIndex"
+            :title="cItem.title"
+            :field="cItem.field"
+            :vertical="cItem.vertical"
+            :align="cItem.align"
+            :titleAlign="cItem.titleAlign"
+            :itemRender="cItem.itemRender"
+            @modelvalue="updateModel">
+          </ml-form-item>
         </ml-form-group>
         <ml-form-item v-else :title="item.title" :field="item.field" :itemRender="item.itemRender" @modelvalue="updateModel"></ml-form-item>
       </view>

package/components/ml-form-item/ml-form-item.vue

@@ -183,5 +183,6 @@ export default {
 .ml-form-item-content-warpper {
   flex-grow: 1;
   width: 100%;
+  padding: 10rpx 0;
 }
 </style>

package/components/ml-list-group/ml-list-group.vue

@@ -4,6 +4,7 @@
       <scroll-view scroll-y>
         <slot></slot>
       </scroll-view>
+      <uni-load-more v-if="loadMore" v-show="!loading" :status="loadStatus"></uni-load-more>
     </view>
   </view>
 </template>
@@ -16,6 +17,7 @@ export default {
   },
   props: {
     title: String,
+    loadMore: Boolean,
     className: String
   }
 }

package/components/ml-list-item/ml-list-item.vue

@@ -59,7 +59,7 @@ export default {
   display: flex;
   flex-direction: row;
   padding: 20rpx;
-  margin: 10rpx 0;
+  margin: 20rpx 0;
   border-radius: 10rpx;
   background: #ffffff;
   .ml-list-item-content {

package/components/ml-month-picker/ml-month-picker.vue

@@ -55,6 +55,10 @@ export default {
 }
 .ml-month-picker-text {
   flex-grow: 1;
+  padding-right: 10rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .ml-month-picker-icon {
   color: #6a6a6a;

package/components/ml-rich-text/html-parser.js

@@ -0,0 +1,352 @@
+/*
+ * HTML5 Parser By Sam Blowes
+ *
+ * Designed for HTML5 documents
+ *
+ * Original code by John Resig (ejohn.org)
+ * http://ejohn.org/blog/pure-javascript-html-parser/
+ * Original code by Erik Arvidsson, Mozilla Public License
+ * http://erik.eae.net/simplehtmlparser/simplehtmlparser.js
+ *
+ * ----------------------------------------------------------------------------
+ * License
+ * ----------------------------------------------------------------------------
+ *
+ * This code is triple licensed using Apache Software License 2.0,
+ * Mozilla Public License or GNU Public License
+ *
+ * ////////////////////////////////////////////////////////////////////////////
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License.  You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * ////////////////////////////////////////////////////////////////////////////
+ *
+ * The contents of this file are subject to the Mozilla Public License
+ * Version 1.1 (the "License"); you may not use this file except in
+ * compliance with the License. You may obtain a copy of the License at
+ * http://www.mozilla.org/MPL/
+ *
+ * Software distributed under the License is distributed on an "AS IS"
+ * basis, WITHOUT WARRANTY OF ANY KIND, either express or implied. See the
+ * License for the specific language governing rights and limitations
+ * under the License.
+ *
+ * The Original Code is Simple HTML Parser.
+ *
+ * The Initial Developer of the Original Code is Erik Arvidsson.
+ * Portions created by Erik Arvidssson are Copyright (C) 2004. All Rights
+ * Reserved.
+ *
+ * ////////////////////////////////////////////////////////////////////////////
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * as published by the Free Software Foundation; either version 2
+ * of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ *
+ * ----------------------------------------------------------------------------
+ * Usage
+ * ----------------------------------------------------------------------------
+ *
+ * // Use like so:
+ * HTMLParser(htmlString, {
+ *     start: function(tag, attrs, unary) {},
+ *     end: function(tag) {},
+ *     chars: function(text) {},
+ *     comment: function(text) {}
+ * });
+ *
+ * // or to get an XML string:
+ * HTMLtoXML(htmlString);
+ *
+ * // or to get an XML DOM Document
+ * HTMLtoDOM(htmlString);
+ *
+ * // or to inject into an existing document/DOM node
+ * HTMLtoDOM(htmlString, document);
+ * HTMLtoDOM(htmlString, document.body);
+ *
+ */
+// Regular Expressions for parsing tags and attributes
+var startTag = /^<([-A-Za-z0-9_]+)((?:\s+[a-zA-Z_:][-a-zA-Z0-9_:.]*(?:\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|[^>\s]+))?)*)\s*(\/?)>/;
+var endTag = /^<\/([-A-Za-z0-9_]+)[^>]*>/;
+var attr = /([a-zA-Z_:][-a-zA-Z0-9_:.]*)(?:\s*=\s*(?:(?:"((?:\\.|[^"])*)")|(?:'((?:\\.|[^'])*)')|([^>\s]+)))?/g; // Empty Elements - HTML 5
+
+var empty = makeMap('area,base,basefont,br,col,frame,hr,img,input,link,meta,param,embed,command,keygen,source,track,wbr'); // Block Elements - HTML 5
+// fixed by xxx 将 ins 标签从块级名单中移除
+
+var block = makeMap('a,address,article,applet,aside,audio,blockquote,button,canvas,center,dd,del,dir,div,dl,dt,fieldset,figcaption,figure,footer,form,frameset,h1,h2,h3,h4,h5,h6,header,hgroup,hr,iframe,isindex,li,map,menu,noframes,noscript,object,ol,output,p,pre,section,script,table,tbody,td,tfoot,th,thead,tr,ul,video'); // Inline Elements - HTML 5
+
+var inline = makeMap('abbr,acronym,applet,b,basefont,bdo,big,br,button,cite,code,del,dfn,em,font,i,iframe,img,input,ins,kbd,label,map,object,q,s,samp,script,select,small,span,strike,strong,sub,sup,textarea,tt,u,var'); // Elements that you can, intentionally, leave open
+// (and which close themselves)
+
+var closeSelf = makeMap('colgroup,dd,dt,li,options,p,td,tfoot,th,thead,tr'); // Attributes that have their values filled in disabled="disabled"
+
+var fillAttrs = makeMap('checked,compact,declare,defer,disabled,ismap,multiple,nohref,noresize,noshade,nowrap,readonly,selected'); // Special Elements (can contain anything)
+
+var special = makeMap('script,style');
+function HTMLParser(html, handler) {
+  var index;
+  var chars;
+  var match;
+  var stack = [];
+  var last = html;
+
+  stack.last = function () {
+    return this[this.length - 1];
+  };
+
+  while (html) {
+    chars = true; // Make sure we're not in a script or style element
+
+    if (!stack.last() || !special[stack.last()]) {
+      // Comment
+      if (html.indexOf('<!--') == 0) {
+        index = html.indexOf('-->');
+
+        if (index >= 0) {
+          if (handler.comment) {
+            handler.comment(html.substring(4, index));
+          }
+
+          html = html.substring(index + 3);
+          chars = false;
+        } // end tag
+
+      } else if (html.indexOf('</') == 0) {
+        match = html.match(endTag);
+
+        if (match) {
+          html = html.substring(match[0].length);
+          match[0].replace(endTag, parseEndTag);
+          chars = false;
+        } // start tag
+
+      } else if (html.indexOf('<') == 0) {
+        match = html.match(startTag);
+
+        if (match) {
+          html = html.substring(match[0].length);
+          match[0].replace(startTag, parseStartTag);
+          chars = false;
+        }
+      }
+
+      if (chars) {
+        index = html.indexOf('<');
+        var text = index < 0 ? html : html.substring(0, index);
+        html = index < 0 ? '' : html.substring(index);
+
+        if (handler.chars) {
+          handler.chars(text);
+        }
+      }
+    } else {
+      html = html.replace(new RegExp('([\\s\\S]*?)<\/' + stack.last() + '[^>]*>'), function (all, text) {
+        text = text.replace(/<!--([\s\S]*?)-->|<!\[CDATA\[([\s\S]*?)]]>/g, '$1$2');
+
+        if (handler.chars) {
+          handler.chars(text);
+        }
+
+        return '';
+      });
+      parseEndTag('', stack.last());
+    }
+
+    if (html == last) {
+      throw 'Parse Error: ' + html;
+    }
+
+    last = html;
+  } // Clean up any remaining tags
+
+
+  parseEndTag();
+
+  function parseStartTag(tag, tagName, rest, unary) {
+    tagName = tagName.toLowerCase();
+
+    if (block[tagName]) {
+      while (stack.last() && inline[stack.last()]) {
+        parseEndTag('', stack.last());
+      }
+    }
+
+    if (closeSelf[tagName] && stack.last() == tagName) {
+      parseEndTag('', tagName);
+    }
+
+    unary = empty[tagName] || !!unary;
+
+    if (!unary) {
+      stack.push(tagName);
+    }
+
+    if (handler.start) {
+      var attrs = [];
+      rest.replace(attr, function (match, name) {
+        var value = arguments[2] ? arguments[2] : arguments[3] ? arguments[3] : arguments[4] ? arguments[4] : fillAttrs[name] ? name : '';
+        attrs.push({
+          name: name,
+          value: value,
+          escaped: value.replace(/(^|[^\\])"/g, '$1\\\"') // "
+
+        });
+      });
+
+      if (handler.start) {
+        handler.start(tagName, attrs, unary);
+      }
+    }
+  }
+
+  function parseEndTag(tag, tagName) {
+    // If no tag name is provided, clean shop
+    if (!tagName) {
+      var pos = 0;
+    } // Find the closest opened tag of the same type
+    else {
+        for (var pos = stack.length - 1; pos >= 0; pos--) {
+          if (stack[pos] == tagName) {
+            break;
+          }
+        }
+      }
+
+    if (pos >= 0) {
+      // Close all the open elements, up the stack
+      for (var i = stack.length - 1; i >= pos; i--) {
+        if (handler.end) {
+          handler.end(stack[i]);
+        }
+      } // Remove the open elements from the stack
+
+
+      stack.length = pos;
+    }
+  }
+}
+
+function makeMap(str) {
+  var obj = {};
+  var items = str.split(',');
+
+  for (var i = 0; i < items.length; i++) {
+    obj[items[i]] = true;
+  }
+
+  return obj;
+}
+
+function removeDOCTYPE(html) {
+  return html.replace(/<\?xml.*\?>\n/, '').replace(/<!doctype.*>\n/, '').replace(/<!DOCTYPE.*>\n/, '');
+}
+
+function parseAttrs(attrs) {
+  return attrs.reduce(function (pre, attr) {
+    var value = attr.value;
+    var name = attr.name;
+
+    if (pre[name]) {
+			pre[name] = pre[name] + " " + value;
+    } else {
+			pre[name] = value;
+    }
+
+    return pre;
+  }, {});
+}
+
+function parseHtml(html) {
+  html = removeDOCTYPE(html);
+  var stacks = [];
+  var results = {
+    node: 'root',
+    children: []
+  };
+  HTMLParser(html, {
+    start: function start(tag, attrs, unary) {
+      var node = {
+        name: tag
+      };
+
+      if (attrs.length !== 0) {
+        node.attrs = parseAttrs(attrs);
+      }
+
+      if (unary) {
+        var parent = stacks[0] || results;
+
+        if (!parent.children) {
+          parent.children = [];
+        }
+
+        parent.children.push(node);
+      } else {
+        stacks.unshift(node);
+      }
+    },
+    end: function end(tag) {
+      var node = stacks.shift();
+      if (node.name !== tag) console.error('invalid state: mismatch end tag');
+
+      if (stacks.length === 0) {
+        results.children.push(node);
+      } else {
+        var parent = stacks[0];
+
+        if (!parent.children) {
+          parent.children = [];
+        }
+
+        parent.children.push(node);
+      }
+    },
+    chars: function chars(text) {
+      var node = {
+        type: 'text',
+        text: text
+      };
+
+      if (stacks.length === 0) {
+        results.children.push(node);
+      } else {
+        var parent = stacks[0];
+
+        if (!parent.children) {
+          parent.children = [];
+        }
+
+        parent.children.push(node);
+      }
+    },
+    comment: function comment(text) {
+      var node = {
+        node: 'comment',
+        text: text
+      };
+      var parent = stacks[0];
+
+      if (!parent.children) {
+        parent.children = [];
+      }
+
+      parent.children.push(node);
+    }
+  });
+  return results.children;
+}
+
+export default parseHtml;

package/components/ml-rich-text/ml-rich-text.vue

@@ -0,0 +1,44 @@
+<template>
+  <view class="ml-rich-text">
+    <rich-text :nodes="nodes" :selectable="selectable"></rich-text>
+  </view>
+</template>
+
+<script>
+import parseHtml from './html-parser'
+
+export default {
+  name: 'MlRichText',
+  props: {
+    value: String,
+    selectable: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data () {
+    return {
+      nodes: []
+    }
+  },
+  watch: {
+    value () {
+      this.value()
+    }
+  },
+  created () {
+    this.load()
+  },
+  methods: {
+    load () {
+      this.nodes = this.value ? parseHtml(this.value) : []
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.ml-rich-text {
+  display: block;
+}
+</style>

package/components/ml-select-picker/ml-select-picker.vue

@@ -118,6 +118,7 @@ export default {
 }
 .ml-select-picker-text {
   flex-grow: 1;
+  padding-right: 10rpx;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

package/components/ml-upload/ml-upload.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="ml-upload" :class="className">
+	<view class="ml-upload" :class="[className || '']">
 		<view v-if="isFromReadonly">
 			<view v-if="mediatype === 'image'" class="ml-upload-image-list">
 				<view class="ml-upload-file-item" v-for="(item, index) in value" :key="index">

package/components/ml-year-picker/ml-year-picker.vue

@@ -55,6 +55,10 @@ export default {
 }
 .ml-year-picker-text {
   flex-grow: 1;
+  padding-right: 10rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .ml-year-picker-icon {
   color: #6a6a6a;

package/config/store.js

@@ -16,6 +16,17 @@ const globalStore = {
     downloadFile: null,
     // 删除附件方法
     removeFile: null
+  },
+  // 审批组件
+  approval: {
+    // 审批流程
+    select: {
+      optionMethod: null
+    },
+    // 审批记录
+    record: {
+      optionMethod: null
+    }
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mali-applet-ui",
-  "version": "0.0.49",
+  "version": "0.0.52",
   "description": "码里云小程序组件库",
   "files": [
     "components",
@@ -14,6 +14,19 @@
   "devDependencies": {
     "xe-utils": "3.5.6"
   },
+  "uni-app": {
+    "scripts": {
+      "mp-dingtalk": {
+        "title": "钉钉小程序",
+        "env": {
+          "UNI_PLATFORM": "mp-alipay"
+        },
+        "define": {
+          "MP-DINGTALK": true
+        }
+      }
+    }
+  },
   "author": "xu_liangzhan@163.com",
   "keywords": [
     "mali-ui",