API

Props

Prop Name	Type	Required	Default	Description
chip	Object/String	Yes	-	The chip data. Can be either a string or an object
textKey	String	No	'text'	The key to use for displaying text when chip is an object
valueKey	String	No	'value'	The key to use for the value when chip is an object
closable	Boolean	No	false	Whether to show the close button

Events

Event Name	Parameters	Description
onDeleteChip	(value)	Emitted when the close button is clicked. Returns the chip value

Slots

Slot Name	Props	Description
default		Main content of the chip. Receives the chip prop
prepend		Content to be displayed before the main content. Receives the chip prop
append		Content to be displayed after the main content. Receives the chip prop
close		Custom close button content. Receives the chip prop. If not provided, uses default close icon

CSS Classes

Class Name	Description
basic-chip	The main container
chip-prepend	The prepend slot container
chip-content	The main content container
chip-append	The append slot container
chip-close	The close button
with-close	Applied when the chip has a close button

Component Structure

<script setup>
import { computed } from 'vue'

const props = defineProps({
  chip: {
    type: [Object, String],
    required: true
  },
  textKey: {
    type: String,
    default: 'text'
  },
  valueKey: {
    type: String,
    default: 'value'
  },
  closable: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['onDeleteChip'])

const displayText = computed(() => {
  if (typeof props.chip === 'string') {
    return props.chip
  }
  return props.chip[props.textKey] || ''
})

const chipValue = computed(() => {
  if (typeof props.chip === 'string') {
    return props.chip
  }
  return props.chip[props.valueKey] || props.chip
})
</script>