open-index/open-npm huggingface dataset:
npm package: @joebayld/vue-easy-dnd
Description: Easy-DnD is a drag and drop implementation for Vue 3 that uses only standard mouse events instead of the HTML5 drag and drop API, which is [impossible to work with](https://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html). Think of it as a wa
Author: Régis Lemaigre
Latest version: 2.1.4

# Vue-Easy-DnD 
### A HTML5 drag-and-drop replacement
Easy-DnD is a drag and drop implementation for Vue that uses only standard mouse events instead of the HTML5 drag and drop API, which is [impossible to work with](https://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html).

Think of it as a way to transfer data from some components to others using the mouse or support for a mouse assisted copy/cut - paste. It also allows for lists to be reordered by drag and drop.

## Documentation
Our documentation has moved to Github Pages!

### [View Documentation Here](https://rlemaigre.github.io/Easy-DnD)

## Examples
View more examples within our documentation

![demo](docs/img/vid4.gif)
![demo](docs/img/vid7.gif)
npm package: @joebell/cx
Description: yet another classnames package
Author: Joe Bell
Latest version: 0.1.0

# cx 🔗

> Concatenate your classes (with shortcuts)

![NPM Version](https://badgen.net/npm/v/@joebell/cx)
![Types Included](https://badgen.net/npm/types/@joebell/cx)
![Minizipped size](https://badgen.net/bundlephobia/minzip/@joebell/cx)
![License](https://badgen.net/github/license/joe-bell/cx)
![NPM Downloads](https://badgen.net/npm/dm/@joebell/cx)

---

**`cx`** is a <small><strong>tiny</strong></small> function that mimics and extends the popular [`classnames`][classnames] utility with **"shortcuts"** to re-use common classes (with TypeScript autocompletion)

> 💡 Works especially nicely with [Tailwind IntelliSense][tw]

## Setup

1. Install the package via your favourite package manager:

   ```sh
   npm i @joebell/cx
   ```

2. Create a custom `cx` function for later use.

   Common styles can be defined in the `shortcuts` and accessed by it's `"key"` for re-use later.

   > ⚠️ **FYI**: At this point in time, your shortcuts must be a flat object with no nested keys.

   ```ts
   // styles/index.ts
   import { createCx } from "@joebell/cx";

   const shortcuts = {
     // Components
     "c-container": ["block", "max-w-5xl", "mx-auto", "px-4"],
     // Utilities
     "u-border": ["border-dashed", "border-black"],
   };

   export const cx = createCx(shortcuts);
   ```

3. Import `cx` into your component or layout.

   **For example, in React.js:**

   ```tsx
   // pages/index.tsx
   import { cx } from "../styles";

   const Page: React.FC = ({ children }) => (
     <main className={cx("c-container", "mt-4")}>{children}</main>
   );
   ```

   _returns…_

   ```html
   <main class="block max-w-5xl mx-auto px-4 mt-4">…</main>
   ```

   > 💡 **Tip**: If you're having issues with [Tailwind IntelliSense][tw] in VSCode, try reloading the window

## Acknowledgements

Without these projects/people, this project wouldn't exist…

- [**classnames** - Jed Watson][classnames]

[classnames]: https://github.com/JedWatson/classnames
[tw]: https://github.com/tailwindlabs/tailwindcss-intellisense