yc-pro-components 0.0.75 → 0.0.77

package/index.js

@@ -1,4 +1,4 @@
-/*! yc-pro-components v0.0.75 */
+/*! yc-pro-components v0.0.77 */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('element-plus')) :
   typeof define === 'function' && define.amd ? define(['exports', 'vue', 'element-plus'], factory) :
@@ -8616,6 +8616,204 @@
     vue.provide(DictStoreInjectionKey, dictStore);
   }
 
+  const DEFAULT_RESIZE_AREA_WIDTH = 12;
+  const DEFAULT_BORDER_COLOR = "var(--theme-color)";
+  const DEFAULT_SCROLL_SELECTOR = ".el-scrollbar__wrap";
+  function useTableDragScroll(wrapperRef, tableRef, options = {}) {
+    var _a, _b, _c;
+    const resizeAreaWidth = (_a = options.resizeAreaWidth) != null ? _a : DEFAULT_RESIZE_AREA_WIDTH;
+    const borderColor = (_b = options.resizeBorderColor) != null ? _b : DEFAULT_BORDER_COLOR;
+    const scrollSelector = (_c = options.scrollContainerSelector) != null ? _c : DEFAULT_SCROLL_SELECTOR;
+    const isDragging = vue.ref(false);
+    const isResizing = vue.ref(false);
+    const startX = vue.ref(0);
+    const scrollLeft = vue.ref(0);
+    const scrollContainer = vue.ref(null);
+    const isEnabled = () => {
+      const enabled = options.enabled;
+      if (enabled === void 0) return true;
+      if (typeof enabled === "boolean") return enabled;
+      return enabled.value;
+    };
+    const getTableEl = () => {
+      var _a2;
+      const fromRef = (_a2 = tableRef == null ? void 0 : tableRef.value) == null ? void 0 : _a2.$el;
+      if (fromRef) return fromRef;
+      const wrapper = wrapperRef.value;
+      if (!wrapper) return null;
+      return wrapper.querySelector(".el-table");
+    };
+    const refreshScrollContainer = () => {
+      const tableEl = getTableEl();
+      if (tableEl) {
+        scrollContainer.value = tableEl.querySelector(scrollSelector);
+      }
+    };
+    const isInsideTable = (e) => {
+      const tableEl = getTableEl();
+      if (!tableEl) return false;
+      const target = e.target;
+      return !!target && tableEl.contains(target);
+    };
+    const isInResizeArea = (e, th) => {
+      const rect = th.getBoundingClientRect();
+      const mouseX = e.clientX;
+      return mouseX >= rect.right - resizeAreaWidth && mouseX <= rect.right + 4;
+    };
+    const getCurrentColumn = (e) => {
+      var _a2;
+      let current = e.target;
+      while (current && ((_a2 = current.tagName) == null ? void 0 : _a2.toLowerCase()) !== "th") {
+        current = current.parentElement;
+        if (!current || current === wrapperRef.value) return null;
+      }
+      return current;
+    };
+    const clearAllHeaderStyles = () => {
+      const tableEl = getTableEl();
+      if (!tableEl) return;
+      const headers = tableEl.querySelectorAll("th");
+      headers.forEach((header) => {
+        const h = header;
+        h.style.borderRight = "";
+        h.style.cursor = "";
+      });
+    };
+    const onMouseDown = (e) => {
+      if (!isEnabled()) return;
+      if (!isInsideTable(e)) return;
+      if (!scrollContainer.value) {
+        refreshScrollContainer();
+        if (!scrollContainer.value) return;
+      }
+      const target = e.target;
+      const column = getCurrentColumn(e);
+      if (column && isInResizeArea(e, column)) {
+        isDragging.value = false;
+        isResizing.value = true;
+        return;
+      }
+      if (target.classList.contains("noclick")) {
+        isDragging.value = false;
+        isResizing.value = true;
+        return;
+      }
+      isDragging.value = true;
+      isResizing.value = false;
+      startX.value = e.clientX;
+      scrollLeft.value = scrollContainer.value.scrollLeft;
+      if (wrapperRef.value) {
+        wrapperRef.value.style.cursor = "";
+      }
+      target.style.cursor = "";
+    };
+    const onMouseMove = (e) => {
+      var _a2, _b2, _c2;
+      if (!isEnabled()) return;
+      const target = e.target;
+      const parentElement = target.parentElement;
+      const insideTable = isInsideTable(e);
+      if (!insideTable) {
+        if (wrapperRef.value) {
+          wrapperRef.value.style.cursor = "";
+        }
+        if (isDragging.value && scrollContainer.value) {
+          const deltaX2 = e.clientX - startX.value;
+          scrollContainer.value.scrollLeft = scrollLeft.value - deltaX2;
+        }
+        return;
+      }
+      if (target.classList.contains("drag-disabled")) {
+        target.style.cursor = "pointer";
+        return;
+      }
+      const column = getCurrentColumn(e);
+      if (column) {
+        const allHeaders = (_a2 = column.parentElement) == null ? void 0 : _a2.querySelectorAll("th");
+        if (isInResizeArea(e, column)) {
+          isDragging.value = false;
+          isResizing.value = true;
+          column.style.borderRight = `2px solid ${borderColor}`;
+          allHeaders == null ? void 0 : allHeaders.forEach((header) => {
+            const h = header;
+            if (h !== column) {
+              h.style.borderRight = "";
+              h.style.cursor = "";
+            }
+          });
+          return;
+        } else {
+          allHeaders == null ? void 0 : allHeaders.forEach((header) => {
+            const h = header;
+            h.style.borderRight = "";
+            h.style.cursor = "";
+          });
+          isResizing.value = false;
+        }
+      }
+      if (target.classList.contains("noclick") || target.classList.contains("el-table__column-resize-proxy")) {
+        isDragging.value = false;
+        isResizing.value = true;
+        return;
+      }
+      if (isResizing.value || ((_b2 = parentElement == null ? void 0 : parentElement.tagName) == null ? void 0 : _b2.toLowerCase()) === "th" || ((_c2 = target.tagName) == null ? void 0 : _c2.toLowerCase()) === "th") {
+        isDragging.value = false;
+        return;
+      }
+      if (target.classList.contains("edit-icon")) {
+        target.style.cursor = "pointer";
+        return;
+      }
+      isResizing.value = false;
+      target.style.cursor = "";
+      if (wrapperRef.value) {
+        wrapperRef.value.style.cursor = "grab";
+      }
+      if (!isDragging.value || !scrollContainer.value) return;
+      const deltaX = e.clientX - startX.value;
+      scrollContainer.value.scrollLeft = scrollLeft.value - deltaX;
+    };
+    const onMouseUp = () => {
+      isDragging.value = false;
+      isResizing.value = false;
+      if (wrapperRef.value) {
+        wrapperRef.value.style.cursor = "";
+      }
+      clearAllHeaderStyles();
+    };
+    const onTableBodyOver = () => {
+      const ths = document.querySelectorAll(".el-table__header th");
+      ths.forEach((th) => {
+        const h = th;
+        h.style.borderRight = "";
+        h.style.cursor = "";
+      });
+    };
+    let tableBodyEl = null;
+    vue.onMounted(() => {
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
+      requestAnimationFrame(() => {
+        var _a2;
+        refreshScrollContainer();
+        const tableEl = getTableEl();
+        tableBodyEl = (_a2 = tableEl == null ? void 0 : tableEl.querySelector(".el-table__body")) != null ? _a2 : null;
+        tableBodyEl == null ? void 0 : tableBodyEl.addEventListener("mouseover", onTableBodyOver);
+      });
+    });
+    vue.onBeforeUnmount(() => {
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+      tableBodyEl == null ? void 0 : tableBodyEl.removeEventListener("mouseover", onTableBodyOver);
+    });
+    return {
+      onMouseDown,
+      isDragging,
+      isResizing,
+      refreshScrollContainer
+    };
+  }
+
   const _hoisted_1$v = { class: "plus-dialog-body" };
   var _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
     ...{
@@ -18340,11 +18538,12 @@
 
   const PlusPopover = Popover;
 
+  const _withScopeId$4 = (n) => (vue.pushScopeId("data-v-d1506155"), n = n(), vue.popScopeId(), n);
   const _hoisted_1$k = { class: "plus-table-title-bar" };
   const _hoisted_2$e = { class: "plus-table-title-bar__title" };
   const _hoisted_3$c = { class: "plus-table-title-bar__toolbar" };
   const _hoisted_4$a = { class: "plus-table-title-bar__toolbar__density" };
-  const _hoisted_5$9 = /* @__PURE__ */ vue.createElementVNode(
+  const _hoisted_5$9 = /* @__PURE__ */ _withScopeId$4(() => /* @__PURE__ */ vue.createElementVNode(
     "svg",
     {
       viewBox: "0 0 1024 1024",
@@ -18358,14 +18557,15 @@
     ],
     -1
     /* HOISTED */
-  );
+  ));
   const _hoisted_6$7 = { class: "plus-table-checkbox-checkAll" };
-  const _hoisted_7$5 = {
+  const _hoisted_7$5 = { class: "plus-table-checkbox-actions" };
+  const _hoisted_8$4 = {
     key: 0,
     class: "plus-table-checkbox-handle"
   };
-  const _hoisted_8$4 = { key: 1 };
   const _hoisted_9$4 = { key: 1 };
+  const _hoisted_10$3 = { key: 1 };
   var _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "PlusTableToolbar"
@@ -18405,6 +18605,12 @@
         var _a;
         return ((_a = columnSetting.value) == null ? void 0 : _a.overflowLabelLength) || 6;
       });
