vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
351 lines (350 loc) • 15.5 kB
JavaScript
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-BsIlHNy8.js";
import { u as ie } from "./useNestedProp-CyyJlG5K.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
};