niuma-ui 1.0.0

package/src/components/RsDropdown.vue

@@ -0,0 +1,252 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import {
+  type AcceptableValue,
+  DropdownMenuContent,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRoot,
+  DropdownMenuTrigger,
+} from './reka'
+import { useRsI18n } from '../composables/useRsI18n'
+import { flattenDropdownItems, type RsDropdownItems as RsDropdownData } from './dropdown-utils'
+import RsDropdownItems from './RsDropdownItems.vue'
+import RsIcon from './RsIcon.vue'
+
+const model = defineModel<string>()
+
+const props = withDefaults(
+  defineProps<{
+    items: RsDropdownData
+    placeholder?: string
+    disabled?: boolean
+    /** 选中后是否在触发器回显选项 label；false 时固定显示 placeholder（操作菜单） */
+    showSelected?: boolean
+  }>(),
+  {
+    disabled: false,
+    showSelected: true,
+  },
+)
+
+const { t } = useRsI18n()
+const resolvedPlaceholder = computed(() => props.placeholder ?? t('dropdown.placeholder'))
+
+const emit = defineEmits<{
+  select: [value: string]
+}>()
+
+const flatItems = computed(() => flattenDropdownItems(props.items))
+
+const selectedItem = computed(() =>
+  flatItems.value.find((item) => item.value === model.value),
+)
+
+const displayLabel = computed(() => {
+  if (!props.showSelected) return resolvedPlaceholder.value
+  return selectedItem.value?.label ?? resolvedPlaceholder.value
+})
+
+const isPlaceholderDisplay = computed(() => {
+  if (!props.showSelected) return false
+  return !selectedItem.value
+})
+
+function onSelect(value: AcceptableValue) {
+  if (typeof value === 'string') {
+    model.value = value
+    emit('select', value)
+  }
+}
+</script>
+
+<template>
+  <DropdownMenuRoot
+    class="rs-dropdown"
+    :class="{ 'rs-dropdown--action': !showSelected }"
+  >
+    <DropdownMenuTrigger class="rs-dropdown__trigger" :disabled="disabled">
+      <span class="rs-dropdown__value">
+        <span
+          class="rs-dropdown__label"
+          :class="{ 'rs-dropdown__label--placeholder': isPlaceholderDisplay }"
+        >
+          {{ displayLabel }}
+        </span>
+      </span>
+      <RsIcon name="chevron-down" :size="16" class="rs-dropdown__icon" />
+    </DropdownMenuTrigger>
+    <DropdownMenuPortal>
+      <DropdownMenuContent class="rs-dropdown__content" :side-offset="4">
+        <DropdownMenuRadioGroup
+          v-if="showSelected"
+          v-model="model"
+          @update:model-value="onSelect"
+        >
+          <RsDropdownItems :items="items" selectable />
+        </DropdownMenuRadioGroup>
+        <RsDropdownItems v-else :items="items" @select="onSelect" />
+      </DropdownMenuContent>
+    </DropdownMenuPortal>
+  </DropdownMenuRoot>
+</template>
+
+<style>
+/* Dropdown 为浮层菜单，样式独立于 RsSelect 列表，对齐 RsContextMenu / 设计规范 */
+.rs-dropdown {
+  display: inline-block;
+  min-width: 10rem;
+}
+
+.rs-dropdown--action {
+  min-width: auto;
+}
+
+.rs-dropdown__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--rs-space-sm);
+  width: 100%;
+  min-height: var(--rs-control-height-md);
+  padding: 0 var(--rs-space-md);
+  border-radius: var(--rs-radius-sm);
+  border: 1px solid var(--rs-input-border, var(--rs-border));
+  background: var(--rs-input-bg);
+  color: var(--rs-text);
+  font-size: var(--rs-font-size-sm);
+  line-height: var(--rs-line-height-normal);
+  cursor: pointer;
+  box-shadow: var(--rs-input-shadow, none);
+  transition:
+    border-color var(--rs-transition-fast),
+    box-shadow var(--rs-transition-fast),
+    background var(--rs-transition-fast);
+}
+
+.rs-dropdown__trigger:hover:not([data-disabled]) {
+  border-color: var(--rs-input-border-hover, var(--rs-border));
+}
+
+.rs-dropdown__trigger:focus-visible {
+  outline: none;
+  border-color: var(--rs-focus-border, var(--rs-primary));
+  background: var(--rs-input-bg);
+  box-shadow:
+    var(--rs-input-shadow, none),
+    0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
+}
+
+.rs-dropdown__trigger[data-disabled] {
+  opacity: 0.38;
+  cursor: not-allowed;
+  background: var(--rs-surface-hover);
+}
+
+.rs-dropdown__value {
+  flex: 1;
+  min-width: 0;
+  text-align: left;
+}
+
+.rs-dropdown__label {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rs-dropdown__label--placeholder {
+  color: var(--rs-placeholder);
+}
+
+.rs-dropdown__icon {
+  flex-shrink: 0;
+  color: var(--rs-muted);
+}
+
+.rs-dropdown__content {
+  z-index: var(--rs-z-dropdown);
+  min-width: var(--reka-dropdown-menu-trigger-width);
+  padding: var(--rs-space-xs);
+  border-radius: var(--rs-radius);
+  border: 1px solid var(--rs-border);
+  background: var(--rs-surface-elevated);
+  box-shadow: var(--rs-shadow);
+  outline: none;
+  overflow: hidden;
+}
+
+.rs-dropdown__group + .rs-dropdown__group {
+  margin-top: var(--rs-space-md);
+  padding-top: 0;
+  border-top: 1px solid var(--rs-border-subtle);
+}
+
+.rs-dropdown__group-label {
+  display: block;
+  padding: 0.375rem var(--rs-space-md) 0.125rem;
+  font-size: var(--rs-font-size-xs);
+  font-weight: 600;
+  color: var(--rs-muted);
+  letter-spacing: 0.04em;
+  line-height: var(--rs-line-height-tight);
+  user-select: none;
+}
+
+.rs-dropdown__group + .rs-dropdown__group .rs-dropdown__group-label {
+  position: relative;
+  top: -0.55em;
+  margin-bottom: 0.125rem;
+  padding: 0 0.375rem;
+  margin-left: var(--rs-space-md);
+  width: fit-content;
+  max-width: calc(100% - var(--rs-space-md) * 2);
+  background: var(--rs-surface-elevated);
+  line-height: 1;
+}
+
+.rs-dropdown__item {
+  display: flex;
+  align-items: center;
+  gap: var(--rs-space-sm);
+  padding: var(--rs-space-sm) var(--rs-space-md);
+  border-radius: var(--rs-radius-sm);
+  font-size: var(--rs-font-size-sm);
+  line-height: var(--rs-line-height-tight);
+  color: var(--rs-text);
+  cursor: pointer;
+  outline: none;
+  user-select: none;
+  transition:
+    background var(--rs-transition-fast),
+    color var(--rs-transition-fast);
+}
+
+.rs-dropdown__item-icon {
+  flex-shrink: 0;
+  color: var(--rs-muted);
+}
+
+.rs-dropdown__item-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rs-dropdown__item[data-highlighted] {
+  background: var(--rs-item-hover);
+}
+
+.rs-dropdown__item[data-state='checked'] {
+  color: var(--rs-primary);
+  background: color-mix(in srgb, var(--rs-primary) 12%, transparent);
+}
+
+.rs-dropdown__item[data-disabled] {
+  opacity: 0.38;
+  cursor: not-allowed;
+}
+</style>

package/src/components/RsDropdownItems.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import {
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuRadioItem,
+} from './reka'
+import {
+  isDropdownItemGroup,
+  type RsDropdownItem,
+  type RsDropdownItems,
+} from './dropdown-utils'
+import RsIcon from './RsIcon.vue'
+
+withDefaults(
+  defineProps<{
+    items: RsDropdownItems
+    /** true：单选互斥；false：操作项 */
+    selectable?: boolean
+  }>(),
+  {
+    selectable: false,
+  },
+)
+
+const emit = defineEmits<{
+  select: [value: string]
+}>()
+
+function onActionSelect(item: RsDropdownItem) {
+  if (item.disabled) return
+  emit('select', item.value)
+}
+</script>
+
+<template>
+  <template v-for="(entry, index) in items" :key="index">
+    <DropdownMenuGroup v-if="isDropdownItemGroup(entry)" class="rs-dropdown__group">
+      <DropdownMenuLabel class="rs-dropdown__group-label">
+        {{ entry.label }}
+      </DropdownMenuLabel>
+      <template v-if="selectable">
+        <DropdownMenuRadioItem
+          v-for="item in entry.options"
+          :key="item.value"
+          :value="item.value"
+          :disabled="item.disabled"
+          class="rs-dropdown__item"
+        >
+          <RsIcon v-if="item.icon" :name="item.icon" :size="16" class="rs-dropdown__item-icon" />
+          <span class="rs-dropdown__item-label">{{ item.label }}</span>
+        </DropdownMenuRadioItem>
+      </template>
+      <template v-else>
+        <DropdownMenuItem
+          v-for="item in entry.options"
+          :key="item.value"
+          :disabled="item.disabled"
+          class="rs-dropdown__item"
+          @select="onActionSelect(item)"
+        >
+          <RsIcon v-if="item.icon" :name="item.icon" :size="16" class="rs-dropdown__item-icon" />
+          <span class="rs-dropdown__item-label">{{ item.label }}</span>
+        </DropdownMenuItem>
+      </template>
+    </DropdownMenuGroup>
+
+    <DropdownMenuRadioItem
+      v-else-if="selectable"
+      :key="entry.value"
+      :value="entry.value"
+      :disabled="entry.disabled"
+      class="rs-dropdown__item"
+    >
+      <RsIcon v-if="entry.icon" :name="entry.icon" :size="16" class="rs-dropdown__item-icon" />
+      <span class="rs-dropdown__item-label">{{ entry.label }}</span>
+    </DropdownMenuRadioItem>
+
+    <DropdownMenuItem
+      v-else
+      :key="entry.value"
+      :disabled="entry.disabled"
+      class="rs-dropdown__item"
+      @select="onActionSelect(entry)"
+    >
+      <RsIcon v-if="entry.icon" :name="entry.icon" :size="16" class="rs-dropdown__item-icon" />
+      <span class="rs-dropdown__item-label">{{ entry.label }}</span>
+    </DropdownMenuItem>
+  </template>
+</template>

package/src/components/RsEmpty.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { RsRadius } from '../theme/types'
+import { rsRadiusCss, useResolvedRsRadius } from './resolve-radius'
+
+const props = withDefaults(
+  defineProps<{
+    description: string
+    title?: string
+    /**
+     * 占满父级可用空间，并去除外层虚线框 / 背景。
+     * 适合嵌在面板、列表、结果区内的空态。
+     * 开启后外层强制直角；图标圆角仍由 `iconRadius` 控制。
+     */
+    fill?: boolean
+    /** 外层容器圆角（fill 时忽略，恒为直角）。默认 md。 */
+    radius?: RsRadius
+    /** 图标区圆角。默认 full（圆形）；直角 UI 传 `none`。 */
+    iconRadius?: RsRadius
+  }>(),
+  {
+    fill: false,
+  },
+)
+
+const resolvedRadius = useResolvedRsRadius(() => props.radius, 'md')
+const resolvedIconRadius = useResolvedRsRadius(() => props.iconRadius, 'full')
+
+const rootStyle = computed(() => ({
+  '--rs-empty-radius': props.fill ? '0' : rsRadiusCss(resolvedRadius.value),
+  '--rs-empty-icon-radius': rsRadiusCss(resolvedIconRadius.value),
+}))
+</script>
+
+<template>
+  <div class="rs-empty" :class="{ 'rs-empty--fill': fill }" :style="rootStyle">
+    <div class="rs-empty__icon">
+      <slot name="icon" />
+    </div>
+    <div class="rs-empty__text">
+      <p v-if="title" class="rs-empty__title">{{ title }}</p>
+      <p class="rs-empty__description" :class="{ 'rs-empty__description--offset': title }">
+        {{ description }}
+      </p>
+    </div>
+    <slot />
+  </div>
+</template>
+
+<style>
+.rs-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  padding: 3.5rem 1.5rem;
+  border-radius: var(--rs-empty-radius, var(--rs-radius));
+  border: 1px dashed var(--rs-border);
+  background: color-mix(in srgb, var(--rs-surface) 80%, var(--rs-bg));
+  text-align: center;
+  box-sizing: border-box;
+}
+
+.rs-empty--fill {
+  flex: 1 1 auto;
+  align-self: stretch;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  border-radius: 0;
+  border-color: transparent;
+  background: transparent;
+}
+
+.rs-empty__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 3.5rem;
+  height: 3.5rem;
+  border-radius: var(--rs-empty-icon-radius, var(--rs-radius-full));
+  border: 1px solid var(--rs-border);
+  background: var(--rs-surface);
+  color: var(--rs-muted);
+  box-shadow: var(--rs-shadow-sm);
+}
+
+.rs-empty__title {
+  margin: 0;
+  font-size: var(--rs-font-size-sm);
+  font-weight: 500;
+  color: var(--rs-text);
+}
+
+.rs-empty__description {
+  margin: 0;
+  font-size: var(--rs-font-size-sm);
+  color: var(--rs-muted);
+  line-height: var(--rs-line-height-normal);
+}
+
+.rs-empty__description--offset {
+  margin-top: 0.25rem;
+}
+</style>

