niuma-ui 1.3.9 → 2.0.0

package/dist/components/input/src/RsInput.impl.js

@@ -0,0 +1,439 @@
+import { useRsI18n } from "../../../composables/useRsI18n.js";
+import RsIcon_default from "../../icon/src/RsIcon.js";
+import { buildLocalInputRules, runFormFieldRules } from "../../form/src/form-rules.js";
+import { isRsFormItemBoundControl, useRsFormContext, useRsFormField, useRsFormItemContext } from "../../form/src/form-utils.js";
+import { useResolvedRsComponentSize } from "../../_shared/src/resolve-size.js";
+import { rsRadiusCss, useResolvedRsRadius } from "../../_shared/src/resolve-radius.js";
+import RsVNodeHost_default from "../../vnode-host/src/RsVNodeHost.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, guardReactiveProps, mergeModels, mergeProps, normalizeClass, normalizeProps, normalizeStyle, openBlock, ref, renderSlot, toDisplayString, unref, useAttrs, useId, useModel, useSlots, withModifiers } from "vue";
+//#region src/components/input/src/RsInput.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "rs-field__label"
+};
+var _hoisted_2 = ["for"];
+var _hoisted_3 = {
+	key: 0,
+	class: "rs-field__required",
+	"aria-hidden": "true"
+};
+var _hoisted_4 = { class: "rs-input-field" };
+var _hoisted_5 = {
+	key: 0,
+	class: "rs-input-addon rs-input-addon--before"
+};
+var _hoisted_6 = {
+	key: 0,
+	class: "rs-input-group__affix rs-input-group__affix--prefix"
+};
+var _hoisted_7 = [
+	"id",
+	"value",
+	"type",
+	"placeholder",
+	"disabled",
+	"readonly",
+	"maxlength",
+	"autocomplete",
+	"aria-invalid",
+	"aria-describedby"
+];
+var _hoisted_8 = {
+	key: 1,
+	class: "rs-input-group__affix rs-input-group__affix--suffix"
+};
+var _hoisted_9 = {
+	key: 0,
+	class: "rs-input-group__count",
+	"aria-hidden": "true"
+};
+var _hoisted_10 = ["aria-label"];
+var _hoisted_11 = ["aria-label", "aria-pressed"];
+var _hoisted_12 = {
+	key: 3,
+	class: "rs-input-group__custom-suffix"
+};
+var _hoisted_13 = [
+	"aria-label",
+	"title",
+	"disabled"
+];
+var _hoisted_14 = ["id"];
+var _hoisted_15 = {
+	key: 2,
+	class: "rs-field__hint"
+};
+var RsInput_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "RsInput",
+	props: /*@__PURE__*/ mergeModels({
+		id: {},
+		type: { default: "text" },
+		placeholder: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		invalid: {
+			type: Boolean,
+			default: false
+		},
+		errorMessage: {},
+		size: {},
+		radius: {},
+		rule: {},
+		validator: {},
+		required: {
+			type: Boolean,
+			default: false
+		},
+		validateTrigger: { default: "blur" },
+		name: {},
+		prefix: {},
+		suffix: {},
+		addonBefore: {},
+		addonAfter: {},
+		addonAfterIcon: {},
+		addonAfterIconLabel: {},
+		clearable: {
+			type: Boolean,
+			default: false
+		},
+		maxlength: {},
+		showCount: {
+			type: Boolean,
+			default: false
+		},
+		visibilityToggle: {
+			type: Boolean,
+			default: true
+		},
+		showValidateMessage: {
+			type: Boolean,
+			default: true
+		},
+		label: {},
+		hint: {},
+		labelPosition: {},
+		autocomplete: {}
+	}, {
+		"modelValue": { default: "" },
+		"modelModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels([
+		"validate",
+		"blur",
+		"focus",
+		"pressEnter",
+		"clear",
+		"addonAfterClick"
+	], ["update:modelValue"]),
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const { t } = useRsI18n();
+		/**
+		* modelValue 契约恒为 string（对齐 Ant Input / 原生 input.value）。
+		* get/set 变换兜住外部误传 number；原生控件用 :value + el.value，避免 type=number 的类型漂移。
+		*/
+		const model = useModel(__props, "modelValue", {
+			get(value) {
+				return value == null ? "" : String(value);
+			},
+			set(value) {
+				return value == null ? "" : String(value);
+			}
+		});
+		const props = __props;
+		const emit = __emit;
+		const attrs = useAttrs();
+		const slots = useSlots();
+		const formContext = useRsFormContext();
+		const formItem = useRsFormItemContext();
+		const boundToItem = computed(() => isRsFormItemBoundControl(formItem, {
+			id: props.id,
+			name: props.name
+		}));
+		const fieldId = useId();
+		const touched = ref(false);
+		const autoInvalid = ref(false);
+		const autoMessage = ref("");
+		const passwordVisible = ref(false);
+		/** 中文等 IME 合成中：仍写入 model，但不触发校验 / pressEnter */
+		const composing = ref(false);
+		const hasPrefix = computed(() => Boolean(props.prefix || slots.prefix));
+		const hasCustomSuffix = computed(() => Boolean(props.suffix || slots.suffix));
+		const hasAddonBefore = computed(() => Boolean(props.addonBefore || slots.addonBefore));
+		/** 插槽或文本 addonAfter 内容（优先于图标按钮） */
+		const hasAddonAfterContent = computed(() => Boolean(slots.addonAfter) || props.addonAfter != null && props.addonAfter !== "");
+		const hasAddonAfter = computed(() => hasAddonAfterContent.value || Boolean(props.addonAfterIcon));
+		const hasAddon = computed(() => hasAddonBefore.value || hasAddonAfter.value);
+		const resolvedId = computed(() => props.id ?? fieldId);
+		/** 未显式传 autocomplete 时关闭快捷填充；密码框用 new-password 更稳 */
+		const resolvedAutocomplete = computed(() => {
+			if (props.autocomplete != null && props.autocomplete !== "") return props.autocomplete;
+			return props.type === "password" ? "new-password" : "off";
+		});
+		const resolvedLabelPosition = computed(() => props.labelPosition ?? formContext?.labelPosition.value ?? "top");
+		const resolvedLabelAlign = computed(() => formContext?.labelAlign.value ?? "start");
+		const errorId = computed(() => `${resolvedId.value}-error`);
+		const displayMessage = computed(() => {
+			if (boundToItem.value) return "";
+			if (props.errorMessage) return props.errorMessage;
+			if (props.showValidateMessage && autoInvalid.value) return autoMessage.value;
+			return "";
+		});
+		const errorSlotProps = computed(() => ({
+			name: props.name,
+			message: displayMessage.value,
+			value: model.value
+		}));
+		/** Form 级 #error / errorRender；字段无 #error 时使用 */
+		const formErrorContent = computed(() => {
+			if (!displayMessage.value || !formContext?.renderError) return null;
+			return formContext.renderError(errorSlotProps.value);
+		});
+		const isInvalid = computed(() => {
+			if (boundToItem.value) return Boolean(formItem?.invalid.value || props.invalid);
+			return props.invalid || autoInvalid.value;
+		});
+		const describedBy = computed(() => {
+			if (boundToItem.value) return formItem?.describedBy.value;
+			return displayMessage.value ? errorId.value : void 0;
+		});
+		const resolvedDisabled = computed(() => props.disabled || formContext?.disabled.value || false);
+		const resolvedReadonly = computed(() => props.readonly);
+		const resolvedSize = useResolvedRsComponentSize(() => props.size);
+		const resolvedRadius = useResolvedRsRadius(() => props.radius, "sm");
+		const radiusStyle = computed(() => ({ "--rs-input-radius": rsRadiusCss(resolvedRadius.value) }));
+		const resolvedShowPassword = computed(() => props.type === "password" && props.visibilityToggle);
+		const resolvedInputType = computed(() => {
+			if (props.type === "password" && passwordVisible.value) return "text";
+			return props.type;
+		});
+		const hasValue = computed(() => model.value.length > 0);
+		const showClearButton = computed(() => props.clearable && hasValue.value && !resolvedDisabled.value && !resolvedReadonly.value);
+		const showPasswordToggle = computed(() => props.type === "password" && resolvedShowPassword.value && !resolvedDisabled.value);
+		const showCountDisplay = computed(() => props.showCount && props.maxlength != null);
+		const countText = computed(() => `${model.value.length} / ${props.maxlength}`);
+		/** 无 addonAfter 内容时用组件自绘的后置图标按钮 */
+		const showAddonAfterIcon = computed(() => Boolean(props.addonAfterIcon) && !hasAddonAfterContent.value);
+		const hasSuffix = computed(() => Boolean(hasCustomSuffix.value || showClearButton.value || showPasswordToggle.value || showCountDisplay.value));
+		/**
+		* 点击框外后置图标按钮
+		*/
+		function onAddonAfterIconClick(event) {
+			if (resolvedDisabled.value || resolvedReadonly.value) return;
+			emit("addonAfterClick", event);
+		}
+		const fieldStyle = computed(() => {
+			if (resolvedLabelPosition.value !== "left") return void 0;
+			const labelWidth = formContext?.labelWidth.value;
+			if (!labelWidth) return void 0;
+			return { "--rs-field-label-width": labelWidth };
+		});
+		async function runValidate(trigger = "submit") {
+			const formRules = formContext?.getFieldRules(props.name) ?? [];
+			const localRules = buildLocalInputRules({
+				required: props.required,
+				rule: props.rule,
+				validator: props.validator
+			});
+			const rules = [...formRules, ...localRules];
+			if (!rules.length) {
+				autoInvalid.value = false;
+				autoMessage.value = "";
+				emit("validate", { valid: true });
+				return true;
+			}
+			const result = await runFormFieldRules(model.value, rules, {
+				trigger,
+				t
+			});
+			autoInvalid.value = !result.valid;
+			autoMessage.value = result.message ?? "";
+			emit("validate", result);
+			return result.valid;
+		}
+		function setError(message) {
+			autoInvalid.value = true;
+			autoMessage.value = message;
+		}
+		function onInput() {
+			if (composing.value) return;
+			if (touched.value && (props.validateTrigger === "input" || props.validateTrigger === "both")) runValidate("change");
+		}
+		/** 受控写入：始终取 DOM string value，不依赖 v-model 对 type=number 的隐式行为。 */
+		function onNativeInput(event) {
+			const el = event.target;
+			model.value = el?.value ?? "";
+			onInput();
+		}
+		function onCompositionStart() {
+			composing.value = true;
+		}
+		function onCompositionEnd(event) {
+			composing.value = false;
+			onNativeInput(event);
+		}
+		function onBlur(event) {
+			touched.value = true;
+			if (props.validateTrigger === "blur" || props.validateTrigger === "both") runValidate("blur");
+			emit("blur", event);
+		}
+		function onFocus(event) {
+			emit("focus", event);
+		}
+		function onKeydown(event) {
+			if (event.key !== "Enter") return;
+			if (composing.value || event.isComposing) return;
+			emit("pressEnter", event);
+		}
+		function onClear() {
+			model.value = "";
+			emit("clear");
+			if (touched.value) runValidate("change");
+		}
+		function togglePasswordVisible() {
+			passwordVisible.value = !passwordVisible.value;
+		}
+		function setValue(value) {
+			model.value = String(value ?? "");
+		}
+		function clearValidation() {
+			touched.value = false;
+			autoInvalid.value = false;
+			autoMessage.value = "";
+		}
+		useRsFormField(() => ({
+			get name() {
+				return props.name;
+			},
+			getValue: () => model.value,
+			setValue,
+			validate: async (trigger) => {
+				return {
+					valid: await runValidate(trigger ?? "submit"),
+					message: autoMessage.value || void 0,
+					name: props.name
+				};
+			},
+			clearValidation,
+			setError
+		}));
+		__expose({
+			validate: runValidate,
+			clearValidation,
+			setValue,
+			setError
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(["rs-field", [
+					`rs-field--label-${resolvedLabelPosition.value}`,
+					resolvedLabelPosition.value === "left" && resolvedLabelAlign.value === "end" ? "rs-field--label-align-end" : void 0,
+					`rs-input-field--${unref(resolvedSize)}`
+				]]),
+				style: normalizeStyle([fieldStyle.value, radiusStyle.value])
+			}, [
+				__props.label ? (openBlock(), createElementBlock("span", _hoisted_1, [createElementVNode("label", { for: resolvedId.value }, toDisplayString(__props.label), 9, _hoisted_2), __props.required ? (openBlock(), createElementBlock("span", _hoisted_3, "*")) : createCommentVNode("", true)])) : createCommentVNode("", true),
+				createElementVNode("div", _hoisted_4, [createElementVNode("div", { class: normalizeClass(["rs-input-shell", [`rs-input-shell--${unref(resolvedSize)}`, {
+					"rs-input-shell--combined": hasAddon.value,
+					"rs-input-shell--invalid": isInvalid.value,
+					"rs-input-shell--disabled": resolvedDisabled.value
+				}]]) }, [
+					hasAddonBefore.value ? (openBlock(), createElementBlock("span", _hoisted_5, [renderSlot(_ctx.$slots, "addonBefore", {}, () => [createTextVNode(toDisplayString(__props.addonBefore), 1)], true)])) : createCommentVNode("", true),
+					createElementVNode("div", { class: normalizeClass(["rs-input-group", {
+						"rs-input-group--invalid": isInvalid.value,
+						"rs-input-group--disabled": resolvedDisabled.value,
+						"rs-input-group--readonly": resolvedReadonly.value,
+						[`rs-input-group--${unref(resolvedSize)}`]: true,
+						"rs-input-group--has-prefix": hasPrefix.value,
+						"rs-input-group--has-suffix": hasSuffix.value,
+						"rs-input-group--combined-before": hasAddonBefore.value,
+						"rs-input-group--combined-after": hasAddonAfter.value
+					}]) }, [
+						hasPrefix.value ? (openBlock(), createElementBlock("span", _hoisted_6, [renderSlot(_ctx.$slots, "prefix", {}, () => [createTextVNode(toDisplayString(__props.prefix), 1)], true)])) : createCommentVNode("", true),
+						createElementVNode("input", mergeProps(unref(attrs), {
+							id: resolvedId.value,
+							value: model.value,
+							class: ["rs-input-group__control", `rs-input-group__control--${unref(resolvedSize)}`],
+							type: resolvedInputType.value,
+							placeholder: __props.placeholder,
+							disabled: resolvedDisabled.value,
+							readonly: resolvedReadonly.value,
+							maxlength: __props.maxlength,
+							autocomplete: resolvedAutocomplete.value,
+							"aria-invalid": isInvalid.value || void 0,
+							"aria-describedby": describedBy.value,
+							onInput: onNativeInput,
+							onCompositionstart: onCompositionStart,
+							onCompositionend: onCompositionEnd,
+							onBlur,
+							onFocus,
+							onKeydown
+						}), null, 16, _hoisted_7),
+						hasSuffix.value ? (openBlock(), createElementBlock("span", _hoisted_8, [
+							showCountDisplay.value ? (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(countText.value), 1)) : createCommentVNode("", true),
+							showClearButton.value ? (openBlock(), createElementBlock("button", {
+								key: 1,
+								type: "button",
+								class: "rs-input-group__action",
+								tabindex: "-1",
+								"aria-label": unref(t)("input.clear"),
+								onPointerdown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"])),
+								onClick: onClear
+							}, [createVNode(RsIcon_default, {
+								name: "x",
+								size: 14
+							})], 40, _hoisted_10)) : createCommentVNode("", true),
+							showPasswordToggle.value ? (openBlock(), createElementBlock("button", {
+								key: 2,
+								type: "button",
+								class: "rs-input-group__action",
+								tabindex: "-1",
+								"aria-label": passwordVisible.value ? unref(t)("input.hidePassword") : unref(t)("input.showPassword"),
+								"aria-pressed": passwordVisible.value,
+								onPointerdown: _cache[1] || (_cache[1] = withModifiers(() => {}, ["prevent"])),
+								onClick: togglePasswordVisible
+							}, [createVNode(RsIcon_default, {
+								name: passwordVisible.value ? "eye-off" : "eye",
+								size: 14
+							}, null, 8, ["name"])], 40, _hoisted_11)) : createCommentVNode("", true),
+							hasCustomSuffix.value ? (openBlock(), createElementBlock("span", _hoisted_12, [renderSlot(_ctx.$slots, "suffix", {}, () => [createTextVNode(toDisplayString(__props.suffix), 1)], true)])) : createCommentVNode("", true)
+						])) : createCommentVNode("", true)
+					], 2),
+					hasAddonAfter.value ? (openBlock(), createElementBlock("span", {
+						key: 1,
+						class: normalizeClass(["rs-input-addon rs-input-addon--after", { "rs-input-addon--icon": showAddonAfterIcon.value }])
+					}, [hasAddonAfterContent.value ? renderSlot(_ctx.$slots, "addonAfter", {}, () => [createTextVNode(toDisplayString(__props.addonAfter), 1)], true, 0) : showAddonAfterIcon.value ? (openBlock(), createElementBlock("button", {
+						key: 1,
+						type: "button",
+						class: "rs-input-addon__button",
+						"aria-label": __props.addonAfterIconLabel || void 0,
+						title: __props.addonAfterIconLabel || void 0,
+						disabled: resolvedDisabled.value || resolvedReadonly.value,
+						onClick: onAddonAfterIconClick
+					}, [createVNode(RsIcon_default, {
+						name: __props.addonAfterIcon,
+						size: 14
+					}, null, 8, ["name"])], 8, _hoisted_13)) : createCommentVNode("", true)], 2)) : createCommentVNode("", true)
+				], 2)]),
+				displayMessage.value ? (openBlock(), createElementBlock("p", {
+					key: 1,
+					id: errorId.value,
+					class: "rs-input-field__error",
+					role: "alert"
+				}, [renderSlot(_ctx.$slots, "error", normalizeProps(guardReactiveProps(errorSlotProps.value)), () => [formErrorContent.value !== null && formErrorContent.value !== void 0 ? (openBlock(), createBlock(RsVNodeHost_default, {
+					key: 0,
+					content: formErrorContent.value
+				}, null, 8, ["content"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(displayMessage.value), 1)], 64))], true)], 8, _hoisted_14)) : createCommentVNode("", true),
+				__props.hint ? (openBlock(), createElementBlock("span", _hoisted_15, toDisplayString(__props.hint), 1)) : createCommentVNode("", true)
+			], 6);
+		};
+	}
+});
+//#endregion
+export { RsInput_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/input/src/RsInput.js

@@ -0,0 +1,8 @@
+import './RsInput.css'
+import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.js";
+import RsInput_vue_vue_type_script_setup_true_lang_default from "./RsInput.impl.js";
+
+//#region src/components/input/src/RsInput.vue
+var RsInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsInput_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-bd4a508f"]]);
+//#endregion
+export { RsInput_default as default };

package/dist/components/input/src/input-rules.d.ts

@@ -0,0 +1,15 @@
+import type { RsTranslateFn } from '../../../composables/useRsI18n';
+export type RsInputRule = 'email' | 'number' | 'integer' | 'phone' | 'url' | 'minComplexity';
+export type RsInputValidateTrigger = 'blur' | 'input' | 'both';
+export declare const inputRuleMessageKeys: Record<RsInputRule, string>;
+export declare function validateInputRule(value: string, rule: RsInputRule): boolean;
+export declare function getInputRuleMessage(rule: RsInputRule, t?: RsTranslateFn): string;
+export interface RsInputValidateResult {
+    valid: boolean;
+    message?: string;
+}
+export declare function runInputValidation(value: string, options: {
+    rule?: RsInputRule;
+    required?: boolean;
+    validator?: (value: string) => boolean | string;
+}, t?: RsTranslateFn): RsInputValidateResult;

package/dist/components/input/src/input-rules.js

@@ -0,0 +1,59 @@
+import "../../../locale/types.js";
+import { createTranslator } from "../../../composables/useRsI18n.js";
+//#region src/components/input/src/input-rules.ts
+var inputRuleMessageKeys = {
+	email: "input.rule.email",
+	number: "input.rule.number",
+	integer: "input.rule.integer",
+	phone: "input.rule.phone",
+	url: "input.rule.url",
+	minComplexity: "input.rule.minComplexity"
+};
+var emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+var numberPattern = /^-?\d+(\.\d+)?$/;
+var integerPattern = /^-?\d+$/;
+var phonePattern = /^1[3-9]\d{9}$/;
+var urlPattern = /^https?:\/\/.+/i;
+var minComplexityPattern = /^(?=.*[A-Za-z])(?=.*\d).{8,}$/;
+function validateInputRule(value, rule) {
+	if (value === "") return true;
+	switch (rule) {
+		case "email": return emailPattern.test(value);
+		case "number": return numberPattern.test(value);
+		case "integer": return integerPattern.test(value);
+		case "phone": return phonePattern.test(value);
+		case "url": return urlPattern.test(value);
+		case "minComplexity": return minComplexityPattern.test(value);
+		default: return true;
+	}
+}
+function getInputRuleMessage(rule, t) {
+	const key = inputRuleMessageKeys[rule];
+	return (t ?? createTranslator("zh-CN"))(key);
+}
+function runInputValidation(value, options, t) {
+	const tr = t ?? createTranslator("zh-CN");
+	if (options.required && value.trim() === "") return {
+		valid: false,
+		message: tr("input.required")
+	};
+	if (options.rule && !validateInputRule(value, options.rule)) return {
+		valid: false,
+		message: getInputRuleMessage(options.rule, tr)
+	};
+	if (options.validator) {
+		const result = options.validator(value);
+		if (result === true) return { valid: true };
+		if (result === false) return {
+			valid: false,
+			message: tr("input.formatInvalid")
+		};
+		if (typeof result === "string") return {
+			valid: false,
+			message: result
+		};
+	}
+	return { valid: true };
+}
+//#endregion
+export { getInputRuleMessage, inputRuleMessageKeys, runInputValidation, validateInputRule };

package/dist/components/input-number/index.d.ts

@@ -0,0 +1,3 @@
+export { default as RsInputNumber } from './src/RsInputNumber.js';
+export type { RsInputNumberValue } from './src/input-number-utils';
+export { clampNumber, formatNumberValue, fromModelValue, isNumberInputInterim, normalizeCommittedNumber, parseNumberInput, resolveNumberPrecision, roundToPrecision, stepNumberValue, toModelValue, } from './src/input-number-utils';

package/dist/components/input-number/src/RsInputNumber.css

@@ -0,0 +1,163 @@
+
+.rs-input-number-field[data-v-99a18a9b] {
+  width: 100%;
+}
+.rs-field--label-left .rs-input-number-field[data-v-99a18a9b] {
+  grid-column: 2;
+  min-width: 0;
+}
+.rs-field--label-left .rs-input-number-field__error[data-v-99a18a9b] {
+  grid-column: 2;
+}
+.rs-field--label-left .rs-field__label[data-v-99a18a9b] {
+  display: flex;
+  align-items: center;
+  min-height: var(--rs-control-height-md);
+}
+.rs-input-number-field--ssm.rs-field--label-left .rs-field__label[data-v-99a18a9b] {
+  min-height: var(--rs-control-height-ssm);
+}
+.rs-input-number-field--sm.rs-field--label-left .rs-field__label[data-v-99a18a9b] {
+  min-height: var(--rs-control-height-sm);
+}
+.rs-input-number-field--lg.rs-field--label-left .rs-field__label[data-v-99a18a9b] {
+  min-height: var(--rs-control-height-lg);
+}
+.rs-input-number[data-v-99a18a9b] {
+  display: flex;
+  align-items: stretch;
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--rs-control-height-md);
+  min-height: var(--rs-control-height-md);
+  border-radius: var(--rs-input-radius, var(--rs-radius-sm));
+  border: 1px solid var(--rs-input-border, var(--rs-border));
+  background: var(--rs-input-bg);
+  box-shadow: var(--rs-input-shadow, none);
+  transition:
+    border-color var(--rs-transition-fast),
+    box-shadow var(--rs-transition-fast),
+    background var(--rs-transition-fast);
+  overflow: hidden;
+}
+.rs-input-number--ssm[data-v-99a18a9b] {
+  height: var(--rs-control-height-ssm);
+  min-height: var(--rs-control-height-ssm);
+}
+.rs-input-number--sm[data-v-99a18a9b] {
+  height: var(--rs-control-height-sm);
+  min-height: var(--rs-control-height-sm);
+}
+.rs-input-number--lg[data-v-99a18a9b] {
+  height: var(--rs-control-height-lg);
+  min-height: var(--rs-control-height-lg);
+}
+.rs-input-number[data-v-99a18a9b]:hover:not(.rs-input-number--disabled):not(.rs-input-number--readonly):not(
+    :focus-within
+  ) {
+  border-color: var(--rs-input-border-hover, var(--rs-border));
+}
+.rs-input-number[data-v-99a18a9b]:focus-within {
+  border-color: var(--rs-focus-border, var(--rs-primary));
+  box-shadow:
+    var(--rs-input-shadow, none),
+    0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
+}
+.rs-input-number--invalid[data-v-99a18a9b] {
+  border-color: var(--rs-danger);
+}
+.rs-input-number--invalid[data-v-99a18a9b]:focus-within {
+  border-color: var(--rs-danger);
+  box-shadow:
+    var(--rs-input-shadow, none),
+    0 0 0 var(--rs-focus-ring-width, 2px) color-mix(in srgb, var(--rs-danger) 14%, transparent);
+}
+.rs-input-number--disabled[data-v-99a18a9b] {
+  opacity: 0.55;
+  cursor: not-allowed;
+  background: var(--rs-surface-hover);
+}
+.rs-input-number__control[data-v-99a18a9b] {
+  flex: 1;
+  align-self: stretch;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  border: 0;
+  outline: none;
+  background: transparent;
+  color: var(--rs-text);
+  font-size: var(--rs-font-size-sm);
+  line-height: 1;
+  padding: 0 var(--rs-space-md);
+  appearance: textfield;
+  -moz-appearance: textfield;
+}
+.rs-input-number__control--ssm[data-v-99a18a9b] {
+  padding: 0 var(--rs-space-xs);
+  font-size: var(--rs-font-size-xs);
+}
+.rs-input-number__control--sm[data-v-99a18a9b] {
+  padding: 0 var(--rs-space-sm);
+  font-size: var(--rs-font-size-xs);
+}
+.rs-input-number__control--lg[data-v-99a18a9b] {
+  padding: 0 var(--rs-space-lg);
+  font-size: var(--rs-font-size-base);
+}
+.rs-input-number__control[data-v-99a18a9b]:disabled {
+  cursor: not-allowed;
+}
+.rs-input-number__control[data-v-99a18a9b]::-webkit-outer-spin-button,
+.rs-input-number__control[data-v-99a18a9b]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.rs-input-number__handlers[data-v-99a18a9b] {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  align-self: stretch;
+  box-sizing: border-box;
+  width: 22px;
+  height: 100%;
+  overflow: hidden;
+  border-left: 1px solid var(--rs-input-border, var(--rs-border));
+}
+.rs-input-number--ssm .rs-input-number__handlers[data-v-99a18a9b],
+.rs-input-number--sm .rs-input-number__handlers[data-v-99a18a9b] {
+  width: 18px;
+}
+.rs-input-number__handler[data-v-99a18a9b] {
+  flex: 1 1 0;
+  min-height: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  color: var(--rs-muted);
+  cursor: pointer;
+  line-height: 1;
+}
+.rs-input-number__handler[data-v-99a18a9b]:hover:not(:disabled) {
+  color: var(--rs-text);
+  background: var(--rs-surface-hover);
+}
+.rs-input-number__handler[data-v-99a18a9b]:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+.rs-input-number__handler--up[data-v-99a18a9b] {
+  border-bottom: 1px solid var(--rs-input-border, var(--rs-border));
+}
+.rs-input-number-field__error[data-v-99a18a9b] {
+  margin: 4px 0 0;
+  font-size: var(--rs-font-size-xs);
+  color: var(--rs-danger);
+  line-height: 1.4;
+}