@db-ux/core-eslint-plugin 4.4.2-eslint-plugin-28ea614 → 4.4.2-eslint-plugin2-696cb23

package/build/rules/accordion/no-nested-accordion.js

@@ -1,37 +1,54 @@
-import { ESLintUtils } from '@typescript-eslint/utils';
-import { isDBComponent } from '../../shared/utils.js';
-const createRule = ESLintUtils.RuleCreator((name) => `https://github.com/db-ux-design-system/core-web/blob/main/packages/eslint-plugin/README.md#${name}`);
-export default createRule({
-    name: 'no-nested-accordion',
+import { createAngularVisitors, defineTemplateBodyVisitor, isDBComponent } from '../../shared/utils.js';
+import { COMPONENTS, MESSAGES, MESSAGE_IDS } from '../../shared/constants.js';
+export default {
     meta: {
         type: 'problem',
         docs: {
-            description: 'Prevent nesting DBAccordion components'
+            description: 'Prevent nesting DBAccordion components',
+            url: 'https://github.com/db-ux-design-system/core-web/blob/main/packages/eslint-plugin/README.md#no-nested-accordion'
         },
         messages: {
-            noNested: 'DBAccordion must not be nested inside another DBAccordion as it confuses users'
+            [MESSAGE_IDS.ACCORDION_NO_NESTED]: MESSAGES.ACCORDION_NO_NESTED
         },
         schema: []
     },
-    defaultOptions: [],
     create(context) {
-        return {
-            JSXElement(node) {
-                if (!isDBComponent(node.openingElement, 'DBAccordion'))
+        const angularHandler = (node, parserServices) => {
+            let parent = node.parent;
+            while (parent) {
+                if (parent.type === 'Element' && isDBComponent(parent, COMPONENTS.DBAccordion)) {
+                    const loc = parserServices.convertNodeSourceSpanToLoc(node.sourceSpan);
+                    context.report({
+                        loc,
+                        messageId: MESSAGE_IDS.ACCORDION_NO_NESTED
+                    });
                     return;
-                let parent = node.parent;
-                while (parent) {
-                    if (parent.type === 'JSXElement' &&
-                        isDBComponent(parent.openingElement, 'DBAccordion')) {
-                        context.report({
-                            node: node.openingElement,
-                            messageId: 'noNested'
-                        });
-                        return;
-                    }
-                    parent = parent.parent;
                 }
+                parent = parent.parent;
             }
         };
+        const angularVisitors = createAngularVisitors(context, COMPONENTS.DBAccordion, angularHandler);
+        if (angularVisitors)
+            return angularVisitors;
+        const checkAccordion = (node) => {
+            const openingElement = node.openingElement || node;
+            if (!isDBComponent(openingElement, COMPONENTS.DBAccordion))
+                return;
+            let parent = node.parent;
+            while (parent) {
+                const parentOpening = parent.openingElement || parent;
+                if ((parent.type === 'JSXElement' ||
+                    parent.type === 'VElement') &&
+                    isDBComponent(parentOpening, COMPONENTS.DBAccordion)) {
+                    context.report({
+                        node: openingElement,
+                        messageId: MESSAGE_IDS.ACCORDION_NO_NESTED
+                    });
+                    return;
+                }
+                parent = parent.parent;
+            }
+        };
+        return defineTemplateBodyVisitor(context, { VElement: checkAccordion, Element: checkAccordion }, { JSXElement: checkAccordion });
     }
-});
+};

package/build/rules/badge/badge-corner-placement-rules.d.ts

@@ -1,5 +1,18 @@
-import { ESLintUtils } from '@typescript-eslint/utils';
-declare const _default: ESLintUtils.RuleModule<"textTooLong" | "missingLabel", [], unknown, ESLintUtils.RuleListener> & {
-    name: string;
+import { MESSAGE_IDS } from '../../shared/constants.js';
+declare const _default: {
+    meta: {
+        type: string;
+        docs: {
+            description: string;
+            url: string;
+        };
+        fixable: string;
+        messages: {
+            [MESSAGE_IDS.BADGE_CORNER_TEXT_TOO_LONG]: string;
+            [MESSAGE_IDS.BADGE_CORNER_MISSING_LABEL]: string;
+        };
+        schema: never[];
+    };
+    create(context: any): any;
 };
 export default _default;

package/build/rules/badge/badge-corner-placement-rules.js

@@ -1,76 +1,114 @@
-import { ESLintUtils } from '@typescript-eslint/utils';
-import { getAttributeValue, isDBComponent } from '../../shared/utils.js';
-const createRule = ESLintUtils.RuleCreator((name) => `https://github.com/db-ux-design-system/core-web/blob/main/packages/eslint-plugin/README.md#${name}`);
+import { COMPONENTS, MESSAGES, MESSAGE_IDS } from '../../shared/constants.js';
+import { createAngularFix, createAngularVisitors, defineTemplateBodyVisitor, getAttributeValue, isDBComponent } from '../../shared/utils.js';
 function getTextContent(node) {
-    const textChild = node.children.find((child) => child.type === 'JSXText');
-    return textChild && textChild.type === 'JSXText'
-        ? textChild.value.trim()
-        : null;
+    if (node.children) {
+        for (const child of node.children) {
+            if (child.type === 'JSXText') {
+                return child.value.trim();
+            }
+            if (child.type === 'Text') {
+                return child.value?.trim() || null;
+            }
+            if (child.type === 'VText') {
+                return child.value?.trim() || null;
+            }
+        }
+    }
+    return null;
 }
-export default createRule({
-    name: 'badge-corner-placement-rules',
+export default {
     meta: {
         type: 'problem',
         docs: {
-            description: 'Ensure DBBadge with corner placement has max 3 characters and label'
+            description: 'Ensure DBBadge with corner placement has max 3 characters and label',
+            url: 'https://github.com/db-ux-design-system/core-web/blob/main/packages/eslint-plugin/README.md#badge-corner-placement-rules'
         },
         fixable: 'code',
         messages: {
-            textTooLong: 'DBBadge with corner placement must have max 3 characters in text/children',
-            missingLabel: 'DBBadge with corner placement must have a label attribute for accessibility'
+            [MESSAGE_IDS.BADGE_CORNER_TEXT_TOO_LONG]: MESSAGES.BADGE_CORNER_TEXT_TOO_LONG,
+            [MESSAGE_IDS.BADGE_CORNER_MISSING_LABEL]: MESSAGES.BADGE_CORNER_MISSING_LABEL
         },
         schema: []
     },
-    defaultOptions: [],
     create(context) {
-        return {
-            JSXElement(node) {
-                if (!isDBComponent(node.openingElement, 'DBBadge'))
-                    return;
-                const placement = getAttributeValue(node.openingElement, 'placement');
-                if (!placement || placement === 'inline')
-                    return;
-                const text = getAttributeValue(node.openingElement, 'text');
-                const children = getTextContent(node);
-                const content = (typeof text === 'string' ? text : children) || '';
-                const label = getAttributeValue(node.openingElement, 'label');
-                if (content.length > 3) {
-                    context.report({
-                        node: node.openingElement,
-                        messageId: 'textTooLong',
-                        fix(fixer) {
-                            const fixes = [];
-                            const shortText = content.slice(0, 3);
-                            if (text && typeof text === 'string') {
-                                const textAttr = node.openingElement.attributes.find((a) => a.type === 'JSXAttribute' &&
-                                    a.name.name === 'text');
-                                if (textAttr) {
-                                    fixes.push(fixer.replaceText(textAttr, `text="${shortText}" label="${content}"`));
-                                }
+        const angularHandler = (node, parserServices) => {
+            const placement = getAttributeValue(node, 'placement');
+            if (!placement || placement === 'inline')
+                return;
+            const text = getAttributeValue(node, 'text');
+            const children = getTextContent(node);
+            const content = (typeof text === 'string' ? text : children) || '';
+            const label = getAttributeValue(node, 'label');
+            const loc = parserServices.convertNodeSourceSpanToLoc(node.sourceSpan);
+            if (content.length > 3) {
+                context.report({
+                    loc,
+                    messageId: MESSAGE_IDS.BADGE_CORNER_TEXT_TOO_LONG
+                });
+            }
+            if (!label) {
+                context.report({
+                    loc,
+                    messageId: MESSAGE_IDS.BADGE_CORNER_MISSING_LABEL,
+                    fix(fixer) {
+                        const fixData = createAngularFix(context, node, ` label="${content || 'Badge'}"`);
+                        if (!fixData)
+                            return null;
+                        return fixer.insertTextBeforeRange([fixData.insertPos, fixData.insertPos], fixData.attributeText);
+                    }
+                });
+            }
+        };
+        const angularVisitors = createAngularVisitors(context, COMPONENTS.DBBadge, angularHandler);
+        if (angularVisitors)
+            return angularVisitors;
+        const checkBadge = (node) => {
+            const openingElement = node.openingElement || node;
+            if (!isDBComponent(openingElement, COMPONENTS.DBBadge))
+                return;
+            const placement = getAttributeValue(openingElement, 'placement');
+            if (!placement || placement === 'inline')
+                return;
+            const text = getAttributeValue(openingElement, 'text');
+            const children = getTextContent(node);
+            const content = (typeof text === 'string' ? text : children) || '';
+            const label = getAttributeValue(openingElement, 'label');
+            if (content.length > 3) {
+                context.report({
+                    node: openingElement,
+                    messageId: MESSAGE_IDS.BADGE_CORNER_TEXT_TOO_LONG,
+                    fix(fixer) {
+                        const fixes = [];
+                        const shortText = content.slice(0, 3);
+                        if (text && typeof text === 'string') {
+                            const textAttr = openingElement.attributes.find((a) => a.type === 'JSXAttribute' &&
+                                a.name.name === 'text');
+                            if (textAttr) {
+                                fixes.push(fixer.replaceText(textAttr, `text="${shortText}" label="${content}"`));
                             }
-                            else if (children) {
-                                const textChild = node.children.find((c) => c.type === 'JSXText');
-                                if (textChild) {
-                                    fixes.push(fixer.replaceText(textChild, shortText));
-                                    const lastAttr = node.openingElement.attributes[node.openingElement.attributes
-                                        .length - 1];
-                                    const insertPos = lastAttr
-                                        ? lastAttr.range[1]
-                                        : node.openingElement.name.range[1];
-                                    fixes.push(fixer.insertTextAfterRange([insertPos, insertPos], ` label="${content}"`));
-                                }
+                        }
+                        else if (children) {
+                            const textChild = node.children.find((c) => c.type === 'JSXText');
+                            if (textChild) {
+                                fixes.push(fixer.replaceText(textChild, shortText));
+                                const lastAttr = openingElement.attributes[openingElement.attributes.length - 1];
+                                const insertPos = lastAttr
+                                    ? lastAttr.range[1]
+                                    : openingElement.name.range[1];
+                                fixes.push(fixer.insertTextAfterRange([insertPos, insertPos], ` label="${content}"`));
                             }
-                            return fixes;
                         }
-                    });
-                }
-                if (!label) {
-                    context.report({
-                        node: node.openingElement,
-                        messageId: 'missingLabel'
-                    });
-                }
+                        return fixes;
+                    }
+                });
+            }
+            if (!label) {
+                context.report({
+                    node: openingElement,
+                    messageId: MESSAGE_IDS.BADGE_CORNER_MISSING_LABEL
+                });
             }
         };
+        return defineTemplateBodyVisitor(context, { VElement: checkBadge, Element: checkBadge }, { JSXElement: checkBadge });
     }
-});
+};

package/build/rules/badge/badge-no-inline-in-interactive.d.ts

@@ -1,5 +1,17 @@
-import { ESLintUtils } from '@typescript-eslint/utils';
-declare const _default: ESLintUtils.RuleModule<"noInline", [], unknown, ESLintUtils.RuleListener> & {
-    name: string;
+import { MESSAGE_IDS } from '../../shared/constants.js';
+declare const _default: {
+    meta: {
+        type: string;
+        docs: {
+            description: string;
+            url: string;
+        };
+        fixable: string;
+        messages: {
+            [MESSAGE_IDS.BADGE_NO_INLINE_IN_INTERACTIVE]: string;
+        };
+        schema: never[];
+    };
+    create(context: any): any;
 };
 export default _default;

package/build/rules/badge/badge-no-inline-in-interactive.js

@@ -1,67 +1,129 @@
-import { ESLintUtils } from '@typescript-eslint/utils';
-import { getAttributeValue, isDBComponent } from '../../shared/utils.js';
-const createRule = ESLintUtils.RuleCreator((name) => `https://github.com/db-ux-design-system/core-web/blob/main/packages/eslint-plugin/README.md#${name}`);
+import { COMPONENTS, MESSAGES, MESSAGE_IDS } from '../../shared/constants.js';
+import { createAngularFix, createAngularVisitors, defineTemplateBodyVisitor, getAttributeValue, isDBComponent } from '../../shared/utils.js';
 const INTERACTIVE_PARENTS = ['DBButton', 'DBLink', 'button', 'a'];
-export default createRule({
-    name: 'badge-no-inline-in-interactive',
+export default {
     meta: {
         type: 'problem',
         docs: {
-            description: 'Prevent inline placement for DBBadge inside interactive elements'
+            description: 'Prevent inline placement for DBBadge inside interactive elements',
+            url: 'https://github.com/db-ux-design-system/core-web/blob/main/packages/eslint-plugin/README.md#badge-no-inline-in-interactive'
         },
         fixable: 'code',
         messages: {
-            noInline: 'DBBadge inside {{parent}} cannot have placement="inline". Use corner placement instead'
+            [MESSAGE_IDS.BADGE_NO_INLINE_IN_INTERACTIVE]: MESSAGES.BADGE_NO_INLINE_IN_INTERACTIVE
         },
         schema: []
     },
-    defaultOptions: [],
     create(context) {
-        return {
-            JSXElement(node) {
-                if (!isDBComponent(node.openingElement, 'DBBadge'))
-                    return;
-                const placement = getAttributeValue(node.openingElement, 'placement');
-                if (placement && placement !== 'inline')
-                    return;
-                let parent = node.parent;
-                while (parent) {
-                    if (parent.type === 'JSXElement') {
-                        const parentName = parent.openingElement.name;
-                        if (parentName.type === 'JSXIdentifier') {
-                            const name = parentName.name;
-                            const matchedParent = INTERACTIVE_PARENTS.find((p) => name === p ||
-                                name ===
-                                    p.toLowerCase().replace('db', 'db-'));
-                            if (matchedParent) {
-                                context.report({
-                                    node: node.openingElement,
-                                    messageId: 'noInline',
-                                    data: { parent: matchedParent },
-                                    fix(fixer) {
-                                        const placementAttr = node.openingElement.attributes.find((a) => a.type === 'JSXAttribute' &&
+        const angularHandler = (node, parserServices) => {
+            const placement = getAttributeValue(node, 'placement');
+            if (placement && placement !== 'inline')
+                return;
+            let parent = node.parent;
+            while (parent) {
+                if (parent.type === 'Element') {
+                    const matchedParent = INTERACTIVE_PARENTS.find((p) => parent.name === p ||
+                        parent.name === p.toLowerCase().replace('db', 'db-'));
+                    if (matchedParent) {
+                        const loc = parserServices.convertNodeSourceSpanToLoc(node.sourceSpan);
+                        context.report({
+                            loc,
+                            messageId: MESSAGE_IDS.BADGE_NO_INLINE_IN_INTERACTIVE,
+                            data: { parent: matchedParent },
+                            fix(fixer) {
+                                const fixData = createAngularFix(context, node, ' placement="corner-top-right"');
+                                if (!fixData)
+                                    return null;
+                                return fixer.insertTextBeforeRange([fixData.insertPos, fixData.insertPos], fixData.attributeText);
+                            }
+                        });
+                        return;
+                    }
+                }
+                parent = parent.parent;
+            }
+        };
+        const angularVisitors = createAngularVisitors(context, COMPONENTS.DBBadge, angularHandler);
+        if (angularVisitors)
+            return angularVisitors;
+        const checkBadge = (node) => {
+            const openingElement = node.openingElement || node;
+            if (!isDBComponent(openingElement, COMPONENTS.DBBadge))
+                return;
+            const placement = getAttributeValue(openingElement, 'placement');
+            if (placement && placement !== 'inline')
+                return;
+            let parent = node.parent;
+            while (parent) {
+                if (parent.type === 'JSXElement' ||
+                    parent.type === 'VElement') {
+                    const parentOpening = parent.openingElement || parent;
+                    const parentName = parentOpening.name || parentOpening.rawName;
+                    const name = typeof parentName === 'string'
+                        ? parentName
+                        : parentName.type === 'JSXIdentifier'
+                            ? parentName.name
+                            : null;
+                    if (name) {
+                        const matchedParent = INTERACTIVE_PARENTS.find((p) => name === p ||
+                            name === p.toLowerCase().replace('db', 'db-'));
+                        if (matchedParent) {
+                            context.report({
+                                node: openingElement,
+                                messageId: MESSAGE_IDS.BADGE_NO_INLINE_IN_INTERACTIVE,
+                                data: { parent: matchedParent },
+                                fix(fixer) {
+                                    if (node.openingElement) {
+                                        // JSX
+                                        const placementAttr = openingElement.attributes.find((a) => a.type === 'JSXAttribute' &&
                                             a.name.name === 'placement');
                                         if (placementAttr) {
                                             return fixer.replaceText(placementAttr, 'placement="corner-top-right"');
                                         }
                                         else {
-                                            const lastAttr = node.openingElement.attributes[node.openingElement
-                                                .attributes.length - 1];
+                                            const lastAttr = openingElement.attributes[openingElement.attributes
+                                                .length - 1];
                                             const insertPos = lastAttr
                                                 ? lastAttr.range[1]
-                                                : node.openingElement.name
-                                                    .range[1];
+                                                : openingElement.name.range[1];
                                             return fixer.insertTextAfterRange([insertPos, insertPos], ' placement="corner-top-right"');
                                         }
                                     }
-                                });
-                                return;
-                            }
+                                    else {
+                                        // Vue
+                                        const placementAttr = openingElement.startTag.attributes.find((a) => a.key.name === 'placement');
+                                        if (placementAttr) {
+                                            return fixer.replaceText(placementAttr, 'placement="corner-top-right"');
+                                        }
+                                        else {
+                                            const attrs = openingElement.startTag
+                                                .attributes;
+                                            if (attrs.length > 0) {
+                                                const lastAttr = attrs[attrs.length - 1];
+                                                return fixer.insertTextAfterRange([
+                                                    lastAttr.range[1],
+                                                    lastAttr.range[1]
+                                                ], ' placement="corner-top-right"');
+                                            }
+                                            else {
+                                                const insertPos = openingElement.startTag
+                                                    .range[0] +
+                                                    1 +
+                                                    openingElement.rawName
+                                                        .length;
+                                                return fixer.insertTextAfterRange([insertPos, insertPos], ' placement="corner-top-right"');
+                                            }
+                                        }
+                                    }
+                                }
+                            });
+                            return;
                         }
                     }
-                    parent = parent.parent;
                 }
+                parent = parent.parent;
             }
         };
+        return defineTemplateBodyVisitor(context, { VElement: checkBadge, Element: checkBadge }, { JSXElement: checkBadge });
     }
-});
+};

package/build/rules/button/button-no-text-requires-tooltip.d.ts

@@ -1,5 +1,18 @@
-import { ESLintUtils } from '@typescript-eslint/utils';
-declare const _default: ESLintUtils.RuleModule<"missingIcon" | "missingTooltip", [], unknown, ESLintUtils.RuleListener> & {
-    name: string;
+import { MESSAGE_IDS } from '../../shared/constants.js';
+declare const _default: {
+    meta: {
+        type: string;
+        docs: {
+            description: string;
+            url: string;
+        };
+        fixable: string;
+        messages: {
+            [MESSAGE_IDS.BUTTON_NO_TEXT_MISSING_ICON]: string;
+            [MESSAGE_IDS.BUTTON_NO_TEXT_MISSING_TOOLTIP]: string;
+        };
+        schema: never[];
+    };
+    create(context: any): any;
 };
 export default _default;

package/build/rules/button/button-no-text-requires-tooltip.js

@@ -1,45 +1,81 @@
-import { ESLintUtils } from '@typescript-eslint/utils';
-import { getAttributeValue, hasChildOfType, isDBComponent } from '../../shared/utils.js';
-const createRule = ESLintUtils.RuleCreator((name) => `https://github.com/db-ux-design-system/core-web/blob/main/packages/eslint-plugin/README.md#${name}`);
-export default createRule({
-    name: 'button-no-text-requires-tooltip',
+import { COMPONENTS, MESSAGES, MESSAGE_IDS } from '../../shared/constants.js';
+import { createAngularVisitors, defineTemplateBodyVisitor, getAttributeValue, hasChildOfType, isDBComponent } from '../../shared/utils.js';
+export default {
     meta: {
         type: 'problem',
         docs: {
-            description: 'Ensure DBButton with noText has icon and DBTooltip child'
+            description: 'Ensure DBButton with noText has icon and DBTooltip child',
+            url: 'https://github.com/db-ux-design-system/core-web/blob/main/packages/eslint-plugin/README.md#button-no-text-requires-tooltip'
         },
         fixable: 'code',
         messages: {
-            missingIcon: 'DBButton with noText must have an icon prop',
-            missingTooltip: 'DBButton with noText must have a DBTooltip child for accessibility'
+            [MESSAGE_IDS.BUTTON_NO_TEXT_MISSING_ICON]: MESSAGES.BUTTON_NO_TEXT_MISSING_ICON,
+            [MESSAGE_IDS.BUTTON_NO_TEXT_MISSING_TOOLTIP]: MESSAGES.BUTTON_NO_TEXT_MISSING_TOOLTIP
         },
         schema: []
     },
-    defaultOptions: [],
     create(context) {
-        return {
-            JSXElement(node) {
-                const openingElement = node.openingElement;
-                if (!isDBComponent(openingElement, 'DBButton'))
-                    return;
-                const noText = getAttributeValue(openingElement, 'noText');
-                if (!noText)
-                    return;
-                const icon = getAttributeValue(openingElement, 'icon') ||
-                    getAttributeValue(openingElement, 'iconLeading') ||
-                    getAttributeValue(openingElement, 'iconTrailing');
-                if (!icon) {
-                    context.report({
-                        node: openingElement,
-                        messageId: 'missingIcon'
-                    });
-                }
-                const hasTooltip = hasChildOfType(node, 'DBTooltip');
-                if (!hasTooltip) {
-                    context.report({
-                        node: openingElement,
-                        messageId: 'missingTooltip',
-                        fix(fixer) {
+        const angularHandler = (node, parserServices) => {
+            const noText = getAttributeValue(node, 'noText');
+            if (!noText)
+                return;
+            const icon = getAttributeValue(node, 'icon') ||
+                getAttributeValue(node, 'iconLeading') ||
+                getAttributeValue(node, 'iconTrailing');
+            const loc = parserServices.convertNodeSourceSpanToLoc(node.sourceSpan);
+            if (!icon) {
+                context.report({
+                    loc,
+                    messageId: MESSAGE_IDS.BUTTON_NO_TEXT_MISSING_ICON
+                });
+            }
+            const hasTooltip = hasChildOfType(node, COMPONENTS.DBTooltip);
+            if (!hasTooltip) {
+                context.report({
+                    loc,
+                    messageId: MESSAGE_IDS.BUTTON_NO_TEXT_MISSING_TOOLTIP,
+                    fix(fixer) {
+                        const sourceCode = context.sourceCode || context.getSourceCode();
+                        const text = sourceCode.getText();
+                        const startOffset = node.sourceSpan.start.offset;
+                        const endOffset = node.sourceSpan.end.offset;
+                        const tagText = text.substring(startOffset, endOffset);
+                        const closeTagIndex = tagText.lastIndexOf('</db-button>');
+                        if (closeTagIndex === -1)
+                            return null;
+                        const insertPos = startOffset + closeTagIndex;
+                        return fixer.insertTextBeforeRange([insertPos, insertPos], '\n  <db-tooltip>Describe action</db-tooltip>');
+                    }
+                });
+            }
+        };
+        const angularVisitors = createAngularVisitors(context, COMPONENTS.DBButton, angularHandler);
+        if (angularVisitors)
+            return angularVisitors;
+        const checkButton = (node) => {
+            const openingElement = node.openingElement || node;
+            if (!isDBComponent(openingElement, COMPONENTS.DBButton))
+                return;
+            const noText = getAttributeValue(openingElement, 'noText');
+            if (!noText)
+                return;
+            const icon = getAttributeValue(openingElement, 'icon') ||
+                getAttributeValue(openingElement, 'iconLeading') ||
+                getAttributeValue(openingElement, 'iconTrailing');
+            if (!icon) {
+                context.report({
+                    node: openingElement,
+                    messageId: MESSAGE_IDS.BUTTON_NO_TEXT_MISSING_ICON
+                });
+            }
+            const hasTooltip = hasChildOfType(node, COMPONENTS.DBTooltip);
+            if (!hasTooltip) {
+                context.report({
+                    node: openingElement,
+                    messageId: MESSAGE_IDS.BUTTON_NO_TEXT_MISSING_TOOLTIP,
+                    fix(fixer) {
+                        if (node.openingElement) {
+                            // JSX
                             const closingTag = node.closingElement;
                             if (!closingTag)
                                 return null;
@@ -51,9 +87,23 @@ export default createRule({
                                 : 'DBTooltip';
                             return fixer.insertTextBefore(closingTag, `\n  <${tooltipName}>Describe action</${tooltipName}>`);
                         }
-                    });
-                }
+                        else {
+                            // Vue
+                            if (!node.endTag || !node.startTag?.range)
+                                return null;
+                            const componentName = openingElement.rawName;
+                            const tooltipName = componentName.includes('-')
+                                ? 'db-tooltip'
+                                : 'DBTooltip';
+                            return fixer.insertTextAfterRange([
+                                node.startTag.range[1],
+                                node.startTag.range[1]
+                            ], `\n  <${tooltipName}>Describe action</${tooltipName}>`);
+                        }
+                    }
+                });
             }
         };
+        return defineTemplateBodyVisitor(context, { VElement: checkButton, Element: checkButton }, { JSXElement: checkButton });
     }
-});
+};