hamzus-ui 0.0.43 → 0.0.45

package/index.d.ts

@@ -22,6 +22,9 @@ export { default as TextArea } from "./src/components/hamzus-ui/TextArea/TextAre
 export { default as Checkbox } from "./src/components/hamzus-ui/Checkboxes/Checkbox/Checkbox.svelte"
 export { default as Switch } from "./src/components/hamzus-ui/Switch/Switch.svelte"
 
+// navigation
+export * as Tabs from "./src/components/hamzus-ui/Tabs"
+
 // data
 export * as Table from "./src/components/hamzus-ui/Table"
 export { default as ProgressCircle } from "./src/components/hamzus-ui/ProgressCircle/ProgressCircle.svelte"

package/index.js

@@ -17,6 +17,10 @@ export { default as DatePicker } from "./src/components/hamzus-ui/DatePicker/Dat
 export { default as TextArea } from "./src/components/hamzus-ui/TextArea/TextArea.svelte"
 export { default as Checkbox } from "./src/components/hamzus-ui/Checkboxes/Checkbox/Checkbox.svelte"
 export { default as Switch } from "./src/components/hamzus-ui/Switch/Switch.svelte"
+
+// navigation
+export * as Tabs from "./src/components/hamzus-ui/Tabs"
+
 // data
 export * as Table from "./src/components/hamzus-ui/Table"
 export { default as ProgressCircle } from "./src/components/hamzus-ui/ProgressCircle/ProgressCircle.svelte"

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "hamzus-ui",
-	"version": "0.0.43",
+	"version": "0.0.45",
 	"type": "module",
     "main": "index.js",
     "svelte": "index.js",

package/src/components/hamzus-ui/Button/Button_default.svelte

@@ -23,8 +23,6 @@
 			return;
 		}
 
-        console.log("ripple");
-
 		const ripple = document.createElement('span');
 
 		const rect = button.getBoundingClientRect();

package/src/components/hamzus-ui/Table/ActionsBar.svelte

