winbox-ui-next/lib/rate/rate.js

We Design Vue 2.0: A Vue.js 3 UI Library

"use strict";
var vue = require("vue");
var NP = require("number-precision");
var index = require("../icon/icon-star-fill/index.js");
var index$1 = require("../icon/icon-face-meh-fill/index.js");
var index$3 = require("../icon/icon-face-smile-fill/index.js");
var index$2 = require("../icon/icon-face-frown-fill/index.js");
var globalConfig = require("../_utils/global-config.js");
function _interopDefaultLegacy(e) {
  return e && typeof e === "object" && "default" in e ? e : { "default": e };
}
var NP__default = /* @__PURE__ */ _interopDefaultLegacy(NP);
var _Rate = vue.defineComponent({
  name: "Rate",
  props: {
    count: {
      type: Number,
      default: 5
    },
    modelValue: {
      type: Number,
      default: void 0
    },
    defaultValue: {
      type: Number,
      default: 0
    },
    allowHalf: {
      type: Boolean,
      default: false
    },
    clearable: {
      type: Boolean,
      default: false
    },
    grading: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    onChange: {
      type: [Function, Array]
    },
    onHoverChange: {
      type: [Function, Array]
    }
  },
  emits: [
    "update:modelValue",
    "change",
    "hoverChange"
  ],
  setup(props, {
    emit,
    slots
  }) {
    const prefixCls = globalConfig.getPrefixCls("rate");
    const _value = vue.ref(props.defaultValue);
    const animation = vue.ref(false);
    const hoverIndex = vue.ref(0);
    const computedValue = vue.computed(() => {
      var _a;
      return (_a = props.modelValue) != null ? _a : _value.value;
    });
    const disabled = vue.computed(() => props.disabled || props.readonly);
    const resetHoverIndex = () => {
      if (hoverIndex.value) {
        hoverIndex.value = 0;
        emit("hoverChange", 0);
      }
    };
    const handleMouseEnter = (index2, isHalf) => {
      const newHoverIndex = isHalf && props.allowHalf ? index2 + 0.5 : index2 + 1;
      if (newHoverIndex !== hoverIndex.value) {
        hoverIndex.value = newHoverIndex;
        emit("hoverChange", newHoverIndex);
      }
    };
    const handleClick = (index2, isHalf) => {
      const newValue = isHalf && props.allowHalf ? index2 + 0.5 : index2 + 1;
      animation.value = true;
      if (newValue !== computedValue.value) {
        _value.value = newValue;
        emit("update:modelValue", newValue);
        emit("change", newValue);
      } else if (props.clearable) {
        _value.value = 0;
        emit("update:modelValue", 0);
        emit("change", 0);
      }
    };
    const handleAnimationEnd = (index2) => {
      if (animation.value && index2 + 1 >= computedValue.value - 1) {
        animation.value = false;
      }
    };
    const renderGradingCharacter = (index2, displayIndex) => {
      if (index2 > displayIndex) {
        return vue.createVNode(index$1, null, null);
      }
      if (displayIndex <= 2) {
        return vue.createVNode(index$2, null, null);
      }
      if (displayIndex <= 3) {
        return vue.createVNode(index$1, null, null);
      }
      return vue.createVNode(index$3, null, null);
    };
    const renderCharacter = (index$12) => {
      var _a, _b;
      const fixedValue = props.allowHalf ? NP__default["default"].times(NP__default["default"].round(NP__default["default"].divide(computedValue.value, 0.5), 0), 0.5) : Math.round(computedValue.value);
      const displayIndex = hoverIndex.value || fixedValue;
      const displayCharacter = props.grading ? renderGradingCharacter(index$12, displayIndex) : (_b = (_a = slots.character) == null ? void 0 : _a.call(slots, index$12)) != null ? _b : vue.createVNode(index, null, null);
      const leftProps = disabled.value ? {} : {
        onMouseenter: () => handleMouseEnter(index$12, true),
        onClick: () => handleClick(index$12, true)
      };
      const rightProps = disabled.value ? {} : {
        onMouseenter: () => handleMouseEnter(index$12, false),
        onClick: () => handleClick(index$12, false)
      };
      const style = animation.value ? {
        animationDelay: `${50 * index$12}ms`
      } : {};
      const cls2 = [`${prefixCls}-character`, {
        [`${prefixCls}-character-half`]: props.allowHalf && index$12 + 0.5 === displayIndex,
        [`${prefixCls}-character-full`]: index$12 + 1 <= displayIndex,
        [`${prefixCls}-character-scale`]: animation.value && index$12 + 1 < computedValue.value
      }];
      return vue.createVNode("div", {
        "class": cls2,
        "style": style,
        "onAnimationend": () => handleAnimationEnd(index$12)
      }, [vue.createVNode("div", vue.mergeProps({
        "class": `${prefixCls}-character-left`
      }, leftProps), [displayCharacter]), vue.createVNode("div", vue.mergeProps({
        "class": `${prefixCls}-character-right`
      }, rightProps), [displayCharacter])]);
    };
    const indexArray = vue.computed(() => [...Array(props.grading ? 5 : props.count)]);
    const cls = vue.computed(() => [prefixCls, {
      [`${prefixCls}-readonly`]: props.readonly,
      [`${prefixCls}-disabled`]: props.disabled
    }]);
    return () => vue.createVNode("div", {
      "class": cls.value,
      "onMouseleave": resetHoverIndex
    }, [indexArray.value.map((_, index2) => renderCharacter(index2))]);
  }
});
module.exports = _Rate;