open-index/open-npm huggingface dataset:
npm package: @spicycoding/vue-file-uploader
Description: Upload multiple files (including sorting) using our Vue component. This only works on HTML5 supported browsers!
Author: Spicy Coding
Latest version: 2.0.0

## Upload (multiple) files with Vue<br>
To use this component, make sure you've loaded Vue in your application. By using this component, you can easily browse for files to upload.

<br>

## Quick install
**NPM**:

    npm install @spicycoding/vue-file-uploader


**Yarn**

    yarn add @spicycoding/vue-file-uploader

<br>

## Documentation
**Add this at the top of your javascript file**

``
import FileUploader from '@spicycoding/vue-file-uploader';
`` 

<br>

**Now add it to the components object of your Vue instance.**

``
components: {
    'vue-file-uploader': FileUploader
},
``

<br>

**You can put the component in your HTML like this**

``
<vue-file-uploader upload-url="/upload.php"></vue-file-uploader>
``

<br>

You don't need to import any CSS files, everything will just work as expected. If you want to pass a csrf token, you can do that by adding this to the component:

``
csrf-token="your-token"
``

<br>

## Listen for events
You can add the ``@success`` and ``@error`` events to your component to do whatever you want to do after the XMLHttpRequest finished. For example:

``
<vue-file-uploader @success="mySuccessMethod" @error="myErrorMethod" upload-url="/upload.php"></vue-file-uploader>
``

<br>

## Custom translations
You can edit the default translations by using the `setTranslations` method:

```
FileUploader.setTranslations({
    noFilesFound: 'No files found.',
    filename: 'Filename',
    buttons: {
        browse: 'Browse for files',
        delete: 'Delete',
        clear: 'Clear queue',
        upload: 'Upload files',
    }
});
```

<br><br> 


_**The upload manager will only work on HTML5 supported browsers!**_

<br>

