@wfrog/vc
Version:
vue3 组件库 vc
158 lines (152 loc) • 6.06 kB
JavaScript
import './index.css'
import { defineComponent, useCssVars, unref, useTemplateRef, computed, ref, onMounted, onBeforeUnmount, createElementBlock, openBlock, normalizeClass, createElementVNode, createCommentVNode, renderSlot } from 'vue';
import { c as useElementSize } from '../../chunk/eQT9aAiW.mjs';
import { _ as _export_sfc } from '../../chunk/pcqpp-6-.mjs';
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "sync-scroll-container",
props: {
shadow: { type: Boolean, default: false },
border: { type: Boolean, default: true },
width: {},
height: {}
},
setup(__props) {
useCssVars((_ctx) => ({
"v9205c19e": `${unref(nodeWidth)}px`,
"v42f97a9c": `${unref(nodeHeight)}px`,
"v47f551fd": `${unref(headerHeight)}px`,
"c2d4b0de": `${unref(bodyWidth)}px`,
"v6afeb138": `${unref(bodyWidth) + unref(sidebarWidth)}px`,
"v67ebf0b3": `${unref(sidebarWidth)}px`,
"v2c08735c": `${unref(bodyHeight)}px`,
"v665c6d64": `calc(100% - ${unref(headerHeight)}px)`
}));
const wrapperRef = useTemplateRef("wrapperRef");
const headerRef = useTemplateRef("headerRef");
const headerContainerRef = useTemplateRef("headerContainerRef");
const bodyContainerRef = useTemplateRef("bodyContainerRef");
const sidebarContainerRef = useTemplateRef("sidebarContainerRef");
const nodeRef = computed(() => wrapperRef.value?.parentNode || wrapperRef.value);
const { height: headerHeight } = useElementSize(headerContainerRef);
const { width: bodyWidth, height: bodyHeight } = useElementSize(bodyContainerRef);
const { width: sidebarWidth } = useElementSize(sidebarContainerRef);
const { width: nodeWidth, height: nodeHeight } = useElementSize(nodeRef);
const scrollBarWidth = ref(0);
function getScrollbarWidth() {
const outer = document.createElement("div");
outer.style.visibility = "hidden";
outer.style.overflow = "scroll";
document.body.appendChild(outer);
const widthWithScroll = outer.offsetWidth;
const widthWithoutScroll = outer.clientWidth;
document.body.removeChild(outer);
return widthWithScroll - widthWithoutScroll || 8;
}
function syncScroll() {
function updateScroll() {
headerRef.value.scrollLeft = wrapperRef.value.scrollLeft;
}
function hasHorizontalScroll(element) {
return element.scrollWidth > element.clientWidth;
}
const install = () => {
wrapperRef.value.addEventListener("scroll", updateScroll);
if (hasHorizontalScroll(wrapperRef.value)) {
scrollBarWidth.value = getScrollbarWidth();
}
};
const uninstall = () => {
wrapperRef.value.removeEventListener("scroll", updateScroll);
};
return { install, uninstall };
}
const { install: syncScrollInstall, uninstall: syncScrollUninstall } = syncScroll();
onMounted(() => syncScrollInstall());
onBeforeUnmount(() => syncScrollUninstall());
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
ref_key: "wrapperRef",
ref: wrapperRef,
class: normalizeClass([_ctx.$style.wrapper, { [_ctx.$style.border]: __props.border }])
}, [
createElementVNode("div", {
ref_key: "headerRef",
ref: headerRef,
class: normalizeClass([_ctx.$style.header, { [_ctx.$style.border]: __props.border }])
}, [
createElementVNode("div", {
class: normalizeClass([_ctx.$style.corner, { [_ctx.$style.shadow]: __props.shadow, [_ctx.$style.border]: __props.border }])
}, [
renderSlot(_ctx.$slots, "corner")
], 2),
createElementVNode("div", null, [
createElementVNode("div", {
ref_key: "headerContainerRef",
ref: headerContainerRef,
class: normalizeClass(_ctx.$style["header-container"])
}, [
renderSlot(_ctx.$slots, "header")
], 2)
])
], 2),
__props.shadow ? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass(_ctx.$style["header-shadow"])
}, null, 2)) : createCommentVNode("", true),
createElementVNode("div", {
class: normalizeClass([_ctx.$style.sidebar, { [_ctx.$style.shadow]: __props.shadow, [_ctx.$style.border]: __props.border }])
}, [
createElementVNode("div", {
ref_key: "sidebarContainerRef",
ref: sidebarContainerRef
}, [
renderSlot(_ctx.$slots, "sidebar")
], 512)
], 2),
createElementVNode("div", {
class: normalizeClass(_ctx.$style.container)
}, [
createElementVNode("div", {
class: normalizeClass(_ctx.$style.body)
}, [
createElementVNode("div", {
ref_key: "bodyContainerRef",
ref: bodyContainerRef
}, [
renderSlot(_ctx.$slots, "default")
], 512)
], 2)
], 2)
], 2);
};
}
});
/* unplugin-vue-components disabled */const wrapper = "_wrapper_1wn6e_1";
const border = "_border_1wn6e_8";
const header = "_header_1wn6e_12";
const corner = "_corner_1wn6e_42";
const shadow = "_shadow_1wn6e_54";
const container = "_container_1wn6e_58";
const sidebar = "_sidebar_1wn6e_66";
const body = "_body_1wn6e_85";
const style0 = {
wrapper: wrapper,
border: border,
header: header,
"header-container": "_header-container_1wn6e_27",
"header-shadow": "_header-shadow_1wn6e_31",
corner: corner,
shadow: shadow,
container: container,
sidebar: sidebar,
body: body
};
const cssModules = {
"$style": style0
};
const Component = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
const __vite_glob_0_29 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
__proto__: null,
default: Component
}, Symbol.toStringTag, { value: 'Module' }));
export { Component as C, __vite_glob_0_29 as _ };