prism-code-editor/dist/extensions/autocomplete/vue/index.js

Lightweight, extensible code editor component for the web using Prism

import { a as completionsFromRecords, r as attrSnippet, s as optionsFromKeys } from "../../../tooltip-DK28z7kK.js";
import { j as htmlTags, k as globalHtmlAttributes } from "../../../data-D3rZBQN4.js";
import { a as globalSvgAttributes, o as svgTags, t as getTagMatch } from "../../../markup-BZUbLzBd.js";
//#region src/extensions/autocomplete/vue/index.ts
/** @module autocomplete/vue */
var createCompletion = (label, icon, boost) => ({
	label,
	icon,
	boost
});
var tagNames = completionsFromRecords([htmlTags, svgTags], "property");
var langs = {
	script: [
		"js",
		"ts",
		"jsx",
		"tsx"
	],
	style: [
		"css",
		"scss",
		"sass",
		"stylus",
		"less"
	]
};
var eventModifiers = [
	".stop",
	".prevent",
	".self",
	".capture",
	".once",
	".passive",
	".left",
	".right",
	".middle"
].map((modifier) => createCompletion(modifier, "enum"));
var modelModifiers = [
	".lazy",
	".number",
	".trim"
].map((modifier) => createCompletion(modifier, "enum"));
var bindModifiers = [
	".camel",
	".prop",
	".attr"
].map((modifier) => createCompletion(modifier, "enum"));
var enumerateAttrs = (attrs, result = [], noEvents, boost) => {
	for (let attr in attrs) if (attr.slice(0, 2) == "on") {
		if (!noEvents) result.push(attrSnippet("@" + attr.slice(2), "\"\"", "event", boost), attrSnippet("v-on:" + attr.slice(2), "\"\"", "event", boost));
	} else result.push(createCompletion(attr, "enum", boost), attrSnippet(":" + attr, "\"\"", "enum", boost), attrSnippet("v-bind:" + attr, "\"\"", "enum", boost));
	return result;
};
var vueAttrs = enumerateAttrs({
	key: null,
	ref: null
});
var globalsNoEvents = enumerateAttrs(globalHtmlAttributes, [], true);
/**
* Completion source that adds completion for HTML and SVG tags to Vue. When configured,
* it can also provide completions for specific Vue components.
* @param components Used to configure autocompletion for Vue components. This is an
* object mapping each component's name to the properties available for that component.
* To provide completions for events, prefix them with `on`. E.g. `onevent` will result
* in completions for `@event` and `v-on:event`. Camel cased props are not converted to
* kebab case.
* @param nestedSource Completion source that will be used whenever the completion isn't
* happening inside a tag. Can be used to provide completions for snippets for example.
*/
var vueCompletion = (components, nestedSource) => (context, editor) => {
	const tagMatch = getTagMatch(context, editor);
	if (tagMatch) {
		let [tag, tagName, lastAttr] = tagMatch;
		let start = tagMatch.index;
		let from = start + 1;
		let options;
		if (/\s/.test(tag)) {
			let inAttrValue = /=\s*(?:"[^"]*|'[^']*|[^\s"'=]*)$/.test(tag);
			let i = 0;
			from = start + tag.search(/[^\s"'=]*$/);
			for (;; i++) {
				let tags = i ? i > 1 ? components : svgTags : htmlTags;
				let globalAttrs = i ? i > 1 ? null : globalSvgAttributes : globalHtmlAttributes;
				let tagAttrs = tags?.[tagName];
				if (tagAttrs || i > 1) {
					if (inAttrValue) options = (lastAttr == "lang" ? langs[tagName] : globalAttrs?.[lastAttr] || tagAttrs?.[lastAttr])?.map((val) => createCompletion(val, "unit"));
					else if (lastAttr?.includes(".")) {
						if (/^@|^v-on:/.test(lastAttr)) options = eventModifiers;
						else if (lastAttr.slice(0, 6) == "v-bind") options = bindModifiers;
						else if (lastAttr.slice(0, 7) == "v-model") options = modelModifiers;
						from = start + tag.lastIndexOf(".");
					} else {
						options = [];
						if (tagAttrs) enumerateAttrs(tagAttrs, options, false, globalAttrs ? 0 : 50);
						if (globalAttrs) enumerateAttrs(globalAttrs, options);
						else options.push(...globalsNoEvents);
						options.push(...vueAttrs);
					}
					break;
				}
			}
		} else options = components ? tagNames.concat(optionsFromKeys(components, "property")) : tagNames;
		if (options) return {
			from,
			options
		};
	}
	if (tagMatch != false) return nestedSource?.(context, editor);
};
[
	"bind",
	"cloak",
	"html",
	"memo",
	"model",
	"on",
	"once",
	"pre",
	"show",
	"slot",
	"text",
	"else",
	"else-if",
	"for",
	"if"
].forEach((directive, i) => {
	vueAttrs.push(createCompletion("v-" + directive, i > 10 ? "keyword" : "function"));
});
//#endregion
export { vueCompletion };

//# sourceMappingURL=index.js.map