feat: suppert elevation for Table、Tabs、AppBar (#928)

varletjs · Mar 23, 2023 · be24aef · be24aef
1 parent 3f1bffc
commit be24aef
Show file tree

Hide file tree

Showing 15 changed files with 24 additions and 14 deletions.
diff --git a/packages/varlet-ui/src/app-bar/AppBar.vue b/packages/varlet-ui/src/app-bar/AppBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="classes(n(), [round, n('--round')], [elevation, n('$-elevation--3')])" :style="rootStyles">
+  <div :class="classes(n(), [round, n('--round')], formatElevation(elevation, 3))" :style="rootStyles">
     <div :class="n('toolbar')">
       <div :class="n('left')">
         <slot name="left" />
@@ -27,7 +27,7 @@
 <script lang="ts">
 import { defineComponent, ref, Ref, onUpdated, computed, type ComputedRef, type StyleValue } from 'vue'
 import { props } from './props'
-import { createNamespace } from '../utils/components'
+import { createNamespace, formatElevation } from '../utils/components'
 import { useMounted } from '@varlet/use'
 
 const { n, classes } = createNamespace('app-bar')
@@ -69,6 +69,7 @@ export default defineComponent({
     return {
       n,
       classes,
+      formatElevation,
       rootStyles,
       paddingLeft,
       paddingRight,

diff --git a/packages/varlet-ui/src/app-bar/docs/en-US.md b/packages/varlet-ui/src/app-bar/docs/en-US.md
@@ -139,7 +139,7 @@ const active = ref(0)
 | `text-color`     | Text color                                           | _string_ | `-`     |
 | `title`          | Title                                                | _string_ | -       |
 | `title-position` | Title location,Can be set to `left`,`center`,`right` | _string_ | `left`  |
-| `elevation`      | Whether to use elevation                             | _boolean_ | `true`  |
+ | `elevation` | Elevation level, options `true` `false` and level of `0-24` | _string \| number \| boolean_|   `true`    |
 | `round`          | Whether to use rounded border                        | _boolean_ | `false` |
 | `image`          | Background image                            | _string_ | `-` |
 | `image-linear-gradient` | Background image linear gradient | _string_ | `-` |

diff --git a/packages/varlet-ui/src/app-bar/docs/zh-CN.md b/packages/varlet-ui/src/app-bar/docs/zh-CN.md
@@ -139,7 +139,7 @@ const active = ref(0)
 | `text-color`     | 文字颜色                              | _string_ | `-`     |
 | `title`          | 标题                                | _string_ | -       |
 | `title-position` | 标题位置，可选值为 `left` `center` `right` | _string_ | `left`  |
-| `elevation`      | 是否使用海拔                            | _boolean_ | `true`  |
+| `elevation` | 海拔高度，可选值为 `true` `false` 和 `0-24`的等级 | _string \| number \| boolean_|   `true`    |
 | `round`          | 是否使用圆角                            | _boolean_ | `false` |
 | `image`          | 背景图片                            | _string_ | `-` |
 | `image-linear-gradient` | 背景图片渐变色 | _string_ | `-` |

diff --git a/packages/varlet-ui/src/app-bar/props.ts b/packages/varlet-ui/src/app-bar/props.ts
@@ -19,7 +19,7 @@ export const props = {
     validator: positionValidator,
   },
   elevation: {
-    type: Boolean,
+    type: [Boolean, String, Number],
     default: true,
   },
   round: {

diff --git a/packages/varlet-ui/src/table/Table.vue b/packages/varlet-ui/src/table/Table.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="classes(n(), n('$-elevation--1'), n('$--box'))">
+  <div :class="classes(n(), formatElevation(elevation, 1), n('$--box'))">
     <div :class="n('main')">
       <table :class="n('table')" :style="{ width: toSizeUnit(fullWidth) }">
         <slot />
@@ -14,7 +14,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { toSizeUnit } from '../utils/elements'
-import { createNamespace } from '../utils/components'
+import { createNamespace, formatElevation } from '../utils/components'
 import { props } from './props'
 
 const { n, classes } = createNamespace('table')
@@ -27,6 +27,7 @@ export default defineComponent({
       toSizeUnit,
       n,
       classes,
+      formatElevation,
     }
   },
 })

diff --git a/packages/varlet-ui/src/table/docs/en-US.md b/packages/varlet-ui/src/table/docs/en-US.md
@@ -109,6 +109,7 @@ function get(current, size) {
 | Prop         | Description | Type | Default |
 |--------------| -------------- | -------- | ---------- |
 | `full-width` | The width of the `table` (including the scrollable part)	| _string \| number_ | `100%` |
+| `elevation` | Elevation level, options `true` `false` and level of `0-24` | _string \| number \| boolean_|   `true`    |
 
 ### Slots
 

diff --git a/packages/varlet-ui/src/table/docs/zh-CN.md b/packages/varlet-ui/src/table/docs/zh-CN.md
@@ -109,6 +109,7 @@ function get(current, size) {
 | 参数           | 说明 | 类型 | 默认值 |
 |--------------| -------------- | -------- | ---------- |
 | `full-width` | `table` 的宽度(包含可滚动部分)	| _string \| number_ | `100%` |
+| `elevation` | 海拔高度，可选值为 `true` `false` 和 `0-24`的等级 | _string \| number \| boolean_|   `true`    |
 
 ### 插槽
 

diff --git a/packages/varlet-ui/src/table/props.ts b/packages/varlet-ui/src/table/props.ts
@@ -3,4 +3,8 @@ export const props = {
     type: [Number, String],
     default: '100%',
   },
+  elevation: {
+    type: [Boolean, Number, String],
+    default: true,
+  },
 }
diff --git a/packages/varlet-ui/src/tabs/Tabs.vue b/packages/varlet-ui/src/tabs/Tabs.vue
@@ -13,7 +13,7 @@
           n('$--box'),
           n(`--item-${itemDirection}`),
           n(`--layout-${layoutDirection}-padding`),
-          [elevation, n('$-elevation--4')],
+          formatElevation(elevation, 4),
           [fixedBottom, n('--fixed-bottom')],
           [safeArea, n('--safe-area')]
         )
@@ -56,7 +56,7 @@ import { type TabProvider } from '../tab/provide'
 import { isNumber } from '@varlet/shared'
 import { linear } from '../utils/shared'
 import { toSizeUnit, scrollTo, doubleRaf } from '../utils/elements'
-import { createNamespace, call } from '../utils/components'
+import { createNamespace, call, formatElevation } from '../utils/components'
 import { useEventListener } from '@varlet/use'
 
 const { n, classes } = createNamespace('tabs')
@@ -214,6 +214,7 @@ export default defineComponent({
       classes,
       resize,
       resizeSticky,
+      formatElevation,
     }
   },
 })

diff --git a/packages/varlet-ui/src/tabs/docs/en-US.md b/packages/varlet-ui/src/tabs/docs/en-US.md
@@ -333,7 +333,7 @@ const active = ref(0)
 | `disabled-color`   | The primary color that the tab is disabled                                   | _string_ | `#e0e0e0`    |
 | `indicator-color`  | The tab activates the color of the indicator                                 | _string_ | `#2979ff`    |
 | `indicator-size`   | Tab activates the size of the indicator                                      | _string \| number_      | `2px`        |
-| `elevation`        | Whether to enable shadows                                                    | _boolean_ | `false`      |
+| `elevation` | Elevation level, options `true` `false` and level of `0-24` | _string \| number \| boolean_|   `false`    |
 | `sticky`           | Whether to enable sticky layouts                                             | _boolean_ | `false`      |
 | `sticky-css-mode`  | Whether to enable sticky layouts native css sticky mode                      | _boolean_ | `false`      |
 | `sticky-z-index`   | Sticky layouts z-index                                                       | _number_ | `10`          |

diff --git a/packages/varlet-ui/src/tabs/docs/zh-CN.md b/packages/varlet-ui/src/tabs/docs/zh-CN.md
@@ -333,7 +333,7 @@ const active = ref(0)
 | `disabled-color`   | 选项卡禁用时的主要颜色                            | _string_ | `#e0e0e0`    |
 | `indicator-color`  | 选项卡激活指示器的颜色                            | _string_ | `#2979ff`    |
 | `indicator-size`   | 选项卡激活指示器的尺寸                            | _string \| number_      | `2px`        |
-| `elevation`        | 是否启用阴影                                 | _boolean_ | `false`      |
+| `elevation` | 海拔高度，可选值为 `true` `false` 和 `0-24`的等级 | _string \| number \| boolean_|   `false`    |
 | `sticky`           | 是否启用粘性布局                               | _boolean_ | `false`      |
 | `sticky-css-mode`  | 是否启用粘性布局的原生 css sticky 模式              | _boolean_ | `false`      |
 | `sticky-z-index`   | 粘性布局的层级                                | _number_ | `10`         |

diff --git a/packages/varlet-ui/src/tabs/props.ts b/packages/varlet-ui/src/tabs/props.ts
@@ -52,7 +52,7 @@ export const props = {
     type: [String, Number],
   },
   elevation: {
-    type: Boolean,
+    type: [Boolean, String, Number],
     default: false,
   },
   scrollable: {

diff --git a/packages/varlet-ui/types/appBar.d.ts b/packages/varlet-ui/types/appBar.d.ts
@@ -10,7 +10,7 @@ export interface AppBarProps extends BasicAttributes {
   textColor?: string
   title?: string
   titlePosition?: AppBarTitlePosition
-  elevation?: boolean
+  elevation?: boolean | string | number
   round?: boolean
   image?: string
   imageLinearGradient?: string

diff --git a/packages/varlet-ui/types/table.d.ts b/packages/varlet-ui/types/table.d.ts
@@ -5,6 +5,7 @@ export declare const tableProps: Record<string, any>
 
 export interface TableProps extends BasicAttributes {
   fullWidth?: string | number
+  elevation?: boolean | string | number
 }
 
 export class Table extends VarComponent {

diff --git a/packages/varlet-ui/types/tabs.d.ts b/packages/varlet-ui/types/tabs.d.ts
@@ -20,7 +20,7 @@ export interface TabsProps extends BasicAttributes {
   color?: string
   indicatorColor?: string
   indicatorSize?: string | number
-  elevation?: boolean
+  elevation?: boolean | string | number
   sticky?: boolean
   stickyCssMode?: boolean
   stickyZIndex?: number