niuma-ui 1.0.0 → 1.0.2

package/src/components/RsPagination.vue

@@ -5,8 +5,13 @@ import RsInput from './RsInput.vue'
 import RsSelect from './RsSelect.vue'
 import { clampPage, DEFAULT_PAGE_SIZE_OPTIONS, getPageCount, getPaginationRange } from './pagination-utils'
 import { useRsI18n } from '../composables/useRsI18n'
+import type { RsComponentSize } from '../theme/types'
 
-export type RsPaginationSize = 'sm' | 'md'
+/**
+ * 分页尺寸（对齐 Ant Design Pagination：small / medium / large）。
+ * 不提供 ssm：页码按钮过小不利于点击。
+ */
+export type RsPaginationSize = Extract<RsComponentSize, 'sm' | 'md' | 'lg'>
 
 const page = defineModel<number>('page', { default: 1 })
 const pageSize = defineModel<number>('pageSize', { default: 20 })
@@ -18,6 +23,11 @@ const props = withDefaults(
     showSummary?: boolean
     showPageSize?: boolean
     showQuickJumper?: boolean
+    /**
+     * 是否显示跳转「确定」按钮。
+     * 默认 false：回车 / 失焦跳转（对齐 Ant Design showQuickJumper 默认无 goButton）。
+     */
+    showJumpConfirm?: boolean
     pageSizeOptions?: readonly number[]
     disabled?: boolean
     size?: RsPaginationSize
@@ -27,6 +37,7 @@ const props = withDefaults(
     showSummary: true,
     showPageSize: false,
     showQuickJumper: false,
+    showJumpConfirm: false,
     pageSizeOptions: () => DEFAULT_PAGE_SIZE_OPTIONS,
     disabled: false,
     size: 'md',
@@ -51,6 +62,9 @@ const pageSizeSelectOptions = computed(() =>
   })),
 )
 const showJumper = computed(() => props.showQuickJumper && pageCount.value > 1)
