niuma-ui 1.0.0

package/src/components/RsPagination.vue

@@ -0,0 +1,184 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import RsButton from './RsButton.vue'
+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'
+
+export type RsPaginationSize = 'sm' | 'md'
+
+const page = defineModel<number>('page', { default: 1 })
+const pageSize = defineModel<number>('pageSize', { default: 20 })
+
+const props = withDefaults(
+  defineProps<{
+    total: number
+    siblingCount?: number
+    showSummary?: boolean
+    showPageSize?: boolean
+    showQuickJumper?: boolean
+    pageSizeOptions?: readonly number[]
+    disabled?: boolean
+    size?: RsPaginationSize
+  }>(),
+  {
+    siblingCount: 1,
+    showSummary: true,
+    showPageSize: false,
+    showQuickJumper: false,
+    pageSizeOptions: () => DEFAULT_PAGE_SIZE_OPTIONS,
+    disabled: false,
+    size: 'md',
+  },
+)
+
+const { t } = useRsI18n()
+const jumpPageInput = ref(String(page.value))
+const pageCount = computed(() => getPageCount(props.total, pageSize.value))
+const range = computed(() => getPaginationRange(page.value, pageCount.value, props.siblingCount))
+const summaryText = computed(() => t('pagination.summary', 'Total {total} items').replace('{total}', String(props.total)))
+const pageSizeSelectValue = computed({
+  get: () => String(pageSize.value),
+  set: (value: string) => {
+    pageSize.value = Number(value)
+  },
+})
+const pageSizeSelectOptions = computed(() =>
+  props.pageSizeOptions.map((option) => ({
+    label: `${option} / ${t('pagination.page')}`,
+    value: String(option),
+  })),
+)
+const showJumper = computed(() => props.showQuickJumper && pageCount.value > 1)
+
+watch(pageCount, (count) => {
+  page.value = clampPage(page.value, count)
+})
+
+watch(page, (value) => {
+  jumpPageInput.value = String(value)
+})
+
+function go(next: number): void {
+  if (props.disabled) return
+  page.value = clampPage(next, pageCount.value)
+}
+
+function confirmJump(): void {
+  if (props.disabled) return
+  const parsed = Number.parseInt(jumpPageInput.value.trim(), 10)
+  if (Number.isNaN(parsed)) {
+    jumpPageInput.value = String(page.value)
+    return
+  }
+  go(parsed)
+  jumpPageInput.value = String(page.value)
+}
+</script>
+
+<template>
+  <nav class="rs-pagination" :class="`rs-pagination--${size}`" :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)">
+        {{ 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"
+          :disabled="disabled"
+          @click="go(item)"
+        >
+          {{ item }}
+        </RsButton>
+      </template>
+      <RsButton variant="ghost" size="sm" :disabled="disabled || page >= pageCount" @click="go(page + 1)">
+        {{ t('pagination.next') }}
+      </RsButton>
+    </div>
+    <div v-if="showJumper" class="rs-pagination__jumper">
+      <span class="rs-pagination__jumper-label">{{ t('pagination.jumpTo') }}</span>
+      <div class="rs-pagination__jumper-input">
+        <RsInput
+          v-model="jumpPageInput"
+          size="sm"
+          :disabled="disabled"
+          @keydown.enter="confirmJump"
+        />
+      </div>
+      <span v-if="t('pagination.jumpPageSuffix')" class="rs-pagination__jumper-suffix">
+        {{ t('pagination.jumpPageSuffix') }}
+      </span>
+      <RsButton
+        variant="ghost"
+        size="sm"
+        class="rs-pagination__jumper-btn"
+        :disabled="disabled"
+        @click="confirmJump"
+      >
+        {{ t('pagination.jumpConfirm') }}
+      </RsButton>
+    </div>
+    <div v-if="showPageSize" class="rs-pagination__size">
+      <RsSelect
+        v-model="pageSizeSelectValue"
+        :options="pageSizeSelectOptions"
+        size="sm"
+        :disabled="disabled"
+        :placeholder="t('select.placeholder')"
+      />
+    </div>
+  </nav>
+</template>
+
+<style scoped>
+.rs-pagination {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--rs-space-sm);
+  color: var(--rs-muted);
+  font-size: var(--rs-font-size-sm);
+}
+.rs-pagination__buttons {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rs-space-xs);
+}
+.rs-pagination__ellipsis {
+  padding: 0 var(--rs-space-xs);
+  font-size: var(--rs-font-size-xs);
+  line-height: var(--rs-control-height-sm);
+}
+.rs-pagination__jumper {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rs-space-xs);
+}
+.rs-pagination__jumper-label,
+.rs-pagination__jumper-suffix {
+  flex-shrink: 0;
+  color: var(--rs-muted);
+  font-size: var(--rs-font-size-xs);
+  line-height: var(--rs-line-height-tight);
+}
+.rs-pagination__jumper-input {
+  width: 2.75rem;
+}
+.rs-pagination__jumper-input :deep(.rs-input-field) {
+  width: 100%;
+}
+.rs-pagination__jumper-btn {
+  flex-shrink: 0;
+}
+.rs-pagination__size {
+  width: 7.25rem;
+  min-width: 7.25rem;
+}
+</style>

