@hsu-react/ui 0.0.1 → 0.0.3

package/es/components/Select/_utils/getElementPosition.js

@@ -1,15 +1,17 @@
 /**
- * 获取元素相对于文档的顶部位置
+ * 获取元素相对于视口的顶部位置。
+ * 下拉框为 position: fixed（相对视口定位），故此处必须返回视口坐标，
+ * 不能叠加 document.scrollTop——否则当文档本身可滚动时（如文档站长页面），
+ * 下拉框会被定位到 scrollTop 像素之外而“消失”。
+ * 在固定布局（document 不滚动，scrollTop=0）下与原行为一致。
  */
 export function getElementTop(element) {
-  var rect = element.getBoundingClientRect();
-  return rect.top + document.documentElement.scrollTop;
+  return element.getBoundingClientRect().top;
 }
 
 /**
- * 获取元素相对于文档的左侧位置
+ * 获取元素相对于视口的左侧位置（同上，配合 position: fixed）。
  */
 export function getElementLeft(element) {
-  var rect = element.getBoundingClientRect();
-  return rect.left + document.documentElement.scrollLeft;
+  return element.getBoundingClientRect().left;
 }

package/es/components/Select/index.module.less

@@ -6,6 +6,9 @@
 
   width: 100%;
   height: 100%;
+  // 父级未给定高度时（height:100% 解析为 auto），保证最小高度，
+  // 与 Input 等录入控件高度一致，避免被压扁或在搜索行中高度异常。
+  min-height: 32px;
   padding: 0px 11px;
 
   // CF 风格：随外观切换的描边输入控件
