niuma-ui 1.0.0

package/src/components/RsToolbar.vue

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+/** 工具栏高度密度，对应常见面板顶栏。 */
+export type RsToolbarSize = 'sm' | 'md' | 'lg'
+
+/** 分割线位置。 */
+export type RsToolbarBorder = 'bottom' | 'top' | 'both' | 'none'
+
+withDefaults(
+  defineProps<{
+    /** 根元素标签名。 */
+    tag?: string
+    /** 高度密度：sm≈32px / md≈36px / lg≈44px。 */
+    size?: RsToolbarSize
+    /** 分割线位置。 */
+    border?: RsToolbarBorder
+    /** 使用抬升底色（`--rs-surface-elevated`）。 */
+    elevated?: boolean
+    /** 收紧水平内边距。 */
+    compact?: boolean
+    /** 无障碍标签（`role="toolbar"`）。 */
+    label?: string
+  }>(),
+  {
+    tag: 'header',
+    size: 'md',
+    border: 'bottom',
+    elevated: false,
+    compact: false,
+  },
+)
+</script>
+
+<template>
+  <component
+    :is="tag"
+    class="rs-toolbar"
+    :class="[
+      `rs-toolbar--${size}`,
+      `rs-toolbar--border-${border}`,
+      {
+        'rs-toolbar--elevated': elevated,
+        'rs-toolbar--compact': compact,
+      },
+    ]"
+    role="toolbar"
+    :aria-label="label"
+  >
+    <div v-if="$slots.left || $slots.default" class="rs-toolbar__start">
+      <slot name="left" />
+      <slot />
+    </div>
+    <div v-if="$slots.center" class="rs-toolbar__center">
+      <slot name="center" />
+    </div>
+    <div v-if="$slots.right" class="rs-toolbar__end">
+      <slot name="right" />
+    </div>
+  </component>
+</template>
+
+<style>
+.rs-toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--rs-space-sm);
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  flex-shrink: 0;
+  padding: 0 var(--rs-space-sm);
+  background: var(--rs-surface);
+  color: var(--rs-text);
+}
+
+.rs-toolbar--compact {
+  padding-inline: var(--rs-space-xs);
+  gap: var(--rs-space-xs);
+}
+
+.rs-toolbar--elevated {
+  background: var(--rs-surface-elevated);
+}
+
+.rs-toolbar--sm {
+  height: 2rem;
+}
+
+.rs-toolbar--md {
+  height: 2.25rem;
+}
+
+.rs-toolbar--lg {
+  height: 2.75rem;
+}
+
+.rs-toolbar--border-bottom {
+  border-bottom: 1px solid var(--rs-border-subtle);
+}
+
+.rs-toolbar--border-top {
+  border-top: 1px solid var(--rs-border-subtle);
+}
+
+.rs-toolbar--border-both {
+  border-top: 1px solid var(--rs-border-subtle);
+  border-bottom: 1px solid var(--rs-border-subtle);
+}
+
+.rs-toolbar--border-none {
+  border: none;
+}
+
+.rs-toolbar__start,
+.rs-toolbar__center,
+.rs-toolbar__end {
+  display: flex;
+  align-items: center;
+  gap: var(--rs-space-xs);
+  min-width: 0;
+}
+
+.rs-toolbar__start {
+  flex: 1 1 auto;
+  overflow: hidden;
+}
+
+.rs-toolbar__center {
+  flex: 0 0 auto;
+}
+
+.rs-toolbar__end {
+  flex: 0 0 auto;
+  margin-inline-start: auto;
+}
+</style>