+      const confirmTextValue = vue.computed(
+        () => {
+          var _a;
+          return ((_a = columnSetting.value) == null ? void 0 : _a.confirmText) || String(t("plus.table.confirmText"));
+        }
+      );
       const sortable = vue.ref(null);
       const buttonNameDensity = [
         {
@@ -18426,6 +18632,20 @@
         }
         return props.columns.filter((item) => vue.unref(item.headerIsChecked) !== false).map((item) => getTableKey(item));
       };
+      const buildFilterColumns = () => {
+        return props.columns.map((item) => {
+          if (state.checkList.includes(getTableKey(item))) {
+            return { ...item, headerIsChecked: true };
+          }
+          return { ...item, headerIsChecked: false };
+        });
+      };
+      const buildConfirmPayload = () => {
+        const columns = buildFilterColumns();
+        const order = columns.map((item) => String(item.prop || "")).filter(Boolean);
+        const checked = columns.filter((item) => item.headerIsChecked !== false).map((item) => String(item.prop || "")).filter(Boolean);
+        return { columns, order, checked };
+      };
       const state = vue.reactive({
         checkAll: true,
         isIndeterminate: false,
@@ -18454,13 +18674,11 @@
         handleFilterTableConfirm("allCheck");
       };
       const handleFilterTableConfirm = (type) => {
-        const filterColumns = props.columns.map((item) => {
-          if (state.checkList.includes(getTableKey(item))) {
-            return { ...item, headerIsChecked: true };
-          }
-          return { ...item, headerIsChecked: false };
-        });
-        emit("filterTableHeader", filterColumns, type);
+        emit("filterTableHeader", buildFilterColumns(), type);
+      };
+      const handleConfirmClick = async () => {
+        var _a, _b;
+        await ((_b = (_a = columnSetting.value) == null ? void 0 : _a.onConfirm) == null ? void 0 : _b.call(_a, buildConfirmPayload()));
       };
       const handleCheckGroupChange = (value) => {
         setCheckAllState(value);
@@ -18525,10 +18743,10 @@
                 1
                 /* TEXT */
               )
-            ])
+            ], true)
           ]),
           vue.createElementVNode("div", _hoisted_3$c, [
-            vue.renderSlot(_ctx.$slots, "toolbar"),
+            vue.renderSlot(_ctx.$slots, "toolbar", {}, void 0, true),
             ((_a = titleBarConfig.value) == null ? void 0 : _a.refresh) === true ? (vue.openBlock(), vue.createElementBlock("span", {
               key: 0,
               class: "plus-table-title-bar__toolbar__refresh",
@@ -18552,7 +18770,7 @@
                       _: 1
                       /* STABLE */
                     }, 8, ["size", "color"])
-                  ])
+                  ], true)
                 ]),
                 _: 3
                 /* FORWARDED */
