| 8 | * @returns |
| 9 | */ |
| 10 | export default function TabView({ id, disableSwipe = false }, children) { |
| 11 | let moveX = 0; |
| 12 | let moveY = 0; |
| 13 | let lastX = 0; |
| 14 | let lastY = 0; |
| 15 | let isScrolling = false; |
| 16 | const el = Ref(); |
| 17 | |
| 18 | // Initialize the tab indicator after rendering |
| 19 | requestAnimationFrame(() => { |
| 20 | const $options = el.get?.(".options"); |
| 21 | if (!$options) return; |
| 22 | |
| 23 | let $indicator = $options.querySelector(".tab-indicator"); |
| 24 | if (!$indicator) { |
| 25 | $indicator = <div className="tab-indicator"></div>; |
| 26 | $options.append($indicator); |
| 27 | } |
| 28 | |
| 29 | const update = () => { |
| 30 | if (!$options.isConnected) return; |
| 31 | const $active = $options.querySelector(".active"); |
| 32 | if ($active) { |
| 33 | const optionsRect = $options.getBoundingClientRect(); |
| 34 | const activeRect = $active.getBoundingClientRect(); |
| 35 | if (!activeRect.width) return; |
| 36 | const targetLeft = activeRect.left - optionsRect.left; |
| 37 | const targetWidth = activeRect.width; |
| 38 | const targetTransform = `translate3d(${targetLeft}px, 0, 0)`; |
| 39 | $indicator.style.width = `${targetWidth}px`; |
| 40 | if (document.body.classList.contains("no-animation")) { |
| 41 | $indicator.style.transform = targetTransform; |
| 42 | } else { |
| 43 | animate( |
| 44 | $indicator, |
| 45 | { |
| 46 | transform: targetTransform, |
| 47 | }, |
| 48 | { |
| 49 | type: "spring", |
| 50 | stiffness: 380, |
| 51 | damping: 30, |
| 52 | }, |
| 53 | ).then(() => { |
| 54 | $indicator.style.width = `${targetWidth}px`; |
| 55 | $indicator.style.transform = targetTransform; |
| 56 | }); |
| 57 | } |
| 58 | } |
| 59 | }; |
| 60 | |
| 61 | // Observe changes to 'class' attribute of child tab spans |
| 62 | const observer = new MutationObserver((mutations) => { |
| 63 | for (const mutation of mutations) { |
| 64 | if ( |
| 65 | mutation.type === "attributes" && |
| 66 | mutation.attributeName === "class" && |
| 67 | mutation.target.classList.contains("active") |