feat: added class and style props

README.md

@@ -70,6 +70,8 @@ To get it work component requires two slots:
 | isOpen | Boolean | isOpen state | false |
 | position | String | `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 | `bottom-right` |
 | zIndex | Number | value of z-index for overlay and portaled content | 1 |
+| class | string | global class name | '' |
+| style | string | style string which will be added at the end of component style attribute | '' |
 | closeOnClickOutside | Boolean | if true click outside will close overlay | false |
 | closeOnScroll | Boolean | if true scrolling outside content will close overlay | false |
 | updateOnScroll | Boolean | if true scrolling will update content position | false |

src/App.svelte

@@ -39,6 +39,7 @@
 	<Overlay
 		position={selectedPosition}
 		onWindowKeyDown={handleKeyDown}
+		closeOnClickOutside
 		on:toggle={handleToggle}
 		closeOnScroll
 		{isOpen}>

src/components/Overlay.svelte

@@ -19,6 +19,9 @@
 	export let closeOnClickOutside = false;
 	export let zIndex = 1;
 	export let onWindowKeyDown = () => {};
+	export let style = '';
+
+	$: className = $$restProps['class'] || '';
 
 	let currentPosition = null;
 	let parent;
@@ -142,7 +145,7 @@
 	on:mousedown={handleWindowClick}
 	on:keydown={handleWindowKeyDown} />
 
-<div class="overlay" style={`z-index:${zIndex};`}>
+<div class={`overlay ${className}`} style={`z-index:${zIndex}; ${style}`}>
 	<div bind:this={parent}>
 		<slot name="parent" {toggle} isOpen={openedState} {open} {close} />
 	</div>
@@ -159,13 +162,10 @@
 </div>
 
 <style>
-  div {
-    display: inline-block;
-    box-sizing: border-box;
-  }
-
   .overlay {
     position: relative;
+		display: inline-block;
+		box-sizing: border-box;
   }
 
   .content-wrapper {