hamzus-ui 0.0.194 → 0.0.196

package/index.d.ts

@@ -43,6 +43,7 @@ export * as Tabs from "./src/components/hamzus-ui/Tabs"
 export { default as Caroussel } from "./src/components/hamzus-ui/Caroussel/Caroussel.svelte"
 export { default as Image } from "./src/components/hamzus-ui/Image/Image.svelte"
 export * as Table from "./src/components/hamzus-ui/Table"
+export * as TableV2 from "./src/components/hamzus-ui/TableV2"
 export * as DataList from "./src/components/hamzus-ui/DataList"
 export { default as Object } from "./src/components/hamzus-ui/Object/Object.svelte"
 export * as ResponsiveTable from "./src/components/hamzus-ui/ResponsiveTable"

package/index.js

@@ -40,6 +40,7 @@ export * as Tabs from "./src/components/hamzus-ui/Tabs"
 export { default as Caroussel } from "./src/components/hamzus-ui/Caroussel/Caroussel.svelte"
 export { default as Image } from "./src/components/hamzus-ui/Image/Image.svelte"
 export * as Table from "./src/components/hamzus-ui/Table"
+export * as TableV2 from "./src/components/hamzus-ui/TableV2"
 export * as DataList from "./src/components/hamzus-ui/DataList"
 export { default as Object } from "./src/components/hamzus-ui/Object/Object.svelte"
 export * as ResponsiveTable from "./src/components/hamzus-ui/ResponsiveTable"

package/package.json

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

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

