zartui 2.0.31 → 2.0.33

package/es/collapse-item/index.css

@@ -1 +1 @@
-.zt-collapse-item{position:relative}.zt-collapse-item__title{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;background-color:transparent;padding:10px 16px}.zt-collapse-item__title .zt-cell{padding-left:12px}.zt-collapse-item__bar{position:absolute;left:0;width:4px;height:16px;background:#0091fa}.zt-collapse-item__bar--custom{background:#fff}.zt-collapse-item__icon{font-size:24px;color:rgba(0,0,0,.2);-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.zt-collapse-item__icon--expanded{color:#0091fa;-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.zt-collapse-item__icon--custom{color:#fff}.zt-collapse-item__text{-webkit-box-flex:1;-webkit-flex:1;flex:1;font-weight:700;font-size:16px;color:#2d4b73;line-height:20px}.zt-collapse-item__text--custom{color:#fff}.zt-collapse-item__text--disabled{cursor:not-allowed}.zt-collapse-item__wrapper{overflow:hidden;-webkit-transition:height .3s ease-in-out;transition:height .3s ease-in-out;will-change:height}.zt-collapse-item__content{color:#2d4b73;font-size:14px;line-height:20px;background-color:transparent}
+.zt-collapse-item{position:relative}.zt-collapse-item__container{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;background-color:transparent}.zt-collapse-item__container .zt-cell{padding:10px 16px;background-color:transparent}.zt-collapse-item__bar{position:absolute;left:0;width:4px;height:16px;background:#0091fa}.zt-collapse-item__title--iconWhite .zt-icon::before{color:#fff!important}.zt-collapse-item__title--titleWhite .zt-cell__title .zt-cell__title-content{color:#fff}.zt-collapse-item__title--titleWhite .zt-cell__value{color:#fff}.zt-collapse-item__title .zt-cell__title{line-height:24px;font-weight:700;font-size:16px;color:#2d4b73}.zt-collapse-item__title .zt-collapse-item__right-icon::before{font-size:24px;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;color:rgba(0,0,0,.2)}.zt-collapse-item__title::after{right:16px;display:none}.zt-collapse-item__title--expanded .zt-collapse-item__right-icon::before{-webkit-transform:rotate(-180deg);transform:rotate(-180deg);color:#0091fa}.zt-collapse-item__title--expanded::after{display:block}.zt-collapse-item__title--borderless::after{display:none}.zt-collapse-item__title--disabled{cursor:not-allowed}.zt-collapse-item__title--disabled,.zt-collapse-item__title--disabled .zt-cell__right-icon{color:#c8c9cc}.zt-collapse-item__title--disabled:active{background-color:#fff}.zt-collapse-item__wrapper{overflow:hidden;-webkit-transition:height .3s ease-in-out;transition:height .3s ease-in-out;will-change:height}.zt-collapse-item__content{color:#2d4b73;font-size:14px;line-height:20px;background-color:transparent}

package/es/collapse-item/index.js

@@ -1,26 +1,33 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 // Utils
 import { createNamespace } from '../utils';
 import { raf, doubleRaf } from '../utils/dom/raf'; // Mixins
 
 import { ChildrenMixin } from '../mixins/relation'; // Components
 
-import Icon from '../icon';
+import Cell from '../cell';
+import { cellProps } from '../cell/shared';
+import Icon from "../icon";
 
 var _createNamespace = createNamespace('collapse-item'),
     createComponent = _createNamespace[0],
     bem = _createNamespace[1];
 
+var CELL_SLOTS = ['title', 'icon', 'right-icon'];
 export default createComponent({
   mixins: [ChildrenMixin('ztCollapse')],
-  props: {
+  props: _extends({}, cellProps, {
     name: [Number, String],
-    title: [Number, String],
+    disabled: Boolean,
+    isLink: {
+      type: Boolean,
+      default: true
+    },
     titleBG: {
       type: String,
       default: ""
-    },
-    color: String
-  },
+    }
+  }),
   data: function data() {
     return {
       show: null,
@@ -100,7 +107,9 @@ export default createComponent({
   },
   methods: {
     onClick: function onClick() {
-      this.toggle();
+      if (!this.disabled) {
+        this.toggle();
+      }
     },
     // @exposed-api
     toggle: function toggle(expanded) {
@@ -122,35 +131,63 @@ export default createComponent({
       }
     },
     genTitle: function genTitle() {
+      var _this3 = this;
+
       var h = this.$createElement;
-      var expanded = this.expanded,
-          titleBG = this.titleBG,
-          color = this.color;
-      return h("div", {
-        "class": [bem("title"), expanded ? " half-border-bottom" : ""],
-        "style": titleBG ? "background:" + titleBG + ";color:#fff;" : "",
-        "on": {
-          "click": this.onClick
+      var border = this.border,
+          disabled = this.disabled,
+          expanded = this.expanded,
+          titleBG = this.titleBG;
+      var titleSlots = CELL_SLOTS.reduce(function (slots, name) {
+        slots['right-icon'] = function () {
+          return h(Icon, {
+            "class": bem('right-icon'),
+            "attrs": {
+              "name": 'keyboard-arrow-up'
+            }
+          });
+        };
+
+        if (_this3.slots(name)) {
+          slots[name] = function () {
+            return _this3.slots(name);
+          };
         }
-      }, [h("span", {
-        "class": bem("bar", {
-          custom: titleBG
-        }),
-        "style": color ? "background:" + color + ";" : ''
-      }), h("span", {
-        "class": bem("text", {
-          custom: titleBG
-        }),
-        "style": color ? "color:" + color + ";" : ''
-      }, [this.title]), h(Icon, {
+
+        return slots;
+      }, {});
+
+      if (this.slots('value')) {
+        titleSlots.default = function () {
+          return _this3.slots('value');
+        };
+      }
+
+      return h("div", {
+        "class": bem("container") + " half-border-bottom",
+        "style": titleBG ? "background:" + titleBG + ";color:#fff;" : ""
+      }, [h("div", {
+        "class": bem("bar"),
+        "style": titleBG ? 'background-color:#fff;' : ''
+      }), h(Cell, {
         "attrs": {
-          "name": "keyboard-arrow-up"
+          "role": "button",
+          "tabindex": disabled ? -1 : 0,
+          "aria-expanded": String(expanded)
         },
-        "style": color ? "color:" + color + ";" : '',
-        "class": bem('icon', {
+        "class": bem('title', {
+          disabled: disabled,
           expanded: expanded,
-          custom: titleBG
-        })
+          borderless: !border,
+          iconWhite: titleBG,
+          titleWhite: titleBG
+        }),
+        "on": {
+          "click": this.onClick
+        },
+        "scopedSlots": titleSlots,
+        "style": titleBG ? "background:" + titleBG + ";color:#fff;" : "",
+        "props": _extends({}, this.$props)
       })]);
     },
     genContent: function genContent() {

package/es/collapse-item/index.less

@@ -4,13 +4,13 @@
 .zt-collapse-item {
   position: relative;
 
-  &__title {
+  &__container {
     display: flex;
     align-items: center;
     background-color: @collapse-item-content-background-color;
-    padding: @collapse-item-title-padding;
     .zt-cell {
-      padding-left: @collapse-item-title-cell-padding;
+      padding: @collapse-item-content-padding;
+      background-color: @collapse-item-content-background-color;
     }
   }
   &__bar {
@@ -19,38 +19,74 @@
     width: @collapse-item-bar-width;
     height: @collapse-item-bar-height;
     background: @blue;
-    &--custom {
-      background: @white;
-    }
   }
-  &__icon {
-    font-size: @collapse-item-icon-font-size;
-    color: @gray-a2;
-    transition: transform 0.3s;
 
-    &--expanded {
-      color: @blue;
-      transform: rotate(-180deg);
+  &__title {
+    &--iconWhite {
+      .zt-icon::before {
+        color: @white !important;
+      }
     }
 
-    &--custom {
-      color: @white;
+    &--titleWhite {
+      .zt-cell__title {
+        .zt-cell__title-content {
+          color: @white;
+        }
+      }
+
+      .zt-cell__value {
+        color: @white;
+      }
     }
-  }
 
-  &__text {
-    flex: 1;
-    font-weight: @font-weight-bold;
-    font-size: @collapse-item-title-font-size;
-    color: @collapse-item-content-text-color;
-    line-height: @collapse-item-content-line-height;
+    .zt-cell__title {
+      line-height: @collapse-item-title-line-height;
+      font-weight: bold;
+      font-size: @collapse-item-title-font-size;
+      color: @collapse-item-content-text-color;
+    }
+    .zt-collapse-item__right-icon::before {
+      // using translateZ to fix safari rendering issues
+      // see: https://github.com/youzan/vant/issues/8608
+      font-size: @collapse-item-icon-size;
+      transition: transform @collapse-item-transition-duration;
+      color: @gray-a2;
+    }
+
+    &::after {
+      right: @padding-md;
+      display: none;
+    }
+
+    &--expanded {
+      .zt-collapse-item__right-icon::before {
+        transform: rotate(-180deg);
+        color: @blue;
+      }
 
-    &--custom {
-      color: @white;
+      &::after {
+        display: block;
+      }
+    }
+
+    &--borderless {
+      &::after {
+        display: none;
+      }
     }
 
     &--disabled {
       cursor: not-allowed;
+
+      &,
+      & .zt-cell__right-icon {
+        color: @collapse-item-title-disabled-color;
+      }
+
+      &:active {
+        background-color: @white;
+      }
     }
   }
 

package/es/collapse-item/style/index.js

@@ -1,4 +1,5 @@
 import '../../style/base.css';
 import '../../info/index.css';
 import '../../icon/index.css';
+import '../../cell/index.css';
 import '../index.css';

package/es/collapse-item/style/less.js

@@ -1,4 +1,5 @@
 import '../../style/base.less';
 import '../../info/index.less';
 import '../../icon/index.less';
+import '../../cell/index.less';
 import '../index.less';

package/es/datetime-picker/DatePicker.js

@@ -5,6 +5,7 @@ import { isDate } from '../utils/validate/date';
 import { padZero } from '../utils/format/string';
 import { getTrueValue, getMonthEndDay } from './utils';
 import { sharedProps, TimePickerMixin } from './shared';
+import { formatDateByDate, FORMAT } from '../utils/format/date-util';
 var currentYear = new Date().getFullYear();
 
 var _createNamespace = createNamespace('date-picker'),
@@ -313,9 +314,54 @@ export default createComponent({
     updateColumnValue: function updateColumnValue() {
       var _this5 = this;
 
-      var defaultValue = new Date();
+      // 根据type将默认时间和最大最小时间转换后再比较
+      // 如果调用者传入new Date(),与此处new Date()会有时间差，目前只支持到分钟，可以忽略时间差
+      var now = new Date();
+      var dStr = "";
+      var minStr = "";
+      var maxStr = "";
 
-      if (defaultValue.getTime() < this.minDate.getTime() || defaultValue.getTime() > this.maxDate.getTime()) {
+      switch (this.type) {
+        case "date":
+          dStr = formatDateByDate(now, FORMAT.FORMAT_YMD);
+          minStr = formatDateByDate(this.minDate, FORMAT.FORMAT_YMD);
+          maxStr = formatDateByDate(this.maxDate, FORMAT.FORMAT_YMD);
+          break;
+
+        case "year-month":
+          dStr = formatDateByDate(now, FORMAT.FORMAT_YM);
+          minStr = formatDateByDate(this.minDate, FORMAT.FORMAT_YM);
+          maxStr = formatDateByDate(this.maxDate, FORMAT.FORMAT_YM);
+          break;
+
+        case "month-day":
+          dStr = formatDateByDate(now, FORMAT.FORMAT_MD);
+          minStr = formatDateByDate(this.minDate, FORMAT.FORMAT_MD);
+          maxStr = formatDateByDate(this.maxDate, FORMAT.FORMAT_MD);
+          break;
+
+        case "datetime":
+          dStr = formatDateByDate(now, FORMAT.FORMAT_YMDHM);
+          minStr = formatDateByDate(this.minDate, FORMAT.FORMAT_YMDHM);
+          maxStr = formatDateByDate(this.maxDate, FORMAT.FORMAT_YMDHM);
+          break;
+
+        case "datehour":
+          // "2022/11/11 14"这种格式无法使用new Date
+          dStr = formatDateByDate(now, FORMAT.FORMAT_YMDH) + ":00:00";
+          minStr = formatDateByDate(this.minDate, FORMAT.FORMAT_YMDH) + ":00:00";
+          maxStr = formatDateByDate(this.maxDate, FORMAT.FORMAT_YMDH) + ":00:00";
+          break;
+
+        default:
+          break;
+      }
+
+      var defaultValue = new Date(dStr.replace(/-/g, "/"));
+      var minDate = new Date(minStr.replace(/-/g, "/"));
+      var maxDate = new Date(maxStr.replace(/-/g, "/"));
+
+      if (defaultValue < minDate || defaultValue > maxDate) {
         defaultValue = this.minDate;
       }
 

package/es/field/index.js

@@ -100,6 +100,12 @@ export default createComponent({
       this.resetValidation();
       this.validateWithTrigger('onChange');
       this.$nextTick(this.adjustSize);
+    },
+    autosize: {
+      deep: true,
+      handler: function handler() {
+        this.$nextTick(this.adjustSize);
+      }
     }
   },
   mounted: function mounted() {

package/es/index.js

@@ -44,8 +44,6 @@ import NoticeBar from './notice-bar';
 import NumberKeyboard from './number-keyboard';
 import Overlay from './overlay';
 import PasswordInput from './password-input';
-import PdfViewer from './pdf-viewer';
-import PdfViewerV2 from './pdf-viewer-v2';
 import Picker from './picker';
 import Popover from './popover';
 import Popup from './popup';
@@ -76,10 +74,10 @@ import Tag from './tag';
 import Timeline from './timeline';
 import Toast from './toast';
 import Uploader from './uploader';
-var version = '2.0.31';
+var version = '2.0.33';
 
 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, PdfViewer, PdfViewerV2, 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, Timeline, Toast, Uploader];
   components.forEach(function (item) {
     if (item.install) {
       Vue.use(item);
@@ -93,7 +91,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, PdfViewer, PdfViewerV2, 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, Timeline, Toast, Uploader };
 export default {
   install: install,
   version: version

package/es/popup/index.js

@@ -1,6 +1,7 @@
 import { createNamespace, isDef } from '../utils';
 import { PopupMixin } from '../mixins/popup';
 import Icon from '../icon';
+import { unitToPx } from "../utils/format/unit";
 
 var _createNamespace = createNamespace('popup'),
     createComponent = _createNamespace[0],
@@ -42,6 +43,15 @@ export default createComponent({
       type: Number,
       default: 60
     },
+    // 控制滑动区域的高度,滑动的最小高
+    minDragHeight: {
+      type: String,
+      default: '40px'
+    },
+    maxDragHeight: {
+      type: String,
+      default: '85vh'
+    },
     sliderShow: {
       type: Boolean,
       default: false
@@ -69,13 +79,10 @@ export default createComponent({
   },
   data: function data() {
     return {
-      positionY: 0,
       timerId: null,
       contentStyle: "height:" + this.sliderContentHeight + "px;",
       touchHeight: 0,
-      touchPoint: 0,
-      // 控制滑动区域的高度
-      touchAreaHeight: 40
+      touchPoint: 0
     };
   },
   methods: {
@@ -98,14 +105,15 @@ export default createComponent({
       }
 
       var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
-      this.positionY = event.touches[0].clientY;
+      var touchAreaHeight = unitToPx(this.minDragHeight);
+      var positionY = event.touches[0].clientY;
       this.timerId = setTimeout(function () {
-        if (_this2.positionY === 0 || _this2.positionY < h * 0.15) {
+        if (positionY === 0 || positionY < h - unitToPx(_this2.maxDragHeight)) {
           return;
         }
 
-        _this2.touchHeight = _this2.positionY - _this2.touchAreaHeight > h - _this2.touchAreaHeight ? h - _this2.touchAreaHeight + _this2.touchPoint : _this2.positionY;
-        _this2.contentStyle = "height:" + (h - _this2.touchHeight - _this2.touchAreaHeight + _this2.touchPoint) + "px;";
+        _this2.touchHeight = positionY - touchAreaHeight > h - touchAreaHeight ? h - touchAreaHeight + _this2.touchPoint : positionY;
+        _this2.contentStyle = "height:" + (h - _this2.touchHeight - touchAreaHeight + _this2.touchPoint) + "px;";
       }, 10);
     },
     endMove: function endMove() {
@@ -154,7 +162,8 @@ export default createComponent({
           "touchmove": this.move,
           "touchend": this.endMove,
           "touchstart": this.startMove
-        }
+        },
+        "style": "height:" + this.minDragHeight
       }, [h("div", {
         "class": bem('slider-bar')
       })]), h("div", {

package/es/style/var.less

@@ -325,16 +325,17 @@
 
 // Collapse
 @collapse-item-transition-duration: @animation-duration-base;
-@collapse-item-title-padding: 10px 16px;
-@collapse-item-title-cell-padding: @padding-sm;
-@collapse-item-bar-width: 4px;
-@collapse-item-bar-height: 16px;
-@collapse-item-icon-font-size: 24px;
+@collapse-item-content-padding: 10px @padding-md;
 @collapse-item-title-font-size: @font-size-lg;
+@collapse-item-title-line-height: 24px;
+@collapse-item-icon-size: 24px;
 @collapse-item-content-font-size: @font-size-md;
 @collapse-item-content-line-height: @line-height-md;
 @collapse-item-content-text-color: #2D4B73;
 @collapse-item-content-background-color: transparent;
+@collapse-item-title-disabled-color: @gray-5;
+@collapse-item-bar-height: 16px;
+@collapse-item-bar-width: 4px;
 
 // ContactCard
 @contact-card-padding: @padding-md;

package/es/utils/format/date-util.js

@@ -21,6 +21,8 @@ export var FORMAT = {
   FORMAT_YMD_SLASH: "yyyy/MM/dd",
   //英文简写（默认）如：2010-12
   FORMAT_YM: "yyyy-MM",
+  //英文全称  如：2010-12-01 23
+  FORMAT_YMDH: "yyyy-MM-dd HH",
   //英文全称  如：2010-12-01 23:15
   FORMAT_YMDHM: "yyyy-MM-dd HH:mm",
   //英文全称  如：2010-12-01 23:15:06

package/lib/collapse-item/index.css

@@ -1 +1 @@
-.zt-collapse-item{position:relative}.zt-collapse-item__title{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;background-color:transparent;padding:10px 16px}.zt-collapse-item__title .zt-cell{padding-left:12px}.zt-collapse-item__bar{position:absolute;left:0;width:4px;height:16px;background:#0091fa}.zt-collapse-item__bar--custom{background:#fff}.zt-collapse-item__icon{font-size:24px;color:rgba(0,0,0,.2);-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.zt-collapse-item__icon--expanded{color:#0091fa;-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.zt-collapse-item__icon--custom{color:#fff}.zt-collapse-item__text{-webkit-box-flex:1;-webkit-flex:1;flex:1;font-weight:700;font-size:16px;color:#2d4b73;line-height:20px}.zt-collapse-item__text--custom{color:#fff}.zt-collapse-item__text--disabled{cursor:not-allowed}.zt-collapse-item__wrapper{overflow:hidden;-webkit-transition:height .3s ease-in-out;transition:height .3s ease-in-out;will-change:height}.zt-collapse-item__content{color:#2d4b73;font-size:14px;line-height:20px;background-color:transparent}
+.zt-collapse-item{position:relative}.zt-collapse-item__container{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;background-color:transparent}.zt-collapse-item__container .zt-cell{padding:10px 16px;background-color:transparent}.zt-collapse-item__bar{position:absolute;left:0;width:4px;height:16px;background:#0091fa}.zt-collapse-item__title--iconWhite .zt-icon::before{color:#fff!important}.zt-collapse-item__title--titleWhite .zt-cell__title .zt-cell__title-content{color:#fff}.zt-collapse-item__title--titleWhite .zt-cell__value{color:#fff}.zt-collapse-item__title .zt-cell__title{line-height:24px;font-weight:700;font-size:16px;color:#2d4b73}.zt-collapse-item__title .zt-collapse-item__right-icon::before{font-size:24px;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;color:rgba(0,0,0,.2)}.zt-collapse-item__title::after{right:16px;display:none}.zt-collapse-item__title--expanded .zt-collapse-item__right-icon::before{-webkit-transform:rotate(-180deg);transform:rotate(-180deg);color:#0091fa}.zt-collapse-item__title--expanded::after{display:block}.zt-collapse-item__title--borderless::after{display:none}.zt-collapse-item__title--disabled{cursor:not-allowed}.zt-collapse-item__title--disabled,.zt-collapse-item__title--disabled .zt-cell__right-icon{color:#c8c9cc}.zt-collapse-item__title--disabled:active{background-color:#fff}.zt-collapse-item__wrapper{overflow:hidden;-webkit-transition:height .3s ease-in-out;transition:height .3s ease-in-out;will-change:height}.zt-collapse-item__content{color:#2d4b73;font-size:14px;line-height:20px;background-color:transparent}

package/lib/collapse-item/index.js

@@ -5,12 +5,18 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _utils = require("../utils");
 
 var _raf = require("../utils/dom/raf");
 
 var _relation = require("../mixins/relation");
 
+var _cell = _interopRequireDefault(require("../cell"));
+
+var _shared = require("../cell/shared");
+
 var _icon = _interopRequireDefault(require("../icon"));
 
 // Utils
@@ -20,17 +26,22 @@ var _createNamespace = (0, _utils.createNamespace)('collapse-item'),
     createComponent = _createNamespace[0],
     bem = _createNamespace[1];
 
+var CELL_SLOTS = ['title', 'icon', 'right-icon'];
+
 var _default = createComponent({
   mixins: [(0, _relation.ChildrenMixin)('ztCollapse')],
-  props: {
+  props: (0, _extends2.default)({}, _shared.cellProps, {
     name: [Number, String],
-    title: [Number, String],
+    disabled: Boolean,
+    isLink: {
+      type: Boolean,
+      default: true
+    },
     titleBG: {
       type: String,
       default: ""
-    },
-    color: String
-  },
+    }
+  }),
   data: function data() {
     return {
       show: null,
@@ -110,7 +121,9 @@ var _default = createComponent({
   },
   methods: {
     onClick: function onClick() {
-      this.toggle();
+      if (!this.disabled) {
+        this.toggle();
+      }
     },
     // @exposed-api
     toggle: function toggle(expanded) {
@@ -132,35 +145,63 @@ var _default = createComponent({
       }
     },
     genTitle: function genTitle() {
+      var _this3 = this;
+
       var h = this.$createElement;
-      var expanded = this.expanded,
-          titleBG = this.titleBG,
-          color = this.color;
-      return h("div", {
-        "class": [bem("title"), expanded ? " half-border-bottom" : ""],
-        "style": titleBG ? "background:" + titleBG + ";color:#fff;" : "",
-        "on": {
-          "click": this.onClick
+      var border = this.border,
+          disabled = this.disabled,
+          expanded = this.expanded,
+          titleBG = this.titleBG;
+      var titleSlots = CELL_SLOTS.reduce(function (slots, name) {
+        slots['right-icon'] = function () {
+          return h(_icon.default, {
+            "class": bem('right-icon'),
+            "attrs": {
+              "name": 'keyboard-arrow-up'
+            }
+          });
+        };
+
+        if (_this3.slots(name)) {
+          slots[name] = function () {
+            return _this3.slots(name);
+          };
         }
-      }, [h("span", {
-        "class": bem("bar", {
-          custom: titleBG
-        }),
-        "style": color ? "background:" + color + ";" : ''
-      }), h("span", {
-        "class": bem("text", {
-          custom: titleBG
-        }),
-        "style": color ? "color:" + color + ";" : ''
-      }, [this.title]), h(_icon.default, {
+
+        return slots;
+      }, {});
+
+      if (this.slots('value')) {
+        titleSlots.default = function () {
+          return _this3.slots('value');
+        };
+      }
+
+      return h("div", {
+        "class": bem("container") + " half-border-bottom",
+        "style": titleBG ? "background:" + titleBG + ";color:#fff;" : ""
+      }, [h("div", {
+        "class": bem("bar"),
+        "style": titleBG ? 'background-color:#fff;' : ''
+      }), h(_cell.default, {
         "attrs": {
-          "name": "keyboard-arrow-up"
+          "role": "button",
+          "tabindex": disabled ? -1 : 0,
+          "aria-expanded": String(expanded)
         },
-        "style": color ? "color:" + color + ";" : '',
-        "class": bem('icon', {
+        "class": bem('title', {
+          disabled: disabled,
           expanded: expanded,
-          custom: titleBG
-        })
+          borderless: !border,
+          iconWhite: titleBG,
+          titleWhite: titleBG
+        }),
+        "on": {
+          "click": this.onClick
+        },
+        "scopedSlots": titleSlots,
+        "style": titleBG ? "background:" + titleBG + ";color:#fff;" : "",
+        "props": (0, _extends2.default)({}, this.$props)
       })]);
     },
     genContent: function genContent() {