@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
106 lines (105 loc) • 4.2 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const input = require("../../common/mixins/input.cjs");
const radio_constants = require("./radio_constants.cjs");
const _pluginVue2_normalizer = require("../../_virtual/_plugin-vue2_normalizer.cjs");
const validation_messages = require("../validation_messages/validation_messages.vue.cjs");
const _sfc_main = {
name: "DtRadio",
components: { DtValidationMessages: validation_messages.default },
mixins: [input.InputMixin, input.CheckableMixin, input.GroupableMixin, input.MessagesMixin],
inheritAttrs: false,
props: {
/**
* A provided value for the radio
*/
value: {
type: [String, Number],
default: ""
}
},
emits: [
/**
* Native input event
*
* @event input
* @type {String | Number}
*/
"input",
/**
* Native input focusin event
*
* @event focusin
* @property {FocusEvent}
*/
"focusin",
/**
* Native input focusout event
*
* @event focusout
* @property {FocusEvent}
*/
"focusout"
],
computed: {
inputValidationClass() {
return radio_constants.RADIO_INPUT_VALIDATION_CLASSES[this.internalValidationState];
},
radioGroupValue() {
var _a;
return (_a = this.groupContext) == null ? void 0 : _a.selectedValue;
},
inputListeners() {
return {
/* TODO
Check if any usages of this component leverage $listeners and either remove if unused or scope the removal
and migration prior to upgrading to Vue 3.x
*/
...this.$listeners,
/*
* Override input listener to as no-op. Prevents parent input listeners from being passed through onto the input
* element which will result in the hander being called twice (once on the input element and once by the emitted
* input event by the change listener).
*/
input: () => {
},
change: (event) => this.emitValue(event.target.value)
};
}
},
watch: {
radioGroupValue: {
immediate: true,
handler(newRadioGroupValue) {
if (this.hasGroup) {
this.internalChecked = newRadioGroupValue === this.value;
}
}
}
},
methods: {
emitValue(value) {
if (value !== this.radioGroupValue) {
this.setGroupValue(value);
this.$emit("input", value);
}
}
}
};
var _sfc_render = function render() {
var _vm = this, _c = _vm._self._c;
return _c("div", [_c("label", [_c("div", { class: ["d-radio-group", { "d-radio-group--disabled": _vm.internalDisabled }] }, [_c("div", { staticClass: "d-radio__input" }, [_c("input", _vm._g(_vm._b({ class: ["d-radio", _vm.inputValidationClass, _vm.inputClass], attrs: { "name": _vm.internalName, "disabled": _vm.internalDisabled, "type": "radio" }, domProps: { "checked": _vm.internalChecked, "value": _vm.value } }, "input", _vm.$attrs, false), _vm.inputListeners))]), _c("div", { staticClass: "d-radio__copy d-radio__label", attrs: { "data-qa": "radio-label-description-container" } }, [_c("div", _vm._b({ class: _vm.labelClass, attrs: { "data-qa": "radio-label" } }, "div", _vm.labelChildProps, false), [_vm._t("default", function() {
return [_vm._v(_vm._s(_vm.label))];
})], 2), _vm.$slots.description || _vm.description ? _c("div", _vm._b({ class: ["d-description", _vm.descriptionClass], attrs: { "data-qa": "radio-description" } }, "div", _vm.descriptionChildProps, false), [_vm._t("description", function() {
return [_vm._v(_vm._s(_vm.description))];
})], 2) : _vm._e(), _c("dt-validation-messages", _vm._b({ class: _vm.messagesClass, attrs: { "validation-messages": _vm.formattedMessages, "show-messages": _vm.showMessages, "data-qa": "dt-radio-validation-messages" } }, "dt-validation-messages", _vm.messagesChildProps, false))], 1)])])]);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.default(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns
);
const radio = __component__.exports;
exports.default = radio;
//# sourceMappingURL=radio.vue.cjs.map