ano-ui/components/ATabBarItem/use-tab-bar-item.ts

<p align="center"> <img src="https://github.com/ano-ui/ano-ui/raw/main/public/logo.svg" style="width:100px;" /> <h1 align="center">Ano-UI (WIP)</h1> <p align="center">An UniApp UI components with UnoCSS.</p> </p> <p align="center"> <a href="https://www.np

import type { SetupContext } from 'vue'
import { computed, inject } from 'vue'
import { CHANGE_EVENT, CLICK_EVENT } from '../constants'
import { tabBarKey } from '../tokens/tabbar'
import type { TabBarItemEmits, TabBarItemProps } from './tab-bar-item'

export function useTabBarItem(props: TabBarItemProps, emit: SetupContext<TabBarItemEmits>['emit']) {
  const tabBar = inject(tabBarKey, undefined)

  const modelValue = computed<TabBarItemProps['name']>(() => tabBar ? tabBar!.modelValue : props.name)
  const active = computed(() => tabBar ? tabBar!.modelValue === props.name : false)

  function toggle(evt: MouseEvent) {
    evt.stopPropagation()
    if (modelValue.value === props.name)
      return

    const newValue = props.name
    if (tabBar)
      tabBar.changeEvent(newValue)
    emit && emit(CLICK_EVENT, evt)
    emit && emit(CHANGE_EVENT, newValue)
  }

  return {
    toggle,
    active,
  }
}