open-index/open-npm huggingface dataset:
npm package: @svar-ui/lib-data-provider
Description: @svar-ui/lib-data-provider is a library that provides helpers for data loading and saving
Latest version: 1.7.2

# @svar-ui/lib-data-provider

@svar-ui/lib-data-provider is a library that provides helpers for data loading and saving

![NPM package](https://img.shields.io/npm/v/@svar-ui/lib-data-provider)

## Content of the package

- DataProvider calss
- RestURL helper

## Running Tests

```sh
npm run test:run
```
npm package: @svar-ui/lib-dom
Description: @wx/lib-dom is a library that provides base helpers for DOM operations.
Latest version: 0.12.1

# @wx/lib-dom

@wx/lib-dom is a library that provides base helpers for DOM operations.

![NPM package](https://img.shields.io/npm/v/@svar-ui/lib-dom)

## Running Tests

```sh
npx playwright install chromium
npm run test:run
```
npm package: @svar-ui/lib-react
Description: @svar-ui/lib-react is a library that provides helpers for React integration
Latest version: 1.3.0

# @svar-ui/lib-react

@svar-ui/lib-react is a library that provides helpers for React integration

![NPM package](https://img.shields.io/npm/v/@svar-ui/lib-react)

## Running Tests

```sh
npx playwright install chromium
npm run test
```
npm package: @svar-ui/lib-schedule
Description: @wx/lib-schedule provides helpers for tash/graph operations
Latest version: 0.4.6

# @wx/lib-schedule

@wx/lib-schedule provides helpers for tash/graph operations

![NPM package](https://img.shields.io/npm/v/@svar-ui/lib-schedule)

## Scheduling

The library provides the `updateForward` API for propagating schedule changes through task dependencies.

### Main Usage Scenarios

**1. Task Date or Duration Changes**

When a task's start date or duration is modified, use `updateForward` to propagate the changes through the dependency graph:

```typescript
import { updateForwardTask } from "@wx/lib-schedule";

const result = updateForwardTask(graph, taskId, newStartDate, newDuration);
```

The scheduler will automatically update all dependent tasks to maintain link constraints.

**2. Link Changes**

When links in the graph are added, removed, or modified, use `updateForward` with the `force: true` config option to recalculate violations even if the task itself hasn't changed:

```typescript
const result = updateForwardTask(graph, taskId, undefined, undefined, {
	force: true,
});
```

This triggers a scheduling pass that checks and propagates link violations without requiring the initial node to be modified, enabling detection and correction of existing constraint violations.

**3. Whole-Graph Rescheduling**

To reschedule the entire graph and validate all constraints, start from the project start virtual node with the `cascade: true` option:

```typescript
const result = updateForwardTask(graph, 0, undefined, undefined, {
	force: true,
	cascade: true,
});
```

By default, propagation stops when reaching nodes already in valid positions. The `cascade` option continues checking links past such nodes, enabling complete graph validation and constraint propagation.

## Running Tests

```sh
npm run test:run
```

### Working with code

- use npm
  - `npm install`
  - `npm run build`
  - `npm run test`
npm package: @svar-ui/lib-state
Description: @svar-ui/lib-state is a library that provides helpers for state management
Latest version: 1.9.6

# @svar-ui/lib-state

@svar-ui/lib-state is a library that provides helpers for state management

![NPM package](https://img.shields.io/npm/v/wx-lib-state)

## Content of the package

- event bus
- reactive data store

## Running Tests

```sh
npm run test:run
```
npm package: @svar-ui/lib-svelte
Description: @svar-ui/lib-svelte is a library that provides helpers for Svelte integration.
Latest version: 0.5.2

# @svar-ui/lib-svelte

@svar-ui/lib-svelte is a library that provides helpers for Svelte integration.

![NPM package](https://img.shields.io/npm/v/wx-lib-svelte)

## Content of the package

- form helper

## Running Tests

```sh
yarn test
```
npm package: @svar-ui/lib-vue
Description: @wx/lib-vue is a library that provides helpers for Vue integration
Latest version: 1.1.0

# @wx/lib-vue

@wx/lib-vue is a library that provides helpers for Vue integration

![NPM package](https://img.shields.io/npm/v/@svar-ui/lib-vue)

## Running Tests

```sh
npm run test:run
```
npm package: @svar-ui/react-comments
Description: Lightweight React component for adding a modern-looking comments section to your app
Latest version: 2.5.0

<div align="center">

# SVAR React Comments

[![npm](https://img.shields.io/npm/v/@svar-ui/react-comments.svg)](https://www.npmjs.com/package/@svar-ui/react-comments)
[![License](https://img.shields.io/github/license/svar-widgets/react-comments)](https://github.com/svar-widgets/react-comments/blob/main/license.txt)
[![npm downloads](https://img.shields.io/npm/dm/@svar-ui/react-comments.svg)](https://www.npmjs.com/package/@svar-ui/react-comments)

</div>

<div align="center">

[Documentation](https://docs.svar.dev/react/core/comments/) • [Demos](https://docs.svar.dev/react/core/samples-comments/#/base/willow)

</div>

**SVAR React Comments** is a flexible React component for adding comment sections to your applications.

It supports plain text or markdown comments, multiple display styles (like chat or forum threads), and full CRUD operations: users can add, edit, delete, and view comments.

<div align="center">

<img src="https://svar.dev/images/github/github-commenta.png" alt="SVAR Comments - React Comments Section" style="width: 700px;">

</div>

### :sparkles: Key features

- Bubbles or flow layouts;
- Event handling to track changes and synchronize with external systems;
- Specifying the currently active user to highlight their comments or give special permissions (such as editing or deleting);
- Readonly or editable modes;
- Localization and date format customization;
- Light and dark themes;
- React 18 and 19 compatible.

### :hammer_and_wrench: How to Use

To use the widget, simply import the package and include the component in to .jsx file:

```jsx
    import { Comments } from "@svar-ui/react-comments";
    import "@svar-ui/react-comments/style.css";

    function MyComponent(){
        const data = [
            { id: 1, user: 1, content:'Greetings, fellow colleagues', date: new Date() },
            { id: 2, user: 2, content: 'Hi, Diego!', date: new Date() },
        ];
        const users = [
            { id: 1, name: 'Diego Clark'}
            { id: 2, name: 'Alice Smith'},
        ];

        return (<Comments value={data} users={users}/>);
    }
```
npm package: @svar-ui/react-core
Description: SVAR React Core library is a collection of customizable React UI components and form controls
Latest version: 2.5.0

<div align="center">

# SVAR React Core | UI Component Library

</div>

<div align="center">

[Website](https://svar.dev/react/core/) • [Getting Started](https://docs.svar.dev/react/core/getting_started/) • [Demos](https://docs.svar.dev/react/core/samples/#/calendar/willow)

</div>

<div align="center">

[![npm](https://img.shields.io/npm/v/@svar-ui/react-core.svg)](https://www.npmjs.com/package/@svar-ui/react-core)
[![License](https://img.shields.io/github/license/svar-widgets/core)](https://github.com/svar-widgets/core/blob/main/license.txt)
[![npm downloads](https://img.shields.io/npm/dm/@svar-ui/react-core.svg)](https://www.npmjs.com/package/@svar-ui/react-core)

</div>

[SVAR React Core](https://svar.dev/react/core/) is a lightweight React component library that provides 30+ reusable, pre-styled UI components, including form controls, buttons, selects, popups, date & time pickers, toast notifications, and more.

The somponents are customizable, support light and dark themes, and include full TypeScript support. The library is compatible with React 18 and 19.

<div align="center">

<img src="https://svar.dev/images/github/github-core.png" alt="SVAR Core - React UI Library" style="width: 752px;">

</div>

</br>

Along with the **Core** package, you can use the following SVAR React components to build a unified app interface:

- [Menu](https://github.com/svar-widgets/react-menu) - create basic menu bar, actions or context menu;
- [Toolbar](https://github.com/svar-widgets/react-toolbar) - create button and icon panels with configurable, responsive layouts;
- [Tasklist](https://github.com/svar-widgets/react-tasklist) - compact to-do list component to add, edit, check or delete tasks;
- [Comments](https://github.com/svar-widgets/react-comments) - nice-looking comments section with bubbles or flow views;
- [File uploader](https://github.com/svar-widgets/react-uploader) - simple file uploader component.

### :hammer_and_wrench: How to Use

Install the Core library via npm:
```bash
npm install @svar-ui/react-core
```

To start using the components from the **Core** package, simply import the package and include the desired component in your React file:

```jsx
import { Button } from "@svar-ui/react-core";
import "@svar-ui/react-core/all.css"; // required styles

function App() {
  return <Button>Click Me</Button>;
}
```

See the [getting started guide](https://docs.svar.dev/react/core/getting_started/) to quickly set up and begin using SVAR Core components in your React projects.

### :speech_balloon: Need Help?

[Post an Issue](https://github.com/svar-widgets/react-core/issues/) or use our [community forum](https://forum.svar.dev).
npm package: @svar-ui/react-editor
Description: React component for building inline, popup, or sidebar forms to edit structured data
Latest version: 2.5.0

<div align="center">

# SVAR React Editor | Edit Form

[![npm](https://img.shields.io/npm/v/@svar-ui/react-editor.svg)](https://www.npmjs.com/package/@svar-ui/react-editor)
[![License](https://img.shields.io/github/license/svar-widgets/react-editor)](https://github.com/svar-widgets/react-editor/blob/main/license.txt)
[![npm downloads](https://img.shields.io/npm/dm/@svar-ui/react-editor.svg)](https://www.npmjs.com/package/@svar-ui/react-editor)

</div>

<div align="center">

[Documentation](https://docs.svar.dev/react/editor/getting_started/) • [Demos](https://docs.svar.dev/react/editor/samples/)

</div>

[SVAR React Editor](https://svar.dev/react/editor/) is a flexible component for creating custom edit forms for structured data. It helps you compose edit panels using various form controls.

Whether embedded inline, shown as a sidebar, or opened as a modal dialog, the Editor offers an intuitive way to manage data in CMS dashboards, info cards, user profiles, or can be attached to any UI element that needs editing functionality.

<div align="center">
	
<img src="https://svar.dev/images/github/github-editor.png" alt="SVAR React Editor - Custom Edit Form" style="width: 600px;">

</div>

### :sparkles: Key features:

- Can be used as inline form, sidebar panel, or modal dialog;
- Form fields: text input, textarea, checkbox, radio button, date picker, and other [SVAR React Core](https://github.com/svar-widgets/react-core) controls;
- Extendable with custom controls;
- Configurable toolbar (top or bottom);
- Form fields can be displayed in batches (with one visible at a time);
- Tabbed sections;
- Collapsible or accordion-style sections,
- Prefilled values support;
- Editable or read-only modes;
- Handle real-time updates and custom save actions;
- Data validation (required fields, numbers, text);
- Localization support (labels, tooltips, messages);
- Light & dark themes;
- Custom styling via CSS;
- TypeScript support;
- React 18 and 19 compatibility.

### :hammer_and_wrench: How to Use

To start using components from the **Editor** package, simply import the package and include the desired component in your react file:

```jsx
import { Editor } from "@svar-ui/react-editor";
import "@svar-ui/react-editor/all.css";

const items = [
   { comp: 'text', key: 'name', label: 'Name', column: 'left' },
   { comp: 'checkbox', key: 'admin', label: 'Is Admin' },
   { comp: 'text', key: 'email', label: 'Email' },
   {
   comp: 'textarea',
   key: 'descr',
   label: 'Description',
   column: 'left',
   },
];

const myComponent => (<Editor items={items} />);
```

See the [getting started guide](https://docs.svar.dev/react/editor/getting_started/) to quickly set up and begin using SVAR Editor component in your React projects.

### :speech_balloon: Need Help?

[Post an Issue](https://github.com/svar-widgets/react-editor/issues/) or use our [community forum](https://forum.svar.dev).
npm package: @svar-ui/react-filemanager
Description: SVAR React File Manager — file explorer component for React.
Latest version: 2.5.0

<div align="center">
	
# SVAR React File Manager | File Explorer

:globe_with_meridians: [Website](https://svar.dev/react/filemanager/) • :bulb: [Getting Started](https://docs.svar.dev/react/filemanager/getting_started/) • :eyes: [Demos](https://docs.svar.dev/react/filemanager/samples/)

[![npm](https://img.shields.io/npm/v/@svar-ui/react-filemanager.svg)](https://www.npmjs.com/package/@svar-ui/react-filemanager)
[![License](https://img.shields.io/github/license/svar-widgets/react-filemanager)](https://github.com/svar-widgets/react-filemanager/blob/main/license.txt)
[![npm downloads](https://img.shields.io/npm/dm/@svar-ui/react-filemanager.svg)](https://www.npmjs.com/package/@svar-ui/react-filemanager)

</div>

[SVAR React File Manager](https://svar.dev/react/filemanager/) is a flexible file explorer component for React apps. It offers a familiar interface for browsing, organizing, and previewing files. Thanks to its extensive API for listening, intercepting, and executing data operations, you can integrate it with any backend — from local storage and databases to cloud services.

<div align="center">
  <img src="https://cdn.svar.dev/public/file-manager-1400.png" alt="SVAR File Manager for React - UI preview" width="700">
</div>
</br>

### :sparkles: Key features:

-   Basic file operations: create, delete, copy, rename, cut, paste
-   Download and upload files
-   Files tree view
-   List and tiles views
-   File preview pane with file information (file size, type, modified date, etc)
-   Split view to manage files between different locations
-   Built-in search box
-   Context menu and toolbar for quick actions
-   Keyboard navigation
-   Used storage info
-   Light and dark themes, with easy customization
-   Localization support
-   Optimized for large datasets with dynamic directory loading
-   Extensive API to listen, intercept, and execute data operations
-   Full TypeScript support
-   React 18 & 19 compatible

### :hammer_and_wrench: How to Use

To start using SVAR React File Manager, simply import the package and include the component in your React file:

```jsx
import { FileManager } from "@svar-ui/react-filemanager";
import "@svar-ui/react-filemanager/all.css";

const files = [
  {
    id: "/Music",
    size: 4096,
    date: new Date(2023, 11, 1, 14, 45),
    type: "folder",
  },
  {
    id: "/Info.txt",
    size: 1000,
    date: new Date(2023, 10, 30, 6, 13),
    type: "file",
  },
];
const myComponent => (<FileManager data={files} />);
```

See the [getting started guide](https://docs.svar.dev/react/filemanager/getting_started/) to set up and start using the File Manager in your React projects.

### :speech_balloon: Need Help?

[Post an Issue](https://github.com/svar-widgets/react-filemanager/issues/) or use our [community forum](https://forum.svar.dev).
npm package: @svar-ui/react-menu
Description: Lightweight React menu component for adding navigation, action, or context menus
Latest version: 2.5.0

<div align="center">

# SVAR React Menu

[![npm](https://img.shields.io/npm/v/@svar-ui/react-menu.svg)](https://www.npmjs.com/package/@svar-ui/react-menu)
[![License](https://img.shields.io/github/license/svar-widgets/react-menu)](https://github.com/svar-widgets/react-menu/blob/main/license.txt)
[![npm downloads](https://img.shields.io/npm/dm/@svar-ui/react-menu.svg)](https://www.npmjs.com/package/@svar-ui/react-menu)

</div>

<div align="center">

[Documentation](https://docs.svar.dev/react/core/category/menu/) • [Demos](https://docs.svar.dev/react/core/samples-menu/#/action/willow)

</div>

**SVAR React Menu** is a flexible menu component for adding navigation and interaction menus to your React applications. The component is easy-to-customize, compatible with React 18 and 19, and complements [SVAR React Core](https://github.com/svar-widgets/react-core/) library.

<div align="center">

<img src="https://svar.dev/images/github/github-menu.png" alt="React Menu Component" style="width: 600px;">

</div>

SVAR React Menu can be used as:

- Action Menu: Provides a compact list of actions (e.g. edit, delete, share.) that appears when a user clicks on a UI element.
- Basic Menu: A simple, hierarchical menu that displays options for navigation or actions.
- Context Menu: A right-click (or long-press) menu offering context-specific options for a selected element.
- DropDown Menu: A dropdown attached to buttons or other clickable elements, expanding on click.
- Menu Bar: A horizontal top-level menu providing access to grouped commands, with support for dropdowns and sub-menus.

### :hammer_and_wrench: How to Use

To use the widget, simply import the package and include the component in to .jsx file:

```jsx
    import { Menu } from "@svar-ui/react-menu";
    import "@svar-ui/react-menu/all.css";

    function MyComponent(){
        const options = [
            { id: 'add-task', text: 'Add', icon: 'wxi wxi-plus', data: [
                { id: 'add-task:child', text: 'Child task' },
                { id: 'add-task:above', text: 'Task above' },
                { id: 'add-task:below', text: 'Task below' },
            ] },
            { type: 'separator' },
            { id: 'edit-task', text: 'Edit', icon: 'wxi wxi-edit' },
        ];

        return (<Menu options={options} />);
    }
```
npm package: @svar-ui/react-tasklist
Description: Simple React to-do list component to add, edit, delete, and mark tasks as completed.
Latest version: 2.5.0

<div align="center">

# SVAR React Tasklist

[![npm](https://img.shields.io/npm/v/@svar-ui/react-tasklist.svg)](https://www.npmjs.com/package/@svar-ui/react-tasklist)
[![License](https://img.shields.io/github/license/svar-widgets/react-tasklist)](https://github.com/svar-widgets/react-tasklist/blob/main/license.txt)
[![npm downloads](https://img.shields.io/npm/dm/@svar-ui/react-tasklist.svg)](https://www.npmjs.com/package/@svar-ui/react-tasklist)

</div>

<div align="center">

[Documentation](https://docs.svar.dev/react/core/tasklist/) • [Demos](https://docs.svar.dev/react/core/samples-tasklist/#/base/willow)

</div>

**SVAR React Tasklist** is a lightweight React component that helps you add simple, interactive to-do lists to your applications. It's compatible with React 18 and 19, and is a part of the [SVAR React Core](https://github.com/svar-widgets/react-core) widgets family.

With Tasklist, users can easily add, edit, delete, and mark tasks as completed. The component works fully on the client side and integrates smoothly with any backend or external data source (like REST APIs) to load and save tasks. It also provides flexible event handling, letting you track and respond to task additions, updates, or deletions.

<div align="center">

<img src="https://svar.dev/images/github/github-tasklist.png" alt="SVAR React TaskList" style="width: 700px;">

</div>

### :hammer_and_wrench: How to Use

To use the task list, simply import the package and include the component in to .jsx file:

```jsx
    import { Tasklist } from "@svar-ui/react-tasklist";
    import "@svar-ui/react-tasklist/all.css";

    function MyComponent(){
        const data =  [
            { id: 7, content: 'Optimize performance', status: 1 },
            { id: 8, content: 'Work with API requests', status: 0}
        ];

        return (<Tasklist value={data} />);
    }
```
npm package: @svar-ui/react-toolbar
Description: Flexible React toolbar component for creating customizable button panels
Latest version: 2.5.0

<div align="center">

# SVAR React Toolbar

[![npm](https://img.shields.io/npm/v/@svar-ui/react-toolbar.svg)](https://www.npmjs.com/package/@svar-ui/react-toolbar)
[![License](https://img.shields.io/github/license/svar-widgets/react-toolbar)](https://github.com/svar-widgets/react-toolbar/blob/main/license.txt)
[![npm downloads](https://img.shields.io/npm/dm/@svar-ui/react-toolbar.svg)](https://www.npmjs.com/package/@svar-ui/react-toolbar)

</div>

<div align="center">

[Documentation](https://docs.svar.dev/react/core/toolbar/) • [Demos](https://docs.svar.dev/react/core/samples-toolbar/#/base/willow)

</div>

**SVAR React Toolbar** is a customizable React UI component that helps you build panels of buttons and icons, giving users quick access to key actions and tools in your app. It supports different button types, multi-line toolbars, collapsible button groups, and responsive layouts that adapt to different screen sizes. Compatible with React 18 and 19.

<div align="center">

<img src="https://svar.dev/images/github/github-toolbar.png" alt="Svelte Toolbar Component" style="width: 800px;">

</div>

### :hammer_and_wrench: How to Use

To use SVAR React Toolbar, simply import the package and include the component in to .jsx file:

```jsx
    import { Toolbar } from "@svar-ui/react-toolbar";
    import "@svar-ui/react-toolbar/all.css";

    function MyComponent(){
        const items = [
            { id: 'label', text: 'Toolbar with icon buttons' },
            { id: 'search', comp: 'button', icon: 'wxi-search' },
            { comp: 'spacer' },
            { id: 'edit', comp: 'button', icon: 'wxi-edit-outline'}
        ];

        return (<Toolbar items={items} />);
    }
```
npm package: @svar-ui/react-uploader
Description: Lightweight React file upload component with drag-and-drop support
Latest version: 2.5.0

<div align="center">

# SVAR React Uploader

[![npm](https://img.shields.io/npm/v/@svar-ui/react-uploader.svg)](https://www.npmjs.com/package/@svar-ui/react-uploader)
[![License](https://img.shields.io/github/license/svar-widgets/react-uploader)](https://github.com/svar-widgets/react-uploader/blob/main/license.txt)
[![npm downloads](https://img.shields.io/npm/dm/@svar-ui/react-uploader.svg)](https://www.npmjs.com/package/@svar-ui/react-uploader)

</div>

**SVAR React Uploader** is a lightweight, customizable React component for easy and intuitive file uploading, allowing users to drag and drop files or select them from their device. The component can be easily used with [SVAR React Core](https://github.com/svar-widgets/react-core/) library.

### :hammer_and_wrench: How to Use

To use the uploader, simply import the package and include the component in to .jsx file:

```jsx
	import { Uploader, UploaderList, useUploaderState } from "@svar-ui/react-uploader";
	import "@svar-ui/react-uploader/all.css";

    function MyComponent(){
	    const uploadURL = "http://localhost:3000/data";
        const data = useUploaderState();

        return (<Uploader {uploadURL} data={data} />);
    }
```
npm package: @svar-ui/svelte-comments
Description: Simple Svelte component for adding a comments section on a page
Latest version: 2.5.1

<div align="center">

# SVAR Svelte Comments

[![npm](https://img.shields.io/npm/v/@svar-ui/svelte-comments.svg)](https://www.npmjs.com/package/@svar-ui/svelte-comments)
[![License](https://img.shields.io/github/license/svar-widgets/comments)](https://github.com/svar-widgets/comments/blob/main/license.txt)
[![npm downloads](https://img.shields.io/npm/dm/@svar-ui/svelte-comments.svg)](https://www.npmjs.com/package/@svar-ui/svelte-comments)

</div>

<div align="center">

[Documentation](https://docs.svar.dev/svelte/core/comments/) • [Demos](https://docs.svar.dev/svelte/core/samples-comments/#/base/willow)

</div>

**SVAR Svelte Comments** is a UI component for creating a clean and modern comments section. Supports adding, editing, and deleting comments with ease.

<div align="center">
	
<img src="https://svar.dev/images/github/github-commenta.png" alt="SVAR Comments - Svelte Comments Section" style="width: 700px;">

</div>

### How to Use

To use the Comments widget, simply import the package and include the component in your Svelte file:

```svelte
<script>
	import { Comments } from "@svar-ui/svelte-comments";

	const value = [];
</script>

<Comments {value} />
```

### How to Modify

Typically, you don't need to modify the code. However, if you wish to do so, follow these steps:

1. Run `yarn` to install dependencies. Note that this project is a monorepo using `yarn` workspaces, so npm will not work
2. Start the project in development mode with `yarn start`

### Run Tests

To run the test:

1. Start the test examples with:
    ```sh
    yarn start:tests
    ```
2. In a separate console, run the end-to-end tests with:
    ```sh
    yarn test:cypress
    ```
npm package: @svar-ui/svelte-editor
Description: Svelte component for creating forms to edit structured data on a page (info cards, text blocks, table rows, etc
Latest version: 2.5.1

<div align="center">

# SVAR Svelte Editor

[![npm](https://img.shields.io/npm/v/@svar-ui/svelte-editor.svg)](https://www.npmjs.com/package/@svar-ui/svelte-editor)
[![License](https://img.shields.io/github/license/svar-widgets/editor)](https://github.com/svar-widgets/editor/blob/main/license.txt)
[![npm downloads](https://img.shields.io/npm/dm/@svar-ui/svelte-editor.svg)](https://www.npmjs.com/package/@svar-ui/svelte-editor)

</div>

<div align="center">

[Website](https://svar.dev/svelte/editor/) • [Documentation](https://docs.svar.dev/svelte/editor/) • [Demos](https://docs.svar.dev/svelte/editor/samples/#/base/willow)

</div>

**SVAR Svelte Editor** is an intuitive Svelte component for creating content editing forms to manage data within UI elements on a page. You can use it for editing structured data like table rows, informational cards, blocks with text, etc.

<div align="center">
	
<img src="https://svar.dev/images/github/github-editor.png" alt="SVAR Editor - Svelte UI Component" style="width: 600px;">

</div>

### :sparkles: Key features:

-   **Flexible display options**: open the editor in a modal popup or as a seamless sidebar for convenient access.
-   **Multiple input types**: Use various input fields like text inputs, checkboxes, date pickers, sliders, and more controls from [SVAR Svelte Core](https://svar.dev/svelte/core/) library.
-   **Built-in validation**: Includes basic validation for required fields and supports custom validation rules for advanced scenarios.
-   **Flexible save options**: Choose between manual saves, auto-save, or custom saving logic adjusted to your needs.
-   **Comments section**: You can add a nice-looking comments section to give your users the ability to communicate.
-   **Compact layout**: Organize forms into expandable sections or a 2-column layout for efficient use of screen space.
-   **TypeScript support**: fully typed for safe and seamless integration.

### :hammer_and_wrench: How to Use

To use the Editor, simply import the package and include the component in your Svelte file:

```svelte
<script>
	import { Editor } from "@svar-ui/svelte-editor";

	const value = [];
</script>

<Editor {value} />
```

For more details, visit the [getting started guide](https://docs.svar.dev/svelte/editor/getting_started/).

### :gear: How to Modify

Typically, you don't need to modify the code. However, if you wish to do so, follow these steps:

1. Run `yarn` to install dependencies. Note that this project is a monorepo using `yarn` workspaces, so npm will not work
2. Start the project in development mode with `yarn start`

### :white_check_mark: Run Tests

To run the test:

1. Start the test examples with:
    ```sh
    yarn start:tests
    ```
2. In a separate console, run the end-to-end tests with:
    ```sh
    yarn test:cypress
    ```
npm package: @svar-ui/svelte-filemanager
Description: Easy-to-use Svelte component for adding a file manager (file explorer) UI
Latest version: 2.5.0

<div align="center">
	
# SVAR Svelte File Manager | File Explorer

</div>

<div align="center">

[Website](https://svar.dev/svelte/filemanager/) • [Getting Started](https://docs.svar.dev/svelte/filemanager/getting_started/) • [Demos](https://docs.svar.dev/svelte/filemanager/samples/#/base/willow)

</div>

<div align="center">

[![npm](https://img.shields.io/npm/v/@svar-ui/svelte-filemanager.svg)](https://www.npmjs.com/package/@svar-ui/svelte-filemanager)
[![License](https://img.shields.io/github/license/svar-widgets/filemanager)](https://github.com/svar-widgets/filemanager/blob/main/license.txt)
[![npm downloads](https://img.shields.io/npm/dm/@svar-ui/svelte-filemanager.svg)](https://www.npmjs.com/package/@svar-ui/svelte-filemanager)
[![Last Commit](https://img.shields.io/github/last-commit/svar-widgets/filemanager)](https://github.com/svar-widgets/filemanager)

</div>

[SVAR Svelte File Manager](https://svar.dev/svelte/filemanager/$0) is a flexible file explorer component for Svelte apps. It offers a familiar interface for browsing, organizing, and previewing files. You can integrate it with any backend, whether you're using local storage, databases, or cloud services.

<div align="center">
  <img src="https://cdn.svar.dev/public/file-manager-1400.png" alt="SVAR File Manager for Svelte - UI" width="700">
</div>

### :sparkles: Key features:

-   Basic file operations: create, delete, copy, rename, cut, paste
-   Download and upload files
-   Files tree view
-   List and tiles views
-   File preview pane with file information (file size, type, modified date, etc)
-   Split view to manage files between different locations
-   Built-in search box
-   Context menu and toolbar
-   Keyboard navigation
-   Used storage info
-   Easy customization
-   Full TypeScript support

### :hammer_and_pick: How to Use

To use SVAR Svelte File Manager, simply import the package and include the component in your Svelte file:

```svelte
<script>
	import { FileManager } from "@svar-ui/svelte-filemanager";

	const data = [
		{
			id: "/Code",
			date: new Date(2023, 11, 2, 17, 25),
			type: "folder",
		},
	];
	const driver = {
		used: 15200000000,
		total: 50000000000,
	};
</script>

<Filemanager {data} drive={getDrive()} />
```

For further instructions, see our [getting-started guide](https://docs.svar.dev/svelte/filemanager/getting_started/).

### :computer: How to Modify

Typically, you don't need to modify the code. However, if you wish to do so, follow these steps:

1. Run `yarn` to install dependencies. Note that this project is a monorepo using `yarn` workspaces, so npm will not work
2. Start the project in development mode with `yarn start`

### :white_check_mark: Run Tests

To run the test:

1. Start the test examples with:
    ```sh
    yarn start:tests
    ```
2. In a separate console, run the end-to-end tests with:
    ```sh
    yarn test:cypress
    ```

### :speech_balloon: Need Help?

Join our [community forum](https://forum.svar.dev) to get help and submit feature requests.
npm package: @svar-ui/svelte-menu
Description: Svelte menu component for creating dropdown menus, context menus, or complex menu bars
Latest version: 2.5.1

<div align="center">
	
# SVAR Svelte Menu

[![npm](https://img.shields.io/npm/v/@svar-ui/svelte-menu.svg)](https://www.npmjs.com/package/@svar-ui/svelte-menu)
[![License](https://img.shields.io/github/license/svar-widgets/menu)](https://github.com/svar-widgets/menu/blob/main/license.txt)
[![npm downloads](https://img.shields.io/npm/dm/@svar-ui/svelte-menu.svg)](https://www.npmjs.com/package/@svar-ui/svelte-menu)

</div>

<div align="center">

[Documentation](https://docs.svar.dev/svelte/core/category/menu) • [Demos](https://docs.svar.dev/svelte/core/samples-menu/#/bar/willow)

</div>

SVAR Menu is a ready to use Svelte component for creating context and popup menus. Easily customize each menu item with text, icons, and sub-items, and control the menu's position relative to its parent element.

### How to Use

To use SVAR Svelte Menu, simply import the package and include the component in your Svelte file:

```svelte
<script>
	import { Menu } from "@svar-ui/svelte-menu";

	function onClick(ev) {
		message = ev.option ? `clicked on ${ev.option.id}` : "closed";
	}

	const options = [
		{ id: "edit-cut", text: "Cut", icon: "wxi wxi-content-cut" },
		{ id: "edit-copy", text: "Copy", icon: "wxi wxi-content-copy" },
		{
			id: "edit-paste",
			text: "Paste",
			icon: "wxi wxi-content-paste",
		},
	];
</script>

<Menu {options} onclick={onClick} />
```

For more details, visit the [documentation](https://docs.svar.dev/svelte/core/category/menu).

### How to Modify

Typically, you don't need to modify the code. However, if you wish to do so, follow these steps:

1. Run `yarn` to install dependencies. Note that this project is a monorepo using `yarn` workspaces, so npm will not work
2. Start the project in development mode with `yarn start`

### Run Tests

To run the test:

1. Start the test examples with:
    ```sh
    yarn start:tests
    ```
2. In a separate console, run the end-to-end tests with:
    ```sh
    yarn test:cypress
    ```

### Need Help?

Join our [community forum](https://forum.svar.dev/) to get help or post feature requests.
npm package: @svar-ui/svelte-tasklist
Description: Simple Svelte component for adding a task list section on a page
Latest version: 2.5.1

<div align="center">

# SVAR Svelte TaskList

[![npm](https://img.shields.io/npm/v/@svar-ui/svelte-tasklist.svg)](https://www.npmjs.com/package/@svar-ui/svelte-tasklist)
[![License](https://img.shields.io/github/license/svar-widgets/tasklist)](https://github.com/svar-widgets/tasklist/blob/main/license.txt)
[![npm downloads](https://img.shields.io/npm/dm/@svar-ui/svelte-tasklist.svg)](https://www.npmjs.com/package/@svar-ui/svelte-tasklist)

</div>

<div align="center">

[Documentation](https://docs.svar.dev/svelte/core/tasklist/) • [Demos](https://docs.svar.dev/svelte/core/samples-tasklist/#/base/willow)

</div>

**SVAR Svelte Tasklist** is a lightweight and intuitive Svelte UI component for managing task lists or to-do lists. It allows users to add new tasks, edit existing ones, mark tasks as completed, and remove them.

<div align="center">
	
<img src="https://svar.dev/images/github/github-tasklist.png" alt="SVAR Svelte TaskList" style="width: 700px;">

</div>

### How to Use

To use the widget, simply import the package and include the component in your Svelte file:

```svelte
<script>
	import { Tasklist } from "@svar-ui/svelte-tasklist";

	const value = [];
</script>

<Tasklist {value} />
```

### How to Modify

Typically, you don't need to modify the code. However, if you wish to do so, follow these steps:

1. Run `yarn` to install dependencies. Note that this project is a monorepo using `yarn` workspaces, so npm will not work
2. Start the project in development mode with `yarn start`

### Run Tests

To run the test:

1. Start the test examples with:
    ```sh
    yarn start:tests
    ```
2. In a separate console, run the end-to-end tests with:
    ```sh
    yarn test:cypress
    ```
npm package: @svar-ui/svelte-toolbar
Description: Svelte toolbar component. Lightweight, customizable, easy-to-use.
Latest version: 2.5.1

<div align="center">
	
# SVAR Svelte Toolbar

[![npm](https://img.shields.io/npm/v/@svar-ui/svelte-toolbar.svg)](https://www.npmjs.com/package/@svar-ui/svelte-toolbar)
[![License](https://img.shields.io/github/license/svar-widgets/toolbar)](https://github.com/svar-widgets/toolbar/blob/main/license.txt)
[![npm downloads](https://img.shields.io/npm/dm/@svar-ui/svelte-toolbar.svg)](https://www.npmjs.com/package/@svar-ui/svelte-toolbar)

</div>

<div align="center">

[Documentation](https://docs.svar.dev/svelte/core/toolbar/) • [Demos](https://docs.svar.dev/svelte/core/samples-toolbar/#/base/willow)

</div>

SVAR Toolbar is a Svelte UI component for building flexible button panels, from simple button sets to complex structures with numerous buttons and select boxes. It provides an easy way to organize and display multiple toolbar items, with support for multiline layouts and collapsible item groups that can be shown on demand.

### How to Use

To use the widget, simply import the package and include the component in your Svelte file:

```svelte
<script>
	import { Toolbar } from "@svar-ui/svelte-toolbar";

	function onClick(item) {
		message = "Button '" + item.id + "' clicked";
	}

	let items = [
		{ id: "label", text: "Toolbar with icon buttons" },
		{
			id: "search",
			comp: "button",
			icon: "wxi-search",
			handler: onClick,
		},
	];
</script>

<Toolbar {items} />
```

### How to Modify

Typically, you don't need to modify the code. However, if you wish to do so, follow these steps:

1. Run `yarn` to install dependencies. Note that this project is a monorepo using `yarn` workspaces, so npm will not work
2. Start the project in development mode with `yarn start`

### Run Tests

To run the test:

1. Start the test examples with:
    ```sh
    yarn start:tests
    ```
2. In a separate console, run the end-to-end tests with:
    ```sh
    yarn test:cypress
    ```

### Need help?

Join our [community forum](https://forum.svar.dev/) to get help or post feature requests.
npm package: @svar-ui/svelte-uploader
Description: A Svelte UI component for easy and intuitive file upload
Latest version: 2.5.1

<div align="center">
	
# SVAR Svelte File Uploader

[![npm](https://img.shields.io/npm/v/@svar-ui/svelte-uploader.svg)](https://www.npmjs.com/package/@svar-ui/svelte-uploader)
[![License](https://img.shields.io/github/license/svar-widgets/uploader)](https://github.com/svar-widgets/uploader/blob/main/license.txt)
[![npm downloads](https://img.shields.io/npm/dm/@svar-ui/svelte-uploader.svg)](https://www.npmjs.com/package/@svar-ui/svelte-uploader)

</div>

A Svelte UI component for easy and intuitive file uploading, allowing users to drag and drop files or select them from their device.
See the demos [here](https://docs.svar.dev/svelte/core/samples-uploader).

### How to Use

To use the widget, simply import the package and include the component in your Svelte file:

```svelte
<script>
	import { Uploader, UploaderList } from "@svar-ui/svelte-uploader";

	let data = [];
	const uploadURL = "http://localhost:3000/data";

	function handleUpload(ev) {
		console.log(ev.detail);
	}
</script>

<UploaderList bind:data />
<Uploader {uploadURL} bind:data on:upload={handleUpload} />
```

### How to Modify

Typically, you don't need to modify the code. However, if you wish to do so, follow these steps:

1. Run `yarn` to install dependencies. Note that this project is a monorepo using `yarn` workspaces, so npm will not work
2. Start the project in development mode with `yarn start`

### Run Tests

To run the test:

1. Start the test examples with:
    ```sh
    yarn start:tests
    ```
2. In a separate console, run the end-to-end tests with:
    ```sh
    yarn test:cypress
    ```
npm package: @svar-ui/vite-tools
Description: @svar-ui/vite-tools is a library that provides tools for package builds
Author: Maksim Kozhukh
Latest version: 1.0.5

# @svar-ui/vite-tools

@svar-ui/vite-tools is a library that provides tools for package builds

![NPM package](https://img.shields.io/npm/v/wx-vite-tools)
npm package: @svar-ui/vue-comments
Description: SVAR Vue Comments library - nice-looking comments section with bubbles or flow views
Latest version: 2.5.0

<div align="center">

# SVAR Vue Comments

[![npm](https://img.shields.io/npm/v/@svar-ui/vue-comments.svg)](https://www.npmjs.com/package/@svar-ui/vue-comments)
[![License](https://img.shields.io/github/license/svar-widgets/comments)](https://github.com/svar-widgets/comments/blob/main/license.txt)
[![npm downloads](https://img.shields.io/npm/dm/@svar-ui/vue-comments.svg)](https://www.npmjs.com/package/@svar-ui/vue-comments)

</div>

<div align="center">

[Documentation](https://docs.svar.dev/vue/core/comments/) • [Demos](https://docs.svar.dev/vue/core/samples-comments/#/base/willow)

</div>

A Vue UI component for creating a comments section. Supports adding, editing, and deleting comments with ease. Fully compatible with Vue 3.

<div align="center">
	
<img src="https://svar.dev/images/github/github-commenta.png" alt="SVAR Comments - Vue Comments Section" style="width: 700px;">

</div>

**Key features**:

- Bubbles or flow layouts
- Event handling to track changes and synchronize with external systems
- Specifying the currently active user to highlight their comments or give special permissions (such as editing or deleting)
- Readonly or editable modes
- Localization and date format customization
- Light and dark themes

### :hammer_and_wrench: How to Use

To start using the **Comments** component, simply import the package and include the desired component in your Vue file:

```vue
<script setup>
import { ref } from "vue";
import { Comments } from "@svar-ui/vue-comments";
import "@svar-ui/vue-comments/all.css";

const value = ref([/* comments data here */]);
</script>

<template>
  <Comments value="data" />
</template>
```

For further instructions, see the [detailed guide](https://docs.svar.dev/vue/core/comments/).

### :speech_balloon: Need Help?

[Post an Issue](https://github.com/svar-widgets/vue-comments/issues/) or use our [community forum](https://forum.svar.dev).
npm package: @svar-ui/vue-core
Description: SVAR Vue Core library is a collection of customizable Vue UI components and form controls
Latest version: 2.5.0

<div align="center">

# SVAR Vue Core | Vue UI Component Library

</div>

<div align="center">

[Website](https://svar.dev/vue/core/) • [Getting Started](https://docs.svar.dev/vue/core/getting_started/) • [Demos](https://docs.svar.dev/vue/core/samples/#/calendar/willow)

</div>

<div align="center">

[![npm](https://img.shields.io/npm/v/@svar-ui/vue-core.svg)](https://www.npmjs.com/package/@svar-ui/vue-core)
[![License](https://img.shields.io/github/license/svar-widgets/vue-core)](https://github.com/svar-widgets/vue-core/blob/main/license.txt)
[![npm downloads](https://img.shields.io/npm/dm/@svar-ui/vue-core.svg)](https://www.npmjs.com/package/@svar-ui/vue-core)

</div>

[SVAR Vue Core](https://svar.dev/vue/core/) is a lightweight, fast, and mobile-friendly Vue library that offers 30+ reusable, pre-styled UI components. It includes form controls, popups, date & time pickers, toast notifications, and more. All components are customizable, support light and dark themes, and come with full TypeScript support.

The library is fully compatible with Vue 3.

<div align="center">

<img src="https://svar.dev/images/github/github-core.png" alt="SVAR Core - Vue UI Library" style="width: 752px;">

</div>

</br>

Along with the **Core** library, you can use the following SVAR Vue components to build a unified app interface:

- [Menu](https://github.com/svar-widgets/vue-menu) - create basic menu bar, actions or context menu;
- [Toolbar](https://github.com/svar-widgets/vue-toolbar) - create button and icon panels with configurable, responsive layouts;
- [Tasklist](https://github.com/svar-widgets/vue-tasklist) - basic to-do list component to add, edit, check or delete tasks;
- [Comments](https://github.com/svar-widgets/vue-comments) - nice-looking comments section with bubbles or flow views;
- [File uploader](https://github.com/svar-widgets/vue-uploader) - simple file uploader component.

### :hammer_and_wrench: How to Use

To start using the components from the **SVAR Vue Core** library, simply import the package and include the desired component in your Vue file:

```vue
<script setup>
import { Button } from "@svar-ui/vue-core";
import "@svar-ui/vue-core/all.css";
</script>

<template>
  <Button>Click me</Button>
</template>
```

See the [getting started guide](https://docs.svar.dev/vue/core/getting_started/) to quickly set up and begin using SVAR Core components in your Vue projects.

### :speech_balloon: Need Help?

[Post an Issue](https://github.com/svar-widgets/vue-core/issues/) or use our [community forum](https://forum.svar.dev).
npm package: @svar-ui/vue-editor
Description: SVAR Vue Editor library
Latest version: 2.5.0

<div align="center">

# SVAR Vue Editor

[![npm](https://img.shields.io/npm/v/@svar-ui/vue-editor.svg)](https://www.npmjs.com/package/@svar-ui/vue-editor)
[![License](https://img.shields.io/github/license/svar-widgets/vue-editor)](https://github.com/svar-widgets/vue-editor/blob/main/license.txt)
[![npm downloads](https://img.shields.io/npm/dm/@svar-ui/vue-editor.svg)](https://www.npmjs.com/package/@svar-ui/vue-editor)

</div>

<div align="center">

[Homepage](https://svar.dev/vue/editor/) • [Documentation](https://docs.svar.dev/vue/editor/overview) • [Demos](https://docs.svar.dev/vue/editor/samples/#/base/willow)

</div>

[SVAR Vue Editor](https://svar.dev/vue/editor/) is a Vue 3 component that gives you a configurable, Vue-native edit form you can attach to any structured data and display as a popup, sidebar, or inline form. Use it as a foundation for your forms and adapt the layout to fit your Vue application.

<div align="center">

<img src="https://svar.dev/images/github/github-editor.png" alt="SVAR Editor - Vue UI Component" style="width: 600px;">

</div>

### :sparkles: Key features:

-   **Flexible display options**: add the editor as a modal popup, inline form or as a seamless sidebar for convenient access.
-   **Multiple input types**: Use various input fields like text inputs, checkboxes, date pickers, sliders, and more controls from [SVAR Vue Core](https://github.com/svar-widgets/vue-core) library.
-   **Built-in validation**: Includes basic validation for required fields and supports custom validation rules for advanced scenarios.
-   **Flexible save options**: Choose between manual saves, auto-save, or custom saving logic adjusted to your needs.
-   **Compact layout**: Organize forms into expandable sections or a 2-column layout for efficient use of screen space.
-	**TypeScript support**: fully typed for safe and seamless integration.

### :hammer_and_wrench: How to Use

To use the Editor component, simply import the package and include the component in your Vue file:

```vue
<script setup>
import { Editor } from "@svar-ui/vue-editor";
import "@svar-ui/vue-editor/all.css";

const value = { name:"Alex", age: 32 };
</script>

<template>
	<Editor :value="value" />
</template>
```

For more details, visit the [getting started guide](https://docs.svar.dev/vue/editor/getting_started/).