tera-system-ui 0.1.6 → 0.1.8
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.
|
@@ -22,36 +22,42 @@
|
|
|
22
22
|
|
|
23
23
|
$effect(() => {
|
|
24
24
|
if (!slider || !sliderHandle || !sliderTrack || !sliderRail) return
|
|
25
|
+
|
|
26
|
+
const stopDragging = () => {
|
|
27
|
+
document.removeEventListener('pointermove', onDrag);
|
|
28
|
+
document.removeEventListener('touchmove', onDrag);
|
|
29
|
+
sliderHandle?.removeAttribute('data-state');
|
|
30
|
+
toggleToolTip(false);
|
|
31
|
+
};
|
|
32
|
+
|
|
25
33
|
slider.addEventListener('pointerdown', (e) => {
|
|
26
34
|
sliderHandle.setAttribute('data-state', 'dragging');
|
|
27
|
-
onDrag(e)
|
|
35
|
+
onDrag(e);
|
|
28
36
|
document.addEventListener('pointermove', onDrag);
|
|
29
|
-
document.addEventListener('pointerup',
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
37
|
+
document.addEventListener('pointerup', stopDragging, {once: true});
|
|
38
|
+
|
|
39
|
+
// Add mouseout listener to window
|
|
40
|
+
window.addEventListener('mouseout', (e) => {
|
|
41
|
+
if ((e.relatedTarget as HTMLElement)?.tagName === 'IFRAME') { // Mouse left the window
|
|
42
|
+
stopDragging();
|
|
43
|
+
}
|
|
44
|
+
});
|
|
35
45
|
});
|
|
36
46
|
|
|
37
47
|
// For touch support
|
|
38
48
|
slider.addEventListener('touchstart', (e) => {
|
|
39
49
|
sliderHandle.setAttribute('data-state', 'dragging');
|
|
40
|
-
onDrag(e)
|
|
41
|
-
document.addEventListener('touchmove', onDrag, {
|
|
42
|
-
document.addEventListener('touchend',
|
|
43
|
-
|
|
44
|
-
toggleToolTip(false)
|
|
45
|
-
sliderHandle.removeAttribute('data-state');
|
|
46
|
-
}, {once: true});
|
|
47
|
-
}, { passive: false });
|
|
50
|
+
onDrag(e);
|
|
51
|
+
document.addEventListener('touchmove', onDrag, {passive: false});
|
|
52
|
+
document.addEventListener('touchend', stopDragging, {once: true});
|
|
53
|
+
}, {passive: false});
|
|
48
54
|
|
|
49
55
|
sliderHandle.addEventListener('pointerenter', (e) => {
|
|
50
|
-
toggleToolTip(true)
|
|
56
|
+
toggleToolTip(true);
|
|
51
57
|
sliderHandle.addEventListener('pointerleave', (e) => {
|
|
52
|
-
toggleToolTip(false)
|
|
58
|
+
toggleToolTip(false);
|
|
53
59
|
}, {once: true});
|
|
54
|
-
})
|
|
60
|
+
});
|
|
55
61
|
|
|
56
62
|
})
|
|
57
63
|
|
|
@@ -61,10 +67,10 @@
|
|
|
61
67
|
if (tooltipInterval) clearInterval(tooltipInterval)
|
|
62
68
|
|
|
63
69
|
if (open) {
|
|
64
|
-
sliderTooltip
|
|
70
|
+
sliderTooltip?.classList.add('show');
|
|
65
71
|
} else {
|
|
66
72
|
tooltipInterval = setTimeout(() => {
|
|
67
|
-
sliderTooltip
|
|
73
|
+
sliderTooltip?.classList.remove('show');
|
|
68
74
|
}, 300)
|
|
69
75
|
|
|
70
76
|
}
|
|
@@ -180,4 +186,4 @@
|
|
|
180
186
|
</div>
|
|
181
187
|
|
|
182
188
|
<style>/*! tailwindcss v4.0.4 | MIT License | https://tailwindcss.com */
|
|
183
|
-
.slider-handle{transition:all .2s ease-in-out,left}:is(.slider-handle:global([data-state="dragging"]),.slider-handle:hover,.slider-handle:focus,.slider-handle:active,.slider-handle:focus-visible){box-shadow:0 0 0 .35rem var(--color-primary-token-2);transform:scale(1.25)}[data-slider-tooltip]{border-radius:var(--radius-sm);width:fit-content;padding:calc(var(--spacing)*1.5)calc(var(--spacing)*1);background-color:var(--color-neutral-token-12);color:var(--color-neutral-token-1);z-index:10;opacity:0;transition:all .2s ease-in-out,left;position:absolute;left:50%;transform:translateY(-3rem)translate(-50%)scale(.9)}[data-slider-tooltip]:after{content:"";border-radius:var(--radius-sm);background-color:var(--color-neutral-token-12);width:calc(var(--spacing)*3);height:calc(var(--spacing)*3);position:absolute;bottom:-.15rem;left:50%;transform:translate(-50%)rotate(45deg)}[data-slider-tooltip]:global(.show){opacity:1;transform:translateY(-3.5rem)translate(-50%)scale(1)}</style>
|
|
189
|
+
.slider-handle{transition:all .2s ease-in-out,left}:is(.slider-handle:global([data-state="dragging"]),.slider-handle:hover,.slider-handle:focus,.slider-handle:active,.slider-handle:focus-visible){box-shadow:0 0 0 .35rem var(--color-primary-token-2);transform:scale(1.25)}[data-slider-tooltip]{pointer-events:none;border-radius:var(--radius-sm);width:fit-content;padding:calc(var(--spacing)*1.5)calc(var(--spacing)*1);background-color:var(--color-neutral-token-12);color:var(--color-neutral-token-1);z-index:10;opacity:0;transition:all .2s ease-in-out,left;position:absolute;left:50%;transform:translateY(-3rem)translate(-50%)scale(.9)}[data-slider-tooltip]:after{content:"";border-radius:var(--radius-sm);background-color:var(--color-neutral-token-12);width:calc(var(--spacing)*3);height:calc(var(--spacing)*3);position:absolute;bottom:-.15rem;left:50%;transform:translate(-50%)rotate(45deg)}[data-slider-tooltip]:global(.show){opacity:1;transform:translateY(-3.5rem)translate(-50%)scale(1)}</style>
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"text_age_calculator_description": "இரண்டு தேதிகளுக்கிடையேயான துல்லியமான வயது அல்லது இடைவெளியை கணக்கிடுங்கள்",
|
|
9
9
|
"text_date_of_birth_need_to_earlier_than_the_age_at_date": "பிறந்த தேதி, வயது வரை தேதிக்குள் இருக்க வேண்டும்!",
|
|
10
10
|
"text_date_of_birth": "பிறந்த தேதி",
|
|
11
|
-
"text_age_at_the_date_of": "
|
|
11
|
+
"text_age_at_the_date_of": "தேதி வரை வயது",
|
|
12
12
|
"text_calculating": "கணக்கிட்டுக்கொண்டிருக்கிறது...",
|
|
13
13
|
"text_result": "முடிவு",
|
|
14
14
|
"text_message": "செய்தி",
|