@tanglemedia/svelte-starter-ui-shadcn 0.0.6 → 0.2.0

package/dist/lib/components/ui/data-table/render-helpers.d.ts

@@ -1,90 +0,0 @@
-import type { Component, ComponentProps, Snippet } from "svelte";
-/**
- * A helper class to make it easy to identify Svelte components in
- * `columnDef.cell` and `columnDef.header` properties.
- *
- * > NOTE: This class should only be used internally by the adapter. If you're
- * reading this and you don't know what this is for, you probably don't need it.
- *
- * @example
- * ```svelte
- * {@const result = content(context as any)}
- * {#if result instanceof RenderComponentConfig}
- *   {@const { component: Component, props } = result}
- *   <Component {...props} />
- * {/if}
- * ```
- */
-export declare class RenderComponentConfig<TComponent extends Component> {
-    component: TComponent;
-    props: ComponentProps<TComponent> | Record<string, never>;
-    constructor(component: TComponent, props?: ComponentProps<TComponent> | Record<string, never>);
-}
-/**
- * A helper class to make it easy to identify Svelte Snippets in `columnDef.cell` and `columnDef.header` properties.
- *
- * > NOTE: This class should only be used internally by the adapter. If you're
- * reading this and you don't know what this is for, you probably don't need it.
- *
- * @example
- * ```svelte
- * {@const result = content(context as any)}
- * {#if result instanceof RenderSnippetConfig}
- *   {@const { snippet, params } = result}
- *   {@render snippet(params)}
- * {/if}
- * ```
- */
-export declare class RenderSnippetConfig<TProps> {
-    snippet: Snippet<[TProps]>;
-    params: TProps;
-    constructor(snippet: Snippet<[TProps]>, params: TProps);
-}
-/**
- * A helper function to help create cells from Svelte components through ColumnDef's `cell` and `header` properties.
- *
- * This is only to be used with Svelte Components - use `renderSnippet` for Svelte Snippets.
- *
- * @param component A Svelte component
- * @param props The props to pass to `component`
- * @returns A `RenderComponentConfig` object that helps svelte-table know how to render the header/cell component.
- * @example
- * ```ts
- * // +page.svelte
- * const defaultColumns = [
- *   columnHelper.accessor('name', {
- *     header: header => renderComponent(SortHeader, { label: 'Name', header }),
- *   }),
- *   columnHelper.accessor('state', {
- *     header: header => renderComponent(SortHeader, { label: 'State', header }),
- *   }),
- * ]
- * ```
- * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
- */
-export declare function renderComponent<T extends Component<any>, Props extends ComponentProps<T>>(component: T, props: Props): RenderComponentConfig<T>;
-/**
- * A helper function to help create cells from Svelte Snippets through ColumnDef's `cell` and `header` properties.
- *
- * The snippet must only take one parameter.
- *
- * This is only to be used with Snippets - use `renderComponent` for Svelte Components.
- *
- * @param snippet
- * @param params
- * @returns - A `RenderSnippetConfig` object that helps svelte-table know how to render the header/cell snippet.
- * @example
- * ```ts
- * // +page.svelte
- * const defaultColumns = [
- *   columnHelper.accessor('name', {
- *     cell: cell => renderSnippet(nameSnippet, { name: cell.row.name }),
- *   }),
- *   columnHelper.accessor('state', {
- *     cell: cell => renderSnippet(stateSnippet, { state: cell.row.state }),
- *   }),
- * ]
- * ```
- * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
- */
-export declare function renderSnippet<TProps>(snippet: Snippet<[TProps]>, params: TProps): RenderSnippetConfig<TProps>;

package/dist/lib/components/ui/data-table/render-helpers.js

