@wfrog/vc-ui 1.13.0 → 1.13.2

package/dist/es/components/scrollbar/index.css

@@ -1,20 +1,34 @@
 /* source: src/components/scrollbar/scrollbar.vue */
-._scrollbar_edxkl_1 {
+._scrollbar_1gbhe_1 {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
 }
-._scrollbar_edxkl_1 > .el-scrollbar__wrap {
+._scrollbar_1gbhe_1 > .el-scrollbar__wrap {
   flex-grow: 1;
   flex-direction: column;
   display: flex;
 }
-._scrollbar_edxkl_1 > .el-scrollbar__wrap > .el-scrollbar__view {
+._scrollbar_1gbhe_1 > .el-scrollbar__wrap > .el-scrollbar__view {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  margin: var(--v0912858a);
+  margin: var(--d31e596a);
 }
-._fill-height_edxkl_18 {
+._fill-height_1gbhe_18 {
   height: 10px;
+}
+._sentinel_1gbhe_22 {
+  height: auto;
+}
+._loading_1gbhe_26 {
+  padding: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  column-gap: 4px;
+}
+._status-text_1gbhe_34 {
+  padding: 12px;
+  text-align: center;
 }

package/dist/es/components/scrollbar/scrollbar.d.ts

@@ -2,4 +2,13 @@ export interface IScrollbarProps {
     flex?: boolean;
     fillHeight?: boolean;
     viewMargin?: string;
+    scrollLoad?: boolean;
+    scrollLoadDisabled?: boolean;
+    scrollLoadRootMargin?: string;
+    scrollLoadThreshold?: number;
+    loading?: boolean;
+    loadingText?: string;
+    noMoreText?: string;
+    empty?: boolean;
+    emptyText?: string;
 }

package/dist/es/components/scrollbar/scrollbar.mjs

@@ -1,8 +1,12 @@
 import './index.css'
-import { ElScrollbar } from 'element-plus/es';
+import { ElScrollbar, ElText, ElIcon } from 'element-plus/es';
 import 'element-plus/es/components/base/style/css';
 import 'element-plus/es/components/scrollbar/style/css';
-import { defineComponent, useCssVars, useTemplateRef, createBlock, openBlock, normalizeClass, withCtx, renderSlot } from 'vue';
+import 'element-plus/es/components/icon/style/css';
+import 'element-plus/es/components/text/style/css';
+import { defineComponent, useCssVars, useTemplateRef, computed, createBlock, openBlock, normalizeClass, withCtx, renderSlot, createElementBlock, createCommentVNode, createElementVNode, createVNode, createTextVNode, toDisplayString, unref } from 'vue';
+import { Loading } from '@element-plus/icons-vue';
+import { useIntersectionObserver } from '@vueuse/core';
 import { _ as _export_sfc } from '../../chunk/pcqpp-6-.mjs';
 
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -10,15 +14,47 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   props: {
     flex: { type: Boolean, default: true },
     fillHeight: { type: Boolean, default: true },
-    viewMargin: { default: "0 10px" }
+    viewMargin: { default: "0 10px" },
+    scrollLoad: { type: Boolean, default: false },
+    scrollLoadDisabled: { type: Boolean, default: false },
+    scrollLoadRootMargin: { default: "100px" },
+    scrollLoadThreshold: { default: 0 },
+    loading: { type: Boolean, default: false },
+    loadingText: { default: "加载中" },
+    noMoreText: { default: "没有更多了" },
+    empty: { type: Boolean, default: false },
+    emptyText: { default: "暂无数据" }
   },
-  setup(__props, { expose: __expose }) {
+  emits: ["loadMore"],
+  setup(__props, { expose: __expose, emit: __emit }) {
     useCssVars((_ctx) => ({
-      "v0912858a": _ctx.viewMargin
+      "d31e596a": _ctx.viewMargin
     }));
+    const props = __props;
+    const emits = __emit;
     const scrollbarRef = useTemplateRef("scrollbarRef");
+    const sentinelRef = useTemplateRef("sentinelRef");
+    const scrollLoadEnabled = computed(
+      () => props.scrollLoad && !props.loading && !props.scrollLoadDisabled
+    );
+    const scrollRoot = computed(() => scrollbarRef.value?.wrapRef ?? null);
+    useIntersectionObserver(
+      sentinelRef,
+      ([{ isIntersecting }]) => {
+        if (isIntersecting && scrollLoadEnabled.value) {
+          emits("loadMore");
+        }
+      },
+      {
+        root: scrollRoot,
+        rootMargin: props.scrollLoadRootMargin,
+        threshold: props.scrollLoadThreshold
+      }
+    );
     __expose({ scrollbarRef });
     return (_ctx, _cache) => {
+      const _component_ElText = ElText;
+      const _component_el_icon = ElIcon;
       const _component_ElScrollbar = ElScrollbar;
       return openBlock(), createBlock(_component_ElScrollbar, {
         ref_key: "scrollbarRef",
@@ -26,7 +62,54 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         class: normalizeClass({ [_ctx.$style.scrollbar]: __props.flex, [_ctx.$style[`fill-height`]]: __props.fillHeight })
       }, {
         default: withCtx(() => [
-          renderSlot(_ctx.$slots, "default")
+          !__props.empty ? renderSlot(_ctx.$slots, "default", { key: 0 }) : renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
+            createElementVNode("div", {
+              class: normalizeClass(_ctx.$style["status-text"])
+            }, [
+              createVNode(_component_ElText, { type: "info" }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(__props.emptyText), 1)
+                ]),
+                _: 1
+              })
+            ], 2)
+          ]),
+          __props.scrollLoad && !__props.empty ? (openBlock(), createElementBlock("div", {
+            key: 2,
+            ref_key: "sentinelRef",
+            ref: sentinelRef,
+            class: normalizeClass(_ctx.$style.sentinel)
+          }, [
+            __props.loading ? renderSlot(_ctx.$slots, "loading", { key: 0 }, () => [
+              createElementVNode("div", {
+                class: normalizeClass(_ctx.$style.loading)
+              }, [
+                createVNode(_component_el_icon, { class: "is-loading" }, {
+                  default: withCtx(() => [
+                    createVNode(unref(Loading))
+                  ]),
+                  _: 1
+                }),
+                createVNode(_component_ElText, { type: "info" }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(__props.loadingText), 1)
+                  ]),
+                  _: 1
+                })
+              ], 2)
+            ]) : __props.scrollLoadDisabled ? renderSlot(_ctx.$slots, "no-more", { key: 1 }, () => [
+              createElementVNode("div", {
+                class: normalizeClass(_ctx.$style["status-text"])
+              }, [
+                createVNode(_component_ElText, { type: "info" }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(__props.noMoreText), 1)
+                  ]),
+                  _: 1
+                })
+              ], 2)
+            ]) : createCommentVNode("", true)
+          ], 2)) : createCommentVNode("", true)
         ]),
         _: 3
       }, 8, ["class"]);
