hamzus-ui 0.0.140 → 0.0.142

package/index.d.ts

@@ -42,6 +42,7 @@ export * as Tabs from "./src/components/hamzus-ui/Tabs"
 export { default as Image } from "./src/components/hamzus-ui/Image/Image.svelte"
 export * as Table from "./src/components/hamzus-ui/Table"
 export * as DataList from "./src/components/hamzus-ui/DataList"
+export * as ResponsiveTable from "./src/components/hamzus-ui/ResponsiveTable"
 export { default as Skeleton } from "./src/components/hamzus-ui/Skeleton/Skeleton.svelte"
 export { default as LineLoader } from "./src/components/hamzus-ui/LineLoader/LineLoader.svelte"
 export { default as ProgressCircle } from "./src/components/hamzus-ui/ProgressCircle/ProgressCircle.svelte"

package/index.js

@@ -39,6 +39,7 @@ export * as Tabs from "./src/components/hamzus-ui/Tabs"
 export { default as Image } from "./src/components/hamzus-ui/Image/Image.svelte"
 export * as Table from "./src/components/hamzus-ui/Table"
 export * as DataList from "./src/components/hamzus-ui/DataList"
+export * as ResponsiveTable from "./src/components/hamzus-ui/ResponsiveTable"
 export { default as Skeleton } from "./src/components/hamzus-ui/Skeleton/Skeleton.svelte"
 export { default as LineLoader } from "./src/components/hamzus-ui/LineLoader/LineLoader.svelte"
 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.140",
+	"version": "0.0.142",
 	"type": "module",
     "main": "index.js",
     "svelte": "index.js",

package/src/components/hamzus-ui/ResponsiveTable/Body.svelte

@@ -0,0 +1,4 @@
+
+<tbody>
+    <slot/>
+</tbody>

package/src/components/hamzus-ui/ResponsiveTable/Cell.svelte

@@ -0,0 +1,76 @@
+<script>
+	import Skeleton from '../Skeleton/Skeleton.svelte';
+	import { onMount } from 'svelte';
+
+	export let ctx;
+
+	const { columns } = ctx;
+
+	$: style = getStyle($columns, isMounted);
+
+	let isMounted = false;
+
+	let div;
+
+	let data = null;
+
+	onMount(() => {
+		isMounted = true;
+	});
+
+	function getStyle(columns) {
+		if (!isMounted) {
+			return;
+		}
+
+		const index = Array.from(div.parentNode.children).indexOf(div);
+
+		data = columns[index];
+	}
+</script>
+
+<td bind:this={div} class="cell {data && data.align ? data.align : ''}">
+	{#if data !== null}
+		{#if data.label}
+			<h4 class="sub-title">{data.label}</h4>
+		{/if}
+		<slot />
+	{:else}
+		<Skeleton style="widht:100%;height:20px;"></Skeleton>
+	{/if}
+</td>
+
+<style>
+	.cell {
+		text-align: center;
+	}
+
+	.cell.left {
+		text-align: left;
+	}
+	.cell.right {
+		text-align: right;
+	}
+
+	.sub-title {
+		text-align: left;
+	}
+
+	@media (min-width: 500px) {
+		.sub-title {
+			display: none;
+		}
+	}
+	@media (max-width: 500px) {
+		.cell {
+			text-align: left;
+		}
+
+		.cell.left {
+			text-align: left;
+		}
+		.cell.right {
+			text-align: left;
+		}
+	}
+</style>

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

@@ -0,0 +1,19 @@
+<script>
+	import { onMount } from "svelte";
+</script>
+<thead class="header">
+    <tr>
+        <slot/>
+    </tr>
+</thead>
+
+<style>
+    .header {
+        background-color: var(--bg-blur);
+    }
+    @media (max-width:500px) {
+        .header {
+            display: none;
+        }
+    }
+</style>

package/src/components/hamzus-ui/ResponsiveTable/HeaderCell.svelte

@@ -0,0 +1,41 @@
+<script>
+	import Skeleton from '../Skeleton/Skeleton.svelte';
+	import { onMount } from 'svelte';
+	import { writable } from 'svelte/store';
+
+	export let width = '1fr';
+	export let label = null;
+	export let align = 'center';
+
+	export let ctx;
+
+	const { columns } = ctx;
+
+	let index = null;
+
+	onMount(() => {
+		index = ctx.registerHeaderCell(width, label, align);
+	});
+</script>
+
+<th class="header-cell {align}" {width} {...$$restProps}>
+	{#if index !== null}
+		<slot />
+	{:else}
+        <Skeleton style="width:100%;height:12px;"></Skeleton>
+    {/if}
+</th>
+
+<style>
+	.header-cell {
+		padding: var(--pad-s) var(--pad-m);
+		text-align: center;
+	}
+
+	.header-cell.left {
+		text-align: left;
+	}
+	.header-cell.right {
+		text-align: right;
+	}
+</style>

package/src/components/hamzus-ui/ResponsiveTable/Line.svelte

@@ -0,0 +1,25 @@
+<tr class="line" {...$$restProps}>
+    <slot/>
+</tr>
+
+<style>
+    .line {
+        border-bottom: 1px solid var(--stroke);
+    }
+
+    .line:last-child {
+        border-bottom: initial;
+    }
+
+    .line :global(td) {
+        padding: var(--pad-s);
+    }
+    @media (max-width:500px) {
+        .line {
+            display: flex;
+            flex-direction: column;
+            padding: var(--pad-m);
+            row-gap: var(--pad-m);
+        }
+    }
+</style>

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

@@ -0,0 +1,43 @@
+<script>
+	import { writable } from 'svelte/store';
+
+	export let ctx = {
+		columns: writable([]),
+		registerHeaderCell: (width, label, align) => {
+			let index;
+			ctx.columns.update((actualValue) => {
+				index = actualValue.length;
+				return [
+					...actualValue,
+					{
+						width: width,
+						index: index,
+						label: label,
+						align: align
+					}
+				];
+			});
+
+			return index;
+		}
+	};
+</script>
+
+<table {...$$restProps} class="table">
+	<slot {ctx} />
+</table>
+
+<style>
+    .table {
+        border-collapse: collapse;
+    }
+	@media (max-width: 500px) {
+		.table {
+            display: flex;
+            flex-direction: column;
+			border: 1px solid var(--stroke);
+            border-radius: var(--radius-m);
+            overflow: hidden;
+		}
+	}
+</style>

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

@@ -0,0 +1,8 @@
+export { default as Root } from './Root.svelte';
+
+export { default as Header } from './Header.svelte';
+export { default as HeaderCell } from './HeaderCell.svelte';
+
+export { default as Body } from './Body.svelte';
+export { default as Line } from './Line.svelte';
+export { default as Cell } from './Cell.svelte';