@oruga-ui/oruga-next/dist/cjs/breadcrumb.cjs

UI components for Vue.js and CSS framework agnostic

"use strict";
/*! Oruga v0.11.0 | MIT License | github.com/oruga-ui/oruga */
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const config = require("./config-eYBvpFOZ.cjs");
const defineClasses = require("./defineClasses-Cqhbv-UT.cjs");
const useParentProvider = require("./useParentProvider-CPNahRzD.cjs");
const useOptions = require("./useOptions-YcqJ438a.cjs");
const useSequentialId = require("./useSequentialId-BnH6otip.cjs");
const Icon_vue_vue_type_script_setup_true_lang = require("./Icon.vue_vue_type_script_setup_true_lang-ZtEqoTvT.cjs");
const _hoisted_1$1 = ["aria-label"];
const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
  ...{
    isOruga: true,
    name: "OBreadcrumb",
    configField: "breadcrumb"
  },
  __name: "Breadcrumb",
  props: {
    override: { type: Boolean, default: void 0 },
    options: { default: void 0 },
    size: { default: () => config.getDefault("breadcrumb.size") },
    variant: { default: () => config.getDefault("breadcrumb.variant") },
    position: { default: () => config.getDefault("breadcrumb.position") },
    separator: { default: () => config.getDefault("breadcrumb.separator", "/") },
    ariaLabel: { default: () => config.getDefault("modal.ariaLabel", "Breadcrumb") },
    rootClass: {},
    sizeClass: {},
    variantClass: {},
    positionClass: {},
    listClass: {}
  },
  setup(__props) {
    const props = __props;
    const rootRef = vue.useTemplateRef("rootElement");
    useParentProvider.useProviderParent({ rootRef });
    const { nextSequence } = useSequentialId.useSequentialId();
    const normalizedOptions = vue.computed(
      () => useOptions.normalizeOptions(props.options, nextSequence)
    );
    const customStyle = vue.computed(() => ({ "--seperator": `'${props.separator}'` }));
    const rootClasses = defineClasses.defineClasses(
      ["rootClass", "o-breadcrumb"],
      [
        "sizeClass",
        "o-breadcrumb--",
        vue.computed(() => props.size),
        vue.computed(() => !!props.size)
      ],
      [
        "variantClass",
        "o-breadcrumb--",
        vue.computed(() => props.variant),
        vue.computed(() => !!props.variant)
      ],
      [
        "positionClass",
        "o-breadcrumb--",
        vue.computed(() => props.position),
        vue.computed(() => !!props.position)
      ]
    );
    const listClasses = defineClasses.defineClasses(["listClass", "o-breadcrumb__list"]);
    return (_ctx, _cache) => {
      const _component_OBreadcrumbItem = vue.resolveComponent("OBreadcrumbItem");
      return vue.openBlock(), vue.createElementBlock("nav", {
        ref: "rootElement",
        "data-oruga": "breadcrumb",
        class: vue.normalizeClass(vue.unref(rootClasses)),
        style: vue.normalizeStyle(customStyle.value),
        "aria-label": _ctx.ariaLabel
      }, [
        vue.createElementVNode("ol", {
          class: vue.normalizeClass(vue.unref(listClasses))
        }, [
          vue.renderSlot(_ctx.$slots, "default", {}, () => [
            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(normalizedOptions.value, (option) => {
              return vue.openBlock(), vue.createBlock(_component_OBreadcrumbItem, vue.mergeProps({
                key: option.key,
                ref_for: true
              }, option.attrs, {
                value: option.value,
                label: option.label,
                hidden: option.hidden
              }), null, 16, ["value", "label", "hidden"]);
            }), 128))
          ])
        ], 2)
      ], 14, _hoisted_1$1);
    };
  }
});
const _hoisted_1 = ["data-id", "aria-current"];
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...{
    isOruga: true,
    name: "OBreadcrumbItem",
    configField: "breadcrumb",
    inheritAttrs: false
  },
  __name: "BreadcrumbItem",
  props: {
    override: { type: Boolean, default: void 0 },
    label: { default: void 0 },
    active: { type: Boolean, default: false },
    disabled: { type: Boolean, default: false },
    hidden: { type: Boolean, default: false },
    iconLeft: { default: void 0 },
    iconRight: { default: void 0 },
    iconPack: { default: () => config.getDefault("breadcrumb.iconPack") },
    iconSize: { default: () => config.getDefault("breadcrumb.iconSize") },
    tag: { default: () => config.getDefault("breadcrumb.tag", "a") },
    itemClass: {},
    disabledClass: {},
    activeClass: {},
    seperatorClass: {},
    linkClass: {},
    iconClass: {},
    iconLeftClass: {},
    iconRightClass: {}
  },
  setup(__props) {
    const props = __props;
    const { item } = useParentProvider.useProviderChild();
    const rootClasses = defineClasses.defineClasses(
      ["itemClass", "o-breadcrumb__item"],
      [
        "disabledClass",
        "o-breadcrumb__item--disabled",
        null,
        vue.computed(() => props.disabled)
      ],
      [
        "activeClass",
        "o-breadcrumb__item--active",
        null,
        vue.computed(() => props.active)
      ]
    );
    const linkClasses = defineClasses.defineClasses(["linkClass", "o-breadcrumb__item__link"]);
    const iconLeftClasses = defineClasses.defineClasses(
      ["iconClass", "o-breadcrumb__item__icon"],
      ["iconLeftClass", "o-breadcrumb__item__icon--left"]
    );
    const iconRightClasses = defineClasses.defineClasses(
      ["iconClass", "o-breadcrumb__item__icon"],
      ["iconRightClass", "o-breadcrumb__item__icon--right"]
    );
    return (_ctx, _cache) => {
      return vue.withDirectives((vue.openBlock(), vue.createElementBlock("li", {
        "data-oruga": "breadcrumb-item",
        "data-id": `breadcrumb-${vue.unref(item).identifier}`,
        class: vue.normalizeClass(vue.unref(rootClasses)),
        "aria-current": _ctx.active ? "page" : void 0
      }, [
        vue.renderSlot(_ctx.$slots, "seperator"),
        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.tag), vue.mergeProps(_ctx.$attrs, {
          class: vue.unref(linkClasses),
          disabled: _ctx.disabled,
          active: _ctx.active,
          "aria-current": _ctx.active ? "page" : void 0
        }), {
          default: vue.withCtx(() => [
            _ctx.iconLeft ? (vue.openBlock(), vue.createBlock(Icon_vue_vue_type_script_setup_true_lang._sfc_main, {
              key: 0,
              icon: _ctx.iconLeft,
              pack: _ctx.iconPack,
              size: _ctx.iconSize,
              class: vue.normalizeClass(vue.unref(iconLeftClasses))
            }, null, 8, ["icon", "pack", "size", "class"])) : vue.createCommentVNode("", true),
            vue.renderSlot(_ctx.$slots, "default", {}, () => [
              vue.createElementVNode("span", null, vue.toDisplayString(_ctx.label), 1)
            ]),
            _ctx.iconRight ? (vue.openBlock(), vue.createBlock(Icon_vue_vue_type_script_setup_true_lang._sfc_main, {
              key: 1,
              icon: _ctx.iconRight,
              pack: _ctx.iconPack,
              size: _ctx.iconSize,
              class: vue.normalizeClass(vue.unref(iconRightClasses))
            }, null, 8, ["icon", "pack", "size", "class"])) : vue.createCommentVNode("", true)
          ]),
          _: 3
        }, 16, ["class", "disabled", "active", "aria-current"]))
      ], 10, _hoisted_1)), [
        [vue.vShow, !_ctx.hidden]
      ]);
    };
  }
});
const index = {
  install(app) {
    config.registerComponent(app, _sfc_main$1);
    config.registerComponent(app, _sfc_main);
  }
};
exports.OBreadcrumb = _sfc_main$1;
exports.OBreadcrumbItem = _sfc_main;
exports.default = index;
//# sourceMappingURL=breadcrumb.cjs.map