@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
190 lines (189 loc) • 6.7 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const feed_item_pill_constants = require("./feed_item_pill_constants.cjs");
const vue3 = require("@dialpad/dialtone-icons/vue3");
const vue = require("vue");
const _pluginVue_exportHelper = require("../../../_virtual/_plugin-vue_export-helper.cjs");
const item_layout = require("../../../components/item_layout/item_layout.vue.cjs");
const collapsible = require("../../../components/collapsible/collapsible.vue.cjs");
const _sfc_main = {
compatConfig: { MODE: 3 },
name: "DtRecipeFeedItemPill",
components: { DtItemLayout: item_layout.default, DtCollapsible: collapsible.default },
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: ""
},
/**
* Aria label for feed pill
*/
ariaLabel: {
type: String,
required: true
},
/**
* Sets whether the pill can be toggled (Icon changing on hover, expanding and collapsing, pointer)
*/
toggleable: {
type: Boolean,
default: () => true
},
defaultToggled: {
type: Boolean,
default: () => false
},
/**
* Callbox border color
* @values default, ai, critical
*/
borderColor: {
type: String,
default: "default",
validator: (color) => Object.keys(feed_item_pill_constants.FEED_ITEM_PILL_BORDER_COLORS).includes(color)
}
},
data() {
return {
hover: false,
expanded: this.defaultToggled
};
},
computed: {
toggleIcon() {
return this.expanded ? vue3.DtIconChevronDown : vue3.DtIconChevronRight;
},
showChevronIcon() {
return this.toggleable && this.hover;
},
toggleableClass() {
return this.toggleable ? "d-recipe-feed-item-pill--toggleable" : "";
},
borderClass() {
return feed_item_pill_constants.FEED_ITEM_PILL_BORDER_COLORS[this.borderColor];
}
},
methods: {
onClick() {
if (!this.toggleable) return;
this.expanded = !this.expanded;
}
}
};
const _hoisted_1 = { class: "d-recipe-feed-item-pill__wrapper" };
const _hoisted_2 = ["aria-label"];
const _hoisted_3 = { class: "d-recipe-feed-item-pill__title" };
const _hoisted_4 = {
class: "d-recipe-feed-item-pill__icon",
"data-qa": "dt-recipe-feed-item-pill__icon"
};
const _hoisted_5 = { class: "d-recipe-feed-item-pill__subtitle" };
const _hoisted_6 = { class: "d-recipe-feed-item-pill__bottom" };
const _hoisted_7 = { class: "d-recipe-feed-item-pill__right" };
const _hoisted_8 = { class: "d-recipe-feed-item-pill__content" };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_dt_item_layout = vue.resolveComponent("dt-item-layout");
const _component_dt_collapsible = vue.resolveComponent("dt-collapsible");
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass(["d-recipe-feed-item-pill__border", $options.borderClass, $props.wrapperClass])
}, [
vue.createElementVNode("div", _hoisted_1, [
vue.createVNode(_component_dt_collapsible, { open: $data.expanded }, vue.createSlots({
anchor: vue.withCtx(() => [
vue.createElementVNode("button", {
"data-qa": "dt-recipe-feed-item-pill",
"aria-label": $props.ariaLabel,
class: vue.normalizeClass(["d-recipe-feed-item-pill__button", $options.toggleableClass, $props.buttonClass]),
onFocusin: _cache[0] || (_cache[0] = ($event) => $data.hover = true),
onFocusout: _cache[1] || (_cache[1] = ($event) => $data.hover = false),
onMouseenter: _cache[2] || (_cache[2] = ($event) => $data.hover = true),
onMouseleave: _cache[3] || (_cache[3] = ($event) => $data.hover = false),
onClick: _cache[4] || (_cache[4] = (...args) => $options.onClick && $options.onClick(...args))
}, [
vue.createVNode(_component_dt_item_layout, {
class: "d-recipe-feed-item-pill__layout",
unstyled: ""
}, vue.createSlots({
left: vue.withCtx(() => [
vue.createElementVNode("div", _hoisted_4, [
$options.showChevronIcon ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($options.toggleIcon), {
key: 0,
size: "300"
})) : vue.renderSlot(_ctx.$slots, "leftIcon", {
key: 1,
iconSize: "300"
})
])
]),
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "title", {}, () => [
vue.createElementVNode("span", _hoisted_3, vue.toDisplayString($props.title), 1)
])
]),
_: 2
}, [
_ctx.$slots.subtitle ? {
name: "subtitle",
fn: vue.withCtx(() => [
vue.createElementVNode("div", _hoisted_5, [
vue.renderSlot(_ctx.$slots, "subtitle")
])
]),
key: "0"
} : void 0,
_ctx.$slots.bottom ? {
name: "bottom",
fn: vue.withCtx(() => [
vue.createElementVNode("div", _hoisted_6, [
vue.renderSlot(_ctx.$slots, "bottom")
])
]),
key: "1"
} : void 0,
_ctx.$slots.right ? {
name: "right",
fn: vue.withCtx(() => [
vue.createElementVNode("div", _hoisted_7, [
vue.renderSlot(_ctx.$slots, "right")
])
]),
key: "2"
} : void 0
]), 1024)
], 42, _hoisted_2)
]),
_: 2
}, [
_ctx.$slots.content ? {
name: "content",
fn: vue.withCtx(() => [
vue.createElementVNode("div", _hoisted_8, [
vue.renderSlot(_ctx.$slots, "content")
])
]),
key: "0"
} : void 0
]), 1032, ["open"])
])
], 2);
}
const feed_item_pill = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
exports.default = feed_item_pill;
//# sourceMappingURL=feed_item_pill.vue.cjs.map