@@ -18585,7 +18803,7 @@
                         _: 1
                         /* STABLE */
                       }, 8, ["size", "color"])
-                    ])
+                    ], true)
                   ]),
                   _: 3
                   /* FORWARDED */
@@ -18650,14 +18868,14 @@
                         _: 1
                         /* STABLE */
                       }, 8, ["size", "color"])
-                    ])
+                    ], true)
                   ]),
                   _: 3
                   /* FORWARDED */
                 }, 8, ["content"])
               ]),
               default: vue.withCtx(() => {
-                var _a2, _b2, _c2;
+                var _a2, _b2, _c2, _d;
                 return [
                   vue.createElementVNode("div", _hoisted_6$7, [
                     vue.createVNode(vue.unref(elementPlus.ElCheckbox), {
@@ -18676,24 +18894,43 @@
                       _: 1
                       /* STABLE */
                     }, 8, ["modelValue", "indeterminate"]),
-                    ((_a2 = columnSetting.value) == null ? void 0 : _a2.reset) !== false ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElLink), vue.mergeProps({
-                      key: 0,
-                      type: "primary",
-                      underline: vue.unref(versionIsLessThan299) ? false : "never",
-                      href: "javaScript:;"
-                    }, vue.unref(isPlainObject$1)((_b2 = columnSetting.value) == null ? void 0 : _b2.reset) ? (_c2 = columnSetting.value) == null ? void 0 : _c2.reset : {}, {
-                      onClick: vue.withModifiers(resetCheckBoxList, ["stop", "prevent"])
-                    }), {
-                      default: vue.withCtx(() => [
-                        vue.createTextVNode(
-                          vue.toDisplayString(vue.unref(t)("plus.table.resetText")),
-                          1
-                          /* TEXT */
-                        )
-                      ]),
-                      _: 1
-                      /* STABLE */
-                    }, 16, ["underline"])) : vue.createCommentVNode("v-if", true)
+                    vue.createElementVNode("div", _hoisted_7$5, [
+                      ((_a2 = columnSetting.value) == null ? void 0 : _a2.confirm) ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElLink), {
+                        key: 0,
+                        type: "primary",
+                        underline: vue.unref(versionIsLessThan299) ? false : "never",
+                        href: "javaScript:;",
+                        onClick: vue.withModifiers(handleConfirmClick, ["stop", "prevent"])
+                      }, {
+                        default: vue.withCtx(() => [
+                          vue.createTextVNode(
+                            vue.toDisplayString(confirmTextValue.value),
+                            1
+                            /* TEXT */
+                          )
+                        ]),
+                        _: 1
+                        /* STABLE */
+                      }, 8, ["underline"])) : vue.createCommentVNode("v-if", true),
+                      ((_b2 = columnSetting.value) == null ? void 0 : _b2.reset) !== false ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElLink), vue.mergeProps({
+                        key: 1,
+                        type: "primary",
+                        underline: vue.unref(versionIsLessThan299) ? false : "never",
+                        href: "javaScript:;"
+                      }, vue.unref(isPlainObject$1)((_c2 = columnSetting.value) == null ? void 0 : _c2.reset) ? (_d = columnSetting.value) == null ? void 0 : _d.reset : {}, {
+                        onClick: vue.withModifiers(resetCheckBoxList, ["stop", "prevent"])
+                      }), {
+                        default: vue.withCtx(() => [
+                          vue.createTextVNode(
+                            vue.toDisplayString(vue.unref(t)("plus.table.resetText")),
+                            1
+                            /* TEXT */
+                          )
+                        ]),
+                        _: 1
+                        /* STABLE */
+                      }, 16, ["underline"])) : vue.createCommentVNode("v-if", true)
+                    ])
                   ]),
                   vue.createVNode(vue.unref(elementPlus.ElCheckboxGroup), {
                     modelValue: state.checkList,
@@ -18718,10 +18955,10 @@
                                 key: item.prop,
                                 class: "plus-table-checkbox-item"
                               }, [
-                                ((_a3 = columnSetting.value) == null ? void 0 : _a3.dragSort) !== false ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$5, [
+                                ((_a3 = columnSetting.value) == null ? void 0 : _a3.dragSort) !== false ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8$4, [
                                   vue.renderSlot(_ctx.$slots, "drag-sort-icon", {}, () => [
                                     vue.createTextVNode("\u2637")
-                                  ])
+                                  ], true)
                                 ])) : vue.createCommentVNode("v-if", true),
                                 vue.createCommentVNode(" element-plus \u7248\u672C\u53F7\u5C0F\u4E8E2.6.0 "),
                                 vue.unref(versionIsLessThan260) ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElCheckbox), {
@@ -18747,7 +18984,7 @@
                                       /* DYNAMIC */
                                     }, 1032, ["content"])) : (vue.openBlock(), vue.createElementBlock(
                                       "span",
-                                      _hoisted_8$4,
+                                      _hoisted_9$4,
                                       vue.toDisplayString(item.label ? getLabelValue(item.label) : ""),
                                       1
                                       /* TEXT */
@@ -18782,7 +19019,7 @@
                                           /* DYNAMIC */
                                         }, 1032, ["content"])) : (vue.openBlock(), vue.createElementBlock(
                                           "span",
-                                          _hoisted_9$4,
+                                          _hoisted_10$3,
                                           vue.toDisplayString(item.label ? getLabelValue(item.label) : ""),
                                           1
                                           /* TEXT */
@@ -18819,7 +19056,7 @@
     }
   });
 
