@dialpad/dialtone/dist/vue3/recipes/leftbar/unread_pill/unread_pill.vue.js

Dialpad's Dialtone design system monorepo

import { DtIconArrowUp, DtIconArrowDown } from "@dialpad/dialtone-icons/vue3";
import { UNREAD_PILL_KINDS, UNREAD_PILL_DIRECTIONS } from "./unread_pill_constants.js";
import { resolveComponent, openBlock, createElementBlock, mergeProps, toHandlers, createBlock, createElementVNode, renderSlot } from "vue";
import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
const _sfc_main = {
  compatConfig: { MODE: 3 },
  name: "DtRecipeUnreadPill",
  components: {
    DtIconArrowUp,
    DtIconArrowDown
  },
  props: {
    /**
     * The kind of unread pill which determines the styling
     * @values 'mentions', 'messages'
     **/
    kind: {
      type: String,
      required: true,
      validator: (kind) => UNREAD_PILL_KINDS.includes(kind)
    },
    /**
     * The direction of the arrow icon
     * @values 'up', 'down'
     **/
    direction: {
      type: String,
      required: true,
      validator: (dir) => UNREAD_PILL_DIRECTIONS.includes(dir)
    }
  },
  emits: [
    /**
     * Native click event
     *
     * @event click
     * @type {PointerEvent | KeyboardEvent}
     */
    "click"
  ],
  computed: {
    unreadChipListeners() {
      return {
        click: (event) => this.$emit("click", event)
      };
    }
  }
};
const _hoisted_1 = { "data-qa": "dt-recipe-leftbar-unread-pill__label" };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_dt_icon_arrow_up = resolveComponent("dt-icon-arrow-up");
  const _component_dt_icon_arrow_down = resolveComponent("dt-icon-arrow-down");
  return openBlock(), createElementBlock("button", mergeProps({
    class: ["d-recipe-leftbar-unread-pill", `d-recipe-leftbar-unread-pill-${$props.kind}`],
    type: "button",
    "data-qa": "dt-recipe-leftbar-unread-pill"
  }, toHandlers($options.unreadChipListeners, true)), [
    $props.direction === "up" ? (openBlock(), createBlock(_component_dt_icon_arrow_up, {
      key: 0,
      size: "300"
    })) : (openBlock(), createBlock(_component_dt_icon_arrow_down, {
      key: 1,
      size: "300"
    })),
    createElementVNode("span", _hoisted_1, [
      renderSlot(_ctx.$slots, "default")
    ])
  ], 16);
}
const unread_pill = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
  unread_pill as default
};
//# sourceMappingURL=unread_pill.vue.js.map