feat(language-service): autocomplete for props with union type

close #3698

Author: johnsoncodehk

packages/language-service/lib/plugins/vue-template.ts

@@ -312,20 +312,23 @@ export function create(
 							}
 
 							const { attrs, propInfos, events, directives } = tagInfo;
-							const props = propInfos.map(prop =>
-								hyphenateTag(prop.name).startsWith('on-vnode-')
-									? 'onVue:' + prop.name.slice('onVnode'.length)
-									: prop.name
-							);
-							const attributes: html.IAttributeData[] = [];
 
-							const propsSet = new Set(props);
+							for (const prop of propInfos) {
+								if (hyphenateTag(prop.name).startsWith('on-vnode-')) {
+									prop.name = 'onVue:' + prop.name.slice('onVnode'.length);
+								}
+							}
 
-							for (const prop of [...props, ...attrs]) {
+							const attributes: html.IAttributeData[] = [];
+							const propsSet = new Set(propInfos.map(prop => prop.name));
 
-								const isGlobal = !propsSet.has(prop);
-								const name = casing.attr === AttrNameCasing.Camel ? prop : hyphenateAttr(prop);
+							for (const prop of [
+								...propInfos,
+								...attrs.map<ComponentPropInfo>(attr => ({ name: attr })),
+							]) {
 
+								const isGlobal = !propsSet.has(prop.name);
+								const name = casing.attr === AttrNameCasing.Camel ? prop.name : hyphenateAttr(prop.name);
 								const isEvent = hyphenateAttr(name).startsWith('on-');
 
 								if (isEvent) {
@@ -363,6 +366,7 @@ export function create(
 										{
 											name: propName,
 											description: propKey,
+											valueSet: prop.values?.some(value => typeof value === 'string') ? '__deferred__' : undefined,
 										},
 										{
 											name: ':' + propName,
@@ -371,7 +375,7 @@ export function create(
 										{
 											name: 'v-bind:' + propName,
 											description: propKey,
-										}
+										},
 									);
 								}
 							}
@@ -402,10 +406,13 @@ export function create(
 
 							const models: [boolean, string][] = [];
 
-							for (const prop of [...props, ...attrs]) {
-								if (prop.startsWith('onUpdate:')) {
-									const isGlobal = !propsSet.has(prop);
-									models.push([isGlobal, prop.slice('onUpdate:'.length)]);
+							for (const prop of [
+								...propInfos,
+								...attrs.map(attr => ({ name: attr })),
+							]) {
+								if (prop.name.startsWith('onUpdate:')) {
+									const isGlobal = !propsSet.has(prop.name);
+									models.push([isGlobal, prop.name.slice('onUpdate:'.length)]);
 								}
 							}
 							for (const event of events) {

packages/typescript-plugin/lib/requests/getComponentProps.ts

@@ -22,8 +22,6 @@ export function getComponentProps(
 		return;
 	}
 	const vueCode = volarFile.generated.root;
-	const program = languageService.getProgram()!;
-	const checker = program.getTypeChecker();
 	const components = getVariableType(ts, languageService, vueCode, '__VLS_components');
 	if (!components) {
 		return [];
@@ -35,26 +33,16 @@ export function getComponentProps(
 	}
 
 	const result = new Map<string, ComponentPropInfo>();
+	const program = languageService.getProgram()!;
+	const checker = program.getTypeChecker();
 
 	for (const sig of componentType.getCallSignatures()) {
 		const propParam = sig.parameters[0];
 		if (propParam) {
 			const propsType = checker.getTypeOfSymbolAtLocation(propParam, components.node);
 			const props = propsType.getProperties();
 			for (const prop of props) {
-				const name = prop.name;
-				const required = !(prop.flags & ts.SymbolFlags.Optional) || undefined;
-				const {
-					content: commentMarkdown,
-					deprecated
-				} = generateCommentMarkdown(prop.getDocumentationComment(checker), prop.getJsDocTags());
-
-				result.set(name, {
-					name,
-					required,
-					deprecated,
-					commentMarkdown
-				});
+				handlePropSymbol(prop);
 			}
 		}
 	}
@@ -66,27 +54,44 @@ export function getComponentProps(
 			const propsType = checker.getTypeOfSymbolAtLocation(propsSymbol, components.node);
 			const props = propsType.getProperties();
 			for (const prop of props) {
-				if (prop.flags & ts.SymbolFlags.Method) { // #2443
-					continue;
-				}
-				const name = prop.name;
-				const required = !(prop.flags & ts.SymbolFlags.Optional) || undefined;
-				const {
-					content: commentMarkdown,
-					deprecated
-				} = generateCommentMarkdown(prop.getDocumentationComment(checker), prop.getJsDocTags());
-
-				result.set(name, {
-					name,
-					required,
-					deprecated,
-					commentMarkdown
-				});
+				handlePropSymbol(prop);
 			}
 		}
 	}
 
 	return [...result.values()];
+
+	function handlePropSymbol(prop: ts.Symbol) {
+		if (prop.flags & ts.SymbolFlags.Method) { // #2443
+			return;
+		}
+		const name = prop.name;
+		const required = !(prop.flags & ts.SymbolFlags.Optional) || undefined;
+		const {
+			content: commentMarkdown,
+			deprecated,
+		} = generateCommentMarkdown(prop.getDocumentationComment(checker), prop.getJsDocTags());
+		const values: any[] = [];
+		const type = checker.getTypeOfSymbol(prop);
+		const subTypes: ts.Type[] | undefined = (type as any).types;
+
+		if (subTypes) {
+			for (const subType of subTypes) {
+				const value = (subType as any).value;
+				if (value) {
+					values.push(value);
+				}
+			}
+		}
+
+		result.set(name, {
+			name,
+			required,
+			deprecated,
+			commentMarkdown,
+			values,
+		});
+	}
 }
 
 function generateCommentMarkdown(parts: ts.SymbolDisplayPart[], jsDocTags: ts.JSDocTagInfo[]) {