@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
92 lines (91 loc) • 3.15 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const input_group = require("../../common/mixins/input_group.cjs");
const common_utils = require("../../common/utils.cjs");
const vue = require("vue");
const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
const validation_messages = require("../validation_messages/validation_messages.vue.cjs");
const _sfc_main = {
compatConfig: { MODE: 3 },
name: "DtInputGroup",
components: { DtValidationMessages: validation_messages.default },
mixins: [input_group.InputGroupMixin],
props: {
/**
* A data qa tag for the input group
*/
dataQaGroup: {
type: String,
default: "input-group"
},
/**
* A data qa tag for the input group legend
*/
dataQaGroupLegend: {
type: String,
default: "input-group-legend"
},
/**
* A data qa tag for the input group messages
*/
dataQaGroupMessages: {
type: String,
default: "input-group-messages"
}
},
data() {
return {
internalValue: this.value,
hasSlotContent: common_utils.hasSlotContent
};
},
watch: {
value(newValue) {
this.internalValue = newValue;
},
/*
* watching value to support 2 way binding for slotted inputs.
* need this to pass value to slotted inputs if modified outside
* input group.
*/
internalValue: {
immediate: true,
handler(newInternalValue) {
this.provideObj.value = newInternalValue;
}
}
},
methods: {
getMessageKey(type, index) {
return `input-group-message-${type}-${index}-${this.id}`;
}
}
};
const _hoisted_1 = ["data-qa"];
const _hoisted_2 = ["data-qa"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_dt_validation_messages = vue.resolveComponent("dt-validation-messages");
return vue.openBlock(), vue.createElementBlock("fieldset", {
class: "d-input-group__fieldset",
"data-qa": $props.dataQaGroup
}, [
$data.hasSlotContent(_ctx.$slots.legend) || _ctx.legend ? (vue.openBlock(), vue.createElementBlock("legend", vue.mergeProps({
key: 0,
class: ["d-label", _ctx.legendClass]
}, _ctx.legendChildProps, { "data-qa": $props.dataQaGroupLegend }), [
vue.renderSlot(_ctx.$slots, "legend", {}, () => [
vue.createTextVNode(vue.toDisplayString(_ctx.legend), 1)
])
], 16, _hoisted_2)) : vue.createCommentVNode("", true),
vue.renderSlot(_ctx.$slots, "default"),
vue.createVNode(_component_dt_validation_messages, vue.mergeProps({
"validation-messages": _ctx.formattedMessages,
"show-messages": _ctx.showMessages,
class: _ctx.messagesClass,
"data-qa": $props.dataQaGroupMessages
}, _ctx.messagesChildProps), null, 16, ["validation-messages", "show-messages", "class", "data-qa"])
], 8, _hoisted_1);
}
const DtInputGroup = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
exports.default = DtInputGroup;
//# sourceMappingURL=input_group.vue.cjs.map