vuestic-ui
Version:
Vue 3 UI Framework
42 lines (41 loc) • 1.34 kB
JavaScript
import { computed } from "vue";
const useFixedBarProps = {
hideOnScroll: { type: Boolean, default: false },
fixed: { type: Boolean, default: false },
bottom: { type: Boolean, default: false }
};
function useFixedBar(props, isScrolledDown) {
const isHiddenComputed = computed(() => isScrolledDown.value ? !!props.hideOnScroll : false);
const transformComputed = computed(() => {
if (!props.bottom && !isHiddenComputed.value) {
return;
}
if (props.bottom && isHiddenComputed.value) {
return "translateY(100%)";
}
if (props.bottom) {
return props.fixed ? "translateY(-100%)" : "translateY(0)";
}
return "translateY(-100%)";
});
const positionComputed = computed(() => {
if (props.fixed) {
return "fixed";
}
return isHiddenComputed.value ? "absolute" : void 0;
});
const fixedBarStyleComputed = computed(() => {
const result = {
top: props.bottom && (isHiddenComputed.value || props.fixed) ? "100%" : void 0,
transform: props.hideOnScroll || props.fixed ? transformComputed.value : void 0
};
positionComputed.value && Object.assign(result, { position: positionComputed.value });
return result;
});
return { fixedBarStyleComputed };
}
export {
useFixedBar as a,
useFixedBarProps as u
};
//# sourceMappingURL=useFixedBar.mjs.map