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

<style lang="scss" scoped>
.picker-value {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 2px;
  padding: 4px 6px;
  background: #eee;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;

  span {
    height: auto;
    line-height: inherit;
    width: auto;
  }

  &.multi {
    cursor: move;
  }

  [class*='icon-'] {
    font-size: 75%;
  }

  [readonly] .multi {
    cursor: not-allowed;
  }
}
</style>

<script>
export default {
  props: {
    ondelete: {
      type: Function
    },
    canDelete: {
      type: Boolean
    }
  }
};
</script>
