fix(comp:spin): spin mask backgroun color isn't correct (#1874)

IDuxFE · Apr 8, 2024 · f2fcf2d · f2fcf2d
1 parent d2fcdbf
commit f2fcf2d
Show file tree

Hide file tree

Showing 10 changed files with 122 additions and 40 deletions.
diff --git a/packages/components/list/__tests__/__snapshots__/list.spec.ts.snap b/packages/components/list/__tests__/__snapshots__/list.spec.ts.snap
@@ -4,7 +4,9 @@ exports[`List > render work 1`] = `
 "<div class=\\"ix-list ix-list-split ix-list-md ix-list-border\\">
   <!---->
   <div class=\\"ix-spin\\">
-    <!---->
+    <transition-stub name=\\"ix-fade\\" appear=\\"true\\" persisted=\\"false\\" css=\\"true\\">
+      <!---->
+    </transition-stub>
     <div class=\\"ix-spin-container\\">
       <div>
         <div class=\\"ix-list-item\\">

diff --git a/packages/components/spin/__tests__/__snapshots__/spin.spec.ts.snap b/packages/components/spin/__tests__/__snapshots__/spin.spec.ts.snap
@@ -2,24 +2,26 @@
 
 exports[`Spin > render work 1`] = `
 "<div class=\\"ix-spin\\">
