{"_id":"@deboxsoft/svelte-overlay","_rev":"1-e1b21aa79f6839431789ba5032c6654e","name":"@deboxsoft/svelte-overlay","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@deboxsoft/svelte-overlay","version":"0.0.1","description":"Svelte Overlay component. Great for creating dropdowns, tooltips and popovers","devDependencies":{"@babel/core":"7.9.6","@babel/plugin-syntax-dynamic-import":"7.8.3","@babel/plugin-transform-runtime":"7.9.6","@babel/preset-env":"7.9.6","@testing-library/cypress":"6.0.0","autoprefixer":"9.7.6","cypress":"4.5.0","dotenv":"8.2.0","eslint":"7.0.0","eslint-config-prettier":"6.11.0","eslint-plugin-cypress":"2.10.3","eslint-plugin-svelte3":"2.7.3","husky":"4.2.5","lint-staged":"10.2.2","postcss":"7.0.30","postcss-load-config":"2.1.0","prettier":"2.0.5","rollup":"2.10.2","rollup-plugin-babel":"4.4.0","rollup-plugin-commonjs":"10.1.0","rollup-plugin-livereload":"1.3.0","rollup-plugin-node-resolve":"5.2.0","rollup-plugin-svelte":"5.2.1","rollup-plugin-terser":"5.3.0","sirv-cli":"0.4.5","start-server-and-test":"1.11.0","svelte":"3.22.2","svelte-preprocess":"3.7.4"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{html, css, scss, stylus, js, ts, json, yml, md}":["prettier --write","git add"],"*.{js, svelte}":["eslint --fix","git add"]},"main":"dist/index.min.js","module":"dist/index.min.mjs","scripts":{"build":"rollup -c","cy:open":"cypress open","cy:run":"cypress run","dev":"rollup -c -w","lint":"eslint --color --ignore-path .gitignore .","prepublishOnly":"npm run build","start":"sirv public","test":"start-server-and-test dev http://localhost:5000 cy:run"},"svelte":"src/components/components.module.js","gitHead":"4bb099dc2028c3f8fd01b35b0f989d49a9cf6fe1","_id":"@deboxsoft/svelte-overlay@0.0.1","_nodeVersion":"14.17.1","_npmVersion":"7.18.1","dist":{"integrity":"sha512-OXznP0i6tJi6bDU4ez2+hOHev3LfW1702nHqpUKErINyLTF4AKGdyoYOaQubMmbGXwea9b0hYzX2+4CzggTFaQ==","shasum":"212768ed9f9eba453c2bf1e5c89e77c9570039b2","tarball":"https://registry.npmjs.org/@deboxsoft/svelte-overlay/-/svelte-overlay-0.0.1.tgz","fileCount":10,"unpackedSize":185432,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg4R+JCRA9TVsSAnZWagAA8zMQAJ7UX1LuO0BloXOnbehf\nzjtYoDKA0dwVifqRFtpTn5cotnQcb+XUH3dhoxT5h7o1DoFBZOR87BbnX3Nh\nJnLwhw8xSTsN/AEylj1MAWnCBYKFj08LnDmOC/L9X3R9tcmLPSjGTf6Kp1Bo\nRsJP0rnoT9wiXiGrQ9dtXCf1Cx0/8ToZ+/PapkKR0BDVl5JjwJr+AteA7Ej7\nbsGrM2ZHiELwHm74blLdRe4SdzQoeWqqWuFFUqFpNXs10bmWsa5pDP6N6Ydq\nZFMxJW8w1aFqUYGNq77O5u5MkweOP2Q6ixVlyhEnSx+SO1w5B8Tc4g8X6kdn\ng0utpi6mmYmSUVMRzkLgeFiMJL7jSXd0EH9ZhLIXS2QrQoLdgkDiptDUjHi+\nSaFULsWNj7hTIQIBPPWCQHLEhdQu81G2WtdqrxbRbLp1PYn3q3pJZIKV72/X\nsjiDxDGn90ilR0iX6NQvjLRx4JZohLtpHCtu3FTbFL9Hly16DXmCM3iFXgUG\nZDIsoJyriWkKYDMDve9tPkE+s0eRMMAtkx33/DkuA5our/TP9AGhh5x3PzMN\npKuQILIS6TnooVC6GTSW9MKLoETYbNaBoKSTQ/p7TREAgo1H7utnaIeRUcuZ\nGOpHGHQ+kLhjhFOGzQyU38C8fH6g5pZLbBkm/QEelAFUeDO0coL8DV0PcIW5\nHd25\r\n=Xig2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD9tmgH/5qN2WvgFRv9QtUMdhtctaqpNwTDnV51vGH63wIhALsWkLIPbmRxgq41W4nZnsMtCPDG7IkqmwiMuJgX3YxQ"}]},"_npmUser":{"name":"nurdiansyah","email":"deboxserver@gmail.com"},"directories":{},"maintainers":[{"name":"nurdiansyah","email":"deboxserver@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-overlay_0.0.1_1625366408921_0.05723297241534642"},"_hasShrinkwrap":false}},"time":{"created":"2021-07-04T02:40:08.739Z","0.0.1":"2021-07-04T02:40:09.066Z","modified":"2022-04-05T03:32:38.445Z"},"maintainers":[{"name":"nurdiansyah","email":"deboxserver@gmail.com"}],"description":"Svelte Overlay component. Great for creating dropdowns, tooltips and popovers","readme":"# Svelte overlay\n\n> Fully customizable Svelte overlay which fits to available space\n\n> Great for creating dropdowns, tooltips and popovers\n\nSvelte overlay is wrapper copmponent which makes all difficult stuff for you, but you decide when to open/close it and how it looks.\n\n## Features\n- may be nested\n- if content has not enough space on one side it will try to render on other side. For instance if position is set to `top-left` and there's no room on top position will be set to `bottom-left`. This feature listens to window resize event\n- may be open/closed on every trigger and content event or from outside\n- you decide how trigger and content looks\n- may be closed on click outside, window keydown, or body scroll\n- may update position on scroll\n- dispatches toggle event when open state changed\n\n[![License](http://img.shields.io/:license-mit-blue.svg)](http://doge.mit-license.org)\n\n## Example [REPL](https://svelte.dev/repl/59ae56c6e9f544c7a098bb961843a310?version=3.22.2)\n\n```javascript\n<script>\n  import Overlay from 'svelte-overlay';\n</script>\n\n<Overlay>\n\n  <!-- TRIGGER -->\n  <button slot=\"parent\" let:toggle on:click={toggle}>\n    Click Me!\n  </button>\n\n  <!-- CONTENT -->\n  <div slot=\"content\">\n    Lorem ipsum dolor sit.\n  </div>\n\n</Overlay>\n```\n---\n\n![Positions](https://j.gifs.com/p8P3v6.gif)\n\n---\n\n![It fits](https://j.gifs.com/JyRogo.gif)\n\n## Installation\n\n```npm install --save svelte-overlay```\n\nor\n\n```yarn add svelte-overlay```\n\n---\n## Props\n\n**Important**\nTo get it work component requires two slots:\n- `parent`\n- `content`\n\n**Overlay props**\n\n| Prop name | Type | Default | Description |\n| --- |  --- | --- | --- |\n| isOpen | Boolean | false | isOpen state |\n| position | String | `bottom-right` | `top-left`<br />`top-center`<br />`top-right`<br />`bottom-left`<br />`bottom-center`<br />`bottom-right`<br />`left-top`<br />`left-center`<br />`left-bottom`<br />`right-top`<br />`right-center`<br />`right-bottom`<br /><br />Uses default position when wrong position was passed.<br/> You may import array of all positions with:<br /> ``` import { positions } from 'svelte-overlay'; ``` |\n| zIndex | Number | 1 | value of z-index for overlay and content |\n| class | string | \"\" | global class name |\n| style | string | \"\" | style string which will be added at the end of component style attribute |\n| closeOnClickOutside | Boolean | false | if true - click outside will close overlay |\n| closeOnScroll | Boolean | false | if true - scrolling outside content will close overlay |\n| updateOnScroll | Boolean | false | if true - scrolling will update content position |\n| onWindowKeyDown | Function | undefined | triggers when overlay is opened and user hit any button.<br/>Gets Event as first argument and object of { open, close, toggle, isOpen } |\n| on:toggle | Function | undefined | Event dispatched on overlay toggle.<br/>Gets Event as first argument and object of { open, close, toggle, isOpen } |\n\n**slot props**\n\nEach slot gets theese props, available through let:propName\n\n| Prop name | Type | Description |\n| --- |  --- | --- |\n| isOpen | Boolean | isOpen state |\n| toggle | Function | allows to toggle open state. Gets current isOpen value as argument |\n| open | Function | allows to open overlay |\n| close | Function | allows to close overlay |\n\n---\n\n## Usage\n\n### Close on escape keydown and click outside [REPL](https://svelte.dev/repl/08a2a569d1354426ab747445ece60fcb?version=3.22.2)\n\n```javascript\n<script>\n  import Overlay from 'svelte-overlay';\n\tlet isOpen = false;\n\t\n\tfunction handleWindowKeyDown(event) {\n\t\tif (event.key === 'Escape') {\n\t\t\tisOpen = false;\t\n\t\t}\n\t}\n</script>\n\n<Overlay\n\tonWindowKeyDown={handleWindowKeyDown}\n\tcloseOnClickOutside\n\tbind:isOpen={isOpen}\n>\n  <button slot=\"parent\" let:toggle on:click={toggle}>\n    Click Me!\n  </button>\n\n  <div slot=\"content\" let:close>\n    <p>Lorem ipsum dolor sit.</p>\n    <button on:click={close}>Close</button>\n  </div>\n\n</Overlay>\n```\n\n### Close from content [REPL](https://svelte.dev/repl/a13dde11268a4ec6a560add54287c8f2?version=3.22.2)\n\n```javascript\n<script>\n  import Overlay from 'svelte-overlay';\n</script>\n\n<Overlay>\n  <button slot=\"parent\" let:toggle on:click={toggle}>\n    Click Me!\n  </button>\n\n  <div slot=\"content\" let:close>\n    <p>Lorem ipsum dolor sit.</p>\n    <button on:click={close}>Close</button>\n  </div>\n\n</Overlay>\n```\n\n---\n### Open/close on mouseenter/mouseleave [REPL](https://svelte.dev/repl/d04cf212c9a8406aad8932ca039634ac?version=3.22.2)\n\n```javascript\n<script>\n  import Overlay from 'svelte-overlay';\n</script>\n\n<Overlay>\n  <button slot=\"parent\" let:open let:close on:mouseenter={open} on:mouseleave={close}>\n    Hover Me!\n  </button>\n\n  <div slot=\"content\">\n    Lorem ipsum dolor sit.\n  </div>\n\n</Overlay>\n```\n\n---\n### Open from outside [REPL](https://svelte.dev/repl/f96379b640d74556bf415ae8d74b2598?version=3.22.2)\n\n```javascript\n<script>\n  import Overlay from 'svelte-overlay';\n  let isOpen = false;\n\n  function toggleFromOutside() {\n    isOpen = !isOpen;\n  }\n</script>\n\n<button on:click={toggleFromOutside}>Toggle from outside</button>\n\n<Overlay bind:isOpen={isOpen} >\n  <div slot=\"parent\">\n    I am a parent\n  </div>\n\n  <div slot=\"content\">\n    Lorem ipsum dolor sit.\n  </div>\n\n</Overlay>\n```\n\n---\n### With backdrop, disabled scroll and animations [REPL](https://svelte.dev/repl/cf3db92312394dd1a6efaf3374118b2c?version=3.22.2)\n\n```javascript\n<script>\n  import Overlay from 'svelte-overlay';\n  import { fly, fade } from 'svelte/transition';\n\n  let isOpen = false;\n\n  function handleToggle(event) {\n    if (event.detail !== isOpen) {\n      isOpen = event.detail;\n      document.body.classList.toggle('no-scroll', isOpen);\n    }\n  }\n</script>\n\n{#if isOpen}\n  <div class=\"backdrop\" transition:fade={{ duration: 200 }}/>\n{/if}\n\n<Overlay\n  on:toggle={handleToggle}\n  closeOnClickOutside\n  zIndex={100}\n  bind:isOpen={isOpen}>\n  <button slot=\"parent\" let:toggle on:click={toggle}>Click Me!</button>\n  <div slot=\"content\" transition:fly={{ y: 5, duration: 200 }} class=\"content\">\n    Lorem ipsum dolor sit.\n  </div>\n</Overlay>\n\n<style>\n  :global(.no-scroll) {\n    overflow: hidden;\n  }\n\n  .backdrop {\n    z-index: 99;\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: rgba(0, 0, 0, 0.2);\n  }\n\n  .content {\n    border: 1px solid #ddd;\n    background: #f7f7f7;\n    padding: 1em;\n    width: max-content;\n  }\n</style>\n\n```\n\n---\n### Nested with click outside and close on esc key [REPL](https://svelte.dev/repl/284b4a09eddc4b64b5bd6734712d30ee?version=3.22.2)\n\n```javascript\n<script>\n  import Overlay from 'svelte-overlay';\n  let isOpen = false;\n\n  function toggleFromOutside() {\n    isOpen = !isOpen;\n  }\n</script>\n\n<button on:click={toggleFromOutside}>Toggle from outside</button>\n\n<Overlay bind:isOpen={isOpen} >\n  <div slot=\"parent\">\n    I am a parent\n  </div>\n\n  <div slot=\"content\">\n    Lorem ipsum dolor sit.\n  </div>\n\n</Overlay>\n```\n\n---\n\n## License\n\n[![License](http://img.shields.io/:license-mit-blue.svg?style=flat-square)](http://badges.mit-license.org)\n\n- **[MIT license](http://opensource.org/licenses/mit-license.php)**\n","readmeFilename":"README.md"}