Feat/new loading

src/image-viewer/__test__/__snapshots__/index.test.js.snap

@@ -42,7 +42,7 @@ exports[`image-viewer :base 1`] = `
             />
           </wx-view>
           <wx-view
-            class="t-class-text"
+            class="t-loading__text t-loading__text--horizontal t-class-text"
           />
         </wx-view>
       </wx-view>
@@ -106,7 +106,7 @@ exports[`image-viewer :base 2`] = `
             />
           </wx-view>
           <wx-view
-            class="t-class-text"
+            class="t-loading__text t-loading__text--horizontal t-class-text"
           />
         </wx-view>
       </wx-view>
@@ -170,7 +170,7 @@ exports[`image-viewer :base 3`] = `
             />
           </wx-view>
           <wx-view
-            class="t-class-text"
+            class="t-loading__text t-loading__text--horizontal t-class-text"
           />
         </wx-view>
       </wx-view>

src/loading/__test__/__snapshots__/demo.test.js.snap

@@ -11,12 +11,10 @@ exports[`Loading Loading base demo works fine 1`] = `
     />
     <t-loading
       size="40rpx"
-      tClassIndicator="indicator-black"
       theme="spinner"
     />
     <t-loading
       size="80rpx"
-      tClassIndicator="indicator-black"
       theme="dots"
     />
   </wx-view>
@@ -26,7 +24,7 @@ exports[`Loading Loading base demo works fine 1`] = `
 exports[`Loading Loading duration demo works fine 1`] = `
 <duration>
   <t-loading
-    duration="{{800}}"
+    duration="{{1200}}"
     size="52rpx"
     tClassText="text-l"
     text="加载中..."
@@ -35,13 +33,10 @@ exports[`Loading Loading duration demo works fine 1`] = `
   <wx-view
     class="slider-container"
   >
-    <wx-view>
-      速度调整
-    </wx-view>
     <t-slider
       class="slider-class"
       label="{{true}}"
-      max="{{2000}}"
+      max="{{1500}}"
       min="{{100}}"
       value="{{800}}"
       bind:change="durationChange"
@@ -70,22 +65,11 @@ exports[`Loading Loading horizontal demo works fine 1`] = `
       theme="circular"
     />
     <t-loading
+      inheritColor="{{true}}"
       size="40rpx"
-      tClassIndicator="indicator-black"
       text="加载中..."
       theme="spinner"
     />
-    <t-loading
-      size="40rpx"
-      theme="circular"
-    >
-      <span
-        slot="text"
-        style="color: #0052d9"
-      >
-        加载中...
-      </span>
-    </t-loading>
   </wx-view>
 </horizontal>
 `;
@@ -103,23 +87,33 @@ exports[`Loading Loading loadingProgress demo works fine 1`] = `
 exports[`Loading Loading size demo works fine 1`] = `
 <size>
   <wx-view
-    class="loading-container-flex-column"
+    class="loading-size-demo"
   >
     <t-loading
-      size="40rpx"
-      text="加载中(小)..."
+      class="large"
+      size="64rpx"
+      text="加载中..."
       theme="circular"
     />
+    <wx-view
+      class="demo-desc"
+    >
+      中尺寸
+    </wx-view>
     <t-loading
-      size="48rpx"
-      tClassText="text-m"
-      text="加载(中)..."
+      class="middle"
+      size="56rpx"
+      text="加载中..."
       theme="circular"
     />
+    <wx-view
+      class="demo-desc"
+    >
+      小尺寸
+    </wx-view>
     <t-loading
-      size="52rpx"
-      tClassText="text-l"
-      text="加载中(大)..."
+      size="48rpx"
+      text="加载中..."
       theme="circular"
     />
   </wx-view>
@@ -168,11 +162,21 @@ exports[`Loading Loading text demo works fine 1`] = `
 
 exports[`Loading Loading vertical demo works fine 1`] = `
 <vertical>
-  <t-loading
-    layout="vertical"
-    size="40rpx"
-    text="加载中"
-    theme="circular"
-  />
+  <div
+    class="box"
+  >
+    <t-loading
+      layout="vertical"
+      size="40rpx"
+      text="加载中"
+      theme="circular"
+    />
+    <t-loading
+      layout="vertical"
+      size="40rpx"
+      text="加载中"
+      theme="spinner"
+    />
+  </div>
 </vertical>
 `;

src/loading/_example/base/index.wxml

@@ -1,5 +1,5 @@
 <view class="loading-container-flex">
   <t-loading theme="circular" size="40rpx"></t-loading>
-  <t-loading theme="spinner" size="40rpx" t-class-indicator="indicator-black"></t-loading>
-  <t-loading theme="dots" size="80rpx" t-class-indicator="indicator-black"></t-loading>
+  <t-loading theme="spinner" size="40rpx"></t-loading>
+  <t-loading theme="dots" size="80rpx"></t-loading>
 </view>

src/loading/_example/base/index.wxss

@@ -3,10 +3,6 @@
   align-items: center;
 }
 
