@sdata/web-vue 2.3.1 → 2.6.0

package/es/border-beam/index.d.ts

@@ -0,0 +1,106 @@
+import type { App } from 'vue';
+import type { SDOptions } from '../_utils/types';
+import _BorderBeam from './border-beam.vue';
+export type { BorderBeamSize, BorderBeamTheme, BorderBeamColorVariant, BorderBeamFlowPreset, BorderBeamFlowPoint, BorderBeamFlowCoordinate, BorderBeamExposed, SizeConfig, ThemeColors, } from './types';
+declare const BorderBeam: {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<{
+        size?: import("./types").BorderBeamSize;
+        colorVariant?: import("./types").BorderBeamColorVariant;
+        theme?: import("./types").BorderBeamTheme;
+        staticColors?: boolean;
+        duration?: number;
+        active?: boolean;
+        borderRadius?: number;
+        brightness?: number;
+        saturation?: number;
+        hueRange?: number;
+        strength?: number;
+        density?: number;
+    }> & Readonly<{
+        onActivate?: (() => any) | undefined;
+        onDeactivate?: (() => any) | undefined;
+    }>, import("./types").BorderBeamExposed, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        activate: () => any;
+        deactivate: () => any;
+    }, import("vue").PublicProps, {
+        size: import("./types").BorderBeamSize;
+        active: boolean;
+        colorVariant: import("./types").BorderBeamColorVariant;
+        theme: import("./types").BorderBeamTheme;
+        staticColors: boolean;
+        hueRange: number;
+        strength: number;
+        density: number;
+    }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<{
+        size?: import("./types").BorderBeamSize;
+        colorVariant?: import("./types").BorderBeamColorVariant;
+        theme?: import("./types").BorderBeamTheme;
+        staticColors?: boolean;
+        duration?: number;
+        active?: boolean;
+        borderRadius?: number;
+        brightness?: number;
+        saturation?: number;
+        hueRange?: number;
+        strength?: number;
+        density?: number;
+    }> & Readonly<{
+        onActivate?: (() => any) | undefined;
+        onDeactivate?: (() => any) | undefined;
+    }>, import("./types").BorderBeamExposed, {}, {}, {}, {
+        size: import("./types").BorderBeamSize;
+        active: boolean;
+        colorVariant: import("./types").BorderBeamColorVariant;
+        theme: import("./types").BorderBeamTheme;
+        staticColors: boolean;
+        hueRange: number;
+        strength: number;
+        density: number;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<{
+    size?: import("./types").BorderBeamSize;
+    colorVariant?: import("./types").BorderBeamColorVariant;
+    theme?: import("./types").BorderBeamTheme;
+    staticColors?: boolean;
+    duration?: number;
+    active?: boolean;
+    borderRadius?: number;
+    brightness?: number;
+    saturation?: number;
+    hueRange?: number;
+    strength?: number;
+    density?: number;
+}> & Readonly<{
+    onActivate?: (() => any) | undefined;
+    onDeactivate?: (() => any) | undefined;
+}>, import("./types").BorderBeamExposed, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    activate: () => any;
+    deactivate: () => any;
+}, string, {
+    size: import("./types").BorderBeamSize;
+    active: boolean;
+    colorVariant: import("./types").BorderBeamColorVariant;
+    theme: import("./types").BorderBeamTheme;
+    staticColors: boolean;
+    hueRange: number;
+    strength: number;
+    density: number;
+}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {
+        default?: (props: {}) => any;
+    };
+}) & {
+    install: (app: App, options?: SDOptions) => void;
+};
+export type BorderBeamInstance = InstanceType<typeof _BorderBeam>;
+export default BorderBeam;

package/es/border-beam/index.js

@@ -0,0 +1,10 @@
+import { getComponentPrefix, setGlobalConfig } from "../_utils/global-config.js";
+import border_beam_default from "./border-beam.js";
+//#region components/border-beam/index.ts
+var BorderBeam = Object.assign(border_beam_default, { install: (app, options) => {
+	setGlobalConfig(app, options);
+	const componentPrefix = getComponentPrefix(options);
+	app.component(componentPrefix + border_beam_default.name, border_beam_default);
+} });
+//#endregion
+export { BorderBeam as default };

package/es/border-beam/pulseDriver.d.ts

@@ -0,0 +1,2 @@
+import type { PulseDriverConfig } from './styles';
+export declare function registerPulseInstance(el: HTMLElement, config: PulseDriverConfig): () => void;

package/es/border-beam/pulseDriver.js