@@ -34,10 +117,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   }
 });
 
-/* unplugin-vue-components disabled */const scrollbar = "_scrollbar_edxkl_1";
+/* unplugin-vue-components disabled */const scrollbar = "_scrollbar_1gbhe_1";
+const sentinel = "_sentinel_1gbhe_22";
+const loading = "_loading_1gbhe_26";
 const style0 = {
 	scrollbar: scrollbar,
-	"fill-height": "_fill-height_edxkl_18"
+	"fill-height": "_fill-height_1gbhe_18",
+	sentinel: sentinel,
+	loading: loading,
+	"status-text": "_status-text_1gbhe_34"
 };
 
 const cssModules = {

package/dist/es/components/scrollbar/scrollbar.vue.d.ts

@@ -3,6 +3,9 @@ declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
         default?(_: {}): any;
+        empty?(_: {}): any;
+        loading?(_: {}): any;
+        'no-more'?(_: {}): any;
     };
     refs: {
         scrollbarRef: ({
@@ -200,6 +203,7 @@ declare function __VLS_template(): {
                 default?: (props: {}) => any;
             };
         }) | null;
+        sentinelRef: HTMLDivElement;
     };
     rootEl: any;
 };
@@ -400,10 +404,23 @@ declare const __VLS_component: import('vue').DefineComponent<IScrollbarProps, {
             default?: (props: {}) => any;
         };
     }) | null>>;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<IScrollbarProps> & Readonly<{}>, {
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    loadMore: () => any;
+}, string, import('vue').PublicProps, Readonly<IScrollbarProps> & Readonly<{
+    onLoadMore?: (() => any) | undefined;
+}>, {
+    loading: boolean;
     flex: boolean;
     fillHeight: boolean;
     viewMargin: string;
+    scrollLoad: boolean;
+    scrollLoadDisabled: boolean;
+    scrollLoadRootMargin: string;
+    scrollLoadThreshold: number;
+    loadingText: string;
+    noMoreText: string;
+    empty: boolean;
+    emptyText: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     scrollbarRef: ({
         $: import('vue').ComponentInternalInstance;
@@ -600,6 +617,7 @@ declare const __VLS_component: import('vue').DefineComponent<IScrollbarProps, {
             default?: (props: {}) => any;
         };
     }) | null;
+    sentinelRef: HTMLDivElement;
 }, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/es/index.mjs

