@oruga-ui/oruga-next/dist/esm/breadcrumb.mjs

UI components for Vue.js and CSS framework agnostic

/*! Oruga v0.11.0 | MIT License | github.com/oruga-ui/oruga */
import { defineComponent, useTemplateRef, computed, resolveComponent, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, createElementVNode, renderSlot, Fragment, renderList, createBlock, mergeProps, withDirectives, resolveDynamicComponent, withCtx, createCommentVNode, toDisplayString, vShow } from "vue";
import { g as getDefault, b as registerComponent } from "./config-Dl7tu_Ly.mjs";
import { d as defineClasses } from "./defineClasses-CWB9NuS-.mjs";
import { u as useProviderParent, a as useProviderChild } from "./useParentProvider-26MPTCZ6.mjs";
import { n as normalizeOptions } from "./useOptions-eabMIWNM.mjs";
import { u as useSequentialId } from "./useSequentialId-BpzOPIdj.mjs";
import { _ as _sfc_main$2 } from "./Icon.vue_vue_type_script_setup_true_lang-C6IfOTXx.mjs";
const _hoisted_1$1 = ["aria-label"];
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
  ...{
    isOruga: true,
    name: "OBreadcrumb",
    configField: "breadcrumb"
  },
  __name: "Breadcrumb",
  props: {
    override: { type: Boolean, default: void 0 },
    options: { default: void 0 },
    size: { default: () => getDefault("breadcrumb.size") },
    variant: { default: () => getDefault("breadcrumb.variant") },
    position: { default: () => getDefault("breadcrumb.position") },
    separator: { default: () => getDefault("breadcrumb.separator", "/") },
    ariaLabel: { default: () => getDefault("modal.ariaLabel", "Breadcrumb") },
    rootClass: {},
    sizeClass: {},
    variantClass: {},
    positionClass: {},
    listClass: {}
  },
  setup(__props) {
    const props = __props;
    const rootRef = useTemplateRef("rootElement");
    useProviderParent({ rootRef });
    const { nextSequence } = useSequentialId();
    const normalizedOptions = computed(
      () => normalizeOptions(props.options, nextSequence)
    );
    const customStyle = computed(() => ({ "--seperator": `'${props.separator}'` }));
    const rootClasses = defineClasses(
      ["rootClass", "o-breadcrumb"],
      [
        "sizeClass",
        "o-breadcrumb--",
        computed(() => props.size),
        computed(() => !!props.size)
      ],
      [
        "variantClass",
        "o-breadcrumb--",
        computed(() => props.variant),
        computed(() => !!props.variant)
      ],
      [
        "positionClass",
        "o-breadcrumb--",
        computed(() => props.position),
        computed(() => !!props.position)
      ]
    );
    const listClasses = defineClasses(["listClass", "o-breadcrumb__list"]);
    return (_ctx, _cache) => {
      const _component_OBreadcrumbItem = resolveComponent("OBreadcrumbItem");
      return openBlock(), createElementBlock("nav", {
        ref: "rootElement",
        "data-oruga": "breadcrumb",
        class: normalizeClass(unref(rootClasses)),
        style: normalizeStyle(customStyle.value),
        "aria-label": _ctx.ariaLabel
      }, [
        createElementVNode("ol", {
          class: normalizeClass(unref(listClasses))
        }, [
          renderSlot(_ctx.$slots, "default", {}, () => [
            (openBlock(true), createElementBlock(Fragment, null, renderList(normalizedOptions.value, (option) => {
              return openBlock(), createBlock(_component_OBreadcrumbItem, 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__ */ 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: () => getDefault("breadcrumb.iconPack") },
    iconSize: { default: () => getDefault("breadcrumb.iconSize") },
    tag: { default: () => getDefault("breadcrumb.tag", "a") },
    itemClass: {},
    disabledClass: {},
    activeClass: {},
    seperatorClass: {},
    linkClass: {},
    iconClass: {},
    iconLeftClass: {},
    iconRightClass: {}
  },
  setup(__props) {
    const props = __props;
    const { item } = useProviderChild();
    const rootClasses = defineClasses(
      ["itemClass", "o-breadcrumb__item"],
      [
        "disabledClass",
        "o-breadcrumb__item--disabled",
        null,
        computed(() => props.disabled)
      ],
      [
        "activeClass",
        "o-breadcrumb__item--active",
        null,
        computed(() => props.active)
      ]
    );
    const linkClasses = defineClasses(["linkClass", "o-breadcrumb__item__link"]);
    const iconLeftClasses = defineClasses(
      ["iconClass", "o-breadcrumb__item__icon"],
      ["iconLeftClass", "o-breadcrumb__item__icon--left"]
    );
    const iconRightClasses = defineClasses(
      ["iconClass", "o-breadcrumb__item__icon"],
      ["iconRightClass", "o-breadcrumb__item__icon--right"]
    );
    return (_ctx, _cache) => {
      return withDirectives((openBlock(), createElementBlock("li", {
        "data-oruga": "breadcrumb-item",
        "data-id": `breadcrumb-${unref(item).identifier}`,
        class: normalizeClass(unref(rootClasses)),
        "aria-current": _ctx.active ? "page" : void 0
      }, [
        renderSlot(_ctx.$slots, "seperator"),
        (openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), mergeProps(_ctx.$attrs, {
          class: unref(linkClasses),
          disabled: _ctx.disabled,
          active: _ctx.active,
          "aria-current": _ctx.active ? "page" : void 0
        }), {
          default: withCtx(() => [
            _ctx.iconLeft ? (openBlock(), createBlock(_sfc_main$2, {
              key: 0,
              icon: _ctx.iconLeft,
              pack: _ctx.iconPack,
              size: _ctx.iconSize,
              class: normalizeClass(unref(iconLeftClasses))
            }, null, 8, ["icon", "pack", "size", "class"])) : createCommentVNode("", true),
            renderSlot(_ctx.$slots, "default", {}, () => [
              createElementVNode("span", null, toDisplayString(_ctx.label), 1)
            ]),
            _ctx.iconRight ? (openBlock(), createBlock(_sfc_main$2, {
              key: 1,
              icon: _ctx.iconRight,
              pack: _ctx.iconPack,
              size: _ctx.iconSize,
              class: normalizeClass(unref(iconRightClasses))
            }, null, 8, ["icon", "pack", "size", "class"])) : createCommentVNode("", true)
          ]),
          _: 3
        }, 16, ["class", "disabled", "active", "aria-current"]))
      ], 10, _hoisted_1)), [
        [vShow, !_ctx.hidden]
      ]);
    };
  }
});
const index = {
  install(app) {
    registerComponent(app, _sfc_main$1);
    registerComponent(app, _sfc_main);
  }
};
export {
  _sfc_main$1 as OBreadcrumb,
  _sfc_main as OBreadcrumbItem,
  index as default
};
//# sourceMappingURL=breadcrumb.mjs.map