@sdata/web-vue 2.2.1 → 2.6.0

package/es/border-beam/border-beam.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,623 @@
+import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectSpread2.js";
+import { getPrefixCls } from "../_utils/global-config.js";
+import { registerPulseInstance } from "./pulseDriver.js";
+import { generateBeamCSS, getPulseDriverConfig, sizePresets, sizeThemePresets } from "./styles.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, ref, renderSlot, shallowRef, watch, withModifiers } from "vue";
+//#region components/border-beam/border-beam.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"data-active",
+	"data-fading",
+	"data-flowing",
+	"data-paused"
+];
+var _hoisted_2 = ["viewBox"];
+var _hoisted_3 = ["id"];
+var _hoisted_4 = ["seed"];
+var _hoisted_5 = ["scale"];
+var _hoisted_6 = [
+	"id",
+	"cx",
+	"cy",
+	"r"
+];
+var _hoisted_7 = ["stop-color"];
+var _hoisted_8 = ["stop-color"];
+var _hoisted_9 = ["stop-color"];
+var _hoisted_10 = ["stop-color"];
+var _hoisted_11 = ["stop-color"];
+var _hoisted_12 = [
+	"id",
+	"x",
+	"y",
+	"width",
+	"height"
+];
+var _hoisted_13 = ["filter"];
+var _hoisted_14 = [
+	"cx",
+	"cy",
+	"r"
+];
+var _hoisted_15 = [
+	"cx",
+	"cy",
+	"r"
+];
+var _hoisted_16 = [
+	"cx",
+	"cy",
+	"r"
+];
+var _hoisted_17 = [
+	"width",
+	"height",
+	"rx",
+	"fill",
+	"mask"
+];
+var _hoisted_18 = ["filter"];
+var _hoisted_19 = [
+	"cx",
+	"cy",
+	"r",
+	"stroke",
+	"stroke-width"
+];
+var _hoisted_20 = [
+	"cx",
+	"cy",
+	"r",
+	"stroke",
+	"stroke-width"
+];
+var _hoisted_21 = [
+	"cx",
+	"cy",
+	"r",
+	"fill"
+];
+var instanceCounter = 0;
+var border_beam_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, { name: "BorderBeam" }), {}, {
+	__name: "border-beam",
+	props: {
+		size: { default: "md" },
+		colorVariant: { default: "colorful" },
+		theme: { default: "dark" },
+		staticColors: {
+			type: Boolean,
+			default: false
+		},
+		duration: {},
+		active: {
+			type: Boolean,
+			default: true
+		},
+		borderRadius: {},
+		brightness: {},
+		saturation: {},
+		hueRange: { default: 30 },
+		strength: { default: 1 },
+		density: { default: 1 }
+	},
+	emits: ["activate", "deactivate"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const id = `bb-${++instanceCounter}`;
+		const prefixCls = getPrefixCls("border-beam");
+		const cls = computed(() => [prefixCls]);
+		const systemTheme = ref("dark");
+		function updateSystemTheme() {
+			if (typeof window === "undefined") return;
+			systemTheme.value = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+		}
+		let mediaQueryCleanup = null;
+		onMounted(() => {
+			updateSystemTheme();
+			const mq = window.matchMedia("(prefers-color-scheme: dark)");
+			const handler = (e) => {
+				systemTheme.value = e.matches ? "dark" : "light";
+			};
+			mq.addEventListener("change", handler);
+			mediaQueryCleanup = () => mq.removeEventListener("change", handler);
+		});
+		onUnmounted(() => {
+			mediaQueryCleanup === null || mediaQueryCleanup === void 0 || mediaQueryCleanup();
+		});
+		function resolveTheme(theme, sysTheme) {
+			return theme === "auto" ? sysTheme : theme;
+		}
+		const wrapperRef = ref(null);
+		const isActive = ref(props.active);
+		const isFading = ref(false);
+		const isVisible = ref(true);
+		const detectedRadius = ref(null);
+		const pulseGlowScale = ref({
+			x: 1,
+			y: 1
+		});
+		const isFlowing = shallowRef(false);
+		const flowKey = shallowRef(0);
+		const flowPoint = shallowRef({
+			x: 0,
+			y: 0
+		});
+		const flowRadius = shallowRef(0);
+		const flowBox = shallowRef({
+			width: 1,
+			height: 1
+		});
+		const flowSeed = shallowRef(1);
+		let flowTimer = null;
+		function clearFlowTimer() {
+			if (!flowTimer) return;
+			window.clearTimeout(flowTimer);
+			flowTimer = null;
+		}
+		function finishFlow() {
+			clearFlowTimer();
+			isFlowing.value = false;
+		}
+		function resolveFlowPoint(coordinate, rect) {
+			const value = coordinate !== null && coordinate !== void 0 ? coordinate : "top-right";
+			if (typeof value !== "string") return {
+				x: value.x,
+				y: value.y
+			};
+			switch (value) {
+				case "top-left": return {
+					x: 0,
+					y: 0
+				};
+				case "bottom-left": return {
+					x: 0,
+					y: rect.height
+				};
+				case "bottom-right": return {
+					x: rect.width,
+					y: rect.height
+				};
+				case "center": return {
+					x: rect.width / 2,
+					y: rect.height / 2
+				};
+				default: return {
+					x: rect.width,
+					y: 0
+				};
+			}
+		}
+		function getFlowRadius(point, rect) {
+			return Math.max(Math.hypot(point.x, point.y), Math.hypot(rect.width - point.x, point.y), Math.hypot(point.x, rect.height - point.y), Math.hypot(rect.width - point.x, rect.height - point.y)) + 48;
+		}
+		function getFlowSeed(point) {
+			return Math.max(1, Math.round((point.x * 3 + point.y * 5 + flowKey.value * 17) % 997));
+		}
+		const flowDisplacement = computed(() => Math.max(8, Math.min(24, flowRadius.value * .07)));
+		const flowColors = computed(() => {
+			const isDark = resolvedTheme.value === "dark";
+			const variants = {
+				colorful: isDark ? {
+					accent: "#65d8ff",
+					edge: "#b060ff"
+				} : {
+					accent: "#2785ff",
+					edge: "#8d50d8"
+				},
+				mono: isDark ? {
+					accent: "#f4f4f0",
+					edge: "#b7bbb8"
+				} : {
+					accent: "#4b5250",
+					edge: "#8a908d"
+				},
+				ocean: isDark ? {
+					accent: "#68c8ff",
+					edge: "#7a77ff"
+				} : {
+					accent: "#2c76d8",
+					edge: "#6356c8"
+				},
+				sunset: isDark ? {
+					accent: "#ffb25f",
+					edge: "#ff646f"
+				} : {
+					accent: "#dd6b22",
+					edge: "#c84450"
+				}
+			}[props.colorVariant];
+			return _objectSpread2({
+				core: isDark ? "#f8fdff" : "#ffffff",
+				mist: isDark ? "#b9f2ff" : "#e9fbff",
+				specular: isDark ? "rgba(255, 255, 255, 0.5)" : "rgba(255, 255, 255, 0.38)",
+				front: variants.accent
+			}, variants);
+		});
+		function shouldReduceMotion() {
+			var _window$matchMedia, _window;
+			return typeof window !== "undefined" && ((_window$matchMedia = (_window = window).matchMedia) === null || _window$matchMedia === void 0 ? void 0 : _window$matchMedia.call(_window, "(prefers-reduced-motion: reduce)").matches);
+		}
+		function flowFrom(coordinate) {
+			const el = wrapperRef.value;
+			if (!el) return;
+			const rect = el.getBoundingClientRect();
+			const point = resolveFlowPoint(coordinate, rect);
+			flowKey.value += 1;
+			flowBox.value = {
+				width: Math.max(1, rect.width),
+				height: Math.max(1, rect.height)
+			};
+			flowPoint.value = point;
+			flowRadius.value = getFlowRadius(point, rect);
+			flowSeed.value = getFlowSeed(point);
+			isActive.value = true;
+			isFading.value = false;
+			if (shouldReduceMotion()) {
+				finishFlow();
+				return;
+			}
+			clearFlowTimer();
+			isFlowing.value = true;
+			flowTimer = window.setTimeout(finishFlow, 760);
+		}
+		function handleFlowAnimationEnd() {
+			finishFlow();
+		}
+		__expose({ flowFrom });
+		let mutationObserver = null;
+		onMounted(() => {
+			const detect = () => {
+				if (props.borderRadius != null) return;
+				const el = wrapperRef.value;
+				if (!el) return;
+				const child = el.firstElementChild;
+				if (!child) return;
+				const computed = getComputedStyle(child);
+				const raw = parseFloat(computed.borderTopLeftRadius);
+				if (!isNaN(raw) && raw > 0) detectedRadius.value = raw;
+			};
+			nextTick(() => {
+				detect();
+				const el = wrapperRef.value;
+				if (!el) return;
+				mutationObserver = new MutationObserver(detect);
+				mutationObserver.observe(el, {
+					childList: true,
+					subtree: false
+				});
+			});
+		});
+		onUnmounted(() => {
+			clearFlowTimer();
+			mutationObserver === null || mutationObserver === void 0 || mutationObserver.disconnect();
+		});
+		watch(() => props.active, (active) => {
+			if (active && !isActive.value && !isFading.value) isActive.value = true;
+			else if (!active && isActive.value && !isFading.value) isFading.value = true;
+		});
+		let intersectionCleanup = null;
+		onMounted(() => {
+			const el = wrapperRef.value;
+			if (!el || typeof IntersectionObserver === "undefined") return;
+			const observer = new IntersectionObserver((entries) => {
+				for (const entry of entries) isVisible.value = entry.isIntersecting;
+			}, { rootMargin: "256px" });
+			observer.observe(el);
+			intersectionCleanup = () => observer.disconnect();
+		});
+		onUnmounted(() => {
+			intersectionCleanup === null || intersectionCleanup === void 0 || intersectionCleanup();
+		});
+		let resizeObserverCleanup = null;
+		function setupPulseGlowScale() {
+			resizeObserverCleanup === null || resizeObserverCleanup === void 0 || resizeObserverCleanup();
+			resizeObserverCleanup = null;
+			if (props.size !== "pulse-outside") {
+				pulseGlowScale.value = {
+					x: 1,
+					y: 1
+				};
+				return;
+			}
+			const el = wrapperRef.value;
+			if (!el) return;
+			const REF_WIDTH = 350;
+			const REF_HEIGHT = 140;
+			const MIN_SCALE = .35;
+			const MAX_SCALE = 4;
+			const clamp = (value) => Math.max(MIN_SCALE, Math.min(MAX_SCALE, value));
+			const measure = () => {
+				const child = el.firstElementChild;
+				if (!child) return;
+				const rect = child.getBoundingClientRect();
+				if (!rect.width || !rect.height) return;
+				const x = +clamp(rect.width / REF_WIDTH).toFixed(3);
+				const y = +clamp(rect.height / REF_HEIGHT).toFixed(3);
+				if (pulseGlowScale.value.x !== x || pulseGlowScale.value.y !== y) pulseGlowScale.value = {
+					x,
+					y
+				};
+			};
+			nextTick(() => {
+				measure();
+				if (typeof ResizeObserver === "undefined") return;
+				const child = el.firstElementChild;
+				if (!child) return;
+				const ro = new ResizeObserver(measure);
+				ro.observe(child);
+				resizeObserverCleanup = () => ro.disconnect();
+			});
+		}
+		watch(() => props.size, () => setupPulseGlowScale());
+		onMounted(() => setupPulseGlowScale());
+		onUnmounted(() => resizeObserverCleanup === null || resizeObserverCleanup === void 0 ? void 0 : resizeObserverCleanup());
+		function handleAnimationEnd(e) {
+			const animationName = e.animationName || "";
+			if (animationName.includes("fade-out")) {
+				isActive.value = false;
+				isFading.value = false;
+				emit("deactivate");
+			} else if (animationName.includes("fade-in")) emit("activate");
+		}
+		const resolvedTheme = computed(() => resolveTheme(props.theme, systemTheme.value));
+		const themeConfig = computed(() => sizeThemePresets[props.size][resolvedTheme.value]);
+		const sizeConfig = computed(() => sizePresets[props.size]);
+		const isPulse = computed(() => props.size === "pulse-inner" || props.size === "pulse-outside");
+		const finalBorderRadius = computed(() => {
+			var _ref, _props$borderRadius;
+			return (_ref = (_props$borderRadius = props.borderRadius) !== null && _props$borderRadius !== void 0 ? _props$borderRadius : detectedRadius.value) !== null && _ref !== void 0 ? _ref : sizeConfig.value.borderRadius;
+		});
+		function getDefaultDuration(size, isPulse) {
+			if (size === "line") return 3.1;
+			if (isPulse) return 2.3;
+			return 1.96;
+		}
+		const finalDuration = computed(() => {
+			var _props$duration;
+			return (_props$duration = props.duration) !== null && _props$duration !== void 0 ? _props$duration : getDefaultDuration(props.size, isPulse.value);
+		});
+		const finalSaturation = computed(() => {
+			var _props$saturation;
+			return (_props$saturation = props.saturation) !== null && _props$saturation !== void 0 ? _props$saturation : themeConfig.value.saturation;
+		});
+		const finalBrightness = computed(() => {
+			var _ref2, _props$brightness;
+			return (_ref2 = (_props$brightness = props.brightness) !== null && _props$brightness !== void 0 ? _props$brightness : themeConfig.value.brightness) !== null && _ref2 !== void 0 ? _ref2 : 1.3;
+		});
+		const finalHueRange = computed(() => props.size === "line" ? Math.min(props.hueRange, 13) : props.hueRange);
+		const finalStaticColors = computed(() => props.colorVariant === "mono" ? true : props.staticColors);
+		const cssStyles = computed(() => generateBeamCSS({
+			id,
+			borderRadius: finalBorderRadius.value,
+			borderWidth: sizeConfig.value.borderWidth,
+			duration: finalDuration.value,
+			strokeOpacity: themeConfig.value.strokeOpacity,
+			innerOpacity: themeConfig.value.innerOpacity,
+			bloomOpacity: themeConfig.value.bloomOpacity,
+			innerShadow: themeConfig.value.innerShadow,
+			size: props.size,
+			colorVariant: props.colorVariant,
+			staticColors: finalStaticColors.value,
+			brightness: finalBrightness.value,
+			saturation: finalSaturation.value,
+			hueRange: finalHueRange.value,
+			theme: resolvedTheme.value,
+			hairlineOpacity: themeConfig.value.hairlineOpacity
+		}));
+		let styleEl = null;
+		function ensureStyleEl() {
+			if (!styleEl) {
+				styleEl = document.createElement("style");
+				styleEl.setAttribute("data-beam-style", id);
+				document.head.appendChild(styleEl);
+			}
+			return styleEl;
+		}
+		onMounted(() => {
+			ensureStyleEl().textContent = cssStyles.value;
+		});
+		watch(cssStyles, (css) => {
+			ensureStyleEl().textContent = css;
+		});
+		onUnmounted(() => {
+			styleEl === null || styleEl === void 0 || styleEl.remove();
+			styleEl = null;
+		});
+		const driverConfig = computed(() => isPulse.value ? getPulseDriverConfig(props.size, resolvedTheme.value, finalDuration.value, finalHueRange.value, finalStaticColors.value, id) : null);
+		let unregisterPulse = null;
+		function syncPulseDriver() {
+			var _window$matchMedia2, _window2;
+			if (unregisterPulse) {
+				unregisterPulse();
+				unregisterPulse = null;
+			}
+			if (!driverConfig.value) return;
+			if (!(isActive.value || isFading.value) || !isVisible.value) return;
+			const el = wrapperRef.value;
+			if (!el) return;
+			if (typeof window !== "undefined" && ((_window$matchMedia2 = (_window2 = window).matchMedia) === null || _window$matchMedia2 === void 0 ? void 0 : _window$matchMedia2.call(_window2, "(prefers-reduced-motion: reduce)").matches)) return;
+			unregisterPulse = registerPulseInstance(el, driverConfig.value);
+		}
+		onMounted(() => syncPulseDriver());
+		watch([
+			driverConfig,
+			isActive,
+			isFading,
+			isVisible
+		], () => syncPulseDriver());
+		onUnmounted(() => {
+			if (unregisterPulse) {
+				unregisterPulse();
+				unregisterPulse = null;
+			}
+		});
+		const mergedStyle = computed(() => _objectSpread2({
+			"--beam-strength": Math.max(0, Math.min(1, props.strength)),
+			"--beam-density": Math.max(.1, props.density),
+			"--beam-flow-x": `${flowPoint.value.x}px`,
+			"--beam-flow-y": `${flowPoint.value.y}px`,
+			"--beam-flow-radius": `${flowRadius.value}px`
+		}, props.size === "pulse-outside" ? {
+			"--pulse-glow-sx": pulseGlowScale.value.x,
+			"--pulse-glow-sy": pulseGlowScale.value.y
+		} : {}));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "wrapperRef",
+				ref: wrapperRef,
+				"data-beam": id,
+				"data-active": isActive.value && !isFading.value ? "" : void 0,
+				"data-fading": isFading.value ? "" : void 0,
+				"data-flowing": isFlowing.value ? "" : void 0,
+				"data-paused": isActive.value && !isFading.value && !isVisible.value ? "" : void 0,
+				class: normalizeClass(cls.value),
+				style: normalizeStyle(mergedStyle.value),
+				onAnimationend: handleAnimationEnd
+			}, [
+				renderSlot(_ctx.$slots, "default"),
+				_cache[2] || (_cache[2] = createElementVNode("div", { "data-beam-bloom": "" }, null, -1)),
+				isFlowing.value ? (openBlock(), createElementBlock("svg", {
+					key: flowKey.value,
+					"data-beam-flow": "",
+					viewBox: `0 0 ${flowBox.value.width} ${flowBox.value.height}`,
+					preserveAspectRatio: "none",
+					"aria-hidden": "true",
+					onAnimationend: withModifiers(handleFlowAnimationEnd, ["stop"])
+				}, [
+					createElementVNode("defs", null, [
+						createElementVNode("filter", {
+							id: `${id}-flow-warp`,
+							x: "-24%",
+							y: "-24%",
+							width: "148%",
+							height: "148%",
+							"color-interpolation-filters": "sRGB"
+						}, [
+							createElementVNode("feTurbulence", {
+								type: "fractalNoise",
+								baseFrequency: "0.012 0.026",
+								seed: flowSeed.value,
+								numOctaves: "2",
+								result: "flow-noise"
+							}, null, 8, _hoisted_4),
+							createElementVNode("feDisplacementMap", {
+								in: "SourceGraphic",
+								in2: "flow-noise",
+								scale: flowDisplacement.value,
+								xChannelSelector: "R",
+								yChannelSelector: "G",
+								result: "flow-displaced"
+							}, null, 8, _hoisted_5),
+							_cache[0] || (_cache[0] = createElementVNode("feGaussianBlur", {
+								in: "flow-displaced",
+								stdDeviation: "1.1",
+								result: "flow-soft"
+							}, null, -1)),
+							_cache[1] || (_cache[1] = createElementVNode("feColorMatrix", {
+								in: "flow-soft",
+								type: "saturate",
+								values: "1.24"
+							}, null, -1))
+						], 8, _hoisted_3),
+						createElementVNode("radialGradient", {
+							id: `${id}-flow-fill`,
+							gradientUnits: "userSpaceOnUse",
+							cx: flowPoint.value.x,
+							cy: flowPoint.value.y,
+							r: flowRadius.value
+						}, [
+							createElementVNode("stop", {
+								offset: "0",
+								"stop-color": flowColors.value.core,
+								"stop-opacity": "0.5"
+							}, null, 8, _hoisted_7),
+							createElementVNode("stop", {
+								offset: "0.18",
+								"stop-color": flowColors.value.mist,
+								"stop-opacity": "0.42"
+							}, null, 8, _hoisted_8),
+							createElementVNode("stop", {
+								offset: "0.46",
+								"stop-color": flowColors.value.accent,
+								"stop-opacity": "0.32"
+							}, null, 8, _hoisted_9),
+							createElementVNode("stop", {
+								offset: "0.76",
+								"stop-color": flowColors.value.edge,
+								"stop-opacity": "0.18"
+							}, null, 8, _hoisted_10),
+							createElementVNode("stop", {
+								offset: "1",
+								"stop-color": flowColors.value.edge,
+								"stop-opacity": "0"
+							}, null, 8, _hoisted_11)
+						], 8, _hoisted_6),
+						createElementVNode("mask", {
+							id: `${id}-flow-mask`,
+							maskUnits: "userSpaceOnUse",
+							x: -flowRadius.value,
+							y: -flowRadius.value,
+							width: flowBox.value.width + flowRadius.value * 2,
+							height: flowBox.value.height + flowRadius.value * 2
+						}, [createElementVNode("g", { filter: `url(#${id}-flow-warp)` }, [
+							createElementVNode("circle", {
+								"data-beam-flow-blob": "",
+								cx: flowPoint.value.x,
+								cy: flowPoint.value.y,
+								r: flowRadius.value
+							}, null, 8, _hoisted_14),
+							createElementVNode("circle", {
+								"data-beam-flow-blob": "shore-a",
+								cx: flowPoint.value.x,
+								cy: flowPoint.value.y,
+								r: flowRadius.value * .72
+							}, null, 8, _hoisted_15),
+							createElementVNode("circle", {
+								"data-beam-flow-blob": "shore-b",
+								cx: flowPoint.value.x,
+								cy: flowPoint.value.y,
+								r: flowRadius.value * .56
+							}, null, 8, _hoisted_16)
+						], 8, _hoisted_13)], 8, _hoisted_12)
+					]),
+					createElementVNode("rect", {
+						"data-beam-flow-sheet": "",
+						x: "0",
+						y: "0",
+						width: flowBox.value.width,
+						height: flowBox.value.height,
+						rx: finalBorderRadius.value,
+						fill: `url(#${id}-flow-fill)`,
+						mask: `url(#${id}-flow-mask)`
+					}, null, 8, _hoisted_17),
+					createElementVNode("g", { filter: `url(#${id}-flow-warp)` }, [createElementVNode("circle", {
+						"data-beam-flow-front": "",
+						cx: flowPoint.value.x,
+						cy: flowPoint.value.y,
+						r: flowRadius.value,
+						fill: "none",
+						stroke: flowColors.value.front,
+						"stroke-width": Math.max(18, flowRadius.value * .1)
+					}, null, 8, _hoisted_19), createElementVNode("circle", {
+						"data-beam-flow-front": "highlight",
+						cx: flowPoint.value.x,
+						cy: flowPoint.value.y,
+						r: flowRadius.value * .94,
+						fill: "none",
+						stroke: flowColors.value.specular,
+						"stroke-width": Math.max(8, flowRadius.value * .035)
+					}, null, 8, _hoisted_20)], 8, _hoisted_18),
+					createElementVNode("circle", {
+						"data-beam-flow-specular": "",
+						cx: flowPoint.value.x,
+						cy: flowPoint.value.y,
+						r: Math.max(16, flowRadius.value * .18),
+						fill: flowColors.value.specular
+					}, null, 8, _hoisted_21)
+				], 40, _hoisted_2)) : createCommentVNode("", true)
+			], 46, _hoisted_1);
+		};
+	}
+}));
+//#endregion
+export { border_beam_vue_vue_type_script_setup_true_lang_default as default };