@dialpad/dialtone/dist/vue2/recipes/conversation_view/feed_item_pill/feed_item_pill.vue.js

Dialpad's Dialtone design system monorepo

import { FEED_ITEM_PILL_BORDER_COLORS } from "./feed_item_pill_constants.js";
import { DtIconChevronDown, DtIconChevronRight } from "@dialpad/dialtone-icons/vue2";
import normalizeComponent from "../../../_virtual/_plugin-vue2_normalizer.js";
import DtItemLayout from "../../../components/item_layout/item_layout.vue.js";
import DtCollapsible from "../../../components/collapsible/collapsible.vue.js";
const _sfc_main = {
  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;
    }
  }
};
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__ */ normalizeComponent(
  _sfc_main,
  _sfc_render,
  _sfc_staticRenderFns
);
const feed_item_pill = __component__.exports;
export {
  feed_item_pill as default
};
//# sourceMappingURL=feed_item_pill.vue.js.map