@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
123 lines (122 loc) • 4.84 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const feed_item_pill_constants = require("./feed_item_pill_constants.cjs");
const vue2 = require("@dialpad/dialtone-icons/vue2");
const _pluginVue2_normalizer = require("../../../_virtual/_plugin-vue2_normalizer.cjs");
const item_layout = require("../../../components/item_layout/item_layout.vue.cjs");
const collapsible = require("../../../components/collapsible/collapsible.vue.cjs");
const _sfc_main = {
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 ? vue2.DtIconChevronDown : vue2.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;
}
}
};
var _sfc_render = function render() {
var _vm = this, _c = _vm._self._c;
return _c("div", { class: ["d-recipe-feed-item-pill__border", _vm.borderClass, _vm.wrapperClass] }, [_c("div", { staticClass: "d-recipe-feed-item-pill__wrapper" }, [_c("dt-collapsible", { attrs: { "open": _vm.expanded }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
return [_c("button", { class: ["d-recipe-feed-item-pill__button", _vm.toggleableClass, _vm.buttonClass], attrs: { "data-qa": "dt-recipe-feed-item-pill", "aria-label": _vm.ariaLabel }, on: { "focusin": function($event) {
_vm.hover = true;
}, "focusout": function($event) {
_vm.hover = false;
}, "mouseenter": function($event) {
_vm.hover = true;
}, "mouseleave": function($event) {
_vm.hover = false;
}, "click": _vm.onClick } }, [_c("dt-item-layout", { staticClass: "d-recipe-feed-item-pill__layout", attrs: { "unstyled": "" }, scopedSlots: _vm._u([{ key: "left", fn: function() {
return [_c("div", { staticClass: "d-recipe-feed-item-pill__icon", attrs: { "data-qa": "dt-recipe-feed-item-pill__icon" } }, [_vm.showChevronIcon ? _c(_vm.toggleIcon, { tag: "component", attrs: { "size": "300" } }) : _vm._t("leftIcon", null, { "iconSize": "300" })], 2)];
}, proxy: true }, _vm.$slots.subtitle ? { key: "subtitle", fn: function() {
return [_c("div", { staticClass: "d-recipe-feed-item-pill__subtitle" }, [_vm._t("subtitle")], 2)];
}, proxy: true } : null, _vm.$slots.bottom ? { key: "bottom", fn: function() {
return [_c("div", { staticClass: "d-recipe-feed-item-pill__bottom" }, [_vm._t("bottom")], 2)];
}, proxy: true } : null, _vm.$slots.right ? { key: "right", fn: function() {
return [_c("div", { staticClass: "d-recipe-feed-item-pill__right" }, [_vm._t("right")], 2)];
}, proxy: true } : null], null, true) }, [_vm._t("title", function() {
return [_c("span", { staticClass: "d-recipe-feed-item-pill__title" }, [_vm._v(_vm._s(_vm.title))])];
})], 2)], 1)];
}, proxy: true }, _vm.$slots.content ? { key: "content", fn: function() {
return [_c("div", { staticClass: "d-recipe-feed-item-pill__content" }, [_vm._t("content")], 2)];
}, proxy: true } : null], null, true) })], 1)]);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.default(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns
);
const feed_item_pill = __component__.exports;
exports.default = feed_item_pill;
//# sourceMappingURL=feed_item_pill.vue.cjs.map