-  var PlusTableTitleBar = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__file", "table-title-bar.vue"]]);
+  var PlusTableTitleBar = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-d1506155"], ["__file", "table-title-bar.vue"]]);
 
   const _hoisted_1$j = { class: "plus-table-expand-col" };
   var _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
@@ -33170,7 +33407,8 @@
       hideHeaderFilter: { type: Boolean, default: true },
       columnCacheKey: { default: void 0 },
       disableColumnCache: { type: Boolean, default: false },
-      columnSettingsText: { default: void 0 }
+      columnSettingsText: { default: void 0 },
+      dragScroll: { type: [Boolean, Object], default: false }
     },
     emits: ["header-filter-confirm", "header-filter-reset"],
     setup(__props, { expose: __expose, emit: __emit }) {
@@ -33181,6 +33419,21 @@
       const plusPageConfig = useYcComponentConfig("plusPage");
       const plusPageRef = vue.ref();
       const rootRef = vue.ref();
+      const dragScrollWrapperRef = vue.ref(null);
+      const dragScrollEnabled = vue.computed(() => props.dragScroll !== false && props.dragScroll != null);
+      const dragScrollOptions = vue.computed(() => {
+        const value = props.dragScroll;
+        if (value && typeof value === "object") return value;
+        return {};
+      });
+      const { onMouseDown: onDragScrollMouseDown } = useTableDragScroll(
+        dragScrollWrapperRef,
+        void 0,
+        {
+          ...dragScrollOptions.value,
+          enabled: dragScrollEnabled
+        }
+      );
       const plusTableInstance = vue.computed(() => {
         var _a;
         return (_a = plusPageRef.value) == null ? void 0 : _a.plusTableInstance;
@@ -33598,6 +33851,7 @@
       void resolvedColumnSettingsText.value;
       void hasRequest.value;
       void showDefaultColumnSettingsIcon.value;
+      void dragScrollEnabled.value;
       __expose({
         plusPageRef,
         plusTableInstance,
@@ -33655,62 +33909,76 @@
             class: vue.normalizeClass(["yc-plus-page", { "yc-plus-page--borderless": isBorderless.value }])
           },
           [
-            vue.createVNode(vue.unref(PlusPage), vue.mergeProps({
-              ref_key: "plusPageRef",
-              ref: plusPageRef
-            }, { ...props, ..._ctx.$attrs }, {
-              columns: enhancedColumns.value,
-              "is-card": _ctx.isCard,
-              request: wrappedRequest.value,
-              search: mergedSearch.value,
-              "search-card-props": mergedSearchCardProps.value,
-              "table-card-props": mergedTableCardProps.value,
-              table: mergedTable.value,
-              pagination: mergedPagination.value,
-              "default-page-info": { page: 1, pageSize: DEFAULT_PAGE_SIZE },
-              onFilterTableHeader: handleFilterTableHeader,
-              onHeaderDragend: handleHeaderDragend
-            }), vue.createSlots({
-              default: vue.withCtx(() => [
-                vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
-              ]),
-              _: 2
-              /* DYNAMIC */
-            }, [
-              _ctx.$slots["column-settings-icon"] ? {
-                name: "column-settings-icon",
-                fn: vue.withCtx(() => [
-                  vue.renderSlot(_ctx.$slots, "column-settings-icon", {}, void 0, true)
-                ]),
-                key: "0"
-              } : showDefaultColumnSettingsIcon.value ? {
-                name: "column-settings-icon",
-                fn: vue.withCtx(() => [
-                  vue.createElementVNode("div", { class: "column-settings-wrapper" }, [
-                    vue.createVNode(vue.unref(YcSvgIcon), {
-                      src: fieldSettingIconUrl.value,
-                      size: 16
-                    }, null, 8, ["src"]),
-                    vue.createElementVNode(
-                      "span",
-                      { class: "column-settings-text" },
-                      vue.toDisplayString(resolvedColumnSettingsText.value),
-                      1
-                      /* TEXT */
-                    )
-                  ])
-                ]),
-                key: "1"
-              } : void 0,
-              vue.renderList(_ctx.$slots, (_, name) => {
-                return {
-                  name,
-                  fn: vue.withCtx((slotProps) => [
-                    name !== "column-settings-icon" && name !== "default" ? vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.mergeProps({ key: 0 }, slotProps)), void 0, true) : vue.createCommentVNode("v-if", true)
-                  ])
-                };
-              })
-            ]), 1040, ["columns", "is-card", "request", "search", "search-card-props", "table-card-props", "table", "pagination", "default-page-info"])
+            vue.createCommentVNode(" \u62D6\u62FD\u6EDA\u52A8\u5305\u88F9\u5C42\uFF1AdragScroll \u542F\u7528\u65F6\u4ECB\u5165\uFF0C\u4F46\u59CB\u7EC8\u4FDD\u7559 ref\uFF0C\n         \u4EE5\u4FDD\u8BC1 mousedown \u900F\u4F20 + hook \u5185\u90E8 DOM \u67E5\u8BE2\u6B63\u5E38 "),
+            vue.createElementVNode(
+              "div",
+              {
+                ref_key: "dragScrollWrapperRef",
+                ref: dragScrollWrapperRef,
+                class: vue.normalizeClass(["yc-plus-page__drag-wrapper", { "yc-plus-page__drag-wrapper--enabled": dragScrollEnabled.value }]),
+                onMousedown: _cache[0] || (_cache[0] = ($event) => dragScrollEnabled.value ? vue.unref(onDragScrollMouseDown)($event) : void 0)
+              },
+              [
+                vue.createVNode(vue.unref(PlusPage), vue.mergeProps({
+                  ref_key: "plusPageRef",
+                  ref: plusPageRef
+                }, { ...props, ..._ctx.$attrs }, {
+                  columns: enhancedColumns.value,
+                  "is-card": _ctx.isCard,
+                  request: wrappedRequest.value,
+                  search: mergedSearch.value,
+                  "search-card-props": mergedSearchCardProps.value,
+                  "table-card-props": mergedTableCardProps.value,
+                  table: mergedTable.value,
+                  pagination: mergedPagination.value,
+                  "default-page-info": { page: 1, pageSize: DEFAULT_PAGE_SIZE },
+                  onFilterTableHeader: handleFilterTableHeader,
+                  onHeaderDragend: handleHeaderDragend
+                }), vue.createSlots({
+                  default: vue.withCtx(() => [
+                    vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
+                  ]),
+                  _: 2
+                  /* DYNAMIC */
+                }, [
+                  _ctx.$slots["column-settings-icon"] ? {
+                    name: "column-settings-icon",
+                    fn: vue.withCtx(() => [
+                      vue.renderSlot(_ctx.$slots, "column-settings-icon", {}, void 0, true)
+                    ]),
+                    key: "0"
+                  } : showDefaultColumnSettingsIcon.value ? {
+                    name: "column-settings-icon",
+                    fn: vue.withCtx(() => [
+                      vue.createElementVNode("div", { class: "column-settings-wrapper" }, [
+                        vue.createVNode(vue.unref(YcSvgIcon), {
+                          src: fieldSettingIconUrl.value,
+                          size: 16
+                        }, null, 8, ["src"]),
+                        vue.createElementVNode(
+                          "span",
+                          { class: "column-settings-text" },
+                          vue.toDisplayString(resolvedColumnSettingsText.value),
+                          1
+                          /* TEXT */
+                        )
+                      ])
+                    ]),
+                    key: "1"
+                  } : void 0,
+                  vue.renderList(_ctx.$slots, (_, name) => {
+                    return {
+                      name,
+                      fn: vue.withCtx((slotProps) => [
+                        name !== "column-settings-icon" && name !== "default" ? vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.mergeProps({ key: 0 }, slotProps)), void 0, true) : vue.createCommentVNode("v-if", true)
+                      ])
+                    };
+                  })
+                ]), 1040, ["columns", "is-card", "request", "search", "search-card-props", "table-card-props", "table", "pagination", "default-page-info"])
+              ],
+              34
+              /* CLASS, NEED_HYDRATION */
+            )
           ],
           2
           /* CLASS */
