v-nuxt-ui 0.2.16 → 0.2.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/module.json
CHANGED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* GlowBorder
|
|
3
|
+
* 通用流光边框容器：旋转 conic-gradient + blur 模拟边框流光。
|
|
4
|
+
* 参考 inspira-ui GradientButton 实现思路。
|
|
5
|
+
*
|
|
6
|
+
* - 始终保留 padding 空间，切换 active 时内容尺寸稳定不抖动。
|
|
7
|
+
* - active=false 时只是不渲染流光，结构与样式不变。
|
|
8
|
+
*/
|
|
9
|
+
type __VLS_Props = {
|
|
10
|
+
/** 是否启用流光效果 */
|
|
11
|
+
active?: boolean;
|
|
12
|
+
/** 流光颜色数组（conic-gradient 顺序） */
|
|
13
|
+
colors?: string[];
|
|
14
|
+
/** 边框宽度 px */
|
|
15
|
+
borderWidth?: number;
|
|
16
|
+
/** 外圆角 px */
|
|
17
|
+
borderRadius?: number;
|
|
18
|
+
/** 内层圆角 px，默认 borderRadius - borderWidth */
|
|
19
|
+
innerBorderRadius?: number;
|
|
20
|
+
/** 旋转一圈耗时 s */
|
|
21
|
+
duration?: number;
|
|
22
|
+
/** 流光模糊度 px */
|
|
23
|
+
blur?: number;
|
|
24
|
+
/** 选中时的缩放系数 */
|
|
25
|
+
scale?: number;
|
|
26
|
+
/** 选中时的投影 */
|
|
27
|
+
shadow?: string;
|
|
28
|
+
};
|
|
29
|
+
declare var __VLS_1: {};
|
|
30
|
+
type __VLS_Slots = {} & {
|
|
31
|
+
default?: (props: typeof __VLS_1) => any;
|
|
32
|
+
};
|
|
33
|
+
declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
|
|
34
|
+
scale: number;
|
|
35
|
+
borderWidth: number;
|
|
36
|
+
borderRadius: number;
|
|
37
|
+
blur: number;
|
|
38
|
+
duration: number;
|
|
39
|
+
colors: string[];
|
|
40
|
+
shadow: string;
|
|
41
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
42
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
43
|
+
declare const _default: typeof __VLS_export;
|
|
44
|
+
export default _default;
|
|
45
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
46
|
+
new (): {
|
|
47
|
+
$slots: S;
|
|
48
|
+
};
|
|
49
|
+
};
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { computed } from "vue";
|
|
3
|
+
const props = defineProps({
|
|
4
|
+
active: { type: Boolean, required: false },
|
|
5
|
+
colors: { type: Array, required: false, default: () => [
|
|
6
|
+
"#ef4444",
|
|
7
|
+
"#f97316",
|
|
8
|
+
"#fbbf24",
|
|
9
|
+
"#84cc16",
|
|
10
|
+
"#06b6d4",
|
|
11
|
+
"#6366f1",
|
|
12
|
+
"#ec4899",
|
|
13
|
+
"#ef4444"
|
|
14
|
+
] },
|
|
15
|
+
borderWidth: { type: Number, required: false, default: 2 },
|
|
16
|
+
borderRadius: { type: Number, required: false, default: 10 },
|
|
17
|
+
innerBorderRadius: { type: Number, required: false },
|
|
18
|
+
duration: { type: Number, required: false, default: 3 },
|
|
19
|
+
blur: { type: Number, required: false, default: 10 },
|
|
20
|
+
scale: { type: Number, required: false, default: 1.02 },
|
|
21
|
+
shadow: { type: String, required: false, default: "0 9px 9px rgba(0, 0, 0, 0.35)" }
|
|
22
|
+
});
|
|
23
|
+
const styleVars = computed(() => ({
|
|
24
|
+
"--gb-radius": `${props.borderRadius}px`,
|
|
25
|
+
"--gb-inner-radius": `${props.innerBorderRadius ?? Math.max(0, props.borderRadius - props.borderWidth)}px`,
|
|
26
|
+
"--gb-padding": `${props.borderWidth}px`,
|
|
27
|
+
"--gb-duration": `${props.duration}s`,
|
|
28
|
+
"--gb-blur": `${props.blur}px`,
|
|
29
|
+
"--gb-gradient": `conic-gradient(${props.colors.join(",")})`,
|
|
30
|
+
"--gb-scale": props.scale,
|
|
31
|
+
"--gb-shadow": props.shadow
|
|
32
|
+
}));
|
|
33
|
+
</script>
|
|
34
|
+
|
|
35
|
+
<template>
|
|
36
|
+
<div
|
|
37
|
+
class="glow-border relative"
|
|
38
|
+
:class="{ 'glow-border--active': active }"
|
|
39
|
+
:style="styleVars"
|
|
40
|
+
>
|
|
41
|
+
<div class="glow-border__inner relative size-full">
|
|
42
|
+
<slot />
|
|
43
|
+
</div>
|
|
44
|
+
</div>
|
|
45
|
+
</template>
|
|
46
|
+
|
|
47
|
+
<style scoped>
|
|
48
|
+
.glow-border{border-radius:var(--gb-radius);isolation:isolate;overflow:hidden;padding:var(--gb-padding)}.glow-border:before{animation:glow-border-rotate var(--gb-duration) linear infinite;animation-play-state:paused;background:var(--gb-gradient);content:"";filter:blur(var(--gb-blur));inset:-200%;opacity:0;pointer-events:none;position:absolute;transform:rotate(0deg);transition:opacity .2s ease-in-out;z-index:0}.glow-border__inner{background:var(--ui-bg);border-radius:var(--gb-inner-radius);position:relative;z-index:1}.glow-border--active:before{animation-play-state:running;opacity:1}@keyframes glow-border-rotate{to{transform:rotate(1turn)}}@media (prefers-reduced-motion:reduce){.glow-border,.glow-border:before{animation:none;transition:opacity .2s ease-in-out}}
|
|
49
|
+
</style>
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* GlowBorder
|
|
3
|
+
* 通用流光边框容器：旋转 conic-gradient + blur 模拟边框流光。
|
|
4
|
+
* 参考 inspira-ui GradientButton 实现思路。
|
|
5
|
+
*
|
|
6
|
+
* - 始终保留 padding 空间，切换 active 时内容尺寸稳定不抖动。
|
|
7
|
+
* - active=false 时只是不渲染流光，结构与样式不变。
|
|
8
|
+
*/
|
|
9
|
+
type __VLS_Props = {
|
|
10
|
+
/** 是否启用流光效果 */
|
|
11
|
+
active?: boolean;
|
|
12
|
+
/** 流光颜色数组（conic-gradient 顺序） */
|
|
13
|
+
colors?: string[];
|
|
14
|
+
/** 边框宽度 px */
|
|
15
|
+
borderWidth?: number;
|
|
16
|
+
/** 外圆角 px */
|
|
17
|
+
borderRadius?: number;
|
|
18
|
+
/** 内层圆角 px，默认 borderRadius - borderWidth */
|
|
19
|
+
innerBorderRadius?: number;
|
|
20
|
+
/** 旋转一圈耗时 s */
|
|
21
|
+
duration?: number;
|
|
22
|
+
/** 流光模糊度 px */
|
|
23
|
+
blur?: number;
|
|
24
|
+
/** 选中时的缩放系数 */
|
|
25
|
+
scale?: number;
|
|
26
|
+
/** 选中时的投影 */
|
|
27
|
+
shadow?: string;
|
|
28
|
+
};
|
|
29
|
+
declare var __VLS_1: {};
|
|
30
|
+
type __VLS_Slots = {} & {
|
|
31
|
+
default?: (props: typeof __VLS_1) => any;
|
|
32
|
+
};
|
|
33
|
+
declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
|
|
34
|
+
scale: number;
|
|
35
|
+
borderWidth: number;
|
|
36
|
+
borderRadius: number;
|
|
37
|
+
blur: number;
|
|
38
|
+
duration: number;
|
|
39
|
+
colors: string[];
|
|
40
|
+
shadow: string;
|
|
41
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
42
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
43
|
+
declare const _default: typeof __VLS_export;
|
|
44
|
+
export default _default;
|
|
45
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
46
|
+
new (): {
|
|
47
|
+
$slots: S;
|
|
48
|
+
};
|
|
49
|
+
};
|
package/package.json
CHANGED