x-next 1.18.2 → 1.19.0

package/dist/es/components/virtual-list-v2/virtual-list.vue.js

@@ -1,41 +1,42 @@
 import d from "./virtual-list.vue2.js";
-import { resolveComponent as m, openBlock as t, createBlock as o, resolveDynamicComponent as r, mergeProps as s, withCtx as n, createElementBlock as p, Fragment as f, renderList as g, renderSlot as u } from "vue";
-import y from "../../_virtual/_plugin-vue_export-helper.js";
-function c(e, $, C, P, S, h) {
-  const a = m("VirtualListItem");
-  return t(), o(r(e.displayScrollbar ? "ScrollbarComponent" : e.mergedComponent.container), s({
+import { resolveComponent as p, openBlock as o, createBlock as t, resolveDynamicComponent as s, mergeProps as r, withCtx as n, createElementBlock as m, Fragment as f, renderList as g, normalizeStyle as u, renderSlot as y } from "vue";
+import h from "../../_virtual/_plugin-vue_export-helper.js";
+function S(e, $, z, C, P, b) {
+  const a = p("VirtualListItem");
+  return o(), t(s(e.displayScrollbar ? "ScrollbarComponent" : e.mergedComponent.container), r({
     ref: "wrapperComRef",
     class: e.className.block,
     style: e.style
   }, e.scrollbarProps, { onScroll: e.onScroll }), {
     default: n(() => [
-      (t(), o(r(e.mergedComponent.list), s(e.listAttrs, {
+      (o(), t(s(e.mergedComponent.list), r(e.listAttrs, {
         style: e.paddingPosition === "list" ? {
           paddingTop: `${e.frontPadding}px`,
           paddingBottom: `${e.behindPadding}px`
         } : {}
       }), {
         default: n(() => [
-          (t(), o(r(e.mergedComponent.content), s({ ref: "contentRef" }, e.contentAttrs, {
-            style: e.paddingPosition === "content" ? {
+          (o(), t(s(e.mergedComponent.content), r({ ref: "contentRef" }, e.contentAttrs, {
+            style: e.positioned ? { position: "relative", height: `${e.data.length * e.estimatedSize}px` } : e.paddingPosition === "content" ? {
               paddingTop: `${e.frontPadding}px`,
               paddingBottom: `${e.behindPadding}px`
             } : {}
           }), {
             default: n(() => [
-              (t(!0), p(f, null, g(e.currentList, (i, l) => (t(), o(a, {
-                key: i[e.itemKey] ?? e.start + l,
+              (o(!0), m(f, null, g(e.renderedItems, ({ item: l, index: i }) => (o(), t(a, {
+                key: l[e.itemKey] ?? i,
                 "has-item-size": e.hasItemSize,
-                "set-item-size": e.setItemSize
+                "set-item-size": e.setItemSize,
+                style: u(e.positioned ? { position: "absolute", top: `${i * e.estimatedSize}px`, width: "100%" } : void 0)
               }, {
                 default: n(() => [
-                  u(e.$slots, "item", {
-                    item: i,
-                    index: e.start + l
+                  y(e.$slots, "item", {
+                    item: l,
+                    index: i
                   })
                 ]),
                 _: 2
-              }, 1032, ["has-item-size", "set-item-size"]))), 128))
+              }, 1032, ["has-item-size", "set-item-size", "style"]))), 128))
             ]),
             _: 3
           }, 16, ["style"]))
@@ -46,7 +47,7 @@ function c(e, $, C, P, S, h) {
     _: 3
   }, 16, ["class", "style", "onScroll"]);
 }
-const B = /* @__PURE__ */ y(d, [["render", c]]);
+const I = /* @__PURE__ */ h(d, [["render", S]]);
 export {
-  B as default
+  I as default
 };

package/dist/es/components/virtual-list-v2/virtual-list.vue2.js

@@ -1,14 +1,14 @@
-import { defineComponent as K, toRefs as g, computed as i, ref as M, watch as V, nextTick as y } from "vue";
-import { useSize as $ } from "./hooks/use-size.js";
-import q from "./virtual-list-item.js";
-import { isObject as D, isNumber as S } from "../../_utils/is.js";
-import { getClassNameMixin as E } from "../../_utils/config.js";
-import { Scrollbar as F } from "../scrollbar-v2/index.js";
-import { useComponentRef as G } from "../../_hooks/use-component-ref.js";
-import { useScrollbar as J } from "../../_hooks/use-scrollbar.js";
-const le = K({
+import { defineComponent as G, toRefs as R, computed as c, ref as J, watch as H, nextTick as S } from "vue";
+import { useSize as Q } from "./hooks/use-size.js";
+import U from "./virtual-list-item.js";
+import { isObject as W, isNumber as N } from "../../_utils/is.js";
+import { getClassNameMixin as X } from "../../_utils/config.js";
+import { Scrollbar as Y } from "../scrollbar-v2/index.js";
+import { useComponentRef as Z } from "../../_hooks/use-component-ref.js";
+import { useScrollbar as ee } from "../../_hooks/use-scrollbar.js";
+const ce = G({
   name: "VirtualList",
-  components: { VirtualListItem: q, ScrollbarComponent: F },
+  components: { VirtualListItem: U, ScrollbarComponent: Y },
   props: {
     height: {
       type: [Number, String],
@@ -55,86 +55,113 @@ const le = K({
     scrollbar: {
       type: [Boolean, Object],
       default: !1
-    }
+    },
+    preserveScroll: { type: Boolean, default: !1 },
+    pinnedKeys: { type: Array, default: void 0 }
   },
   emits: {
-    scroll: (t) => !0,
-    reachBottom: (t) => !0
+    scroll: (o) => !0,
+    reachBottom: (o) => !0,
+    rangeChange: (o) => !0
   },
-  setup(t, { emit: m }) {
-    const { data: a, itemKey: x, fixedSize: T, estimatedSize: R, buffer: d, height: c } = g(t), { displayScrollbar: z, scrollbarProps: N } = J(g(t).scrollbar), O = E("virtual-list"), C = i(() => D(t.component) ? {
+  setup(o, { emit: m, expose: B }) {
+    const { data: i, itemKey: j, fixedSize: K, estimatedSize: _, buffer: b, height: v } = R(o), { displayScrollbar: w, scrollbarProps: A } = ee(R(o).scrollbar), I = X("virtual-list"), P = c(() => W(o.component) ? {
       container: "div",
       list: "div",
       content: "div",
-      ...t.component
+      ...o.component
     } : {
-      container: t.component,
+      container: o.component,
       list: "div",
       content: "div"
-    }), { componentRef: j, elementRef: o } = G("containerRef"), p = M(), B = i(() => ({
-      height: S(c.value) ? `${c.value}px` : c.value,
+    }), { componentRef: k, elementRef: a } = Z("containerRef"), x = J(), L = c(() => ({
+      height: N(v.value) ? `${v.value}px` : v.value,
       overflow: "auto"
-    })), s = i(
-      () => a.value.map((e, l) => e[x.value] ?? l)
+    })), u = c(
+      () => i.value.map((l, n) => l[j.value] ?? n)
     ), {
-      frontPadding: _,
-      behindPadding: P,
-      start: u,
-      end: w,
-      getStartByScroll: A,
-      setItemSize: I,
-      hasItemSize: L,
+      frontPadding: V,
+      behindPadding: q,
+      start: s,
+      end: h,
+      getStartByScroll: T,
+      setItemSize: $,
+      hasItemSize: D,
       setStart: f,
-      getScrollOffset: v
-    } = $({
-      dataKeys: s,
-      contentRef: p,
-      fixedSize: T,
-      estimatedSize: R,
-      buffer: d
-    }), k = i(() => t.threshold && a.value.length <= t.threshold ? a.value : a.value.slice(u.value, w.value));
-    V(s, (e, l) => {
-      e.length >= l.length && l.every((r, n) => e[n] === r) || (f(0), o.value && (o.value.scrollTop = 0));
+      getScrollOffset: O
+    } = Q({
+      dataKeys: u,
+      contentRef: x,
+      fixedSize: K,
+      estimatedSize: _,
+      buffer: b
+    }), p = c(() => o.threshold && i.value.length <= o.threshold ? i.value : i.value.slice(s.value, h.value)), z = c(() => o.fixedSize && o.pinnedKeys !== void 0), E = c(() => {
+      const l = o.threshold && i.value.length <= o.threshold ? 0 : s.value, n = p.value.map((e, r) => ({ item: e, index: l + r }));
+      if (z.value) {
+        const e = new Set(n.map((r) => r.index));
+        for (const r of o.pinnedKeys ?? []) {
+          const t = u.value.indexOf(r);
+          t >= 0 && !e.has(t) && (e.add(t), n.push({ item: i.value[t], index: t }));
+        }
+        n.sort((r, t) => r.index - t.index);
+      }
+      return n;
+    });
+    H([s, h], () => m("rangeChange", { start: s.value, end: h.value }), { immediate: !0 }), H(u, (l, n) => {
+      if (o.preserveScroll) {
+        S(() => {
+          if (a.value) {
+            const e = a.value;
+            e.scrollTop = Math.min(e.scrollTop, Math.max(0, e.scrollHeight - e.clientHeight)), f(T(e.scrollTop));
+          }
+        });
+        return;
+      }
+      l.length >= n.length && n.every((e, r) => l[r] === e) || (f(0), a.value && (a.value.scrollTop = 0));
     });
-    const H = (e) => {
-      const { scrollTop: l, scrollHeight: r, clientHeight: n } = e.target, b = A(l);
-      b !== u.value && (f(b), y(() => {
-        h(l);
-      })), m("scroll", e), Math.floor(r - (l + n)) <= 0 && m("reachBottom", e);
-    }, h = (e) => {
-      if (o.value)
-        if (S(e))
-          o.value.scrollTop = e;
+    const F = (l) => {
+      const { scrollTop: n, scrollHeight: e, clientHeight: r } = l.target, t = T(n);
+      t !== s.value && (f(t), S(() => {
+        g(n);
+      })), m("scroll", l), Math.floor(e - (n + r)) <= 0 && m("reachBottom", l);
+    }, g = (l) => {
+      if (a.value)
+        if (N(l))
+          a.value.scrollTop = l;
         else {
-          const { align: l = "top" } = e, r = e.index ?? s.value.indexOf(e.key ?? "");
-          f(r - d.value), o.value.scrollTop = v(r), y(() => {
-            if (o.value) {
-              const n = v(r);
-              n !== o.value.scrollTop && (o.value.scrollTop = n);
+          const { align: n = "top" } = l, e = l.index ?? u.value.indexOf(l.key ?? "");
+          if (e < 0 || !i.value.length) return;
+          const r = Math.min(Math.floor(e), i.value.length - 1), t = a.value, d = O(r), y = O(r + 1), C = n === "bottom" ? y - t.clientHeight : n === "auto" ? d < t.scrollTop ? d : y > t.scrollTop + t.clientHeight ? y - t.clientHeight : t.scrollTop : d;
+          f(r - b.value), a.value.scrollTop = Math.max(0, C), S(() => {
+            if (a.value) {
+              const M = Math.max(0, C);
+              M !== a.value.scrollTop && (a.value.scrollTop = M);
             }
           });
         }
     };
-    return {
-      className: O,
-      containerRef: o,
-      wrapperComRef: j,
-      displayScrollbar: z,
-      scrollbarProps: N,
-      contentRef: p,
-      frontPadding: _,
-      currentList: k,
-      behindPadding: P,
-      onScroll: H,
-      setItemSize: I,
-      hasItemSize: L,
-      start: u,
-      scrollTo: h,
-      style: B,
-      mergedComponent: C
+    return B({ scrollTo: g, containerRef: a, currentList: p }), {
+      className: I,
+      containerRef: a,
+      wrapperComRef: k,
+      displayScrollbar: w,
+      scrollbarProps: A,
+      contentRef: x,
+      frontPadding: V,
+      currentList: p,
+      positioned: z,
+      renderedItems: E,
+      behindPadding: q,
+      onScroll: F,
+      setItemSize: $,
+      hasItemSize: D,
+      start: s,
+      scrollTo: g,
+      style: L,
+      mergedComponent: P
     };
   }
 });
 export {
-  le as default
+  ce as default
 };

package/dist/es/index.js

@@ -2,7 +2,7 @@
 import * as r from "./components/index.js";
 import { Icon as p } from "./icons/index.js";
 import { setupDirectives as m } from "./directives/index.js";
-import { default as s } from "./components/dialog/use.js";
+import { default as c } from "./components/dialog/use.js";
 import { default as u } from "./components/message/warp.js";
 import { default as g } from "./components/message-box/MessageBox.js";
 import { default as T } from "./components/notification/warp.js";
@@ -17,14 +17,14 @@ import { useDraggable as F } from "./components/draggable/useDraggable.js";
 import { vDraggable as z } from "./components/draggable/directive.js";
 import { Watermark as K } from "./components/watermark/index.js";
 import { default as W } from "./locale/en-US.js";
-import { default as X } from "./locale/zh-CN.js";
-import { Alert as Z } from "./components/alert/index.js";
-import { BarChart as J } from "./components/bar-chart/index.js";
+import { default as V } from "./locale/zh-CN.js";
+import { Alert as Y } from "./components/alert/index.js";
+import { BarChart as q } from "./components/bar-chart/index.js";
 import { Button as $, ButtonGroup as oo } from "./components/button/index.js";
 import { Checkbox as ro, CheckboxGroup as to } from "./components/form-checkbox/index.js";
 import { Col as mo, Grid as ao, GridItem as fo, Row as no } from "./components/grid/index.js";
 import { ColorPicker as io } from "./components/color-picker/index.js";
-import { ConfigProvider as so } from "./components/config-provider/index.js";
+import { ConfigProvider as co } from "./components/config-provider/index.js";
 import { DatePicker as uo, MonthPicker as go, QuarterPicker as Io, RangePicker as To, WeekPicker as So, YearPicker as Po } from "./components/date-picker/index.js";
 import { Draggable as Co } from "./components/draggable/index.js";
 import { Drawer as ko } from "./components/drawer/index.js";
@@ -33,13 +33,13 @@ import { Empty as vo } from "./components/empty/index.js";
 import { Form as Bo, FormItem as Eo } from "./components/form/index.js";
 import { Heatmap as Ro } from "./components/heatmap/index.js";
 import { Image as Fo, ImagePreview as jo, ImagePreviewAction as zo, ImagePreviewGroup as Ho } from "./components/image/index.js";
-import { Input as Uo, InputGroup as Wo, InputPassword as Qo, InputSearch as Xo } from "./components/form-input/index.js";
-import { InputNumber as Zo } from "./components/form-input-number/index.js";
-import { InputTag as Jo } from "./components/form-input-tag/index.js";
+import { Input as Uo, InputGroup as Wo, InputPassword as Qo, InputSearch as Vo } from "./components/form-input/index.js";
+import { InputNumber as Yo } from "./components/form-input-number/index.js";
+import { InputTag as qo } from "./components/form-input-tag/index.js";
 import { Layout as $o, LayoutContent as oe, LayoutFooter as ee, LayoutHeader as re, LayoutSidebar as te } from "./components/layout/index.js";
 import { LineChart as me } from "./components/line-chart/index.js";
 import { Link as fe } from "./components/link/index.js";
-import { Menu as xe, MenuItem as ie, MenuItemGroup as ce, MenuSubMenu as se } from "./components/menu/index.js";
+import { Menu as xe, MenuItem as ie, MenuItemGroup as se, MenuSubMenu as ce } from "./components/menu/index.js";
 import { Network as ue } from "./components/network/index.js";
 import { Pagination as ge } from "./components/pagination/index.js";
 import { PieChart as Te } from "./components/pie-chart/index.js";
@@ -54,13 +54,13 @@ import { Scrollbar as Ee } from "./components/scrollbar-v2/index.js";
 import { Select as Re, SelectDropdown as _e, SelectOption as Fe, SelectOptionGroup as je } from "./components/form-select/index.js";
 import { Skeleton as He, SkeletonLine as Ke, SkeletonShape as Ue } from "./components/skeleton/index.js";
 import { Slider as Qe } from "./components/form-slider/index.js";
-import { Space as Ye } from "./components/space/index.js";
-import { Spin as qe } from "./components/spin/index.js";
-import { Step as Ve, Steps as $e } from "./components/steps/index.js";
+import { Space as Xe } from "./components/space/index.js";
+import { Spin as Ze } from "./components/spin/index.js";
+import { Step as Je, Steps as $e } from "./components/steps/index.js";
 import { Switch as er } from "./components/form-switch/index.js";
 import { TABLE_LOCALE_EN_US as tr, TABLE_LOCALE_ZH_CN as pr, formatLocaleText as mr } from "./components/table/locale.js";
 import { TabPane as fr, Tabs as nr } from "./components/tabs/index.js";
-import { Table as ir, TableColumn as cr } from "./components/table/index.js";
+import { Table as ir, TableColumn as sr } from "./components/table/index.js";
 import { Tag as lr } from "./components/tag/index.js";
 import { default as dr } from "./components/table/table-tbody.js";
 import { default as Ir } from "./components/table/table-td.js";
@@ -78,14 +78,15 @@ import { TreeSelect as Fr, TreeSelectDropdown as jr } from "./components/tree-se
 import { TrendChart as Hr } from "./components/trend-chart/index.js";
 import { Trigger as Ur } from "./components/trigger/index.js";
 import { Upload as Qr } from "./components/upload/index.js";
-import { addIcon as Yr, hasIcon as Zr, registerIcons as qr, removeIcon as Jr } from "./icons/registry.js";
-import { canonicalIconNames as $r, publicIconAliases as ot, publicIconNames as et, searchPublicIcons as rt } from "./icons/public/lucide-names.js";
-import { configProviderInjectionKey as pt } from "./components/config-provider/context.js";
-import { finiconCategories as at, finiconIconsMeta as ft } from "./icons/public/finicon-meta.js";
-import { finiconIconNames as xt, finiconIcons as it, registerFiniconIcons as ct } from "./icons/public/finicon.js";
-import { formInjectionKey as lt, formItemInjectionKey as ut } from "./components/form/context.js";
-import { registerPublicIcons as gt } from "./icons/public/lucide.js";
-import { vWatermark as Tt } from "./components/watermark/directive.js";
+import { VirtualList as Xr } from "./components/virtual-list-v2/index.js";
+import { addIcon as Zr, hasIcon as qr, registerIcons as Jr, removeIcon as $r } from "./icons/registry.js";
+import { canonicalIconNames as et, publicIconAliases as rt, publicIconNames as tt, searchPublicIcons as pt } from "./icons/public/lucide-names.js";
+import { configProviderInjectionKey as at } from "./components/config-provider/context.js";
+import { finiconCategories as nt, finiconIconsMeta as xt } from "./icons/public/finicon-meta.js";
+import { finiconIconNames as st, finiconIcons as ct, registerFiniconIcons as lt } from "./icons/public/finicon.js";
+import { formInjectionKey as dt, formItemInjectionKey as gt } from "./components/form/context.js";
+import { registerPublicIcons as Tt } from "./icons/public/lucide.js";
+import { vWatermark as Pt } from "./components/watermark/directive.js";
 const x = {
   install: function(o) {
     m(o), o.use(p), Object.keys(r).forEach((t) => {
@@ -95,17 +96,17 @@ const x = {
   }
 };
 export {
-  Z as Alert,
-  J as BarChart,
+  Y as Alert,
+  q as BarChart,
   $ as Button,
   oo as ButtonGroup,
   ro as Checkbox,
   to as CheckboxGroup,
   mo as Col,
   io as ColorPicker,
-  so as ConfigProvider,
+  co as ConfigProvider,
   uo as DatePicker,
-  s as Dialog,
+  c as Dialog,
   P as DialogComponent,
   Co as Draggable,
   ko as Drawer,
@@ -127,10 +128,10 @@ export {
   Ho as ImagePreviewGroup,
   Uo as Input,
   Wo as InputGroup,
-  Zo as InputNumber,
+  Yo as InputNumber,
   Qo as InputPassword,
-  Xo as InputSearch,
-  Jo as InputTag,
+  Vo as InputSearch,
+  qo as InputTag,
   A as LOCALES,
   $o as Layout,
   oe as LayoutContent,
@@ -141,8 +142,8 @@ export {
   fe as Link,
   xe as Menu,
   ie as MenuItem,
-  ce as MenuItemGroup,
-  se as MenuSubMenu,
+  se as MenuItemGroup,
+  ce as MenuSubMenu,
   u as Message,
   g as MessageBox,
   C as MessageComponent,
@@ -172,16 +173,16 @@ export {
   Ke as SkeletonLine,
   Ue as SkeletonShape,
   Qe as Slider,
-  Ye as Space,
-  qe as Spin,
-  Ve as Step,
+  Xe as Space,
+  Ze as Spin,
+  Je as Step,
   $e as Steps,
   er as Switch,
   tr as TABLE_LOCALE_EN_US,
   pr as TABLE_LOCALE_ZH_CN,
   fr as TabPane,
   ir as Table,
-  cr as TableColumn,
+  sr as TableColumn,
   nr as Tabs,
   lr as Tag,
   dr as Tbody,
@@ -201,39 +202,40 @@ export {
   Hr as TrendChart,
   Ur as Trigger,
   Qr as Upload,
+  Xr as VirtualList,
   K as Watermark,
   So as WeekPicker,
   Po as YearPicker,
-  Yr as addIcon,
+  Zr as addIcon,
   M as applyThemeColor,
-  $r as canonicalIconNames,
-  pt as configProviderInjectionKey,
+  et as canonicalIconNames,
+  at as configProviderInjectionKey,
   x as default,
   W as enUS,
-  at as finiconCategories,
-  xt as finiconIconNames,
-  it as finiconIcons,
-  ft as finiconIconsMeta,
-  lt as formInjectionKey,
-  ut as formItemInjectionKey,
+  nt as finiconCategories,
+  st as finiconIconNames,
+  ct as finiconIcons,
+  xt as finiconIconsMeta,
+  dt as formInjectionKey,
+  gt as formItemInjectionKey,
   mr as formatLocaleText,
   B as formatMessage,
   N as generatePalette,
   E as getGlobalLocale,
-  Zr as hasIcon,
-  ot as publicIconAliases,
-  et as publicIconNames,
-  ct as registerFiniconIcons,
-  qr as registerIcons,
-  gt as registerPublicIcons,
-  Jr as removeIcon,
-  rt as searchPublicIcons,
+  qr as hasIcon,
+  rt as publicIconAliases,
+  tt as publicIconNames,
+  lt as registerFiniconIcons,
+  Jr as registerIcons,
+  Tt as registerPublicIcons,
+  $r as removeIcon,
+  pt as searchPublicIcons,
   O as setGlobalLocale,
   F as useDraggable,
   y as useFormItem,
   R as useLocale,
   D as useResizeObserver,
   z as vDraggable,
-  Tt as vWatermark,
-  X as zhCN
+  Pt as vWatermark,
+  V as zhCN
 };