@meve/ui/es/rate/index.js

Argon design system components library

import _extends from "@babel/runtime/helpers/esm/extends";
import Ripple from '../ripple';
import FormItem from '../form-item';
import Icon from '../icon';
import { createNamespace } from '../utils/create';
import { props } from './props';
import { createChildrenMixin } from '../utils/mixins/relation';
import { toNumber } from '../utils/shared';







var _createNamespace = createNamespace('rate'),
    createComponent = _createNamespace.createComponent,
    namespace = _createNamespace.namespace;

var RatePlugin = createComponent({
  props: props,
  mixins: [createChildrenMixin('form', {
    parentKey: 'form',
    childrenKey: 'formComponents'
  })],
  directives: {
    Ripple: Ripple
  },
  watch: {
    value: {
      handler: function handler(newValue) {
        this.activeRate = toNumber(newValue);
      },
      immediate: true
    }
  },
  data: function data() {
    return {
      errorMessage: '',
      activeRate: 0
    };
  },
  methods: {
    // expose
    reset: function reset() {
      this.$emit('input', 0);
      this.resetValidation();
    },
    // expose
    validate: function validate() {
      this.$refs.formItem.validate();
    },
    // expose
    resetValidation: function resetValidation() {
      this.$refs.formItem.resetValidation();
    },
    nextTickValidateWithTrigger: function nextTickValidateWithTrigger(trigger) {
      var _this = this;

      this.$nextTick(function () {
        var _this$$refs$formItem;

        (_this$$refs$formItem = _this.$refs.formItem) == null ? void 0 : _this$$refs$formItem.validateWithTrigger(_this.validateTrigger, trigger, _this.rules, _this.value);
      });
    },
    handleErrorMessageChange: function handleErrorMessageChange(errorMessage) {
      this.errorMessage = errorMessage;
    },
    handleMouseenter: function handleMouseenter(rate) {
      var _this$form, _this$form2;

      if ((_this$form = this.form) != null && _this$form.disabled || this.disabled || (_this$form2 = this.form) != null && _this$form2.readonly || this.readonly) {
        return;
      }

      this.activeRate = rate;
    },
    handleMouseleave: function handleMouseleave() {
      this.activeRate = this.value;
    },
    handleClick: function handleClick(rate) {
      var _this$form3, _this$form4;

      if ((_this$form3 = this.form) != null && _this$form3.disabled || this.disabled) {
        return;
      }

      this.$emit('click', rate);

      if ((_this$form4 = this.form) != null && _this$form4.readonly || this.readonly) {
        return;
      }

      this.$emit('input', rate);
      this.$emit('change', rate);
      this.nextTickValidateWithTrigger('onChange');
    },
    renderRate: function renderRate(rate, position) {
      var _this2 = this,
          _this$form5;

      var h = this.$createElement;
      return h("div", {
        "class": [namespace('__rate-item'), this.half ? namespace('--half') : null, this.half ? namespace("--" + this.size + "-half-rate") : namespace("--" + this.size + "-rate")],
        "on": _extends({}, {
          "mouseenter": function mouseenter($event) {
            for (var _len = arguments.length, attrs = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
              attrs[_key - 1] = arguments[_key];
            }

            (function () {
              return _this2.handleMouseenter(rate);
            }).apply(void 0, [$event].concat(attrs));
          },
          "click": function click($event) {
            for (var _len2 = arguments.length, attrs = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
              attrs[_key2 - 1] = arguments[_key2];
            }

            (function () {
              return _this2.handleClick(rate);
            }).apply(void 0, [$event].concat(attrs));
          }
        })
      }, [h(Icon, {
        "class": [namespace('__rate'), namespace("--" + position + "-rate"), this.activeRate >= rate ? namespace('--active') : null, (_this$form5 = this.form) != null && _this$form5.disabled || this.disabled ? namespace('--disabled') : null, this.activeRate >= rate && this.errorMessage ? namespace('--error') : null],
        "style": {
          color: this.activeRate >= rate ? this.color : undefined
        },
        "attrs": {
          "rate-cover": true,
          "name": this.icon
        }
      })]);
    },
    renderRates: function renderRates() {
      var _this3 = this;

      var h = this.$createElement;
      var rates = Array.from({
        length: this.count
      }).map(function (_, index) {
        var _this3$form, _this3$form2;

        var rate = index + (_this3.half ? 0.5 : 1);
        return h("div", {
          "class": [namespace('__rate-wrapper'), namespace('--active'), _this3.errorMessage ? namespace('--error') : null],
          "style": {
            color: _this3.color
          },
          "directives": [{
            name: "ripple",
            value: {
              disabled: !_this3.ripple || ((_this3$form = _this3.form) == null ? void 0 : _this3$form.disabled) || ((_this3$form2 = _this3.form) == null ? void 0 : _this3$form2.readonly) || _this3.disabled || _this3.readonly
            }
          }]
        }, [_this3.renderRate(rate, 'left'), _this3.half && _this3.renderRate(rate + 0.5, 'right')]);
      });
      return h("div", {
        "class": namespace('__rates'),
        "on": _extends({}, {
          "mouseleave": function mouseleave($event) {
            for (var _len3 = arguments.length, attrs = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
              attrs[_key3 - 1] = arguments[_key3];
            }

            _this3.handleMouseleave.apply(_this3, [$event].concat(attrs));
          }
        })
      }, [rates]);
    }
  },
  render: function render() {
    var h = arguments[0];
    var label = this.label,
        value = this.value,
        rules = this.rules,
        handleErrorMessageChange = this.handleErrorMessageChange;
    return h(FormItem, {
      "attrs": {
        "rate-cover": true,
        "label": label,
        "value": value,
        "rules": rules
      },
      "ref": "formItem",
      "on": _extends({}, {
        'error-message-change': handleErrorMessageChange
      })
    }, [this.renderRates()]);
  }
});
export var _RateComponent = RatePlugin;
export default RatePlugin;