foucui 1.0.1 → 2.0.0

package/components/QiuLoading/spinner.vue

@@ -1,820 +0,0 @@
-<template>
-  <div
-    class="qiu-loading"
-    :class="[
-      `qiu-loading--${effect}`,
-      {
-        'is-fullscreen': fullscreen,
-        'is-transparent': transparent,
-      },
-    ]"
-  >
-    <div class="qiu-loading__mask" />
-    <div class="qiu-loading__content">
-      <!-- spinner：圆环 -->
-      <span v-if="effect === 'spinner'" class="qiu-loading__spinner" />
-
-      <!-- dual-ring：双环 -->
-      <span v-else-if="effect === 'dual-ring'" class="qiu-loading__dual-ring" aria-hidden="true" />
-
-      <!-- crescent：月牙 -->
-      <span v-else-if="effect === 'crescent'" class="qiu-loading__crescent" aria-hidden="true" />
-
-      <!-- gradient：渐变环 -->
-      <span v-else-if="effect === 'gradient'" class="qiu-loading__gradient" aria-hidden="true" />
-
-      <!-- dash：虚线环 -->
-      <span v-else-if="effect === 'dash'" class="qiu-loading__dash" aria-hidden="true" />
-
-      <!-- dots：三点跳动 -->
-      <span v-else-if="effect === 'dots'" class="qiu-loading__dots" aria-hidden="true">
-        <i /><i /><i />
-      </span>
-
-      <!-- wave：波浪点 -->
-      <span v-else-if="effect === 'wave'" class="qiu-loading__wave" aria-hidden="true">
-        <i /><i /><i /><i /><i />
-      </span>
-
-      <!-- bounce：弹跳球 -->
-      <span v-else-if="effect === 'bounce'" class="qiu-loading__bounce" aria-hidden="true">
-        <i /><i /><i />
-      </span>
-
-      <!-- bars：音量条 -->
-      <span v-else-if="effect === 'bars'" class="qiu-loading__bars" aria-hidden="true">
-        <i /><i /><i /><i />
-      </span>
-
-      <!-- bricks：方块阶梯 -->
-      <span v-else-if="effect === 'bricks'" class="qiu-loading__bricks" aria-hidden="true">
-        <i /><i /><i /><i /><i /><i /><i /><i /><i />
-      </span>
-
-      <!-- square：翻转方块 -->
-      <span v-else-if="effect === 'square'" class="qiu-loading__square" aria-hidden="true" />
-
-      <!-- flip：3D 翻转 -->
-      <span v-else-if="effect === 'flip'" class="qiu-loading__flip" aria-hidden="true">
-        <i />
-      </span>
-
-      <!-- pulse：呼吸圆 -->
-      <span v-else-if="effect === 'pulse'" class="qiu-loading__pulse" aria-hidden="true">
-        <i />
-      </span>
-
-      <!-- ripple：水波纹 -->
-      <span v-else-if="effect === 'ripple'" class="qiu-loading__ripple" aria-hidden="true">
-        <i /><i />
-      </span>
-
-      <!-- orbit：双环绕 -->
-      <span v-else-if="effect === 'orbit'" class="qiu-loading__orbit" aria-hidden="true">
-        <i /><i />
-      </span>
-
-      <!-- radar：雷达扫描 -->
-      <span v-else-if="effect === 'radar'" class="qiu-loading__radar" aria-hidden="true">
-        <i />
-      </span>
-
-      <!-- spiral：螺旋点 -->
-      <span v-else-if="effect === 'spiral'" class="qiu-loading__spiral" aria-hidden="true">
-        <i /><i /><i /><i /><i /><i /><i /><i />
-      </span>
-
-      <!-- infinity：∞ 轨迹 -->
-      <span v-else-if="effect === 'infinity'" class="qiu-loading__infinity" aria-hidden="true">
-        <i />
-      </span>
-
-      <!-- hourglass：沙漏 -->
-      <span v-else-if="effect === 'hourglass'" class="qiu-loading__hourglass" aria-hidden="true" />
-
-      <!-- skeleton：骨架条 -->
-      <span v-else-if="effect === 'skeleton'" class="qiu-loading__skeleton" aria-hidden="true">
-        <i /><i /><i />
-      </span>
-
-      <!-- default fallback -->
-      <span v-else class="qiu-loading__spinner" />
-
-      <p v-if="text" class="qiu-loading__text">{{ text }}</p>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { QiuLoadingEffect } from './types'
-
-defineOptions({ name: 'QiuLoading' })
-
-withDefaults(
-  defineProps<{
-    text?: string
-    fullscreen?: boolean
-    transparent?: boolean
-    effect?: QiuLoadingEffect
-  }>(),
-  {
-    text: '',
-    fullscreen: false,
-    transparent: false,
-    effect: 'spinner',
-  }
-)
-</script>
-
-<style lang="scss">
-.qiu-loading {
-  --qiu-loading-color: var(--qiu-color-primary, var(--qiu-color-primary, #0f766e));
-
-  position: absolute;
-  inset: 0;
-  z-index: 2000;
-  pointer-events: none;
-
-  &.is-fullscreen {
-    position: fixed;
-  }
-
-  &.is-transparent .qiu-loading__mask {
-    background: rgb(255 255 255 / 45%);
-  }
-}
-
-.qiu-loading__mask {
-  position: absolute;
-  inset: 0;
-  background: var(--qiu-mask-color, rgb(255 255 255 / 88%));
-  pointer-events: auto;
-  backdrop-filter: blur(1px);
-}
-
-.qiu-loading__content {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  z-index: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  align-items: center;
-  transform: translate(-50%, -50%);
-  pointer-events: none;
-}
-
-.qiu-loading__text {
-  margin: 0;
-  font-size: 13px;
-  color: var(--qiu-loading-color);
-  letter-spacing: 0.02em;
-}
-
-/* ---- spinner ---- */
-.qiu-loading__spinner {
-  display: inline-block;
-  width: 32px;
-  height: 32px;
-  border: 3px solid var(--qiu-border-color-lighter, #ebeef5);
-  border-top-color: var(--qiu-loading-color);
-  border-radius: 50%;
-  animation: qiu-loading-spin 0.75s linear infinite;
-}
-
-/* ---- dual-ring ---- */
-.qiu-loading__dual-ring {
-  position: relative;
-  display: inline-block;
-  width: 36px;
-  height: 36px;
-
-  &::before,
-  &::after {
-    position: absolute;
-    inset: 0;
-    content: '';
-    border: 3px solid transparent;
-    border-radius: 50%;
-  }
-
-  &::before {
-    border-top-color: var(--qiu-loading-color);
-    border-right-color: var(--qiu-loading-color);
-    animation: qiu-loading-spin 0.9s linear infinite;
-  }
-
-  &::after {
-    inset: 6px;
-    border-bottom-color: var(--qiu-loading-color);
-    border-left-color: var(--qiu-loading-color);
-    opacity: 0.55;
-    animation: qiu-loading-spin 1.2s linear infinite reverse;
-  }
-}
-
-/* ---- crescent ---- */
-.qiu-loading__crescent {
-  display: inline-block;
-  width: 32px;
-  height: 32px;
-  border: 3px solid transparent;
-  border-top-color: var(--qiu-loading-color);
-  border-right-color: var(--qiu-loading-color);
-  border-radius: 50%;
-  animation: qiu-loading-spin 0.7s linear infinite;
-}
-
-/* ---- gradient ---- */
-.qiu-loading__gradient {
-  display: inline-block;
-  width: 34px;
-  height: 34px;
-  border-radius: 50%;
-  background: conic-gradient(
-    from 0deg,
-    transparent 0%,
-    var(--qiu-loading-color) 70%,
-    transparent 100%
-  );
-  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
-  animation: qiu-loading-spin 0.85s linear infinite;
-}
-
-/* ---- dash ---- */
-.qiu-loading__dash {
-  display: inline-block;
-  box-sizing: border-box;
-  width: 34px;
-  height: 34px;
-  border: 3px dashed var(--qiu-loading-color);
-  border-radius: 50%;
-  animation: qiu-loading-spin 1.2s linear infinite;
-}
-
-/* ---- dots ---- */
-.qiu-loading__dots {
-  display: inline-flex;
-  gap: 6px;
-  align-items: center;
-  height: 28px;
-
-  i {
-    display: block;
-    width: 8px;
-    height: 8px;
-    background: var(--qiu-loading-color);
-    border-radius: 50%;
-    animation: qiu-loading-dot 1s ease-in-out infinite;
-
-    &:nth-child(2) {
-      animation-delay: 0.15s;
-    }
-
-    &:nth-child(3) {
-      animation-delay: 0.3s;
-    }
-  }
-}
-
-/* ---- wave ---- */
-.qiu-loading__wave {
-  display: inline-flex;
-  gap: 4px;
-  align-items: center;
-  height: 28px;
-
-  i {
-    display: block;
-    width: 5px;
-    height: 5px;
-    background: var(--qiu-loading-color);
-    border-radius: 50%;
-    animation: qiu-loading-wave 1s ease-in-out infinite;
-
-    @for $n from 1 through 5 {
-      &:nth-child(#{$n}) {
-        animation-delay: #{($n - 1) * 0.1}s;
-      }
-    }
-  }
-}
-
-/* ---- bounce ---- */
-.qiu-loading__bounce {
-  display: inline-flex;
-  gap: 6px;
-  align-items: flex-end;
-  height: 28px;
-
-  i {
-    display: block;
-    width: 10px;
-    height: 10px;
-    background: var(--qiu-loading-color);
-    border-radius: 50%;
-    animation: qiu-loading-bounce 0.7s ease-in-out infinite;
-
-    &:nth-child(2) {
-      animation-delay: 0.12s;
-      opacity: 0.75;
-    }
-
-    &:nth-child(3) {
-      animation-delay: 0.24s;
-      opacity: 0.5;
-    }
-  }
-}
-
-/* ---- bars ---- */
-.qiu-loading__bars {
-  display: inline-flex;
-  gap: 4px;
-  align-items: flex-end;
-  height: 28px;
-
-  i {
-    display: block;
-    width: 4px;
-    height: 12px;
-    background: var(--qiu-loading-color);
-    border-radius: 2px;
-    animation: qiu-loading-bar 0.9s ease-in-out infinite;
-
-    &:nth-child(2) {
-      animation-delay: 0.12s;
-    }
-
-    &:nth-child(3) {
-      animation-delay: 0.24s;
-    }
-
-    &:nth-child(4) {
-      animation-delay: 0.36s;
-    }
-  }
-}
-
-/* ---- bricks ---- */
-.qiu-loading__bricks {
-  display: grid;
-  grid-template-columns: repeat(3, 8px);
-  gap: 3px;
-  width: 30px;
-  height: 30px;
-
-  i {
-    display: block;
-    background: var(--qiu-loading-color);
-    border-radius: 1px;
-    animation: qiu-loading-brick 1s ease-in-out infinite;
-    opacity: 0.25;
-
-    @for $n from 1 through 9 {
-      &:nth-child(#{$n}) {
-        animation-delay: #{($n - 1) * 0.08}s;
-      }
-    }
-  }
-}
-
-/* ---- square ---- */
-.qiu-loading__square {
-  display: inline-block;
-  width: 22px;
-  height: 22px;
-  background: var(--qiu-loading-color);
-  border-radius: 3px;
-  animation: qiu-loading-square 1s ease-in-out infinite;
-}
-
-/* ---- flip ---- */
-.qiu-loading__flip {
-  display: inline-flex;
-  perspective: 80px;
-  width: 28px;
-  height: 28px;
-
-  i {
-    display: block;
-    width: 100%;
-    height: 100%;
-    background: var(--qiu-loading-color);
-    border-radius: 4px;
-    animation: qiu-loading-flip 1.1s ease-in-out infinite;
-  }
-}
-
-/* ---- pulse ---- */
-.qiu-loading__pulse {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-
-  i {
-    display: block;
-    width: 14px;
-    height: 14px;
-    background: var(--qiu-loading-color);
-    border-radius: 50%;
-    animation: qiu-loading-pulse 1.2s ease-out infinite;
-  }
-
-  &::before {
-    position: absolute;
-    inset: 0;
-    content: '';
-    border: 2px solid var(--qiu-loading-color);
-    border-radius: 50%;
-    animation: qiu-loading-ring 1.2s ease-out infinite;
-  }
-}
-
-/* ---- ripple ---- */
-.qiu-loading__ripple {
-  position: relative;
-  width: 40px;
-  height: 40px;
-
-  i {
-    position: absolute;
-    inset: 0;
-    border: 2px solid var(--qiu-loading-color);
-    border-radius: 50%;
-    opacity: 0;
-    animation: qiu-loading-ripple 1.4s ease-out infinite;
-
-    &:nth-child(2) {
-      animation-delay: 0.7s;
-    }
-  }
-}
-
-/* ---- orbit ---- */
-.qiu-loading__orbit {
-  position: relative;
-  width: 36px;
-  height: 36px;
-
-  i {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 10px;
-    height: 10px;
-    margin: -5px 0 0 -5px;
-    background: var(--qiu-loading-color);
-    border-radius: 50%;
-    animation: qiu-loading-orbit 1s linear infinite;
-
-    &:nth-child(2) {
-      width: 7px;
-      height: 7px;
-      margin: -3.5px 0 0 -3.5px;
-      opacity: 0.55;
-      animation-duration: 1.4s;
-      animation-direction: reverse;
-    }
-  }
-}
-
-/* ---- radar ---- */
-.qiu-loading__radar {
-  position: relative;
-  box-sizing: border-box;
-  width: 36px;
-  height: 36px;
-  overflow: hidden;
-  border: 2px solid rgb(15 118 110 / 25%);
-  border-radius: 50%;
-
-  i {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 50%;
-    height: 2px;
-    margin-top: -1px;
-    background: linear-gradient(90deg, var(--qiu-loading-color), transparent);
-    transform-origin: left center;
-    animation: qiu-loading-radar 1.2s linear infinite;
-  }
-
-  &::before,
-  &::after {
-    position: absolute;
-    inset: 25%;
-    content: '';
-    border: 1px solid rgb(15 118 110 / 18%);
-    border-radius: 50%;
-  }
-
-  &::after {
-    inset: 40%;
-  }
-}
-
-/* ---- spiral ---- */
-.qiu-loading__spiral {
-  position: relative;
-  width: 36px;
-  height: 36px;
-
-  i {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 6px;
-    height: 6px;
-    margin: -3px 0 0 -3px;
-    background: var(--qiu-loading-color);
-    border-radius: 50%;
-    animation: qiu-loading-spiral 1.2s linear infinite;
-
-    @for $n from 1 through 8 {
-      &:nth-child(#{$n}) {
-        animation-delay: #{($n - 1) * -0.15}s;
-        opacity: #{1 - ($n - 1) * 0.1};
-      }
-    }
-  }
-}
-
-/* ---- infinity ---- */
-.qiu-loading__infinity {
-  position: relative;
-  width: 48px;
-  height: 24px;
-
-  i {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 8px;
-    height: 8px;
-    margin: -4px 0 0 -4px;
-    background: var(--qiu-loading-color);
-    border-radius: 50%;
-    animation: qiu-loading-infinity 1.4s linear infinite;
-  }
-}
-
-/* ---- hourglass ---- */
-.qiu-loading__hourglass {
-  display: inline-block;
-  width: 0;
-  height: 0;
-  border-style: solid;
-  border-width: 16px 10px;
-  border-color: var(--qiu-loading-color) transparent;
-  animation: qiu-loading-hourglass 1.2s ease-in-out infinite;
-}
-
-/* ---- skeleton ---- */
-.qiu-loading__skeleton {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  width: 160px;
-
-  i {
-    display: block;
-    height: 10px;
-    background: linear-gradient(90deg, #f0f2f5 25%, #e6e8eb 37%, #f0f2f5 63%);
-    background-size: 400% 100%;
-    border-radius: 4px;
-    animation: qiu-loading-shimmer 1.2s ease infinite;
-
-    &:nth-child(1) {
-      width: 100%;
-    }
-
-    &:nth-child(2) {
-      width: 72%;
-    }
-
-    &:nth-child(3) {
-      width: 88%;
-    }
-  }
-}
-
-@keyframes qiu-loading-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes qiu-loading-dot {
-  0%,
-  80%,
-  100% {
-    opacity: 0.35;
-    transform: translateY(0) scale(0.85);
-  }
-
-  40% {
-    opacity: 1;
-    transform: translateY(-6px) scale(1);
-  }
-}
-
-@keyframes qiu-loading-wave {
-  0%,
-  100% {
-    transform: translateY(0);
-    opacity: 0.4;
-  }
-
-  50% {
-    transform: translateY(-10px);
-    opacity: 1;
-  }
-}
-
-@keyframes qiu-loading-bounce {
-  0%,
-  100% {
-    transform: translateY(0);
-  }
-
-  40% {
-    transform: translateY(-14px);
-  }
-}
-
-@keyframes qiu-loading-bar {
-  0%,
-  100% {
-    height: 10px;
-    opacity: 0.45;
-  }
-
-  50% {
-    height: 26px;
-    opacity: 1;
-  }
-}
-
-@keyframes qiu-loading-brick {
-  0%,
-  100% {
-    opacity: 0.25;
-    transform: scale(0.85);
-  }
-
-  40% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-@keyframes qiu-loading-square {
-  0% {
-    transform: rotate(0deg) scale(1);
-  }
-
-  50% {
-    transform: rotate(180deg) scale(0.7);
-    border-radius: 50%;
-  }
-
-  100% {
-    transform: rotate(360deg) scale(1);
-  }
-}
-
-@keyframes qiu-loading-flip {
-  0% {
-    transform: rotateY(0deg);
-  }
-
-  50% {
-    transform: rotateY(180deg);
-  }
-
-  100% {
-    transform: rotateY(360deg);
-  }
-}
-
-@keyframes qiu-loading-pulse {
-  0%,
-  100% {
-    transform: scale(0.85);
-    opacity: 0.7;
-  }
-
-  50% {
-    transform: scale(1.15);
-    opacity: 1;
-  }
-}
-
-@keyframes qiu-loading-ring {
-  0% {
-    transform: scale(0.55);
-    opacity: 0.8;
-  }
-
-  100% {
-    transform: scale(1.15);
-    opacity: 0;
-  }
-}
-
-@keyframes qiu-loading-ripple {
-  0% {
-    transform: scale(0.2);
-    opacity: 0.75;
-  }
-
-  100% {
-    transform: scale(1);
-    opacity: 0;
-  }
-}
-
-@keyframes qiu-loading-orbit {
-  from {
-    transform: rotate(0deg) translateX(12px) rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg) translateX(12px) rotate(-360deg);
-  }
-}
-
-@keyframes qiu-loading-radar {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes qiu-loading-spiral {
-  from {
-    transform: rotate(0deg) translateX(12px) scale(1);
-  }
-
-  to {
-    transform: rotate(360deg) translateX(12px) scale(0.6);
-  }
-}
-
-@keyframes qiu-loading-infinity {
-  0% {
-    transform: translate(-14px, 0);
-  }
-
-  25% {
-    transform: translate(0, -8px);
-  }
-
-  50% {
-    transform: translate(14px, 0);
-  }
-
-  75% {
-    transform: translate(0, 8px);
-  }
-
-  100% {
-    transform: translate(-14px, 0);
-  }
-}
-
-@keyframes qiu-loading-hourglass {
-  0% {
-    transform: rotate(0deg);
-    border-top-color: var(--qiu-loading-color);
-    border-bottom-color: transparent;
-  }
-
-  50% {
-    transform: rotate(180deg);
-    border-top-color: transparent;
-    border-bottom-color: var(--qiu-loading-color);
-  }
-
-  100% {
-    transform: rotate(360deg);
-    border-top-color: var(--qiu-loading-color);
-    border-bottom-color: transparent;
-  }
-}
-
-@keyframes qiu-loading-shimmer {
-  0% {
-    background-position: 100% 0;
-  }
-
-  100% {
-    background-position: 0 0;
-  }
-}
-</style>