@@ -66,7 +66,6 @@
 					if (position === 'before') {
 						actualValue[tableId].columns[i].filterBefore = '';
 						// si son filtre befoire n est pas set obn surtpimme le filtrer general
-						console.log(actualValue[tableId].columns[i].filterAfter);
 
 						if (!actualValue[tableId].columns[i].filterAfter) {
 							actualValue[tableId].columns[i].filter = '';
@@ -115,7 +114,6 @@
         tableData.update((actualValue) => {
 			actualValue[tableId].offset = actualValue[tableId].limit * parseInt(targetPage) - actualValue[tableId].limit;
 
-            console.log(actualValue[tableId].offset);
             
 			return actualValue;
 		});
@@ -128,8 +126,6 @@
 		const actualPage = Math.floor(table.offset / table.limit) + 1;
 		// verifier si il est possible de passer a droite
 		const totalPage = Math.ceil(table.totalOfRows / table.limit);
-		console.log(actualPage);
-		console.log(totalPage);
 
 		// si la page actual est plus petit que le total de page alors on peut passer
 		if (actualPage >= totalPage) {
@@ -138,7 +134,6 @@
 
 		tableData.update((actualValue) => {
 			actualValue[tableId].offset = actualValue[tableId].offset + actualValue[tableId].limit;
-			console.log(actualValue[tableId].offset);
 
 			return actualValue;
 		});

package/src/components/hamzus-ui/Table/FilterDropdown.svelte

@@ -28,7 +28,6 @@
 		document.dispatchEvent(new Event('saveTableData'));
 	}
 	function handleFilter(columnName, newValue, position) {
-		console.log(newValue);
 
 		let foundedColumn = false;
 		tableData.update((actualValue) => {

package/src/components/hamzus-ui/Table/Header.svelte

@@ -72,7 +72,6 @@
 		document.dispatchEvent(new Event('saveTableData'));
 	}
 	function handleFilter(columnName, newValue, position) {
-		console.log(newValue);
 
 		let foundedColumn = false;
 		tableData.update((actualValue) => {

package/src/components/hamzus-ui/Tabs/Content.svelte

@@ -0,0 +1,11 @@
+<script>
+    import {activeTab} from "."
+
+    export let value = ""
+
+
+</script>
+
+{#if $activeTab === value}
+    <slot/>
+{/if}

package/src/components/hamzus-ui/Tabs/List.svelte

@@ -0,0 +1,47 @@
+<script>
+	import TinyScrollArea from "@hamzus-ui/TinyScrollArea/TinyScrollArea.svelte";
+    import { activeTrigger } from ".";
+
+	let left = 0;
+	let width = 0;
+
+	$: if ($activeTrigger) {
+        
+		// return
+		left = $activeTrigger.offsetLeft;
+		width = $activeTrigger.offsetWidth;
+	}
+</script>
+
+<TinyScrollArea style="display: flex;" proximity={0}>
+	<div class="tabs" style="--left:{left}px;--width:{width}px;">
+        <slot />
+		<span class="active-line"></span>
+	</div>
+</TinyScrollArea>
+
+
+<style>
+	.tabs {
+		min-width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: baseline;
+		column-gap: var(--pad-m);
+		padding-bottom: var(--pad-m);
+		position: relative;
+	}
+
+	.active-line {
+		position: absolute;
+		bottom: 0px;
+		left: var(--left);
+		width: var(--width);
+		height: 1px;
+		background-color: var(--accent);
+		z-index: 1;
+		transition-property: left, width;
+		transition-duration: 0.2s;
+		transition-timing-function: cubic-bezier(0.17, 0.84, 0.44, 1);
+	}
+</style>

package/src/components/hamzus-ui/Tabs/Root.svelte

@@ -0,0 +1,20 @@
+<script>
+	import TinyScrollArea from '../TinyScrollArea/TinyScrollArea.svelte';
+	import Button from '../Button/Button.svelte';
+
+	import { page } from '$app/stores';
+	import { activeTrigger, activeTab } from '.';
+	import { onMount } from 'svelte';
+
+	export let value = '';
+
+
+	onMount(() => {
+		activeTab.set(value);
+	});
+
+</script>
+
+<slot name="list"/>
+<slot/>
+

package/src/components/hamzus-ui/Tabs/Trigger.svelte

@@ -0,0 +1,36 @@
+<script>
+	import Button from '../Button/Button.svelte';
+	import { onMount } from 'svelte';
+    import {activeTrigger, activeTab} from "."
+
+	export let value = "";
+	export let variant = 'ghost';
+	export let label = '';
+    
+	let activeStyle = 'color:var(--font-1);background-color:var(--bg-2);';
+	let el;
+
+	
+    
+    $: if ($activeTab === value) {
+        activeTrigger.set(el)
+        
+	}
+
+	function handleClick() {
+		activeTab.set(value)
+	}
+</script>
+
+<div bind:this={el} class="active">
+	<Button {variant} style={`flex-shrink:0;${$activeTab === value ? activeStyle : ''}`} {label} onClick={handleClick} {...$$restProps}>
+        <slot/>
+    </Button>
+</div>
+
+<style>
+	.active {
+		all: unset;
+		min-width: max-content;
+	}
+</style>

package/src/components/hamzus-ui/Tabs/index.js

@@ -0,0 +1,9 @@
+import { writable } from 'svelte/store';
+
+export { default as Root } from './Root.svelte';
+export { default as List } from './List.svelte';
+export { default as Trigger } from './Trigger.svelte';
+export { default as Content } from './Content.svelte';
+
+export const activeTab = writable(null)
+export const activeTrigger = writable(null)

package/src/components/hamzus-ui/Tabs/TabButton.svelte

@@ -1,34 +0,0 @@
-<script>
-	import Button from '../Button/Button.svelte';
-	import { onMount } from 'svelte';
-	export let activeButton = null;
-	export let link = null;
-	export let variant = 'ghost';
-	export let style = "flex-shrink:0;{link.active ? activeStyle : ''}";
-	export let label = 'exemple';
-	export let onClick = (link) => {};
-
-	let el;
-
-	onMount(() => {
-		if (link.active) {
-            activeButton = el;
-		}
-	});
-
-	function handleClick() {
-		activeButton = el;
-		onClick(link);
-	}
-</script>
-
-<div bind:this={el} class="active">
-	<Button {variant} {style} {label} onClick={handleClick} />
-</div>
-
-<style>
-	.active {
-		all: unset;
-		min-width: max-content;
-	}
-</style>

package/src/components/hamzus-ui/Tabs/Tabs.svelte

@@ -1,98 +0,0 @@
-<script>
-	export let links = [];
-
-	let activeStyle = 'color:var(--font-1);background-color:var(--bg-2);';
-
-	import TinyScrollArea from '../TinyScrollArea/TinyScrollArea.svelte';
-	import Button from '../Button/Button.svelte';
-
-	import { page } from '$app/stores';
-	import TabButton from './TabButton.svelte';
-
-	let activeButton = null;
-
-	let left = 0;
-	let width = 0;
-
-	$: if (activeButton) {
-		// return
-		left = activeButton.offsetLeft;
-		width = activeButton.offsetWidth;
-	}
-
-	function handleClick(link) {
-		if (link.onClick != undefined) {
-			link.onClick(link);
-		}
-	}
-</script>
-
-<TinyScrollArea style="display: flex;" proximity={0}>
-	<div class="tabs" style="--left:{left}px;--width:{width}px;">
-		{#each links as link}
-			{#if link.label}
-				<!-- {#if link.active}
-					<div bind:this={activeButton} class="active">
-						<Button
-							variant="ghost"
-							style="flex-shrink:0;{link.active ? activeStyle : ''}"
-							label={link.label}
-							onClick={() => {
-								handleClick(link);
-							}}
-						></Button>
-					</div>
-				{:else}
-					<Button
-						variant="ghost"
-						style="flex-shrink:0;{link.active ? activeStyle : ''}"
-						label={link.label}
-						onClick={() => {
-							handleClick(link);
-						}}
-					></Button>
-				{/if} -->
-				<TabButton
-					bind:activeButton
-                    link={link}
-					variant="ghost"
-					style="flex-shrink:0;{link.active ? activeStyle : ''}"
-					label={link.label}
-					onClick={() => {
-						handleClick(link);
-					}}
-				></TabButton>
-				<span class="active-line"></span>
-			{/if}
-		{/each}
-	</div>
-</TinyScrollArea>
-
-<style>
-	.tabs {
-		min-width: 100%;
-		display: flex;
-		align-items: center;
-		justify-content: baseline;
-		column-gap: var(--pad-m);
-		padding-bottom: var(--pad-m);
-		position: relative;
-	}
-	.active {
-		all: unset;
-		min-width: max-content;
-	}
-
-	.active-line {
-		position: absolute;
-		bottom: 0px;
-		left: var(--left);
-		width: var(--width);
-		height: 1px;
-		background-color: var(--accent);
-		z-index: 1;
-		transition-property: left, width;
-		transition-duration: 0.2s;
-		transition-timing-function: cubic-bezier(0.17, 0.84, 0.44, 1);
-	}
-</style>