foucui 1.0.1 → 2.0.0

package/components/QiuPopover/index.vue

@@ -1,277 +0,0 @@
-<template>
-  <span class="qiu-popover-host" v-bind="attrs">
-    <span
-      ref="triggerRef"
-      class="qiu-popover__trigger"
-      @click="onTriggerClick"
-      @mouseenter="onTriggerEnter"
-      @mouseleave="onTriggerLeave"
-    >
-      <slot name="reference" />
-    </span>
-
-    <Teleport to="body">
-      <Transition name="qiu-popover-fade">
-        <div v-show="isVisible" class="qiu-popover-root" :style="{ zIndex: String(zIndex) }">
-          <div
-            v-if="trigger === 'click'"
-            class="qiu-popover__mask"
-            @click="onMaskClick"
-          />
-          <div
-            ref="popperRef"
-            class="qiu-popover"
-            :class="[`qiu-popover--${placement}`]"
-            :style="popperStyle"
-            role="dialog"
-            @mouseenter="onPopperEnter"
-            @mouseleave="onPopperLeave"
-            @click.stop
-          >
-            <div v-if="title || $slots.title" class="qiu-popover__title">
-              <slot name="title">{{ title }}</slot>
-            </div>
-            <div class="qiu-popover__body">
-              <slot />
-            </div>
-          </div>
-        </div>
-      </Transition>
-    </Teleport>
-  </span>
-</template>
-
-<script lang="ts" setup>
-defineOptions({ name: 'QiuPopover', inheritAttrs: false })
-
-type Placement = 'top' | 'bottom' | 'left' | 'right'
-type Trigger = 'click' | 'hover'
-
-const attrs = useAttrs()
-
-const props = withDefaults(
-  defineProps<{
-    visible?: boolean
-    title?: string
-    width?: string | number
-    placement?: Placement
-    trigger?: Trigger
-    /** 点击遮罩关闭（仅 click 模式） */
-    closeOnClickOutside?: boolean
-    zIndex?: number
-  }>(),
-  {
-    title: '',
-    width: 240,
-    placement: 'bottom',
-    trigger: 'click',
-    closeOnClickOutside: true,
-    zIndex: 2000,
-  }
-)
-
-const emit = defineEmits<{
-  'update:visible': [boolean]
-  show: []
-  hide: []
-}>()
-
-const triggerRef = ref<HTMLElement | null>(null)
-const popperRef = ref<HTMLElement | null>(null)
-const internalVisible = ref(false)
-const popperStyle = ref<Record<string, string>>({})
-const inPopper = ref(false)
-
-const isControlled = computed(() => props.visible !== undefined)
-const isVisible = computed({
-  get: () => (isControlled.value ? !!props.visible : internalVisible.value),
-  set: (v: boolean) => {
-    if (isControlled.value) emit('update:visible', v)
-    else internalVisible.value = v
-  },
-})
-
-const resolvedWidth = computed(() =>
-  typeof props.width === 'number' ? `${props.width}px` : String(props.width)
-)
-
-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 'top':
-      top = rect.top - popRect.height - 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.bottom + 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`,
-    width: resolvedWidth.value,
-  }
-}
-
-const open = async () => {
-  if (isVisible.value) return
-  isVisible.value = true
-  emit('show')
-  await nextTick()
-  updatePosition()
-}
-
-const close = () => {
-  if (!isVisible.value) return
-  isVisible.value = false
-  emit('hide')
-}
-
-const onTriggerClick = () => {
-  if (props.trigger !== 'click') return
-  if (isVisible.value) close()
-  else open()
-}
-
-let hoverTimer: ReturnType<typeof setTimeout> | undefined
-
-const onTriggerEnter = () => {
-  if (props.trigger !== 'hover') return
-  if (hoverTimer) clearTimeout(hoverTimer)
-  open()
-}
-
-const onTriggerLeave = () => {
-  if (props.trigger !== 'hover') return
-  hoverTimer = setTimeout(() => {
-    if (!inPopper.value) close()
-  }, 120)
-}
-
-const onPopperEnter = () => {
-  inPopper.value = true
-  if (hoverTimer) clearTimeout(hoverTimer)
-}
-
-const onPopperLeave = () => {
-  inPopper.value = false
-  if (props.trigger === 'hover') onTriggerLeave()
-}
-
-const onMaskClick = () => {
-  if (props.trigger === 'click' && props.closeOnClickOutside) close()
-}
-
-const onDocClick = (e: MouseEvent) => {
-  if (props.trigger !== 'click' || !isVisible.value) return
-  const t = e.target as Node
-  if (triggerRef.value?.contains(t) || popperRef.value?.contains(t)) return
-  if (props.closeOnClickOutside) close()
-}
-
-const onScrollOrResize = () => {
-  if (isVisible.value) updatePosition()
-}
-
-watch(isVisible, (v) => {
-  if (v) {
-    document.addEventListener('click', onDocClick, true)
-    window.addEventListener('scroll', onScrollOrResize, true)
-    window.addEventListener('resize', onScrollOrResize)
-  } else {
-    document.removeEventListener('click', onDocClick, true)
-    window.removeEventListener('scroll', onScrollOrResize, true)
-    window.removeEventListener('resize', onScrollOrResize)
-  }
-})
-
-onBeforeUnmount(() => {
-  if (hoverTimer) clearTimeout(hoverTimer)
-  document.removeEventListener('click', onDocClick, true)
-  window.removeEventListener('scroll', onScrollOrResize, true)
-  window.removeEventListener('resize', onScrollOrResize)
-})
-</script>
-
-<style lang="scss" scoped>
-.qiu-popover-host {
-  display: inline-flex;
-  vertical-align: middle;
-}
-
-.qiu-popover__trigger {
-  display: inline-flex;
-  vertical-align: middle;
-}
-
-.qiu-popover-root {
-  position: fixed;
-  inset: 0;
-  pointer-events: none;
-}
-
-.qiu-popover__mask {
-  position: absolute;
-  inset: 0;
-  pointer-events: auto;
-  background: transparent;
-}
-
-.qiu-popover {
-  position: fixed;
-  pointer-events: auto;
-  background: var(--qiu-bg-color, var(--qiu-bg-color, #fff));
-  border: 1px solid var(--qiu-border-color-lighter, var(--qiu-border-color-lighter, #ebeef5));
-  border-radius: 4px;
-  box-shadow: var(--qiu-box-shadow-light, 0 4px 12px rgba(0, 0, 0, 0.1));
-  box-sizing: border-box;
-}
-
-.qiu-popover__title {
-  padding: 10px 12px 0;
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--qiu-text-color-primary, var(--qiu-text-color-primary, #303133));
-}
-
-.qiu-popover__body {
-  padding: 10px 12px 12px;
-  font-size: 14px;
-  line-height: 1.5;
-  color: var(--qiu-text-color-regular, var(--qiu-text-color-regular, #606266));
-}
-
-.qiu-popover-fade-enter-active,
-.qiu-popover-fade-leave-active {
-  transition: opacity 0.15s ease;
-}
-
-.qiu-popover-fade-enter-from,
-.qiu-popover-fade-leave-to {
-  opacity: 0;
-}
-</style>

package/components/QiuProgress/index.vue

@@ -1,235 +0,0 @@
-<template>
-  <div
-    class="qiu-progress"
-    :class="[
-      `qiu-progress--${type}`,
-      { 'is-success': resolvedStatus === 'success', 'is-exception': resolvedStatus === 'exception', 'is-warning': resolvedStatus === 'warning' },
-    ]"
-    role="progressbar"
-    :aria-valuenow="clampedPercent"
-    aria-valuemin="0"
-    aria-valuemax="100"
-  >
-    <!-- line -->
-    <template v-if="type === 'line'">
-      <div class="qiu-progress__outer" :style="{ height: `${strokeWidth}px` }">
-        <div
-          class="qiu-progress__inner"
-          :class="{ 'is-text-inside': textInside }"
-          :style="barStyle"
-        >
-          <span v-if="textInside && showText" class="qiu-progress__text qiu-progress__text--inside">
-            <slot name="default">{{ displayText }}</slot>
-          </span>
-        </div>
-      </div>
-      <span v-if="!textInside && showText" class="qiu-progress__text">
-        <slot name="default">{{ displayText }}</slot>
-      </span>
-    </template>
-
-    <!-- circle / dashboard -->
-    <div v-else class="qiu-progress__circle" :style="{ width: `${width}px`, height: `${width}px` }">
-      <svg :viewBox="`0 0 ${width} ${width}`">
-        <circle
-          class="qiu-progress__track"
-          :cx="center"
-          :cy="center"
-          :r="radius"
-          fill="none"
-          :stroke-width="strokeWidth"
-        />
-        <circle
-          class="qiu-progress__path"
-          :cx="center"
-          :cy="center"
-          :r="radius"
-          fill="none"
-          :stroke="strokeColor"
-          :stroke-width="strokeWidth"
-          :stroke-dasharray="circumference"
-          :stroke-dashoffset="dashOffset"
-          :stroke-linecap="type === 'dashboard' ? 'round' : 'butt'"
-          :transform="circleTransform"
-        />
-      </svg>
-      <div v-if="showText" class="qiu-progress__circle-text">
-        <slot name="default">{{ displayText }}</slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-defineOptions({ name: 'QiuProgress' })
-
-const props = withDefaults(
-  defineProps<{
-    percentage?: number
-    type?: 'line' | 'circle' | 'dashboard'
-    status?: 'success' | 'exception' | 'warning' | ''
-    strokeWidth?: number
-    textInside?: boolean
-    color?: string | ((pct: number) => string)
-    showText?: boolean
-    width?: number
-  }>(),
-  {
-    percentage: 0,
-    type: 'line',
-    status: '',
-    strokeWidth: 6,
-    textInside: false,
-    showText: true,
-    width: 126,
-  }
-)
-
-const clampedPercent = computed(() => Math.min(100, Math.max(0, props.percentage)))
-
-const resolvedStatus = computed(() => {
-  if (props.status) return props.status
-  if (clampedPercent.value >= 100) return 'success'
-  return ''
-})
-
-const statusColor = computed(() => {
-  const map: Record<string, string> = {
-    success: 'var(--qiu-color-success, var(--qiu-color-success, #67c23a))',
-    exception: 'var(--qiu-color-danger, var(--qiu-color-danger, #f56c6c))',
-    warning: 'var(--qiu-color-warning, var(--qiu-color-warning, #e6a23c))',
-  }
-  return map[resolvedStatus.value] || 'var(--qiu-color-primary, var(--qiu-color-primary, #0f766e))'
-})
-
-const strokeColor = computed(() => {
-  if (typeof props.color === 'string') return props.color
-  if (typeof props.color === 'function') return props.color(clampedPercent.value)
-  return statusColor.value
-})
-
-const barStyle = computed(() => ({
-  width: `${clampedPercent.value}%`,
-  backgroundColor: strokeColor.value,
-}))
-
-const displayText = computed(() => {
-  if (resolvedStatus.value === 'success') return '✓'
-  if (resolvedStatus.value === 'exception') return '✕'
-  if (resolvedStatus.value === 'warning') return '!'
-  return `${clampedPercent.value}%`
-})
-
-const center = computed(() => props.width / 2)
-const radius = computed(() => (props.width - props.strokeWidth) / 2)
-const circumference = computed(() => 2 * Math.PI * radius.value)
-
-const arcRatio = computed(() => (props.type === 'dashboard' ? 0.75 : 1))
-
-const dashOffset = computed(() => {
-  const pct = clampedPercent.value / 100
-  return circumference.value * (1 - pct * arcRatio.value)
-})
-
-const circleTransform = computed(() => {
-  if (props.type === 'dashboard') {
-    return `rotate(135 ${center.value} ${center.value})`
-  }
-  return `rotate(-90 ${center.value} ${center.value})`
-})
-</script>
-
-<style lang="scss" scoped>
-.qiu-progress {
-  display: inline-flex;
-  align-items: center;
-  max-width: 100%;
-  line-height: 1;
-
-  &--line {
-    width: 100%;
-    gap: 8px;
-  }
-
-  &--circle,
-  &--dashboard {
-    display: inline-block;
-  }
-}
-
-.qiu-progress__outer {
-  flex: 1;
-  overflow: hidden;
-  background: var(--qiu-border-color-lighter, var(--qiu-border-color-lighter, #ebeef5));
-  border-radius: 100px;
-}
-
-.qiu-progress__inner {
-  height: 100%;
-  border-radius: 100px;
-  transition: width 0.3s ease;
-
-  &.is-text-inside {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    min-width: fit-content;
-  }
-}
-
-.qiu-progress__text {
-  flex-shrink: 0;
-  font-size: var(--qiu-font-size-small, 13px);
-  color: var(--qiu-text-color-regular, var(--qiu-text-color-regular, #606266));
-
-  &--inside {
-    padding: 0 6px;
-    font-size: 12px;
-    color: #fff;
-    white-space: nowrap;
-  }
-}
-
-.qiu-progress__circle {
-  position: relative;
-  display: inline-block;
-
-  svg {
-    display: block;
-    transform: rotate(0deg);
-  }
-}
-
-.qiu-progress__track {
-  stroke: var(--qiu-border-color-lighter, var(--qiu-border-color-lighter, #ebeef5));
-}
-
-.qiu-progress__path {
-  transition: stroke-dashoffset 0.3s ease;
-}
-
-.qiu-progress__circle-text {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: var(--qiu-font-size, 14px);
-  color: var(--qiu-text-color-regular, var(--qiu-text-color-regular, #606266));
-}
-
-.is-success .qiu-progress__text,
-.is-success .qiu-progress__circle-text {
-  color: var(--qiu-color-success, var(--qiu-color-success, #67c23a));
-}
-
-.is-exception .qiu-progress__text,
-.is-exception .qiu-progress__circle-text {
-  color: var(--qiu-color-danger, var(--qiu-color-danger, #f56c6c));
-}
-
-.is-warning .qiu-progress__text,
-.is-warning .qiu-progress__circle-text {
-  color: var(--qiu-color-warning, var(--qiu-color-warning, #e6a23c));
-}
-</style>