@sia.soul/sia-react-ui 0.1.12 → 0.1.14

package/dist/index.js

@@ -56,7 +56,7 @@ import {
   smoothSvgPath,
   svgArcPath,
   transferCompositeValue
-} from "./chunk-Z3T6RDQP.js";
+} from "./chunk-OKP4DIQH.js";
 import {
   Badge,
   Breadcrumb,
@@ -79,22 +79,22 @@ import {
   Watermark,
   message,
   notification
-} from "./chunk-MOOMDRAN.js";
+} from "./chunk-K3XRTEIO.js";
 import {
   TextArea
-} from "./chunk-WHARTF2I.js";
+} from "./chunk-YT6E3X2K.js";
 import {
   MarkdownEditor
-} from "./chunk-5ZTWY3PG.js";
+} from "./chunk-QJ4OQNQ4.js";
 import {
   RichTextContent,
   RichTextEditor
-} from "./chunk-F3VH6LJH.js";
+} from "./chunk-MUTJVDM6.js";
 import {
   DatePicker,
   SelectDateRange,
   TimePanel
-} from "./chunk-RLTG3IK7.js";
+} from "./chunk-25BU7YTB.js";
 import {
   Checkbox,
   Modal,
@@ -107,7 +107,7 @@ import {
   Tooltip,
   Tree,
   useOverlayLifecycle
-} from "./chunk-BUMS62NO.js";
+} from "./chunk-R3TYVU53.js";
 import {
   Dropdown,
   FILLED_ICON_NAMES,
@@ -118,16 +118,18 @@ import {
   PopupPortal,
   Segmented,
   Steps
-} from "./chunk-JJVD2ITI.js";
+} from "./chunk-ALWHRV4L.js";
 import {
   Button
-} from "./chunk-MBS2HXLZ.js";
+} from "./chunk-TZGUBGA4.js";
 import {
+  ControlSizeContext,
   PlaceholderModeContext,
+  useControlSize,
   useControllableState,
   useFloatingPlaceholder,
   usePlaceholderMode
-} from "./chunk-EJDPRAU2.js";
+} from "./chunk-3VJ4CZDQ.js";
 
 // src/components/Alert.tsx
 import { useState } from "react";
