From 672031f7c6d4289b28271b37d6d3093cee4a3311 Mon Sep 17 00:00:00 2001 From: Sean Lynch Date: Tue, 24 Jun 2025 11:34:54 -0400 Subject: [PATCH 01/18] Remove use of `$$props` (class, style) --- .../svelte-ux/src/lib/components/AppLayout.svelte | 5 ++++- packages/svelte-ux/src/lib/components/BarStack.svelte | 5 ++++- packages/svelte-ux/src/lib/components/Button.svelte | 6 ++++-- packages/svelte-ux/src/lib/components/Checkbox.svelte | 5 ++++- packages/svelte-ux/src/lib/components/Code.svelte | 5 ++++- packages/svelte-ux/src/lib/components/Collapse.svelte | 5 ++++- .../svelte-ux/src/lib/components/DateField.svelte | 5 ++++- packages/svelte-ux/src/lib/components/Dialog.svelte | 7 +++++-- .../svelte-ux/src/lib/components/DividerDot.svelte | 5 ++++- packages/svelte-ux/src/lib/components/Drawer.svelte | 7 +++++-- .../svelte-ux/src/lib/components/EmptyMessage.svelte | 5 ++++- .../src/lib/components/ExpansionPanel.svelte | 5 ++++- packages/svelte-ux/src/lib/components/Field.svelte | 6 +++++- packages/svelte-ux/src/lib/components/Gooey.svelte | 5 ++++- packages/svelte-ux/src/lib/components/Icon.svelte | 11 +++++++---- packages/svelte-ux/src/lib/components/Kbd.svelte | 5 ++++- packages/svelte-ux/src/lib/components/ListItem.svelte | 5 ++++- packages/svelte-ux/src/lib/components/Menu.svelte | 7 +++++-- .../svelte-ux/src/lib/components/MenuButton.svelte | 5 ++++- .../svelte-ux/src/lib/components/MenuField.svelte | 2 +- packages/svelte-ux/src/lib/components/MenuItem.svelte | 5 ++++- .../src/lib/components/MultiSelectField.svelte | 5 ++++- .../src/lib/components/MultiSelectOption.svelte | 5 ++++- packages/svelte-ux/src/lib/components/NavItem.svelte | 5 ++++- .../svelte-ux/src/lib/components/Notification.svelte | 5 ++++- packages/svelte-ux/src/lib/components/Overflow.svelte | 5 ++++- .../svelte-ux/src/lib/components/Pagination.svelte | 5 ++++- packages/svelte-ux/src/lib/components/Preview.svelte | 5 ++++- .../src/lib/components/ProgressCircle.svelte | 5 +++-- .../svelte-ux/src/lib/components/QuickSearch.svelte | 5 ++++- packages/svelte-ux/src/lib/components/Radio.svelte | 5 ++++- .../src/lib/components/ResponsiveMenu.svelte | 7 +++++-- .../src/lib/components/ScrollContainer.svelte | 5 ++++- .../src/lib/components/ScrollingValue.svelte | 5 ++++- .../src/lib/components/SectionDivider.svelte | 7 +++++-- .../svelte-ux/src/lib/components/SelectField.svelte | 5 ++++- packages/svelte-ux/src/lib/components/Shine.svelte | 5 ++++- packages/svelte-ux/src/lib/components/Stack.svelte | 2 +- packages/svelte-ux/src/lib/components/Step.svelte | 5 ++++- packages/svelte-ux/src/lib/components/Steps.svelte | 5 ++++- packages/svelte-ux/src/lib/components/Switch.svelte | 5 ++++- packages/svelte-ux/src/lib/components/Tab.svelte | 5 ++++- packages/svelte-ux/src/lib/components/Table.svelte | 11 ++++------- packages/svelte-ux/src/lib/components/Tabs.svelte | 5 ++++- .../svelte-ux/src/lib/components/TextField.svelte | 6 +++++- packages/svelte-ux/src/lib/components/Timeline.svelte | 8 +++++++- .../svelte-ux/src/lib/components/TimelineEvent.svelte | 5 ++++- .../svelte-ux/src/lib/components/ToggleGroup.svelte | 5 ++++- .../svelte-ux/src/lib/components/ToggleOption.svelte | 5 ++++- packages/svelte-ux/src/lib/components/Tooltip.svelte | 7 +++++-- packages/svelte-ux/src/lib/components/TreeList.svelte | 5 ++++- 51 files changed, 211 insertions(+), 68 deletions(-) diff --git a/packages/svelte-ux/src/lib/components/AppLayout.svelte b/packages/svelte-ux/src/lib/components/AppLayout.svelte index c1b8f7a0a..e2a5fef0d 100644 --- a/packages/svelte-ux/src/lib/components/AppLayout.svelte +++ b/packages/svelte-ux/src/lib/components/AppLayout.svelte @@ -13,6 +13,9 @@ /** Control whether header should be full width (deafult) or nav should be full height */ export let headerPosition: 'full' | 'inset' = 'full'; + let className: string | undefined = undefined; + export { className as class }; + export let classes: { root?: string; aside?: string; @@ -39,7 +42,7 @@ '[:where(&_[id])]:scroll-m-[var(--headerHeight)]', settingsClasses.root, classes.root, - $$props.class + className )} > diff --git a/packages/svelte-ux/src/lib/components/BarStack.svelte b/packages/svelte-ux/src/lib/components/BarStack.svelte index eeecc3568..1f9ae748c 100644 --- a/packages/svelte-ux/src/lib/components/BarStack.svelte +++ b/packages/svelte-ux/src/lib/components/BarStack.svelte @@ -17,6 +17,9 @@ }[]; export let total: number | undefined = undefined; + let className: string | undefined = undefined; + export { className as class }; + export let classes: { root?: string; item?: string; @@ -28,7 +31,7 @@ }>(); -
+
{#each data as item} {@const valuePercent = item.value / (total ?? sum(data, (d) => d.value))} diff --git a/packages/svelte-ux/src/lib/components/Button.svelte b/packages/svelte-ux/src/lib/components/Button.svelte index 20878e90a..b61caafb5 100644 --- a/packages/svelte-ux/src/lib/components/Button.svelte +++ b/packages/svelte-ux/src/lib/components/Button.svelte @@ -27,6 +27,9 @@ export let size: ButtonSize | undefined = undefined; // default in reactive groupContext below export let color: ButtonColor | undefined = undefined; // default in reactive groupContext below + let className: string | undefined = undefined; + export { className as class }; + /** @type {{root?: string, icon?: string, loading?: string}} */ export let classes: { root?: string; @@ -437,7 +440,7 @@ settingsClasses.root, classes?.root, - $$props.class + className ); @@ -449,7 +452,6 @@ {type} {...$$restProps} class={_class} - style={$$props.style ?? ''} {disabled} aria-disabled={disabled ? 'true' : 'false'} use:multi={actions} diff --git a/packages/svelte-ux/src/lib/components/Checkbox.svelte b/packages/svelte-ux/src/lib/components/Checkbox.svelte index eac19167d..c4a16cb98 100644 --- a/packages/svelte-ux/src/lib/components/Checkbox.svelte +++ b/packages/svelte-ux/src/lib/components/Checkbox.svelte @@ -18,6 +18,9 @@ export let size: 'xs' | 'sm' | 'md' | 'lg' = 'sm'; export let circle = false; + let className: string | undefined = undefined; + export { className as class }; + export let classes: { root?: string; input?: string; @@ -57,7 +60,7 @@ 'items-center', settingsClasses.root, classes.root, - $$props.class + className )} > -
+
{#if source} 
diff --git a/packages/svelte-ux/src/lib/components/DateField.svelte b/packages/svelte-ux/src/lib/components/DateField.svelte
index 142f7cf57..d20af3114 100644
--- a/packages/svelte-ux/src/lib/components/DateField.svelte
+++ b/packages/svelte-ux/src/lib/components/DateField.svelte
@@ -46,6 +46,9 @@
   export let dense = false;
   export let icon: string | null = null;
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   let inputValue: string | undefined = '';
 
   const dispatch = createEventDispatcher();
@@ -82,7 +85,7 @@
     dispatch('change', { value });
   }}
   classes={classes.field}
