layui/package/component/es/rate/index.js

import { w as withInstall } from "../badge/index2.js";
import { defineComponent, ref, computed, watch, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, unref, normalizeStyle, renderSlot, createTextVNode, toDisplayString, createCommentVNode } from "vue";
var index = /* @__PURE__ */ (() => ".layui-rate,.layui-rate *{display:inline-block;vertical-align:middle}.layui-rate{padding:10px 5px 10px 0;font-size:0}.layui-rate li i.layui-icon{font-size:20px;color:#ffb800;margin-right:5px;transition:all .3s;-webkit-transition:all .3s}.layui-rate li i:hover{cursor:pointer;transform:scale(1.12);-webkit-transform:scale(1.12)}.layui-rate[readonly] li i:hover{cursor:default;transform:scale(1)}.layui-rate-clear-icon{display:inline-block;color:#c6c6c6;padding-top:3px;font-size:18px;vertical-align:middle}.layui-rate-clear-icon:hover{cursor:pointer;color:#ff4949}\n")();
const _hoisted_1 = ["onMousemove", "onClick"];
const _hoisted_2 = {
  key: 0,
  class: "layui-inline"
};
const __default__ = {
  name: "LayRate"
};
const _sfc_main = defineComponent({
  ...__default__,
  props: {
    theme: null,
    length: { default: 5 },
    modelValue: { default: 0 },
    readonly: { type: [Boolean, String], default: false },
    half: { type: Boolean, default: false },
    text: { type: Boolean, default: false },
    isBlock: { type: Boolean, default: false },
    allowClear: { type: Boolean, default: false },
    clearIcon: { default: "layui-icon-close-fill" },
    icons: { default: () => [
      "layui-icon-rate",
      "layui-icon-rate-half",
      "layui-icon-rate-solid"
    ] }
  },
  emits: ["update:modelValue", "select", "clear"],
  setup(__props, { emit }) {
    const props = __props;
    const currentValue = ref(props.modelValue);
    const tempValue = ref(currentValue.value);
    const isHalf = computed(
      () => props.half && Math.round(currentValue.value) !== currentValue.value
    );
    watch(
      () => props.modelValue,
      () => {
        currentValue.value = props.modelValue;
        tempValue.value = props.modelValue;
      }
    );
    const getValue = function(index2, event) {
      if (!props.half) {
        return index2;
      }
      return index2 - (event.offsetX <= event.target.offsetWidth / 2 ? 0.5 : 0);
    };
    const mousemove = function(index2, event) {
      if (props.readonly) {
        return false;
      }
      currentValue.value = getValue(index2, event);
    };
    const mouseleave = function() {
      if (props.readonly) {
        return false;
      }
      currentValue.value = tempValue.value;
    };
    const action = function(index2, event) {
      if (props.readonly) {
        return false;
      }
      currentValue.value = getValue(index2, event);
      tempValue.value = currentValue.value;
      emit("update:modelValue", currentValue.value);
      emit("select", currentValue.value);
    };
    const showClearIcon = computed(() => !props.readonly && props.allowClear);
    const clearRate = function() {
      tempValue.value = 0;
      currentValue.value = 0;
      emit("clear", currentValue.value);
    };
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        class: normalizeClass(__props.isBlock ? "layui-block" : "layui-inline")
      }, [
        createElementVNode("ul", {
          class: "layui-rate",
          onMouseleave: mouseleave
        }, [
          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.length, (index2) => {
            return openBlock(), createElementBlock("li", {
              key: index2,
              class: "layui-inline",
              onMousemove: ($event) => mousemove(index2, $event),
              onClick: ($event) => action(index2, $event)
            }, [
              index2 <= Math.ceil(currentValue.value) ? (openBlock(), createElementBlock("i", {
                key: 0,
                class: normalizeClass([
                  "layui-icon",
                  `${__props.icons[__props.icons.length - (unref(isHalf) && index2 === Math.ceil(currentValue.value) ? 2 : 1)]}`
                ]),
                style: normalizeStyle({ color: __props.theme })
              }, null, 6)) : (openBlock(), createElementBlock("i", {
                key: 1,
                class: normalizeClass(["layui-icon"].concat(__props.icons[0])),
                style: normalizeStyle({ color: __props.theme })
              }, null, 6))
            ], 40, _hoisted_1);
          }), 128))
        ], 32),
        __props.text ? (openBlock(), createElementBlock("span", _hoisted_2, [
          renderSlot(_ctx.$slots, "default", { value: currentValue.value }, () => [
            createTextVNode(toDisplayString(currentValue.value + "\u661F"), 1)
          ])
        ])) : createCommentVNode("", true),
        unref(showClearIcon) ? (openBlock(), createElementBlock("i", {
          key: 1,
          class: normalizeClass(["layui-icon", "layui-rate-clear-icon", __props.clearIcon]),
          onClick: clearRate,
          title: "\u6E05\u9664\u8BC4\u5206"
        }, null, 2)) : createCommentVNode("", true)
      ], 2);
    };
  }
});
const component = withInstall(_sfc_main);
export { component as default };