feat(Tabs): added ripple option

TheComputerM · Oct 21, 2020 · 314e0d0 · 314e0d0
1 parent db7ca74
commit 314e0d0
Show file tree

Hide file tree

Showing 5 changed files with 54 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/Tab.json b/packages/api-generator/src/Tab.json
@@ -21,45 +21,45 @@
       "visibility": "public",
       "description": null,
       "keywords": [],
-      "name": "activeClass",
+      "name": "value",
       "kind": "let",
       "static": false,
       "readonly": false,
       "type": {
         "kind": "type",
-        "text": "string",
-        "type": "string"
-      },
-      "defaultValue": ""
+        "text": "any",
+        "type": "any"
+      }
     },
     {
       "visibility": "public",
       "description": null,
       "keywords": [],
-      "name": "disabled",
+      "name": "activeClass",
       "kind": "let",
       "static": false,
       "readonly": false,
       "type": {
         "kind": "type",
-        "text": "object",
-        "type": "object"
+        "text": "string",
+        "type": "string"
       },
-      "defaultValue": null
+      "defaultValue": ""
     },
     {
       "visibility": "public",
       "description": null,
       "keywords": [],
-      "name": "value",
+      "name": "disabled",
       "kind": "let",
       "static": false,
       "readonly": false,
       "type": {
         "kind": "type",
-        "text": "any",
-        "type": "any"
-      }
+        "text": "object",
+        "type": "object"
+      },
+      "defaultValue": null
     }
   ],
   "computed": [],

diff --git a/packages/api-generator/src/Tabs.json b/packages/api-generator/src/Tabs.json
@@ -2,6 +2,20 @@
   "version": 3,
   "name": "Tabs",
   "data": [
+    {
+      "visibility": "public",
+      "description": null,
+      "keywords": [],
+      "name": "TABS",
+      "kind": "const",
+      "static": false,
+      "readonly": true,
+      "type": {
+        "kind": "type",
+        "text": "any",
+        "type": "any"
+      }
+    },
     {
       "visibility": "public",
       "description": null,
@@ -172,6 +186,20 @@
       },
       "defaultValue": ""
     },
+    {
+      "visibility": "public",
+      "description": null,
+      "keywords": [],
+      "name": "ripple",
+      "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/Tabs/Tab.svelte b/packages/svelte-materialify/src/components/Tabs/Tab.svelte
@@ -2,17 +2,19 @@
   import { getContext } from 'svelte';
   import { SLIDE_GROUP } from '../SlideGroup/SlideGroup.svelte';
   import { ITEM_GROUP } from '../ItemGroup/ItemGroup.svelte';
+  import { TABS } from './Tabs.svelte';
   import Class from '../../internal/Class';
   import Ripple from '../../actions/Ripple';
 
   const click = getContext(SLIDE_GROUP);
   const { select, register, index } = getContext(ITEM_GROUP);
+  const { ripple } = getContext(TABS);
 
   let klass = '';
   export { klass as class };
+  export let value = index();
   export let activeClass = '';
   export let disabled = null;
-  export let value = index();
 
   let active;
   register((values) => {
@@ -39,6 +41,6 @@
   class:active
   use:Class={[active && activeClass]}
   on:click={selectTab}
-  use:Ripple>
+  use:Ripple={ripple}>
   <slot />
 </button>
diff --git a/packages/svelte-materialify/src/components/Tabs/Tabs.svelte b/packages/svelte-materialify/src/components/Tabs/Tabs.svelte
@@ -1,7 +1,11 @@
+<script context="module">
+  export const TABS = {};
+</script>
+
 <script>
   import SlideGroup from '../SlideGroup';
   import Window from '../Window';
-  import { onMount } from 'svelte';
+  import { onMount, setContext } from 'svelte';
 
   let sliderElement;
   let windowComponent;
@@ -20,8 +24,11 @@
   export let icons = false;
   export let slider = true;
   export let sliderClass = '';
+  export let ripple = {};
   export let vertical = false;
 
+  setContext(TABS, { ripple });
+
   function moveSlider({ detail }) {
     if (slider) {
       const activeTab = tabs[detail[0]];