tyh-ui2/es/rate/src/index.js

The next generation ui component library of tyh-ui is based on vue3 Version, fully embrace vue3.

import { defineComponent as m, ref as k, watch as i, computed as _, openBlock as s, createElementBlock as l, createElementVNode as n, Fragment as c, renderList as d, normalizeStyle as h, toDisplayString as w, unref as V, createCommentVNode as x } from "vue";
import { Props as T } from "./index2.js";
const b = { class: "tyh-rate" }, g = ["onMouseover"], M = ["onMouseover"], S = {
  key: 0,
  class: "show-text"
}, $ = m({
  name: "TyhRate"
}), D = /* @__PURE__ */ m({
  ...$,
  props: T,
  emits: ["update:modelValue", "change"],
  setup(v, { emit: r }) {
    const t = v, o = k(t.modelValue);
    i(
      () => t.modelValue,
      (e) => o.value = e
    );
    const y = () => {
      r("update:modelValue", o.value), o.value !== t.modelValue && r("change");
    }, p = _(() => {
      if (!t.showText)
        return;
      let e = "";
      return i(
        () => o.value,
        () => {
          switch (o.value) {
            case 1:
              e = t.sayText[0];
              break;
            case 2:
              e = t.sayText[1];
              break;
            case 3:
              e = t.sayText[2];
              break;
            case 4:
              e = t.sayText[3];
              break;
            case 5:
              e = t.sayText[4];
              break;
            default:
              e = "";
          }
        },
        { immediate: !0 }
      ), e;
    });
    return (e, u) => (s(), l("div", b, [
      n("div", {
        class: "tyh-rate-mouseout",
        onMouseout: u[0] || (u[0] = (a) => o.value = e.modelValue)
      }, [
        (s(), l(c, null, d(5, (a) => n("i", {
          key: a,
          class: "tyh-icon tyh-ui-favorite",
          onMouseover: (f) => o.value = a
        }, null, 40, g)), 64)),
        n("span", {
          class: "solid",
          style: h(`width:${o.value * 18}px;`)
        }, [
          (s(), l(c, null, d(5, (a) => n("i", {
            key: a,
            class: "tyh-icon tyh-ui-favorite-filling",
            style: h({ color: e.color }),
            onMouseover: (f) => o.value = a,
            onClick: y
          }, null, 44, M)), 64))
        ], 4)
      ], 32),
      e.showText ? (s(), l("div", S, w(V(p)), 1)) : x("", !0)
    ]));
  }
});
export {
  D as default
};