@dialpad/dialtone/dist/vue3/lib/chip/chip.js

Dialpad's Dialtone design system monorepo

import { DtIconClose as _ } from "@dialpad/dialtone-icons/vue3";
import { CHIP_CLOSE_BUTTON_SIZE_MODIFIERS as f, CHIP_SIZE_MODIFIERS as r, CHIP_ICON_SIZES as b } from "./chip-constants.js";
import { hasSlotContent as y, getUniqueString as S } from "../../common/utils/index.js";
import { DialtoneLocalization as k } from "../../localization/index.js";
import { resolveComponent as d, createElementBlock as o, openBlock as s, createBlock as u, createCommentVNode as n, resolveDynamicComponent as B, mergeProps as I, toHandlers as O, withCtx as h, renderSlot as c, normalizeClass as p, createVNode as v } from "vue";
import { _ as g } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
import z from "../button/button.js";
const D = {
  compatConfig: { MODE: 3 },
  name: "DtChip",
  components: {
    DtButton: z,
    DtIconClose: _
  },
  props: {
    /**
     * 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: (t) => Object.keys(r).includes(t)
    },
    /**
     * 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 S();
      }
    },
    /**
     * 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: !1,
      hasSlotContent: y,
      i18n: new k()
    };
  },
  computed: {
    chipListeners() {
      return {
        click: (t) => {
          this.interactive && this.$emit("click", t);
        },
        keyup: (t) => {
          var a;
          ((a = t.code) == null ? void 0 : a.toLowerCase()) === "delete" ? this.onClose() : this.$emit("keyup", t);
        }
      };
    },
    closeButtonIconSize() {
      return b[this.size];
    },
    closeButtonTitle() {
      return this.i18n.$t("DIALTONE_CLOSE_BUTTON");
    }
  },
  methods: {
    chipClasses() {
      return [
        this.$attrs["grouped-chip"] ? "d-chip" : "d-chip__label",
        r[this.size],
        this.labelClass
      ];
    },
    chipCloseButtonClasses() {
      return [
        "d-chip__close",
        f[this.size]
      ];
    },
    onClose() {
      this.hideClose || this.$emit("close");
    }
  }
}, E = { class: "d-chip" }, L = {
  key: 0,
  class: "d-chip__icon",
  "data-qa": "dt-chip-icon"
}, T = {
  key: 1,
  "data-qa": "dt-chip-avatar"
}, q = ["id"];
function N(t, a, e, A, l, i) {
  const m = d("dt-icon-close"), C = d("dt-button");
  return s(), o("span", E, [
    (s(), u(B(e.interactive ? "button" : "span"), I({
      id: e.id,
      "aria-label": e.ariaLabel,
      "aria-labelledby": e.ariaLabel ? void 0 : `${e.id}-content`,
      class: i.chipClasses(),
      type: e.interactive && "button",
      "data-qa": "dt-chip"
    }, O(i.chipListeners)), {
      default: h(() => [
        l.hasSlotContent(t.$slots.icon) ? (s(), o("span", L, [
          c(t.$slots, "icon")
        ])) : l.hasSlotContent(t.$slots.avatar) ? (s(), o("span", T, [
          c(t.$slots, "avatar")
        ])) : n("", !0),
        l.hasSlotContent(t.$slots.default) ? (s(), o("span", {
          key: 2,
          id: `${e.id}-content`,
          class: p(["d-chip__text", e.contentClass]),
          "data-qa": "dt-chip-label"
        }, [
          c(t.$slots, "default")
        ], 10, q)) : n("", !0)
      ]),
      _: 3
    }, 16, ["id", "aria-label", "aria-labelledby", "class", "type"])),
    e.hideClose ? n("", !0) : (s(), u(C, {
      key: 0,
      class: p(i.chipCloseButtonClasses()),
      "data-qa": "dt-chip-close",
      "aria-label": i.closeButtonTitle,
      title: i.closeButtonTitle,
      onClick: a[0] || (a[0] = (H) => t.$emit("close"))
    }, {
      icon: h(() => [
        v(m, { size: i.closeButtonIconSize }, null, 8, ["size"])
      ]),
      _: 1
    }, 8, ["class", "aria-label", "title"]))
  ]);
}
const R = /* @__PURE__ */ g(D, [["render", N]]);
export {
  R as default
};
//# sourceMappingURL=chip.js.map