@antdv-next1/pro-field 1.0.0

package/dist/components/Money/InputNumberPopover.js

@@ -0,0 +1,345 @@
+import { Fragment, computed, createVNode, defineComponent, mergeProps, onMounted, onUnmounted, shallowRef } from "vue";
+import { useEffect, useState } from "@antdv-next1/pro-utils";
+import { InputNumber, Popover } from "antdv-next";
+import { useMergedState } from "@v-c/util";
+//#region src/components/Money/InputNumberPopover.tsx
+/**
+* input 的弹框，用于显示格式化之后的内容
+*
+* @result 10,000 -> 一万
+* @result 10, 00, 000, 000 -> 一亿
+*/
+const InputNumberPopover = /* @__PURE__ */ defineComponent((props, { attrs }) => {
+	const [value, setValue] = useMergedState(() => props.value || props.defaultValue, {
+		value: computed(() => props.value),
+		defaultValue: props.defaultValue,
+		onChange: (val) => {
+			props["onUpdate:value"]?.(val);
+			props.onChange?.(val);
+		}
+	});
+	const [localOpen, setLocalOpen] = useState(props.open ?? false);
+	const mountedRef = shallowRef(true);
+	onMounted(() => {
+		mountedRef.value = true;
+	});
+	onUnmounted(() => {
+		mountedRef.value = false;
+	});
+	useEffect(() => {
+		if (props.open !== void 0) setLocalOpen(props.open);
+	}, [() => props.open]);
+	const handleOpenChange = (visible) => {
+		props.onOpenChange?.(visible);
+		if (open === void 0) queueMicrotask(() => {
+			if (mountedRef.value) setLocalOpen(visible);
+		});
+	};
+	return () => {
+		const { contentRender: content, numberFormatOptions, numberPopoverRender, open, value: propsValue, onChange, ...rest } = props;
+		/**
+		* 如果content 存在要根据 content 渲染一下
+		*/
+		const dom = content?.({
+			...rest,
+			value: value.value
+		});
+		if (!dom) return createVNode(InputNumber, mergeProps(attrs, rest, {
+			"value": value.value,
+			"onChange": (value) => {
+				setValue(value);
+			}
+		}), null);
+		return createVNode(Popover, {
+			"placement": "topLeft",
+			"trigger": ["focus", "click"],
+			"open": localOpen.value,
+			"onOpenChange": handleOpenChange,
+			"content": createVNode(Fragment, null, [dom]),
+			"getPopupContainer": (triggerNode) => {
+				return triggerNode?.parentElement || document.body;
+			},
+			"onUpdate:open": (_open) => {
+				props["onUpdate:open"]?.(_open);
+				setLocalOpen(_open);
+			}
+		}, { default: () => [createVNode(InputNumber, mergeProps(attrs, rest, {
+			"value": value.value,
+			"onChange": (value) => {
+				setValue(value);
+			}
+		}), null)] });
+	};
+}, {
+	props: {
+		size: {
+			type: [String, null],
+			required: false
+		},
+		status: {
+			type: String,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		addonBefore: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		addonAfter: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		prefix: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		suffix: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		bordered: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		variant: {
+			type: String,
+			required: false
+		},
+		classes: {
+			type: [Object, Function],
+			required: false
+		},
+		styles: {
+			type: [Object, Function],
+			required: false
+		},
+		controls: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		type: {
+			type: String,
+			required: false
+		},
+		rootClass: {
+			type: String,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		mode: {
+			type: String,
+			required: false
+		},
+		min: { required: false },
+		max: { required: false },
+		step: { required: false },
+		defaultValue: { required: false },
+		value: { required: false },
+		readOnly: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		upHandler: { required: false },
+		downHandler: { required: false },
+		keyboard: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		changeOnWheel: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		parser: {
+			type: Function,
+			required: false
+		},
+		formatter: {
+			type: Function,
+			required: false
+		},
+		precision: {
+			type: Number,
+			required: false
+		},
+		decimalSeparator: {
+			type: String,
+			required: false
+		},
+		onStep: {
+			type: Function,
+			required: false
+		},
+		changeOnBlur: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		tabIndex: {
+			type: Number,
+			required: false
+		},
+		onMouseLeave: {
+			type: Function,
+			required: false
+		},
+		onMouseOut: {
+			type: Function,
+			required: false
+		},
+		stringMode: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		placeholder: {
+			type: String,
+			required: false
+		},
+		onChange: {
+			type: Function,
+			required: false
+		},
+		"onUpdate:value": {
+			type: Function,
+			required: false
+		},
+		onInput: {
+			type: Function,
+			required: false
+		},
+		onPressEnter: {
+			type: Function,
+			required: false
+		},
+		onMousedown: {
+			type: Function,
+			required: false
+		},
+		onClick: {
+			type: Function,
+			required: false
+		},
+		onMouseup: {
+			type: Function,
+			required: false
+		},
+		onMouseleave: {
+			type: Function,
+			required: false
+		},
+		onMousemove: {
+			type: Function,
+			required: false
+		},
+		onMouseenter: {
+			type: Function,
+			required: false
+		},
+		onMouseout: {
+			type: Function,
+			required: false
+		},
+		onFocus: {
+			type: Function,
+			required: false
+		},
+		onBlur: {
+			type: Function,
+			required: false
+		},
+		onKeydown: {
+			type: Function,
+			required: false
+		},
+		onKeyup: {
+			type: Function,
+			required: false
+		},
+		onCompositionstart: {
+			type: Function,
+			required: false
+		},
+		onCompositionend: {
+			type: Function,
+			required: false
+		},
+		onBeforeinput: {
+			type: Function,
+			required: false
+		},
+		open: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		"onUpdate:open": {
+			type: Function,
+			required: false
+		},
+		onOpenChange: {
+			type: Function,
+			required: false
+		},
+		contentRender: {
+			type: Function,
+			required: false
+		},
+		numberFormatOptions: {
+			type: Object,
+			required: false
+		},
+		numberPopoverRender: {
+			type: [Function, Boolean],
+			required: false,
+			default: void 0
+		}
+	},
+	name: "InputNumberPopover",
+	inheritAttrs: false
+});
+//#endregion
+export { InputNumberPopover as default };

package/dist/components/Money/index.d.ts

@@ -0,0 +1,303 @@
+import { ProFieldFC } from "../../typing.js";
+import * as _$vue from "vue";
+import * as _$_antdv_next1_pro_provider0 from "@antdv-next1/pro-provider";
+import { InputNumberProps } from "antdv-next";
+import { VueNode } from "@v-c/util";
+import { CustomSlotsType } from "@v-c/util/dist/type";
+
+//#region src/components/Money/index.d.ts
+type FieldMoneyProps = ProFieldFC<{
+  text: number;
+  moneySymbol?: boolean;
+  locale?: string;
+  /**
+   * 输入框内容为空的提示内容
+   */
+  placeholder?: string;
+  /**
+   * 自定义 money 的 Symbol
+   */
+  customSymbol?: string;
+  /**
+   * 自定义 Popover 的值，false 可以关闭他
+   */
+  numberPopoverRender?: ((props: InputNumberProps, defaultText: string) => VueNode) | boolean;
+  /**
+   * NumberFormat 的配置，文档可以查看 mdn
+   *
+   * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+   */
+  numberFormatOptions?: {
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    localeMatcher?: string;
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    style?: string;
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    currency?: string;
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    currencyDisplay?: string;
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    currencySign?: string;
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    useGrouping?: boolean;
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    minimumIntegerDigits?: number;
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    minimumFractionDigits?: number;
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    maximumFractionDigits?: number;
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    minimumSignificantDigits?: number;
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    maximumSignificantDigits?: number;
+  };
+}, InputNumberProps & {
+  numberFormatOptions?: {
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    localeMatcher?: string;
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    style?: string;
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    currency?: string;
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    currencyDisplay?: string;
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    currencySign?: string;
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    useGrouping?: boolean;
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    minimumIntegerDigits?: number;
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    minimumFractionDigits?: number;
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    maximumFractionDigits?: number;
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    minimumSignificantDigits?: number;
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    maximumSignificantDigits?: number;
+  };
+  numberPopoverRender?: ((props: InputNumberProps, defaultText: string) => VueNode) | boolean;
+  customSymbol?: string;
+  moneySymbol?: boolean;
+  open?: boolean;
+}>;
+declare const FieldMoney: _$vue.DefineSetupFnComponent<FieldMoneyProps, {}, CustomSlotsType<{
+  default?: () => VueNode;
+}>, _$_antdv_next1_pro_provider0.BaseProFieldFC<InputNumberProps & {
+  numberFormatOptions?: {
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    localeMatcher?: string;
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    style?: string;
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    currency?: string;
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    currencyDisplay?: string;
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    currencySign?: string;
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    useGrouping?: boolean;
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    minimumIntegerDigits?: number;
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    minimumFractionDigits?: number;
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    maximumFractionDigits?: number;
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    minimumSignificantDigits?: number;
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    maximumSignificantDigits?: number;
+  };
+  numberPopoverRender?: ((props: InputNumberProps, defaultText: string) => VueNode) | boolean;
+  customSymbol?: string;
+  moneySymbol?: boolean;
+  open?: boolean;
+}> & _$_antdv_next1_pro_provider0.ProRenderFieldPropsType<InputNumberProps & {
+  numberFormatOptions?: {
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    localeMatcher?: string;
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    style?: string;
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    currency?: string;
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    currencyDisplay?: string;
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    currencySign?: string;
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    useGrouping?: boolean;
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    minimumIntegerDigits?: number;
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    minimumFractionDigits?: number;
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    maximumFractionDigits?: number;
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    minimumSignificantDigits?: number;
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    maximumSignificantDigits?: number;
+  };
+  numberPopoverRender?: ((props: InputNumberProps, defaultText: string) => VueNode) | boolean;
+  customSymbol?: string;
+  moneySymbol?: boolean;
+  open?: boolean;
+}> & {
+  text: number;
+  moneySymbol?: boolean;
+  locale?: string;
+  /**
+   * 输入框内容为空的提示内容
+   */
+  placeholder?: string;
+  /**
+   * 自定义 money 的 Symbol
+   */
+  customSymbol?: string;
+  /**
+   * 自定义 Popover 的值，false 可以关闭他
+   */
+  numberPopoverRender?: ((props: InputNumberProps, defaultText: string) => VueNode) | boolean;
+  /**
+   * NumberFormat 的配置，文档可以查看 mdn
+   *
+   * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+   */
+  numberFormatOptions?: {
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    localeMatcher?: string;
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    style?: string;
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    currency?: string;
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    currencyDisplay?: string;
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    currencySign?: string;
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    useGrouping?: boolean;
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    minimumIntegerDigits?: number;
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    minimumFractionDigits?: number;
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    maximumFractionDigits?: number;
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    minimumSignificantDigits?: number;
+    /**
+     * @see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    maximumSignificantDigits?: number;
+  };
+} & {
+  id?: string;
+} & {}, _$vue.PublicProps>;
+//#endregion
+export { FieldMoneyProps, FieldMoney as default };