niuma-ui 1.0.2 → 1.1.1

package/src/__tests__/date-picker-utils.spec.ts

@@ -4,8 +4,10 @@ import {
   formatDateTimeDisplay,
   formatDateTimeValue,
   formatDateValue,
+  fromInternalPickerValue,
   parseDateTimeValue,
   parseDateValue,
+  toInternalPickerValue,
 } from '../components/date-picker-utils'
 import { RS_DATE_FORMAT, RS_DATETIME_FORMAT } from '../lib/rs-dayjs'
 
@@ -68,3 +70,50 @@ describe('date-picker-utils (dayjs)', () => {
     expect(formatDateTimeValue('not-a-date')).toBe('not-a-date')
   })
 })
+
+describe('date-picker valueFormat conversion', () => {
+  const datetimeOpts = { valueFormat: 'iso', withTime: true }
+  const dateOpts = { valueFormat: 'iso', withTime: false }
+
+  it('converts internal datetime to local-offset RFC3339', () => {
+    const iso = fromInternalPickerValue('2025-06-16 14:30:00', datetimeOpts)
+    expect(iso).toMatch(/^2025-06-16T14:30:00[+-]\d{2}:\d{2}$/)
+  })
+
+  it('converts internal date to RFC3339 at midnight local offset', () => {
+    const iso = fromInternalPickerValue('2025-06-16', dateOpts)
+    expect(iso).toMatch(/^2025-06-16T00:00:00[+-]\d{2}:\d{2}$/)
+  })
+
+  it('round-trips iso datetime as wall clock', () => {
+    const iso = fromInternalPickerValue('2025-06-16 14:30:00', datetimeOpts)
+    expect(toInternalPickerValue(iso, datetimeOpts)).toBe('2025-06-16 14:30:00')
+    expect(toInternalPickerValue('2026-07-01T14:49:43Z', datetimeOpts)).toBe('2026-07-01 14:49:43')
+    expect(toInternalPickerValue('2026-08-14T14:38:42+08:00', datetimeOpts)).toBe('2026-08-14 14:38:42')
+  })
+
+  it('keeps string format as internal wall clock', () => {
+    expect(fromInternalPickerValue('2025-06-16 14:30:00', { valueFormat: 'string', withTime: true }))
+      .toBe('2025-06-16 14:30:00')
+    expect(toInternalPickerValue('2025-06-16 14:30:00', { valueFormat: 'string', withTime: true }))
+      .toBe('2025-06-16 14:30:00')
+  })
+
+  it('converts timestamp format', () => {
+    const ms = fromInternalPickerValue('2025-06-16 14:30:00', { valueFormat: 'timestamp', withTime: true })
+    expect(typeof ms).toBe('number')
+    expect(toInternalPickerValue(ms, { valueFormat: 'timestamp', withTime: true })).toBe('2025-06-16 14:30:00')
+  })
+
+  it('supports custom dayjs value-format templates', () => {
+    const custom = { valueFormat: 'YYYY-MM-DDTHH:mm:ss', withTime: true }
+    expect(fromInternalPickerValue('2025-06-16 14:30:00', custom)).toBe('2025-06-16T14:30:00')
+    expect(toInternalPickerValue('2025-06-16T14:30:00', custom)).toBe('2025-06-16 14:30:00')
+  })
+
+  it('emits null for empty iso and timestamp', () => {
+    expect(fromInternalPickerValue('', datetimeOpts)).toBeNull()
+    expect(fromInternalPickerValue('', { valueFormat: 'timestamp', withTime: true })).toBeNull()
+    expect(fromInternalPickerValue('', { valueFormat: 'string', withTime: true })).toBe('')
+  })
+})

package/src/__tests__/dialog-utils.spec.ts

