@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
86 lines (85 loc) • 2.45 kB
JavaScript
import { BREADCRUMB_ITEM_SELECTED_MODIFIER } from "./breadcrumbs_constants.js";
import { removeClassStyleAttrs, addClassStyleAttrs } from "../../common/utils.js";
import { MUTED } from "../link/link_constants.js";
import { resolveComponent, openBlock, createElementBlock, mergeProps, createVNode, withCtx, renderSlot, createTextVNode, toDisplayString } from "vue";
import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
import DtLink from "../link/link.vue.js";
const _sfc_main = {
name: "DtBreadcrumbItem",
components: {
DtLink
},
inheritAttrs: false,
props: {
/**
* Passed through to link. If true, applies inverted styles to the link.
*/
inverted: {
type: Boolean,
default: false
},
/**
* Applies selected styles to the breadcrumb
*/
selected: {
type: Boolean,
default: false
},
/**
* Describes the breadcrumb. Overridden by default slot
*/
label: {
type: String,
default: ""
}
},
data() {
return {
BREADCRUMB_ITEM_SELECTED_MODIFIER
};
},
computed: {
linkKind() {
return this.inverted ? "" : MUTED;
},
linkInverted() {
return !!this.inverted;
},
ariaCurrent() {
return this.selected ? "location" : void 0;
}
},
methods: {
removeClassStyleAttrs,
addClassStyleAttrs
}
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_dt_link = resolveComponent("dt-link");
return openBlock(), createElementBlock("li", mergeProps({
"data-qa": "dt-breadcrumb-item",
class: [
"d-breadcrumbs__item",
{ [$data.BREADCRUMB_ITEM_SELECTED_MODIFIER]: $props.selected }
]
}, $options.addClassStyleAttrs(_ctx.$attrs)), [
createVNode(_component_dt_link, mergeProps({
kind: $options.linkKind,
inverted: $options.linkInverted,
"aria-current": $options.ariaCurrent,
"data-qa": "breadcrumb-item"
}, $options.removeClassStyleAttrs(_ctx.$attrs)), {
default: withCtx(() => [
renderSlot(_ctx.$slots, "default", {}, () => [
createTextVNode(toDisplayString($props.label), 1)
])
]),
_: 3
}, 16, ["kind", "inverted", "aria-current"])
], 16);
}
const DtBreadcrumbItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
DtBreadcrumbItem as default
};
//# sourceMappingURL=breadcrumb_item.vue.js.map