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

Dialpad's Dialtone design system monorepo

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