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

Dialpad's Dialtone design system monorepo

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

//# sourceMappingURL=chip.js.map