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