feat: add less variables of cell, back-top, pull-refresh, progress, s…

…witch, slider, index-bar
varletjs · Apr 2, 2021 · ef9750d · ef9750d
1 parent bfe9ee8
commit ef9750d
Show file tree

Hide file tree

Showing 25 changed files with 528 additions and 321 deletions.
diff --git a/packages/varlet-ui/src/back-top/BackTop.vue b/packages/varlet-ui/src/back-top/BackTop.vue
@@ -76,22 +76,5 @@ export default defineComponent({
 </script>
 
 <style lang="less">
-.var {
-  &-back-top {
-    position: fixed;
-    right: 40px;
-    bottom: 40px;
-    transform: scale(0);
-    transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
-
-    &__button {
-      width: 40px;
-      height: 40px;
-    }
-
-    &--active {
-      transform: scale(1);
-    }
-  }
-}
+@import './backTop';
 </style>
diff --git a/packages/varlet-ui/src/back-top/backTop.less b/packages/varlet-ui/src/back-top/backTop.less
@@ -0,0 +1,20 @@
+@back-top-right: 40px;
+@back-top-bottom: 40px;
+@back-top-button-size: 40px;
+
+.var-back-top {
+  position: fixed;
+  right: @back-top-right;
+  bottom: @back-top-bottom;
+  transform: scale(0);
+  transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+
+  &__button {
+    width: @back-top-button-size;
+    height: @back-top-button-size;
+  }
+
+  &--active {
+    transform: scale(1);
+  }
+}
diff --git a/packages/varlet-ui/src/back-top/docs/en-US.md b/packages/varlet-ui/src/back-top/docs/en-US.md
@@ -53,3 +53,12 @@ export default {
 | Name | Description | SlotProps |
 | ----- | -------------- | -------- |
 | `default` | Custom the content | - |
+
+### Theme Variables
+#### The following LESS variables can be overridden at build time to modify the theme style
+
+| Variable | Default |
+| --- | --- |
+| `@back-top-right` | `40px` |
+| `@back-top-bottom` | `40px` |
+| `@back-top-button-size` | `40px` |
diff --git a/packages/varlet-ui/src/back-top/docs/zh-CN.md b/packages/varlet-ui/src/back-top/docs/zh-CN.md
@@ -53,3 +53,12 @@ export default {
 | 名称 | 说明 | 参数 |
 | ----- | -------------- | -------- |
 | `default` | 自定义按钮内容 | - |
+
+### 主题变量
+#### 以下less变量可通过构建时进行变量覆盖从而修改主题样式
+
+| 变量名 | 默认值 |
+| --- | --- |
+| `@back-top-right` | `40px` |
+| `@back-top-bottom` | `40px` |
+| `@back-top-button-size` | `40px` |
diff --git a/packages/varlet-ui/src/button/docs/en-US.md b/packages/varlet-ui/src/button/docs/en-US.md
@@ -175,4 +175,4 @@ export default {
 | `@button-mini-height` | `20px` |
 | `@button-small-height` | `28px` |
 | `@button-normal-height` | `36px` |
-| `@button-large-height:` | `44px` |
+| `@button-large-height` | `44px` |
diff --git a/packages/varlet-ui/src/button/docs/zh-CN.md b/packages/varlet-ui/src/button/docs/zh-CN.md
@@ -175,4 +175,4 @@ export default {
 | `@button-mini-height` | `20px` |
 | `@button-small-height` | `28px` |
 | `@button-normal-height` | `36px` |
-| `@button-large-height:` | `44px` |
+| `@button-large-height` | `44px` |
diff --git a/packages/varlet-ui/src/cell/cell.less b/packages/varlet-ui/src/cell/cell.less
@@ -1,31 +1,42 @@
 @import '../styles/var';
 @import '../styles/common';
 
+@cell-font-size: @font-size-md;
+@cell-desc-font-size: @font-size-sm;
+@cell-desc-color: rgba(0, 0, 0, 0.6);
+@cell-padding: 10px 12px;
+@cell-min-height: 40px;
+@cell-border-color: #bcc2cb;
+@cell-border-left: 12px;
+@cell-border-right: 12px;
+@cell-icon-right: 8px;
+@cell-extra-left: 8px;
+
 .var-cell {
   align-items: center;
   display: flex;
-  min-height: 40px;
+  min-height: @cell-min-height;
   outline: none;
-  padding: 10px 12px;
+  padding: @cell-padding;
   position: relative;
   box-sizing: border-box;
-  font-size: @font-size-md;
+  font-size: @cell-font-size;
   &--border {
     &:after {
       position: absolute;
       box-sizing: border-box;
       content: ' ';
       pointer-events: none;
-      right: 16px;
+      right: @cell-border-right;
       bottom: 0;
-      left: 16px;
-      border-bottom: 1px solid #bcc2cb;
+      left: @cell-border-left;
+      border-bottom: 1px solid @cell-border-color;
       transform: scaleY(0.5);
     }
   }
 
   &__icon {
-    margin-right: 8px;
+    margin-right: @cell-icon-right;
     flex: 0;
   }
 
@@ -41,12 +52,12 @@
   }
 
   &__desc {
-    font-size: @font-size-sm;
-    color: rgba(0, 0, 0, 0.6);
+    font-size: @cell-desc-font-size;
+    color: @cell-desc-color;
   }
 
   &__extra {
     flex: 0;
-    margin-left: 8px;
+    margin-left: @cell-extra-left;
   }
 }
diff --git a/packages/varlet-ui/src/cell/docs/en-US.md b/packages/varlet-ui/src/cell/docs/en-US.md
@@ -60,3 +60,19 @@ createApp().use(Cell)
 | `icon` | Icon of cell | - |
 | `desc` | Description of cell | - |
 | `extra` | Extra of cell | - |
+
+### Theme Variables
+#### The following LESS variables can be overridden at build time to modify the theme style
+
+| Variable | Default |
+| --- | --- |
+| `@cell-font-size` | `14px` |
+| `@cell-desc-font-size` | `12px` |
+| `@cell-desc-color` | `rgba(0, 0, 0, 0.6)` |
+| `@cell-padding` | `10px 12px` |
+| `@cell-min-height` | `40px` |
+| `@cell-border-color` | `#bcc2cb` |
+| `@cell-border-left` | `12px` |
+| `@cell-border-right` | `12px` |
+| `@cell-icon-right` | `8px` |
+| `@cell-extra-left` | `8px` |
diff --git a/packages/varlet-ui/src/cell/docs/zh-CN.md b/packages/varlet-ui/src/cell/docs/zh-CN.md
@@ -60,3 +60,19 @@ createApp().use(Cell)
 | `icon` | 自定义左侧icon区域 | - |
 | `desc` | 描述的内容 | - |
 | `extra` | 自定义右侧区域内容 | - |
+
+### 主题变量
+#### 以下less变量可通过构建时进行变量覆盖从而修改主题样式
+
+| 变量名 | 默认值 |
+| --- | --- |
+| `@cell-font-size` | `14px` |
+| `@cell-desc-font-size` | `12px` |
+| `@cell-desc-color` | `rgba(0, 0, 0, 0.6)` |
+| `@cell-padding` | `10px 12px` |
+| `@cell-min-height` | `40px` |
+| `@cell-border-color` | `#bcc2cb` |
+| `@cell-border-left` | `12px` |
+| `@cell-border-right` | `12px` |
+| `@cell-icon-right` | `8px` |
+| `@cell-extra-left` | `8px` |
diff --git a/packages/varlet-ui/src/index-bar/docs/en-US.md b/packages/varlet-ui/src/index-bar/docs/en-US.md
@@ -100,3 +100,14 @@ Use ref to get IndexBar instance and call instance methods.
 | Name | Description	 | arguments |
 | ---- | ------- | -------- |
 | `scrollTo` | scroll to target element	 | `index: number ｜ string` |
+
+### Theme Variables
+#### The following LESS variables can be overridden at build time to modify the theme style
+
+| Variable | Default |
+| --- | --- |
+| `@index-bar-list-item-font-size` | `10px` |
+| `@index-bar-list-item-color` | `#2979ff` |
+| `@index-bar-list-item-active-color` | `#ee0a24` |
+| `@index-bar-list-item-height` | `14px` |
+| `@index-bar-list-item-padding` | `0 10px` |
diff --git a/packages/varlet-ui/src/index-bar/docs/zh-CN.md b/packages/varlet-ui/src/index-bar/docs/zh-CN.md
@@ -100,3 +100,14 @@ createApp().use(IndexAnchor)
 | 方法名 | 说明 | 参数 |
 | ---- | ------- | -------- |
 | `scrollTo` | 滚动到指定锚点	 | `index: number ｜ string` |
+
+### 主题变量
+#### 以下less变量可通过构建时进行变量覆盖从而修改主题样式
+
+| 变量名 | 默认值 |
+| --- | --- |
+| `@index-bar-list-item-font-size` | `10px` |
+| `@index-bar-list-item-color` | `#2979ff` |
+| `@index-bar-list-item-active-color` | `#ee0a24` |
+| `@index-bar-list-item-height` | `14px` |
+| `@index-bar-list-item-padding` | `0 10px` |
diff --git a/packages/varlet-ui/src/index-bar/indexBar.less b/packages/varlet-ui/src/index-bar/indexBar.less
@@ -1,5 +1,11 @@
 @import '../styles/var';
 
+@index-bar-list-item-font-size: @font-size-xs;
+@index-bar-list-item-color: @color-primary;
+@index-bar-list-item-active-color: #ee0a24;
+@index-bar-list-item-height: 14px;
+@index-bar-list-item-padding: 0 10px;
+
 .var-index-bar {
   position: relative;
   height: 100%;
@@ -12,20 +18,20 @@
     list-style: none;
     padding: 0;
     margin: 0;
-    font-size: @font-size-xs;
   }
 
   &__anchor-item {
+    font-size: @index-bar-list-item-font-size;
     display: flex;
     align-items: center;
-    height: 14px;
+    height: @index-bar-list-item-height;
     justify-content: center;
-    padding: 0 10px;
-    color: @color-primary;
+    padding: @index-bar-list-item-padding;
+    color: @index-bar-list-item-color;
     cursor: pointer;
 
     &--active {
-      color: #ee0a24;
+      color: @index-bar-list-item-active-color;
     }
   }
 }
diff --git a/packages/varlet-ui/src/list/List.vue b/packages/varlet-ui/src/list/List.vue
@@ -51,9 +51,8 @@ export default defineComponent({
     }
 
     const isReachBottom = () => {
-      const containerBottom = scroller === window
-        ? window.innerHeight
-        : (scroller as HTMLElement).getBoundingClientRect().bottom
+      const containerBottom =
+        scroller === window ? window.innerHeight : (scroller as HTMLElement).getBoundingClientRect().bottom
 
       const { bottom: detectorBottom } = (detectorEl.value as HTMLElement).getBoundingClientRect()
 
@@ -78,8 +77,6 @@ export default defineComponent({
     onMounted(() => {
       scroller = getParentScroller(listEl.value as HTMLElement)
 
-      console.log(scroller)
-
       props.immediateCheck && check()
 
       scroller.addEventListener('scroll', check)

diff --git a/packages/varlet-ui/src/progress/docs/en-US.md b/packages/varlet-ui/src/progress/docs/en-US.md
@@ -202,4 +202,13 @@ Use `show-track` to hide Progress-Track.
 
 | Name | Description | SlotProps |
 | ----- | -------------- | -------- |
-| `default` | Custom action | - |
+| `default` | Custom action | - |
+
+### Theme Variables
+#### The following LESS variables can be overridden at build time to modify the theme style
+
+| Variable | Default |
+| --- | --- |
+| `@progress-font-size` | `12px` |
+| `@progress-ripple-color` | `#fff` |
+| `@progress-background` | `#2979ff` |
diff --git a/packages/varlet-ui/src/progress/docs/zh-CN.md b/packages/varlet-ui/src/progress/docs/zh-CN.md
@@ -202,4 +202,13 @@ createApp().use(Progress)
 
 | 名称 | 说明 | 参数 |
 | ----- | -------------- | -------- |
-| `default` | 自定义 action | - |
+| `default` | 自定义 action | - |
+
+### 主题变量
+#### 以下less变量可通过构建时进行变量覆盖从而修改主题样式
+
+| 变量名 | 默认值 |
+| --- | --- |
+| `@progress-font-size` | `12px` |
+| `@progress-ripple-color` | `#fff` |
+| `@progress-background` | `#2979ff` |