@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
212 lines (211 loc) • 6.24 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue3 = require("@dialpad/dialtone-icons/vue3");
const chip_constants = require("./chip_constants.cjs");
const common_utils = require("../../common/utils.cjs");
const vue = require("vue");
const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
const button = require("../button/button.vue.cjs");
const _sfc_main = {
compatConfig: { MODE: 3 },
name: "DtChip",
components: {
DtButton: button.default,
DtIconClose: vue3.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_constants.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 common_utils.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,
hasSlotContent: common_utils.hasSlotContent
};
},
computed: {
chipListeners() {
return {
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_constants.CHIP_ICON_SIZES[this.size];
}
},
methods: {
chipClasses() {
return [
this.$attrs["grouped-chip"] ? "d-chip" : "d-chip__label",
chip_constants.CHIP_SIZE_MODIFIERS[this.size],
this.labelClass
];
},
chipCloseButtonClasses() {
return [
"d-chip__close",
chip_constants.CHIP_CLOSE_BUTTON_SIZE_MODIFIERS[this.size]
];
},
onClose() {
if (!this.hideClose) {
this.$emit("close");
}
}
}
};
const _hoisted_1 = { class: "d-chip" };
const _hoisted_2 = {
key: 0,
"data-qa": "dt-chip-icon",
class: "d-chip__icon"
};
const _hoisted_3 = {
key: 1,
"data-qa": "dt-chip-avatar"
};
const _hoisted_4 = ["id"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_dt_icon_close = vue.resolveComponent("dt-icon-close");
const _component_dt_button = vue.resolveComponent("dt-button");
return vue.openBlock(), vue.createElementBlock("span", _hoisted_1, [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.interactive ? "button" : "span"), vue.mergeProps({
id: $props.id,
type: $props.interactive && "button",
class: $options.chipClasses(),
"data-qa": "dt-chip",
"aria-labelledby": $props.ariaLabel ? void 0 : `${$props.id}-content`,
"aria-label": $props.ariaLabel
}, vue.toHandlers($options.chipListeners)), {
default: vue.withCtx(() => [
$data.hasSlotContent(_ctx.$slots.icon) ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, [
vue.renderSlot(_ctx.$slots, "icon")
])) : $data.hasSlotContent(_ctx.$slots.avatar) ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3, [
vue.renderSlot(_ctx.$slots, "avatar")
])) : vue.createCommentVNode("", true),
$data.hasSlotContent(_ctx.$slots.default) ? (vue.openBlock(), vue.createElementBlock("span", {
key: 2,
id: `${$props.id}-content`,
"data-qa": "dt-chip-label",
class: vue.normalizeClass(["d-chip__text", $props.contentClass])
}, [
vue.renderSlot(_ctx.$slots, "default")
], 10, _hoisted_4)) : vue.createCommentVNode("", true)
]),
_: 3
}, 16, ["id", "type", "class", "aria-labelledby", "aria-label"])),
!$props.hideClose ? (vue.openBlock(), vue.createBlock(_component_dt_button, vue.mergeProps({ key: 0 }, $props.closeButtonProps, {
class: $options.chipCloseButtonClasses(),
"data-qa": "dt-chip-close",
"aria-label": $props.closeButtonProps.ariaLabel,
onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("close"))
}), {
icon: vue.withCtx(() => [
vue.createVNode(_component_dt_icon_close, { size: $options.closeButtonIconSize }, null, 8, ["size"])
]),
_: 1
}, 16, ["class", "aria-label"])) : vue.createCommentVNode("", true)
]);
}
const DtChip = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
exports.default = DtChip;
//# sourceMappingURL=chip.vue.cjs.map