FoundKey/packages/client/src/directives/sticky-container.ts
Johann150 5b4c0ffdf3
Some checks failed
ci/woodpecker/push/build Pipeline failed
ci/woodpecker/push/test Pipeline failed
ci/woodpecker/push/lint-backend Pipeline was successful
ci/woodpecker/push/lint-client Pipeline failed
client: fix some lints
Mostly focused on "@typescript-eslint/no-unused-vars" but also fixed some
other lints along the way.
2022-08-12 08:35:22 +02:00

16 lines
594 B
TypeScript

import { Directive } from 'vue';
export default {
mounted(src) {
const header = src.children[0];
const body = src.children[1];
const currentStickyTop = getComputedStyle(src).getPropertyValue('--stickyTop') || '0px';
src.style.setProperty('--stickyTop', `calc(${currentStickyTop} + ${header.offsetHeight}px)`);
if (body) body.dataset.stickyContainerHeaderHeight = header.offsetHeight.toString();
header.style.setProperty('--stickyTop', currentStickyTop);
header.style.position = 'sticky';
header.style.top = 'var(--stickyTop)';
header.style.zIndex = '1';
},
} as Directive;