@@ -1,99 +0,0 @@
-/**
- * A helper class to make it easy to identify Svelte components in
- * `columnDef.cell` and `columnDef.header` properties.
- *
- * > NOTE: This class should only be used internally by the adapter. If you're
- * reading this and you don't know what this is for, you probably don't need it.
- *
- * @example
- * ```svelte
- * {@const result = content(context as any)}
- * {#if result instanceof RenderComponentConfig}
- *   {@const { component: Component, props } = result}
- *   <Component {...props} />
- * {/if}
- * ```
- */
-export class RenderComponentConfig {
-    component;
-    props;
-    constructor(component, props = {}) {
-        this.component = component;
-        this.props = props;
-    }
-}
-/**
- * A helper class to make it easy to identify Svelte Snippets in `columnDef.cell` and `columnDef.header` properties.
- *
- * > NOTE: This class should only be used internally by the adapter. If you're
- * reading this and you don't know what this is for, you probably don't need it.
- *
- * @example
- * ```svelte
- * {@const result = content(context as any)}
- * {#if result instanceof RenderSnippetConfig}
- *   {@const { snippet, params } = result}
- *   {@render snippet(params)}
- * {/if}
- * ```
- */
-export class RenderSnippetConfig {
-    snippet;
-    params;
-    constructor(snippet, params) {
-        this.snippet = snippet;
-        this.params = params;
-    }
-}
-/**
- * A helper function to help create cells from Svelte components through ColumnDef's `cell` and `header` properties.
- *
- * This is only to be used with Svelte Components - use `renderSnippet` for Svelte Snippets.
- *
- * @param component A Svelte component
- * @param props The props to pass to `component`
- * @returns A `RenderComponentConfig` object that helps svelte-table know how to render the header/cell component.
- * @example
- * ```ts
- * // +page.svelte
- * const defaultColumns = [
- *   columnHelper.accessor('name', {
- *     header: header => renderComponent(SortHeader, { label: 'Name', header }),
- *   }),
- *   columnHelper.accessor('state', {
- *     header: header => renderComponent(SortHeader, { label: 'State', header }),
- *   }),
- * ]
- * ```
- * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
- */
-export function renderComponent(component, props) {
-    return new RenderComponentConfig(component, props);
-}
-/**
- * A helper function to help create cells from Svelte Snippets through ColumnDef's `cell` and `header` properties.
- *
- * The snippet must only take one parameter.
- *
- * This is only to be used with Snippets - use `renderComponent` for Svelte Components.
- *
- * @param snippet
- * @param params
- * @returns - A `RenderSnippetConfig` object that helps svelte-table know how to render the header/cell snippet.
- * @example
- * ```ts
- * // +page.svelte
- * const defaultColumns = [
- *   columnHelper.accessor('name', {
- *     cell: cell => renderSnippet(nameSnippet, { name: cell.row.name }),
- *   }),
- *   columnHelper.accessor('state', {
- *     cell: cell => renderSnippet(stateSnippet, { state: cell.row.state }),
- *   }),
- * ]
- * ```
- * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
- */
-export function renderSnippet(snippet, params) {
-    return new RenderSnippetConfig(snippet, params);
-}

package/dist/lib/utils.d.ts

@@ -1,2 +0,0 @@
-import { type ClassValue } from "clsx";
-export declare function cn(...inputs: ClassValue[]): string;

package/src/lib/components/ui/data-table/data-table.svelte.ts

