niuma-ui 1.0.0 → 1.0.2

package/src/components/RsSelect.vue

@@ -8,22 +8,23 @@ import { RS_COMPONENT_SIZE_ICON_PX } from '../theme/types'
 
 import RsIcon from './RsIcon.vue'
 import { useRsFormContext, useRsFormField } from './form-utils'
+import {
+  buildLocalInputRules,
+  runFormFieldRules,
+  type RsFormRuleTrigger,
+} from './form-rules'
 import { useResolvedRsComponentSize } from './resolve-size'
 import { rsRadiusCss, useResolvedRsRadius } from './resolve-radius'
 
 import {
-
   buildOptionDisabledMap,
-
   buildOptionLabelMap,
-
   filterSelectOptions,
-
   flattenSelectOptions,
-
   flattenSelectValues,
-
+  fromComboboxValue,
   isSelectOptionGroup,
+  toComboboxValue,
   type RsSelectOptions,
 } from './select-utils'
 
@@ -92,6 +93,8 @@ const props = withDefaults(
 
     multiple?: boolean
     required?: boolean
+    /** 字段名：匹配 RsForm.rules[name] */
+    name?: string
 
     /** 显示清空按钮 */
 
@@ -220,17 +223,12 @@ const flatOptions = computed(() => flattenSelectOptions(props.options))
 
 const flatCount = computed(() => flatOptions.value.length)
 
-
-
 const useVirtual = computed(
-
   () => props.virtual || flatCount.value > props.virtualThreshold,
-
 )
 
 const useManualFilter = computed(() => props.remote || useVirtual.value)
 
-
 const displayOptions = computed(() => {
   if (props.remote) return props.options
   if (!useManualFilter.value) return props.options
@@ -259,28 +257,18 @@ const virtualValues = computed(() => {
   return [createValue.value, ...values.filter((v) => String(v) !== createValue.value)]
 })
 
-
-
 const selectedValues = computed<string[]>(() => {
-
   if (props.multiple) {
-
     const value = model.value
-
     if (Array.isArray(value)) return value.map(String)
-
     return value ? [String(value)] : []
-
   }
 
   const value = model.value
-
+  // '' 表示未选中
   return value !== '' && value !== undefined && value !== null ? [String(value)] : []
-
 })
 
-
-
 const hasValue = computed(() => selectedValues.value.length > 0)
 const resolvedDisabled = computed(() => props.disabled || formContext?.disabled.value || false)
 const resolvedSize = useResolvedRsComponentSize(() => props.size)
@@ -290,42 +278,30 @@ const rootStyle = computed(() => ({
   '--rs-select-radius': rsRadiusCss(resolvedRadius.value),
 }))
 
-
-
 const singleDisplayLabel = computed(() => {
-
   if (props.multiple || !hasValue.value) return ''
-
   return labelMap.value.get(selectedValues.value[0]!) ?? selectedValues.value[0]!
-
 })
 
-
-
 const comboboxModel = computed<string | string[] | undefined>({
-
   get() {
-
-    if (props.multiple) return selectedValues.value
-
-    return hasValue.value ? selectedValues.value[0] : undefined
-
+    if (props.multiple) return selectedValues.value.map(toComboboxValue)
+    return hasValue.value ? toComboboxValue(selectedValues.value[0]!) : undefined
   },
-
   set(value) {
-
     if (props.multiple) {
-
-      model.value = Array.isArray(value) ? value.map(String) : []
-
-    } else {
-
-      model.value = value == null || value === '' ? '' : String(value)
-
+      model.value = Array.isArray(value)
+        ? value.map((item) => fromComboboxValue(String(item)))
+        : []
+      return
     }
-
+    // Reka 清空 / 空串哨兵 → 对外 ''
+    if (value == null || value === '') {
+      model.value = ''
+      return
+    }
+    model.value = fromComboboxValue(String(value))
   },
-
 })
 
 
@@ -367,13 +343,9 @@ function onSearchKeydown(event: KeyboardEvent): void {
 
 
 function onClear(event: MouseEvent) {
-
   event.preventDefault()
-
   event.stopPropagation()
-
   model.value = props.multiple ? [] : ''
-
 }
 
 
@@ -404,20 +376,43 @@ function setValue(value: unknown): void {
   model.value = value == null ? '' : String(value)
 }
 
+const autoMessage = ref('')
+
 function clearValidation(): void {
   searchQuery.value = ''
+  autoMessage.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) {
+    autoMessage.value = ''
+    return { valid: true as const, name: props.name }
+  }
+  const result = await runFormFieldRules(model.value, rules, { trigger })
+  autoMessage.value = result.message ?? ''
+  return { valid: result.valid, message: result.message, name: props.name }
 }
 
 useRsFormField(() => ({
+  get name() {
+    return props.name
+  },
   getValue: () => model.value,
   setValue,
-  validate: () => ({ valid: props.multiple ? selectedValues.value.length > 0 || !props.required : Boolean(model.value) || !props.required }),
+  validate: (trigger) => runValidate(trigger ?? 'submit'),
   clearValidation,
+  setError: (message: string) => {
+    autoMessage.value = message
+  },
 }))
 
 defineExpose({
   setValue,
   clearValidation,
+  validate: runValidate,
 })
 
 </script>
@@ -613,7 +608,7 @@ defineExpose({
                 {{
                   canCreate && String(option) === createValue
                     ? createOptionLabel
-                    : (labelMap.get(String(option)) ?? option)
+                    : (labelMap.get(String(option)) ?? fromComboboxValue(String(option)))
                 }}
               </span>
               <ComboboxItemIndicator class="rs-select__item-check">
@@ -651,8 +646,8 @@ defineExpose({
 
                 <ComboboxItem
                   v-for="opt in entry.options"
-                  :key="opt.value"
-                  :value="opt.value"
+                  :key="toComboboxValue(opt.value)"
+                  :value="toComboboxValue(opt.value)"
                   :disabled="opt.disabled"
                   :text-value="opt.label"
                   class="rs-select__item"
@@ -669,8 +664,8 @@ defineExpose({
 
               <ComboboxItem
                 v-else
-                :key="entry.value"
-                :value="entry.value"
+                :key="toComboboxValue(entry.value)"
+                :value="toComboboxValue(entry.value)"
                 :disabled="entry.disabled"
                 :text-value="entry.label"
                 class="rs-select__item"
@@ -705,7 +700,11 @@ defineExpose({
 
   width: 100%;
 
-  max-width: 20rem;
+  max-width: 100%;
+
+  vertical-align: middle;
+
+  box-sizing: border-box;
 
 }
 
@@ -719,8 +718,12 @@ defineExpose({
 
   gap: var(--rs-space-sm);
 
+  box-sizing: border-box;
+
   width: 100%;
 
+  height: var(--rs-control-height-md);
+
   min-height: var(--rs-control-height-md);
 
   padding: 0 var(--rs-space-md);
@@ -735,7 +738,7 @@ defineExpose({
 
   font-size: var(--rs-font-size-sm);
 
-  line-height: var(--rs-line-height-normal);
+  line-height: var(--rs-line-height-tight);
 
   text-align: left;
 
@@ -769,7 +772,10 @@ defineExpose({
   display: flex;
   flex-direction: column;
   width: 100%;
+  max-width: none;
   min-width: 0;
+  align-self: stretch;
+  box-sizing: border-box;
 }
 
 .rs-select--block .rs-select__anchor,
@@ -778,6 +784,7 @@ defineExpose({
 }
 
 .rs-select--ssm .rs-select__trigger {
+  height: var(--rs-control-height-ssm);
   min-height: var(--rs-control-height-ssm);
   padding: 0 var(--rs-space-xs);
   font-size: var(--rs-font-size-xs);
@@ -788,6 +795,7 @@ defineExpose({
 }
 
 .rs-select--sm .rs-select__trigger {
+  height: var(--rs-control-height-sm);
   min-height: var(--rs-control-height-sm);
   padding: 0 var(--rs-space-sm);
   font-size: var(--rs-font-size-xs);
@@ -798,6 +806,7 @@ defineExpose({
 }
 
 .rs-select--lg .rs-select__trigger {
+  height: var(--rs-control-height-lg);
   min-height: var(--rs-control-height-lg);
   padding: 0 var(--rs-space-lg);
   font-size: var(--rs-font-size-base);

package/src/components/RsSplitPane.vue

@@ -8,6 +8,7 @@ import {
   expandSplitPane,
   isSplitPaneCollapsed,
   normalizeSplitSizes,
+  resolveSplitAutoFlags,
   resolveSplitConstraints,
   roundSize,
   splitSizesEqual,
@@ -56,6 +57,9 @@ const sizes = ref<number[]>([])
 const constraints = computed(() => resolveSplitConstraints(props.panes))
 const resizerCount = computed(() => Math.max(0, props.panes.length - 1))
 
+/** 内容自适应面板标记；首次拖拽/键盘调整时会物化为百分比并清空 */
+const autoFlags = ref<boolean[]>(resolveSplitAutoFlags(props.panes))
+
 /** 归一化初始值，作为双击复位的基准 */
 let initialSizes: number[] = normalizeSplitSizes(props.panes, modelSeed())
 sizes.value = initialSizes.slice()
@@ -72,15 +76,31 @@ watch(
   () => paneKeySignature(),
   () => {
     const provided = sizes.value.length === props.panes.length ? sizes.value : undefined
+    autoFlags.value = resolveSplitAutoFlags(props.panes)
     initialSizes = normalizeSplitSizes(props.panes, provided)
     sizes.value = initialSizes.slice()
     syncModel(sizes.value)
   },
 )
 
+watch(
+  () => props.panes.map((pane) => pane.size).join('|'),
+  () => {
+    // panes 引用不变但 size 声明变化时同步 auto 标记与基准尺寸
+    autoFlags.value = resolveSplitAutoFlags(props.panes)
+    initialSizes = normalizeSplitSizes(props.panes, modelSeed())
+    if (!autoFlags.value.some(Boolean)) {
+      sizes.value = initialSizes.slice()
+      syncModel(sizes.value)
+    }
+  },
+)
+
 watch(model, (value) => {
   if (!value || value.length !== props.panes.length) return
   if (splitSizesEqual(value, sizes.value)) return
+  // 外部受控 sizes 一律视为百分比物化结果
+  autoFlags.value = props.panes.map(() => false)
   sizes.value = normalizeSplitSizes(props.panes, value)
 })
 
@@ -213,6 +233,7 @@ function measureFlexPx(): number {
 function onResizerPointerDown(index: number, event: PointerEvent): void {
   if (props.disabled) return
   if (event.pointerType === 'mouse' && event.button !== 0) return
+  materializeAutoPanes()
   const target = event.currentTarget as HTMLElement
   target.setPointerCapture?.(event.pointerId)
   dragIndex = index
@@ -241,6 +262,7 @@ function endDrag(index: number, event: PointerEvent): void {
 // —— 键盘无障碍 ——
 function onResizerKeydown(index: number, event: KeyboardEvent): void {
   if (props.disabled) return
+  materializeAutoPanes()
   const horizontal = props.orientation === 'horizontal'
   const step = props.keyboardStep
   let delta = 0
@@ -281,6 +303,7 @@ function onResizerKeydown(index: number, event: KeyboardEvent): void {
 
 function onResizerDblClick(index: number): void {
   if (props.disabled) return
+  materializeAutoPanes()
   const a = sizes.value[index]
   const b = sizes.value[index + 1]
   const initA = initialSizes[index]
@@ -324,12 +347,48 @@ function toggleCollapseAt(index: number): void {
   emit('resize-end', sizes.value.slice())
 }
 
+/** 将 auto 面板按当前像素占比物化为百分比，之后走统一拖拽逻辑 */
+function materializeAutoPanes(): void {
+  if (!autoFlags.value.some(Boolean)) return
+  const total = measureFlexPx()
+  if (total <= 0) return
+  const panes = paneElements()
+  const measured = panes.map((el) => (axisSize(el) / total) * 100)
+  const next = normalizeSplitSizes(
+    props.panes.map((pane) => ({
+      ...pane,
+      size: typeof pane.size === 'number' ? pane.size : undefined,
+    })),
+    measured,
+  )
+  autoFlags.value = props.panes.map(() => false)
+  sizes.value = next
+  syncModel(next)
+}
+
 function paneStyle(index: number): Record<string, string> {
+  if (autoFlags.value[index]) {
+    const pane = props.panes[index]
+    const style: Record<string, string> = {
+      flexGrow: '0',
+      flexShrink: '0',
+      flexBasis: 'auto',
+    }
+    const vertical = props.orientation === 'vertical'
+    if (typeof pane?.min === 'number' && pane.min > 0) {
+      style[vertical ? 'minHeight' : 'minWidth'] = `${pane.min}%`
+    }
+    if (typeof pane?.max === 'number' && pane.max < 100) {
+      style[vertical ? 'maxHeight' : 'maxWidth'] = `${pane.max}%`
+    }
+    return style
+  }
   const size = sizes.value[index] ?? 0
   return { flexGrow: String(size), flexShrink: '1', flexBasis: '0%' }
 }
 
 function paneCollapsed(index: number): boolean {
+  if (autoFlags.value[index]) return false
   return isSplitPaneCollapsed(sizes.value[index] ?? 0, constraints.value[index])
 }
 
@@ -368,6 +427,7 @@ function expand(key: string, toSize?: number): void {
 }
 
 function reset(): void {
+  autoFlags.value = resolveSplitAutoFlags(props.panes)
   initialSizes = normalizeSplitSizes(props.panes)
   commit(initialSizes.slice())
   emit('resize-end', sizes.value.slice())
@@ -388,7 +448,10 @@ defineExpose({ collapse, expand, reset, getSizes: () => sizes.value.slice() })
     <template v-for="(pane, index) in panes" :key="pane.key">
       <div
         class="rs-split__pane"
-        :class="{ 'rs-split__pane--collapsed': paneCollapsed(index) }"
+        :class="{
+          'rs-split__pane--collapsed': paneCollapsed(index),
+          'rs-split__pane--auto': autoFlags[index],
+        }"
         :style="paneStyle(index)"
         :data-pane-key="pane.key"
       >
@@ -457,6 +520,11 @@ defineExpose({ collapse, expand, reset, getSizes: () => sizes.value.slice() })
   overflow: hidden;
 }
 
+.rs-split__pane--auto {
+  /* 内容撑开；超出 max 时在面板内滚动 */
+  overflow: auto;
+}
+
 .rs-split__pane--collapsed {
   overflow: hidden;
 }

package/src/components/RsSwitch.vue

@@ -0,0 +1,179 @@
+<script setup lang="ts">
+import { computed, useId } from 'vue'
+import type { RsComponentSize } from '../theme/types'
+import { SwitchRoot, SwitchThumb } from './reka'
+import { useResolvedRsComponentSize } from './resolve-size'
+
+const model = defineModel<boolean>({ default: false })
+
+const props = withDefaults(
+  defineProps<{
+    disabled?: boolean
+    size?: RsComponentSize
+    /** 无障碍名称；有默认插槽文案时可省略 */
+    ariaLabel?: string
+    id?: string
+  }>(),
+  {
+    disabled: false,
+  },
+)
+
+const emit = defineEmits<{
+  change: [value: boolean]
+}>()
+
+const autoId = useId()
+const inputId = computed(() => props.id || autoId)
+const resolvedSize = useResolvedRsComponentSize(() => props.size)
+
+const rootClass = computed(() => [
+  'rs-switch',
+  `rs-switch--${resolvedSize.value}`,
+  {
+    'rs-switch--checked': model.value,
+    'rs-switch--disabled': props.disabled,
+  },
+])
+
+function onUpdate(value: boolean): void {
+  model.value = value
+  emit('change', value)
+}
+</script>
+
+<template>
+  <div :class="rootClass">
+    <SwitchRoot
+      :id="inputId"
+      class="rs-switch__root"
+      :model-value="model"
+      :disabled="disabled"
+      :aria-label="ariaLabel"
+      @update:model-value="onUpdate"
+    >
+      <SwitchThumb class="rs-switch__thumb" />
+    </SwitchRoot>
+    <label v-if="$slots.default" class="rs-switch__label" :for="inputId">
+      <slot />
+    </label>
+  </div>
+</template>
+
+<style>
+/**
+ * 轨道高度 = control-height * 2/3（对齐 Ant：Input SM 24 / Switch SM 16）。
+ * 宽高、内边距、滑块均由 token / calc 推导，不写死档位 px。
+ * 外层 min-height = control-height，保证与同排输入垂直居中对齐。
+ */
+.rs-switch {
+  --rs-switch-pad: calc(var(--rs-switch-track-h) * 0.12);
+  --rs-switch-track-w: calc(var(--rs-switch-track-h) * 1.75);
+  --rs-switch-thumb: calc(var(--rs-switch-track-h) - var(--rs-switch-pad) * 2 - 2px);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rs-space-xs);
+  vertical-align: middle;
+  line-height: 1;
+  cursor: pointer;
+  user-select: none;
+  color: var(--rs-text);
+}
+
+.rs-switch--disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.rs-switch__root {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  box-sizing: border-box;
+  width: var(--rs-switch-track-w);
+  height: var(--rs-switch-track-h);
+  padding: var(--rs-switch-pad);
+  border: 1px solid var(--rs-border);
+  border-radius: var(--rs-radius-full);
+  background: var(--rs-surface-hover);
+  outline: none;
+  cursor: pointer;
+  transition:
+    background-color var(--rs-transition-fast),
+    border-color var(--rs-transition-fast);
+}
+
+.rs-switch--disabled .rs-switch__root {
+  cursor: not-allowed;
+}
+
+.rs-switch:hover:not(.rs-switch--disabled):not(.rs-switch--checked) .rs-switch__root {
+  border-color: var(--rs-primary);
+}
+
+.rs-switch__root:focus-visible {
+  box-shadow: 0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
+}
+
+.rs-switch--checked .rs-switch__root {
+  background: var(--rs-primary);
+  border-color: var(--rs-primary);
+}
+
+.rs-switch--ssm {
+  --rs-switch-track-h: calc(var(--rs-control-height-ssm) * 2 / 3);
+  min-height: var(--rs-control-height-ssm);
+}
+
+.rs-switch--sm {
+  --rs-switch-track-h: calc(var(--rs-control-height-sm) * 2 / 3);
+  min-height: var(--rs-control-height-sm);
+}
+
+.rs-switch--md {
+  --rs-switch-track-h: calc(var(--rs-control-height-md) * 2 / 3);
+  min-height: var(--rs-control-height-md);
+}
+
+.rs-switch--lg {
+  --rs-switch-track-h: calc(var(--rs-control-height-lg) * 2 / 3);
+  min-height: var(--rs-control-height-lg);
+}
+
+.rs-switch__thumb {
+  position: absolute;
+  top: 50%;
+  left: var(--rs-switch-pad);
+  display: block;
+  width: var(--rs-switch-thumb);
+  height: var(--rs-switch-thumb);
+  border-radius: var(--rs-radius-full);
+  background: var(--rs-surface);
+  box-shadow: var(--rs-shadow-sm);
+  transform: translateY(-50%);
+  transition:
+    left var(--rs-transition-fast),
+    right var(--rs-transition-fast);
+}
+
+.rs-switch--checked .rs-switch__thumb {
+  left: auto;
+  right: var(--rs-switch-pad);
+}
+
+.rs-switch__label {
+  font-size: var(--rs-font-size-sm);
+  line-height: var(--rs-line-height-normal);
+  cursor: pointer;
+}
+
+.rs-switch--disabled .rs-switch__label {
+  cursor: not-allowed;
+}
+
+.rs-switch--ssm .rs-switch__label,
+.rs-switch--sm .rs-switch__label {
+  font-size: var(--rs-font-size-xs);
+}
+</style>