techniq / svelte-ux

Collection of Svelte components, actions, stores, and utilities to build highly interactive applications.

Svelte UX

The projects aims to simplify building highly interactive and visual applications. It provides over 200 components, actions, stores, and utils, with many more planned.

The components are built using Tailwind with extensibility and customization in mind through the use of theming, variants, granular class overrides, and slots. A rich design token system is also currently in the works.

See also the companion library LayerChart for a large collection of composable chart components to build a wide range of visualizations.

Contributing

Install dependencies

pnpm i

Run dev server for svelte-ux package

cd packages/svelte-ux
pnpm dev

Run test for svelte-ux package

cd packages/svelte-ux
pnpm test:unit

Run tests for all packages

pnpm -r test:unit

Run a script from the root

pnpm -F svelte-ux dev

Add changeset to include change in changelog and determine next version

pnpm changeset

svelte-ux's Issues

Preview component

• Show showing / hiding code (hide by default)
• Add "Show all code" toggle
  • Need to improve passing props to Preview and then pass showCode prop to all
• Copy to clipboard

Add `scrollFade` similar to `scrollShadow`

Using mask-image / -webkit-mask-image with a linear-gradient, fade content if scrollable, similar to scrollShadow. See REPL (without scroll adjustment like scrollShadow)

• Ease in fade based on scroll amount (like scrollShadow)
• Enable/disable per side (use shadow for top, fade for bottom, for example)
• Support vertical and horizontal at same time (difficult with mask-image and linearGradient)

[AppLayout] Improve initial SSR layout

Within AppLayout, since matchMedia() is used to determine if the menu drawer should be temporary (overlay) or persistent (side by side), and the navWidth is set via CSS variables, currently there is a layout shift (both on mobile (switch from persistent to temporary) and on desktop (setting nav width)).

We used to disable SSR rendering to bypass the issue by setting ssr: false in svelte.config.js, but this was replaced with a handle hook, which is still possible, but not as clean.

config.kit.ssr has been removed — use the handle hook instead: https://kit.svelte.dev/docs/hooks#handle'

Add Props table to docs

Need to find a way to automatically parse the Svelte props Typescript types and jsdoc comments into a structure to be rendered in the docs

Draggable / Dockable Dialog (convert to Drawer)

It would be useful to be able to drag a Dialog (or at least minimize or make it transparent) to be able to see behind it

Might be as simple as adding a pannable action or using draggable="true" and setting opacity while being dragged (would snap back to original location after letting go)

Might also be useful to convert a Dialog to a Drawer (and vice versa) and dock the Drawer to the left or right.

Resources

• https://svelte.dev/examples#actions
• https://svelte.dev/repl/7d674cc78a3a44beb2c5a9381c7eb1a9?version=3.29.7
• https://svelte.dev/repl/f8d942a2cff64fbda44d6cc97b1ee754?version=3.29.0
• https://github.com/pupubird/svelte-draggable-draw
• https://github.com/daybrush/moveable/tree/master/packages/svelte-moveable
• https://svelte.dev/repl/4949485c5a8f46e7bdbeb73ed565a9c7?version=3.24.1

Other libraries examples

• https://material-ui.com/components/dialogs/#draggable-dialog
• https://ant.design/components/modal/#components-modal-demo-modal-render
• vuetifyjs/vuetify#4058 (comment)
• https://github.com/DylanVann/ant-design-draggable-modal
• https://medium.com/dev-genius/material-ui-responsive-and-draggable-dialogs-96d86efd8152
• https://github.com/roman-rr/cupertino-pane

Improve escape within Drawer / Dialog / etc

Since on:keydown will only bubble to the Drawer from a focusable element within the drawer, we might want to consider adding an invisible input and give initial focus to it.

Using dialog.showModal can help here, but there are also tradeoffs that might not be worth it.

Add ResizeContainer

