import { ref as h, computed as x, watch as U, onMounted as K, openBlock as a, createElementBlock as i, normalizeStyle as o, createElementVNode as r, toDisplayString as g, createCommentVNode as d, unref as s, Fragment as T, renderList as H, withKeys as P } from "vue";
import { u as W, c as q, o as J, e as Q, i as $, f as _, X as k, w as R, V as F } from "./index-Cm2_6s9o.js";
import { u as Z } from "./useNestedProp-BYPZJNhi.js";
import { _ as tt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const et = {
  key: 0,
  class: "vue-ui-rating-title",
  style: { width: "100%" }
}, lt = ["src", "height", "width"], at = ["xmlns", "height", "width"], it = ["id"], ot = ["stop-color"], st = ["stop-color"], nt = ["points", "fill", "stroke", "stroke-width"], rt = ["src", "alt", "height", "width", "id"], ut = ["xmlns", "viewBox", "height", "id"], vt = ["id"], yt = ["stop-color"], dt = ["stop-color"], pt = ["points", "fill", "stroke"], gt = ["xmlns", "height"], ct = ["onClick", "onMouseenter", "onKeyup"], ft = ["onMouseenter"], mt = {
  __name: "vue-ui-rating",
  props: {
    config: {
      type: Object,
      default() {
        return {};
      }
    },
    dataset: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  emits: ["rate"],
  setup(X, { expose: j, emit: B }) {
    const u = X, { vue_ui_rating: I } = W(), m = h(q()), z = h(!1), y = h(void 0), b = h([]), t = x({
      get: () => C(),
      set: (l) => l
    });
    function C() {
      return Z({
        userConfig: u.config,
        defaultConfig: I
      });
    }
    U(() => u.config, (l) => {
      t.value = C(), M();
    }, { deep: !0 });
    const Y = x(() => typeof u.dataset.rating == "object" && !Array.isArray(u.dataset.rating) ? L(u.dataset.rating) : u.dataset.rating), G = x(() => typeof u.dataset.rating == "object" && !Array.isArray(u.dataset.rating)), v = h(Y.value), S = x(() => t.value.type === "image"), c = x(() => t.value.readonly);
    function L(l) {
      let n = 0, e = 0;
      for (const p in l) {
        const E = parseInt(p), A = l[p];
        n += E * A, e += A;
      }
      if (e === 0)
        return 0;
      const f = n / e;
      return Math.min(t.value.to, Math.max(t.value.from, f));
    }
    K(() => {
      M();
    });
    function M() {
      J(u.dataset) && Q({
        componentName: "VueUiRating",
        type: "dataset"
      }), b.value = [];
      for (let l = t.value.from; l <= t.value.to; l += 1)
        b.value.push(l);
    }
    function w(l, n = !1) {
      return l > y.value || c.value ? n ? t.value.style.image.inactiveOpacity : t.value.style.star.inactiveColor : n ? 1 : t.value.style.star.useGradient ? `url(#star_gradient_under_${m.value})` : t.value.style.star.activeColor;
    }
    function N(l, n = !1) {
      const e = v.value - l, f = n ? 1 : 100;
      switch (!0) {
        case e <= 0:
          return 1e-3;
        case e > 1:
          return 1 * f;
        default:
          return e * f;
      }
    }
    function V(l) {
      c.value || (v.value = l, B("rate", l));
    }
    function O() {
      return v.value;
    }
    function D(l = !0) {
      c.value = l;
    }
    return j({
      getData: O,
      toggleReadonly: D
    }), (l, n) => (a(), i("div", {
      style: o(`background:${t.value.style.backgroundColor};font-family:${t.value.style.fontFamily};width:100%`),
      class: "vue-ui-rating",
      onMouseover: n[2] || (n[2] = (e) => z.value = !0),
      onMouseleave: n[3] || (n[3] = (e) => {
        z.value = !1, y.value = void 0;
      })
    }, [
      t.value.style.title.text ? (a(), i("div", et, [
        r("div", {
          style: o(`color:${t.value.style.title.color};font-weight:${t.value.style.title.bold ? "bold" : "normal"};text-align:${t.value.style.title.textAlign};margin-bottom:${t.value.style.title.offsetY}px;font-size:${t.value.style.title.fontSize}px`)
        }, g(t.value.style.title.text), 5),
        t.value.style.title.subtitle.text ? (a(), i("div", {
          key: 0,
          style: o(`color:${t.value.style.title.subtitle.color};font-size:${t.value.style.title.subtitle.fontSize}px;text-align:${t.value.style.title.textAlign};margin-bottom:${t.value.style.title.subtitle.offsetY}px;font-weight:${t.value.style.title.subtitle.bold ? "bold" : "normal"}`)
        }, g(t.value.style.title.subtitle.text), 5)) : d("", !0)
      ])) : d("", !0),
      t.value.style.rating.show && t.value.style.rating.position === "top" ? (a(), i("div", {
        key: 1,
        style: o(`width:100%;text-align:center;margin-bottom:${t.value.style.rating.offsetY}px;font-size:${t.value.style.rating.fontSize}px;font-weight:${t.value.style.rating.bold ? "bold" : "normal"};margin-left:${t.value.style.rating.offsetX}px`)
      }, g(s($)(
        t.value.style.rating.formatter,
        v.value,
        s(_)({
          v: v.value,
          r: t.value.style.rating.roundingValue
        }),
        t.value
      )), 5)) : d("", !0),
      r("div", {
        class: "vue-ui-rating-wrapper",
        style: o(`height:${t.value.style.itemSize}px;width:100%;display:flex;align-items:center;justify-content:center`)
      }, [
        t.value.style.rating.show && t.value.style.rating.position === "left" ? (a(), i("div", {
          key: 0,
          style: o(`width:fit-content;text-align:center;margin-bottom:${t.value.style.rating.offsetY}px;font-size:${t.value.style.rating.fontSize}px;font-weight:${t.value.style.rating.bold ? "bold" : "normal"};padding-right:${t.value.style.rating.offsetX}px`)
        }, g(s($)(
          t.value.style.rating.formatter,
          v.value,
          s(_)({
            v: v.value,
            r: t.value.style.rating.roundingValue
          }),
          t.value
        )), 5)) : d("", !0),
        (a(!0), i(T, null, H(b.value, (e, f) => (a(), i("div", {
          class: "vue-ui-rating-unit-container",
          style: o(`position:relative;height:${t.value.style.itemSize}px;width:${t.value.style.itemSize}px`)
        }, [
          S.value ? (a(), i("img", {
            key: 0,
            src: t.value.style.image.src,
            height: t.value.style.itemSize,
            width: t.value.style.itemSize,
            class: "vue-ui-rating-unit",
            style: o(`position:absolute;top:0;left:0;opacity:${isNaN(y.value) ? t.value.style.image.inactiveOpacity : w(e, !0)}`)
          }, null, 12, lt)) : (a(), i("svg", {
            key: 1,
            xmlns: s(k),
            viewBox: "0 0 100 100",
            height: t.value.style.itemSize,
            width: t.value.style.itemSize,
            class: "vue-ui-rating-unit"
          }, [
            r("defs", null, [
              r("radialGradient", {
                cx: "50%",
                cy: "50%",
                r: "50%",
                fx: "50%",
                fy: "50%",
                id: `star_gradient_under_${m.value}`
              }, [
                r("stop", {
                  offset: "0%",
                  "stop-color": `${s(R)(t.value.style.star.activeColor, 0.05)}`
                }, null, 8, ot),
                r("stop", {
                  offset: "100%",
                  "stop-color": t.value.style.star.activeColor
                }, null, 8, st)
              ], 8, it)
            ]),
            r("polygon", {
              points: s(F)({
                plot: { x: 50, y: 50 },
                radius: 30,
                apexes: t.value.style.star.apexes
              }),
              fill: isNaN(y.value) ? t.value.style.star.inactiveColor : w(e),
              stroke: t.value.style.star.borderColor ? t.value.style.star.borderColor : y.value ? w(e) : t.value.style.star.inactiveColor,
              "stroke-width": t.value.style.star.borderWidth,
              "stroke-linecap": "round",
              "stroke-linejoin": "round"
            }, null, 8, nt)
          ], 8, at)),
          S.value ? (a(), i("img", {
            key: 2,
            src: t.value.style.image.src,
            alt: `${t.value.style.image.alt} ${e}`,
            height: t.value.style.itemSize,
            width: t.value.style.itemSize,
            id: `active_${m.value}_${e}`,
            class: "vue-ui-rating-unit",
            style: o(`position:absolute;top:0;left:0;clip:rect(0px,${N(f, !0) * t.value.style.itemSize}px,${t.value.style.itemSize}px,0px`)
          }, null, 12, rt)) : (a(), i("svg", {
            key: 3,
            xmlns: s(k),
            viewBox: `0 0 ${N(f)} 100`,
            height: t.value.style.itemSize,
            class: "vue-ui-rating-unit",
            id: `active_${m.value}_${e}`,
            style: { position: "absolute", top: "0", left: "0" }
          }, [
            r("defs", null, [
              r("radialGradient", {
                cx: "50%",
                cy: "50%",
                r: "50%",
                fx: "50%",
                fy: "50%",
                id: `star_gradient_over_${m.value}`
              }, [
                r("stop", {
                  offset: "0%",
                  "stop-color": `${s(R)(t.value.style.star.activeColor, 0.05)}`
                }, null, 8, yt),
                r("stop", {
                  offset: "100%",
                  "stop-color": t.value.style.star.activeColor
                }, null, 8, dt)
              ], 8, vt)
            ]),
            r("polygon", {
              points: s(F)({
                plot: { x: 50, y: 50 },
                radius: 30,
                apexes: t.value.style.star.apexes
              }),
              fill: t.value.style.star.useGradient ? `url(#star_gradient_over_${m.value})` : t.value.style.star.activeColor,
              stroke: t.value.style.star.activeColor
            }, null, 8, pt)
          ], 8, ut)),
          (a(), i("svg", {
            xmlns: s(k),
            viewBox: "0 0 100 100",
            height: t.value.style.itemSize,
            class: "vue-ui-rating-unit",
            style: o(`position:absolute;top:0;left:0;${c.value ? "" : "cursor:pointer"}`)
          }, [
            c.value ? d("", !0) : (a(), i("rect", {
              key: 0,
              class: "vue-ui-rating-mouse-trap",
              x: 0,
              y: 0,
              width: 100,
              height: 100,
              fill: "transparent",
              onClick: (p) => V(e),
              onMouseenter: (p) => y.value = e,
              onMouseleave: n[0] || (n[0] = (p) => y.value = void 0),
              tabindex: "0",
              onKeyup: P((p) => V(e), ["enter"])
            }, null, 40, ct)),
            c.value ? (a(), i("rect", {
              key: 1,
              class: "vue-ui-rating-mouse-trap",
              x: 0,
              y: 0,
              width: 100,
              height: 100,
              fill: "transparent",
              onMouseenter: (p) => y.value = e,
              onMouseleave: n[1] || (n[1] = (p) => y.value = void 0)
            }, null, 40, ft)) : d("", !0)
          ], 12, gt)),
          t.value.style.tooltip.show && G.value && c.value ? (a(), i("div", {
            key: 4,
            class: "vue-ui-rating-tooltip",
            style: o(`border:1px solid ${t.value.style.tooltip.borderColor};position:absolute;top:${-48 + t.value.style.tooltip.offsetY}px;left:50%;transform:translateX(-50%);width:fit-content;text-align:center;background:${t.value.style.tooltip.backgroundColor};display:${y.value === e ? "block" : "none"};padding:2px 12px;border-radius:${t.value.style.tooltip.borderRadius}px;box-shadow:${t.value.style.tooltip.boxShadow}`)
          }, [
            r("div", {
              style: o(`width:100%;display:flex;flex-direction:row;gap:6px;position:relative;text-align:center;color:${t.value.style.tooltip.color}`)
            }, [
              r("span", {
                style: o(`font-size:${t.value.style.tooltip.fontSize}px`)
              }, g(e) + ":", 5),
              r("span", {
                style: o(`font-weight:${t.value.style.tooltip.bold ? "bold" : "normal"};font-size:${t.value.style.tooltip.fontSize}px`)
              }, g(s($)(
                t.value.style.tooltip.formatter,
                u.dataset.rating[e],
                s(_)({
                  v: u.dataset.rating[e],
                  r: t.value.style.tooltip.roundingValue
                }),
                t.value
              )), 5),
              r("div", {
                style: o(`font-family:Arial !important;position:absolute;top:calc(100% - 4px);left:50%;transform:translateX(-50%);color:${t.value.style.tooltip.borderColor}`)
              }, " ▼ ", 4)
            ], 4)
          ], 4)) : d("", !0)
        ], 4))), 256)),
        t.value.style.rating.show && t.value.style.rating.position === "right" ? (a(), i("div", {
          key: 1,
          style: o(`width:fit-content;text-align:center;margin-bottom:${t.value.style.rating.offsetY}px;font-size:${t.value.style.rating.fontSize}px;font-weight:${t.value.style.rating.bold ? "bold" : "normal"};padding-left:${t.value.style.rating.offsetX}px`)
        }, g(s($)(
          t.value.style.rating.formatter,
          v.value,
          s(_)({
            v: v.value,
            r: t.value.style.rating.roundingValue
          }),
          t.value
        )), 5)) : d("", !0)
      ], 4),
      t.value.style.rating.show && t.value.style.rating.position === "bottom" ? (a(), i("div", {
        key: 2,
        style: o(`width:100%;text-align:center;margin-top:${t.value.style.rating.offsetY}px;font-size:${t.value.style.rating.fontSize}px;font-weight:${t.value.style.rating.bold ? "bold" : "normal"};margin-left:${t.value.style.rating.offsetX}px`)
      }, g(s($)(
        t.value.style.rating.formatter,
        v.value,
        s(_)({
          v: v.value,
          r: t.value.style.rating.roundingValue
        }),
        t.value
      )), 5)) : d("", !0)
    ], 36));
  }
}, bt = /* @__PURE__ */ tt(mt, [["__scopeId", "data-v-d90e158f"]]);
export {
  bt as default
};
