perf(ui/bottom-navigation): handle active boundary

packages/varlet-ui/src/bottom-navigation/BottomNavigation.vue

@@ -20,13 +20,15 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed, onMounted, onUpdated } from 'vue'
+import { defineComponent, ref, computed, onMounted, onUpdated, watch } from 'vue'
 import type { Ref, ComputedRef } from 'vue'
 import { props } from './props'
 import VarButton from '../button'
 import { useBottomNavigationItems } from './provide'
 import type { BottomNavigationProvider } from './provide'
+import type { BottomNavigationItemProvider } from '../bottom-navigation-item/provide'
 import { createNamespace, call } from '../utils/components'
+import { isNumber } from '../utils/shared'
 
 const { n, classes } = createNamespace('bottom-navigation')
 const { n: nItem } = createNamespace('bottom-navigation-item')
@@ -48,6 +50,39 @@ export default defineComponent({
     const activeColor: ComputedRef<string | undefined> = computed(() => props.activeColor)
     const inactiveColor: ComputedRef<string | undefined> = computed(() => props.inactiveColor)
     const fabProps = ref({})
+    const { length, bottomNavigationItems, bindBottomNavigationItem } = useBottomNavigationItems()
+
+    const matchBoundary = (): void => {
+      if (length.value === 0 || matchName() || matchIndex()) {
+        return
+      }
+
+      handleActiveIndex()
+    }
+
+    const matchName = (): BottomNavigationItemProvider | undefined => {
+      return bottomNavigationItems.find(({ name }: BottomNavigationItemProvider) => {
+        return active.value === name.value
+      })
+    }
+
+    const matchIndex = (): BottomNavigationItemProvider | undefined => {
+      return bottomNavigationItems.find(({ index }: BottomNavigationItemProvider) => {
+        return active.value === index.value
+      })
+    }
+
+    const handleActiveIndex = () => {
+      if (!isNumber(active.value)) {
+        return
+      }
+
+      if (active.value < 0) {
+        call(props['onUpdate:modelValue'], 0)
+      } else if (active.value > length.value - 1) {
+        call(props['onUpdate:modelValue'], length.value - 1)
+      }
+    }
 
     const onToggle = (changedValue: number | string) => {
       if (props.onBeforeChange) {
@@ -70,8 +105,6 @@ export default defineComponent({
       call(props.onChange, changedValue)
     }
 
-    const { length, bindBottomNavigationItem } = useBottomNavigationItems()
-
     const removeMarginClass = () => {
       const bottomNavigationItems: Element[] = getBottomNavigationItems()
       bottomNavigationItems.forEach((dom: Element) => {
@@ -112,7 +145,6 @@ export default defineComponent({
     const handleFabClick = () => {
       call(props.onFabClick)
     }
-    fabProps.value = { ...defaultFabProps, ...props.fabProps }
 
     const bottomNavigationProvider: BottomNavigationProvider = {
       active,
@@ -123,6 +155,16 @@ export default defineComponent({
 
     bindBottomNavigationItem(bottomNavigationProvider)
 
+    watch(() => length.value, matchBoundary)
+
+    watch(
+      () => props.fabProps,
+      (newValue) => {
+        fabProps.value = { ...defaultFabProps, ...newValue }
+      },
+      { immediate: true, deep: true }
+    )
+
     onMounted(() => {
       if (!slots.fab) {
         return

packages/varlet-ui/src/tabs/Tabs.vue

@@ -59,7 +59,7 @@ export default defineComponent({
   components: { VarSticky },
   inheritAttrs: false,
   props,
-  setup (props) {
+  setup(props) {
     const indicatorWidth: Ref<string> = ref('0px')
     const indicatorHeight: Ref<string> = ref('0px')
     const indicatorX: Ref<string> = ref('0px')