vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
378 lines (377 loc) • 19.1 kB
JavaScript
import { createElementBlock as i, openBlock as s, withKeys as K, normalizeStyle as r, normalizeClass as T, createCommentVNode as y, createElementVNode as a, toDisplayString as f, renderSlot as $, unref as M, useSlots as H, ref as x, onMounted as B, watch as N, computed as R, Fragment as P, renderList as q, createVNode as J, withCtx as z, createTextVNode as Q } from "vue";
import { X as V, h as j, a as W, d as Z, o as _, g as ee } from "./lib-2iaAPQ_c.js";
import { u as te, a as le } from "./useNestedProp-2p4Tjzc8.js";
import { _ as ae } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const oe = ["xmlns", "stroke"], ne = ["id"], ie = ["stop-color"], se = ["stop-color"], re = ["stroke"], ue = ["xmlns", "viewBox", "stroke"], de = ["id"], ce = ["stop-color"], ye = ["stop-color"], fe = ["viewBox", "stroke"], ve = {
__name: "BaseSmilingUnit",
props: {
config: { type: Object },
unit: { type: Number },
currentRating: { type: Number },
getActiveColor: { type: Function },
calcShapeFill: { type: Function },
isReadonly: { type: Boolean },
hasBreakdown: { type: Boolean },
hoveredValue: { type: Number }
},
emits: ["rate", "mouseenter", "mouseleave"],
setup(t, { emit: w }) {
const g = w;
return (v, o) => (s(), i("div", {
tabindex: "0",
class: T({ "vue-ui-smiley-rated": !t.config.readonly && t.currentRating === t.unit }),
style: r({
cursor: t.config.readonly ? "default" : "pointer",
height: t.config.style.itemSize + "px",
aspectRatio: "1/1",
position: "relative"
}),
onMouseenter: o[0] || (o[0] = (h) => g("mouseenter")),
onMouseleave: o[1] || (o[1] = (h) => g("mouseleave")),
onClick: o[2] || (o[2] = (h) => g("rate", t.unit)),
onKeyup: o[3] || (o[3] = K((h) => g("rate", t.unit), ["enter"]))
}, [
t.config.style.tooltip.show && t.hasBreakdown && t.isReadonly ? (s(), i("div", {
key: 0,
class: "vue-ui-rating-tooltip",
style: r({
border: `1px solid ${t.config.style.tooltip.borderColor}`,
position: "absolute",
top: `${t.config.style.tooltip.offsetY - 48}px`,
left: "50%",
transform: "translateX(-50%)",
width: "fit-content",
textAlign: "center",
background: t.config.style.tooltip.backgroundColor,
display: t.hoveredValue === t.unit - 1 ? "block" : "none",
padding: "2px 12px",
borderRadius: t.config.style.tooltip.borderRadius + "px",
boxShadow: t.config.style.tooltip.boxShadow
})
}, [
a("div", {
style: r({
width: "100%",
display: "flex",
flexDirection: "row",
gap: "6px",
position: "relative",
textAlign: "center",
color: t.config.style.tooltip.color
})
}, [
a("span", {
style: r(`font-size:${t.config.style.tooltip.fontSize}px`)
}, f(t.unit) + ":", 5),
a("span", {
style: r(`font-weight:${t.config.style.tooltip.bold ? "bold" : "normal"};font-size:${t.config.style.tooltip.fontSize}px`)
}, [
$(v.$slots, "rating", {}, void 0, !0)
], 4),
a("div", {
style: r(`font-family:Arial !important;position:absolute;top:calc(100% - 4px);left:50%;transform:translateX(-50%);color:${t.config.style.tooltip.borderColor}`)
}, " ▼ ", 4)
], 4)
], 4)) : y("", !0),
t.config.style.icons.filled ? (s(), i("svg", {
key: 1,
xmlns: M(V),
style: { transition: "all 0.1s ease-in-out", position: "absolute", top: "0", left: "0" },
height: "100%",
viewBox: "0 0 24 24",
"stroke-width": "1.5",
stroke: t.getActiveColor(t.unit - 1),
fill: "none",
"stroke-linecap": "round",
"stroke-linejoin": "round"
}, [
a("defs", null, [
a("radialGradient", {
id: `vueUiSmiley${t.unit - 1}`
}, [
a("stop", {
offset: "0%",
"stop-color": M(j)(t.config.style.colors.active[t.unit - 1], 0.05)
}, null, 8, ie),
a("stop", {
offset: "100%",
"stop-color": t.config.style.colors.active[t.unit - 1]
}, null, 8, se)
], 8, ne)
]),
$(v.$slots, "path-icon-filled", {}, void 0, !0)
], 8, oe)) : (s(), i("svg", {
key: 2,
style: { position: "absolute", top: "0", left: "0", transition: "all 0.1s ease-in-out" },
height: "100%",
viewBox: "0 0 24 24",
"stroke-width": "1.5",
stroke: t.getActiveColor(t.unit - 1),
fill: "none",
"stroke-linecap": "round",
"stroke-linejoin": "round"
}, [
$(v.$slots, "path-icon", {}, void 0, !0)
], 8, re)),
t.config.style.icons.filled && t.isReadonly ? (s(), i("svg", {
key: 3,
xmlns: M(V),
style: { transition: "all 0.1s ease-in-out", position: "absolute", top: "0", left: "0" },
height: "100%",
viewBox: `0 0 ${t.calcShapeFill(t.unit - 1)} 24`,
"stroke-width": "1.5",
stroke: t.config.style.colors.activeReadonly[t.unit - 1],
fill: "none",
"stroke-linecap": "round",
"stroke-linejoin": "round"
}, [
a("defs", null, [
a("radialGradient", {
id: `vueUiSmiley${t.unit - 1}`
}, [
a("stop", {
offset: "0%",
"stop-color": M(j)(t.config.style.colors.activeReadonly[t.unit - 1], 0.05)
}, null, 8, ce),
a("stop", {
offset: "100%",
"stop-color": t.config.style.colors.activeReadonly[t.unit - 1]
}, null, 8, ye)
], 8, de)
]),
$(v.$slots, "path-icon-filled-readonly", {}, void 0, !0)
], 8, ue)) : y("", !0),
!t.config.style.icons.filled && t.isReadonly ? (s(), i("svg", {
key: 4,
style: { position: "absolute", top: "0", left: "0", transition: "all 0.1s ease-in-out" },
height: "100%",
viewBox: `0 0 ${t.calcShapeFill(t.unit - 1)} 24`,
"stroke-width": "1.5",
stroke: t.config.style.colors.activeReadonly[t.unit - 1],
fill: "none",
"stroke-linecap": "round",
"stroke-linejoin": "round"
}, [
$(v.$slots, "path-icon-readonly", {}, void 0, !0)
], 8, fe)) : y("", !0)
], 38));
}
}, ge = /* @__PURE__ */ ae(ve, [["__scopeId", "data-v-ff349576"]]), me = {
key: 0,
class: "vue-ui-rating-title",
style: { width: "100%" }
}, he = ["d", "fill"], pe = ["d"], be = ["d", "fill"], $e = ["d"], we = {
__name: "vue-ui-smiley",
props: {
config: {
type: Object,
default() {
return {};
}
},
dataset: {
type: Object,
default() {
return {};
}
}
},
emits: ["rate"],
setup(t, { expose: w, emit: g }) {
const { vue_ui_smiley: v } = te(), o = t, h = H(), U = g, m = x(null);
B(() => {
h["chart-background"] && console.warn("VueUiSmiley does not support the #chart-background slot.");
});
function S() {
(!Object.hasOwn(o.dataset, "rating") || _(o.dataset)) && ee({
componentName: "VueUiSmiley",
type: "datasetAttribute",
property: "rating"
});
}
B(S);
const e = x(I());
function I() {
return le({
userConfig: o.config,
defaultConfig: v
});
}
N(() => o.config, (l) => {
e.value = I(), k.value = e.value.readonly, S();
}, { deep: !0 });
const F = R(() => {
const l = o.dataset.rating;
return l && typeof l == "object" && !Array.isArray(l) ? O(l) : l ?? null;
}), X = R(() => typeof o.dataset.rating == "object" && !Array.isArray(o.dataset.rating)), d = x(F.value);
N(
F,
(l) => {
d.value = l;
}
);
const k = x(e.value.readonly), G = [
{
key: "smiley_0",
pathIconFilled: "M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-5 9.86a4.5 4.5 0 0 0 -3.214 1.35a1 1 0 1 0 1.428 1.4a2.5 2.5 0 0 1 3.572 0a1 1 0 0 0 1.428 -1.4a4.5 4.5 0 0 0 -3.214 -1.35zm-2.99 -4.2l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm6 0l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007z",
pathIcon: "M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0 M9 10l.01 0 M15 10l.01 0 M9.5 15.25a3.5 3.5 0 0 1 5 0",
pathIconFilledReadonly: "M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-5 9.86a4.5 4.5 0 0 0 -3.214 1.35a1 1 0 1 0 1.428 1.4a2.5 2.5 0 0 1 3.572 0a1 1 0 0 0 1.428 -1.4a4.5 4.5 0 0 0 -3.214 -1.35zm-2.99 -4.2l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm6 0l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007z",
pathIconReadonly: "M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0 M9 10l.01 0 M15 10l.01 0 M9.5 15.25a3.5 3.5 0 0 1 5 0"
},
{
key: "smiley_1",
pathIconFilled: "M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-2 10.66h-6l-.117 .007a1 1 0 0 0 0 1.986l.117 .007h6l.117 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-5.99 -5l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm6 0l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007z",
pathIcon: "M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0 M9 10l.01 0 M15 10l.01 0 M9 15l6 0",
pathIconFilledReadonly: "M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-2 10.66h-6l-.117 .007a1 1 0 0 0 0 1.986l.117 .007h6l.117 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-5.99 -5l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm6 0l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007z",
pathIconReadonly: "M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0 M9 10l.01 0 M15 10l.01 0 M9 15l6 0"
},
{
key: "smiley_2",
pathIconFilled: "M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-7.99 5.66l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm6 0l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007z",
pathIcon: "M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0 M9 10l.01 0 M15 10l.01 0",
pathIconFilledReadonly: "M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-7.99 5.66l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm6 0l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007z",
pathIconReadonly: "M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0 M9 10l.01 0 M15 10l.01 0"
},
{
key: "smiley_3",
pathIconFilled: "M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.8 10.946a1 1 0 0 0 -1.414 .014a2.5 2.5 0 0 1 -3.572 0a1 1 0 0 0 -1.428 1.4a4.5 4.5 0 0 0 6.428 0a1 1 0 0 0 -.014 -1.414zm-6.19 -5.286l-.127 .007a1 1 0 0 0 .117 1.993l.127 -.007a1 1 0 0 0 -.117 -1.993zm6 0l-.127 .007a1 1 0 0 0 .117 1.993l.127 -.007a1 1 0 0 0 -.117 -1.993z",
pathIcon: "M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0 M9 10l.01 0 M15 10l.01 0 M9.5 15a3.5 3.5 0 0 0 5 0",
pathIconFilledReadonly: "M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.8 10.946a1 1 0 0 0 -1.414 .014a2.5 2.5 0 0 1 -3.572 0a1 1 0 0 0 -1.428 1.4a4.5 4.5 0 0 0 6.428 0a1 1 0 0 0 -.014 -1.414zm-6.19 -5.286l-.127 .007a1 1 0 0 0 .117 1.993l.127 -.007a1 1 0 0 0 -.117 -1.993zm6 0l-.127 .007a1 1 0 0 0 .117 1.993l.127 -.007a1 1 0 0 0 -.117 -1.993z",
pathIconReadonly: "M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0 M9 10l.01 0 M15 10l.01 0 M9.5 15a3.5 3.5 0 0 0 5 0"
},
{
key: "smiley_4",
pathIconFilled: "M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-2 9.66h-6a1 1 0 0 0 -1 1v.05a3.975 3.975 0 0 0 3.777 3.97l.227 .005a4.026 4.026 0 0 0 3.99 -3.79l.006 -.206a1 1 0 0 0 -1 -1.029zm-5.99 -5l-.127 .007a1 1 0 0 0 .117 1.993l.127 -.007a1 1 0 0 0 -.117 -1.993zm6 0l-.127 .007a1 1 0 0 0 .117 1.993l.127 -.007a1 1 0 0 0 -.117 -1.993z",
pathIcon: "M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0 M9 9l.01 0 M15 9l.01 0 M8 13a4 4 0 1 0 8 0h-8",
pathIconFilledReadonly: "M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-2 9.66h-6a1 1 0 0 0 -1 1v.05a3.975 3.975 0 0 0 3.777 3.97l.227 .005a4.026 4.026 0 0 0 3.99 -3.79l.006 -.206a1 1 0 0 0 -1 -1.029zm-5.99 -5l-.127 .007a1 1 0 0 0 .117 1.993l.127 -.007a1 1 0 0 0 -.117 -1.993zm6 0l-.127 .007a1 1 0 0 0 .117 1.993l.127 -.007a1 1 0 0 0 -.117 -1.993z",
pathIconReadonly: "M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0 M9 9l.01 0 M15 9l.01 0 M8 13a4 4 0 1 0 8 0h-8"
}
];
function O(l) {
if (l == null) return null;
let n = 0, u = 0;
for (const c in l) {
const b = Number(c), A = l[c];
Number.isFinite(b) && (n += b * A, u += A);
}
return u === 0 ? 0 : n / u;
}
function Y(l) {
const n = d.value - l, u = 24;
switch (!0) {
case n < 0:
return 0;
case n > 1:
return 1 * u;
default:
return n * u;
}
}
function C(l) {
return e.value.readonly ? e.value.style.colors.inactive[l] : d.value === l + 1 ? e.value.style.icons.useGradient && e.value.style.icons.filled ? `url(#vueUiSmiley${l})` : e.value.style.colors.active[l] : m.value !== null && m.value === l ? e.value.style.icons.useGradient && e.value.style.icons.filled ? `url(#vueUiSmiley${l})` : e.value.style.colors.active[l] : e.value.style.colors.inactive[l];
}
const p = R(() => ({ value: l, tooltip: n = !1 }) => W(
n ? e.value.style.tooltip.formatter : e.value.style.rating.formatter,
l,
Z({
v: l,
r: n ? e.value.style.tooltip.roundingValue : e.value.style.rating.roundingValue
}),
e.value
));
function L(l) {
k.value || (d.value = l, U("rate", l));
}
function D() {
return d.value;
}
function E(l = !0) {
k.value = l;
}
return w({
getData: D,
toggleReadonly: E
}), (l, n) => (s(), i("div", {
class: "vue-data-ui-component vue-ui-smiley",
style: r(`background:${e.value.style.backgroundColor};font-family:${e.value.style.fontFamily};width:100%;`),
onMouseleave: n[1] || (n[1] = (u) => m.value = void 0)
}, [
e.value.style.title.text ? (s(), i("div", me, [
a("div", {
style: r(`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 ? (s(), i("div", {
key: 0,
style: r(`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)) : y("", !0)
])) : y("", !0),
e.value.style.rating.show && e.value.style.rating.position === "top" ? (s(), i("div", {
key: 1,
style: r(`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(p.value({ value: d.value })), 5)) : y("", !0),
a("div", {
class: "vue-ui-smiley-wrapper",
style: r(`overflow:visible;height:${e.value.style.itemSize}px;width:fit-content;margin:0 auto;display:flex;align-items:center;justify-content:center;`)
}, [
e.value.style.rating.show && e.value.style.rating.position === "left" ? (s(), i("div", {
key: 0,
style: r(`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(p.value({ value: d.value })), 5)) : y("", !0),
(s(), i(P, null, q(G, (u, c) => J(ge, {
key: u.key,
config: e.value,
unit: c + 1,
currentRating: d.value,
isReadonly: k.value,
hasBreakdown: X.value,
hoveredValue: m.value,
getActiveColor: C,
calcShapeFill: Y,
onMouseenter: (b) => m.value = c,
onMouseleave: n[0] || (n[0] = (b) => m.value = null),
onRate: (b) => L(c + 1)
}, {
rating: z(() => [
Q(f(p.value({ value: o.dataset.rating[String(c + 1)], tooltip: !0 })), 1)
]),
"path-icon-filled": z(() => [
a("path", {
d: u.pathIconFilled,
"stroke-width": "0",
fill: C(c)
}, null, 8, he)
]),
"path-icon": z(() => [
a("path", {
d: u.pathIcon
}, null, 8, pe)
]),
"path-icon-filled-readonly": z(() => [
a("path", {
d: u.pathIconFilledReadonly,
"stroke-width": "0",
fill: e.value.style.icons.useGradient ? `url(#vueUiSmiley${c})` : e.value.style.colors.activeReadonly[c]
}, null, 8, be)
]),
"path-icon-readonly": z(() => [
a("path", {
d: u.pathIconReadonly
}, null, 8, $e)
]),
_: 2
}, 1032, ["config", "unit", "currentRating", "isReadonly", "hasBreakdown", "hoveredValue", "onMouseenter", "onRate"])), 64)),
e.value.style.rating.show && e.value.style.rating.position === "right" ? (s(), i("div", {
key: 1,
style: r(`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(p.value({ value: d.value })), 5)) : y("", !0)
], 4),
e.value.style.rating.show && e.value.style.rating.position === "bottom" ? (s(), i("div", {
key: 2,
style: r(`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(p.value({ value: d.value })), 5)) : y("", !0)
], 36));
}
};
export {
we as default
};