-  class={cls('DateField', settingsClasses.root, classes.root, $$props.class)}
+  class={cls('DateField', settingsClasses.root, classes.root, className)}
   let:id
 >
   
       {#if loading}
         
diff --git a/packages/svelte-ux/src/lib/components/DividerDot.svelte b/packages/svelte-ux/src/lib/components/DividerDot.svelte
index dc5e3c524..f09469ac6 100644
--- a/packages/svelte-ux/src/lib/components/DividerDot.svelte
+++ b/packages/svelte-ux/src/lib/components/DividerDot.svelte
@@ -2,7 +2,10 @@
   import { cls } from '@layerstack/tailwind';
   import { getComponentClasses } from './theme.js';
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   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 139658843..62831ebda 100644
--- a/packages/svelte-ux/src/lib/components/Drawer.svelte
+++ b/packages/svelte-ux/src/lib/components/Drawer.svelte
@@ -24,6 +24,9 @@
   export let loading: boolean | null = null;
   export let placement: 'top' | 'bottom' | 'left' | 'right' = 'right';
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   export let classes: {
     root?: string;
     backdrop?: string;
@@ -83,9 +86,8 @@
       },
       settingsClasses.root,
       classes.root,
-      $$props.class
+      className
     )}
-    style={$$props.style}
     in:fly|global={{
       x: placement === 'left' ? '-100%' : placement === 'right' ? '100%' : 0,
       y: placement === 'top' ? '-100%' : placement === 'bottom' ? '100%' : 0,
@@ -110,6 +112,7 @@
     use:focusMove={{ restoreFocus: true }}
     role="dialog"
     tabindex="-1"
+    {...$$restProps}
   >
     {#if loading}
       
diff --git a/packages/svelte-ux/src/lib/components/EmptyMessage.svelte b/packages/svelte-ux/src/lib/components/EmptyMessage.svelte
index 2c7e8ca54..ca96a0d98 100644
--- a/packages/svelte-ux/src/lib/components/EmptyMessage.svelte
+++ b/packages/svelte-ux/src/lib/components/EmptyMessage.svelte
@@ -2,6 +2,9 @@
   import { cls } from '@layerstack/tailwind';
   import { getComponentClasses } from './theme.js';
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   const settingsClasses = getComponentClasses('EmptyMessage');
 
 
@@ -14,7 +17,7 @@
     'text-surface-content/50 text-xs tracking-wider',
     'border border-surface-100/80 rounded-sm',
     settingsClasses.root,
-    $$props.class
+    className
   )}
 >
   
diff --git a/packages/svelte-ux/src/lib/components/ExpansionPanel.svelte b/packages/svelte-ux/src/lib/components/ExpansionPanel.svelte
index 594dcbfd5..2c853c7c7 100644
--- a/packages/svelte-ux/src/lib/components/ExpansionPanel.svelte
+++ b/packages/svelte-ux/src/lib/components/ExpansionPanel.svelte
@@ -17,6 +17,9 @@
   export let disabled = false;
   $: enabled = $$slots.default && !disabled;
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   export let classes: {
     root?: string;
     toggle?: string;
@@ -36,7 +39,7 @@
       list === 'group' && 'group-first:border-t-0 group-first:rounded-t group-last:rounded-b',
       settingsClasses.root,
       classes.root,
-      $$props.class
+      className
     ),
     icon: cls('text-surface-content/30 px-2', !enabled && 'hidden'),
   }}
