Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pierogis/svelte-tweakpane
svelte components for using tweakpane
https://github.com/pierogis/svelte-tweakpane
svelte tweakpane
Last synced: 1 day ago
JSON representation
svelte components for using tweakpane
- Host: GitHub
- URL: https://github.com/pierogis/svelte-tweakpane
- Owner: pierogis
- License: agpl-3.0
- Created: 2022-09-06T13:07:01.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-29T04:32:22.000Z (11 months ago)
- Last Synced: 2024-11-07T19:57:46.850Z (7 days ago)
- Topics: svelte, tweakpane
- Language: Svelte
- Homepage:
- Size: 140 KB
- Stars: 9
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# svelte-tweakpane
svelte components wrapping [tweakpane](https://github.com/cocopon/tweakpane)
## installation
```bash
npm i --save-dev @pierogis/svelte-tweakpane
# or
pnpm add -D @pierogis/svelte-tweakpane
```
## usage
```svelte
import { writable } from 'svelte/store';
import { Binding, Blade, Button, Folder, Pane, Tab } from '@pierogis/svelte-tweakpane';
const title = 'pane';
function handleFold() {
console.log('fold');
}
let container: HTMLElement;
const key = 'key';
const paramsStore = writable({ [key]: 50 });
const monitorParams = {
readonly: true,
interval: 32
};
const inputParams = {};
{#if container}
console.log(ev.value)}
{key}
let:bindingApi
/>
console.log('click')} />
{/if}
```
the container (from `bind:this`) defines the size of the pane
### exports
```ts
import { Blade, Binding, Button, Folder, Pane, Tab } from "@pierogis/svelte-tweakpane"
```
### theming
style in a `+layout.svelte` like so (see [theming](https://cocopon.github.io/tweakpane/theming/) for full list of observed css variables)
```svelte
:global(:root) {
--tp-base-background-color: #color;
--tp-base-shadow-color: #color;
/* button */
--tp-button-background-color: #color;
--tp-button-background-color-active: #color;
--tp-button-background-color-focus: #color;
--tp-button-background-color-hover: #color;
--tp-button-foreground-color: #color;
/* label */
--tp-label-background-color: #color;
--tp-label-foreground-color: #color;
/* input */
--tp-input-background-color: #color;
--tp-input-background-color-active: #color;
--tp-input-background-color-focus: #color;
--tp-input-background-color-hover: #color;
--tp-input-foreground-color: #color;
--tp-container-background-color: #color;
--tp-container-background-color-active: #color;
--tp-container-background-color-focus: #color;
--tp-container-background-color-hover: #color;
--tp-container-foreground-color: #color;
}
```
## development
clone the repo
install dependencies with `pnpm i`
start a development server with:
```bash
pnpm dev
```
## release
- push with necessary changesets
- gh action will make a version PR
- create prerelease (if needed)
```
pnpm changeset pre enter next
pnpm changeset version
pnpm changeset publish
```
- merge changeset version pr and pull
- publish release
```
pnpm changeset publish
```