feat: added ClickOutside action

packages/svelte-materialify/src/actions/ClickOutside/index.js

@@ -0,0 +1,27 @@
+/**
+ * Click Outside
+ * @param {Node} node
+ */
+export default (node, options = {}) => {
+  const settings = { exclude: [], ...options };
+
+  function checkIfNotClickedOnNode(target) {
+    for (let el = target; el && el !== document; el = el.parentNode) {
+      if (node.isSameNode(el) || settings.exclude.some((x) => x.isSameNode(el))) return false;
+    }
+    return true;
+  }
+
+  function detect({ target }) {
+    const check = checkIfNotClickedOnNode(target);
+    if (check) {
+      node.dispatchEvent(new CustomEvent('clickOutside'));
+    }
+  }
+  document.addEventListener('click', detect, { passive: true });
+  return {
+    destroy() {
+      document.removeEventListener('click', detect);
+    },
+  };
+};

packages/svelte-materialify/src/index.js

@@ -1,3 +1,4 @@
+export { default as ClickOutside } from './actions/ClickOutside';
 export { default as Ripple } from './actions/Ripple';
 export { default as Intersect } from './actions/Intersect';
 export { default as Jump } from './actions/Jump';
@@ -27,6 +28,7 @@ export {
 } from './components/Card';
 export { default as List, ListGroup, ListItem } from './components/List';
 export { default as VirtualList } from './components/VirtualList';
+export { default as Menu } from './components/Menu';
 export { default as Overlay } from './components/Overlay';
 export { default as NavigationDrawer } from './components/NavigationDrawer';
 export { default as Subheader } from './components/Subheader';