foucui 1.0.1 → 2.0.0

package/components/QiuSlider/index.vue

@@ -1,266 +0,0 @@
-<template>
-  <div
-    class="qiu-slider"
-    :class="{
-      'is-disabled': disabled,
-    }"
-  >
-    <div
-      ref="trackRef"
-      class="qiu-slider__runway"
-      @mousedown="onTrackClick"
-    >
-      <div class="qiu-slider__bar" :style="{ width: `${percent}%` }" />
-      <div
-        ref="thumbRef"
-        class="qiu-slider__button-wrapper"
-        :style="{ left: `${percent}%` }"
-        tabindex="0"
-        role="slider"
-        :aria-valuemin="min"
-        :aria-valuemax="max"
-        :aria-valuenow="currentValue"
-        :aria-disabled="disabled"
-        @mousedown.stop="startDrag"
-        @keydown.left.prevent="stepValue(-step)"
-        @keydown.right.prevent="stepValue(step)"
-        @keydown.down.prevent="stepValue(-step)"
-        @keydown.up.prevent="stepValue(step)"
-        @mouseenter="showTip = showTooltip"
-        @mouseleave="showTip = false"
-      >
-        <div class="qiu-slider__button" />
-        <Transition name="qiu-slider-tip">
-          <div v-if="showTip && showTooltip" class="qiu-slider__tooltip">
-            {{ currentValue }}
-          </div>
-        </Transition>
-      </div>
-    </div>
-    <input
-      type="range"
-      class="qiu-slider__native"
-      :min="min"
-      :max="max"
-      :step="step"
-      :value="currentValue"
-      :disabled="disabled"
-      tabindex="-1"
-      @input="onNativeInput"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-defineOptions({ name: 'QiuSlider' })
-
-const props = withDefaults(
-  defineProps<{
-    modelValue?: number
-    min?: number
-    max?: number
-    step?: number
-    disabled?: boolean
-    showTooltip?: boolean
-  }>(),
-  {
-    modelValue: 0,
-    min: 0,
-    max: 100,
-    step: 1,
-    disabled: false,
-    showTooltip: true,
-  }
-)
-
-const emit = defineEmits<{
-  'update:modelValue': [number]
-  change: [number]
-  input: [number]
-}>()
-
-const trackRef = ref<HTMLElement | null>(null)
-const thumbRef = ref<HTMLElement | null>(null)
-const dragging = ref(false)
-const showTip = ref(false)
-
-const currentValue = computed(() => {
-  const v = props.modelValue ?? props.min
-  return Math.min(props.max, Math.max(props.min, v))
-})
-
-const percent = computed(() => {
-  const range = props.max - props.min
-  if (range <= 0) return 0
-  return ((currentValue.value - props.min) / range) * 100
-})
-
-const setValue = (val: number, emitChange = true) => {
-  const clamped = Math.min(props.max, Math.max(props.min, val))
-  const stepped = Math.round((clamped - props.min) / props.step) * props.step + props.min
-  const final = Number(stepped.toFixed(10))
-  emit('update:modelValue', final)
-  emit('input', final)
-  if (emitChange) emit('change', final)
-}
-
-const valueFromClientX = (clientX: number) => {
-  const track = trackRef.value
-  if (!track) return currentValue.value
-  const rect = track.getBoundingClientRect()
-  const ratio = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width))
-  return props.min + ratio * (props.max - props.min)
-}
-
-const onTrackClick = (e: MouseEvent) => {
-  if (props.disabled) return
-  setValue(valueFromClientX(e.clientX))
-}
-
-const startDrag = () => {
-  if (props.disabled) return
-  dragging.value = true
-  showTip.value = props.showTooltip
-
-  const onMove = (e: MouseEvent) => {
-    if (!dragging.value) return
-    setValue(valueFromClientX(e.clientX), false)
-  }
-
-  const onUp = (e: MouseEvent) => {
-    dragging.value = false
-    showTip.value = false
-    setValue(valueFromClientX(e.clientX))
-    document.removeEventListener('mousemove', onMove)
-    document.removeEventListener('mouseup', onUp)
-  }
-
-  document.addEventListener('mousemove', onMove)
-  document.addEventListener('mouseup', onUp)
-}
-
-const stepValue = (delta: number) => {
-  if (props.disabled) return
-  setValue(currentValue.value + delta)
-}
-
-const onNativeInput = (e: Event) => {
-  setValue(Number((e.target as HTMLInputElement).value), false)
-}
-</script>
-
-<style lang="scss" scoped>
-.qiu-slider {
-  /* 左右预留半个手柄宽度，避免 0%/100% 时被父级 overflow 裁切 */
-  --qiu-slider-thumb-size: 20px;
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: 32px;
-  padding: 0 calc(var(--qiu-slider-thumb-size) / 2);
-  overflow: visible;
-
-  &.is-disabled {
-    cursor: not-allowed;
-    opacity: 0.6;
-
-    .qiu-slider__button {
-      cursor: not-allowed;
-    }
-  }
-}
-
-.qiu-slider__runway {
-  position: relative;
-  flex: 1;
-  height: 6px;
-  margin: 0;
-  cursor: pointer;
-  background: var(--qiu-border-color-lighter, var(--qiu-border-color-lighter, #ebeef5));
-  border-radius: 3px;
-  overflow: visible;
-}
-
-.qiu-slider__bar {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  background: var(--qiu-color-primary, var(--qiu-color-primary));
-  border-radius: 3px;
-  transition: width 0.1s ease;
-}
-
-.qiu-slider__button-wrapper {
-  position: absolute;
-  top: 50%;
-  z-index: 1;
-  outline: none;
-  transform: translate(-50%, -50%);
-}
-
-.qiu-slider__button {
-  box-sizing: border-box;
-  width: var(--qiu-slider-thumb-size);
-  height: var(--qiu-slider-thumb-size);
-  cursor: grab;
-  background: var(--qiu-bg-color, var(--qiu-bg-color, #fff));
-  border: 2px solid var(--qiu-color-primary, var(--qiu-color-primary));
-  border-radius: 50%;
-  transition: transform 0.15s ease;
-
-  &:hover,
-  .qiu-slider__button-wrapper:focus & {
-    transform: scale(1.1);
-  }
-
-  &:active {
-    cursor: grabbing;
-  }
-}
-
-.qiu-slider__tooltip {
-  position: absolute;
-  bottom: calc(100% + 8px);
-  left: 50%;
-  padding: 4px 8px;
-  font-size: 12px;
-  line-height: 1.4;
-  color: #fff;
-  white-space: nowrap;
-  background: var(--qiu-color-primary, var(--qiu-color-primary));
-  border-radius: 4px;
-  transform: translateX(-50%);
-
-  &::after {
-    position: absolute;
-    top: 100%;
-    left: 50%;
-    content: '';
-    border: 4px solid transparent;
-    border-top-color: var(--qiu-color-primary, var(--qiu-color-primary));
-    transform: translateX(-50%);
-  }
-}
-
-.qiu-slider__native {
-  position: absolute;
-  width: 0;
-  height: 0;
-  pointer-events: none;
-  opacity: 0;
-}
-
-.qiu-slider-tip-enter-active,
-.qiu-slider-tip-leave-active {
-  transition: opacity 0.15s ease, transform 0.15s ease;
-}
-
-.qiu-slider-tip-enter-from,
-.qiu-slider-tip-leave-to {
-  opacity: 0;
-  transform: translateX(-50%) translateY(4px);
-}
-</style>

package/components/QiuSpace/index.vue

@@ -1,95 +0,0 @@
-<template>
-  <div class="qiu-space" :class="spaceClass" :style="spaceStyle">
-    <template v-for="(child, i) in slotChildren" :key="i">
-      <component :is="child" />
-      <span v-if="spacer && i < slotChildren.length - 1" class="qiu-space__spacer">{{ spacer }}</span>
-    </template>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { Comment, Fragment, Text, useSlots, type VNode } from 'vue'
-
-defineOptions({ name: 'QiuSpace' })
-
-const SIZE_MAP: Record<string, number> = {
-  small: 8,
-  default: 12,
-  large: 16,
-}
-
-const props = withDefaults(
-  defineProps<{
-    size?: 'small' | 'default' | 'large' | number
-    direction?: 'horizontal' | 'vertical'
-    alignment?: 'start' | 'end' | 'center' | 'baseline' | 'stretch'
-    wrap?: boolean
-    spacer?: string
-  }>(),
-  {
-    size: 'small',
-    direction: 'horizontal',
-    alignment: 'center',
-    wrap: false,
-    spacer: '',
-  }
-)
-
-const slots = useSlots()
-
-const flattenNodes = (nodes: VNode[]): VNode[] => {
-  const result: VNode[] = []
-  for (const node of nodes) {
-    if (node.type === Comment) continue
-    if (node.type === Text && !String(node.children ?? '').trim()) continue
-    if (node.type === Fragment && Array.isArray(node.children)) {
-      result.push(...flattenNodes(node.children as VNode[]))
-    } else {
-      result.push(node)
-    }
-  }
-  return result
-}
-
-const slotChildren = computed(() => flattenNodes((slots.default?.() ?? []) as VNode[]))
-
-const gap = computed(() => {
-  if (typeof props.size === 'number') return `${props.size}px`
-  return `${SIZE_MAP[props.size] ?? SIZE_MAP.small}px`
-})
-
-const spaceClass = computed(() => ({
-  'qiu-space--vertical': props.direction === 'vertical',
-  'is-wrap': props.wrap,
-}))
-
-const alignMap: Record<string, string> = {
-  start: 'flex-start',
-  end: 'flex-end',
-  center: 'center',
-  baseline: 'baseline',
-  stretch: 'stretch',
-}
-
-const spaceStyle = computed(() => ({
-  gap: gap.value,
-  flexDirection: props.direction === 'vertical' ? 'column' : 'row',
-  alignItems: alignMap[props.alignment] || 'center',
-  flexWrap: props.wrap ? 'wrap' : 'nowrap',
-}))
-</script>
-
-<style lang="scss" scoped>
-.qiu-space {
-  display: inline-flex;
-
-  &.is-wrap {
-    flex-wrap: wrap;
-  }
-}
-
-.qiu-space__spacer {
-  color: var(--qiu-text-color-placeholder, var(--qiu-text-color-placeholder, #a8abb2));
-  user-select: none;
-}
-</style>

package/components/QiuSparkline/index.vue

@@ -1,92 +0,0 @@
-<template>
-  <span class="qiu-sparkline" :style="{ width: `${width}px`, height: `${height}px` }">
-    <svg :viewBox="`0 0 ${width} ${height}`" class="qiu-sparkline__svg" preserveAspectRatio="none">
-      <defs>
-        <linearGradient :id="gradId" x1="0" y1="0" x2="0" y2="1">
-          <stop offset="0%" :stop-color="color" stop-opacity="0.32" />
-          <stop offset="100%" :stop-color="color" stop-opacity="0" />
-        </linearGradient>
-      </defs>
-      <path v-if="areaPath" :d="areaPath" :fill="`url(#${gradId})`" />
-      <path :d="linePath" :stroke="color" :stroke-width="strokeWidth" fill="none" stroke-linejoin="round" stroke-linecap="round" />
-    </svg>
-  </span>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue'
-
-defineOptions({ name: 'QiuSparkline' })
-
-const props = withDefaults(
-  defineProps<{
-    data?: number[]
-    width?: number
-    height?: number
-    color?: string
-    /** 是否填充面积 */
-    fill?: boolean
-    strokeWidth?: number
-  }>(),
-  {
-    data: () => [],
-    width: 120,
-    height: 36,
-    color: 'var(--qiu-color-primary, #409eff)',
-    fill: true,
-    strokeWidth: 1.5,
-  }
-)
-
-const gradId = `qiu-spark-${Math.random().toString(36).slice(2, 9)}`
-
-const bounds = computed(() => {
-  const arr = props.data
-  if (!arr.length) return { min: 0, max: 1 }
-  const min = Math.min(...arr)
-  const max = Math.max(...arr)
-  return { min, max: max === min ? min + 1 : max }
-})
-
-const points = computed(() => {
-  const arr = props.data
-  const n = arr.length
-  if (!n) return []
-  const { min, max } = bounds.value
-  const pad = props.strokeWidth + 1
-  const w = props.width
-  const h = props.height
-  const innerH = h - pad * 2
-  return arr.map((v, i) => {
-    const x = n === 1 ? w / 2 : (i / (n - 1)) * w
-    const y = pad + innerH - ((v - min) / (max - min)) * innerH
-    return { x, y }
-  })
-})
-
-const linePath = computed(() =>
-  points.value.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x.toFixed(2)},${p.y.toFixed(2)}`).join(' ')
-)
-
-const areaPath = computed(() => {
-  if (!props.fill || !points.value.length) return ''
-  const first = points.value[0]
-  const last = points.value[points.value.length - 1]
-  const h = props.height
-  return `${linePath.value} L${last.x.toFixed(2)},${h} L${first.x.toFixed(2)},${h} Z`
-})
-</script>
-
-<style lang="scss" scoped>
-.qiu-sparkline {
-  display: inline-flex;
-  vertical-align: middle;
-
-  &__svg {
-    display: block;
-    width: 100%;
-    height: 100%;
-    overflow: visible;
-  }
-}
-</style>

package/components/QiuStatistic/index.vue

@@ -1,4 +0,0 @@
-<script lang="ts">
-import QiuStatistic from '../QiuStatistics/index.vue'
-export default QiuStatistic
-</script>

package/components/QiuStatistics/index.vue

@@ -1,123 +0,0 @@
-<template>
-  <div class="qiu-statistic">
-    <div v-if="title || $slots.title" class="qiu-statistic__title">
-      <slot name="title">{{ title }}</slot>
-    </div>
-    <div class="qiu-statistic__content" :style="valueStyle">
-      <span v-if="prefix || $slots.prefix" class="qiu-statistic__prefix">
-        <slot name="prefix">{{ prefix }}</slot>
-      </span>
-      <span class="qiu-statistic__value">{{ displayValue }}</span>
-      <span v-if="suffix || $slots.suffix" class="qiu-statistic__suffix">
-        <slot name="suffix">{{ suffix }}</slot>
-      </span>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-defineOptions({ name: 'QiuStatistic' })
-
-const props = withDefaults(
-  defineProps<{
-    value?: number | string | Date
-    title?: string
-    precision?: number
-    prefix?: string
-    suffix?: string
-    valueStyle?: Record<string, string> | string
-    countdown?: boolean
-  }>(),
-  {
-    value: 0,
-    title: '',
-    precision: 0,
-    prefix: '',
-    suffix: '',
-    valueStyle: () => ({}),
-    countdown: false,
-  }
-)
-
-const now = ref(Date.now())
-let timer: ReturnType<typeof setInterval> | null = null
-
-const targetMs = computed(() => {
-  const v = props.value
-  if (v instanceof Date) return v.getTime()
-  if (typeof v === 'number') return v
-  const parsed = Date.parse(String(v))
-  return Number.isNaN(parsed) ? Date.now() : parsed
-})
-
-const formatCountdown = (ms: number) => {
-  const total = Math.max(0, Math.floor(ms / 1000))
-  const h = Math.floor(total / 3600)
-  const m = Math.floor((total % 3600) / 60)
-  const s = total % 60
-  const pad = (n: number) => String(n).padStart(2, '0')
-  return `${pad(h)}:${pad(m)}:${pad(s)}`
-}
-
-const formatNumber = (val: number | string) => {
-  const num = typeof val === 'number' ? val : Number(val)
-  if (Number.isNaN(num)) return String(val)
-  if (props.precision >= 0) return num.toFixed(props.precision)
-  return String(num)
-}
-
-const displayValue = computed(() => {
-  if (props.countdown) {
-    return formatCountdown(targetMs.value - now.value)
-  }
-  return formatNumber(props.value as number | string)
-})
-
-const startTick = () => {
-  stopTick()
-  if (!props.countdown) return
-  now.value = Date.now()
-  timer = setInterval(() => {
-    now.value = Date.now()
-  }, 1000)
-}
-
-const stopTick = () => {
-  if (timer) {
-    clearInterval(timer)
-    timer = null
-  }
-}
-
-watch(() => props.countdown, startTick, { immediate: true })
-onBeforeUnmount(stopTick)
-</script>
-
-<style lang="scss" scoped>
-.qiu-statistic {
-  display: inline-block;
-
-  &__title {
-    margin-bottom: 8px;
-    font-size: 14px;
-    color: var(--qiu-text-color-secondary, var(--qiu-text-color-secondary, #909399));
-  }
-
-  &__content {
-    display: inline-flex;
-    gap: 4px;
-    align-items: baseline;
-    font-size: 28px;
-    font-weight: 600;
-    line-height: 1.2;
-    color: var(--qiu-text-color-primary, var(--qiu-text-color-primary, #303133));
-  }
-
-  &__prefix,
-  &__suffix {
-    font-size: 16px;
-    font-weight: 400;
-    color: var(--qiu-text-color-regular, var(--qiu-text-color-regular, #606266));
-  }
-}
-</style>