@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 _, createElementBlock as f, openBlock as m, 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