@wfrog/vc-ui 1.11.2 → 1.11.3

package/dist/es/components/explorer-container/explorer-container.d.ts

@@ -1,5 +1,13 @@
+import { ScrollbarDirection, ScrollbarProps } from 'element-plus';
 export interface IExplorerContainerProps {
     title: string;
     icon?: string;
     loading?: boolean;
+    scrollbarProps?: Partial<ScrollbarProps> & {
+        onEndReached?: (direction: ScrollbarDirection) => void;
+        onScroll?: ({ scrollTop, scrollLeft }: {
+            scrollTop: number;
+            scrollLeft: number;
+        }) => void;
+    };
 }

package/dist/es/components/explorer-container/explorer-container.mjs

@@ -1,7 +1,7 @@
 import './index.css'
 import '../../chunk/Gk1J52Yw.mjs';
 import { v as vLoading } from '../../chunk/BTSSEFfD.mjs';
-import { defineComponent, withDirectives, createElementBlock, openBlock, normalizeClass, createElementVNode, createVNode, createCommentVNode, createBlock, renderSlot, createTextVNode, toDisplayString, withCtx } from 'vue';
+import { defineComponent, withDirectives, createElementBlock, openBlock, normalizeClass, createElementVNode, createVNode, createCommentVNode, createBlock, renderSlot, createTextVNode, toDisplayString, mergeProps, withCtx } from 'vue';
 import { C as Component$1 } from '../iconify-icon/iconify-icon.mjs';
 import { C as Component$2 } from '../scrollbar/scrollbar.mjs';
 import { _ as _export_sfc } from '../../chunk/pcqpp-6-.mjs';
@@ -11,7 +11,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   props: {
     title: {},
     icon: { default: "carbon:information-square" },
-    loading: { type: Boolean, default: false }
+    loading: { type: Boolean, default: false },
+    scrollbarProps: {}
   },
   setup(__props) {
     return (_ctx, _cache) => {
@@ -41,15 +42,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             renderSlot(_ctx.$slots, "action")
           ], 2)) : createCommentVNode("", true)
         ], 2),
-        createVNode(Component$2, {
+        createVNode(Component$2, mergeProps({
           always: "",
-          class: normalizeClass(_ctx.$style.scrollbar)
-        }, {
+          class: _ctx.$style.scrollbar
+        }, __props.scrollbarProps), {
           default: withCtx(() => [
             renderSlot(_ctx.$slots, "default")
           ]),
           _: 3
-        }, 8, ["class"])
+        }, 16, ["class"])
       ], 2)), [
         [_directive_loading, __props.loading]
       ]);

package/dist/es/components/explorer-table/explorer-table.d.ts

