@opensig/opendesign/es/rate/ORate.vue.mjs

<p align="center"><img src="../docs/public/opendesign-logo-light.png"/></p> <h1 align="center">opendesign</h1> <p align="center">一个 Vue 3 组件库</p> <p align="center"><b>皮肤可定制，使用 TypeScript</b></p>

import { defineComponent, ref, watch, computed, createElementBlock, openBlock, normalizeClass, unref, Fragment, renderList, createBlock, withCtx, createElementVNode, toDisplayString, createVNode, renderSlot } from "vue";
import { OPopover } from "../popover/index.mjs";
import { rateProps } from "./types.mjs";
import { defaultSize } from "../_utils/global.mjs";
import { isUndefined, isArray } from "../_utils/is.mjs";
import _sfc_main$1 from "./ORateItem.vue.mjs";
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "ORate",
  props: rateProps,
  emits: ["update:modelValue", "change"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const realValue = ref(props.modelValue ?? props.defaultValue);
    watch(
      () => props.modelValue,
      (val) => {
        if (!isUndefined(val)) {
          realValue.value = val;
        }
      }
    );
    const hoverIndex = ref(-1);
    const setHoverIndex = (index, isTopIcon) => {
      if (props.readonly) {
        return;
      }
      hoverIndex.value = props.allowHalf && isTopIcon ? index + 0.5 : index + 1;
    };
    const resetHoverIndex = () => {
      hoverIndex.value = -1;
    };
    const setValue = (index, isTopIcon) => {
      if (props.readonly) {
        return;
      }
      if (props.clearable && realValue.value === hoverIndex.value) {
        resetHoverIndex();
        realValue.value = 0;
        emits("update:modelValue", 0);
        emits("change", 0);
      } else {
        hoverIndex.value = props.allowHalf && isTopIcon ? index + 0.5 : index + 1;
        realValue.value = hoverIndex.value;
        emits("update:modelValue", hoverIndex.value);
        emits("change", hoverIndex.value);
      }
    };
    const iconStatus = computed(() => {
      const statusArr = new Array(props.count).fill("");
      for (let i = 0; i < props.count; i++) {
        const val = hoverIndex.value === -1 ? realValue.value ?? -1 : hoverIndex.value;
        if (!props.allowHalf) {
          if (i + 1 <= val) {
            statusArr[i] = "full";
          }
        } else {
          if (i + 1 <= Math.floor(val)) {
            statusArr[i] = "full";
          } else if (i + 1 === Math.ceil(val)) {
            statusArr[i] = "half";
          }
        }
      }
      return statusArr;
    });
    const showLabel = computed(() => {
      if (!isArray(props.labels)) {
        return false;
      }
      return props.labels.length === props.count;
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock(
        "div",
        {
          class: normalizeClass(["o-rate", [`o-rate-${props.color}`, `o-rate-${props.size || unref(defaultSize)}`, { "o-rate-readonly": props.readonly }]]),
          onMouseleave: resetHoverIndex
        },
        [
          showLabel.value ? (openBlock(true), createElementBlock(
            Fragment,
            { key: 0 },
            renderList(_ctx.count, (item, idx) => {
              return openBlock(), createBlock(
                unref(OPopover),
                {
                  key: item,
                  "adjust-width": false,
                  "adjust-min-width": false,
                  visible: false,
                  "wrap-class": "o-rate-popover"
                },
                {
                  target: withCtx(() => [
                    createVNode(_sfc_main$1, {
                      status: iconStatus.value[idx],
                      onHover: (isHalf) => {
                        setHoverIndex(idx, isHalf);
                      },
                      onChange: (isHalf) => {
                        setValue(idx, isHalf);
                      }
                    }, {
                      default: withCtx(() => [
                        renderSlot(_ctx.$slots, "icon", {
                          index: idx,
                          status: iconStatus.value[idx]
                        })
                      ]),
                      _: 2
                      /* DYNAMIC */
                    }, 1032, ["status", "onHover", "onChange"])
                  ]),
                  default: withCtx(() => [
                    createElementVNode(
                      "span",
                      null,
                      toDisplayString(_ctx.labels && _ctx.labels[idx]),
                      1
                      /* TEXT */
                    )
                  ]),
                  _: 2
                  /* DYNAMIC */
                },
                1024
                /* DYNAMIC_SLOTS */
              );
            }),
            128
            /* KEYED_FRAGMENT */
          )) : (openBlock(true), createElementBlock(
            Fragment,
            { key: 1 },
            renderList(_ctx.count, (item, idx) => {
              return openBlock(), createBlock(_sfc_main$1, {
                key: item,
                index: idx,
                status: iconStatus.value[idx],
                onHover: (isHalf) => {
                  setHoverIndex(idx, isHalf);
                },
                onChange: (isHalf) => {
                  setValue(idx, isHalf);
                }
              }, {
                default: withCtx(() => [
                  renderSlot(_ctx.$slots, "icon", {
                    index: idx,
                    status: iconStatus.value[idx]
                  })
                ]),
                _: 2
                /* DYNAMIC */
              }, 1032, ["index", "status", "onHover", "onChange"]);
            }),
            128
            /* KEYED_FRAGMENT */
          ))
        ],
        34
        /* CLASS, NEED_HYDRATION */
      );
    };
  }
});
export {
  _sfc_main as default
};