• REPL
• Multi-level Dropdown
• Might also be able to use flip animation or other animation
• https://vuetifyjs.com/en/components/tabs/#dynamic-height
• https://material.angular.io/components/tabs/overview#dynamic-height
• https://codepen.io/iggnacy/pen/JjeexZd

Maybe consider a custom transition similar to slide but transitions horizontally, similar to this

Add rolling counter / scroll digits

• Rolling counter
• Scrolling digits
• Infinite scroll (horizontal slide transition)
• Sliding Counter
• Clock
• Slide Clock
• Rotate Click [CSS Only]
• Slot Machine Text Using CSS

Replace `console.log` with `Logger`

Replace all commented console.log (example) with Logger instances so they can easily be enabled / disabled via localStorage. See SelectField for an example.

Improve docs

• Move ToC to right side (and sticky) instead of top
  • See content quicker, especially on long pages
  • Always see ToC to allow jumping easier
• Show active toc item
• Handle links to headers (Examples, APIs). Add missing links
• Simplify building ToC (no svelte preprocessor)
• Simplify getting name and source/doc urls, and description (no svelte preprocessor)
  • Use page.js load?
• Handle Preview as svelte preprocessor instead of remark plugin
  • Enable usage on non-markdown pages (further goal)
  • Should fix passing props to Preview (class, etc)
  • Should fix showing in some layout use cases (ex. Badge placement)
• Parse docs/function signatures for actions and stores
  • https://github.com/microsoft/TypeScript/wiki/Using-the-Compiler-API#using-the-type-checker
  • https://github.com/buehler/node-typescript-parser#readme
  • https://stackoverflow.com/questions/39588436/how-to-parse-typescript-definition-to-json
  • https://medium.com/leopards-lab/parsing-d-ts-files-using-typescript-compiler-week-1-gsoc21-8f9e794b9c63
  • https://github.com/mattjennings/vite-plugin-sveld/blob/main/index.js
  • https://github.com/asakusuma/json-typescript-docs
  • tsdoc
    • https://microsoft.github.io/tsdoc/
    • https://github.com/microsoft/tsdoc/blob/main/api-demo/src/simpleDemo.ts
  • https://github.com/TyrealHu/acorn-typescript
  • typedoc
    • typedoc-json-parser
    • https://github.com/grail-ui/grail-ui/tree/master/apps/docs/src/lib/api-documenter
