@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
80 lines (79 loc) • 2.36 kB
JavaScript
import { defineComponent as E, inject as R, ref as i, watch as c, reactive as I, onBeforeUnmount as _, openBlock as m, createElementBlock as f, normalizeClass as p, unref as l, createElementVNode as v, withKeys as w, renderSlot as k, createTextVNode as b, toDisplayString as h, createBlock as N, Fragment as S } from "vue";
import "../renderer/index.mjs";
import { useNameHelper as T, emitEvent as C } from "@vexip-ui/config";
import { isFunction as g } from "@vexip-ui/utils";
import { breadcrumbItemProps as A } from "./props.mjs";
import { BREADCRUMB_STATE as D } from "./symbol.mjs";
import F from "../renderer/renderer.mjs";
const z = /* @__PURE__ */ E({
name: "BreadcrumbItem",
__name: "breadcrumb-item",
props: A,
setup(B) {
const t = B, n = T("breadcrumb"), e = R(D, null), a = i(t.label), u = i("/"), s = i(null);
if (c(
() => t.label,
(r) => {
a.value = r, e == null || e.refreshLabels();
}
), e) {
const r = I({
label: a
});
c(
() => e.separator,
(o) => {
u.value = o;
},
{ immediate: !0 }
), c(
() => e.separatorRenderer,
(o) => {
s.value = o;
},
{ immediate: !0 }
), e.increaseItem(r), _(() => {
e.decreaseItem(r);
});
}
function d() {
C(t.onSelect, a.value), e == null || e.handleSelect(a.value);
}
function y() {
C(t.onSeparatorClick, a.value), e == null || e.handleSeparatorClick(a.value);
}
return (r, o) => (m(), f("li", {
class: p(l(n).be("item"))
}, [
v("a", {
class: p(l(n).be("label")),
tabindex: "0",
onClick: d,
onKeydown: w(d, ["enter"])
}, [
k(r.$slots, "default", {}, () => [
b(h(r.label), 1)
])
], 34),
v("span", {
class: p(l(n).be("separator")),
role: "separator",
onClick: y
}, [
k(r.$slots, "separator", {}, () => [
l(g)(s.value) ? (m(), N(l(F), {
key: 0,
renderer: s.value,
data: { label: a.value }
}, null, 8, ["renderer", "data"])) : (m(), f(S, { key: 1 }, [
b(h(u.value), 1)
], 64))
])
], 2)
], 2));
}
});
export {
z as default
};
//# sourceMappingURL=breadcrumb-item.vue2.mjs.map