foucui 1.0.1 → 2.0.0

package/components/QiuDigitalCard/index.vue

@@ -1,159 +0,0 @@
-<template>
-  <div class="qiu-digital-card" :class="[`qiu-digital-card--${theme}`]">
-    <div v-if="icon || $slots.icon" class="qiu-digital-card__icon">
-      <slot name="icon"><qiu-icon :icon="icon!" /></slot>
-    </div>
-    <div class="qiu-digital-card__content">
-      <div class="qiu-digital-card__value">
-        <span v-if="prefix" class="qiu-digital-card__affix">{{ prefix }}</span>
-        <span class="qiu-digital-card__num">{{ display }}</span>
-        <span v-if="suffix" class="qiu-digital-card__affix">{{ suffix }}</span>
-      </div>
-      <div v-if="title || $slots.title" class="qiu-digital-card__title">
-        <slot name="title">{{ title }}</slot>
-      </div>
-      <div v-if="$slots.footer" class="qiu-digital-card__footer">
-        <slot name="footer" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed, watch } from 'vue'
-
-defineOptions({ name: 'QiuDigitalCard' })
-
-const props = withDefaults(
-  defineProps<{
-    value?: number
-    title?: string
-    prefix?: string
-    suffix?: string
-    icon?: string
-    /** 保留小数位 */
-    precision?: number
-    /** 千分位分隔 */
-    groupSeparator?: boolean
-    /** 是否开启动画滚动 */
-    animated?: boolean
-    duration?: number
-    theme?: 'light' | 'dark'
-  }>(),
-  {
-    value: 0,
-    title: '',
-    prefix: '',
-    suffix: '',
-    icon: '',
-    precision: 0,
-    groupSeparator: true,
-    animated: true,
-    duration: 800,
-    theme: 'light',
-  }
-)
-
-const current = ref(0)
-
-const display = computed(() => {
-  const n = Number(current.value.toFixed(props.precision))
-  const fixed = n.toFixed(props.precision)
-  if (!props.groupSeparator) return fixed
-  const [int, dec] = fixed.split('.')
-  const grouped = int.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
-  return dec ? `${grouped}.${dec}` : grouped
-})
-
-const animateTo = (to: number) => {
-  if (!props.animated) {
-    current.value = to
-    return
-  }
-  const from = current.value
-  const start = performance.now()
-  const step = (now: number) => {
-    const t = Math.min(1, (now - start) / props.duration)
-    const eased = 1 - Math.pow(1 - t, 3)
-    current.value = from + (to - from) * eased
-    if (t < 1) requestAnimationFrame(step)
-    else current.value = to
-  }
-  requestAnimationFrame(step)
-}
-
-watch(
-  () => props.value,
-  (v) => animateTo(Number(v) || 0),
-  { immediate: true }
-)
-</script>
-
-<style lang="scss" scoped>
-.qiu-digital-card {
-  display: inline-flex;
-  gap: 14px;
-  align-items: center;
-  box-sizing: border-box;
-  padding: 16px 18px;
-  background: var(--qiu-bg-color, #fff);
-  border: 1px solid var(--qiu-border-color-lighter, #ebeef5);
-  border-radius: 8px;
-
-  &--dark {
-    background: var(--qiu-color-primary, #409eff);
-    border-color: transparent;
-    color: #fff;
-
-    .qiu-digital-card__title {
-      color: rgba(255, 255, 255, 0.85);
-    }
-  }
-}
-
-.qiu-digital-card__icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 44px;
-  height: 44px;
-  font-size: 20px;
-  color: var(--qiu-color-primary, #409eff);
-  background: color-mix(in srgb, var(--qiu-color-primary, #409eff) 12%, transparent);
-  border-radius: 10px;
-
-  .qiu-digital-card--dark & {
-    color: #fff;
-    background: rgba(255, 255, 255, 0.18);
-  }
-}
-
-.qiu-digital-card__value {
-  display: flex;
-  align-items: baseline;
-  font-size: 26px;
-  font-weight: 700;
-  line-height: 1.1;
-  color: var(--qiu-text-color-primary, #303133);
-
-  .qiu-digital-card--dark & {
-    color: #fff;
-  }
-}
-
-.qiu-digital-card__affix {
-  font-size: 16px;
-  font-weight: 600;
-}
-
-.qiu-digital-card__title {
-  margin-top: 4px;
-  font-size: 13px;
-  color: var(--qiu-text-color-secondary, #909399);
-}
-
-.qiu-digital-card__footer {
-  margin-top: 6px;
-  font-size: 12px;
-}
-</style>

package/components/QiuDivider/index.vue

@@ -1,185 +0,0 @@
-<template>
-  <blockquote
-    v-if="blockquote"
-    class="qiu-blockquote"
-    :class="isBorder ? `qiu-blockquote-${type} is-border` : `qiu-blockquote-${type}`"
-  >
-    <slot />
-  </blockquote>
-  <fieldset v-else-if="fieldset" class="qiu-fieldset">
-    <legend>{{ title }}</legend>
-    <slot />
-  </fieldset>
-  <div
-    v-else
-    class="qiu-divider"
-    :class="[
-      `qiu-divider--${direction}`,
-      `qiu-divider--${contentPosition}`,
-      `qiu-divider--${borderStyle}`,
-    ]"
-    role="separator"
-  >
-    <span v-if="$slots.default" class="qiu-divider__text">
-      <slot />
-    </span>
-  </div>
-</template>
-
-<script lang="ts" setup>
-defineOptions({
-  name: 'QiuDivider',
-})
-
-defineProps({
-  direction: {
-    type: String as () => 'horizontal' | 'vertical',
-    default: 'horizontal',
-  },
-  contentPosition: {
-    type: String as () => 'left' | 'center' | 'right',
-    default: 'center',
-  },
-  borderStyle: {
-    type: String as () => 'solid' | 'dashed' | 'dotted',
-    default: 'solid',
-  },
-  blockquote: {
-    type: Boolean,
-    default: false,
-  },
-  fieldset: {
-    type: Boolean,
-    default: false,
-  },
-  type: {
-    type: String,
-    default: 'primary',
-  },
-  isBorder: {
-    type: Boolean,
-    default: false,
-  },
-  title: {
-    type: String,
-    default: '',
-  },
-})
-</script>
-
-<style lang="scss" scoped>
-.qiu-blockquote {
-  width: 100%;
-  padding: 15px;
-  margin: 0 0 10px 0;
-  line-height: 1.8;
-  background-color: var(--qiu-background-color);
-  border-left: 5px solid var(--qiu-color-primary);
-  border-radius: 0 var(--qiu-border-radius-base) var(--qiu-border-radius-base) 0;
-
-  &-primary {
-    border-left: 5px solid var(--qiu-color-primary);
-  }
-
-  &-success {
-    border-left: 5px solid var(--qiu-color-success);
-  }
-
-  &-warning {
-    border-left: 5px solid var(--qiu-color-warning);
-  }
-
-  &-danger {
-    border-left: 5px solid var(--qiu-color-danger);
-  }
-
-  &-info {
-    border-left: 5px solid var(--qiu-color-info);
-  }
-
-  &.is-border {
-    border-top: 1px solid var(--qiu-border-color);
-    border-right: 1px solid var(--qiu-border-color);
-    border-bottom: 1px solid var(--qiu-border-color);
-  }
-}
-
-.qiu-fieldset {
-  padding: var(--qiu-padding);
-  margin-bottom: 10px;
-  border: 1px solid var(--qiu-border-color);
-
-  legend {
-    padding: 0 var(--qiu-padding) 0 var(--qiu-padding);
-  }
-}
-
-.qiu-divider {
-  position: relative;
-  display: block;
-  margin: 16px 0;
-  border-color: var(--qiu-border-color, #dcdfe6);
-
-  &--horizontal {
-    width: 100%;
-    height: 0;
-    border-top-width: 1px;
-
-    &.qiu-divider--solid {
-      border-top-style: solid;
-    }
-
-    &.qiu-divider--dashed {
-      border-top-style: dashed;
-    }
-
-    &.qiu-divider--dotted {
-      border-top-style: dotted;
-    }
-
-    .qiu-divider__text {
-      position: absolute;
-      top: 50%;
-      padding: 0 12px;
-      font-size: 14px;
-      color: var(--qiu-text-color-primary, #303133);
-      background: var(--qiu-bg-color, #fff);
-      transform: translateY(-50%);
-    }
-
-    &.qiu-divider--left .qiu-divider__text {
-      left: 20px;
-    }
-
-    &.qiu-divider--center .qiu-divider__text {
-      left: 50%;
-      transform: translate(-50%, -50%);
-    }
-
-    &.qiu-divider--right .qiu-divider__text {
-      right: 20px;
-    }
-  }
-
-  &--vertical {
-    display: inline-block;
-    width: 0;
-    height: 1em;
-    margin: 0 8px;
-    vertical-align: middle;
-    border-left-width: 1px;
-
-    &.qiu-divider--solid {
-      border-left-style: solid;
-    }
-
-    &.qiu-divider--dashed {
-      border-left-style: dashed;
-    }
-
-    &.qiu-divider--dotted {
-      border-left-style: dotted;
-    }
-  }
-}
-</style>

package/components/QiuDot/index.vue

@@ -1,83 +0,0 @@
-<template>
-  <span :class="'qiu-dot qiu-dot-' + type"></span>
-</template>
-
-<script lang="ts" setup>
-defineOptions({
-  name: 'QiuDot',
-})
-
-defineProps({
-  type: {
-    values: ['primary', 'success', 'warning', 'danger'],
-    type: String,
-    default: 'primary',
-  },
-})
-</script>
-
-<style lang="scss" scoped>
-/**
-  * qiu-dot：菜单角标圆点
-  * 注意：过大的 scale 脉冲在侧栏 overflow 裁剪下，Windows/Chrome 易留下「细沙状」残影
-  */
-.qiu-dot {
-  position: relative;
-  display: inline-block;
-  width: 6px;
-  height: 6px;
-  margin-right: 3px;
-  vertical-align: middle;
-  border-radius: 50%;
-  /* 限制绘制范围，避免切换菜单时脉冲层残留 */
-  overflow: visible;
-  contain: layout style;
-  isolation: isolate;
-  transform: translateZ(0);
-  backface-visibility: hidden;
-
-  @keyframes qiuDot {
-    0% {
-      opacity: 0.55;
-      transform: scale(1);
-    }
-    100% {
-      opacity: 0;
-      transform: scale(1.65);
-    }
-  }
-
-  &::after {
-    position: absolute;
-    top: 0;
-    left: 0;
-    box-sizing: border-box;
-    display: block;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    content: '';
-    border-radius: 50%;
-    /* 用 opacity 为主、缩小放大幅度，减少合成层残影 */
-    animation: qiuDot 1.4s ease-out infinite;
-    will-change: opacity, transform;
-    backface-visibility: hidden;
-  }
-
-  @mixin set-color($color) {
-    &-#{$color} {
-      background: var(--qiu-color-#{$color});
-
-      &::after {
-        background: var(--qiu-color-#{$color});
-      }
-    }
-  }
-
-  @include set-color(primary);
-  @include set-color(success);
-  @include set-color(warning);
-  @include set-color(error);
-  @include set-color(danger);
-}
-</style>