<template>
  <div class="kole-breadcrumb">
    <template v-for="(it, i) in items" :key="i">
      <span class="kole-breadcrumb-item" :class="{ 'is-current': i === items.length - 1 }"
            @click="i !== items.length - 1 && $emit('select', it)">{{ it.label }}</span>
      <span v-if="i !== items.length - 1" class="kole-breadcrumb-sep">/</span>
    </template>
  </div>
</template>

<script>
export default {
  name: 'KoleBreadcrumb',
  props: { items: { type: Array, default: function () { return []; } } }
};
</script>

<style src="./Breadcrumb.css"></style>