package/src/components/RsForm.vue

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import type {
+  RsFormFieldExpose,
+  RsFormGap,
+  RsFormLabelAlign,
+  RsFormLabelPosition,
+  RsFormMaxWidth,
+  RsFormSize,
+  RsFormValidationResult,
+} from './form-utils'
+import { cloneFormFieldValue, provideRsFormContext } from './form-utils'
+
+const props = withDefaults(
+  defineProps<{
+    disabled?: boolean
+    labelPosition?: RsFormLabelPosition
+    labelWidth?: string
+    labelAlign?: RsFormLabelAlign
+    size?: RsFormSize
+    gap?: RsFormGap
+    maxWidth?: RsFormMaxWidth
+  }>(),
+  {
+    disabled: false,
+    labelPosition: 'top',
+    labelWidth: '6rem',
+    labelAlign: 'start',
+    size: 'md',
+    gap: 'md',
+    maxWidth: 'full',
+  },
+)
+
+const fields = new Map<symbol, RsFormFieldExpose>()
+const disabledRef = computed(() => props.disabled)
+const labelPositionRef = computed(() => props.labelPosition)
+const labelWidthRef = computed(() => props.labelWidth)
+const labelAlignRef = computed(() => props.labelAlign)
+const sizeRef = computed(() => props.size)
+const initialValues = ref(new Map<symbol, unknown>())
+
+function registerField(id: symbol, field: RsFormFieldExpose): void {
+  fields.set(id, field)
+  initialValues.value.set(id, cloneFormFieldValue(field.getValue()))
+}
+
+function unregisterField(id: symbol): void {
+  fields.delete(id)
+  initialValues.value.delete(id)
+}
+
+provideRsFormContext({
+  disabled: disabledRef,
+  labelPosition: labelPositionRef,
+  labelWidth: labelWidthRef,
+  labelAlign: labelAlignRef,
+  size: sizeRef,
+  registerField,
+  unregisterField,
+})
+
+async function validate(): Promise<RsFormValidationResult> {
+  const results = await Promise.all(
+    Array.from(fields.values()).map((field) => field.validate?.() ?? { valid: true }),
+  )
+  return { valid: results.every((result) => result.valid) }
+}
+
+function clearValidation(): void {
+  fields.forEach((field) => field.clearValidation?.())
+}
+
+function resetFields(): void {
+  fields.forEach((field, id) => {
+    field.setValue(cloneFormFieldValue(initialValues.value.get(id)))
+    field.clearValidation?.()
+  })
+}
+
+defineExpose({
+  validate,
+  clearValidation,
+  resetFields,
+})
+</script>
+
+<template>
+  <form
+    class="rs-form"
+    :class="[
+      `rs-form--gap-${gap}`,
+      `rs-form--max-${maxWidth}`,
+      `rs-form--label-${labelPosition}`,
+    ]"
+  >
+    <slot />
+  </form>
+</template>
+
+<style scoped>
+.rs-form {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.rs-form--gap-sm {
+  gap: var(--rs-space-sm);
+}
+.rs-form--gap-md {
+  gap: var(--rs-space-md);
+}
+.rs-form--gap-lg {
+  gap: var(--rs-space-lg);
+}
+.rs-form--max-sm {
+  max-width: 24rem;
+}
+.rs-form--max-md {
+  max-width: 32rem;
+}
+.rs-form--max-lg {
+  max-width: 48rem;
+}
+.rs-form--max-full {
+  max-width: 100%;
+}
+.rs-form--max-none {
+  max-width: none;
+}
+</style>

package/src/components/RsIcon.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { computed, type Component } from 'vue'
+import { resolveLucideIcon } from '../icons/registry'
+import type { RsComponentSize } from '../theme/types'
+
+const SIZE_PRESET: Record<RsComponentSize, number> = {
+  ssm: 12,
+  sm: 14,
+  md: 16,
+  lg: 20,
+}
+
+const props = withDefaults(
+  defineProps<{
+    /** Lucide 图标名（kebab-case，如 `house`、`trash-2`） */
+    name: string
+    /** 数字 px、CSS 长度或 sm / md / lg 预设 */
+    size?: number | string | RsComponentSize
+    /** 无障碍名称；有值时作为语义图标，无值时为装饰性图标 */
+    label?: string
+    strokeWidth?: number | string
+    /** 覆盖颜色，默认继承 currentColor */
+    color?: string
+    /** 水平 / 垂直 / 双向翻转 */
+    flip?: 'horizontal' | 'vertical' | 'both'
+    /** 旋转角度（度），与 spin 不宜同时使用 */
+    rotate?: number
+    /** 旋转动画，适合 loader 等加载态 */
+    spin?: boolean
+  }>(),
+  {
+    size: 'md',
+    strokeWidth: 1.75,
+  },
+)
+
+const iconComponent = computed<Component | undefined>(() => resolveLucideIcon(props.name))
+
+const usesCustomSize = computed(() => {
+  const { size } = props
+  return typeof size === 'string' && !(size in SIZE_PRESET) && !/^\d+$/.test(size)
+})
+
+const lucideSize = computed(() => {
+  if (usesCustomSize.value) return undefined
+  const { size } = props
+  if (typeof size === 'number') return size
+  if (size in SIZE_PRESET) return SIZE_PRESET[size as RsComponentSize]
+  return Number.parseInt(String(size), 10) || SIZE_PRESET.md
+})
+
+const iconStyle = computed(() => {
+  const style: Record<string, string> = {}
+  if (props.color) style.color = props.color
+
+  const transforms: string[] = []
+  if (props.flip === 'horizontal') transforms.push('scaleX(-1)')
+  else if (props.flip === 'vertical') transforms.push('scaleY(-1)')
+  else if (props.flip === 'both') transforms.push('scale(-1)')
+  if (props.rotate) transforms.push(`rotate(${props.rotate}deg)`)
+  if (transforms.length) style.transform = transforms.join(' ')
+
+  if (usesCustomSize.value && typeof props.size === 'string') {
+    style.width = props.size
+    style.height = props.size
+  }
+
+  return Object.keys(style).length ? style : undefined
+})
+
+const isSemantic = computed(() => Boolean(props.label))
+</script>
+
+<template>
+  <component
+    :is="iconComponent"
+    v-if="iconComponent"
+    class="rs-icon"
+    :class="{ 'rs-icon--spin': spin }"
+    :style="iconStyle"
+    :size="lucideSize"
+    :stroke-width="strokeWidth"
+    :color="color"
+    :aria-hidden="isSemantic ? undefined : true"
+    :aria-label="label"
+    :role="isSemantic ? 'img' : undefined"
+  />
+</template>
+
+<style scoped>
+.rs-icon {
+  display: inline-block;
+  flex-shrink: 0;
+  vertical-align: middle;
+}
+.rs-icon--spin {
+  animation: rs-icon-spin 0.8s linear infinite;
+}
+@keyframes rs-icon-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>