@@ -177,6 +179,7 @@ import { useState as useState2 } from "react";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50, 100, 200, 500, 1e3, 2e3, 5e3];
 function Pagination({
+  size: sizeProp,
   total = 0,
   current,
   defaultCurrent = 1,
@@ -194,6 +197,7 @@ function Pagination({
   className = "",
   ...props
 }) {
+  const controlSize = useControlSize(sizeProp);
   const [size, setSize] = useControllableState({ value: pageSize, defaultValue: Math.max(1, defaultPageSize) });
   const [page, setPage] = useControllableState({ value: current, defaultValue: Math.max(1, defaultCurrent) });
   const [internalRefreshing, setInternalRefreshing] = useState2(false);
@@ -225,14 +229,14 @@ function Pagination({
       if (refreshing === void 0) setInternalRefreshing(false);
     }
   }
-  return /* @__PURE__ */ jsxs2("nav", { className: `sia-pagination ${className}`.trim(), "aria-label": "\u5206\u9875", ...props, children: [
+  return /* @__PURE__ */ jsxs2("nav", { className: `sia-pagination sia-pagination--${controlSize} ${className}`.trim(), "aria-label": "\u5206\u9875", ...props, children: [
     showSizeChanger ? /* @__PURE__ */ jsxs2("div", { className: "sia-pagination__size", children: [
       /* @__PURE__ */ jsx2("span", { children: "\u6BCF\u9875\u663E\u793A" }),
       /* @__PURE__ */ jsx2(
         Select,
         {
           className: "sia-pagination__size-select",
-          size: "small",
+          size: controlSize,
           "aria-label": "\u6BCF\u9875\u6761\u6570",
           value: size,
           options: sizes.map((value) => ({ label: `${value} \u6761`, value })),
@@ -247,7 +251,7 @@ function Pagination({
       Button,
       {
         variant: "text",
-        size: "small",
+        size: controlSize,
         className: "sia-pagination__total",
         disabled: disabled || !onRefreshTotal || loading,
         title: onRefreshTotal ? "\u70B9\u51FB\u5237\u65B0\u603B\u8BB0\u5F55\u6570" : void 0,
@@ -262,15 +266,15 @@ function Pagination({
       }
     ) : null,
     /* @__PURE__ */ jsxs2("div", { className: "sia-pagination__buttons", children: [
-      /* @__PURE__ */ jsx2(Button, { size: "small", variant: "text", "aria-label": "\u7B2C\u4E00\u9875", disabled: disabled || safePage <= 1, onClick: () => change(1), children: /* @__PURE__ */ jsx2(Icon, { name: "double-left", size: 15 }) }),
-      /* @__PURE__ */ jsx2(Button, { size: "small", variant: "text", "aria-label": "\u4E0A\u4E00\u9875", disabled: disabled || safePage <= 1, onClick: () => change(safePage - 1), children: /* @__PURE__ */ jsx2(Icon, { name: "chevron-left", size: 15 }) }),
+      /* @__PURE__ */ jsx2(Button, { size: controlSize, variant: "text", "aria-label": "\u7B2C\u4E00\u9875", disabled: disabled || safePage <= 1, onClick: () => change(1), children: /* @__PURE__ */ jsx2(Icon, { name: "double-left", size: 15 }) }),
+      /* @__PURE__ */ jsx2(Button, { size: controlSize, variant: "text", "aria-label": "\u4E0A\u4E00\u9875", disabled: disabled || safePage <= 1, onClick: () => change(safePage - 1), children: /* @__PURE__ */ jsx2(Icon, { name: "chevron-left", size: 15 }) }),
       /* @__PURE__ */ jsxs2("span", { "aria-live": "polite", children: [
         safePage,
         " / ",
         totalPages
       ] }),
-      /* @__PURE__ */ jsx2(Button, { size: "small", variant: "text", "aria-label": "\u4E0B\u4E00\u9875", disabled: disabled || safePage >= totalPages, onClick: () => change(safePage + 1), children: /* @__PURE__ */ jsx2(Icon, { name: "chevron-right", size: 15 }) }),
-      /* @__PURE__ */ jsx2(Button, { size: "small", variant: "text", "aria-label": "\u6700\u540E\u4E00\u9875", disabled: disabled || safePage >= totalPages, onClick: () => change(totalPages), children: /* @__PURE__ */ jsx2(Icon, { name: "double-right", size: 15 }) })
+      /* @__PURE__ */ jsx2(Button, { size: controlSize, variant: "text", "aria-label": "\u4E0B\u4E00\u9875", disabled: disabled || safePage >= totalPages, onClick: () => change(safePage + 1), children: /* @__PURE__ */ jsx2(Icon, { name: "chevron-right", size: 15 }) }),
+      /* @__PURE__ */ jsx2(Button, { size: controlSize, variant: "text", "aria-label": "\u6700\u540E\u4E00\u9875", disabled: disabled || safePage >= totalPages, onClick: () => change(totalPages), children: /* @__PURE__ */ jsx2(Icon, { name: "double-right", size: 15 }) })
     ] })
   ] });
 }
@@ -315,6 +319,7 @@ function Cascader({
   options,
   value,
   defaultValue,
+  size: sizeProp,
   multiple = false,
   showSearch = false,
   allowClear = false,
@@ -330,6 +335,7 @@ function Cascader({
   className = "",
   ...props
 }) {
+  const size = useControlSize(sizeProp);
   const fields = useMemo(() => ({ label: fieldNames?.label ?? "label", value: fieldNames?.value ?? "value", children: fieldNames?.children ?? "children" }), [fieldNames]);
   const rootRef = useRef(null);
   const popupRef = useRef(null);
@@ -418,7 +424,7 @@ function Cascader({
     if (children?.length) columns.push(children);
   });
   const floating = useFloatingPlaceholder({ mode: placeholderMode, placeholder, filled: selectedPaths.length > 0, active: open });
-  return /* @__PURE__ */ jsxs3("div", { ref: rootRef, className: `sia-cascader${open ? " is-open" : ""}${disabled ? " is-disabled" : ""} ${className}`.trim(), ...props, children: [
+  return /* @__PURE__ */ jsxs3("div", { ref: rootRef, className: `sia-cascader sia-cascader--${size}${open ? " is-open" : ""}${disabled ? " is-disabled" : ""} ${className}`.trim(), ...props, children: [
     /* @__PURE__ */ jsxs3("button", { type: "button", className: `sia-cascader__trigger${floating.className}`, disabled, "aria-haspopup": "listbox", "aria-expanded": open, onClick: toggleOpen, children: [
       /* @__PURE__ */ jsx3("span", { className: "sia-cascader__value", children: display ? multiple && Array.isArray(display) ? display.map((label, index) => /* @__PURE__ */ jsx3("span", { className: "sia-cascader__tag", children: label }, pathKey(selectedPaths[index] ?? []))) : display : /* @__PURE__ */ jsx3("span", { className: "sia-cascader__placeholder", children: placeholder }) }),
       allowClear && selectedPaths.length ? /* @__PURE__ */ jsx3("span", { className: "sia-cascader__clear", role: "button", "aria-label": "\u6E05\u9664\u9009\u62E9", onClick: (event) => {
@@ -1388,6 +1394,7 @@ import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-run
 var Switch = forwardRef2(function Switch2({
   label,
   variant = "standard",
+  size: sizeProp,
   checkedContent,
   uncheckedContent,
   onChange,
@@ -1395,6 +1402,7 @@ var Switch = forwardRef2(function Switch2({
   className = "",
   ...props
 }, ref) {
+  const size = useControlSize(sizeProp);
   const hasContent = checkedContent !== void 0 || uncheckedContent !== void 0;
   const checkedVisual = checkedContent ?? (variant === "segmented" ? "\u5F00" : null);
   const uncheckedVisual = uncheckedContent ?? (variant === "segmented" ? "\u5173" : null);
@@ -1402,7 +1410,7 @@ var Switch = forwardRef2(function Switch2({
     onCheckedChange?.(event.currentTarget.checked);
     onChange?.(event);
   };
-  return /* @__PURE__ */ jsxs9("label", { className: `sia-switch-wrap ${className}`.trim(), children: [
+  return /* @__PURE__ */ jsxs9("label", { className: `sia-switch-wrap sia-switch-wrap--${size} ${className}`.trim(), children: [
     /* @__PURE__ */ jsx9("input", { ref, type: "checkbox", role: "switch", className: "sia-switch-input", onChange: handleChange, ...props }),
     /* @__PURE__ */ jsxs9(
       "span",
@@ -1611,6 +1619,7 @@ function FormRoot({
   form,
   initialValues,
   layout = "horizontal",
+  size: sizeProp,
   placeholderMode,
   disabled = false,
   requiredMark = true,
@@ -1621,16 +1630,17 @@ function FormRoot({
   children,
   ...props
 }) {
+  const size = useControlSize(sizeProp);
   const resolvedPlaceholderMode = usePlaceholderMode(placeholderMode);
   const [internalForm] = useForm(form);
   const instance = internalForm;
   instance.configure(initialValues, { onFinish, onFinishFailed, onValuesChange });
   const context = useMemo4(() => instance, [instance]);
-  return /* @__PURE__ */ jsx9(FormContext.Provider, { value: context, children: /* @__PURE__ */ jsx9(PlaceholderModeContext.Provider, { value: resolvedPlaceholderMode, children: /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx9(FormContext.Provider, { value: context, children: /* @__PURE__ */ jsx9(PlaceholderModeContext.Provider, { value: resolvedPlaceholderMode, children: /* @__PURE__ */ jsx9(ControlSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx9(
     "form",
     {
       ...props,
-      className: `sia-form sia-form--${layout}${disabled ? " is-disabled" : ""} ${className}`.trim(),
+      className: `sia-form sia-form--${layout} sia-form--${size}${disabled ? " is-disabled" : ""} ${className}`.trim(),
       "data-required-mark": requiredMark,
       onSubmit: (event) => {
         event.preventDefault();
@@ -1638,7 +1648,7 @@ function FormRoot({
       },
       children: /* @__PURE__ */ jsx9("fieldset", { disabled, children })
     }
-  ) }) });
+  ) }) }) });
 }
 function defaultEventValue(valuePropName, args) {
   const first = args[0];
@@ -1786,12 +1796,13 @@ var Form = Object.assign(FormRoot, {
 import { createContext as createContext3, forwardRef as forwardRef3, useContext as useContext3, useId as useId4, useMemo as useMemo5 } from "react";
 import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
 var RadioContext = createContext3(null);
-var RadioRoot = forwardRef3(function Radio({ value, children, disabled, checked, defaultChecked, button = false, className = "", onChange, ...props }, ref) {
+var RadioRoot = forwardRef3(function Radio({ value, size: sizeProp, children, disabled, checked, defaultChecked, button = false, className = "", onChange, ...props }, ref) {
+  const size = useControlSize(sizeProp);
   const group = useContext3(RadioContext);
   const fallbackId = useId4();
   const grouped = group !== null;
   const currentChecked = grouped ? group.value === value : checked;
-  return /* @__PURE__ */ jsxs10("label", { className: `sia-radio${button ? " sia-radio--button" : ""}${button && group?.buttonStyle === "solid" ? " sia-radio--solid" : ""}${disabled || group?.disabled ? " is-disabled" : ""} ${className}`.trim(), children: [
+  return /* @__PURE__ */ jsxs10("label", { className: `sia-radio sia-radio--${size}${button ? " sia-radio--button" : ""}${button && group?.buttonStyle === "solid" ? " sia-radio--solid" : ""}${disabled || group?.disabled ? " is-disabled" : ""} ${className}`.trim(), children: [
     /* @__PURE__ */ jsx10(
       "input",
       {
@@ -1819,6 +1830,7 @@ function RadioButton(props) {
   return /* @__PURE__ */ jsx10(RadioRoot, { ...props, button: true });
 }
 function RadioGroup({
+  size: sizeProp,
   value,
   defaultValue,
   options,
@@ -1830,6 +1842,7 @@ function RadioGroup({
   children,
   onChange
 }) {
+  const size = useControlSize(sizeProp);
   const fallbackName = useId4();
   const [currentValue, setValue2] = useControllableState({
     value,
@@ -1846,13 +1859,13 @@ function RadioGroup({
     setValue: setValue2
   }), [buttonStyle, currentValue, disabled, fallbackName, name, setValue2]);
   const Component = optionType === "button" ? RadioButton : RadioRoot;
-  return /* @__PURE__ */ jsx10(RadioContext.Provider, { value: context, children: /* @__PURE__ */ jsxs10("div", { className: `sia-radio-group${optionType === "button" ? " sia-radio-group--button" : ""} ${className}`.trim(), role: "radiogroup", children: [
+  return /* @__PURE__ */ jsx10(ControlSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx10(RadioContext.Provider, { value: context, children: /* @__PURE__ */ jsxs10("div", { className: `sia-radio-group${optionType === "button" ? " sia-radio-group--button" : ""} ${className}`.trim(), role: "radiogroup", children: [
     options?.map((option) => {
       const normalized = typeof option === "object" ? option : { label: String(option), value: option };
       return /* @__PURE__ */ jsx10(Component, { value: normalized.value, disabled: normalized.disabled, children: normalized.label }, normalized.value);
     }),
     children
-  ] }) });
+  ] }) }) });
 }
 var Radio2 = Object.assign(RadioRoot, { Button: RadioButton, Group: RadioGroup });
 
@@ -2047,6 +2060,7 @@ function createDefaultStops(color) {
   return [createStop(color, 0), createStop("#FFFFFF", 100)];
 }
 function ColorPicker({
+  size: sizeProp,
   value,
   defaultValue = "#1677FF",
   mode,
@@ -2064,6 +2078,7 @@ function ColorPicker({
   onClear,
   ...props
 }) {
+  const size = useControlSize(sizeProp);
   const rootRef = useRef6(null);
   const popupRef = useRef6(null);
   const lastEmittedValue = useRef6();
@@ -2164,7 +2179,7 @@ function ColorPicker({
   const triggerBackground = color || "transparent";
   const triggerText = color || "\u65E0\u8272";
   const opaqueColor = rgbaToHex({ ...rgba, a: 100 }, false);
-  return /* @__PURE__ */ jsxs12("div", { ref: rootRef, className: `sia-color-picker${disabled ? " is-disabled" : ""} ${className}`.trim(), ...props, children: [
+  return /* @__PURE__ */ jsxs12("div", { ref: rootRef, className: `sia-color-picker sia-color-picker--${size}${disabled ? " is-disabled" : ""} ${className}`.trim(), ...props, children: [
     /* @__PURE__ */ jsxs12(
       "button",
       {
@@ -2298,7 +2313,7 @@ function seconds(value) {
 function TimePicker({
   value,
   defaultValue = "",
-  size = "medium",
+  size: sizeProp,
   status = "default",
   allowClear = true,
   use12Hours = false,
@@ -2318,6 +2333,7 @@ function TimePicker({
   step,
   ...props
 }) {
+  const size = useControlSize(sizeProp);
   const id = useId5();
   const rootRef = useRef7(null);
   const inputRef = useRef7(null);
@@ -2444,13 +2460,14 @@ function TimePicker({
   ] });
 }
 function TimeRangePicker({ value, defaultValue = ["", ""], placeholder = ["\u5F00\u59CB\u65F6\u95F4", "\u7ED3\u675F\u65F6\u95F4"], separator = "\u2192", onChange, className = "", style, ...props }) {
+  const size = useControlSize(props.size);
   const [currentValue, setValue2] = useControllableState({ value: value === void 0 ? void 0 : Array.isArray(value) ? value : ["", ""], defaultValue, onChange });
   function update(index, next) {
     const pair = [currentValue[0], currentValue[1]];
     pair[index] = next;
     setValue2(pair);
   }
-  return /* @__PURE__ */ jsxs13("span", { style, className: `sia-time-range sia-picker--${props.size ?? "medium"} sia-picker--${props.status ?? "default"}${props.disabled ? " is-disabled" : ""} ${className}`.trim(), children: [
+  return /* @__PURE__ */ jsxs13("span", { style, className: `sia-time-range sia-picker--${size} sia-picker--${props.status ?? "default"}${props.disabled ? " is-disabled" : ""} ${className}`.trim(), children: [
     /* @__PURE__ */ jsx13(TimePicker, { ...props, "aria-label": props["aria-label"] ? props["aria-label"] + "\u5F00\u59CB\u65F6\u95F4" : "\u5F00\u59CB\u65F6\u95F4", value: currentValue[0], placeholder: placeholder[0], max: currentValue[1] && (!props.max || seconds(currentValue[1]) < seconds(String(props.max))) ? currentValue[1] : props.max, onChange: (next) => update(0, next) }),
     /* @__PURE__ */ jsx13("span", { className: "sia-time-range__separator", children: separator }),
     /* @__PURE__ */ jsx13(TimePicker, { ...props, id: props.id ? props.id + "-end" : void 0, "aria-label": props["aria-label"] ? props["aria-label"] + "\u7ED3\u675F\u65F6\u95F4" : "\u7ED3\u675F\u65F6\u95F4", value: currentValue[1], placeholder: placeholder[1], min: currentValue[0] && (!props.min || seconds(currentValue[0]) > seconds(String(props.min))) ? currentValue[0] : props.min, onChange: (next) => update(1, next) })
@@ -2496,7 +2513,7 @@ function TreeSelect({
   searchPlaceholder = "\u641C\u7D22\u8282\u70B9",
   maxTagCount = 3,
   disabled = false,
-  size = "medium",
+  size: sizeProp,
   status = "default",
   className = "",
   onChange,
@@ -2523,6 +2540,7 @@ function TreeSelect({
   onDeselect,
   ...props
 }) {
+  const size = useControlSize(sizeProp);
   const rootRef = useRef8(null);
   const popupRef = useRef8(null);
   const nodeIndex = useMemo6(() => {
@@ -3920,7 +3938,7 @@ var InputNumber = forwardRef4(function InputNumber2({
   max,
   step = 1,
   precision,
-  size = "medium",
+  size: sizeProp,
   status = "default",
   prefix,
   suffix,
@@ -3935,6 +3953,7 @@ var InputNumber = forwardRef4(function InputNumber2({
   onKeyDown,
   ...props
 }, forwardedRef) {
+  const size = useControlSize(sizeProp);
   const fallbackId = useId7();
   const inputId = id ?? fallbackId;
   const localRef = useRef11(null);
@@ -5786,87 +5805,231 @@ function applyColumnSettingsToTree(columns, items) {
   }).sort((left, right) => left.order - right.order);
   return walk(columns).map((entry) => entry.column);
 }
-function ColumnSettingPanel({ open, items, columns, onClose, onApply }) {
+function orderColumnSettings(items) {
+  const rank = (item) => item.fixed === "left" ? 0 : item.fixed === "right" ? 2 : 1;
+  return [...items].sort((a, b) => rank(a) - rank(b)).map((item, order) => ({ ...item, order }));
+}
+function ColumnSettingPanel({ open, items, columns, loading, loadError, onRetry, onClose, onApply }) {
   const [draft, setDraft] = useState16(items);
-  const dragIndex = useRef14(null);
+  const listRef = useRef14(null);
+  const cancelDrag = useRef14(null);
+  const [preview, setPreview] = useState16(null);
   useEffect12(() => {
-    if (open) setDraft(items);
+    cancelDrag.current?.();
+    if (open) setDraft(orderColumnSettings(items));
   }, [items, open]);
+  useEffect12(() => () => cancelDrag.current?.(), []);
   const labels = new Map(flattenTableColumns(columns).map((column) => [column.key, getColumnLabel(column)]));
   const visibleCount = draft.filter((item) => item.visible).length;
-  function move(index, offset) {
-    const target = index + offset;
-    if (target < 0 || target >= draft.length) return;
-    const next = [...draft];
-    const [item] = next.splice(index, 1);
-    next.splice(target, 0, item);
-    setDraft(next.map((entry, order) => ({ ...entry, order })));
-  }
   function setFixed(key, fixed) {
-    setDraft((previous) => previous.map((item) => item.key === key ? { ...item, fixed } : item));
+    setDraft((previous) => {
+      const item = previous.find((entry) => entry.key === key);
+      if (!item) return previous;
+      const next = previous.filter((entry) => entry.key !== key);
+      const updated = { ...item, fixed };
+      const target = fixed === "left" ? next.filter((entry) => entry.fixed === "left").length : fixed === "right" ? next.findIndex((entry) => entry.fixed === "right") : item.fixed === "left" ? next.filter((entry) => entry.fixed === "left").length : next.findIndex((entry) => entry.fixed === "right");
+      next.splice(target < 0 ? next.length : target, 0, updated);
+      return orderColumnSettings(next);
+    });
+  }
+  function startSort(event, key) {
+    if (loading || loadError || event.button !== 0 || event.target.closest("button, input, label")) return;
+    const list = listRef.current;
+    if (!list) return;
+    cancelDrag.current?.();
+    const original = [...draft];
+    const from = original.findIndex((item) => item.key === key);
+    const elements = Array.from(list.querySelectorAll(".sia-table-settings__item"));
+    const rects = elements.map((element) => element.getBoundingClientRect());
+    const gap = parseFloat(getComputedStyle(list).rowGap) || 0;
+    const positions = original.map((_, index) => index);
+    const startY = event.clientY;
+    let lastY = startY;
+    let moved = false;
+    let next = original;
+    let frame = 0;
+    let scrollParent = list.parentElement;
+    while (scrollParent && !(scrollParent.scrollHeight > scrollParent.clientHeight && /auto|scroll/.test(getComputedStyle(scrollParent).overflowY))) scrollParent = scrollParent.parentElement;
+    const initialScroll = scrollParent?.scrollTop ?? 0;
+    const target = event.currentTarget;
+    target.setPointerCapture(event.pointerId);
+    const previousUserSelect = document.body.style.userSelect;
+    function update() {
+      const dy = lastY - startY + (scrollParent?.scrollTop ?? 0) - initialScroll;
+      if (!moved && Math.abs(dy) < 4) return;
+      moved = true;
+      document.body.style.userSelect = "none";
+      const center = rects[from].top + rects[from].height / 2 + dy;
+      let to = from;
+      for (const index of positions) {
+        if (index > from && center > rects[index].top + rects[index].height / 2) to = index;
+        if (index < from && center < rects[index].top + rects[index].height / 2) {
+          to = index;
+          break;
+        }
+      }
+      next = [...original];
+      const [item] = next.splice(from, 1);
+      next.splice(to, 0, { ...item, fixed: original[to].fixed });
+      const offsets = {};
+      let top = rects[0].top;
+      for (const entry of next) {
+        const index = original.findIndex((item2) => item2.key === entry.key);
+        offsets[entry.key] = entry.key === key ? dy : top - rects[index].top;
+        top += rects[index].height + gap;
+      }
+      setPreview({ key, fixed: original[to].fixed, offsets });
+    }
+    function tick() {
+      if (moved && scrollParent) {
+        const bounds = scrollParent.getBoundingClientRect();
+        const delta = lastY < bounds.top + 40 ? -10 : lastY > bounds.bottom - 40 ? 10 : 0;
+        if (delta) {
+          scrollParent.scrollTop += delta;
+          update();
+        }
+      }
+      frame = requestAnimationFrame(tick);
+    }
+    function move(moveEvent) {
+      if (moveEvent.pointerId !== event.pointerId) return;
+      lastY = moveEvent.clientY;
+      update();
+    }
+    function finish(commit) {
+      document.removeEventListener("pointermove", move);
+      document.removeEventListener("pointerup", up);
+      document.removeEventListener("pointercancel", cancel);
+      document.removeEventListener("keydown", escape, true);
+      window.removeEventListener("blur", cancel);
+      cancelAnimationFrame(frame);
+      if (target.hasPointerCapture(event.pointerId)) target.releasePointerCapture(event.pointerId);
+      document.body.style.userSelect = previousUserSelect;
+      cancelDrag.current = null;
+      setPreview(null);
+      if (commit && moved) setDraft(orderColumnSettings(next));
+    }
+    function up(upEvent) {
+      if (upEvent.pointerId === event.pointerId) {
+        lastY = upEvent.clientY;
+        update();
+        finish(true);
+      }
+    }
+    function cancel() {
+      finish(false);
+    }
+    function escape(event2) {
+      if (event2.key === "Escape") {
+        event2.preventDefault();
+        event2.stopPropagation();
+        cancel();
+      }
+    }
+    cancelDrag.current = cancel;
+    document.addEventListener("pointermove", move);
+    document.addEventListener("pointerup", up);
+    document.addEventListener("pointercancel", cancel);
+    document.addEventListener("keydown", escape, true);
+    window.addEventListener("blur", cancel);
+    frame = requestAnimationFrame(tick);
   }
   return /* @__PURE__ */ jsxs19(Drawer2, { open, title: "\u5217\u8BBE\u7F6E", size: 440, onOpenChange: (next) => {
     if (!next) onClose();
   }, footer: /* @__PURE__ */ jsxs19(Fragment6, { children: [
     /* @__PURE__ */ jsx20(Button, { onClick: onClose, children: "\u53D6\u6D88" }),
-    /* @__PURE__ */ jsx20(Button, { variant: "primary", onClick: () => onApply(draft), children: "\u5E94\u7528" })
+    /* @__PURE__ */ jsx20(Button, { variant: "primary", disabled: loading || loadError, onClick: () => onApply(draft), children: "\u5E94\u7528" })
   ] }), children: [
-    /* @__PURE__ */ jsxs19("label", { className: "sia-table-settings__all", children: [
-      /* @__PURE__ */ jsx20(TableCheckbox, { label: "\u5168\u9009\u5217", checked: visibleCount === draft.length && draft.length > 0, indeterminate: visibleCount > 0 && visibleCount < draft.length, onChange: (checked) => setDraft((previous) => previous.map((item) => ({ ...item, visible: checked }))) }),
-      /* @__PURE__ */ jsxs19("span", { children: [
-        "\u5168\u9009\uFF08",
-        visibleCount,
-        "/",
-        draft.length,
-        "\uFF09"
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx20("div", { className: "sia-table-settings__list", children: draft.map((item, index) => /* @__PURE__ */ jsxs19("div", { className: "sia-table-settings__item", draggable: true, onDragStart: () => {
-      dragIndex.current = index;
-    }, onDragOver: (event) => event.preventDefault(), onDrop: () => {
-      if (dragIndex.current == null || dragIndex.current === index) return;
-      const next = [...draft];
-      const [dragged] = next.splice(dragIndex.current, 1);
-      next.splice(index, 0, dragged);
-      setDraft(next.map((entry, order) => ({ ...entry, order })));
-      dragIndex.current = null;
-    }, children: [
-      /* @__PURE__ */ jsx20(Icon, { name: "menu", size: 15 }),
-      /* @__PURE__ */ jsx20(TableCheckbox, { label: `\u663E\u793A${labels.get(item.key) ?? item.key}\u5217`, checked: item.visible, onChange: (checked) => setDraft((previous) => previous.map((entry) => entry.key === item.key ? { ...entry, visible: checked } : entry)) }),
-      /* @__PURE__ */ jsx20("span", { className: "sia-table-settings__name", title: labels.get(item.key) ?? item.key, children: labels.get(item.key) ?? item.key }),
-      /* @__PURE__ */ jsxs19("div", { className: "sia-table-settings__actions", children: [
-        /* @__PURE__ */ jsx20(Button, { size: "small", variant: "text", icon: /* @__PURE__ */ jsx20(Icon, { name: "arrow-up", size: 13 }), "aria-label": "\u4E0A\u79FB", disabled: index === 0, onClick: () => move(index, -1) }),
-        /* @__PURE__ */ jsx20(Button, { size: "small", variant: "text", icon: /* @__PURE__ */ jsx20(Icon, { name: "arrow-down", size: 13 }), "aria-label": "\u4E0B\u79FB", disabled: index === draft.length - 1, onClick: () => move(index, 1) }),
-        /* @__PURE__ */ jsx20(Button, { size: "small", variant: item.fixed === "left" ? "primary" : "text", "aria-label": "\u5DE6\u56FA\u5B9A", onClick: () => setFixed(item.key, item.fixed === "left" ? void 0 : "left"), children: "\u5DE6" }),
-        /* @__PURE__ */ jsx20(Button, { size: "small", variant: item.fixed === "right" ? "primary" : "text", "aria-label": "\u53F3\u56FA\u5B9A", onClick: () => setFixed(item.key, item.fixed === "right" ? void 0 : "right"), children: "\u53F3" })
-      ] })
-    ] }, item.key)) })
+    loading ? /* @__PURE__ */ jsx20("p", { role: "status", children: "\u6B63\u5728\u8BFB\u53D6\u5217\u914D\u7F6E\u2026" }) : null,
+    loadError ? /* @__PURE__ */ jsxs19("p", { role: "alert", children: [
+      "\u8BFB\u53D6\u5217\u914D\u7F6E\u5931\u8D25\u3002",
+      /* @__PURE__ */ jsx20(Button, { variant: "link", onClick: onRetry, children: "\u91CD\u8BD5" })
+    ] }) : null,
+    /* @__PURE__ */ jsxs19("fieldset", { disabled: loading || loadError, style: { border: 0, padding: 0, margin: 0, minWidth: 0 }, "aria-busy": loading, children: [
+      /* @__PURE__ */ jsxs19("label", { className: "sia-table-settings__all", children: [
+        /* @__PURE__ */ jsx20(TableCheckbox, { label: "\u5168\u9009\u5217", checked: visibleCount === draft.length && draft.length > 0, indeterminate: visibleCount > 0 && visibleCount < draft.length, onChange: (checked) => setDraft((previous) => previous.map((item) => ({ ...item, visible: checked }))) }),
+        /* @__PURE__ */ jsxs19("span", { children: [
+          "\u5168\u9009\uFF08",
+          visibleCount,
+          "/",
+          draft.length,
+          "\uFF09"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx20("div", { ref: listRef, className: `sia-table-settings__list${preview ? " is-sorting" : ""}`, children: draft.map((item) => /* @__PURE__ */ jsxs19(
+        "div",
+        {
+          "data-column-key": item.key,
+          className: `sia-table-settings__item${preview?.key === item.key ? " is-dragging" : ""}`,
+          style: preview ? { transform: `translateY(${preview.offsets[item.key] ?? 0}px)` } : void 0,
+          onPointerDown: (event) => startSort(event, item.key),
+          children: [
+            /* @__PURE__ */ jsx20(Icon, { name: "menu", size: 15 }),
+            /* @__PURE__ */ jsx20(TableCheckbox, { label: `\u663E\u793A${labels.get(item.key) ?? item.key}\u5217`, checked: item.visible, onChange: (checked) => setDraft((previous) => previous.map((entry) => entry.key === item.key ? { ...entry, visible: checked } : entry)) }),
+            /* @__PURE__ */ jsx20("span", { className: "sia-table-settings__name", title: labels.get(item.key) ?? item.key, children: labels.get(item.key) ?? item.key }),
+            /* @__PURE__ */ jsxs19("div", { className: "sia-table-settings__actions", children: [
+              /* @__PURE__ */ jsx20(Button, { size: "small", variant: (preview?.key === item.key ? preview.fixed : item.fixed) === "left" ? "primary" : "text", "aria-label": "\u5DE6\u56FA\u5B9A", onClick: () => setFixed(item.key, item.fixed === "left" ? void 0 : "left"), children: "\u5DE6" }),
+              /* @__PURE__ */ jsx20(Button, { size: "small", variant: (preview?.key === item.key ? preview.fixed : item.fixed) === "right" ? "primary" : "text", "aria-label": "\u53F3\u56FA\u5B9A", onClick: () => setFixed(item.key, item.fixed === "right" ? void 0 : "right"), children: "\u53F3" })
+            ] })
+          ]
+        },
+        item.key
+      )) })
+    ] })
   ] });
 }
+var columnSettingLoadTokens = /* @__PURE__ */ new WeakMap();
 function createColumnSettingPlugin(options = {}) {
   const baseItems = (context) => createColumnSettingItems(context.baseColumns, options.defaultVisibleKeys);
   const currentItems = (context) => context.state.items?.length ? context.state.items : baseItems(context);
   const save = (snapshot) => options.adapter && options.scope ? options.adapter.save(options.scope, snapshot).catch(() => void 0) : Promise.resolve();
   function apply(items, context, persist = true) {
-    const normalized = [...items].sort((a, b) => a.order - b.order).map((item, order) => ({ ...item, order }));
+    const normalized = orderColumnSettings([...items].sort((a, b) => a.order - b.order));
     context.setState((state) => ({ ...state, items: normalized, open: false }));
     const columnMap = new Map(flattenTableColumns(context.baseColumns).map((column) => [column.key, column]));
     options.onVisibleChange?.(normalized.filter((item) => item.visible).map((item) => columnMap.get(item.key)).filter(Boolean));
     options.onOrderChange?.(normalized.map((item) => columnMap.get(item.key)).filter(Boolean));
     if (persist) void save({ columns: normalized, pageSize: context.state.pageSize, version: 1 });
   }
+  function loadSettings(context, open = false) {
+    const fallback = baseItems(context);
+    const token = /* @__PURE__ */ Symbol("column-settings-load");
+    columnSettingLoadTokens.set(context.setPluginState, token);
+    let cancelled = false;
+    const hasAdapter = Boolean(options.adapter && options.scope);
+    context.setState((state) => ({
+      ...state,
+      open: open || state.open,
+      items: state.items.length ? state.items : fallback,
+      loading: hasAdapter,
+      loaded: !hasAdapter,
+      loadError: false,
+      loadToken: token
+    }));
+    if (hasAdapter) void Promise.resolve().then(() => options.adapter.load(options.scope)).then((snapshot) => {
+      if (cancelled || columnSettingLoadTokens.get(context.setPluginState) !== token) return;
+      if (snapshot?.pageSize) context.setPluginState("pagination", (state) => ({ ...state, pageSize: snapshot.pageSize }));
+      context.setState((state) => state.loadToken !== token ? state : {
+        ...state,
+        items: snapshot?.columns?.length ? snapshot.columns : fallback,
+        pageSize: snapshot?.pageSize,
+        loaded: true,
+        loading: false,
+        loadError: false
+      });
+    }).catch(() => {
+      if (!cancelled) context.setState((state) => state.loadToken !== token ? state : { ...state, loading: false, loaded: true, loadError: true });
+    });
+    return () => {
+      cancelled = true;
+    };
+  }
   return {
     id: "columnSetting",
     order: 10,
     initialState: { open: false, items: [], loaded: false },
     onMount(context) {
-      const fallback = baseItems(context);
-      context.setState((state) => ({ ...state, items: state.items.length ? state.items : fallback, loaded: !options.adapter }));
-      if (options.adapter && options.scope) void options.adapter.load(options.scope).then((snapshot) => {
-        const merged = snapshot?.columns?.length ? snapshot.columns : fallback;
-        context.setState((state) => ({ ...state, items: merged, pageSize: snapshot?.pageSize, loaded: true }));
-        if (snapshot?.pageSize) context.setPluginState("pagination", (state) => ({ ...state, pageSize: snapshot.pageSize }));
-      }).catch(() => context.setState((state) => ({ ...state, items: fallback, loaded: true })));
+      return loadSettings(context);
     },
     transformColumns(columns, context) {
       return applyColumnSettingsToTree(columns, currentItems(context));
@@ -5904,7 +6067,7 @@ function createColumnSettingPlugin(options = {}) {
       ];
       return /* @__PURE__ */ jsx20(Dropdown, { disabled: options.buttonProps?.disabled || options.buttonProps?.loading, trigger: ["hover", "click"], placement: "bottomRight", popupClassName: "sia-table__settings-dropdown", menu: { items, onClick: ({ key }) => {
         if (key === "builtin:export") void exportApi().download();
-        else if (key === "builtin:columns") context.setState((state) => ({ ...state, open: true }));
+        else if (key === "builtin:columns") loadSettings(context, true);
         else void customItems.find((item) => "custom:" + item.key === key)?.onClick?.(context);
       } }, children: /* @__PURE__ */ jsx20(
         Button,
@@ -5918,8 +6081,10 @@ function createColumnSettingPlugin(options = {}) {
         }
       ) });
     },
-    renderOverlay: (context) => /* @__PURE__ */ jsx20(ColumnSettingPanel, { open: context.state.open, items: currentItems(context), columns: context.baseColumns, onClose: () => context.setState((state) => ({ ...state, open: false })), onApply: (items) => apply(items, context) }),
-    getApi: (context) => ({ open: () => context.setState((state) => ({ ...state, open: true })), close: () => context.setState((state) => ({ ...state, open: false })), getSettings: () => currentItems(context), apply: (items) => apply(items, context) })
+    renderOverlay: (context) => /* @__PURE__ */ jsx20(ColumnSettingPanel, { open: context.state.open, loading: context.state.loading, loadError: context.state.loadError, onRetry: () => loadSettings(context, true), items: currentItems(context), columns: context.baseColumns, onClose: () => context.setState((state) => ({ ...state, open: false })), onApply: (items) => apply(items, context) }),
+    getApi: (context) => ({ open: () => {
+      loadSettings(context, true);
+    }, close: () => context.setState((state) => ({ ...state, open: false })), getSettings: () => currentItems(context), apply: (items) => apply(items, context) })
   };
 }
 function createLocalStorageTableSettingsAdapter(prefix = "sia-table") {
@@ -6617,11 +6782,12 @@ function TableInner(props, ref) {
     let labelRendered = false;
     return /* @__PURE__ */ jsx21("tr", { className: `sia-table__summary-row ${summary.className ?? ""}`.trim(), children: leafColumns.map((column) => {
       const value = summary.values[column.key];
-      const content = value !== void 0 ? value : !labelRendered && summary.label !== void 0 ? (labelRendered = true, summary.label) : null;
+      const isLabel = value === void 0 && !labelRendered && summary.label !== void 0;
+      const content = value !== void 0 ? value : isLabel ? (labelRendered = true, summary.label) : null;
       const fixed = normalizeFixed(column.fixed);
       const fixedEdgeClass = fixed === "left" && column.key === leftFixedEdgeKey ? " sia-table__cell--fixed-left-edge" : fixed === "right" && column.key === rightFixedEdgeKey ? " sia-table__cell--fixed-right-edge" : "";
       const autoWidthClass = column.autoWidth ? " sia-table__cell--auto-width" : "";
-      return /* @__PURE__ */ jsx21("td", { "data-column-key": column.key, className: `sia-table__cell sia-table__cell--${column.align ?? "left"} sia-table__summary-cell${fixed ? ` sia-table__cell--fixed sia-table__cell--fixed-${fixed}` : ""}${fixedEdgeClass}${autoWidthClass}`, style: getFixedStyle(column), children: content }, column.key);
+      return /* @__PURE__ */ jsx21("td", { "data-column-key": column.key, className: `sia-table__cell sia-table__cell--${column.align ?? "left"} sia-table__summary-cell${isLabel ? " sia-table__summary-cell--label" : ""}${fixed ? ` sia-table__cell--fixed sia-table__cell--fixed-${fixed}` : ""}${fixedEdgeClass}${autoWidthClass}`, style: getFixedStyle(column), children: isLabel ? /* @__PURE__ */ jsx21("span", { className: "sia-table__summary-label", title: typeof content === "string" ? content : void 0, children: content }) : content }, column.key);
     }) }, summary.key);
   }
   return /* @__PURE__ */ jsxs20(
@@ -7191,7 +7357,7 @@ var InputSelect = forwardRef7(function InputSelect2({
   showValue = false,
   placeholder = "\u8BF7\u9009\u62E9",
   placeholderMode,
-  size = "medium",
+  size: sizeProp,
   status,
   disabled = false,
   loading = false,
@@ -7206,6 +7372,7 @@ var InputSelect = forwardRef7(function InputSelect2({
   onOpenChange,
   ...inputProps
 }, forwardedRef) {
+  const size = useControlSize(sizeProp);
   const [internal, setInternal] = useState18(defaultValue);
   const current = value !== void 0 ? value : internal;
   const values = current == null ? [] : Array.isArray(current) ? current : [current];