foucui 1.0.1 → 2.0.0

package/components/QiuTime/index.vue

@@ -1,548 +0,0 @@
-<template>
-  <div
-    ref="rootRef"
-    class="qiu-time"
-    :class="[
-      `qiu-time--${resolvedSize}`,
-      attrs.class,
-      {
-        'is-disabled': disabled,
-        'is-focused': panelVisible,
-        'is-fit': fit,
-      },
-    ]"
-    :style="attrs.style as any"
-  >
-    <div class="qiu-time__editor" tabindex="0" @click="togglePanel" @keydown.enter.prevent="togglePanel">
-      <span class="qiu-time__value" :class="{ 'is-placeholder': !displayText }">
-        {{ displayText || placeholder }}
-      </span>
-      <button
-        v-if="clearable && hasValue && !disabled"
-        type="button"
-        class="qiu-time__clear"
-        tabindex="-1"
-        @mousedown.prevent
-        @click.stop="clearValue"
-      >
-        ×
-      </button>
-      <qiu-icon icon="time-line" class="qiu-time__icon" />
-    </div>
-
-    <Teleport to="body">
-      <Transition name="qiu-time-fade">
-        <div
-          v-if="panelVisible"
-          ref="panelRef"
-          class="qiu-time-panel"
-          :style="panelStyle"
-          @mousedown.prevent
-        >
-          <div class="qiu-time-panel__body">
-            <div class="qiu-time-panel__spinner">
-              <ul ref="hourListRef" class="qiu-time-panel__list">
-                <li
-                  v-for="h in hours"
-                  :key="`h-${h}`"
-                  class="qiu-time-panel__item"
-                  :class="{ 'is-active': draft.hour === h }"
-                  @click="setDraft('hour', h)"
-                >
-                  {{ pad(h) }}
-                </li>
-              </ul>
-            </div>
-            <div class="qiu-time-panel__spinner">
-              <ul ref="minuteListRef" class="qiu-time-panel__list">
-                <li
-                  v-for="m in minutes"
-                  :key="`m-${m}`"
-                  class="qiu-time-panel__item"
-                  :class="{ 'is-active': draft.minute === m }"
-                  @click="setDraft('minute', m)"
-                >
-                  {{ pad(m) }}
-                </li>
-              </ul>
-            </div>
-            <div v-if="showSeconds" class="qiu-time-panel__spinner">
-              <ul ref="secondListRef" class="qiu-time-panel__list">
-                <li
-                  v-for="s in seconds"
-                  :key="`s-${s}`"
-                  class="qiu-time-panel__item"
-                  :class="{ 'is-active': draft.second === s }"
-                  @click="setDraft('second', s)"
-                >
-                  {{ pad(s) }}
-                </li>
-              </ul>
-            </div>
-          </div>
-          <div class="qiu-time-panel__footer">
-            <button type="button" class="qiu-time-panel__btn is-text" @click="pickNow">此刻</button>
-            <div class="qiu-time-panel__actions">
-              <button type="button" class="qiu-time-panel__btn" @click="cancelPanel">取消</button>
-              <button type="button" class="qiu-time-panel__btn is-primary" @click="confirmPanel">
-                确定
-              </button>
-            </div>
-          </div>
-        </div>
-      </Transition>
-    </Teleport>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { CSSProperties } from 'vue'
-
-defineOptions({
-  name: 'QiuTime',
-  inheritAttrs: false,
-})
-
-type TimeParts = { hour: number; minute: number; second: number }
-
-const props = withDefaults(
-  defineProps<{
-    modelValue?: string | null
-    /** 展示/绑定格式：HH:mm:ss 或 HH:mm */
-    format?: 'HH:mm:ss' | 'HH:mm'
-    placeholder?: string
-    clearable?: boolean
-    disabled?: boolean
-    size?: 'large' | 'default' | 'small'
-    /** 按内容自适应宽度（表格单元格内推荐） */
-    fit?: boolean
-    hourStep?: number
-    minuteStep?: number
-    secondStep?: number
-  }>(),
-  {
-    modelValue: null,
-    format: 'HH:mm:ss',
-    placeholder: '选择时间',
-    clearable: true,
-    disabled: false,
-    size: 'default',
-    fit: false,
-    hourStep: 1,
-    minuteStep: 1,
-    secondStep: 1,
-  }
-)
-
-const emit = defineEmits<{
-  'update:modelValue': [string | null]
-  change: [string | null]
-  clear: []
-  'visible-change': [boolean]
-}>()
-
-const attrs = useAttrs()
-const rootRef = ref<HTMLElement | null>(null)
-const panelRef = ref<HTMLElement | null>(null)
-const hourListRef = ref<HTMLElement | null>(null)
-const minuteListRef = ref<HTMLElement | null>(null)
-const secondListRef = ref<HTMLElement | null>(null)
-const panelVisible = ref(false)
-const panelStyle = ref<CSSProperties>({
-  position: 'fixed',
-  top: '-9999px',
-  left: '-9999px',
-  zIndex: 3100,
-})
-
-const draft = reactive<TimeParts>({ hour: 0, minute: 0, second: 0 })
-
-const resolvedSize = computed(() => props.size || 'default')
-const showSeconds = computed(() => props.format !== 'HH:mm')
-const hasValue = computed(() => props.modelValue != null && props.modelValue !== '')
-
-const pad = (n: number) => String(n).padStart(2, '0')
-
-const rangeByStep = (max: number, step: number) => {
-  const s = Math.max(1, Math.floor(step || 1))
-  const list: number[] = []
-  for (let i = 0; i <= max; i += s) list.push(i)
-  if (list[list.length - 1] !== max && max % s === 0) {
-    /* already includes */
-  }
-  return list
-}
-
-const hours = computed(() => rangeByStep(23, props.hourStep))
-const minutes = computed(() => rangeByStep(59, props.minuteStep))
-const seconds = computed(() => rangeByStep(59, props.secondStep))
-
-const parseTime = (val?: string | null): TimeParts | null => {
-  if (!val) return null
-  const m = String(val).trim().match(/^(\d{1,2}):(\d{1,2})(?::(\d{1,2}))?$/)
-  if (!m) return null
-  const hour = Math.min(23, Math.max(0, Number(m[1])))
-  const minute = Math.min(59, Math.max(0, Number(m[2])))
-  const second = Math.min(59, Math.max(0, Number(m[3] ?? 0)))
-  return { hour, minute, second }
-}
-
-const formatParts = (p: TimeParts) => {
-  if (showSeconds.value) return `${pad(p.hour)}:${pad(p.minute)}:${pad(p.second)}`
-  return `${pad(p.hour)}:${pad(p.minute)}`
-}
-
-const displayText = computed(() => {
-  const p = parseTime(props.modelValue)
-  return p ? formatParts(p) : ''
-})
-
-const syncDraftFromModel = () => {
-  const p = parseTime(props.modelValue) || { hour: 0, minute: 0, second: 0 }
-  draft.hour = p.hour
-  draft.minute = p.minute
-  draft.second = p.second
-}
-
-const scrollActiveIntoView = async () => {
-  await nextTick()
-  const scrollList = (el: HTMLElement | null, active: number) => {
-    if (!el) return
-    const item = el.querySelector('.qiu-time-panel__item.is-active') as HTMLElement | null
-    if (item) {
-      el.scrollTop = Math.max(0, item.offsetTop - el.clientHeight / 2 + item.clientHeight / 2)
-      return
-    }
-    const idx = Array.from(el.children).findIndex((n) => Number((n as HTMLElement).textContent) === active)
-    if (idx >= 0) {
-      const node = el.children[idx] as HTMLElement
-      el.scrollTop = Math.max(0, node.offsetTop - el.clientHeight / 2 + node.clientHeight / 2)
-    }
-  }
-  scrollList(hourListRef.value, draft.hour)
-  scrollList(minuteListRef.value, draft.minute)
-  if (showSeconds.value) scrollList(secondListRef.value, draft.second)
-}
-
-const updatePanelPosition = () => {
-  const trigger = rootRef.value
-  const panel = panelRef.value
-  if (!trigger || !panel) return
-  const rect = trigger.getBoundingClientRect()
-  const panelRect = panel.getBoundingClientRect()
-  const gap = 4
-  const vw = window.innerWidth
-  const vh = window.innerHeight
-  let top = rect.bottom + gap
-  let left = rect.left
-  if (top + panelRect.height > vh - 4) top = rect.top - panelRect.height - gap
-  if (top < 4) top = 4
-  if (left + panelRect.width > vw - 4) left = vw - panelRect.width - 4
-  if (left < 4) left = 4
-  panelStyle.value = {
-    position: 'fixed',
-    top: `${Math.round(top)}px`,
-    left: `${Math.round(left)}px`,
-    zIndex: 3100,
-  }
-}
-
-const openPanel = async () => {
-  if (props.disabled) return
-  syncDraftFromModel()
-  panelVisible.value = true
-  emit('visible-change', true)
-  await nextTick()
-  updatePanelPosition()
-  await scrollActiveIntoView()
-  requestAnimationFrame(() => updatePanelPosition())
-}
-
-const closePanel = () => {
-  if (!panelVisible.value) return
-  panelVisible.value = false
-  emit('visible-change', false)
-}
-
-const togglePanel = () => {
-  if (props.disabled) return
-  panelVisible.value ? closePanel() : openPanel()
-}
-
-const setDraft = (key: keyof TimeParts, value: number) => {
-  draft[key] = value
-}
-
-const emitValue = (val: string | null) => {
-  emit('update:modelValue', val)
-  emit('change', val)
-}
-
-const confirmPanel = () => {
-  emitValue(formatParts({ ...draft }))
-  closePanel()
-}
-
-const cancelPanel = () => {
-  closePanel()
-}
-
-const pickNow = () => {
-  const now = new Date()
-  draft.hour = now.getHours()
-  draft.minute = now.getMinutes()
-  draft.second = now.getSeconds()
-  emitValue(formatParts({ ...draft }))
-  closePanel()
-}
-
-const clearValue = () => {
-  emitValue(null)
-  emit('clear')
-}
-
-const onDocClick = (e: MouseEvent) => {
-  if (!panelVisible.value) return
-  const t = e.target as Node
-  if (rootRef.value?.contains(t) || panelRef.value?.contains(t)) return
-  closePanel()
-}
-
-const onScrollOrResize = () => {
-  if (panelVisible.value) updatePanelPosition()
-}
-
-watch(panelVisible, (v) => {
-  if (v) {
-    document.addEventListener('mousedown', onDocClick, true)
-    window.addEventListener('scroll', onScrollOrResize, true)
-    window.addEventListener('resize', onScrollOrResize)
-  } else {
-    document.removeEventListener('mousedown', onDocClick, true)
-    window.removeEventListener('scroll', onScrollOrResize, true)
-    window.removeEventListener('resize', onScrollOrResize)
-  }
-})
-
-onBeforeUnmount(() => {
-  document.removeEventListener('mousedown', onDocClick, true)
-  window.removeEventListener('scroll', onScrollOrResize, true)
-  window.removeEventListener('resize', onScrollOrResize)
-})
-</script>
-
-<style lang="scss" scoped>
-.qiu-time {
-  position: relative;
-  display: inline-flex;
-  box-sizing: border-box;
-  width: 100%;
-  max-width: 100%;
-  vertical-align: middle;
-
-  &.is-fit {
-    width: auto;
-    min-width: 120px;
-  }
-
-  &.is-disabled .qiu-time__editor {
-    cursor: not-allowed;
-    background: var(--qiu-fill-color-light, var(--qiu-fill-color-light, #f5f7fa));
-    color: var(--qiu-text-color-placeholder, var(--qiu-text-color-placeholder, #a8abb2));
-  }
-
-  &.is-focused .qiu-time__editor {
-    border-color: var(--qiu-color-primary, var(--qiu-color-primary));
-    box-shadow: 0 0 0 1px
-      color-mix(in srgb, var(--qiu-color-primary, var(--qiu-color-primary)) 25%, transparent);
-  }
-}
-
-.qiu-time__editor {
-  display: inline-flex;
-  align-items: center;
-  box-sizing: border-box;
-  width: 100%;
-  min-width: 0;
-  padding: 0 8px 0 12px;
-  cursor: pointer;
-  background: var(--qiu-bg-color, var(--qiu-bg-color, #fff));
-  border: 1px solid var(--qiu-border-color, var(--qiu-border-color, #dcdfe6));
-  border-radius: var(--qiu-border-radius-base, var(--qiu-border-radius-base, 4px));
-  outline: none;
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
-
-  &:hover {
-    border-color: var(--qiu-border-color-hover, var(--qiu-border-color-hover, #c0c4cc));
-  }
-}
-
-.qiu-time--large .qiu-time__editor {
-  height: 40px;
-  font-size: 16px;
-}
-
-.qiu-time--default .qiu-time__editor {
-  height: 32px;
-  font-size: 14px;
-}
-
-.qiu-time--small .qiu-time__editor {
-  height: 24px;
-  font-size: 12px;
-}
-
-.qiu-time__value {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--qiu-text-color-primary, var(--qiu-text-color-primary, #303133));
-  line-height: 1;
-
-  &.is-placeholder {
-    color: var(--qiu-text-color-placeholder, var(--qiu-text-color-placeholder, #a8abb2));
-  }
-}
-
-.qiu-time__clear,
-.qiu-time__icon {
-  flex-shrink: 0;
-  margin-left: 4px;
-  color: var(--qiu-text-color-placeholder, var(--qiu-text-color-placeholder, #a8abb2));
-}
-
-.qiu-time__clear {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  padding: 0;
-  font-size: 14px;
-  line-height: 1;
-  cursor: pointer;
-  background: transparent;
-  border: 0;
-  border-radius: 50%;
-
-  &:hover {
-    color: var(--qiu-text-color-regular, var(--qiu-text-color-regular, #606266));
-  }
-}
-
-.qiu-time__icon {
-  font-size: 14px;
-}
-
-.qiu-time-panel {
-  box-sizing: border-box;
-  width: auto;
-  overflow: hidden;
-  background: var(--qiu-bg-color-overlay, var(--qiu-bg-color-overlay, #fff));
-  border: 1px solid var(--qiu-border-color-light, var(--qiu-border-color-light, #e4e7ed));
-  border-radius: var(--qiu-border-radius-base, var(--qiu-border-radius-base, 4px));
-  box-shadow: var(--qiu-box-shadow-light, var(--qiu-box-shadow-light, 0 4px 12px rgb(0 0 0 / 10%)));
-}
-
-.qiu-time-panel__body {
-  display: flex;
-  height: 204px;
-  border-bottom: 1px solid var(--qiu-border-color-lighter, var(--qiu-border-color-lighter, #ebeef5));
-}
-
-.qiu-time-panel__spinner {
-  flex: 1;
-  min-width: 56px;
-  overflow: hidden;
-  border-right: 1px solid var(--qiu-border-color-lighter, var(--qiu-border-color-lighter, #ebeef5));
-
-  &:last-child {
-    border-right: 0;
-  }
-}
-
-.qiu-time-panel__list {
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  overflow-y: auto;
-  list-style: none;
-  scrollbar-width: thin;
-}
-
-.qiu-time-panel__item {
-  height: 32px;
-  padding: 0 10px;
-  font-size: 13px;
-  line-height: 32px;
-  color: var(--qiu-text-color-regular, var(--qiu-text-color-regular, #606266));
-  text-align: center;
-  cursor: pointer;
-  user-select: none;
-
-  &:hover {
-    background: var(--qiu-fill-color-light, var(--qiu-fill-color-light, #f5f7fa));
-  }
-
-  &.is-active {
-    font-weight: 600;
-    color: var(--qiu-color-primary, var(--qiu-color-primary));
-    background: var(--qiu-color-primary-light-9, var(--qiu-color-primary-light-9, #ecf5ff));
-  }
-}
-
-.qiu-time-panel__footer {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 10px;
-}
-
-.qiu-time-panel__actions {
-  display: inline-flex;
-  gap: 8px;
-}
-
-.qiu-time-panel__btn {
-  height: 28px;
-  padding: 0 12px;
-  font-size: 13px;
-  color: var(--qiu-text-color-regular, var(--qiu-text-color-regular, #606266));
-  cursor: pointer;
-  background: var(--qiu-fill-color-blank, #fff);
-  border: 1px solid var(--qiu-border-color, var(--qiu-border-color, #dcdfe6));
-  border-radius: 4px;
-
-  &.is-text {
-    padding: 0 4px;
-    color: var(--qiu-color-primary, var(--qiu-color-primary));
-    background: transparent;
-    border-color: transparent;
-  }
-
-  &.is-primary {
-    color: #fff;
-    background: var(--qiu-color-primary, var(--qiu-color-primary));
-    border-color: var(--qiu-color-primary, var(--qiu-color-primary));
-  }
-
-  &:hover {
-    opacity: 0.92;
-  }
-}
-
-.qiu-time-fade-enter-active,
-.qiu-time-fade-leave-active {
-  transition: opacity 0.15s ease, transform 0.15s ease;
-}
-
-.qiu-time-fade-enter-from,
-.qiu-time-fade-leave-to {
-  opacity: 0;
-  transform: translateY(-4px);
-}
-</style>

package/components/QiuTimeAgo/index.vue

@@ -1,103 +0,0 @@
-<template>
-  <span class="qiu-time-ago" :title="absoluteTitle">
-    <slot :value="text">{{ text }}</slot>
-  </span>
-</template>
-
-<script lang="ts" setup>
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-
-defineOptions({ name: 'QiuTimeAgo' })
-
-const props = withDefaults(
-  defineProps<{
-    /** 时间：Date / 时间戳(ms) / 时间字符串 */
-    value?: Date | number | string
-    /** 是否自动刷新 */
-    autoUpdate?: boolean
-    /** 刷新间隔(ms) */
-    interval?: number
-  }>(),
-  {
-    value: undefined,
-    autoUpdate: true,
-    interval: 30000,
-  }
-)
-
-const emit = defineEmits<{
-  update: [string]
-}>()
-
-const text = ref('')
-const absoluteTitle = ref('')
-let timer: ReturnType<typeof setInterval> | undefined
-
-const toDate = (val?: Date | number | string): Date | null => {
-  if (!val) return null
-  if (val instanceof Date) return isNaN(val.getTime()) ? null : val
-  if (typeof val === 'number') return new Date(val)
-  const d = new Date(val)
-  return isNaN(d.getTime()) ? null : d
-}
-
-const diffText = (date: Date) => {
-  const now = Date.now()
-  const diff = now - date.getTime()
-  const abs = Math.abs(diff)
-  const future = diff < 0
-  const sec = Math.floor(abs / 1000)
-  const min = Math.floor(sec / 60)
-  const hr = Math.floor(min / 60)
-  const day = Math.floor(hr / 24)
-
-  let rel: string
-  if (sec < 10) rel = '刚刚'
-  else if (sec < 60) rel = `${sec} 秒${future ? '后' : '前'}`
-  else if (min < 60) rel = `${min} 分钟${future ? '后' : '前'}`
-  else if (hr < 24) rel = `${hr} 小时${future ? '后' : '前'}`
-  else if (day < 30) rel = `${day} 天${future ? '后' : '前'}`
-  else {
-    const y = date.getFullYear()
-    const m = String(date.getMonth() + 1).padStart(2, '0')
-    const d = String(date.getDate()).padStart(2, '0')
-    text.value = `${y}-${m}-${d}`
-    return
-  }
-  text.value = rel
-}
-
-const refresh = () => {
-  const d = toDate(props.value)
-  if (!d) {
-    text.value = '--'
-    absoluteTitle.value = ''
-    return
-  }
-  const pad = (n: number) => String(n).padStart(2, '0')
-  absoluteTitle.value = `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`
-  diffText(d)
-  emit('update', text.value)
-}
-
-watch(() => props.value, refresh, { immediate: false })
-
-onMounted(() => {
-  refresh()
-  if (props.autoUpdate && props.interval > 0) {
-    timer = setInterval(refresh, props.interval)
-  }
-})
-
-onBeforeUnmount(() => {
-  if (timer) clearInterval(timer)
-})
-</script>
-
-<style lang="scss" scoped>
-.qiu-time-ago {
-  display: inline;
-  font-size: inherit;
-  color: inherit;
-}
-</style>

package/components/QiuTimeline/index.vue

@@ -1,54 +0,0 @@
-<template>
-  <ul
-    class="qiu-timeline"
-    :class="{
-      'qiu-timeline--center': center,
-    }"
-  >
-    <slot />
-  </ul>
-</template>
-
-<script lang="ts" setup>
-defineOptions({ name: 'QiuTimeline' })
-
-withDefaults(
-  defineProps<{
-    center?: boolean
-  }>(),
-  {
-    center: false,
-  }
-)
-</script>
-
-<style lang="scss" scoped>
-.qiu-timeline {
-  padding: 0;
-  margin: 0;
-  list-style: none;
-
-  &--center {
-    :deep(.qiu-timeline-item__wrapper) {
-      width: 50%;
-    }
-
-    :deep(.qiu-timeline-item:nth-child(odd) .qiu-timeline-item__wrapper) {
-      margin-left: 50%;
-      padding-left: 24px;
-      text-align: left;
-    }
-
-    :deep(.qiu-timeline-item:nth-child(even) .qiu-timeline-item__wrapper) {
-      margin-right: 50%;
-      padding-right: 24px;
-      text-align: right;
-    }
-
-    :deep(.qiu-timeline-item__dot) {
-      left: 50%;
-      transform: translateX(-50%);
-    }
-  }
-}
-</style>