open-index/open-npm huggingface dataset:
npm package: @lemon30_npm/csit-vue2
Description: ## Project setup ``` npm install ```
Latest version: 0.0.3

# csit-base-frame

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Lints and fixes files
```
npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
npm package: @lemonadejs/list
Description: LemonadeJS list extension. A useful 1.5Kb listing library with search and pagination.
Author: Contact
Latest version: 5.1.0

# Javascript dynamic lists with search and pagination

[Official website and documentation is here](https://lemonadejs.net/library/list)

Compatible with Vanilla JavaScript, LemonadeJS, React, Vue or Angular.

The JavaScript List is a lightweight library that effortlessly enables you create repeated HTML block of elements from a template based on a given array.

## Features

-   Lightweight: The lemonade data grid is only about 2 KBytes;
-   Customizable: You can define a HTML template;
-   Reactive: Any changes to the underlying data are automatically applied to the HTML;
-   Integration: It can be used as a standalone library or integrated with any modern framework;

## Getting Started

You can install using NPM or using directly from a CDN.

### npm Installation

To install it in your project using npm, run the following command:

```bash
$ npm install @lemonadejs/list
```

### CDN

To use the javascript plugin via a CDN, include the following script tags in your HTML file:

```html
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/list/dist/index.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/list/dist/style.min.css" />
```

### Attributes

| Attribute               | Description                                                    |
| ----------------------- | -------------------------------------------------------------- |
| data: Array<Object>     | Data should be an array of objects.                            |
| pagination?: Number     | Enable the pagination and define the number of items per page. |
| search?: Boolean        | Enable the search.                                             |
| onsearch?: Function     | When a search happens.                                         |
| onchangepage?: Function | When the user changes the page.                                |

## License

The LemonadeJS data grid is released under the MIT.

## Other Tools

-   [jSuites](https://jsuites.net/docs)
-   [Jspreadsheet](https://jspreadsheet.com)
npm package: @lemonadejs/react-data-grid
Description: The React data grid component using LemonadeJS is a lightweight and flexible tool that allows developers to create dynamic and interactive tables on web pages. The component supports dynamic data loading, sorting, filtering, and pagination, making it easy
Author: Contact
Latest version: 1.0.2

# DataGridLM-React
[Official website and documentation is here](https://lemonadejs.net/components/datagrid)

Welcome to the React version of [Lemon Datagrid](https://github.com/lemonadejs/data-grid). This project makes DataGridLM usable in React.
For more information, please check the DataGridLM page.

## Features

-   Lightweight: DataGridLM is only about 5 Kbytes in size, making it fast and easy to load.
-   Customizable: You can define columns and user-defined actions to suit your specific use case.
-   Reactive: Any changes to the underlying data are automatically applied to the HTML, making it easy to keep your grid up-to-date.
-   Integration: DataGridLM can be used as a standalone library or integrated with LemonadeJS or React.

## Getting Started

### npm Installation

To install your project using npm, run the following command:

```bash
$ npm install @lemonadejs/react-data-grid
```

### Usage

In a React Component, you can directly call the Datagrid within the JSX by passing the **options** as props, along with the element's **ref**.

```javascript
import React, { useState, useRef } from 'react'
import Datagrid from '@lemonadejs/react-data-grid'

