fix(loading & pagination): expose loading color variable and optimize…

… style of pagination
varletjs · Sep 18, 2022 · 1f36c80 · 1f36c80
1 parent ddf4a0c
commit 1f36c80
Show file tree

Hide file tree

Showing 7 changed files with 192 additions and 240 deletions.
diff --git a/packages/varlet-ui/src/loading/docs/en-US.md b/packages/varlet-ui/src/loading/docs/en-US.md
@@ -92,5 +92,6 @@ Here are the CSS variables used by the component, Styles can be customized using
 
 | Variable | Default |
 | --- | --- |
+| `--loading-color`       | `var(--loading-color)` |
 | `--loading-opacity` | `0.38` |
 | `--loading-desc-margin` | `8px 0 0` |
diff --git a/packages/varlet-ui/src/loading/docs/zh-CN.md b/packages/varlet-ui/src/loading/docs/zh-CN.md
@@ -90,7 +90,8 @@ const loading = ref(false)
 ### 样式变量
 以下为组件使用的 css 变量，可以使用 [StyleProvider 组件](#/zh-CN/style-provider) 进行样式定制
 
-| 变量名 | 默认值 |
-| --- | --- |
-| `--loading-opacity` | `0.38` |
+| 变量名                     | 默认值 |
+|-------------------------| -- |
+| `--loading-color`       | `var(--loading-color)` |
+| `--loading-opacity`     | `0.38` |
 | `--loading-desc-margin` | `8px 0 0` |
diff --git a/packages/varlet-ui/src/loading/loading.less b/packages/varlet-ui/src/loading/loading.less
@@ -15,6 +15,7 @@
 @loading-mini-height: @font-size-xs + 2;
 
 :root {
+  --loading-color: @color-primary;
   --loading-opacity: @loading-opacity;
   --loading-desc-margin: @loading-desc-margin;
 }
@@ -57,7 +58,7 @@
   }
 
   &__description {
-    color: @color-primary;
+    color: var(--loading-color);
     margin: var(--loading-desc-margin);
 
     &--large {
@@ -82,7 +83,7 @@
 
     &-block {
       display: inline-block;
-      color: @color-primary;
+      color: var(--loading-color);
       animation: circle 1.8s linear infinite;
 
       &--large {
@@ -177,7 +178,7 @@
       height: 100%;
       display: inline-block;
       animation: 1.2s ease-in-out infinite wave;
-      background-color: @color-primary;
+      background-color: var(--loading-color);
 
       &:nth-child(1) {
         animation-delay: -1.2s;
@@ -265,7 +266,7 @@
       display: inline-block;
       transform-origin: right bottom;
       animation: 1.5s ease infinite cube;
-      background-color: @color-primary;
+      background-color: var(--loading-color);
 
       &:nth-child(1) {
         animation-delay: 0.2s;
@@ -352,7 +353,7 @@
 
     &-item {
       animation: 2s ease-in-out infinite rect;
-      background-color: @color-primary;
+      background-color: var(--loading-color);
 
       &:nth-child(1) {
         animation-delay: 1.75s;
@@ -458,7 +459,7 @@
     &-item {
       border-radius: 50%;
       animation: 0.5s ease-in-out infinite alternate disappear;
-      background-color: @color-primary;
+      background-color: var(--loading-color);
 
       &:nth-child(1) {
         animation-delay: -0.4s;

diff --git a/packages/varlet-ui/src/pagination/Pagination.vue b/packages/varlet-ui/src/pagination/Pagination.vue
@@ -24,7 +24,10 @@
         @blur="setPage('simple', simpleValue, $event)"
         @keydown.enter="setPage('simple', simpleValue, $event)"
       />
-      <span>/ {{ pageCount }}</span>
+      <span>
+        / {{ pageCount }}
+        <div :class="n('simple-line')"></div>
+      </span>
     </li>
     <li
       v-else

diff --git a/packages/varlet-ui/src/pagination/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/pagination/__tests__/__snapshots__/index.spec.js.snap
@@ -20,7 +20,7 @@ exports[`Size related props 1`] = `
       <transition-stub>
         <!--v-if-->
       </transition-stub>
-    </div><span>/ 6</span>
+    </div><span> / 6 <div class=\\"var-pagination__simple-line\\"></div></span>
   </li>
   <li class=\\"var-pagination__item var-pagination__next var-pagination__item--hover\\"><i class=\\"var-icon var-icon--set var-icon-chevron-right\\" style=\\"transition: transform 0ms;\\"></i></li>
   <li class=\\"var-pagination__size\\">
@@ -55,7 +55,7 @@ exports[`Size related props 2`] = `
       <transition-stub>
         <!--v-if-->
       </transition-stub>
-    </div><span>/ 6</span>
+    </div><span> / 6 <div class=\\"var-pagination__simple-line\\"></div></span>
   </li>
   <li class=\\"var-pagination__item var-pagination__next var-pagination__item--hover\\"><i class=\\"var-icon var-icon--set var-icon-chevron-right\\" style=\\"transition: transform 0ms;\\"></i></li>
   <!--v-if-->
@@ -208,7 +208,7 @@ exports[`simple mode > disabled prop 1`] = `
       <transition-stub>
         <!--v-if-->
       </transition-stub>
-    </div><span>/ 0</span>
+    </div><span> / 0 <div class=\\"var-pagination__simple-line\\"></div></span>
   </li>
   <li class=\\"var-pagination__item var-pagination__next var-pagination__item--disabled var-pagination__item--hover\\"><i class=\\"var-icon var-icon--set var-icon-chevron-right\\" style=\\"transition: transform 0ms;\\"></i></li>
   <li class=\\"var-pagination__size var-pagination__item--disabled\\">
@@ -277,7 +277,7 @@ exports[`simple mode > mount 1`] = `
       <transition-stub>
         <!--v-if-->
       </transition-stub>
-    </div><span>/ 13</span>
+    </div><span> / 13 <div class=\\"var-pagination__simple-line\\"></div></span>
   </li>
   <li class=\\"var-pagination__item var-pagination__next var-pagination__item--hover\\"><i class=\\"var-icon var-icon--set var-icon-chevron-right\\" style=\\"transition: transform 0ms;\\"></i></li>
   <li class=\\"var-pagination__size\\">
@@ -348,7 +348,7 @@ exports[`test pagination example 1`] = `
         <transition-stub>
           <!--v-if-->
         </transition-stub>
-      </div><span>/ 12</span>
+      </div><span> / 12 <div class=\\"var-pagination__simple-line\\"></div></span>
     </li>
     <li class=\\"var-pagination__item var-pagination__next var-pagination__item--hover\\"><i class=\\"var-icon var-icon--set var-icon-chevron-right\\" style=\\"transition: transform 0ms;\\"></i></li>
     <li class=\\"var-pagination__size\\">
@@ -417,7 +417,7 @@ exports[`test pagination example 1`] = `
         <transition-stub>
           <!--v-if-->
         </transition-stub>
-      </div><span>/ 12</span>
+      </div><span> / 12 <div class=\\"var-pagination__simple-line\\"></div></span>
     </li>
     <li class=\\"var-pagination__item var-pagination__next var-pagination__item--hover\\"><i class=\\"var-icon var-icon--set var-icon-chevron-right\\" style=\\"transition: transform 0ms;\\"></i></li>
     <!--v-if-->
@@ -446,7 +446,7 @@ exports[`test pagination example 1`] = `
         <transition-stub>
           <!--v-if-->
         </transition-stub>
-      </div><span>/ 12</span>
+      </div><span> / 12 <div class=\\"var-pagination__simple-line\\"></div></span>
     </li>
     <li class=\\"var-pagination__item var-pagination__next var-pagination__item--hover\\"><i class=\\"var-icon var-icon--set var-icon-chevron-right\\" style=\\"transition: transform 0ms;\\"></i></li>
     <li class=\\"var-pagination__size\\">
@@ -515,7 +515,7 @@ exports[`test pagination example 1`] = `
         <transition-stub>
           <!--v-if-->
         </transition-stub>
-      </div><span>/ 12</span>
+      </div><span> / 12 <div class=\\"var-pagination__simple-line\\"></div></span>
     </li>
     <li class=\\"var-pagination__item var-pagination__next var-pagination__item--disabled var-pagination__item--hover\\"><i class=\\"var-icon var-icon--set var-icon-chevron-right\\" style=\\"transition: transform 0ms;\\"></i></li>
     <li class=\\"var-pagination__size var-pagination__item--disabled\\">

diff --git a/packages/varlet-ui/src/pagination/pagination.less b/packages/varlet-ui/src/pagination/pagination.less
@@ -168,6 +168,11 @@
         text-align: center;
       }
     }
+
+    &-line {
+      height: 1px;
+      background: transparent;
+    }
   }
 
   &__quickly {