srcdev-nuxt-components 1.1.1 → 1.1.3
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.
|
@@ -0,0 +1,206 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="container-glow-wrapper" ref="containerGlowWrapper">
|
|
3
|
+
<template v-for="(item, key) in data" :key="key">
|
|
4
|
+
<component :is="tag" class="container-glow-core" :class="elementClasses" ref="containerGlowItem">
|
|
5
|
+
<div class="glows"></div>
|
|
6
|
+
<slot :name="`container-glow-${key}`"></slot>
|
|
7
|
+
</component>
|
|
8
|
+
</template>
|
|
9
|
+
</div>
|
|
10
|
+
</template>
|
|
11
|
+
|
|
12
|
+
<script setup lang="ts">
|
|
13
|
+
interface Data {
|
|
14
|
+
title: string;
|
|
15
|
+
content: string;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
const props = defineProps({
|
|
19
|
+
data: {
|
|
20
|
+
type: Array as PropType<Data[]>,
|
|
21
|
+
default: () => [],
|
|
22
|
+
},
|
|
23
|
+
tag: {
|
|
24
|
+
type: String as PropType<string>,
|
|
25
|
+
default: 'div',
|
|
26
|
+
},
|
|
27
|
+
styleClassPassthrough: {
|
|
28
|
+
type: Array as PropType<string[]>,
|
|
29
|
+
default: () => [],
|
|
30
|
+
},
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
|
|
34
|
+
|
|
35
|
+
const containerGlowWrapper = ref<HTMLElement>();
|
|
36
|
+
const containerGlowItem = ref<HTMLElement[]>([]);
|
|
37
|
+
|
|
38
|
+
const CONFIG = {
|
|
39
|
+
proximity: 40,
|
|
40
|
+
spread: 80,
|
|
41
|
+
blur: 20,
|
|
42
|
+
gap: 32,
|
|
43
|
+
vertical: false,
|
|
44
|
+
opacity: 0,
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
const PROXIMITY = 10;
|
|
48
|
+
|
|
49
|
+
const UPDATE = (event: PointerEvent) => {
|
|
50
|
+
// get the angle based on the center point of the card and pointer position
|
|
51
|
+
for (const CARD of containerGlowItem.value) {
|
|
52
|
+
// Check the card against the proximity and then start updating
|
|
53
|
+
const CARD_BOUNDS = CARD.getBoundingClientRect();
|
|
54
|
+
// Get distance between pointer and outerbounds of card
|
|
55
|
+
if (
|
|
56
|
+
event?.x > CARD_BOUNDS.left - CONFIG.proximity &&
|
|
57
|
+
event?.x < CARD_BOUNDS.left + CARD_BOUNDS.width + CONFIG.proximity &&
|
|
58
|
+
event?.y > CARD_BOUNDS.top - CONFIG.proximity &&
|
|
59
|
+
event?.y < CARD_BOUNDS.top + CARD_BOUNDS.height + CONFIG.proximity
|
|
60
|
+
) {
|
|
61
|
+
// If within proximity set the active opacity
|
|
62
|
+
CARD.style.setProperty('--active', String(1));
|
|
63
|
+
} else {
|
|
64
|
+
CARD.style.setProperty('--active', String(CONFIG.opacity));
|
|
65
|
+
}
|
|
66
|
+
const CARD_CENTER = [CARD_BOUNDS.left + CARD_BOUNDS.width * 0.5, CARD_BOUNDS.top + CARD_BOUNDS.height * 0.5];
|
|
67
|
+
let ANGLE = (Math.atan2(event?.y - CARD_CENTER[1], event?.x - CARD_CENTER[0]) * 180) / Math.PI;
|
|
68
|
+
ANGLE = ANGLE < 0 ? ANGLE + 360 : ANGLE;
|
|
69
|
+
CARD.style.setProperty('--start', String(ANGLE + 90));
|
|
70
|
+
}
|
|
71
|
+
};
|
|
72
|
+
|
|
73
|
+
const RESTYLE = () => {
|
|
74
|
+
containerGlowWrapper.value?.style.setProperty('--gap', String(CONFIG.gap));
|
|
75
|
+
containerGlowWrapper.value?.style.setProperty('--blur', String(CONFIG.blur));
|
|
76
|
+
containerGlowWrapper.value?.style.setProperty('--spread', String(CONFIG.spread));
|
|
77
|
+
containerGlowWrapper.value?.style.setProperty('--direction', CONFIG.vertical ? 'column' : 'row');
|
|
78
|
+
};
|
|
79
|
+
|
|
80
|
+
// document.body.addEventListener('pointermove', UPDATE);
|
|
81
|
+
|
|
82
|
+
onMounted(() => {
|
|
83
|
+
if (containerGlowWrapper.value) {
|
|
84
|
+
RESTYLE();
|
|
85
|
+
document.body.addEventListener('pointermove', UPDATE);
|
|
86
|
+
}
|
|
87
|
+
});
|
|
88
|
+
</script>
|
|
89
|
+
|
|
90
|
+
<style lang="css">
|
|
91
|
+
:root {
|
|
92
|
+
--bg: hsl(246 44% 7%);
|
|
93
|
+
--border: hsl(280 10% 50% / 1);
|
|
94
|
+
--card: hsl(237 36% 10%);
|
|
95
|
+
--color: hsl(240 18% 80%);
|
|
96
|
+
--border-width: 2px;
|
|
97
|
+
--border-radius: 12px;
|
|
98
|
+
--gradient: conic-gradient(
|
|
99
|
+
from 180deg at 50% 70%,
|
|
100
|
+
hsla(0, 0%, 98%, 1) 0deg,
|
|
101
|
+
#eec32d 72.0000010728836deg,
|
|
102
|
+
#ec4b4b 144.0000021457672deg,
|
|
103
|
+
#709ab9 216.00000858306885deg,
|
|
104
|
+
#4dffbf 288.0000042915344deg,
|
|
105
|
+
hsla(0, 0%, 98%, 1) 1turn
|
|
106
|
+
);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
@property --start {
|
|
110
|
+
syntax: '<number>';
|
|
111
|
+
inherits: true;
|
|
112
|
+
initial-value: 0;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.container-glow-wrapper {
|
|
116
|
+
display: flex;
|
|
117
|
+
gap: 3.2rem;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.container-glow-core {
|
|
121
|
+
& *,
|
|
122
|
+
& *:after,
|
|
123
|
+
& *:before {
|
|
124
|
+
box-sizing: border-box;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
--active: 0.15;
|
|
128
|
+
--start: 0;
|
|
129
|
+
height: 100%;
|
|
130
|
+
background: var(--card);
|
|
131
|
+
padding: 2rem;
|
|
132
|
+
aspect-ratio: 330 / 400;
|
|
133
|
+
border-radius: var(--border-radius);
|
|
134
|
+
min-width: 280px;
|
|
135
|
+
max-width: 280px;
|
|
136
|
+
display: flex;
|
|
137
|
+
flex-direction: column;
|
|
138
|
+
gap: 0.25rem;
|
|
139
|
+
position: relative;
|
|
140
|
+
|
|
141
|
+
&:is(:hover, :focus-visible) {
|
|
142
|
+
z-index: 2;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
&::before {
|
|
146
|
+
position: absolute;
|
|
147
|
+
inset: 0;
|
|
148
|
+
border: var(--border-width) solid transparent;
|
|
149
|
+
content: '';
|
|
150
|
+
border-radius: var(--border-radius);
|
|
151
|
+
pointer-events: none;
|
|
152
|
+
background: var(--border);
|
|
153
|
+
background-attachment: fixed;
|
|
154
|
+
border-radius: var(--border-radius);
|
|
155
|
+
mask: linear-gradient(#0000, #0000),
|
|
156
|
+
conic-gradient(from calc(((var(--start) + (var(--spread) * 0.25)) - (var(--spread) * 1.5)) * 1deg), hsl(0 0% 100% / 0.15) 0deg, white, hsl(0 0% 100% / 0.15) calc(var(--spread) * 2.5deg));
|
|
157
|
+
mask-clip: padding-box, border-box;
|
|
158
|
+
mask-composite: intersect;
|
|
159
|
+
opacity: var(--active);
|
|
160
|
+
transition: opacity 1s;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
&::after {
|
|
164
|
+
--bg-size: 100%;
|
|
165
|
+
content: '';
|
|
166
|
+
pointer-events: none;
|
|
167
|
+
position: absolute;
|
|
168
|
+
background: var(--gradient);
|
|
169
|
+
background-attachment: fixed;
|
|
170
|
+
border-radius: var(--border-radius);
|
|
171
|
+
opacity: var(--active, 0);
|
|
172
|
+
transition: opacity 1s;
|
|
173
|
+
--alpha: 0;
|
|
174
|
+
inset: 0;
|
|
175
|
+
border: var(--border-width) solid transparent;
|
|
176
|
+
mask: linear-gradient(#0000, #0000), conic-gradient(from calc(((var(--start) + (var(--spread) * 0.25)) - (var(--spread) * 0.5)) * 1deg), #0000 0deg, #fff, #0000 calc(var(--spread) * 0.5deg));
|
|
177
|
+
filter: brightness(1.5);
|
|
178
|
+
mask-clip: padding-box, border-box;
|
|
179
|
+
mask-composite: intersect;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.glows {
|
|
183
|
+
pointer-events: none;
|
|
184
|
+
position: absolute;
|
|
185
|
+
inset: 0;
|
|
186
|
+
filter: blur(calc(var(--blur) * 1px));
|
|
187
|
+
|
|
188
|
+
&::after,
|
|
189
|
+
&::before {
|
|
190
|
+
--alpha: 0;
|
|
191
|
+
content: '';
|
|
192
|
+
background: var(--gradient);
|
|
193
|
+
background-attachment: fixed;
|
|
194
|
+
position: absolute;
|
|
195
|
+
inset: -5px;
|
|
196
|
+
border: 10px solid transparent;
|
|
197
|
+
border-radius: var(--border-radius);
|
|
198
|
+
mask: linear-gradient(#0000, #0000), conic-gradient(from calc((var(--start) - (var(--spread) * 0.5)) * 1deg), #000 0deg, #fff, #0000 calc(var(--spread) * 1deg));
|
|
199
|
+
mask-composite: intersect;
|
|
200
|
+
mask-clip: padding-box, border-box;
|
|
201
|
+
opacity: var(--active);
|
|
202
|
+
transition: opacity 1s;
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
</style>
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "srcdev-nuxt-components",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "1.1.
|
|
4
|
+
"version": "1.1.3",
|
|
5
5
|
"main": "nuxt.config.ts",
|
|
6
6
|
"scripts": {
|
|
7
7
|
"clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",
|
|
@@ -25,14 +25,14 @@
|
|
|
25
25
|
"types/"
|
|
26
26
|
],
|
|
27
27
|
"devDependencies": {
|
|
28
|
-
"@iconify-json/akar-icons": "
|
|
29
|
-
"@iconify-json/bitcoin-icons": "
|
|
30
|
-
"@nuxt/eslint-config": "0.
|
|
28
|
+
"@iconify-json/akar-icons": "1.2.2",
|
|
29
|
+
"@iconify-json/bitcoin-icons": "1.2.2",
|
|
30
|
+
"@nuxt/eslint-config": "1.0.0",
|
|
31
31
|
"@nuxt/icon": "1.10.3",
|
|
32
32
|
"@oddbird/css-anchor-positioning": "0.4.0",
|
|
33
33
|
"eslint": "9.19.0",
|
|
34
|
-
"happy-dom": "16.
|
|
35
|
-
"nuxt": "3.15.
|
|
34
|
+
"happy-dom": "16.8.1",
|
|
35
|
+
"nuxt": "3.15.4",
|
|
36
36
|
"release-it": "18.1.2",
|
|
37
37
|
"typescript": "5.7.3"
|
|
38
38
|
},
|