-  <div class=\\"ix-spin-spinner ix-spin-spinner-tip-vertical ix-spin-spinner-md\\">
-    <div class=\\"ix-spin-spinner-icon\\">
-      <div class=\\"ix-loading\\" role=\\"img\\" aria-label=\\"loading\\"><svg class=\\"ix-loading-icon\\" viewBox=\\"0 0 28 28\\">
-          <g id=\\"loading-48\\" fill=\\"none\\" fill-rule=\\"evenodd\\" transform=\\"rotate(-90,14,14)\\">
-            <circle class=\\"ix-loading-snd-arch\\" cx=\\"14\\" cy=\\"14\\" r=\\"12.5\\" stroke-width=\\"3\\" stroke-linecap=\\"round\\" stroke-dasharray=\\"9.676105373056563 88.96459430051421\\">
-              <animate attributeName=\\"stroke-dashoffset\\" values=\\"9.676105373056563;9.676105373056563;-87.96459430051421\\" dur=\\"2s\\" begin=\\"0s\\" repeatCount=\\"indefinite\\" calcMode=\\"spline\\" keyTimes=\\"0;0.3333;1\\" keySplines=\\"0 0 0 0;0.42 0 0.58 1;\\"></animate>
-            </circle>
-            <circle class=\\"ix-loading-fst-arch\\" cx=\\"14\\" cy=\\"14\\" r=\\"12.5\\" stroke-width=\\"3\\" stroke-linecap=\\"round\\" stroke-dasharray=\\"20.231856689118267 88.96459430051421\\">
-              <animate attributeName=\\"stroke-dashoffset\\" values=\\"20.231856689118267;20.231856689118267;-87.96459430051421;-87.96459430051421\\" dur=\\"2s\\" begin=\\"0s\\" repeatCount=\\"indefinite\\" calcMode=\\"spline\\" keyTimes=\\"0;0.3333;0.7;1\\" keySplines=\\"0 0 0 0;0.42 0 0.58 1;0 0 0 0\\"></animate>
-            </circle>
-            <circle class=\\"ix-loading-bg-circle\\" cx=\\"14\\" cy=\\"14\\" r=\\"12.5\\" stroke-width=\\"3\\" stroke-linecap=\\"round\\" stroke-dasharray=\\"87.96459430051421 88.96459430051421\\">
-              <animate attributeName=\\"stroke-dashoffset\\" values=\\"87.96459430051421;0;-87.96459430051421;-87.96459430051421\\" dur=\\"2s\\" begin=\\"0s\\" repeatCount=\\"indefinite\\" calcMode=\\"spline\\" keyTimes=\\"0;0.3333;0.666;1\\" keySplines=\\"0.6 0 0.4 1;0.6 0 0.4 1;0,0,0,0\\"></animate>
-            </circle>
-          </g>
-        </svg></div>
+  <transition-stub name=\\"ix-fade\\" appear=\\"true\\" persisted=\\"false\\" css=\\"true\\">
+    <div class=\\"ix-spin-spinner ix-spin-spinner-tip-vertical ix-spin-spinner-md\\">
+      <div class=\\"ix-spin-spinner-icon\\">
+        <div class=\\"ix-loading\\" role=\\"img\\" aria-label=\\"loading\\"><svg class=\\"ix-loading-icon\\" viewBox=\\"0 0 28 28\\">
+            <g id=\\"loading-48\\" fill=\\"none\\" fill-rule=\\"evenodd\\" transform=\\"rotate(-90,14,14)\\">
+              <circle class=\\"ix-loading-snd-arch\\" cx=\\"14\\" cy=\\"14\\" r=\\"12.5\\" stroke-width=\\"3\\" stroke-linecap=\\"round\\" stroke-dasharray=\\"9.676105373056563 88.96459430051421\\">
+                <animate attributeName=\\"stroke-dashoffset\\" values=\\"9.676105373056563;9.676105373056563;-87.96459430051421\\" dur=\\"2s\\" begin=\\"0s\\" repeatCount=\\"indefinite\\" calcMode=\\"spline\\" keyTimes=\\"0;0.3333;1\\" keySplines=\\"0 0 0 0;0.42 0 0.58 1;\\"></animate>
+              </circle>
+              <circle class=\\"ix-loading-fst-arch\\" cx=\\"14\\" cy=\\"14\\" r=\\"12.5\\" stroke-width=\\"3\\" stroke-linecap=\\"round\\" stroke-dasharray=\\"20.231856689118267 88.96459430051421\\">
+                <animate attributeName=\\"stroke-dashoffset\\" values=\\"20.231856689118267;20.231856689118267;-87.96459430051421;-87.96459430051421\\" dur=\\"2s\\" begin=\\"0s\\" repeatCount=\\"indefinite\\" calcMode=\\"spline\\" keyTimes=\\"0;0.3333;0.7;1\\" keySplines=\\"0 0 0 0;0.42 0 0.58 1;0 0 0 0\\"></animate>
+              </circle>
+              <circle class=\\"ix-loading-bg-circle\\" cx=\\"14\\" cy=\\"14\\" r=\\"12.5\\" stroke-width=\\"3\\" stroke-linecap=\\"round\\" stroke-dasharray=\\"87.96459430051421 88.96459430051421\\">
+                <animate attributeName=\\"stroke-dashoffset\\" values=\\"87.96459430051421;0;-87.96459430051421;-87.96459430051421\\" dur=\\"2s\\" begin=\\"0s\\" repeatCount=\\"indefinite\\" calcMode=\\"spline\\" keyTimes=\\"0;0.3333;0.666;1\\" keySplines=\\"0.6 0 0.4 1;0.6 0 0.4 1;0,0,0,0\\"></animate>
+              </circle>
+            </g>
+          </svg></div>
+      </div>
+      <!---->
     </div>