@@ -0,0 +1,43 @@
+import { afterEach, describe, expect, it } from 'vitest'
+import { resolveRsDialogCssWidth, resolveRsDialogWidthPx } from '../components/dialog-utils'
+
+describe('resolveRsDialogWidthPx', () => {
+  afterEach(() => {
+    document.documentElement.style.removeProperty('font-size')
+  })
+
+  it('returns undefined for presets', () => {
+    expect(resolveRsDialogWidthPx('sm')).toBeUndefined()
+    expect(resolveRsDialogWidthPx('md')).toBeUndefined()
+    expect(resolveRsDialogWidthPx('lg')).toBeUndefined()
+  })
+
+  it('keeps numeric and px widths', () => {
+    expect(resolveRsDialogWidthPx(1200)).toBe(1200)
+    expect(resolveRsDialogWidthPx('960px')).toBe(960)
+  })
+
+  it('converts rem using root font size', () => {
+    document.documentElement.style.fontSize = '16px'
+    expect(resolveRsDialogWidthPx('40rem')).toBe(640)
+  })
+
+  it('converts percent against the given viewport width', () => {
+    expect(resolveRsDialogWidthPx('90%', 1000)).toBe(900)
+    expect(resolveRsDialogWidthPx('80%', 800)).toBe(640)
+  })
+
+  it('returns undefined for empty or unknown units', () => {
+    expect(resolveRsDialogWidthPx('')).toBeUndefined()
+    expect(resolveRsDialogWidthPx('min(90vw, 1200px)')).toBeUndefined()
+    expect(resolveRsDialogWidthPx(0)).toBeUndefined()
+  })
+})
+
+describe('resolveRsDialogCssWidth', () => {
+  it('maps number to px and keeps custom CSS strings', () => {
+    expect(resolveRsDialogCssWidth('md')).toBeUndefined()
+    expect(resolveRsDialogCssWidth(520)).toBe('520px')
+    expect(resolveRsDialogCssWidth('90%')).toBe('90%')
+  })
+})

package/src/__tests__/form-path.spec.ts

@@ -0,0 +1,46 @@
+import { describe, expect, it } from 'vitest'
+import {
+  concatNamePath,
+  getByNamePath,
+  hasByNamePath,
+  namePathKey,
+  normalizeNamePath,
+  setByNamePath,
+} from '../components/form-path'
+
+describe('form-path', () => {
+  it('normalizes string and array name paths', () => {
+    expect(normalizeNamePath('user.email')).toEqual(['user', 'email'])
+    expect(normalizeNamePath(['user', 'email'])).toEqual(['user', 'email'])
+    expect(namePathKey(['a', 0, 'b'])).toBe('a.0.b')
+  })
+
+  it('gets and sets nested values', () => {
+    const model: Record<string, unknown> = {}
+    setByNamePath(model, 'user.email', 'a@b.com')
+    expect(model).toEqual({ user: { email: 'a@b.com' } })
+    expect(getByNamePath(model, ['user', 'email'])).toBe('a@b.com')
+    expect(hasByNamePath(model, 'user.email')).toBe(true)
+  })
+
+  it('walks multi-level JSON paths', () => {
+    const model: Record<string, unknown> = {}
+    setByNamePath(model, 'config.headerConfig.isRequestHeader', true)
+    expect(model).toEqual({
+      config: { headerConfig: { isRequestHeader: true } },
+    })
+    expect(getByNamePath(model, 'config.headerConfig.isRequestHeader')).toBe(true)
+    expect(hasByNamePath(model, 'config.headerConfig.headerName')).toBe(false)
+  })
+
+  it('preserves arrays when setting nested list fields', () => {
+    const model: Record<string, unknown> = { users: [{ name: 'A' }] }
+    setByNamePath(model, ['users', 0, 'name'], 'B')
+    expect(model.users).toEqual([{ name: 'B' }])
+    expect(Array.isArray(model.users)).toBe(true)
+  })
+
+  it('concatenates list prefix and item name', () => {
+    expect(concatNamePath('users', [0, 'name'])).toEqual(['users', 0, 'name'])
+  })
+})

package/src/__tests__/form-rules.spec.ts

@@ -63,6 +63,11 @@ describe('form-rules', () => {
     expect(rules[1]?.type).toBe('email')
   })
 
