diff --git a/packages/svelte-ux/package.json b/packages/svelte-ux/package.json index 5e8787ec..ce302ffa 100644 --- a/packages/svelte-ux/package.json +++ b/packages/svelte-ux/package.json @@ -72,7 +72,7 @@ "zod": "^3.24.1" }, "peerDependencies": { - "svelte": "^3.56.0 || ^4.0.0 || ^5.0.0" + "svelte": "^5.0.0" }, "main": "./dist/index.js", "exports": { diff --git a/packages/svelte-ux/src/docs/Blockquote.svelte b/packages/svelte-ux/src/docs/Blockquote.svelte index 68b959c6..861702ca 100644 --- a/packages/svelte-ux/src/docs/Blockquote.svelte +++ b/packages/svelte-ux/src/docs/Blockquote.svelte @@ -2,6 +2,13 @@ import { mdiInformation } from '@mdi/js'; import Icon from '../lib/components/Icon.svelte'; import { cls } from '$lib/utils/styles.js'; + import type { Snippet } from 'svelte'; + + interface Props { + children?: Snippet; + } + + let { children }: Props = $props();
- + {@render children?.()}
diff --git a/packages/svelte-ux/src/docs/Header1.svelte b/packages/svelte-ux/src/docs/Header1.svelte index ff25855a..95b923f6 100644 --- a/packages/svelte-ux/src/docs/Header1.svelte +++ b/packages/svelte-ux/src/docs/Header1.svelte @@ -1,5 +1,12 @@ - - + + {@render children?.()} diff --git a/packages/svelte-ux/src/docs/Layout.svelte b/packages/svelte-ux/src/docs/Layout.svelte index d182f8ea..71320435 100644 --- a/packages/svelte-ux/src/docs/Layout.svelte +++ b/packages/svelte-ux/src/docs/Layout.svelte @@ -1,15 +1,21 @@ - - +{@render children?.()} diff --git a/packages/svelte-ux/src/docs/Link.svelte b/packages/svelte-ux/src/docs/Link.svelte index e607ded3..19503a6b 100644 --- a/packages/svelte-ux/src/docs/Link.svelte +++ b/packages/svelte-ux/src/docs/Link.svelte @@ -1,5 +1,16 @@ + + - - - + + + {@render children?.()} diff --git a/packages/svelte-ux/src/docs/ViewSourceButton.svelte b/packages/svelte-ux/src/docs/ViewSourceButton.svelte index ae158e9f..df7a84ba 100644 --- a/packages/svelte-ux/src/docs/ViewSourceButton.svelte +++ b/packages/svelte-ux/src/docs/ViewSourceButton.svelte @@ -8,41 +8,51 @@ import Toggle from '../lib/components/Toggle.svelte'; import Tooltip from '../lib/components/Tooltip.svelte'; - export let label: string; - export let source: string | undefined = undefined; - export let href: string | undefined = undefined; - export let icon: ComponentProps - -
-
-
{label}
-
{href}
-
+ + {#snippet children({ on: open, toggle, toggleOff })} + + +
+
+
{label}
+
{href}
+
- {#if href} - - {/if} -
+ {#if href} + + {/if} +
-
- -
+
+ +
-
- -
- + {#snippet actions()} +
+ +
+ {/snippet} + + {/snippet} {:else if href} diff --git a/packages/svelte-ux/src/lib/actions/table.ts b/packages/svelte-ux/src/lib/actions/table.ts index 3d401ddd..f16f59b3 100644 --- a/packages/svelte-ux/src/lib/actions/table.ts +++ b/packages/svelte-ux/src/lib/actions/table.ts @@ -39,9 +39,7 @@ export const tableCell: Action = (node, options) tracker.addClass('cursor-pointer'); if (order) { - tracker.addEventListener('click', () => - order.onHeaderClick(new CustomEvent('headerClick', { detail: { column } })) - ); + tracker.addEventListener('click', () => order.onHeaderClick(column)); } } } diff --git a/packages/svelte-ux/src/lib/actions/types.d.ts b/packages/svelte-ux/src/lib/actions/types.d.ts index 5c7a1ff7..316d25db 100644 --- a/packages/svelte-ux/src/lib/actions/types.d.ts +++ b/packages/svelte-ux/src/lib/actions/types.d.ts @@ -2,23 +2,23 @@ declare namespace svelteHTML { interface HTMLAttributes { // use:intersection - 'on:intersecting'?: (event: CustomEvent) => void; + 'onintersecting'?: (event: CustomEvent) => void; // use:mutate - 'on:mutate'?: (event: CustomEvent) => void; + 'onmutate'?: (event: CustomEvent) => void; // use:movable - 'on:movestart'?: (event: CustomEvent<{ x: number; y: number }>) => void; - 'on:move'?: (event: CustomEvent<{ x: number; y: number; dx: number; dy: number }>) => void; - 'on:moveend'?: (event: CustomEvent<{ x: number; y: number }>) => void; + 'onmovestart'?: (event: CustomEvent<{ x: number; y: number }>) => void; + 'onmove'?: (event: CustomEvent<{ x: number; y: number; dx: number; dy: number }>) => void; + 'onmoveend'?: (event: CustomEvent<{ x: number; y: number }>) => void; // use:popover - 'on:clickOutside'?: (event: CustomEvent) => void; + 'onclickOutside'?: (event: CustomEvent) => void; // use:overflow - 'on:overflow'?: (event: CustomEvent<{ overflowX: number; overflowY: number }>) => void; + 'onoverflow'?: (event: CustomEvent<{ overflowX: number; overflowY: number }>) => void; // use:longpress - 'on:longpress'?: (event: CustomEvent) => void; + 'onlongpress'?: (event: CustomEvent) => void; } } diff --git a/packages/svelte-ux/src/lib/components/ApiDocs.svelte b/packages/svelte-ux/src/lib/components/ApiDocs.svelte index f0e50c84..5c185bc1 100644 --- a/packages/svelte-ux/src/lib/components/ApiDocs.svelte +++ b/packages/svelte-ux/src/lib/components/ApiDocs.svelte @@ -12,7 +12,11 @@ import ListItem from './ListItem.svelte'; import Tooltip from './Tooltip.svelte'; - export let api: SveldJson; + interface Props { + api: SveldJson; + } + + let { api }: Props = $props(); function parseSlotProps(slot_props: string) { return slot_props @@ -35,41 +39,47 @@ icon={mdiCodeBraces} avatar={{ size: 'sm', class: 'text-xs text-white bg-blue-500' }} > -
{prop.name}
- -
- {#if prop.description} - - {prop.description} - - {/if} -
- -
- {#if prop.isRequired} -
- Required -
- {/if} + {#snippet title()} +
{prop.name}
+ {/snippet} - -
- {prop.value} -
- + {#snippet subheading()} +
+ {#if prop.description} + + {prop.description} + + {/if} +
+ {/snippet} - -
- {prop.type ?? 'unknown'} -
- -
+ {#snippet actions()} +
+ {#if prop.isRequired} +
+ Required +
+ {/if} + + +
+ {prop.value} +
+ + + +
+ {prop.type ?? 'unknown'} +
+ +
+ {/snippet} {:else} No props @@ -119,31 +129,37 @@ icon={mdiGoogleCirclesGroup} avatar={{ size: 'sm', class: 'text-xs text-white bg-purple-500' }} > -
- {#if slot.default} - default - {:else} - {slot.name} - {/if} -
- -
- {slot.description ?? ''} -
- -
- {#if slot.slot_props != '{}'} - {#each parseSlotProps(slot.slot_props ?? '') as { key, value }} - -
- {key}: {value} -
- - {/each} - {/if} -
+ {#snippet title()} +
+ {#if slot.default} + default + {:else} + {slot.name} + {/if} +
+ {/snippet} + + {#snippet subheading()} +
+ {slot.description ?? ''} +
+ {/snippet} + + {#snippet actions()} +
+ {#if slot.slot_props != '{}'} + {#each parseSlotProps(slot.slot_props ?? '') as { key, value }} + +
+ {key}: {value} +
+ + {/each} + {/if} +
+ {/snippet} {:else} No slots @@ -162,22 +178,26 @@ icon={mdiBullhorn} avatar={{ size: 'sm', class: 'text-xs text-white bg-success-500' }} > -
{event.name}
+ {#snippet title()} +
{event.name}
+ {/snippet} -
- {#if event.element != null} + {#snippet actions()} +
+ {#if event.element != null} +
+ {event.element} +
+ {/if}
- {event.element} + {event.type}
- {/if} -
- {event.type}
-
+ {/snippet} {:else} No events @@ -199,41 +219,47 @@ icon={mdiCodeBraces} avatar={{ size: 'sm', class: 'text-xs text-white bg-blue-500' }} > -
{prop.name}
- -
- {#if prop.description} - - {prop.description} - - {/if} -
- -
- {#if prop.isRequired} -
- Required -
- {/if} + {#snippet title()} +
{prop.name}
+ {/snippet} - -
- {prop.value} -
- + {#snippet subheading()} +
+ {#if prop.description} + + {prop.description} + + {/if} +
+ {/snippet} - -
- {prop.type ?? 'unknown'} -
- -
+ {#snippet actions()} +
+ {#if prop.isRequired} +
+ Required +
+ {/if} + + +
+ {prop.value} +
+ + + +
+ {prop.type ?? 'unknown'} +
+ +
+ {/snippet} {:else} No exports diff --git a/packages/svelte-ux/src/lib/components/AppBar.svelte b/packages/svelte-ux/src/lib/components/AppBar.svelte index 73272ce9..8b86960e 100644 --- a/packages/svelte-ux/src/lib/components/AppBar.svelte +++ b/packages/svelte-ux/src/lib/components/AppBar.svelte @@ -7,26 +7,46 @@ import { cls } from '../utils/styles.js'; import { getComponentClasses } from './theme.js'; import { getSettings } from './index.js'; + import type { Snippet } from 'svelte'; - export let title: string | number | Array = ''; - export let menuIcon: string | null = mdiMenu; - let className: string | undefined = undefined; - export { className as class }; + interface Props { + title?: string | number | Array | Snippet; + menuIcon?: string | Snippet<[{ toggleMenu: () => void; isMenuOpen: boolean }]> | null; + class?: string; + /** + * Update head / document.title. Set to false to disable + */ + head?: boolean; + children?: Snippet; + actions?: Snippet; + } - /** - * Update head / document.title. Set to false to disable - */ - export let head = true; + let { + title = '', + menuIcon = mdiMenu, + class: className, + head = true, + children, + actions, + }: Props = $props(); const { showDrawer } = getSettings(); const settingsClasses = getComponentClasses('AppBar'); - $: titleString = Array.isArray(title) ? title.filter((x) => x).join(' › ') : title.toString(); + let titleString = $derived( + typeof title === 'function' + ? '' + : Array.isArray(title) + ? title.filter((x) => x).join(' › ') + : title.toString() + ); - $: if (BROWSER && head) { - // Appears to be needed for some reactive updates - document.title = titleString; - } + $effect(() => { + if (BROWSER && head) { + // Appears to be needed for some reactive updates + document.title = titleString; + } + }); function toggleMenu() { $showDrawer = !$showDrawer; @@ -37,13 +57,15 @@ class={cls('AppBar', 'px-4 flex items-center relative z-50', settingsClasses.root, className)} > {#if menuIcon} - -
diff --git a/packages/svelte-ux/src/lib/components/Backdrop.svelte b/packages/svelte-ux/src/lib/components/Backdrop.svelte index 3b0eb82b..4848d2d9 100644 --- a/packages/svelte-ux/src/lib/components/Backdrop.svelte +++ b/packages/svelte-ux/src/lib/components/Backdrop.svelte @@ -4,13 +4,36 @@ import { portal as portalAction, type PortalOptions } from '../actions/portal.js'; import { cls } from '../utils/styles.js'; import { getComponentClasses } from './theme.js'; + import type { Snippet } from 'svelte'; + import type { SvelteHTMLElements } from 'svelte/elements'; - export let blur: boolean = false; - export let portal: PortalOptions = false; - let className: string | undefined = undefined; - export { className as class }; + interface Props { + blur?: boolean; + portal?: PortalOptions; + class?: string; + fadeParams?: FadeParams; + onKeyDown?: SvelteHTMLElements['div']['onkeydown']; + onKeyUp?: SvelteHTMLElements['div']['onkeyup']; + onKeyPress?: SvelteHTMLElements['div']['onkeypress']; + onClick?: SvelteHTMLElements['div']['onclick']; + onMouseDown?: SvelteHTMLElements['div']['onmousedown']; + onMouseUp?: SvelteHTMLElements['div']['onmouseup']; + children?: Snippet; + } - export let fadeParams: FadeParams = { duration: 300 }; + let { + blur = false, + portal = false, + class: className, + fadeParams = { duration: 300 }, + onKeyDown, + onKeyUp, + onKeyPress, + onClick, + onMouseDown, + onMouseUp, + children, + }: Props = $props(); const settingsClasses = getComponentClasses('Backdrop'); @@ -23,16 +46,16 @@ settingsClasses.root, className )} - on:keydown - on:keyup - on:keypress - on:click - on:mousedown - on:mouseup + onkeydown={onKeyDown} + onkeyup={onKeyUp} + onkeypress={onKeyPress} + onclick={onClick} + onmousedown={onMouseDown} + onmouseup={onMouseUp} in:fade|global={fadeParams} out:fade={fadeParams} use:portalAction={portal} role="none" > - + {@render children?.()} diff --git a/packages/svelte-ux/src/lib/components/Badge.svelte b/packages/svelte-ux/src/lib/components/Badge.svelte index 6a33b9bf..2068a7cf 100644 --- a/packages/svelte-ux/src/lib/components/Badge.svelte +++ b/packages/svelte-ux/src/lib/components/Badge.svelte @@ -1,27 +1,41 @@
- + {@render children?.()}
- - {#if !dot} - {value || ''} - {/if} - + {#if valueIsSnippet} + {/* @ts-ignore */ null} + {@render value()} + {:else if !dot} + {value || ''} + {/if}
diff --git a/packages/svelte-ux/src/lib/components/BarStack.svelte b/packages/svelte-ux/src/lib/components/BarStack.svelte index 7c06fc68..c5487f60 100644 --- a/packages/svelte-ux/src/lib/components/BarStack.svelte +++ b/packages/svelte-ux/src/lib/components/BarStack.svelte @@ -1,34 +1,37 @@ -
+
{#each data as item} {@const valuePercent = item.value / (total ?? sum(data, (d) => d.value))} @@ -41,19 +44,23 @@ classes.item, item.classes?.root )} - on:click={() => dispatch('itemClick', item)} + onclick={() => onItemClick?.(item)} > - d.value)}> + {#if children} + {@render children({ item, total: total ?? sum(data, (d) => d.value) })} + {:else}
- d.value)}> + {#if bar} + {@render bar({ item, total: total ?? sum(data, (d) => d.value) })} + {:else}
- + {/if}
- + {/if} {/if} {/each} diff --git a/packages/svelte-ux/src/lib/components/Breadcrumb.svelte b/packages/svelte-ux/src/lib/components/Breadcrumb.svelte index a5f61175..5d6337e3 100644 --- a/packages/svelte-ux/src/lib/components/Breadcrumb.svelte +++ b/packages/svelte-ux/src/lib/components/Breadcrumb.svelte @@ -4,20 +4,32 @@ import Icon from './Icon.svelte'; import { cls } from '../utils/styles.js'; import { getComponentClasses } from './theme.js'; + import type { SvelteHTMLElements } from 'svelte/elements'; + import type { Snippet } from 'svelte'; - export let items: TItem[] = []; - export let divider: string | undefined = undefined; - export let inline = false; - let className: string | undefined = undefined; - export { className as class }; + interface Props { + items?: TItem[]; + divider?: string | Snippet; + inline?: boolean; + item?: Snippet<[{ item: TItem }]>; + } + + let { + items = [], + divider, + inline = false, + class: className, + item, + ...restProps + }: Props & Omit = $props(); const settingsClasses = getComponentClasses('Breadcrumb'); - $: displayItems = items?.filter((x) => x != null) ?? []; + let displayItems = $derived(items?.filter((x) => x != null) ?? []);
- {#each displayItems as item, index} - -
{item}
- + {#each displayItems as displayItem, index} + {#if item} + {@render item({ item: displayItem })} + {:else} +
{displayItem}
+ {/if} {#if index < displayItems.length - 1} - - {#if divider} -
{divider}
- {:else} - - {/if} - + {#if typeof divider === 'function'} + {@render divider()} + {:else if divider} +
{divider}
+ {:else} + + {/if} {/if} {/each}
diff --git a/packages/svelte-ux/src/lib/components/Button.svelte b/packages/svelte-ux/src/lib/components/Button.svelte index bab311d0..1673db4a 100644 --- a/packages/svelte-ux/src/lib/components/Button.svelte +++ b/packages/svelte-ux/src/lib/components/Button.svelte @@ -1,6 +1,6 @@ - {#if loading} @@ -478,5 +502,5 @@ {/if} - + {@render children?.()} diff --git a/packages/svelte-ux/src/lib/components/ButtonGroup.svelte b/packages/svelte-ux/src/lib/components/ButtonGroup.svelte index ef75efc8..5530895f 100644 --- a/packages/svelte-ux/src/lib/components/ButtonGroup.svelte +++ b/packages/svelte-ux/src/lib/components/ButtonGroup.svelte @@ -1,5 +1,5 @@ - -
- +
+ {@render children?.()}
diff --git a/packages/svelte-ux/src/lib/components/Card.svelte b/packages/svelte-ux/src/lib/components/Card.svelte index de6c37b6..55f6068e 100644 --- a/packages/svelte-ux/src/lib/components/Card.svelte +++ b/packages/svelte-ux/src/lib/components/Card.svelte @@ -1,5 +1,6 @@ @@ -32,7 +49,7 @@ -->
{/if} - {#if title || subheading || $$slots.header} + {#if title || subheading || header}
- + {#if header} + {@render header()} + {:else}
- + {/if}
{/if} - + {@render children?.()} - {#if $$slots.contents} + {#if contents}
- + {@render contents()}
{/if} - {#if $$slots.actions} + {#if actions}
- + {@render actions()}
{/if}
diff --git a/packages/svelte-ux/src/lib/components/Checkbox.svelte b/packages/svelte-ux/src/lib/components/Checkbox.svelte index d0facda6..2c9e54e7 100644 --- a/packages/svelte-ux/src/lib/components/Checkbox.svelte +++ b/packages/svelte-ux/src/lib/components/Checkbox.svelte @@ -1,4 +1,5 @@
{ + onChange(); + _onChange?.(); + }} {value} class={cls('input', 'peer appearance-none absolute', settingsClasses.input, classes.input)} {required} @@ -109,7 +136,7 @@ /> - {#if $$slots.default} + {#if children} {/if}
diff --git a/packages/svelte-ux/src/lib/components/Code.svelte b/packages/svelte-ux/src/lib/components/Code.svelte index def72bcb..29777e82 100644 --- a/packages/svelte-ux/src/lib/components/Code.svelte +++ b/packages/svelte-ux/src/lib/components/Code.svelte @@ -5,20 +5,30 @@ import { cls } from '../utils/styles.js'; import CopyButton from './CopyButton.svelte'; - export let source: string | null = null; - export let language = 'svelte'; - export let highlightedSource = source - ? Prism.highlight(source, Prism.languages[language] ?? Prism.languages.text, language) - : ''; + interface Props { + source?: string | null; + language?: string; + highlightedSource?: string; + classes?: { + root?: string; + pre?: string; + code?: string; + }; + class?: string; + } - export let classes: { - root?: string; - pre?: string; - code?: string; - } = {}; + let { + source, + language = 'svelte', + highlightedSource = source + ? Prism.highlight(source, Prism.languages[language] ?? Prism.languages.text, language) + : '', + classes = {}, + class: className, + }: Props = $props(); -
+
{#if source} 
-  import { createEventDispatcher } from 'svelte';
-  import { slide } from 'svelte/transition';
+  import { slide, type TransitionConfig } from 'svelte/transition';
   import { mdiChevronDown } from '@mdi/js';
   import { cls } from '../utils/styles.js';
 
   import Icon from './Icon.svelte';
   import type { TransitionParams } from '../types/typeHelpers.js';
   import { getComponentClasses } from './theme.js';
+  import type { Snippet } from 'svelte';
+  import type { SvelteHTMLElements } from 'svelte/elements';
 
-  /**
-   * @slot {{ active: number }} trigger - Primary content to trigger the show/hide
-   */
-
-  const dispatch = createEventDispatcher();
+  const settingsClasses = getComponentClasses('Collapse');
 
-  export let name = '';
-  export let value: any = undefined;
-  export let group: any = undefined;
-  export let open = false;
-  export let popout = false;
-  export let disabled = false;
-  export let icon = mdiChevronDown;
+  interface Props {
+    name?: string;
+    value?: any;
+    group?: any;
+    open?: boolean;
+    popout?: boolean;
+    disabled?: boolean;
+    icon?: string | Snippet<[{ open: boolean }]>;
+    transition?: (node: HTMLElement, params: TransitionParams) => TransitionConfig;
+    transitionParams?: TransitionParams;
+    classes?: {
+      root?: string;
+      trigger?: string;
+      icon?: string;
+      content?: string;
+    };
+    /**
+     * Controls how first, last, and gap between are calculated
+     *   - type: items are of the same type
+     *   - parent: items share a common parent
+     *   - group: closest element with 'group' class
+     */
+    list?: 'type' | 'parent' | 'group';
+    onChange?: ({ open, name }: { open: boolean; name: string }) => void;
+    trigger?: Snippet<[{ open: boolean }]>;
+    children?: Snippet<[{ open: boolean }]>;
+  }
 
-  export let transition = slide;
-  export let transitionParams: TransitionParams = {};
+  let {
+    name = '',
+    value,
+    group = $bindable(),
+    open = $bindable(false),
+    popout = false,
+    disabled = false,
+    icon = mdiChevronDown,
+    transition = slide,
+    transitionParams = {},
+    classes = {},
+    class: className,
+    list = 'parent',
+    onChange,
+    trigger,
+    children,
+    ...restProps
+  }: Props & Omit = $props();
 
-  export let classes: {
-    root?: string;
-    trigger?: string;
-    icon?: string;
-    content?: string;
-  } = {};
-  const settingsClasses = getComponentClasses('Collapse');
+  $effect(() => {
+    open = group !== undefined ? group === value : open;
+  });
 
-  /**
-   * Controls how first, last, and gap between are calculated
-   *   - type: items are of the same type
-   *   - parent: items share a common parent
-   *   - group: closest element with 'group' class
-   */
-  export let list: 'type' | 'parent' | 'group' = 'parent';
-
-  $: open = group !== undefined ? group === value : open;
-  $: dispatch('change', { open, name });
+  $effect(() => {
+    onChange?.({ open, name });
+  });
 
 
 

@@ -64,16 +86,20 @@
     type="button"
     class="flex items-center w-full text-left select-text focus:outline-none"
     {disabled}
-    on:click={() => {
+    onclick={() => {
       open = !open;
       group = group === value ? undefined : value;
     }}
   >
-    {name}
+    {#if trigger}
+      {@render trigger({ open })}
+    {:else}
+      {name}
+    {/if}
 
-    
+    {#if typeof icon === 'function'}
+      {@render icon({ open })}
+    {:else}
       

         
       

-    
+    {/if}
   
 
   {#if open}
@@ -94,7 +120,7 @@
       transition:transition={transitionParams}
       class={cls(settingsClasses.content, classes.content)}
     >
-      
+      {@render children?.({ open })}
     

   {/if}
diff --git a/packages/svelte-ux/src/lib/components/CopyButton.svelte b/packages/svelte-ux/src/lib/components/CopyButton.svelte index 6b122ab8..ce142903 100644 --- a/packages/svelte-ux/src/lib/components/CopyButton.svelte +++ b/packages/svelte-ux/src/lib/components/CopyButton.svelte @@ -5,33 +5,44 @@ import Button from './Button.svelte'; import { getComponentSettings } from './settings.js'; import { slide } from 'svelte/transition'; - import { createEventDispatcher } from 'svelte'; - let className: string | undefined = undefined; - export { className as class }; - - const dispatch = createEventDispatcher<{ click: void }>(); + import type { ComponentProps } from 'svelte'; const { classes: settingsClasses, defaults } = getComponentSettings('CopyButton'); - export let value: string | (() => string); - export let message: string | null = 'Copied!'; - - let showMessage = false; - $: if (showMessage) { - setTimeout(() => (showMessage = false), 3000); + interface Props { + class?: string; + value: string | (() => string); + message?: string | null; + onClick?: () => void; } - $: restProps = { ...defaults, ...$$restProps }; + let { + class: className, + value, + message = 'Copied!', + onClick, + ...rest + }: Props & Omit, keyof Props> = $props(); + + let showMessage = $state(false); + + $effect(() => { + if (showMessage) { + setTimeout(() => (showMessage = false), 3000); + } + }); + + let restProps = $derived({ ...defaults, ...rest }); - -
- {#if clearable && value} -
+ {#snippet prepend()} + + + + {#if stepper} + + {/snippet} + {#snippet append()} +
+ {#if clearable && value} +
+ {/snippet} {/if} @@ -166,26 +199,28 @@ bind:selected={currentValue} {periodType} {disabledDates} - on:dateChange={(e) => (currentValue = e.detail)} + onDateChange={(_value) => (currentValue = _value)} />
-
- - -
+ {#snippet actions()} +
+ + +
+ {/snippet} diff --git a/packages/svelte-ux/src/lib/components/DateRange.svelte b/packages/svelte-ux/src/lib/components/DateRange.svelte index f5a27ac9..1afc0150 100644 --- a/packages/svelte-ux/src/lib/components/DateRange.svelte +++ b/packages/svelte-ux/src/lib/components/DateRange.svelte @@ -23,52 +23,44 @@ import { mdScreen } from '../stores/matchMedia.js'; import { getSettings } from './settings.js'; - export let selected: DateRange | null = { from: null, to: null, periodType: null }; - let className: string | undefined = undefined; - export { className as class }; - - /** Period types to show */ - export let periodTypes: PeriodType[] = [ - PeriodType.Day, - PeriodType.Week, - PeriodType.BiWeek1, - // PeriodType.BiWeek2Sun, - PeriodType.Month, - PeriodType.Quarter, - PeriodType.CalendarYear, - PeriodType.FiscalYearOctober, - ]; - export let getPeriodTypePresets = getDateRangePresets; + interface Props { + selected?: DateRange | null; + class?: string; + /** Period types to show */ + periodTypes?: PeriodType[]; + getPeriodTypePresets?: typeof getDateRangePresets; + /** + * Dates to disable (not selectable) + */ + disabledDates?: DisabledDate; + } - /** - * Dates to disable (not selectable) - */ - export let disabledDates: DisabledDate | undefined = undefined; + let { + selected = $bindable(), + class: className, + periodTypes = [ + PeriodType.Day, + PeriodType.Week, + PeriodType.BiWeek1, + // PeriodType.BiWeek2Sun, + PeriodType.Month, + PeriodType.Quarter, + PeriodType.CalendarYear, + PeriodType.FiscalYearOctober, + ], + getPeriodTypePresets = getDateRangePresets, + disabledDates, + }: Props = $props(); const settingsClasses = getComponentClasses('DateRange'); const { format, localeSettings } = getSettings(); - let selectedPeriodType = selected?.periodType ?? periodTypes[0]; - let selectedPreset: string | null = null; - let selectedDayOfWeek: DayOfWeek = - $format.settings.formats.dates.weekStartsOn ?? DayOfWeek.Sunday; - let activeDate: 'from' | 'to' = 'from'; - - $: periodTypeOptions = periodTypes.map((pt) => { - const value = adjustPeriodType(pt); - return { - label: $format.getPeriodTypeName(value), - value, - }; - }); - - $: presetOptions = getPeriodTypePresets($localeSettings, selectedPeriodType).map((preset) => { - return { - label: preset.label, - value: getDateRangeStr(preset.value), - preset, - }; - }); + let selectedPeriodType = $state(selected?.periodType ?? periodTypes[0]); + let selectedPreset: string | null = $state(null); + let selectedDayOfWeek: DayOfWeek = $state( + $format.settings.formats.dates.weekStartsOn ?? DayOfWeek.Sunday + ); + let activeDate: 'from' | 'to' = $state('from'); /** Get date range (without period type) as string */ function getDateRangeStr(range: DateRange) { @@ -124,8 +116,33 @@ } } + function adjustPeriodType(periodType: PeriodType) { + // Adjust value for currently selected day of week, if needed + return missingDayOfWeek(periodType) + ? replaceDayOfWeek(periodType, selectedDayOfWeek) || periodType + : periodType; + } + + let periodTypeOptions = $derived( + periodTypes.map((pt) => { + const value = adjustPeriodType(pt); + return { + label: $format.getPeriodTypeName(value), + value, + }; + }) + ); + let presetOptions = $derived( + getPeriodTypePresets($localeSettings, selectedPeriodType).map((preset) => { + return { + label: preset.label, + value: getDateRangeStr(preset.value), + preset, + }; + }) + ); // Update selection after changing `selectedDayOfWeek` - $: { + $effect(() => { if (hasDayOfWeek(selectedPeriodType)) { const newPeriodType = replaceDayOfWeek(selectedPeriodType, selectedDayOfWeek); @@ -159,18 +176,10 @@ // @ts-expect-error (null / undefined issue...) selected = newSelected; } - } - - function adjustPeriodType(periodType: PeriodType) { - // Adjust value for currently selected day of week, if needed - return missingDayOfWeek(periodType) - ? replaceDayOfWeek(periodType, selectedDayOfWeek) || periodType - : periodType; - } - - $: showPeriodTypes = periodTypeOptions.length > 1; - $: showPresets = presetOptions.length > 0; - $: showSidebar = showPeriodTypes || showPresets; + }); + let showPeriodTypes = $derived(periodTypeOptions.length > 1); + let showPresets = $derived(presetOptions.length > 0); + let showSidebar = $derived(showPeriodTypes || showPresets);
Type
onPeriodTypeChange(e.detail.value)} + onChange={(value) => onPeriodTypeChange(value)} variant="outline" inset vertical @@ -255,7 +264,7 @@ label="Type" bind:value={selectedPeriodType} options={periodTypeOptions} - on:change={(e) => onPeriodTypeChange(e.detail.value)} + onChange={({ value }) => onPeriodTypeChange(value)} /> {/if} {/if} @@ -269,7 +278,7 @@ {#each presetOptions as option} { + onclick={() => { onPresetChange(option.value); }} > @@ -283,8 +292,8 @@ label="Presets" bind:value={selectedPreset} options={presetOptions} - on:change={(e) => { - onPresetChange(e.detail.value); + onChange={({ value }) => { + onPresetChange(value); }} /> {/if} @@ -315,7 +324,7 @@ periodType={selectedPeriodType} {activeDate} {disabledDates} - on:dateChange={(e) => onDateChange(e.detail)} + {onDateChange} />
diff --git a/packages/svelte-ux/src/lib/components/DateRangeDisplay.svelte b/packages/svelte-ux/src/lib/components/DateRangeDisplay.svelte index f871371f..24dee64f 100644 --- a/packages/svelte-ux/src/lib/components/DateRangeDisplay.svelte +++ b/packages/svelte-ux/src/lib/components/DateRangeDisplay.svelte @@ -1,34 +1,41 @@ - - - - {#if stepper} - - -
- {#if clearable && (value?.periodType || value?.from || value?.to)} -
+ {#snippet prepend()} + + {@render prependRender?.()} + + {#if stepper} + + {/snippet} + {#snippet append()} +
+ {#if clearable && (value?.periodType || value?.from || value?.to)} +
+ {/snippet}
-
- - - -
+ {#snippet actions()} +
+ + + +
+ {/snippet} diff --git a/packages/svelte-ux/src/lib/components/DateSelect.svelte b/packages/svelte-ux/src/lib/components/DateSelect.svelte index dce7a84d..3709753c 100644 --- a/packages/svelte-ux/src/lib/components/DateSelect.svelte +++ b/packages/svelte-ux/src/lib/components/DateSelect.svelte @@ -10,24 +10,37 @@ import Month from './Month.svelte'; import MonthListByYear from './MonthListByYear.svelte'; import YearList from './YearList.svelte'; + import type { ComponentProps } from 'svelte'; - export let selected: SelectedDate = null; - export let periodType: PeriodType = PeriodType.Day; - export let activeDate: 'from' | 'to' = 'from'; + interface Props { + selected?: SelectedDate; + periodType?: PeriodType; + activeDate?: 'from' | 'to'; + /** + * Dates to disable (not selectable) + */ + disabledDates?: DisabledDate; + onDateChange?: ComponentProps['onDateChange']; + } - /** - * Dates to disable (not selectable) - */ - export let disabledDates: DisabledDate | undefined = undefined; + let { + selected = $bindable(), + periodType = PeriodType.Day, + activeDate = 'from', + disabledDates, + onDateChange, + }: Props = $props(); - // @ts-expect-error - $: startOfMonth = selected?.[activeDate] ? startOfMonthFunc(selected[activeDate]) : undefined; + let startOfMonth = $derived( + // @ts-expect-error + selected?.[activeDate] ? startOfMonthFunc(selected[activeDate]) : undefined + ); {#if periodType === PeriodType.Month || periodType === PeriodType.Quarter} - + {:else if periodType === PeriodType.CalendarYear} - + {:else if periodType === PeriodType.FiscalYearOctober} - + {:else} - + {/if} diff --git a/packages/svelte-ux/src/lib/components/Dialog.svelte b/packages/svelte-ux/src/lib/components/Dialog.svelte index 158fea54..2b3d91b3 100644 --- a/packages/svelte-ux/src/lib/components/Dialog.svelte +++ b/packages/svelte-ux/src/lib/components/Dialog.svelte @@ -1,5 +1,4 @@ {#if open} close()} - on:mouseup={(e) => { - // Do not allow event to reach Popover's on:mouseup (clickOutside) + onClick={() => close()} + onMouseUp={(e) => { + // Do not allow event to reach Popover's onmouseup (clickOutside) e.stopPropagation(); }} class={cls('z-50', settingsClasses.backdrop, classes.backdrop)} @@ -98,10 +130,10 @@ settingsClasses.root, classes.root )} - on:click={onClick} - on:keydown={(e) => { + onclick={onClick} + onkeydown={(e) => { if (e.key === 'Escape') { - // Do not allow event to reach Popover's on:keydown + // Do not allow event to reach Popover's onkeydown e.stopPropagation(); close(); } @@ -114,15 +146,15 @@ 'dialog rounded bg-surface-100 elevation-4 overflow-y-auto pointer-events-auto relative outline-none', settingsClasses.dialog, classes.dialog, - $$props.class + className )} - style={$$props.style} + {style} in:scale|global={{ duration: 150, easing: quadIn }} out:scale={{ duration: 150, easing: quadIn }} - on:introstart - on:outrostart - on:introend - on:outroend + {onintrostart} + {onoutrostart} + {onintroend} + {onoutroend} bind:this={dialogEl} use:focusMove={{ restoreFocus: true }} role="dialog" @@ -133,19 +165,17 @@ {/if} - - {#if $$slots.title} -
- -
- {/if} - + {#if header} + {@render header({ open, close })} + {:else if title} +
+ {@render title?.({ open, close })} +
+ {/if} - + {@render children?.({ open, close })} - {#if $$slots.actions} + {#if actions}
- + {@render actions?.({ open, close })}
{/if}
diff --git a/packages/svelte-ux/src/lib/components/DividerDot.svelte b/packages/svelte-ux/src/lib/components/DividerDot.svelte index 25766409..826b28cc 100644 --- a/packages/svelte-ux/src/lib/components/DividerDot.svelte +++ b/packages/svelte-ux/src/lib/components/DividerDot.svelte @@ -2,7 +2,13 @@ import { cls } from '../utils/styles.js'; import { getComponentClasses } from './theme.js'; + interface Props { + class?: string; + } + + let { class: className }: Props = $props(); + const settingsClasses = getComponentClasses('DividerDot'); - • + • diff --git a/packages/svelte-ux/src/lib/components/Drawer.svelte b/packages/svelte-ux/src/lib/components/Drawer.svelte index 2c5f7382..570de7a2 100644 --- a/packages/svelte-ux/src/lib/components/Drawer.svelte +++ b/packages/svelte-ux/src/lib/components/Drawer.svelte @@ -1,5 +1,4 @@ {#if open} { + onClick={(e) => { close(); }} - on:mouseup={(e) => { - // Do not allow event to reach Popover's on:mouseup (clickOutside) + onMouseUp={(e) => { + // Do not allow event to reach Popover's onmouseup (clickOutside) e.stopPropagation(); }} class={cls('z-50', settingsClasses.backdrop, classes.backdrop)} @@ -68,7 +100,7 @@ {/if} {#if open} - +
{ + {onintrostart} + {onoutrostart} + {onintroend} + {onoutroend} + onkeydown={(e) => { if (e.key === 'Escape') { - // Do not allow event to reach Popover's on:keydown + // Do not allow event to reach Popover's onkeydown e.stopPropagation(); close(); @@ -116,9 +148,9 @@ {/if} - + {@render children?.({ open, close })} - {#if $$slots.actions} + {#if actions}
- + {@render actions?.({ open, close })}
{/if}
diff --git a/packages/svelte-ux/src/lib/components/Duration.svelte b/packages/svelte-ux/src/lib/components/Duration.svelte index b3f1277a..c1b91d74 100644 --- a/packages/svelte-ux/src/lib/components/Duration.svelte +++ b/packages/svelte-ux/src/lib/components/Duration.svelte @@ -9,14 +9,25 @@ import { getComponentClasses } from './theme.js'; import { cls } from '../utils/styles.js'; - export let start: Date | undefined = undefined; - export let end: Date | undefined = undefined; - export let duration: Partial | undefined = undefined; - export let minUnits: DurationUnits = DurationUnits.Millisecond; - export let totalUnits: number = 99; - export let variant: 'short' | 'long' = 'short'; - let className: string | undefined = undefined; - export { className as class }; + interface Props { + start?: Date; + end?: Date; + duration?: Partial; + minUnits?: DurationUnits; + totalUnits?: number; + variant?: 'short' | 'long'; + class?: string; + } + + let { + start, + end, + duration, + minUnits = DurationUnits.Millisecond, + totalUnits = 99, + variant = 'short', + class: className, + }: Props = $props(); const settingsClasses = getComponentClasses('Duration'); @@ -56,14 +67,16 @@ }, }); - $: displayDuration = humanizeDuration({ - start, - end: end ?? $timer, - duration, - minUnits, - totalUnits, - variant, - }); + let displayDuration = $derived( + humanizeDuration({ + start, + end: end ?? $timer, + duration, + minUnits, + totalUnits, + variant, + }) + ); {displayDuration} diff --git a/packages/svelte-ux/src/lib/components/EmptyMessage.svelte b/packages/svelte-ux/src/lib/components/EmptyMessage.svelte index 0f6f6630..a18e0caa 100644 --- a/packages/svelte-ux/src/lib/components/EmptyMessage.svelte +++ b/packages/svelte-ux/src/lib/components/EmptyMessage.svelte @@ -1,12 +1,23 @@
- + {@render children?.()}
diff --git a/packages/svelte-ux/src/lib/components/ErrorNotification.svelte b/packages/svelte-ux/src/lib/components/ErrorNotification.svelte index f2cb31e8..6e4ea14f 100644 --- a/packages/svelte-ux/src/lib/components/ErrorNotification.svelte +++ b/packages/svelte-ux/src/lib/components/ErrorNotification.svelte @@ -6,71 +6,96 @@ import Icon from './Icon.svelte'; import Notification from './Notification.svelte'; import Toggle from './Toggle.svelte'; + import type { ComponentProps } from 'svelte'; - export let title: string; - export let description: string; + interface Props { + title: string; + description: string; + message?: string; + stackTrace?: string; + onClose: ComponentProps['onClose']; + } - export let message: string = ''; - export let stackTrace: string = ''; + let { + title: titleString, + description: descriptionString, + message = '', + stackTrace = '', + onClose, + }: Props = $props(); - $: hasDetails = message || stackTrace; + let hasDetails = $derived(message || stackTrace); - - -
- -
-
{title}
- -
- {#if description} -
- {#each description.split('\n') as line} -
{line}
- {/each} + + {#snippet children({ on: open, toggle })} + + {#snippet icon()} +
+
- {/if} -
+ {/snippet} + {#snippet title()} +
{titleString}
+ {/snippet} -
- {#if hasDetails} - - {/if} - -
- + {#snippet description()} +
+ {#if descriptionString} +
+ {#each descriptionString.split('\n') as line} +
{line}
+ {/each} +
+ {/if} +
+ {/snippet} - -
- {#if message} - {#each message.split('\n') as msg} -
{msg}
- {/each} - {/if} -
+ {#snippet actions()} +
+ {#if hasDetails} + + {/if} + +
+ {/snippet} + -
- {#if stackTrace} + + {#snippet title()}
-
Stacktrace:
- 
-            {stackTrace ?? ''}
-
+ {#if message} + {#each message.split('\n') as msg} +
{msg}
+ {/each} + {/if}
- {/if} -
+ {/snippet} -
- -
- +
+ {#if stackTrace} +
+
Stacktrace:
+ 
+              {stackTrace ?? ''}
+
+
+ {/if} +
+ + {#snippet actions()} +
+ +
+ {/snippet} + + {/snippet} diff --git a/packages/svelte-ux/src/lib/components/ExpansionPanel.svelte b/packages/svelte-ux/src/lib/components/ExpansionPanel.svelte index 87dd209f..16465eef 100644 --- a/packages/svelte-ux/src/lib/components/ExpansionPanel.svelte +++ b/packages/svelte-ux/src/lib/components/ExpansionPanel.svelte @@ -1,31 +1,49 @@ - - + {#snippet trigger()} + {@render triggerRender?.()} + {/snippet} + {@render actions?.()} {#if enabled}
- + {@render children?.()}
{/if} diff --git a/packages/svelte-ux/src/lib/components/Field.svelte b/packages/svelte-ux/src/lib/components/Field.svelte index fcf3ea25..51a4f393 100644 --- a/packages/svelte-ux/src/lib/components/Field.svelte +++ b/packages/svelte-ux/src/lib/components/Field.svelte @@ -1,5 +1,4 @@
{/if} - - -
+ + +
{#if label && ['inset', 'float'].includes(labelPlacement)} - - - - {#if value} - {value} - {:else if placeholder} - - {placeholder} - - {:else} -   - {/if} - - - + {@render prefix?.()} + + {#if children} + {@render children({ id })} + {:else if value} + {value} + {:else if placeholder} + + {placeholder} + + {:else} +   + {/if} + + {@render suffix?.()}
@@ -186,15 +214,15 @@ icon={mdiClose} {disabled} class="text-surface-content/50 p-1" - on:click={() => { + onclick={() => { value = Array.isArray(value) ? [] : typeof value === 'string' ? '' : null; - dispatch('clear'); + onClear?.(); labelEl?.focus(); }} /> {/if} - + {@render append?.()} {#if error} @@ -218,7 +246,7 @@ - + {@render root?.()}