Save dx component classes when using a custom class attribute (T12437…

…35) (#27824)
DevExpress · Jul 24, 2024 · 6e6d675 · 6e6d675
1 parent b39be42
commit 6e6d675
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 4 deletions.
diff --git a/packages/devextreme-vue/src/core/__tests__/textbox.test.ts b/packages/devextreme-vue/src/core/__tests__/textbox.test.ts
@@ -58,4 +58,28 @@ describe('two-way binding', () => {
       expect(component.$_config.updateValue).toBeCalled();
     });
   });
+
+  it('dxClass should be set when class attr ', async () => {
+    expect.assertions(1);
+    const vm = defineComponent({
+      template:
+                `<dx-text-box id="component" :class="customClass"></dx-text-box>
+                `,
+      components: {
+        DxTextBox,
+      },
+      props: {
+        customClass: {
+          type: String,
+          default: 'custom1',
+        },
+      },
+    });
+    const wrapper = mount(vm);
+    const component = wrapper.getComponent('#component');
+    await wrapper.setProps({ customClass: 'custom2' });
+    await nextTick(() => {
+      expect(component.element.classList.toString()).toBe('custom2 dx-show-invalid-badge dx-textbox dx-texteditor dx-editor-outlined dx-texteditor-empty dx-widget');
+    });
+  });
 });
diff --git a/packages/devextreme-vue/src/core/component.ts b/packages/devextreme-vue/src/core/component.ts
@@ -49,12 +49,12 @@ config({
   buyNowLink: 'https://go.devexpress.com/Licensing_Installer_Watermark_DevExtremeVue.aspx',
 });
 
-function getAttrs(attrs) {
+function getAttrs(attrs, dxClasses: string[]) {
   const attributes = {};
   includeAttrs.forEach((attr) => {
     const attrValue = attrs[attr];
     if (attrValue) {
-      attributes[attr] = attrValue;
+      attributes[attr] = attr === 'class' && dxClasses.length ? `${attrValue} ${dxClasses.join(' ')}` : attrValue;
     }
   });
 
@@ -80,6 +80,7 @@ function initBaseComponent() {
     render(): VNode {
       const thisComponent = this as any as IBaseComponent;
       const children: VNode[] = [];
+      const dxClasses = pickOutDxClasses(this.$el) || [];
       if (thisComponent.$_config.cleanNested) {
         thisComponent.$_config.cleanNested();
       }
@@ -89,7 +90,7 @@ function initBaseComponent() {
       return h(
         'div',
         {
-          ...getAttrs(this.$attrs),
+          ...getAttrs(this.$attrs, dxClasses),
         },
         children,
       );
@@ -145,6 +146,7 @@ function initBaseComponent() {
     beforeUnmount(): void {
       const thisComponent = this as any as IBaseComponent;
       const instance = thisComponent.$_instance;
+
       if (instance) {
         triggerHandler(this.$el, DX_REMOVE_EVENT);
         instance.dispose();
@@ -296,6 +298,10 @@ function cleanWidgetNode(node: Node) {
   return removedNodes;
 }
 
+function pickOutDxClasses(el: Element) {
+  return el && Array.from(el.classList).filter((item: string) => item.startsWith('dx-'));
+}
+
 function restoreNodes(el: Element, nodes: Element[]) {
   nodes.forEach((node) => {
     el.appendChild(node);
@@ -329,8 +335,8 @@ function initDxComponent() {
 
       this.$_createWidget(this.$el);
       thisComponent.$_instance.endUpdate();
-
       restoreNodes(this.$el, nodes);
+
       if (this.$slots && this.$slots.default) {
         getChildren(thisComponent).forEach((child: VNode) => {
           const childExtenton = child as any as IExtension;