liqgui 0.1.1 → 0.1.2
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/components/glass-tabs.js +11 -22
- package/package.json +2 -1
|
@@ -22,7 +22,7 @@ export class GlassTabs extends BaseElement {
|
|
|
22
22
|
background: var(--lg-bg);
|
|
23
23
|
backdrop-filter: blur(var(--lg-blur));
|
|
24
24
|
-webkit-backdrop-filter: blur(var(--lg-blur));
|
|
25
|
-
border-radius:
|
|
25
|
+
border-radius: 999px;
|
|
26
26
|
border: 1px solid var(--lg-border);
|
|
27
27
|
}
|
|
28
28
|
.indicator {
|
|
@@ -30,13 +30,11 @@ export class GlassTabs extends BaseElement {
|
|
|
30
30
|
top: 0.25rem;
|
|
31
31
|
bottom: 0.25rem;
|
|
32
32
|
left: 0;
|
|
33
|
-
width: 1px; /* Base width for scaling */
|
|
34
33
|
background: rgba(255, 255, 255, 0.15);
|
|
35
|
-
border-radius:
|
|
34
|
+
border-radius: 999px;
|
|
36
35
|
transition: none;
|
|
37
36
|
pointer-events: none;
|
|
38
|
-
|
|
39
|
-
will-change: transform;
|
|
37
|
+
will-change: transform, width;
|
|
40
38
|
}
|
|
41
39
|
::slotted(button) {
|
|
42
40
|
position: relative;
|
|
@@ -46,7 +44,7 @@ export class GlassTabs extends BaseElement {
|
|
|
46
44
|
color: inherit;
|
|
47
45
|
font: inherit;
|
|
48
46
|
cursor: pointer;
|
|
49
|
-
border-radius:
|
|
47
|
+
border-radius: 999px;
|
|
50
48
|
opacity: 0.7;
|
|
51
49
|
transition: opacity 0.2s;
|
|
52
50
|
z-index: 1;
|
|
@@ -86,31 +84,22 @@ export class GlassTabs extends BaseElement {
|
|
|
86
84
|
const containerRect = this.getBoundingClientRect();
|
|
87
85
|
const relativeLeft = rect.left - containerRect.left;
|
|
88
86
|
const width = rect.width;
|
|
89
|
-
// We want to animate from current transform to new transform
|
|
90
|
-
// New transform: translate(relativeLeft px) scaleX(width)
|
|
91
|
-
// Note: The indicator has base width 1px, so scaleX = target width
|
|
92
87
|
if (animate && this.indicator) {
|
|
93
|
-
// Get current
|
|
88
|
+
// Get current values
|
|
94
89
|
const style = window.getComputedStyle(this.indicator);
|
|
95
90
|
const matrix = new DOMMatrix(style.transform);
|
|
96
91
|
const currentX = matrix.e;
|
|
97
|
-
const
|
|
92
|
+
const currentWidth = this.indicator.getBoundingClientRect().width;
|
|
98
93
|
springAnimate(currentX, relativeLeft, v => {
|
|
99
|
-
|
|
100
|
-
// We need to synchronize the two animations, but springAnimate runs independently.
|
|
101
|
-
// A better approach for concurrent related springs is needed,
|
|
102
|
-
// but for now we'll rely on the fact that both use the same physics config.
|
|
103
|
-
this.indicator.style.transform = `translateX(${v}px) scaleX(${currentWidth})`;
|
|
94
|
+
this.indicator.style.transform = `translateX(${v}px)`;
|
|
104
95
|
}, snappySpring);
|
|
105
|
-
springAnimate(
|
|
106
|
-
|
|
107
|
-
this.indicator.setAttribute('data-width', v.toString());
|
|
108
|
-
this.indicator.style.transform = `translateX(${currentPos}px) scaleX(${v})`;
|
|
96
|
+
springAnimate(currentWidth, width, v => {
|
|
97
|
+
this.indicator.style.width = `${v}px`;
|
|
109
98
|
}, snappySpring);
|
|
110
99
|
}
|
|
111
100
|
else if (this.indicator) {
|
|
112
|
-
this.indicator.
|
|
113
|
-
this.indicator.style.transform = `translateX(${relativeLeft}px)
|
|
101
|
+
this.indicator.style.width = `${width}px`;
|
|
102
|
+
this.indicator.style.transform = `translateX(${relativeLeft}px)`;
|
|
114
103
|
}
|
|
115
104
|
// Dispatch event
|
|
116
105
|
this.dispatchEvent(new CustomEvent("change", {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "liqgui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "Premium glassmorphism component library with spring physics animations",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -18,6 +18,7 @@
|
|
|
18
18
|
],
|
|
19
19
|
"scripts": {
|
|
20
20
|
"build": "tsc",
|
|
21
|
+
"dev": "npx serve",
|
|
21
22
|
"prepublishOnly": "npm run build"
|
|
22
23
|
},
|
|
23
24
|
"keywords": [
|