+/** 页码按钮用 sm 圆角，避免 Button 默认 full 胶囊 */
+const controlRadius = 'sm' as const
+const controlSize = computed(() => props.size)
 
 watch(pageCount, (count) => {
   page.value = clampPage(page.value, count)
@@ -78,27 +92,47 @@ function confirmJump(): void {
 </script>
 
 <template>
-  <nav class="rs-pagination" :class="`rs-pagination--${size}`" :aria-label="t('pagination.label')">
+  <nav
+    class="rs-pagination"
+    :class="[`rs-pagination--${size}`, { 'rs-pagination--no-jump-confirm': !showJumpConfirm }]"
+    :aria-label="t('pagination.label')"
+  >
     <span v-if="showSummary" class="rs-pagination__summary">
       {{ summaryText }}
     </span>
     <div class="rs-pagination__buttons">
-      <RsButton variant="ghost" size="sm" :disabled="disabled || page <= 1" @click="go(page - 1)">
+      <RsButton
+        variant="ghost"
+        :size="controlSize"
+        :radius="controlRadius"
+        :disabled="disabled || page <= 1"
+        @click="go(page - 1)"
+      >
         {{ t('pagination.prev') }}
       </RsButton>
       <template v-for="(item, index) in range" :key="`${item}-${index}`">
         <span v-if="item === 'ellipsis'" class="rs-pagination__ellipsis">...</span>
         <RsButton
           v-else
-          :variant="item === page ? 'primary' : 'ghost'"
-          size="sm"
+          variant="text"
+          :tone="item === page ? 'primary' : 'neutral'"
+          :size="controlSize"
+          :radius="controlRadius"
+          class="rs-pagination__page"
+          :class="{ 'rs-pagination__page--active': item === page }"
           :disabled="disabled"
           @click="go(item)"
         >
           {{ item }}
         </RsButton>
       </template>
-      <RsButton variant="ghost" size="sm" :disabled="disabled || page >= pageCount" @click="go(page + 1)">
+      <RsButton
+        variant="ghost"
+        :size="controlSize"
+        :radius="controlRadius"
+        :disabled="disabled || page >= pageCount"
+        @click="go(page + 1)"
+      >
         {{ t('pagination.next') }}
       </RsButton>
     </div>
@@ -107,17 +141,21 @@ function confirmJump(): void {
       <div class="rs-pagination__jumper-input">
         <RsInput
           v-model="jumpPageInput"
-          size="sm"
+          :size="controlSize"
+          :radius="controlRadius"
           :disabled="disabled"
-          @keydown.enter="confirmJump"
+          @press-enter="confirmJump"
+          @blur="confirmJump"
         />
       </div>
       <span v-if="t('pagination.jumpPageSuffix')" class="rs-pagination__jumper-suffix">
         {{ t('pagination.jumpPageSuffix') }}
       </span>
       <RsButton
+        v-if="showJumpConfirm"
         variant="ghost"
-        size="sm"
+        :size="controlSize"
+        :radius="controlRadius"
         class="rs-pagination__jumper-btn"
         :disabled="disabled"
         @click="confirmJump"
@@ -129,9 +167,11 @@ function confirmJump(): void {
       <RsSelect
         v-model="pageSizeSelectValue"
         :options="pageSizeSelectOptions"
-        size="sm"
+        :size="controlSize"
+        :radius="controlRadius"
         :disabled="disabled"
         :placeholder="t('select.placeholder')"
+        block
       />
     </div>
   </nav>
@@ -145,16 +185,46 @@ function confirmJump(): void {
   gap: var(--rs-space-sm);
   color: var(--rs-muted);
   font-size: var(--rs-font-size-sm);
+  /*
+   * 跳转输入 / 每页条数与页码按钮同档高度（随 size）。
+   * 高度走 token；仅用属性选择器对齐外壳，避免业务 :deep 改控件内部。
+   */
+  --rs-pagination-control-height: var(--rs-control-height-md);
+}
+.rs-pagination--sm {
+  --rs-pagination-control-height: var(--rs-control-height-sm);
+  font-size: var(--rs-font-size-xs);
+}
+.rs-pagination--md {
+  --rs-pagination-control-height: var(--rs-control-height-md);
+}
+.rs-pagination--lg {
+  --rs-pagination-control-height: var(--rs-control-height-lg);
+  font-size: var(--rs-font-size-base);
+}
+.rs-pagination__summary {
+  flex-shrink: 0;
+  line-height: var(--rs-pagination-control-height);
 }
 .rs-pagination__buttons {
   display: inline-flex;
   align-items: center;
   gap: var(--rs-space-xs);
 }
+/* 当前页：仅主色文字高亮，无填充底（对齐部分 Ant / Element 轻量分页） */
+.rs-pagination__buttons :deep(.rs-pagination__page--active) {
+  font-weight: 600;
+  background: transparent !important;
+  box-shadow: none;
+}
+.rs-pagination__buttons :deep(.rs-pagination__page--active:hover:not(:disabled)),
+.rs-pagination__buttons :deep(.rs-pagination__page--active:active:not(:disabled)) {
+  background: transparent !important;
+}
 .rs-pagination__ellipsis {
   padding: 0 var(--rs-space-xs);
   font-size: var(--rs-font-size-xs);
-  line-height: var(--rs-control-height-sm);
+  line-height: var(--rs-pagination-control-height);
 }
 .rs-pagination__jumper {
   display: inline-flex;
@@ -165,14 +235,17 @@ function confirmJump(): void {
 .rs-pagination__jumper-suffix {
   flex-shrink: 0;
   color: var(--rs-muted);
-  font-size: var(--rs-font-size-xs);
+  font-size: inherit;
   line-height: var(--rs-line-height-tight);
 }
 .rs-pagination__jumper-input {
-  width: 2.75rem;
+  width: 3rem;
 }
-.rs-pagination__jumper-input :deep(.rs-input-field) {
+.rs-pagination__jumper-input :deep(.rs-input-group) {
   width: 100%;
+  height: var(--rs-pagination-control-height);
+  min-height: var(--rs-pagination-control-height);
+  box-sizing: border-box;
 }
 .rs-pagination__jumper-btn {
   flex-shrink: 0;
@@ -181,4 +254,10 @@ function confirmJump(): void {
   width: 7.25rem;
   min-width: 7.25rem;
 }
+.rs-pagination__size :deep(.rs-select__trigger) {
+  width: 100%;
+  height: var(--rs-pagination-control-height);
+  min-height: var(--rs-pagination-control-height);
+  box-sizing: border-box;
+}
 </style>

package/src/components/RsRadio.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { computed, provide } from 'vue'
+import type { RsComponentSize } from '../theme/types'
+import { RadioGroupRoot } from './reka'
+import { RS_RADIO_GROUP_KEY, type RsRadioValue } from './radio-utils'
+import { useResolvedRsComponentSize } from './resolve-size'
+
+const model = defineModel<RsRadioValue | undefined>({ default: undefined })
+
+const props = withDefaults(
+  defineProps<{
+    disabled?: boolean
+    size?: RsComponentSize
+    name?: string
+    orientation?: 'horizontal' | 'vertical'
+  }>(),
+  {
+    disabled: false,
+    orientation: 'horizontal',
+  },
+)
+
+const emit = defineEmits<{
+  change: [value: RsRadioValue]
+}>()
+
+const resolvedSize = useResolvedRsComponentSize(() => props.size)
+
+provide(RS_RADIO_GROUP_KEY, {
+  size: resolvedSize,
+})
+
+const rootClass = computed(() => [
+  'rs-radio-group',
+  `rs-radio-group--${props.orientation}`,
+  `rs-radio-group--${resolvedSize.value}`,
+  { 'rs-radio-group--disabled': props.disabled },
+])
+
+function onUpdate(value: RsRadioValue): void {
+  model.value = value
+  emit('change', value)
+}
+</script>
+
+<template>
+  <RadioGroupRoot
+    :class="rootClass"
+    :model-value="model as string | number | undefined"
+    :disabled="disabled"
+    :name="name"
+    :orientation="orientation"
+    @update:model-value="onUpdate($event as RsRadioValue)"
+  >
+    <slot />
+  </RadioGroupRoot>
+</template>
+
+<style>
+.rs-radio-group {
+  display: inline-flex;
+  gap: var(--rs-space-md);
+  color: var(--rs-text);
+}
+
+.rs-radio-group--vertical {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.rs-radio-group--horizontal {
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.rs-radio-group--disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+</style>

package/src/components/RsRadioItem.vue

@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import { computed, inject, useId } from 'vue'
+import type { RsComponentSize } from '../theme/types'
+import { RadioGroupIndicator, RadioGroupItem } from './reka'
+import { RS_RADIO_GROUP_KEY, type RsRadioValue } from './radio-utils'
+import { useResolvedRsComponentSize } from './resolve-size'
+
+const props = withDefaults(
+  defineProps<{
+    value: RsRadioValue
+    disabled?: boolean
+    size?: RsComponentSize
+    id?: string
+  }>(),
+  {
+    disabled: false,
+  },
+)
+
+const group = inject(RS_RADIO_GROUP_KEY, null)
+const resolvedSize = useResolvedRsComponentSize(() => props.size ?? group?.size.value)
+const autoId = useId()
+const inputId = computed(() => props.id || autoId)
+
+const rootClass = computed(() => [
+  'rs-radio',
+  `rs-radio--${resolvedSize.value}`,
+  { 'rs-radio--disabled': props.disabled },
+])
+</script>
+
+<template>
+  <div :class="rootClass">
+    <RadioGroupItem
+      :id="inputId"
+      class="rs-radio__item"
+      :value="value as string | number"
+      :disabled="disabled"
+    >
+      <RadioGroupIndicator class="rs-radio__indicator" />
+    </RadioGroupItem>
+    <label v-if="$slots.default" class="rs-radio__label" :for="inputId">
+      <slot />
+    </label>
+  </div>
+</template>
+
+<style>
+.rs-radio {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rs-space-xs);
+  cursor: pointer;
+  user-select: none;
+  line-height: 1;
+}
+
+.rs-radio--disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.rs-radio__item {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  border: 1px solid var(--rs-border);
+  border-radius: var(--rs-radius-full);
+  background: var(--rs-surface);
+  outline: none;
+  cursor: pointer;
+  transition:
+    border-color var(--rs-transition-fast),
+    background-color var(--rs-transition-fast);
+}
+
+.rs-radio--disabled .rs-radio__item {
+  cursor: not-allowed;
+}
+
+.rs-radio:hover:not(.rs-radio--disabled) .rs-radio__item:not([data-state='checked']) {
+  border-color: var(--rs-primary);
+}
+
+.rs-radio__item:focus-visible {
+  box-shadow: 0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
+}
+
+.rs-radio--ssm .rs-radio__item {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+.rs-radio--sm .rs-radio__item {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.rs-radio--md .rs-radio__item {
+  width: 1rem;
+  height: 1rem;
+}
+
+.rs-radio--lg .rs-radio__item {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+.rs-radio__item[data-state='checked'] {
+  border-color: var(--rs-primary);
+}
+
+.rs-radio__indicator {
+  display: block;
+  border-radius: var(--rs-radius-full);
+  background: var(--rs-primary);
+}
+
+.rs-radio--ssm .rs-radio__indicator {
+  width: 0.375rem;
+  height: 0.375rem;
+}
+
+.rs-radio--sm .rs-radio__indicator {
+  width: 0.4375rem;
+  height: 0.4375rem;
+}
+
+.rs-radio--md .rs-radio__indicator {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+
+.rs-radio--lg .rs-radio__indicator {
+  width: 0.5625rem;
+  height: 0.5625rem;
+}
+
+.rs-radio__label {
+  font-size: var(--rs-font-size-sm);
+  line-height: var(--rs-line-height-normal);
+  cursor: pointer;
+}
+
+.rs-radio--disabled .rs-radio__label {
+  cursor: not-allowed;
+}
+
+.rs-radio--ssm .rs-radio__label,
+.rs-radio--sm .rs-radio__label {
+  font-size: var(--rs-font-size-xs);
+}
+</style>