niuma-ui 1.0.0 → 1.0.2

package/src/components/RsForm.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, toRef, useSlots } from 'vue'
 import type {
+  RsFormErrorRender,
+  RsFormErrorRenderContext,
   RsFormFieldExpose,
+  RsFormFieldValidationResult,
   RsFormGap,
   RsFormLabelAlign,
   RsFormLabelPosition,
@@ -9,7 +12,8 @@ import type {
   RsFormSize,
   RsFormValidationResult,
 } from './form-utils'
-import { cloneFormFieldValue, provideRsFormContext } from './form-utils'
+import { cloneFormFieldValue, provideRsFormContext, resolveFieldRules } from './form-utils'
+import type { RsFormRuleTrigger, RsFormRules } from './form-rules'
 
 const props = withDefaults(
   defineProps<{
@@ -20,6 +24,18 @@ const props = withDefaults(
     size?: RsFormSize
     gap?: RsFormGap
     maxWidth?: RsFormMaxWidth
+    /**
+     * 集中声明校验规则（按字段 name 匹配）。
+     * 与字段自身 required/rule/validator 合并执行。
+     */
+    rules?: RsFormRules
+    /** 原生 form 提交时自动跑一遍校验（默认 true） */
+    validateOnSubmit?: boolean
+    /**
+     * 自定义错误渲染（函数式）。
+     * 也可用 `#error="{ name, message, value }"` 插槽，插槽优先。
+     */
+    errorRender?: RsFormErrorRender
   }>(),
   {
     disabled: false,
@@ -29,15 +45,23 @@ const props = withDefaults(
     size: 'md',
     gap: 'md',
     maxWidth: 'full',
+    validateOnSubmit: true,
   },
 )
 
+const emit = defineEmits<{
+  submit: [event: Event]
+  validate: [result: RsFormValidationResult]
+}>()
+
+const slots = useSlots()
 const fields = new Map<symbol, RsFormFieldExpose>()
 const disabledRef = computed(() => props.disabled)
 const labelPositionRef = computed(() => props.labelPosition)
 const labelWidthRef = computed(() => props.labelWidth)
 const labelAlignRef = computed(() => props.labelAlign)
 const sizeRef = computed(() => props.size)
+const rulesRef = toRef(props, 'rules')
 const initialValues = ref(new Map<symbol, unknown>())
 
 function registerField(id: symbol, field: RsFormFieldExpose): void {
@@ -50,36 +74,99 @@ function unregisterField(id: symbol): void {
   initialValues.value.delete(id)
 }
 
+function getFieldRules(name?: string) {
+  return resolveFieldRules(props.rules, name)
+}
+
+function renderError(ctx: RsFormErrorRenderContext) {
+  if (slots.error) return slots.error(ctx)
+  return props.errorRender?.(ctx)
+}
+
 provideRsFormContext({
   disabled: disabledRef,
   labelPosition: labelPositionRef,
   labelWidth: labelWidthRef,
   labelAlign: labelAlignRef,
   size: sizeRef,
+  rules: rulesRef,
+  getFieldRules,
+  renderError,
   registerField,
   unregisterField,
 })
 
-async function validate(): Promise<RsFormValidationResult> {
+function collectResult(
+  results: RsFormFieldValidationResult[],
+): RsFormValidationResult {
+  const errors: Record<string, string> = {}
+  for (const result of results) {
+    if (!result.valid && result.name && result.message && !errors[result.name]) {
+      errors[result.name] = result.message
+    }
+  }
+  return {
+    valid: results.every((result) => result.valid),
+    errors,
+  }
+}
+
+/** 校验全部字段；可传 trigger 过滤规则 */
+async function validate(trigger: RsFormRuleTrigger = 'submit'): Promise<RsFormValidationResult> {
   const results = await Promise.all(
-    Array.from(fields.values()).map((field) => field.validate?.() ?? { valid: true }),
+    Array.from(fields.values()).map(
+      (field) => field.validate?.(trigger) ?? { valid: true, name: field.name },
+    ),
   )
-  return { valid: results.every((result) => result.valid) }
+  const aggregated = collectResult(results)
+  emit('validate', aggregated)
+  return aggregated
 }
 
-function clearValidation(): void {
-  fields.forEach((field) => field.clearValidation?.())
+/** 按 name 校验单个字段 */
+async function validateField(
+  name: string,
+  trigger: RsFormRuleTrigger = 'submit',
+): Promise<RsFormFieldValidationResult> {
+  const field = Array.from(fields.values()).find((item) => item.name === name)
+  if (!field) return { valid: true, name }
+  const result = (await field.validate?.(trigger)) ?? { valid: true, name }
+  return { ...result, name }
 }
 
-function resetFields(): void {
+function clearValidation(names?: string | string[]): void {
+  const nameSet = names
+    ? new Set(Array.isArray(names) ? names : [names])
+    : null
+  fields.forEach((field) => {
+    if (nameSet && (!field.name || !nameSet.has(field.name))) return
+    field.clearValidation?.()
+  })
+}
+
+function resetFields(names?: string | string[]): void {
+  const nameSet = names
+    ? new Set(Array.isArray(names) ? names : [names])
+    : null
   fields.forEach((field, id) => {
+    if (nameSet && (!field.name || !nameSet.has(field.name))) return
     field.setValue(cloneFormFieldValue(initialValues.value.get(id)))
     field.clearValidation?.()
   })
 }
 
+async function onSubmit(event: Event): Promise<void> {
+  if (props.validateOnSubmit) {
+    event.preventDefault()
+    const result = await validate('submit')
+    if (!result.valid) return
+  }
+  emit('submit', event)
+}
+
 defineExpose({
   validate,
+  validateField,
   clearValidation,
   resetFields,
 })
@@ -93,7 +180,9 @@ defineExpose({
       `rs-form--max-${maxWidth}`,
       `rs-form--label-${labelPosition}`,
     ]"
+    @submit="onSubmit"
   >
+    <!-- 默认插槽：表单字段；#error 不在此渲染，经 Context 注入到字段错误区 -->
     <slot />
   </form>
 </template>

package/src/components/RsInput.vue

@@ -9,25 +9,24 @@ import { useResolvedRsComponentSize } from './resolve-size'
 import { rsRadiusCss, useResolvedRsRadius } from './resolve-radius'
 
 import {
-
-  runInputValidation,
-
   type RsInputRule,
-
   type RsInputValidateTrigger,
-
 } from './input-rules'
 
 import {
-
   useRsFormContext,
-
   useRsFormField,
-
   type RsFormLabelPosition,
-
 } from './form-utils'
 
+import {
+  buildLocalInputRules,
+  runFormFieldRules,
+  type RsFormRuleTrigger,
+} from './form-rules'
+
+import RsVNodeHost from './RsVNodeHost.vue'
+
 import RsIcon from './RsIcon.vue'
 
 
@@ -94,6 +93,9 @@ const props = withDefaults(
 
     validateTrigger?: RsInputValidateTrigger
 
+    /** 字段名：匹配 RsForm.rules[name]，并对齐大厂 Form.Item name */
+    name?: string
+
     /** 文本前缀（也可用 prefix 插槽） */
 
     prefix?: string
@@ -132,6 +134,13 @@ const props = withDefaults(
 
     labelPosition?: RsFormLabelPosition
 
+    /**
+     * 浏览器自动填充。
+     * 默认：普通输入 off；password 用 new-password（off 常被浏览器忽略）。
+     * 需要记住时可显式传 on / username / current-password 等。
+     */
+    autocomplete?: string
+
   }>(),
 
   {
@@ -156,8 +165,6 @@ const props = withDefaults(
 
     showValidateMessage: true,
 
-    labelPosition: 'top',
-
   },
 
 )
@@ -206,6 +213,12 @@ const hasPrefix = computed(() => Boolean(props.prefix || slots.prefix))
 
 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',
@@ -219,13 +232,21 @@ const errorId = computed(() => `${resolvedId.value}-error`)
 
 
 const displayMessage = computed(() => {
-
   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)
 })
 
 
@@ -316,68 +337,44 @@ const fieldStyle = computed(() => {
 
 
 
-function runValidate() {
-
-  if (!props.rule && !props.validator && !props.required) {
+async function runValidate(trigger: RsFormRuleTrigger = '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 = runInputValidation(
-
-    model.value,
-
-    {
-
-      rule: props.rule,
-
-      required: props.required,
-
-      validator: props.validator,
-
-    },
-
-    t,
-
-  )
-
-
+  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: string): void {
+  autoInvalid.value = true
+  autoMessage.value = message
 }
 
 
 
 function onInput() {
-
   if (
-
     touched.value &&
-
     (props.validateTrigger === 'input' || props.validateTrigger === 'both')
-
   ) {
-
-    runValidate()
-
+    void runValidate('change')
   }
-
 }
 
 /** 受控写入：始终取 DOM string value，不依赖 v-model 对 type=number 的隐式行为。 */
@@ -390,17 +387,11 @@ function onNativeInput(event: Event) {
 
 
 function onBlur(event: FocusEvent) {
-
   touched.value = true
-
   if (props.validateTrigger === 'blur' || props.validateTrigger === 'both') {
-
-    runValidate()
-
+    void runValidate('blur')
   }
-
   emit('blur', event)
-
 }
 
 
@@ -431,8 +422,7 @@ function onClear() {
 
   emit('clear')
 
-  if (touched.value) runValidate()
-
+  if (touched.value) void runValidate('change')
 }
 
 
@@ -466,27 +456,24 @@ function clearValidation(): void {
 
 
 useRsFormField(() => ({
-
+  get name() {
+    return props.name
+  },
   getValue: () => model.value,
-
   setValue,
-
-  validate: () => ({ valid: runValidate() }),
-
+  validate: async (trigger) => {
+    const valid = await runValidate(trigger ?? 'submit')
+    return { valid, message: autoMessage.value || undefined, name: props.name }
+  },
   clearValidation,
-
+  setError,
 }))
 
-
-
 defineExpose({
-
   validate: runValidate,
-
   clearValidation,
-
   setValue,
-
+  setError,
 })
 
 </script>
@@ -585,6 +572,8 @@ defineExpose({
 
           :maxlength="maxlength"
 
+          :autocomplete="resolvedAutocomplete"
+
           :aria-invalid="isInvalid || undefined"
 
           :aria-describedby="displayMessage ? errorId : undefined"
@@ -674,19 +663,18 @@ defineExpose({
 
 
     <p
-
       v-if="displayMessage"
-
       :id="errorId"
-
       class="rs-input-field__error"
-
       role="alert"
-
     >
-
-      {{ displayMessage }}
-
+      <slot name="error" v-bind="errorSlotProps">
+        <RsVNodeHost
+          v-if="formErrorContent !== null && formErrorContent !== undefined"
+          :content="formErrorContent"
+        />
+        <template v-else>{{ displayMessage }}</template>
+      </slot>
     </p>
 
 
@@ -755,8 +743,12 @@ defineExpose({
 
   align-items: center;
 
+  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));
@@ -783,18 +775,24 @@ defineExpose({
 
 .rs-input-group--ssm {
 
+  height: var(--rs-control-height-ssm);
+
   min-height: var(--rs-control-height-ssm);
 
 }
 
 .rs-input-group--sm {
 
+  height: var(--rs-control-height-sm);
+
   min-height: var(--rs-control-height-sm);
 
 }
 
 .rs-input-group--lg {
 
+  height: var(--rs-control-height-lg);
+
   min-height: var(--rs-control-height-lg);
 
 }

package/src/components/RsInputNumber.vue

@@ -17,6 +17,11 @@ import {
   useRsFormField,
   type RsFormLabelPosition,
 } from './form-utils'
+import {
+  buildLocalInputRules,
+  runFormFieldRules,
+  type RsFormRuleTrigger,
+} from './form-rules'
 import RsIcon from './RsIcon.vue'
 import {
   formatNumberValue,
@@ -63,6 +68,12 @@ const props = withDefaults(
     label?: string
     hint?: string
     required?: boolean
+    /** 字段名：匹配 RsForm.rules[name] */
+    name?: string
+    /**
+     * 浏览器自动填充提示；数字框默认 off，避免 Chrome 误报 username 等建议。
+     */
+    autocomplete?: string
     labelPosition?: RsFormLabelPosition
     /** 展示格式化（对齐 Ant formatter） */
     formatter?: (value: number, info: { userTyping: boolean; input: string }) => string
@@ -78,6 +89,7 @@ const props = withDefaults(
     disabled: false,
     readonly: false,
     required: false,
+    autocomplete: 'off',
   },
 )
 
@@ -92,6 +104,11 @@ const formContext = useRsFormContext()
 const autoId = useId()
 const resolvedId = computed(() => props.id || `rs-input-number-${autoId}`)
 const resolvedSize = useResolvedRsComponentSize(() => props.size)
+const handlerIconSize = computed(() => {
+  if (resolvedSize.value === 'ssm' || resolvedSize.value === 'sm') return 10
+  if (resolvedSize.value === 'lg') return 14
+  return 12
+})
 const resolvedRadius = useResolvedRsRadius(() => props.radius, 'sm')
 const radiusStyle = computed(() => ({
   '--rs-input-radius': rsRadiusCss(resolvedRadius.value),
@@ -264,15 +281,22 @@ function setValue(value: unknown): void {
   syncDraftFromModel(model.value)
 }
 
+async function runValidate(trigger: RsFormRuleTrigger = 'submit') {
+  const formRules = formContext?.getFieldRules(props.name) ?? []
+  const localRules = buildLocalInputRules({ required: props.required })
+  const rules = [...formRules, ...localRules]
+  if (!rules.length) return { valid: true as const, name: props.name }
+  const result = await runFormFieldRules(model.value, rules, { trigger })
+  return { valid: result.valid, message: result.message, name: props.name }
+}
+
 useRsFormField(() => ({
+  get name() {
+    return props.name
+  },
   getValue: () => model.value,
   setValue,
-  validate: () => {
-    if (props.required && model.value == null) {
-      return { valid: false }
-    }
-    return { valid: true }
-  },
+  validate: (trigger) => runValidate(trigger ?? 'submit'),
   clearValidation: () => undefined,
 }))
 
@@ -326,6 +350,8 @@ defineExpose({
           type="text"
           inputmode="decimal"
           role="spinbutton"
+          :autocomplete="autocomplete"
+          :name="name"
           :value="draft"
           :placeholder="placeholder"
           :disabled="resolvedDisabled"
@@ -353,7 +379,7 @@ defineExpose({
             @pointerdown.prevent
             @click="applyStep(1)"
           >
-            <RsIcon name="chevron-up" :size="12" />
+            <RsIcon name="chevron-up" :size="handlerIconSize" />
           </button>
           <button
             type="button"
@@ -364,7 +390,7 @@ defineExpose({
             @pointerdown.prevent
             @click="applyStep(-1)"
           >
-            <RsIcon name="chevron-down" :size="12" />
+            <RsIcon name="chevron-down" :size="handlerIconSize" />
           </button>
         </div>
       </div>
@@ -406,7 +432,9 @@ defineExpose({
 .rs-input-number {
   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));
@@ -419,12 +447,15 @@ defineExpose({
   overflow: hidden;
 }
 .rs-input-number--ssm {
+  height: var(--rs-control-height-ssm);
   min-height: var(--rs-control-height-ssm);
 }
 .rs-input-number--sm {
+  height: var(--rs-control-height-sm);
   min-height: var(--rs-control-height-sm);
 }
 .rs-input-number--lg {
+  height: var(--rs-control-height-lg);
   min-height: var(--rs-control-height-lg);
 }
 .rs-input-number:hover:not(.rs-input-number--disabled):not(.rs-input-number--readonly):not(
@@ -450,33 +481,38 @@ defineExpose({
 .rs-input-number--disabled {
   opacity: 0.55;
   cursor: not-allowed;
-  background: var(--rs-surface-muted, var(--rs-input-bg));
+  background: var(--rs-surface-hover);
 }
 
 .rs-input-number__control {
   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-fg);
-  font: inherit;
-  padding: 0 10px;
-  height: 100%;
+  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 {
-  padding: 0 8px;
-  font-size: 12px;
+  padding: 0 var(--rs-space-xs);
+  font-size: var(--rs-font-size-xs);
 }
 .rs-input-number__control--sm {
-  padding: 0 8px;
-  font-size: 12px;
+  padding: 0 var(--rs-space-sm);
+  font-size: var(--rs-font-size-xs);
 }
 .rs-input-number__control--lg {
-  padding: 0 12px;
-  font-size: 15px;
+  padding: 0 var(--rs-space-lg);
+  font-size: var(--rs-font-size-base);
 }
 .rs-input-number__control:disabled {
   cursor: not-allowed;
@@ -491,7 +527,11 @@ defineExpose({
   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,
@@ -499,7 +539,8 @@ defineExpose({
   width: 18px;
 }
 .rs-input-number__handler {
-  flex: 1;
+  flex: 1 1 0;
+  min-height: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -507,13 +548,13 @@ defineExpose({
   margin: 0;
   padding: 0;
   background: transparent;
-  color: var(--rs-fg-muted);
+  color: var(--rs-muted);
   cursor: pointer;
   line-height: 1;
 }
 .rs-input-number__handler:hover:not(:disabled) {
-  color: var(--rs-fg);
-  background: var(--rs-surface-muted, transparent);
+  color: var(--rs-text);
+  background: var(--rs-surface-hover);
 }
 .rs-input-number__handler:disabled {
   opacity: 0.35;