@opensig/opendesign/lib/rate/ORate.vue.js

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