@ims360/svelte-ivory 0.3.2 → 0.3.3

package/dist/components/basic/Element.svelte

@@ -42,11 +42,11 @@
     }: ElementProps & { div?: HTMLElement } = $props();
 
     function isAnchor(props: ElementProps): props is AnchorAttributes {
-        return 'href' in props;
+        return 'href' in props && typeof props.href !== 'undefined';
     }
 
     function isButton(props: ElementProps): props is ButtonAttributes {
-        return 'onclick' in props || 'type' in props;
+        return ('onclick' in props && typeof props.onclick !== 'undefined') || 'type' in props;
     }
 </script>
 

package/dist/components/table/Column.svelte

@@ -3,6 +3,7 @@
     import { merge } from '../../utils/functions';
     import { type Snippet } from 'svelte';
     import type { ClassValue } from 'svelte/elements';
+    import Element from '../basic/Element.svelte';
     import type { ColumnConfig } from './columnController.svelte';
     import { getRowContext } from './Row.svelte';
     import { getTableContext } from './Table.svelte';
@@ -12,6 +13,7 @@
         /** If the type is incorrect pass the "row" property with the right type */
         children: Snippet;
         onclick?: (e: Event) => void | Promise<void>;
+        href?: string;
         /** Cannot be used with resizable columns*/
         ignoreWidth?: boolean;
         offsetNestingLevel?: number;
@@ -21,37 +23,38 @@
 <script lang="ts">
     let {
         class: clazz,
-        children,
         onclick,
+        href,
         ignoreWidth = false,
+        offsetNestingLevel = 0,
         // ColumnConfig
+        id,
+        width,
+        minWidth,
         resizable = true,
-        offsetNestingLevel = 0,
+        header,
         ...props
     }: ColumnProps = $props();
 
     // Register the new column if this is the first table row that was rendered
     const tableContext = getTableContext();
-    const column = tableContext.registerColumn({ resizable, ...props });
+    const column = tableContext.registerColumn({ id, width, minWidth, resizable, header });
     const rowContext = getRowContext();
 
     const finalOnClick = $derived(onclick || rowContext.onclick);
