@aquiferre/ui-kit 0.3.0 → 0.4.0

package/components/DateTimePicker.vue

@@ -0,0 +1,563 @@
+<template>
+  <div ref="rootRef" class="relative" :data-testid="baseTestId">
+    <!-- Trigger -->
+    <div
+      ref="triggerRef"
+      class="input flex items-center gap-1 cursor-pointer select-none"
+      :class="[disabled ? 'opacity-60 cursor-not-allowed' : '']"
+      @click="toggle"
+    >
+      <span v-if="hasValue" class="flex-1 min-w-0 truncate text-input-text text-xs">{{ displayText }}</span>
+      <span v-else class="flex-1 min-w-0"></span>
+      <button
+        v-if="clearable && hasValue && !disabled"
+        type="button"
+        class="text-text-tertiary hover:text-text-primary text-xs px-1"
+        @click.stop="clear"
+        tabindex="-1"
+      >&#x2715;</button>
+      <svg class="w-3.5 h-3.5 text-text-tertiary flex-shrink-0" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
+        <rect x="2" y="3" width="12" height="11" rx="1.5" />
+        <path d="M2 6.5h12" />
+        <path d="M5 1.5v3M11 1.5v3" />
+      </svg>
+    </div>
+
+    <!-- Panel -->
+    <Teleport to="body">
+    <div
+      v-if="open"
+      class="fixed card shadow-lg p-3"
+      :style="panelStyle"
+      @mousedown.stop
+      @click.stop
+    >
+      <!-- Calendar mode -->
+      <div v-if="pickerStyle === 'calendar'">
+        <div class="flex items-center justify-between mb-2">
+          <div class="relative">
+            <button type="button" class="btn-sm btn-ghost text-xs font-semibold" @click="yearDropdownOpen = !yearDropdownOpen">
+              {{ viewYear }}年 &#x25BE;
+            </button>
+            <div
+              v-if="yearDropdownOpen"
+              class="absolute top-full left-0 mt-1 card shadow-lg z-30 p-2 min-w-[160px]"
+              @mousedown.prevent
+            >
+              <div class="flex items-center justify-between mb-1.5 px-1">
+                <button type="button" class="btn-icon text-text-secondary hover:text-text-primary" @click="decadeStart -= 10">&#x25C0;</button>
+                <span class="text-xs text-text-secondary">{{ decadeStart }}&mdash;{{ decadeStart + 9 }}</span>
+                <button type="button" class="btn-icon text-text-secondary hover:text-text-primary" @click="decadeStart += 10">&#x25B6;</button>
+              </div>
+              <div class="grid grid-cols-2 gap-1">
+                <button
+                  v-for="y in decadeYears" :key="y" type="button"
+                  class="px-2 py-1 text-xs rounded-md transition-colors"
+                  :class="y === viewYear ? 'bg-accent-primary text-white' : 'text-text-primary hover:bg-bg-hover'"
+                  @click="selectYear(y)"
+                >{{ y }}</button>
+              </div>
+            </div>
+          </div>
+          <div class="flex items-center gap-1">
+            <button type="button" class="btn-icon text-text-secondary hover:text-text-primary" @click="prevMonth">&#x25C0;</button>
+            <span class="text-xs font-semibold text-text-primary min-w-[3rem] text-center">{{ viewMonth }}月</span>
+            <button type="button" class="btn-icon text-text-secondary hover:text-text-primary" @click="nextMonth">&#x25B6;</button>
+          </div>
+        </div>
+        <div class="grid grid-cols-7 gap-0.5 mb-1">
+          <div v-for="d in weekDays" :key="d" class="text-center text-xs text-text-tertiary py-0.5 font-medium">{{ d }}</div>
+        </div>
+        <div class="grid grid-cols-7 gap-0.5">
+          <button
+            v-for="(day, i) in calendarDays" :key="i" type="button"
+            class="h-7 w-7 text-xs rounded-md transition-colors mx-auto"
+            :class="dayClass(day)"
+            :disabled="isDisabled(day.dateStr)"
+            @click="selectDate(day)"
+          >{{ day.day }}</button>
+        </div>
+      </div>
+
+      <!-- Grid mode -->
+      <div v-else class="flex gap-3">
+        <div>
+          <div class="flex items-center justify-between mb-1.5 px-1">
+            <button type="button" class="btn-icon text-text-secondary hover:text-text-primary" @click="decadeStart -= 10">&#x25C0;</button>
+            <span class="text-xs text-text-secondary">{{ decadeStart }}&mdash;{{ decadeStart + 9 }}</span>
+            <button type="button" class="btn-icon text-text-secondary hover:text-text-primary" @click="decadeStart += 10">&#x25B6;</button>
+          </div>
+          <div class="grid grid-cols-2 gap-1">
+            <button
+              v-for="y in decadeYears" :key="y" type="button"
+              class="px-2 py-1 text-xs rounded-md transition-colors min-w-[3rem]"
+              :class="y === viewYear ? 'bg-accent-primary text-white' : 'bg-bg-secondary text-text-primary hover:bg-bg-hover'"
+              @click="selectYear(y)"
+            >{{ y }}</button>
+          </div>
+        </div>
+        <div class="w-px bg-border-primary" />
+        <div>
+          <div class="mb-1.5 px-1"><span class="text-xs text-text-secondary">月份</span></div>
+          <div class="grid grid-cols-2 gap-1">
+            <button
+              v-for="m in 12" :key="m" type="button"
+              class="px-2 py-1 text-xs rounded-md transition-colors min-w-[2.5rem]"
+              :class="m === viewMonth ? 'bg-accent-primary text-white' : 'bg-bg-secondary text-text-primary hover:bg-bg-hover'"
+              @click="selectMonth(m)"
+            >{{ m }}月</button>
+          </div>
+        </div>
+        <div class="w-px bg-border-primary" />
+        <div>
+          <div class="grid grid-cols-7 gap-0.5 mb-1">
+            <div v-for="d in weekDays" :key="d" class="text-center text-xs text-text-tertiary py-0.5 font-medium">{{ d }}</div>
+          </div>
+          <div class="grid grid-cols-7 gap-0.5">
+            <button
+              v-for="(day, i) in calendarDays" :key="i" type="button"
+              class="h-7 w-7 text-xs rounded-md transition-colors mx-auto"
+              :class="dayClass(day)"
+              :disabled="isDisabled(day.dateStr)"
+              @click="selectDate(day)"
+            >{{ day.day }}</button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Time section -->
+      <div v-if="mode === 'datetime' || mode === 'time'" class="flex items-center justify-center gap-3 mt-3 pt-3 border-t border-border-primary">
+        <div v-for="col in timeColumns" :key="col.key" class="flex flex-col items-center gap-0.5">
+          <button type="button" class="text-text-tertiary hover:text-text-primary text-xs leading-none" @click="incTime(col.key)">&#x25B2;</button>
+          <input
+            v-if="editingTime === col.key"
+            ref="timeInputRefs"
+            :value="pad(col.val)"
+            class="input text-center text-xs w-10 py-0.5"
+            :maxlength="2"
+            @blur="finishTimeEdit(col.key, $event)"
+            @keydown.enter="finishTimeEdit(col.key, $event)"
+          />
+          <button v-else type="button" class="text-sm font-mono font-semibold text-text-primary hover:bg-bg-hover rounded px-2 py-0.5" @click="startTimeEdit(col.key)">{{ pad(col.val) }}</button>
+          <button type="button" class="text-text-tertiary hover:text-text-primary text-xs leading-none" @click="decTime(col.key)">&#x25BC;</button>
+        </div>
+      </div>
+
+      <!-- Confirm button -->
+      <div v-if="mode !== 'date'" class="flex justify-end mt-3 pt-2 border-t border-border-primary">
+        <button type="button" class="btn-sm btn-primary" @click="confirm">确认</button>
+      </div>
+    </div>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, onUnmounted, nextTick, useAttrs } from 'vue'
+import type { DateTimePreset } from '../types'
+
+const props = withDefaults(defineProps<{
+  modelValue: string | [string, string]
+  mode?: 'date' | 'time' | 'datetime'
+  pickerStyle?: 'calendar' | 'grid'
+  range?: boolean
+  minuteStep?: number
+  secondStep?: number
+  disabledDate?: (date: string) => boolean
+  presets?: DateTimePreset[]
+  placeholder?: string
+  disabled?: boolean
+  clearable?: boolean
+  testId?: string
+}>(), {
+  mode: 'date',
+  pickerStyle: 'calendar',
+  range: false,
+  minuteStep: 1,
+  secondStep: 1,
+  placeholder: '',
+  disabled: false,
+  clearable: true,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | [string, string]]
+  'change': [value: string | [string, string]]
+  'clear': []
+}>()
+
+const attrs = useAttrs()
+const baseTestId = computed(() => props.testId ?? (attrs['data-testid'] as string | undefined))
+
+const rootRef = ref<HTMLElement | null>(null)
+const triggerRef = ref<HTMLElement | null>(null)
+const timeInputRefs = ref<HTMLInputElement[]>([])
+const open = ref(false)
+const yearDropdownOpen = ref(false)
+
+const now = new Date()
+const viewYear = ref(now.getFullYear())
+const viewMonth = ref(now.getMonth() + 1)
+const decadeStart = ref(Math.floor(now.getFullYear() / 10) * 10)
+
+const selectedDate = ref('')
+const rangeStart = ref('')
+const rangeEnd = ref('')
+const rangePending = ref(false)
+
+const hours = ref(0)
+const minutes = ref(0)
+const seconds = ref(0)
+const editingTime = ref<'h' | 'm' | 's' | null>(null)
+
+const weekDays = ['日', '一', '二', '三', '四', '五', '六']
+
+const decadeYears = computed(() => Array.from({ length: 10 }, (_, i) => decadeStart.value + i))
+
+const hasValue = computed(() => {
+  if (props.range) {
+    const v = props.modelValue as [string, string]
+    return Array.isArray(v) && v[0] !== '' && v[1] !== ''
+  }
+  return typeof props.modelValue === 'string' && props.modelValue !== ''
+})
+
+const displayText = computed(() => {
+  if (props.mode === 'time') {
+    if (typeof props.modelValue === 'string' && props.modelValue) return props.modelValue
+    return ''
+  }
+  if (props.range) {
+    const v = props.modelValue as [string, string]
+    if (Array.isArray(v) && v[0] && v[1]) return `${fmtDisplay(v[0])} → ${fmtDisplay(v[1])}`
+    return ''
+  }
+  if (typeof props.modelValue === 'string' && props.modelValue) return fmtDisplay(props.modelValue)
+  return ''
+})
+
+function fmtDisplay(val: string): string {
+  if (props.mode === 'date') return val.substring(0, 10)
+  const d = val.substring(0, 10)
+  const t = val.includes('T') ? val.substring(11, 19) : '00:00:00'
+  return `${d} ${t}`
+}
+
+function pad(n: number): string { return String(n).padStart(2, '0') }
+
+interface CalendarDay { day: number; dateStr: string; currentMonth: boolean }
+
+const calendarDays = computed<CalendarDay[]>(() => {
+  const y = viewYear.value, m = viewMonth.value
+  const first = new Date(y, m - 1, 1)
+  const startDow = first.getDay()
+  const dim = daysInMonth(y, m)
+  const prevDim = daysInMonth(y, m - 1 || 12)
+  const days: CalendarDay[] = []
+
+  const pm = m - 1 || 12, py = m - 1 === 0 ? y - 1 : y
+  for (let i = startDow - 1; i >= 0; i--) {
+    const d = prevDim - i
+    days.push({ day: d, dateStr: `${py}-${pad(pm)}-${pad(d)}`, currentMonth: false })
+  }
+  for (let d = 1; d <= dim; d++) {
+    days.push({ day: d, dateStr: `${y}-${pad(m)}-${pad(d)}`, currentMonth: true })
+  }
+  const nm = m + 1 > 12 ? 1 : m + 1, ny = m + 1 > 12 ? y + 1 : y
+  const rem = 42 - days.length
+  for (let d = 1; d <= rem; d++) {
+    days.push({ day: d, dateStr: `${ny}-${pad(nm)}-${pad(d)}`, currentMonth: false })
+  }
+  return days
+})
+
+function daysInMonth(y: number, m: number): number {
+  if (m <= 0) { m += 12; y-- }
+  if (m > 12) { m -= 12; y++ }
+  return new Date(y, m, 0).getDate()
+}
+
+function dayClass(day: CalendarDay) {
+  const cls: string[] = []
+  if (!day.currentMonth) cls.push('text-text-tertiary')
+  else cls.push('text-text-primary')
+
+  if (isSelected(day.dateStr)) {
+    cls.push('bg-accent-primary', 'text-white')
+  } else if (isRangeStart(day.dateStr)) {
+    cls.push('bg-accent-primary', 'text-white', 'rounded-l-md')
+  } else if (isRangeEnd(day.dateStr)) {
+    cls.push('bg-accent-primary', 'text-white', 'rounded-r-md')
+  } else if (isInRange(day.dateStr)) {
+    cls.push('bg-accent-primary/15')
+  } else if (isToday(day.dateStr)) {
+    cls.push('ring-1', 'ring-accent-primary')
+  } else if (day.currentMonth) {
+    cls.push('hover:bg-bg-hover')
+  }
+  return cls
+}
+
+function isSelected(ds: string) {
+  if (props.range) return false
+  return selectedDate.value === ds
+}
+
+function isRangeStart(ds: string) {
+  if (!props.range || !rangeStart.value) return false
+  return ds === rangeStart.value && rangePending.value
+}
+
+function isRangeEnd(ds: string) {
+  if (!props.range || !rangeEnd.value) return false
+  if (rangePending.value) return false
+  return ds === rangeEnd.value
+}
+
+function isInRange(ds: string) {
+  if (!props.range || !rangeStart.value || !rangeEnd.value || rangePending.value) return false
+  return ds > rangeStart.value && ds < rangeEnd.value
+}
+
+function isToday(ds: string) {
+  const t = new Date()
+  return ds === `${t.getFullYear()}-${pad(t.getMonth() + 1)}-${pad(t.getDate())}`
+}
+
+function isDisabled(ds: string) {
+  return props.disabledDate ? props.disabledDate(ds) : false
+}
+
+const timeColumns = computed(() => [
+  { key: 'h' as const, val: hours.value },
+  { key: 'm' as const, val: minutes.value },
+  { key: 's' as const, val: seconds.value },
+])
+
+const panelPos = ref({ top: 0, left: 0 })
+
+const panelStyle = computed(() => ({
+  top: `${panelPos.value.top}px`,
+  left: `${panelPos.value.left}px`,
+  zIndex: 9999,
+}))
+
+function updatePosition() {
+  if (!triggerRef.value) return
+  const rect = triggerRef.value.getBoundingClientRect()
+  panelPos.value = { top: rect.bottom + 4, left: rect.left }
+}
+
+function prevMonth() {
+  if (viewMonth.value === 1) { viewMonth.value = 12; viewYear.value-- }
+  else viewMonth.value--
+}
+
+function nextMonth() {
+  if (viewMonth.value === 12) { viewMonth.value = 1; viewYear.value++ }
+  else viewMonth.value++
+}
+
+function selectYear(y: number) {
+  viewYear.value = y
+  yearDropdownOpen.value = false
+}
+
+function selectMonth(m: number) {
+  viewMonth.value = m
+}
+
+function selectDate(day: CalendarDay) {
+  if (isDisabled(day.dateStr)) return
+
+  if (props.range) {
+    if (!rangePending.value || rangeEnd.value) {
+      rangeStart.value = day.dateStr
+      rangeEnd.value = ''
+      rangePending.value = true
+    } else {
+      if (day.dateStr < rangeStart.value) {
+        rangeEnd.value = rangeStart.value
+        rangeStart.value = day.dateStr
+      } else {
+        rangeEnd.value = day.dateStr
+      }
+      rangePending.value = false
+      emitRange()
+      if (props.mode === 'date') { open.value = false; emit('change', props.modelValue) }
+    }
+  } else {
+    selectedDate.value = day.dateStr
+    if (props.mode === 'date') {
+      emitValue(day.dateStr)
+      open.value = false
+      emit('change', props.modelValue)
+    }
+  }
+}
+
+function emitValue(dateStr: string) {
+  let v: string
+  if (props.mode === 'date') v = dateStr
+  else if (props.mode === 'time') v = `${pad(hours.value)}:${pad(minutes.value)}:${pad(seconds.value)}`
+  else v = `${dateStr}T${pad(hours.value)}:${pad(minutes.value)}:${pad(seconds.value)}`
+  emit('update:modelValue', v)
+}
+
+function emitRange() {
+  const s = buildFull(rangeStart.value)
+  const e = buildFull(rangeEnd.value)
+  emit('update:modelValue', [s, e])
+}
+
+function buildFull(ds: string) {
+  if (props.mode === 'date') return ds
+  if (props.mode === 'time') return `${pad(hours.value)}:${pad(minutes.value)}:${pad(seconds.value)}`
+  return `${ds}T${pad(hours.value)}:${pad(minutes.value)}:${pad(seconds.value)}`
+}
+
+function confirm() {
+  if (props.range) {
+    if (!rangeStart.value) rangeStart.value = selectedDate.value || todayStr()
+    if (!rangeEnd.value) rangeEnd.value = rangeStart.value
+    emitRange()
+  } else {
+    const ds = selectedDate.value || todayStr()
+    emitValue(ds)
+  }
+  open.value = false
+  emit('change', props.modelValue)
+}
+
+function clear() {
+  if (props.range) emit('update:modelValue', ['', ''])
+  else emit('update:modelValue', props.mode === 'time' ? '' : '')
+  selectedDate.value = ''
+  rangeStart.value = ''
+  rangeEnd.value = ''
+  rangePending.value = false
+  open.value = false
+  emit('clear')
+}
+
+function toggle() {
+  if (props.disabled) return
+  open.value = !open.value
+  if (open.value) {
+    initFromModel()
+    yearDropdownOpen.value = false
+    nextTick(updatePosition)
+  } else {
+    editingTime.value = null
+  }
+}
+
+function todayStr() {
+  const t = new Date()
+  return `${t.getFullYear()}-${pad(t.getMonth() + 1)}-${pad(t.getDate())}`
+}
+
+function initFromModel() {
+  const v = props.modelValue
+  if (props.range && Array.isArray(v)) {
+    const [s, e] = v as [string, string]
+    if (s) {
+      const p = parseDatePart(s)
+      viewYear.value = p.y; viewMonth.value = p.m
+      rangeStart.value = p.ds
+      const pe = parseDatePart(e)
+      rangeEnd.value = pe.ds
+      rangePending.value = false
+      if (props.mode !== 'date') { setTimeFromStr(s) }
+    }
+  } else if (typeof v === 'string' && v) {
+    if (props.mode === 'time') {
+      setTimeFromStr(v)
+    } else {
+      const p = parseDatePart(v)
+      viewYear.value = p.y; viewMonth.value = p.m
+      selectedDate.value = p.ds
+      if (props.mode === 'datetime') setTimeFromStr(v)
+    }
+  } else {
+    const t = new Date()
+    viewYear.value = t.getFullYear()
+    viewMonth.value = t.getMonth() + 1
+    hours.value = t.getHours()
+    minutes.value = t.getMinutes()
+    seconds.value = t.getSeconds()
+    selectedDate.value = todayStr()
+    rangeStart.value = ''
+    rangeEnd.value = ''
+    rangePending.value = false
+  }
+  decadeStart.value = Math.floor(viewYear.value / 10) * 10
+}
+
+function parseDatePart(s: string) {
+  const ds = s.substring(0, 10)
+  const parts = ds.split('-')
+  return { y: +parts[0], m: +parts[1], ds }
+}
+
+function setTimeFromStr(s: string) {
+  const idx = s.indexOf('T')
+  const ts = idx >= 0 ? s.substring(idx + 1) : (s.includes(':') ? s : '00:00:00')
+  const p = ts.split(':')
+  hours.value = +p[0] || 0
+  minutes.value = +p[1] || 0
+  seconds.value = +p[2] || 0
+}
+
+function incTime(key: 'h' | 'm' | 's') {
+  if (key === 'h') hours.value = (hours.value + 1) % 24
+  else if (key === 'm') minutes.value = (minutes.value + props.minuteStep) % 60
+  else seconds.value = (seconds.value + props.secondStep) % 60
+}
+
+function decTime(key: 'h' | 'm' | 's') {
+  if (key === 'h') hours.value = (hours.value + 23) % 24
+  else if (key === 'm') minutes.value = (minutes.value - props.minuteStep + 60) % 60
+  else seconds.value = (seconds.value - props.secondStep + 60) % 60
+}
+
+function startTimeEdit(key: 'h' | 'm' | 's') {
+  editingTime.value = key
+  nextTick(() => {
+    const idx = key === 'h' ? 0 : key === 'm' ? 1 : 2
+    const inp = timeInputRefs.value[idx]
+    if (inp) { inp.focus(); inp.select() }
+  })
+}
+
+function finishTimeEdit(key: 'h' | 'm' | 's', e: Event) {
+  editingTime.value = null
+  const val = parseInt((e.target as HTMLInputElement).value, 10)
+  if (isNaN(val)) return
+  if (key === 'h') hours.value = Math.max(0, Math.min(23, val))
+  else if (key === 'm') minutes.value = Math.max(0, Math.min(59, Math.round(val / props.minuteStep) * props.minuteStep))
+  else seconds.value = Math.max(0, Math.min(59, Math.round(val / props.secondStep) * props.secondStep))
+}
+
+function handleOutside(e: MouseEvent) {
+  if (rootRef.value && !rootRef.value.contains(e.target as Node)) {
+    open.value = false
+    editingTime.value = null
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('mousedown', handleOutside)
+  window.addEventListener('scroll', updatePosition, true)
+  window.addEventListener('resize', updatePosition)
+})
+onUnmounted(() => {
+  document.removeEventListener('mousedown', handleOutside)
+  window.removeEventListener('scroll', updatePosition, true)
+  window.removeEventListener('resize', updatePosition)
+})
+
+watch(() => props.modelValue, () => {
+  if (open.value) initFromModel()
+}, { deep: true })
+</script>

package/index.ts

@@ -14,5 +14,6 @@ export { default as UserPicker } from './components/UserPicker.vue'
 export { default as SearchSelect } from './components/SearchSelect.vue'
 export { default as SideMenu } from './components/SideMenu.vue'
 export { default as TopNavbar } from './components/TopNavbar.vue'
+export { default as DateTimePicker } from './components/DateTimePicker.vue'
 export { useToast } from './composables/useToast'
-export type { Column, SelectOption, MenuItem, MenuGroup, NavModule, DropdownItem, ToastType } from './types'
+export type { Column, SelectOption, MenuItem, MenuGroup, NavModule, DropdownItem, ToastType, DateTimePreset } from './types'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aquiferre/ui-kit",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "private": false,
   "type": "module",
   "main": "index.ts",

package/types.ts

@@ -45,3 +45,8 @@ export interface DropdownItem {
 }
 
 export type ToastType = 'success' | 'error' | 'warning' | 'info'
+
+export interface DateTimePreset {
+  label: string
+  value: () => string | [string, string]
+}