diff --git a/packages/svelte-ux/src/lib/components/Field.svelte b/packages/svelte-ux/src/lib/components/Field.svelte
index 2adbdf4f7..f5408c23d 100644
--- a/packages/svelte-ux/src/lib/components/Field.svelte
+++ b/packages/svelte-ux/src/lib/components/Field.svelte
@@ -35,6 +35,10 @@
   // export let actions: Actions = undefined;
   // export let inputEl: HTMLInputElement | null = null;
   export let center = false;
+
+  let className: string | undefined = undefined;
+  export { className as class };
+
   export let classes: {
     root?: string;
     container?: string;
@@ -69,7 +73,7 @@
     !base && (rounded ? 'rounded-full' : 'rounded-sm'),
     settingsClasses.root,
     classes.root,
-    $$props.class
+    className
   )}
   bind:this={labelEl}
 >
diff --git a/packages/svelte-ux/src/lib/components/Gooey.svelte b/packages/svelte-ux/src/lib/components/Gooey.svelte
index 3765e95b7..286726c6a 100644
--- a/packages/svelte-ux/src/lib/components/Gooey.svelte
+++ b/packages/svelte-ux/src/lib/components/Gooey.svelte
@@ -16,6 +16,9 @@
 
   export let composite: SVGAttributes['operator'] = undefined;
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   /** @type {{root?: string, icon?: string, loading?: string}} */
   export let classes: {
     root?: string;
@@ -51,7 +54,7 @@
 

   
 

diff --git a/packages/svelte-ux/src/lib/components/Icon.svelte b/packages/svelte-ux/src/lib/components/Icon.svelte
index 9d16ec322..a9d52d7a2 100644
--- a/packages/svelte-ux/src/lib/components/Icon.svelte
+++ b/packages/svelte-ux/src/lib/components/Icon.svelte
@@ -25,6 +25,9 @@
   export let descId: string | undefined = desc ? uniqueId('desc-') : '';
   $: isLabelled = title || desc;
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   export let classes: {
     root?: string;
     path?: string | string[];
@@ -87,9 +90,8 @@
       'icon-container inline-block shrink-0 align-middle fill-current',
       settingsClasses.root,
       classes.root,
-      $$props.class
+      className
     )}