package/src/components/RsPopover.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from './reka'
+import type { RsPopoverAlign, RsPopoverSide, RsPopoverWidth } from './popover-utils'
+
+const open = defineModel<boolean>('open', { default: false })
+
+const props = withDefaults(
+  defineProps<{
+    side?: RsPopoverSide
+    align?: RsPopoverAlign
+    sideOffset?: number
+    modal?: boolean
+    width?: RsPopoverWidth
+    lazyMount?: boolean
+    forceMount?: boolean
+  }>(),
+  {
+    side: 'bottom',
+    align: 'start',
+    sideOffset: 6,
+    modal: false,
+    width: 'md',
+    lazyMount: true,
+    forceMount: false,
+  },
+)
+
+const contentForceMount = computed(() => props.forceMount || !props.lazyMount)
+const portalMounted = computed(() => props.forceMount || !props.lazyMount || open.value)
+</script>
+
+<template>
+  <PopoverRoot v-model:open="open" :modal="modal">
+    <PopoverTrigger as-child>
+      <slot />
+    </PopoverTrigger>
+    <PopoverPortal v-if="portalMounted">
+      <PopoverContent
+        class="rs-popover__content"
+        :class="`rs-popover__content--${width}`"
+        :side="side"
+        :align="align"
+        :side-offset="sideOffset"
+        :force-mount="contentForceMount"
+      >
+        <slot name="content" />
+      </PopoverContent>
+    </PopoverPortal>
+  </PopoverRoot>
+</template>
+
+<style>
+.rs-popover__content {
+  z-index: var(--rs-z-dropdown);
+  padding: 0.75rem;
+  border-radius: var(--rs-radius-sm);
+  border: 1px solid var(--rs-border);
+  background: var(--rs-surface-elevated);
+  box-shadow: var(--rs-shadow);
+  outline: none;
+  overflow: visible;
+}
+.rs-popover__content--sm {
+  width: 12rem;
+}
+.rs-popover__content--md {
+  width: 16rem;
+}
+.rs-popover__content--lg {
+  width: 22rem;
+}
+.rs-popover__content--auto {
+  width: auto;
+  min-width: 10rem;
+}
+</style>

package/src/components/RsProseEditor.vue

