iov-design 2.15.57 → 2.15.58

package/lib/iov-design.common.js

@@ -955,6 +955,7 @@ var util_ = __webpack_require__(2);
             'el-select',
             {
               attrs: {
+                fill: true,
                 value: this.$parent.internalPageSize,
                 popperClass: this.$parent.popperClass || '',
                 size: this.$parent.small ? 'mini' : 'small',
@@ -7628,6 +7629,7 @@ var selectvue_type_template_id_0e4aade6_render = function() {
       ],
       staticClass: "el-select",
       class: [
+        _vm.fill ? "is-fill" : "",
         _vm.selectSize ? "el-select--" + _vm.selectSize : "",
         _vm.selectDisabled ? "is-disabled" : ""
       ],
@@ -7645,6 +7647,7 @@ var selectvue_type_template_id_0e4aade6_render = function() {
             {
               ref: "tags",
               staticClass: "el-select__tags",
+              class: { "is-focus": _vm.visible },
               style: {
                 "max-width": _vm.inputWidth - 32 + "px",
                 width: _vm.inputWidth - _vm.tagsLeft - 32 + "px",
@@ -8742,6 +8745,7 @@ var scroll_into_view_default = /*#__PURE__*/__webpack_require__.n(scroll_into_vi
 //
 //
 //
+//
 
 
 
@@ -8936,7 +8940,8 @@ var scroll_into_view_default = /*#__PURE__*/__webpack_require__.n(scroll_into_vi
     popperAppendToBody: {
       type: Boolean,
       default: true
-    }
+    },
+    fill: Boolean
   },
 
   data: function data() {
@@ -9294,7 +9299,7 @@ var scroll_into_view_default = /*#__PURE__*/__webpack_require__.n(scroll_into_vi
         var inputInner = _this11.$el.querySelector('.el-input__inner');
         var prefixLabelWidth = prefixLabel && Math.round(prefixLabel.getBoundingClientRect().width) || 0;
         var inputPaddingLeft = prefixLabel || prefix ? Math.round(window.getComputedStyle(inputInner).paddingLeft.replace(/px/, '')) : 0;
-        _this11.tagsLeft = prefixLabelWidth + inputPaddingLeft;
+        _this11.tagsLeft = prefixLabel ? prefixLabelWidth + inputPaddingLeft - 4 : 0;
       });
     },
     resetInputState: function resetInputState(e) {
@@ -12548,7 +12553,7 @@ var table_body_extends = Object.assign || function (target) { for (var i = 1; i
       return cellStyle;
     },
     getCellClass: function getCellClass(rowIndex, columnIndex, row, column) {
-      var classes = [column.id, column.align, column.className];
+      var classes = [column.id, column.align, column.verticalAlign, column.className];
 
       if (this.isColumnHidden(columnIndex)) {
         classes.push('is-hidden');
@@ -15069,6 +15074,7 @@ var columnIdSeed = 1;
     },
     columnKey: String,
     align: String,
+    verticalAlign: String,
     headerAlign: String,
     showTooltipWhenOverflow: Boolean,
     showOverflowTooltip: Boolean,
@@ -15131,6 +15137,9 @@ var columnIdSeed = 1;
     realAlign: function realAlign() {
       return this.align ? 'is-' + this.align : null;
     },
+    realVerticalAlign: function realVerticalAlign() {
+      return this.verticalAlign ? 'is-' + this.verticalAlign : null;
+    },
     realHeaderAlign: function realHeaderAlign() {
       return this.headerAlign ? 'is-' + this.headerAlign : this.realAlign;
     }
@@ -15246,6 +15255,7 @@ var columnIdSeed = 1;
       var aliases = {
         prop: 'property',
         realAlign: 'align',
+        realVerticalAlign: 'verticalAlign',
         realHeaderAlign: 'headerAlign',
         realWidth: 'width'
       };
@@ -15309,6 +15319,7 @@ var columnIdSeed = 1;
       type: type,
       property: this.prop || this.property,
       align: this.realAlign,
+      verticalAlign: this.realVerticalAlign,
       headerAlign: this.realHeaderAlign,
       showOverflowTooltip: this.showOverflowTooltip || this.showTooltipWhenOverflow,
       // filter 相关属性
@@ -35030,32 +35041,169 @@ var cascadervue_type_template_id_032537a6_render = function() {
         ],
         2
       ),
-      _vm.multiple
+      _vm.multiple && _vm.collapseTags && _vm.checkedNodes.length
         ? _c(
-            "div",
-            { staticClass: "el-cascader__tags" },
+            "transition-group",
+            {
+              staticClass: "el-cascader__tags",
+              on: { "after-leave": _vm.updateStyle }
+            },
             [
-              _vm._l(_vm.presentTags, function(tag) {
-                return _c(
-                  "el-tag",
-                  {
-                    key: tag.key,
-                    class: { "is-disabled": !tag.closable && tag.key !== -1 },
+              _vm._l(_vm.presentTags, function(tag, index) {
+                return [
+                  _vm.collapseTags && index <= _vm.multipleLimitShow - 1
+                    ? _c(
+                        "el-tag",
+                        {
+                          key: tag.key,
+                          class: {
+                            "is-disabled": !tag.closable && tag.key !== -1
+                          },
+                          attrs: {
+                            type: "info",
+                            size: _vm.tagSize,
+                            hit: tag.hitState,
+                            maxWidth: _vm.maxWidth,
+                            closable: tag.closable,
+                            "disable-transitions": ""
+                          },
+                          on: {
+                            close: function($event) {
+                              _vm.deleteTag(tag)
+                            }
+                          }
+                        },
+                        [_c("span", [_vm._v(_vm._s(tag.text))])]
+                      )
+                    : _vm._e()
+                ]
+              }),
+              _vm.collapseTags &&
+              ((_vm.checkedNodes.length > 1 &&
+                _vm.checkedNodes.length > _vm.multipleLimitShow) ||
+                (_vm.checkedNodes.length > 0 && _vm.collapseTagsFixed))
+                ? _c(
+                    "el-tag",
+                    {
+                      key: "count",
+                      ref: "tagsCount",
+                      staticClass: "el-cascader__tags-count",
+                      class: {
+                        "el-cascader__tags-count-fixed": _vm.collapseTagsFixed
+                      },
+                      attrs: {
+                        closable: false,
+                        size: _vm.tagSize,
+                        type: "info",
+                        "disable-transitions": ""
+                      }
+                    },
+                    [
+                      _c("span", { staticClass: "el-cascader__tags-text" }, [
+                        _vm._v(
+                          _vm._s(_vm.collapseTagsFixed ? "" : "+") +
+                            _vm._s(
+                              _vm.collapseTagsFixed
+                                ? _vm.checkedNodes.length
+                                : _vm.checkedNodes.length -
+                                    _vm.multipleLimitShow
+                            ) +
+                            _vm._s(_vm.collapseTagsSuffix)
+                        )
+                      ])
+                    ]
+                  )
+                : _vm._e(),
+              _vm.filterable && !_vm.isDisabled
+                ? _c("input", {
+                    directives: [
+                      {
+                        name: "model",
+                        rawName: "v-model.trim",
+                        value: _vm.inputValue,
+                        expression: "inputValue",
+                        modifiers: { trim: true }
+                      }
+                    ],
+                    staticClass: "el-cascader__search-input",
                     attrs: {
-                      type: "info",
-                      size: _vm.tagSize,
-                      hit: tag.hitState,
-                      closable: tag.closable,
-                      "disable-transitions": ""
+                      type: "text",
+                      placeholder: _vm.presentTags.length ? "" : _vm.placeholder
                     },
+                    domProps: { value: _vm.inputValue },
                     on: {
-                      close: function($event) {
-                        _vm.deleteTag(tag)
+                      input: [
+                        function($event) {
+                          if ($event.target.composing) {
+                            return
+                          }
+                          _vm.inputValue = $event.target.value.trim()
+                        },
+                        function(e) {
+                          return _vm.handleInput(_vm.inputValue, e)
+                        }
+                      ],
+                      click: function($event) {
+                        $event.stopPropagation()
+                        _vm.toggleDropDownVisible(true)
+                      },
+                      keydown: function($event) {
+                        if (
+                          !("button" in $event) &&
+                          _vm._k(
+                            $event.keyCode,
+                            "delete",
+                            [8, 46],
+                            $event.key,
+                            ["Backspace", "Delete", "Del"]
+                          )
+                        ) {
+                          return null
+                        }
+                        return _vm.handleDelete($event)
+                      },
+                      blur: function($event) {
+                        _vm.$forceUpdate()
                       }
                     }
-                  },
-                  [_c("span", [_vm._v(_vm._s(tag.text))])]
-                )
+                  })
+                : _vm._e()
+            ],
+            2
+          )
+        : _vm._e(),
+      !_vm.collapseTags
+        ? _c(
+            "transition-group",
+            {
+              staticClass: "el-cascader__tags",
+              on: { "after-leave": _vm.updateStyle }
+            },
+            [
+              _vm._l(_vm.presentTags, function(tag) {
+                return [
+                  _c(
+                    "el-tag",
+                    {
+                      key: tag.key,
+                      class: { "is-disabled": !tag.closable && tag.key !== -1 },
+                      attrs: {
+                        type: "info",
+                        size: _vm.tagSize,
+                        hit: tag.hitState,
+                        maxWidth: _vm.maxWidth,
+                        closable: tag.closable,
+                        "disable-transitions": ""
+                      },
+                      on: {
+                        close: function($event) {
+                          _vm.deleteTag(tag)
+                        }
+                      }
+                    },
+                    [_c("span", [_vm._v(_vm._s(tag.text))])]
+                  )
+                ]
               }),
               _vm.filterable && !_vm.isDisabled
                 ? _c("input", {
@@ -35367,6 +35515,47 @@ var aria_utils_default = /*#__PURE__*/__webpack_require__.n(aria_utils_);
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 
 
 
@@ -35477,6 +35666,22 @@ var InputSizeMap = {
       default: true
     },
     collapseTags: Boolean,
+    multipleLimitShow: {
+      type: Number,
+      default: 1
+    },
+    multipleTagMaxWidth: {
+      type: String,
+      default: 'none'
+    },
+    collapseTagsSuffix: {
+      type: String,
+      default: ''
+    },
+    collapseTagsFixed: {
+      type: Boolean,
+      default: false
+    },
     debounce: {
       type: Number,
       default: 300
@@ -35502,7 +35707,10 @@ var InputSizeMap = {
       filtering: false,
       suggestions: [],
       inputInitialHeight: 0,
-      pressDeleteCount: 0
+      pressDeleteCount: 0,
+      inputWidth: 0,
+      tagsLeft: 0,
+      maxWidth: 'none'
     };
   },
 
@@ -35622,6 +35830,8 @@ var InputSizeMap = {
 
     if (input && input.$el) {
       this.inputInitialHeight = Math.max(input.$el.offsetHeight, InputSizeMap[this.realSize]) || 36;
+      this.resetInputWidth();
+      this.resetTagsLeft();
     }
 
     if (!this.isEmptyValue(this.value)) {
@@ -35655,6 +35865,37 @@ var InputSizeMap = {
 
 
   methods: {
+    resetInputWidth: function resetInputWidth() {
+      this.inputWidth = this.$refs.input.$el.getBoundingClientRect().width;
+    },
+    resetTagsLeft: function resetTagsLeft() {
+      var _this2 = this;
+
+      this.$nextTick(function () {
+        var prefixLabel = _this2.$el.querySelector('.el-input-group__prefix-label');
+        var prefix = _this2.$el.querySelector('.el-input__prefix');
+        var inputInner = _this2.$el.querySelector('.el-input__inner');
+        var prefixLabelWidth = prefixLabel && Math.round(prefixLabel.getBoundingClientRect().width) || 0;
+        var inputPaddingLeft = prefixLabel || prefix ? Math.round(window.getComputedStyle(inputInner).paddingLeft.replace(/px/, '')) : 0;
+        _this2.tagsLeft = prefixLabelWidth + inputPaddingLeft;
+      });
+    },
+    getMaxWidth: function getMaxWidth() {
+      var _this3 = this;
+
+      this.$nextTick(function () {
+        if (_this3.collapseTags) {
+          if (_this3.multipleTagMaxWidth && _this3.multipleTagMaxWidth !== 'none') {
+            _this3.maxWidth = _this3.multipleTagMaxWidth;
+          }
+          var tagsCountWidth = _this3.$refs.tagsCount && _this3.$refs.tagsCount.$el.clientWidth || 0;
+          var count = _this3.checkedNodes.length <= _this3.multipleLimitShow ? _this3.checkedNodes.length : _this3.multipleLimitShow;
+          _this3.maxWidth = Math.floor((_this3.inputWidth - _this3.tagsLeft - 32 - tagsCountWidth - 20 - count * 16) / count) + 'px';
+        } else {
+          _this3.maxWidth = _this3.multipleTagMaxWidth || 'none';
+        }
+      });
+    },
     getMigratingConfig: function getMigratingConfig() {
       return {
         props: {
@@ -35668,7 +35909,7 @@ var InputSizeMap = {
       };
     },
     toggleDropDownVisible: function toggleDropDownVisible(visible) {
-      var _this2 = this;
+      var _this4 = this;
 
       if (this.isDisabled) return;
 
@@ -35680,8 +35921,8 @@ var InputSizeMap = {
         this.dropDownVisible = visible;
         if (visible) {
           this.$nextTick(function () {
-            _this2.updatePopper();
-            _this2.panel.scrollIntoView();
+            _this4.updatePopper();
+            _this4.panel.scrollIntoView();
           });
         }
         input.$refs.input.setAttribute('aria-expanded', visible);
@@ -35735,11 +35976,11 @@ var InputSizeMap = {
       this.$emit('active-item-change', value); // Deprecated
     },
     focusFirstNode: function focusFirstNode() {
-      var _this3 = this;
+      var _this5 = this;
 
       this.$nextTick(function () {
-        var filtering = _this3.filtering;
-        var _$refs = _this3.$refs,
+        var filtering = _this5.filtering;
+        var _$refs = _this5.$refs,
             popper = _$refs.popper,
             suggestionPanel = _$refs.suggestionPanel;
 
@@ -35759,15 +36000,15 @@ var InputSizeMap = {
       });
     },
     computePresentContent: function computePresentContent() {
-      var _this4 = this;
+      var _this6 = this;
 
       // nextTick is required, because checked nodes may not change right now
       this.$nextTick(function () {
-        if (_this4.config.multiple) {
-          _this4.computePresentTags();
-          _this4.presentText = _this4.presentTags.length ? ' ' : null;
+        if (_this6.config.multiple) {
+          _this6.computePresentTags();
+          _this6.presentText = _this6.presentTags.length ? ' ' : null;
         } else {
-          _this4.computePresentText();
+          _this6.computePresentText();
         }
       });
     },
@@ -35797,8 +36038,7 @@ var InputSizeMap = {
       var isDisabled = this.isDisabled,
           leafOnly = this.leafOnly,
           showAllLevels = this.showAllLevels,
-          separator = this.separator,
-          collapseTags = this.collapseTags;
+          separator = this.separator;
 
       var checkedNodes = this.getCheckedNodes(leafOnly);
       var tags = [];
@@ -35814,32 +36054,34 @@ var InputSizeMap = {
       };
 
       if (checkedNodes.length) {
-        var first = checkedNodes[0],
-            rest = checkedNodes.slice(1);
-
-        var restCount = rest.length;
-        tags.push(genTag(first));
-
-        if (restCount) {
-          if (collapseTags) {
-            tags.push({
-              key: -1,
-              text: '+' + restCount,
-              closable: false
-            });
-          } else {
-            rest.forEach(function (node) {
-              return tags.push(genTag(node));
-            });
-          }
-        }
+        checkedNodes.forEach(function (node) {
+          return tags.push(genTag(node));
+        });
+        // const [first, ...rest] = checkedNodes;
+        // const restCount = rest.length;
+        // tags.push(genTag(first));
+
+        // console.log(restCount, 'restCount============');
+        // this.restCount = restCount;
+        // if (restCount) {
+        //   if (collapseTags) {
+        //     tags.push({
+        //       key: -1,
+        //       text: `+${restCount}`,
+        //       closable: false
+        //     });
+        //   } else {
+        //     rest.forEach(node => tags.push(genTag(node)));
+        //   }
+        // }
       }
 
       this.checkedNodes = checkedNodes;
       this.presentTags = tags;
+      this.getMaxWidth();
     },
     getSuggestions: function getSuggestions() {
-      var _this5 = this;
+      var _this7 = this;
 
       var filterMethod = this.filterMethod;
 
@@ -35852,8 +36094,8 @@ var InputSizeMap = {
 
       var suggestions = this.panel.getFlattedNodes(this.leafOnly).filter(function (node) {
         if (node.isDisabled) return false;
-        node.text = node.getText(_this5.showAllLevels, _this5.separator) || '';
-        return filterMethod(node, _this5.inputValue);
+        node.text = node.getText(_this7.showAllLevels, _this7.separator) || '';
+        return filterMethod(node, _this7.inputValue);
       });
 
       if (this.multiple) {
@@ -35862,7 +36104,7 @@ var InputSizeMap = {
         });
       } else {
         suggestions.forEach(function (node) {
-          node.checked = Object(util_["isEqual"])(_this5.checkedValue, node.getValueByOption());
+          node.checked = Object(util_["isEqual"])(_this7.checkedValue, node.getValueByOption());
         });
       }
 
@@ -35970,7 +36212,10 @@ var InputSizeMap = {
         } else {
           inputInner.style.height = height;
         }
-        tags.style.left = prefixLabelWidth + inputPaddingLeft + 'px';
+        tags.style.left = prefixLabel ? prefixLabelWidth + inputPaddingLeft - 4 + 'px' : '0px';
+        if (this.checkedNodes.length === 0 && !prefixLabel) {
+          tags.style.left = '12px';
+        }
         if (this.dropDownVisible) {
           this.updatePopper();
         }
@@ -45075,7 +45320,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 /* harmony default export */ var src_0 = __webpack_exports__["default"] = ({
-  version: '2.15.57',
+  version: '2.15.58',
   locale: lib_locale_default.a.use,
   i18n: lib_locale_default.a.i18n,
   install: src_install,

package/lib/pagination.js

@@ -712,6 +712,7 @@ var util_ = __webpack_require__(3);
             'el-select',
             {
               attrs: {
+                fill: true,
                 value: this.$parent.internalPageSize,
                 popperClass: this.$parent.popperClass || '',
                 size: this.$parent.small ? 'mini' : 'small',

package/lib/select.js

@@ -578,6 +578,7 @@ var render = function() {
       ],
       staticClass: "el-select",
       class: [
+        _vm.fill ? "is-fill" : "",
         _vm.selectSize ? "el-select--" + _vm.selectSize : "",
         _vm.selectDisabled ? "is-disabled" : ""
       ],
@@ -595,6 +596,7 @@ var render = function() {
             {
               ref: "tags",
               staticClass: "el-select__tags",
+              class: { "is-focus": _vm.visible },
               style: {
                 "max-width": _vm.inputWidth - 32 + "px",
                 width: _vm.inputWidth - _vm.tagsLeft - 32 + "px",
@@ -1480,6 +1482,7 @@ var shared_ = __webpack_require__(21);
 //
 //
 //
+//
 
 
 
@@ -1674,7 +1677,8 @@ var shared_ = __webpack_require__(21);
     popperAppendToBody: {
       type: Boolean,
       default: true
-    }
+    },
+    fill: Boolean
   },
 
   data: function data() {
@@ -2032,7 +2036,7 @@ var shared_ = __webpack_require__(21);
         var inputInner = _this11.$el.querySelector('.el-input__inner');
         var prefixLabelWidth = prefixLabel && Math.round(prefixLabel.getBoundingClientRect().width) || 0;
         var inputPaddingLeft = prefixLabel || prefix ? Math.round(window.getComputedStyle(inputInner).paddingLeft.replace(/px/, '')) : 0;
-        _this11.tagsLeft = prefixLabelWidth + inputPaddingLeft;
+        _this11.tagsLeft = prefixLabel ? prefixLabelWidth + inputPaddingLeft - 4 : 0;
       });
     },
     resetInputState: function resetInputState(e) {

package/lib/table-column.js

@@ -386,6 +386,7 @@ var columnIdSeed = 1;
     },
     columnKey: String,
     align: String,
+    verticalAlign: String,
     headerAlign: String,
     showTooltipWhenOverflow: Boolean,
     showOverflowTooltip: Boolean,
@@ -448,6 +449,9 @@ var columnIdSeed = 1;
     realAlign: function realAlign() {
       return this.align ? 'is-' + this.align : null;
     },
+    realVerticalAlign: function realVerticalAlign() {
+      return this.verticalAlign ? 'is-' + this.verticalAlign : null;
+    },
     realHeaderAlign: function realHeaderAlign() {
       return this.headerAlign ? 'is-' + this.headerAlign : this.realAlign;
     }
@@ -563,6 +567,7 @@ var columnIdSeed = 1;
       var aliases = {
         prop: 'property',
         realAlign: 'align',
+        realVerticalAlign: 'verticalAlign',
         realHeaderAlign: 'headerAlign',
         realWidth: 'width'
       };
@@ -626,6 +631,7 @@ var columnIdSeed = 1;
       type: type,
       property: this.prop || this.property,
       align: this.realAlign,
+      verticalAlign: this.realVerticalAlign,
       headerAlign: this.realHeaderAlign,
       showOverflowTooltip: this.showOverflowTooltip || this.showTooltipWhenOverflow,
       // filter 相关属性

package/lib/table.js

@@ -3010,7 +3010,7 @@ var table_body_extends = Object.assign || function (target) { for (var i = 1; i
       return cellStyle;
     },
     getCellClass: function getCellClass(rowIndex, columnIndex, row, column) {
-      var classes = [column.id, column.align, column.className];
+      var classes = [column.id, column.align, column.verticalAlign, column.className];
 
       if (this.isColumnHidden(columnIndex)) {
         classes.push('is-hidden');