@vue-material/core
Version:
Yet another 'Material Design Components' library for Vue3.
58 lines (57 loc) • 1.94 kB
JavaScript
import $i from "../../attach-styles.js";
$i(".md-scroll{overflow:auto;position:relative;display:block;height:100%;width:100%}.md-scroll-wrapper{width:100%;padding:var(--md)}", "c093fbc0");
import { defineComponent, mergeModels, ref, useModel, onMounted, onUnmounted, provide, openBlock, createElementBlock, renderSlot, createElementVNode } from "vue";
const _hoisted_1 = { class: "md-scroll-wrapper" };
const _sfc_main = /* @__PURE__ */ defineComponent({
...{ name: "MdScrollContainer" },
__name: "scroll-container",
props: {
"modelValue": {
default: () => ({ x: 0, y: 0 })
},
"modelModifiers": {}
},
emits: /* @__PURE__ */ mergeModels(["change", "scroll"], ["update:modelValue"]),
setup(__props, { emit: __emit }) {
const emit = __emit;
const root = ref();
const model = useModel(__props, "modelValue");
function onScroll(event) {
const target = event.currentTarget;
const x = target.scrollLeft;
const y = target.scrollTop;
model.value = { x, y };
emit("scroll", { x, y });
emit("change", { x, y });
}
onMounted(() => {
var _a;
return (_a = root.value) == null ? void 0 : _a.addEventListener("scroll", onScroll);
});
onUnmounted(() => {
var _a;
return (_a = root.value) == null ? void 0 : _a.removeEventListener("scroll", onScroll);
});
provide("scroll-container", model);
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
class: "md-scroll",
ref_key: "root",
ref: root
}, [
renderSlot(_ctx.$slots, "header"),
renderSlot(_ctx.$slots, "wrapper", {
class: "md-scroll-wrapper",
content: _ctx.$slots.default
}, () => [
createElementVNode("div", _hoisted_1, [
renderSlot(_ctx.$slots, "default")
])
])
], 512);
};
}
});
export {
_sfc_main as default
};