{"version":3,"file":"breadcrumb-item.vue2.mjs","sources":["../../../components/breadcrumb/breadcrumb-item.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Renderer } from '@/components/renderer'\n\nimport { inject, onBeforeUnmount, reactive, ref, watch } from 'vue'\n\nimport { emitEvent, useNameHelper } from '@vexip-ui/config'\nimport { isFunction } from '@vexip-ui/utils'\nimport { breadcrumbItemProps } from './props'\nimport { BREADCRUMB_STATE } from './symbol'\n\nimport type { BreadcrumbItemState, SelectEvent, SeparatorRenderFn } from './symbol'\n\ndefineOptions({ name: 'BreadcrumbItem' })\n\nconst props = defineProps(breadcrumbItemProps)\n\ndefineSlots<{\n  default: () => any,\n  separator: () => any\n}>()\n\nconst nh = useNameHelper('breadcrumb')\n\nconst breadcrumbState = inject(BREADCRUMB_STATE, null)\n\nconst currentLabel = ref(props.label)\nconst separator = ref('/')\nconst separatorRenderer = ref<SeparatorRenderFn | null>(null)\n\nwatch(\n  () => props.label,\n  value => {\n    currentLabel.value = value\n    breadcrumbState?.refreshLabels()\n  }\n)\n\nif (breadcrumbState) {\n  const state: BreadcrumbItemState = reactive({\n    label: currentLabel\n  })\n\n  watch(\n    () => breadcrumbState.separator,\n    value => {\n      separator.value = value\n    },\n    { immediate: true }\n  )\n  watch(\n    () => breadcrumbState.separatorRenderer,\n    value => {\n      separatorRenderer.value = value\n    },\n    { immediate: true }\n  )\n\n  breadcrumbState.increaseItem(state)\n\n  onBeforeUnmount(() => {\n    breadcrumbState.decreaseItem(state)\n  })\n}\n\nfunction handleClick() {\n  emitEvent(props.onSelect! as SelectEvent, currentLabel.value)\n  breadcrumbState?.handleSelect(currentLabel.value)\n}\n\nfunction handleSeparatorClick() {\n  emitEvent(props.onSeparatorClick! as SelectEvent, currentLabel.value)\n  breadcrumbState?.handleSeparatorClick(currentLabel.value)\n}\n</script>\n\n<template>\n  <li :class=\"nh.be('item')\">\n    <a\n      :class=\"nh.be('label')\"\n      tabindex=\"0\"\n      @click=\"handleClick\"\n      @keydown.enter=\"handleClick\"\n    >\n      <slot>{{ label }}</slot>\n    </a>\n    <span :class=\"nh.be('separator')\" role=\"separator\" @click=\"handleSeparatorClick\">\n      <slot name=\"separator\">\n        <Renderer\n          v-if=\"isFunction(separatorRenderer)\"\n          :renderer=\"separatorRenderer\"\n          :data=\"{ label: currentLabel }\"\n        ></Renderer>\n        <template v-else>\n          {{ separator }}\n        </template>\n      </slot>\n    </span>\n  </li>\n</template>\n"],"names":["props","__props","nh","useNameHelper","breadcrumbState","inject","BREADCRUMB_STATE","currentLabel","ref","separator","separatorRenderer","watch","value","state","reactive","onBeforeUnmount","handleClick","emitEvent","handleSeparatorClick"],"mappings":";;;;;;;;;;;;AAcA,UAAMA,IAAQC,GAORC,IAAKC,EAAc,YAAY,GAE/BC,IAAkBC,EAAOC,GAAkB,IAAI,GAE/CC,IAAeC,EAAIR,EAAM,KAAK,GAC9BS,IAAYD,EAAI,GAAG,GACnBE,IAAoBF,EAA8B,IAAI;AAU5D,QARAG;AAAA,MACE,MAAMX,EAAM;AAAA,MACZ,CAASY,MAAA;AACP,QAAAL,EAAa,QAAQK,GACrBR,KAAA,QAAAA,EAAiB;AAAA,MAAc;AAAA,IAEnC,GAEIA,GAAiB;AACnB,YAAMS,IAA6BC,EAAS;AAAA,QAC1C,OAAOP;AAAA,MAAA,CACR;AAED,MAAAI;AAAA,QACE,MAAMP,EAAgB;AAAA,QACtB,CAASQ,MAAA;AACP,UAAAH,EAAU,QAAQG;AAAA,QACpB;AAAA,QACA,EAAE,WAAW,GAAK;AAAA,MACpB,GACAD;AAAA,QACE,MAAMP,EAAgB;AAAA,QACtB,CAASQ,MAAA;AACP,UAAAF,EAAkB,QAAQE;AAAA,QAC5B;AAAA,QACA,EAAE,WAAW,GAAK;AAAA,MACpB,GAEAR,EAAgB,aAAaS,CAAK,GAElCE,EAAgB,MAAM;AACpB,QAAAX,EAAgB,aAAaS,CAAK;AAAA,MAAA,CACnC;AAAA,IAAA;AAGH,aAASG,IAAc;AACX,MAAAC,EAAAjB,EAAM,UAA0BO,EAAa,KAAK,GAC3CH,KAAA,QAAAA,EAAA,aAAaG,EAAa;AAAA,IAAK;AAGlD,aAASW,IAAuB;AACpB,MAAAD,EAAAjB,EAAM,kBAAkCO,EAAa,KAAK,GACnDH,KAAA,QAAAA,EAAA,qBAAqBG,EAAa;AAAA,IAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}