| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227 | // Utilsimport { createNamespace, addUnit } from '../utils';import { preventDefault } from '../utils/dom/event'; // Mixinsimport { TouchMixin } from '../mixins/touch';import { FieldMixin } from '../mixins/field'; // Componentsimport Icon from '../icon';var _createNamespace = createNamespace('rate'),    createComponent = _createNamespace[0],    bem = _createNamespace[1];function getRateStatus(value, index, allowHalf) {  if (value >= index) {    return 'full';  }  if (value + 0.5 >= index && allowHalf) {    return 'half';  }  return 'void';}export default createComponent({  mixins: [TouchMixin, FieldMixin],  props: {    size: [Number, String],    color: String,    gutter: [Number, String],    readonly: Boolean,    disabled: Boolean,    allowHalf: Boolean,    voidColor: String,    iconPrefix: String,    disabledColor: String,    value: {      type: Number,      default: 0    },    icon: {      type: String,      default: 'star'    },    voidIcon: {      type: String,      default: 'star-o'    },    count: {      type: [Number, String],      default: 5    },    touchable: {      type: Boolean,      default: true    }  },  computed: {    list: function list() {      var list = [];      for (var i = 1; i <= this.count; i++) {        list.push(getRateStatus(this.value, i, this.allowHalf));      }      return list;    },    sizeWithUnit: function sizeWithUnit() {      return addUnit(this.size);    },    gutterWithUnit: function gutterWithUnit() {      return addUnit(this.gutter);    }  },  mounted: function mounted() {    this.bindTouchEvent(this.$el);  },  methods: {    select: function select(index) {      if (!this.disabled && !this.readonly && index !== this.value) {        this.$emit('input', index);        this.$emit('change', index);      }    },    onTouchStart: function onTouchStart(event) {      var _this = this;      if (this.readonly || this.disabled || !this.touchable) {        return;      }      this.touchStart(event);      var rects = this.$refs.items.map(function (item) {        return item.getBoundingClientRect();      });      var ranges = [];      rects.forEach(function (rect, index) {        if (_this.allowHalf) {          ranges.push({            score: index + 0.5,            left: rect.left          }, {            score: index + 1,            left: rect.left + rect.width / 2          });        } else {          ranges.push({            score: index + 1,            left: rect.left          });        }      });      this.ranges = ranges;    },    onTouchMove: function onTouchMove(event) {      if (this.readonly || this.disabled || !this.touchable) {        return;      }      this.touchMove(event);      if (this.direction === 'horizontal') {        preventDefault(event);        var clientX = event.touches[0].clientX;        this.select(this.getScoreByPosition(clientX));      }    },    getScoreByPosition: function getScoreByPosition(x) {      for (var i = this.ranges.length - 1; i > 0; i--) {        if (x > this.ranges[i].left) {          return this.ranges[i].score;        }      }      return this.allowHalf ? 0.5 : 1;    },    genStar: function genStar(status, index) {      var _this2 = this;      var h = this.$createElement;      var icon = this.icon,          color = this.color,          count = this.count,          voidIcon = this.voidIcon,          disabled = this.disabled,          voidColor = this.voidColor,          disabledColor = this.disabledColor;      var score = index + 1;      var isFull = status === 'full';      var isVoid = status === 'void';      var style;      if (this.gutterWithUnit && score !== +count) {        style = {          paddingRight: this.gutterWithUnit        };      }      return h("div", {        "ref": "items",        "refInFor": true,        "key": index,        "attrs": {          "role": "radio",          "tabindex": "0",          "aria-setsize": count,          "aria-posinset": score,          "aria-checked": String(!isVoid)        },        "style": style,        "class": bem('item')      }, [h(Icon, {        "attrs": {          "size": this.sizeWithUnit,          "name": isFull ? icon : voidIcon,          "color": disabled ? disabledColor : isFull ? color : voidColor,          "classPrefix": this.iconPrefix,          "data-score": score        },        "class": bem('icon', {          disabled: disabled,          full: isFull        }),        "on": {          "click": function click() {            _this2.select(score);          }        }      }), this.allowHalf && h(Icon, {        "attrs": {          "size": this.sizeWithUnit,          "name": isVoid ? voidIcon : icon,          "color": disabled ? disabledColor : isVoid ? voidColor : color,          "classPrefix": this.iconPrefix,          "data-score": score - 0.5        },        "class": bem('icon', ['half', {          disabled: disabled,          full: !isVoid        }]),        "on": {          "click": function click() {            _this2.select(score - 0.5);          }        }      })]);    }  },  render: function render() {    var _this3 = this;    var h = arguments[0];    return h("div", {      "class": bem({        readonly: this.readonly,        disabled: this.disabled      }),      "attrs": {        "tabindex": "0",        "role": "radiogroup"      }    }, [this.list.map(function (status, index) {      return _this3.genStar(status, index);    })]);  }});
 |