foucui 1.0.1 → 2.0.0

package/components/QiuTimelineItem/index.vue

@@ -1,140 +0,0 @@
-<template>
-  <li
-    class="qiu-timeline-item"
-    :class="[
-      `qiu-timeline-item--${resolvedType}`,
-      `qiu-timeline-item--placement-${placement}`,
-      { 'is-hollow': hollow },
-    ]"
-    :style="itemStyle"
-  >
-    <div class="qiu-timeline-item__tail" />
-    <div class="qiu-timeline-item__dot">
-      <slot name="dot">
-        <qiu-icon v-if="icon" :icon="icon" />
-      </slot>
-    </div>
-    <div class="qiu-timeline-item__wrapper">
-      <div
-        v-if="timestamp && placement === 'top'"
-        class="qiu-timeline-item__timestamp is-top"
-      >
-        {{ timestamp }}
-      </div>
-      <div class="qiu-timeline-item__content">
-        <slot />
-      </div>
-      <div
-        v-if="timestamp && placement === 'bottom'"
-        class="qiu-timeline-item__timestamp is-bottom"
-      >
-        {{ timestamp }}
-      </div>
-    </div>
-  </li>
-</template>
-
-<script lang="ts" setup>
-defineOptions({ name: 'QiuTimelineItem' })
-
-const props = withDefaults(
-  defineProps<{
-    timestamp?: string
-    placement?: 'top' | 'bottom'
-    type?: 'primary' | 'success' | 'warning' | 'danger' | 'info'
-    color?: string
-    hollow?: boolean
-    icon?: string
-    center?: boolean
-  }>(),
-  {
-    timestamp: '',
-    placement: 'bottom',
-    type: 'primary',
-    color: '',
-    hollow: false,
-    icon: '',
-    center: false,
-  }
-)
-
-const typeColorMap: Record<string, string> = {
-  primary: 'var(--qiu-color-primary, var(--qiu-color-primary, #409eff))',
-  success: 'var(--qiu-color-success, var(--qiu-color-success, #67c23a))',
-  warning: 'var(--qiu-color-warning, var(--qiu-color-warning, #e6a23c))',
-  danger: 'var(--qiu-color-danger, var(--qiu-color-danger, #f56c6c))',
-  info: 'var(--qiu-color-info, var(--qiu-color-info, #909399))',
-}
-
-const resolvedType = computed(() => props.type || 'primary')
-
-const itemStyle = computed(() => ({
-  '--qiu-timeline-dot-color': props.color || typeColorMap[resolvedType.value],
-}))
-</script>
-
-<style lang="scss" scoped>
-.qiu-timeline-item {
-  position: relative;
-  padding-bottom: 20px;
-
-  &:last-child {
-    .qiu-timeline-item__tail {
-      display: none;
-    }
-  }
-
-  &__tail {
-    position: absolute;
-    top: 8px;
-    left: 4px;
-    width: 2px;
-    height: calc(100% - 8px);
-    background: var(--qiu-border-color-light, var(--qiu-border-color-light, #e4e7ed));
-  }
-
-  &__dot {
-    position: absolute;
-    top: 2px;
-    left: 0;
-    z-index: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 10px;
-    height: 10px;
-    font-size: 10px;
-    color: #fff;
-    background: var(--qiu-timeline-dot-color);
-    border: 2px solid var(--qiu-timeline-dot-color);
-    border-radius: 50%;
-  }
-
-  &.is-hollow &__dot {
-    background: var(--qiu-bg-color, var(--qiu-bg-color, #fff));
-    color: var(--qiu-timeline-dot-color);
-  }
-
-  &__wrapper {
-    position: relative;
-    padding-left: 24px;
-  }
-
-  &__timestamp {
-    margin-bottom: 6px;
-    font-size: 12px;
-    color: var(--qiu-text-color-secondary, var(--qiu-text-color-secondary, #909399));
-
-    &.is-bottom {
-      margin-top: 6px;
-      margin-bottom: 0;
-    }
-  }
-
-  &__content {
-    font-size: 14px;
-    line-height: 1.6;
-    color: var(--qiu-text-color-primary, var(--qiu-text-color-primary, #303133));
-  }
-}
-</style>

package/components/QiuTips/index.vue

@@ -1,323 +0,0 @@
-<template>
-  <span class="qiu-tips-host" v-bind="attrs">
-    <span
-      ref="triggerRef"
-      class="qiu-tips__trigger"
-      @mouseenter="onTriggerEnter"
-      @mouseleave="onTriggerLeave"
-      @click="onTriggerClick"
-    >
-      <slot />
-    </span>
-
-    <Teleport to="body">
-      <Transition name="qiu-tips-fade">
-        <div
-          v-show="visible"
-          ref="popperRef"
-          class="qiu-tips"
-          :class="[
-            `qiu-tips--${placement}`,
-            `qiu-tips--${type}`,
-            `qiu-tips--${effect}`,
-          ]"
-          :style="popperStyle"
-          role="tooltip"
-          @mouseenter="onPopperEnter"
-          @mouseleave="onTriggerLeave"
-        >
-          <div v-if="title || $slots.title" class="qiu-tips__title">
-            <slot name="title">{{ title }}</slot>
-          </div>
-          <div class="qiu-tips__content">
-            <slot name="content">{{ content }}</slot>
-          </div>
-          <i class="qiu-tips__arrow" aria-hidden="true" />
-        </div>
-      </Transition>
-    </Teleport>
-  </span>
-</template>
-
-<script lang="ts" setup>
-/**
- * QiuTips — 带三角、主题色的提示气泡（比 QiuTooltip 更完整）
- */
-defineOptions({ name: 'QiuTips', inheritAttrs: false })
-
-type Placement = 'top' | 'bottom' | 'left' | 'right'
-type TipsType = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'cyan' | 'orange' | 'pink' | 'teal'
-
-const attrs = useAttrs()
-
-const props = withDefaults(
-  defineProps<{
-    content?: string
-    title?: string
-    placement?: Placement
-    type?: TipsType
-    effect?: 'light' | 'dark'
-    trigger?: 'hover' | 'click'
-    showAfter?: number
-    hideAfter?: number
-    disabled?: boolean
-  }>(),
-  {
-    content: '',
-    title: '',
-    placement: 'top',
-    type: 'primary',
-    effect: 'dark',
-    trigger: 'hover',
-    showAfter: 0,
-    hideAfter: 120,
-    disabled: false,
-  }
-)
-
-const triggerRef = ref<HTMLElement | null>(null)
-const popperRef = ref<HTMLElement | null>(null)
-const visible = ref(false)
-const popperStyle = ref<Record<string, string>>({})
-
-let showTimer: ReturnType<typeof setTimeout> | undefined
-let hideTimer: ReturnType<typeof setTimeout> | undefined
-let inPopper = false
-
-const updatePosition = () => {
-  const trigger = triggerRef.value
-  const popper = popperRef.value
-  if (!trigger || !popper) return
-
-  const rect = trigger.getBoundingClientRect()
-  const popRect = popper.getBoundingClientRect()
-  const gap = 10
-  let top = 0
-  let left = 0
-
-  switch (props.placement) {
-    case 'bottom':
-      top = rect.bottom + gap
-      left = rect.left + rect.width / 2 - popRect.width / 2
-      break
-    case 'left':
-      top = rect.top + rect.height / 2 - popRect.height / 2
-      left = rect.left - popRect.width - gap
-      break
-    case 'right':
-      top = rect.top + rect.height / 2 - popRect.height / 2
-      left = rect.right + gap
-      break
-    default:
-      top = rect.top - popRect.height - gap
-      left = rect.left + rect.width / 2 - popRect.width / 2
-  }
-
-  left = Math.min(Math.max(4, left), window.innerWidth - popRect.width - 4)
-  top = Math.min(Math.max(4, top), window.innerHeight - popRect.height - 4)
-
-  popperStyle.value = {
-    position: 'fixed',
-    top: `${Math.round(top)}px`,
-    left: `${Math.round(left)}px`,
-    zIndex: '4100',
-  }
-}
-
-const clearTimers = () => {
-  if (showTimer) clearTimeout(showTimer)
-  if (hideTimer) clearTimeout(hideTimer)
-  showTimer = undefined
-  hideTimer = undefined
-}
-
-const show = async () => {
-  if (props.disabled) return
-  clearTimers()
-  showTimer = setTimeout(async () => {
-    visible.value = true
-    await nextTick()
-    updatePosition()
-    requestAnimationFrame(() => updatePosition())
-  }, props.showAfter)
-}
-
-const hide = () => {
-  clearTimers()
-  hideTimer = setTimeout(() => {
-    if (!inPopper || props.trigger === 'click') visible.value = false
-    if (props.trigger === 'hover' && !inPopper) visible.value = false
-  }, props.hideAfter)
-}
-
-const onTriggerEnter = () => {
-  if (props.trigger !== 'hover') return
-  inPopper = false
-  show()
-}
-
-const onTriggerLeave = () => {
-  if (props.trigger === 'hover') {
-    inPopper = false
-    hide()
-  }
-}
-
-const onTriggerClick = () => {
-  if (props.trigger !== 'click' || props.disabled) return
-  if (visible.value) {
-    visible.value = false
-  } else {
-    show()
-  }
-}
-
-const onPopperEnter = () => {
-  if (props.trigger !== 'hover') return
-  inPopper = true
-  clearTimers()
-}
-
-const onDocClick = (e: MouseEvent) => {
-  if (props.trigger !== 'click' || !visible.value) return
-  const t = e.target as Node
-  if (triggerRef.value?.contains(t) || popperRef.value?.contains(t)) return
-  visible.value = false
-}
-
-const onScrollOrResize = () => {
-  if (visible.value) updatePosition()
-}
-
-watch(visible, (v) => {
-  if (v) {
-    window.addEventListener('scroll', onScrollOrResize, true)
-    window.addEventListener('resize', onScrollOrResize)
-    if (props.trigger === 'click') document.addEventListener('click', onDocClick, true)
-  } else {
-    window.removeEventListener('scroll', onScrollOrResize, true)
-    window.removeEventListener('resize', onScrollOrResize)
-    document.removeEventListener('click', onDocClick, true)
-  }
-})
-
-onBeforeUnmount(() => {
-  clearTimers()
-  window.removeEventListener('scroll', onScrollOrResize, true)
-  window.removeEventListener('resize', onScrollOrResize)
-  document.removeEventListener('click', onDocClick, true)
-})
-</script>
-
-<style lang="scss" scoped>
-.qiu-tips-host {
-  display: inline-flex;
-  vertical-align: middle;
-}
-
-.qiu-tips__trigger {
-  display: inline-flex;
-  vertical-align: middle;
-  cursor: default;
-}
-
-.qiu-tips {
-  --qiu-tips-color: var(--qiu-color-primary, #0f766e);
-  position: fixed;
-  box-sizing: border-box;
-  max-width: 320px;
-  padding: 8px 12px;
-  font-size: 13px;
-  line-height: 1.5;
-  word-break: break-word;
-  pointer-events: auto;
-  border: 1px solid transparent;
-  border-radius: 6px;
-  box-shadow: var(--qiu-box-shadow-light, 0 4px 12px rgba(0, 0, 0, 0.12));
-}
-
-.qiu-tips__title {
-  margin-bottom: 4px;
-  font-weight: 600;
-}
-
-.qiu-tips__content {
-  position: relative;
-  z-index: 1;
-}
-
-.qiu-tips__arrow {
-  position: absolute;
-  width: 10px;
-  height: 10px;
-  pointer-events: none;
-  background: inherit;
-  border: inherit;
-  border-right: 0;
-  border-bottom: 0;
-}
-
-.qiu-tips--top .qiu-tips__arrow {
-  bottom: -6px;
-  left: 50%;
-  margin-left: -5px;
-  transform: rotate(-135deg);
-}
-
-.qiu-tips--bottom .qiu-tips__arrow {
-  top: -6px;
-  left: 50%;
-  margin-left: -5px;
-  transform: rotate(45deg);
-}
-
-.qiu-tips--left .qiu-tips__arrow {
-  top: 50%;
-  right: -6px;
-  margin-top: -5px;
-  transform: rotate(135deg);
-}
-
-.qiu-tips--right .qiu-tips__arrow {
-  top: 50%;
-  left: -6px;
-  margin-top: -5px;
-  transform: rotate(-45deg);
-}
-
-.qiu-tips--primary { --qiu-tips-color: var(--qiu-color-primary, #0f766e); }
-.qiu-tips--success { --qiu-tips-color: var(--qiu-color-success, #67c23a); }
-.qiu-tips--warning { --qiu-tips-color: var(--qiu-color-warning, #e6a23c); }
-.qiu-tips--danger { --qiu-tips-color: var(--qiu-color-danger, #f56c6c); }
-.qiu-tips--info { --qiu-tips-color: var(--qiu-color-info, #909399); }
-.qiu-tips--cyan { --qiu-tips-color: #0ea5e9; }
-.qiu-tips--orange { --qiu-tips-color: #f97316; }
-.qiu-tips--pink { --qiu-tips-color: #ec4899; }
-.qiu-tips--teal { --qiu-tips-color: #14b8a6; }
-
-.qiu-tips--dark {
-  color: #fff;
-  background: var(--qiu-tips-color);
-  border-color: var(--qiu-tips-color);
-}
-
-.qiu-tips--light {
-  color: var(--qiu-tips-color);
-  background: #fff;
-  border-color: color-mix(in srgb, var(--qiu-tips-color) 45%, #fff);
-
-  .qiu-tips__title {
-    color: var(--qiu-tips-color);
-  }
-}
-
-.qiu-tips-fade-enter-active,
-.qiu-tips-fade-leave-active {
-  transition: opacity 0.15s ease;
-}
-
-.qiu-tips-fade-enter-from,
-.qiu-tips-fade-leave-to {
-  opacity: 0;
-}
-</style>

package/components/QiuTooltip/index.vue

@@ -1,237 +0,0 @@
-<template>
-  <span class="qiu-tooltip-host" v-bind="attrs">
-    <span
-      ref="triggerRef"
-      class="qiu-tooltip__trigger"
-      @mouseenter="onEnter"
-      @mouseleave="onLeave"
-    >
-      <slot />
-    </span>
-
-    <Teleport to="body">
-      <Transition name="qiu-tooltip-fade">
-        <div
-          v-show="visible"
-          ref="popperRef"
-          class="qiu-tooltip"
-          :class="[`qiu-tooltip--${placement}`]"
-          :style="popperStyle"
-          role="tooltip"
-          @mouseenter="onPopperEnter"
-          @mouseleave="onLeave"
-        >
-          <div class="qiu-tooltip__content">
-            <slot name="content">{{ content }}</slot>
-          </div>
-          <span class="qiu-tooltip__arrow" />
-        </div>
-      </Transition>
-    </Teleport>
-  </span>
-</template>
-
-<script lang="ts" setup>
-defineOptions({ name: 'QiuTooltip', inheritAttrs: false })
-
-type Placement = 'top' | 'bottom' | 'left' | 'right'
-
-const attrs = useAttrs()
-
-const props = withDefaults(
-  defineProps<{
-    content?: string
-    placement?: Placement
-    /** hover 延迟显示（ms） */
-    showAfter?: number
-    /** hover 延迟隐藏（ms） */
-    hideAfter?: number
-  }>(),
-  {
-    content: '',
-    placement: 'top',
-    showAfter: 0,
-    hideAfter: 100,
-  }
-)
-
-const triggerRef = ref<HTMLElement | null>(null)
-const popperRef = ref<HTMLElement | null>(null)
-const visible = ref(false)
-const popperStyle = ref<Record<string, string>>({})
-
-let showTimer: ReturnType<typeof setTimeout> | undefined
-let hideTimer: ReturnType<typeof setTimeout> | undefined
-let inPopper = false
-
-const updatePosition = () => {
-  const trigger = triggerRef.value
-  const popper = popperRef.value
-  if (!trigger || !popper) return
-
-  const rect = trigger.getBoundingClientRect()
-  const popRect = popper.getBoundingClientRect()
-  const gap = 8
-  let top = 0
-  let left = 0
-
-  switch (props.placement) {
-    case 'bottom':
-      top = rect.bottom + gap
-      left = rect.left + rect.width / 2 - popRect.width / 2
-      break
-    case 'left':
-      top = rect.top + rect.height / 2 - popRect.height / 2
-      left = rect.left - popRect.width - gap
-      break
-    case 'right':
-      top = rect.top + rect.height / 2 - popRect.height / 2
-      left = rect.right + gap
-      break
-    default:
-      top = rect.top - popRect.height - gap
-      left = rect.left + rect.width / 2 - popRect.width / 2
-  }
-
-  const vw = window.innerWidth
-  const vh = window.innerHeight
-  left = Math.min(Math.max(4, left), vw - popRect.width - 4)
-  top = Math.min(Math.max(4, top), vh - popRect.height - 4)
-
-  popperStyle.value = {
-    position: 'fixed',
-    top: `${top}px`,
-    left: `${left}px`,
-    zIndex: '3000',
-  }
-}
-
-const clearTimers = () => {
-  if (showTimer) clearTimeout(showTimer)
-  if (hideTimer) clearTimeout(hideTimer)
-  showTimer = undefined
-  hideTimer = undefined
-}
-
-const show = async () => {
-  clearTimers()
-  showTimer = setTimeout(async () => {
-    visible.value = true
-    await nextTick()
-    updatePosition()
-  }, props.showAfter)
-}
-
-const hide = () => {
-  clearTimers()
-  hideTimer = setTimeout(() => {
-    if (!inPopper) visible.value = false
-  }, props.hideAfter)
-}
-
-const onEnter = () => {
-  inPopper = false
-  show()
-}
-
-const onLeave = () => hide()
-
-const onPopperEnter = () => {
-  inPopper = true
-  clearTimers()
-}
-
-const onScrollOrResize = () => {
-  if (visible.value) updatePosition()
-}
-
-watch(visible, (v) => {
-  if (v) {
-    window.addEventListener('scroll', onScrollOrResize, true)
-    window.addEventListener('resize', onScrollOrResize)
-  } else {
-    window.removeEventListener('scroll', onScrollOrResize, true)
-    window.removeEventListener('resize', onScrollOrResize)
-  }
-})
-
-onBeforeUnmount(() => {
-  clearTimers()
-  window.removeEventListener('scroll', onScrollOrResize, true)
-  window.removeEventListener('resize', onScrollOrResize)
-})
-</script>
-
-<style lang="scss" scoped>
-.qiu-tooltip-host {
-  display: inline-flex;
-  vertical-align: middle;
-}
-
-.qiu-tooltip__trigger {
-  display: inline-flex;
-  vertical-align: middle;
-}
-
-.qiu-tooltip {
-  position: fixed;
-  max-width: 320px;
-  padding: 6px 10px;
-  font-size: 12px;
-  line-height: 1.5;
-  color: #fff;
-  word-break: break-word;
-  background: var(--qiu-text-color-primary, var(--qiu-text-color-primary, #303133));
-  border-radius: 4px;
-  box-shadow: var(--qiu-box-shadow-light, 0 2px 8px rgba(0, 0, 0, 0.12));
-  box-sizing: border-box;
-  pointer-events: auto;
-}
-
-.qiu-tooltip__content {
-  position: relative;
-  z-index: 1;
-}
-
-.qiu-tooltip__arrow {
-  position: absolute;
-  width: 8px;
-  height: 8px;
-  background: inherit;
-  transform: rotate(45deg);
-}
-
-.qiu-tooltip--top .qiu-tooltip__arrow {
-  bottom: -4px;
-  left: 50%;
-  margin-left: -4px;
-}
-
-.qiu-tooltip--bottom .qiu-tooltip__arrow {
-  top: -4px;
-  left: 50%;
-  margin-left: -4px;
-}
-
-.qiu-tooltip--left .qiu-tooltip__arrow {
-  top: 50%;
-  right: -4px;
-  margin-top: -4px;
-}
-
-.qiu-tooltip--right .qiu-tooltip__arrow {
-  top: 50%;
-  left: -4px;
-  margin-top: -4px;
-}
-
-.qiu-tooltip-fade-enter-active,
-.qiu-tooltip-fade-leave-active {
-  transition: opacity 0.15s ease;
-}
-
-.qiu-tooltip-fade-enter-from,
-.qiu-tooltip-fade-leave-to {
-  opacity: 0;
-}
-</style>