@@ -0,0 +1,74 @@
+//#region components/border-beam/pulseDriver.ts
+var instances = /* @__PURE__ */ new Set();
+var rafId = null;
+var lastFrame = 0;
+var FRAME_INTERVAL = 1e3 / 30 - 2;
+var TWO_PI = Math.PI * 2;
+/**
+* Cosine ease-in-out factor in [0, 1]: 0 at phase 0/1, 1 at phase 0.5.
+* @param phase
+*/
+function pingPong(phase) {
+	return (1 - Math.cos(TWO_PI * phase)) / 2;
+}
+/**
+*
+* @param ts
+*/
+function frame(ts) {
+	rafId = requestAnimationFrame(frame);
+	if (ts - lastFrame < FRAME_INTERVAL) return;
+	lastFrame = ts;
+	const tSec = ts / 1e3;
+	instances.forEach(({ el, config }) => {
+		for (const osc of config.oscillators) {
+			const phase = (tSec - osc.delay) / osc.period;
+			const value = osc.a + (osc.b - osc.a) * pingPong(phase);
+			el.style.setProperty(osc.prop, osc.unit === "px" ? `${value.toFixed(2)}px` : value.toFixed(4));
+		}
+		if (config.hue) {
+			const { prop, range, period, continuous } = config.hue;
+			const value = continuous ? tSec / period % 1 * range : -range + 2 * range * pingPong(tSec / period);
+			el.style.setProperty(prop, `${value.toFixed(2)}deg`);
+		}
+	});
+}
+/**
+*
+*/
+function startLoop() {
+	if (rafId == null) {
+		lastFrame = 0;
+		rafId = requestAnimationFrame(frame);
+	}
+}
+/**
+*
+*/
+function stopLoopIfIdle() {
+	if (instances.size === 0 && rafId != null) {
+		cancelAnimationFrame(rafId);
+		rafId = null;
+	}
+}
+/**
+* Register an element to be driven by the shared pulse loop.
+* @param el
+* @param config
+* @returns a cleanup function that unregisters the instance (and stops the
+*          shared loop once no instances remain).
+*/
+function registerPulseInstance(el, config) {
+	const instance = {
+		el,
+		config
+	};
+	instances.add(instance);
+	startLoop();
+	return () => {
+		instances.delete(instance);
+		stopLoopIfIdle();
+	};
+}
+//#endregion
+export { registerPulseInstance };

package/es/border-beam/style/css.js

@@ -0,0 +1,2 @@
+import "../../style/index.css";
+import "./index.css";

package/es/border-beam/style/index.css

@@ -0,0 +1,21 @@
+/******** borderSize *******/
+/******** borderStyle *******/
+/******** radius *******/
+/******** shadow distance *******/
+/******** size *******/
+/******** spacing *******/
+/******** shadow *******/
+/******** opacity *******/
+/******** fontSize *******/
+/******** fontWeight ********/
+/******** Primary *******/
+/******** success *******/
+/******** warning *******/
+/******** danger *******/
+/******** link *******/
+/******** radius *******/
+/********* icon hover *********/
+.sd-border-beam {
+  position: relative;
+  display: inline-flex;
+}

package/es/border-beam/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style/index.scss';
+import './index.scss';

package/es/border-beam/style/index.js

@@ -0,0 +1,2 @@
+import "../../style/index.scss";
+import "./index.scss";

package/es/border-beam/style/index.scss

@@ -0,0 +1,12 @@
+@use './token.scss';
+
+$border-beam-prefix-cls: 'sd-border-beam';
+
+// BorderBeam 的动态 CSS 由 JS 生成并注入 document.head
+// 此 SCSS 文件仅提供 wrapper 结构类
+// 动画、渐变、mask 等视觉效果全部由 border-beam/styles.ts 生成
+
+.#{$border-beam-prefix-cls} {
+  position: relative;
+  display: inline-flex;
+}

package/es/border-beam/style/token.scss

@@ -0,0 +1,12 @@
+@use '@style/theme/index.scss' as global;
+
+@forward '@style/theme/index.scss';
+
+// BorderBeam 的视觉效果完全由 JS 动态生成 CSS 驱动
+// SCSS token 层仅保留结构属性和预设圆角
+
+$border-beam-border-radius-sm: 32px;
+$border-beam-border-radius-md: 16px;
+$border-beam-border-radius-line: 16px;
+$border-beam-border-radius-pulse-outside: 16px;
+$border-beam-border-radius-pulse-inner: 16px;

package/es/border-beam/styles.d.ts

@@ -0,0 +1,42 @@
+import type { SizeConfig, ThemeColors, BorderBeamColorVariant, BorderBeamSize } from './types';
+export declare const sizePresets: Record<BorderBeamSize, SizeConfig>;
+export declare const sizeThemePresets: Record<BorderBeamSize, Record<'dark' | 'light', ThemeColors>>;
+export declare const themeColors: Record<'dark' | 'light', ThemeColors>;
+export interface PulseOscillatorDef {
+    prop: string;
+    a: number;
+    b: number;
+    period: number;
+    delay: number;
+    unit: '' | 'px';
+}
+export interface PulseDriverConfig {
+    oscillators: PulseOscillatorDef[];
+    hue: {
+        prop: string;
+        range: number;
+        period: number;
+        continuous?: boolean;
+    } | null;
+}
+export declare function getPulseDriverConfig(size: BorderBeamSize, theme: 'dark' | 'light', duration: number, hueRange: number, staticColors: boolean, id: string): PulseDriverConfig | null;
+interface GenerateStylesOptions {
+    id: string;
+    borderRadius: number;
+    borderWidth: number;
+    duration: number;
+    strokeOpacity: number;
+    innerOpacity: number;
+    bloomOpacity: number;
+    innerShadow: string;
+    size: BorderBeamSize;
+    colorVariant: BorderBeamColorVariant;
+    staticColors: boolean;
+    brightness: number;
+    saturation: number;
+    hueRange: number;
+    theme: 'dark' | 'light';
+    hairlineOpacity?: number;
+}
+export declare function generateBeamCSS(options: GenerateStylesOptions): string;
+export {};