vue-3-breadcrumbs/dist/cjs/AmBreadcrumbs-8489d1fe.js

Breadcrumbs logic and component for vue 3

'use strict';

var vue = require('vue');

var script = {
  name: 'AmBreadcrumbs',
  props: {
    showCurrentCrumb: {
      type: Boolean,
      default: true,
    },
  }
};

const _hoisted_1 = {
  key: 0,
  class: "am-breadcrumbs"
};
const _hoisted_2 = { class: "am-breadcrumbs__list" };
const _hoisted_3 = {
  key: 0,
  class: "am-breadcrumbs__item"
};
const _hoisted_4 = { class: "am-breadcrumbs__link-wrapper" };
const _hoisted_5 = {
  key: 0,
  class: "am-breadcrumbs__link am-breadcrumbs__link_current"
};
const _hoisted_6 = /*#__PURE__*/vue.createElementVNode("div", { class: "am-breadcrumbs__separator" }, " / ", -1 /* HOISTED */);

function render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_router_link = vue.resolveComponent("router-link");

  return (_ctx.$breadcrumbs && _ctx.$breadcrumbs.value && _ctx.$breadcrumbs.value.length && ($props.showCurrentCrumb || !_ctx.$breadcrumbs.value[0].current))
    ? (vue.openBlock(), vue.createElementBlock("nav", _hoisted_1, [
        vue.createElementVNode("ol", _hoisted_2, [
          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.$breadcrumbs.value, (crumb, idx) => {
            return (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
              ($props.showCurrentCrumb || !crumb.current)
                ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_3, [
                    vue.renderSlot(_ctx.$slots, "crumb", { crumb: crumb }, () => [
                      vue.createElementVNode("div", _hoisted_4, [
                        (crumb.current)
                          ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5, vue.toDisplayString(crumb.label), 1 /* TEXT */))
                          : (vue.openBlock(), vue.createBlock(_component_router_link, {
                              key: 1,
                              class: "am-breadcrumbs__link",
                              to: crumb.link
                            }, {
                              default: vue.withCtx(() => [
                                vue.createTextVNode(vue.toDisplayString(crumb.label), 1 /* TEXT */)
                              ]),
                              _: 2 /* DYNAMIC */
                            }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["to"]))
                      ]),
                      _hoisted_6
                    ])
                  ]))
                : vue.createCommentVNode("v-if", true)
            ], 64 /* STABLE_FRAGMENT */))
          }), 256 /* UNKEYED_FRAGMENT */))
        ])
      ]))
    : vue.createCommentVNode("v-if", true)
}

function styleInject(css, ref) {
  if ( ref === void 0 ) ref = {};
  var insertAt = ref.insertAt;

  if (!css || typeof document === 'undefined') { return; }

  var head = document.head || document.getElementsByTagName('head')[0];
  var style = document.createElement('style');
  style.type = 'text/css';

  if (insertAt === 'top') {
    if (head.firstChild) {
      head.insertBefore(style, head.firstChild);
    } else {
      head.appendChild(style);
    }
  } else {
    head.appendChild(style);
  }

  if (style.styleSheet) {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
}

var css_248z = "\n.am-breadcrumbs {\n  display: flex;\n  margin: 16px 16px;\n}\n.am-breadcrumbs__list {\n  display: block;\n  padding: 0;\n  margin: 0;\n  text-align: left;\n}\n.am-breadcrumbs__item {\n  display: inline;\n}\n.am-breadcrumbs__separator {\n  display: inline;\n  padding: 0 4px;\n  color: rgb(150, 159, 175);\n}\n.am-breadcrumbs__link-wrapper {\n  display: inline;\n}\n.am-breadcrumbs__link {\n  display: inline;\n  color: #2c3e50;\n  text-decoration: none;\n  transition: color 0.2s;\n}\n.am-breadcrumbs__link:hover {\n  color: #3eaf7c;\n}\n.am-breadcrumbs__link.am-breadcrumbs__link_current {\n  color: rgb(150, 159, 175);\n}\n.am-breadcrumbs__item:last-child .am-breadcrumbs__separator {\n  display: none;\n}\n";
styleInject(css_248z);

script.render = render;
script.__file = "src/AmBreadcrumbs.vue";

exports["default"] = script;