@yibozhang/pro-table 0.1.7 → 0.1.8

package/bundles/yibozhang-pro-table.umd.js

@@ -3594,6 +3594,182 @@
         });
     }
 
+    /**
+     * 自动检测 nz-select 最近的父元素宽度，并设置给 nz-select
+     * 当父元素宽度变化时，自动更新 nz-select 的宽度
+     */
+    function initSelectWidthDetector() {
+        if (typeof window === 'undefined' || typeof document === 'undefined') {
+            return;
+        }
+        // 获取最近的父元素（排除自身）
+        function getClosestParent(element) {
+            var parent = element.parentElement;
+            while (parent && parent !== document.body) {
+                // 如果父元素有明确的宽度（非 auto），则返回该父元素
+                var computedStyle = window.getComputedStyle(parent);
+                var width = computedStyle.width;
+                if (width && width !== 'auto' && width !== '0px') {
+                    return parent;
+                }
+                parent = parent.parentElement;
+            }
+            // 如果没找到有明确宽度的父元素，返回直接父元素
+            return element.parentElement;
+        }
+        // 找到实际的 select 元素（nz-select 组件渲染后的 DOM 元素）
+        function findActualSelectElement(element) {
+            var _a;
+            // 如果已经是 ant-select 元素，直接返回
+            if ((_a = element.classList) === null || _a === void 0 ? void 0 : _a.contains('ant-select')) {
+                return element;
+            }
+            // 如果是 nz-select 组件标签，查找其渲染后的 ant-select 元素
+            if (element.tagName === 'NZ-SELECT') {
+                var actualSelect_1 = element.querySelector('.ant-select');
+                return actualSelect_1 || element;
+            }
+            // 在子元素中查找 ant-select
+            var actualSelect = element.querySelector('.ant-select');
+            return actualSelect || element;
+        }
+        // 获取原始的 nz-select 组件元素（用于读取 custom-width 属性）
+        function getOriginalSelectElement(element) {
+            // 如果已经是 nz-select 组件标签，直接返回
+            if (element.tagName === 'NZ-SELECT') {
+                return element;
+            }
+            // 向上查找 nz-select 组件标签
+            var parent = element.parentElement;
+            while (parent && parent !== document.body) {
+                if (parent.tagName === 'NZ-SELECT') {
+                    return parent;
+                }
+                parent = parent.parentElement;
+            }
+            return null;
+        }
+        // 检查并设置 nz-select 的宽度
+        function setSelectWidth(selectElement) {
+            var actualSelect = findActualSelectElement(selectElement);
+            if (!actualSelect) {
+                return;
+            }
+            // 检查是否有自定义宽度属性
+            var originalSelect = getOriginalSelectElement(selectElement);
+            if (originalSelect) {
+                var customWidth = originalSelect.getAttribute('custom-width');
+                if (customWidth) {
+                    // 使用自定义宽度
+                    actualSelect.style.width = customWidth;
+                    return;
+                }
+            }
+            // 如果没有自定义宽度，使用计算出的父元素宽度
+            var parent = getClosestParent(actualSelect);
+            if (parent) {
+                var parentWidth = parent.offsetWidth;
+                if (parentWidth > 0) {
+                    // 设置宽度，可以减去一些 padding/margin 来避免溢出
+                    // 这里直接使用父元素宽度，如果需要可以调整
+                    actualSelect.style.width = parentWidth + "px";
+                }
+            }
+        }
+        // 使用 MutationObserver 监听 DOM 变化
+        var observer = new MutationObserver(function (mutations) {
+            mutations.forEach(function (mutation) {
+                mutation.addedNodes.forEach(function (node) {
+                    var _a, _b, _c;
+                    if (node.nodeType === Node.ELEMENT_NODE) {
+                        var element_1 = node;
+                        // 检查是否是 nz-select 组件标签
+                        if (element_1.tagName === 'NZ-SELECT') {
+                            // 等待 Angular 组件渲染完成
+                            setTimeout(function () {
+                                setSelectWidth(element_1);
+                                observeResize(element_1);
+                            }, 100);
+                        }
+                        // 检查是否是 ant-select 元素（nz-select 渲染后的实际元素）
+                        if ((_a = element_1.classList) === null || _a === void 0 ? void 0 : _a.contains('ant-select')) {
+                            setTimeout(function () {
+                                setSelectWidth(element_1);
+                                observeResize(element_1);
+                            }, 0);
+                        }
+                        // 检查子元素中是否有 nz-select 或 ant-select
+                        var nzSelects = (_b = element_1.querySelectorAll) === null || _b === void 0 ? void 0 : _b.call(element_1, 'nz-select');
+                        nzSelects === null || nzSelects === void 0 ? void 0 : nzSelects.forEach(function (select) {
+                            setTimeout(function () {
+                                setSelectWidth(select);
+                                observeResize(select);
+                            }, 100);
+                        });
+                        var antSelects = (_c = element_1.querySelectorAll) === null || _c === void 0 ? void 0 : _c.call(element_1, '.ant-select');
+                        antSelects === null || antSelects === void 0 ? void 0 : antSelects.forEach(function (select) {
+                            setTimeout(function () {
+                                setSelectWidth(select);
+                                observeResize(select);
+                            }, 0);
+                        });
+                    }
+                });
+            });
+        });
+        // 使用 ResizeObserver 监听父元素尺寸变化
+        var resizeObserverMap = new WeakMap();
+        function observeResize(selectElement) {
+            if (resizeObserverMap.has(selectElement)) {
+                return;
+            }
+            if (typeof window.ResizeObserver !== 'undefined') {
+                var actualSelect = findActualSelectElement(selectElement);
+                if (!actualSelect) {
+                    return;
+                }
+                var parent = getClosestParent(actualSelect);
+                if (!parent) {
+                    return;
+                }
+                var resizeObserver = new window.ResizeObserver(function () {
+                    setSelectWidth(selectElement);
+                });
+                resizeObserver.observe(parent);
+                resizeObserverMap.set(selectElement, resizeObserver);
+            }
+        }
+        // 开始监听 DOM 变化
+        observer.observe(document.body, {
+            childList: true,
+            subtree: true,
+        });
+        // 检查已存在的 nz-select 和 ant-select
+        var checkExistingSelects = function () {
+            // 检查 nz-select 组件标签
+            document.querySelectorAll('nz-select').forEach(function (element) {
+                setTimeout(function () {
+                    setSelectWidth(element);
+                    observeResize(element);
+                }, 100);
+            });
+            // 检查 ant-select 元素
+            document.querySelectorAll('.ant-select').forEach(function (element) {
+                setTimeout(function () {
+                    setSelectWidth(element);
+                    observeResize(element);
+                }, 0);
+            });
+        };
+        // 延迟执行，确保 DOM 已完全加载
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', checkExistingSelects);
+        }
+        else {
+            checkExistingSelects();
+        }
+    }
+
     /*
      * Public API Surface of pro-table
      */
@@ -3616,6 +3792,7 @@
     exports.TableSearchBarModule = TableSearchBarModule;
     exports.TrimInputModule = TrimInputModule;
     exports.initModalWidthDetector = initModalWidthDetector;
+    exports.initSelectWidthDetector = initSelectWidthDetector;
     exports["ɵ0"] = ɵ0;
     exports["ɵ1"] = ɵ1;
     exports["ɵ2"] = ɵ2;