diff --git a/.changeset/rich-chairs-watch.md b/.changeset/rich-chairs-watch.md new file mode 100644 index 0000000..d731eb4 --- /dev/null +++ b/.changeset/rich-chairs-watch.md @@ -0,0 +1,5 @@ +--- +'vaul-svelte': patch +--- + +initial release diff --git a/README.md b/README.md index 69f4875..0425253 100644 --- a/README.md +++ b/README.md @@ -1,58 +1,78 @@ -# create-svelte +Vaul-Svelte is an unstyled drawer component for Svelte that can be used as a Dialog replacement on tablet and mobile devices. It uses [Bits' Dialog primitive](https://www.bits-ui.com/docs/components/dialog) under the hood and is inspired by [this tweet](https://twitter.com/devongovett/status/1674470185783402496). -Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte). +This is a port of [Vaul](https://github.com/emilkowalski/vaul) for React, which was created by [Emil Kowalski](https://twitter.com/emilkowalski_). -Read more about creating a library [in the docs](https://kit.svelte.dev/docs/packaging). +## Usage -## Creating a project - -If you're seeing this, you've probably already done this step. Congrats! +To start using the library, install it in your project: ```bash -# create a new project in the current directory -npm create svelte@latest +npm install vaul-svelte +``` -# create a new project in my-app -npm create svelte@latest my-app +Use the drawer in your app. + +```svelte + + + + Open + + +

Content

+
+ +
+
``` -## Developing +## Examples -Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: +(Coming soon) -```bash -npm run dev +## API Reference -# or start the server and open the app in a new browser tab -npm run dev -- --open -``` +### Root -Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app. +Contains all parts of a dialog. Use `shouldScaleBackground` to enable background scaling, it requires an element with `[data-vaul-drawer-wrapper]` data attribute to scale its background. +Can be controlled by binding to the `open` prop, or using the`onOpenChange` prop. -## Building +Additional props: -To build your library: +`closeThreshold`: Number between 0 and 1 that determines when the drawer should be closed. Example: threshold of 0.5 would close the drawer if the user swiped for 50% of the height of the drawer or more. -```bash -npm run package -``` +`scrollLockTimeout`: Duration for which the drawer is not draggable after scrolling content inside of the drawer. Defaults to 500ms -To create a production version of your showcase app: +`snapPoints`: Array of numbers from 0 to 100 that corresponds to % of the screen a given snap point should take up. Should go from least visible. Example `[0.2, 0.5, 0.8]`. You can also use px values, which doesn't take screen height into account. -```bash -npm run build -``` +`fadeFromIndex`: Index of a `snapPoint` from which the overlay fade should be applied. Defaults to the last snap point. -You can preview the production build with `npm run preview`. +### Trigger -> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment. +The button that opens the dialog. [Props](https://www.bits-ui.com/docs/components/dialog#trigger). -## Publishing +### Content -Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)). +Content that should be rendered in the drawer. [Props](https://www.bits-ui.com/docs/components/dialog#content). -To publish your library to [npm](https://www.npmjs.com): +### Overlay -```bash -npm publish -``` +A layer that covers the inert portion of the view when the dialog is open. [Props](https://www.bits-ui.com/docs/components/dialog#overlay). + +### Title + +An accessible title to be announced when the dialog is opened. [Props](https://www.bits-ui.com/docs/components/dialog#title). + +### Description + +An optional accessible description to be announced when the dialog is opened. [Props](https://www.bits-ui.com/docs/components/dialog#description). + +### Close + +The button that closes the dialog. [Props](https://www.bits-ui.com/docs/components/dialog#close). + +### Portal + +Portals your drawer into the body. diff --git a/vite.config.ts b/vite.config.ts index b481b8b..ca016cb 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -10,7 +10,6 @@ export default defineConfig({ environment: 'jsdom', // in-source testing includeSource: ['src/**/*.{js,ts,svelte}'], - setupFiles: ['./src/tests/setupTest.ts'], coverage: { exclude: ['setupTest.ts'] },