@@ -164,7 +164,7 @@ const __vite_glob_0_50 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.definePr
     default: _sfc_main$8
 }, Symbol.toStringTag, { value: 'Module' }));
 
-const version = "1.13.0";
+const version = "1.13.2";
 
 const modules = /* #__PURE__ */ Object.assign({"./components/awesome-icon/awesome-icon.vue": __vite_glob_0_0,"./components/backbottom/backbottom.vue": __vite_glob_0_1,"./components/button/button.vue": __vite_glob_0_2,"./components/chat-container/chat-container.vue": __vite_glob_0_3,"./components/choice-boolean/choice-boolean.vue": __vite_glob_0_4,"./components/choice/choice.vue": __vite_glob_0_5,"./components/color-switch/color-switch.vue": __vite_glob_0_6,"./components/config-provider/config-provider.vue": __vite_glob_0_7,"./components/cropper/cropper.vue": __vite_glob_0_8,"./components/currency/currency.vue": __vite_glob_0_9,"./components/dark-switch/dark-switch.vue": __vite_glob_0_10,"./components/daterange-picker/daterange-picker.vue": __vite_glob_0_11,"./components/dialog-camera-upload/dialog-camera-upload.vue": __vite_glob_0_12,"./components/dialog-map-point/dialog-map-point.vue": __vite_glob_0_13,"./components/dialog-upload-images/dialog-upload-images.vue": __vite_glob_0_14,"./components/dialog/dialog.vue": __vite_glob_0_15,"./components/drag-verify/drag-verify.vue": __vite_glob_0_16,"./components/drawer/drawer.vue": __vite_glob_0_17,"./components/easy-pagination/easy-pagination.vue": __vite_glob_0_18,"./components/el-icon/el-icon.vue": __vite_glob_0_19,"./components/explorer-column-table/explorer-column-table.vue": __vite_glob_0_20,"./components/explorer-container/explorer-container.vue": __vite_glob_0_21,"./components/explorer-filter/explorer-filter.vue": __vite_glob_0_22,"./components/explorer-footer/explorer-footer.vue": __vite_glob_0_23,"./components/explorer-form/explorer-form.vue": __vite_glob_0_24,"./components/explorer-list/explorer-list.vue": __vite_glob_0_25,"./components/explorer-modal-form/explorer-modal-form.vue": __vite_glob_0_26,"./components/explorer-panel/explorer-panel.vue": __vite_glob_0_27,"./components/explorer-query/explorer-query.vue": __vite_glob_0_28,"./components/explorer-table/explorer-table.vue": __vite_glob_0_29,"./components/explorer-tools/explorer-tools.vue": __vite_glob_0_30,"./components/explorer-tree/explorer-tree.vue": __vite_glob_0_31,"./components/explorer/explorer.vue": __vite_glob_0_32,"./components/flag/flag.vue": __vite_glob_0_33,"./components/form-item/form-item.vue": __vite_glob_0_34,"./components/gen-input/gen-input.vue": __vite_glob_0_35,"./components/icon-picker/icon-picker.vue": __vite_glob_0_36,"./components/icon/icon.vue": __vite_glob_0_37,"./components/iconify-icon/iconify-icon.vue": __vite_glob_0_38,"./components/image/image.vue": __vite_glob_0_39,"./components/info-tooltip/info-tooltip.vue": __vite_glob_0_40,"./components/input-number/input-number.vue": __vite_glob_0_41,"./components/input/input.vue": __vite_glob_0_42,"./components/pca-picker/pca-picker.vue": __vite_glob_0_43,"./components/qr-code/qr-code.vue": __vite_glob_0_44,"./components/screenfull/screenfull.vue": __vite_glob_0_45,"./components/scrollbar/scrollbar.vue": __vite_glob_0_46,"./components/select/select.vue": __vite_glob_0_47,"./components/single-player/single-player.vue": __vite_glob_0_48,"./components/splitter-panel/splitter-panel.vue": __vite_glob_0_49,"./components/splitter/splitter.vue": __vite_glob_0_50,"./components/svg-icon/svg-icon.vue": __vite_glob_0_51,"./components/switch/switch.vue": __vite_glob_0_52,"./components/sync-scroll-container/sync-scroll-container.vue": __vite_glob_0_53,"./components/tags/tags.vue": __vite_glob_0_54,"./components/text-ellipsis/text-ellipsis.vue": __vite_glob_0_55,"./components/thousand-input/thousand-input.vue": __vite_glob_0_56,"./components/tinymce/tinymce.vue": __vite_glob_0_57,"./components/transfer-panel/transfer-panel.vue": __vite_glob_0_58,"./components/transfer/transfer.vue": __vite_glob_0_59,"./components/tree-picker/tree-picker.vue": __vite_glob_0_60,"./components/tree-select/tree-select.vue": __vite_glob_0_61,"./components/upload-file/upload-file.vue": __vite_glob_0_62});
 const upper = (_, letter) => letter.toUpperCase();

