@indielayer/ui
Version:
Indielayer UI Components with Tailwind CSS build for Vue 3
70 lines (69 loc) • 2.27 kB
JavaScript
import { defineComponent as y, openBlock as o, createElementBlock as s, normalizeClass as n, unref as a, normalizeStyle as k, createElementVNode as B, Fragment as b, renderList as w, createVNode as g, withCtx as C, createBlock as i, createCommentVNode as l, createTextVNode as N, toDisplayString as m } from "vue";
import { useTheme as S } from "../../composables/useTheme.js";
import { useColors as V } from "../../composables/useColors.js";
import u from "../icon/Icon.vue.js";
import z from "../link/Link.vue.js";
const v = { key: 1 }, E = {
...V.props(),
items: Array,
separator: {
type: String,
default: "/"
},
icon: String,
shadow: Boolean,
underline: Boolean
}, L = { name: "XBreadcrumbs" }, P = /* @__PURE__ */ y({
...L,
props: E,
setup(d) {
const p = d, { styles: f, classes: t, className: h } = S("Breadcrumbs", {}, p);
return (e, T) => e.items && e.items.length > 0 ? (o(), s("nav", {
key: 0,
"aria-label": "Breadcrumb",
class: n(a(h)),
style: k(a(f))
}, [
B("ul", {
class: n(a(t).wrapper)
}, [
(o(!0), s(b, null, w(e.items, (r, c) => (o(), s("li", {
key: c,
class: n(a(t).item)
}, [
g(z, {
to: r.to,
href: r.href,
color: r.color || e.color,
shadow: r.shadow || e.shadow,
underline: r.underline || e.underline,
class: "flex items-center"
}, {
default: C(() => [
r.icon ? (o(), i(u, {
key: 0,
icon: r.icon,
class: "mr-1.5"
}, null, 8, ["icon"])) : l("", !0),
N(" " + m(r.label), 1)
]),
_: 2
}, 1032, ["to", "href", "color", "shadow", "underline"]),
c !== e.items.length - 1 ? (o(), s("div", {
key: 0,
class: n(a(t).separator)
}, [
e.icon ? (o(), i(u, {
key: 0,
icon: e.icon,
size: "sm"
}, null, 8, ["icon"])) : e.separator ? (o(), s("span", v, m(e.separator), 1)) : l("", !0)
], 2)) : l("", !0)
], 2))), 128))
], 2)
], 6)) : l("", !0);
}
});
export {
P as default
};