open-index/open-npm huggingface dataset:
npm package: @svelte-put/resize
Description: Svelte action wrapper for ResizeObserver
Author: Quang Phan
Latest version: 4.0.0

<div align="center">

# `@svelte-put/resize`

[![npm.badge]][npm] [![bundlephobia.badge]][bundlephobia] [![docs.badge]][docs]

Svelte action `use:resize` wrapper for [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).

</div>

## `svelte-put`

This package is part of the [@svelte-put][github.monorepo] family. For contributing guideline and more, refer to its [readme][github.monorepo].

## Usage & Documentation

[See the dedicated documentation page here][docs].

## Quick Start

```html
<script lang="ts">
	import { resize } from '@svelte-put/resize';
	import type { ResizeDetail } from '@svelte-put/resize';

	function onResized(e: CustomEvent<ResizeDetail>) {
		console.log(e.detail);
	}
</script>

<div use:resize on:resized="{onResized}" />
```

## [Changelog][github.changelog]

<!-- github specifics -->

[github.monorepo]: https://github.com/vnphanquang/svelte-put
[github.changelog]: https://github.com/vnphanquang/svelte-put/blob/next/packages/resize/CHANGELOG.md
[github.issues]: https://github.com/vnphanquang/svelte-put/issues?q=

<!-- heading badge -->

[npm.badge]: https://img.shields.io/npm/v/@svelte-put/resize
[npm]: https://www.npmjs.com/package/@svelte-put/resize
[bundlephobia.badge]: https://img.shields.io/bundlephobia/minzip/@svelte-put/resize?label=minzipped
[bundlephobia]: https://bundlephobia.com/package/@svelte-put/resize
[docs]: https://svelte-put.vnphanquang.com/docs/resize
[docs.badge]: https://img.shields.io/badge/-Docs%20Site-blue
npm package: @svelte-put/shortcut
Description: Action to move node on mousedown & mousemove
Author: Quang Phan
Latest version: 4.1.0

<div align="center">

# `@svelte-put/shortcut`

[![npm.badge]][npm] [![bundlephobia.badge]][bundlephobia] [![docs.badge]][docs]

Svelte action `use:shortcut` - add event listener for keyboard shortcuts

</div>

## `svelte-put`

This package is part of the [@svelte-put][github.monorepo] family. For contributing guideline and more, refer to its [readme][github.monorepo].

## Usage & Documentation

[See the dedicated documentation page here][docs].

## Quick Start

```html
<script lang="ts">
  import { shortcut, type ShortcutEventDetail } from '@svelte-put/shortcut';

  function handleK(detail: ShortcutEventDetail) {
    console.log('attached node:', detail.node);
    console.log('original trigger config:', detail.trigger);
  }
</script>

<svelte:window
  use:shortcut={{
    trigger: {
      key: 'k',
      modifier: ['ctrl', 'meta'],
      callback: handleK,
    },
  }}
/>
```

## [Changelog][github.changelog]

<!-- github specifics -->

[github.monorepo]: https://github.com/vnphanquang/svelte-put
[github.changelog]: https://github.com/vnphanquang/svelte-put/blob/main/packages/shortcut/CHANGELOG.md
[github.issues]: https://github.com/vnphanquang/svelte-put/issues?q=

<!-- heading badge -->

[npm.badge]: https://img.shields.io/npm/v/@svelte-put/shortcut
[npm]: https://www.npmjs.com/package/@svelte-put/shortcut
[bundlephobia.badge]: https://img.shields.io/bundlephobia/minzip/@svelte-put/shortcut?label=minzipped
[bundlephobia]: https://bundlephobia.com/package/@svelte-put/shortcut
[docs]: https://svelte-put.vnphanquang.com/docs/shortcut
[docs.badge]: https://img.shields.io/badge/-Docs%20Site-blue
npm package: @svelte-put/swipeable
Description: set up quick swipe gesture action on element
Author: Quang Phan
Latest version: 1.1.0

<div align="center">

# `@svelte-put/swipeable`

[![npm.badge]][npm] [![bundlephobia.badge]][bundlephobia] [![docs.badge]][docs]

Svelte action `use:swipeable` - event for setting up quick gestures on an element (swipe right to delete, for example).

</div>

## `svelte-put`

This package is part of the [@svelte-put][github.monorepo] family. For contributing guideline and more, refer to its [readme][github.monorepo].

## Usage & Documentation

[See the dedicated documentation page here][docs].

## Quick Start

