@dialpad/dialtone-vue/dist/lib/chip/chip.js

Vue component library for Dialpad's design system Dialtone

import { DtIconClose as a } from "@dialpad/dialtone-icons/vue2";
import { CHIP_CLOSE_BUTTON_SIZE_MODIFIERS as l, CHIP_SIZE_MODIFIERS as s, CHIP_ICON_SIZES as n } from "./chip-constants.js";
import { getUniqueString as o } from "../../common/utils/index.js";
import { DialtoneLocalization as c } from "../../localization/index.js";
import { n as r } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
import d from "../button/button.js";
const p = {
  name: "DtChip",
  components: {
    DtButton: d,
    DtIconClose: a
  },
  props: {
    /**
     * Whether the chip is disabled
     * @values true, false
     */
    disabled: {
      type: Boolean,
      default: !1
    },
    /**
     * Hides the close button on the chip
     * @values true, false
     */
    hideClose: {
      type: Boolean,
      default: !1
    },
    /**
     * The size of the chip.
     * @values xs, sm, md
     */
    size: {
      type: String,
      default: "md",
      validator: (e) => Object.keys(s).includes(e)
    },
    /**
     * The interactivity of the chip.
     * Makes chip clickable, apply hover/focus/active style, emit keyboard events etc.
     * @values true, false
     */
    interactive: {
      type: Boolean,
      default: !0
    },
    /**
     * Id to use for the dialog's aria-labelledby.
     */
    id: {
      type: String,
      default: function() {
        return o();
      }
    },
    /**
     * 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",
    /**
     * Native chip key down event
     *
     * @event keydown
     * @type {KeyboardEvent}
     */
    "keydown"
  ],
  data() {
    return {
      isActive: !1,
      i18n: new c()
    };
  },
  computed: {
    chipListeners() {
      return {
        ...this.$listeners,
        click: (e) => {
          this.interactive && this.$emit("click", e);
        },
        keydown: (e) => {
          var t;
          ((t = e.code) == null ? void 0 : t.toLowerCase()) === "delete" ? this.onClose() : this.$emit("keydown", e);
        },
        keyup: (e) => {
          this.$emit("keyup", e);
        }
      };
    },
    closeButtonIconSize() {
      return n[this.size];
    },
    closeButtonTitle() {
      return this.i18n.$t("DIALTONE_CLOSE_BUTTON");
    }
  },
  methods: {
    chipClasses() {
      return [
        this.$attrs["grouped-chip"] ? "d-chip" : "d-chip__label",
        s[this.size],
        this.labelClass,
        this.disabled && "d-chip--disabled"
      ];
    },
    chipCloseButtonClasses() {
      return [
        "d-chip__close",
        l[this.size],
        this.disabled && "d-chip__close--disabled"
      ];
    },
    onClose() {
      this.hideClose || this.$emit("close");
    }
  }
};
var u = function() {
  var t = this, i = t._self._c;
  return i("span", { staticClass: "d-chip" }, [i(t.interactive ? "button" : "span", t._g({ tag: "component", class: t.chipClasses(), attrs: { id: t.id, "aria-label": t.ariaLabel, "aria-labelledby": t.ariaLabel ? void 0 : `${t.id}-content`, "aria-disabled": t.disabled, type: t.interactive && "button", "data-qa": "dt-chip", tabindex: t.disabled ? -1 : null } }, t.chipListeners), [t.$slots.icon ? i("span", { staticClass: "d-chip__icon", attrs: { "data-qa": "dt-chip-icon" } }, [t._t("icon")], 2) : t.$slots.avatar ? i("span", { attrs: { "data-qa": "dt-chip-avatar" } }, [t._t("avatar")], 2) : t._e(), t.$slots.default ? i("span", { class: ["d-chip__text", t.contentClass], attrs: { id: `${t.id}-content`, "data-qa": "dt-chip-label" } }, [t._t("default")], 2) : t._e()]), t.hideClose ? t._e() : i("dt-button", { class: t.chipCloseButtonClasses(), attrs: { "data-qa": "dt-chip-close", "aria-label": t.closeButtonTitle, "aria-disabled": t.disabled, title: t.closeButtonTitle, tabindex: t.disabled ? -1 : null }, on: { click: function(f) {
    return t.$emit("close");
  } }, scopedSlots: t._u([{ key: "icon", fn: function() {
    return [i("dt-icon-close", { attrs: { size: t.closeButtonIconSize } })];
  }, proxy: !0 }], null, !1, 1341282633) })], 1);
}, h = [], _ = /* @__PURE__ */ r(
  p,
  u,
  h
);
const v = _.exports;
export {
  v as default
};
//# sourceMappingURL=chip.js.map