ano-ui/components/ACollapseItem/use-collapse-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 { computed, inject } from 'vue'
import { collapseContextKey } from '../tokens/collapse'
import type { CollapseItemProps } from './collapse-item'

export function useCollapseItem(props: CollapseItemProps) {
  const collapse = inject(collapseContextKey)

  const isActive = computed(() => collapse?.activeNames.value.includes(props.name))
  const arrow = computed(() => isActive.value ? 'bottom' : 'right')

  function handleHeaderClick() {
    if (props.disabled)
      return
    collapse?.handleItemClick(props.name)
  }

  return {
    isActive,
    arrow,

    handleHeaderClick,
  }
}