• Consider removing markdown
  • Pros
    • Type checking
    • Better prettier formatting
    • Better errors
    • Allow for quickfix (imports, etc) and highlighting unused imports
    • Allow blank lines in Preview examples
  • Cons
    • Headers (# Something, lists (`- Something), and code blocks (```js) would be less ergonomic
      • Adding components could get close (but would require imports and still less ergonomic)
    • Code examples (```js) not as ergonomic as <Code>
      • https://www.skeleton.dev/utilities/codeblocks
      • https://github.com/ScriptRaccoon/codeblocks/
      • https://rodneylab.com/sveltekit-shiki-syntax-highlighting/
    • Explicit paragraphs
• Add search / quick jump
  • https://vitejs.dev/guide/features.html#glob-import
• Improve design
  • https://tailwindcss.com/blog/2022-12-15-protocol-api-documentation-template
  • https://observablehq.com/plot/
  • https://kitdocs.vercel.app/docs/getting-started/introduction
  • https://www.radix-ui.com/
  • https://ui.shadcn.com/docs/components/accordion
  • https://atlassian.design/components
  • https://www.tremor.so/components
  • https://vaniersel.com/
  • https://lunarui.dev/
• Update front page (considering listing all components with previews)
  • https://www.radix-svelte.com/
  • https://ui.mantine.dev/
  • https://nextui.org/
  • https://ant.design/components/overview
  • https://chakra-ui.com/docs/components
  • https://lunarui.dev/components
  • https://mantine.dev/
  • https://typehero.dev/
• Add component to edit enabled Logger (localStorage.logger = 'MyComponent:INFO,OtherComponent')
• Allow headers to be clickable links
  • If switching away from markdown, using <Header id="...">...</Header> would be easy
  • If not, doing it as a remark/etc plugin
• For each component, add
  • Description
  • Features list
  • Related (actions, components)
• Consider switching from PrismJS to Shiki to code highlighting
• Add jsdoc comments to all props to improve sveld api docs
  • classes: /** @type {{root?: string, icon?: string, loading?: string}} */

Icon enhancements

Update Icon to support

• font-awesome icons
  • Single path
  • Duotone / multi-path
  • Provided viewbox width/height
• Additional props (use tailwind classes)
  • spin
  • inverse
  • pulse
  • flip
  • scale
  • rotate

Update all `dispatch('change')` to not fire unless value changed

• DateField
• DatePickerField
• DateRangeField
• Input
• Form
• Collapse
• Drawer
• TextField
• ToggleGroup
• SelectField

Swipable drawers

• https://v6.framework7.io/svelte/sheet-modal
• https://mui.com/material-ui/react-drawer/#swipeable
• https://panejs.com/demonstration.html
  • https://github.com/roman-rr/cupertino-pane
• https://github.com/pupubird/svelte-draggable-draw
• https://svelte.dev/repl/f8d942a2cff64fbda44d6cc97b1ee754?version=3.29.0

see also: #15

[Form] Consider supporting `<form on:submit>` use case

It would be convenient if Form rendered a <form> and wired up on:submit to call commit().

Migrate from Grid/Stack to tailwind classes

Due to Grid / Stack using css variables and are inherited by DOM children, the variables can "leak" into their children (ex. setting a gap in a parent Grid will be used by a child Grid unless overwritten).

Now that tailwind has JIT support with arbitrary values, we can use this to fix the issue.

Most of the migration is straight forward, but there are examples for Grid and Stack.

Improve docs

• Collapse Examples / API table of contents
• Fix jump to Examples and API (top level)
  • aef3557
• Add link to open Github to Source (ex. TextField.svelte as well as docs source (ex. TextField.md)
• Show required vs optional props, improve "default" and type properties
• Improve look of default slot (remove __ and italic?)
• Support markdown in description / comments?
• Add descriptions to most props
• Search / quick jump (Command+K)
  • Investigate using Vite's import.meta.glob(...) or Algolia DocSearch

TextField improvements

• Type
  • Password (toggle to text to reveal)
  • Number (see Masking)
  • Currency? (see Masking)
  • Date (see Masking)
• Masking (support NumberField, CurrentField, DateField, etc?)
  • Input masking is supported (DateField) but not formatting based on arbitrary length (number with commas, etc)
• Copy to clipboard
• Use Field as base
  • Blocked by: sveltejs/svelte#6059

Textarea menu / autocomplete

• https://github.com/component/textarea-caret-position
• http://jsfiddle.net/dandv/aFPA7
• https://stackoverflow.com/questions/29709/how-do-i-get-the-x-y-pixel-coordinates-of-the-caret-in-text-boxes
• https://github.com/webscopeio/react-textarea-autocomplete
  • https://codepen.io/jukben/pen/bYZqvR
• https://github.com/zurb/tribute
  • https://zurb.github.io/tribute/example/

Feature request: Add `classes` structure to `Collapse`

I think it could be useful to add classes to Collapse to be able to set classes specific to the different slotted areas like…

• the top-level wrapper div in Collapse
• the default slot's wrapper div
• the trigger slot
• the icon slot

classes could looks like this:

export interface Classes {
  container: string;
  default: string;
  trigger: string;
  icon: string;
}

Add Tilt component / action

• 3D card hover / tilt effect
• Pokemon Cards Holo effect v2
  • https://poke-holo.simey.me/
  • https://github.com/simeydotme/pokemon-cards-css
• Holo Card {CSS, Animation}
• 3D Reflective Card (CSS, Animation, Mirrored)
• 3D Card Effect
• Create a tilt effect with React
• FURIOSA 3D Animated Poster
• Parallax Effect with CSS Perspective
• https://linear.app/customers

[ToggleGroup] Scroll option into view

Using scrollIntoView action similar to SelectField and MonthListByYear, it would be helpful to scroll to the selected item if the container overflows.

[Tabs] Change overflow-hidden to overflow-auto to allow scrolling (as needed)

https://github.com/techniq/svelte-ux/blob/master/src/lib/components/Tabs.svelte#L106

Add queryParamsStore

• Support simple types (numbers, strings, booleans)
• Support objects
• Support arrays
  • Return array even if single item
  • Arrays of simple types
  • Arrays of objects
• Handle datatype changing when only a single vs multiple selected (ex. select with a single vs multiple values)
• Provide better errors when config not found (at least include param name)
• Support updating single param with queryParamsStore
  • Either support property and only update those with keys passed (require null / undefined to remove) or expose function from store to set
• Support specifying pushState (browser back) vs replaceState
• Attempt to guess paramType based on default value and/or current params set?
  • Might be confusing when breaks in certain conditions
• Consider supporting Number and [Number] along with 'number' and 'number[]' (etc)?
  • Support both formats?
  • What about json (JSON), object (Object)?
  • What about date vs datetime?
    • Maybe Date is bound to datetime and date is handled by passing in an implementation object with encode/decode (see below)
  • Support a custom format in the future (UTC date vs local date, etc)
    • Maybe passing in an implementation object with encode/decode (see below)
• Consider supporting explicit object with {encode: ..., decode: ....}?
• Differentiate between null and undefined
  • Should only undefined delete the value (null is persisted)? Example: active/inactive/all toggles

Useful links

• https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
• Svelte
  • https://stackoverflow.com/questions/57181704/svelte-components-store-load-state-into-from-url-hash-parameters
• React
  • https://github.com/pbeshai/use-query-params
    • https://github.com/pbeshai/serialize-query-params
  • https://github.com/rudyhuynh/use-url-search-params
  • Using React Hooks to sync your component state and the URL Query string
  • The Easiest Way to Use Query Parameters in React
• Libraries
  • https://github.com/sindresorhus/query-string (6.3k)
  • https://github.com/ljharb/qs (10.2k - 27.9k)
  • https://github.com/lukeed/qss (757b)

Planned Components

• Slider / Range input
  • https://svelte.dev/repl/cfa047ad97cf49c6bfb5b7e5881d5600?version=3.44.2
  • https://svelte.dev/repl/8af0c98cc61d4f7fbca233282b885eaa?version=3.44.2
  • Examples
    • https://www.radix-ui.com/docs/primitives/components/slider
    • https://mhkeller.github.io/svelte-double-range-slider/
    • https://ant.design/components/slider/
    • https://mui.com/components/slider/#range-slider
    • https://vuetifyjs.com/en/components/range-sliders/
    • https://observablehq.com/@mootari/range-slider
    • https://chakra-ui.com/docs/form/range-slider
    • https://codepen.io/seanstopnik/pen/CeLqA
    • https://codepen.io/MarioD/pen/WwXbgr
    • https://codepen.io/vsync/pen/mdEJMLv
    • https://codepen.io/mayuMPH/pen/ZjxGEY
    • https://codepen.io/jackiejohnston/pen/NNrpjQ
    • https://codepen.io/mukealicious/pen/jWoeZY
• Context menu
  • https://svelte.dev/repl/3a33725c3adb4f57b46b597f9dade0c1?version=3.25.0
  • https://github.com/sbcs-chh/common-ui/blob/develop/src/buttons/ContextMenu.tsx
  • https://svelte.dev/repl/697820c1fb92462daea82c2b26244ecd?version=3.37.0
• Multi-level menu
  • https://svelte.dev/repl/814c27da2e1344f9b4f205a93e02559f?version=3.44.2
• Timeline (aka Stepper, Steps, Feed) - WIP
  • https://svelte.dev/repl/13447bfb43e04c63a951dbae8dcab30f?version=3.44.2
  • https://codepen.io/mackorichardson/pen/qBEyZwd
  • https://daisyui.com/components/timeline/
  • https://daisyui.com/components/steps/
• use:tilt
  • https://svelte.dev/repl/8b9f240f86a441f287440ba46357f3bf?version=3.44.2
• Animated / scrolling number stepper?
  • https://svelte.dev/repl/e66c970abc744dd5b8727d59bfc6f6dd?version=3.44.2
  • https://svelte.dev/repl/9f621328005a4b68aead70291a339848?version=3.44.2
  • https://svelte.dev/repl/512095514fa24bd4863cc3f3c657a01f?version=3.52.0
• Intersection observer action example
  • https://svelte.dev/repl/ffa8bc7706c444d0b33275d3227aa94d?version=3.44.2
• Chip
  • deletable (x appended)
  • togglable (on/off checkmark prepended)
  • https://svelte-atoms.web.app/Chip
• Chip group
  • https://vuetifyjs.com/en/components/chip-groups/
  • Support bind:group both mutually exclusive (radio) and as array (checkbox).
• ...more...

Checkbox indeterminate should transition to fully checked

https://svelte.dev/repl/2e4286621064480bb6782ead7e9f01e8?version=3.53.1

visibleHeight action

Useful to keep loading indictors visible

• https://svelte.dev/repl/bb2c41ef48264d64ad26d2e3305171a1?version=3.37.0
• https://svelte.dev/repl/ffa8bc7706c444d0b33275d3227aa94d?version=3.37.0
• Visibility detection using Svelte
  • https://svelte.dev/repl/97df8ddcd07a434890ffb38ff8051291?version=3.19.1
  • https://svelte.dev/repl/6d5c36ae0d2647298f0485b00b9dbfa9?version=3.19.1
  • https://svelte.dev/repl/7bc94b49825f47728444fe8b0ed943cc?version=3.19.2
• https://stackoverflow.com/questions/24768795/get-the-visible-height-of-a-div-with-jquery

Bar Progress

• https://flowbite.com/docs/components/progress/
• https://nikitahl.com/progress-bar-css
• https://svelte.dev/repl/86c02f7138dc47e2a0a1d3382b505387?version=3.58.0
• https://svelte.dev/repl/f22f9acb54554c37aedf3a96497457db?version=3.58.0

• https://play.tailwindcss.com/m7T2uFtWZp
• https://dribbble.com/shots/16460679--Dashboards-Funnel-Widgets-New-Countly-UI
• https://daisyui.com/components/progress/

[ToggleGroup/Option] Support disabling

Allow disabling full ToggleGroup or individual ToggleOption

• Change opacity-50
• Remove click handler (and/or use pointer-events-none)

TextField number type (integer, decimal, ...) improvements

• Improve handling of empty string (parsed to 0 but can backspace out (but still shows value instead of shrunk label / placeholder))
• If value 1234.05 set and backspace 5, 1234 is immediately set (removes .0) due to Number(1234.0) resulting in 1234

Add "peek-a-boo" support to AppBar header

• https://svelte.dev/repl/1cfbbcd7b5e54bcfb00548abfa27ad16?version=3.55.1
• Peekaboo header
• Reveal Nav on Scroll (Peek-a-boo)
• https://ui.aceternity.com/components/floating-navbar

[DateField] Support operators

Popover improvements (including Menu, Tooltip)

• Portal support
  • Fix z-index issues (see Tooltip issue, but also Menu usage will be fixed)
• Flip (opposite side if scrolled outside of view)
  • https://floating-ui.com/docs/flip
• Auto placement (most available space)
  • Based on if there is more room above or below the page (if not explicitly specified)
  • https://floating-ui.com/docs/autoplacement
• maxViewport / size
  • https://floating-ui.com/docs/size
• Arrow
  • https://floating-ui.com/docs/arrow
  • https://css-tricks.com/snippets/css/css-triangle/
  • Simple tooltips with no extra pseudo-element
  • Fancy & Animated Tooltip (CSS Only)
• Hide if offscreen
  • https://floating-ui.com/docs/hide

Allow Tooltips on disabled items

Tried to create a simple use case REPL but couldn't reproduce (on:mouseenter. fires on the REPL but not in Tooltip unless I disable the display: contents style (disabling in Chrome DevTools causes it to fire as well)

Add RangeField

Currently there is RangeSlider

• Rename RangeSlider to RangeInput (or maybe MultiRangeInput)
• Add RangeField which combines Field and RangeInput
• Update RangeInput to support single value
• Consider adding native prop which uses a styled <input type="range" {min} {max} {step} />
  • Styled range input
• Consider consolidating NumberStepper
• Add ticks support
  • Input range with labeled ticks
• Add ColorRangeInput and expose maybe as type="color"
  • REPL
• Replace LayerChart's RangeField (but leverage some of the ideas like showing the number, etc
  • Support clicking number to set (with proper mobile keyboard)
• Consider adding a CircularSlider (or CircleRangeInput)

Examples:

• https://observablehq.com/@mootari/range-slider#doc_interval
• https://www.radix-ui.com/docs/primitives/components/slider
• https://mhkeller.com/svelte-double-range-slider/
  • https://github.com/mhkeller/svelte-double-range-slider
• https://github.com/simeydotme/svelte-range-slider-pips
  • https://codepen.io/simeydotme/pen/WNLxxvx
  • https://codepen.io/simeydotme/pen/PoaOmjr
• https://ant.design/components/slider
• https://mui.com/material-ui/react-slider/#range-slider
• https://vuetifyjs.com/en/components/range-sliders/
• https://chakra-ui.com/docs/components/range-slider
• https://codepen.io/seanstopnik/pen/nKjmPX
• https://codepen.io/MarioD/pen/WwXbgr
• Multi Range input, CSS-only
• https://codepen.io/mayuMPH/pen/ZjxGEY
• https://codepen.io/jackiejohnston/pen/NNrpjQ
• https://codepen.io/mukealicious/pen/jWoeZY
• https://observablehq.com/@bumbeishvili/data-driven-range-sliders
• Multi-range conjoined tooltip
• https://slider-react-component.vercel.app/demo/range
• Skeuomorphic Range Slider
• Skeuomorphic Range Slider
• Skeuomorphic RGB sliders
• Styled Range Input with Label
• Input type range + label CSS vars TEST
• Input range with morphing knob part II
• https://codepen.io/uiswarup/pen/zYybQBX
• https://codepen.io/aaroniker/pen/eYzMveV
• https://daisyui.com/components/range/
• CSS Thermometer

Switch improvements

• Add label (like Radio/Checkbox)
• Support changing color
  • Support changing color based on on/off
• Support on/off text

Reference

• https://codepen.io/mburnette/pen/LxNxNg
• https://codepen.io/eddyerburgh/pen/jqNgEp
• https://codepen.io/designcouch/pen/sDAvk
• https://codepen.io/aaroniker/pen/ZEYoxEY
• https://codepen.io/billyysea/pen/CHmiE
• https://ant.design/components/switch/
• https://codepen.io/imhugofonseca/pen/ExGVGN

[Dialog] Consider using <dialog> element or popover API

The new dialog element has improved accessibility including focus trapper (if opened as a modal), and the browser support is good.

There are a few questions to answer:

• Can we still transition using .show() / .showModal().
  • Might not be able to use svelte transition, but css transitions/animations.
  • No way to fade out backdrop on close (::backdrop element immediately removed)
  • It looks like we can pass the open prop instead of the using the DOM api, which would then allow svelte transitions, but I don't think you can open it as a model, and thus no ::backdrop, focus trapping, etc.
• Do we use the built in ::backdrop pseudo element instead of using Backdrop
• Clicking the backdrop / outside the dialog does not appear to be supported (still use Backdrop component?)
• Scrolling while modal dialog is open is not restricted
• Safari support is 15.4+

Sadly, this doesn't appear to help any with portal-ing, stacking context (z-index, CSS inheritance, etc)

REPL experimentation

Add more keyboard navigation

Left / right and tab

• Tabs
  • Update twitter variant to show focus
• RadioButtons
• ...

Update `scrollIntoView` action to only scroll parent

Similar to how ToggleOption was updated, instead of using the native node.scrollIntoView(), we should calculate the offset manually and use parentElement.scroll() so the page doesn't scroll, only it's container.

Instead of using the node's direct parent, we might want to use getScrollParent(). The impl in ToggleOption should be used to use this action (or util)

Setup CI/CD

• Use Github action to deploy package to npm
  • use svelte-kit package
  • https://davistobias.com/articles/adding-changeset/
• Use Github action to deploy docs to static site (github pages, netlify, etc)
• Setup changesets to generate changelog and manage releases
• Automate changesets via Github actions
  • example
  • Maybe consider Rolling Versions used by floating-ui
• See SvelteKit workflows for inspiration
• See also node-osc workflows
  • bump-version.yml
  • create-release.yml
• See also kitql workflows
• https://pnpm.io/using-changesets
• YouTube examples
  • AUTOMATED Release Notes - GitHub Checkout
• Setup Github releases
  • If using the changesets Github action, this can also be automated
  • https://github.com/changesets/action

[fetchStore] Abortable fetch

• https://developer.mozilla.org/en-US/docs/Web/API/AbortController
• https://developers.google.com/web/updates/2017/09/abortable-fetch
• https://javascript.plainenglish.io/canceling-javascript-async-tasks-with-abortcontroller-acda9f67f7e7

Support more gestures

Along with longpress and pannable, it would be nice to more gestures, such as:

• pinch
• rotate
• swipe

References

• https://use-gesture.netlify.app/docs/gestures/
• https://github.com/Rezi/svelte-gestures
• https://svelte-motion.gradientdescent.de/gestures/
• https://svelte.dev/repl/b1a00248e33946dcaa3bbe9b07fd12fe?version=3.23.2

Add dataBar action / Table integration

• https://svelte.dev/repl/6c306eb8f0a34af398db0bb9c88f68fe?version=3.46.4

Consolidate SelectList (tentative name) and SelectField (and possibly MultiSelect/Menu/Field)

• SelectList vs SelectField
  • TextField
    • Doesn't show chevron
    • Enabled autoFocus (at least for QuickSearch)
  • Removed Menu

Tooltip improvements

• Use portal
  • Will fix stacking context issues (z-index set on parent, etc)
• Allow keeping tooltip open (copy values, etc)
  • Mouseover directly into tooltip (what if there is a gap between anchorEl and popoverEl). Add small time threshold?
  • Click to keep open (what about a button?)
• Crossfade location between instances
• Animate and tilt

Add more IntersectionObserver / scroll based components / actions

• Detect position: sticky being active
  • https://developer.chrome.com/blog/sticky-headers/
  • https://davidwalsh.name/detect-sticky
  • https://codepen.io/hey-nick/pen/mLpmMV
• ScrollSpy
• Dynamic header
  • https://www.smashingmagazine.com/2021/07/dynamic-header-intersection-observer/
  • https://codepen.io/michellebarker/pen/QWpzwYN
• Add draggable example
• IntersectionObserver Visualizer
• Waypoint
  • https://react-restart.github.io/ui/Waypoint/

Examples

• simple scroll animation
• Scroll List Animation
• https://lunarui.dev/components/scroll-animations/scroll-reveal
• https://lunarui.dev/components/scroll-animations/text-highlighter
• https://lunarui.dev/components/scroll-animations/scroll-selector
• https://lunarui.dev/components/scroll-animations/text-reveal
• https://ui.aceternity.com/components/sticky-scroll-reveal

Add `|local` to Drawer/Dialog/Backdrop/Menu without breaking ToggleButton usage

Recently all Svelte transition usage within svelte-ux was updated to include the |local modifier to not break SvelteKit page transitions (see: sveltejs/svelte#6686, sveltejs/kit#628, sveltejs/kit#8670, and sveltejs/kit#5321.

In doing so, this breaks Dialog and Drawer transitions (particularly in) with ToggleButton since the {#if} within Dialog / Drawer are closer than the one within ToggleButton and thus are no longer treated as local.

One of the benefits of using ToggleButton to conditionally render a Dialog/Drawer is to handle mounting/unmounting even when the component is within a wrapping component (ex. UserDrawer, FilterDrawer, etc) as otherwise the wrapping component will always be mounted / reactive.

• ToggleButton
  • UserDrawer
    • Drawer

Since Dialog/Drawers are modals, adding |local to fix SvelteKit page transitions shouldn't be needed as you need to dismiss the modal before clicking on a link, but there might be an overlooked use case. For now, the workaround will be to revert adding |local for these components until a better solution is found.

A few thoughts on possibly solutions:

• Try to not add the {#if open} within Dialog/Drawer when used with ToggleButton
  • We still want it for all other use cases (as removing it completely will complicate them)
  • Trying to add it conditionally just adds another conditional
  • Exposing a separate component (DrawerBase or InternalDrawer or something) with most of the impl could work, but would be confusing to the user
• Allow the user to opt-out of the {#if on} within ToggleButton, but along with being difficult without another conditional or nested slot, it would break the UserDrawer use case

ToggleGroup improvements

• Change to variant="..." instead of contained and underlined
• Allow disabling full ToggleGroup or individual ToggleOption (#28)
• Supporting changing color based on selected tab
• Toggle if only 2 times and selected is clicked
• Add more examples (used as a switch?)
  • https://lunarui.dev/components/navigation/tabs
  • https://codepen.io/hluebbering/pen/PoaWLrw
  • https://paco.me/craft/tabs (using clip path)

Overflow shadows

• Scroll Shadows With JavaScript
• Overflow shadows using the Intersection Observer API
• Overflow-X Shadows Using IntersectionObserver

Setup tests

Some tests have been setup when ran under React/jest, but need reintegrated, like with vitest or uvu

• vitest
• uvu
  • SvelteKit uses uvu and appears to setup it's own orchestration.
    • Switched to vitest
  • snapshot testing
  • Rich Harris's describe
  • asserts
    • uvu/assert
    • chai
• mocks / stubs / spies
  • https://sinonjs.org/
  • https://github.com/therealparmesh/snoop
  • lukeed/uvu#10
  • Mock Service Worker (msw)
    • Using Mock Service Worker with Vitest and fetch
    • A Comprehensive Guide to Mock Service Worker (MSW)

Svelte examples

• https://github.com/davipon/svelte-component-test-recipes
• How do I mock a store in Vitest?
• Testing Svelte stores and mocking dependencies
• Testing Svelte Store Outside of a Component (svelte/writable)
• https://vitest.dev/guide/environment.html
• How to Mock the Window Location with Vitest
• https://stackoverflow.com/questions/52886079/mocking-urlseachparams

Focus trap action/component

• https://css-tricks.com/a-css-approach-to-trap-focus-inside-of-an-element/
• https://www.npmjs.com/package/focus-svelte
• https://github.com/tailwindlabs/headlessui/blob/main/packages/@headlessui-react/src/components/focus-trap/focus-trap.tsx
• https://github.com/rgossiaux/svelte-headlessui/blob/master/src/lib/components/focus-trap/FocusTrap.svelte
• https://github.com/skeletonlabs/skeleton/blob/master/src/lib/actions/FocusTrap/focusTrap.ts
• https://mantine.dev/hooks/use-focus-trap/

Might also use dialog.showModal although Safari support is 15.4+