niuma-ui 1.0.0

package/src/components/date-picker-utils.ts

@@ -0,0 +1,284 @@
+import {
+  dayjs,
+  parseRsDateTimeDayjs,
+  parseRsDayjs,
+  RS_DATE_FORMAT,
+  RS_DATETIME_FORMAT,
+  RS_TIME_MINUTE_FORMAT,
+  RS_TIME_SECONDS_FORMAT,
+} from '../lib/rs-dayjs'
+
+export interface RsParsedDate {
+  year: number
+  month: number
+  day: number
+}
+
+export interface RsParsedDateTime extends RsParsedDate {
+  hour: number
+  minute: number
+  second: number
+}
+
+export interface RsDateRangeValue {
+  start?: string
+  end?: string
+}
+
+export interface RsCalendarCell extends RsParsedDate {
+  inCurrentMonth: boolean
+}
+
+export const EMPTY_DATE_RANGE: RsDateRangeValue = {}
+
+export function parseDateValue(value?: string): RsParsedDate | null {
+  const parsed = parseRsDayjs(value)
+  if (!parsed) return null
+  return {
+    year: parsed.year(),
+    month: parsed.month() + 1,
+    day: parsed.date(),
+  }
+}
+
+export function parseDateTimeValue(value?: string): RsParsedDateTime | null {
+  const parsed = parseRsDateTimeDayjs(value)
+  if (!parsed) return null
+  return {
+    year: parsed.year(),
+    month: parsed.month() + 1,
+    day: parsed.date(),
+    hour: parsed.hour(),
+    minute: parsed.minute(),
+    second: parsed.second(),
+  }
+}
+
+export function formatDateValue(value?: string): string {
+  const parsed = parseRsDayjs(value)
+  return parsed ? parsed.format(RS_DATE_FORMAT) : (value ?? '')
+}
+
+export function formatDateParts(date: RsParsedDate): string {
+  return dayjs()
+    .year(date.year)
+    .month(date.month - 1)
+    .date(date.day)
+    .format(RS_DATE_FORMAT)
+}
+
+export function formatDateTimeValue(value?: string): string {
+  const parsed = parseRsDateTimeDayjs(value)
+  return parsed ? parsed.format(RS_DATETIME_FORMAT) : (value ?? '')
+}
+
+export function formatDateTimeParts(
+  date: RsParsedDate,
+  time: string,
+  withSeconds = true,
+): string | null {
+  const dateText = formatDateParts(date)
+  const timeFormat = withSeconds ? RS_TIME_SECONDS_FORMAT : RS_TIME_MINUTE_FORMAT
+  const parsed = dayjs(`${dateText} ${time}`, `${RS_DATE_FORMAT} ${timeFormat}`, true)
+  if (!parsed.isValid()) return null
+  return parsed.format(RS_DATETIME_FORMAT)
+}
+
+export function extractTimeFromDateTime(value?: string, withSeconds = true): string {
+  const parsed = parseRsDateTimeDayjs(value)
+  if (!parsed) return withSeconds ? '00:00:00' : '00:00'
+  return parsed.format(withSeconds ? RS_TIME_SECONDS_FORMAT : RS_TIME_MINUTE_FORMAT)
+}
+
+export function isDateRangeOrdered(range: RsDateRangeValue): boolean {
+  if (!range.start || !range.end) return true
+  const start = parseRsDateTimeDayjs(range.start) ?? parseRsDayjs(range.start)
+  const end = parseRsDateTimeDayjs(range.end) ?? parseRsDayjs(range.end)
+  if (!start || !end) return range.start <= range.end
+  return start.isSame(end) || start.isBefore(end)
+}
+
+export const isDateTimeRangeOrdered = isDateRangeOrdered
+
+export function formatDateRangeDisplay(
+  range: RsDateRangeValue,
+  options?: { separator?: string; datetime?: boolean },
+): string {
+  const separator = options?.separator ?? ' ~ '
+  const format = options?.datetime ? formatDateTimeDisplay : formatDateDisplay
+  const start = range.start ? format(range.start) : ''
+  const end = range.end ? format(range.end) : ''
+  if (start && end) return `${start}${separator}${end}`
+  return start || end
+}
+
+export function formatLocalDate(date: Date): string {
+  return dayjs(date).format(RS_DATE_FORMAT)
+}
+
+export function formatDateDisplay(value?: string): string {
+  return formatDateValue(value)
+}
+
+export function formatDateTimeDisplay(value?: string): string {
+  return formatDateTimeValue(value)
+}
+
+export function formatDateRangeLabel(range: RsDateRangeValue, separator = ' ~ '): string {
+  return formatDateRangeDisplay(range, { separator })
+}
+
+export function formatDateTimeRangeLabel(range: RsDateRangeValue, separator = ' ~ '): string {
+  return formatDateRangeDisplay(range, { separator, datetime: true })
+}
+
+export function isDateBetween(value: string, start?: string, end?: string): boolean {
+  if (!start || !end) return false
+  const current = parseRsDayjs(value)
+  const from = parseRsDayjs(start)
+  const to = parseRsDayjs(end)
+  if (!current || !from || !to) return false
+  const min = from.isBefore(to) ? from : to
+  const max = from.isBefore(to) ? to : from
+  return (current.isSame(min) || current.isAfter(min)) && (current.isSame(max) || current.isBefore(max))
+}
+
+export function getTodayDate(): RsParsedDate {
+  const today = dayjs()
+  return {
+    year: today.year(),
+    month: today.month() + 1,
+    day: today.date(),
+  }
+}
+
+export function formatTimeFromDateTimeParts(
+  value: RsParsedDateTime,
+  withSeconds = true,
+): string {
+  const hour = String(value.hour).padStart(2, '0')
+  const minute = String(value.minute).padStart(2, '0')
+  if (!withSeconds) return `${hour}:${minute}`
+  const second = String(value.second).padStart(2, '0')
+  return `${hour}:${minute}:${second}`
+}
+
+export function getNowDateTime(): RsParsedDateTime {
+  const now = dayjs()
+  return {
+    year: now.year(),
+    month: now.month() + 1,
+    day: now.date(),
+    hour: now.hour(),
+    minute: now.minute(),
+    second: now.second(),
+  }
+}
+
+export function getNextMonth(year: number, month: number): Pick<RsParsedDate, 'year' | 'month'> {
+  const next = dayjs().year(year).month(month - 1).add(1, 'month')
+  return { year: next.year(), month: next.month() + 1 }
+}
+
+export function getDaysInMonth(year: number, month: number): number {
+  return dayjs().year(year).month(month - 1).daysInMonth()
+}
+
+export function dateToNumber(year: number, month: number, day: number): number {
+  return year * 10000 + month * 100 + day
+}
+
+export function parseDateToNumber(value: string): number | null {
+  const parsed = parseDateValue(value)
+  if (!parsed) return null
+  return dateToNumber(parsed.year, parsed.month, parsed.day)
+}
+
+export function compareDates(a: RsParsedDate, b: RsParsedDate): number {
+  return dateToNumber(a.year, a.month, a.day) - dateToNumber(b.year, b.month, b.day)
+}
+
+export function isSameDate(a: RsParsedDate, b: RsParsedDate): boolean {
+  return a.year === b.year && a.month === b.month && a.day === b.day
+}
+
+export function isDateBetweenParsed(
+  cell: RsParsedDate,
+  start: RsParsedDate,
+  end: RsParsedDate,
+): boolean {
+  const value = dateToNumber(cell.year, cell.month, cell.day)
+  const from = dateToNumber(start.year, start.month, start.day)
+  const to = dateToNumber(end.year, end.month, end.day)
+  return value >= Math.min(from, to) && value <= Math.max(from, to)
+}
+
+export function isDateWithinBounds(
+  year: number,
+  month: number,
+  day: number,
+  options: { minDate?: string; maxDate?: string } = {},
+): boolean {
+  const candidate = dateToNumber(year, month, day)
+
+  if (options.minDate) {
+    const min = parseDateToNumber(options.minDate)
+    if (min !== null && candidate < min) return false
+  }
+
+  if (options.maxDate) {
+    const max = parseDateToNumber(options.maxDate)
+    if (max !== null && candidate > max) return false
+  }
+
+  return true
+}
+
+export function isDateRangeEmpty(value: RsDateRangeValue): boolean {
+  return !value.start && !value.end
+}
+
+export function buildCalendarGrid(
+  year: number,
+  month: number,
+  weekStartsOn = 1,
+): RsCalendarCell[] {
+  const daysInMonth = getDaysInMonth(year, month)
+  const firstWeekday = dayjs().year(year).month(month - 1).date(1).day()
+  const leading = (firstWeekday - weekStartsOn + 7) % 7
+
+  const prevMonth = month === 1 ? 12 : month - 1
+  const prevYear = month === 1 ? year - 1 : year
+  const daysInPrevMonth = getDaysInMonth(prevYear, prevMonth)
+
+  const cells: RsCalendarCell[] = []
+
+  for (let index = leading; index > 0; index -= 1) {
+    cells.push({
+      year: prevYear,
+      month: prevMonth,
+      day: daysInPrevMonth - index + 1,
+      inCurrentMonth: false,
+    })
+  }
+
+  for (let day = 1; day <= daysInMonth; day += 1) {
+    cells.push({ year, month, day, inCurrentMonth: true })
+  }
+
+  const nextMonth = month === 12 ? 1 : month + 1
+  const nextYear = month === 12 ? year + 1 : year
+  let nextDay = 1
+
+  while (cells.length < 42) {
+    cells.push({
+      year: nextYear,
+      month: nextMonth,
+      day: nextDay,
+      inCurrentMonth: false,
+    })
+    nextDay += 1
+  }
+
+  return cells
+}