+  it('interpolates required message with label', async () => {
+    const labeled = await runFormFieldRules('', [{ required: true }], { label: '邮箱' })
+    expect(labeled.message).toBe('请填写邮箱')
+  })
+
   it('supports message as function', async () => {
     const result = await runFormFieldRules('x', [
       {
@@ -73,4 +78,62 @@ describe('form-rules', () => {
     expect(result.valid).toBe(false)
     expect(result.message).toBe('当前「x」太短')
   })
+
+  it('validator can read other fields via context', async () => {
+    const result = await runFormFieldRules('two', [
+      {
+        validator(value, ctx) {
+          if (String(value) !== String(ctx.getFieldValue('a'))) return '不一致'
+          return true
+        },
+      },
+    ], {
+      getFieldValue: (name) => (String(name) === 'a' ? 'one' : undefined),
+    })
+    expect(result).toEqual({ valid: false, message: '不一致' })
+
+    const ok = await runFormFieldRules('one', [
+      {
+        validator(value, ctx) {
+          if (String(value) !== String(ctx.getFieldValue('a'))) return '不一致'
+          return true
+        },
+      },
+    ], {
+      getFieldValue: (name) => (String(name) === 'a' ? 'one' : undefined),
+    })
+    expect(ok.valid).toBe(true)
+  })
+
+  it('runs custom validator on empty value for cross-field required', async () => {
+    const result = await runFormFieldRules(
+      '',
+      [
+        {
+          validator(_value, ctx) {
+            if (ctx.getFieldValue('kind') === 'email') return '邮箱必填'
+            return true
+          },
+        },
+      ],
+      { getFieldValue: (name) => (String(name) === 'kind' ? 'email' : undefined) },
+    )
+    expect(result).toEqual({ valid: false, message: '邮箱必填' })
+  })
+
+  it('treats Error return and thrown errors as failure', async () => {
+    const returned = await runFormFieldRules('x', [
+      { validator: () => new Error('返回错误') as unknown as string },
+    ])
+    expect(returned).toEqual({ valid: false, message: '返回错误' })
+
+    const thrown = await runFormFieldRules('x', [
+      {
+        validator() {
+          throw new Error('抛出错误')
+        },
+      },
+    ])
+    expect(thrown).toEqual({ valid: false, message: '抛出错误' })
+  })
 })

package/src/__tests__/theme.spec.ts

@@ -17,6 +17,8 @@ describe('useRsConfig / theme', () => {
     expect(en.t('select.placeholder')).toBe('Select')
     expect(zh.t('input.required')).toBe('此项为必填')
     expect(en.t('input.required')).toBe('This field is required')
+    expect(zh.t('form.validate.required', { label: '邮箱' })).toBe('请填写邮箱')
+    expect(en.t('form.validate.required', { label: 'Email' })).toBe('Please enter Email')
     expect(en.t('breadcrumb.label')).toBe('Breadcrumb')
   })
 

package/src/components/RsAlert.vue

@@ -108,7 +108,7 @@ function onClose(event: MouseEvent): void {
 
 .rs-alert__title {
   font-size: var(--rs-font-size-sm);
-  font-weight: 600;
+  font-weight: var(--rs-font-weight-semibold);
   line-height: var(--rs-line-height-tight);
   color: inherit;
 }

package/src/components/RsAvatar.vue

@@ -90,7 +90,7 @@ const ariaLabel = computed(() => props.label ?? props.alt ?? props.name ?? undef
   width: 100%;
   height: 100%;
   font-size: var(--rs-font-size-xs);
-  font-weight: 600;
+  font-weight: var(--rs-font-weight-semibold);
 }
 .rs-avatar__fallback--default {
   background: var(--rs-surface-hover);

package/src/components/RsBadge.vue

@@ -22,7 +22,7 @@ withDefaults(
   padding: 0.125rem 0.625rem;
   border-radius: var(--rs-radius-full);
   font-size: var(--rs-font-size-xs);
-  font-weight: 500;
+  font-weight: var(--rs-font-weight-medium);
   line-height: var(--rs-line-height-tight);
   letter-spacing: 0.02em;
 }

package/src/components/RsBreadcrumb.vue

@@ -56,7 +56,7 @@ const renderItems = computed(() => buildBreadcrumbRenderItems(props.items))
 }
 .rs-breadcrumb__link--current {
   color: var(--rs-text);
-  font-weight: 500;
+  font-weight: var(--rs-font-weight-medium);
   pointer-events: none;
 }
 .rs-breadcrumb__sep {

package/src/components/RsButton.vue

@@ -196,7 +196,7 @@ watch(
   border-radius: var(--rs-btn-radius, var(--rs-radius-full));
   border: 1px solid transparent;
   font-size: var(--rs-font-size-sm);
-  font-weight: 500;
+  font-weight: var(--rs-font-weight-medium);
   letter-spacing: 0.01em;
   line-height: 1;
   white-space: nowrap;
@@ -329,7 +329,7 @@ watch(
   background: transparent;
   color: var(--rs-btn-tone, var(--rs-primary));
   box-shadow: none;
-  font-weight: 500;
+  font-weight: var(--rs-font-weight-medium);
 }
 .rs-btn--link:hover:not(:disabled) {
   color: var(--rs-btn-tone-hover, var(--rs-primary-hover));
@@ -346,7 +346,7 @@ watch(
   border-color: transparent;
   background: transparent;
   box-shadow: none;
-  font-weight: 400;
+  font-weight: var(--rs-font-weight-regular);
   color: var(--rs-btn-tone, var(--rs-text));
 }
 .rs-btn--text.rs-btn--ssm {
@@ -474,7 +474,7 @@ watch(
   background: var(--rs-surface-elevated);
   color: var(--rs-text);
   font-size: var(--rs-font-size-xs);
-  font-weight: 500;
+  font-weight: var(--rs-font-weight-medium);
   line-height: 1.25rem;
   white-space: nowrap;
   box-shadow: var(--rs-shadow-sm);

package/src/components/RsCalendarGrid.vue

@@ -204,7 +204,7 @@ function selectDate(cell: RsCalendarCell): void {
   flex: 1;
   text-align: center;
   font-size: var(--rs-font-size-sm);
-  font-weight: 600;
+  font-weight: var(--rs-font-weight-semibold);
   color: var(--rs-text);
 }
 .rs-calendar-grid__nav {
@@ -233,8 +233,8 @@ function selectDate(cell: RsCalendarCell): void {
 .rs-calendar-grid__weekday {
   padding: 0.125rem 0;
   text-align: center;
-  font-size: 0.6875rem;
-  font-weight: 500;
+  font-size: var(--rs-font-size-xs);
+  font-weight: var(--rs-font-weight-medium);
   color: var(--rs-muted);
 }
 .rs-calendar-grid__day {

package/src/components/RsCard.vue

@@ -232,7 +232,7 @@ const rootStyle = computed(() => ({
 }
 .rs-card--plain .rs-card__title {
   font-size: var(--rs-font-size-xs);
-  font-weight: 500;
+  font-weight: var(--rs-font-weight-medium);
   color: var(--rs-card-description-fg);
   letter-spacing: 0;
 }
@@ -255,7 +255,7 @@ const rootStyle = computed(() => ({
   box-shadow: none;
 }
 .rs-card--outlined .rs-card__title {
-  font-weight: 500;
+  font-weight: var(--rs-font-weight-medium);
   letter-spacing: 0;
 }
 .rs-card--outlined .rs-card__body {
@@ -277,7 +277,7 @@ const rootStyle = computed(() => ({
   box-shadow: none;
 }
 .rs-card--filled .rs-card__title {
-  font-weight: 500;
+  font-weight: var(--rs-font-weight-medium);
   letter-spacing: 0;
 }
 .rs-card--filled .rs-card__body {
@@ -385,7 +385,7 @@ const rootStyle = computed(() => ({
 .rs-card__title {
   margin: 0;
   font-size: var(--rs-card-title-size);
-  font-weight: 600;
+  font-weight: var(--rs-font-weight-semibold);
   letter-spacing: -0.01em;
   color: var(--rs-card-title-fg);
 }

package/src/components/RsCodeBlock.vue

@@ -192,7 +192,7 @@ function download() {
 }
 
 .rs-code-block__lang {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-family: var(--rs-code-font-family, var(--rs-font-mono));
   font-size: var(--rs-font-size-xs);
   color: var(--rs-muted);
   text-transform: lowercase;
@@ -251,9 +251,9 @@ function download() {
 }
 
 .rs-code-block__editor :deep(.cm-scroller) {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  font-size: var(--rs-font-size-sm);
-  line-height: 1.6;
+  font-family: var(--rs-code-font-family, var(--rs-font-mono));
+  font-size: var(--rs-code-font-size, var(--rs-font-size-sm));
+  line-height: var(--rs-code-line-height, var(--rs-line-height-relaxed));
 }
 
 /* 只读时隐藏光标，保持纯展示外观 */

package/src/components/RsCodeEditor.vue

@@ -445,14 +445,14 @@ defineExpose({
   justify-content: space-between;
   margin-bottom: 0.5rem;
   font-size: var(--rs-font-size-xs);
-  font-weight: 600;
+  font-weight: var(--rs-font-weight-semibold);
   color: var(--rs-foreground);
 }
 .rs-code-editor__inline-edit-head kbd {
   padding: 0.1rem 0.35rem;
   border-radius: 4px;
   border: 1px solid var(--rs-border-subtle);
-  font-size: 0.7rem;
+  font-size: var(--rs-font-size-xs);
   color: var(--rs-muted);
 }
 .rs-code-editor__inline-preview {
@@ -461,8 +461,8 @@ defineExpose({
   border-radius: 4px;
   background: color-mix(in srgb, var(--rs-muted) 8%, transparent);
   color: var(--rs-muted);
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  font-size: 0.72rem;
+  font-family: var(--rs-code-font-family, var(--rs-font-mono));
+  font-size: var(--rs-font-size-xs);
   line-height: 1.4;
   white-space: pre-wrap;
   max-height: 4.5rem;
@@ -520,9 +520,9 @@ defineExpose({
   background: var(--rs-surface-elevated) !important;
 }
 .rs-code-editor__surface :deep(.cm-scroller) {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  font-size: var(--rs-font-size-sm);
-  line-height: 1.6;
+  font-family: var(--rs-code-font-family, var(--rs-font-mono));
+  font-size: var(--rs-code-font-size, var(--rs-font-size-sm));
+  line-height: var(--rs-code-line-height, var(--rs-line-height-relaxed));
 }
 .rs-code-editor__surface :deep(.cm-gutters) {
   background: color-mix(in srgb, var(--rs-surface-elevated) 85%, var(--rs-border) 15%) !important;
@@ -571,7 +571,7 @@ defineExpose({
   border: 1px solid var(--rs-border);
   background: var(--rs-surface-elevated);
   color: var(--rs-foreground);
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-family: var(--rs-code-font-family, var(--rs-font-mono));
   font-size: var(--rs-font-size-xs);
   line-height: 1.45;
   white-space: pre-wrap;

package/src/components/RsConfirmDialog.vue

@@ -297,7 +297,7 @@ defineExpose({
   height: 2.5rem;
   flex: 0 0 auto;
   border-radius: var(--rs-radius);
-  font-weight: 700;
+  font-weight: var(--rs-font-weight-bold);
 }
 .rs-confirm-dialog__icon-glyph {
   width: 1.25rem;
@@ -328,7 +328,7 @@ defineExpose({
 .rs-confirm-dialog__title {
   margin: 0;
   font-size: var(--rs-font-size-base);
-  font-weight: 600;
+  font-weight: var(--rs-font-weight-semibold);
   letter-spacing: -0.01em;
   color: var(--rs-dialog-title-fg);
 }

package/src/components/RsContextMenu.vue

@@ -152,9 +152,10 @@ function onSelect(item: RsContextMenuItem) {
   align-items: center;
   gap: 0;
   padding: 0 8px 0 0;
-  height: 26px;
+  height: 24px;
   border-radius: 6px;
-  font-size: 13px;
+  font-size: var(--rs-font-size-xs);
+  font-weight: var(--rs-font-weight-regular);
   line-height: 1;
   color: var(--rs-text);
   cursor: default;
@@ -185,10 +186,11 @@ function onSelect(item: RsContextMenuItem) {
 .rs-context-menu__shortcut {
   flex-shrink: 0;
   margin-left: 16px;
-  font-size: 12px;
+  font-size: var(--rs-font-size-xs);
+  font-weight: var(--rs-font-weight-regular);
   color: var(--rs-ctx-shortcut);
   letter-spacing: 0.02em;
-  font-family: -apple-system, 'SF Pro Text', system-ui, sans-serif;
+  font-family: var(--rs-font-sans);
 }
 
 /* 子菜单展开箭头 */