vue-data-ui 3.22.8 → 3.22.10

package/dist/vue-ui-rating-CzLGCFWK.js

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