```html
<script lang="ts">
  import { swipe } from '@svelte-put/swipeable';

	const items = $state([1, 2, 3, 4, 5]);

  function delete(e: CustomEvent) {
		const id = e.target.dataset.id;
		items = items.filter(i => i !== id);
  }

	function archive(e: CustomEvent) {
		const id = e.target.dataset.id;
		// call backend API to archive...

		items = items.filter(i => i !== );
	}
</script>

<ul>
	{#each items as i}
		<li
			use:swipe={{ direction: 'horizontal', threshold: '50%' }}
			data-id={i}
			onswipeleft={archive}
			onswiperight={delete}
		>{i}</li>
	{/each}
</ul>
```

## [Changelog][github.changelog]

<!-- github specifics -->

[github.monorepo]: https://github.com/vnphanquang/svelte-put
[github.changelog]: https://github.com/vnphanquang/svelte-put/blob/main/packages/swipeable/CHANGELOG.md
[github.issues]: https://github.com/vnphanquang/svelte-put/issues?q=

<!-- heading badge -->

[npm.badge]: https://img.shields.io/npm/v/@svelte-put/swipeable
[npm]: https://www.npmjs.com/package/@svelte-put/swipeable
[bundlephobia.badge]: https://img.shields.io/bundlephobia/minzip/@svelte-put/swipeable?label=minzipped
[bundlephobia]: https://bundlephobia.com/package/@svelte-put/swipeable
[docs]: https://svelte-put.vnphanquang.com/docs/swipeable
[docs.badge]: https://img.shields.io/badge/-Docs%20Site-blue
npm package: @svelte-put/tooltip
Description: over-engineered, type-safe, headless, and extensible tooltip builder vs Svelte action
Author: Quang Phan
Latest version: 1.0.2
Deprecated: This package has been dropped in favor of @svelte-put/popover. See https://svelte-put.vnphanquang.com/docs/popover for more details. Thank you!

<div align="center">

# `@svelte-put/tooltip`

[![npm.badge]][npm] [![bundlephobia.badge]][bundlephobia] [![docs.badge]][docs] [![repl.badge]][repl]

Type-safe, headless, extensible tooltip builder via Svelte action `use:tooltip`

</div>

## `svelte-put`

This package is part of the [@svelte-put][github.monorepo] family. For contributing guideline and more, refer to its [readme][github.monorepo].

## Usage & Documentation

[See the dedicated documentation page here][docs].

## Quick Start

```html
<script>
  import { computePosition } from '@floating-ui/dom';
  import { tooltip } from '@svelte-put/tooltip';
</script>

<button
  class="c-btn-primary relative"
  use:tooltip={{
    content: 'An example tooltip',
    class: 'c-tooltip',
    compute: async ({ node, tooltip, content }) => {
      const { x, y } = await computePosition(node, tooltip, {
        placement: 'right',
      });
      tooltip.style.left = `${x}px`;
      tooltip.style.top = `${y}px`;
    },
  }}
>
  A button with tooltip
</button>
```

## [Changelog][github.changelog]

<!-- github specifics -->

[github.monorepo]: https://github.com/vnphanquang/svelte-put
[github.changelog]: https://github.com/vnphanquang/svelte-put/blob/main/packages/tooltip/CHANGELOG.md
[github.issues]: https://github.com/vnphanquang/svelte-put/issues?q=

<!-- heading badge -->

[npm.badge]: https://img.shields.io/npm/v/@svelte-put/tooltip
[npm]: https://www.npmjs.com/package/@svelte-put/tooltip
[bundlephobia.badge]: https://img.shields.io/bundlephobia/minzip/@svelte-put/tooltip?label=minzipped
[bundlephobia]: https://bundlephobia.com/package/@svelte-put/tooltip
[repl]: https://svelte.dev/repl/ac411d28f87b4b6d9942e050fa29e0cd
[repl.badge]: https://img.shields.io/static/v1?label=&message=Svelte+REPL&logo=svelte&logoColor=fff&color=ff3e00
[docs]: https://svelte-put.vnphanquang.com/docs/tooltip
[docs.badge]: https://img.shields.io/badge/-Docs%20Site-blue
npm package: @svelte-reactive-form/rules
Description: Form validation rules of svelte-reactive-form.
Author: si3nloong
Latest version: 0.16.14

# @svelte-reactive-form/rules

> Form validation rules of svelte-reactive-form.

<p>

