@king-one/antdv 1.0.26 → 1.0.28

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @king-one/antdv
 
+## 1.0.28
+
+### Patch Changes
+
+- feat：修改虚拟列表样式
+
+## 1.0.27
+
+### Patch Changes
+
+- feat: 虚拟列表组件增加 update⌚️
+
 ## 1.0.26
 
 ### Patch Changes

package/dist/es/components/scale-virtual-list/component/scale-virtual-list.vue2.mjs

@@ -1,44 +1,46 @@
-import { defineComponent as _, toRefs as $, openBlock as s, createElementBlock as r, mergeProps as a, unref as e, createElementVNode as n, normalizeClass as k, Fragment as P, renderList as g, renderSlot as w } from "vue";
-import { defaultNamespace as o } from "../../../hooks/use-namespace/index.mjs";
-import { useVirtualList as B } from "../hooks/useVirtualList.mjs";
-const T = /* @__PURE__ */ _({
+import { defineComponent as g, toRefs as w, openBlock as r, createElementBlock as o, mergeProps as n, unref as e, createElementVNode as i, normalizeClass as B, Fragment as C, renderList as E, renderSlot as L } from "vue";
+import { defaultNamespace as a } from "../../../hooks/use-namespace/index.mjs";
+import { useVirtualList as N } from "../hooks/useVirtualList.mjs";
+const z = /* @__PURE__ */ g({
   __name: "scale-virtual-list",
   props: {
     list: {},
     option: {}
   },
-  setup(i, { expose: c }) {
-    const l = i, { list: p } = $(l), { list: u, containerProps: d, wrapperProps: m, scrollTo: f, scaleTo: v } = B(p, l.option);
+  emits: ["update:state"],
+  setup(p, { expose: c, emit: u }) {
+    const l = p, d = u, { list: m } = w(l), { list: f, containerProps: v, wrapperProps: x, scrollTo: _, scaleTo: $, state: k, onUpdate: P } = N(m, l.option);
     return c({
-      scrollTo: f,
-      scaleTo: v
-    }), (x, C) => (s(), r(
+      scrollTo: _,
+      scaleTo: $,
+      state: k
+    }), P((t) => d("update:state", t)), (t, T) => (r(), o(
       "div",
-      a({
-        class: `${e(o)}-scale-virtual-list`
-      }, e(d)),
+      n({
+        class: `${e(a)}-scale-virtual-list`
+      }, e(v)),
       [
-        n(
+        i(
           "div",
           {
-            class: k(`${e(o)}-scale-virtual-list-container`)
+            class: B(`${e(a)}-scale-virtual-list-container`)
           },
           [
-            n(
+            i(
               "div",
-              a({
-                class: `${e(o)}-scale-vittual-wrapper`
-              }, e(m)),
+              n({
+                class: `${e(a)}-scale-vittual-wrapper`
+              }, e(x)),
               [
-                (s(!0), r(
-                  P,
+                (r(!0), o(
+                  C,
                   null,
-                  g(e(u), (t) => (s(), r("div", {
-                    key: t.index
+                  E(e(f), (s) => (r(), o("div", {
+                    key: s.index
                   }, [
-                    w(x.$slots, "default", {
-                      item: t,
-                      index: t.index
+                    L(t.$slots, "default", {
+                      item: s,
+                      index: s.index
                     })
                   ]))),
                   128
@@ -59,5 +61,5 @@ const T = /* @__PURE__ */ _({
   }
 });
 export {
-  T as default
+  z as default
 };

package/dist/es/components/scale-virtual-list/hooks/useVirtualList.mjs

@@ -1,109 +1,111 @@
-import { ref as b, shallowRef as k, watch as E, computed as y } from "vue-demi";
-import { useElementSize as F } from "@vueuse/core";
-function q(n, t) {
-  const { containerStyle: c, wrapperProps: e, scrollTo: r, calculateRange: a, currentList: u, containerRef: o, scaleTo: s, state: l } = "itemHeight" in t ? K(t, n) : X(t, n);
+import { createEventHook as $ } from "../../../node_modules/.pnpm/@vueuse_shared@10.11.1_vue@3.4.38/node_modules/@vueuse/shared/index.mjs";
+import { ref as z, shallowRef as F, watch as M, computed as y } from "vue-demi";
+import { useElementSize as K } from "@vueuse/core";
+function I(r, t) {
+  const { containerStyle: a, wrapperProps: o, scrollTo: c, calculateRange: e, currentList: n, containerRef: l, scaleTo: u, state: s, onUpdate: f } = "itemHeight" in t ? Y(t, r) : X(t, r);
   return {
-    state: l,
-    scaleTo: s,
-    list: u,
-    scrollTo: r,
+    onUpdate: f,
+    state: s,
+    scaleTo: u,
+    list: n,
+    scrollTo: c,
     containerProps: {
-      ref: o,
+      ref: l,
       onScroll: () => {
-        a();
+        e();
       },
-      style: c
+      style: a
     },
-    wrapperProps: e
+    wrapperProps: o
   };
 }
-function C(n) {
-  const t = b(null), c = F(t), e = b([]), r = k(n);
-  return { state: b({ start: 0, end: 10, current: 0, scale: 1 }), source: r, currentList: e, size: c, containerRef: t };
+function O(r) {
+  const t = z(null), a = K(t), o = z([]), c = F(r);
+  return { state: z({ start: 0, end: 10, current: 0, scale: 1 }), source: c, currentList: o, size: a, containerRef: t };
 }
-function $(n, t, c) {
-  return (e) => {
-    const { start: r = 0, scale: a = 1 } = n.value;
-    if (typeof c == "number")
-      return Math.ceil(e / (c * a));
-    let u = 0, o = 0;
-    for (let s = r; s < t.value.length; s++) {
-      const l = c(s) * a;
-      if (u += l, o = s, u > e)
+function P(r, t, a) {
+  return (o) => {
+    const { start: c = 0, scale: e = 1 } = r.value;
+    if (typeof a == "number")
+      return Math.ceil(o / (a * e));
+    let n = 0, l = 0;
+    for (let u = c; u < t.value.length; u++) {
+      const s = a(u) * e;
+      if (n += s, l = u, n > o)
         break;
     }
-    return o - r;
+    return l - c;
   };
 }
-function H(n, t, c) {
-  return (e) => {
-    const { scale: r = 1 } = c.value;
+function W(r, t, a) {
+  return (o) => {
+    const { scale: c = 1 } = a.value;
     if (typeof t == "number")
-      return Math.floor(e / (t * r)) + 1;
-    let a = 0, u = 0;
-    for (let o = 0; o < n.value.length; o++) {
-      const s = t(o) * r;
-      if (a += s, a >= e) {
-        u = o;
+      return Math.floor(o / (t * c)) + 1;
+    let e = 0, n = 0;
+    for (let l = 0; l < r.value.length; l++) {
+      const u = t(l) * c;
+      if (e += u, e >= o) {
+        n = l;
         break;
       }
     }
-    return u + 1;
+    return n + 1;
   };
 }
-function O(n, t, c, e, { containerRef: r, state: a, currentList: u, source: o }) {
+function k(r, t, a, o, { containerRef: c, state: e, currentList: n, source: l }, u) {
   return () => {
-    const s = r.value;
+    const s = c.value;
     if (s) {
-      const l = c(n === "vertical" ? s.scrollTop : s.scrollLeft), h = e(n === "vertical" ? s.clientHeight : s.clientWidth), v = l - t, p = l + h + t;
-      a.value = {
-        start: v < 0 ? 0 : v,
-        end: p > o.value.length ? o.value.length : p,
-        current: l - 1,
-        scale: a.value.scale
-      }, u.value = o.value.slice(a.value.start, a.value.end).map((i, f) => ({
-        data: i,
-        index: f + a.value.start
-      }));
+      const f = a(r === "vertical" ? s.scrollTop : s.scrollLeft), i = o(r === "vertical" ? s.clientHeight : s.clientWidth), p = f - t, g = f + i + t;
+      e.value = {
+        start: p < 0 ? 0 : p,
+        end: g > l.value.length ? l.value.length : g,
+        current: f - 1,
+        scale: e.value.scale
+      }, n.value = l.value.slice(e.value.start, e.value.end).map((h, v) => ({
+        data: h,
+        index: v + e.value.start
+      })), u(e.value);
     }
   };
 }
-function P(n, t, c) {
-  return (e) => {
-    const { scale: r = 1 } = c.value;
-    return typeof n == "number" ? e * (n * r) : t.value.slice(0, e).reduce((u, o, s) => u + n(s) * r, 0);
+function D(r, t, a) {
+  return (o) => {
+    const { scale: c = 1 } = a.value;
+    return typeof r == "number" ? o * (r * c) : t.value.slice(0, o).reduce((n, l, u) => n + r(u) * c, 0);
   };
 }
-function W(n, t, c, e) {
-  E([n.width, n.height, t, c], () => {
-    e();
+function E(r, t, a, o) {
+  M([r.width, r.height, t, a], () => {
+    o();
   });
 }
-function D(n, t, c) {
+function G(r, t, a) {
   return y(() => {
-    const { scale: e = 1 } = c.value;
-    return typeof n == "number" ? t.value.length * n * e : t.value.reduce((r, a, u) => r + n(u) * e, 0);
+    const { scale: o = 1 } = a.value;
+    return typeof r == "number" ? t.value.length * r * o : t.value.reduce((c, e, n) => c + r(n) * o, 0);
   });
 }
-const M = {
+const S = {
   horizontal: "scrollLeft",
   vertical: "scrollTop"
 };
-function G(n, t, c, e) {
-  return (r) => {
-    e.value && (e.value[M[n]] = c(r), t());
+function U(r, t, a, o) {
+  return (c) => {
+    o.value && (o.value[S[r]] = a(c), t());
   };
 }
-function X(n, t) {
-  const c = C(t), { state: e, source: r, currentList: a, size: u, containerRef: o } = c, s = { overflowX: "auto" }, { itemWidth: l, overscan: h = 5 } = n, v = $(e, r, l), p = H(r, l, e), i = O("horizontal", h, p, v, c), f = P(l, r, e), g = y(() => f(e.value.start)), w = D(l, r, e);
-  W(u, t, o, i);
-  const L = G("horizontal", i, f, o), R = (m) => {
-    e.value.scale = m;
-  }, V = y(() => ({
+function X(r, t) {
+  const { on: a, trigger: o } = $(), c = O(t), { state: e, source: n, currentList: l, size: u, containerRef: s } = c, f = { overflowX: "auto" }, { itemWidth: i, overscan: p = 5 } = r, g = P(e, n, i), h = W(n, i, e), v = k("horizontal", p, h, g, c, o), m = D(i, n, e), d = y(() => m(e.value.start)), R = G(i, n, e);
+  E(u, t, s, v);
+  const V = U("horizontal", v, m, s), b = (T) => {
+    e.value.scale = T;
+  }, x = y(() => ({
     style: {
       height: "100%",
-      width: `${w.value - g.value}px`,
-      marginLeft: `${g.value}px`,
+      width: `${R.value - d.value}px`,
+      marginLeft: `${d.value}px`,
       display: "flex",
       transform: `scale(${e.value.scale})`,
       transformOrigin: "50% 0%"
@@ -112,45 +114,47 @@ function X(n, t) {
     }
   }));
   return {
+    onUpdate: a,
     state: e,
-    scaleTo: R,
-    scrollTo: L,
-    calculateRange: i,
-    wrapperProps: V,
-    containerStyle: s,
-    currentList: a,
-    containerRef: o
+    scaleTo: b,
+    scrollTo: V,
+    calculateRange: v,
+    wrapperProps: x,
+    containerStyle: f,
+    currentList: l,
+    containerRef: s
   };
 }
-function K(n, t) {
-  const c = C(t), { state: e, source: r, currentList: a, size: u, containerRef: o } = c, s = { overflowY: "auto" }, { itemHeight: l, overscan: h = 5 } = n, v = $(e, r, l), p = H(r, l, e), i = O("vertical", h, p, v, c), f = P(l, r, e), g = y(() => f(e.value.start)), w = D(l, r, e);
-  W(u, t, o, i);
-  const L = G("vertical", i, f, o), R = (m) => {
-    const T = o.value;
-    if (T) {
-      const { current: x } = e.value;
-      let d = 0;
-      typeof l == "number" ? d = x * (m * l - e.value.scale * l) : d = r.value.slice(0, x).reduce((_, S, z) => _ + m * l(z) - e.value.scale * l(z), 0), T.scrollTop = T.scrollTop + d >= 0 ? T.scrollTop + d : 0, e.value.scale = m;
+function Y(r, t) {
+  const { on: a, trigger: o } = $(), c = O(t), { state: e, source: n, currentList: l, size: u, containerRef: s } = c, f = { overflowY: "auto" }, { itemHeight: i, overscan: p = 5 } = r, g = P(e, n, i), h = W(n, i, e), v = k("vertical", p, h, g, c, o), m = D(i, n, e), d = y(() => m(e.value.start)), R = G(i, n, e);
+  E(u, t, s, v);
+  const V = U("vertical", v, m, s), b = (T) => {
+    const w = s.value;
+    if (w) {
+      const { current: C } = e.value;
+      let L = 0;
+      typeof i == "number" ? L = C * (T * i - e.value.scale * i) : L = n.value.slice(0, C).reduce((_, j, H) => _ + T * i(H) - e.value.scale * i(H), 0), w.scrollTop = w.scrollTop + L >= 0 ? w.scrollTop + L : 0, e.value.scale = T;
     }
-  }, V = y(() => ({
+  }, x = y(() => ({
     style: {
-      height: `${w.value - g.value}px`,
-      marginTop: `${g.value}px`,
-      transform: `translateX(-50%) scale(${e.value.scale})`,
+      height: `${R.value - d.value}px`,
+      marginTop: `${d.value}px`,
+      transform: `scale(${e.value.scale})`,
       transformOrigin: "50% 0%"
     }
   }));
   return {
+    onUpdate: a,
     state: e,
-    scaleTo: R,
-    calculateRange: i,
-    scrollTo: L,
-    containerStyle: s,
-    wrapperProps: V,
-    currentList: a,
-    containerRef: o
+    scaleTo: b,
+    calculateRange: v,
+    scrollTo: V,
+    containerStyle: f,
+    wrapperProps: x,
+    currentList: l,
+    containerRef: s
   };
 }
 export {
-  q as useVirtualList
+  I as useVirtualList
 };