vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
89 lines (88 loc) • 3.09 kB
JavaScript
import { defineComponent as p, computed as f, createElementBlock as s, openBlock as l, normalizeStyle as o, normalizeClass as c, Fragment as h, renderList as g, createBlock as y, createCommentVNode as v, resolveDynamicComponent as k, withCtx as C, createTextVNode as S, toDisplayString as n, renderSlot as w, createElementVNode as B } from "vue";
const q = { key: 0 }, N = {
key: 1,
focusable: "false",
"data-icon": "right",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, z = /* @__PURE__ */ p({
__name: "Breadcrumb",
props: {
routes: { default: () => [] },
breadcrumbClass: { default: void 0 },
breadcrumbStyle: { default: () => ({}) },
maxWidth: { default: "100%" },
separator: { default: void 0 },
separatorStyle: { default: () => ({}) },
target: { default: "_self" }
},
setup(u) {
const b = u, d = f(() => b.routes.length);
function i(e) {
let a = "";
if (e.path && (a = e.path), e.query && JSON.stringify(e.query) !== "{}") {
const r = e.query;
Object.keys(r).forEach((t, m) => {
m === 0 ? a = a + "?" + t + "=" + r[t] : a = a + "&" + t + "=" + r[t];
});
}
return a;
}
return (e, a) => (l(), s("div", {
class: c(["breadcrumb-wrap", e.breadcrumbClass]),
style: o([
`
--breadcrumb-color: rgba(0, 0, 0, 0.45);
--breadcrumb-bg-color-hover: rgba(0, 0, 0, 0.06);
--breadcrumb-color-hover: rgba(0, 0, 0, 0.88);
--breadcrumb-color-active: rgba(0, 0, 0, 0.88);
--breadcrumb-padding: 0 4px;
--breadcrumb-border-radius: 4px;
--breadcrumb-separator-color: rgba(0, 0, 0, 0.45);
`,
e.breadcrumbStyle
])
}, [
(l(!0), s(h, null, g(e.routes, (r, t) => (l(), s("div", {
class: "breadcrumb-item",
key: t
}, [
(l(), y(k(r.path ? "a" : "span"), {
class: c(["breadcrumb-link", {
"link-hover": r.path,
"link-active": t === d.value - 1
}]),
style: o(`max-width: ${e.maxWidth}px;`),
href: i(r),
target: e.target,
title: r.name
}, {
default: C(() => [
S(n(r.name), 1)
]),
_: 2
}, 1032, ["class", "style", "href", "target", "title"])),
t < d.value - 1 ? (l(), s("span", {
key: 0,
class: "breadcrumb-separator",
style: o(e.separatorStyle)
}, [
w(e.$slots, "separator", {
route: r,
index: t
}, () => [
e.separator ? (l(), s("span", q, n(e.separator), 1)) : (l(), s("svg", N, [...a[0] || (a[0] = [
B("path", { d: "M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z" }, null, -1)
])]))
], !0)
], 4)) : v("", !0)
]))), 128))
], 6));
}
});
export {
z as default
};