@farris/ui-vue/components/rate/index.esm.js

Farris Vue, a Farris Design based Vue3 component library.

import { defineComponent as q, ref as l, computed as M, watch as L, createVNode as s, withModifiers as S, createTextVNode as C } from "vue";
import { withInstall as G } from "../common/index.esm.js";
const J = ["很不满意", "不满意", "一般", "满意", "非常满意"], K = {
  /**
   * 'large'
   * @default 'large'
   */
  size: { type: String, default: "large" },
  /**
   * 可选，是否启用半选模式
   * @default false
   */
  enableHalf: { type: Boolean, default: !1 },
  /**
   * 可选，是否启用再次点击后清除
   * @default false
   */
  enableClear: { type: Boolean, default: !1 },
  /**
   * 可选，是否禁用
   * @default false
   */
  disabled: { type: Boolean, default: !1 },
  /**
   * 可选，分制系统，默认为5分制
   * @default 5
   */
  pointSystem: { type: Number, default: 5 },
  /**
   * 可选，星星亮色
   */
  lightColor: { type: String, default: "" },
  /**
   * 可选，星星暗色
   */
  darkColor: { type: String, default: "" },
  /**
   * 可选，评分图标样式
   * @default 'f-icon-star'
   */
  iconClass: { type: String, default: "f-icon-star" },
  /**
   * 可选，星星个数
   * @default 5
   */
  numOfStar: { type: Number, default: 5 },
  /**
   * 禁用单个星星的文字提示
   */
  toolTipDisabled: { type: Boolean, default: !0 },
  /**
   * 默认满意度文案
   * @default toolTipContents
   */
  toolTipContents: { type: Array, default: J },
  /**
   * 启用评分
   */
  enableScore: { type: Boolean, default: !0 },
  /**
   * 是否针对5分制显示满意度信息
   * @default false
   */
  enableSatisfaction: { type: Boolean, default: !1 },
  /**
   * 绑定值
   */
  modelValue: { type: Number, default: 0 }
}, Q = /* @__PURE__ */ q({
  name: "FRate",
  props: K,
  emits: ["selectedValue", "update:modelValue"],
  setup(a, v) {
    const t = l(a.size), k = l(a.enableHalf), V = l(a.enableClear), x = l(a.disabled), w = l(a.pointSystem), A = l(a.lightColor), W = l(a.darkColor), T = l(a.iconClass), y = l(a.numOfStar), z = l(a.toolTipDisabled), N = l(a.toolTipContents), D = l(a.enableScore), O = l(a.enableSatisfaction);
    let r;
    const i = l(0), d = l(0), o = l(0), u = l(a.modelValue);
    let f = 1, c, m, g;
    const p = 4;
    function F() {
      const e = y.value;
      g = [];
      for (let n = 1; n <= e; n++)
        g.push({
          id: n
        });
    }
    function B() {
      let e;
      k.value ? e = Math.ceil(u.value / f) : e = u.value, d.value = (r * u.value + Math.floor(u.value) * p) / f, c = N.value[e - 1];
    }
    function H() {
      switch (t.value) {
        case "small":
          r = 14;
          break;
        case "middle":
          r = 16;
          break;
        case "large":
          r = 18;
          break;
        case "extraLarge":
          r = 24;
          break;
      }
      F(), y.value && (f = w.value / y.value), u.value && B();
    }
    H();
    function I(e) {
      return e.className.indexOf("f-icon") !== -1;
    }
    function j() {
      return u.value === o.value && V.value && d.value !== 0 ? (d.value = 0, u.value = 0, m = null, i.value = 0, o.value = 0, v.emit("selectedValue", u.value), v.emit("update:modelValue", u.value), !0) : !1;
    }
    function R(e, n, b) {
      if (!x.value && ((e.movementX || e.movementY) && (O.value && (c = N.value[n - 1]), e.offsetX < r / 2 && k.value === !0 ? (i.value = r * n - r / 2 + p * (n - 1), o.value = f * n - f / 2) : (i.value = r * n + p * (n - 1), o.value = f * n)), b === !0)) {
        if (j())
          return;
        u.value = o.value, d.value = i.value, m = c, v.emit("update:modelValue", u.value), v.emit("selectedValue", u.value);
      }
    }
    function h(e, n) {
      var b;
      if (I(e.target) && e.target) {
        const Y = parseInt((b = e.target) == null ? void 0 : b.id);
        R(e, Y, n);
      }
    }
    const X = M(() => o.value ? o.value + "分" : u.value + "分"), E = M(() => ({
      width: (i.value || d.value) + "px"
    }));
    function P() {
      i.value = 0, o.value = u.value;
    }
    return L(() => a.modelValue, (e) => {
      o.value = e, u.value = e, B();
    }), L(() => [a.disabled, a.enableClear], ([e, n]) => {
      x.value = e, V.value = n;
    }), () => s("div", {
      class: "farris-star-rating",
      onMouseover: S((e) => h(e, !1), ["prevent"]),
      onMousemove: S((e) => h(e, !1), ["prevent"]),
      onMouseleave: S((e) => P(), ["prevent"]),
      onClick: S((e) => h(e, !0), ["prevent"])
    }, [s("div", {
      class: "star-light-area",
      style: E.value
    }, [g.map((e) => s("span", {
      class: ["f-icon default-light-color ", T.value, {
        "f-star-sm": t.value === "small"
      }, {
        "f-star-md": t.value === "middle"
      }, {
        "f-star-lg": t.value === "large"
      }, {
        "f-star-exlarge": t.value === "extraLarge"
      }, {
        disabled: z.value
      }],
      id: e.id,
      style: {
        color: A.value
      }
    }, null))]), s("div", {
      class: ["star-dark-area", {
        small: t.value === "small"
      }, {
        middle: t.value === "middle"
      }, {
        large: t.value === "large"
      }]
    }, [g.map((e) => s("span", {
      class: ["f-icon default-dark-color", T.value, {
        "f-star-sm": t.value === "small"
      }, {
        "f-star-md": t.value === "middle"
      }, {
        "f-star-lg": t.value === "large"
      }, {
        "f-star-exlarge": t.value === "extraLarge"
      }],
      id: e.id,
      style: {
        color: W.value
      }
    }, null))]), s("div", {
      class: ["f-utils-fill", {
        "font-small": t.value === "small"
      }, {
        "font-middle": t.value === "middle"
      }, {
        "font-large": t.value === "large"
      }, {
        "font-exlarge": t.value === "extraLarge"
      }]
    }, [D.value && s("span", null, [C(" "), X.value, C(" ")]), O.value && (m || c) && s("span", null, [C(" "), c || m])])]);
  }
}), _ = G(Q);
export {
  Q as FRate,
  _ as default,
  K as rateProps
};