@dialpad/dialtone-vue
Version:
Vue component library for Dialpad's design system Dialtone
82 lines (81 loc) • 2.25 kB
JavaScript
import { InputGroupMixin as t } from "../../common/mixins/input-group.js";
import { n } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
import r from "../validation-messages/validation-messages.js";
const i = {
name: "DtInputGroup",
components: { DtValidationMessages: r },
mixins: [t],
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"
}
},
emits: [
/**
* Native input event
*
* @event input
*/
"input"
],
data() {
return {
internalValue: this.value,
// wrap values in object to make reactive
provideObj: {
value: this.value
}
};
},
watch: {
value(a) {
this.internalValue = a;
},
/*
* watching value to support 2 way binding for slotted inputs.
* need this to pass value to slotted inputs if modified outside
* input group.
*/
internalValue(a) {
this.provideObj.value = a;
}
},
methods: {
getMessageKey(a, e) {
return `input-group-message-${a}-${e}-${this.id}`;
}
}
};
var o = function() {
var e = this, s = e._self._c;
return s("fieldset", { staticClass: "d-input-group__fieldset", attrs: { "data-qa": e.dataQaGroup } }, [e.$slots.legend || e.legend ? s("legend", e._b({ class: ["d-label", e.legendClass], attrs: { "data-qa": e.dataQaGroupLegend } }, "legend", e.legendChildProps, !1), [e._t("legend", function() {
return [e._v(" " + e._s(e.legend) + " ")];
})], 2) : e._e(), e._t("default"), s("dt-validation-messages", e._b({ class: e.messagesClass, attrs: { "validation-messages": e.formattedMessages, "show-messages": e.showMessages, "data-qa": e.dataQaGroupMessages } }, "dt-validation-messages", e.messagesChildProps, !1))], 2);
}, d = [], l = /* @__PURE__ */ n(
i,
o,
d
);
const m = l.exports;
export {
m as default
};
//# sourceMappingURL=input-group.js.map