implement addClassStyleAttrs on roots

braddialpad · braddialpad · commit 0e3ff595a445 · 2025-04-03T11:58:55.000-07:00
diff --git a/packages/dialtone-vue3/common/utils/index.js b/packages/dialtone-vue3/common/utils/index.js
@@ -222,7 +222,7 @@ export const returnFirstEl = (el) => {
   }
 };
 
-/*
+/**
   Only will apply changes if the config option configVue2StyleClassAttrs is set to true. It is false by default.
 
   Removes the class and style attributes from the $attrs. This is useful for vue 2 to vue 3 migration
@@ -242,6 +242,19 @@ export function removeClassStyleAttrs (attrs) {
   return Object.fromEntries(listeners);
 }
 
+/**
+  This should be applied to the root element on components using inheritAttrs: false.
+  This will add the class and style attributes back to the root element if configVue2StyleClassAttrs
+  is enabled.
+*/
+export function addClassStyleAttrs (attrs) {
+  if (!configVue2StyleClassAttrs) return {};
+  return {
+    class: attrs.class,
+    style: attrs.style,
+  };
+}
+
 /*
 * Set's a global timer to debounce the execution of a function.
 * @param { object } func - the function that is going to be called after timeout
@@ -497,6 +510,7 @@ export default {
   kebabCaseToPascalCase,
   extractVueListeners,
   removeClassStyleAttrs,
+  addClassStyleAttrs,
   returnFirstEl,
   debounce,
   isOutOfViewPort,
diff --git a/packages/dialtone-vue3/components/breadcrumbs/breadcrumb_item.vue b/packages/dialtone-vue3/components/breadcrumbs/breadcrumb_item.vue
@@ -2,11 +2,10 @@
   <li
     data-qa="dt-breadcrumb-item"
     :class="[
-      $attrs.class,
       'd-breadcrumbs__item',
       { [BREADCRUMB_ITEM_SELECTED_MODIFIER]: selected },
     ]"
-    :style="$attrs.style"
+    v-bind="addClassStyleAttrs($attrs)"
   >
     <dt-link
       :kind="linkKind"
@@ -25,7 +24,7 @@
 
 <script>
 import { BREADCRUMB_ITEM_SELECTED_MODIFIER } from './breadcrumbs_constants';
-import { removeClassStyleAttrs } from '@/common/utils';
+import { removeClassStyleAttrs, addClassStyleAttrs } from '@/common/utils';
 import { DtLink } from '../link';
 import { MUTED } from '../link/link_constants';
 
@@ -87,6 +86,7 @@ export default {
 
   methods: {
     removeClassStyleAttrs,
+    addClassStyleAttrs,
   },
 };
 </script>
diff --git a/packages/dialtone-vue3/components/checkbox/checkbox.vue b/packages/dialtone-vue3/components/checkbox/checkbox.vue
@@ -1,7 +1,6 @@
 <template>
   <div
-    :class="$attrs.class"
-    :style="$attrs.style"
+    v-bind="addClassStyleAttrs($attrs)"
   >
     <label>
       <div :class="['d-checkbox-group', { 'd-checkbox-group--disabled': internalDisabled }]">
@@ -62,7 +61,7 @@ import {
   GroupableMixin,
   MessagesMixin,
 } from '@/common/mixins/input';
-import { removeClassStyleAttrs } from '@/common/utils';
+import { removeClassStyleAttrs, addClassStyleAttrs } from '@/common/utils';
 import { CHECKBOX_INPUT_VALIDATION_CLASSES } from './checkbox_constants';
 import { DtValidationMessages } from '../validation_messages';
 
@@ -161,6 +160,7 @@ export default {
 
   methods: {
     removeClassStyleAttrs,
+    addClassStyleAttrs,
 
     emitValue (target) {
       let { value, checked } = target;
diff --git a/packages/dialtone-vue3/components/input/input.vue b/packages/dialtone-vue3/components/input/input.vue
@@ -1,8 +1,8 @@
 <template>
   <div
     ref="container"
-    :class="[$attrs.class, 'd-input__root', { 'd-input--hidden': hidden }]"
-    :style="$attrs.style"
+    :class="['d-input__root', { 'd-input--hidden': hidden }]"
+    v-bind="addClassStyleAttrs($attrs)"
     data-qa="dt-input"
   >
     <label
@@ -133,6 +133,7 @@ import {
   getValidationState,
   hasSlotContent,
   removeClassStyleAttrs,
+  addClassStyleAttrs,
 } from '@/common/utils';
 import { DtValidationMessages } from '@/components/validation_messages';
 import { MessagesMixin } from '@/common/mixins/input';
@@ -534,6 +535,7 @@ export default {
 
   methods: {
     removeClassStyleAttrs,
+    addClassStyleAttrs,
     inputClasses () {
       return [
         'd-input__input',
diff --git a/packages/dialtone-vue3/components/radio/radio.vue b/packages/dialtone-vue3/components/radio/radio.vue
@@ -1,7 +1,6 @@
 <template>
   <div
-    :class="$attrs.class"
-    :style="$attrs.style"
+    v-bind="addClassStyleAttrs($attrs)"
   >
     <label>
       <div :class="['d-radio-group', { 'd-radio-group--disabled': internalDisabled }]">
@@ -60,7 +59,7 @@ import {
 } from '@/common/mixins/input';
 import { RADIO_INPUT_VALIDATION_CLASSES } from './radio_constants';
 import { DtValidationMessages } from '../validation_messages';
-import { hasSlotContent, removeClassStyleAttrs } from '@/common/utils';
+import { hasSlotContent, removeClassStyleAttrs, addClassStyleAttrs } from '@/common/utils';
 
 /**
  * Radios are control elements that allow the user to make a single selection.
@@ -173,6 +172,7 @@ export default {
 
   methods: {
     removeClassStyleAttrs,
+    addClassStyleAttrs,
     emitValue (value) {
       if (value !== this.radioGroupValue) {
         // update provided value if injected
diff --git a/packages/dialtone-vue3/components/select_menu/select_menu.vue b/packages/dialtone-vue3/components/select_menu/select_menu.vue
@@ -1,7 +1,6 @@
 <template>
   <div
-    :class="$attrs.class"
-    :style="$attrs.style"
+    v-bind="addClassStyleAttrs($attrs)"
   >
     <label>
       <div
@@ -92,6 +91,7 @@ import {
   getValidationState,
   hasSlotContent,
   removeClassStyleAttrs,
+  addClassStyleAttrs,
 } from '@/common/utils';
 import { MessagesMixin } from '@/common/mixins/input';
 import { optionsValidator } from './select_menu_validators.js';
@@ -303,6 +303,7 @@ export default {
 
   methods: {
     removeClassStyleAttrs,
+    addClassStyleAttrs,
     emitValue (value, event) {
       this.$emit('input', value, event);
       this.$emit('change', value, event);
diff --git a/packages/dialtone-vue3/components/toggle/toggle.vue b/packages/dialtone-vue3/components/toggle/toggle.vue
@@ -1,8 +1,7 @@
 <template>
   <div
     class="d-toggle-wrapper"
-    :class="$attrs.class"
-    :style="$attrs.style"
+    v-bind="addClassStyleAttrs($attrs)"
   >
     <label
       v-if="hasSlotContent($slots.default)"
@@ -34,7 +33,7 @@
 
 <script>
 import { warn } from 'vue';
-import { getUniqueString, hasSlotContent, removeClassStyleAttrs } from '@/common/utils';
+import { getUniqueString, hasSlotContent, removeClassStyleAttrs, addClassStyleAttrs } from '@/common/utils';
 import { TOGGLE_CHECKED_VALUES, TOGGLE_SIZE_MODIFIERS } from '@/components/toggle/toggle_constants';
 
 /**
@@ -187,6 +186,7 @@ export default {
   },
 
   methods: {
+    addClassStyleAttrs,
     toggleCheckedValue () {
       this.$emit('change', !this.internalChecked);
 
diff --git a/packages/dialtone-vue3/recipes/buttons/callbar_button/callbar_button.vue b/packages/dialtone-vue3/recipes/buttons/callbar_button/callbar_button.vue
@@ -2,8 +2,7 @@
   <dt-tooltip
     :id="id"
     :inverted="invertedTooltip"
-    :class="$attrs.class"
-    :style="$attrs.style"
+    v-bind="addClassStyleAttrs($attrs)"
     :delay="tooltipDelay"
     :show="showTooltip"
     :offset="[0, 24]"
@@ -41,7 +40,7 @@
 import { CALLBAR_BUTTON_VALID_WIDTH_SIZE } from './callbar_button_constants';
 import { DtButton } from '@/components/button';
 import { DtTooltip } from '@/components/tooltip';
-import utils, { extractVueListeners, removeClassStyleAttrs } from '@/common/utils';
+import utils, { extractVueListeners, removeClassStyleAttrs, addClassStyleAttrs } from '@/common/utils';
 
 export default {
   compatConfig: { MODE: 3 },
@@ -244,6 +243,7 @@ export default {
 
   methods: {
     removeClassStyleAttrs,
+    addClassStyleAttrs,
   },
 };
 </script>
diff --git a/packages/dialtone-vue3/recipes/buttons/callbar_button_with_dropdown/callbar_button_with_dropdown.vue b/packages/dialtone-vue3/recipes/buttons/callbar_button_with_dropdown/callbar_button_with_dropdown.vue
@@ -1,7 +1,7 @@
 <template>
   <div
-    :class="['dt-recipe--callbar-button-with-dropdown', $attrs.class]"
-    :style="$attrs.style"
+    class="dt-recipe--callbar-button-with-dropdown"
+    v-bind="addClassStyleAttrs($attrs)"
   >
     <dt-recipe-callbar-button
       :active="active"
@@ -72,7 +72,7 @@ import { DtButton } from '@/components/button';
 import { DtDropdown } from '@/components/dropdown';
 import { DtIconChevronUp } from '@dialpad/dialtone-icons/vue3';
 import { DtRecipeCallbarButton, CALLBAR_BUTTON_VALID_WIDTH_SIZE } from '../callbar_button';
-import utils, { warnIfUnmounted, removeClassStyleAttrs, returnFirstEl } from '@/common/utils';
+import utils, { warnIfUnmounted, removeClassStyleAttrs, addClassStyleAttrs, returnFirstEl } from '@/common/utils';
 
 export default {
   name: 'DtRecipeCallbarButtonWithDropdown',
@@ -317,6 +317,7 @@ export default {
 
   methods: {
     removeClassStyleAttrs,
+    addClassStyleAttrs,
     arrowClick (ev) {
       this.$emit('arrow-click', ev);
       return this.toggleOpen();
diff --git a/packages/dialtone-vue3/recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue b/packages/dialtone-vue3/recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue
@@ -1,7 +1,7 @@
 <template>
   <div
-    :class="['d-recipe-callbar-button-with-popover', $attrs.class]"
-    :style="$attrs.style"
+    class="d-recipe-callbar-button-with-popover"
+    v-bind="addClassStyleAttrs($attrs)"
   >
     <dt-recipe-callbar-button
       :aria-label="ariaLabel"
@@ -80,7 +80,7 @@ import { DtButton } from '@/components/button';
 import { DtPopover } from '@/components/popover';
 import { DtIconChevronUp } from '@dialpad/dialtone-icons/vue3';
 import { DtRecipeCallbarButton, CALLBAR_BUTTON_VALID_WIDTH_SIZE } from '../callbar_button';
-import utils, { warnIfUnmounted, removeClassStyleAttrs, returnFirstEl } from '@/common/utils';
+import utils, { warnIfUnmounted, removeClassStyleAttrs, addClassStyleAttrs, returnFirstEl } from '@/common/utils';
 
 export default {
   compatConfig: { MODE: 3 },
@@ -361,6 +361,7 @@ export default {
 
   methods: {
     removeClassStyleAttrs,
+    addClassStyleAttrs,
     arrowClick (ev) {
       this.$emit('arrow-click', ev);
       return this.toggleOpen();
diff --git a/packages/dialtone-vue3/recipes/conversation_view/editor/editor.vue b/packages/dialtone-vue3/recipes/conversation_view/editor/editor.vue
@@ -1,7 +1,7 @@
 <template>
   <div
-    :class="['d-recipe-editor', $attrs.class]"
-    :style="$attrs.style"
+    class="d-recipe-editor"
+    v-bind="addClassStyleAttrs($attrs)"
     data-qa="dt-recipe-editor"
     role="presentation"
     @click="$refs.richTextEditor.focusEditor()"
@@ -190,7 +190,7 @@ import {
   EDITOR_SUPPORTED_LINK_PROTOCOLS,
   EDITOR_DEFAULT_LINK_PREFIX,
 } from './editor_constants.js';
-import { removeClassStyleAttrs } from '@/common/utils';
+import { removeClassStyleAttrs, addClassStyleAttrs } from '@/common/utils';
 import { DtButton } from '@/components/button';
 import { DtPopover } from '@/components/popover';
 import { DtStack } from '@/components/stack';
@@ -707,6 +707,7 @@ export default {
 
   methods: {
     removeClassStyleAttrs,
+    addClassStyleAttrs,
 
     onInputFocus (event) {
       event?.stopPropagation();
diff --git a/packages/dialtone-vue3/recipes/conversation_view/message_input/message_input.vue b/packages/dialtone-vue3/recipes/conversation_view/message_input/message_input.vue
@@ -3,8 +3,8 @@
   <div
     data-qa="dt-recipe-message-input"
     role="presentation"
-    :class="['d-recipe-message-input', $attrs.class]"
-    :style="$attrs.style"
+    class="d-recipe-message-input"
+    v-bind="addClassStyleAttrs($attrs)"
     @dragover.prevent
     @drop.prevent="onDrop"
     @paste="onPaste"
@@ -266,7 +266,7 @@ import {
   RICH_TEXT_EDITOR_AUTOFOCUS_TYPES,
 } from '@/components/rich_text_editor';
 import lastActiveNodes from './last_active_nodes';
-import { removeClassStyleAttrs, returnFirstEl } from '@/common/utils';
+import { removeClassStyleAttrs, returnFirstEl, addClassStyleAttrs } from '@/common/utils';
 import MeetingPill from './extensions/meeting_pill/meeting_pill';
 import { DtButton } from '@/components/button';
 import { DtEmojiPicker } from '@/components/emoji_picker';
@@ -875,6 +875,7 @@ export default {
 
   methods: {
     removeClassStyleAttrs,
+    addClassStyleAttrs,
 
     linkDialogOpened (value) {
       this.linkDialogOpen = value;
diff --git a/packages/dialtone-vue3/recipes/leftbar/contact_centers_row/contact_centers_row.vue b/packages/dialtone-vue3/recipes/leftbar/contact_centers_row/contact_centers_row.vue
@@ -1,11 +1,10 @@
 <template>
   <div
     :class="[
-      $attrs.class,
       'd-recipe-leftbar-row__container',
       { 'd-recipe-leftbar-row__container--off-duty': $slots.timer },
     ]"
-    :style="$attrs.style"
+    v-bind="addClassStyleAttrs($attrs)"
   >
     <div
       :class="leftbarContactCentersRowClasses"
@@ -78,7 +77,7 @@
 </template>
 
 <script>
-import { extractVueListeners, safeConcatStrings, removeClassStyleAttrs, returnFirstEl } from '@/common/utils';
+import { extractVueListeners, safeConcatStrings, removeClassStyleAttrs, returnFirstEl, addClassStyleAttrs } from '@/common/utils';
 import { DtBadge } from '@/components/badge';
 import { DtButton } from '@/components/button';
 import DtEmojiTextWrapper from '@/components/emoji_text_wrapper/emoji_text_wrapper.vue';
@@ -222,6 +221,7 @@ export default {
 
   methods: {
     removeClassStyleAttrs,
+    addClassStyleAttrs,
 
     adjustLabelWidth () {
       const labelWidth = returnFirstEl(this.$el)?.querySelector('.d-recipe-leftbar-row__primary')?.clientWidth || 0;
diff --git a/packages/dialtone-vue3/recipes/leftbar/general_row/general_row.vue b/packages/dialtone-vue3/recipes/leftbar/general_row/general_row.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     :class="leftbarGeneralRowClasses"
-    :style="$attrs.style"
+    v-bind="addClassStyleAttrs($attrs)"
     data-qa="dt-recipe-leftbar-row"
   >
     <a
@@ -156,7 +156,7 @@ import { DtButton } from '@/components/button';
 import { DtTooltip } from '@/components/tooltip';
 import DtEmojiTextWrapper from '@/components/emoji_text_wrapper/emoji_text_wrapper.vue';
 import DtRecipeLeftbarGeneralRowIcon from './leftbar_general_row_icon.vue';
-import { extractVueListeners, safeConcatStrings, removeClassStyleAttrs, returnFirstEl } from '@/common/utils';
+import { extractVueListeners, safeConcatStrings, removeClassStyleAttrs, returnFirstEl, addClassStyleAttrs } from '@/common/utils';
 
 export default {
   compatConfig: { MODE: 3 },
@@ -355,7 +355,6 @@ export default {
     leftbarGeneralRowClasses () {
       return [
         'd-recipe-leftbar-row',
-        this.$attrs.class,
         {
           'd-recipe-leftbar-row--no-action': !this.hasCallButton,
           'd-recipe-leftbar-row--has-unread': this.hasUnreads,
@@ -448,6 +447,7 @@ export default {
 
   methods: {
     removeClassStyleAttrs,
+    addClassStyleAttrs,
 
     validateProps () {
       if (this.type === LEFTBAR_GENERAL_ROW_TYPES.CONTACT_CENTER &&
