vue3-big-list
Version:
375 lines (374 loc) • 10.9 kB
JavaScript
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".big-table[data-v-e5899fc1]{position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden}.scroll[data-v-e5899fc1]{position:relative;width:100%;height:100%;overflow-x:auto;overflow-y:scroll}.moving-box[data-v-e5899fc1]{position:absolute;top:0;left:0;width:100%}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
import { defineComponent as be, ref as I, onMounted as ye, onUnmounted as Te, createElementBlock as N, openBlock as C, createElementVNode as P, normalizeStyle as D, Fragment as He, renderList as xe, withModifiers as we, renderSlot as Le, nextTick as Ne } from "vue";
import Ce from "mousetrap";
const Pe = ["onMousedown", "onClick", "onContextmenu"], De = /* @__PURE__ */ be({
__name: "main",
props: {
itemHeight: {
type: Number,
default: 36
},
topPadding: {
type: Number,
default: 0
},
bottomPadding: {
type: Number,
default: 0
}
},
emits: ["scrollTopChanged", "selectedItemChanged"],
setup(_, { expose: x, emit: y }) {
const s = _, T = y;
let w = !1;
const L = I(), M = I();
let c;
const E = I("36px"), K = I("0px");
let i = [], g = {};
const S = I([]), r = I({});
let f = null, a = null;
r.value = {};
function A(t) {
if (!t)
return null;
let l = g[t] || null;
return l && (l = { ...l }), l;
}
const F = (t) => {
if (!t)
return null;
let l = g[t] || null;
return l && (l = { ...l }), l;
};
function k() {
r.value = {};
}
function V(t) {
r.value[t.id] && delete r.value[t.id];
}
function q(t) {
r.value[t.id] ? delete r.value[t.id] : r.value[t.id] = t;
}
function d(t) {
let l = j();
l.length == 1 && (a = { ...l[0] }), T("selectedItemChanged");
}
const j = () => {
let t = [], l = r.value, e = Object.keys(l), n = 0, u = e.length;
for (n = 0; n < u; n++) {
let o = l[e[n]];
o.id in g && (o = { ...o }, t.push(o));
}
return t;
}, G = () => {
let t = {}, l = r.value, e = Object.keys(l), n = 0, u = e.length;
for (n = 0; n < u; n++) {
let o = l[e[n]];
o.id in g && (o = { ...o }, t[o.id] = o);
}
return t;
}, J = () => {
let t = [...i], l = 0, e = t.length;
for (l = 0; l < e; l++) {
let n = t[l];
t[l] = { ...n };
}
return t;
}, Q = () => {
let t = {}, l = i, e = 0, n = l.length;
for (e = 0; e < n; e++) {
let u = l[e];
t[u.id] = { ...u };
}
return t;
};
function B(t, l) {
let e = t.SN, n = l.SN;
n < e && (n = t.SN, e = l.SN);
let u = i;
for (n >= u.length && (n = u.length - 1), n++; e < n; e++)
r.value[u[e].id] = u[e];
d();
}
function U(t, l) {
let e = !1, n = !1;
try {
var u = window.event;
u.ctrlKey && (e = !0), u.shiftKey && (n = !0);
} catch {
}
if (f = t, a || (a = t), n || (a = t), n) {
k(), B(t, a), d();
return;
}
if (e) {
q(t);
let o, h = !1;
for (o in r.value) {
h = !0;
break;
}
h || (r.value[t.id] = t), d();
return;
}
k(), r.value[t.id] = t, d();
}
function W(t, l) {
l.stopPropagation();
let e = l.target;
if (t.id in r.value) {
e.___bigtable_20240703 = !1;
return;
} else
e.___bigtable_20240703 = !0, U(t);
}
function X(t, l) {
let e = l.target;
if (e.___bigtable_20240703) {
e.___bigtable_20240703 = !1;
return;
}
U(t);
}
function Z(t) {
r.value[t.id] || (k(), r.value[t.id] = t, d());
}
function ee(t = {}) {
let l = i, e = document.documentElement.clientHeight, n = Math.trunc(e / s.itemHeight) + 20, u = !1;
t.scrollTop != null && (c.scrollTo({ top: t.scrollTop }), u = !0), t.scrollStep && (c.scrollTo({ top: c.scrollTop + t.scrollStep }), u = !0), (u || t.scrolled) && (w || T("scrollTopChanged", c.scrollTop));
let o = Math.trunc(c.scrollTop / s.itemHeight) - 10;
o < 0 && (o = 0);
let h = o + n;
h > l.length + 1 && (h = l.length + 1);
let p = l.slice(o, h);
K.value = o * s.itemHeight + s.topPadding + "px";
function v() {
if (p.length != S.value.length)
return !0;
let b = 0;
for (b = 0; b < p.length; b++) {
let Se = S.value[b], ke = p[b];
if (Se.id != ke.id)
return !0;
}
return !1;
}
v() && (S.value = p);
}
function m(t = {}) {
let l = i;
E.value = s.itemHeight * l.length + s.topPadding + s.bottomPadding + "px", Ne(() => {
ee(t), w = !1;
});
}
function O(t) {
if (!t)
return;
let l = t.SN, e = 0, n = s.topPadding + l * s.itemHeight;
if (n < c.scrollTop)
e = n - c.scrollTop - 3;
else if (c.scrollTop + c.clientHeight < n + s.itemHeight + 3)
e = n - (c.scrollTop + c.clientHeight) + s.itemHeight + 3;
else
return;
m({ scrollStep: e });
}
const te = (t) => {
O(A(t));
};
function le(t) {
let l = g[t || ""];
if (!l || !l)
return;
let e = l.SN, n = s.topPadding + e * s.itemHeight;
L.value && (n -= L.value.clientHeight / 2 - s.itemHeight, n < 0 && (n = 0), m({ scrollTop: n }));
}
const ne = (t, l) => {
let e = i, n = t.SN - (l ? 1 : -1);
return n >= e.length && (n = e.length - 1), n < 0 ? null : e[n];
};
function H(t, l) {
if (f && (g[f.id] || (f = null)), f == null) {
let u;
for (u in r.value) {
f = r.value[u];
break;
}
if (f == null && (t ? i.length > 1 && (f = i[1]) : i.length > 0 && (f = i[0])), f == null)
return;
}
if (l && l.ctrlKey)
return !0;
let e = f, n = ne(f, t);
if (n) {
if (f = n, O(n), l && l.shiftKey) {
V(e), a && (g[a.id] || (a = null)), a || (a = f), f.id != a.id && B(f, a), d();
return;
}
return a = n, k(), r.value[n.id] = n, d(), !1;
}
}
function ie() {
return H(!0);
}
function oe() {
return H(!1);
}
function re(t) {
return H(!0, t);
}
function ue(t) {
return H(!1, t);
}
const R = (t, l) => {
let e = !1, n = !1;
return l && l.ctrlKey && (e = !0), l && l.shiftKey && (n = !0), m({ scrollStep: (e || n ? 1 : 0.1) * (t ? 1 : -1) * s.itemHeight }), !0;
}, se = (t) => R(!0, t), fe = (t) => R(!1, t), ce = (t) => {
m({ scrollTop: t });
}, ae = () => {
let t = i, l, e = t.length;
for (l = 0; l < e; l++)
r.value[t[l].id] = t[l];
return d(), !1;
};
function de(t) {
if (!t)
return;
t = [...t];
let l = {}, e = 0, n = t.length;
for (e = 0; e < n; e++) {
let o = { ...t[e], SN: -1 };
o = { ...o }, o.SN = e, l[o.id] = o, t[e] = o;
}
i = t, g = l, m();
}
const ge = (t) => {
if (t.length < 1)
return;
let l = {};
t.forEach((v) => {
l[v] = !0;
});
let e, n = i.length, u = [], o = {};
for (e = 0; e < n; e++)
i[e].id in l || u.push(i[e]);
for (n = u.length, e = 0; e < n; e++) {
let v = u[e];
v.SN = e, o[v.id] = v;
}
i = u, g = o;
let h = !1, p = Object.keys(r.value);
for (n = p.length, e = 0; e < n; e++)
g[p[e]] || (h = !0, delete r.value[p[e]]);
h && d(), m();
};
function me(t) {
k();
let l = {}, e, n = t.length;
for (e = 0; e < n; e++)
l[t[e]] = !0;
for (n = i.length, e = 0; e < n; e++)
i[e].id in l && (r.value[i[e].id] = i[e]);
d();
}
function he(t) {
let l = {}, e, n = t.length;
for (e = 0; e < n; e++)
l[t[e]] = !0;
for (n = i.length, e = 0; e < n; e++)
i[e].id in l && (r.value[i[e].id] = i[e]);
d();
}
function pe(t) {
let l = {}, e, n = t.length;
for (e = 0; e < n; e++)
l[t[e]] = !0;
for (n = i.length, e = 0; e < n; e++)
i[e].id in l && delete r.value[i[e].id];
d();
}
const ve = () => {
w = !0, f = null, a = null, S.value = [], i = [], g = {}, r.value = {}, m();
};
function Ie() {
c = M.value, c.addEventListener("scroll", function() {
m({ scrolled: !0 });
});
}
let Y = 0, $;
function z() {
c.offsetHeight != Y && (Y = c.offsetHeight, m()), $ = setTimeout(z, 100);
}
function _e(t) {
let l = Ce(t);
l.bind(["up", "shift+up"], re), l.bind(["down", "shift+down"], ue), l.bind("ctrl+a", ae);
let e = t;
e || (e = document), e && e.addEventListener("wheel", function(n) {
n.deltaY < 0 ? fe(n) : n.deltaY > 0 && se(n);
});
}
return ye(() => {
Ie(), z();
}), Te(() => {
clearTimeout($);
}), x({
shortcutRegister: _e,
clear: ve,
updateItemList: de,
deleteItemList: ge,
updateSelectedItemList: me,
appendSelectedItemList: he,
unSelectedItemList: pe,
getItem: F,
getItemList: J,
getItems: Q,
getSelectedItemList: j,
getSelectedItems: G,
popupItemToMiddle: le,
popupItem: te,
gotoPrevItem: ie,
gotoNextItem: oe,
scrollTo: ce
}), (t, l) => (C(), N("div", {
ref_key: "wrapRef",
ref: L,
class: "big-table"
}, [
P("div", {
ref_key: "scrollDivRef",
ref: M,
class: "scroll"
}, [
P("div", {
style: D({ height: E.value })
}, [
P("div", {
class: "moving-box",
style: D({ top: K.value })
}, [
(C(!0), N(He, null, xe(S.value, (e) => (C(), N("div", {
key: e.id,
onMousedown: we((n) => W(e, n), ["left", "stop"]),
onClick: (n) => X(e, n),
onContextmenu: (n) => Z(e),
style: D({ height: _.itemHeight + "px" })
}, [
Le(t.$slots, "default", {
item: e,
selected: !!r.value[e.id]
}, void 0, !0)
], 44, Pe))), 128))
], 4)
], 4)
], 512)
], 512));
}
}), Me = (_, x) => {
const y = _.__vccOpts || _;
for (const [s, T] of x)
y[s] = T;
return y;
}, je = /* @__PURE__ */ Me(De, [["__scopeId", "data-v-e5899fc1"]]);
export {
je as default
};