@@ -1,117 +0,0 @@
-import {
-	type RowData,
-	type TableOptions,
-	type TableOptionsResolved,
-	type TableState,
-	createTable,
-} from "@tanstack/table-core";
-
-/**
- * Creates a reactive TanStack table object for Svelte.
- * @param options Table options to create the table with.
- * @returns A reactive table object.
- * @example
- * ```svelte
- * <script>
- *   const table = createSvelteTable({ ... })
- * </script>
- *
- * <table>
- *   <thead>
- *     {#each table.getHeaderGroups() as headerGroup}
- *       <tr>
- *         {#each headerGroup.headers as header}
- *           <th colspan={header.colSpan}>
- *         	   <FlexRender content={header.column.columnDef.header} context={header.getContext()} />
- *         	 </th>
- *         {/each}
- *       </tr>
- *     {/each}
- *   </thead>
- * 	 <!-- ... -->
- * </table>
- * ```
- */
-export function createSvelteTable<TData extends RowData>(options: TableOptions<TData>) {
-	const resolvedOptions: TableOptionsResolved<TData> = mergeObjects(
-		{
-			state: {},
-			onStateChange() {},
-			renderFallbackValue: null,
-			mergeOptions: (
-				defaultOptions: TableOptions<TData>,
-				options: Partial<TableOptions<TData>>
-			) => {
-				return mergeObjects(defaultOptions, options);
-			},
-		},
-		options
-	);
-
-	const table = createTable(resolvedOptions);
-	let state = $state<Partial<TableState>>(table.initialState);
-
-	function updateOptions() {
-		table.setOptions((prev) => {
-			return mergeObjects(prev, options, {
-				state: mergeObjects(state, options.state || {}),
-
-				// eslint-disable-next-line @typescript-eslint/no-explicit-any
-				onStateChange: (updater: any) => {
-					if (updater instanceof Function) state = updater(state);
-					else state = mergeObjects(state, updater);
-
-					options.onStateChange?.(updater);
-				},
-			});
-		});
-	}
-
-	updateOptions();
-
-	$effect.pre(() => {
-		updateOptions();
-	});
-
-	return table;
-}
-
-/**
- * Merges objects together while keeping their getters alive.
- * Taken from SolidJS: {@link https://github.com/solidjs/solid/blob/24abc825c0996fd2bc8c1de1491efe9a7e743aff/packages/solid/src/server/rendering.ts#L82-L115}
- */
-export function mergeObjects<T>(source: T): T;
-export function mergeObjects<T, U>(source: T, source1: U): T & U;
-export function mergeObjects<T, U, V>(source: T, source1: U, source2: V): T & U & V;
-export function mergeObjects<T, U, V, W>(
-	source: T,
-	source1: U,
-	source2: V,
-	source3: W
-): T & U & V & W;
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function mergeObjects(...sources: any): any {
-	const target = {};
-	for (let i = 0; i < sources.length; i++) {
-		let source = sources[i];
-		if (typeof source === "function") source = source();
-		if (source) {
-			const descriptors = Object.getOwnPropertyDescriptors(source);
-			for (const key in descriptors) {
-				if (key in target) continue;
-				Object.defineProperty(target, key, {
-					enumerable: true,
-					get() {
-						for (let i = sources.length - 1; i >= 0; i--) {
-							let s = sources[i];
-							if (typeof s === "function") s = s();
-							const v = (s || {})[key];
-							if (v !== undefined) return v;
-						}
-					},
-				});
-			}
-		}
-	}
-	return target;
-}

package/src/lib/components/ui/data-table/flex-render.svelte

