open-index/open-npm huggingface dataset:
npm package: @svar-ui/vue-menu
Description: SVAR Vue Menu library - create basic menu bar, actions or context menu
Latest version: 2.5.0

<div align="center">

# SVAR Vue Menu Component

</div>

<div align="center">

[Website](https://svar.dev/vue/core/) • [Getting Started](https://docs.svar.dev/vue/core/category/menu) • [Demos](https://docs.svar.dev/vue/core/samples-menu/#/base/willow)

</div>

<div align="center">

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

</div>

**SVAR Vue Menu** is a flexible menu component for adding navigation and interaction menus to your Vue 3 applications. The component is easy-to-customize, TypeScript-ready, and complements [SVAR Vue Core](https://svar.dev/vue/core/) library. Both light and dark themes available.

<div align="center">

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

</div>

</br>

SVAR Vue 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.

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

- [Core](https://github.com/svar-widgets/vue-core) - a collection of customizable Vue UI components and form controls;
- [Toolbar](https://github.com/svar-widgets/vue-toolbar) - toolbar component 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 **Menu** package, simply import the package and include the desired component in your Vue file:

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

<template>
  <Menu />
</template>
```

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

### :speech_balloon: Need Help?

[Post an Issue](https://github.com/svar-widgets/vue-menu/issues/) or use our [community forum](https://forum.svar.dev).
npm package: @svar-ui/vue-tasklist
Description: SVAR Vue Tasklist library - create button and icon panels with configurable, responsive layouts
Latest version: 2.5.0

<div align="center">

# SVAR Vue Tasklist

</div>

<div align="center">

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

</div>

<div align="center">

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

</div>

**SVAR Vue Tasklist** is a Vue UI component that let users easily add, edit, delete, and mark tasks as completed. It comes with full TyprScript support and provides flexible event handling, letting you track and respond to task additions, updates, or deletions.

The **Tasklist** component is fully compatible with Vue 3.

<div align="center">

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

</div>

</br>

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

- [Core](https://github.com/svar-widgets/vue-core) - a collection of customizable Vue UI components and form controls;
- [Menu](https://github.com/svar-widgets/vue-menu) - create basic menu bar, actions or context menu;
- [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 **Tasklist** component, simply import the package and include the desired component in your Vue file:

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

<template>
  <Tasklist />
</template>
```

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

### :speech_balloon: Need Help?

[Post an Issue](https://github.com/svar-widgets/vue-tasklist/issues/) or use our [community forum](https://forum.svar.dev).
npm package: @svar-ui/vue-toolbar
Description: SVAR Vue Toolbar library - create button and icon panels with configurable, responsive layouts
Latest version: 2.5.0

<div align="center">

# SVAR Vue Toolbar

</div>

<div align="center">

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

</div>

<div align="center">

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

</div>

**SVAR Vue Toolbar** is a Vue component for creating button and icon panels with configurable, responsive layouts. It supports different button types, multi-line toolbars, collapsible button groups, and responsive layouts that adapt to different screen sizes. 

The component is fully customizable, TypeScript-ready, and compatible with Vue 3. 

<div align="center">

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

</div>

</br>

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

- [Core](https://github.com/svar-widgets/vue-core) - collection of customizable Vue UI components and form controls;
- [Menu](https://github.com/svar-widgets/vue-menu) - menu component for building basic menu bars, actions or context menus;
- [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 **SVAR Vue Toolbar**, simply import the package and include the desired component in your Vue file:

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

<template>
  <Toolbar />
</template>
```

See the [detailed guide](https://docs.svar.dev/vue/core/toolbar/) to quickly set up and begin using SVAR Vue Toolbar component in your Vue projects.

### :speech_balloon: Need Help?

[Post an Issue](https://github.com/svar-widgets/vue-toolbar/issues/) or use our [community forum](https://forum.svar.dev).
npm package: @svar-ui/vue-uploader
Description: SVAR Vue Uploader library - file upload component with drag and drop support
Latest version: 2.5.0

<div align="center">

# SVAR Vue File Uploader

[![npm](https://img.shields.io/npm/v/@svar-ui/vue-uploader.svg)](https://www.npmjs.com/package/@svar-ui/vue-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/vue-uploader.svg)](https://www.npmjs.com/package/@svar-ui/vue-uploader)

</div>

A Vue 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/vue/core/samples-uploader).

### How to Use

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

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

const data = ref([]);
const uploadURL = "http://localhost:3000/data";

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

<template>
	<UploaderList v-model:data="data" />
	<Uploader :uploadURL="uploadURL" v-model:data="data" @upload="handleUpload" />
</template>
```

### 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: @svarta/adapter-standalone
Description: [![TS ready](https://img.shields.io/static/v1?label=&message=TS+ready&color=000000&logo=typescript)]() [![ESM ready](https://img.shields.io/static/v1?label=&message=ESM+ready&color=%23000000&logo=javascript)]() [![CI](https://github.com/svartajs/svarta/ac
Latest version: 0.0.12

# svarta

[![TS ready](https://img.shields.io/static/v1?label=&message=TS+ready&color=000000&logo=typescript)]()
[![ESM ready](https://img.shields.io/static/v1?label=&message=ESM+ready&color=%23000000&logo=javascript)]()
[![CI](https://github.com/svartajs/svarta/actions/workflows/ci.yml/badge.svg)](https://github.com/svartajs/svarta/actions/workflows/ci.yml)
![GitHub](https://img.shields.io/github/license/svartajs/svarta)

A TypeScript-native, ESM-native REST API framework.

By abstracting the underlying platform, it allows deployment to different platforms without changing your code. Routes are organized using file-based routing, commonly used in fullstack frameworks like Next.js or SvelteKit.

It aims to provide a more robust developer experience than established packages like [Express](https://expressjs.com/) or [Koa](https://koajs.com/).
Svarta can scaffold your application from the ground up, removing the overhead of installing and setting up development dependencies, toolchains and build scripts. _Say goodbye to setting up 15 packages to get your Express project started!_

## Bootstrap new project

```bash
npm create svarta-app
yarn create svarta-app
pnpm create svarta-app
```

For development, run:

```bash
npm run dev
yarn dev
pnpm dev
```

For building, run:

```bash
npm run build
yarn build
pnpm build
```

If you use the standalone adapter, your app will be bundled to a single .mjs file which you can run using:

```bash
node server.mjs
```
npm package: @svarta/cli
Description: [![TS ready](https://img.shields.io/static/v1?label=&message=TS+ready&color=000000&logo=typescript)]() [![ESM ready](https://img.shields.io/static/v1?label=&message=ESM+ready&color=%23000000&logo=javascript)]() [![CI](https://github.com/svartajs/svarta/ac
Latest version: 0.0.12

# svarta

[![TS ready](https://img.shields.io/static/v1?label=&message=TS+ready&color=000000&logo=typescript)]()
[![ESM ready](https://img.shields.io/static/v1?label=&message=ESM+ready&color=%23000000&logo=javascript)]()
[![CI](https://github.com/svartajs/svarta/actions/workflows/ci.yml/badge.svg)](https://github.com/svartajs/svarta/actions/workflows/ci.yml)
![GitHub](https://img.shields.io/github/license/svartajs/svarta)

A TypeScript-native, ESM-native REST API framework.

By abstracting the underlying platform, it allows deployment to different platforms without changing your code. Routes are organized using file-based routing, commonly used in fullstack frameworks like Next.js or SvelteKit.

It aims to provide a more robust developer experience than established packages like [Express](https://expressjs.com/) or [Koa](https://koajs.com/).
Svarta can scaffold your application from the ground up, removing the overhead of installing and setting up development dependencies, toolchains and build scripts. _Say goodbye to setting up 15 packages to get your Express project started!_

## Bootstrap new project

```bash
npm create svarta-app
yarn create svarta-app
pnpm create svarta-app
```

For development, run:

```bash
npm run dev
yarn dev
pnpm dev
```

For building, run:

```bash
npm run build
yarn build
pnpm build
```

If you use the standalone adapter, your app will be bundled to a single .mjs file which you can run using:

```bash
node server.mjs
```
npm package: @svarta/core
Description: [![TS ready](https://img.shields.io/static/v1?label=&message=TS+ready&color=000000&logo=typescript)]() [![ESM ready](https://img.shields.io/static/v1?label=&message=ESM+ready&color=%23000000&logo=javascript)]() [![CI](https://github.com/svartajs/svarta/ac
Latest version: 0.0.12

# svarta

[![TS ready](https://img.shields.io/static/v1?label=&message=TS+ready&color=000000&logo=typescript)]()
[![ESM ready](https://img.shields.io/static/v1?label=&message=ESM+ready&color=%23000000&logo=javascript)]()
[![CI](https://github.com/svartajs/svarta/actions/workflows/ci.yml/badge.svg)](https://github.com/svartajs/svarta/actions/workflows/ci.yml)
![GitHub](https://img.shields.io/github/license/svartajs/svarta)

A TypeScript-native, ESM-native REST API framework.

By abstracting the underlying platform, it allows deployment to different platforms without changing your code. Routes are organized using file-based routing, commonly used in fullstack frameworks like Next.js or SvelteKit.

It aims to provide a more robust developer experience than established packages like [Express](https://expressjs.com/) or [Koa](https://koajs.com/).
Svarta can scaffold your application from the ground up, removing the overhead of installing and setting up development dependencies, toolchains and build scripts. _Say goodbye to setting up 15 packages to get your Express project started!_

## Bootstrap new project

```bash
npm create svarta-app
yarn create svarta-app
pnpm create svarta-app
```

For development, run:

```bash
npm run dev
yarn dev
pnpm dev
```

For building, run:

```bash
npm run build
yarn build
pnpm build
```

If you use the standalone adapter, your app will be bundled to a single .mjs file which you can run using:

```bash
node server.mjs
```
npm package: @svarta/dev-server
Description: [![TS ready](https://img.shields.io/static/v1?label=&message=TS+ready&color=000000&logo=typescript)]() [![ESM ready](https://img.shields.io/static/v1?label=&message=ESM+ready&color=%23000000&logo=javascript)]() [![CI](https://github.com/svartajs/svarta/ac
Latest version: 0.0.12

# svarta

[![TS ready](https://img.shields.io/static/v1?label=&message=TS+ready&color=000000&logo=typescript)]()
[![ESM ready](https://img.shields.io/static/v1?label=&message=ESM+ready&color=%23000000&logo=javascript)]()
[![CI](https://github.com/svartajs/svarta/actions/workflows/ci.yml/badge.svg)](https://github.com/svartajs/svarta/actions/workflows/ci.yml)
![GitHub](https://img.shields.io/github/license/svartajs/svarta)

A TypeScript-native, ESM-native REST API framework.

By abstracting the underlying platform, it allows deployment to different platforms without changing your code. Routes are organized using file-based routing, commonly used in fullstack frameworks like Next.js or SvelteKit.

It aims to provide a more robust developer experience than established packages like [Express](https://expressjs.com/) or [Koa](https://koajs.com/).
Svarta can scaffold your application from the ground up, removing the overhead of installing and setting up development dependencies, toolchains and build scripts. _Say goodbye to setting up 15 packages to get your Express project started!_

## Bootstrap new project

```bash
npm create svarta-app
yarn create svarta-app
pnpm create svarta-app
```

For development, run:

```bash
npm run dev
yarn dev
pnpm dev
```

For building, run:

```bash
npm run build
yarn build
pnpm build
```

If you use the standalone adapter, your app will be bundled to a single .mjs file which you can run using:

```bash
node server.mjs
```
npm package: @svartalfheimr/log-viewer
Description: A simple Material UI log viewer.
Author: Ian Luites
Latest version: 0.0.3

# log-viewer
[![NPM](https://img.shields.io/npm/v/@svartalfheimr/log-viewer.svg)](https://www.npmjs.com/package/@svartalfheimr/log-viewer)

A simple Material UI log viewer.

## Usage

```javascript
import LogViewer from '@svartalfheimr/log-viewer';

const logs = [
  {timestamp: Date.parse('04 Dec 1995 00:12:00 GMT'), labels: {pod: 'pod-232-232323', server: 'Frank'}, log: 'This is a log entry'},
  ...
];

<LogViewer logs={logs} height="100%" />
```

## Installation

Yarn:
```shell
yarn add @svartalfheimr/log-viewer
```

NPM:
```shell
npm install @svartalfheimr/log-viewer
```
npm package: @svatom/basic
Description: Helper functions for optics based CALMMjs architecture in svelte5
Author: Laszlo Korte
Latest version: 1.3.0

# Svatom Library

---

[![NPM Version](https://img.shields.io/npm/v/%40svatom%2Fbasic)](https://www.npmjs.com/package/@svatom/basic)

Collection of helper functions to apply the [CalmmJs](https://github.com/calmm-js/documentation/blob/master/introduction-to-calmm.md) architecture in [Svelte (version 5)](https://svelte.dev/)

The core idea is to compose [lenses](https://github.com/calmm-js/partial.lenses) to construct a bidirectional data flow between UI components.

## Dependencies

**Important**: This library contains `.svelte.js` files that need to be compiled in the context of a host project using the svelte compiler.

Svelte is required as peer dependency.

Currently these peer dependencies are required:
```js
{
	"devDependencies": {
		"partial.lenses": "^14.17.0",
		"ramda": "^0.30.1",
		"svelte": "^5.0.0"	
	}
}
```