Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@rgossiaux/svelte-headlessui
Advanced tools
@rgossiaux/svelte-headlessui - npm Package Compare versions
Comparing version 1.0.0-beta.10 to 1.0.0-beta.11
| export { default as TransitionChild } from "./TransitionChildWrapper.svelte"; | ||
| export { default as Transition } from "./TransitionRoot.svelte"; | ||
| export { default as Transition, default as TransitionRoot } from "./TransitionRoot.svelte"; |
| export { default as TransitionChild } from "./TransitionChildWrapper.svelte"; | ||
| export { default as Transition } from "./TransitionRoot.svelte"; | ||
| export { default as Transition, default as TransitionRoot } from "./TransitionRoot.svelte"; |
@@ -0,4 +1,14 @@ | ||
| import { tick } from "svelte"; | ||
| export function portal(element, target) { | ||
| if (target) { | ||
| target.append(element); | ||
| // During initial render, the "portal" might be constructed before | ||
| // the root component has even attached, causing the portal to not work. | ||
| // This is a workaround for this issue--it can't guarantee the portal is | ||
| // **always** last, but it should catch the normal cases. | ||
| tick().then(() => { | ||
| if (target && element !== target.lastChild) { | ||
| target.appendChild(element); | ||
| } | ||
| }); | ||
| } | ||
@@ -5,0 +15,0 @@ return { |
@@ -12,3 +12,3 @@ { | ||
| ], | ||
| "homepage": "https://github.com/rgossiaux/svelte-headlessui", | ||
| "homepage": "https://svelte-headlessui.goss.io", | ||
| "bugs": { | ||
@@ -19,3 +19,3 @@ "url": "https://github.com/rgossiaux/svelte-headlessui/issues" | ||
| "repository": "github:rgossiaux/svelte-headlessui", | ||
| "version": "1.0.0-beta.10", | ||
| "version": "1.0.0-beta.11", | ||
| "peerDependencies": { | ||
@@ -27,5 +27,7 @@ "svelte": "^3.44.0" | ||
| "@babel/preset-env": "^7.16.5", | ||
| "@rgossiaux/svelte-heroicons": "^0.1.2", | ||
| "@sveltejs/adapter-auto": "next", | ||
| "@sveltejs/kit": "next", | ||
| "@tailwindcss/forms": "^0.4.0", | ||
| "@tailwindcss/typography": "^0.5.0", | ||
| "@testing-library/jest-dom": "^5.16.1", | ||
@@ -43,2 +45,3 @@ "@testing-library/svelte": "^3.0.3", | ||
| "jest": "^27.4.5", | ||
| "mdsvex": "^0.9.8", | ||
| "postcss": "^8.3.9", | ||
@@ -48,2 +51,4 @@ "postcss-load-config": "^3.1.0", | ||
| "prettier-plugin-svelte": "^2.4.0", | ||
| "rehype-autolink-headings": "^6.1.1", | ||
| "rehype-slug": "^5.0.1", | ||
| "svelte": "^3.44.0", | ||
@@ -50,0 +55,0 @@ "svelte-check": "^2.4.1", |
@@ -5,2 +5,4 @@ # svelte-headlessui | ||
| Documentation for this library is available at https://svelte-headlessui.goss.io | ||
| ## Who is this for? | ||
@@ -11,3 +13,4 @@ | ||
| - You want unstyled yet sophisticated customizable UI components that fully follow the WAI-ARIA specs. You want a component library to handle all the messy details (keyboard navigation, focus management, aria-\* attributes, and many many more), but you want to style your components yourself and not be constrained by existing design systems like Material UI. | ||
| - You want to use the commercial Tailwind UI component library (https://tailwindui.com/) in your Svelte project, and want a drop-in replacement for the React components which power Tailwind UI. | ||
| - Alternatively, you want to implement an existing design system in Svelte, and want a powerful set of primitives to build your components on, letting you focus on styling. | ||
| - You want to use the commercial Tailwind UI component library (https://tailwindui.com/) in your Svelte project, and want a drop-in replacement for the React/Vue components which power Tailwind UI. | ||
@@ -26,60 +29,4 @@ This project is intended to keep an API as close as possible to the React API for the base Headless UI project, with only a few small differences. While one of the primary goals is to enable using Tailwind UI in a Svelte project with as little effort as possible, **neither Tailwind UI nor Tailwind CSS is required** to use these components. | ||
| For now, until I write separate documentation, you can refer to the [Headless UI React documentation](https://headlessui.dev/). The API is nearly identical to the React API there, with the following differences: | ||
| See https://svelte-headlessui.goss.io for full documentation. | ||
| - Components do not have . in their names; use `ListboxButton` instead of `Listbox.Button` | ||
| - Event handlers are done Svelte-style with custom events: | ||
| ``` | ||
| // React version | ||
| <Listbox onChange={(value) => console.log(value)}> | ||
| /* Stuff */ | ||
| </Listbox> | ||
| <!--- Svelte version ---> | ||
| <Listbox on:change={(e) => console.log(e.detail)}> | ||
| <!--- Stuff ---> | ||
| </Listbox> | ||
| ``` | ||
| Note the `.detail` that is needed to get the event value in the Svelte version. | ||
| - Instead of render props, we use Svelte's [slot props](https://svelte.dev/tutorial/slot-props): | ||
| ``` | ||
| // React version | ||
| <Listbox.Button> | ||
| {({open, disabled} => /* Something using open and disabled */)} | ||
| </Listbox.Button> | ||
| <!--- Svelte version ---> | ||
| <ListboxButton let:open let:disabled> | ||
| <!--- Something using open and disabled ---> | ||
| </ListboxButton> | ||
| ``` | ||
| - When porting React code, HTML attributes use their real names instead of the camelCased React versions. In particular, use `class=` instead of `className=`. | ||
| - When porting React code, use `{#each}` instead of `.map` (don't forget to add a key!): | ||
| ``` | ||
| // React version | ||
| {people.map((person) => ( | ||
| <Listbox.Option | ||
| key={person.id} | ||
| ... | ||
| <!--- Svelte version ---> | ||
| {#each people as person (person.id)} | ||
| <ListboxOption | ||
| ... | ||
| ``` | ||
| Similarly, React's `{value && (<Component />)}` style syntax becomes `{#if value} <Component /> {/if}` in Svelte, of course. | ||
| - While the `as` prop is supported, `as={Fragment}` support is not possible due to limitations in Svelte itself. You'll have to settle for rendering a `div` or similar. Usually this won't cause any problems, especially if you are writing your own code, but if you are porting React Headless UI code that both uses `as={Fragment}` and `z-index`, your div could possibly create a new [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context), causing the `z-index` to not work correctly. If this happens, you can fix by copying the `z-index` (and a relevant `position`) to the component that used to render as a `Fragment`. | ||
| Furthermore, specific to Svelte, you may | ||
| - Pass [actions](https://svelte.dev/tutorial/actions) to any component in this library using the `use` prop, with the syntax `use={[[action1, action1options], [action2], [action3, action3options], ...]}`, and they will be forwarded to the underlying DOM element. | ||
| - Add your own event listeners with modifiers, which will be forwarded to the underyling DOM element. Modifiers are separated with the `!` character instead of the normal `|`: `on:click!capture={(e) => ...}` | ||
| ## Credits | ||
@@ -86,0 +33,0 @@ |
@@ -36,2 +36,3 @@ import { SvelteComponentTyped } from "svelte"; | ||
| unmount?: boolean | undefined; | ||
| static?: boolean | undefined; | ||
| class?: string | ((props: TSlotProps) => string) | undefined; | ||
@@ -38,0 +39,0 @@ style?: string | ((props: TSlotProps) => string) | undefined; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Number of package files
- increased by1.2%
252
- Lines of code
- increased by0.99%
5104
Worsened metrics
- Total package byte prevSize
- decreased by-0.14%
326583
- Dev dependency count
- increased by15.63%
37
- Number of lines in readme file
- decreased by-58.24%
38
No dependency changes