feat(overlay): adding transition, inOpts, outOpts as props

TheComputerM · Nov 17, 2020 · 85daff7 · 85daff7
1 parent 7cef40a
commit 85daff7
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 17 deletions.
diff --git a/packages/api-generator/dist/index.js b/packages/api-generator/dist/index.js
diff --git a/packages/api-generator/src/Overlay.json b/packages/api-generator/src/Overlay.json
@@ -2,6 +2,48 @@
   "version": 3,
   "name": "Overlay",
   "data": [
+    {
+      "visibility": "public",
+      "description": null,
+      "keywords": [],
+      "name": "transition",
+      "kind": "let",
+      "static": false,
+      "readonly": false,
+      "type": {
+        "kind": "type",
+        "text": "any",
+        "type": "any"
+      }
+    },
+    {
+      "visibility": "public",
+      "description": null,
+      "keywords": [],
+      "name": "inOpts",
+      "kind": "let",
+      "static": false,
+      "readonly": false,
+      "type": {
+        "kind": "type",
+        "text": "any",
+        "type": "any"
+      }
+    },
+    {
+      "visibility": "public",
+      "description": null,
+      "keywords": [],
+      "name": "outOpts",
+      "kind": "let",
+      "static": false,
+      "readonly": false,
+      "type": {
+        "kind": "type",
+        "text": "any",
+        "type": "any"
+      }
+    },
     {
       "visibility": "public",
       "description": null,
@@ -77,20 +119,6 @@
       },
       "defaultValue": false
     },
-    {
-      "visibility": "public",
-      "description": null,
-      "keywords": [],
-      "name": "fadeOptions",
-      "kind": "let",
-      "static": false,
-      "readonly": false,
-      "type": {
-        "kind": "type",
-        "text": "any",
-        "type": "any"
-      }
-    },
     {
       "visibility": "public",
       "description": null,

diff --git a/packages/svelte-materialify/src/components/Overlay/Overlay.svelte b/packages/svelte-materialify/src/components/Overlay/Overlay.svelte
@@ -3,12 +3,14 @@
   import BackgroundColor from '../../internal/BackgroundColor';
 
   let klass = '';
+  export let transition = fade;
+  export let inOpts = { duration: 250 };
+  export let outOpts = { duration: 250 };
   export let active = true;
   export let opacity = 0.46;
   export let color = 'rgb(33, 33, 33)';
   export let index = 5;
   export let absolute = false;
-  export let fadeOptions = {};
   export let style = '';
   export { klass as class };
 </script>
@@ -18,7 +20,8 @@
 
 {#if active}
   <div
-    transition:fade={fadeOptions}
+    in:transition={inOpts}
+    out:transition={outOpts}
     class="s-overlay {klass}"
     class:absolute
     on:click