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

Dialpad's Dialtone design system monorepo

import { DtIconClose } from "@dialpad/dialtone-icons/vue2";
import { CHIP_SIZE_MODIFIERS, CHIP_ICON_SIZES, CHIP_CLOSE_BUTTON_SIZE_MODIFIERS } from "./chip_constants.js";
import { getUniqueString } from "../../common/utils.js";
import normalizeComponent from "../../_virtual/_plugin-vue2_normalizer.js";
import DtButton from "../button/button.vue.js";
const _sfc_main = {
  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
    };
  },
  computed: {
    chipListeners() {
      return {
        ...this.$listeners,
        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");
      }
    }
  }
};
var _sfc_render = function render() {
  var _vm = this, _c = _vm._self._c;
  return _c("span", { staticClass: "d-chip" }, [_c(_vm.interactive ? "button" : "span", _vm._g({ tag: "component", class: _vm.chipClasses(), attrs: { "id": _vm.id, "type": _vm.interactive && "button", "data-qa": "dt-chip", "aria-labelledby": _vm.ariaLabel ? void 0 : `${_vm.id}-content`, "aria-label": _vm.ariaLabel } }, _vm.chipListeners), [_vm.$slots.icon ? _c("span", { staticClass: "d-chip__icon", attrs: { "data-qa": "dt-chip-icon" } }, [_vm._t("icon")], 2) : _vm.$slots.avatar ? _c("span", { attrs: { "data-qa": "dt-chip-avatar" } }, [_vm._t("avatar")], 2) : _vm._e(), _vm.$slots.default ? _c("span", { class: ["d-chip__text", _vm.contentClass], attrs: { "id": `${_vm.id}-content`, "data-qa": "dt-chip-label" } }, [_vm._t("default")], 2) : _vm._e()]), !_vm.hideClose ? _c("dt-button", _vm._b({ class: _vm.chipCloseButtonClasses(), attrs: { "data-qa": "dt-chip-close", "aria-label": _vm.closeButtonProps.ariaLabel }, on: { "click": function($event) {
    return _vm.$emit("close");
  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
    return [_c("dt-icon-close", { attrs: { "size": _vm.closeButtonIconSize } })];
  }, proxy: true }], null, false, 1341282633) }, "dt-button", _vm.closeButtonProps, false)) : _vm._e()], 1);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ normalizeComponent(
  _sfc_main,
  _sfc_render,
  _sfc_staticRenderFns
);
const DtChip = __component__.exports;
export {
  DtChip as default
};
//# sourceMappingURL=chip.vue.js.map