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