@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
118 lines (117 loc) • 4.25 kB
JavaScript
import { FEED_ITEM_PILL_BORDER_COLORS as r } from "./feed-item-pill-constants.js";
import { DtIconChevronDown as i, DtIconChevronRight as n } from "@dialpad/dialtone-icons/vue2";
import { DialtoneLocalization as s } from "../../localization/index.js";
import { n as a } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
import c from "../collapsible/collapsible.js";
import d from "../item-layout/item-layout.js";
const u = {
name: "DtRecipeFeedItemPill",
components: { DtItemLayout: d, DtCollapsible: c },
props: {
/**
* Bolded primary text
*/
title: {
type: String,
default: () => ""
},
/**
* Additional styling around the pill
*/
wrapperClass: {
type: [String, Array, Object],
default: ""
},
/**
* Additional styling for the pill
*/
buttonClass: {
type: [String, Array, Object],
default: ""
},
/**
* Sets whether the pill can be toggled (Icon changing on hover, expanding and collapsing, pointer)
*/
toggleable: {
type: Boolean,
default: () => !0
},
defaultToggled: {
type: Boolean,
default: () => !1
},
/**
* Callbox border color
* @values default, ai, critical
*/
borderColor: {
type: String,
default: "default",
validator: (o) => Object.keys(r).includes(o)
}
},
data() {
return {
hover: !1,
expanded: this.defaultToggled,
i18n: new s()
};
},
computed: {
toggleIcon() {
return this.expanded ? i : n;
},
showChevronIcon() {
return this.toggleable && this.hover;
},
toggleableClass() {
return this.toggleable ? "d-recipe-feed-item-pill--toggleable" : "";
},
borderClass() {
return r[this.borderColor];
},
anchorTitle() {
return this.i18n.$t("DIALTONE_FEED_ITEM_PILL_ARIA_LABEL");
}
},
methods: {
onClick() {
this.toggleable && (this.expanded = !this.expanded);
}
}
};
var p = function() {
var e = this, t = e._self._c;
return t("div", { class: ["d-recipe-feed-item-pill__border", e.borderClass, e.wrapperClass] }, [t("div", { staticClass: "d-recipe-feed-item-pill__wrapper" }, [t("dt-collapsible", { attrs: { open: e.expanded }, scopedSlots: e._u([{ key: "anchor", fn: function() {
return [t("button", { class: ["d-recipe-feed-item-pill__button", e.toggleableClass, e.buttonClass], attrs: { "data-qa": "dt-recipe-feed-item-pill", "aria-label": e.anchorTitle, title: e.anchorTitle }, on: { focusin: function(l) {
e.hover = !0;
}, focusout: function(l) {
e.hover = !1;
}, mouseenter: function(l) {
e.hover = !0;
}, mouseleave: function(l) {
e.hover = !1;
}, click: e.onClick } }, [t("dt-item-layout", { staticClass: "d-recipe-feed-item-pill__layout", attrs: { unstyled: "" }, scopedSlots: e._u([{ key: "left", fn: function() {
return [t("div", { staticClass: "d-recipe-feed-item-pill__icon", attrs: { "data-qa": "dt-recipe-feed-item-pill__icon" } }, [e.showChevronIcon ? t(e.toggleIcon, { tag: "component", attrs: { size: "300" } }) : e._t("leftIcon", null, { iconSize: "300" })], 2)];
}, proxy: !0 }, e.$slots.subtitle ? { key: "subtitle", fn: function() {
return [t("div", { staticClass: "d-recipe-feed-item-pill__subtitle" }, [e._t("subtitle")], 2)];
}, proxy: !0 } : null, e.$slots.bottom ? { key: "bottom", fn: function() {
return [t("div", { staticClass: "d-recipe-feed-item-pill__bottom" }, [e._t("bottom")], 2)];
}, proxy: !0 } : null, e.$slots.right ? { key: "right", fn: function() {
return [t("div", { staticClass: "d-recipe-feed-item-pill__right" }, [e._t("right")], 2)];
}, proxy: !0 } : null], null, !0) }, [e._t("title", function() {
return [t("span", { staticClass: "d-recipe-feed-item-pill__title" }, [e._v(e._s(e.title))])];
})], 2)], 1)];
}, proxy: !0 }, e.$slots.content ? { key: "content", fn: function() {
return [t("div", { staticClass: "d-recipe-feed-item-pill__content" }, [e._t("content")], 2)];
}, proxy: !0 } : null], null, !0) })], 1)]);
}, f = [], _ = /* @__PURE__ */ a(
u,
p,
f
);
const y = _.exports;
export {
y as default
};
//# sourceMappingURL=feed-item-pill.js.map