@vue/language-service 2.1.8 → 2.2.0

package/lib/plugins/vue-template.js

@@ -11,8 +11,19 @@ const vscode_uri_1 = require("vscode-uri");
 const nameCasing_1 = require("../ideFeatures/nameCasing");
 const types_1 = require("../types");
 const data_1 = require("./data");
-const specialTags = new Set(['slot', 'component', 'template']);
-const specialProps = new Set(['class', 'is', 'key', 'ref', 'style']);
+const specialTags = new Set([
+    'slot',
+    'component',
+    'template',
+]);
+const specialProps = new Set([
+    'class',
+    'data-allow-mismatch',
+    'is',
+    'key',
+    'ref',
+    'style',
+]);
 let builtInData;
 let modelData;
 function create(mode, ts, getTsPluginClient) {
@@ -79,8 +90,8 @@ function create(mode, ts, getTsPluginClient) {
             modelData ??= (0, data_1.loadModelModifiersData)(context.env.locale ?? 'en');
             // https://vuejs.org/api/built-in-directives.html#v-on
             // https://vuejs.org/api/built-in-directives.html#v-bind
-            const eventModifiers = {};
-            const propModifiers = {};
+            const vOnModifiers = {};
+            const vBindModifiers = {};
             const vOn = builtInData.globalAttributes?.find(x => x.name === 'v-on');
             const vBind = builtInData.globalAttributes?.find(x => x.name === 'v-bind');
             if (vOn) {
@@ -89,9 +100,9 @@ function create(mode, ts, getTsPluginClient) {
                     .split('\n- ')[4]
                     .split('\n').slice(2, -1);
                 for (let text of modifiers) {
-                    text = text.substring('  - `.'.length);
-                    const [name, disc] = text.split('` - ');
-                    eventModifiers[name] = disc;
+                    text = text.slice('  - `.'.length);
+                    const [name, desc] = text.split('` - ');
+                    vOnModifiers[name] = desc;
                 }
             }
             if (vBind) {
@@ -100,9 +111,9 @@ function create(mode, ts, getTsPluginClient) {
                     .split('\n- ')[4]
                     .split('\n').slice(2, -1);
                 for (let text of modifiers) {
-                    text = text.substring('  - `.'.length);
-                    const [name, disc] = text.split('` - ');
-                    propModifiers[name] = disc;
+                    text = text.slice('  - `.'.length);
+                    const [name, desc] = text.split('` - ');
+                    vBindModifiers[name] = desc;
                 }
             }
             const disposable = context.env.onDidChangeConfiguration?.(() => initializing = undefined);
@@ -123,12 +134,14 @@ function create(mode, ts, getTsPluginClient) {
                     const vueCompilerOptions = context.project.vue.compilerOptions;
                     let sync;
                     let currentVersion;
-                    const decoded = context.decodeEmbeddedDocumentUri(vscode_uri_1.URI.parse(document.uri));
+                    const uri = vscode_uri_1.URI.parse(document.uri);
+                    const decoded = context.decodeEmbeddedDocumentUri(uri);
                     const sourceScript = decoded && context.language.scripts.get(decoded[0]);
-                    if (sourceScript?.generated?.root instanceof language_core_1.VueVirtualCode) {
+                    const root = sourceScript?.generated?.root;
+                    if (root instanceof language_core_1.VueVirtualCode) {
                         // #4298: Precompute HTMLDocument before provideHtmlData to avoid parseHTMLDocument requesting component names from tsserver
                         baseServiceInstance.provideCompletionItems?.(document, position, completionContext, token);
-                        sync = (await provideHtmlData(vueCompilerOptions, sourceScript.id, sourceScript.generated.root)).sync;
+                        sync = (await provideHtmlData(vueCompilerOptions, sourceScript.id, root)).sync;
                         currentVersion = await sync();
                     }
                     let htmlComplete = await baseServiceInstance.provideCompletionItems?.(document, position, completionContext, token);
@@ -159,7 +172,6 @@ function create(mode, ts, getTsPluginClient) {
                     if (!enabled) {
                         return;
                     }
-                    const result = [];
                     const uri = vscode_uri_1.URI.parse(document.uri);
                     const decoded = context.decodeEmbeddedDocumentUri(uri);
                     const sourceScript = decoded && context.language.scripts.get(decoded[0]);
@@ -167,88 +179,98 @@ function create(mode, ts, getTsPluginClient) {
                     if (!virtualCode) {
                         return;
                     }
-                    const code = context.language.scripts.get(decoded[0])?.generated?.root;
+                    const root = sourceScript?.generated?.root;
+                    if (!(root instanceof language_core_1.VueVirtualCode)) {
+                        return;
+                    }
                     const scanner = getScanner(baseServiceInstance, document);
-                    if (code instanceof language_core_1.VueVirtualCode && scanner) {
-                        // visualize missing required props
-                        const casing = await (0, nameCasing_1.getNameCasing)(context, decoded[0]);
-                        const components = await tsPluginClient?.getComponentNames(code.fileName) ?? [];
-                        const componentProps = {};
-                        let token;
-                        let current;
-                        while ((token = scanner.scan()) !== html.TokenType.EOS) {
-                            if (token === html.TokenType.StartTag) {
-                                const tagName = scanner.getTokenText();
-                                const checkTag = tagName.indexOf('.') >= 0
-                                    ? tagName
-                                    : components.find(component => component === tagName || (0, language_core_1.hyphenateTag)(component) === tagName);
-                                if (checkTag) {
-                                    componentProps[checkTag] ??= (await tsPluginClient?.getComponentProps(code.fileName, checkTag, true) ?? []).map(prop => prop.name);
-                                    current = {
-                                        unburnedRequiredProps: [...componentProps[checkTag]],
-                                        labelOffset: scanner.getTokenOffset() + scanner.getTokenLength(),
-                                        insertOffset: scanner.getTokenOffset() + scanner.getTokenLength(),
-                                    };
-                                }
+                    if (!scanner) {
+                        return;
+                    }
+                    const result = [];
+                    // visualize missing required props
+                    const casing = await (0, nameCasing_1.getNameCasing)(context, decoded[0]);
+                    const components = await tsPluginClient?.getComponentNames(root.fileName) ?? [];
+                    const componentProps = {};
+                    let token;
+                    let current;
+                    while ((token = scanner.scan()) !== html.TokenType.EOS) {
+                        if (token === html.TokenType.StartTag) {
+                            const tagName = scanner.getTokenText();
+                            const checkTag = tagName.includes('.')
+                                ? tagName
+                                : components.find(component => component === tagName || (0, language_core_1.hyphenateTag)(component) === tagName);
+                            if (checkTag) {
+                                componentProps[checkTag] ??= (await tsPluginClient?.getComponentProps(root.fileName, checkTag) ?? [])
+                                    .filter(prop => prop.required)
+                                    .map(prop => prop.name);
+                                current = {
+                                    unburnedRequiredProps: [...componentProps[checkTag]],
+                                    labelOffset: scanner.getTokenOffset() + scanner.getTokenLength(),
+                                    insertOffset: scanner.getTokenOffset() + scanner.getTokenLength(),
+                                };
                             }
-                            else if (token === html.TokenType.AttributeName) {
-                                if (current) {
-                                    let attrText = scanner.getTokenText();
-                                    if (attrText === 'v-bind') {
-                                        current.unburnedRequiredProps = [];
+                        }
+                        else if (token === html.TokenType.AttributeName) {
+                            if (current) {
+                                let attrText = scanner.getTokenText();
+                                if (attrText === 'v-bind') {
+                                    current.unburnedRequiredProps = [];
+                                }
+                                else {
+                                    // remove modifiers
+                                    if (attrText.includes('.')) {
+                                        attrText = attrText.split('.')[0];
                                     }
-                                    else {
-                                        // remove modifiers
-                                        if (attrText.indexOf('.') >= 0) {
-                                            attrText = attrText.split('.')[0];
-                                        }
-                                        // normalize
-                                        if (attrText.startsWith('v-bind:')) {
-                                            attrText = attrText.substring('v-bind:'.length);
-                                        }
-                                        else if (attrText.startsWith(':')) {
-                                            attrText = attrText.substring(':'.length);
-                                        }
-                                        else if (attrText.startsWith('v-model:')) {
-                                            attrText = attrText.substring('v-model:'.length);
-                                        }
-                                        else if (attrText === 'v-model') {
-                                            attrText = vueCompilerOptions.target >= 3 ? 'modelValue' : 'value'; // TODO: support for experimentalModelPropName?
-                                        }
-                                        else if (attrText.startsWith('@')) {
-                                            attrText = 'on-' + (0, language_core_1.hyphenateAttr)(attrText.substring('@'.length));
-                                        }
-                                        current.unburnedRequiredProps = current.unburnedRequiredProps.filter(propName => {
-                                            return attrText !== propName
-                                                && attrText !== (0, language_core_1.hyphenateAttr)(propName);
-                                        });
+                                    // normalize
+                                    if (attrText.startsWith('v-bind:')) {
+                                        attrText = attrText.slice('v-bind:'.length);
                                     }
-                                }
-                            }
-                            else if (token === html.TokenType.StartTagSelfClose || token === html.TokenType.StartTagClose) {
-                                if (current) {
-                                    for (const requiredProp of current.unburnedRequiredProps) {
-                                        result.push({
-                                            label: `${requiredProp}!`,
-                                            paddingLeft: true,
-                                            position: document.positionAt(current.labelOffset),
-                                            kind: 2,
-                                            textEdits: [{
-                                                    range: {
-                                                        start: document.positionAt(current.insertOffset),
-                                                        end: document.positionAt(current.insertOffset),
-                                                    },
-                                                    newText: ` :${casing.attr === types_1.AttrNameCasing.Kebab ? (0, language_core_1.hyphenateAttr)(requiredProp) : requiredProp}=`,
-                                                }],
-                                        });
+                                    else if (attrText.startsWith(':')) {
+                                        attrText = attrText.slice(':'.length);
+                                    }
+                                    else if (attrText.startsWith('v-model:')) {
+                                        attrText = attrText.slice('v-model:'.length);
                                     }
-                                    current = undefined;
+                                    else if (attrText === 'v-model') {
+                                        attrText = vueCompilerOptions.target >= 3 ? 'modelValue' : 'value'; // TODO: support for experimentalModelPropName?
+                                    }
+                                    else if (attrText.startsWith('v-on:')) {
+                                        attrText = 'on-' + (0, language_core_1.hyphenateAttr)(attrText.slice('v-on:'.length));
+                                    }
+                                    else if (attrText.startsWith('@')) {
+                                        attrText = 'on-' + (0, language_core_1.hyphenateAttr)(attrText.slice('@'.length));
+                                    }
+                                    current.unburnedRequiredProps = current.unburnedRequiredProps.filter(propName => {
+                                        return attrText !== propName
+                                            && attrText !== (0, language_core_1.hyphenateAttr)(propName);
+                                    });
                                 }
                             }
-                            if (token === html.TokenType.AttributeName || token === html.TokenType.AttributeValue) {
-                                if (current) {
-                                    current.insertOffset = scanner.getTokenOffset() + scanner.getTokenLength();
+                        }
+                        else if (token === html.TokenType.StartTagSelfClose || token === html.TokenType.StartTagClose) {
+                            if (current) {
+                                for (const requiredProp of current.unburnedRequiredProps) {
+                                    result.push({
+                                        label: `${requiredProp}!`,
+                                        paddingLeft: true,
+                                        position: document.positionAt(current.labelOffset),
+                                        kind: 2,
+                                        textEdits: [{
+                                                range: {
+                                                    start: document.positionAt(current.insertOffset),
+                                                    end: document.positionAt(current.insertOffset),
+                                                },
+                                                newText: ` :${casing.attr === types_1.AttrNameCasing.Kebab ? (0, language_core_1.hyphenateAttr)(requiredProp) : requiredProp}=`,
+                                            }],
+                                    });
                                 }
+                                current = undefined;
+                            }
+                        }
+                        if (token === html.TokenType.AttributeName || token === html.TokenType.AttributeValue) {
+                            if (current) {
+                                current.insertOffset = scanner.getTokenOffset() + scanner.getTokenLength();
                             }
                         }
                     }
@@ -267,7 +289,6 @@ function create(mode, ts, getTsPluginClient) {
                     if (!isSupportedDocument(document)) {
                         return;
                     }
-                    const originalResult = await baseServiceInstance.provideDiagnostics?.(document, token);
                     const uri = vscode_uri_1.URI.parse(document.uri);
                     const decoded = context.decodeEmbeddedDocumentUri(uri);
                     const sourceScript = decoded && context.language.scripts.get(decoded[0]);
@@ -275,12 +296,13 @@ function create(mode, ts, getTsPluginClient) {
                     if (!virtualCode) {
                         return;
                     }
-                    const code = context.language.scripts.get(decoded[0])?.generated?.root;
-                    if (!(code instanceof language_core_1.VueVirtualCode)) {
+                    const root = sourceScript?.generated?.root;
+                    if (!(root instanceof language_core_1.VueVirtualCode)) {
                         return;
                     }
+                    const originalResult = await baseServiceInstance.provideDiagnostics?.(document, token);
                     const templateErrors = [];
-                    const { template } = code._sfc;
+                    const { template } = root._sfc;
                     if (template) {
                         for (const error of template.errors) {
                             onCompilerError(error, 1);
@@ -323,20 +345,23 @@ function create(mode, ts, getTsPluginClient) {
                     if (!languageService) {
                         return;
                     }
-                    const decoded = context.decodeEmbeddedDocumentUri(vscode_uri_1.URI.parse(document.uri));
+                    const uri = vscode_uri_1.URI.parse(document.uri);
+                    const decoded = context.decodeEmbeddedDocumentUri(uri);
                     const sourceScript = decoded && context.language.scripts.get(decoded[0]);
-                    if (!sourceScript
-                        || !(sourceScript.generated?.root instanceof language_core_1.VueVirtualCode)
-                        || !sourceScript.generated.root._sfc.template) {
-                        return [];
+                    const root = sourceScript?.generated?.root;
+                    if (!(root instanceof language_core_1.VueVirtualCode)) {
+                        return;
+                    }
+                    const { template } = root._sfc;
+                    if (!template) {
+                        return;
                     }
-                    const { template } = sourceScript.generated.root._sfc;
                     const spans = common_1.getComponentSpans.call({
                         files: context.language.scripts,
                         languageService,
                         typescript: ts,
                         vueOptions: vueCompilerOptions,
-                    }, sourceScript.generated.root, template, {
+                    }, root, template, {
                         start: document.offsetAt(range.start),
                         length: document.offsetAt(range.end) - document.offsetAt(range.start),
                     });
@@ -362,7 +387,7 @@ function create(mode, ts, getTsPluginClient) {
                             continue;
                         }
                         if (specialTags.has(tag.name)) {
-                            tag.name = parseItemKey('specialTag', tag.name, '');
+                            tag.name = generateItemKey('specialTag', tag.name, '');
                         }
                         else if (casing.tag === types_1.TagNameCasing.Kebab) {
                             tag.name = (0, language_core_1.hyphenateTag)(tag.name);
@@ -411,7 +436,7 @@ function create(mode, ts, getTsPluginClient) {
                                 }
                             }
                             for (const binding of scriptSetupRanges?.bindings ?? []) {
-                                const name = vueCode._sfc.scriptSetup.content.substring(binding.start, binding.end);
+                                const name = vueCode._sfc.scriptSetup.content.slice(binding.range.start, binding.range.end);
                                 if (casing.tag === types_1.TagNameCasing.Kebab) {
                                     names.add((0, language_core_1.hyphenateTag)(name));
                                 }
@@ -444,7 +469,9 @@ function create(mode, ts, getTsPluginClient) {
                                 return [];
                             }
                             const { attrs, propsInfo, events } = tagInfo;
-                            const props = propsInfo.map(prop => prop.name);
+                            const props = propsInfo.map(prop => (0, language_core_1.hyphenateTag)(prop.name).startsWith('on-vnode-')
+                                ? 'onVue:' + prop.name.slice('onVnode'.length)
+                                : prop.name);
                             const attributes = [];
                             const _tsCodegen = language_core_1.tsCodegen.get(vueCode._sfc);
                             if (_tsCodegen) {
@@ -456,8 +483,8 @@ function create(mode, ts, getTsPluginClient) {
                                     return [];
                                 }
                                 let ctxVars = [
-                                    ..._tsCodegen.scriptRanges.get()?.bindings.map(binding => vueCode._sfc.script.content.substring(binding.start, binding.end)) ?? [],
-                                    ..._tsCodegen.scriptSetupRanges.get()?.bindings.map(binding => vueCode._sfc.scriptSetup.content.substring(binding.start, binding.end)) ?? [],
+                                    ..._tsCodegen.scriptRanges.get()?.bindings.map(({ range }) => vueCode._sfc.script.content.slice(range.start, range.end)) ?? [],
+                                    ..._tsCodegen.scriptSetupRanges.get()?.bindings.map(({ range }) => vueCode._sfc.scriptSetup.content.slice(range.start, range.end)) ?? [],
                                     ...templateContextProps,
                                 ];
                                 ctxVars = [...new Set(ctxVars)];
@@ -477,7 +504,7 @@ function create(mode, ts, getTsPluginClient) {
                                     const propNameBase = name.startsWith('on-')
                                         ? name.slice('on-'.length)
                                         : (name['on'.length].toLowerCase() + name.slice('onX'.length));
-                                    const propKey = parseItemKey('componentEvent', isGlobal ? '*' : tag, propNameBase);
+                                    const propKey = generateItemKey('componentEvent', isGlobal ? '*' : tag, propNameBase);
                                     attributes.push({
                                         name: 'v-on:' + propNameBase,
                                         description: propKey,
@@ -488,7 +515,7 @@ function create(mode, ts, getTsPluginClient) {
                                 }
                                 else {
                                     const propName = name;
-                                    const propKey = parseItemKey('componentProp', isGlobal ? '*' : tag, propName);
+                                    const propKey = generateItemKey('componentProp', isGlobal ? '*' : tag, propName);
                                     const propDescription = propsInfo.find(prop => {
                                         const name = casing.attr === types_1.AttrNameCasing.Camel ? prop.name : (0, language_core_1.hyphenateAttr)(prop.name);
                                         return name === propName;
@@ -510,7 +537,7 @@ function create(mode, ts, getTsPluginClient) {
                             }
                             for (const event of events) {
                                 const name = casing.attr === types_1.AttrNameCasing.Camel ? event : (0, language_core_1.hyphenateAttr)(event);
-                                const propKey = parseItemKey('componentEvent', tag, name);
+                                const propKey = generateItemKey('componentEvent', tag, name);
                                 attributes.push({
                                     name: 'v-on:' + name,
                                     description: propKey,
@@ -523,17 +550,17 @@ function create(mode, ts, getTsPluginClient) {
                             for (const prop of [...props, ...attrs]) {
                                 if (prop.startsWith('onUpdate:')) {
                                     const isGlobal = !propsSet.has(prop);
-                                    models.push([isGlobal, prop.substring('onUpdate:'.length)]);
+                                    models.push([isGlobal, prop.slice('onUpdate:'.length)]);
                                 }
                             }
                             for (const event of events) {
                                 if (event.startsWith('update:')) {
-                                    models.push([false, event.substring('update:'.length)]);
+                                    models.push([false, event.slice('update:'.length)]);
                                 }
                             }
                             for (const [isGlobal, model] of models) {
                                 const name = casing.attr === types_1.AttrNameCasing.Camel ? model : (0, language_core_1.hyphenateAttr)(model);
-                                const propKey = parseItemKey('componentProp', isGlobal ? '*' : tag, name);
+                                const propKey = generateItemKey('componentProp', isGlobal ? '*' : tag, name);
                                 attributes.push({
                                     name: 'v-model:' + name,
                                     description: propKey,
@@ -558,30 +585,35 @@ function create(mode, ts, getTsPluginClient) {
                 };
             }
             function afterHtmlCompletion(completionList, document) {
-                const replacement = getReplacement(completionList, document);
-                if (replacement) {
-                    const isEvent = replacement.text.startsWith('v-on:') || replacement.text.startsWith('@');
-                    const isProp = replacement.text.startsWith('v-bind:') || replacement.text.startsWith(':');
-                    const isModel = replacement.text.startsWith('v-model:') || replacement.text.split('.')[0] === 'v-model';
+                do {
+                    const replacement = getReplacement(completionList, document);
+                    if (!replacement) {
+                        break;
+                    }
                     const hasModifier = replacement.text.includes('.');
-                    const validModifiers = isEvent ? eventModifiers
-                        : isProp ? propModifiers
+                    if (!hasModifier) {
+                        break;
+                    }
+                    const [text, ...modifiers] = replacement.text.split('.');
+                    const isVOn = text.startsWith('v-on:') || text.startsWith('@') && text.length > 1;
+                    const isVBind = text.startsWith('v-bind:') || text.startsWith(':') && text.length > 1;
+                    const isVModel = text.startsWith('v-model:') || text === 'v-model';
+                    const validModifiers = isVOn ? vOnModifiers
+                        : isVBind ? vBindModifiers
                             : undefined;
-                    const modifiers = replacement.text.split('.').slice(1);
-                    const textWithoutModifier = replacement.text.split('.')[0];
-                    if (validModifiers && hasModifier) {
+                    if (validModifiers) {
                         for (const modifier in validModifiers) {
                             if (modifiers.includes(modifier)) {
                                 continue;
                             }
-                            const modifierDes = validModifiers[modifier];
-                            const insertText = textWithoutModifier + modifiers.slice(0, -1).map(m => '.' + m).join('') + '.' + modifier;
+                            const description = validModifiers[modifier];
+                            const insertText = text + modifiers.slice(0, -1).map(m => '.' + m).join('') + '.' + modifier;
                             const newItem = {
                                 label: modifier,
                                 filterText: insertText,
                                 documentation: {
                                     kind: 'markdown',
-                                    value: modifierDes,
+                                    value: description,
                                 },
                                 textEdit: {
                                     range: replacement.textEdit.range,
@@ -592,12 +624,12 @@ function create(mode, ts, getTsPluginClient) {
                             completionList.items.push(newItem);
                         }
                     }
-                    else if (hasModifier && isModel) {
+                    else if (isVModel) {
                         for (const modifier of modelData.globalAttributes ?? []) {
                             if (modifiers.includes(modifier.name)) {
                                 continue;
                             }
-                            const insertText = textWithoutModifier + modifiers.slice(0, -1).map(m => '.' + m).join('') + '.' + modifier.name;
+                            const insertText = text + modifiers.slice(0, -1).map(m => '.' + m).join('') + '.' + modifier.name;
                             const newItem = {
                                 label: modifier.name,
                                 filterText: insertText,
@@ -615,7 +647,7 @@ function create(mode, ts, getTsPluginClient) {
                             completionList.items.push(newItem);
                         }
                     }
-                }
+                } while (0);
                 completionList.items = completionList.items.filter(item => !specialTags.has(parseLabel(item.label).name));
                 const htmlDocumentations = new Map();
                 for (const item of completionList.items) {
@@ -625,29 +657,30 @@ function create(mode, ts, getTsPluginClient) {
                     }
                 }
                 for (const item of completionList.items) {
-                    const resolvedLabelKey = resolveItemKey(item.label);
-                    if (resolvedLabelKey) {
-                        const name = resolvedLabelKey.tag;
-                        item.label = resolvedLabelKey.leadingSlash ? '/' + name : name;
+                    const parsedLabelKey = parseItemKey(item.label);
+                    if (parsedLabelKey) {
+                        const name = parsedLabelKey.tag;
+                        item.label = parsedLabelKey.leadingSlash ? '/' + name : name;
+                        const text = parsedLabelKey.leadingSlash ? `/${name}>` : name;
                         if (item.textEdit) {
-                            item.textEdit.newText = name;
+                            item.textEdit.newText = text;
                         }
                         ;
                         if (item.insertText) {
-                            item.insertText = name;
+                            item.insertText = text;
                         }
                         if (item.sortText) {
-                            item.sortText = name;
+                            item.sortText = text;
                         }
                     }
                     const itemKeyStr = typeof item.documentation === 'string' ? item.documentation : item.documentation?.value;
-                    let resolvedKey = itemKeyStr ? resolveItemKey(itemKeyStr) : undefined;
-                    if (resolvedKey) {
+                    let parsedItemKey = itemKeyStr ? parseItemKey(itemKeyStr) : undefined;
+                    if (parsedItemKey) {
                         const documentations = [];
-                        if (tsDocumentations.has(resolvedKey.prop)) {
-                            documentations.push(tsDocumentations.get(resolvedKey.prop));
+                        if (tsDocumentations.has(parsedItemKey.prop)) {
+                            documentations.push(tsDocumentations.get(parsedItemKey.prop));
                         }
-                        let { isEvent, propName } = getPropName(resolvedKey);
+                        let { isEvent, propName } = getPropName(parsedItemKey);
                         if (isEvent) {
                             // click -> onclick
                             propName = 'on' + propName;
@@ -667,14 +700,15 @@ function create(mode, ts, getTsPluginClient) {
                     }
                     else {
                         let propName = item.label;
-                        const isVBind = propName.startsWith('v-bind:') ? (propName = propName.slice('v-bind:'.length), true) : false;
-                        const isVBindAbbr = propName.startsWith(':') && propName !== ':' ? (propName = propName.slice(':'.length), true) : false;
-                        /**
-                         * for `is`, `key` and `ref` starting with `v-bind:` or `:`
-                         * that without `internalItemId`.
-                         */
-                        if (isVBind || isVBindAbbr) {
-                            resolvedKey = {
+                        for (const str of ['v-bind:', ':']) {
+                            if (propName.startsWith(str) && propName !== str) {
+                                propName = propName.slice(str.length);
+                                break;
+                            }
+                        }
+                        // for special props without internal item key
+                        if (specialProps.has(propName)) {
+                            parsedItemKey = {
                                 type: 'componentProp',
                                 tag: '^',
                                 prop: propName,
@@ -693,27 +727,26 @@ function create(mode, ts, getTsPluginClient) {
                         }
                     }
                     const tokens = [];
-                    if (item.kind === 10 && lastCompletionComponentNames.has((0, language_core_1.hyphenateTag)(item.label))) {
+                    if (item.kind === 10
+                        && lastCompletionComponentNames.has((0, language_core_1.hyphenateTag)(item.label))) {
                         item.kind = 6;
                         tokens.push('\u0000');
                     }
-                    else if (resolvedKey) {
-                        const isComponent = resolvedKey.tag !== '*';
-                        const { isEvent, propName } = getPropName(resolvedKey);
-                        if (resolvedKey.type === 'componentProp') {
+                    else if (parsedItemKey) {
+                        const isComponent = parsedItemKey.tag !== '*';
+                        const { isEvent, propName } = getPropName(parsedItemKey);
+                        if (parsedItemKey.type === 'componentProp') {
                             if (isComponent || specialProps.has(propName)) {
                                 item.kind = 5;
                             }
                         }
                         else if (isEvent) {
                             item.kind = 23;
-                            if (propName.startsWith('vnode-')) {
+                            if (propName.startsWith('vue:')) {
                                 tokens.push('\u0004');
                             }
                         }
-                        if (isComponent
-                            || (isComponent && isEvent)
-                            || specialProps.has(propName)) {
+                        if (isComponent || specialProps.has(propName)) {
                             tokens.push('\u0000');
                             if (item.label.startsWith(':')) {
                                 tokens.push('\u0001');
@@ -724,9 +757,12 @@ function create(mode, ts, getTsPluginClient) {
                             else if (item.label.startsWith('v-bind:')) {
                                 tokens.push('\u0003');
                             }
-                            else if (item.label.startsWith('v-on:')) {
+                            else if (item.label.startsWith('v-model:')) {
                                 tokens.push('\u0004');
                             }
+                            else if (item.label.startsWith('v-on:')) {
+                                tokens.push('\u0005');
+                            }
                             else {
                                 tokens.push('\u0000');
                             }
@@ -738,10 +774,6 @@ function create(mode, ts, getTsPluginClient) {
                             }
                         }
                     }
-                    else if (specialProps.has(item.label)) {
-                        item.kind = 5;
-                        tokens.push('\u0000', '\u0000', '\u0001');
-                    }
                     else if (item.label === 'v-if'
                         || item.label === 'v-else-if'
                         || item.label === 'v-else'
@@ -818,13 +850,13 @@ function parseLabel(label) {
         leadingSlash
     };
 }
-function parseItemKey(type, tag, prop) {
+function generateItemKey(type, tag, prop) {
     return '__VLS_data=' + type + ',' + tag + ',' + prop;
 }
 function isItemKey(key) {
     return key.startsWith('__VLS_data=');
 }
-function resolveItemKey(key) {
+function parseItemKey(key) {
     const { leadingSlash, name } = parseLabel(key);
     if (isItemKey(name)) {
         const strs = name.slice('__VLS_data='.length).split(',');