-    <!---->
-  </div>
+  </transition-stub>
   <!---->
 </div>"
 `;
diff --git a/packages/components/spin/docs/Theme.zh.md b/packages/components/spin/docs/Theme.zh.md
@@ -1,13 +1,14 @@
 | 名称 | 描述 | 类型 | default | dark |
 |---|---|---|---|---|
-| `bgCircleStroke` |  | `string` | `#1c6eff` | `#4083E8` |
-| `fontSizeLg` |  | `number` | `16` | `16` |
-| `fontSizeMd` |  | `number` | `14` | `14` |
-| `fontSizeSm` |  | `number` | `12` | `12` |
-| `fstArchStroke` |  | `string` | `#20cc94` | `#40C695` |
-| `iconColor` |  | `string` | `#1c6eff` | `#4083E8` |
-| `iconSizeLg` |  | `number` | `48` | `48` |
-| `iconSizeMd` |  | `number` | `28` | `28` |
-| `iconSizeSm` |  | `number` | `20` | `20` |
-| `sndArchStroke` |  | `string` | `#d3d7de` | `#3C424D` |
-| `tipColor` |  | `string` | `#1c6eff` | `#4083E8` |
+| `bgCircleStroke` | loading背景圆环stroke | `string` | `#1c6eff` | `#4083E8` |
+| `fontSizeLg` | lg 尺寸下的字体大小 | `number` | `16` | `16` |
+| `fontSizeMd` | md 尺寸下的字体大小 | `number` | `14` | `14` |
+| `fontSizeSm` | sm 尺寸下的字体大小 | `number` | `12` | `12` |
+| `fstArchStroke` | loading第一个拱形stroke | `string` | `#20cc94` | `#40C695` |
+| `iconColor` | 图标颜色 | `string` | `#1c6eff` | `#4083E8` |
+| `iconSizeLg` | lg 尺寸下的图标大小 | `number` | `48` | `48` |
+| `iconSizeMd` | md 尺寸下的图标大小 | `number` | `28` | `28` |
+| `iconSizeSm` | sm 尺寸下的图标大小 | `number` | `20` | `20` |
+| `maskBgColor` | loading 的遮罩背景颜色 | `string` | `rgba(255, 255, 255, 0.7)` | `rgba(10, 12, 15, 0.7)` |
+| `sndArchStroke` | loading第二个拱形stroke | `string` | `#d3d7de` | `#3C424D` |
+| `tipColor` | 提示文字颜色 | `string` | `#1c6eff` | `#4083E8` |
diff --git a/packages/components/spin/src/Spin.tsx b/packages/components/spin/src/Spin.tsx
@@ -5,7 +5,7 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import { type ComputedRef, computed, defineComponent, normalizeClass, normalizeStyle } from 'vue'
+import { type ComputedRef, Transition, computed, defineComponent, normalizeClass, normalizeStyle } from 'vue'
 
 import { hasSlot } from '@idux/cdk/utils'
 import { ɵLoading } from '@idux/components/_private/loading'
@@ -105,7 +105,9 @@ export default defineComponent({
 
     return () => (
       <div class={[mergedPrefixCls.value, globalHashId.value, hashId.value]}>
-        {renderSpinner()}
+        <Transition name={`${common.prefixCls}-fade`} appear>
+          {renderSpinner()}
+        </Transition>
         {renderContent()}
       </div>
     )

diff --git a/packages/components/spin/style/index.less b/packages/components/spin/style/index.less
@@ -28,7 +28,7 @@
       right: 0;
       bottom: 0;
       position: absolute;
-      background-color: var(--ix-color-mask);
+      background-color: var(--ix-spin-mask-bg-color);
       pointer-events: auto;
     }
   }
