xdesign-vue-next
Version:
XDesign Component for vue-next
219 lines (215 loc) • 8.01 kB
JavaScript
/**
* xdesign v1.0.6
* (c) 2023 xdesign
* @license MIT
*/
import { _ as _asyncToGenerator, r as regenerator } from '../_chunks/dep-2cefabe0.mjs';
import { defineComponent, ref, nextTick, watch, onMounted, onActivated, onDeactivated, onBeforeUnmount, createVNode } from 'vue';
import { i as isFunction_1 } from '../_chunks/dep-1cc1c24f.mjs';
import { i as isUndefined_1 } from '../_chunks/dep-1bae6a97.mjs';
import { getScrollContainer, on, off } from '../utils/dom.mjs';
import props from './props.mjs';
import { usePrefixClass } from '../hooks/useConfig.mjs';
import { useTNodeJSX } from '../hooks/tnode.mjs';
import '../_chunks/dep-82805301.mjs';
import '../_chunks/dep-10a947a6.mjs';
import '../_chunks/dep-b75d8d74.mjs';
import '../_chunks/dep-6ad18815.mjs';
import '../_chunks/dep-11fa9c2c.mjs';
import '../_chunks/dep-a95026f2.mjs';
import '../_chunks/dep-068e912d.mjs';
import '../_chunks/dep-addc2a84.mjs';
import '../utils/easing.mjs';
import '../config-provider/useConfig.mjs';
import '../_chunks/dep-91ac8f71.mjs';
import '../_chunks/dep-c4737535.mjs';
import '../_chunks/dep-81c83986.mjs';
import '../_chunks/dep-6aa0223b.mjs';
import '../_chunks/dep-db381ece.mjs';
import '../_chunks/dep-5755c21c.mjs';
import '../_chunks/dep-7f239c43.mjs';
import '../_chunks/dep-6f04869e.mjs';
import '../_chunks/dep-d32fbbb3.mjs';
import '../_chunks/dep-dafada74.mjs';
import '../_chunks/dep-6e7b37b8.mjs';
import '../_chunks/dep-e1ab85c5.mjs';
import '../_chunks/dep-5f0e0453.mjs';
import '../_chunks/dep-71f84cf2.mjs';
import '../_chunks/dep-0e832fc7.mjs';
import '../_chunks/dep-69963a8c.mjs';
import '../_chunks/dep-8d1c9a23.mjs';
import '../_chunks/dep-03412fab.mjs';
import '../_chunks/dep-205ff58d.mjs';
import '../_chunks/dep-b09f48fa.mjs';
import '../_chunks/dep-26bf361a.mjs';
import '../_chunks/dep-3ec3335a.mjs';
import '../_chunks/dep-ed4e7c50.mjs';
import '../_chunks/dep-a666b9ad.mjs';
import '../_common/js/global-config/default-config.mjs';
import '../_common/js/global-config/locale/en_US.mjs';
import '../config-provider/type.mjs';
import '../_chunks/dep-a628549d.mjs';
import '../_chunks/dep-4903a8a8.mjs';
import '../_chunks/dep-7dcfa37a.mjs';
import '../_chunks/dep-f4eba04c.mjs';
import '../_chunks/dep-735bcd0d.mjs';
import '../_chunks/dep-765678ef.mjs';
import '../_chunks/dep-8db27830.mjs';
import '../_chunks/dep-ae4bffa5.mjs';
import '../utils/render-tnode.mjs';
import '../_chunks/dep-9d7ebc32.mjs';
var _Affix = defineComponent({
name: "XAffix",
props: props,
emits: ["fixedChange"],
setup: function setup(props2, context) {
var _document;
var COMPONENT_NAME = usePrefixClass("affix");
var renderTNodeJSX = useTNodeJSX();
var affixWrapRef = ref(null);
var affixRef = ref(null);
var placeholderEL = ref((_document = document) === null || _document === void 0 ? void 0 : _document.createElement("div"));
var ticking = ref(false);
var binded = ref(false);
var scrollContainer = ref();
var affixStyle = ref();
var rAFId = 0;
var handleScroll = function handleScroll() {
if (!ticking.value) {
rAFId = window.requestAnimationFrame(function () {
var _affixWrapRef$value$g;
rAFId = 0;
var _ref = (_affixWrapRef$value$g = affixWrapRef.value.getBoundingClientRect()) !== null && _affixWrapRef$value$g !== void 0 ? _affixWrapRef$value$g : {
top: 0,
width: 0,
height: 0
},
wrapToTop = _ref.top,
wrapWidth = _ref.width,
wrapHeight = _ref.height;
var containerTop = 0;
if (scrollContainer.value instanceof HTMLElement) {
containerTop = scrollContainer.value.getBoundingClientRect().top;
}
var fixedTop;
var calcTop = wrapToTop - containerTop;
var containerHeight = scrollContainer.value[scrollContainer.value instanceof Window ? "innerHeight" : "clientHeight"] - wrapHeight;
var calcBottom = containerTop + containerHeight - props2.offsetBottom;
if (!isUndefined_1(props2.offsetTop) && calcTop <= props2.offsetTop) {
fixedTop = containerTop + props2.offsetTop;
} else if (!isUndefined_1(props2.offsetBottom) && wrapToTop >= calcBottom) {
fixedTop = calcBottom;
} else {
fixedTop = false;
}
if (affixRef.value) {
var affixed = fixedTop !== false;
var placeholderStatus = affixWrapRef.value.contains(placeholderEL.value);
if (affixed) {
affixRef.value.className = COMPONENT_NAME.value;
affixStyle.value = {
top: "".concat(fixedTop, "px"),
width: "".concat(wrapWidth, "px"),
height: "".concat(wrapHeight, "px"),
zIndex: props2.zIndex
};
if (!placeholderStatus) {
placeholderEL.value.style.width = "".concat(wrapWidth, "px");
placeholderEL.value.style.height = "".concat(wrapHeight, "px");
affixWrapRef.value.appendChild(placeholderEL.value);
}
} else {
affixRef.value.removeAttribute("class");
affixStyle.value = void 0;
placeholderStatus && placeholderEL.value.remove();
}
context.emit("fixedChange", affixed, {
top: Number(fixedTop)
});
if (isFunction_1(props2.onFixedChange)) props2.onFixedChange(affixed, {
top: Number(fixedTop)
});
}
ticking.value = false;
});
ticking.value = true;
}
};
var bindScroll = /*#__PURE__*/function () {
var _ref2 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee() {
return regenerator.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return nextTick();
case 2:
if (!binded.value) {
_context.next = 4;
break;
}
return _context.abrupt("return");
case 4:
scrollContainer.value = getScrollContainer(props2.container);
on(scrollContainer.value, "scroll", handleScroll);
on(window, "resize", handleScroll);
binded.value = true;
case 8:
case "end":
return _context.stop();
}
}, _callee);
}));
return function bindScroll() {
return _ref2.apply(this, arguments);
};
}();
var unbindScroll = function unbindScroll() {
if (!scrollContainer.value || !binded.value) return;
off(scrollContainer.value, "scroll", handleScroll);
off(window, "resize", handleScroll);
if (rAFId) {
window.cancelAnimationFrame(rAFId);
}
binded.value = false;
};
watch(function () {
return props2.offsetTop;
}, function () {
handleScroll();
});
watch(function () {
return props2.offsetBottom;
}, function () {
handleScroll();
});
watch(function () {
return props2.zIndex;
}, function () {
handleScroll();
});
onMounted(bindScroll);
onActivated(bindScroll);
onDeactivated(unbindScroll);
onBeforeUnmount(unbindScroll);
return {
affixWrapRef: affixWrapRef,
affixRef: affixRef,
bindScroll: bindScroll,
unbindScroll: unbindScroll,
handleScroll: handleScroll,
scrollContainer: scrollContainer,
renderTNodeJSX: renderTNodeJSX,
affixStyle: affixStyle
};
},
render: function render() {
return createVNode("div", {
"ref": "affixWrapRef"
}, [createVNode("div", {
"ref": "affixRef",
"style": this.affixStyle
}, [this.renderTNodeJSX("default")])]);
}
});
export { _Affix as default };
//# sourceMappingURL=affix.mjs.map