@@ -0,0 +1,202 @@
+<script>
+	// import
+	import Input from '../Input/Input.svelte';
+	import Button from '../Button/Button.svelte';
+	import * as DropdownMenu from '../DropdownMenu';
+	import Checkbox from '../Checkboxes/Checkbox/Checkbox.svelte';
+	import IconButton from '../IconButton/IconButton.svelte';
+	import { onMount } from 'svelte';
+	import * as Tooltip from '../AdvancedTooltip';
+	// import FilterDropdown from './FilterDropdown.svelte';
+	// props
+	export let tableId = null;
+
+	// local var
+	// life cycle
+	// function
+	function handleRemoveFilter(columnName, position) {
+		let foundedColumn = false;
+		for (let i = 0; i < ctx.columns.length; i++) {
+			const element = ctx.columns[i];
+			if (element.name === columnName) {
+				if (position === 'after') {
+					ctx.columns[i].filterAfter = '';
+					// si son filtre befoire n est pas set obn surtpimme le filtrer general
+					if (!ctx.columns[i].filterBefore) {
+						ctx.columns[i].filter = '';
+						delete ctx.filters[columnName];
+					}
+				}
+				if (position === 'before') {
+					ctx.columns[i].filterBefore = '';
+					// si son filtre befoire n est pas set obn surtpimme le filtrer general
+
+					if (!ctx.columns[i].filterAfter) {
+						ctx.columns[i].filter = '';
+						delete ctx.filters[columnName];
+					}
+				}
+				if (!position) {
+					ctx.columns[i].filter = '';
+					delete ctx.filters[columnName];
+				}
+
+				foundedColumn = true;
+				break;
+			}
+		}
+
+        ctx = { ...ctx };
+
+		if (foundedColumn) {
+			// emmetre un event
+			document.dispatchEvent(new Event('updateTableResult'));
+		}
+	}
+
+	async function handleClickAction(action) {
+		if (ctx.selection.length === 0) {
+			return;
+		}
+
+		const request = await action.function(ctx.selection);
+
+		if (request) {
+			const monEvenement = new CustomEvent('successOperation', {
+				detail: {
+					message: request.message ?? '',
+					type: request.statusCode === 200 ? 'success' : 'error'
+				}
+			});
+			document.dispatchEvent(monEvenement);
+		}
+
+		tableData.update((actualValue) => {
+			ctx.selection = [];
+
+			return actualValue;
+		});
+	}
+</script>
+
+<div class="actions-bar">
+	<slot name="left" />
+	<!-- actions -->
+	<div class="actions">
+		<slot name="actions" />
+	</div>
+</div>
+<!-- liste des filtres -->
+<div class="filters {Object.entries(ctx.filters).length > 0 ? 'active' : ''}">
+	<!-- <FilterDropdown {ctx}></FilterDropdown> -->
+	{#if ctx.filters}
+		{#each Object.entries(ctx.filters) as [key, filter]}
+			{@const column = ctx.columns.filter((obj) => obj.name === key)[0]}
+
+			{#if column.searchChoices}
+				<Button
+					onClick={() => {
+						handleRemoveFilter(column.name);
+					}}
+					style="border-radius:var(--radius-m);padding-left:3px;margin:7px 0 7px 0;"
+					variant="outline"
+				>
+					<h4 class="filter-column">{column.label}</h4>
+					<h4>: {column.searchChoices.filter((obj) => obj.value === filter)[0].label}</h4>
+				</Button>
+			{:else if column.datePicker}
+				{#if column.filterAfter}
+					<Button
+						onClick={() => {
+							handleRemoveFilter(column.name, 'after');
+						}}
+						style="border-radius:var(--radius-m);padding-left:3px;margin:7px 0 7px 0;"
+						variant="outline"
+					>
+						<h4 class="filter-column">{column.label} (à partir du)</h4>
+						<h4>: {column.filterAfter}</h4>
+					</Button>
+				{/if}
+				{#if column.filterBefore}
+					<Button
+						onClick={() => {
+							handleRemoveFilter(column.name, 'before');
+						}}
+						style="border-radius:var(--radius-m);padding-left:3px;margin:7px 0 7px 0;"
+						variant="outline"
+					>
+						<h4 class="filter-column">{column.label} (avant le)</h4>
+						<h4>: {column.filterBefore}</h4>
+					</Button>
+				{/if}
+			{:else}
+				<Button
+					onClick={() => {
+						handleRemoveFilter(column.name);
+					}}
+					style="border-radius:var(--radius-m);padding-left:3px;margin:7px 0 7px 0;"
+					variant="outline"
+				>
+					<h4 class="filter-column">{column.label}</h4>
+					<h4>: {filter}</h4>
+				</Button>
+			{/if}
+		{/each}
+	{/if}
+</div>
+
+<style>
+	.actions-bar {
+		display: flex;
+		align-items: center;
+		column-gap: 7px;
+		margin: 7px;
+	}
+
+	.format {
+		display: flex;
+		align-items: center;
+		column-gap: var(--pad-xs);
+		padding: var(--pad-xs);
+		border-radius: var(--radius-l);
+		border: 1px solid var(--stroke);
+	}
+
+	.filters {
+		padding: 0px 7px;
+		transition:
+			max-height 0.4s ease,
+			opacity 0.4s ease;
+		max-height: 0px;
+		display: flex;
+		align-items: center;
+		column-gap: 7px;
+		opacity: 0;
+		pointer-events: none;
+		overflow: hidden;
+	}
+	.filters.active {
+		max-height: 100px;
+		opacity: 1;
+		pointer-events: initial;
+		transition:
+			max-height 0.4s ease,
+			opacity 0.4s ease;
+	}
+	.filters.mobile {
+		border-bottom: 1px solid var(--stroke);
+		background-color: var(--bg-1);
+	}
+	.filter-column {
+		background-color: var(--bg-2);
+		padding: 0px 6px;
+		border-radius: var(--radius-s);
+	}
+	.pagination {
+		display: flex;
+	}
+
+	.actions {
+		margin-left: auto;
+	}
+</style>

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

@@ -0,0 +1,175 @@
+<script>
+	// import
+	import Checkbox from '../Checkboxes/Checkbox/Checkbox.svelte';
+	import Button from '../Button/Button.svelte';
+	// props
+	export let ctx = null;
+
+	// local var
+	let extended = {};
+	$: numberOfColumn = ctx.columns.length ?? 0;
+	// lifeTime component
+
+	// function
+	function handleClick(rowData, avoidClick) {
+		if (avoidClick) {
+			return;
+		}
+		// apeller la fonction onclick de la table et fournir la row
+		if (
+			ctx.onClick !== undefined &&
+			typeof ctx.onClick === 'function'
+		) {
+			ctx.onClick(rowData);
+		}
+	}
+	function handleSelect(row) {
+		// verifier si il est deja present
+		let isAlreadySelected = false;
+
+		for (const pushedRow of ctx.selection) {
+			if (pushedRow.id === row.id) {
+				isAlreadySelected = true;
+				break;
+			}
+		}
+
+		tableData.update((actualValue) => {
+			if (isAlreadySelected) {
+				actualValue[tableId].selection = actualValue[tableId].selection.filter(
+					(item) => item.id !== row.id
+				);
+				return actualValue;
+			}
+			actualValue[tableId].selection.push(row);
+			return actualValue;
+		});
+	}
+
+	function handleExtend(index) {
+		extended[index] = !(extended[index] ?? false);
+	}
+</script>
+
+<div class="content">
+	{#each ctx.rows as row, rowIndex}
+		<div class="row {ctx.actions.length > 0 ? 'selectable' : ''}">
+			{#if ctx.actions.length > 0}
+				<div
+					style="--cell-width:50px"
+					class="selector cell {ctx.selection.length > 0 ? 'active' : ''}"
+				>
+					<Checkbox
+						size={24}
+						checked={ctx.selection.filter((item) => item.id === row.id).length > 0}
+						onChange={() => {
+							handleSelect(row);
+						}}
+					></Checkbox>
+				</div>
+			{/if}
+			{#each Object.keys(row) as cellKey, cellIndex}
+				{@const column = ctx.columns.filter((obj) => obj.name === cellKey)[0]}
+
+				{#if !column.hidden}
+                    <!-- systeme d'afficher plus pour telephone -->
+					<!-- {@const cellIsExtended = extended[rowIndex] ?? false} -->
+					{@const cellIsExtended = true}
+
+					<!-- si le format est mobile que on est a plus de trois cell afficher et que le content est pas extend on affiche pas le reste -->
+					{#if numberOfColumn <= 3 || cellIndex < 3 || cellIsExtended}
+						<button
+							on:click={() => {
+								handleClick(row, column.avoidClick ?? false);
+							}}
+							class="cell"
+							style="--cell-width:{column.width ?? column.initialWidth}px;{column.skipLine === true
+								? 'white-space:nowrap;'
+								: ''}"
+						>
+							<!-- il se peut que ce soit un composant -->
+							{#if row[cellKey] !== undefined}
+								{#if typeof row[cellKey] === 'object' && row[cellKey] !== null}
+									<svelte:component this={row[cellKey].component} {...row[cellKey].props}
+									></svelte:component>
+								{:else if row[cellKey] === null}
+									<h4>-</h4>
+                                {:else}
+									<h4>{row[cellKey] ?? "-"}</h4>
+								{/if}
+							{/if}
+						</button>
+					{/if}
+				{/if}
+			{/each}
+		</div>
+	{/each}
+</div>
+
+<style>
+	.content {
+		display: flex;
+		flex-direction: column;
+	}
+	.row {
+		all: unset;
+		display: flex;
+		border-bottom: 1px solid var(--stroke);
+		flex-shrink: 0;
+		min-width: max-content;
+		width: 100%;
+		cursor: pointer;
+		position: relative;
+	}
+	.row:hover {
+		background-color: var(--bg-2);
+	}
+
+	.selector {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.cell {
+		text-align: left;
+		width: var(--cell-width);
+		padding: var(--pad-m);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		border-right: 1px solid var(--stroke);
+		flex-shrink: 0;
+	}
+	.cell:focus {
+		outline: 1px solid var(--accent) !important;
+		z-index: 1;
+	}
+	.cell > h4 {
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	/* mobile version */
+    .mobile{
+        width: 100%;
+        flex-shrink: 0;
+    }
+	.mobile .row {
+		width: 100%;
+		flex-direction: column;
+		min-width: unset;
+        flex-shrink: 0;
+	}
+	.mobile .cell {
+		width: 100%;
+		border-right: 0px;
+		display: flex;
+		align-items: center;
+		column-gap: var(--pad-m);
+		justify-content: space-between;
+	}
+	.mobile .cell:has(:nth-child(2)) > :last-child {
+		text-align: right;
+        flex-shrink: 0;
+	}
+</style>