@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
92 lines (91 loc) • 3 kB
JavaScript
import { InputGroupMixin } from "../../common/mixins/input_group.js";
import { hasSlotContent } from "../../common/utils.js";
import { resolveComponent, openBlock, createElementBlock, mergeProps, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode } from "vue";
import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
import DtValidationMessages from "../validation_messages/validation_messages.vue.js";
const _sfc_main = {
compatConfig: { MODE: 3 },
name: "DtInputGroup",
components: { DtValidationMessages },
mixins: [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
};
},
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 = resolveComponent("dt-validation-messages");
return openBlock(), createElementBlock("fieldset", {
class: "d-input-group__fieldset",
"data-qa": $props.dataQaGroup
}, [
$data.hasSlotContent(_ctx.$slots.legend) || _ctx.legend ? (openBlock(), createElementBlock("legend", mergeProps({
key: 0,
class: ["d-label", _ctx.legendClass]
}, _ctx.legendChildProps, { "data-qa": $props.dataQaGroupLegend }), [
renderSlot(_ctx.$slots, "legend", {}, () => [
createTextVNode(toDisplayString(_ctx.legend), 1)
])
], 16, _hoisted_2)) : createCommentVNode("", true),
renderSlot(_ctx.$slots, "default"),
createVNode(_component_dt_validation_messages, 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__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
DtInputGroup as default
};
//# sourceMappingURL=input_group.vue.js.map