@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
90 lines (89 loc) • 2.55 kB
JavaScript
import { InputGroupMixin as i } from "../../common/mixins/input-group.js";
import { hasSlotContent as p } from "../../common/utils/index.js";
import { resolveComponent as u, openBlock as t, createElementBlock as o, mergeProps as n, renderSlot as r, createTextVNode as g, toDisplayString as m, createCommentVNode as f, createVNode as h } from "vue";
import { _ as c } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
import v from "../validation-messages/validation-messages.js";
const C = {
compatConfig: { MODE: 3 },
name: "DtInputGroup",
components: { DtValidationMessages: v },
mixins: [i],
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: p
};
},
watch: {
value(e) {
this.internalValue = e;
},
/*
* 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: !0,
handler(e) {
this.provideObj.value = e;
}
}
},
methods: {
getMessageKey(e, s) {
return `input-group-message-${e}-${s}-${this.id}`;
}
}
}, G = ["data-qa"], M = ["data-qa"];
function _(e, s, a, S, d, V) {
const l = u("dt-validation-messages");
return t(), o("fieldset", {
class: "d-input-group__fieldset",
"data-qa": a.dataQaGroup
}, [
d.hasSlotContent(e.$slots.legend) || e.legend ? (t(), o("legend", n({
key: 0,
class: ["d-label", e.legendClass]
}, e.legendChildProps, { "data-qa": a.dataQaGroupLegend }), [
r(e.$slots, "legend", {}, () => [
g(m(e.legend), 1)
])
], 16, M)) : f("", !0),
r(e.$slots, "default"),
h(l, n({
"validation-messages": e.formattedMessages,
"show-messages": e.showMessages,
class: e.messagesClass,
"data-qa": a.dataQaGroupMessages
}, e.messagesChildProps), null, 16, ["validation-messages", "show-messages", "class", "data-qa"])
], 8, G);
}
const w = /* @__PURE__ */ c(C, [["render", _]]);
export {
w as default
};
//# sourceMappingURL=input-group.js.map