[![npm](https://img.shields.io/npm/v/@svelte-reactive-form/rules.svg)](https://www.npmjs.com/package/@svelte-reactive-form/rules)
[![download](https://img.shields.io/npm/dw/@svelte-reactive-form/rules.svg)](https://www.npmjs.com/package/@svelte-reactive-form/rules)
[![Bundle Size](https://badgen.net/bundlephobia/minzip/%40responsive-ui%2Faccordion)](https://bundlephobia.com/result?p=@svelte-reactive-form/rules)
[![LICENCE](https://img.shields.io/github/license/wetix/svelte-reactive-form)](https://github.com/wetix/svelte-reactive-form/blob/master/LICENSE)

</p>

## Install

```console
npm install @svelte-reactive-form/rules
```

or

```console
yarn add @svelte-reactive-form/rules
```
npm package: @svelte-router/kit
Description: > Hash router for Sveltekit projects
Author: José Pablo Ramírez Vargas
Latest version: 1.0.0

# @svelte-router/kit

> Hash router for Sveltekit projects

This is an extension package for [webJose's Svelte Router](https://github.com/WJSoftware/svelte-router), and enables the use of the router in hash mode in Sveltekit projects.

## Why Would I Need This?

Sveltekit has an excellent file-based router.  You should always stick to the built-in router for routing your application.  However, as with every other router in existence, you can only do path routing or hash routing, but not both.

**webJose's Svelte Router** router was born to break this barrier:  This SPA router can do path and hash routing simultaneously.  However, this is a router for SPA's and PWA's that render on the client.  It was not designed for SSR scenarios.  After all, Sveltekit has routing capabilities included.

But what if you wanted to do hash routing on top of Sveltekit's path routing?  You can today, with this router extension.

### Useful Scenarios

1. You could show a complex dialog box that is driven by hash routing.
2. You could mount your application as a micro-frontend that routes with multiple paths in the hash fragment.
3. You could drive your tabs components with individual named hash paths (this is demonstrated in this repository's demo project).

## Quickstart

1. Install the package
    ```bash
    npm install @svelte-router/kit # This also installs the @svelte-router/core main package
    ```
2. Initialize the library.  Ideally, in the root `+layout.svelte` component:
    ```svelte
    <script lang="ts">
        import { init } from "@svelte-router/kit";

        init(/* options */);
    </script>
    ```
3. Add routers, routes and links for hash navigation as you please.  Note that these are still imported from the core package, `@svelte-router/core`.
4. **EXCEPTION**:  Don't use the core package's `Fallback` component.  Use this package's `KitFallback` component for 
fallback content to avoid flashes of unwanted content when rendering on the server.

> **⚡ Attention!**
> 
> There might be a bug in Svelte or Sveltekit.  Situation:  Just importing `init` from `@svelte-router/kit` triggers error `rune_outside_svelte` on the `trace.svelte.js` file in the `@svelte-router/core` package.  To overcome this, just add `{ ssr: { noExternal: ["@svelte-router/core"] }}` to Vite's configuration.
>
> If this becomes unneeded, this warning will be removed; if this is just the reality of things, this warning will become one more step in the quickstart.

## Limitations

1. Path routing is disallowed.

---

Generally speaking, you need to understand the core router, so have handy its [online documentation](https://wjfe-n-savant.hashnode.space/).
npm package: @svelte-share/button
Description: A button for sharing to social media in Svelte & SvelteKit.
Author: Marley Mulvin Broome
Latest version: 0.0.1

# @svelte-share/button

A button for sharing to social media with Svelte.

## Supported Components

There are multiple npm packages for their respective social medias.

- `@svelte-share/line`
- `@svelte-share/x`

## Usage

Usage of the `<ShareButton>` component is only recommended if you would like to implement a social media that isn't supported already.

### Custom button example

Below is an example of implementing a custom share button for the messaging app Line.

```svelte
<script lang="ts">
  import { ShareButton } from '@svelte-share/button';

  const url = encodeURI(
    `https://social-plugins.line.me/lineit/share?url=https://twitter.com/marley_eng`
  );
</script>

<ShareButton {url} --share-button-background-color="#00b900" --share-button-hover-color="#00b900">
  <svg
    class="share-icon"
    slot="icon"
    aria-label="LINE"
    viewBox="0 0 512 512"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M512.017 227.437c-2.734 61.513-28.706 103.889-69.715 140.796-72.448 64.247-187.272 143.53-202.308 131.227-15.037-19.137 28.706-64.246-27.34-71.08C92.365 411.975.778 327.224.778 227.436c0-112.09 116.191-205.042 256.987-205.042 140.796 0 258.354 92.953 254.253 205.042z"
      fill="#fff"
      style="stroke-width:1.36695"
      transform="translate(0 -5.565)"
    /><path
      d="M413.596 223.24H367.12m46.476-49.21h-49.21v98.42h49.21m-168.135 0v-98.42l73.816 98.42v-98.42m-121.659 98.42v-98.42m-90.218 0v98.42h50.577"
      fill="none"
      stroke="#00b900"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="24.25"
    />
  </svg>

  <span class="share-text"> 送る </span>
</ShareButton>

<style>
  .share-icon {
    width: 2em;
    height: 2em;
  }

  .share-text {
    font-size: 1.3em;
    font-weight: 600;
  }
</style>
```