chore(data-grid): add vue examples (VIV-2920)

apps/docs/eleventy.config.js

@@ -53,7 +53,17 @@ module.exports = async (eleventyConfig) => {
 
 	eleventyConfig.addPlugin(EleventyVitePlugin.default, {
 		viteOptions: {
-			plugins: [vue()],
+			plugins: [
+				vue({
+					template: {
+						compilerOptions: {
+							// 'preserve' will keep all whitespace
+							// 'condense' (default) removes whitespace between tags
+							whitespace: 'preserve',
+						},
+					},
+				}),
+			],
 			build: {
 				emptyOutDir: true,
 			},

libs/components/metadata.json

@@ -2515,6 +2515,69 @@
 				"refs": [{ "name": "control", "args": ["shadow", "input.control"] }]
 			}
 		},
+		{
+			"name": "contextual-help",
+			"className": "ContextualHelp",
+			"registerFunctionName": "registerContextualHelp",
+			"description": "",
+			"props": [
+				{
+					"name": "placement",
+					"description": "Placement of the toggletip",
+					"type": "'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end'",
+					"attributeName": "placement",
+					"propertyName": "placement"
+				}
+			],
+			"events": [
+				{
+					"name": "blur",
+					"description": "Fires when the element loses focus.",
+					"type": "FocusEvent"
+				},
+				{
+					"name": "click",
+					"description": "Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.",
+					"type": "MouseEvent"
+				},
+				{
+					"name": "focus",
+					"description": "Fires when the element receives focus.",
+					"type": "FocusEvent"
+				},
+				{
+					"name": "input",
+					"description": "Fires when the value of an element has been changed.",
+					"type": "Event"
+				},
+				{
+					"name": "keydown",
+					"description": "Fires when a key is pressed.",
+					"type": "KeyboardEvent"
+				},
+				{
+					"name": "keyup",
+					"description": "Fires when a key is released.",
+					"type": "KeyboardEvent"
+				}
+			],
+			"vueModels": [],
+			"methods": [],
+			"slots": [
+				{ "name": "default", "description": "Default slot." },
+				{ "name": "icon", "description": "Custom icon slot (optional)." }
+			],
+			"testUtils": {
+				"selectors": [{ "name": "byTestId", "args": ["byTestId"] }],
+				"actions": [
+					{ "name": "hover", "args": ["hover", "#locator"] },
+					{ "name": "focus", "args": ["focus", "#locator"] },
+					{ "name": "blur", "args": ["blur", "#locator"] }
+				],
+				"queries": [],
+				"refs": []
+			}
+		},
 		{
 			"name": "data-grid",
 			"className": "DataGrid",