-    const allowClicking = $derived(!!(onclick || rowContext.onclick));
-
-    const element = $derived.by(() => {
-        if (finalOnClick) return 'button';
-        if (rowContext.href) return 'a';
-        return 'div';
+    const finalHref = $derived.by(() => {
+        if (finalOnClick) return undefined;
+        return href || rowContext.href;
     });
 
     // passes updated props to the column
     $effect(() => {
-        column.updateConfig({ resizable, ...props });
+        column.updateConfig({ resizable, minWidth, id, header });
     });
 
     // this must be separate to the above effect, since otherwise the width would be reset on every scroll
     $effect(() => {
-        if (!resizable && typeof props.width !== 'undefined') column.width = props.width;
+        if (!resizable && typeof width !== 'undefined') column.width = width;
     });
 
     const widthStyle = $derived(
@@ -60,11 +63,10 @@
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<svelte:element
-    this={element}
-    onclick={allowClicking ? finalOnClick : undefined}
-    href={!allowClicking ? rowContext.href : undefined}
-    type={allowClicking ? 'button' : undefined}
+<Element
+    {...props}
+    onclick={finalOnClick}
+    href={finalHref}
     style={ignoreWidth ? '' : `width: ${widthStyle}`}
     class={merge([
         'box-border flex h-full shrink-0 flex-row items-center justify-start gap-1 truncate',
@@ -72,6 +74,4 @@
         theme.current.table?.column?.class,
         clazz
     ])}
->
-    {@render children()}
-</svelte:element>
+/>

package/dist/components/table/Column.svelte.d.ts

@@ -6,6 +6,7 @@ export interface ColumnProps extends ColumnConfig {
     /** If the type is incorrect pass the "row" property with the right type */
     children: Snippet;
     onclick?: (e: Event) => void | Promise<void>;
+    href?: string;
     /** Cannot be used with resizable columns*/
     ignoreWidth?: boolean;
     offsetNestingLevel?: number;

package/dist/components/table/Column.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Column.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/table/Column.svelte.ts"],"names":[],"mappings":"AAKI,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAI9D,MAAM,WAAW,WAAY,SAAQ,YAAY;IAC7C,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,2EAA2E;IAC3E,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7C,2CAA2C;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAyDL,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Column.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/table/Column.svelte.ts"],"names":[],"mappings":"AAKI,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAI9D,MAAM,WAAW,WAAY,SAAQ,YAAY;IAC7C,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,2EAA2E;IAC3E,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAwDL,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ims360/svelte-ivory",
-    "version": "0.3.2",
+    "version": "0.3.3",
     "keywords": [
         "svelte"
     ],

package/src/lib/components/basic/Element.svelte

@@ -42,11 +42,11 @@
     }: ElementProps & { div?: HTMLElement } = $props();
 
     function isAnchor(props: ElementProps): props is AnchorAttributes {
-        return 'href' in props;
+        return 'href' in props && typeof props.href !== 'undefined';
     }
 
     function isButton(props: ElementProps): props is ButtonAttributes {
-        return 'onclick' in props || 'type' in props;
+        return ('onclick' in props && typeof props.onclick !== 'undefined') || 'type' in props;
     }
 </script>
 

package/src/lib/components/table/Column.svelte

@@ -3,6 +3,7 @@
     import { merge } from '$lib/utils/functions';
     import { type Snippet } from 'svelte';
     import type { ClassValue } from 'svelte/elements';
+    import Element from '../basic/Element.svelte';
     import type { ColumnConfig } from './columnController.svelte';
     import { getRowContext } from './Row.svelte';
     import { getTableContext } from './Table.svelte';
@@ -12,6 +13,7 @@
         /** If the type is incorrect pass the "row" property with the right type */
         children: Snippet;
         onclick?: (e: Event) => void | Promise<void>;
+        href?: string;
         /** Cannot be used with resizable columns*/
         ignoreWidth?: boolean;
         offsetNestingLevel?: number;
@@ -21,37 +23,38 @@
 <script lang="ts">
     let {
         class: clazz,
-        children,
         onclick,
+        href,
         ignoreWidth = false,
+        offsetNestingLevel = 0,
         // ColumnConfig
+        id,
+        width,
+        minWidth,
         resizable = true,
-        offsetNestingLevel = 0,
+        header,
         ...props
     }: ColumnProps = $props();
 
     // Register the new column if this is the first table row that was rendered
     const tableContext = getTableContext();
-    const column = tableContext.registerColumn({ resizable, ...props });
+    const column = tableContext.registerColumn({ id, width, minWidth, resizable, header });
     const rowContext = getRowContext();
 
     const finalOnClick = $derived(onclick || rowContext.onclick);
-    const allowClicking = $derived(!!(onclick || rowContext.onclick));
-
-    const element = $derived.by(() => {
-        if (finalOnClick) return 'button';
-        if (rowContext.href) return 'a';
-        return 'div';
+    const finalHref = $derived.by(() => {
+        if (finalOnClick) return undefined;
+        return href || rowContext.href;
     });
 
     // passes updated props to the column
     $effect(() => {
-        column.updateConfig({ resizable, ...props });
+        column.updateConfig({ resizable, minWidth, id, header });
     });
 
     // this must be separate to the above effect, since otherwise the width would be reset on every scroll
     $effect(() => {
-        if (!resizable && typeof props.width !== 'undefined') column.width = props.width;
+        if (!resizable && typeof width !== 'undefined') column.width = width;
     });
 
     const widthStyle = $derived(
@@ -60,11 +63,10 @@
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<svelte:element
-    this={element}
-    onclick={allowClicking ? finalOnClick : undefined}
-    href={!allowClicking ? rowContext.href : undefined}
-    type={allowClicking ? 'button' : undefined}
+<Element
+    {...props}
+    onclick={finalOnClick}
+    href={finalHref}
     style={ignoreWidth ? '' : `width: ${widthStyle}`}
     class={merge([
         'box-border flex h-full shrink-0 flex-row items-center justify-start gap-1 truncate',
@@ -72,6 +74,4 @@
         theme.current.table?.column?.class,
         clazz
     ])}
->
-    {@render children()}
-</svelte:element>
+/>