-.indicator-black {
-  color: #000000 !important;
-}
-
 .loading-container-flex t-loading {
   min-width: 20%;
   margin-right: 40rpx;

src/loading/_example/duration/index.wxml

@@ -1,11 +1,16 @@
-<t-loading theme="circular" size="52rpx" text="加载中..." t-class-text="text-l" duration="{{duration}}"></t-loading>
+<t-loading
+  theme="circular"
+  size="52rpx"
+  text="加载中..."
+  t-class-text="text-l"
+  duration="{{2000 - duration}}"
+></t-loading>
 <view class="slider-container">
-  <view>速度调整</view>
   <t-slider
     class="slider-class"
     value="{{duration}}"
     min="{{100}}"
-    max="{{2000}}"
+    max="{{1500}}"
     label
     bind:change="durationChange"
   ></t-slider>

src/loading/_example/horizontal/index.wxml

@@ -1,7 +1,4 @@
 <view class="loading-container-flex">
   <t-loading theme="circular" size="40rpx" text="加载中..."></t-loading>
-  <t-loading theme="spinner" size="40rpx" text="加载中..." t-class-indicator="indicator-black"></t-loading>
-  <t-loading theme="circular" size="40rpx">
-    <span slot="text" style="color: #0052d9">加载中...</span>
-  </t-loading>
+  <t-loading theme="spinner" size="40rpx" text="加载中..." inheritColor></t-loading>
 </view>

src/loading/_example/horizontal/index.wxss

@@ -1,13 +1,10 @@
 .loading-container-flex {
   display: flex;
   align-items: center;
-}
-
-.indicator-black {
-  color: #000000 !important;
+  color: #000;
 }
 
 .loading-container-flex t-loading {
   display: flex;
-  margin-right: 40rpx;
+  margin-right: 64px;
 }

src/loading/_example/loading.wxml

@@ -3,13 +3,13 @@
   <view class="demo-desc"
     >用于表示页面或操作的加载状态，给予用户反馈的同时减缓等待的焦虑感，由一个或一组反馈动效组成。</view
   >
-  <t-demo title="01 类型" desc="纯icon" padding>
+  <t-demo title="01 组件类型" desc="纯图标" padding>
     <base />
   </t-demo>
-  <t-demo desc="icon加文字横向" padding>
+  <t-demo desc="图标加文字横向" padding>
     <horizontal />
   </t-demo>
-  <t-demo desc="icon加文字竖向" padding>
+  <t-demo desc="图标加文字竖向" padding>
     <vertical />
   </t-demo>
   <t-demo desc="纯文字" padding>
@@ -18,19 +18,20 @@
   <t-demo desc="加载失败" padding>
     <error />
   </t-demo>
-  <t-demo desc="进度条加载" padding>
+
+  <!-- <t-demo desc="进度条加载" padding>
     <t-button size="large" plain block bind:tap="goToProgress">页面进度条加载</t-button>
+  </t-demo> -->
+
+  <t-demo title="02 组件尺寸" desc="大尺寸" padding>
+    <size />
   </t-demo>
 
-  <t-demo title="02 状态" desc="如果加载状态在延迟内结束，则不显示" padding>
+  <!-- <t-demo title="02 组件状态" desc="如果加载状态在延迟内结束，则不显示" padding>
     <status />
-  </t-demo>
+  </t-demo> -->
 
-  <t-demo title="03 加载速度" desc="加载速度可配置，加载一周的时间单位（毫秒）" padding>
+  <t-demo title="03 加载速度" desc="加载速度调整" padding>
     <duration />
   </t-demo>
-
-  <t-demo title="04 规格" desc="支持自定义加载规格" padding>
-    <size />
-  </t-demo>
 </view>

src/loading/_example/size/index.js

@@ -1 +1,5 @@
-Component({});
+Component({
+  options: {
+    styleIsolation: 'apply-shared',
+  },
+});

src/loading/_example/size/index.wxml

@@ -1,5 +1,11 @@
-<view class="loading-container-flex-column">
-  <t-loading theme="circular" size="40rpx" text="加载中(小)..."></t-loading>
-  <t-loading theme="circular" size="48rpx" text="加载(中)..." t-class-text="text-m"></t-loading>
-  <t-loading theme="circular" size="52rpx" text="加载中(大)..." t-class-text="text-l"></t-loading>
+<view class="loading-size-demo">
+  <t-loading theme="circular" size="64rpx" text="加载中..." class="large" />
+
+  <view class="demo-desc">中尺寸</view>
+
+  <t-loading theme="circular" size="56rpx" text="加载中..." class="middle" />
+
+  <view class="demo-desc">小尺寸</view>
+
+  <t-loading theme="circular" size="48rpx" text="加载中..." />
 </view>

src/loading/_example/size/index.wxss

@@ -1,12 +1,17 @@
-.text-m {
-  font-size: 28rpx;
+.large {
+  --td-loading-text-font-size: 32rpx;
 }
 
-.text-l {
-  font-size: 32rpx;
+.middle {
+  --td-loading-text-font-size: 28rpx;
 }
 
-.loading-container-flex-column t-loading {
-  display: flex;
-  margin-top: 32rpx;
+.loading-size-demo t-loading {
+  display: block;
+  box-sizing: border-box;
+  margin: 32rpx 0 48rpx;
 }
+
+.demo-desc {
+  margin-left: 0;
+}

src/loading/_example/vertical/index.wxml

@@ -1 +1,4 @@
-<t-loading theme="circular" size="40rpx" text="加载中" layout="vertical"></t-loading>
+<div class="box">
+  <t-loading theme="circular" size="40rpx" text="加载中" layout="vertical"></t-loading>
+  <t-loading theme="spinner" size="40rpx" text="加载中" layout="vertical"></t-loading>
+</div>

src/loading/_example/vertical/index.wxss

@@ -0,0 +1,7 @@
+.box {
+  display: flex;
+}
+
+.box t-loading {
+  margin-right: 64px;
+}