package/dist/index.css

@@ -605,7 +605,7 @@ div._table_1vtct_1 {
 }
 /* source: src/components/explorer-filter/explorer-filter.vue */
 ._explorer-filter_fuuuf_1 {
-  padding-bottom: var(--cd3fe400);
+  padding-bottom: var(--v649a28c7);
   display: flex;
   column-gap: 8px;
   border-bottom: 1px solid var(--el-border-color-lighter);
@@ -667,9 +667,9 @@ div._table_1vtct_1 {
   margin: 0 -8px;
 }
 /* source: src/components/explorer-list/explorer-list.vue */
-._item_14vaz_1 {
+._item_13vx0_1 {
   padding: 4px 8px;
-  cursor: var(--v7fa588cc);
+  cursor: var(--ac031736);
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -679,60 +679,52 @@ div._table_1vtct_1 {
   box-sizing: border-box;
   line-height: 1;
 }
-._item_14vaz_1:hover {
+._item_13vx0_1:hover {
   background-color: var(--vc-highlight-bg-color, var(--el-fill-color-light));
 }
-._item_14vaz_1:hover ._actions_14vaz_16 {
+._item_13vx0_1:hover ._actions_13vx0_16 {
   display: inline-flex;
   align-items: flex-start;
 }
-._item_14vaz_1._active_14vaz_20 {
+._item_13vx0_1._active_13vx0_20 {
   color: var(--el-color-primary);
   background-color: var(--vc-highlight-bg-color, var(--el-fill-color-light));
 }
-._label_14vaz_25 {
+._label_13vx0_25 {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   --el-checkbox-height: 24px;
 }
-._label_14vaz_25 .iconify {
+._label_13vx0_25 .iconify {
   margin-right: 4px;
 }
-._label_14vaz_25 .el-checkbox {
+._label_13vx0_25 .el-checkbox {
   width: 100%;
 }
-._label_14vaz_25 .el-checkbox__label {
+._label_13vx0_25 .el-checkbox__label {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   color: var(--el-text-color-regular) !important;
   cursor: pointer !important;
 }
-._actions_14vaz_16 {
+._actions_13vx0_16 {
   display: none;
   column-gap: 4px;
 }
-._actions_14vaz_16 > button {
+._actions_13vx0_16 > button {
   margin-left: 0 !important;
   font-size: 1.2em;
   border: 1px solid var(--el-border-color-light) !important;
 }
-._actions_14vaz_16 > button:hover {
+._actions_13vx0_16 > button:hover {
   border-color: var(--el-border-color-dark) !important;
 }
-._remove_14vaz_58 {
+._remove_13vx0_58 {
   transform: translateY(-1px);
 }
-._empty_14vaz_62,
-._loading_14vaz_63 {
-  padding: 4px 8px;
-  display: flex;
-  align-items: center;
-  column-gap: 4px;
-  color: var(--el-text-color-secondary);
-}
-._scrollbar_14vaz_71 {
+._scrollbar_13vx0_62 {
   margin: 0 -8px;
 }
 /* source: src/components/explorer-modal-form/explorer-modal-form.vue */
@@ -806,46 +798,56 @@ div._table_1vtct_1 {
   margin-left: 0;
 }
 /* source: src/components/explorer-table/explorer-table.vue */
-._explorer-table_1dvo4_1 {
+._explorer-table_1bdji_1 {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
 }
-div._table_1dvo4_7 {
+div._table_1bdji_7 {
   flex-grow: 1;
   height: 100px;
   --el-table-header-bg-color: var(--el-color-info-light-9);
   --el-table-row-hover-bg-color: var(--vc-highlight-bg-color, var(--el-fill-color-light));
 }
-div._table_1dvo4_7 .el-scrollbar__view {
+div._table_1bdji_7 .el-scrollbar__view {
   min-height: 100%;
   height: 100px;
 }
-div._table_1dvo4_7 .el-table__header-wrapper .el-table__cell:hover {
+div._table_1bdji_7 .el-table__header-wrapper .el-table__cell:hover {
   border-right-color: var(--el-color-primary-light-5) !important;
 }
-div._table_1dvo4_7 .el-table__column-resize-proxy {
+div._table_1bdji_7 .el-table__column-resize-proxy {
   border-color: var(--el-color-primary);
 }
-div._table_1dvo4_7 .el-table__empty-block {
-  display: var(--dc3c53f8);
+div._table_1bdji_7 .el-table__empty-block {
+  display: var(--v674feb49);
 }
-._selection_1dvo4_27 .cell {
+._selection_1bdji_27 .cell {
   display: flex;
   align-items: center;
 }
-._radio_1dvo4_32 {
+._radio_1bdji_32 {
   height: unset;
 }
-._radio_1dvo4_32 .el-radio__label {
+._radio_1bdji_32 .el-radio__label {
   display: none;
 }
-._checkbox_1dvo4_39 {
-  height: unset;
+._checkbox_1bdji_39 {
+  height: unset !important;
 }
-._selected-row_1dvo4_43 td.el-table__cell {
+._selected-row_1bdji_43 td.el-table__cell {
   background-color: var(--vc-highlight-bg-color, var(--el-fill-color-light)) !important;
 }
+._status-text_1bdji_47 {
+  padding: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  column-gap: 4px;
+}
+._sentinel_1bdji_55 {
+  height: 0;
+}
 /* source: src/components/explorer-tools/components/column-setter.vue,src/components/explorer-tools/explorer-tools.vue */
 ._header_8k9xf_1 {
   display: flex;
@@ -1381,25 +1383,39 @@ div._input-width_wnpjs_1 {
   fill: currentcolor;
 }
 /* source: src/components/scrollbar/scrollbar.vue */
-._scrollbar_edxkl_1 {
+._scrollbar_1gbhe_1 {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
 }
-._scrollbar_edxkl_1 > .el-scrollbar__wrap {
+._scrollbar_1gbhe_1 > .el-scrollbar__wrap {
   flex-grow: 1;
   flex-direction: column;
   display: flex;
 }
-._scrollbar_edxkl_1 > .el-scrollbar__wrap > .el-scrollbar__view {
+._scrollbar_1gbhe_1 > .el-scrollbar__wrap > .el-scrollbar__view {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  margin: var(--v0912858a);
+  margin: var(--d31e596a);
 }
-._fill-height_edxkl_18 {
+._fill-height_1gbhe_18 {
   height: 10px;
 }
+._sentinel_1gbhe_22 {
+  height: auto;
+}
+._loading_1gbhe_26 {
+  padding: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  column-gap: 4px;
+}
+._status-text_1gbhe_34 {
+  padding: 12px;
+  text-align: center;
+}
 /* source: src/components/select/select.vue */
 ._popper_jk1e7_1 .el-select-dropdown__item.is-hovering {
   background-color: var(--vc-highlight-bg-color, var(--el-fill-color-light));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wfrog/vc-ui",
-  "version": "1.13.0",
+  "version": "1.13.2",
   "packageManager": "pnpm@10.20.0",
   "description": "vue3 组件库 vc-ui",
   "author": "wellfrog",