@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
80 lines (79 loc) • 2.47 kB
JavaScript
import { BREADCRUMBS_INVERTED_MODIFIER } from "./breadcrumbs_constants.js";
import DtBreadcrumbItem from "./breadcrumb_item.vue.js";
import utils from "../../common/utils.js";
import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, Fragment, renderList, createBlock, mergeProps } from "vue";
import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
const _sfc_main = {
compatConfig: { MODE: 3 },
name: "DtBreadcrumbs",
components: {
DtBreadcrumbItem
},
props: {
/**
* A provided list of breadcrumbs. Overridden by default slot
*/
breadcrumbs: {
type: Array,
default: () => [],
validate(breadcrumbs2) {
return breadcrumbs2.every(({ href, label }) => {
return href !== void 0 && label !== void 0;
});
}
},
/**
* Passed through to link. If true, applies inverted styles to the link.
* @values true, false
*/
inverted: {
type: Boolean,
default: false
},
/**
* Descriptive label for the navigation content.
*/
ariaLabel: {
type: String,
default: "breadcrumb"
}
},
data() {
return {
BREADCRUMBS_INVERTED_MODIFIER
};
},
methods: {
getBreadcrumbItemKey(index) {
return `breadcrumbs-item-${index}-${utils.getUniqueString()}`;
}
}
};
const _hoisted_1 = ["aria-label"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_dt_breadcrumb_item = resolveComponent("dt-breadcrumb-item");
return openBlock(), createElementBlock("nav", {
"aria-label": $props.ariaLabel,
"data-qa": "dt-breadcrumbs",
class: normalizeClass([
"d-breadcrumbs",
{ [$data.BREADCRUMBS_INVERTED_MODIFIER]: $props.inverted }
])
}, [
createElementVNode("ol", null, [
renderSlot(_ctx.$slots, "default", {}, () => [
(openBlock(true), createElementBlock(Fragment, null, renderList($props.breadcrumbs, (item, index) => {
return openBlock(), createBlock(_component_dt_breadcrumb_item, mergeProps({
key: $options.getBreadcrumbItemKey(index),
inverted: $props.inverted
}, item), null, 16, ["inverted"]);
}), 128))
])
])
], 10, _hoisted_1);
}
const breadcrumbs = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
breadcrumbs as default
};
//# sourceMappingURL=breadcrumbs.vue.js.map