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

package/dist/core.css

@@ -4443,6 +4443,22 @@ fieldset:disabled .sia-input-number__floating-placeholder {
     transition: none;
   }
 }
+.sia-table-settings__item.is-dragging {
+  border-color: var(--sia-color-primary);
+  background: var(--sia-color-primary-light);
+  opacity: .65;
+  outline: 1px dashed var(--sia-color-primary);
+}
+.sia-table .sia-table__summary-cell--label {
+  padding-inline: 4px;
+}
+.sia-table__summary-label {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 
 /* src/components-extra.css */
 .sia-flex {

package/dist/index.cjs

@@ -11543,87 +11543,163 @@ 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] = (0, import_react44.useState)(items);
-  const dragIndex = (0, import_react44.useRef)(null);
+  const drag = (0, import_react44.useRef)(null);
+  const [draggingKey, setDraggingKey] = (0, import_react44.useState)(null);
   (0, import_react44.useEffect)(() => {
-    if (open) setDraft(items);
+    if (open) setDraft(orderColumnSettings(items));
+    drag.current = null;
+    setDraggingKey(null);
   }, [items, open]);
   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 previewMove(key, clientY, element) {
+    const active = drag.current;
+    if (!active || active.key === key || loading || loadError) return;
+    const rect = element.getBoundingClientRect();
+    setDraft((previous) => {
+      const from = previous.findIndex((entry) => entry.key === active.key);
+      const to = previous.findIndex((entry) => entry.key === key);
+      if (from < 0 || to < 0 || previous[from].fixed !== previous[to].fixed) return previous;
+      if (from < to ? clientY < rect.top + rect.height / 2 : clientY > rect.top + rect.height / 2) return previous;
+      const next = [...previous];
+      const [moved] = next.splice(from, 1);
+      next.splice(to, 0, moved);
+      return orderColumnSettings(next);
+    });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Drawer2, { open, title: "\u5217\u8BBE\u7F6E", size: 440, onOpenChange: (next) => {
     if (!next) onClose();
   }, footer: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Button, { onClick: onClose, children: "\u53D6\u6D88" }),
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Button, { variant: "primary", onClick: () => onApply(draft), children: "\u5E94\u7528" })
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Button, { variant: "primary", disabled: loading || loadError, onClick: () => onApply(draft), children: "\u5E94\u7528" })
   ] }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: "sia-table-settings__all", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(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__ */ (0, import_jsx_runtime47.jsxs)("span", { children: [
-        "\u5168\u9009\uFF08",
-        visibleCount,
-        "/",
-        draft.length,
-        "\uFF09"
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "sia-table-settings__list", children: draft.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("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__ */ (0, import_jsx_runtime47.jsx)(Icon, { name: "menu", size: 15 }),
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(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__ */ (0, import_jsx_runtime47.jsx)("span", { className: "sia-table-settings__name", title: labels.get(item.key) ?? item.key, children: labels.get(item.key) ?? item.key }),
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "sia-table-settings__actions", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Button, { size: "small", variant: "text", icon: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Icon, { name: "arrow-up", size: 13 }), "aria-label": "\u4E0A\u79FB", disabled: index === 0, onClick: () => move(index, -1) }),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Button, { size: "small", variant: "text", icon: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Icon, { name: "arrow-down", size: 13 }), "aria-label": "\u4E0B\u79FB", disabled: index === draft.length - 1, onClick: () => move(index, 1) }),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(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__ */ (0, import_jsx_runtime47.jsx)(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__ */ (0, import_jsx_runtime47.jsx)("p", { role: "status", children: "\u6B63\u5728\u8BFB\u53D6\u5217\u914D\u7F6E\u2026" }) : null,
+    loadError ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("p", { role: "alert", children: [
+      "\u8BFB\u53D6\u5217\u914D\u7F6E\u5931\u8D25\u3002",
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Button, { variant: "link", onClick: onRetry, children: "\u91CD\u8BD5" })
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("fieldset", { disabled: loading || loadError, style: { border: 0, padding: 0, margin: 0, minWidth: 0 }, "aria-busy": loading, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: "sia-table-settings__all", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(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__ */ (0, import_jsx_runtime47.jsxs)("span", { children: [
+          "\u5168\u9009\uFF08",
+          visibleCount,
+          "/",
+          draft.length,
+          "\uFF09"
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "sia-table-settings__list", onDragOver: (event) => {
+        if (drag.current) event.preventDefault();
+      }, onDrop: (event) => {
+        event.preventDefault();
+        if (drag.current) drag.current.dropped = true;
+      }, children: draft.map((item) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+        "div",
+        {
+          "data-column-key": item.key,
+          className: `sia-table-settings__item${draggingKey === item.key ? " is-dragging" : ""}`,
+          draggable: !loading && !loadError,
+          onDragStart: (event) => {
+            drag.current = { key: item.key, original: draft, dropped: false };
+            event.dataTransfer.effectAllowed = "move";
+            event.dataTransfer.setData("text/plain", item.key);
+            setDraggingKey(item.key);
+          },
+          onDragOver: (event) => {
+            event.preventDefault();
+            event.dataTransfer.dropEffect = "move";
+            previewMove(item.key, event.clientY, event.currentTarget);
+          },
+          onDragEnd: () => {
+            if (drag.current && !drag.current.dropped) setDraft(drag.current.original);
+            drag.current = null;
+            setDraggingKey(null);
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Icon, { name: "menu", size: 15 }),
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(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__ */ (0, import_jsx_runtime47.jsx)("span", { className: "sia-table-settings__name", title: labels.get(item.key) ?? item.key, children: labels.get(item.key) ?? item.key }),
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "sia-table-settings__actions", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(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__ */ (0, import_jsx_runtime47.jsx)(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
+      )) })
+    ] })
   ] });
 }
+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));
@@ -11661,7 +11737,7 @@ function createColumnSettingPlugin(options = {}) {
       ];
       return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(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__ */ (0, import_jsx_runtime47.jsx)(
         Button,
@@ -11675,8 +11751,10 @@ function createColumnSettingPlugin(options = {}) {
         }
       ) });
     },
-    renderOverlay: (context) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(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__ */ (0, import_jsx_runtime47.jsx)(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") {
@@ -12374,11 +12452,12 @@ function TableInner(props, ref) {
     let labelRendered = false;
     return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("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__ */ (0, import_jsx_runtime48.jsx)("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__ */ (0, import_jsx_runtime48.jsx)("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__ */ (0, import_jsx_runtime48.jsx)("span", { className: "sia-table__summary-label", title: typeof content === "string" ? content : void 0, children: content }) : content }, column.key);
     }) }, summary.key);
   }
   return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(

package/dist/index.css

@@ -4443,6 +4443,22 @@ fieldset:disabled .sia-input-number__floating-placeholder {
     transition: none;
   }
 }
+.sia-table-settings__item.is-dragging {
+  border-color: var(--sia-color-primary);
+  background: var(--sia-color-primary-light);
+  opacity: .65;
+  outline: 1px dashed var(--sia-color-primary);
+}
+.sia-table .sia-table__summary-cell--label {
+  padding-inline: 4px;
+}
+.sia-table__summary-label {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 
 /* src/components-extra.css */
 .sia-flex {

package/dist/index.d.cts

@@ -1209,6 +1209,9 @@ interface ColumnSettingState {
     open: boolean;
     items: readonly TableColumnSettingItem[];
     loaded: boolean;
+    loading?: boolean;
+    loadError?: boolean;
+    loadToken?: symbol;
     pageSize?: number;
 }
 interface TableColumnSettingApi {

package/dist/index.d.ts

@@ -1209,6 +1209,9 @@ interface ColumnSettingState {
     open: boolean;
     items: readonly TableColumnSettingItem[];
     loaded: boolean;
+    loading?: boolean;
+    loadError?: boolean;
+    loadToken?: symbol;
     pageSize?: number;
 }
 interface TableColumnSettingApi {

package/dist/index.js

@@ -5786,87 +5786,163 @@ 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 drag = useRef14(null);
+  const [draggingKey, setDraggingKey] = useState16(null);
   useEffect12(() => {
-    if (open) setDraft(items);
+    if (open) setDraft(orderColumnSettings(items));
+    drag.current = null;
+    setDraggingKey(null);
   }, [items, open]);
   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 previewMove(key, clientY, element) {
+    const active = drag.current;
+    if (!active || active.key === key || loading || loadError) return;
+    const rect = element.getBoundingClientRect();
+    setDraft((previous) => {
+      const from = previous.findIndex((entry) => entry.key === active.key);
+      const to = previous.findIndex((entry) => entry.key === key);
+      if (from < 0 || to < 0 || previous[from].fixed !== previous[to].fixed) return previous;
+      if (from < to ? clientY < rect.top + rect.height / 2 : clientY > rect.top + rect.height / 2) return previous;
+      const next = [...previous];
+      const [moved] = next.splice(from, 1);
+      next.splice(to, 0, moved);
+      return orderColumnSettings(next);
+    });
   }
   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", { className: "sia-table-settings__list", onDragOver: (event) => {
+        if (drag.current) event.preventDefault();
+      }, onDrop: (event) => {
+        event.preventDefault();
+        if (drag.current) drag.current.dropped = true;
+      }, children: draft.map((item) => /* @__PURE__ */ jsxs19(
+        "div",
+        {
+          "data-column-key": item.key,
+          className: `sia-table-settings__item${draggingKey === item.key ? " is-dragging" : ""}`,
+          draggable: !loading && !loadError,
+          onDragStart: (event) => {
+            drag.current = { key: item.key, original: draft, dropped: false };
+            event.dataTransfer.effectAllowed = "move";
+            event.dataTransfer.setData("text/plain", item.key);
+            setDraggingKey(item.key);
+          },
+          onDragOver: (event) => {
+            event.preventDefault();
+            event.dataTransfer.dropEffect = "move";
+            previewMove(item.key, event.clientY, event.currentTarget);
+          },
+          onDragEnd: () => {
+            if (drag.current && !drag.current.dropped) setDraft(drag.current.original);
+            drag.current = null;
+            setDraggingKey(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: 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
+      )) })
+    ] })
   ] });
 }
+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 +5980,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 +5994,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 +6695,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(

package/package.json

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