@@ -30,11 +33,11 @@
     .antdSelect {
       cursor: not-allowed;
 
-      .ant-select-selection-item {
+      :global(.ant-select-selection-item) {
         color: var(--cf-text-3);
       }
 
-      .ant-select-arrow {
+      :global(.ant-select-arrow) {
         cursor: not-allowed;
       }
     }
@@ -77,7 +80,7 @@
     margin-inline-start: 4px;
   }
 
-  &:has(> .ant-select-status-error) {
+  &:has(> :global(.ant-select-status-error)) {
     border: 1px solid #ff4d4f;
 
     .prefix,
@@ -113,20 +116,20 @@
     font-weight: inherit;
     color: inherit !important;
 
-    &:has(> .ant-select-arrow),
-    &:has(> .ant-select-clear) {
-      .ant-select-selector {
+    &:has(> :global(.ant-select-arrow)),
+    &:has(> :global(.ant-select-clear)) {
+      :global(.ant-select-selector) {
         padding-right: 20px;
       }
     }
 
     &.legacyHasArrowOrClear {
-      .ant-select-selector {
+      :global(.ant-select-selector) {
         padding-right: 20px;
       }
     }
 
-    .ant-select-selector {
+    :global(.ant-select-selector) {
       width: 100%;
       height: 100%;
       padding: 0;
@@ -145,7 +148,7 @@
         content: none;
       }
 
-      .ant-select-selection-wrap {
+      :global(.ant-select-selection-wrap) {
         height: 100%;
 
         font-family: inherit;
@@ -154,7 +157,7 @@
         color: inherit;
       }
 
-      .ant-select-selection-search {
+      :global(.ant-select-selection-search) {
         inset-inline-start: 0px;
         inset-inline-end: 0px;
 
@@ -173,7 +176,7 @@
         }
       }
 
-      .ant-select-selection-placeholder {
+      :global(.ant-select-selection-placeholder) {
         display: inline-flex;
         align-items: center;
 
@@ -185,7 +188,7 @@
         font-weight: inherit;
       }
 
-      .ant-select-selection-item {
+      :global(.ant-select-selection-item) {
         padding-inline-end: 0px;
 
         font-family: inherit;
@@ -194,8 +197,8 @@
         color: inherit;
       }
 
-      .ant-select-selection-overflow-item {
-        .ant-select-selection-item {
+      :global(.ant-select-selection-overflow-item) {
+        :global(.ant-select-selection-item) {
           line-height: normal;
 
           padding-inline-end: 4px;
@@ -203,34 +206,34 @@
       }
     }
 
-    &.ant-select-focused {
-      .ant-select-selector {
+    &:global(.ant-select-focused) {
+      :global(.ant-select-selector) {
         border: none !important;
 
         box-shadow: none !important;
       }
     }
 
-    &.ant-select-open {
-      .ant-select-arrow {
+    &:global(.ant-select-open) {
+      :global(.ant-select-arrow) {
         transform: rotate(-180deg) translateY(50%);
       }
 
       &.noArrowAnimation {
-        .ant-select-arrow {
+        :global(.ant-select-arrow) {
           transform: translateY(-50%);
           transition: none !important;
         }
       }
     }
 
-    &.ant-select-status-error {
-      .ant-select-selector {
+    &:global(.ant-select-status-error) {
+      :global(.ant-select-selector) {
         border: none !important;
       }
     }
 
-    .ant-select-arrow {
+    :global(.ant-select-arrow) {
       width: 14px;
       height: 14px;
       margin-top: 0px;
@@ -244,7 +247,7 @@
       pointer-events: all;
     }
 
-    .ant-select-clear {
+    :global(.ant-select-clear) {
       width: 14px;
       height: 14px;
       margin-top: 0px;
@@ -256,17 +259,17 @@
       inset-inline-end: 0px;
     }
 
-    &.ant-select-multiple {
-      > .ant-select-selector {
-        > .ant-select-selection-overflow {
-          .ant-select-selection-search {
+    &:global(.ant-select-multiple) {
+      > :global(.ant-select-selector) {
+        > :global(.ant-select-selection-overflow) {
+          :global(.ant-select-selection-search) {
             width: 0px !important;
 
             margin-inline-start: 0px;
           }
         }
 
-        > .ant-select-selection-placeholder {
+        > :global(.ant-select-selection-placeholder) {
           inset-inline-start: 0px;
         }
       }
@@ -274,14 +277,14 @@
   }
 
   &.popupMatchContentWidth {
-    .ant-select-dropdown {
+    :global(.ant-select-dropdown) {
       [class="rc-virtual-list-holder-inner"] {
         position: relative !important;
       }
     }
   }
 
-  .ant-select-dropdown {
+  :global(.ant-select-dropdown) {
     position: fixed;
 
     font-family: inherit;
@@ -291,7 +294,7 @@
 
     border-radius: inherit;
 
-    .ant-select-item {
+    :global(.ant-select-item) {
       font-family: inherit;
       font-size: inherit;
       font-weight: inherit;
@@ -300,9 +303,9 @@
       border-radius: inherit;
     }
 
-    .ant-select-item-empty,
-    .ant-empty,
-    .ant-empty-description {
+    :global(.ant-select-item-empty),
+    :global(.ant-empty),
+    :global(.ant-empty-description) {
       font-family: inherit;
       font-size: inherit;
       font-weight: inherit;

package/es/components/Slider/index.module.less

@@ -1,4 +1,5 @@
 .slider {
+  width: 100%;
   height: 32px;
   margin: 0px;
   padding-block: 0px;
@@ -6,14 +7,14 @@
   overflow-x: hidden;
   overflow-y: visible;
 
-  .ant-slider-step,
-  .ant-slider-track,
-  .ant-slider-rail {
+  :global(.ant-slider-step),
+  :global(.ant-slider-track),
+  :global(.ant-slider-rail) {
     top: 0px;
     height: 100% !important;
   }
 
-  .ant-slider-handle {
+  :global(.ant-slider-handle) {
     position: relative;
     top: 50%;
     transform: translate(calc(-50% - 4px), calc(-50% + 1px)) !important;

package/es/components/Spreadsheet/index.module.less

@@ -4,8 +4,8 @@
 
   overflow: hidden;
 
-  .x-spreadsheet-toolbar,
-  .x-spreadsheet-bottombar {
+  :global(.x-spreadsheet-toolbar),
+  :global(.x-spreadsheet-bottombar) {
     width: 100% !important;
   }
 
@@ -13,14 +13,14 @@
     background-size: auto;
   }
 
-  .x-spreadsheet-menu {
+  :global(.x-spreadsheet-menu) {
     > li:first-child {
       display: none;
     }
   }
 
   &.showBottomTool {
-    .x-spreadsheet-menu {
+    :global(.x-spreadsheet-menu) {
       > li:first-child {
         display: list-item;
       }

package/es/components/Switch/index.js

@@ -9,6 +9,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { Switch as AntSwitch } from "antd";
 import React from "react";
+import styles from "./index.module.less";
 import { jsx as _jsx } from "react/jsx-runtime";
 var Switch = function Switch(props) {
   var _options$find, _options$find2;
@@ -18,13 +19,16 @@ var Switch = function Switch(props) {
     checkedChildren = props.checkedChildren,
     unCheckedChildren = props.unCheckedChildren,
     rest = _objectWithoutProperties(props, _excluded);
-  return /*#__PURE__*/_jsx(AntSwitch, _objectSpread(_objectSpread({}, rest), {}, {
-    checkedChildren: checkedChildren || (options === null || options === void 0 || (_options$find = options.find(function (item) {
-      return item.value === trueValue;
-    })) === null || _options$find === void 0 ? void 0 : _options$find.label),
-    unCheckedChildren: unCheckedChildren || (options === null || options === void 0 || (_options$find2 = options.find(function (item) {
-      return item.value === falseValue;
-    })) === null || _options$find2 === void 0 ? void 0 : _options$find2.label)
-  }));
+  return /*#__PURE__*/_jsx("span", {
+    className: styles.SwitchWrapper,
+    children: /*#__PURE__*/_jsx(AntSwitch, _objectSpread(_objectSpread({}, rest), {}, {
+      checkedChildren: checkedChildren || (options === null || options === void 0 || (_options$find = options.find(function (item) {
+        return item.value === trueValue;
+      })) === null || _options$find === void 0 ? void 0 : _options$find.label),
+      unCheckedChildren: unCheckedChildren || (options === null || options === void 0 || (_options$find2 = options.find(function (item) {
+        return item.value === falseValue;
+      })) === null || _options$find2 === void 0 ? void 0 : _options$find2.label)
+    }))
+  });
 };
 export default Switch;

package/es/components/Switch/index.module.less

@@ -0,0 +1,7 @@
+// 让开关在表单/录入场景中与 Input、Select 等控件保持一致的 32px 最小高度。
+// 开关本体（pill）保持原始尺寸，由该容器居中占位，故不会被拉大。
+.SwitchWrapper {
+  display: inline-flex;
+  align-items: center;
+  min-height: 32px;
+}

package/es/components/Table/_components/Pagination/index.module.less

@@ -4,11 +4,11 @@
   justify-content: flex-end;
   column-gap: 8px;
 
-  &.ant-pagination-start {
+  &:global(.ant-pagination-start) {
     justify-content: flex-start;
   }
 
-  &.ant-pagination-center {
+  &:global(.ant-pagination-center) {
     justify-content: center;
   }
 
@@ -25,10 +25,10 @@
       width: 100%;
       height: 100%;
 
-      .ant-pagination-item-container {
+      :global(.ant-pagination-item-container) {
         width: 100%;
 
-        .ant-pagination-item-ellipsis {
+        :global(.ant-pagination-item-ellipsis) {
           width: 100%;
         }
       }
@@ -40,17 +40,17 @@
       justify-content: center;
     }
 
-    &.ant-pagination-options {
-      .ant-pagination-options-size-changer,
-      .ant-pagination-options-quick-jumper {
+    &:global(.ant-pagination-options) {
+      :global(.ant-pagination-options-size-changer),
+      :global(.ant-pagination-options-quick-jumper) {
         height: 100% !important;
       }
 
-      .ant-pagination-options-size-changer {
-        .ant-select-selector {
+      :global(.ant-pagination-options-size-changer) {
+        :global(.ant-select-selector) {
           height: 100% !important;
 
-          .ant-select-selection-item {
+          :global(.ant-select-selection-item) {
             display: flex;
             align-items: center;
 
@@ -58,14 +58,14 @@
           }
         }
 
-        .ant-select-arrow {
+        :global(.ant-select-arrow) {
           margin-top: 0px;
 
           transform: translateY(-50%);
         }
       }
 
-      .ant-pagination-options-quick-jumper {
+      :global(.ant-pagination-options-quick-jumper) {
         display: inline-flex;
         align-items: center;
 
@@ -78,18 +78,18 @@
 
   &.bordered {
     > li {
-      &:not(.ant-pagination-options):not(.ant-pagination-total-text) {
+      &:not(:global(.ant-pagination-options)):not(:global(.ant-pagination-total-text)) {
         border: 1px solid var(--cf-border);
         border-radius: 4px;
       }
 
-      &.ant-pagination-item {
+      &:global(.ant-pagination-item) {
         margin: 0px 4px 0px 0px;
 
-        &:not(.ant-pagination-item-active):not(
-            .ant-pagination-item-disabled
+        &:not(:global(.ant-pagination-item-active)):not(
+            :global(.ant-pagination-item-disabled)
           ):hover,
-        &.ant-pagination-item-active {
+        &:global(.ant-pagination-item-active) {
           background-color: var(--primary-color, #1890ff);
           border-color: var(--primary-color, #1890ff);
 
@@ -98,11 +98,11 @@
           }
         }
 
-        &:not(.ant-pagination-item-active):not(.ant-pagination-item-disabled) {
+        &:not(:global(.ant-pagination-item-active)):not(:global(.ant-pagination-item-disabled)) {
           border-color: var(--cf-border);
         }
 
-        &:not(.ant-pagination-item-active).ant-pagination-item-disabled {
+        &:not(:global(.ant-pagination-item-active)):global(.ant-pagination-item-disabled) {
           cursor: not-allowed;
 
           &:hover {
@@ -117,16 +117,16 @@
         }
       }
 
-      &.ant-pagination-prev {
+      &:global(.ant-pagination-prev) {
         margin-right: 4px;
       }
 
-      &.ant-pagination-options {
+      &:global(.ant-pagination-options) {
         margin-left: 4px;
       }
 
-      &.ant-pagination-jump-next,
-      &.ant-pagination-jump-prev {
+      &:global(.ant-pagination-jump-next),
+      &:global(.ant-pagination-jump-prev) {
         margin-right: 4px;
       }
     }