From ea56f46941a38f0bb38b85f97c715bfb8a4a625b Mon Sep 17 00:00:00 2001
From: Knox Joseph <josephkk@gmail.com>
Date: Tue, 24 Nov 2020 12:46:45 +0530
Subject: [PATCH] Added new Tabs Component. Tabs contain one or more Tab
 component. Added Tabs page to Examples and made needed changes for that.

---
 example/src/pages/tabs/Tabs.svelte | 120 ++++++++++++++++
 example/src/pages/tabs/code.md     |  68 +++++++++
 example/src/pages/tabs/custom.js   |  12 ++
 example/src/pages/tabs/doc.md      |  16 +++
 example/src/pages/tabs/index.js    |   3 +
 example/src/pages/tabs/props.js    |  20 +++
 example/src/sitenav.js             |   6 +
 src/Tab.svelte                     |  31 +++++
 src/Tabs.svelte                    | 216 +++++++++++++++++++++++++++++
 src/index.js                       |   4 +
 10 files changed, 496 insertions(+)
 create mode 100644 example/src/pages/tabs/Tabs.svelte
 create mode 100644 example/src/pages/tabs/code.md
 create mode 100644 example/src/pages/tabs/custom.js
 create mode 100644 example/src/pages/tabs/doc.md
 create mode 100644 example/src/pages/tabs/index.js
 create mode 100644 example/src/pages/tabs/props.js
 create mode 100644 src/Tab.svelte
 create mode 100644 src/Tabs.svelte

