svelte-ux

svelte-ux copied to clipboard

Allow disabling full `ToggleGroup` or individual `ToggleOption` - Change `opacity-50` - Remove [click](https://github.com/techniq/svelte-ux/blob/master/src/lib/components/ToggleOption.svelte#L33) handler (and/or use `pointer-events-none`)

techniq

- 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

techniq

Tailwind [3.3](https://tailwindcss.com/blog/tailwindcss-v3-3#esm-and-type-script-support) now supports ESM and Typescript configs. Determine what is needed to support this configuration. Initial thoughts are - Change [tailwind.cjs](https://github.com/techniq/svelte-ux/blob/master/src/lib/plugins/tailwind.cjs) plugin to `tailwind.js` in ESM format - Add...

techniq

Replace `console.log` with `Logger`

1

Replace all commented `console.log` ([example](https://github.com/techniq/svelte-ux/blob/master/src/lib/components/Dialog.svelte#L43-L56)) with `Logger` instances so they can easily be enabled / disabled via [localStorage](https://github.com/techniq/svelte-ux/blob/master/src/lib/utils/logger.ts#L6-L9). See [SelectField](https://github.com/techniq/svelte-ux/blob/main/packages/svelte-ux/src/lib/components/SelectField.svelte) for an example.

techniq

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

2

- [ ] [DateField](https://github.com/techniq/svelte-ux/blob/master/src/lib/components/DateField.svelte) - [ ] [DatePickerField](https://github.com/techniq/svelte-ux/blob/master/src/lib/components/DatePickerField.svelte) - [ ] [DateRangeField](https://github.com/techniq/svelte-ux/blob/master/src/lib/components/DateRangeField.svelte) - [ ] [Input](https://github.com/techniq/svelte-ux/blob/master/src/lib/components/Input.svelte) - [ ] [Form](https://github.com/techniq/svelte-ux/blob/master/src/lib/components/Form.svelte) - [ ] [Collapse](https://github.com/techniq/svelte-ux/blob/master/src/lib/components/Collapse.svelte) - [ ] [Drawer](https://github.com/techniq/svelte-ux/blob/master/src/lib/components/Drawer.svelte) - [...

techniq

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

techniq

- 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](https://github.com/techniq/svelte-ux/issues/26) although [Safari support](https://caniuse.com/?search=dialog) is `15.4+`

techniq

- 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

techniq

Left / right and tab - [ ] Tabs - [ ] Update twitter variant to show focus - [x] RadioButtons - [ ] ...

techniq

Along with [longpress](https://github.com/techniq/svelte-ux/blob/master/src/lib/actions/mouse.ts#L4) and [pannable](https://github.com/techniq/svelte-ux/blob/master/src/lib/actions/mouse.ts#L47), 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

techniq