@dialpad/dialtone 9.110.0 → 9.110.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/css/dialtone-default-theme.css +5 -0
- package/dist/css/dialtone-default-theme.min.css +1 -1
- package/dist/css/dialtone.css +5 -0
- package/dist/css/dialtone.min.css +1 -1
- package/dist/tokens/doc.json +23260 -23260
- package/dist/vue2/component-documentation.json +1 -1
- package/dist/vue2/components/checkbox/checkbox.vue.cjs +9 -6
- package/dist/vue2/components/checkbox/checkbox.vue.cjs.map +1 -1
- package/dist/vue2/components/checkbox/checkbox.vue.js +9 -6
- package/dist/vue2/components/checkbox/checkbox.vue.js.map +1 -1
- package/dist/vue2/components/radio/radio.vue.cjs +13 -4
- package/dist/vue2/components/radio/radio.vue.cjs.map +1 -1
- package/dist/vue2/components/radio/radio.vue.js +13 -4
- package/dist/vue2/components/radio/radio.vue.js.map +1 -1
- package/dist/vue2/recipes/conversation_view/editor/editor.vue.cjs +9 -2
- package/dist/vue2/recipes/conversation_view/editor/editor.vue.cjs.map +1 -1
- package/dist/vue2/recipes/conversation_view/editor/editor.vue.js +9 -2
- package/dist/vue2/recipes/conversation_view/editor/editor.vue.js.map +1 -1
- package/dist/vue2/types/components/checkbox/checkbox.vue.d.ts +2 -1
- package/dist/vue2/types/components/radio/radio.vue.d.ts +3 -0
- package/dist/vue2/types/components/radio/radio.vue.d.ts.map +1 -1
- package/dist/vue2/types/recipes/conversation_view/editor/editor.vue.d.ts +2 -1
- package/dist/vue2/types/recipes/conversation_view/editor/editor.vue.d.ts.map +1 -1
- package/dist/vue3/component-documentation.json +1 -1
- package/dist/vue3/components/checkbox/checkbox.vue.cjs +44 -43
- package/dist/vue3/components/checkbox/checkbox.vue.cjs.map +1 -1
- package/dist/vue3/components/checkbox/checkbox.vue.js +44 -43
- package/dist/vue3/components/checkbox/checkbox.vue.js.map +1 -1
- package/dist/vue3/components/radio/radio.vue.cjs +47 -37
- package/dist/vue3/components/radio/radio.vue.cjs.map +1 -1
- package/dist/vue3/components/radio/radio.vue.js +47 -37
- package/dist/vue3/components/radio/radio.vue.js.map +1 -1
- package/dist/vue3/recipes/conversation_view/editor/editor.vue.cjs +12 -2
- package/dist/vue3/recipes/conversation_view/editor/editor.vue.cjs.map +1 -1
- package/dist/vue3/recipes/conversation_view/editor/editor.vue.js +12 -2
- package/dist/vue3/recipes/conversation_view/editor/editor.vue.js.map +1 -1
- package/dist/vue3/types/components/checkbox/checkbox.vue.d.ts +2 -1
- package/dist/vue3/types/components/checkbox/checkbox.vue.d.ts.map +1 -1
- package/dist/vue3/types/components/radio/radio.vue.d.ts +3 -0
- package/dist/vue3/types/components/radio/radio.vue.d.ts.map +1 -1
- package/dist/vue3/types/recipes/conversation_view/editor/editor.vue.d.ts +3 -1
- package/dist/vue3/types/recipes/conversation_view/editor/editor.vue.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -49,8 +49,11 @@ const _sfc_main = {
|
|
|
49
49
|
hasDescription() {
|
|
50
50
|
return !!(this.$slots.description || this.description);
|
|
51
51
|
},
|
|
52
|
-
|
|
53
|
-
return this.
|
|
52
|
+
hasDescriptionOrMessages() {
|
|
53
|
+
return this.hasDescription || this.hasMessages;
|
|
54
|
+
},
|
|
55
|
+
hasMessages() {
|
|
56
|
+
return this.formattedMessages.length && this.showMessages;
|
|
54
57
|
},
|
|
55
58
|
inputListeners() {
|
|
56
59
|
return {
|
|
@@ -102,51 +105,49 @@ const _hoisted_1 = { class: "d-checkbox__input" };
|
|
|
102
105
|
const _hoisted_2 = ["checked", "name", "value", "disabled", ".indeterminate"];
|
|
103
106
|
const _hoisted_3 = {
|
|
104
107
|
key: 0,
|
|
105
|
-
class: "d-
|
|
106
|
-
"data-qa": "checkbox-
|
|
108
|
+
class: "d-checkbox__messages",
|
|
109
|
+
"data-qa": "checkbox-description-messages"
|
|
107
110
|
};
|
|
108
111
|
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
109
112
|
const _component_dt_validation_messages = vue.resolveComponent("dt-validation-messages");
|
|
110
113
|
return vue.openBlock(), vue.createElementBlock("div", vue.normalizeProps(vue.guardReactiveProps($options.addClassStyleAttrs(_ctx.$attrs))), [
|
|
111
|
-
vue.createElementVNode("label",
|
|
112
|
-
vue.
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
vue.createElementVNode("
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
], 2)
|
|
149
|
-
])
|
|
114
|
+
vue.createElementVNode("label", {
|
|
115
|
+
class: vue.normalizeClass(["d-checkbox-group", { "d-checkbox-group--disabled": _ctx.internalDisabled }])
|
|
116
|
+
}, [
|
|
117
|
+
vue.createElementVNode("div", _hoisted_1, [
|
|
118
|
+
vue.createElementVNode("input", vue.mergeProps({
|
|
119
|
+
type: "checkbox",
|
|
120
|
+
checked: _ctx.internalChecked,
|
|
121
|
+
name: _ctx.internalName,
|
|
122
|
+
value: _ctx.value,
|
|
123
|
+
disabled: _ctx.internalDisabled,
|
|
124
|
+
class: ["d-checkbox", $options.inputValidationClass, _ctx.inputClass]
|
|
125
|
+
}, $options.removeClassStyleAttrs(_ctx.$attrs), { ".indeterminate": _ctx.internalIndeterminate }, vue.toHandlers($options.inputListeners, true)), null, 48, _hoisted_2)
|
|
126
|
+
]),
|
|
127
|
+
$options.hasLabel ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
|
|
128
|
+
key: 0,
|
|
129
|
+
class: [_ctx.labelClass, "d-checkbox__copy d-checkbox__label"]
|
|
130
|
+
}, _ctx.labelChildProps, { "data-qa": "checkbox-label" }), [
|
|
131
|
+
vue.renderSlot(_ctx.$slots, "default", {}, () => [
|
|
132
|
+
vue.createTextVNode(vue.toDisplayString(_ctx.label), 1)
|
|
133
|
+
])
|
|
134
|
+
], 16)) : vue.createCommentVNode("", true)
|
|
135
|
+
], 2),
|
|
136
|
+
$options.hasDescriptionOrMessages ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
|
|
137
|
+
$options.hasDescription ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
|
|
138
|
+
key: 0,
|
|
139
|
+
class: ["d-description", _ctx.descriptionClass]
|
|
140
|
+
}, _ctx.descriptionChildProps, { "data-qa": "checkbox-description" }), [
|
|
141
|
+
vue.renderSlot(_ctx.$slots, "description", {}, () => [
|
|
142
|
+
vue.createTextVNode(vue.toDisplayString(_ctx.description), 1)
|
|
143
|
+
])
|
|
144
|
+
], 16)) : vue.createCommentVNode("", true),
|
|
145
|
+
vue.createVNode(_component_dt_validation_messages, vue.mergeProps({
|
|
146
|
+
"validation-messages": _ctx.formattedMessages,
|
|
147
|
+
"show-messages": _ctx.showMessages,
|
|
148
|
+
class: _ctx.messagesClass
|
|
149
|
+
}, _ctx.messagesChildProps, { "data-qa": "dt-checkbox-validation-messages" }), null, 16, ["validation-messages", "show-messages", "class"])
|
|
150
|
+
])) : vue.createCommentVNode("", true)
|
|
150
151
|
], 16);
|
|
151
152
|
}
|
|
152
153
|
const checkbox = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.vue.cjs","sources":["../../../components/checkbox/checkbox.vue"],"sourcesContent":["<template>\n <div\n v-bind=\"addClassStyleAttrs($attrs)\"\n >\n <label
|
|
1
|
+
{"version":3,"file":"checkbox.vue.cjs","sources":["../../../components/checkbox/checkbox.vue"],"sourcesContent":["<template>\n <div\n v-bind=\"addClassStyleAttrs($attrs)\"\n >\n <label :class=\"['d-checkbox-group', { 'd-checkbox-group--disabled': internalDisabled }]\">\n <div class=\"d-checkbox__input\">\n <input\n type=\"checkbox\"\n :checked=\"internalChecked\"\n :name=\"internalName\"\n :value=\"value\"\n :disabled=\"internalDisabled\"\n :class=\"['d-checkbox', inputValidationClass, inputClass]\"\n v-bind=\"removeClassStyleAttrs($attrs)\"\n :indeterminate.prop=\"internalIndeterminate\"\n v-on=\"inputListeners\"\n >\n </div>\n <div\n v-if=\"hasLabel\"\n :class=\"[labelClass, 'd-checkbox__copy d-checkbox__label']\"\n v-bind=\"labelChildProps\"\n data-qa=\"checkbox-label\"\n >\n <!-- @slot slot for Checkbox Label -->\n <slot>{{ label }}</slot>\n </div>\n </label>\n <div\n v-if=\"hasDescriptionOrMessages\"\n class=\"d-checkbox__messages\"\n data-qa=\"checkbox-description-messages\"\n >\n <div\n v-if=\"hasDescription\"\n :class=\"['d-description', descriptionClass]\"\n v-bind=\"descriptionChildProps\"\n data-qa=\"checkbox-description\"\n >\n <!-- @slot slot for Checkbox Description -->\n <slot name=\"description\">\n {{ description }}\n </slot>\n </div>\n <dt-validation-messages\n :validation-messages=\"formattedMessages\"\n :show-messages=\"showMessages\"\n :class=\"messagesClass\"\n v-bind=\"messagesChildProps\"\n data-qa=\"dt-checkbox-validation-messages\"\n />\n </div>\n </div>\n</template>\n\n<script>\n// Imports\nimport {\n InputMixin,\n CheckableMixin,\n GroupableMixin,\n MessagesMixin,\n} from '@/common/mixins/input';\nimport { removeClassStyleAttrs, addClassStyleAttrs } from '@/common/utils';\nimport { CHECKBOX_INPUT_VALIDATION_CLASSES } from './checkbox_constants';\nimport { DtValidationMessages } from '../validation_messages';\n\n/**\n * Checkboxes are control elements that allow the user to make a selection.They are typically used in a\n * Checkbox Group which allows the user to make one or more selections from a list of options.\n * @see https://dialtone.dialpad.com/components/checkbox.html\n */\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtCheckbox',\n\n components: { DtValidationMessages },\n\n mixins: [InputMixin, CheckableMixin, GroupableMixin, MessagesMixin],\n\n inheritAttrs: false,\n\n emits: [\n /**\n * Native input event\n *\n * @event input\n * @type {Boolean}\n */\n 'input',\n\n /**\n * Native input focusin event\n *\n * @event focusin\n * @type {FocusEvent}\n */\n 'focusin',\n\n /**\n * Native input focusout event\n *\n * @event focusout\n * @type {FocusEvent}\n */\n 'focusout',\n ],\n\n computed: {\n inputValidationClass () {\n return CHECKBOX_INPUT_VALIDATION_CLASSES[this.internalValidationState];\n },\n\n checkboxGroupValueChecked () {\n return this.groupContext?.selectedValues?.includes(this.value) ?? false;\n },\n\n hasLabel () {\n return !!(this.$slots.default || this.label);\n },\n\n hasDescription () {\n return !!(this.$slots.description || this.description);\n },\n\n hasDescriptionOrMessages () {\n return this.hasDescription || this.hasMessages;\n },\n\n hasMessages () {\n return this.formattedMessages.length && this.showMessages;\n },\n\n inputListeners () {\n return {\n /*\n * Override input listener to as no-op. Prevents parent input listeners from being passed through\n * onto the input element which will result in the handler being called twice\n * (once on the input element and once by the emitted input event by the change listener).\n */\n input: () => {},\n focusin: event => this.$emit('focusin', event),\n focusout: event => this.$emit('focusout', event),\n change: event => this.emitValue(event.target),\n };\n },\n },\n\n watch: {\n checkboxGroupValueChecked: {\n immediate: true,\n handler (newCheckboxGroupValueChecked) {\n if (this.hasGroup) {\n // update internal value when the checkbox group value changes\n this.internalChecked = newCheckboxGroupValueChecked;\n }\n },\n },\n },\n\n mounted () {\n this.runValidations();\n },\n\n methods: {\n removeClassStyleAttrs,\n addClassStyleAttrs,\n\n emitValue (target) {\n let { value, checked } = target;\n // Expected: Indeterminate -> unchecked. We need to manually set DOM property `checked` to false\n // and update this.internalIndeterminate.\n if (this.internalIndeterminate) {\n checked = false;\n this.internalIndeterminate = false;\n target.checked = false;\n }\n // update provided value if injected\n this.setGroupValue(value, checked);\n\n // emit the state of the checkbox\n this.$emit('input', checked);\n },\n\n runValidations () {\n this.validateInputLabels(this.hasLabel, this.$attrs['aria-label']);\n },\n },\n};\n</script>\n"],"names":["DtValidationMessages","InputMixin","CheckableMixin","GroupableMixin","MessagesMixin","CHECKBOX_INPUT_VALIDATION_CLASSES","removeClassStyleAttrs","addClassStyleAttrs","_openBlock","_createElementBlock","_normalizeProps","_guardReactiveProps","_createElementVNode","_normalizeClass","_mergeProps","_toHandlers","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode","_createVNode"],"mappings":"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"}
|
|
@@ -47,8 +47,11 @@ const _sfc_main = {
|
|
|
47
47
|
hasDescription() {
|
|
48
48
|
return !!(this.$slots.description || this.description);
|
|
49
49
|
},
|
|
50
|
-
|
|
51
|
-
return this.
|
|
50
|
+
hasDescriptionOrMessages() {
|
|
51
|
+
return this.hasDescription || this.hasMessages;
|
|
52
|
+
},
|
|
53
|
+
hasMessages() {
|
|
54
|
+
return this.formattedMessages.length && this.showMessages;
|
|
52
55
|
},
|
|
53
56
|
inputListeners() {
|
|
54
57
|
return {
|
|
@@ -100,51 +103,49 @@ const _hoisted_1 = { class: "d-checkbox__input" };
|
|
|
100
103
|
const _hoisted_2 = ["checked", "name", "value", "disabled", ".indeterminate"];
|
|
101
104
|
const _hoisted_3 = {
|
|
102
105
|
key: 0,
|
|
103
|
-
class: "d-
|
|
104
|
-
"data-qa": "checkbox-
|
|
106
|
+
class: "d-checkbox__messages",
|
|
107
|
+
"data-qa": "checkbox-description-messages"
|
|
105
108
|
};
|
|
106
109
|
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
107
110
|
const _component_dt_validation_messages = resolveComponent("dt-validation-messages");
|
|
108
111
|
return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps($options.addClassStyleAttrs(_ctx.$attrs))), [
|
|
109
|
-
createElementVNode("label",
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
createElementVNode("
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
], 2)
|
|
147
|
-
])
|
|
112
|
+
createElementVNode("label", {
|
|
113
|
+
class: normalizeClass(["d-checkbox-group", { "d-checkbox-group--disabled": _ctx.internalDisabled }])
|
|
114
|
+
}, [
|
|
115
|
+
createElementVNode("div", _hoisted_1, [
|
|
116
|
+
createElementVNode("input", mergeProps({
|
|
117
|
+
type: "checkbox",
|
|
118
|
+
checked: _ctx.internalChecked,
|
|
119
|
+
name: _ctx.internalName,
|
|
120
|
+
value: _ctx.value,
|
|
121
|
+
disabled: _ctx.internalDisabled,
|
|
122
|
+
class: ["d-checkbox", $options.inputValidationClass, _ctx.inputClass]
|
|
123
|
+
}, $options.removeClassStyleAttrs(_ctx.$attrs), { ".indeterminate": _ctx.internalIndeterminate }, toHandlers($options.inputListeners, true)), null, 48, _hoisted_2)
|
|
124
|
+
]),
|
|
125
|
+
$options.hasLabel ? (openBlock(), createElementBlock("div", mergeProps({
|
|
126
|
+
key: 0,
|
|
127
|
+
class: [_ctx.labelClass, "d-checkbox__copy d-checkbox__label"]
|
|
128
|
+
}, _ctx.labelChildProps, { "data-qa": "checkbox-label" }), [
|
|
129
|
+
renderSlot(_ctx.$slots, "default", {}, () => [
|
|
130
|
+
createTextVNode(toDisplayString(_ctx.label), 1)
|
|
131
|
+
])
|
|
132
|
+
], 16)) : createCommentVNode("", true)
|
|
133
|
+
], 2),
|
|
134
|
+
$options.hasDescriptionOrMessages ? (openBlock(), createElementBlock("div", _hoisted_3, [
|
|
135
|
+
$options.hasDescription ? (openBlock(), createElementBlock("div", mergeProps({
|
|
136
|
+
key: 0,
|
|
137
|
+
class: ["d-description", _ctx.descriptionClass]
|
|
138
|
+
}, _ctx.descriptionChildProps, { "data-qa": "checkbox-description" }), [
|
|
139
|
+
renderSlot(_ctx.$slots, "description", {}, () => [
|
|
140
|
+
createTextVNode(toDisplayString(_ctx.description), 1)
|
|
141
|
+
])
|
|
142
|
+
], 16)) : createCommentVNode("", true),
|
|
143
|
+
createVNode(_component_dt_validation_messages, mergeProps({
|
|
144
|
+
"validation-messages": _ctx.formattedMessages,
|
|
145
|
+
"show-messages": _ctx.showMessages,
|
|
146
|
+
class: _ctx.messagesClass
|
|
147
|
+
}, _ctx.messagesChildProps, { "data-qa": "dt-checkbox-validation-messages" }), null, 16, ["validation-messages", "show-messages", "class"])
|
|
148
|
+
])) : createCommentVNode("", true)
|
|
148
149
|
], 16);
|
|
149
150
|
}
|
|
150
151
|
const checkbox = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.vue.js","sources":["../../../components/checkbox/checkbox.vue"],"sourcesContent":["<template>\n <div\n v-bind=\"addClassStyleAttrs($attrs)\"\n >\n <label
|
|
1
|
+
{"version":3,"file":"checkbox.vue.js","sources":["../../../components/checkbox/checkbox.vue"],"sourcesContent":["<template>\n <div\n v-bind=\"addClassStyleAttrs($attrs)\"\n >\n <label :class=\"['d-checkbox-group', { 'd-checkbox-group--disabled': internalDisabled }]\">\n <div class=\"d-checkbox__input\">\n <input\n type=\"checkbox\"\n :checked=\"internalChecked\"\n :name=\"internalName\"\n :value=\"value\"\n :disabled=\"internalDisabled\"\n :class=\"['d-checkbox', inputValidationClass, inputClass]\"\n v-bind=\"removeClassStyleAttrs($attrs)\"\n :indeterminate.prop=\"internalIndeterminate\"\n v-on=\"inputListeners\"\n >\n </div>\n <div\n v-if=\"hasLabel\"\n :class=\"[labelClass, 'd-checkbox__copy d-checkbox__label']\"\n v-bind=\"labelChildProps\"\n data-qa=\"checkbox-label\"\n >\n <!-- @slot slot for Checkbox Label -->\n <slot>{{ label }}</slot>\n </div>\n </label>\n <div\n v-if=\"hasDescriptionOrMessages\"\n class=\"d-checkbox__messages\"\n data-qa=\"checkbox-description-messages\"\n >\n <div\n v-if=\"hasDescription\"\n :class=\"['d-description', descriptionClass]\"\n v-bind=\"descriptionChildProps\"\n data-qa=\"checkbox-description\"\n >\n <!-- @slot slot for Checkbox Description -->\n <slot name=\"description\">\n {{ description }}\n </slot>\n </div>\n <dt-validation-messages\n :validation-messages=\"formattedMessages\"\n :show-messages=\"showMessages\"\n :class=\"messagesClass\"\n v-bind=\"messagesChildProps\"\n data-qa=\"dt-checkbox-validation-messages\"\n />\n </div>\n </div>\n</template>\n\n<script>\n// Imports\nimport {\n InputMixin,\n CheckableMixin,\n GroupableMixin,\n MessagesMixin,\n} from '@/common/mixins/input';\nimport { removeClassStyleAttrs, addClassStyleAttrs } from '@/common/utils';\nimport { CHECKBOX_INPUT_VALIDATION_CLASSES } from './checkbox_constants';\nimport { DtValidationMessages } from '../validation_messages';\n\n/**\n * Checkboxes are control elements that allow the user to make a selection.They are typically used in a\n * Checkbox Group which allows the user to make one or more selections from a list of options.\n * @see https://dialtone.dialpad.com/components/checkbox.html\n */\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtCheckbox',\n\n components: { DtValidationMessages },\n\n mixins: [InputMixin, CheckableMixin, GroupableMixin, MessagesMixin],\n\n inheritAttrs: false,\n\n emits: [\n /**\n * Native input event\n *\n * @event input\n * @type {Boolean}\n */\n 'input',\n\n /**\n * Native input focusin event\n *\n * @event focusin\n * @type {FocusEvent}\n */\n 'focusin',\n\n /**\n * Native input focusout event\n *\n * @event focusout\n * @type {FocusEvent}\n */\n 'focusout',\n ],\n\n computed: {\n inputValidationClass () {\n return CHECKBOX_INPUT_VALIDATION_CLASSES[this.internalValidationState];\n },\n\n checkboxGroupValueChecked () {\n return this.groupContext?.selectedValues?.includes(this.value) ?? false;\n },\n\n hasLabel () {\n return !!(this.$slots.default || this.label);\n },\n\n hasDescription () {\n return !!(this.$slots.description || this.description);\n },\n\n hasDescriptionOrMessages () {\n return this.hasDescription || this.hasMessages;\n },\n\n hasMessages () {\n return this.formattedMessages.length && this.showMessages;\n },\n\n inputListeners () {\n return {\n /*\n * Override input listener to as no-op. Prevents parent input listeners from being passed through\n * onto the input element which will result in the handler being called twice\n * (once on the input element and once by the emitted input event by the change listener).\n */\n input: () => {},\n focusin: event => this.$emit('focusin', event),\n focusout: event => this.$emit('focusout', event),\n change: event => this.emitValue(event.target),\n };\n },\n },\n\n watch: {\n checkboxGroupValueChecked: {\n immediate: true,\n handler (newCheckboxGroupValueChecked) {\n if (this.hasGroup) {\n // update internal value when the checkbox group value changes\n this.internalChecked = newCheckboxGroupValueChecked;\n }\n },\n },\n },\n\n mounted () {\n this.runValidations();\n },\n\n methods: {\n removeClassStyleAttrs,\n addClassStyleAttrs,\n\n emitValue (target) {\n let { value, checked } = target;\n // Expected: Indeterminate -> unchecked. We need to manually set DOM property `checked` to false\n // and update this.internalIndeterminate.\n if (this.internalIndeterminate) {\n checked = false;\n this.internalIndeterminate = false;\n target.checked = false;\n }\n // update provided value if injected\n this.setGroupValue(value, checked);\n\n // emit the state of the checkbox\n this.$emit('input', checked);\n },\n\n runValidations () {\n this.validateInputLabels(this.hasLabel, this.$attrs['aria-label']);\n },\n },\n};\n</script>\n"],"names":["_openBlock","_createElementBlock","_normalizeProps","_guardReactiveProps","_createElementVNode","_normalizeClass","_mergeProps","_toHandlers","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode","_createVNode"],"mappings":";;;;;;AAwEA,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,YAAY,EAAE,qBAAsB;AAAA,EAEpC,QAAQ,CAAC,YAAY,gBAAgB,gBAAgB,aAAa;AAAA,EAElE,cAAc;AAAA,EAEd,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA,EACD;AAAA,EAED,UAAU;AAAA,IACR,uBAAwB;AACtB,aAAO,kCAAkC,KAAK,uBAAuB;AAAA,IACtE;AAAA,IAED,4BAA6B;;AAC3B,eAAO,gBAAK,iBAAL,mBAAmB,mBAAnB,mBAAmC,SAAS,KAAK,WAAU;AAAA,IACnE;AAAA,IAED,WAAY;AACV,aAAO,CAAC,EAAE,KAAK,OAAO,WAAW,KAAK;AAAA,IACvC;AAAA,IAED,iBAAkB;AAChB,aAAO,CAAC,EAAE,KAAK,OAAO,eAAe,KAAK;AAAA,IAC3C;AAAA,IAED,2BAA4B;AAC1B,aAAO,KAAK,kBAAkB,KAAK;AAAA,IACpC;AAAA,IAED,cAAe;AACb,aAAO,KAAK,kBAAkB,UAAU,KAAK;AAAA,IAC9C;AAAA,IAED,iBAAkB;AAChB,aAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAML,OAAO,MAAM;AAAA,QAAE;AAAA,QACf,SAAS,WAAS,KAAK,MAAM,WAAW,KAAK;AAAA,QAC7C,UAAU,WAAS,KAAK,MAAM,YAAY,KAAK;AAAA,QAC/C,QAAQ,WAAS,KAAK,UAAU,MAAM,MAAM;AAAA;IAE/C;AAAA,EACF;AAAA,EAED,OAAO;AAAA,IACL,2BAA2B;AAAA,MACzB,WAAW;AAAA,MACX,QAAS,8BAA8B;AACrC,YAAI,KAAK,UAAU;AAEjB,eAAK,kBAAkB;AAAA,QACzB;AAAA,MACD;AAAA,IACF;AAAA,EACF;AAAA,EAED,UAAW;AACT,SAAK,eAAc;AAAA,EACpB;AAAA,EAED,SAAS;AAAA,IACP;AAAA,IACA;AAAA,IAEA,UAAW,QAAQ;AACjB,UAAI,EAAE,OAAO,QAAU,IAAE;AAGzB,UAAI,KAAK,uBAAuB;AAC9B,kBAAU;AACV,aAAK,wBAAwB;AAC7B,eAAO,UAAU;AAAA,MACnB;AAEA,WAAK,cAAc,OAAO,OAAO;AAGjC,WAAK,MAAM,SAAS,OAAO;AAAA,IAC5B;AAAA,IAED,iBAAkB;AAChB,WAAK,oBAAoB,KAAK,UAAU,KAAK,OAAO,YAAY,CAAC;AAAA,IAClE;AAAA,EACF;AACH;AAvLW,MAAA,aAAA,EAAA,OAAM,oBAAmB;AALpC,MAAA,aAAA,CAAA,WAAA,QAAA,SAAA,YAAA,gBAAA;;EAAA,KAAA;AAAA,EA8BM,OAAM;AAAA,EACN,WAAQ;;;;AA9BZ,SAAAA,UAAA,GAAAC,mBAmDM,OApDRC,eAAAC,mBAEY,SAAA,mBAAmB,KAAM,MAAA,CAAA,CAAA,GAAA;AAAA,IAEjCC,mBAuBQ,SAAA;AAAA,MAvBA,OAJZC,oEAIwE,KAAgB,iBAAA,CAAA,CAAA;AAAA;MAClFD,mBAYM,OAZN,YAYM;AAAA,QAXJA,mBAUC,SAVDE,WAUC;AAAA,UATC,MAAK;AAAA,UACJ,SAAS,KAAe;AAAA,UACxB,MAAM,KAAY;AAAA,UAClB,OAAO,KAAK;AAAA,UACZ,UAAU,KAAgB;AAAA,UAC1B,OAAK,CAAA,cAAiB,SAAoB,sBAAE,KAAU,UAAA;AAAA,WAC/C,SAAqB,sBAAC,KAAM,MAAA,GAAA,EACnC,kBAAoB,2BACrB,GAAAC,WAAqB,SAAf,gBAfhB,IAAA,CAAA,GAAA,MAAA,IAAA,UAAA;AAAA;MAmBc,SAAQ,YADhBP,aAAAC,mBAQM,OARNK,WAQM;AAAA,QA1BZ,KAAA;AAAA,QAoBS,QAAQ,KAAU,YAAA,oCAAA;AAAA,SACX,KAAe,iBAAA,EACvB,WAAQ,iBAAgB,CAAA,GAAA;AAAA,QAGxBE,WAAwB,4BAAxB,MAAwB;AAAA,UAzBhCC,gBAAAC,gBAyBiB,KAAK,KAAA,GAAA,CAAA;AAAA;gBAzBtBC,mBAAA,IAAA,IAAA;AAAA;IA6BY,SAAwB,4BADhCX,aAAAC,mBAuBM,OAvBN,YAuBM;AAAA,MAjBI,SAAc,kBADtBD,aAAAC,mBAUM,OAVNK,WAUM;AAAA,QA3CZ,KAAA;AAAA,QAmCS,yBAAyB,KAAgB,gBAAA;AAAA,SAClC,KAAqB,uBAAA,EAC7B,WAAQ,uBAAsB,CAAA,GAAA;AAAA,QAG9BE,WAEO,gCAFP,MAEO;AAAA,UA1CfC,gBAAAC,gBAyCa,KAAW,WAAA,GAAA,CAAA;AAAA;gBAzCxBC,mBAAA,IAAA,IAAA;AAAA,MA4CMC,YAME,mCANFN,WAME;AAAA,QALC,uBAAqB,KAAiB;AAAA,QACtC,iBAAe,KAAY;AAAA,QAC3B,OAAO,KAAa;AAAA,SACb,KAAkB,oBAAA,EAC1B,WAAQ,kCAAiC,CAAA,GAAA,MAAA,IAAA,CAAA,uBAAA,iBAAA,OAAA,CAAA;AAAA,UAjDjDK,mBAAA,IAAA,IAAA;AAAA;;;"}
|
|
@@ -84,6 +84,15 @@ const _sfc_main = {
|
|
|
84
84
|
focusout: (event) => this.$emit("focusout", event),
|
|
85
85
|
change: (event) => this.emitValue(event.target.value)
|
|
86
86
|
};
|
|
87
|
+
},
|
|
88
|
+
hasDescription() {
|
|
89
|
+
return !!(this.$slots.description || this.description);
|
|
90
|
+
},
|
|
91
|
+
hasDescriptionOrMessages() {
|
|
92
|
+
return this.hasDescription || this.hasMessages;
|
|
93
|
+
},
|
|
94
|
+
hasMessages() {
|
|
95
|
+
return this.formattedMessages.length && this.showMessages;
|
|
87
96
|
}
|
|
88
97
|
},
|
|
89
98
|
watch: {
|
|
@@ -110,48 +119,49 @@ const _sfc_main = {
|
|
|
110
119
|
const _hoisted_1 = { class: "d-radio__input" };
|
|
111
120
|
const _hoisted_2 = ["checked", "name", "value", "disabled"];
|
|
112
121
|
const _hoisted_3 = {
|
|
113
|
-
|
|
114
|
-
|
|
122
|
+
key: 0,
|
|
123
|
+
class: "d-radio__messages",
|
|
124
|
+
"data-qa": "radio-description-messages"
|
|
115
125
|
};
|
|
116
126
|
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
117
127
|
const _component_dt_validation_messages = vue.resolveComponent("dt-validation-messages");
|
|
118
128
|
return vue.openBlock(), vue.createElementBlock("div", vue.normalizeProps(vue.guardReactiveProps($options.addClassStyleAttrs(_ctx.$attrs))), [
|
|
119
|
-
vue.createElementVNode("label",
|
|
120
|
-
vue.
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
vue.createElementVNode("
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
vue.createVNode(_component_dt_validation_messages, vue.mergeProps({
|
|
148
|
-
"validation-messages": _ctx.formattedMessages,
|
|
149
|
-
"show-messages": _ctx.showMessages,
|
|
150
|
-
class: _ctx.messagesClass
|
|
151
|
-
}, _ctx.messagesChildProps, { "data-qa": "dt-radio-validation-messages" }), null, 16, ["validation-messages", "show-messages", "class"])
|
|
129
|
+
vue.createElementVNode("label", {
|
|
130
|
+
class: vue.normalizeClass(["d-radio-group", { "d-radio-group--disabled": _ctx.internalDisabled }])
|
|
131
|
+
}, [
|
|
132
|
+
vue.createElementVNode("div", _hoisted_1, [
|
|
133
|
+
vue.createElementVNode("input", vue.mergeProps({
|
|
134
|
+
checked: _ctx.internalChecked,
|
|
135
|
+
name: _ctx.internalName,
|
|
136
|
+
value: $props.value,
|
|
137
|
+
disabled: _ctx.internalDisabled,
|
|
138
|
+
type: "radio",
|
|
139
|
+
class: ["d-radio", $options.inputValidationClass, _ctx.inputClass]
|
|
140
|
+
}, $options.removeClassStyleAttrs(_ctx.$attrs), vue.toHandlers($options.inputListeners, true)), null, 16, _hoisted_2)
|
|
141
|
+
]),
|
|
142
|
+
vue.createElementVNode("div", vue.mergeProps({
|
|
143
|
+
class: [_ctx.labelClass, "d-radio__copy d-radio__label"]
|
|
144
|
+
}, _ctx.labelChildProps, { "data-qa": "radio-label" }), [
|
|
145
|
+
vue.renderSlot(_ctx.$slots, "default", {}, () => [
|
|
146
|
+
vue.createTextVNode(vue.toDisplayString(_ctx.label), 1)
|
|
147
|
+
])
|
|
148
|
+
], 16)
|
|
149
|
+
], 2),
|
|
150
|
+
$options.hasDescriptionOrMessages ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
|
|
151
|
+
$options.hasDescription ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
|
|
152
|
+
key: 0,
|
|
153
|
+
class: ["d-description", _ctx.descriptionClass]
|
|
154
|
+
}, _ctx.descriptionChildProps, { "data-qa": "radio-description" }), [
|
|
155
|
+
vue.renderSlot(_ctx.$slots, "description", {}, () => [
|
|
156
|
+
vue.createTextVNode(vue.toDisplayString(_ctx.description), 1)
|
|
152
157
|
])
|
|
153
|
-
],
|
|
154
|
-
|
|
158
|
+
], 16)) : vue.createCommentVNode("", true),
|
|
159
|
+
vue.createVNode(_component_dt_validation_messages, vue.mergeProps({
|
|
160
|
+
"validation-messages": _ctx.formattedMessages,
|
|
161
|
+
"show-messages": _ctx.showMessages,
|
|
162
|
+
class: _ctx.messagesClass
|
|
163
|
+
}, _ctx.messagesChildProps, { "data-qa": "dt-radio-validation-messages" }), null, 16, ["validation-messages", "show-messages", "class"])
|
|
164
|
+
])) : vue.createCommentVNode("", true)
|
|
155
165
|
], 16);
|
|
156
166
|
}
|
|
157
167
|
const radio = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio.vue.cjs","sources":["../../../components/radio/radio.vue"],"sourcesContent":["<template>\n <div\n v-bind=\"addClassStyleAttrs($attrs)\"\n >\n <label
|
|
1
|
+
{"version":3,"file":"radio.vue.cjs","sources":["../../../components/radio/radio.vue"],"sourcesContent":["<template>\n <div\n v-bind=\"addClassStyleAttrs($attrs)\"\n >\n <label :class=\"['d-radio-group', { 'd-radio-group--disabled': internalDisabled }]\">\n <div class=\"d-radio__input\">\n <input\n :checked=\"internalChecked\"\n :name=\"internalName\"\n :value=\"value\"\n :disabled=\"internalDisabled\"\n type=\"radio\"\n :class=\"['d-radio', inputValidationClass, inputClass]\"\n v-bind=\"removeClassStyleAttrs($attrs)\"\n v-on=\"inputListeners\"\n >\n </div>\n <div\n :class=\"[labelClass, 'd-radio__copy d-radio__label']\"\n v-bind=\"labelChildProps\"\n data-qa=\"radio-label\"\n >\n <!-- @slot slot for Radio Label -->\n <slot>{{ label }}</slot>\n </div>\n </label>\n <div\n v-if=\"hasDescriptionOrMessages\"\n class=\"d-radio__messages\"\n data-qa=\"radio-description-messages\"\n >\n <div\n v-if=\"hasDescription\"\n :class=\"['d-description', descriptionClass]\"\n v-bind=\"descriptionChildProps\"\n data-qa=\"radio-description\"\n >\n <!-- @slot slot for Radio Description -->\n <slot name=\"description\">\n {{ description }}\n </slot>\n </div>\n <dt-validation-messages\n :validation-messages=\"formattedMessages\"\n :show-messages=\"showMessages\"\n :class=\"messagesClass\"\n v-bind=\"messagesChildProps\"\n data-qa=\"dt-radio-validation-messages\"\n />\n </div>\n </div>\n</template>\n\n<script>\nimport {\n InputMixin,\n CheckableMixin,\n GroupableMixin,\n MessagesMixin,\n} from '@/common/mixins/input';\nimport { RADIO_INPUT_VALIDATION_CLASSES } from './radio_constants';\nimport { DtValidationMessages } from '../validation_messages';\nimport { hasSlotContent, removeClassStyleAttrs, addClassStyleAttrs } from '@/common/utils';\n\n/**\n * Radios are control elements that allow the user to make a single selection.\n * They are typically used in a Radio Group which allows the user to make a selection from a list of options.\n * @see https://dialtone.dialpad.com/components/radio.html\n */\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtRadio',\n\n components: { DtValidationMessages },\n\n mixins: [InputMixin, CheckableMixin, GroupableMixin, MessagesMixin],\n\n inheritAttrs: false,\n\n props: {\n /**\n * A provided value for the radio\n */\n value: {\n type: [String, Number],\n default: '',\n },\n },\n\n emits: [\n /**\n * Native input event\n *\n * @event input\n * @type {String | Number}\n */\n 'input',\n\n /**\n * Native input focus event\n *\n * @event focus\n * @type {FocusEvent}\n */\n 'focus',\n\n /**\n * Native input focusin event\n *\n * @event focusin\n * @property {FocusEvent}\n */\n 'focusin',\n\n /**\n * Native input focusout event\n *\n * @event focusout\n * @property {FocusEvent}\n */\n 'focusout',\n\n /**\n * Native click event\n *\n * @event click\n * @type {PointerEvent | KeyboardEvent}\n */\n 'click',\n ],\n\n data () {\n return {\n hasSlotContent,\n };\n },\n\n computed: {\n inputValidationClass () {\n return RADIO_INPUT_VALIDATION_CLASSES[this.internalValidationState];\n },\n\n radioGroupValue () {\n return this.groupContext?.selectedValue;\n },\n\n inputListeners () {\n return {\n /*\n * Override input listener to as no-op. Prevents parent input listeners from being passed through onto the input\n * element which will result in the handler being called twice\n * (once on the input element and once by the emitted input event by the change listener).\n */\n input: () => {},\n focusin: event => this.$emit('focusin', event),\n focusout: event => this.$emit('focusout', event),\n change: event => this.emitValue(event.target.value),\n };\n },\n\n hasDescription () {\n return !!(this.$slots.description || this.description);\n },\n\n hasDescriptionOrMessages () {\n return this.hasDescription || this.hasMessages;\n },\n\n hasMessages () {\n return this.formattedMessages.length && this.showMessages;\n },\n },\n\n watch: {\n radioGroupValue: {\n immediate: true,\n handler (newRadioGroupValue) {\n if (this.hasGroup) {\n // update internal value when the radio group value changes\n this.internalChecked = newRadioGroupValue === this.value;\n }\n },\n },\n },\n\n methods: {\n removeClassStyleAttrs,\n addClassStyleAttrs,\n emitValue (value) {\n if (value !== this.radioGroupValue) {\n // update provided value if injected\n this.setGroupValue(value);\n\n this.$emit('input', value);\n }\n },\n },\n};\n</script>\n"],"names":["DtValidationMessages","InputMixin","CheckableMixin","GroupableMixin","MessagesMixin","hasSlotContent","RADIO_INPUT_VALIDATION_CLASSES","removeClassStyleAttrs","addClassStyleAttrs","_openBlock","_createElementBlock","_normalizeProps","_guardReactiveProps","_createElementVNode","_normalizeClass","_mergeProps","_toHandlers","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode","_createVNode"],"mappings":"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"}
|
|
@@ -82,6 +82,15 @@ const _sfc_main = {
|
|
|
82
82
|
focusout: (event) => this.$emit("focusout", event),
|
|
83
83
|
change: (event) => this.emitValue(event.target.value)
|
|
84
84
|
};
|
|
85
|
+
},
|
|
86
|
+
hasDescription() {
|
|
87
|
+
return !!(this.$slots.description || this.description);
|
|
88
|
+
},
|
|
89
|
+
hasDescriptionOrMessages() {
|
|
90
|
+
return this.hasDescription || this.hasMessages;
|
|
91
|
+
},
|
|
92
|
+
hasMessages() {
|
|
93
|
+
return this.formattedMessages.length && this.showMessages;
|
|
85
94
|
}
|
|
86
95
|
},
|
|
87
96
|
watch: {
|
|
@@ -108,48 +117,49 @@ const _sfc_main = {
|
|
|
108
117
|
const _hoisted_1 = { class: "d-radio__input" };
|
|
109
118
|
const _hoisted_2 = ["checked", "name", "value", "disabled"];
|
|
110
119
|
const _hoisted_3 = {
|
|
111
|
-
|
|
112
|
-
|
|
120
|
+
key: 0,
|
|
121
|
+
class: "d-radio__messages",
|
|
122
|
+
"data-qa": "radio-description-messages"
|
|
113
123
|
};
|
|
114
124
|
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
115
125
|
const _component_dt_validation_messages = resolveComponent("dt-validation-messages");
|
|
116
126
|
return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps($options.addClassStyleAttrs(_ctx.$attrs))), [
|
|
117
|
-
createElementVNode("label",
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
createElementVNode("
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
createVNode(_component_dt_validation_messages, mergeProps({
|
|
146
|
-
"validation-messages": _ctx.formattedMessages,
|
|
147
|
-
"show-messages": _ctx.showMessages,
|
|
148
|
-
class: _ctx.messagesClass
|
|
149
|
-
}, _ctx.messagesChildProps, { "data-qa": "dt-radio-validation-messages" }), null, 16, ["validation-messages", "show-messages", "class"])
|
|
127
|
+
createElementVNode("label", {
|
|
128
|
+
class: normalizeClass(["d-radio-group", { "d-radio-group--disabled": _ctx.internalDisabled }])
|
|
129
|
+
}, [
|
|
130
|
+
createElementVNode("div", _hoisted_1, [
|
|
131
|
+
createElementVNode("input", mergeProps({
|
|
132
|
+
checked: _ctx.internalChecked,
|
|
133
|
+
name: _ctx.internalName,
|
|
134
|
+
value: $props.value,
|
|
135
|
+
disabled: _ctx.internalDisabled,
|
|
136
|
+
type: "radio",
|
|
137
|
+
class: ["d-radio", $options.inputValidationClass, _ctx.inputClass]
|
|
138
|
+
}, $options.removeClassStyleAttrs(_ctx.$attrs), toHandlers($options.inputListeners, true)), null, 16, _hoisted_2)
|
|
139
|
+
]),
|
|
140
|
+
createElementVNode("div", mergeProps({
|
|
141
|
+
class: [_ctx.labelClass, "d-radio__copy d-radio__label"]
|
|
142
|
+
}, _ctx.labelChildProps, { "data-qa": "radio-label" }), [
|
|
143
|
+
renderSlot(_ctx.$slots, "default", {}, () => [
|
|
144
|
+
createTextVNode(toDisplayString(_ctx.label), 1)
|
|
145
|
+
])
|
|
146
|
+
], 16)
|
|
147
|
+
], 2),
|
|
148
|
+
$options.hasDescriptionOrMessages ? (openBlock(), createElementBlock("div", _hoisted_3, [
|
|
149
|
+
$options.hasDescription ? (openBlock(), createElementBlock("div", mergeProps({
|
|
150
|
+
key: 0,
|
|
151
|
+
class: ["d-description", _ctx.descriptionClass]
|
|
152
|
+
}, _ctx.descriptionChildProps, { "data-qa": "radio-description" }), [
|
|
153
|
+
renderSlot(_ctx.$slots, "description", {}, () => [
|
|
154
|
+
createTextVNode(toDisplayString(_ctx.description), 1)
|
|
150
155
|
])
|
|
151
|
-
],
|
|
152
|
-
|
|
156
|
+
], 16)) : createCommentVNode("", true),
|
|
157
|
+
createVNode(_component_dt_validation_messages, mergeProps({
|
|
158
|
+
"validation-messages": _ctx.formattedMessages,
|
|
159
|
+
"show-messages": _ctx.showMessages,
|
|
160
|
+
class: _ctx.messagesClass
|
|
161
|
+
}, _ctx.messagesChildProps, { "data-qa": "dt-radio-validation-messages" }), null, 16, ["validation-messages", "show-messages", "class"])
|
|
162
|
+
])) : createCommentVNode("", true)
|
|
153
163
|
], 16);
|
|
154
164
|
}
|
|
155
165
|
const radio = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
|