vue-data-ui-hq/dist/vue-ui-rating-7ZT1rO63.js

A user-empowering data visualization Vue 3 components library for eloquent data storytelling

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