## Thank you for using our file uploader!
Kind regards,<br>
Pim vd Molen ([Spicy Coding](https://spicycoding.nl))
npm package: @spicycoding/vue-form-builder
Description: This is a vue component for building HTML forms
Author: Pim vd Molen
Latest version: 1.1.2

# Vue form builder (HTML)
I highly recommend to use this component in conjunction with `@spicycoding/vue-form-parser`

## Quick install
**NPM**:

    npm install @spicycoding/vue-form-builder


**Yarn**

    yarn add @spicycoding/vue-form-builder

<br>

## Documentation
**Add this at the top of your javascript file**

``
import FormBuilder from '@spicycoding/vue-form-builder';
`` 

<br>

**Now add it to the components object of your Vue instance.**

``
components: {
    'form-builder': FormBuilder
},
``

<br>

**You can put the component in your HTML like this**

``
<form-builder :json="" :on-submit="" :elements-only="true"></form-builder>
``

<br>

## On submit
**In your own javascript, create a function that you refer to in the form-builder component. For example:**

```js
function apply(json) {
    console.log(json);
    
    /*
     *  Note:
     *  
     *  This json can be used in your component property (:json="json")
     *  so that the form settings are already loaded when the vue component is created.
     *  
     *  So you should definitely save this json in your database so you can edit the form afterwards!
     */
}
```

**Did you create the function as shown in the example above? Then you can use this in the component:**
```html
<form-builder :json="" :on-submit="apply" :elements-only="true"></form-builder>
```

## Elements only
This property can be used to enable/disable editing the form attributes. In some cases you might want to use a dynamic form action (for example). In this case, you can set elements-only to true to make sure that the form attributes are not editable.

## Json
The json object that your apply method returns can be used to send in the :json attribute. This way, you can edit a previously created form. 

<br>

## SortableJS
This package makes use of the `sortablejs` package. All the credits for the author of this package!

<br>

## Thank you for using this Form Builder!
Kind regards,<br>
Pim vd Molen ([Spicy Coding](https://spicycoding.nl))
npm package: @spicycoding/vue-form-parser
Description: This is a vue component for parsing HTML forms that are created with our @spicycoding/vue-form-builder
Author: Pim vd Molen
Latest version: 1.1.1

# Vue form parser (HTML)
I highly recommend to use this component in conjunction with `@spicycoding/vue-form-builder`

## Quick install
**NPM**:

    npm install @spicycoding/vue-form-parser


**Yarn**

    yarn add @spicycoding/vue-form-parser

<br>

## Documentation
**Add this at the top of your javascript file**

``
import FormParser from '@spicycoding/vue-form-parser';
`` 

<br>

**Now add it to the components object of your Vue instance.**

``
components: {
    'form-parser': FormParser
},
``

<br>

**You can put the component in your HTML like this**

``
<form-parser max-file-size="5" :json=""></form-parser>
``

<br>

## Attribute: max-file-size
**When a file field is available, how many megabytes are allowed to upload per file?**

<br>

## Attribute: json
If you used this package: ``@spicycoding/vue-form-builder``, then you probably stored the form builder json output in your database. You can use this data in the json property.

<br>

## Thank you for using this Form Parser!
Kind regards,<br>
Pim vd Molen ([Spicy Coding](https://spicycoding.nl))
npm package: @spicyfriends/common
Description: Common components and utilities for Spicy Friends
Latest version: 0.1.1

# @spicyfriends/common

Common UI components and utilities for Spicy Friends applications.

## 🎉 Features

- 🎨 **React + TypeScript** - Modern React development with full type safety

## Installation

```bash
pnpm add @spicyfriends/common
```

or

```bash
npm install @spicyfriends/common
```

## Usage

### Components

```tsx
import { Button } from '@spicyfriends/common';

function App() {
  return (
    <Button variant="primary" size="medium" onClick={() => alert('Clicked!')}>
      Click me
    </Button>
  );
}
```

### Utilities

```tsx
import { formatCurrency, formatNumber, debounce, throttle } from '@stockflowsync/common';

// Format currency
const price = formatCurrency(1234.56); // "$1,234.56"

// Format numbers
const quantity = formatNumber(1234.5678, 2); // "1,234.57"

// Debounce a function
const debouncedSearch = debounce((query: string) => {
  console.log('Searching for:', query);
}, 300);

// Throttle a function
const throttledScroll = throttle(() => {
  console.log('Scrolling...');
}, 100);
```

## Development

### Prerequisites

- Node.js >= 18
- pnpm >= 8.14.3

## License

MIT

---

Happy coding! 🚀
npm package: @spicyfriends/common-ui
Description: Common UI components and utilities for Spicy Friends
Latest version: 0.1.1

# @spicyfriends/common-ui

Common UI components and utilities for Spicy Friends applications.

## 🎉 Features

- 🎨 **React + TypeScript** - Modern React development with full type safety

## Installation

```bash
yarn add @spicyfriends/common-ui
```

or

```bash
npm install @spicyfriends/common-ui
```

## Usage

### Components

```tsx
import { Button } from '@spicyfriends/common-ui';

function App() {
  return (
    <Button variant="primary" size="medium" onClick={() => alert('Clicked!')}>
      Click me
    </Button>
  );
}
```

### Utilities

```tsx
import { formatCurrency, formatNumber, debounce, throttle } from '@stockflowsync/common';

// Format currency
const price = formatCurrency(1234.56); // "$1,234.56"

// Format numbers
const quantity = formatNumber(1234.5678, 2); // "1,234.57"

// Debounce a function
const debouncedSearch = debounce((query: string) => {
  console.log('Searching for:', query);
}, 300);

// Throttle a function
const throttledScroll = throttle(() => {
  console.log('Scrolling...');
}, 100);
```

## Development

### Prerequisites

- Node.js >= 18
- Yarn (using Yarn 4 with node-modules linker)

## License

MIT

---

Happy coding! 🚀