@invopop/popui 0.1.4-beta.10 → 0.1.4-beta.12

package/dist/StepIconList.svelte

@@ -14,7 +14,7 @@
 {/snippet}
 
 <TooltipProvider>
-  <div class="flex flex-col space-y-2 sm:flex-row sm:space-y-0 items-center">
+  <div class="flex flex-col space-y-2 sm:flex-row sm:flex-nowrap sm:space-y-0 items-center">
     {#each mainIcons as icon, i (i)}
       <Tooltip>
         <TooltipTrigger class="shrink-0">

package/dist/data-table/cells/uuid-cell.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import ButtonUuidCopy from '../../ButtonUuidCopy.svelte'
+  import type { UuidCellConfig } from '../data-table-types.js'
+
+  let { value, config }: { value: string; config?: UuidCellConfig } = $props()
+</script>
+
+<ButtonUuidCopy
+  uuid={value}
+  prefixLength={config?.prefixLength}
+  suffixLength={config?.suffixLength}
+  full={config?.full}
+  disabled={config?.disabled}
+  oncopied={config?.onCopy}
+/>

package/dist/data-table/cells/uuid-cell.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { UuidCellConfig } from '../data-table-types.js';
+type $$ComponentProps = {
+    value: string;
+    config?: UuidCellConfig;
+};
+declare const UuidCell: import("svelte").Component<$$ComponentProps, {}, "">;
+type UuidCell = ReturnType<typeof UuidCell>;
+export default UuidCell;

package/dist/data-table/create-columns.js

@@ -4,6 +4,8 @@ import BooleanCell from './cells/boolean-cell.svelte';
 import TagCell from './cells/tag-cell.svelte';
 import DateCell from './cells/date-cell.svelte';
 import CurrencyCell from './cells/currency-cell.svelte';
+import UuidCell from './cells/uuid-cell.svelte';
+import { renderSnippet } from './render-helpers.js';
 export function createColumns(columns) {
     return columns.map((col) => {
         const tanstackCol = {
@@ -19,10 +21,17 @@ export function createColumns(columns) {
         };
         // Cell renderer
         if (col.cell) {
-            // Custom cell renderer
+            // Custom cell renderer - can be a Snippet or a function
             tanstackCol.cell = ({ row }) => {
                 const value = col.accessorKey ? row.original[col.accessorKey] : undefined;
-                return col.cell(value, row.original);
+                // Check if it's a function or a Snippet
+                if (typeof col.cell === 'function') {
+                    return col.cell(value, row.original);
+                }
+                else {
+                    // It's a Snippet, render it with the row data
+                    return renderSnippet(col.cell, row.original);
+                }
             };
         }
         else if (col.cellType) {
@@ -40,6 +49,8 @@ export function createColumns(columns) {
                         return renderComponent(DateCell, { value: value, config: col.cellConfig });
                     case 'currency':
                         return renderComponent(CurrencyCell, { value: value, config: col.cellConfig });
+                    case 'uuid':
+                        return renderComponent(UuidCell, { value: value, config: col.cellConfig });
                     default:
                         return value;
                 }

package/dist/data-table/data-table-types.d.ts

@@ -2,7 +2,7 @@ import type { Component, Snippet } from 'svelte';
 import type { StatusType, AnyProp, TableAction, EmptyStateProps } from '../types.js';
 import type { IconSource } from '@steeze-ui/svelte-icon';
 import type { Table } from '@tanstack/table-core';
-export type CellType = 'text' | 'boolean' | 'tag' | 'date' | 'currency' | 'custom';
+export type CellType = 'text' | 'boolean' | 'tag' | 'date' | 'currency' | 'uuid' | 'custom';
 export interface TextCellConfig {
     className?: string;
 }
@@ -26,14 +26,21 @@ export interface DateCellConfig {
 export interface CurrencyCellConfig {
     className?: string;
 }
-export type CellConfig = TextCellConfig | BooleanCellConfig | TagCellConfig | DateCellConfig | CurrencyCellConfig;
+export interface UuidCellConfig {
+    prefixLength?: number;
+    suffixLength?: number;
+    full?: boolean;
+    disabled?: boolean;
+    onCopy?: (value: string) => void;
+}
+export type CellConfig = TextCellConfig | BooleanCellConfig | TagCellConfig | DateCellConfig | CurrencyCellConfig | UuidCellConfig;
 export interface DataTableColumn<TData> {
     id: string;
     accessorKey?: keyof TData;
     header?: string;
     cellType?: CellType;
     cellConfig?: CellConfig;
-    cell?: (value: any, row: TData) => Snippet | Component | string;
+    cell?: Snippet<[TData]> | ((value: any, row: TData) => Snippet | Component | string);
     enableSorting?: boolean;
     enableHiding?: boolean;
     enableResizing?: boolean;
@@ -63,6 +70,7 @@ export interface DataTableProps<TData> {
     onPageChange?: (pageIndex: number) => void;
     onPageSizeChange?: (pageSize: number) => void;
     onSortingChange?: (columnId: string, direction: 'asc' | 'desc') => void;
+    getRowClassName?: (row: TData) => string;
 }
 export interface DataTablePaginationProps<T> {
     table: Table<T>;

package/dist/data-table/data-table.svelte

@@ -51,7 +51,8 @@
     rowCount,
     onPageChange,
     onPageSizeChange,
-    onSortingChange
+    onSortingChange,
+    getRowClassName
   }: DataTableProps<TData> = $props()
 
   const enableSelection = !disableSelection
@@ -75,7 +76,12 @@
 
   // Build TanStack columns from config
   const columns = $derived.by(() =>
-    buildColumns<TData>(columnConfig, enableSelection, RowActions, getRowActions !== undefined || rowActions.length > 0)
+    buildColumns<TData>(
+      columnConfig,
+      enableSelection,
+      RowActions,
+      getRowActions !== undefined || rowActions.length > 0
+    )
   )
 
   // Calculate initial column sizes based on available width
@@ -259,7 +265,7 @@
           {#each table.getRowModel().rows as row (row.id)}
             <Table.Row
               data-state={row.getIsSelected() ? 'selected' : undefined}
-              class="border-b border-border"
+              class={cn('border-b border-border', getRowClassName?.(row.original as TData))}
               onclick={() => onRowClick?.(row.original as TData)}
             >
               {#each row.getVisibleCells() as cell, index (cell.id)}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@invopop/popui",
   "license": "MIT",
-  "version": "0.1.4-beta.10",
+  "version": "0.1.4-beta.12",
   "repository": {
     "url":  "https://github.com/invopop/popui"
   },