@@ -3,7 +3,8 @@ import { IColumnConfig } from '../explorer-column-table/explorer-column-table';
 export interface IExplorerTableProps {
     data: any[];
     selection?: boolean;
-    singleSelection?: boolean;
+    customSelection?: 'radio' | 'checkbox';
+    multipleCheckedKey?: string;
     index?: boolean;
     highlightCurrent?: boolean;
     emptyText?: string;
@@ -18,6 +19,7 @@ export interface IExplorerTableProps {
 }
 export interface IExplorerTableEmits {
     (e: 'columnEvent', column: IColumnConfig, row: Record<string, any>, value: Record<string, any>): void;
-    (e: 'singleSelect', row: Record<string, any>): void;
+    (e: 'singleSelectionChange', row: Record<string, any>): void;
+    (e: 'multipleSelectionChange', row: Record<string, any>, values: Array<string | number>): void;
     (e: 'selectionChange', rows: Record<string, any>[]): void;
 }

package/dist/es/components/explorer-table/explorer-table.mjs

@@ -7,7 +7,7 @@ import '../../chunk/NsldgdCh.mjs';
 import '../../chunk/CoGexPPD.mjs';
 import '../../chunk/CjLR27-a.mjs';
 import { defineComponent, h, useCssModule, useTemplateRef, computed, ref, watch, withDirectives, createElementBlock, openBlock, normalizeClass, unref, createVNode, mergeProps, createSlots, withCtx, createBlock, createCommentVNode, renderSlot, withModifiers, isRef, Fragment, renderList, createTextVNode, toDisplayString, resolveDynamicComponent } from 'vue';
-import { ElTableColumn, ElRadio } from 'element-plus';
+import { ElTableColumn, ElRadio, ElCheckbox } from 'element-plus';
 import { i as injectExplorerPanelState } from '../explorer-panel/explorer-panel2.mjs';
 import { _ as _export_sfc } from '../../chunk/pcqpp-6-.mjs';
 
@@ -18,7 +18,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   props: {
     data: {},
     selection: { type: Boolean },
-    singleSelection: { type: Boolean },
+    customSelection: {},
+    multipleCheckedKey: { default: "checked" },
     index: { type: Boolean },
     highlightCurrent: { type: Boolean, default: false },
     emptyText: { default: "没有数据" },
@@ -31,7 +32,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     startIndex: { default: 0 },
     rowKey: { type: [String, Function], default: "id" }
   },
-  emits: ["columnEvent", "singleSelect", "selectionChange"],
+  emits: ["columnEvent", "singleSelectionChange", "multipleSelectionChange", "selectionChange"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emits = __emit;
@@ -41,6 +42,35 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const columns = computed(() => state.columnConfig.value.filter((item) => item.visible !== false));
     const selectedValue = ref();
     const selectedValues = ref(/* @__PURE__ */ new Set());
+    const isSingleSelection = computed(() => props.customSelection === "radio");
+    const isMultipleSelection = computed(() => props.customSelection === "checkbox");
+    const isSelectedAll = computed({
+      get() {
+        if (!isMultipleSelection.value) {
+          return false;
+        }
+        return selectedValues.value.size === props.data.length;
+      },
+      set(val) {
+        if (!isMultipleSelection.value) {
+          return;
+        }
+        if (val) {
+          selectedValues.value = new Set(props.data.map(getRowValue));
+        } else {
+          selectedValues.value.clear();
+        }
+        props.data.forEach((row) => {
+          row.checked = val;
+        });
+      }
+    });
+    const indeterminate = computed(() => {
+      if (!isMultipleSelection.value) {
+        return false;
+      }
+      return selectedValues.value.size > 0 && selectedValues.value.size < props.data.length;
+    });
     function getRowValue(row) {
       if (!row || !props.rowKey)
         return void 0;
@@ -56,12 +86,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const value = getRowValue(row);
       if (selectedValue.value !== value) {
         selectedValue.value = value;
-        emits("singleSelect", row);
+        emits("singleSelectionChange", row);
       }
     }
-    function handleSelectionChange(selection) {
-      selectedValues.value = new Set(selection.map((item) => getRowValue(item)));
-      emits("selectionChange", selection);
+    function handleCheckboxClick(row) {
+      const value = getRowValue(row);
+      const checked = !row[props.multipleCheckedKey];
+      checked ? selectedValues.value.add(value) : selectedValues.value.delete(value);
+      emits("multipleSelectionChange", row, Array.from(selectedValues.value));
     }
     function columnType(item) {
       if (item.prop.startsWith("expand")) {
@@ -102,6 +134,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       setSelectedValues: (values) => {
         selectedValues.value = new Set(values);
       },
+      selectAll: () => {
+        isSelectedAll.value = true;
+      },
+      clearSelection: () => {
+        isSelectedAll.value = false;
+      },
       tableRef
     });
     return (_ctx, _cache) => {
@@ -124,8 +162,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           "allow-drag-last-column": true,
           "row-key": __props.rowKey,
           "row-class-name": rowClassName,
-          onHeaderDragend,
-          onSelectionChange: handleSelectionChange
+          onHeaderDragend
         }), createSlots({
           empty: withCtx(() => [
             !__props.loading && !__props.pending ? (openBlock(), createElementBlock("div", _hoisted_1, toDisplayString(__props.emptyText), 1)) : (openBlock(), createElementBlock("div", _hoisted_2))
@@ -137,23 +174,44 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               width: __props.size === "large" ? 50 : 40,
               align: "center"
             }, null, 8, ["width"])) : createCommentVNode("", true),
-            __props.singleSelection ? (openBlock(), createBlock(unref(ElTableColumn), {
+            __props.customSelection ? (openBlock(), createBlock(unref(ElTableColumn), {
               key: 1,
               width: __props.size === "large" ? 50 : 40,
               align: "center",
               fixed: "left"
-            }, {
+            }, createSlots({
               default: withCtx(({ row }) => [
-                createVNode(unref(ElRadio), {
+                unref(isSingleSelection) ? (openBlock(), createBlock(unref(ElRadio), {
+                  key: 0,
                   modelValue: unref(selectedValue),
-                  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(selectedValue) ? selectedValue.value = $event : null),
+                  "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(selectedValue) ? selectedValue.value = $event : null),
                   value: getRowValue(row),
                   class: normalizeClass(unref($style).radio),
                   onClick: withModifiers(($event) => handleRadioClick(row), ["stop"])
-                }, null, 8, ["modelValue", "value", "class", "onClick"])
+                }, null, 8, ["modelValue", "value", "class", "onClick"])) : createCommentVNode("", true),
+                unref(isMultipleSelection) ? (openBlock(), createBlock(unref(ElCheckbox), {
+                  key: 1,
+                  modelValue: row[__props.multipleCheckedKey],
+                  "onUpdate:modelValue": ($event) => row[__props.multipleCheckedKey] = $event,
+                  class: normalizeClass(unref($style).checkbox),
+                  onClick: withModifiers(($event) => handleCheckboxClick(row), ["stop"])
+                }, null, 8, ["modelValue", "onUpdate:modelValue", "class", "onClick"])) : createCommentVNode("", true)
               ]),
-              _: 1
-            }, 8, ["width"])) : createCommentVNode("", true),
+              _: 2
+            }, [
+              unref(isMultipleSelection) ? {
+                name: "header",
+                fn: withCtx(() => [
+                  createVNode(unref(ElCheckbox), {
+                    modelValue: unref(isSelectedAll),
+                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(isSelectedAll) ? isSelectedAll.value = $event : null),
+                    indeterminate: unref(indeterminate),
+                    class: normalizeClass(unref($style).checkbox)
+                  }, null, 8, ["modelValue", "indeterminate", "class"])
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1032, ["width"])) : createCommentVNode("", true),
             unref(columns).length ? (openBlock(true), createElementBlock(Fragment, { key: 2 }, renderList(unref(columns), (item) => {
               return openBlock(), createBlock(unref(ElTableColumn), mergeProps({
                 key: item.prop
@@ -212,13 +270,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   }
 });
 
-/* unplugin-vue-components disabled */const table = "_table_1adx5_7";
-const radio = "_radio_1adx5_20";
+/* unplugin-vue-components disabled */const table = "_table_t83pa_7";
+const radio = "_radio_t83pa_20";
+const checkbox = "_checkbox_t83pa_27";
 const style0 = {
-	"explorer-table": "_explorer-table_1adx5_1",
+	"explorer-table": "_explorer-table_t83pa_1",
 	table: table,
 	radio: radio,
-	"selected-row": "_selected-row_1adx5_27"
+	checkbox: checkbox,
+	"selected-row": "_selected-row_t83pa_31"
 };
 
 const cssModules = {

package/dist/es/components/explorer-table/explorer-table.vue.d.ts

@@ -1492,6 +1492,8 @@ declare const __VLS_component: import('vue').DefineComponent<IExplorerTableProps
     setColumns: (columns: IColumnConfig[]) => void;
     setSelectedValue: (value: any) => void;
     setSelectedValues: (values: any[]) => void;
+    selectAll: () => void;
+    clearSelection: () => void;
     tableRef: Readonly<globalThis.ShallowRef<import('vue').CreateComponentPublicInstanceWithMixins<Readonly<globalThis.ExtractPropTypes<{
         data: {
             type: import('vue').PropType<any[]>;
@@ -2964,11 +2966,13 @@ declare const __VLS_component: import('vue').DefineComponent<IExplorerTableProps
     }> | null>>;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     columnEvent: (column: IColumnConfig, row: Record<string, any>, value: Record<string, any>) => any;
-    singleSelect: (row: Record<string, any>) => any;
+    singleSelectionChange: (row: Record<string, any>) => any;
+    multipleSelectionChange: (row: Record<string, any>, values: (string | number)[]) => any;
     selectionChange: (rows: Record<string, any>[]) => any;
 }, string, import('vue').PublicProps, Readonly<IExplorerTableProps> & Readonly<{
     onColumnEvent?: ((column: IColumnConfig, row: Record<string, any>, value: Record<string, any>) => any) | undefined;
-    onSingleSelect?: ((row: Record<string, any>) => any) | undefined;
+    onSingleSelectionChange?: ((row: Record<string, any>) => any) | undefined;
+    onMultipleSelectionChange?: ((row: Record<string, any>, values: (string | number)[]) => any) | undefined;
     onSelectionChange?: ((rows: Record<string, any>[]) => any) | undefined;
 }>, {
     loading: boolean;
@@ -2976,6 +2980,7 @@ declare const __VLS_component: import('vue').DefineComponent<IExplorerTableProps
     emptyText: string;
     highlightCurrent: boolean;
     rowKey: string | ((row: any) => string);
+    multipleCheckedKey: string;
     columnRender: (column: IColumnConfig, row: Record<string, any>, emits: IExplorerTableEmits, index: number) => VNode;
     startIndex: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {

package/dist/es/components/explorer-table/index.css

@@ -1,27 +1,30 @@
 /* source: src/components/explorer-table/explorer-table.vue */
-._explorer-table_1adx5_1 {
+._explorer-table_t83pa_1 {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
 }
-div._table_1adx5_7 {
+div._table_t83pa_7 {
   flex-grow: 1;
   height: 100px;
   --el-table-header-bg-color: var(--el-color-info-light-9);
   --el-table-row-hover-bg-color: var(--el-color-primary-light-9);
 }
-div._table_1adx5_7 .el-table__header-wrapper .el-table__cell:hover {
+div._table_t83pa_7 .el-table__header-wrapper .el-table__cell:hover {
   border-right-color: var(--el-color-primary-light-5) !important;
 }
-div._table_1adx5_7 .el-table__column-resize-proxy {
+div._table_t83pa_7 .el-table__column-resize-proxy {
   border-color: var(--el-color-primary);
 }
-._radio_1adx5_20 {
+._radio_t83pa_20 {
   height: unset;
 }
-._radio_1adx5_20 .el-radio__label {
+._radio_t83pa_20 .el-radio__label {
   display: none;
 }
-._selected-row_1adx5_27 td.el-table__cell {
+._checkbox_t83pa_27 {
+  height: unset;
+}
+._selected-row_t83pa_31 td.el-table__cell {
   background-color: var(--el-color-primary-light-9) !important;
 }

package/dist/es/index.mjs

@@ -160,7 +160,7 @@ const __vite_glob_0_49 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.definePr
     default: _sfc_main$8
 }, Symbol.toStringTag, { value: 'Module' }));
 
-const version = "1.11.2";
+const version = "1.11.3";
 
 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/icon-picker/icon-picker.vue": __vite_glob_0_35,"./components/icon/icon.vue": __vite_glob_0_36,"./components/iconify-icon/iconify-icon.vue": __vite_glob_0_37,"./components/image/image.vue": __vite_glob_0_38,"./components/info-tooltip/info-tooltip.vue": __vite_glob_0_39,"./components/input-number/input-number.vue": __vite_glob_0_40,"./components/input/input.vue": __vite_glob_0_41,"./components/pca-picker/pca-picker.vue": __vite_glob_0_42,"./components/qr-code/qr-code.vue": __vite_glob_0_43,"./components/screenfull/screenfull.vue": __vite_glob_0_44,"./components/scrollbar/scrollbar.vue": __vite_glob_0_45,"./components/select/select.vue": __vite_glob_0_46,"./components/single-player/single-player.vue": __vite_glob_0_47,"./components/splitter-panel/splitter-panel.vue": __vite_glob_0_48,"./components/splitter/splitter.vue": __vite_glob_0_49,"./components/svg-icon/svg-icon.vue": __vite_glob_0_50,"./components/switch/switch.vue": __vite_glob_0_51,"./components/sync-scroll-container/sync-scroll-container.vue": __vite_glob_0_52,"./components/tags/tags.vue": __vite_glob_0_53,"./components/text-ellipsis/text-ellipsis.vue": __vite_glob_0_54,"./components/thousand-input/thousand-input.vue": __vite_glob_0_55,"./components/tinymce/tinymce.vue": __vite_glob_0_56,"./components/transfer-panel/transfer-panel.vue": __vite_glob_0_57,"./components/transfer/transfer.vue": __vite_glob_0_58,"./components/tree-picker/tree-picker.vue": __vite_glob_0_59,"./components/upload-file/upload-file.vue": __vite_glob_0_60});
 const upper = (_, letter) => letter.toUpperCase();

package/dist/index.css

@@ -833,30 +833,33 @@ div._main_k37nc_1 ._header_k37nc_48 {
   margin-left: 0;
 }
 /* source: src/components/explorer-table/explorer-table.vue */
-._explorer-table_1adx5_1 {
+._explorer-table_t83pa_1 {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
 }
-div._table_1adx5_7 {
+div._table_t83pa_7 {
   flex-grow: 1;
   height: 100px;
   --el-table-header-bg-color: var(--el-color-info-light-9);
   --el-table-row-hover-bg-color: var(--el-color-primary-light-9);
 }
-div._table_1adx5_7 .el-table__header-wrapper .el-table__cell:hover {
+div._table_t83pa_7 .el-table__header-wrapper .el-table__cell:hover {
   border-right-color: var(--el-color-primary-light-5) !important;
 }
-div._table_1adx5_7 .el-table__column-resize-proxy {
+div._table_t83pa_7 .el-table__column-resize-proxy {
   border-color: var(--el-color-primary);
 }
-._radio_1adx5_20 {
+._radio_t83pa_20 {
   height: unset;
 }
-._radio_1adx5_20 .el-radio__label {
+._radio_t83pa_20 .el-radio__label {
   display: none;
 }
-._selected-row_1adx5_27 td.el-table__cell {
+._checkbox_t83pa_27 {
+  height: unset;
+}
+._selected-row_t83pa_31 td.el-table__cell {
   background-color: var(--el-color-primary-light-9) !important;
 }
 /* source: src/components/explorer-tools/components/column-setter.vue,src/components/explorer-tools/explorer-tools.vue */

package/package.json

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