zartui 2.0.81 → 2.0.83

package/es/index.js

@@ -71,13 +71,14 @@ import TabbarItem from './tabbar-item';
 import Table from './table';
 import Tabs from './tabs';
 import Tag from './tag';
+import TextEllipsis from './text-ellipsis';
 import Timeline from './timeline';
 import Toast from './toast';
 import Uploader from './uploader';
-var version = '2.0.81';
+var version = '2.0.83';
 
 function install(Vue) {
-  var components = [ActionSheet, Area, Avatar, BackTop, Badge, Button, Calendar, Cascader, Cell, CellGroup, Checkbox, CheckboxGroup, Col, Collapse, CollapseItem, CountDown, DatetimePicker, Dialog, Divider, DropdownItem, DropdownMenu, Empty, Field, FoldDialog, Form, Grid, GridItem, HierarchySelect, Icon, Image, ImagePreview, IndexAnchor, IndexBar, Info, Lazyload, List, Loading, Locale, MediaPicker, MediaPlayer, MultiplePicker, NavBar, NoticeBar, NumberKeyboard, Overlay, PasswordInput, Picker, Popover, Popup, PullRefresh, Radio, RadioGroup, Rate, Row, Search, Signature, Skeleton, Slider, Step, Stepper, Steps, Sticky, Swipe, SwipeCell, SwipeItem, Switch, SwitchCell, Tab, Tabbar, TabbarItem, Table, Tabs, Tag, Timeline, Toast, Uploader];
+  var components = [ActionSheet, Area, Avatar, BackTop, Badge, Button, Calendar, Cascader, Cell, CellGroup, Checkbox, CheckboxGroup, Col, Collapse, CollapseItem, CountDown, DatetimePicker, Dialog, Divider, DropdownItem, DropdownMenu, Empty, Field, FoldDialog, Form, Grid, GridItem, HierarchySelect, Icon, Image, ImagePreview, IndexAnchor, IndexBar, Info, Lazyload, List, Loading, Locale, MediaPicker, MediaPlayer, MultiplePicker, NavBar, NoticeBar, NumberKeyboard, Overlay, PasswordInput, Picker, Popover, Popup, PullRefresh, Radio, RadioGroup, Rate, Row, Search, Signature, Skeleton, Slider, Step, Stepper, Steps, Sticky, Swipe, SwipeCell, SwipeItem, Switch, SwitchCell, Tab, Tabbar, TabbarItem, Table, Tabs, Tag, TextEllipsis, Timeline, Toast, Uploader];
   components.forEach(function (item) {
     if (item.install) {
       Vue.use(item);
@@ -91,7 +92,7 @@ if (typeof window !== 'undefined' && window.Vue) {
   install(window.Vue);
 }
 
-export { install, version, ActionSheet, Area, Avatar, BackTop, Badge, Button, Calendar, Cascader, Cell, CellGroup, Checkbox, CheckboxGroup, Col, Collapse, CollapseItem, CountDown, DatetimePicker, Dialog, Divider, DropdownItem, DropdownMenu, Empty, Field, FoldDialog, Form, Grid, GridItem, HierarchySelect, Icon, Image, ImagePreview, IndexAnchor, IndexBar, Info, Lazyload, List, Loading, Locale, MediaPicker, MediaPlayer, MultiplePicker, NavBar, NoticeBar, NumberKeyboard, Overlay, PasswordInput, Picker, Popover, Popup, PullRefresh, Radio, RadioGroup, Rate, Row, Search, Signature, Skeleton, Slider, Step, Stepper, Steps, Sticky, Swipe, SwipeCell, SwipeItem, Switch, SwitchCell, Tab, Tabbar, TabbarItem, Table, Tabs, Tag, Timeline, Toast, Uploader };
+export { install, version, ActionSheet, Area, Avatar, BackTop, Badge, Button, Calendar, Cascader, Cell, CellGroup, Checkbox, CheckboxGroup, Col, Collapse, CollapseItem, CountDown, DatetimePicker, Dialog, Divider, DropdownItem, DropdownMenu, Empty, Field, FoldDialog, Form, Grid, GridItem, HierarchySelect, Icon, Image, ImagePreview, IndexAnchor, IndexBar, Info, Lazyload, List, Loading, Locale, MediaPicker, MediaPlayer, MultiplePicker, NavBar, NoticeBar, NumberKeyboard, Overlay, PasswordInput, Picker, Popover, Popup, PullRefresh, Radio, RadioGroup, Rate, Row, Search, Signature, Skeleton, Slider, Step, Stepper, Steps, Sticky, Swipe, SwipeCell, SwipeItem, Switch, SwitchCell, Tab, Tabbar, TabbarItem, Table, Tabs, Tag, TextEllipsis, Timeline, Toast, Uploader };
 export default {
   install: install,
   version: version

package/es/table/index.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { createNamespace } from '../utils';
 import Icon from '../icon/index';
+import TextEllipsis from '../text-ellipsis/index';
 import { SortOrderEnum } from './type';
 
 var _createNamespace = createNamespace('table'),
@@ -24,6 +25,10 @@ export default createComponent({
     striped: {
       type: Boolean,
       default: false
+    },
+    hideTableHead: {
+      type: Boolean,
+      default: false
     }
   },
   data: function data() {
@@ -105,6 +110,9 @@ export default createComponent({
 
       var h = this.$createElement;
 
+      var _ref2 = this,
+          slots = _ref2.slots;
+
       if ((colData == null ? void 0 : colData.colSpan) !== 0) {
         return h("th", {
           "class": bem({
@@ -117,14 +125,19 @@ export default createComponent({
           "attrs": {
             "colspan": (colData == null ? void 0 : colData.colSpan) !== 1 ? colData == null ? void 0 : colData.colSpan : null
           }
-        }, [h("div", {
+        }, [slots("head" + colData.id) || h("div", {
           "class": bem('head'),
           "on": {
             "click": function click() {
               return _this2.onHeaderClick(colData);
             }
           }
-        }, [h("span", [colData.label]), colData.sorter ? h("span", {
+        }, [colData.ellipsis ? h(TextEllipsis, {
+          "attrs": {
+            "content": colData.label,
+            "expandType": "dialog"
+          }
+        }) : colData.label, colData.sorter ? h("span", {
           "class": bem('head-sort')
         }, [h(Icon, {
           "class": [colData.key === this.sortKey && this.sortOrder === SortOrderEnum.ASCEND ? bem('sort-active') : ''],
@@ -148,6 +161,23 @@ export default createComponent({
       }
     },
     onClick: function onClick() {},
+    getElement: function getElement(rowData, colData) {
+      var h = this.$createElement;
+
+      var _ref3 = this,
+          slots = _ref3.slots;
+
+      if (rowData[colData.key] && rowData[colData.key].id && slots("data" + rowData[colData.key].id)) {
+        return slots("data" + rowData[colData.key].id)[0];
+      }
+
+      return colData.ellipsis ? h(TextEllipsis, {
+        "attrs": {
+          "content": rowData[colData.key],
+          "expandType": "dialog"
+        }
+      }) : rowData[colData.key];
+    },
     getBody: function getBody(rowData, rowIndex) {
       var _this3 = this;
 
@@ -179,7 +209,7 @@ export default createComponent({
             "rowspan": ((_additionalCellProps5 = additionalCellProps) == null ? void 0 : _additionalCellProps5.rowSpan) !== 1 ? (_additionalCellProps6 = additionalCellProps) == null ? void 0 : _additionalCellProps6.rowSpan : null
           },
           "style": style
-        }, [rowData[colData.key]]);
+        }, [_this3.getElement(rowData, colData)]);
       })]);
     }
   },
@@ -202,6 +232,10 @@ export default createComponent({
         }
       });
     })]), h("thead", {
+      "directives": [{
+        name: "show",
+        value: !this.hideTableHead
+      }],
       "class": bem('thead')
     }, [h("tr", [this.formatColumns.map(function (colData) {
       return _this4.getHead(colData);

package/es/table/style/index.js

@@ -1,4 +1,10 @@
 import '../../style/base.css';
+import '../../overlay/index.css';
 import '../../info/index.css';
 import '../../icon/index.css';
+import '../../popup/index.css';
+import '../../loading/index.css';
+import '../../button/index.css';
+import '../../dialog/index.css';
+import '../../text-ellipsis/index.css';
 import '../index.css';

package/es/table/style/less.js

@@ -1,4 +1,10 @@
 import '../../style/base.less';
+import '../../overlay/index.less';
 import '../../info/index.less';
 import '../../icon/index.less';
+import '../../popup/index.less';
+import '../../loading/index.less';
+import '../../button/index.less';
+import '../../dialog/index.less';
+import '../../text-ellipsis/index.less';
 import '../index.less';

package/es/text-ellipsis/index.css

@@ -0,0 +1 @@
+.zt2-text-ellipsis{width:100%;line-height:calc(200% - 8px);white-space:pre-wrap;word-break:break-all}.zt2-text-ellipsis__action{cursor:pointer;color:#0091fa}

package/es/text-ellipsis/index.js

@@ -0,0 +1,213 @@
+import { createNamespace } from '../utils';
+import Dialog from '../dialog/index';
+
+var _createNamespace = createNamespace('text-ellipsis'),
+    createComponent = _createNamespace[0],
+    bem = _createNamespace[1];
+
+export default createComponent({
+  props: {
+    rows: {
+      type: Number,
+      default: 1
+    },
+    dots: {
+      type: String,
+      default: '...'
+    },
+    content: {
+      type: String,
+      default: ''
+    },
+    expandText: {
+      type: String,
+      default: '展开'
+    },
+    expandType: {
+      type: String,
+      default: 'flat'
+    },
+    collapseText: {
+      type: String,
+      default: '收起'
+    },
+    position: {
+      type: String,
+      default: 'end'
+    }
+  },
+  data: function data() {
+    return {
+      expanded: false,
+      ellipsis: false,
+      text: ''
+    };
+  },
+  computed: {
+    actionText: function actionText() {
+      return this.expanded ? this.collapseText : this.expandText;
+    },
+    propsData: function propsData() {
+      return {
+        content: this.content,
+        rows: this.rows,
+        position: this.position
+      };
+    }
+  },
+  watch: {
+    propsData: function propsData() {
+      this.calcEllipsised();
+    }
+  },
+  methods: {
+    pxToNum: function pxToNum(value) {
+      if (!value) return 0;
+      var match = value.match(/^\d*(\.\d*)?/);
+      return match ? Number(match[0]) : 0;
+    },
+    calcEllipsised: function calcEllipsised() {
+      var _this = this;
+
+      var root = this.$refs.root;
+
+      var cloneContainer = function cloneContainer() {
+        if (!root) return;
+        var originStyle = window.getComputedStyle(root);
+        var container = document.createElement('div');
+        var styleNames = Array.prototype.slice.apply(originStyle);
+        styleNames.forEach(function (name) {
+          container.style.setProperty(name, originStyle.getPropertyValue(name));
+        });
+        container.style.position = 'fixed';
+        container.style.zIndex = '-9999';
+        container.style.top = '-9999px';
+        container.style.height = 'auto';
+        container.style.minHeight = 'auto';
+        container.style.maxHeight = 'auto';
+        container.innerText = _this.content;
+        document.body.appendChild(container);
+        return container;
+      };
+
+      var calcEllipsisText = function calcEllipsisText(container, maxHeight) {
+        var content = _this.content,
+            position = _this.position,
+            dots = _this.dots;
+        var end = content.length;
+
+        var calcEllipse = function calcEllipse() {
+          // calculate the former or later content
+          var tail = function tail(left, right) {
+            if (right - left <= 1) {
+              if (position === 'end') {
+                return content.slice(0, left) + dots;
+              }
+
+              return dots + content.slice(right, end);
+            }
+
+            var middle = Math.round((left + right) / 2); // Set the interception location
+
+            if (position === 'end') {
+              container.innerText = content.slice(0, middle) + dots + _this.actionText;
+            } else {
+              container.innerText = dots + content.slice(middle, end) + _this.actionText;
+            } // The height after interception still does not match the required height
+
+
+            if (container.offsetHeight > maxHeight) {
+              if (position === 'end') {
+                return tail(left, middle);
+              }
+
+              return tail(middle, right);
+            }
+
+            if (position === 'end') {
+              return tail(middle, right);
+            }
+
+            return tail(left, middle);
+          };
+
+          container.innerText = tail(0, end);
+        };
+
+        var middleTail = function middleTail(leftPart, rightPart) {
+          if (leftPart[1] - leftPart[0] <= 1 && rightPart[1] - rightPart[0] <= 1) {
+            return content.slice(0, leftPart[0]) + dots + content.slice(rightPart[1], end);
+          }
+
+          var leftMiddle = Math.floor((leftPart[0] + leftPart[1]) / 2);
+          var rightMiddle = Math.ceil((rightPart[0] + rightPart[1]) / 2);
+          container.innerText = _this.content.slice(0, leftMiddle) + _this.dots + _this.content.slice(rightMiddle, end) + _this.expandText;
+
+          if (container.offsetHeight >= maxHeight) {
+            return middleTail([leftPart[0], leftMiddle], [rightMiddle, rightPart[1]]);
+          }
+
+          return middleTail([leftMiddle, leftPart[1]], [rightPart[0], rightMiddle]);
+        };
+
+        var middle = 0 + end >> 1;
+        _this.position === 'middle' ? container.innerText = middleTail([0, middle], [middle, end]) : calcEllipse();
+        return container.innerText;
+      }; // Calculate the interceptional text
+
+
+      var container = cloneContainer();
+      if (!container) return;
+      var _container$style = container.style,
+          paddingBottom = _container$style.paddingBottom,
+          paddingTop = _container$style.paddingTop,
+          lineHeight = _container$style.lineHeight;
+      var maxHeight = Math.ceil((Number(this.rows) + 0.5) * this.pxToNum(lineHeight) + this.pxToNum(paddingTop) + this.pxToNum(paddingBottom));
+
+      if (maxHeight < container.offsetHeight) {
+        this.ellipsis = true;
+        this.text = calcEllipsisText(container, maxHeight);
+      } else {
+        this.text = this.content;
+        this.ellipsis = false;
+      }
+
+      document.body.removeChild(container);
+    },
+    onClickAction: function onClickAction(event) {
+      event.stopPropagation();
+      event.preventDefault();
+      this.expanded = !this.expanded; // emit('clickAction', event);
+    },
+    renderAction: function renderAction() {
+      var h = this.$createElement;
+      return h("span", {
+        "class": bem('action'),
+        "on": {
+          "click": this.onClickAction
+        }
+      }, [this.actionText]);
+    },
+    onClick: function onClick() {
+      if (this.ellipsis && this.expandType === 'dialog') {
+        Dialog.alert({
+          message: this.content
+        }).then(function () {});
+      }
+    }
+  },
+  mounted: function mounted() {
+    this.calcEllipsised();
+    window.addEventListener("resize", this.calcEllipsised);
+  },
+  render: function render() {
+    var h = arguments[0];
+    return h("div", {
+      "ref": "root",
+      "class": bem(),
+      "on": {
+        "click": this.onClick
+      }
+    }, [this.expanded ? this.content : this.text, this.expandType !== 'dialog' && this.ellipsis ? this.renderAction() : null]);
+  }
+});

package/es/text-ellipsis/index.less

@@ -0,0 +1,13 @@
+@import '../style/var';
+
+.@{base-prefix}-text-ellipsis {
+  width: 100%;
+  line-height: calc(200% - 8px);
+  white-space: pre-wrap;
+  word-break: break-all;
+
+  &__action {
+    cursor: pointer;
+    color: #0091FA;
+  }
+}

package/es/text-ellipsis/style/index.js

@@ -0,0 +1,9 @@
+import '../../style/base.css';
+import '../../overlay/index.css';
+import '../../info/index.css';
+import '../../icon/index.css';
+import '../../popup/index.css';
+import '../../loading/index.css';
+import '../../button/index.css';
+import '../../dialog/index.css';
+import '../index.css';

package/es/text-ellipsis/style/less.js

@@ -0,0 +1,9 @@
+import '../../style/base.less';
+import '../../overlay/index.less';
+import '../../info/index.less';
+import '../../icon/index.less';
+import '../../popup/index.less';
+import '../../loading/index.less';
+import '../../button/index.less';
+import '../../dialog/index.less';
+import '../index.less';

package/es/utils/router.js

@@ -2,8 +2,7 @@
  * Vue Router support
  */
 function isRedundantNavigation(err) {
-  return err.name === 'NavigationDuplicated' || // compatible with vue-router@3.3
-  err.message && err.message.indexOf('redundant navigation') !== -1;
+  return err.name === 'NavigationDuplicated' || err.message && err.message.indexOf('redundant navigation') !== -1;
 }
 
 export function route(router, config) {