niuma-ui 1.0.2 → 1.1.0

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>