package/src/components/date-range-validation.ts

@@ -0,0 +1,29 @@
+import type { RsDateRangeValue } from './date-picker-utils'
+import { isDateRangeOrdered } from './date-picker-utils'
+
+export interface RsDateRangeValidationRules {
+  required?: boolean
+  ordered?: boolean
+}
+
+export type RsDateRangeValidationError = 'required' | 'order'
+
+export interface RsDateRangeValidationResult {
+  valid: boolean
+  error?: RsDateRangeValidationError
+}
+
+export type RsDateTimeRangeValidationRules = RsDateRangeValidationRules
+export type RsDateTimeRangeValidationError = RsDateRangeValidationError
+export type RsDateTimeRangeValidationResult = RsDateRangeValidationResult
+
+export function validateDateRangeValue(
+  value: RsDateRangeValue,
+  rules: RsDateRangeValidationRules = {},
+): RsDateRangeValidationResult {
+  if (rules.required && (!value.start || !value.end)) return { valid: false, error: 'required' }
+  if (rules.ordered !== false && !isDateRangeOrdered(value)) return { valid: false, error: 'order' }
+  return { valid: true }
+}
+
+export const validateDateTimeRangeValue = validateDateRangeValue

package/src/components/date-validation.ts

@@ -0,0 +1,38 @@
+import { parseRsDateTimeDayjs, parseRsDayjs } from '../lib/rs-dayjs'
+
+export interface RsDateValidationRules {
+  required?: boolean
+  min?: string
+  max?: string
+}
+
+export type RsDateValidationError = 'required' | 'min' | 'max' | 'format'
+
+export interface RsDateValidationResult {
+  valid: boolean
+  error?: RsDateValidationError
+}
+
+export type RsDateTimeValidationRules = RsDateValidationRules
+export type RsDateTimeValidationError = RsDateValidationError
+export type RsDateTimeValidationResult = RsDateValidationResult
+
+export function validateDateValue(value: string, rules: RsDateValidationRules = {}): RsDateValidationResult {
+  if (!value) return rules.required ? { valid: false, error: 'required' } : { valid: true }
+  const parsed = parseRsDayjs(value)
+  if (!parsed) return { valid: false, error: 'format' }
+  const canonical = parsed.format('YYYY-MM-DD')
+  if (rules.min && canonical < rules.min) return { valid: false, error: 'min' }
+  if (rules.max && canonical > rules.max) return { valid: false, error: 'max' }
+  return { valid: true }
+}
+
+export function validateDateTimeValue(value: string, rules: RsDateTimeValidationRules = {}): RsDateTimeValidationResult {
+  if (!value) return rules.required ? { valid: false, error: 'required' } : { valid: true }
+  const parsed = parseRsDateTimeDayjs(value)
+  if (!parsed) return { valid: false, error: 'format' }
+  const canonical = parsed.format('YYYY-MM-DD HH:mm:ss')
+  if (rules.min && canonical < rules.min) return { valid: false, error: 'min' }
+  if (rules.max && canonical > rules.max) return { valid: false, error: 'max' }
+  return { valid: true }
+}