@@ -1,43 +0,0 @@
-<script lang="ts" module>
-	import type { CellContext, ColumnDefTemplate, HeaderContext } from "@tanstack/table-core";
-	type TData = unknown;
-	type TValue = unknown;
-	type TContext = unknown;
-</script>
-
-<script
-	lang="ts"
-	generics="TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>"
->
-	import { RenderComponentConfig, RenderSnippetConfig } from "./render-helpers.js";
-
-	type Props = {
-		/** The cell or header field of the current cell's column definition. */
-		content?: TContext extends HeaderContext<TData, TValue>
-			? ColumnDefTemplate<HeaderContext<TData, TValue>>
-			: TContext extends CellContext<TData, TValue>
-				? ColumnDefTemplate<CellContext<TData, TValue>>
-				: never;
-		/** The result of the `getContext()` function of the header or cell */
-		context: TContext;
-	};
-
-	let { content, context }: Props = $props();
-</script>
-
-{#if typeof content === "string"}
-	{content}
-{:else if content instanceof Function}
-	<!-- It's unlikely that a CellContext will be passed to a Header -->
-	<!-- eslint-disable-next-line @typescript-eslint/no-explicit-any -->
-	{@const result = content(context as any)}
-	{#if result instanceof RenderComponentConfig}
-		{@const { component: Component, props } = result}
-		<Component {...props} />
-	{:else if result instanceof RenderSnippetConfig}
-		{@const { snippet, params } = result}
-		{@render snippet(params)}
-	{:else}
-		{result}
-	{/if}
-{/if}

package/src/lib/components/ui/data-table/index.ts

@@ -1,3 +0,0 @@
-export { default as FlexRender } from "./flex-render.svelte";
-export { renderComponent, renderSnippet } from "./render-helpers.js";
-export { createSvelteTable } from "./data-table.svelte.js";

package/src/lib/components/ui/data-table/render-helpers.ts

@@ -1,111 +0,0 @@
-import type { Component, ComponentProps, Snippet } from "svelte";
-
-/**
- * A helper class to make it easy to identify Svelte components in
- * `columnDef.cell` and `columnDef.header` properties.
- *
- * > NOTE: This class should only be used internally by the adapter. If you're
- * reading this and you don't know what this is for, you probably don't need it.
- *
- * @example
- * ```svelte
- * {@const result = content(context as any)}
- * {#if result instanceof RenderComponentConfig}
- *   {@const { component: Component, props } = result}
- *   <Component {...props} />
- * {/if}
- * ```
- */
-export class RenderComponentConfig<TComponent extends Component> {
-	component: TComponent;
-	props: ComponentProps<TComponent> | Record<string, never>;
-	constructor(
-		component: TComponent,
-		props: ComponentProps<TComponent> | Record<string, never> = {}
-	) {
-		this.component = component;
-		this.props = props;
-	}
-}
-
-/**
- * A helper class to make it easy to identify Svelte Snippets in `columnDef.cell` and `columnDef.header` properties.
- *
- * > NOTE: This class should only be used internally by the adapter. If you're
- * reading this and you don't know what this is for, you probably don't need it.
- *
- * @example
- * ```svelte
- * {@const result = content(context as any)}
- * {#if result instanceof RenderSnippetConfig}
- *   {@const { snippet, params } = result}
- *   {@render snippet(params)}
- * {/if}
- * ```
- */
-export class RenderSnippetConfig<TProps> {
-	snippet: Snippet<[TProps]>;
-	params: TProps;
-	constructor(snippet: Snippet<[TProps]>, params: TProps) {
-		this.snippet = snippet;
-		this.params = params;
-	}
-}
-
-/**
- * A helper function to help create cells from Svelte components through ColumnDef's `cell` and `header` properties.
- *
- * This is only to be used with Svelte Components - use `renderSnippet` for Svelte Snippets.
- *
- * @param component A Svelte component
- * @param props The props to pass to `component`
- * @returns A `RenderComponentConfig` object that helps svelte-table know how to render the header/cell component.
- * @example
- * ```ts
- * // +page.svelte
- * const defaultColumns = [
- *   columnHelper.accessor('name', {
- *     header: header => renderComponent(SortHeader, { label: 'Name', header }),
- *   }),
- *   columnHelper.accessor('state', {
- *     header: header => renderComponent(SortHeader, { label: 'State', header }),
- *   }),
- * ]
- * ```
- * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
- */
-export function renderComponent<
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	T extends Component<any>,
-	Props extends ComponentProps<T>,
->(component: T, props: Props) {
-	return new RenderComponentConfig(component, props);
-}
-
-/**
- * A helper function to help create cells from Svelte Snippets through ColumnDef's `cell` and `header` properties.
- *
- * The snippet must only take one parameter.
- *
- * This is only to be used with Snippets - use `renderComponent` for Svelte Components.
- *
- * @param snippet
- * @param params
- * @returns - A `RenderSnippetConfig` object that helps svelte-table know how to render the header/cell snippet.
- * @example
- * ```ts
- * // +page.svelte
- * const defaultColumns = [
- *   columnHelper.accessor('name', {
- *     cell: cell => renderSnippet(nameSnippet, { name: cell.row.name }),
- *   }),
- *   columnHelper.accessor('state', {
- *     cell: cell => renderSnippet(stateSnippet, { state: cell.row.state }),
- *   }),
- * ]
- * ```
- * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
- */
-export function renderSnippet<TProps>(snippet: Snippet<[TProps]>, params: TProps) {
-	return new RenderSnippetConfig(snippet, params);
-}

package/src/lib/utils.ts

@@ -1,6 +0,0 @@
-import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-	return twMerge(clsx(inputs));
-}