@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref, shallowRef, watch } from 'vue'
+import { defaultKeymap, history, historyKeymap } from '@codemirror/commands'
+import { EditorState } from '@codemirror/state'
+import { EditorView, drawSelection, dropCursor, keymap, placeholder } from '@codemirror/view'
+
+const model = defineModel<string>({ default: '' })
+
+const props = withDefaults(
+  defineProps<{
+    readonly?: boolean
+    placeholder?: string
+    minHeight?: string
+  }>(),
+  {
+    readonly: false,
+    placeholder: '',
+    minHeight: '12rem',
+  },
+)
+
+const emit = defineEmits<{
+  selectionChange: [{ start: number; end: number }]
+}>()
+
+const rootEl = ref<HTMLElement | null>(null)
+const view = shallowRef<EditorView | null>(null)
+let unmounted = false
+
+function buildExtensions() {
+  const exts = [
+    history(),
+    drawSelection(),
+    dropCursor(),
+    keymap.of([...defaultKeymap, ...historyKeymap]),
+    EditorView.lineWrapping,
+    EditorView.updateListener.of((update) => {
+      if (update.docChanged && !props.readonly) {
+        const next = update.state.doc.toString()
+        if (next !== model.value) {
+          model.value = next
+        }
+      }
+      if (update.selectionSet) {
+        const { from, to } = update.state.selection.main
+        emit('selectionChange', { start: from, end: to })
+      }
+    }),
+    EditorView.editable.of(!props.readonly),
+    EditorView.theme({
+      '&': { height: '100%', backgroundColor: 'transparent' },
+      '.cm-scroller': {
+        fontFamily: "'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', Georgia, serif",
+        fontSize: '1.05rem',
+        lineHeight: '1.9',
+        letterSpacing: '0.02em',
+      },
+      '.cm-content': {
+        padding: '0.75rem 1rem',
+        caretColor: 'var(--rs-primary)',
+      },
+      '&.cm-focused': { outline: 'none' },
+      '.cm-cursor': { borderLeftColor: 'var(--rs-primary)' },
+      '.cm-selectionBackground, ::selection': {
+        backgroundColor: 'color-mix(in srgb, var(--rs-primary) 18%, transparent) !important',
+      },
+    }),
+  ]
+  if (props.placeholder) {
+    exts.push(placeholder(props.placeholder))
+  }
+  return exts
+}
+
+function initEditor() {
+  if (!rootEl.value || unmounted) return
+  view.value?.destroy()
+  const state = EditorState.create({
+    doc: model.value,
+    extensions: buildExtensions(),
+  })
+  view.value = new EditorView({ state, parent: rootEl.value })
+}
+
+function syncDocFromOutside(val: string) {
+  const v = view.value
+  if (!v) return
+  const cur = v.state.doc.toString()
+  if (cur === val) return
+  v.dispatch({ changes: { from: 0, to: v.state.doc.length, insert: val } })
+}
+
+function getSelection() {
+  const v = view.value
+  if (!v) return { start: 0, end: 0 }
+  const { from, to } = v.state.selection.main
+  return { start: from, end: to }
+}
+
+function focus() {
+  view.value?.focus()
+}
+
+defineExpose({ getSelection, focus, view })
+
+onMounted(() => {
+  unmounted = false
+  initEditor()
+})
+
+onUnmounted(() => {
+  unmounted = true
+  view.value?.destroy()
+  view.value = null
+})
+
+watch(
+  () => model.value,
+  (val) => syncDocFromOutside(val ?? ''),
+)
+
+watch(
+  () => props.readonly,
+  () => initEditor(),
+)
+</script>
+
+<template>
+  <div
+    class="rs-prose-editor"
+    :class="{ 'rs-prose-editor--readonly': readonly }"
+    :style="{ minHeight }"
+  >
+    <div ref="rootEl" class="rs-prose-editor__cm" />
+  </div>
+</template>
+
+<style scoped>
+.rs-prose-editor {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.rs-prose-editor__cm {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+
+.rs-prose-editor__cm :deep(.cm-editor) {
+  height: 100%;
+}
+
+.rs-prose-editor--readonly {
+  opacity: 0.72;
+}
+</style>

package/src/components/RsScrollbar.vue

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import { computed, useTemplateRef } from 'vue'
+import {
+  ScrollAreaCorner,
+  ScrollAreaRoot,
+  ScrollAreaScrollbar,
+  ScrollAreaThumb,
+  ScrollAreaViewport,
+} from './reka'
+import {
+  resolveScrollbarSize,
+  type RsScrollbarOrientation,
+  type RsScrollbarType,
+} from './scrollbar-utils'
+
+const props = withDefaults(
+  defineProps<{
+    type?: RsScrollbarType
+    scrollHideDelay?: number
+    orientation?: RsScrollbarOrientation
+    height?: string | number
+    maxHeight?: string | number
+    minHeight?: string | number
+  }>(),
+  {
+    type: 'hover',
+    scrollHideDelay: 600,
+    orientation: 'both',
+    height: '14rem',
+  },
+)
+
+const rootRef = useTemplateRef<InstanceType<typeof ScrollAreaRoot>>('rootRef')
+
+const rootStyle = computed(() => {
+  const style: Record<string, string> = {}
+  const height = resolveScrollbarSize(props.height)
+  const maxHeight = resolveScrollbarSize(props.maxHeight)
+  const minHeight = resolveScrollbarSize(props.minHeight)
+  if (height) style.height = height
+  if (maxHeight) style.maxHeight = maxHeight
+  if (minHeight) style.minHeight = minHeight
+  return Object.keys(style).length > 0 ? style : undefined
+})
+
+const showVertical = computed(
+  () => props.orientation === 'vertical' || props.orientation === 'both',
+)
+const showHorizontal = computed(
+  () => props.orientation === 'horizontal' || props.orientation === 'both',
+)
+
+defineExpose({
+  scrollTop: () => rootRef.value?.scrollTop(),
+  scrollTopLeft: () => rootRef.value?.scrollTopLeft(),
+  getViewport: () => rootRef.value?.viewport,
+})
+</script>
+
+<template>
+  <ScrollAreaRoot
+    ref="rootRef"
+    class="rs-scrollbar"
+    :type="type"
+    :scroll-hide-delay="scrollHideDelay"
+    :style="rootStyle"
+  >
+    <ScrollAreaViewport class="rs-scrollbar__viewport">
+      <div class="rs-scrollbar__content">
+        <slot />
+      </div>
+    </ScrollAreaViewport>
+
+    <ScrollAreaScrollbar
+      v-if="showVertical"
+      class="rs-scrollbar__bar rs-scrollbar__bar--vertical"
+      orientation="vertical"
+    >
+      <ScrollAreaThumb class="rs-scrollbar__thumb" />
+    </ScrollAreaScrollbar>
+
+    <ScrollAreaScrollbar
+      v-if="showHorizontal"
+      class="rs-scrollbar__bar rs-scrollbar__bar--horizontal"
+      orientation="horizontal"
+    >
+      <ScrollAreaThumb class="rs-scrollbar__thumb" />
+    </ScrollAreaScrollbar>
+
+    <ScrollAreaCorner v-if="showVertical && showHorizontal" class="rs-scrollbar__corner" />
+  </ScrollAreaRoot>
+</template>
+
+<style>
+.rs-scrollbar {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  border: 1px solid var(--rs-border);
+  border-radius: var(--rs-radius-sm);
+  background: var(--rs-surface);
+}
+
+.rs-scrollbar__viewport {
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+}
+
+/* Reka 注入的 Primitive div。
+   必须用 height:100% 而非 min-height:100%：
+   只有父元素拥有"明确高度"时，子元素的 min-height:100% 才能解析（CSS 规范）。
+   height:100% 让 Primitive 与 viewport 等高（= 明确高度），
+   超出内容通过 overflow:visible 溢出 → viewport(overflow:scroll) 正常滚动。 */
+.rs-scrollbar__viewport > div {
+  height: 100%;
+}
+
+/* rs-scrollbar__content 同理：height:100% = Primitive 的明确高度。
+   slot 内容若超出则溢出，滚动仍然工作；短内容时填满整个滚动区（空白可捕获右键）。 */
+.rs-scrollbar__content {
+  min-width: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.rs-scrollbar__bar {
+  user-select: none;
+  touch-action: none;
+  display: flex;
+  padding: var(--rs-scrollbar-padding);
+  background: transparent;
+  transition: background var(--rs-transition-fast);
+}
+
+.rs-scrollbar__bar[data-orientation='vertical'] {
+  width: var(--rs-scrollbar-size);
+}
+
+.rs-scrollbar__bar[data-orientation='horizontal'] {
+  flex-direction: column;
+  height: var(--rs-scrollbar-size);
+}
+
+.rs-scrollbar__bar:hover {
+  background: color-mix(in srgb, var(--rs-border-subtle) 80%, transparent);
+}
+
+.rs-scrollbar__thumb {
+  flex: 1;
+  border-radius: var(--rs-radius-full);
+  background: color-mix(in srgb, var(--rs-muted) 60%, transparent);
+  position: relative;
+  transition: background var(--rs-transition-fast);
+}
+
+.rs-scrollbar__thumb::before {
+  content: '';
+  position: absolute;
+  inset: -0.375rem;
+}
+
+.rs-scrollbar__thumb:hover {
+  background: color-mix(in srgb, var(--rs-primary) 40%, var(--rs-muted));
+}
+
+.rs-scrollbar__corner {
+  background: var(--rs-surface);
+}
+</style>