Repository: rrd108/vue-mess-detector (ts)

Issue:
Allow single-line formatting for class attribute with multiple values
**Describe the bug**
The linter rule requires multi-line formatting for elements with only a single attribute, specifically when it comes to the class attribute that can contain multiple classes

**To Reproduce**
Steps to reproduce the behavior:

1. What is the exact code you are analyzing?
```
<UDashboardPanelContent class="p-2 gap-6">
....
</UDashboardPanelContent>
```

2. What is the output you are getting?
```
  Element <UDashboardPanelContent> should have its attributes on separate lines 🚨
```

**Expected behavior**
I expected the linter to allow single-line formatting when there is a class attribute with multiple classes

**Used version number of vue-mess-detector:**
^0.62.0

**Used version number of node & yarn:**
pnpm@9.12.1


Pull request:
fix(multiAttributeElements): allow single-line formatting for class attribute with multiple classes
### Summary
<!-- Provide a general summary of your changes in the title above -->
Allow single-line formatting for class attributes containing multiple classes.

### Description
<!-- Describe your changes in detail -->

### Related Issues
<!-- List any related issues or pull requests, using the format `Fixes #issue_number` -->
Fixes #396

### Type of Change
<!-- Please select the options that best describe your changes -->
- [x] Bug fix (non-breaking change which fixes an issue)

### Screenshots (if applicable)
<!-- Add screenshots to help expalin the changes -->


Patch:
diff --git a/src/rules/vue-strong/multiAttributeElements.ts b/src/rules/vue-strong/multiAttributeElements.ts
index 687ca79..b3ee09e 100644
--- a/src/rules/vue-strong/multiAttributeElements.ts
+++ b/src/rules/vue-strong/multiAttributeElements.ts
@@ -14,6 +14,10 @@ const checkMultiAttributeElements = (template: SFCTemplateBlock | null, filePath
   // Regex to match elements with attributes
   // eslint-disable-next-line regexp/no-super-linear-backtracking
   const elementRegex = /<(\w+)([^>]*)>/g
+
+  // Regex to match attributes
+  const attributeRegex = /\w+=["'][^"']*["']/g
+
   let match: RegExpExecArray | null
 
   // eslint-disable-next-line no-cond-assign
@@ -21,8 +25,14 @@ const checkMultiAttributeElements = (template: SFCTemplateBlock | null, filePath
     const elementTag = match[1]
     const attributesString = match[2]
 
+    const attributes = []
+    let attrMatch
+
     // Check if there are multiple attributes
-    const attributes = attributesString.split(/\s+/).filter(attr => attr.trim() !== '')
+    // eslint-disable-next-line no-cond-assign
+    while ((attrMatch = attributeRegex.exec(attributesString)) !== null) {
+      attributes.push(attrMatch[0])
+    }
 
     if (attributes.length > 1) {
       // Check if attributes are on separate lines


Test patch:
diff --git a/src/rules/vue-strong/multiAttributeElements.test.ts b/src/rules/vue-strong/multiAttributeElements.test.ts
index 299b078..a377d66 100644
--- a/src/rules/vue-strong/multiAttributeElements.test.ts
+++ b/src/rules/vue-strong/multiAttributeElements.test.ts
@@ -3,11 +3,12 @@ import { describe, expect, it } from 'vitest'
 import { checkMultiAttributeElements, reportMultiAttributeElements } from './multiAttributeElements'
 
 describe('multiAttributeElements', () => {
-  it('should not report files where elements have single attributes', () => {
+  it('should not report files when elements have single attribute', () => {
     const template = {
       content: `
         <template>
           <div id="app"></div>
+          <div class="container border"></div>
           <button @click="handleClick">Click me</button>
         </template>
       `,