@varlet/ui
Version:
A Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.
192 lines (191 loc) • 6.16 kB
JavaScript
var __async = (__this, __arguments, generator) => {
return new Promise((resolve, reject) => {
var fulfilled = (value) => {
try {
step(generator.next(value));
} catch (e) {
reject(e);
}
};
var rejected = (value) => {
try {
step(generator.throw(value));
} catch (e) {
reject(e);
}
};
var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
step((generator = generator.apply(__this, __arguments)).next());
});
};
import { defineComponent, nextTick, ref, watch } from "vue";
import { call, getRect, isNumber } from "@varlet/shared";
import { onSmartMounted, onSmartUnmounted } from "@varlet/use";
import VarLoading from "../loading/index.mjs";
import { t } from "../locale/index.mjs";
import { injectLocaleProvider } from "../locale-provider/provide.mjs";
import Ripple from "../ripple/index.mjs";
import { createNamespace } from "../utils/components.mjs";
import { getParentScroller, toPxNum } from "../utils/elements.mjs";
import { props } from "./props.mjs";
import { useTabItem } from "./provide.mjs";
const { name, n, classes } = createNamespace("list");
import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, createCommentVNode as _createCommentVNode, createTextVNode as _createTextVNode, resolveDirective as _resolveDirective, openBlock as _openBlock, createElementBlock as _createElementBlock, withDirectives as _withDirectives } from "vue";
function __render__(_ctx, _cache) {
const _component_var_loading = _resolveComponent("var-loading");
const _directive_ripple = _resolveDirective("ripple");
return _openBlock(), _createElementBlock(
"div",
{
ref: "listEl",
class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box")))
},
[
_renderSlot(_ctx.$slots, "default"),
_ctx.loading ? _renderSlot(_ctx.$slots, "loading", { key: 0 }, () => {
var _a;
return [
_createElementVNode(
"div",
{
class: _normalizeClass(_ctx.n("loading"))
},
[
_createElementVNode(
"div",
{
class: _normalizeClass(_ctx.n("loading-text"))
},
_toDisplayString((_a = _ctx.loadingText) != null ? _a : (_ctx.pt ? _ctx.pt : _ctx.t)("listLoadingText")),
3
/* TEXT, CLASS */
),
_createVNode(_component_var_loading, {
size: "mini",
radius: 10
})
],
2
/* CLASS */
)
];
}) : _createCommentVNode("v-if", true),
_ctx.finished ? _renderSlot(_ctx.$slots, "finished", { key: 1 }, () => {
var _a;
return [
_createElementVNode(
"div",
{
class: _normalizeClass(_ctx.n("finished"))
},
_toDisplayString((_a = _ctx.finishedText) != null ? _a : (_ctx.pt ? _ctx.pt : _ctx.t)("listFinishedText")),
3
/* TEXT, CLASS */
)
];
}) : _createCommentVNode("v-if", true),
_ctx.error ? _renderSlot(_ctx.$slots, "error", { key: 2 }, () => {
var _a;
return [
_withDirectives((_openBlock(), _createElementBlock(
"div",
{
class: _normalizeClass(_ctx.n("error")),
onClick: _cache[0] || (_cache[0] = (...args) => _ctx.load && _ctx.load(...args))
},
[
_createTextVNode(
_toDisplayString((_a = _ctx.errorText) != null ? _a : (_ctx.pt ? _ctx.pt : _ctx.t)("listErrorText")),
1
/* TEXT */
)
],
2
/* CLASS */
)), [
[_directive_ripple]
])
];
}) : _createCommentVNode("v-if", true),
_createElementVNode(
"div",
{
ref: "detectorEl",
class: _normalizeClass(_ctx.n("detector"))
},
null,
2
/* CLASS */
)
],
2
/* CLASS */
);
}
const __sfc__ = defineComponent({
name,
directives: { Ripple },
components: { VarLoading },
props,
setup(props2) {
const listEl = ref(null);
const detectorEl = ref(null);
const { tabItem, bindTabItem } = useTabItem();
const { t: pt } = injectLocaleProvider();
let scroller;
call(bindTabItem, {});
if (tabItem) {
watch(() => tabItem.current.value, check);
}
watch(() => [props2.loading, props2.error, props2.finished], check);
onSmartMounted(() => {
scroller = getParentScroller(listEl.value);
scroller.addEventListener("scroll", check);
if (props2.immediateCheck) {
check();
}
});
onSmartUnmounted(removeScrollerListener);
function load() {
call(props2["onUpdate:error"], false);
call(props2["onUpdate:loading"], true);
call(props2.onLoad);
}
function isReachBottom() {
const { bottom: containerBottom } = getRect(scroller);
const { bottom: detectorBottom } = getRect(detectorEl.value);
return Math.floor(detectorBottom) - toPxNum(props2.offset) <= containerBottom;
}
function removeScrollerListener() {
if (!scroller) {
return;
}
scroller.removeEventListener("scroll", check);
}
function check() {
return __async(this, null, function* () {
yield nextTick();
if (props2.loading || props2.finished || props2.error || (tabItem == null ? void 0 : tabItem.current.value) === false || !isReachBottom()) {
return;
}
load();
});
}
return {
listEl,
detectorEl,
pt,
t,
isNumber,
load,
check,
n,
classes
};
}
});
__sfc__.render = __render__;
var stdin_default = __sfc__;
export {
stdin_default as default
};