package/src/components/dialog-viewport.ts

@@ -0,0 +1,48 @@
+const viewportGap = 16
+
+export interface RsDialogViewportInsets {
+  top: number
+  right: number
+  bottom: number
+  left: number
+}
+
+function parseCssPx(value: string, fallback: number): number {
+  const trimmed = value.trim()
+  if (!trimmed) return fallback
+  const num = Number.parseFloat(trimmed)
+  if (Number.isNaN(num)) return fallback
+  if (trimmed.endsWith('rem')) {
+    const rootPx = Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 16
+    return num * rootPx
+  }
+  return num
+}
+
+/** 读取对话框可用视口 inset（px），未设置时回退 viewportGap。 */
+export function readDialogViewportInsets(): RsDialogViewportInsets {
+  if (typeof document === 'undefined') {
+    return { top: viewportGap, right: viewportGap, bottom: viewportGap, left: viewportGap }
+  }
+  const root = getComputedStyle(document.documentElement)
+  const x = parseCssPx(root.getPropertyValue('--rs-dialog-inset-x'), viewportGap)
+  return {
+    top: parseCssPx(root.getPropertyValue('--rs-dialog-inset-top'), viewportGap),
+    right: x,
+    bottom: parseCssPx(root.getPropertyValue('--rs-dialog-inset-bottom'), viewportGap),
+    left: x,
+  }
+}
+
+export function dialogViewportSize(): { width: number; height: number } {
+  if (typeof window === 'undefined') {
+    return { width: 800, height: 600 }
+  }
+  const insets = readDialogViewportInsets()
+  return {
+    width: window.innerWidth - insets.left - insets.right,
+    height: window.innerHeight - insets.top - insets.bottom,
+  }
+}
+
+export { viewportGap }

