niuma-ui 1.0.2 → 1.1.1

package/src/components/RsDatePicker.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, useId, watch } from 'vue'
+import { computed, ref, useAttrs, useId, watch } from 'vue'
 import { PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from './reka'
 import RsCalendarGrid from './RsCalendarGrid.vue'
 import RsIcon from './RsIcon.vue'
@@ -7,7 +7,12 @@ import RsTimePicker from './RsTimePicker.vue'
 import { useRsI18n } from '../composables/useRsI18n'
 import { RS_COMPONENT_SIZE_ICON_PX, type RsComponentSize } from '../theme/types'
 import { useResolvedRsComponentSize } from './resolve-size'
-import { useRsFormContext, useRsFormField } from './form-utils'
+import {
+  isRsFormItemBoundControl,
+  useRsFormContext,
+  useRsFormField,
+  useRsFormItemContext,
+} from './form-utils'
 import {
   buildLocalInputRules,
   runFormFieldRules,
@@ -26,6 +31,7 @@ import {
   getNextMonth,
   getNowDateTime,
   formatTimestampValue,
+  fromInternalPickerValue,
   getTodayDate,
   isDateRangeEmpty,
   isDateRangeOrdered,
@@ -35,6 +41,8 @@ import {
   parseDateTimeValue,
   parseDateValue,
   parseTimestampValue,
+  toInternalPickerValue,
+  toRangeEndpointString,
   type RsDatePickerModelValue,
   type RsDatePickerShortcut,
   type RsDatePickerValueFormat,
@@ -55,6 +63,8 @@ function isRangeModel(value: RsDatePickerModelValue): value is RsDateRangeValue
   return typeof value === 'object' && value !== null && !Array.isArray(value) && ('start' in value || 'end' in value)
 }
 
+defineOptions({ inheritAttrs: false })
+
 const model = defineModel<RsDatePickerModelValue>({ default: '' })
 const open = defineModel<boolean>('open', { default: false })
 
@@ -75,12 +85,19 @@ const props = withDefaults(
      * 是否选择秒。未传时：withTime 为 true 则默认带秒，纯日期为 false。
      */
     withSeconds?: boolean
-    /** string：YYYY-MM-DD[/HH:mm:ss]；timestamp：毫秒时间戳 / [start, end] */
+    /**
+     * 绑定值格式（展示仍为墙钟）。
+     * string：YYYY-MM-DD[/ HH:mm:ss]；timestamp：毫秒；iso：本地偏移 RFC3339；
+     * 亦可传入 dayjs 模板（对齐 Element Plus value-format）。
+     */
     valueFormat?: RsDatePickerValueFormat
     labelPosition?: RsDatePickerLabelPosition
     /** 底部快捷选项（有值时替代「今天/现在」链接） */
     shortcuts?: RsDatePickerShortcut[]
     size?: RsComponentSize
+    id?: string
+    invalid?: boolean
+    showValidateMessage?: boolean
   }>(),
   {
     disabled: false,
@@ -89,10 +106,12 @@ const props = withDefaults(
     withTime: false,
     valueFormat: 'string',
     labelPosition: 'top',
+    showValidateMessage: true,
   },
 )
 
 const fieldId = useId()
+const attrs = useAttrs()
 const { t } = useRsI18n()
 const resolvedSize = useResolvedRsComponentSize(() => props.size)
 const triggerIconSize = computed(() => RS_COMPONENT_SIZE_ICON_PX[resolvedSize.value])
@@ -101,7 +120,22 @@ const resolvedWithSeconds = computed(() =>
   props.withSeconds !== undefined ? props.withSeconds : props.withTime,
 )
 const formContext = useRsFormContext()
+const formItem = useRsFormItemContext()
+const boundToItem = computed(() =>
+  isRsFormItemBoundControl(formItem, { id: props.id, name: props.name }),
+)
 const autoMessage = ref('')
+const isInvalid = computed(() =>
+  Boolean(
+    props.invalid ||
+      (boundToItem.value && formItem?.invalid.value) ||
+      (!boundToItem.value && autoMessage.value),
+  ),
+)
+const triggerId = computed(() => props.id || fieldId)
+const visibleMessage = computed(() =>
+  boundToItem.value || props.showValidateMessage === false ? '' : autoMessage.value,
+)
 
 const viewYear = ref(getTodayDate().year)
 const viewMonth = ref(getTodayDate().month)
@@ -117,47 +151,52 @@ const draftTime = ref('')
 const draftStartTime = ref('')
 const draftEndTime = ref('')
 
+const convertOptions = computed(() => ({
+  valueFormat: props.valueFormat ?? 'string',
+  withTime: props.withTime,
+}))
+
 const useTimestamp = computed(() => props.valueFormat === 'timestamp')
 
 const rangeModel = computed<RsDateRangeValue>({
   get() {
     if (!props.range) return { ...EMPTY_DATE_RANGE }
     const value = model.value
-    if (useTimestamp.value) {
-      if (!isTimestampRange(value)) return { ...EMPTY_DATE_RANGE }
+    const opts = convertOptions.value
+    if (isTimestampRange(value)) {
       return {
-        start: formatTimestampValue(value[0], props.withTime),
-        end: formatTimestampValue(value[1], props.withTime),
+        start: formatTimestampValue(value[0], opts.withTime),
+        end: formatTimestampValue(value[1], opts.withTime),
       }
     }
-    return isRangeModel(value) ? value : { ...EMPTY_DATE_RANGE }
+    if (!isRangeModel(value)) return { ...EMPTY_DATE_RANGE }
+    return {
+      start: toInternalPickerValue(value.start, opts) || undefined,
+      end: toInternalPickerValue(value.end, opts) || undefined,
+    }
   },
   set(value) {
+    const opts = convertOptions.value
     if (useTimestamp.value) {
       const start = parseTimestampValue(value.start)
       const end = parseTimestampValue(value.end)
       model.value = start != null && end != null ? [start, end] : null
       return
     }
-    model.value = value
+    model.value = {
+      start: toRangeEndpointString(fromInternalPickerValue(value.start || '', opts)),
+      end: toRangeEndpointString(fromInternalPickerValue(value.end || '', opts)),
+    }
   },
 })
 
 const singleModel = computed({
   get() {
     if (props.range) return ''
-    const value = model.value
-    if (useTimestamp.value) {
-      return typeof value === 'number' ? formatTimestampValue(value, props.withTime) : ''
-    }
-    return typeof value === 'string' ? value : ''
+    return toInternalPickerValue(model.value, convertOptions.value)
   },
   set(value: string) {
-    if (useTimestamp.value) {
-      model.value = value ? parseTimestampValue(value) : null
-      return
-    }
-    model.value = value
+    model.value = fromInternalPickerValue(value, convertOptions.value)
   },
 })
 
@@ -422,11 +461,7 @@ function clearSelection(): void {
     draftEnd.value = null
     if (props.withTime) resetRangeTimeDrafts()
   } else {
-    if (useTimestamp.value) {
-      model.value = null
-    } else {
-      singleModel.value = ''
-    }
+    singleModel.value = ''
     draftDate.value = null
     if (props.withTime) draftTime.value = currentTimeValue()
   }
@@ -577,15 +612,16 @@ watch(open, (isOpen) => {
     <div class="rs-date-picker" :class="`rs-date-picker--${resolvedSize}`">
       <PopoverRoot v-model:open="open">
         <PopoverTrigger
-          :id="fieldId"
+          v-bind="attrs"
+          :id="triggerId"
           type="button"
           class="rs-date-picker__trigger"
           :class="{
             'rs-date-picker__trigger--placeholder': isEmpty,
-            'rs-date-picker__trigger--invalid': !!autoMessage,
+            'rs-date-picker__trigger--invalid': isInvalid,
           }"
           :disabled="disabled"
-          :aria-invalid="autoMessage ? true : undefined"
+          :aria-invalid="isInvalid || undefined"
         >
           <span class="rs-date-picker__leading">
             <RsIcon :name="triggerIcon" :size="triggerIconSize" class="rs-date-picker__icon" />
@@ -728,8 +764,8 @@ watch(open, (isOpen) => {
       </PopoverRoot>
     </div>
 
-    <p v-if="autoMessage" class="rs-date-picker-field__error" role="alert">
-      {{ autoMessage }}
+    <p v-if="visibleMessage" class="rs-date-picker-field__error" role="alert">
+      {{ visibleMessage }}
     </p>
     <span v-if="hint" class="rs-field__hint">{{ hint }}</span>
   </div>
@@ -758,6 +794,7 @@ watch(open, (isOpen) => {
   line-height: var(--rs-line-height-tight);
   text-align: left;
   cursor: pointer;
+  outline: none;
   box-shadow: var(--rs-input-shadow, none);
   transition:
     border-color var(--rs-transition-fast),
@@ -803,6 +840,13 @@ watch(open, (isOpen) => {
 .rs-date-picker__trigger--invalid {
   border-color: var(--rs-danger, var(--rs-color-danger, #dc2626));
 }
+.rs-date-picker__trigger--invalid:focus-visible {
+  border-color: var(--rs-danger, var(--rs-color-danger, #dc2626));
+  box-shadow:
+    var(--rs-input-shadow, none),
+    0 0 0 var(--rs-focus-ring-width, 2px)
+      color-mix(in srgb, var(--rs-danger, #dc2626) 14%, transparent);
+}
 .rs-date-picker-field__error {
   margin: var(--rs-space-xs) 0 0;
   color: var(--rs-danger, var(--rs-color-danger, #dc2626));
@@ -874,7 +918,7 @@ watch(open, (isOpen) => {
 }
 .rs-date-picker__pane-title {
   font-size: var(--rs-font-size-xs);
-  font-weight: 600;
+  font-weight: var(--rs-font-weight-semibold);
   color: var(--rs-muted);
 }
 .rs-date-picker__footer {
@@ -979,7 +1023,7 @@ watch(open, (isOpen) => {
 .rs-date-picker__time-label {
   flex-shrink: 0;
   font-size: var(--rs-font-size-xs);
-  font-weight: 500;
+  font-weight: var(--rs-font-weight-medium);
   color: var(--rs-muted);
 }
 .rs-date-picker__time-picker {

package/src/components/RsDateTimePicker.vue

@@ -30,11 +30,18 @@ withDefaults(
     withSeconds?: boolean
     minDate?: string
     maxDate?: string
-    /** string：YYYY-MM-DD HH:mm:ss；timestamp：毫秒时间戳 / [start, end] */
+    /**
+     * 绑定值格式（展示仍为墙钟）。
+     * string：YYYY-MM-DD HH:mm:ss；timestamp：毫秒；iso：本地偏移 RFC3339；
+     * 亦可传入 dayjs 模板。
+     */
     valueFormat?: RsDatePickerValueFormat
     labelPosition?: RsDateTimePickerLabelPosition
     shortcuts?: RsDatePickerShortcut[]
     size?: RsComponentSize
+    id?: string
+    invalid?: boolean
+    showValidateMessage?: boolean
   }>(),
   {
     disabled: false,
@@ -43,6 +50,7 @@ withDefaults(
     withSeconds: false,
     valueFormat: 'string',
     labelPosition: 'top',
+    showValidateMessage: true,
   },
 )
 </script>

package/src/components/RsDescriptions.vue

@@ -95,7 +95,7 @@ const gridStyle = computed(() => ({
 
 .rs-descriptions__header {
   font-size: var(--rs-font-size-base);
-  font-weight: 600;
+  font-weight: var(--rs-font-weight-semibold);
   line-height: var(--rs-line-height-tight);
 }
 
@@ -145,7 +145,7 @@ const gridStyle = computed(() => ({
 
 .rs-descriptions__label {
   color: var(--rs-descriptions-label-fg, var(--rs-muted));
-  font-weight: 500;
+  font-weight: var(--rs-font-weight-medium);
   word-break: break-word;
 }
 

package/src/components/RsDialog.vue

@@ -25,6 +25,7 @@ import {
   isRsDialogWidthPreset,
   resolveDialogOverlayStyle,
   resolveRsDialogCssWidth,
+  resolveRsDialogWidthPx,
   runRsDialogBeforeClose,
   type RsDialogBeforeClose,
   type RsDialogCloseReason,
@@ -43,6 +44,11 @@ const props = withDefaults(
     /** 标题文案；也可用 `#title` / `#header` 插槽。缺省时用空格满足无障碍 Title */
     title?: string
     description?: string
+    /**
+     * 宽度：`sm` / `md` / `lg`，或 number(px) / `px` / `rem` / `%`。
+     * window：打开时折成像素后居中（`%` 相对视口扣除 inset），之后可拖拽缩放。
+     * confirm：自定义宽度按 CSS 写入。
+     */
     width?: RsDialogWidth
     tone?: RsFeedbackTone
     /**
@@ -73,6 +79,9 @@ const props = withDefaults(
      * - string / HTMLElement：Teleport 到指定节点
      * - false：禁用 Teleport，就地渲染（不挂到 body / 全局挂载点）
      * - undefined：走 Reka 默认（通常为 body，或 ConfigProvider.teleportTo）
+     *
+     * 全屏时若未禁用 Teleport，会临时改挂到默认目标（通常为 body），
+     * 避免业务容器内的层叠上下文（如 isolation:isolate）低于应用顶栏。
      */
     teleportTo?: string | HTMLElement | false
     /**
@@ -150,16 +159,7 @@ const widthPreset = computed<RsDialogWidthPreset>(() =>
   isRsDialogWidthPreset(props.width) ? props.width : 'md',
 )
 
-const initialWidthPx = computed(() => {
-  if (typeof props.width === 'number' && Number.isFinite(props.width) && props.width > 0) {
-    return props.width
-  }
-  if (typeof props.width === 'string') {
-    const trimmed = props.width.trim()
-    if (/^\d+(\.\d+)?px$/i.test(trimmed)) return Number.parseFloat(trimmed)
-  }
-  return undefined
-})
+const initialWidthPx = computed(() => resolveRsDialogWidthPx(props.width))
 
 const customCssWidth = computed(() => resolveRsDialogCssWidth(props.width))
 
@@ -276,13 +276,12 @@ const contentClass = computed(() => {
 
 const contentStyle = computed(() => {
   const base = isWindowLayout.value ? dialogStyle.value : undefined
+  // window 宽度只走 bounds 像素，避免 `90%` 覆盖 CSS 后与 left/top 脱节
+  if (isWindowLayout.value) return base
   const cssW = customCssWidth.value
-  // 数值/px 已通过 initialWidth 进入 window bounds；其它自定义宽度用 CSS 覆盖
   if (!cssW) return base
-  if (isWindowLayout.value && initialWidthPx.value != null) return base
   return {
     ...(base ?? {}),
-    width: isConfirmLayout.value ? undefined : cssW,
     maxWidth: cssW,
   }
 })
@@ -373,6 +372,17 @@ const {
   boundsTransition: toRef(props, 'boundsTransition'),
 })
 
+/**
+ * 全屏时跳出业务挂载点，挂到默认 portal（通常 body），
+ * 还原后仍回到 props.teleportTo，以保留页签内浮层的生命周期绑定。
+ */
+const resolvedTeleportTo = computed(() => {
+  if (isFullscreen.value && props.teleportTo !== false) {
+    return undefined
+  }
+  return props.teleportTo
+})
+
 const contentRef = ref<{ $el?: HTMLElement } | HTMLElement | null>(null)
 
 watch(
@@ -401,8 +411,8 @@ defineExpose({
 <template>
   <DialogRoot :open="open" :modal="modal" @update:open="onUpdateOpen">
     <DialogPortal
-      :disabled="teleportTo === false"
-      :to="teleportTo === false ? undefined : teleportTo"
+      :disabled="resolvedTeleportTo === false"
+      :to="resolvedTeleportTo === false ? undefined : resolvedTeleportTo"
     >
       <DialogOverlay v-if="showOverlay" class="rs-dialog__overlay rs-motion-reduce" :style="overlayStyle" />
       <DialogContent
@@ -680,7 +690,7 @@ defineExpose({
   align-items: center;
   gap: var(--rs-space-sm);
   font-size: var(--rs-font-size-base);
-  font-weight: 600;
+  font-weight: var(--rs-font-weight-semibold);
   letter-spacing: -0.015em;
   line-height: var(--rs-line-height-tight, 1.3);
   color: var(--rs-dialog-title-fg);

package/src/components/RsDrawer.vue

@@ -663,7 +663,7 @@ defineExpose({
   align-items: center;
   gap: var(--rs-space-sm);
   font-size: var(--rs-font-size-base);
-  font-weight: 600;
+  font-weight: var(--rs-font-weight-semibold);
   line-height: var(--rs-line-height-tight, 1.3);
   color: var(--rs-drawer-title-fg, var(--rs-text));
   overflow: hidden;

package/src/components/RsDropdown.vue

@@ -218,7 +218,7 @@ function onSelect(value: AcceptableValue) {
   display: block;
   padding: 0.375rem var(--rs-space-md) 0.125rem;
   font-size: var(--rs-font-size-xs);
-  font-weight: 600;
+  font-weight: var(--rs-font-weight-semibold);
   color: var(--rs-muted);
   letter-spacing: 0.04em;
   line-height: var(--rs-line-height-tight);

package/src/components/RsDynamicTags.vue

@@ -2,7 +2,12 @@
 import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
 import { useRsI18n } from '../composables/useRsI18n'
 import type { RsComponentSize, RsRadius } from '../theme/types'
-import { useRsFormContext, useRsFormField } from './form-utils'
+import {
+  isRsFormItemBoundControl,
+  useRsFormContext,
+  useRsFormField,
+  useRsFormItemContext,
+} from './form-utils'
 import {
   buildLocalInputRules,
   runFormFieldRules,
@@ -23,6 +28,8 @@ const props = withDefaults(
   defineProps<{
     /** 字段名：匹配 RsForm.rules[name] */
     name?: string
+    id?: string
+    invalid?: boolean
     placeholder?: string
     disabled?: boolean
     required?: boolean
@@ -63,6 +70,10 @@ const emit = defineEmits<{
 
 const { t } = useRsI18n()
 const formContext = useRsFormContext()
+const formItem = useRsFormItemContext()
+const boundToItem = computed(() =>
+  isRsFormItemBoundControl(formItem, { id: props.id, name: props.name }),
+)
 const draft = ref('')
 const editing = ref(props.inputMode === 'always')
 const composing = ref(false)
@@ -93,7 +104,10 @@ const showTrigger = computed(
     !editing.value,
 )
 
-const hasError = computed(() => Boolean(autoMessage.value))
+const hasError = computed(() =>
+  Boolean(props.invalid || (boundToItem.value && formItem?.invalid.value) || autoMessage.value),
+)
+const visibleMessage = computed(() => (boundToItem.value ? '' : autoMessage.value))
 
 const rootClass = computed(() => [
   'rs-dynamic-tags',
@@ -339,11 +353,11 @@ onBeforeUnmount(() => {
       </button>
     </div>
     <p
-      v-if="autoMessage"
+      v-if="visibleMessage"
       class="rs-dynamic-tags-field__error"
       role="alert"
     >
-      {{ autoMessage }}
+      {{ visibleMessage }}
     </p>
   </div>
 </template>

package/src/components/RsEmpty.vue

@@ -90,7 +90,7 @@ const rootStyle = computed(() => ({
 .rs-empty__title {
   margin: 0;
   font-size: var(--rs-font-size-sm);
-  font-weight: 500;
+  font-weight: var(--rs-font-weight-medium);
   color: var(--rs-text);
 }
 

package/src/components/RsForm.vue

@@ -13,7 +13,13 @@ import type {
   RsFormValidationResult,
 } from './form-utils'
 import { cloneFormFieldValue, provideRsFormContext, resolveFieldRules } from './form-utils'
-import type { RsFormRuleTrigger, RsFormRules } from './form-rules'
+import type { RsFormRuleTrigger, RsFormRules, RsFormValidateMessages } from './form-rules'
+import {
+  getByNamePath,
+  namePathKey,
+  setByNamePath,
+  type RsFormNamePath,
+} from './form-path'
 
 const props = withDefaults(
   defineProps<{
@@ -29,6 +35,13 @@ const props = withDefaults(
      * 与字段自身 required/rule/validator 合并执行。
      */
     rules?: RsFormRules
+    /**
+     * 表单数据中枢（对齐 Ant Design Form.model）。
+     * Form.Item 声明 name 后读写此对象；也可继续在控件上 v-model。
+     */
+    model?: Record<string, unknown>
+    /** 覆盖默认校验文案模板，支持 `{label}` */
+    validateMessages?: RsFormValidateMessages
     /** 原生 form 提交时自动跑一遍校验（默认 true） */
     validateOnSubmit?: boolean
     /**
@@ -62,6 +75,8 @@ const labelWidthRef = computed(() => props.labelWidth)
 const labelAlignRef = computed(() => props.labelAlign)
 const sizeRef = computed(() => props.size)
 const rulesRef = toRef(props, 'rules')
+const modelRef = toRef(props, 'model')
+const validateMessagesRef = computed(() => props.validateMessages)
 const initialValues = ref(new Map<symbol, unknown>())
 
 function registerField(id: symbol, field: RsFormFieldExpose): void {
@@ -78,6 +93,48 @@ function getFieldRules(name?: string) {
   return resolveFieldRules(props.rules, name)
 }
 
+function getFieldValue(name: RsFormNamePath): unknown {
+  if (modelRef.value) return getByNamePath(modelRef.value, name)
+  const key = namePathKey(name)
+  const field = Array.from(fields.values()).find((item) => item.name === key)
+  return field?.getValue()
+}
+
+function setFieldValue(name: RsFormNamePath, value: unknown): void {
+  if (modelRef.value) {
+    setByNamePath(modelRef.value, name, value)
+    return
+  }
+  const key = namePathKey(name)
+  const field = Array.from(fields.values()).find((item) => item.name === key)
+  field?.setValue(value)
+}
+
+function getFieldsValue(): Record<string, unknown> {
+  if (modelRef.value) return { ...modelRef.value }
+  const values: Record<string, unknown> = {}
+  fields.forEach((field) => {
+    if (!field.name) return
+    values[field.name] = field.getValue()
+  })
+  return values
+}
+
+function setFieldsValue(values: Record<string, unknown>): void {
+  Object.entries(values).forEach(([name, value]) => {
+    setFieldValue(name, value)
+  })
+}
+
+function scrollToField(name: RsFormNamePath): void {
+  if (typeof document === 'undefined') return
+  const key = namePathKey(name)
+  const el = document.querySelector(`[data-rs-form-item="${CSS.escape(key)}"]`)
+  if (el instanceof HTMLElement) {
+    el.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
+  }
+}
+
 function renderError(ctx: RsFormErrorRenderContext) {
   if (slots.error) return slots.error(ctx)
   return props.errorRender?.(ctx)
@@ -94,6 +151,11 @@ provideRsFormContext({
   renderError,
   registerField,
   unregisterField,
+  model: modelRef,
+  validateMessages: validateMessagesRef,
+  getFieldValue,
+  setFieldValue,
+  getFieldsValue,
 })
 
 function collectResult(
@@ -169,6 +231,11 @@ defineExpose({
   validateField,
   clearValidation,
   resetFields,
+  getFieldsValue,
+  setFieldsValue,
+  getFieldValue,
+  setFieldValue,
+  scrollToField,
 })
 </script>