import { ref as $, useSlots as J, onMounted as R, computed as x, watch as Q, createElementBlock as o, openBlock as a, normalizeStyle as s, createCommentVNode as p, createElementVNode as r, toDisplayString as f, unref as n, Fragment as B, renderList as Z, renderSlot as j, mergeProps as O, withKeys as ee } from "vue";
import { u as te, c as le, o as oe, e as ae, i as b, f as _, X as z, w as X, W as I } from "./index-sUrVQKbu.js";
import { u as ie } from "./useNestedProp-DR6XaY7z.js";
import { _ as se } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const ne = {
  key: 0,
  class: "vue-ui-rating-title",
  style: { width: "100%" }
}, re = {
  key: 0,
  style: { position: "relative" }
}, ue = {
  key: 0,
  style: { position: "absolute", top: "0", left: "0", width: "100%", height: "100%" }
}, ve = {
  key: 1,
  style: { position: "absolute", top: "0", left: "0", width: "100%", height: "100%" }
}, de = ["src", "height", "width"], ye = ["xmlns", "height", "width"], pe = ["id"], fe = ["stop-color"], ge = ["stop-color"], ce = ["points", "fill", "stroke", "stroke-width"], he = ["src", "alt", "height", "width", "id"], me = ["xmlns", "viewBox", "height", "id"], $e = ["id"], xe = ["stop-color"], be = ["stop-color"], _e = ["points", "fill", "stroke"], we = ["xmlns", "height"], ke = ["onClick", "onMouseenter", "onFocus", "onKeyup"], ze = ["onMouseenter", "onFocus"], Se = {
  __name: "vue-ui-rating",
  props: {
    config: {
      type: Object,
      default() {
        return {};
      }
    },
    dataset: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  emits: ["rate"],
  setup(Y, { expose: G, emit: L }) {
    const { vue_ui_rating: U } = te(), u = Y, h = $(le()), S = $(!1), v = $(void 0), m = $(void 0), w = $([]), D = J();
    R(() => {
      D["chart-background"] && console.warn("VueUiRating does not support the #chart-background slot.");
    });
    const E = L, e = x({
      get: () => C(),
      set: (l) => l
    });
    function C() {
      return ie({
        userConfig: u.config,
        defaultConfig: U
      });
    }
    Q(() => u.config, (l) => {
      e.value = C(), F();
    }, { deep: !0 });
    const K = x(() => typeof u.dataset.rating == "object" && !Array.isArray(u.dataset.rating) ? T(u.dataset.rating) : u.dataset.rating), P = x(() => typeof u.dataset.rating == "object" && !Array.isArray(u.dataset.rating)), y = $(K.value), V = x(() => e.value.type === "image"), g = x(() => e.value.readonly);
    function T(l) {
      let i = 0, t = 0;
      for (const d in l) {
        const q = parseInt(d), A = l[d];
        i += q * A, t += A;
      }
      if (t === 0)
        return 0;
      const c = i / t;
      return Math.min(e.value.to, Math.max(e.value.from, c));
    }
    R(() => {
      F();
    });
    function F() {
      (!Object.hasOwn(u.dataset, "rating") || oe(u.dataset)) && ae({
        componentName: "VueUiRating",
        type: "datasetAttribute",
        property: "rating"
      }), w.value = [];
      for (let l = e.value.from; l <= e.value.to; l += 1)
        w.value.push(l);
    }
    function k(l, i = !1) {
      return l > v.value || g.value ? i ? e.value.style.image.inactiveOpacity : e.value.style.star.inactiveColor : i ? 1 : e.value.style.star.useGradient ? `url(#star_gradient_under_${h.value})` : e.value.style.star.activeColor;
    }
    function M(l, i = !1) {
      const t = y.value - l, c = i ? 1 : 100;
      switch (!0) {
        case t <= 0:
          return 1e-3;
        case t > 1:
          return 1 * c;
        default:
          return t * c;
      }
    }
    function N(l) {
      g.value || (y.value = l, E("rate", l));
    }
    function W() {
      return y.value;
    }
    function H(l = !0) {
      g.value = l;
    }
    return G({
      getData: W,
      toggleReadonly: H
    }), (l, i) => (a(), o("div", {
      style: s(`background:${e.value.style.backgroundColor};font-family:${e.value.style.fontFamily};width:100%`),
      class: "vue-ui-rating",
      onMouseover: i[4] || (i[4] = (t) => S.value = !0),
      onMouseleave: i[5] || (i[5] = (t) => {
        S.value = !1, v.value = void 0;
      })
    }, [
      e.value.style.title.text ? (a(), o("div", ne, [
        r("div", {
          style: s(`color:${e.value.style.title.color};font-weight:${e.value.style.title.bold ? "bold" : "normal"};text-align:${e.value.style.title.textAlign};margin-bottom:${e.value.style.title.offsetY}px;font-size:${e.value.style.title.fontSize}px`)
        }, f(e.value.style.title.text), 5),
        e.value.style.title.subtitle.text ? (a(), o("div", {
          key: 0,
          style: s(`color:${e.value.style.title.subtitle.color};font-size:${e.value.style.title.subtitle.fontSize}px;text-align:${e.value.style.title.textAlign};margin-bottom:${e.value.style.title.subtitle.offsetY}px;font-weight:${e.value.style.title.subtitle.bold ? "bold" : "normal"}`)
        }, f(e.value.style.title.subtitle.text), 5)) : p("", !0)
      ])) : p("", !0),
      e.value.style.rating.show && e.value.style.rating.position === "top" ? (a(), o("div", {
        key: 1,
        style: s(`width:100%;text-align:center;margin-bottom:${e.value.style.rating.offsetY}px;font-size:${e.value.style.rating.fontSize}px;font-weight:${e.value.style.rating.bold ? "bold" : "normal"};margin-left:${e.value.style.rating.offsetX}px`)
      }, f(n(b)(
        e.value.style.rating.formatter,
        y.value,
        n(_)({
          v: y.value,
          r: e.value.style.rating.roundingValue
        }),
        e.value
      )), 5)) : p("", !0),
      r("div", {
        class: "vue-ui-rating-wrapper",
        style: s(`height:${e.value.style.itemSize}px;width:100%;display:flex;align-items:center;justify-content:center`)
      }, [
        e.value.style.rating.show && e.value.style.rating.position === "left" ? (a(), o("div", {
          key: 0,
          style: s(`width:fit-content;text-align:center;margin-bottom:${e.value.style.rating.offsetY}px;font-size:${e.value.style.rating.fontSize}px;font-weight:${e.value.style.rating.bold ? "bold" : "normal"};padding-right:${e.value.style.rating.offsetX}px`)
        }, f(n(b)(
          e.value.style.rating.formatter,
          y.value,
          n(_)({
            v: y.value,
            r: e.value.style.rating.roundingValue
          }),
          e.value
        )), 5)) : p("", !0),
        (a(!0), o(B, null, Z(w.value, (t, c) => (a(), o("div", {
          class: "vue-ui-rating-unit-container",
          style: s(`position:relative;height:${e.value.style.itemSize}px;width:${e.value.style.itemSize}px`)
        }, [
          l.$slots["layer-under"] || l.$slots["layer-above"] ? (a(), o("div", re, [
            l.$slots["layer-under"] ? (a(), o("div", ue, [
              j(l.$slots, "layer-under", O({ ref_for: !0 }, { value: t, size: e.value.style.itemSize, hoveredValue: v.value, focusedValue: m.value }), void 0, !0)
            ])) : p("", !0),
            l.$slots["layer-above"] ? (a(), o("div", ve, [
              j(l.$slots, "layer-above", O({ ref_for: !0 }, { value: t, size: e.value.style.itemSize, hoveredValue: v.value, focusedValue: m.value }), void 0, !0)
            ])) : p("", !0)
          ])) : (a(), o(B, { key: 1 }, [
            V.value ? (a(), o("img", {
              key: 0,
              src: e.value.style.image.src,
              height: e.value.style.itemSize,
              width: e.value.style.itemSize,
              class: "vue-ui-rating-unit",
              style: s(`position:absolute;top:0;left:0;opacity:${isNaN(v.value) ? e.value.style.image.inactiveOpacity : k(t, !0)}`)
            }, null, 12, de)) : (a(), o("svg", {
              key: 1,
              xmlns: n(z),
              viewBox: "0 0 100 100",
              height: e.value.style.itemSize,
              width: e.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_${h.value}`
                }, [
                  r("stop", {
                    offset: "0%",
                    "stop-color": `${n(X)(e.value.style.star.activeColor, 0.05)}`
                  }, null, 8, fe),
                  r("stop", {
                    offset: "100%",
                    "stop-color": e.value.style.star.activeColor
                  }, null, 8, ge)
                ], 8, pe)
              ]),
              r("polygon", {
                points: n(I)({
                  plot: { x: 50, y: 50 },
                  radius: 30,
                  apexes: e.value.style.star.apexes
                }),
                fill: isNaN(v.value) ? e.value.style.star.inactiveColor : k(t),
                stroke: e.value.style.star.borderColor ? e.value.style.star.borderColor : v.value ? k(t) : e.value.style.star.inactiveColor,
                "stroke-width": e.value.style.star.borderWidth,
                "stroke-linecap": "round",
                "stroke-linejoin": "round"
              }, null, 8, ce)
            ], 8, ye)),
            V.value ? (a(), o("img", {
              key: 2,
              src: e.value.style.image.src,
              alt: `${e.value.style.image.alt} ${t}`,
              height: e.value.style.itemSize,
              width: e.value.style.itemSize,
              id: `active_${h.value}_${t}`,
              class: "vue-ui-rating-unit",
              style: s(`position:absolute;top:0;left:0;clip:rect(0px,${M(c, !0) * e.value.style.itemSize}px,${e.value.style.itemSize}px,0px`)
            }, null, 12, he)) : (a(), o("svg", {
              key: 3,
              xmlns: n(z),
              viewBox: `0 0 ${M(c)} 100`,
              height: e.value.style.itemSize,
              class: "vue-ui-rating-unit",
              id: `active_${h.value}_${t}`,
              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_${h.value}`
                }, [
                  r("stop", {
                    offset: "0%",
                    "stop-color": `${n(X)(e.value.style.star.activeColor, 0.05)}`
                  }, null, 8, xe),
                  r("stop", {
                    offset: "100%",
                    "stop-color": e.value.style.star.activeColor
                  }, null, 8, be)
                ], 8, $e)
              ]),
              r("polygon", {
                points: n(I)({
                  plot: { x: 50, y: 50 },
                  radius: 30,
                  apexes: e.value.style.star.apexes
                }),
                fill: e.value.style.star.useGradient ? `url(#star_gradient_over_${h.value})` : e.value.style.star.activeColor,
                stroke: e.value.style.star.activeColor
              }, null, 8, _e)
            ], 8, me))
          ], 64)),
          (a(), o("svg", {
            xmlns: n(z),
            viewBox: "0 0 100 100",
            height: e.value.style.itemSize,
            class: "vue-ui-rating-unit",
            style: s(`position:absolute;top:0;left:0;${g.value ? "" : "cursor:pointer"}`)
          }, [
            g.value ? p("", !0) : (a(), o("rect", {
              key: 0,
              class: "vue-ui-rating-mouse-trap",
              x: 0,
              y: 0,
              width: 100,
              height: 100,
              fill: "transparent",
              onClick: (d) => N(t),
              onMouseenter: (d) => v.value = t,
              onMouseleave: i[0] || (i[0] = (d) => v.value = void 0),
              onFocus: (d) => m.value = t,
              onBlur: i[1] || (i[1] = (d) => m.value = void 0),
              tabindex: "0",
              onKeyup: ee((d) => N(t), ["enter"])
            }, null, 40, ke)),
            g.value ? (a(), o("rect", {
              key: 1,
              class: "vue-ui-rating-mouse-trap",
              x: 0,
              y: 0,
              width: 100,
              height: 100,
              fill: "transparent",
              onMouseenter: (d) => v.value = t,
              onMouseleave: i[2] || (i[2] = (d) => v.value = void 0),
              onFocus: (d) => m.value = t,
              onBlur: i[3] || (i[3] = (d) => m.value = void 0)
            }, null, 40, ze)) : p("", !0)
          ], 12, we)),
          e.value.style.tooltip.show && P.value && g.value ? (a(), o("div", {
            key: 2,
            class: "vue-ui-rating-tooltip",
            style: s(`border:1px solid ${e.value.style.tooltip.borderColor};position:absolute;top:${-48 + e.value.style.tooltip.offsetY}px;left:50%;transform:translateX(-50%);width:fit-content;text-align:center;background:${e.value.style.tooltip.backgroundColor};display:${v.value === t ? "block" : "none"};padding:2px 12px;border-radius:${e.value.style.tooltip.borderRadius}px;box-shadow:${e.value.style.tooltip.boxShadow}`)
          }, [
            r("div", {
              style: s(`width:100%;display:flex;flex-direction:row;gap:6px;position:relative;text-align:center;color:${e.value.style.tooltip.color}`)
            }, [
              r("span", {
                style: s(`font-size:${e.value.style.tooltip.fontSize}px`)
              }, f(t) + ":", 5),
              r("span", {
                style: s(`font-weight:${e.value.style.tooltip.bold ? "bold" : "normal"};font-size:${e.value.style.tooltip.fontSize}px`)
              }, f(n(b)(
                e.value.style.tooltip.formatter,
                u.dataset.rating[t],
                n(_)({
                  v: u.dataset.rating[t],
                  r: e.value.style.tooltip.roundingValue
                }),
                e.value
              )), 5),
              r("div", {
                style: s(`font-family:Arial !important;position:absolute;top:calc(100% - 4px);left:50%;transform:translateX(-50%);color:${e.value.style.tooltip.borderColor}`)
              }, " ▼ ", 4)
            ], 4)
          ], 4)) : p("", !0)
        ], 4))), 256)),
        e.value.style.rating.show && e.value.style.rating.position === "right" ? (a(), o("div", {
          key: 1,
          style: s(`width:fit-content;text-align:center;margin-bottom:${e.value.style.rating.offsetY}px;font-size:${e.value.style.rating.fontSize}px;font-weight:${e.value.style.rating.bold ? "bold" : "normal"};padding-left:${e.value.style.rating.offsetX}px`)
        }, f(n(b)(
          e.value.style.rating.formatter,
          y.value,
          n(_)({
            v: y.value,
            r: e.value.style.rating.roundingValue
          }),
          e.value
        )), 5)) : p("", !0)
      ], 4),
      e.value.style.rating.show && e.value.style.rating.position === "bottom" ? (a(), o("div", {
        key: 2,
        style: s(`width:100%;text-align:center;margin-top:${e.value.style.rating.offsetY}px;font-size:${e.value.style.rating.fontSize}px;font-weight:${e.value.style.rating.bold ? "bold" : "normal"};margin-left:${e.value.style.rating.offsetX}px`)
      }, f(n(b)(
        e.value.style.rating.formatter,
        y.value,
        n(_)({
          v: y.value,
          r: e.value.style.rating.roundingValue
        }),
        e.value
      )), 5)) : p("", !0)
    ], 36));
  }
}, Ne = /* @__PURE__ */ se(Se, [["__scopeId", "data-v-e9ed619f"]]);
export {
  Ne as default
};
