fluid-ui-svelte 0.2.4 → 0.3.1

package/dist/base/Table.svelte

@@ -0,0 +1,80 @@
+<script lang="ts" generics="T,U,V">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { mergeClasses } from '../utilities/mergeClasses.js';
+	import type { Snippet } from 'svelte';
+
+	const {
+		caption = '',
+		tableHeadItems,
+		tableRowItems,
+		tableFooterItems,
+		headTemplate,
+		bodyTemplate,
+		footerTemplate,
+		class: className = '',
+		captionClass = '',
+		headClass = '',
+		bodyClass = '',
+		rowClass = '',
+		cellClass = '',
+		footerClass = '',
+		overrideDefaultStyling = false,
+		...rest
+	}: {
+		caption?: string;
+		tableHeadItems: Array<T>;
+		tableRowItems: Array<Array<U>>;
+		tableFooterItems: Array<V>;
+		headTemplate: Snippet<[T]>;
+		bodyTemplate: Snippet<[U]>;
+		footerTemplate: Snippet<[V]>;
+		class?: string;
+		captionClass?: string;
+		headClass?: string;
+		bodyClass?: string;
+		rowClass?: string;
+		cellClass?: string;
+		footerClass?: string;
+		overrideDefaultStyling?: boolean;
+	} & HTMLAttributes<HTMLTableElement> = $props();
+</script>
+
+<table
+	class={mergeClasses(className, overrideDefaultStyling ? '' : 'fluid-table')}
+	{...rest}
+>
+	{#if caption}
+		<caption class={mergeClasses(captionClass, overrideDefaultStyling ? '' : 'fluid-table-caption')}>
+			{caption}
+		</caption>
+	{/if}
+	<thead class={mergeClasses(headClass, overrideDefaultStyling ? '' : 'fluid-table-head')}>
+		<tr class={mergeClasses(rowClass, overrideDefaultStyling ? '' : 'fluid-table-row')}>
+			{#each tableHeadItems as item}
+				<th class={mergeClasses(cellClass, overrideDefaultStyling ? '' : 'fluid-table-cell')}
+					>{@render headTemplate(item)}
+				</th>
+			{/each}
+		</tr>
+	</thead>
+	<tbody class={mergeClasses(bodyClass, overrideDefaultStyling ? '' : 'fluid-table-body')}>
+		{#each tableRowItems as items}
+			<tr class={mergeClasses(rowClass, overrideDefaultStyling ? '' : 'fluid-table-row')}>
+				{#each items as item}
+					<td class={mergeClasses(cellClass, overrideDefaultStyling ? '' : 'fluid-table-cell')}
+						>{@render bodyTemplate(item)}</td
+					>
+				{/each}
+			</tr>
+		{/each}
+	</tbody>
+	<tfoot class={mergeClasses(footerClass, overrideDefaultStyling ? '' : 'fluid-table-footer')}>
+		<tr class={mergeClasses(rowClass, overrideDefaultStyling ? '' : 'fluid-table-row')}>
+			{#each tableFooterItems as item}
+				<td class={mergeClasses(cellClass, overrideDefaultStyling ? '' : 'fluid-table-cell')}>
+					{@render footerTemplate(item)}
+				</td>
+			{/each}
+		</tr>
+	</tfoot>
+</table>

package/dist/base/Table.svelte.d.ts

@@ -0,0 +1,42 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+declare function $$render<T, U, V>(): {
+    props: {
+        caption?: string;
+        tableHeadItems: Array<T>;
+        tableRowItems: Array<Array<U>>;
+        tableFooterItems: Array<V>;
+        headTemplate: Snippet<[T]>;
+        bodyTemplate: Snippet<[U]>;
+        footerTemplate: Snippet<[V]>;
+        class?: string;
+        captionClass?: string;
+        headClass?: string;
+        bodyClass?: string;
+        rowClass?: string;
+        cellClass?: string;
+        footerClass?: string;
+        overrideDefaultStyling?: boolean;
+    } & HTMLAttributes<HTMLTableElement>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T, U, V> {
+    props(): ReturnType<typeof $$render<T, U, V>>['props'];
+    events(): ReturnType<typeof $$render<T, U, V>>['events'];
+    slots(): ReturnType<typeof $$render<T, U, V>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T, U, V>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, U, V>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, U, V>['props']>, ReturnType<__sveltets_Render<T, U, V>['events']>, ReturnType<__sveltets_Render<T, U, V>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, U, V>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, U, V>['exports']>;
+    <T, U, V>(internal: unknown, props: ReturnType<__sveltets_Render<T, U, V>['props']> & {}): ReturnType<__sveltets_Render<T, U, V>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
+}
+declare const Table: $$IsomorphicComponent;
+type Table<T, U, V> = InstanceType<typeof Table<T, U, V>>;
+export default Table;

package/dist/base/Text.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { mergeClasses } from '../utilities/mergeClasses.js';
+	import type { Snippet } from 'svelte';
+
+	const {
+		type = 'p',
+		class: className = '',
+		overrideDefaultStyling = false,
+		children,
+		...rest
+	}: {
+		type?:
+			| 'p'
+			| 'h1'
+			| 'h2'
+			| 'h3'
+			| 'h4'
+			| 'h5'
+			| 'h6'
+			| 'span'
+			| 'pre'
+			| 'code'
+			| 'b'
+			| 'strong'
+			| 'i'
+			| 'em'
+			| 'mark'
+			| 'small'
+			| 'del'
+			| 'ins'
+			| 'sub'
+			| 'sup';
+		children?: Snippet;
+		class?: string;
+		overrideDefaultStyling?: boolean;
+	} & HTMLAttributes<HTMLParagraphElement & HTMLHeadingElement & HTMLSpanElement> = $props();
+</script>
+
+<svelte:element
+	this={type}
+	{...rest}
+	class={mergeClasses(className, overrideDefaultStyling ? '' : 'fluid-text')}
+	>{@render children?.()}
+</svelte:element>

package/dist/base/Text.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    type?: 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'pre' | 'code' | 'b' | 'strong' | 'i' | 'em' | 'mark' | 'small' | 'del' | 'ins' | 'sub' | 'sup';
+    children?: Snippet;
+    class?: string;
+    overrideDefaultStyling?: boolean;
+} & HTMLAttributes<HTMLParagraphElement & HTMLHeadingElement & HTMLSpanElement>;
+declare const Text: import("svelte").Component<$$ComponentProps, {}, "">;
+type Text = ReturnType<typeof Text>;
+export default Text;

package/dist/base/index.d.ts

@@ -0,0 +1,8 @@
+export { default as Button } from './Button.svelte';
+export { default as Container } from './Container.svelte';
+export { default as Image } from './Image.svelte';
+export { default as InputField } from './InputField.svelte';
+export { default as Link } from './Link.svelte';
+export { default as List } from './List.svelte';
+export { default as Table } from './Table.svelte';
+export { default as Text } from './Text.svelte';

package/dist/base/index.js

@@ -0,0 +1,8 @@
+export { default as Button } from './Button.svelte';
+export { default as Container } from './Container.svelte';
+export { default as Image } from './Image.svelte';
+export { default as InputField } from './InputField.svelte';
+export { default as Link } from './Link.svelte';
+export { default as List } from './List.svelte';
+export { default as Table } from './Table.svelte';
+export { default as Text } from './Text.svelte';

package/dist/components/Accordion.svelte

@@ -1 +1,44 @@
-<!-- TODO -->
+<script lang="ts">
+	import { Container, Button } from '../base/index.js';
+	import { mergeClasses } from '../utilities/mergeClasses.js';
+	import { slide, type TransitionConfig } from 'svelte/transition';
+	import type { Snippet } from 'svelte';
+
+	const {
+		variation = '',
+		componentId,
+		header,
+		body,
+		transitionFunction = slide,
+		transitionDuration = 250
+	}: {
+		variation?: string;
+		componentId?: string;
+		header: Snippet<[options: { isExpanded: boolean }]>;
+		body: Snippet;
+		transitionFunction?: (node: Element, params?: any) => TransitionConfig;
+		transitionDuration?: number;
+	} = $props();
+	const componentState = $state({ isExpanded: false });
+</script>
+
+<Container id={componentId} class={mergeClasses(variation, 'fluid-accordion-wrapper')}>
+	<Button
+		onclick={async () => {
+			componentState.isExpanded = !componentState.isExpanded;
+		}}
+		class={mergeClasses(variation, 'fluid-accordion-header')}
+		overrideDefaultStyling
+	>
+		{@render header(componentState)}
+	</Button>
+	{#if componentState.isExpanded}
+		<Container
+			transitionFn={transitionFunction}
+			transitionParams={{ duration: transitionDuration }}
+			class={mergeClasses(variation, 'fluid-accordion-body')}
+		>
+			{@render body()}
+		</Container>
+	{/if}
+</Container>

package/dist/components/Accordion.svelte.d.ts

@@ -1,26 +1,15 @@
-export default Accordion;
-type Accordion = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
+import { type TransitionConfig } from 'svelte/transition';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    variation?: string;
+    componentId?: string;
+    header: Snippet<[options: {
+        isExpanded: boolean;
+    }]>;
+    body: Snippet;
+    transitionFunction?: (node: Element, params?: any) => TransitionConfig;
+    transitionDuration?: number;
 };
-declare const Accordion: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
+declare const Accordion: import("svelte").Component<$$ComponentProps, {}, "">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/dist/components/Calendar.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import { Container, Button, Text } from '../base/index.js';
+	import {
+		applyDate,
+		generateCalendarCellStyles,
+		generateDaysOfTheMonthFromDate
+	} from '../utilities/calendar.js';
+	import { mergeClasses } from '../utilities/mergeClasses.js';
+
+	let {
+		variant = '',
+		componentId,
+		currentDate = new Date().toISOString(),
+		startDate = $bindable(),
+		endDate = $bindable(),
+		weekDays = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+		calendarDays = generateDaysOfTheMonthFromDate(new Date().toISOString()),
+		hideRollingDays = false
+	}: {
+		variant?: string;
+		componentId?: string;
+		currentDate?: string;
+		startDate?: string;
+		endDate?: string;
+		weekDays?: Array<string>;
+		calendarDays?: Array<string>;
+		hideRollingDays?: boolean;
+	} = $props();
+
+	function dateSelectionHandler(selectedDate: string) {
+		const result = applyDate({ startDate, endDate: endDate }, selectedDate);
+		startDate = result.startDate;
+		endDate = result.endDate;
+	}
+
+	$effect(() => {
+		calendarDays = generateDaysOfTheMonthFromDate(currentDate);
+	});
+</script>
+
+<Container id={componentId} class={mergeClasses('fluid-calendar-wrapper', variant)}>
+	<Container class={mergeClasses('fluid-calendar-header', variant)}>
+		<Text>{new Date(currentDate).toLocaleString('default', { month: 'long' })}</Text>
+	</Container>
+	<Container class={mergeClasses('fluid-calendar-body', variant)}>
+		{#each weekDays as day}
+			<Text>{day}</Text>
+		{/each}
+
+		{#each calendarDays as cellDay}
+			<Button
+				onclick={async () => dateSelectionHandler(cellDay)}
+				class={mergeClasses(
+					variant,
+					generateCalendarCellStyles(currentDate, cellDay, startDate, endDate, hideRollingDays)
+				)}
+			>
+				{new Date(cellDay).getDate()}
+			</Button>
+		{/each}
+	</Container>
+</Container>

package/dist/components/Calendar.svelte.d.ts

@@ -1,26 +1,13 @@
-export default Calendar;
-type Calendar = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
+type $$ComponentProps = {
+    variant?: string;
+    componentId?: string;
+    currentDate?: string;
+    startDate?: string;
+    endDate?: string;
+    weekDays?: Array<string>;
+    calendarDays?: Array<string>;
+    hideRollingDays?: boolean;
 };
-declare const Calendar: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
+declare const Calendar: import("svelte").Component<$$ComponentProps, {}, "startDate" | "endDate">;
+type Calendar = ReturnType<typeof Calendar>;
+export default Calendar;

package/dist/components/Carousel.svelte

@@ -0,0 +1,114 @@
+<script lang="ts" generics="T">
+	import { Container } from '../base/index.js';
+	import { mergeClasses } from '../utilities/mergeClasses.js';
+	import { scrollToIndex, getSwipeDirection } from '../utilities/carousel.js';
+	import type { Snippet } from 'svelte';
+
+	let {
+		componentId = crypto.randomUUID(),
+		variant = '',
+		orientation = 'horizontal',
+		activeIndex = $bindable(0),
+		autoplay = false,
+		autoplayDuration = 1000,
+		items,
+		itemTemplate
+	}: {
+		componentId?: string;
+		variant?: string;
+		orientation?: 'horizontal' | 'vertical';
+		activeIndex?: number;
+		autoplay?: boolean;
+		autoplayDuration?: number;
+		items: Array<T>;
+		itemTemplate: Snippet<[{ item: T; index: number }]>;
+	} = $props();
+
+	let touchStartX = 0;
+	let touchStartY = 0;
+
+	function handleTouchStart(e: TouchEvent) {
+		e.stopPropagation();
+		e.preventDefault();
+		touchStartX = e.changedTouches[0].screenX;
+		touchStartY = e.changedTouches[0].screenY;
+	}
+
+	function handleTouchMove(e: TouchEvent) {
+		if (!touchStartX || !touchStartY) return;
+
+		const touchCurrentX = e.changedTouches[0].screenX;
+		const touchCurrentY = e.changedTouches[0].screenY;
+
+		const diffX = Math.abs(touchCurrentX - touchStartX);
+		const diffY = Math.abs(touchCurrentY - touchStartY);
+
+		// If horizontal carousel and horizontal swipe is dominant
+		if (orientation === 'horizontal') {
+			if (diffX > diffY && diffX > 5) {
+				e.preventDefault();
+				e.stopPropagation();
+			}
+		} else {
+			// Vertical carousel
+			if (diffY > diffX && diffY > 5) {
+				e.preventDefault();
+				e.stopPropagation();
+			}
+		}
+	}
+
+	function handleTouchEnd(e: TouchEvent) {
+		e.stopPropagation();
+		e.preventDefault();
+		const touchEndX = e.changedTouches[0].screenX;
+		const touchEndY = e.changedTouches[0].screenY;
+
+		const direction = getSwipeDirection(
+			touchStartX,
+			touchStartY,
+			touchEndX,
+			touchEndY,
+			50,
+			orientation
+		);
+
+		if (direction === 'next') {
+			activeIndex = Math.min(activeIndex + 1, items.length - 1);
+		} else if (direction === 'prev') {
+			activeIndex = Math.max(activeIndex - 1, 0);
+		}
+	}
+
+	$effect(() => {
+		if (autoplay && items.length > 0) {
+			const interval = setInterval(() => {
+				activeIndex = (activeIndex + 1) % items.length;
+			}, autoplayDuration);
+			return () => clearInterval(interval);
+		}
+	});
+
+	$effect(() => {
+		if (componentId && items.length > 1) {
+			scrollToIndex(componentId, activeIndex, items.length, orientation);
+		}
+	});
+</script>
+
+<Container
+	id={componentId}
+	ontouchstart={handleTouchStart}
+	ontouchmove={handleTouchMove}
+	ontouchend={handleTouchEnd}
+	class={mergeClasses(
+		`fluid-carousel-container ${orientation === 'vertical' ? 'h-full snap-y flex-col overflow-y-auto' : 'flex snap-x overflow-x-auto'}`,
+		variant
+	)}
+>
+	{#each items as item, index}
+		<Container class={mergeClasses('fluid-carousel-item', variant)} overrideDefaultStyling>
+			{@render itemTemplate({ item, index })}
+		</Container>
+	{/each}
+</Container>

package/dist/components/Carousel.svelte.d.ts

@@ -0,0 +1,37 @@
+import type { Snippet } from 'svelte';
+declare function $$render<T>(): {
+    props: {
+        componentId?: string;
+        variant?: string;
+        orientation?: "horizontal" | "vertical";
+        activeIndex?: number;
+        autoplay?: boolean;
+        autoplayDuration?: number;
+        items: Array<T>;
+        itemTemplate: Snippet<[{
+            item: T;
+            index: number;
+        }]>;
+    };
+    exports: {};
+    bindings: "activeIndex";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "activeIndex";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Carousel: $$IsomorphicComponent;
+type Carousel<T> = InstanceType<typeof Carousel<T>>;
+export default Carousel;

package/dist/components/CodeBlock.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import Container from '../base/Container.svelte';
+	import Text from '../base/Text.svelte';
+
+	const {
+		variation,
+		code = '',
+		language = '',
+		showLineNumbers = true
+	}: {
+		variation?: string;
+		code?: string;
+		language?: string;
+		showLineNumbers?: boolean;
+	} = $props();
+</script>
+
+<Container class="fluid-code-block-container">
+	{#each code.split('\n') as line, index}
+		<Container class="fluid-code-block-row">
+			{#if showLineNumbers}
+				<Container class="fluid-code-block-index"
+					><Text class="select-none">{index}</Text></Container
+				>
+			{/if}
+			<Container class="fluid-code-block-content">
+				<Text type="pre">
+					<Text type="code" class={'language-' + language}>{line}</Text>
+				</Text>
+			</Container>
+		</Container>
+	{/each}
+</Container>

package/dist/components/CodeBlock.svelte.d.ts

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    variation?: string;
+    code?: string;
+    language?: string;
+    showLineNumbers?: boolean;
+};
+declare const CodeBlock: import("svelte").Component<$$ComponentProps, {}, "">;
+type CodeBlock = ReturnType<typeof CodeBlock>;
+export default CodeBlock;