@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
190 lines (189 loc) • 6.51 kB
JavaScript
import { FEED_ITEM_PILL_BORDER_COLORS } from "./feed_item_pill_constants.js";
import { DtIconChevronDown, DtIconChevronRight } from "@dialpad/dialtone-icons/vue3";
import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, createSlots, withCtx, createBlock, resolveDynamicComponent, renderSlot, toDisplayString } from "vue";
import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
import DtItemLayout from "../../../components/item_layout/item_layout.vue.js";
import DtCollapsible from "../../../components/collapsible/collapsible.vue.js";
const _sfc_main = {
compatConfig: { MODE: 3 },
name: "DtRecipeFeedItemPill",
components: { DtItemLayout, DtCollapsible },
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_BORDER_COLORS).includes(color)
}
},
data() {
return {
hover: false,
expanded: this.defaultToggled
};
},
computed: {
toggleIcon() {
return this.expanded ? DtIconChevronDown : DtIconChevronRight;
},
showChevronIcon() {
return this.toggleable && this.hover;
},
toggleableClass() {
return this.toggleable ? "d-recipe-feed-item-pill--toggleable" : "";
},
borderClass() {
return 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 = resolveComponent("dt-item-layout");
const _component_dt_collapsible = resolveComponent("dt-collapsible");
return openBlock(), createElementBlock("div", {
class: normalizeClass(["d-recipe-feed-item-pill__border", $options.borderClass, $props.wrapperClass])
}, [
createElementVNode("div", _hoisted_1, [
createVNode(_component_dt_collapsible, { open: $data.expanded }, createSlots({
anchor: withCtx(() => [
createElementVNode("button", {
"data-qa": "dt-recipe-feed-item-pill",
"aria-label": $props.ariaLabel,
class: 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))
}, [
createVNode(_component_dt_item_layout, {
class: "d-recipe-feed-item-pill__layout",
unstyled: ""
}, createSlots({
left: withCtx(() => [
createElementVNode("div", _hoisted_4, [
$options.showChevronIcon ? (openBlock(), createBlock(resolveDynamicComponent($options.toggleIcon), {
key: 0,
size: "300"
})) : renderSlot(_ctx.$slots, "leftIcon", {
key: 1,
iconSize: "300"
})
])
]),
default: withCtx(() => [
renderSlot(_ctx.$slots, "title", {}, () => [
createElementVNode("span", _hoisted_3, toDisplayString($props.title), 1)
])
]),
_: 2
}, [
_ctx.$slots.subtitle ? {
name: "subtitle",
fn: withCtx(() => [
createElementVNode("div", _hoisted_5, [
renderSlot(_ctx.$slots, "subtitle")
])
]),
key: "0"
} : void 0,
_ctx.$slots.bottom ? {
name: "bottom",
fn: withCtx(() => [
createElementVNode("div", _hoisted_6, [
renderSlot(_ctx.$slots, "bottom")
])
]),
key: "1"
} : void 0,
_ctx.$slots.right ? {
name: "right",
fn: withCtx(() => [
createElementVNode("div", _hoisted_7, [
renderSlot(_ctx.$slots, "right")
])
]),
key: "2"
} : void 0
]), 1024)
], 42, _hoisted_2)
]),
_: 2
}, [
_ctx.$slots.content ? {
name: "content",
fn: withCtx(() => [
createElementVNode("div", _hoisted_8, [
renderSlot(_ctx.$slots, "content")
])
]),
key: "0"
} : void 0
]), 1032, ["open"])
])
], 2);
}
const feed_item_pill = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
feed_item_pill as default
};
//# sourceMappingURL=feed_item_pill.vue.js.map