iov-design 2.15.56 → 2.15.58

package/lib/cascader.js

@@ -316,32 +316,169 @@ var 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", {
@@ -704,6 +841,47 @@ var debounce_default = /*#__PURE__*/__webpack_require__.n(debounce_);
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 
 
 
@@ -814,6 +992,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
@@ -839,7 +1033,10 @@ var InputSizeMap = {
       filtering: false,
       suggestions: [],
       inputInitialHeight: 0,
-      pressDeleteCount: 0
+      pressDeleteCount: 0,
+      inputWidth: 0,
+      tagsLeft: 0,
+      maxWidth: 'none'
     };
   },
 
@@ -959,6 +1156,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)) {
@@ -992,6 +1191,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: {
@@ -1005,7 +1235,7 @@ var InputSizeMap = {
       };
     },
     toggleDropDownVisible: function toggleDropDownVisible(visible) {
-      var _this2 = this;
+      var _this4 = this;
 
       if (this.isDisabled) return;
 
@@ -1017,8 +1247,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);
@@ -1072,11 +1302,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;
 
@@ -1096,15 +1326,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();
         }
       });
     },
@@ -1134,8 +1364,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 = [];
@@ -1151,32 +1380,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;
 
@@ -1189,8 +1420,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) {
@@ -1199,7 +1430,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());
         });
       }
 
@@ -1307,7 +1538,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();
         }