-    style={$$props.style}
     style:width
     style:height
     style:--width={width}
@@ -97,6 +99,7 @@
     role={isLabelled ? 'img' : 'presentation'}
     aria-labelledby={isLabelled ? `${titleId} ${descId}` : undefined}
     on:click
+    {...$$restProps}
   >
     
       {@html svg ?? ''}
@@ -112,12 +115,12 @@
       'inline-block shrink-0 fill-current',
       settingsClasses.root,
       classes.root,
-      $$props.class
+      className
     )}
-    style={$$props.style}
     role={isLabelled ? 'img' : 'presentation'}
     aria-labelledby={isLabelled ? `${titleId} ${descId}` : undefined}
     on:click
+    {...$$restProps}
   >
     {#if title}
       {title}
diff --git a/packages/svelte-ux/src/lib/components/Kbd.svelte b/packages/svelte-ux/src/lib/components/Kbd.svelte
index e8603891b..832f8f253 100644
--- a/packages/svelte-ux/src/lib/components/Kbd.svelte
+++ b/packages/svelte-ux/src/lib/components/Kbd.svelte
@@ -8,6 +8,9 @@
   export let command = false;
 
   export let variant: 'filled' | 'none' = 'filled';
+
+  let className: string | undefined = undefined;
+  export { className as class };
 
 
 
   {#if control}
diff --git a/packages/svelte-ux/src/lib/components/ListItem.svelte b/packages/svelte-ux/src/lib/components/ListItem.svelte
index 9a299c26c..971161003 100644
--- a/packages/svelte-ux/src/lib/components/ListItem.svelte
+++ b/packages/svelte-ux/src/lib/components/ListItem.svelte
@@ -35,6 +35,9 @@
    */
   export let noBackground = false;
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   export let classes: {
     root?: string;
     avatar?: string;
@@ -64,7 +67,7 @@
     noBackground !== true && 'bg-surface-100',
     settingsClasses.root,
     classes.root,
-    $$props.class
+    className
   )}
   on:click
   role="listitem"
diff --git a/packages/svelte-ux/src/lib/components/Menu.svelte b/packages/svelte-ux/src/lib/components/Menu.svelte
index 192e09f59..9b54e609b 100644
--- a/packages/svelte-ux/src/lib/components/Menu.svelte
+++ b/packages/svelte-ux/src/lib/components/Menu.svelte
@@ -28,6 +28,9 @@
   export let explicitClose = false;
   export let moveFocus = true;
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   export let classes: {
     root?: string;
     menu?: string;
@@ -70,11 +73,11 @@
     'bg-surface-100 rounded-sm shadow-sm border overflow-auto',
     settingsClasses.root,
     classes.root,
-    $$props.class
+    className
   )}