package/src/components/dialog-window.ts

@@ -0,0 +1,253 @@
+import { computed, onBeforeUnmount, ref, watch, type Ref } from 'vue'
+import { dialogViewportSize, readDialogViewportInsets } from './dialog-viewport'
+
+export type RsDialogWidth = 'sm' | 'md' | 'lg'
+export type RsDialogResizeHandle = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw'
+
+export interface RsDialogBounds {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+const widthMap: Record<RsDialogWidth, number> = {
+  sm: 384,
+  md: 448,
+  lg: 512,
+}
+
+const defaultWidthRatio = 0.8
+const defaultHeightRatio = 0.75
+const minWidth = 320
+const minHeight = 240
+
+export function useRsDialogWindow(options: {
+  open: Ref<boolean>
+  widthPreset: Ref<RsDialogWidth>
+  draggable: Ref<boolean>
+  resizable: Ref<boolean>
+  compact?: Ref<boolean>
+  /** 全屏/还原时是否播放 left/top/width/height 过渡（含编辑器时建议 false） */
+  boundsTransition?: Ref<boolean>
+}) {
+  const isFullscreen = ref(false)
+  const boundsTransitionEnabled = ref(false)
+  const bounds = ref<RsDialogBounds>({ x: 0, y: 0, width: widthMap.md, height: minHeight })
+  const restoreBounds = ref<RsDialogBounds | null>(null)
+  const resizeHandles: RsDialogResizeHandle[] = ['n', 's', 'e', 'w', 'ne', 'nw', 'se', 'sw']
+
+  let boundsTransitionTimer: ReturnType<typeof setTimeout> | null = null
+  let cachedInsets = readDialogViewportInsets()
+
+  let dragState: { startX: number; startY: number; origin: RsDialogBounds } | null = null
+  let resizeState: {
+    handle: RsDialogResizeHandle
+    startX: number
+    startY: number
+    origin: RsDialogBounds
+  } | null = null
+
+  function defaultWindowSize(): Pick<RsDialogBounds, 'width' | 'height'> {
+    const { width: maxW, height: maxH } = dialogViewportSize()
+    return {
+      width: Math.min(maxW, Math.max(minWidth, Math.round(maxW * defaultWidthRatio))),
+      height: Math.min(maxH, Math.max(minHeight, Math.round(maxH * defaultHeightRatio))),
+    }
+  }
+
+  function refreshCachedInsets(): void {
+    cachedInsets = readDialogViewportInsets()
+  }
+
+  function clampBounds(next: RsDialogBounds): RsDialogBounds {
+    const insets = cachedInsets
+    const maxW = window.innerWidth - insets.left - insets.right
+    const maxH = window.innerHeight - insets.top - insets.bottom
+    const width = Math.min(maxW, Math.max(minWidth, next.width))
+    const height = Math.min(maxH, Math.max(minHeight, next.height))
+    return {
+      x: Math.min(window.innerWidth - width - insets.right, Math.max(insets.left, next.x)),
+      y: Math.min(window.innerHeight - height - insets.bottom, Math.max(insets.top, next.y)),
+      width,
+      height,
+    }
+  }
+
+  function resetOnOpen(): void {
+    isFullscreen.value = false
+    restoreBounds.value = null
+    if (options.compact?.value) {
+      bounds.value = { x: bounds.value.x, y: bounds.value.y, width: widthMap[options.widthPreset.value], height: 0 }
+      return
+    }
+    refreshCachedInsets()
+    const insets = cachedInsets
+    const { width, height } = defaultWindowSize()
+    const availableH = window.innerHeight - insets.top - insets.bottom
+    bounds.value = clampBounds({
+      x: insets.left + (window.innerWidth - insets.left - insets.right - width) / 2,
+      y: insets.top + (availableH - height) / 2,
+      width,
+      height,
+    })
+  }
+
+  watch(
+    options.open,
+    (value) => {
+      if (value) resetOnOpen()
+      else stopInteractions()
+    },
+    // 弹出等场景：组件挂载时 open 已为 true，需立即居中，不能只等 false→true
+    { immediate: true },
+  )
+
+  const dialogStyle = computed(() => {
+    const insets = cachedInsets
+    if (isFullscreen.value) {
+      return {
+        left: `${insets.left}px`,
+        top: `${insets.top}px`,
+        width: `calc(100vw - ${insets.left + insets.right}px)`,
+        height: `calc(100vh - ${insets.top + insets.bottom}px)`,
+        transform: 'none',
+      }
+    }
+    if (options.compact?.value) {
+      const width = widthMap[options.widthPreset.value]
+      return {
+        left: '50%',
+        top: `calc(${insets.top}px + (100vh - ${insets.top + insets.bottom}px) / 2)`,
+        width: `${width}px`,
+        maxWidth: `calc(100vw - ${insets.left + insets.right}px)`,
+        height: 'auto',
+        transform: 'translate(-50%, -50%)',
+      }
+    }
+    const b = bounds.value
+    return {
+      left: `${b.x}px`,
+      top: `${b.y}px`,
+      width: `${b.width}px`,
+      height: `${b.height}px`,
+      transform: 'none',
+    }
+  })
+
+  function clearBoundsTransitionTimer(): void {
+    if (!boundsTransitionTimer) return
+    clearTimeout(boundsTransitionTimer)
+    boundsTransitionTimer = null
+  }
+
+  function enableBoundsTransition(): void {
+    boundsTransitionEnabled.value = true
+    clearBoundsTransitionTimer()
+    boundsTransitionTimer = setTimeout(() => {
+      boundsTransitionEnabled.value = false
+      boundsTransitionTimer = null
+    }, 280)
+  }
+
+  function toggleFullscreen(): void {
+    refreshCachedInsets()
+    if (options.boundsTransition?.value) {
+      enableBoundsTransition()
+    }
+    if (isFullscreen.value) {
+      isFullscreen.value = false
+      bounds.value = restoreBounds.value ? { ...restoreBounds.value } : bounds.value
+      restoreBounds.value = null
+      return
+    }
+    restoreBounds.value = { ...bounds.value }
+    isFullscreen.value = true
+  }
+
+  function onPointerMove(event: PointerEvent): void {
+    if (dragState) {
+      const dx = event.clientX - dragState.startX
+      const dy = event.clientY - dragState.startY
+      bounds.value = clampBounds({ ...dragState.origin, x: dragState.origin.x + dx, y: dragState.origin.y + dy })
+      return
+    }
+
+    if (!resizeState) return
+    const dx = event.clientX - resizeState.startX
+    const dy = event.clientY - resizeState.startY
+    const next = { ...resizeState.origin }
+    if (resizeState.handle.includes('e')) next.width = resizeState.origin.width + dx
+    if (resizeState.handle.includes('w')) {
+      next.width = resizeState.origin.width - dx
+      next.x = resizeState.origin.x + dx
+    }
+    if (resizeState.handle.includes('s')) next.height = resizeState.origin.height + dy
+    if (resizeState.handle.includes('n')) {
+      next.height = resizeState.origin.height - dy
+      next.y = resizeState.origin.y + dy
+    }
+    bounds.value = clampBounds(next)
+  }
+
+  function stopInteractions(): void {
+    dragState = null
+    resizeState = null
+    window.removeEventListener('pointermove', onPointerMove)
+    window.removeEventListener('pointerup', stopInteractions)
+    document.body.style.userSelect = ''
+    document.body.style.cursor = ''
+  }
+
+  function startInteraction(cursor: string): void {
+    boundsTransitionEnabled.value = false
+    clearBoundsTransitionTimer()
+    refreshCachedInsets()
+    window.addEventListener('pointermove', onPointerMove)
+    window.addEventListener('pointerup', stopInteractions)
+    document.body.style.userSelect = 'none'
+    document.body.style.cursor = cursor
+  }
+
+  function onHeaderPointerDown(event: PointerEvent): void {
+    if (!options.draggable.value || isFullscreen.value) return
+    const target = event.target as HTMLElement
+    if (target.closest('button,a,input,textarea,select')) return
+    event.preventDefault()
+    dragState = { startX: event.clientX, startY: event.clientY, origin: { ...bounds.value } }
+    startInteraction('grabbing')
+  }
+
+  const resizeCursor: Record<RsDialogResizeHandle, string> = {
+    n: 'ns-resize',
+    s: 'ns-resize',
+    e: 'ew-resize',
+    w: 'ew-resize',
+    ne: 'nesw-resize',
+    sw: 'nesw-resize',
+    nw: 'nwse-resize',
+    se: 'nwse-resize',
+  }
+
+  function onResizePointerDown(handle: RsDialogResizeHandle, event: PointerEvent): void {
+    if (!options.resizable.value || isFullscreen.value) return
+    event.preventDefault()
+    resizeState = { handle, startX: event.clientX, startY: event.clientY, origin: { ...bounds.value } }
+    startInteraction(resizeCursor[handle])
+  }
+
+  onBeforeUnmount(() => {
+    stopInteractions()
+    clearBoundsTransitionTimer()
+  })
+
+  return {
+    isFullscreen,
+    boundsTransitionEnabled,
+    dialogStyle,
+    resizeHandles,
+    toggleFullscreen,
+    onHeaderPointerDown,
+    onResizePointerDown,
+  }
+}

package/src/components/dropdown-utils.ts

@@ -0,0 +1,31 @@
+export interface RsDropdownItem {
+  label: string
+  value: string
+  icon?: string
+  disabled?: boolean
+}
+
+export interface RsDropdownItemGroup {
+  label: string
+  options: RsDropdownItem[]
+}
+
+export type RsDropdownItems = RsDropdownItem[] | RsDropdownItemGroup[]
+
+export function isDropdownItemGroup(
+  item: RsDropdownItem | RsDropdownItemGroup,
+): item is RsDropdownItemGroup {
+  return 'options' in item && Array.isArray(item.options)
+}
+
+export function flattenDropdownItems(items: RsDropdownItems): RsDropdownItem[] {
+  const result: RsDropdownItem[] = []
+  for (const item of items) {
+    if (isDropdownItemGroup(item)) {
+      result.push(...item.options)
+    } else {
+      result.push(item)
+    }
+  }
+  return result
+}