Add new tutorial to examples

site/content/examples/13-actions/00-actions/App.svelte

@@ -0,0 +1,33 @@
+<script>
+	import { clickOutside } from "./click_outside.js";
+
+	let showModal = true;
+
+	function handleOutclick(){
+		showModal = false;
+	}
+</script>
+
+<style>
+	.box {
+		--width: 100px;
+		--height: 100px;
+		position: absolute;
+		width: var(--width);
+		height: var(--height);
+		left: calc(50% - var(--width) / 2);
+		top: calc(50% - var(--height) / 2);
+		border-radius: 4px;
+		background-color: #ff3e00;
+		color: #fff;
+		text-align: center;
+		font-style: bold;
+	}
+</style>
+
+<button on:click={() => (showModal = true)}>Show Modal</button>
+{#if showModal}
+	<div class="box" use:clickOutside on:outclick={handleOutclick}>
+		Click outside me!
+	</div>
+{/if}

site/content/examples/13-actions/00-actions/click_outside.js

@@ -0,0 +1,15 @@
+export function clickOutside(node) {
+	const handleClick = (event) => {
+		if (!node.contains(event.target)) {
+			node.dispatchEvent(new CustomEvent("outclick"));
+		}
+	};
+
+	document.addEventListener("click", handleClick, true);
+
+	return {
+		destroy() {
+			document.removeEventListener("click", handleClick, true);
+		},
+	};
+};

site/content/examples/13-actions/00-actions/meta.json

@@ -0,0 +1,3 @@
+{
+	"title": "The use directive"
+}