ano-ui/components/ATag/use-tag.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 } from 'vue'
import { CLICK_EVENT, CLOSE_EVENT } from '../constants'
import type { TagEmits, TagProps } from './tag'

export function useTag(props: TagProps, emit: SetupContext<TagEmits>['emit']) {
  const disabled = computed(() => props.disabled)

  function clickHandler(evt: MouseEvent) {
    if (disabled.value)
      return

    emit(CLICK_EVENT, evt)
  }

  function closeHandler(evt: MouseEvent) {
    if (props.disabled)
      return

    emit(CLOSE_EVENT, evt)
  }

  const classes = computed(() => [
    `a-${props.type}`,
    props.type === 'default' && 'a-type-default',
    `a-tag-${props.size}`,
    `a-${props.variant}`,
    { '!p-0.5 aspect-square': props.iconOnly },
    { 'op-50': disabled.value },
  ])

  return {
    disabled,
    classes,

    clickHandler,
    closeHandler,
  }
}