mali-applet-ui 0.0.89 → 0.0.90

package/components/ml-card/ml-card.vue

@@ -25,8 +25,25 @@ export default {
 .ml-card {
   margin-bottom: 20rpx;
   background: #fff;
-  .ml-card-body {
-    padding: 20rpx;
+  .ml-card-header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    min-height: 80rpx;
+    padding: 0 10rpx;
+    .ml-card-title {
+      position: relative;
+      padding-left: 20rpx;
+      &:before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 8rpx;
+        height: 30rpx;
+        background: $uni-color-primary;
+      }
+    }
   }
 }
 </style>

package/components/ml-table/ml-table.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="ml-table" :class="className">
+  <view class="ml-table" :class="className || ''">
     <view v-if="$slots.top" class="ml-table-top-warpper">
       <slot name="top"></slot>
     </view>
@@ -8,7 +8,7 @@
         <view class="table-column-header">
           <view class="table-tr">
             <view v-for="(column, columnIndex) in tableColumn" :key="columnIndex" class="table-th" :class="{'is-sort': !!column.sortable}" :style="{width: getColWidth(column)}" @click="chickThEvent({ column, columnIndex })">
-              <view class="th-title">{{column.title}}</view>
+              <view class="th-title">{{ column.title }}</view>
               <view class="th-sort" v-if="column.sortable">
                 <view class="asc-btn" :class="{active: column.order === 'asc'}" @click.stop="sortEvent({column, columnIndex}, 'asc')">
                   <ml-icon name="arrow-up-filling"></ml-icon>
@@ -36,7 +36,7 @@
           <view class="table-td" v-for="(column, columnIndex) in tableColumn" :key="columnIndex" :style="{width: getColWidth(column)}" @click="cellTdClick({ type: 'body', row, rowIndex, column, columnIndex })">
             <view :class="['table-cell', column.align ? `align-${column.align}` : '', getCellClass({ type: 'body', row, rowIndex, column, columnIndex })]">
               <text v-if="column.type === 'seq'">{{ rowIndex + 1 }}</text>
-              <text v-else-if="column.cellRender && column.cellRender.name === 'Underline'" class="underline">{{ getCellValue({ type: 'body', row, rowIndex, column, columnIndex }) }}</text>
+              <text v-else-if="column.cellRender && column.cellRender.name === 'Underline'" class="is-underline">{{ getCellValue({ type: 'body', row, rowIndex, column, columnIndex }) }}</text>
               <ml-amount-text v-else-if="column.cellRender && column.cellRender.name === 'MlAmountText'" :value="row[column.field]" :simplify="column.cellRender.props ? column.cellRender.props.simplify : false"></ml-amount-text>
               <ml-progress-bar
                 v-else-if="column.cellRender && column.cellRender.name === 'MlProgressBar'"
@@ -107,6 +107,9 @@ export default {
     },
     tableStyle () {
       return `height:${this.height ? (isNaN(this.height) ? this.height : `${this.height}rpx`) : ''}`
+    },
+    colMinWidth () {
+      return Math.max(20, XEUtils.floor(100 / this.tableColumn.length, 2))
     }
   },
   watch: {
@@ -177,7 +180,7 @@ export default {
         }
         return `${column.width}rpx`
       }
-      return '30vw'
+      return `${this.colMinWidth}vw`
     },
     getTableHeight () {
       if (this.height) {
@@ -240,23 +243,18 @@ export default {
 
 <style lang="scss">
 .ml-table {
-  margin-top: 20rpx;
   width: 100%;
   font-size: 26rpx;
   box-shadow: 0rpx 0rpx 10rpx -3rpx rgba(0, 0, 0, 0.2);
   background: #fff;
-
   .ml-table-warpper {
     overflow: auto;
   }
-
-  // height: 90vh;
   .table-header {
     position: sticky;
     top: 0;
     z-index: 10;
   }
-
   .table-th {
     display: inline-block;
     height: 70rpx;
@@ -281,13 +279,11 @@ export default {
       white-space: nowrap;
     }
   }
-
   .table-tr {
     display: block;
     white-space: nowrap;
     width: 100%;
   }
-
   .table-th {
     position: relative;
     .th-sort {
@@ -306,7 +302,6 @@ export default {
       }
     }
   }
-
   .table-td {
     display: inline-block;
     padding: 20rpx 10rpx;
@@ -315,7 +310,6 @@ export default {
     border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
     box-sizing: border-box;
   }
-
   .table-cell {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -327,10 +321,9 @@ export default {
       text-align: right;
     }
   }
-  .underline {
+  .is-underline {
     text-decoration: underline;
   }
-
   .ml-table-bottom-warpper {
     display: flex;
     flex-direction: column;

package/components/ml-tabs/ml-tabs.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="ml-tabs" :class="className">
+  <view class="ml-tabs" :class="[className || '']">
     <view class="ml-tabs-header">
       <scroll-view scroll-x>
         <view class="ml-tabs-navs">
@@ -54,6 +54,10 @@ export default {
   .ml-tabs-navs {
     white-space: nowrap;
   }
+  .ml-tabs-header {
+    background: #fff;
+    margin-bottom: 20rpx;
+  }
   .ml-tabs-nav-item {
     position: relative;
     display: inline-block;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mali-applet-ui",
-  "version": "0.0.89",
+  "version": "0.0.90",
   "description": "码里云小程序组件库",
   "files": [
     "components",