-  style={$$props.style}
   on:close
   let:close
+  {...$$restProps}
 >
   
   
diff --git a/packages/svelte-ux/src/lib/components/MenuButton.svelte b/packages/svelte-ux/src/lib/components/MenuButton.svelte
index f7bca4121..d2c0fced9 100644
--- a/packages/svelte-ux/src/lib/components/MenuButton.svelte
+++ b/packages/svelte-ux/src/lib/components/MenuButton.svelte
@@ -20,6 +20,9 @@
   export let menuIcon: string | null = mdiMenuDown;
   $: selected = options?.find((x) => x.value === value);
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   export let classes: {
     root?: string;
     label?: string;
@@ -38,7 +41,7 @@
 
diff --git a/packages/svelte-ux/src/lib/components/ListItem.svelte b/packages/svelte-ux/src/lib/components/ListItem.svelte
index 971161003..77a551eff 100644
--- a/packages/svelte-ux/src/lib/components/ListItem.svelte
+++ b/packages/svelte-ux/src/lib/components/ListItem.svelte
@@ -7,10 +7,12 @@
   import Overlay from './Overlay.svelte';
   import { cls } from '@layerstack/tailwind';
   import { getComponentClasses } from './theme.js';
+  import type { IconProp } from '$lib/types/index.js';
+  import { asIconData } from '$lib/utils/icons.js';
 
   export let title: string | number | null = null;
   export let subheading: string | number | null = null;
-  export let icon: string | null = null;
+  export let icon: IconProp | null = null;
 
   /**
    * Wrap icon in Avatar
@@ -85,10 +87,20 @@
           class={cls(settingsClasses.avatar, classes.avatar)}
           {...typeof avatar === 'object' ? avatar : {}}
         >
-          
+          {#if typeof icon === 'function'}
+            
+            {@const Icon = icon}
+            
+          {:else if typeof icon === 'string' || 'icon' in icon}
+            
+          {/if}
         
-      {:else}
-        
+      {:else if typeof icon === 'function'}
+        
+        {@const Icon = icon}
+        
+      {:else if typeof icon === 'string' || 'icon' in icon}
+        
       {/if}
     {/if}
   
diff --git a/packages/svelte-ux/src/lib/components/MultiSelectField.svelte b/packages/svelte-ux/src/lib/components/MultiSelectField.svelte
index fa8fe3a83..15128fc57 100644
--- a/packages/svelte-ux/src/lib/components/MultiSelectField.svelte
+++ b/packages/svelte-ux/src/lib/components/MultiSelectField.svelte
@@ -4,16 +4,15 @@
   import { cls, clsMerge, normalizeClasses } from '@layerstack/tailwind';
   import { Logger } from '@layerstack/utils';
 
-  import { mdiChevronDown, mdiClose } from '@mdi/js';
-
   import Button from './Button.svelte';
   import MultiSelectMenu from './MultiSelectMenu.svelte';
   import MultiSelectOption from './MultiSelectOption.svelte';
   import TextField from './TextField.svelte';
   import ProgressCircle from './ProgressCircle.svelte';
 
-  import { getComponentSettings } from './settings.js';
+  import { getComponentSettings, getSettings } from './settings.js';
 
+  const { icons } = getSettings();
   const { classes: settingsClasses, defaults } = getComponentSettings('MultiSelectField');
 
   type MultiSelectMenuProps = ComponentProps>;
@@ -182,7 +181,7 @@
         
       {:else if value?.length && clearable}
-
+
- import { mdiContentCopy } from '@mdi/js'; - import { cls } from '@layerstack/tailwind'; import Button from './Button.svelte'; - import { getComponentSettings } from './settings.js'; + import { getComponentSettings, getSettings } from './settings.js'; import { slide } from 'svelte/transition'; import { createEventDispatcher } from 'svelte'; let className: string | undefined = undefined; @@ -11,6 +9,7 @@ const dispatch = createEventDispatcher<{ click: void }>(); + const { icons } = getSettings(); const { classes: settingsClasses, defaults } = getComponentSettings('CopyButton'); export let value: string | (() => string); @@ -25,7 +24,7 @@ import { createEventDispatcher } from 'svelte'; - import { mdiChevronLeft, mdiChevronRight } from '@mdi/js'; import Field from './Field.svelte'; import Button from './Button.svelte'; @@ -9,7 +8,7 @@ const { classes: settingsClasses, defaults } = getComponentSettings('RangeField'); - const { format: formatUtil } = getSettings(); + const { format: formatUtil, icons } = getSettings(); export let value = 0; export let min = 0; @@ -26,7 +25,7 @@
{/if} diff --git a/packages/svelte-ux/src/lib/components/MenuButton.svelte b/packages/svelte-ux/src/lib/components/MenuButton.svelte index 5e743c19a..0f121a2ce 100644 --- a/packages/svelte-ux/src/lib/components/MenuButton.svelte +++ b/packages/svelte-ux/src/lib/components/MenuButton.svelte @@ -19,7 +19,7 @@ export let options: MenuOption[] = []; export let value: any = null; export let menuProps: ComponentProps = { placement: 'bottom-start' }; - export let menuIcon: IconProp | null = icons.chevronDown; + export let menuIcon: IconProp | false | null = icons.chevronDown; $: selected = options?.find((x) => x.value === value); let className: string | undefined = undefined; diff --git a/packages/svelte-ux/src/lib/components/MultiSelect.svelte b/packages/svelte-ux/src/lib/components/MultiSelect.svelte index e3a78ba8f..6bd413b5d 100644 --- a/packages/svelte-ux/src/lib/components/MultiSelect.svelte +++ b/packages/svelte-ux/src/lib/components/MultiSelect.svelte @@ -4,8 +4,6 @@ import { get } from 'svelte/store'; import { partition, isEqual } from 'lodash-es'; - import { mdiMagnify } from '@mdi/js'; - import { dirtyStore, selectionStore, uniqueStore, changeStore } from '@layerstack/svelte-stores'; import { cls } from '@layerstack/tailwind'; import { Logger } from '@layerstack/utils'; @@ -17,6 +15,7 @@ import type { MenuOption } from '../types/index.js'; import { getComponentClasses } from './theme.js'; + import { getSettings } from './settings.js'; const logger = new Logger('MultiSelect'); @@ -50,6 +49,7 @@ actions?: string; } = {}; const settingsClasses = getComponentClasses('MultiSelect'); + const { icons } = getSettings(); const dispatch = createEventDispatcher<{ change: { @@ -170,7 +170,7 @@ > diff --git a/packages/svelte-ux/src/lib/components/MultiSelectOption.svelte b/packages/svelte-ux/src/lib/components/MultiSelectOption.svelte index 3abb377ac..cb104e402 100644 --- a/packages/svelte-ux/src/lib/components/MultiSelectOption.svelte +++ b/packages/svelte-ux/src/lib/components/MultiSelectOption.svelte @@ -5,7 +5,7 @@ import { cls } from '@layerstack/tailwind'; import { getComponentClasses } from './theme.js'; import Button from './Button.svelte'; - import { mdiCheck } from '@mdi/js'; + import { getSettings } from './settings.js'; export let checked: boolean; export let indeterminate = false; @@ -21,6 +21,7 @@ container?: string; } = {}; const settingsClasses = getComponentClasses('MultiSelectOption'); + const { icons } = getSettings(); const dispatch = createEventDispatcher<{ change: null }>(); @@ -62,7 +63,7 @@ {:else if variant === 'checkmark'}
+ ``` Internally, each component uses the `cls()` util which leverages [tailwind-merge](https://github.com/dcastil/tailwind-merge) for easy style overriding (see `class precedence` below). diff --git a/packages/svelte-ux/src/routes/docs/components/AppBar/+page.svelte b/packages/svelte-ux/src/routes/docs/components/AppBar/+page.svelte index 1151a12e8..bf674be64 100644 --- a/packages/svelte-ux/src/routes/docs/components/AppBar/+page.svelte +++ b/packages/svelte-ux/src/routes/docs/components/AppBar/+page.svelte @@ -2,7 +2,7 @@ import { AppBar, Button, getSettings, ListItem } from 'svelte-ux'; import { cls } from '@layerstack/tailwind'; - import { mdiRefresh, mdiMicrosoftXboxControllerMenu } from '@mdi/js'; + import { mdiMicrosoftXboxControllerMenu } from '@mdi/js'; import Preview from '$lib/components/Preview.svelte'; @@ -44,7 +44,7 @@
-
diff --git a/packages/svelte-ux/src/routes/docs/components/Avatar/+page.svelte b/packages/svelte-ux/src/routes/docs/components/Avatar/+page.svelte index 9e8da9959..087e12012 100644 --- a/packages/svelte-ux/src/routes/docs/components/Avatar/+page.svelte +++ b/packages/svelte-ux/src/routes/docs/components/Avatar/+page.svelte @@ -1,6 +1,6 @@ @@ -36,13 +36,13 @@

Icon (prop)

- +

Icon (slot)

- + diff --git a/packages/svelte-ux/src/routes/docs/components/Breadcrumb/+page.svelte b/packages/svelte-ux/src/routes/docs/components/Breadcrumb/+page.svelte index ff71e5180..859b39255 100644 --- a/packages/svelte-ux/src/routes/docs/components/Breadcrumb/+page.svelte +++ b/packages/svelte-ux/src/routes/docs/components/Breadcrumb/+page.svelte @@ -1,9 +1,10 @@

Examples

@@ -55,7 +55,7 @@
-
@@ -70,7 +70,7 @@ A
-
diff --git a/packages/svelte-ux/src/routes/docs/components/Collapse/+page.svelte b/packages/svelte-ux/src/routes/docs/components/Collapse/+page.svelte index c6e4bd577..2169542d7 100644 --- a/packages/svelte-ux/src/routes/docs/components/Collapse/+page.svelte +++ b/packages/svelte-ux/src/routes/docs/components/Collapse/+page.svelte @@ -1,9 +1,11 @@

Examples

@@ -65,7 +65,7 @@ slot="trigger" title="Item {i + 1}" subheading="List Item" - icon={mdiAccount} + icon={LucideUserRound} avatar={{ class: 'bg-surface-content/50 text-surface-100/90' }} class="flex-1" noShadow @@ -89,7 +89,7 @@ slot="trigger" title="Item 1" subheading="Expansion Panel" - icon={mdiAccount} + icon={LucideUserRound} avatar={{ class: 'bg-surface-content/50 text-surface-100/90' }} class="flex-1" noShadow @@ -103,7 +103,7 @@ @@ -111,7 +111,7 @@ slot="trigger" title="Item 3" subheading="Expansion Panel" - icon={mdiAccount} + icon={LucideUserRound} avatar={{ class: 'bg-surface-content/50 text-surface-100/90' }} class="flex-1" noShadow @@ -132,7 +132,7 @@ @@ -140,7 +140,7 @@ slot="trigger" title="Item 2" subheading="Expansion Panel" - icon={mdiAccount} + icon={LucideUserRound} avatar={{ class: 'bg-surface-content/50 text-surface-100/90' }} class="flex-1" noShadow @@ -154,7 +154,7 @@ diff --git a/packages/svelte-ux/src/routes/docs/components/ListItem/+page.svelte b/packages/svelte-ux/src/routes/docs/components/ListItem/+page.svelte index 91056d0a2..b93a5bae3 100644 --- a/packages/svelte-ux/src/routes/docs/components/ListItem/+page.svelte +++ b/packages/svelte-ux/src/routes/docs/components/ListItem/+page.svelte @@ -1,11 +1,11 @@

Examples

@@ -34,7 +43,7 @@
- import { mdiContentCopy, mdiContentCut, mdiContentPaste } from '@mdi/js'; - import { getSettings, Icon, MenuButton, MenuItem, TextField } from 'svelte-ux'; import Preview from '$lib/components/Preview.svelte'; @@ -13,9 +11,9 @@ ]; const optionsWithIcons = [ - { label: 'Cut', value: 'cut', icon: mdiContentCut }, - { label: 'Copy', value: 'copy', icon: mdiContentCopy }, - { label: 'Paste', value: 'paste', icon: mdiContentPaste }, + { label: 'Cut', value: 'cut', icon: icons.cut }, + { label: 'Copy', value: 'copy', icon: icons.copy }, + { label: 'Paste', value: 'paste', icon: icons.paste }, ]; @@ -70,6 +68,7 @@ + {console.log({ value })} diff --git a/packages/svelte-ux/src/routes/docs/components/MenuField/+page.svelte b/packages/svelte-ux/src/routes/docs/components/MenuField/+page.svelte index 9777be234..f9935a990 100644 --- a/packages/svelte-ux/src/routes/docs/components/MenuField/+page.svelte +++ b/packages/svelte-ux/src/routes/docs/components/MenuField/+page.svelte @@ -1,9 +1,9 @@ @@ -61,12 +59,7 @@
- +
@@ -77,7 +70,7 @@ @@ -99,7 +92,7 @@ alert('Undo'), Dismiss: () => {} }} actionsPlacement="below" closeIcon diff --git a/packages/svelte-ux/src/routes/docs/components/ResponsiveMenu/+page.svelte b/packages/svelte-ux/src/routes/docs/components/ResponsiveMenu/+page.svelte index ee1c2f654..7ded532e8 100644 --- a/packages/svelte-ux/src/routes/docs/components/ResponsiveMenu/+page.svelte +++ b/packages/svelte-ux/src/routes/docs/components/ResponsiveMenu/+page.svelte @@ -1,6 +1,4 @@

Examples

@@ -45,7 +46,7 @@
- import { mdiMagnify, mdiPlus, mdiPencil, mdiAccount } from '@mdi/js'; - import { Button, Dialog, Drawer, Form, + getSettings, MenuItem, SelectField, State, @@ -18,6 +17,8 @@ import Preview from '$lib/components/Preview.svelte'; + const { icons } = getSettings(); + let options: MenuOption[] = [ { label: 'One', value: 1 }, { label: 'Two', value: 2 }, @@ -26,10 +27,10 @@ ]; let optionsWithIcon: MenuOption[] = [ - { label: 'One', value: 1, icon: mdiMagnify }, - { label: 'Two', value: 2, icon: mdiPlus }, - { label: 'Three', value: 3, icon: mdiPencil }, - { label: 'Four', value: 4, icon: mdiAccount }, + { label: 'One', value: 1, icon: icons.trash }, + { label: 'Two', value: 2, icon: icons.code }, + { label: 'Three', value: 3, icon: icons.calendar }, + { label: 'Four', value: 4, icon: icons.home }, ]; let optionsWithDisabled: MenuOption[] = [ @@ -305,7 +306,7 @@
+ { @@ -493,7 +494,7 @@

Icon

- +

Rounded

@@ -505,13 +506,13 @@

Rounded with icon

- +

Rounded with append slot and icon

- +