@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
179 lines (178 loc) • 5.52 kB
JavaScript
import { FEED_ITEM_PILL_BORDER_COLORS as a } from "./feed-item-pill-constants.js";
import { DtIconChevronDown as b, DtIconChevronRight as h } from "@dialpad/dialtone-icons/vue3";
import { DialtoneLocalization as v } from "../../localization/index.js";
import { resolveComponent as p, createElementBlock as C, openBlock as c, normalizeClass as m, createElementVNode as l, createVNode as f, createSlots as u, withCtx as i, renderSlot as n, toDisplayString as y, createBlock as I, resolveDynamicComponent as k } from "vue";
import { _ as D } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
import E from "../collapsible/collapsible.js";
import L from "../item-layout/item-layout.js";
const S = {
compatConfig: { MODE: 3 },
name: "DtRecipeFeedItemPill",
components: { DtItemLayout: L, DtCollapsible: E },
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: (e) => Object.keys(a).includes(e)
}
},
data() {
return {
hover: !1,
expanded: this.defaultToggled,
i18n: new v()
};
},
computed: {
toggleIcon() {
return this.expanded ? b : h;
},
showChevronIcon() {
return this.toggleable && this.hover;
},
toggleableClass() {
return this.toggleable ? "d-recipe-feed-item-pill--toggleable" : "";
},
borderClass() {
return a[this.borderColor];
},
anchorTitle() {
return this.i18n.$t("DIALTONE_FEED_ITEM_PILL_ARIA_LABEL");
}
},
methods: {
onClick() {
this.toggleable && (this.expanded = !this.expanded);
}
}
}, w = { class: "d-recipe-feed-item-pill__wrapper" }, O = ["aria-label", "title"], T = { class: "d-recipe-feed-item-pill__title" }, B = {
class: "d-recipe-feed-item-pill__icon",
"data-qa": "dt-recipe-feed-item-pill__icon"
}, A = { class: "d-recipe-feed-item-pill__subtitle" }, R = { class: "d-recipe-feed-item-pill__bottom" }, F = { class: "d-recipe-feed-item-pill__right" }, M = { class: "d-recipe-feed-item-pill__content" };
function z(e, t, d, j, s, o) {
const _ = p("dt-item-layout"), g = p("dt-collapsible");
return c(), C("div", {
class: m(["d-recipe-feed-item-pill__border", o.borderClass, d.wrapperClass])
}, [
l("div", w, [
f(g, { open: s.expanded }, u({
anchor: i(() => [
l("button", {
"data-qa": "dt-recipe-feed-item-pill",
class: m(["d-recipe-feed-item-pill__button", o.toggleableClass, d.buttonClass]),
"aria-label": o.anchorTitle,
title: o.anchorTitle,
onFocusin: t[0] || (t[0] = (r) => s.hover = !0),
onFocusout: t[1] || (t[1] = (r) => s.hover = !1),
onMouseenter: t[2] || (t[2] = (r) => s.hover = !0),
onMouseleave: t[3] || (t[3] = (r) => s.hover = !1),
onClick: t[4] || (t[4] = (...r) => o.onClick && o.onClick(...r))
}, [
f(_, {
class: "d-recipe-feed-item-pill__layout",
unstyled: ""
}, u({
left: i(() => [
l("div", B, [
o.showChevronIcon ? (c(), I(k(o.toggleIcon), {
key: 0,
size: "300"
})) : n(e.$slots, "leftIcon", {
key: 1,
iconSize: "300"
})
])
]),
default: i(() => [
n(e.$slots, "title", {}, () => [
l("span", T, y(d.title), 1)
])
]),
_: 2
}, [
e.$slots.subtitle ? {
name: "subtitle",
fn: i(() => [
l("div", A, [
n(e.$slots, "subtitle")
])
]),
key: "0"
} : void 0,
e.$slots.bottom ? {
name: "bottom",
fn: i(() => [
l("div", R, [
n(e.$slots, "bottom")
])
]),
key: "1"
} : void 0,
e.$slots.right ? {
name: "right",
fn: i(() => [
l("div", F, [
n(e.$slots, "right")
])
]),
key: "2"
} : void 0
]), 1024)
], 42, O)
]),
_: 2
}, [
e.$slots.content ? {
name: "content",
fn: i(() => [
l("div", M, [
n(e.$slots, "content")
])
]),
key: "0"
} : void 0
]), 1032, ["open"])
])
], 2);
}
const J = /* @__PURE__ */ D(S, [["render", z]]);
export {
J as default
};
//# sourceMappingURL=feed-item-pill.js.map