@@ -33719,7 +33987,7 @@
     }
   });
 
-  var YcPlusPageComponent = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-73380467"], ["__file", "index.vue"]]);
+  var YcPlusPageComponent = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-3ce473db"], ["__file", "index.vue"]]);
 
   function compareValues(a, b) {
     if (a == null && b == null) return 0;
@@ -60379,8 +60647,7 @@
     drawerStore.value = [];
   };
 
-  const import_meta = {};
-  const _withScopeId$3 = (n) => (vue.pushScopeId("data-v-eb9ddafc"), n = n(), vue.popScopeId(), n);
+  const _withScopeId$3 = (n) => (vue.pushScopeId("data-v-80cac14a"), n = n(), vue.popScopeId(), n);
   const _hoisted_1$6 = { class: "custom-drawer-header" };
   const _hoisted_2$6 = { class: "header-content" };
   const _hoisted_3$6 = ["id"];
@@ -60399,7 +60666,7 @@
     __name: "index",
     setup(__props) {
       const shouldRender = claimDrawerInstance();
-      if (!shouldRender && import_meta.env.DEV) {
+      if (!shouldRender && process.env.NODE_ENV !== "production") {
         console.warn(
           "[YcDrawer] Multiple <YcDrawer /> instances detected. Only the first instance renders drawers. Remove duplicate <YcDrawer /> from your component \u2014 it only needs to be placed once in the root App."
         );
@@ -60641,7 +60908,7 @@
     }
   });
 
-  var YcDrawerComponent = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-eb9ddafc"], ["__file", "index.vue"]]);
+  var YcDrawerComponent = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-80cac14a"], ["__file", "index.vue"]]);
 
   const YcDrawer = YcDrawerComponent;
   const ReDrawer = YcDrawerComponent;
@@ -64265,7 +64532,7 @@
     });
   }
 
-  const version = "0.0.75";
+  const version = "0.0.77";
 
   const install = installer.install;
 
@@ -64411,6 +64678,7 @@
   exports.useSelectWithPagination = useSelectWithPagination;
   exports.useSortableDrag = useSortableDrag$1;
   exports.useTable = useTable;
+  exports.useTableDragScroll = useTableDragScroll;
   exports.useVirtualScroll = useVirtualScroll;
   exports.useVirtualSelection = useVirtualSelection;
   exports.useYcAuth = useYcAuth;