@sia.soul/sia-react-ui 0.1.21 → 0.1.22

package/dist/core.css

@@ -4757,15 +4757,22 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 12px;
+  gap: var(--sia-query-field-gap, 12px);
   padding-top: 8px;
 }
 .sia-query-form__field {
-  flex: 0 1 var(--sia-query-field-width, 220px);
-  width: var(--sia-query-field-width, 220px);
+  --sia-query-item-width: var(--sia-query-field-width, 220px);
+  flex: 0 1 var(--sia-query-item-width);
+  width: var(--sia-query-item-width);
   min-width: 0;
   max-width: 100%;
 }
+.sia-query-form__field:has(.sia-picker-range-control, .sia-time-range, .sia-select-date-range, .sia-space-compact:not(.sia-space-compact--vertical) > :nth-child(2)) {
+  --sia-query-item-width: calc(var(--sia-query-field-width, 220px) + var(--sia-query-field-width, 220px) + var(--sia-query-field-gap, 12px));
+}
+.sia-query-form__field :is(.sia-picker-range-control, .sia-time-range, .sia-select-date-range, .sia-space-compact:not(.sia-space-compact--vertical)) {
+  width: 100%;
+}
 .sia-query-form__field[hidden] {
   display: none;
 }
@@ -4848,7 +4855,7 @@ fieldset:disabled .sia-input-number__floating-placeholder {
 @media (max-width: 600px) {
   .sia-query-form__fields.is-collapsed > .sia-query-form__field {
     flex-basis: auto !important;
-    width: var(--sia-query-field-width, 220px) !important;
+    width: var(--sia-query-item-width) !important;
   }
 }
 .sia-query-form__quick > .sia-badge:has(.sia-badge__count) {

package/dist/index.cjs

@@ -11061,6 +11061,7 @@ function isInteractiveTableTarget(target) {
 function createCellSelectionPlugin(options = {}) {
   let dragMode = null;
   let dragAnchor = null;
+  let textCell = null;
   let headerDragAnchorKey = null;
   let snapshotCache = null;
   let latestContext = null;
@@ -11362,12 +11363,17 @@ function createCellSelectionPlugin(options = {}) {
         return;
       }
       if (!isSelectable(row, column, context)) return;
-      event.preventDefault();
       window.getSelection()?.removeAllRanges();
       focusTable(event.currentTarget);
       const address = { rowKey: row.key, columnKey: column.key };
-      dragAnchor = event.shiftKey && context.state.range ? context.state.range.anchor : address;
-      dragMode = "cells";
+      const extendRange = event.shiftKey && context.state.range;
+      dragAnchor = extendRange ? extendRange.anchor : address;
+      dragMode = extendRange ? "cells" : "text";
+      textCell = extendRange ? null : event.currentTarget;
+      if (extendRange) {
+        event.preventDefault();
+        window.getSelection()?.removeAllRanges();
+      }
       setSelection(context, { anchor: dragAnchor, focus: address });
     },
     onCellPointerMove(row, column, event, context) {
@@ -11375,6 +11381,7 @@ function createCellSelectionPlugin(options = {}) {
       if ((event.buttons & 1) === 0) {
         dragMode = null;
         dragAnchor = null;
+        textCell = null;
         return;
       }
       if (dragMode === "rows") {
@@ -11384,6 +11391,12 @@ function createCellSelectionPlugin(options = {}) {
         return;
       }
       if (!isSelectable(row, column, context)) return;
+      if (dragMode === "text") {
+        if (sameCellAddress(dragAnchor, { rowKey: row.key, columnKey: column.key })) return;
+        dragMode = "cells";
+        textCell = null;
+        focusTable(event.currentTarget);
+      }
       event.preventDefault();
       window.getSelection()?.removeAllRanges();
       setSelection(context, {
@@ -11417,14 +11430,29 @@ function createCellSelectionPlugin(options = {}) {
     },
     onMount() {
       const stopDragging = () => {
+        constrainTextSelection();
         dragMode = null;
         dragAnchor = null;
+        textCell = null;
         headerDragAnchorKey = null;
       };
+      const constrainTextSelection = () => {
+        if (!dragMode) return;
+        const selection = window.getSelection();
+        if (!selection || selection.isCollapsed) return;
+        if (dragMode !== "text" || !textCell?.contains(selection.anchorNode) || !textCell.contains(selection.focusNode)) {
+          selection.removeAllRanges();
+        }
+      };
+      const handleSelectStart = (event) => {
+        if (dragMode && dragMode !== "text") event.preventDefault();
+      };
       const handleCopy = (event) => {
         const context = latestContext;
         if (options.copyable === false || !context || !activeRoot || !activeRoot.contains(document.activeElement) || isInteractiveTableTarget(document.activeElement))
           return;
+        const selection = window.getSelection();
+        if (selection && !selection.isCollapsed && selection.toString()) return;
         const text = copyText(context);
         if (!text) return;
         event.preventDefault();
@@ -11432,11 +11460,18 @@ function createCellSelectionPlugin(options = {}) {
         options.onCopy?.(text, selectedCells(context));
       };
       window.addEventListener("pointerup", stopDragging);
+      window.addEventListener("pointercancel", stopDragging);
       window.addEventListener("blur", stopDragging);
+      document.addEventListener("selectionchange", constrainTextSelection);
+      document.addEventListener("selectstart", handleSelectStart);
       document.addEventListener("copy", handleCopy);
       return () => {
+        stopDragging();
         window.removeEventListener("pointerup", stopDragging);
+        window.removeEventListener("pointercancel", stopDragging);
         window.removeEventListener("blur", stopDragging);
+        document.removeEventListener("selectionchange", constrainTextSelection);
+        document.removeEventListener("selectstart", handleSelectStart);
         document.removeEventListener("copy", handleCopy);
       };
     },
@@ -22145,7 +22180,7 @@ function QueryForm({
               {
                 className: "sia-query-form__field",
                 hidden: collapsed && index >= Math.min(limit, fittingCount),
-                style: entry.width !== void 0 ? { flexBasis: entry.width, width: entry.width } : void 0,
+                style: entry.width !== void 0 ? { "--sia-query-item-width": typeof entry.width === "number" ? `${entry.width}px` : entry.width } : void 0,
                 children: entry.content
               },
               entry.key

package/dist/index.css

@@ -4757,15 +4757,22 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 12px;
+  gap: var(--sia-query-field-gap, 12px);
   padding-top: 8px;
 }
 .sia-query-form__field {
-  flex: 0 1 var(--sia-query-field-width, 220px);
-  width: var(--sia-query-field-width, 220px);
+  --sia-query-item-width: var(--sia-query-field-width, 220px);
+  flex: 0 1 var(--sia-query-item-width);
+  width: var(--sia-query-item-width);
   min-width: 0;
   max-width: 100%;
 }
+.sia-query-form__field:has(.sia-picker-range-control, .sia-time-range, .sia-select-date-range, .sia-space-compact:not(.sia-space-compact--vertical) > :nth-child(2)) {
+  --sia-query-item-width: calc(var(--sia-query-field-width, 220px) + var(--sia-query-field-width, 220px) + var(--sia-query-field-gap, 12px));
+}
+.sia-query-form__field :is(.sia-picker-range-control, .sia-time-range, .sia-select-date-range, .sia-space-compact:not(.sia-space-compact--vertical)) {
+  width: 100%;
+}
 .sia-query-form__field[hidden] {
   display: none;
 }
@@ -4848,7 +4855,7 @@ fieldset:disabled .sia-input-number__floating-placeholder {
 @media (max-width: 600px) {
   .sia-query-form__fields.is-collapsed > .sia-query-form__field {
     flex-basis: auto !important;
-    width: var(--sia-query-field-width, 220px) !important;
+    width: var(--sia-query-item-width) !important;
   }
 }
 .sia-query-form__quick > .sia-badge:has(.sia-badge__count) {

package/dist/index.d.cts

@@ -3003,7 +3003,7 @@ declare const InputSelect: react.ForwardRefExoticComponent<InputSelectProps & re
 interface QueryFormField extends FormItemProps {
     /** 字段布局的稳定唯一标识；用于 React 渲染，不替代 Form.Item 的 name 字段路径。 */
     key: string;
-    /** 字段占用宽度，默认由 fieldWidth 控制；组合字段可指定更大的宽度。 */
+    /** 字段占用宽度，优先于自动布局。未指定时普通控件占一列，日期／时间区间及横向组合控件占两列（含列间距）。 */
     width?: number | string;
 }
 /** 预设或已保存的快捷查询，包含名称、条件、颜色和可选数量徽标。 */
@@ -3046,7 +3046,7 @@ interface QueryFormProps<T extends FormValues = FormValues> extends Omit<FormPro
      */
     loading?: boolean;
     /**
-     * 查询字段的默认宽度，数值单位为像素，可传 CSS 尺寸字符串。
+     * 单列查询字段的默认宽度，数值单位为像素，可传 CSS 尺寸字符串。区间及横向组合控件默认为两倍此宽度加列间距；列间距可通过 --sia-query-field-gap 调整（默认 12px）。
      * @defaultValue 220
      */
     fieldWidth?: number | string;

package/dist/index.d.ts

@@ -3003,7 +3003,7 @@ declare const InputSelect: react.ForwardRefExoticComponent<InputSelectProps & re
 interface QueryFormField extends FormItemProps {
     /** 字段布局的稳定唯一标识；用于 React 渲染，不替代 Form.Item 的 name 字段路径。 */
     key: string;
-    /** 字段占用宽度，默认由 fieldWidth 控制；组合字段可指定更大的宽度。 */
+    /** 字段占用宽度，优先于自动布局。未指定时普通控件占一列，日期／时间区间及横向组合控件占两列（含列间距）。 */
     width?: number | string;
 }
 /** 预设或已保存的快捷查询，包含名称、条件、颜色和可选数量徽标。 */
@@ -3046,7 +3046,7 @@ interface QueryFormProps<T extends FormValues = FormValues> extends Omit<FormPro
      */
     loading?: boolean;
     /**
-     * 查询字段的默认宽度，数值单位为像素，可传 CSS 尺寸字符串。
+     * 单列查询字段的默认宽度，数值单位为像素，可传 CSS 尺寸字符串。区间及横向组合控件默认为两倍此宽度加列间距；列间距可通过 --sia-query-field-gap 调整（默认 12px）。
      * @defaultValue 220
      */
     fieldWidth?: number | string;

package/dist/index.js

@@ -4838,6 +4838,7 @@ function isInteractiveTableTarget(target) {
 function createCellSelectionPlugin(options = {}) {
   let dragMode = null;
   let dragAnchor = null;
+  let textCell = null;
   let headerDragAnchorKey = null;
   let snapshotCache = null;
   let latestContext = null;
@@ -5139,12 +5140,17 @@ function createCellSelectionPlugin(options = {}) {
         return;
       }
       if (!isSelectable(row, column, context)) return;
-      event.preventDefault();
       window.getSelection()?.removeAllRanges();
       focusTable(event.currentTarget);
       const address = { rowKey: row.key, columnKey: column.key };
-      dragAnchor = event.shiftKey && context.state.range ? context.state.range.anchor : address;
-      dragMode = "cells";
+      const extendRange = event.shiftKey && context.state.range;
+      dragAnchor = extendRange ? extendRange.anchor : address;
+      dragMode = extendRange ? "cells" : "text";
+      textCell = extendRange ? null : event.currentTarget;
+      if (extendRange) {
+        event.preventDefault();
+        window.getSelection()?.removeAllRanges();
+      }
       setSelection(context, { anchor: dragAnchor, focus: address });
     },
     onCellPointerMove(row, column, event, context) {
@@ -5152,6 +5158,7 @@ function createCellSelectionPlugin(options = {}) {
       if ((event.buttons & 1) === 0) {
         dragMode = null;
         dragAnchor = null;
+        textCell = null;
         return;
       }
       if (dragMode === "rows") {
@@ -5161,6 +5168,12 @@ function createCellSelectionPlugin(options = {}) {
         return;
       }
       if (!isSelectable(row, column, context)) return;
+      if (dragMode === "text") {
+        if (sameCellAddress(dragAnchor, { rowKey: row.key, columnKey: column.key })) return;
+        dragMode = "cells";
+        textCell = null;
+        focusTable(event.currentTarget);
+      }
       event.preventDefault();
       window.getSelection()?.removeAllRanges();
       setSelection(context, {
@@ -5194,14 +5207,29 @@ function createCellSelectionPlugin(options = {}) {
     },
     onMount() {
       const stopDragging = () => {
+        constrainTextSelection();
         dragMode = null;
         dragAnchor = null;
+        textCell = null;
         headerDragAnchorKey = null;
       };
+      const constrainTextSelection = () => {
+        if (!dragMode) return;
+        const selection = window.getSelection();
+        if (!selection || selection.isCollapsed) return;
+        if (dragMode !== "text" || !textCell?.contains(selection.anchorNode) || !textCell.contains(selection.focusNode)) {
+          selection.removeAllRanges();
+        }
+      };
+      const handleSelectStart = (event) => {
+        if (dragMode && dragMode !== "text") event.preventDefault();
+      };
       const handleCopy = (event) => {
         const context = latestContext;
         if (options.copyable === false || !context || !activeRoot || !activeRoot.contains(document.activeElement) || isInteractiveTableTarget(document.activeElement))
           return;
+        const selection = window.getSelection();
+        if (selection && !selection.isCollapsed && selection.toString()) return;
         const text = copyText(context);
         if (!text) return;
         event.preventDefault();
@@ -5209,11 +5237,18 @@ function createCellSelectionPlugin(options = {}) {
         options.onCopy?.(text, selectedCells(context));
       };
       window.addEventListener("pointerup", stopDragging);
+      window.addEventListener("pointercancel", stopDragging);
       window.addEventListener("blur", stopDragging);
+      document.addEventListener("selectionchange", constrainTextSelection);
+      document.addEventListener("selectstart", handleSelectStart);
       document.addEventListener("copy", handleCopy);
       return () => {
+        stopDragging();
         window.removeEventListener("pointerup", stopDragging);
+        window.removeEventListener("pointercancel", stopDragging);
         window.removeEventListener("blur", stopDragging);
+        document.removeEventListener("selectionchange", constrainTextSelection);
+        document.removeEventListener("selectstart", handleSelectStart);
         document.removeEventListener("copy", handleCopy);
       };
     },
@@ -8341,7 +8376,7 @@ function QueryForm({
               {
                 className: "sia-query-form__field",
                 hidden: collapsed && index >= Math.min(limit, fittingCount),
-                style: entry.width !== void 0 ? { flexBasis: entry.width, width: entry.width } : void 0,
+                style: entry.width !== void 0 ? { "--sia-query-item-width": typeof entry.width === "number" ? `${entry.width}px` : entry.width } : void 0,
                 children: entry.content
               },
               entry.key

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sia.soul/sia-react-ui",
-  "version": "0.1.21",
+  "version": "0.1.22",
   "description": "Sia Design components and tokens for React",
   "publishConfig": {
     "access": "public",