@dialpad/dialtone/dist/vue3/components/chip/chip.vue.js

Dialpad's Dialtone design system monorepo

import { DtIconClose } from "@dialpad/dialtone-icons/vue3";
import { CHIP_SIZE_MODIFIERS, CHIP_ICON_SIZES, CHIP_CLOSE_BUTTON_SIZE_MODIFIERS } from "./chip_constants.js";
import { getUniqueString, hasSlotContent } from "../../common/utils.js";
import { resolveComponent, openBlock, createElementBlock, createBlock, resolveDynamicComponent, mergeProps, toHandlers, withCtx, renderSlot, createCommentVNode, normalizeClass, createVNode } from "vue";
import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
import DtButton from "../button/button.vue.js";
const _sfc_main = {
  compatConfig: { MODE: 3 },
  name: "DtChip",
  components: {
    DtButton,
    DtIconClose
  },
  props: {
    /**
     * A set of props to be passed into the modal's close button. Requires an 'ariaLabel' property.
     */
    closeButtonProps: {
      type: Object,
      default: function() {
        return { ariaLabel: "close" };
      },
      validator: (props) => {
        return !!props.ariaLabel;
      }
    },
    /**
     * Hides the close button on the chip
     * @values true, false
     */
    hideClose: {
      type: Boolean,
      default: false
    },
    /**
     * The size of the chip.
     * @values xs, sm, md
     */
    size: {
      type: String,
      default: "md",
      validator: (s) => Object.keys(CHIP_SIZE_MODIFIERS).includes(s)
    },
    /**
     * The interactivity of the chip.
     * Makes chip clickable, apply hover/focus/active style, emit keyboard events etc.
     * @values true, false
     */
    interactive: {
      type: Boolean,
      default: true
    },
    /**
     * Id to use for the dialog's aria-labelledby.
     */
    id: {
      type: String,
      default: function() {
        return getUniqueString();
      }
    },
    /**
     * Descriptive label for the chip content.
     * If this prop is unset the content in the default slot will be used as an aria-label.
     */
    ariaLabel: {
      type: String,
      default: ""
    },
    /**
     * Additional class name for the chip element.
     */
    contentClass: {
      type: [String, Array, Object],
      default: ""
    },
    /**
     * Additional class name for the span element.
     */
    labelClass: {
      type: [String, Array, Object],
      default: ""
    }
  },
  emits: [
    /**
     * Native chip click event
     *
     * @event click
     * @type {PointerEvent | KeyboardEvent}
     */
    "click",
    /**
     * Close button click event
     *
     * @event close
     */
    "close",
    /**
     * Native chip key up event
     *
     * @event keyup
     * @type {KeyboardEvent}
     */
    "keyup"
  ],
  data() {
    return {
      isActive: false,
      hasSlotContent
    };
  },
  computed: {
    chipListeners() {
      return {
        click: (event) => {
          if (this.interactive) this.$emit("click", event);
        },
        keyup: (event) => {
          var _a;
          if (((_a = event.code) == null ? void 0 : _a.toLowerCase()) === "delete") {
            this.onClose();
          } else {
            this.$emit("keyup", event);
          }
        }
      };
    },
    closeButtonIconSize() {
      return CHIP_ICON_SIZES[this.size];
    }
  },
  methods: {
    chipClasses() {
      return [
        this.$attrs["grouped-chip"] ? "d-chip" : "d-chip__label",
        CHIP_SIZE_MODIFIERS[this.size],
        this.labelClass
      ];
    },
    chipCloseButtonClasses() {
      return [
        "d-chip__close",
        CHIP_CLOSE_BUTTON_SIZE_MODIFIERS[this.size]
      ];
    },
    onClose() {
      if (!this.hideClose) {
        this.$emit("close");
      }
    }
  }
};
const _hoisted_1 = { class: "d-chip" };
const _hoisted_2 = {
  key: 0,
  "data-qa": "dt-chip-icon",
  class: "d-chip__icon"
};
const _hoisted_3 = {
  key: 1,
  "data-qa": "dt-chip-avatar"
};
const _hoisted_4 = ["id"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_dt_icon_close = resolveComponent("dt-icon-close");
  const _component_dt_button = resolveComponent("dt-button");
  return openBlock(), createElementBlock("span", _hoisted_1, [
    (openBlock(), createBlock(resolveDynamicComponent($props.interactive ? "button" : "span"), mergeProps({
      id: $props.id,
      type: $props.interactive && "button",
      class: $options.chipClasses(),
      "data-qa": "dt-chip",
      "aria-labelledby": $props.ariaLabel ? void 0 : `${$props.id}-content`,
      "aria-label": $props.ariaLabel
    }, toHandlers($options.chipListeners)), {
      default: withCtx(() => [
        $data.hasSlotContent(_ctx.$slots.icon) ? (openBlock(), createElementBlock("span", _hoisted_2, [
          renderSlot(_ctx.$slots, "icon")
        ])) : $data.hasSlotContent(_ctx.$slots.avatar) ? (openBlock(), createElementBlock("span", _hoisted_3, [
          renderSlot(_ctx.$slots, "avatar")
        ])) : createCommentVNode("", true),
        $data.hasSlotContent(_ctx.$slots.default) ? (openBlock(), createElementBlock("span", {
          key: 2,
          id: `${$props.id}-content`,
          "data-qa": "dt-chip-label",
          class: normalizeClass(["d-chip__text", $props.contentClass])
        }, [
          renderSlot(_ctx.$slots, "default")
        ], 10, _hoisted_4)) : createCommentVNode("", true)
      ]),
      _: 3
    }, 16, ["id", "type", "class", "aria-labelledby", "aria-label"])),
    !$props.hideClose ? (openBlock(), createBlock(_component_dt_button, mergeProps({ key: 0 }, $props.closeButtonProps, {
      class: $options.chipCloseButtonClasses(),
      "data-qa": "dt-chip-close",
      "aria-label": $props.closeButtonProps.ariaLabel,
      onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("close"))
    }), {
      icon: withCtx(() => [
        createVNode(_component_dt_icon_close, { size: $options.closeButtonIconSize }, null, 8, ["size"])
      ]),
      _: 1
    }, 16, ["class", "aria-label"])) : createCommentVNode("", true)
  ]);
}
const DtChip = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
  DtChip as default
};
//# sourceMappingURL=chip.vue.js.map