diff --git a/example/src/pages/tabs/Tabs.svelte b/example/src/pages/tabs/Tabs.svelte
new file mode 100644
index 0000000..875a0c9
--- /dev/null
+++ b/example/src/pages/tabs/Tabs.svelte
@@ -0,0 +1,120 @@
+<DemoPanel>
+	<div style="flex:1; padding:0 10px; background:#eee; background: var(--bg-panel); width:100%;">
+		<Tabs tabNames={['Tab 1', 'Tab 2', 'Tab 3']}>
+			<Tab>
+				<div class="tabcontent">Content 1...</div>
+			</Tab>
+
+			<Tab>
+				<div class="tabcontent">Content 2...</div>
+			</Tab>
+
+			<Tab>
+				<div class="tabcontent">Content 3...</div>
+			</Tab>			
+		</Tabs>
+
+        <Tabs tabNames={tabs} activeTab={activetab} on:change={(e)=>{ tabChange(e) }} style="margin-top:36px">
+		{#each tabs as tab, i (tab)}
+			<Tab>
+				<div class="tabcontent">
+					<div>{tab} content</div>
+					<Button color='primary' outlined on:click={()=> {remove(tab)} } style="margin-top:24px">Remove Tab</Button>
+				</div>
+			</Tab>
+		{/each}
+        </Tabs>
+
+		<div class="tabpropchange">
+			<Button color='primary' outlined on:click={()=> {add('Tab ' + ++tabCounter)} } style="margin:24px 0">Add Tab</Button>
+			
+			<div>Change active tab</div>
+			<input type="text" bind:value={activetab} style="width:113px" />
+		</div>
+	</div>
+
+	<div slot="code">
+		<div>
+			{@html code}
+		</div>
+	</div>
+</DemoPanel>
+
+<Description>
+	{@html doc}
+</Description>
+
+<Properties data={properties} />
+
+<Properties data={custom}>
+	<h4 slot="name">CSS custom properties</h4>
+</Properties>
+
+<script>
+	import { Tabs, Tab } from '/../../src';
+	import { Button } from '/../../src';
+	import { DemoPanel, Play, Description, Properties } from '/components/demo';
+	
+	import code from './code.md';
+	import doc from './doc.md';
+	import properties from './props';
+	import custom from './custom';
+
+	let label = 'Label';
+	let required = true;
+	let value = '';
+	let error = '';
+	let message = 'help message';
+	let messagePersist = false;
+	let outlined = false;
+	let filled = false;
+	let readonly = false;
+	let disabled = false;
+
+	let type = 'default';
+
+	let tabCounter = 5;
+	let activetab = 0;
+
+	let tabs = ['Tab 1', 'Tab 2', 'Tab 3', 'Tab 4', 'Tab 5'];
+
+	$: outlined = type === 'outlined';
+	$: filled = type === 'filled';
+
+	function remove(tabName) {
+		tabs = tabs.filter(tab => tab !== tabName);
+	}
+
+	function add(tabName) {
+		tabs = [...tabs, tabName];
+	}	
+
+	function tabChange (e) {
+		//console.log(e.detail.activeTab);
+	}
+</script>
+
+<style>
+	input {
+		width: 100%;
+		font-family: inherit;
+		font-size: 16px !important;
+		color: var(--color);
+		background: var(--bg-color);
+		padding: 6px;
+		margin: 4px 0 4px 0;
+		border: 1px solid var(--divider);
+		border-radius: 2px;
+	}
+
+	.tabcontent {
+		padding: 16px;
+		border: 1px solid #ddd;
+	}
+
+	.tabpropchange {
+		align-items:center;
+		display:flex;
+		flex-flow:column
+	}
+</style>
diff --git a/example/src/pages/tabs/code.md b/example/src/pages/tabs/code.md
new file mode 100644
index 0000000..b8d8232
--- /dev/null
+++ b/example/src/pages/tabs/code.md
@@ -0,0 +1,68 @@
+```xml
+<Tabs tabNames={['Tab 1', 'Tab 2', 'Tab 3']}>
+	<Tab>
+		<div class="tabcontent">Content 1...</div>
+	</Tab>
+
+	<Tab>
+		<div class="tabcontent">Content 2...</div>
+	</Tab>
+
+	<Tab>
+		<div class="tabcontent">Content 3...</div>
+	</Tab>			
+</Tabs>
+
+<Tabs tabNames={tabs} activeTab={activetab} on:change={(e)=>{ tabChange(e) }} style="margin-top:36px">
+	{#each tabs as tab, i (tab)}
+		<Tab>
+			<div class="tabcontent">
+				<div>{tab} content</div>
+				<Button color='primary' on:click={()=> {remove(tab)} } style="margin-top:24px">Remove Tab</Button>
+			</div>
+		</Tab>
+	{/each}
+</Tabs>
+
+<div class="tabpropchange">
+	<Button color='primary' on:click={()=> {add('Tab ' + ++tabCounter)} } style="margin:24px 0">Add Tab</Button>
+	
+	<div>Change active tab</div>
+	<input type="text" bind:value={activetab} style="width:100px" />
+</div>
+
+
+<script>
+	import { Tabs, Tab, Button } from 'svelte-mui';
+
+	let tabCounter = 5;
+	let activetab = 0;
+
+	let tabs = ['Tab 1', 'Tab 2', 'Tab 3', 'Tab 4', 'Tab 5'];
+
+	function remove(tabName) {
+		tabs = tabs.filter(tab => tab !== tabName);
+	}
+
+	function add(tabName) {
+		tabs = [...tabs, tabName];
+	}	
+
+	function tabChange (e) {
+		console.log(e.detail.activeTab);
+	}
+</script>
+
+<style>
+	.tabcontent {
+		padding: 16px;
+		border: 1px solid #ddd;
+	}
+
+	.tabpropchange {
+		align-items:center;
+		display:flex;
+		flex-flow:column
+	}
+</style>
+```
diff --git a/example/src/pages/tabs/custom.js b/example/src/pages/tabs/custom.js
new file mode 100644
index 0000000..9417274
--- /dev/null
+++ b/example/src/pages/tabs/custom.js
@@ -0,0 +1,12 @@
+export default [
+	{
+		name: '--color',
+		def: '#333',
+		desc: '.tabbutton color, hover background',
+	},
+	{
+		name: '--primary',
+		def: '#1976d2',
+		desc: '.tabbuttonactive, hover background, .tabindicator',
+	},
+];
diff --git a/example/src/pages/tabs/doc.md b/example/src/pages/tabs/doc.md
new file mode 100644
index 0000000..7124776
--- /dev/null
+++ b/example/src/pages/tabs/doc.md
@@ -0,0 +1,16 @@
+Tabs specifiy grouped content on same level chosen one by one.
+There are two components. The wrapper **Tabs** component and the individual **Tab** component.
+
+If the number of tabs overflow its wrapper, the tab names will have swipe/drag capability enabled.
+
+#### HTMLElement attributes
+
+You can use HTMLElement attributes, like
+
+`id`, `style`, `data-*` and so on
+
+#### Events
+`change` - When a tab is clicked, it despatches the custom event **change**. 
+event.detail.activeTab has the current active tab number.
+
+Any HTMLElement events
diff --git a/example/src/pages/tabs/index.js b/example/src/pages/tabs/index.js
new file mode 100644
index 0000000..80e3f26
--- /dev/null
+++ b/example/src/pages/tabs/index.js
@@ -0,0 +1,3 @@
+import Tabs from './Tabs.svelte';
+
+export default Tabs;
\ No newline at end of file
diff --git a/example/src/pages/tabs/props.js b/example/src/pages/tabs/props.js
new file mode 100644
index 0000000..6660cdd
--- /dev/null
+++ b/example/src/pages/tabs/props.js
@@ -0,0 +1,20 @@
+export default [
+	{
+		name: 'tabNames',
+		def: "''",
+		type: 'Array of strings',
+		desc: 'Array of names for each tab',
+	},
+	{
+		name: 'activeTab',
+		def: '0',
+		type: 'number',
+		desc: 'Optional active tab number for Tabs component.',
+	},
+	{
+		name: 'class',
+		def: "''",
+		type: 'string',
+		desc: 'Custom global CSS class name',
+	}
+];
diff --git a/example/src/sitenav.js b/example/src/sitenav.js
index 053df15..1a9b6ad 100644
--- a/example/src/sitenav.js
+++ b/example/src/sitenav.js
@@ -14,6 +14,7 @@ import Ripple from '/pages/ripple';
 import Sidepanel from '/pages/sidepanel';
 import Snackbar from '/pages/snackbar';
 import Textfield from '/pages/textfield';
+import Tabs from '/pages/tabs';
 import { NotFound } from '/pages/errors';
 
 let routes = [
@@ -96,6 +97,11 @@ let routes = [
 		component: Textfield,
 		name: 'Textfield',
 	},
+	{
+		path: '/tabs',
+		component: Tabs,
+		name: 'Tabs',
+	},	
 	{
 		path: '*',
 		component: NotFound,
diff --git a/src/Tab.svelte b/src/Tab.svelte
new file mode 100644
index 0000000..e01b189
--- /dev/null
+++ b/src/Tab.svelte
@@ -0,0 +1,31 @@
+<div class="tabcontent-page {className}" {style} {...attrs} use:events>
+	<slot></slot>
+</div>
+
+<script>
+	import { onMount, onDestroy, createEventDispatcher, tick } from 'svelte';
+	import { current_component } from 'svelte/internal';
+	import { getEventsAction } from './lib/events';
+
+	const events = getEventsAction(current_component);
+
+	export { className as class, style };
+
+	let className = '';
+	let style = null;
+
+    let attrs = {};
+	
+	$: {
+		/* eslint-disable no-unused-vars */
+		const {	style, ...other	} = $$props;
+		attrs = other;
+	}
+</script>
+
+<style>
+    .tabcontent-page {
+        width: 100%;
+        flex: 1 0 100%;
+    }
+</style>
\ No newline at end of file
diff --git a/src/Tabs.svelte b/src/Tabs.svelte
new file mode 100644
index 0000000..87b6ae5
--- /dev/null
+++ b/src/Tabs.svelte
@@ -0,0 +1,216 @@
+<div class="tabbar {className}" bind:this={elm} {style} {...attrs} use:events>
+    <div class="tabbar-wrap">
+        {#each tabNames as tab, i (tab)}
+            <button class="tabbutton { activeTab == i ? 'tabbuttonactive' : ''}" on:click={(e)=>{navClick(e, i)}}>
+                {tab}
+                <Ripple center />
+            </button>
+        {/each}     
+        <span class="tabindicator" style="{tabindi_pos}; background-color:var(--primary);"></span>
+    </div>
+
+    <div class="tabcontent-wrap">
+        <div class="tabcontent" style="{pagenav}">
+            <slot></slot>
+        </div>
+    </div>
+</div>
+
+<script context="module">
+    function addSwipe(swipeElm, elm) {
+        let pos1 = 0, pos2 = 0;
+
+        swipeElm.addEventListener('mousedown', dragMouseDown);
+        swipeElm.addEventListener('touchstart', dragMouseDown, false);
+
+        if(swipeElm.style.left == '') {
+            swipeElm.style.left = '0px';
+        }
+
+        function dragMouseDown(e) {
+            swipeElm.style.userSelect = 'none';
+            pos2 = e.touches ? e.touches[0].clientX : e.clientX;
+            document.addEventListener('mouseup', closeDragElement);
+            document.addEventListener('mousemove', elementDrag);
+            document.addEventListener('touchmove', elementDrag, false);
+            document.addEventListener('touchend', closeDragElement, false);
+        }
+
+        function elementDrag(e) {
+            swipeElm.style.pointerEvents = 'none';
+            const x = e.touches ? e.touches[0].clientX : e.clientX;
+
+            pos1 = pos2 - x;
+            pos2 = x;
+
+            const left = (parseInt(swipeElm.style.left) - pos1);
+            swipeElm.style.left = (left > 0 ? 0 : left + swipeElm.scrollWidth <= elm.clientWidth ? elm.clientWidth - swipeElm.scrollWidth : left)  + 'px';
+        }
+
+        function closeDragElement() {
+            document.removeEventListener('mouseup', closeDragElement);
+            document.removeEventListener('mousemove', elementDrag);
+            document.removeEventListener('touchmove', elementDrag);
+            document.removeEventListener('touchend', elementDrag);
+
+            swipeElm.style.pointerEvents = 'all';
+            swipeElm.style.userSelect = 'all';
+        }
+    }
+</script>
+
+<script>
+	import { beforeUpdate, onMount, createEventDispatcher, tick } from 'svelte';
+	import { current_component } from 'svelte/internal';
+    import { getEventsAction } from './lib/events';
+    import Ripple from './Ripple.svelte';
+
+	const dispatch = createEventDispatcher();
+	const events = getEventsAction(current_component);
+
+	export { className as class, style, tabNames, activeTab };
+
+	let className = '';
+	let style = null;
+
+	let elm;
+    let attrs = {};
+    
+    let pagenav = 'transform:translate3d(0%, 0px, 0px);';
+    let tabindi_pos = '';
+
+    let tabNames = [];
+    let activeTab = 0;
+
+	$: {
+		/* eslint-disable no-unused-vars */
+		const { style, tabNames, activeTab,	...other } = $$props;
+		attrs = other;
+	}
+
+    $: {
+        tabNames;
+        activeTab = Math.abs(parseInt(activeTab));
+        !Number.isInteger(activeTab) ? activeTab = 0 : activeTab;
+
+        refreshTabs();
+    } 
+
+    onMount(() => {
+        refreshTabs() ? addSwipe(elm.querySelector('.tabbar-wrap'), elm) : '';
+    });
+    
+    async function refreshTabs () {
+        await tick;
+        let elms = elm.querySelectorAll('.tabbutton');
+
+        if(elms && elms.length > 0) {
+            let el = {};
+
+            activeTab >= elms.length ? activeTab > elms.length ? activeTab = elms.length - 1 :  activeTab-- : activeTab;
+            el.target = elms[activeTab];
+            navClick(el, activeTab);
+
+            return true;
+        }
+
+        return false;
+    }
+
+    function navClick(e, index) {
+        let targ = e.target;
+
+        pagenav = 'transform:translate3d(-' + (index * 100)  +'%, 0px, 0px);';
+        tabindi_pos = 'left:' + (targ.offsetLeft) + 'px; width:' + targ.offsetWidth + 'px;';
+
+        activeTab = index;
+        dispatch('change', { activeTab: activeTab });
+    }
+</script>
+
+<style>
+    .tabbar {
+        width: 100%;
+        overflow: hidden;
+    }
+
+    .tabbar-wrap {
+        display: flex;
+        position: relative;
+        transition: left 150ms;
+    }
+
+    .tabbutton{
+        color: var(--color);
+        min-width: 70px;
+        font-family: Roboto,sans-serif;
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        font-size: .875rem;
+        font-weight: 500;
+        letter-spacing: .08929em;
+        text-decoration: none;
+        text-transform: uppercase;
+        position: relative;
+        display: flex;
+        flex: 1 0 auto;
+        justify-content: center;
+        align-items: center;
+        box-sizing: border-box;
+        height: 48px;
+        margin: 0 !important;
+        padding: 0 24px;
+        border: none;
+        outline: none;
+        background: none;
+        text-align: center;
+        white-space: nowrap;
+        cursor: pointer;
+        -webkit-appearance: none;
+        z-index: 1;
+    }
+
+    .tabbutton:before{
+        bottom: 0;
+        content: '';
+        left: 0;
+        opacity: 0;
+        pointer-events: none;
+        position: absolute;
+        right: 0;
+        top: 0;
+        transition: 0.2s cubic-bezier(0.25, 0.8, 0.5, 1);
+        will-change: background-color, opacity;
+    }
+   		.tabbutton:hover:before {
+			background-color: currentColor;
+			opacity: 0.15;
+		}
+
+    .tabbuttonactive {
+        color: var(--primary);
+    }
+
+    .tabcontent-wrap {
+        overflow: hidden;
+        transition: none;
+    }
+
+    .tabcontent {
+        display: flex;
+        align-items: flex-start;
+        flex-wrap: nowrap;
+        transform: translate3d(0%, 0px, 0px);
+        transition: transform .35s cubic-bezier(.4,0,.2,1);
+        will-change: transform;
+    }
+    
+    .tabindicator {
+        height: 2px;
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        transition: left .2s cubic-bezier(.4,0,.2,1);
+        background-color: var(--primary);
+    }
+</style>
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 44f375a..93cd75d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -13,6 +13,8 @@ import Ripple from './Ripple.svelte';
 import Sidepanel from './Sidepanel.svelte';
 import Snackbar from './Snackbar.svelte';
 import Textfield from './Textfield.svelte';
+import Tabs from './Tabs.svelte';
+import Tab from './Tab.svelte';
 
 export {
 	Button,
@@ -30,4 +32,6 @@ export {
 	Sidepanel,
 	Snackbar,
 	Textfield,
+	Tabs,
+	Tab
 };