package/src/components/RsTooltip.vue

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import { computed, useSlots } from 'vue'
+import { TooltipContent, TooltipPortal, TooltipRoot, TooltipTrigger } from './reka'
+import RsIcon from './RsIcon.vue'
+
+const props = withDefaults(
+  defineProps<{
+    content?: string
+    side?: 'top' | 'right' | 'bottom' | 'left'
+    align?: 'start' | 'center' | 'end'
+    sideOffset?: number
+    disabled?: boolean
+    /** 单行展示并按内容撑开宽度（适合集合名等标识符） */
+    nowrap?: boolean
+    /**
+     * 业界表单帮助模式：标签后跟小图标，仅图标悬停出提示
+     *（对齐 Ant Design Form.Item `tooltip` / Element Plus 问号说明）。
+     */
+    icon?: boolean
+    /** 后缀图标名，默认 info（问号/说明圆标；对齐表单帮助惯用） */
+    iconName?: string
+  }>(),
+  {
+    side: 'top',
+    align: 'center',
+    sideOffset: 6,
+    disabled: false,
+    nowrap: false,
+    icon: false,
+    iconName: 'info',
+  },
+)
+
+const slots = useSlots()
+const hasLabelSlot = computed(() => Boolean(slots.default))
+const iconAriaLabel = computed(() => props.content?.trim() || 'Help')
+</script>
+
+<template>
+  <TooltipRoot :disabled="disabled">
+    <template v-if="icon">
+      <span class="rs-tooltip__with-icon">
+        <span v-if="hasLabelSlot" class="rs-tooltip__label">
+          <slot />
+        </span>
+        <TooltipTrigger as-child>
+          <button
+            type="button"
+            class="rs-tooltip__icon-trigger"
+            :aria-label="iconAriaLabel"
+          >
+            <RsIcon :name="iconName" :size="12" />
+          </button>
+        </TooltipTrigger>
+      </span>
+    </template>
+    <TooltipTrigger v-else as-child>
+      <slot />
+    </TooltipTrigger>
+
+    <TooltipPortal>
+      <TooltipContent
+        class="rs-tooltip__content"
+        :class="{ 'rs-tooltip__content--nowrap': nowrap }"
+        :side="side"
+        :align="align"
+        :side-offset="sideOffset"
+      >
+        <slot name="content">
+          {{ content }}
+        </slot>
+      </TooltipContent>
+    </TooltipPortal>
+  </TooltipRoot>
+</template>
+
+<style>
+.rs-tooltip__with-icon {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  max-width: 100%;
+  vertical-align: baseline;
+}
+
+.rs-tooltip__label {
+  display: inline-flex;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.rs-tooltip__icon-trigger {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--rs-muted);
+  cursor: help;
+  line-height: 0;
+  border-radius: var(--rs-radius-full);
+}
+
+.rs-tooltip__icon-trigger:hover,
+.rs-tooltip__icon-trigger:focus-visible {
+  color: var(--rs-text);
+}
+
+.rs-tooltip__icon-trigger:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
+}
+
+/* 提到 modal 之上：Dialog 内悬浮时否则会被遮挡（portal 挂 body） */
+.rs-tooltip__content {
+  z-index: calc(var(--rs-z-modal) + 2);
+  width: max-content;
+  max-width: min(20rem, 90vw);
+  padding: 0.375rem 0.625rem;
+  border-radius: var(--rs-radius-sm);
+  border: 1px solid var(--rs-border);
+  background: var(--rs-surface-elevated);
+  color: var(--rs-text);
+  font-size: var(--rs-font-size-xs);
+  line-height: var(--rs-line-height-tight);
+  box-shadow: var(--rs-shadow-sm);
+  overflow: hidden;
+  overflow-wrap: break-word;
+}
+
+[data-reka-popper-content-wrapper]:has(> .rs-tooltip__content) {
+  z-index: calc(var(--rs-z-modal) + 2);
+}
+
+.rs-tooltip__content--nowrap {
+  max-width: min(48rem, 90vw);
+  white-space: nowrap;
+}
+</style>

package/src/components/RsTooltipProvider.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { TooltipProvider } from './reka'
+
+withDefaults(
+  defineProps<{
+    delayDuration?: number
+    skipDelayDuration?: number
+  }>(),
+  {
+    delayDuration: 300,
+    skipDelayDuration: 0,
+  },
+)
+</script>
+
+<template>
+  <TooltipProvider :delay-duration="delayDuration" :skip-delay-duration="skipDelayDuration">
+    <slot />
+  </TooltipProvider>
+</template>