<template>
  <span class="value">
    <slot></slot>
    <span v-if="ondelete" class="icon-cross" @click.stop="ondelete"></span>
  </span>
</template>

<style lang="scss" scoped>
.value {
  display: inline-block;
  vertical-align: top;
  margin: 2px;
  padding: 4px 6px;
  background: #eee;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  max-width: 95%;
  overflow: hidden;
  text-overflow: ellipsis;
  .icon-cross {
    font-size: 75%;
  }
}
</style>

<script>
export default {
  props: {
    ondelete: {
      type: Function
    }
  }
}
</script>
