@canvas-components/react-components 0.2.1 → 0.3.1

package/dist/index.d.cts

@@ -23,6 +23,12 @@ declare const ReactCheckbox: react.ForwardRefExoticComponent<ReactCheckboxProps
 
 /** 通用过滤条件操作符。 */
 type ReactFilterConditionOperator = "none" | "eq" | "neq" | "gt" | "gte" | "lt" | "lte" | "between" | "notBetween" | "startsWith" | "notStartsWith" | "endsWith" | "notEndsWith" | "includes" | "notIncludes" | "blank" | "notBlank";
+/** 通用过滤条件。 */
+interface ReactFilterPanelCondition {
+    operator: ReactFilterConditionOperator;
+    value?: string;
+    secondValue?: string;
+}
 /** 通用过滤面板草稿。 */
 interface ReactFilterPanelValue {
     keyword: string;
@@ -37,6 +43,8 @@ interface ReactFilterPanelValue {
     secondConditionOperator?: ReactFilterConditionOperator;
     secondConditionValue?: string;
     secondConditionSecondValue?: string;
+    /** 动态条件列表；存在时优先于旧的两条件字段。 */
+    conditions?: ReactFilterPanelCondition[];
 }
 /** 通用过滤候选项。 */
 interface ReactFilterPanelOption {
@@ -67,6 +75,9 @@ interface ReactFilterPanelTexts {
     relationOrLabel: string;
     resetAction: string;
     applyAction: string;
+    conditionLabel?: string;
+    addConditionAction?: string;
+    deleteConditionAction?: string;
 }
 /** 通用过滤面板请求。 */
 interface ReactFilterPanelRequest {
@@ -1130,4 +1141,4 @@ declare function useReactContentScale(): ReactContentScaleValue;
  */
 declare const REACT_COMPONENT_PREFIX = "canvas-react";
 
-export { REACT_COMPONENT_PREFIX, ReactAutoComplete, type ReactAutoCompleteProps, ReactCheckbox, type ReactCheckboxProps, type ReactCheckboxRef, ReactColorPicker, type ReactColorPickerProps, ReactContentScaleProvider, type ReactContentScaleValue, ReactDatePicker, type ReactDatePickerProps, ReactDateRangePicker, type ReactDateRangePickerProps, ReactDateTimePicker, type ReactDateTimePickerProps, ReactDateTimeRangePicker, type ReactDateTimeRangePickerProps, type ReactFilterConditionOperator, ReactFilterPanel, type ReactFilterPanelOption, type ReactFilterPanelRequest, type ReactFilterPanelTexts, type ReactFilterPanelValue, ReactImagePreview, type ReactImagePreviewProps, ReactInput, ReactInputNumber, type ReactInputNumberProps, type ReactInputProps, ReactInputRange, type ReactInputRangeProps, type ReactInputRangeValue, ReactModal, type ReactModalButtonProps, type ReactModalCancelEvent, type ReactModalProps, ReactMonthPicker, type ReactMonthPickerProps, ReactNumberInput, type ReactNumberInputProps, ReactPagination, type ReactPaginationProps, ReactPopconfirm, type ReactPopconfirmButtonProps, type ReactPopconfirmPlacement, type ReactPopconfirmProps, ReactPopup, type ReactPopupProps, ReactQuarterPicker, type ReactQuarterPickerProps, type ReactResizablePanel, type ReactResizablePanelSizes, ReactResizablePanels, type ReactResizablePanelsDirection, type ReactResizablePanelsProps, type ReactResizablePanelsResizeInfo, ReactSelect, type ReactSelectChangeInfo, type ReactSelectFilterOption, type ReactSelectOption, type ReactSelectProps, ReactTimePicker, type ReactTimePickerProps, ReactTimeRangePicker, type ReactTimeRangePickerProps, ReactTransition, type ReactTransitionDuration, type ReactTransitionOptions, type ReactTransitionPhase, type ReactTransitionProps, type ReactTransitionState, ReactVirtualList, type ReactVirtualListProps, type ReactVirtualListRef, ReactYearPicker, type ReactYearPickerProps, resolveResizablePanelSizes, useReactContentScale, useReactTransition };
+export { REACT_COMPONENT_PREFIX, ReactAutoComplete, type ReactAutoCompleteProps, ReactCheckbox, type ReactCheckboxProps, type ReactCheckboxRef, ReactColorPicker, type ReactColorPickerProps, ReactContentScaleProvider, type ReactContentScaleValue, ReactDatePicker, type ReactDatePickerProps, ReactDateRangePicker, type ReactDateRangePickerProps, ReactDateTimePicker, type ReactDateTimePickerProps, ReactDateTimeRangePicker, type ReactDateTimeRangePickerProps, type ReactFilterConditionOperator, ReactFilterPanel, type ReactFilterPanelCondition, type ReactFilterPanelOption, type ReactFilterPanelRequest, type ReactFilterPanelTexts, type ReactFilterPanelValue, ReactImagePreview, type ReactImagePreviewProps, ReactInput, ReactInputNumber, type ReactInputNumberProps, type ReactInputProps, ReactInputRange, type ReactInputRangeProps, type ReactInputRangeValue, ReactModal, type ReactModalButtonProps, type ReactModalCancelEvent, type ReactModalProps, ReactMonthPicker, type ReactMonthPickerProps, ReactNumberInput, type ReactNumberInputProps, ReactPagination, type ReactPaginationProps, ReactPopconfirm, type ReactPopconfirmButtonProps, type ReactPopconfirmPlacement, type ReactPopconfirmProps, ReactPopup, type ReactPopupProps, ReactQuarterPicker, type ReactQuarterPickerProps, type ReactResizablePanel, type ReactResizablePanelSizes, ReactResizablePanels, type ReactResizablePanelsDirection, type ReactResizablePanelsProps, type ReactResizablePanelsResizeInfo, ReactSelect, type ReactSelectChangeInfo, type ReactSelectFilterOption, type ReactSelectOption, type ReactSelectProps, ReactTimePicker, type ReactTimePickerProps, ReactTimeRangePicker, type ReactTimeRangePickerProps, ReactTransition, type ReactTransitionDuration, type ReactTransitionOptions, type ReactTransitionPhase, type ReactTransitionProps, type ReactTransitionState, ReactVirtualList, type ReactVirtualListProps, type ReactVirtualListRef, ReactYearPicker, type ReactYearPickerProps, resolveResizablePanelSizes, useReactContentScale, useReactTransition };

package/dist/index.d.ts

@@ -23,6 +23,12 @@ declare const ReactCheckbox: react.ForwardRefExoticComponent<ReactCheckboxProps
 
 /** 通用过滤条件操作符。 */
 type ReactFilterConditionOperator = "none" | "eq" | "neq" | "gt" | "gte" | "lt" | "lte" | "between" | "notBetween" | "startsWith" | "notStartsWith" | "endsWith" | "notEndsWith" | "includes" | "notIncludes" | "blank" | "notBlank";
+/** 通用过滤条件。 */
+interface ReactFilterPanelCondition {
+    operator: ReactFilterConditionOperator;
+    value?: string;
+    secondValue?: string;
+}
 /** 通用过滤面板草稿。 */
 interface ReactFilterPanelValue {
     keyword: string;
@@ -37,6 +43,8 @@ interface ReactFilterPanelValue {
     secondConditionOperator?: ReactFilterConditionOperator;
     secondConditionValue?: string;
     secondConditionSecondValue?: string;
+    /** 动态条件列表；存在时优先于旧的两条件字段。 */
+    conditions?: ReactFilterPanelCondition[];
 }
 /** 通用过滤候选项。 */
 interface ReactFilterPanelOption {
@@ -67,6 +75,9 @@ interface ReactFilterPanelTexts {
     relationOrLabel: string;
     resetAction: string;
     applyAction: string;
+    conditionLabel?: string;
+    addConditionAction?: string;
+    deleteConditionAction?: string;
 }
 /** 通用过滤面板请求。 */
 interface ReactFilterPanelRequest {
@@ -1130,4 +1141,4 @@ declare function useReactContentScale(): ReactContentScaleValue;
  */
 declare const REACT_COMPONENT_PREFIX = "canvas-react";
 
-export { REACT_COMPONENT_PREFIX, ReactAutoComplete, type ReactAutoCompleteProps, ReactCheckbox, type ReactCheckboxProps, type ReactCheckboxRef, ReactColorPicker, type ReactColorPickerProps, ReactContentScaleProvider, type ReactContentScaleValue, ReactDatePicker, type ReactDatePickerProps, ReactDateRangePicker, type ReactDateRangePickerProps, ReactDateTimePicker, type ReactDateTimePickerProps, ReactDateTimeRangePicker, type ReactDateTimeRangePickerProps, type ReactFilterConditionOperator, ReactFilterPanel, type ReactFilterPanelOption, type ReactFilterPanelRequest, type ReactFilterPanelTexts, type ReactFilterPanelValue, ReactImagePreview, type ReactImagePreviewProps, ReactInput, ReactInputNumber, type ReactInputNumberProps, type ReactInputProps, ReactInputRange, type ReactInputRangeProps, type ReactInputRangeValue, ReactModal, type ReactModalButtonProps, type ReactModalCancelEvent, type ReactModalProps, ReactMonthPicker, type ReactMonthPickerProps, ReactNumberInput, type ReactNumberInputProps, ReactPagination, type ReactPaginationProps, ReactPopconfirm, type ReactPopconfirmButtonProps, type ReactPopconfirmPlacement, type ReactPopconfirmProps, ReactPopup, type ReactPopupProps, ReactQuarterPicker, type ReactQuarterPickerProps, type ReactResizablePanel, type ReactResizablePanelSizes, ReactResizablePanels, type ReactResizablePanelsDirection, type ReactResizablePanelsProps, type ReactResizablePanelsResizeInfo, ReactSelect, type ReactSelectChangeInfo, type ReactSelectFilterOption, type ReactSelectOption, type ReactSelectProps, ReactTimePicker, type ReactTimePickerProps, ReactTimeRangePicker, type ReactTimeRangePickerProps, ReactTransition, type ReactTransitionDuration, type ReactTransitionOptions, type ReactTransitionPhase, type ReactTransitionProps, type ReactTransitionState, ReactVirtualList, type ReactVirtualListProps, type ReactVirtualListRef, ReactYearPicker, type ReactYearPickerProps, resolveResizablePanelSizes, useReactContentScale, useReactTransition };
+export { REACT_COMPONENT_PREFIX, ReactAutoComplete, type ReactAutoCompleteProps, ReactCheckbox, type ReactCheckboxProps, type ReactCheckboxRef, ReactColorPicker, type ReactColorPickerProps, ReactContentScaleProvider, type ReactContentScaleValue, ReactDatePicker, type ReactDatePickerProps, ReactDateRangePicker, type ReactDateRangePickerProps, ReactDateTimePicker, type ReactDateTimePickerProps, ReactDateTimeRangePicker, type ReactDateTimeRangePickerProps, type ReactFilterConditionOperator, ReactFilterPanel, type ReactFilterPanelCondition, type ReactFilterPanelOption, type ReactFilterPanelRequest, type ReactFilterPanelTexts, type ReactFilterPanelValue, ReactImagePreview, type ReactImagePreviewProps, ReactInput, ReactInputNumber, type ReactInputNumberProps, type ReactInputProps, ReactInputRange, type ReactInputRangeProps, type ReactInputRangeValue, ReactModal, type ReactModalButtonProps, type ReactModalCancelEvent, type ReactModalProps, ReactMonthPicker, type ReactMonthPickerProps, ReactNumberInput, type ReactNumberInputProps, ReactPagination, type ReactPaginationProps, ReactPopconfirm, type ReactPopconfirmButtonProps, type ReactPopconfirmPlacement, type ReactPopconfirmProps, ReactPopup, type ReactPopupProps, ReactQuarterPicker, type ReactQuarterPickerProps, type ReactResizablePanel, type ReactResizablePanelSizes, ReactResizablePanels, type ReactResizablePanelsDirection, type ReactResizablePanelsProps, type ReactResizablePanelsResizeInfo, ReactSelect, type ReactSelectChangeInfo, type ReactSelectFilterOption, type ReactSelectOption, type ReactSelectProps, ReactTimePicker, type ReactTimePickerProps, ReactTimeRangePicker, type ReactTimeRangePickerProps, ReactTransition, type ReactTransitionDuration, type ReactTransitionOptions, type ReactTransitionPhase, type ReactTransitionProps, type ReactTransitionState, ReactVirtualList, type ReactVirtualListProps, type ReactVirtualListRef, ReactYearPicker, type ReactYearPickerProps, resolveResizablePanelSizes, useReactContentScale, useReactTransition };

package/dist/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { forwardRef, useRef, useEffect, useImperativeHandle, createContext, useState, useMemo, useLayoutEffect, useContext } from 'react';
+import { forwardRef, useRef, useEffect, useImperativeHandle, createContext, useState, useMemo, useLayoutEffect, useContext, Fragment as Fragment$1 } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 
@@ -1107,16 +1107,31 @@ var operators = [
 ];
 function ReactFilterPanel(props) {
   const { request } = props;
-  const [draft, setDraft] = useState(request?.value ?? null);
+  const [draft, setDraft] = useState(() => createDraft(request?.value));
   const [tab, setTab] = useState(resolveTab(request?.value));
   const [options, setOptions] = useState(request?.options ?? []);
   const [loading, setLoading] = useState(Boolean(request?.loadOptions));
+  const conditionListRef = useRef(null);
+  const [conditionListOverflowing, setConditionListOverflowing] = useState(false);
   useEffect(() => {
-    setDraft(request?.value ?? null);
+    setDraft(createDraft(request?.value));
     setTab(resolveTab(request?.value));
     setOptions(request?.options ?? []);
     setLoading(Boolean(request?.loadOptions));
   }, [request]);
+  useLayoutEffect(() => {
+    const element = conditionListRef.current;
+    if (!element || tab !== "condition") {
+      setConditionListOverflowing(false);
+      return;
+    }
+    const measure = () => setConditionListOverflowing(element.scrollHeight > element.clientHeight + 1);
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [draft?.conditions, tab]);
   useEffect(() => {
     if (!request?.loadOptions) return;
     const controller = new AbortController();
@@ -1151,6 +1166,20 @@ function ReactFilterPanel(props) {
   const allChecked = visibleKeys.length > 0 && selectedCount === visibleKeys.length;
   const allCount = request.options.find((item) => item.kind === "all")?.count ?? visibleOptions.filter((item) => item.kind === "value").reduce((sum, item) => sum + item.count, 0);
   const update = (patch) => setDraft((current) => ({ ...current ?? request.value, ...patch }));
+  const updateConditions = (conditions) => {
+    const first = conditions[0] ?? createEmptyCondition();
+    const second = conditions[1] ?? createEmptyCondition();
+    update({
+      conditions,
+      filterType: "condition",
+      conditionOperator: first.operator,
+      conditionValue: first.value ?? "",
+      conditionSecondValue: first.secondValue ?? "",
+      secondConditionOperator: second.operator,
+      secondConditionValue: second.value ?? "",
+      secondConditionSecondValue: second.secondValue ?? ""
+    });
+  };
   const toggle = (keys, checked) => {
     const next = new Set(draft.selectedKeys ?? []);
     keys.forEach((key) => checked ? next.add(key) : next.delete(key));
@@ -1257,97 +1286,138 @@ function ReactFilterPanel(props) {
               )
             }
           ) })
-        ] }) : /* @__PURE__ */ jsxs("div", { style: { marginTop: 12, display: "grid", gap: 12, minHeight: 290, alignContent: "start", flex: "1 1 auto" }, children: [
-          /* @__PURE__ */ jsx(
-            ConditionEditor,
-            {
-              label: request.texts.firstConditionLabel,
-              operator: draft.conditionOperator ?? "none",
-              value: draft.conditionValue ?? "",
-              secondValue: draft.conditionSecondValue ?? "",
-              texts: request.texts,
-              onChange: (patch) => update(patch),
-              onSubmit: apply
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("div", { style: fieldLabelStyle, children: request.texts.relationLabel }),
-            /* @__PURE__ */ jsx(
-              ReactSelect,
-              {
-                value: draft.conditionRelation === "or" ? "or" : "and",
-                allowClear: false,
-                options: [{ label: request.texts.relationAndLabel, value: "and" }, { label: request.texts.relationOrLabel, value: "or" }],
-                onChange: (value) => update({ conditionRelation: value, filterType: "condition" }),
-                style: { width: "100%" }
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(
-            ConditionEditor,
+        ] }) : /* @__PURE__ */ jsx("div", { style: { marginTop: 12, display: "flex", flexDirection: "column", gap: 10, minHeight: 0, flex: "1 1 auto" }, children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: conditionListRef,
+            className: "react-filter-panel-condition-list",
+            style: { ...conditionListStyle, overflowY: conditionListOverflowing ? "auto" : "hidden" },
+            children: (draft.conditions ?? []).map((condition, index, conditions) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+              index > 0 ? /* @__PURE__ */ jsxs("div", { className: "react-filter-panel-condition-relation", style: conditionRowStyle, children: [
+                /* @__PURE__ */ jsx("span", { style: inlineLabelStyle, children: request.texts.relationLabel }),
+                /* @__PURE__ */ jsx(
+                  ReactSelect,
+                  {
+                    value: draft.conditionRelation === "or" ? "or" : "and",
+                    allowClear: false,
+                    options: [{ label: request.texts.relationAndLabel, value: "and" }, { label: request.texts.relationOrLabel, value: "or" }],
+                    onChange: (value) => update({ conditionRelation: value, filterType: "condition" }),
+                    style: { width: "100%" }
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", {})
+              ] }) : null,
+              /* @__PURE__ */ jsx(
+                ConditionEditor,
+                {
+                  label: resolveConditionLabel(request.texts, index),
+                  condition,
+                  texts: request.texts,
+                  canDelete: conditions.length > 1,
+                  onDelete: () => updateConditions(conditions.filter((_item, itemIndex) => itemIndex !== index)),
+                  onChange: (nextCondition) => updateConditions(conditions.map((item, itemIndex) => itemIndex === index ? nextCondition : item)),
+                  onSubmit: apply
+                }
+              )
+            ] }, index))
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "react-filter-panel-footer", style: footerStyle, children: [
+          tab === "condition" ? /* @__PURE__ */ jsxs(
+            "button",
             {
-              second: true,
-              label: request.texts.secondConditionLabel,
-              operator: draft.secondConditionOperator ?? "none",
-              value: draft.secondConditionValue ?? "",
-              secondValue: draft.secondConditionSecondValue ?? "",
-              texts: request.texts,
-              onChange: (patch) => update(patch),
-              onSubmit: apply
+              type: "button",
+              style: addConditionStyle,
+              onClick: () => updateConditions([...draft.conditions ?? [], createEmptyCondition()]),
+              children: [
+                "+ ",
+                request.texts.addConditionAction ?? "\u65B0\u589E\u6761\u4EF6"
+              ]
             }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
-          /* @__PURE__ */ jsx("button", { type: "button", style: actionStyle(false), onClick: () => {
-            request.onReset();
-            request.onClose();
-          }, children: request.texts.resetAction }),
-          /* @__PURE__ */ jsx("button", { type: "button", style: actionStyle(true), onClick: apply, children: request.texts.applyAction })
+          ) : null,
+          /* @__PURE__ */ jsxs("div", { className: "react-filter-panel-footer-actions", style: footerActionsStyle, children: [
+            /* @__PURE__ */ jsx("button", { type: "button", style: actionStyle(false), onClick: () => {
+              request.onReset();
+              request.onClose();
+            }, children: request.texts.resetAction }),
+            /* @__PURE__ */ jsx("button", { type: "button", style: actionStyle(true), onClick: apply, children: request.texts.applyAction })
+          ] })
         ] })
       ] })
     }
   );
 }
 function ConditionEditor(props) {
-  const prefix = props.second ? "secondCondition" : "condition";
-  const hidesValue = ["none", "blank", "notBlank"].includes(props.operator);
-  const needsSecond = ["between", "notBetween"].includes(props.operator);
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("div", { style: fieldLabelStyle, children: props.label }),
-    /* @__PURE__ */ jsx(
-      ReactSelect,
-      {
-        value: props.operator,
-        options: operators,
-        allowClear: false,
-        onChange: (value) => props.onChange({ [`${prefix}Operator`]: value, filterType: "condition" }),
-        style: { width: "100%" }
-      }
-    ),
-    hidesValue ? null : /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 8, marginTop: 8 }, children: [
+  const hidesValue = ["none", "blank", "notBlank"].includes(props.condition.operator);
+  const needsSecond = ["between", "notBetween"].includes(props.condition.operator);
+  return /* @__PURE__ */ jsxs("div", { style: conditionEditorStyle, children: [
+    /* @__PURE__ */ jsxs("div", { className: "react-filter-panel-condition-row", style: conditionRowStyle, children: [
+      /* @__PURE__ */ jsx("span", { style: inlineLabelStyle, children: props.label }),
+      /* @__PURE__ */ jsx(
+        ReactSelect,
+        {
+          value: props.condition.operator,
+          options: operators,
+          allowClear: false,
+          onChange: (value) => props.onChange({ ...props.condition, operator: value }),
+          style: { width: "100%" }
+        }
+      ),
+      props.canDelete ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          title: `${props.texts.deleteConditionAction ?? "\u5220\u9664\u6761\u4EF6"} ${props.label}`,
+          "aria-label": `${props.texts.deleteConditionAction ?? "\u5220\u9664\u6761\u4EF6"} ${props.label}`,
+          style: deleteConditionStyle,
+          onClick: props.onDelete,
+          children: "\xD7"
+        }
+      ) : /* @__PURE__ */ jsx("span", {})
+    ] }),
+    hidesValue ? null : /* @__PURE__ */ jsxs("div", { style: conditionValueStyle, children: [
       /* @__PURE__ */ jsx(
         ReactInput,
         {
-          value: props.value,
+          value: props.condition.value ?? "",
           placeholder: props.texts.firstValuePlaceholder,
           onPressEnter: props.onSubmit,
-          onChange: (event) => props.onChange({ [`${prefix}Value`]: event.target.value, filterType: "condition" }),
+          onChange: (event) => props.onChange({ ...props.condition, value: event.target.value }),
           style: { width: "100%" }
         }
       ),
       needsSecond ? /* @__PURE__ */ jsx(
         ReactInput,
         {
-          value: props.secondValue,
+          value: props.condition.secondValue ?? "",
           placeholder: props.texts.secondValuePlaceholder,
           onPressEnter: props.onSubmit,
-          onChange: (event) => props.onChange({ [`${prefix}SecondValue`]: event.target.value, filterType: "condition" }),
+          onChange: (event) => props.onChange({ ...props.condition, secondValue: event.target.value }),
           style: { width: "100%" }
         }
       ) : null
     ] })
   ] });
 }
+function createDraft(value) {
+  if (!value) return null;
+  return { ...value, conditions: resolveDraftConditions(value) };
+}
+function resolveDraftConditions(value) {
+  if (value.conditions?.length) return value.conditions.map((condition) => ({ ...condition }));
+  return [
+    { operator: value.conditionOperator ?? "none", value: value.conditionValue ?? "", secondValue: value.conditionSecondValue ?? "" },
+    { operator: value.secondConditionOperator ?? "none", value: value.secondConditionValue ?? "", secondValue: value.secondConditionSecondValue ?? "" }
+  ];
+}
+function createEmptyCondition() {
+  return { operator: "none", value: "", secondValue: "" };
+}
+function resolveConditionLabel(texts, index) {
+  if (index === 0) return texts.firstConditionLabel;
+  if (index === 1) return texts.secondConditionLabel;
+  return `${texts.conditionLabel ?? "\u6761\u4EF6"} ${index + 1}`;
+}
 function resolveTab(value) {
   return value?.filterType === "condition" || value?.conditionOperator && value.conditionOperator !== "none" ? "condition" : "value";
 }
@@ -1359,7 +1429,15 @@ function optionLabel(item, texts) {
 var checkLabelStyle = { display: "inline-flex", alignItems: "center", gap: 8, color: "#374151", fontSize: 14 };
 var optionStyle = { display: "flex", alignItems: "center", gap: 8, minHeight: 40, padding: "4px 8px", borderRadius: 6, color: "#374151", fontSize: 14, cursor: "pointer", boxSizing: "border-box" };
 var optionTextStyle = { display: "block", flex: "1 1 0", width: 0, minWidth: 0, overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis" };
-var fieldLabelStyle = { marginBottom: 6, fontSize: 12, color: "#6b7280" };
+var conditionListStyle = { display: "grid", gap: 8, minHeight: 0, flex: "1 1 auto", alignContent: "start", paddingRight: 3 };
+var conditionEditorStyle = { display: "grid", gap: 8 };
+var conditionRowStyle = { display: "grid", gridTemplateColumns: "56px minmax(0, 1fr) 22px", alignItems: "center", gap: 8 };
+var inlineLabelStyle = { color: "#6b7280", fontSize: 12, whiteSpace: "nowrap" };
+var conditionValueStyle = { display: "grid", gap: 8, marginLeft: 64, marginRight: 30 };
+var addConditionStyle = { height: 32, padding: "0 10px", border: "1px solid #91caff", borderRadius: 6, background: "#f0f7ff", color: "#1677ff", cursor: "pointer", whiteSpace: "nowrap" };
+var deleteConditionStyle = { width: 22, height: 22, padding: 0, border: 0, borderRadius: 4, background: "transparent", color: "#9ca3af", fontSize: 18, lineHeight: "20px", cursor: "pointer" };
+var footerStyle = { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 };
+var footerActionsStyle = { display: "flex", gap: 8, marginLeft: "auto" };
 function tabStyle(active) {
   return { flex: 1, height: 32, border: active ? "1px solid #1677ff" : "1px solid #d9d9d9", borderRadius: 6, background: active ? "#e6f4ff" : "#fff", color: active ? "#1677ff" : "#374151", cursor: "pointer" };
 }