refactor(ui/BottomNavigation): docs optimize & code optimize & add cl…

…ass (#394) * perf(ui/divider): add class * refactor(ui/BottomNavigation): code optimize * docs: unified card level
varletjs · Apr 5, 2022 · af630c9 · af630c9
1 parent 520d211
commit af630c9
Show file tree

Hide file tree

Showing 25 changed files with 318 additions and 392 deletions.
diff --git a/packages/varlet-ui/src/bottom-navigation-item/BottomNavigationItem.less b/packages/varlet-ui/src/bottom-navigation-item/BottomNavigationItem.less
@@ -18,22 +18,33 @@
 
 .var-bottom-navigation-item {
   height: 100%;
-  padding-top: 6px;
+  padding: 6px 12px 8px;
   position: relative;
-  flex: 1;
-  text-align: center;
+  display: inline-flex;
+  flex: 1 1 0%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
   line-height: var(--bottom-navigation-item-line-height);
   color: var(--bottom-navigation-item-inactive-color);
-  transition: margin 0.25s;
+  cursor: pointer;
+  user-select: none;
+  vertical-align: middle;
+  appearance: none;
+  text-decoration: none;
+  background-color: transparent;
+  outline: 0;
+  border: 0;
+  transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, margin 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    padding-top 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 
   &--active {
-    background-color: var(--bottom-navigation-item-active-background-color);
-    transition: background-color 0.25s;
     color: var(--bottom-navigation-item-active-color);
+    background-color: var(--bottom-navigation-item-active-background-color);
+    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 
-    .var-icon,
-    .var-bottom-navigation__label {
-      transform: scale(1.1);
+    .var-bottom-navigation-item__label {
+      font-size: calc(var(--bottom-navigation-item-font-size) * 1.16);
     }
   }
 
@@ -51,18 +62,17 @@
 
   &__icon[var-bottom-navigation-item-cover] {
     font-size: var(--bottom-navigation-item-icon-size);
-    transition: transform 0.25s;
   }
 
   &__badge[var-bottom-navigation-item-cover] {
     position: absolute;
-    left: -10px;
-    transform: translate(20%, -20px);
+    left: 4px;
+    transform: translateY(-22px);
   }
 
   &__label {
     margin-top: var(--bottom-navigation-item-icon-margin-bottom);
     font-size: var(--bottom-navigation-item-font-size);
-    transition: transform 0.25s;
+    transition: font-size 0.2s ease 0.1s;
   }
 }
diff --git a/packages/varlet-ui/src/bottom-navigation-item/BottomNavigationItem.vue b/packages/varlet-ui/src/bottom-navigation-item/BottomNavigationItem.vue
@@ -1,8 +1,7 @@
 <template>
-  <div
-    class="var-bottom-navigation-item"
+  <button
+    :class="classes(n(), [active === index || active === name, n('--active')])"
     v-ripple
-    :class="`${active === index || active === name ? 'var-bottom-navigation-item--active' : ''}`"
     :style="{
       color: computeColorStyle(),
     }"
@@ -12,24 +11,18 @@
       v-if="icon && !$slots.icon"
       :name="icon"
       :namespace="namespace"
-      class="var-bottom-navigation-item__icon"
+      :class="classes(n('icon'))"
       var-bottom-navigation-item-cover
     />
     <slot name="icon" :active="active === index || active === name"></slot>
-    <var-badge
-      v-if="badge"
-      v-bind="badgeProps"
-      class="var-bottom-navigation-item__badge"
-      var-bottom-navigation-item-cover
-    />
-
-    <div class="var-bottom-navigation-item__label">
+    <var-badge v-if="badge" v-bind="badgeProps" :class="classes(n('badge'))" var-bottom-navigation-item-cover />
+    <span :class="classes(n('label'))">
       <template v-if="!$slots.default">
         {{ label }}
       </template>
       <slot></slot>
-    </div>
-  </div>
+    </span>
+  </button>
 </template>
 
 <script lang="ts">
@@ -42,6 +35,9 @@ import type { ComputedRef } from 'vue'
 import type { BadgeProps } from '../../types/badge'
 import { useBottomNavigation } from './provide'
 import type { BottomNavigationItemProvider } from './provide'
+import { createNamespace, call } from '../utils/components'
+
+const { n, classes } = createNamespace('bottom-navigation-item')
 
 const defaultBadgeProps = {
   type: 'danger',
@@ -76,9 +72,9 @@ export default defineComponent({
     const handleClick = () => {
       const active = name.value || index.value
 
-      props.onClick?.(active)
+      call(props.onClick, active)
 
-      bottomNavigation?.onToggle(active)
+      call(bottomNavigation.onToggle, active)
     }
 
     watch(
@@ -90,6 +86,8 @@ export default defineComponent({
     )
 
     return {
+      n,
+      classes,
       index,
       active,
       badge,
@@ -105,5 +103,5 @@ export default defineComponent({
 @import '../styles/common';
 @import '../icon/icon';
 @import '../ripple/ripple';
-@import './BottomNavigationItem';
+@import './bottomNavigationItem';
 </style>
diff --git a/packages/varlet-ui/src/bottom-navigation-item/provide.ts b/packages/varlet-ui/src/bottom-navigation-item/provide.ts
@@ -1,8 +1,8 @@
 import type { ComputedRef } from 'vue'
 import { useAtParentIndex, useParent } from '../utils/components'
 import {
-  BOTTOMNAVIGATION_BIND_BOTTOMNAVIGATIONITEM_KEY,
-  BOTTOMNAVIGATION_COUNT_BOTTOMNAVIGATIONITEM_KEY,
+  BOTTOM_NAVIGATION_BIND_BOTTOM_NAVIGATION_ITEM_KEY,
+  BOTTOM_NAVIGATION_COUNT_BOTTOM_NAVIGATION_ITEM_KEY,
   BottomNavigationProvider,
 } from '../bottom-navigation/provide'
 
@@ -13,9 +13,9 @@ export interface BottomNavigationItemProvider {
 
 export function useBottomNavigation() {
   const { parentProvider, bindParent } = useParent<BottomNavigationProvider, BottomNavigationItemProvider>(
-    BOTTOMNAVIGATION_BIND_BOTTOMNAVIGATIONITEM_KEY
+    BOTTOM_NAVIGATION_BIND_BOTTOM_NAVIGATION_ITEM_KEY
   )
-  const { index } = useAtParentIndex(BOTTOMNAVIGATION_COUNT_BOTTOMNAVIGATIONITEM_KEY)
+  const { index } = useAtParentIndex(BOTTOM_NAVIGATION_COUNT_BOTTOM_NAVIGATION_ITEM_KEY)
 
   if (!parentProvider || !bindParent || !index) {
     throw Error('<var-bottom-navigation-item/> must in <var-bottom-navigation/>')

diff --git a/packages/varlet-ui/src/bottom-navigation/BottomNavigation.vue b/packages/varlet-ui/src/bottom-navigation/BottomNavigation.vue
@@ -1,15 +1,13 @@
 <template>
   <div
-    class="var-bottom-navigation"
+    :class="classes(n(), [fixed, n('--fixed')], [border, n('--border')])"
     ref="bottomNavigationDom"
-    :class="`${fixed ? 'var-bottom-navigation--fixed' : ''} ${border ? 'var-bottom-navigation--border' : ''}`"
     :style="`z-index:${zIndex}`"
   >
     <slot></slot>
     <div
       v-if="$slots.fab"
-      class="var-bottom-navigation__fab var-elevation--8"
-      :class="length % 2 ? 'var-bottom-navigation--fab-right' : 'var-bottom-navigation--fab-center'"
+      :class="classes(n('fab'), 'var-elevation--6', [length % 2, n('--fab-right'), n('--fab-center')])"
     >
       <slot name="fab"></slot>
     </div>
@@ -22,10 +20,14 @@ import type { Ref, ComputedRef } from 'vue'
 import { props } from './props'
 import { useBottomNavigationItems } from './provide'
 import type { BottomNavigationProvider } from './provide'
+import { createNamespace, call } from '../utils/components'
 
-const RIGHT_HALF_SPACE_CLASS = 'var-bottom-navigation-item--right-half-space'
-const LEFT_HALF_SPACE_CLASS = 'var-bottom-navigation-item--left-half-space'
-const RIGHT_SPACE_CLASS = 'var-bottom-navigation-item--right-space'
+const { n, classes } = createNamespace('bottom-navigation')
+const { n: nItem } = createNamespace('bottom-navigation-item')
+
+const RIGHT_HALF_SPACE_CLASS = nItem('--right-half-space')
+const LEFT_HALF_SPACE_CLASS = nItem('--left-half-space')
+const RIGHT_SPACE_CLASS = nItem('--right-space')
 
 export default defineComponent({
   name: 'VarBottomNavigation',
@@ -45,16 +47,16 @@ export default defineComponent({
     }
 
     const handleBeforeChange = (changedValue: number | string) => {
-      Promise.resolve(props.onBeforeChange?.(changedValue)).then((res) => {
+      Promise.resolve(call(props.onBeforeChange, changedValue)).then((res) => {
         if (res) {
           handleChange(changedValue)
         }
       })
     }
 
     const handleChange = (changedValue: number | string) => {
-      props['onUpdate:modelValue']?.(changedValue)
-      props.onChange?.(changedValue)
+      call(props['onUpdate:modelValue'], changedValue)
+      call(props.onChange, changedValue)
     }
 
     const { length, bindBottomNavigationItem } = useBottomNavigationItems()
@@ -93,7 +95,7 @@ export default defineComponent({
     }
 
     const getBottomNavigationItems = () => {
-      return Array.from(bottomNavigationDom.value!.querySelectorAll(`.var-bottom-navigation-item`))
+      return Array.from(bottomNavigationDom.value!.querySelectorAll(`.${nItem()}`))
     }
 
     const bottomNavigationProvider: BottomNavigationProvider = {
@@ -124,6 +126,8 @@ export default defineComponent({
     })
 
     return {
+      n,
+      classes,
       length,
       bottomNavigationDom,
     }
@@ -133,5 +137,5 @@ export default defineComponent({
 
 <style lang="less">
 @import '../styles/common';
-@import './BottomNavigation';
+@import './bottomNavigation';
 </style>