@ibobbyts/svelte-ui-utils 0.2.11 → 0.2.13

package/dist/sortable-table/SortableTableEnhanced.svelte

@@ -0,0 +1,128 @@
+<script lang="ts" generics="Item extends SortableTableItem">
+  import type { Snippet } from 'svelte';
+  import SortableTable from './SortableTable.svelte';
+  import type {
+    SortableTableItem,
+    SortableTableReorderDetail,
+    SortableTableRowColorPreset
+  } from './types.js';
+
+  let {
+    items = [],
+    getId = (item: Item) => item.id,
+    disabled = false,
+    allowRemoveLast = false,
+    tableClass = '',
+    currentId = null,
+    getCurrentDisabled = () => false,
+    getCurrentLabel = (item: Item) => `Set ${getId(item)} as current`,
+    getRowColorPreset = () => null,
+    getDragLabel,
+    getRemoveLabel,
+    onReorder,
+    onRemove,
+    onCurrentChange,
+    header,
+    children
+  }: {
+    items?: Item[];
+    getId?: (item: Item) => string;
+    disabled?: boolean;
+    allowRemoveLast?: boolean;
+    tableClass?: string;
+    currentId?: string | null;
+    getCurrentDisabled?: (item: Item, index: number) => boolean;
+    getCurrentLabel?: (item: Item, index: number) => string;
+    getRowColorPreset?: (item: Item, index: number) => SortableTableRowColorPreset | undefined | null;
+    getDragLabel?: (item: Item, index: number) => string;
+    getRemoveLabel?: (item: Item, index: number) => string;
+    onReorder?: (items: Item[], detail: SortableTableReorderDetail) => void;
+    onRemove?: (item: Item) => void;
+    onCurrentChange?: (item: Item) => void | Promise<void>;
+    header: Snippet;
+    children: Snippet<[Item, number]>;
+  } = $props();
+
+  const instanceId = $props.id();
+  const radioName = `suu-sortable-table-current-${instanceId}`;
+
+  function rowClass(item: Item, index: number): string | undefined {
+    const preset = getRowColorPreset(item, index);
+    return preset ? `suu-sortable-table-enhanced__row--${preset}` : undefined;
+  }
+
+  function selectCurrent(item: Item): void {
+    void onCurrentChange?.(item);
+  }
+</script>
+
+{#snippet currentControl(item: Item, index: number)}
+  <input
+    type="radio"
+    class="suu-sortable-table-enhanced__current"
+    name={radioName}
+    value={getId(item)}
+    checked={currentId === getId(item)}
+    disabled={disabled || !onCurrentChange || getCurrentDisabled(item, index)}
+    aria-label={getCurrentLabel(item, index)}
+    onchange={() => selectCurrent(item)}
+  />
+{/snippet}
+
+<SortableTable
+  {items}
+  {getId}
+  {disabled}
+  {allowRemoveLast}
+  tableClass={`suu-sortable-table-enhanced ${tableClass}`.trim()}
+  getRowClass={rowClass}
+  {getDragLabel}
+  {getRemoveLabel}
+  {onReorder}
+  {onRemove}
+  dragAccessory={currentControl}
+  {header}
+  {children}
+/>
+
+<style>
+  :global(.suu-sortable-table-enhanced .suu-sortable-table__drag-column),
+  :global(.suu-sortable-table-enhanced .suu-sortable-table__drag-cell) {
+    width: 68px;
+  }
+  :global(.suu-sortable-table-enhanced .suu-sortable-table__drag-cell) {
+    white-space: nowrap;
+  }
+  .suu-sortable-table-enhanced__current {
+    width: 16px;
+    height: 16px;
+    margin: 0 0 0 6px;
+    accent-color: var(--suu-color-accent, #2563eb);
+    vertical-align: middle;
+    cursor: pointer;
+  }
+  .suu-sortable-table-enhanced__current:disabled {
+    cursor: default;
+    opacity: .45;
+  }
+  :global(.suu-sortable-table-enhanced__row--red > td) {
+    background-color: var(--suu-sortable-table-row-red-light, rgba(207, 34, 46, .08));
+  }
+  :global(.suu-sortable-table-enhanced__row--yellow > td) {
+    background-color: var(--suu-sortable-table-row-yellow-light, rgba(191, 135, 0, .09));
+  }
+  :global(.suu-sortable-table-enhanced__row--green > td) {
+    background-color: var(--suu-sortable-table-row-green-light, rgba(26, 127, 55, .08));
+  }
+  @media (prefers-color-scheme: dark) {
+    :global(.suu-sortable-table-enhanced__row--red > td) {
+      background-color: var(--suu-sortable-table-row-red-dark, var(--suu-sortable-table-row-red-light, rgba(239, 68, 68, .14)));
+    }
+    :global(.suu-sortable-table-enhanced__row--yellow > td) {
+      background-color: var(--suu-sortable-table-row-yellow-dark, var(--suu-sortable-table-row-yellow-light, rgba(245, 158, 11, .14)));
+    }
+    :global(.suu-sortable-table-enhanced__row--green > td) {
+      background-color: var(--suu-sortable-table-row-green-dark, var(--suu-sortable-table-row-green-light, rgba(34, 197, 94, .13)));
+    }
+  }
+</style>

package/dist/sortable-table/SortableTableEnhanced.svelte.d.ts

@@ -0,0 +1,44 @@
+import type { Snippet } from 'svelte';
+import type { SortableTableItem, SortableTableReorderDetail, SortableTableRowColorPreset } from './types.js';
+declare function $$render<Item extends SortableTableItem>(): {
+    props: {
+        items?: Item[];
+        getId?: (item: Item) => string;
+        disabled?: boolean;
+        allowRemoveLast?: boolean;
+        tableClass?: string;
+        currentId?: string | null;
+        getCurrentDisabled?: (item: Item, index: number) => boolean;
+        getCurrentLabel?: (item: Item, index: number) => string;
+        getRowColorPreset?: (item: Item, index: number) => SortableTableRowColorPreset | undefined | null;
+        getDragLabel?: (item: Item, index: number) => string;
+        getRemoveLabel?: (item: Item, index: number) => string;
+        onReorder?: (items: Item[], detail: SortableTableReorderDetail) => void;
+        onRemove?: (item: Item) => void;
+        onCurrentChange?: (item: Item) => void | Promise<void>;
+        header: Snippet;
+        children: Snippet<[Item, number]>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Item extends SortableTableItem> {
+    props(): ReturnType<typeof $$render<Item>>['props'];
+    events(): ReturnType<typeof $$render<Item>>['events'];
+    slots(): ReturnType<typeof $$render<Item>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Item extends SortableTableItem>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Item>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Item>['props']>, ReturnType<__sveltets_Render<Item>['events']>, ReturnType<__sveltets_Render<Item>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Item>['bindings']>;
+    } & ReturnType<__sveltets_Render<Item>['exports']>;
+    <Item extends SortableTableItem>(internal: unknown, props: ReturnType<__sveltets_Render<Item>['props']> & {}): ReturnType<__sveltets_Render<Item>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const SortableTableEnhanced: $$IsomorphicComponent;
+type SortableTableEnhanced<Item extends SortableTableItem> = InstanceType<typeof SortableTableEnhanced<Item>>;
+export default SortableTableEnhanced;
+//# sourceMappingURL=SortableTableEnhanced.svelte.d.ts.map

package/dist/sortable-table/SortableTableEnhanced.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortableTableEnhanced.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/sortable-table/SortableTableEnhanced.svelte.ts"],"names":[],"mappings":"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"}

package/dist/sortable-table/index.d.ts

@@ -0,0 +1,4 @@
+export { default as SortableTable } from './SortableTable.svelte';
+export { default as SortableTableEnhanced } from './SortableTableEnhanced.svelte';
+export type { SortableTableHandle, SortableTableItem, SortableTableReorderDetail, SortableTableRowClassGetter, SortableTableRowColorPreset, SortableTableRowColorPresetGetter } from './types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/sortable-table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/sortable-table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAClF,YAAY,EACV,mBAAmB,EACnB,iBAAiB,EACjB,0BAA0B,EAC1B,2BAA2B,EAC3B,2BAA2B,EAC3B,iCAAiC,EAClC,MAAM,YAAY,CAAC"}

package/dist/sortable-table/index.js

@@ -0,0 +1,2 @@
+export { default as SortableTable } from './SortableTable.svelte';
+export { default as SortableTableEnhanced } from './SortableTableEnhanced.svelte';

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

@@ -0,0 +1,16 @@
+import type { SortableListDropPosition, SortableListItem } from '../sortable-list/types.js';
+export type SortableTableItem = SortableListItem;
+export type SortableTableReorderDetail = {
+    sourceId: string;
+    targetId: string;
+    position: SortableListDropPosition;
+};
+export type SortableTableHandle = {
+    draggable: boolean;
+    ondragstart: (event: DragEvent) => void;
+    ondragend: () => void;
+};
+export type SortableTableRowClassGetter<Item extends SortableTableItem> = (item: Item, index: number) => string | undefined | null;
+export type SortableTableRowColorPreset = 'red' | 'yellow' | 'green';
+export type SortableTableRowColorPresetGetter<Item extends SortableTableItem> = (item: Item, index: number) => SortableTableRowColorPreset | undefined | null;
+//# sourceMappingURL=types.d.ts.map

package/dist/sortable-table/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/lib/sortable-table/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAE5F,MAAM,MAAM,iBAAiB,GAAG,gBAAgB,CAAC;AACjD,MAAM,MAAM,0BAA0B,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,wBAAwB,CAAA;CAAE,CAAC;AACpH,MAAM,MAAM,mBAAmB,GAAG;IAAE,SAAS,EAAE,OAAO,CAAC;IAAC,WAAW,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAAC,SAAS,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC;AACzH,MAAM,MAAM,2BAA2B,CAAC,IAAI,SAAS,iBAAiB,IAAI,CACxE,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,MAAM,KACV,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;AAC/B,MAAM,MAAM,2BAA2B,GAAG,KAAK,GAAG,QAAQ,GAAG,OAAO,CAAC;AACrE,MAAM,MAAM,iCAAiC,CAAC,IAAI,SAAS,iBAAiB,IAAI,CAC9E,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,MAAM,KACV,2BAA2B,GAAG,SAAS,GAAG,IAAI,CAAC"}

package/dist/sortable-table/types.js

@@ -0,0 +1 @@
+export {};

package/dist/style.css

@@ -1139,6 +1139,10 @@
   line-height: 1;
 }
 
+.suu-dropdown--sized .suu-dropdown__button {
+  width: 100%;
+}
+
 .suu-dropdown__button:hover,
 .suu-dropdown__button:focus-visible {
   border-color: var(--suu-color-accent);
@@ -1208,6 +1212,19 @@
   overscroll-behavior: contain;
 }
 
+.suu-dropdown__group + .suu-dropdown__group {
+  border-top: 1px solid var(--suu-color-border);
+}
+
+.suu-dropdown__group-label {
+  padding: 8px 14px 6px;
+  background: var(--suu-color-surface);
+  color: var(--suu-color-muted);
+  font-size: 0.75em;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+}
+
 .suu-dropdown__option {
   display: block;
   width: 100%;
@@ -1309,7 +1326,7 @@
   display: flex;
   gap: 12px;
   align-items: center;
-  padding: 16px 18px;
+  padding: var(--suu-dialog-padding, 16px 18px);
 }
 
 .suu-dialog__header {
@@ -1368,7 +1385,7 @@
 .suu-dialog__body {
   min-height: 0;
   overflow: auto;
-  padding: 18px;
+  padding: var(--suu-dialog-padding, 18px);
 }
 
 .suu-dialog__footer {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ibobbyts/svelte-ui-utils",
-  "version": "0.2.11",
+  "version": "0.2.13",
   "description": "Reusable Svelte 5 UI utilities for dialogs, toast notifications, dropdown search, and data tables.",
   "type": "module",
   "license": "MIT",
@@ -62,6 +62,21 @@
       "svelte": "./dist/pagination/index.js",
       "default": "./dist/pagination/index.js"
     },
+    "./sortable-list": {
+      "types": "./dist/sortable-list/index.d.ts",
+      "svelte": "./dist/sortable-list/index.js",
+      "default": "./dist/sortable-list/index.js"
+    },
+    "./ordered-list": {
+      "types": "./dist/ordered-list/index.d.ts",
+      "svelte": "./dist/ordered-list/index.js",
+      "default": "./dist/ordered-list/index.js"
+    },
+    "./sortable-table": {
+      "types": "./dist/sortable-table/index.d.ts",
+      "svelte": "./dist/sortable-table/index.js",
+      "default": "./dist/sortable-table/index.js"
+    },
     "./style.css": "./dist/style.css"
   },
   "publishConfig": {