@univerjs/sheets-conditional-formatting-ui 1.0.3 → 1.1.0

package/lib/index.js

@@ -388,7 +388,7 @@ const AddUniqueValuesCfCommand = {
 const CF_PANEL_KEY = "sheet.conditional.formatting.panel";
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/typeof.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -399,7 +399,7 @@ function _typeof(o) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/toPrimitive.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -412,14 +412,14 @@ function toPrimitive(t, r) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/toPropertyKey.js
 function toPropertyKey(t) {
 	var i = toPrimitive(t, "string");
 	return "symbol" == _typeof(i) ? i : i + "";
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/defineProperty.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -430,7 +430,7 @@ function _defineProperty(e, r, t) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/decorateParam.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/decorateParam.js
 function __decorateParam(paramIndex, decorator) {
 	return function(target, key) {
 		decorator(target, key, paramIndex);
@@ -438,7 +438,7 @@ function __decorateParam(paramIndex, decorator) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -985,8 +985,7 @@ const conditionalFormattingRuleMenuSchema = { [RibbonDataGroup.RULES]: { [OpenCo
 	order: 1,
 	gridLayout: {
 		row: 2,
-		column: 1,
-		showLabel: true
+		column: 1
 	},
 	menuItemFactory: FactoryManageConditionalFormattingRule
 } } };
@@ -1007,7 +1006,7 @@ const menuSchema = {
 //#endregion
 //#region package.json
 var name = "@univerjs/sheets-conditional-formatting-ui";
-var version = "1.0.3";
+var version = "1.1.0";
 
 //#endregion
 //#region src/config/config.ts
@@ -1699,8 +1698,9 @@ const ColorPicker$1 = (props) => {
 };
 
 //#endregion
-//#region src/views/Preview.tsx
-function Preview(props) {
+//#region src/views/ConditionalFormattingRulePreview.tsx
+/** Shows a rule's configured appearance without evaluating worksheet values. */
+function ConditionalFormattingRulePreview(props) {
 	const { rule } = props;
 	const colorList = useMemo(() => {
 		if ((rule === null || rule === void 0 ? void 0 : rule.type) === CFRuleType.colorScale) {
@@ -1786,6 +1786,56 @@ function Preview(props) {
 	}
 }
 
+//#endregion
+//#region src/views/panel/rule-edit/RuleNumberInput.tsx
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+function RuleNumberInput({ value, onChange, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER, disabled, className }) {
+	const [draftState, setDraftState] = useState({
+		value,
+		text: String(value)
+	});
+	if (!Object.is(draftState.value, value)) setDraftState({
+		value,
+		text: String(value)
+	});
+	const draft = draftState.text;
+	const setDraft = (text) => setDraftState({
+		value,
+		text
+	});
+	return /* @__PURE__ */ jsx(Input, {
+		className,
+		disabled,
+		inputMode: "decimal",
+		value: draft,
+		"aria-invalid": !Number.isFinite(Number(draft)),
+		onChange: (next) => {
+			setDraft(next);
+			const number = Number(next);
+			if (Number.isFinite(number)) {
+				const bounded = Math.min(max, Math.max(min, number));
+				if (bounded !== number) setDraft(String(bounded));
+				onChange(bounded);
+			}
+		},
+		onBlur: () => setDraft(String(value))
+	});
+}
+
 //#endregion
 //#region src/views/panel/rule-edit/styles.ts
 /**
@@ -1856,7 +1906,7 @@ const TextInput$1 = (props) => {
 			onFocus: () => setIsFocusFormulaEditor(true)
 		})
 	});
-	else return /* @__PURE__ */ jsx(InputNumber, {
+	else return /* @__PURE__ */ jsx(RuleNumberInput, {
 		className,
 		value: Number(props.value) || 0,
 		onChange: (v) => props.onChange(v || 0),
@@ -2014,7 +2064,7 @@ const ColorScaleStyleEditor = (props) => {
 		}),
 		/* @__PURE__ */ jsx("div", {
 			className: previewClassName,
-			children: /* @__PURE__ */ jsx(Preview, { rule: getResult({
+			children: /* @__PURE__ */ jsx(ConditionalFormattingRulePreview, { rule: getResult({
 				minType,
 				medianType,
 				maxType,
@@ -2280,7 +2330,7 @@ const InputText = (props) => {
 			})
 		});
 	}
-	return /* @__PURE__ */ jsx(InputNumber, {
+	return /* @__PURE__ */ jsx(RuleNumberInput, {
 		className,
 		value: Number(value) || 0,
 		disabled,
@@ -2440,7 +2490,7 @@ const DataBarStyleEditor = (props) => {
 		}),
 		/* @__PURE__ */ jsx("div", {
 			className: previewClassName,
-			children: /* @__PURE__ */ jsx(Preview, { rule: getResult({
+			children: /* @__PURE__ */ jsx(ConditionalFormattingRulePreview, { rule: getResult({
 				isGradient,
 				minValue,
 				minValueType,
@@ -2814,7 +2864,7 @@ const FormulaStyleEditor = (props) => {
 			}),
 			/* @__PURE__ */ jsx("div", {
 				className: previewClassName,
-				children: /* @__PURE__ */ jsx(Preview, { rule: getResult({
+				children: /* @__PURE__ */ jsx(ConditionalFormattingRulePreview, { rule: getResult({
 					style,
 					formula
 				}) })
@@ -2967,7 +3017,7 @@ function HighlightCellInput(props) {
 					className: "univer-mt-3",
 					children: /* @__PURE__ */ jsx(WrapperError, {
 						errorText: numberError,
-						children: /* @__PURE__ */ jsx(InputNumber, {
+						children: /* @__PURE__ */ jsx(RuleNumberInput, {
 							className: "univer-w-full",
 							min: Number.MIN_SAFE_INTEGER,
 							max: Number.MAX_SAFE_INTEGER,
@@ -2992,7 +3042,7 @@ function HighlightCellInput(props) {
 					className: "univer-mt-3 univer-flex univer-items-center",
 					children: [/* @__PURE__ */ jsx(WrapperError, {
 						errorText: numberMinError,
-						children: /* @__PURE__ */ jsx(InputNumber, {
+						children: /* @__PURE__ */ jsx(RuleNumberInput, {
 							min: Number.MIN_SAFE_INTEGER,
 							max: Number.MAX_SAFE_INTEGER,
 							value: inputNumberMin,
@@ -3000,7 +3050,7 @@ function HighlightCellInput(props) {
 						})
 					}), /* @__PURE__ */ jsx(WrapperError, {
 						errorText: numberMaxError,
-						children: /* @__PURE__ */ jsx(InputNumber, {
+						children: /* @__PURE__ */ jsx(RuleNumberInput, {
 							className: "univer-ml-3",
 							min: Number.MIN_SAFE_INTEGER,
 							max: Number.MAX_SAFE_INTEGER,
@@ -3221,7 +3271,7 @@ const HighlightCellStyleEditor = (props) => {
 		}, `${subType}_${operator}`),
 		/* @__PURE__ */ jsx("div", {
 			className: previewClassName,
-			children: /* @__PURE__ */ jsx(Preview, { rule: getResult({}) })
+			children: /* @__PURE__ */ jsx(ConditionalFormattingRulePreview, { rule: getResult({}) })
 		}),
 		/* @__PURE__ */ jsx(ConditionalStyleEditor, {
 			ColorPickerComponent,
@@ -3254,7 +3304,7 @@ const TextInput = (props) => {
 	});
 	return /* @__PURE__ */ jsx("div", {
 		className: "univer-relative",
-		children: type !== CFValueType.formula ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(InputNumber, {
+		children: type !== CFValueType.formula ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(RuleNumberInput, {
 			className: clsx({ "univer-border-red-500": error }),
 			value: Number(props.value) || 0,
 			onChange: (v) => onChange(v ?? 0)
@@ -3908,7 +3958,7 @@ const RankStyleEditor = (props) => {
 		}),
 		/* @__PURE__ */ jsx("div", {
 			className: previewClassName,
-			children: /* @__PURE__ */ jsx(Preview, { rule: getResult({
+			children: /* @__PURE__ */ jsx(ConditionalFormattingRulePreview, { rule: getResult({
 				type,
 				isPercent,
 				value,
@@ -4171,8 +4221,9 @@ const RuleEdit = (props) => {
 };
 
 //#endregion
-//#region src/views/panel/RuleList.tsx
-const getRuleDescribe = (rule, localeService) => {
+//#region src/utils/get-rule-describe.ts
+/** Returns the localized description used by the built-in conditional formatting rule list. */
+function getRuleDescribe(rule, localeService) {
 	const ruleConfig = rule.rule;
 	switch (ruleConfig.type) {
 		case CFRuleType.colorScale: return localeService.t("sheets-conditional-formatting-ui.ruleType.colorScale");
@@ -4187,7 +4238,8 @@ const getRuleDescribe = (rule, localeService) => {
 			case CFSubRuleType.uniqueValues: return localeService.t("sheets-conditional-formatting-ui.subRuleType.uniqueValues");
 			case CFSubRuleType.number: {
 				const operator = ruleConfig.operator;
-				return localeService.t(`sheets-conditional-formatting-ui.preview.describe.${operator}`, ...Array.isArray(ruleConfig.value) ? ruleConfig.value.map((e) => String(e)) : [String(ruleConfig.value || "")]);
+				const values = Array.isArray(ruleConfig.value) ? ruleConfig.value.map((value) => String(value)) : [String(ruleConfig.value ?? "")];
+				return localeService.t(`sheets-conditional-formatting-ui.preview.describe.${operator}`, ...values);
 			}
 			case CFSubRuleType.text: {
 				const operator = ruleConfig.operator;
@@ -4197,15 +4249,16 @@ const getRuleDescribe = (rule, localeService) => {
 				const operator = ruleConfig.operator;
 				return localeService.t(`sheets-conditional-formatting-ui.preview.describe.${operator}`);
 			}
-			case CFSubRuleType.rank: if (ruleConfig.isPercent) {
-				if (ruleConfig.isBottom) return localeService.t("sheets-conditional-formatting-ui.preview.describe.bottomNPercent", String(ruleConfig.value));
-				else return localeService.t("sheets-conditional-formatting-ui.preview.describe.topNPercent", String(ruleConfig.value));
-			} else if (ruleConfig.isBottom) return localeService.t("sheets-conditional-formatting-ui.preview.describe.bottomN", String(ruleConfig.value));
-			else return localeService.t("sheets-conditional-formatting-ui.preview.describe.topN", String(ruleConfig.value));
+			case CFSubRuleType.rank:
+				if (ruleConfig.isPercent) return localeService.t(ruleConfig.isBottom ? "sheets-conditional-formatting-ui.preview.describe.bottomNPercent" : "sheets-conditional-formatting-ui.preview.describe.topNPercent", String(ruleConfig.value));
+				return localeService.t(ruleConfig.isBottom ? "sheets-conditional-formatting-ui.preview.describe.bottomN" : "sheets-conditional-formatting-ui.preview.describe.topN", String(ruleConfig.value));
 			case CFSubRuleType.formula: return localeService.t("sheets-conditional-formatting-ui.ruleType.formula");
 		}
 	}
-};
+}
+
+//#endregion
+//#region src/views/panel/RuleList.tsx
 function RuleList(props) {
 	const { SelectComponent = Select } = props;
 	const { onClick } = props;
@@ -4408,7 +4461,7 @@ function RuleList(props) {
 						children: rule.ranges.map((range) => serializeRange(range)).join(",")
 					})]
 				}),
-				/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Preview, { rule: rule.rule }) }),
+				/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(ConditionalFormattingRulePreview, { rule: rule.rule }) }),
 				/* @__PURE__ */ jsx("div", {
 					className: clsx("univer-absolute univer-right-1 univer-hidden univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded univer-text-red-500 group-hover:univer-flex hover:univer-bg-gray-200 rtl:univer-left-1 rtl:univer-right-auto", { "univer-flex univer-items-center univer-justify-center": draggingId === rule.cfId }),
 					onClick: (e) => {
@@ -4433,8 +4486,10 @@ const ConditionFormattingPanel = (props) => {
 		setIsShowRuleEditor(true);
 	};
 	const handleCancel = () => {
+		var _props$onEditorExit;
 		setIsShowRuleEditor(false);
 		setCurrentEditRule(void 0);
+		(_props$onEditorExit = props.onEditorExit) === null || _props$onEditorExit === void 0 || _props$onEditorExit.call(props);
 	};
 	const handleRuleClick = (rule) => {
 		setCurrentEditRule(rule);
@@ -5266,4 +5321,4 @@ UniverSheetsConditionalFormattingUIPlugin = __decorate([
 ], UniverSheetsConditionalFormattingUIPlugin);
 
 //#endregion
-export { AddAverageCfCommand, AddColorScaleConditionalRuleCommand, AddDataBarConditionalRuleCommand, AddDuplicateValuesCfCommand, AddIconSetConditionalRuleCommand, AddNumberCfCommand, AddRankCfCommand, AddTextCfCommand, AddTimePeriodCfCommand, AddUniqueValuesCfCommand, ConditionalFormattingClearController, OpenConditionalFormattingOperator, menuSchema as SheetsConditionalFormattingUIMenuSchema, UniverSheetsConditionalFormattingMobileUIPlugin, UniverSheetsConditionalFormattingUIPlugin };
+export { AddAverageCfCommand, AddColorScaleConditionalRuleCommand, AddDataBarConditionalRuleCommand, AddDuplicateValuesCfCommand, AddIconSetConditionalRuleCommand, AddNumberCfCommand, AddRankCfCommand, AddTextCfCommand, AddTimePeriodCfCommand, AddUniqueValuesCfCommand, CF_PANEL_KEY, ConditionalFormattingClearController, ConditionalFormattingRulePreview, OpenConditionalFormattingOperator, menuSchema as SheetsConditionalFormattingUIMenuSchema, UniverSheetsConditionalFormattingMobileUIPlugin, UniverSheetsConditionalFormattingUIPlugin, getRuleDescribe };

package/lib/types/index.d.ts

@@ -26,7 +26,12 @@ export { AddTimePeriodCfCommand } from './commands/commands/add-time-period-cf.c
 export { AddUniqueValuesCfCommand } from './commands/commands/add-unique-values-cf.command';
 export { OpenConditionalFormattingOperator } from './commands/operations/open-conditional-formatting-panel';
 export type { IUniverSheetsConditionalFormattingUIConfig } from './config/config';
+export { CF_PANEL_KEY } from './const';
 export { ConditionalFormattingClearController } from './controllers/cf.clear.controller';
 export { menuSchema as SheetsConditionalFormattingUIMenuSchema } from './menu/schema';
 export { UniverSheetsConditionalFormattingMobileUIPlugin } from './mobile-plugin';
 export { UniverSheetsConditionalFormattingUIPlugin } from './plugin';
+export { getRuleDescribe } from './utils/get-rule-describe';
+export type { IConditionalFormattingRulePreviewProps } from './views/ConditionalFormattingRulePreview';
+export { ConditionalFormattingRulePreview } from './views/ConditionalFormattingRulePreview';
+export type { IConditionFormattingPanelProps } from './views/ConditionFormattingPanel';

package/lib/types/utils/get-rule-describe.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright 2023-present DreamNum Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import type { LocaleService } from '@univerjs/core';
+import type { IConditionFormattingRule } from '@univerjs/sheets-conditional-formatting';
+/** Returns the localized description used by the built-in conditional formatting rule list. */
+export declare function getRuleDescribe(rule: IConditionFormattingRule, localeService: LocaleService): string;

package/lib/types/views/ConditionFormattingPanel.d.ts

@@ -18,6 +18,11 @@ import { RuleEdit } from './panel/RuleEdit';
 import { RuleList } from './panel/RuleList';
 export interface IConditionFormattingPanelProps {
     rule?: IConditionFormattingRule;
+    /**
+     * Called when editing ends after submission, cancellation, or worksheet activation/removal.
+     * Does not indicate that saving succeeded or that the sidebar closed.
+     */
+    onEditorExit?: () => void;
     RuleEditComponent?: typeof RuleEdit;
     RuleListComponent?: typeof RuleList;
 }

package/lib/types/views/{Preview.d.ts → ConditionalFormattingRulePreview.d.ts}

@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 import type { IConditionalFormattingRuleConfig } from '@univerjs/sheets-conditional-formatting';
-export declare function Preview(props: {
+export interface IConditionalFormattingRulePreviewProps {
     rule?: IConditionalFormattingRuleConfig;
-}): import("react").JSX.Element | null | undefined;
+}
+/** Shows a rule's configured appearance without evaluating worksheet values. */
+export declare function ConditionalFormattingRulePreview(props: IConditionalFormattingRulePreviewProps): import("react").JSX.Element | null | undefined;

package/lib/types/views/panel/rule-edit/RuleNumberInput.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Copyright 2023-present DreamNum Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+interface IRuleNumberInputProps {
+    value: number;
+    onChange: (value: number) => void;
+    min?: number;
+    max?: number;
+    disabled?: boolean;
+    className?: string;
+}
+export declare function RuleNumberInput({ value, onChange, min, max, disabled, className }: IRuleNumberInputProps): import("react").JSX.Element;
+export {};