function Component() {
    const [data, setData] = useState([
            { name: 'The Last of Us 2', releaseDate: '2022' },
            { name: 'West World', releaseDate: '2017' }
        ])

    const [columns, setColumns] = useState([
            { name: 'name', headerName: 'Title' },
            { name: 'releaseDate', headerName: 'Release Date' }
        ])

    const datagridRef = useRef()

    return (
        <div>
            <Datagrid data={data} columns={columns} ref={datagridRef} />
        </div>
    )
}
```

### Examples

Here are a few examples of DataGridLM in action:

-   [Basic Data Grid Example](https://lemonadejs.net/components/datagrid#example-1)
-   [Example with Large Data Sets](https://lemonadejs.net/components/datagrid#example-2)
-   [Example with Data Addition and Deletion](https://lemonadejs.net/components/datagrid#example-3)

## Contributing

DataGridLM-React is an open source project and contributions are welcome! If you find a bug or have a feature request, please open an issue on GitHub. If you'd like to contribute code, please fork the repository and submit a pull request.

## License

DataGridLM-React is released under the MIT.

## Other Tools

- [jSuites](https://jsuites.net/v4/)
- [Jspreadsheet](https://jspreadsheet.com)
npm package: @lemonadejs/switch
Description: LemonadeJS JavaScript reactive material switch
Author: Contact
Latest version: 5.8.0

# LemonadeJS Switch

[Official website and documentation is here](https://lemonadejs.net/components/switch)

Compatible with Vanilla JavaScript, LemonadeJS, React, Vue or Angular.

The LemonadeJS JavaScript Switch is a responsive and reactive component that enables users to make a binary choice through a visually appealing interface.

## Features

-   Lightweight: The JavaScript Switch is only about 2 KBytes;
-   Integration: It can be used as a standalone library or integrated with any modern framework;

## Getting Started

You can install using NPM or using directly from a CDN.

### npm Installation

To install it in your project using npm, run the following command:

```bash
$ npm install @lemonadejs/switch
```

### CDN

To use tabs via a CDN, include the following script tags in your HTML file:

```html
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/switch/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/switch/dist/style.min.css" />
```

### Usage

Quick example with Lemonade

```javascript
import lemonade from 'lemonadejs';
import Switch from '@lemonadejs/switch';
import '@lemonadejs/switch/dist/style.css';

export default function App() {
    const self = this;

    return `<div>
        <Switch text="On/Off" />
    </div>`;
}
```

```jsx
import React, { useRef } from 'react';
import Switch from '@lemonadejs/switch/dist/react';
import '@lemonadejs/switch/dist/style.css';

export default function App() {
    const switchRef = useRef();
    return (
        <>
            <Switch text="On/Off" ref={switchRef} />
        </>
    );
}
```

Quick example with Lemonade

```vue
<template>
    <Switch text="On/Off" />
</template>

<script>
import Switch from '@lemonadejs/switch/dist/vue';
import '@lemonadejs/switch/dist/style.css';

export default {
    name: 'App',
    components: {
        Switch,
    },
};
</script>
```

[You can find more examples here in the official documentation.](https://lemonadejs.net/components/switch)

#### Settings

| Attribute          | Description                                          |
| ------------------ | ---------------------------------------------------- | -------------------------- |
| text?: string      | The displayed text.                                  |
| value?: any        | The current value of the component.                  |
| name?: string      | The attribute `name` assigned to the switch element. |
| disabled?: boolean | Disables the functionality of the switch.            |
| onopen?            | function                                             | When a new tabs is opened. |

## License

The [LemonadeJS](https://lemonadejs.net) Switch is released under the MIT.

## Other Tools

-   [jSuites](https://jsuites.net/docs)
-   [Jspreadsheet Data Grid](https://jspreadsheet.com)
npm package: @lemonadejs/toggle
Description: LemonadeJS JavaScript reactive toggle button with icon support
Author: Contact
Latest version: 1.0.1

# LemonadeJS Toggle

A reactive toggle button component with icon support.

## Features

- Material icon support
- Hidden checkbox input
- Highlight when checked
- Customizable width
- Design system colors

## Usage

```html
<Toggle icon="mic" text="Microphone" />
```

## Properties

| Property | Type | Description |
|----------|------|-------------|
| text | string | Label text displayed next to the toggle |
| icon | string | Material icon name (e.g., 'mic', 'videocam') |
| value | boolean | Current toggle state |
| width | string | Width of the toggle (e.g., '100px', '50%') |
| name | string | Input name attribute |
| disabled | boolean | Whether the toggle is disabled |
| position | string | Text position ('right' or undefined) |
| color | string | Color variant |

## Events

| Event | Description |
|-------|-------------|
| onchange | Fired when the toggle state changes |

## License

MIT