@@ -40,6 +40,8 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    transition-duration: var(--ix-motion-duration-medium);
+    background-color: var(--ix-spin-mask-bg-color);
 
     &-tip-vertical {
       flex-direction: column;
@@ -81,10 +83,8 @@
 
   &-container {
     position: relative;
-    transition: opacity var(--ix-motion-duration-medium);
 
     &-blur {
-      opacity: 0.3;
       user-select: none;
       clear: both;
       overflow: hidden;

diff --git a/packages/components/spin/theme/dark.css b/packages/components/spin/theme/dark.css
@@ -11,4 +11,5 @@
   --ix-spin-bg-circle-stroke: #4083e8;
   --ix-spin-fst-arch-stroke: #40c695;
   --ix-spin-snd-arch-stroke: #3c424d;
+  --ix-spin-mask-bg-color: rgba(10, 12, 15, 0.7);
 }
diff --git a/packages/components/spin/theme/default.css b/packages/components/spin/theme/default.css
@@ -11,4 +11,5 @@
   --ix-spin-bg-circle-stroke: #1c6eff;
   --ix-spin-fst-arch-stroke: #20cc94;
   --ix-spin-snd-arch-stroke: #d3d7de;
+  --ix-spin-mask-bg-color: rgba(255, 255, 255, 0.7);
 }
diff --git a/packages/components/spin/theme/default.ts b/packages/components/spin/theme/default.ts
@@ -5,15 +5,20 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import type { CertainThemeTokens, GlobalThemeTokens, ThemeTokenAlgorithms } from '@idux/components/theme'
+import {
+  type CertainThemeTokens,
+  type GlobalThemeTokens,
+  type ThemeTokenAlgorithms,
+  getAlphaColor,
+} from '@idux/components/theme'
 
 export function getDefaultThemeTokens(
   tokens: GlobalThemeTokens,
   algorithms: ThemeTokenAlgorithms,
 ): CertainThemeTokens<'spin'> {
   const { getBaseColors, getGreyColors } = algorithms
 
-  const { colorPrimary, fontSizeSm, fontSizeMd, fontSizeLg } = tokens
+  const { colorContainerBg, colorPrimary, fontSizeSm, fontSizeMd, fontSizeLg } = tokens
 
   return {
     tipColor: colorPrimary,
@@ -30,5 +35,7 @@ export function getDefaultThemeTokens(
     bgCircleStroke: colorPrimary,
     fstArchStroke: getBaseColors().turquoise,
     sndArchStroke: getGreyColors().l20,
+
+    maskBgColor: getAlphaColor(colorContainerBg, 0.7),
   }
 }
diff --git a/packages/components/spin/theme/tokens.ts b/packages/components/spin/theme/tokens.ts
@@ -6,18 +6,56 @@
  */
 
 export interface SpinThemeTokens {
+  /**
+   * @desc 提示文字颜色
+   */
   tipColor: string
+  /**
+   * @desc 图标颜色
+   */
   iconColor: string
 
+  /**
+   * @desc sm 尺寸下的字体大小
+   */
   fontSizeSm: number
+  /**
+   * @desc md 尺寸下的字体大小
+   */
   fontSizeMd: number
+  /**
+   * @desc lg 尺寸下的字体大小
+   */
   fontSizeLg: number
 
+  /**
+   * @desc sm 尺寸下的图标大小
+   */
   iconSizeSm: number
+  /**
+   * @desc md 尺寸下的图标大小
+   */
   iconSizeMd: number
+  /**
+   * @desc lg 尺寸下的图标大小
+   */
   iconSizeLg: number
 
+  /**
+   * @desc loading背景圆环stroke
+   */
   bgCircleStroke: string
+  /**
+   * @desc loading第一个拱形stroke
+   */
   fstArchStroke: string
+  /**
+   * @desc loading第二个拱形stroke
+   */
   sndArchStroke: string
+
+  /**
+   * @desc loading 的遮罩背景颜色
+   */
+  maskBgColor: string
 }
diff --git a/packages/pro/transfer/__tests__/__snapshots__/proTransfer.spec.ts.snap b/packages/pro/transfer/__tests__/__snapshots__/proTransfer.spec.ts.snap
@@ -10,7 +10,14 @@ exports[`ProTransfer > table transfer render work 1`] = `
     <div
       class="ix-spin"
     >
-      <!---->
+      <transition-stub
+        appear="true"
+        css="true"
+        name="ix-fade"
+        persisted="false"
+      >
+        <!---->
+      </transition-stub>
       <div
         class="ix-spin-container"
       >
@@ -1151,7 +1158,14 @@ exports[`ProTransfer > table transfer render work 1`] = `
     <div
       class="ix-spin"
     >
-      <!---->
+      <transition-stub
+        appear="true"
+        css="true"
+        name="ix-fade"
+        persisted="false"
+      >
+        <!---->
+      </transition-stub>
       <div
         class="ix-spin-container"
       >
@@ -1531,7 +1545,14 @@ exports[`ProTransfer > tree transfer render work 1`] = `
     <div
       class="ix-spin"
     >
-      <!---->
+      <transition-stub
+        appear="true"
+        css="true"
+        name="ix-fade"
+        persisted="false"
+      >
+        <!---->
+      </transition-stub>
       <div
         class="ix-spin-container"
       >
@@ -3557,7 +3578,14 @@ exports[`ProTransfer > tree transfer render work 1`] = `
     <div
       class="ix-spin"
     >
-      <!---->
+      <transition-stub
+        appear="true"
+        css="true"
+        name="ix-fade"
+        persisted="false"
+      >
+        <!---->
+      </transition-stub>
       <div
         class="ix-spin-container"
       >