var lesson = {
	files: [
		{
			name: "main",
			content: "// @ts-nocheck\nimport { render } from \"solid-js/web\";\nimport { createSignal, Show } from \"solid-js\";\nimport clickOutside from \"./click-outside\";\nimport \"./style.css\";\n\nfunction App() {\n  const [show, setShow] = createSignal(false);\n\n  return (\n    <Show\n      when={show()}\n      fallback={<button onClick={(e) => setShow(true)}>Open Modal</button>}\n    >\n      <div class=\"modal\">\n        Some Modal\n      </div>\n    </Show>\n  );\n}\n\nrender(() => <App />, document.getElementById(\"app\"));\n"
		},
		{
			name: "click-outside",
			content: "import { onCleanup } from \"solid-js\";\n\nexport default function clickOutside(el, accessor) {\n  // implement here\n}\n"
		},
		{
			name: "style",
			type: "css",
			content: ".modal {\n  padding: 16px;\n  border: 1px solid #444;\n  box-shadow: 4px 4px #88888866;\n}"
		}
	]
};
var solved = {
	files: [
		{
			name: "main",
			content: "// @ts-nocheck\nimport { render } from \"solid-js/web\";\nimport { createSignal, Show } from \"solid-js\";\nimport clickOutside from \"./click-outside\";\nimport \"./style.css\";\n\nfunction App() {\n  const [show, setShow] = createSignal(false);\n\n  return (\n    <Show\n      when={show()}\n      fallback={<button onClick={(e) => setShow(true)}>Open Modal</button>}\n    >\n      <div class=\"modal\" use:clickOutside={() => setShow(false)}>\n        Some Modal\n      </div>\n    </Show>\n  );\n}\n\nrender(() => <App />, document.getElementById(\"app\"));\n"
		},
		{
			name: "click-outside",
			content: "import { onCleanup } from \"solid-js\";\n\nexport default function clickOutside(el, accessor) {\n  const onClick = (e) => !el.contains(e.target) && accessor()?.();\n  document.body.addEventListener(\"click\", onClick);\n\n  onCleanup(() => document.body.removeEventListener(\"click\", onClick));\n}\n"
		},
		{
			name: "style",
			type: "css",
			content: ".modal {\n  padding: 16px;\n  border: 1px solid #444;\n  box-shadow: 4px 4px #88888866;\n}"
		}
	]
};
var markdown = "Solid 通过 `use:` 命名空间支持自定义指令。但这只是 `ref` 一个有用的语法糖，类似于原生的绑定，并且可以在同一个元素上有多个绑定而不会发生冲突。这可以让我们更好地利用可重用 DOM 元素行为。\n\n自定义指令只是形式为 `(element, valueAccesor)` 的函数，其中 `valueAccessor` 是一个获取绑定值的函数。只要函数是在作用域中导入的，你就可以通过 `use:` 使用它。\n\n> 重要提示：`use:` 需要被编译器检测并进行转换，并且函数需要在作用域内，因此不能作为传值的一部分或在组件上使用。\n\n在这个例子中，我们将为点击外部行为制作一个简单的封装函数来关闭弹出窗口或模态框。首先，我们需要在我们的元素上导入并使用我们的 `clickOutside` 指令。\n\n```jsx\n<div class=\"modal\" use:clickOutside={() => setShow(false)}>\n  Some Modal\n</div>\n```\n\n打开 `click-outside.tsx`，我们将在这里定义我们的自定义指令。该指令需要定义了一个单击事件处理程序，将其绑定到 body 并在需要时进行清理。\n\n```jsx\nexport default function clickOutside(el, accessor) {\n  const onClick = (e) => !el.contains(e.target) && accessor()?.();\n  document.body.addEventListener(\"click\", onClick);\n\n  onCleanup(() => document.body.removeEventListener(\"click\", onClick));\n}\n```\n\n现在你应该能够在打开和关闭模态框之间来回切换。\n";
var bindings_directives = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

export { bindings_directives as default, lesson, markdown, solved };
