@extclp/vexip-ui/es/components/breadcrumb/breadcrumb.vue2.mjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

import { defineComponent as y, useSlots as w, computed as f, reactive as A, toRef as I, provide as T, watch as $, createElementBlock as p, openBlock as u, normalizeClass as z, renderSlot as b, createVNode as h, unref as n, withCtx as d, Fragment as D, renderList as F, createBlock as L, createTextVNode as M, toDisplayString as P } from "vue";
import "../breadcrumb-item/index.mjs";
import "../renderer/index.mjs";
import { useProps as x, useNameHelper as H, emitEvent as _ } from "@vexip-ui/config";
import { debounceMinor as O, isNull as U, callIfFunc as j } from "@vexip-ui/utils";
import { breadcrumbProps as q } from "./props.mjs";
import { BREADCRUMB_STATE as G } from "./symbol.mjs";
import S from "../renderer/renderer.mjs";
import J from "./breadcrumb-item.vue2.mjs";
const ae = /* @__PURE__ */ y({
  name: "Breadcrumb",
  __name: "breadcrumb",
  props: q,
  setup(v) {
    const t = x("breadcrumb", v, {
      separator: "/",
      border: !1,
      options: {
        default: () => [],
        static: !0
      },
      router: null,
      slots: () => ({})
    }), R = w(), s = H("breadcrumb"), l = /* @__PURE__ */ new Set(), k = f(() => ({
      [s.b()]: !0,
      [s.bs("vars")]: !0,
      [s.bm("inherit")]: t.inherit,
      [s.bm("border")]: t.border
    })), B = f(() => {
      var e;
      if (t.router && !((e = t.options) != null && e.length)) {
        const a = t.router.currentRoute.value.matched, r = [];
        for (const o of a) {
          const c = o.meta || {};
          c.menu !== !1 && r.push({
            label: c.label || o.path,
            name: c.name || o.name
          });
        }
        return r;
      }
      return t.options.map((a) => typeof a == "string" ? { label: a } : a);
    }), m = O(() => {
      Array.from(l).forEach((e, a) => {
        U(e.label) && (e.label = a + 1);
      });
    }), i = A({
      separator: I(t, "separator"),
      separatorRenderer: null,
      increaseItem: C,
      decreaseItem: E,
      handleSelect: N,
      refreshLabels: m,
      handleSeparatorClick: g
    });
    T(G, i), $(
      [() => R.separator, () => t.slots.separator],
      ([e, a]) => {
        i.separatorRenderer = e ? (r) => e(r) : a ? (r) => a(r) : null;
      },
      { immediate: !0 }
    );
    function C(e) {
      l.add(e), m();
    }
    function E(e) {
      l.delete(e), m();
    }
    function N(e) {
      _(t.onSelect, e);
    }
    function g(e) {
      _(t.onSeparatorClick, e);
    }
    return (e, a) => (u(), p("ol", {
      class: z(k.value)
    }, [
      b(e.$slots, "default", {}, () => [
        h(n(S), {
          renderer: n(t).slots.default
        }, {
          default: d(() => [
            (u(!0), p(D, null, F(B.value, (r, o) => (u(), L(n(J), {
              key: r.label,
              label: r.label
            }, {
              default: d(() => [
                b(e.$slots, "item", {
                  option: r,
                  index: o
                }, () => [
                  h(n(S), {
                    renderer: n(t).slots.item,
                    data: { option: r, index: o }
                  }, {
                    default: d(() => [
                      M(P(r.name ? n(j)(r.name) : r.label), 1)
                    ]),
                    _: 2
                  }, 1032, ["renderer", "data"])
                ])
              ]),
              _: 2
            }, 1032, ["label"]))), 128))
          ]),
          _: 3
        }, 8, ["renderer"])
      ])
    ], 2));
  }
});
export {
  ae as default
};
//# sourceMappingURL=breadcrumb.vue2.mjs.map