open-index/open-npm huggingface dataset:
npm package: @forkon-gmbh/vue-datepicker
Description: Datepicker component for Vue 3
Author: Vuepic
Latest version: 7.2.1

## @vuepic/vue-datepicker


### The most complete datepicker solution for Vue 3

[![License](https://img.shields.io/npm/l/@vuepic/vue-datepicker)](https://github.com/Vuepic/vue-datepicker/blob/main/LICENSE) [![npm](https://img.shields.io/npm/v/@vuepic/vue-datepicker)](https://www.npmjs.com/package/@vuepic/vue-datepicker) ![Downloads](https://img.shields.io/npm/dm/@vuepic/vue-datepicker) [![Open issues](https://img.shields.io/github/issues-raw/Vuepic/vue-datepicker)](https://github.com/Vuepic/vue-datepicker/issues) ![CI](https://img.shields.io/github/actions/workflow/status/Vuepic/vue-datepicker/node.js.yml?branch=main&label=CI) ![Release date](https://img.shields.io/github/release-date/Vuepic/vue-datepicker)
[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=Vuepic_vue-datepicker&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=Vuepic_vue-datepicker)




[DOCUMENTATION](https://vue3datepicker.com/)


[StackBlitz Playground](https://stackblitz.com/edit/vuepic-vue-datepicker?file=src%2Fcomponents%2FPlayground.vue)

## Features

- Single date picker
- Range date picker
- Time picker
- Month picker
- Year picker
- Quarter picker
- Week picker
- Multiple dates select
- Multiple calendars
- Text input
- UTC support
- Timezones
- Locale support
- Week numbers
- Custom `v-model`
- Dark and light theme
- SSR support
- Highly configurable
- Accessible
- Included type definitions

## Install

```shell
yarn add @vuepic/vue-datepicker

# or

npm install @vuepic/vue-datepicker
```

Import and register component

**Global**

```js
import { createApp } from 'vue';
import App from './App.vue';

import VueDatePicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css';

const app = createApp(App);
app.component('VueDatePicker', VueDatePicker);
```

**Local**

```vue
<script>
    import VueDatePicker from '@vuepic/vue-datepicker';
    import '@vuepic/vue-datepicker/dist/main.css';
    
    export default {
        components: { VueDatePicker }
    }
</script>
```

## Supporting the project

As you may know, maintaining an open-source project is a very time-consuming job. Your support is very appreciated ❤️

Please ⭐️ this repository if you like the component!

You can also make a financial contribution via sponsoring this project or one time donation. [Become a sponsor](https://github.com/sponsors/Vuepic)

Special thanks to our sponsors 🙏

<a href="https://hapio.io/" target="_blank">
    <img src="https://avatars.githubusercontent.com/u/99868704?s=200&v=4" width="80" alt="Hapio">
</a>

## Versioning

This project follows [SemVer](https://semver.org) specification

## License

Copyright © 2021-present [Vuepic](https://github.com/Vuepic)

[MIT](https://github.com/Vuepic/vue-datepicker/blob/master/LICENSE)
npm package: @forkprince/electron-forge-maker-appimage
Description: An electron-forge builder for AppImage.
Author: Prince527
Latest version: 1.0.2

# Electron Forge: AppImage

This is an [electron-forge](https://www.electronforge.io/) builder for [AppImage](https://appimage.org/).

This project is based on several existing projects:
- [electron-forge-maker-appimage](https://www.npmjs.com/package/electron-forge-maker-appimage)
- [saleae/electron-forge-maker-appimage](https://github.com/saleae/electron-forge-maker-appimage)
- [@pengx17/electron-forge-maker-appimage](https://www.npmjs.com/package/@pengx17/electron-forge-maker-appimage)

## Usage

```bash
npm install @forkprince/electron-forge-maker-appimage --save-dev
```

## forge.config.js

```js
makers: [
  {
    name: "@forkprince/electron-forge-maker-appimage",
    platforms: ["linux"],
    config: {
      productName: "Re:Lunatic Player",
      icons: [
        {
          file: "./src/img/logo.png",
          size: 256
        }
      ]
    }
  }
];
```
npm package: @forksfinance/sdk
Description: 🛠 An SDK for building applications on top of forksswap.
Latest version: 1.0.11

# Pancakeswap SDK

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
[![Actions Status](https://github.com/pancakeswap/pancakeswap-sdk/workflows/CI/badge.svg)](https://github.com/pancakeswap/pancakeswap-sdk)
[![npm version](https://img.shields.io/npm/v/@pancakeswap-lib/sdk/latest.svg)](https://www.npmjs.com/package/@pancakeswap-lib/sdk/v/latest)

## Running tests

To run the tests, follow these steps. You must have at least node v10 and [yarn](https://yarnpkg.com/) installed.

First clone the repository:

```sh
git clone https://github.com/pancakeswap/pancakeswap-sdk.git
```

Move into the pancakeswap-sdk working directory

```sh
cd pancakeswap-sdk/
```

Install dependencies

```sh
yarn install
```

Run tests

```sh
yarn test
```

You should see output like the following:

```sh
yarn run v1.22.4
$ tsdx test
 PASS  test/constants.test.ts
 PASS  test/pair.test.ts
 PASS  test/fraction.test.ts
 PASS  test/miscellaneous.test.ts
 PASS  test/entities.test.ts
 PASS  test/trade.test.ts

Test Suites: 1 skipped, 6 passed, 6 of 7 total
Tests:       3 skipped, 82 passed, 85 total
Snapshots:   0 total
Time:        5.091s
Ran all test suites.
✨  Done in 6.61s.
```
npm package: @forksfinance/uikit
Description: Set of UI components for pancake projects
Latest version: 1.0.4

# 🥞 Pancake UIkit

[![Version](https://img.shields.io/npm/v/@pancakeswap-libs/uikit)](https://www.npmjs.com/package/@pancakeswap-libs/uikit) [![Size](https://img.shields.io/bundlephobia/min/@pancakeswap-libs/uikit)](https://www.npmjs.com/package/@pancakeswap-libs/uikit)

Pancake UIkit is a set of React components and hooks used to build pages on Pancake's apps. It also contains a theme file for dark and light mode.

## Install

`yarn add @pancakeswap-libs/uikit`

## Setup

### Theme

Before using Pancake UIkit, you need to provide the theme file to styled-component.

```
import { ThemeProvider } from 'styled-components'
import { light, dark } from '@pancakeswap-libs/uikit'
...
<ThemeProvider theme={isDark}>...</ThemeProvider>
```

### Reset

A reset CSS is available as a global styled component.

```
import { ResetCSS } from '@pancakeswap-libs/uikit'
...
<ResetCSS />
```

### Types

This project is built with Typescript and export all the relevant types.

## How to use the UIkit

If you want to use components from the UIkit, check the [Storybook documentation](https://pancakeswap.github.io/pancake-uikit/)
npm package: @forkswap/v2-sdk
Description: 🛠 An SDK for building applications on top of Pancakeswap.
Latest version: 6.9.0


> **Notice**
>
> Moved to https://github.com/pancakeswap/pancake-frontend/tree/develop/packages/swap-sdk

# Pancakeswap SDK

Forked from the [Uniswap SDK](https://github.com/Uniswap/uniswap-v2-sdk/commit/a88048e9c4198a5bdaea00883ca00c8c8e582605).

You can refer to the Uniswap SDK documentation [uniswap.org](https://docs.uniswap.org/sdk/2.0.0/).

## Running tests

To run the tests, follow these steps. You must have at least node v10 and [yarn](https://yarnpkg.com/) installed.

First clone the repository:

```sh
git clone https://github.com/pancakeswap/pancake-swap-sdk.git
```

Move into the pancakeswap-sdk working directory

```sh
cd pancakeswap-sdk/
```

Install dependencies

```sh
yarn install
```

Run tests

```sh
yarn test
```

You should see output like the following:

```sh
yarn run v1.22.4
$ tsdx test
 PASS  test/constants.test.ts
 PASS  test/pair.test.ts
 PASS  test/fraction.test.ts
 PASS  test/miscellaneous.test.ts
 PASS  test/entities.test.ts
 PASS  test/trade.test.ts

Test Suites: 1 skipped, 6 passed, 6 of 7 total
Tests:       3 skipped, 82 passed, 85 total
Snapshots:   0 total
Time:        5.091s
Ran all test suites.
✨  Done in 6.61s.
```
npm package: @forlagshuset/audit-logging
Description: Audit Logging Package
Latest version: 2.0.0

<h1> [DEPRECATED] </h1>

# Audit Logging
Library to facilitate constructing and sending audit log messages.

## Usecase

```
const auditLog = new AuditLog({
  actorType: ActorType.IP;
  actionType: ActionType.Object;
  objectType: ObjectType.FacebookUser;
  service: {
    type: ServiceType.App;
    id: 'service.name';
  };
});
const auditLogger = new BaseAuditLogger("audit.subject", auditLog, console);
const req = /* any object that we can take data from, typically it should be a request */ {actor_id: 3, object_id: 4}
const params = {
  actorIdGetter: (req: any) => req.actor_id,
  objectIdGetter: (req: any) => req.object_id,
  action: ActionVerb.MODIFIED,
}
await auditLogger.log(params, req);
```
npm package: @forlagshuset/fetch-manager
Description: Download manager
Author: Michal Ostrowski
Latest version: 0.1.8

# Fetch Manager
Downloading Manager

## Install
```bash
npm install
```

### Use
```javascript
let maxConcurrentJobs = 5;
let maxRetries = 2;
let fm = new FetchManager(maxConcurrentJobs, maxRetries);
let url = "http://{...}";

//for blobs
fm.add(url, options)
  .then((response) => {console.log("Blob object is in response ready to be used: " + response)})
  .catch((e) => {console.log(e)});

//json
fm.add(url, options)
  .then((r) => r.json())
  .then((r) => {console.log("success: " + r)})
  .catch((e) => {console.log(e)});
```

Additional methods:

```javascript
fm.getAllDownloads(); //get all active and queued downloads
fm.getStatus(id); // return status of a task (active or queued)
fm.cancel(id); // cancels a task, return promise
```

If there's a need to listen for downloading progress (this feature works for a few browsers unfortunatelly)
```
var job = fm.createJob(url, options);

job.setProgressListener((progress, currentlyDownloadedLength, totalLength) => {
  console.log("progress: " + progress + "%\n");
});
fm.addJobToQueue(job)
    .then((response) => {console.log("Blob object is in response ready to be use: " + response)})
    .catch((e) => {console.log(e)});

```

## Process

```
ES6 source files
       |
       |
    webpack
       |
       +--- babel, eslint
       |
  ready to use
     library
  in umd format
```

*Have in mind that you have to build your library before publishing. The files under the `lib` folder are the ones that should be distributed.*

## Getting started

1. Setting up the name of your library
  * Open `webpack.config.js` file and change the value of `libraryName` variable.
  * Open `package.json` file and change the value of `main` property so it matches the name of your library.
2. Build your library
  * Run `npm install` to get the project's dependencies
  * Run `npm run build` to produce minified version of your library.
3. Development mode
  * Having all the dependencies installed run `npm run dev`. This command will generate an non-minified version of your library and will run a watcher so you get the compilation on file change.
4. Running the tests
  * Run `npm run test`

## Scripts

* `npm run build` - produces production version of your library under the `lib` folder
* `npm run dev` - produces development version of your library and runs a watcher
* `npm run test` - well ... it runs the tests :)
* `npm run test:watch` - same as above but in a watch mode

## Acknowledgements

* [Start your own JavaScript library using webpack and ES6](http://krasimirtsonev.com/blog/article/javascript-library-starter-using-webpack-es6)
npm package: @forlagshuset/nestjs-audit-logging
Description: Nestjs Audit Logging Package
Latest version: 2.0.0

<h1> [DEPRECATED] </h1>

## Nestjs Audit Logging Interceptor

Library to facilitate adding custom audit log messages to nestjs controllers.

# Usecase

`transport`

```
class TestLoggerTransport implements Transport {
  log(): any | Promise<any> {
    return;
  }
}
```

`module`

```
@Module({
  imports: [],
  controllers: [SomeController],
  providers: [
    AuditLogInterceptor,
    {
      provide: AuditLog,
      useValue: new AuditLog({
        actionType: ActionType.Object,
        actorType: ActorType.Eportal,
        service: { type: ServiceType.App, id: 'test.service' },
        objectType: ObjectType.ErudioNamespace,
      }),
    },
    {
      provide: BaseAuditLogger,
      useFactory: (auditLog: AuditLog) => {
        baseAuditLogger = new BaseAuditLogger(
          'test.one.two',
          auditLog,
          new TestLoggerTransport(),
        );
        return baseAuditLogger;
      },
      inject: [AuditLog],
    },
  ]
})
```

`controller`

```
@Controller('/test')
export class TestController {
  @AuditLogger({
    action: ActionVerb.ACCESSED,
    actorIdGetter: (req) => req.headers['x-gateway-user-id'],
    objectIdGetter: (req) => req.params.id,
    eventSubject: 'test',
    errorTypes: [NotFoundException],
  })
  @Get('/error/:id')
  action(@Param('id') id: string) {
    // do some action
    // success calls will be intercepted and audit log message will be emitted
    // as for errors, only NotFoudException will be intercepted and an audit log message will be emitted. All errors needed for audit log should be specified upfront
  }
}
```
npm package: @forlagshuset/nestjs-message-dispatcher
Description: Creates and send messages to nats
Latest version: 3.0.0

<h1> [DEPRECATED] </h1>

# NestJS interceptor for message dispatching

Library to facilitate message creation & sending

# Usecase

`module`

```
Module({
  controllers: [TestController],
  providers: [
    LoggerService,
    MessageDispatcherInterceptor,
    {
      provide: AsyncLoggerProvider,
      useExisting: LoggerService,
    },
    {
      provide: Options,
      useValue: <Options>{
        subject,
        messageData: <Partial<Message>>{
          service: {
            type: MsgServiceType.App,
            id: serviceId,
          },
          action: {
            type: MsgActionType.Object,
          },
          object: {
            type: MsgObjectType.ErudioNamespace,
          },
        },
      },
    },
  ],
}).compile();

```

`controller`

```
@Controller('/test')
export class TestController {
  @MessageEventEmitter({
    objectIdGetter: (request) => request.params.id,
    action: Action.CREATED,
  })
  @Get(':id')
  async test(@Param() params: { id: string }): Promise<{ id: string }> {
    // do some action
    // Message created and event emitted on success calls.
  }
}

```
npm package: @forlagshuset/nestjs-mongoose-paginate
Description: A pagination, filtering and sorting lib for nestjs using mongoose orm
Latest version: 2.1.4

# nestjs-mongoose-paginate

A pagination, filtering and sorting lib for nestjs v8(for v7 please use < v1.1) using mongoose orm

# Usage

### Exposing properties

Create a class to hold information about filterable and sortable properties
You need to `@Expose` properties of this class. By default none of it is filterable nor sortable.
You should set this parameters explicitly.
In case you want to expose some of the properties with a different name, you need to specify a `name` option in this decorator.

```typescript
import {
  CollectionProperties,
  Expose
} from '@forlagshuset/nestjs-mongoose-paginate';

export class MyCollectionProperties extends CollectionProperties {
  @Expose({ name: 'createdAt', sortable: true })
  readonly created_at: 'desc' | 'asc';

  @Expose({ sortable: true, default: true, filterable: true })
  readonly userName: 'desc' | 'asc';

  readonly unsortable: string;
}
```

### Validation Pipe

```typescript
import {
  CollectionDto,
  ValidationPipe,
  CollectionResponse
} from '@forlagshuset/nestjs-mongoose-paginate';

@Controller()
export class AppController {
  @Get('list')
  async filter(
    @Query(new ValidationPipe(MyCollectionProperties))
    collectionDto: CollectionDto,
  ): Promise<CollectionResponse<MyDocument>> {
    return await this.service.list(collectionDto);
  }
}
```

### Document collector usage

```typescript
import { Model } from 'mongoose';
import { InjectModel } from '@nestjs/mongoose';
import {
  CollectionDto,
  DocumentCollector,
  CollectionResponse
} from '@forlagshuset/nestjs-mongoose-paginate';

@Injectable()
export class AppService {
  constructor(
    @InjectModel('MyModel') private readonly model: Model<MyDocument>,
  )

  async list(
      collectionDto: CollectionDto,
  ): Promise<CollectionResponse<MyDocument>> {
    const collector = new DocumentCollector<MyDocument>(this.model);
    return collector.find(collectionDto);
  }
}
```

# Queries

You may now send a request, like in example below:

```
http://localhost:3000/list?filter={"userName": {"$regex": "^test"}}&sort=-createdAt&page=0&limit=100
```

You need to run the parameters through `urlencode` to be able to parse the query correctly. So the filter part looks more like

`%7B%22userName%22%3A%20%7B%22%24regex%22%3A%20%22%5Etest%22%7D%7D`

### Sort

You can specify more than one field for sorting by providing a list of them separated by a semicolon: `createdAt;userName`.
To use DESC sort order: `-createdAt`.

### Filter

A subset of mongoose query language is supported. Currently only these operators are supported:

`'$eq', '$gt', '$gte', '$in', '$lt', '$lte', '$ne', '$nin', '$and', '$not', '$nor', '$or', '$regex'`
npm package: @forlagshuset/v-audio-player
Description: Pass `fileUrl` and `fileType` prop, to add audio source.
Author: Forlagshuset
Latest version: 1.0.3

# FH Audio Player component

Pass `fileUrl` and `fileType` prop, to add audio source. 

`type = 'full'` renders 2 line player design and 
`type = 'simple'` renders 1 line player design

Accepts props:
```
props: {
  type: String,
  startTime: Number,
  fileUrl: String,
  fileType: String
},
```

Events:
```
'timeupdate' => currentTime: number
'init' => player: HTML <audio> element
```
npm package: @forlagshuset/v-clickable-area
Description: Pass `href` prop, if you want to display link (non-router component) with button styling.
Author: Forlagshuset
Latest version: 1.0.8

# FH Button component

Pass `href` prop, if you want to display link (non-router component) with button styling.

Accepts props:
```
{
  href: String,
  target: String,
  extraClass: String,
  type: String,
  role: String,
  disabled: Boolean,
  nativeType: {
    type: String,
    default: 'button'
  }
}
```
npm package: @forlagshuset/v-tabs
Description: ARIA implementation as in [https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html](https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html)
Author: Forlagshuset
Latest version: 0.2.27

# FH Tabs component

ARIA implementation as in [https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html](https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html)


FHTabs props
```javascript
  props: {
    ariaLabel: {
      type: String
    }
  }```
```

FHTab props:
```javascript
  props: {
    id: {
      type: String,
      default: null
    },
    name: {
      type: String,
      required: true
    },
    prefix: {
      type: String,
      default: ''
    },
    suffix: {
      type: String,
      default: ''
    },
    isDisabled: {
      type: Boolean,
      default: false
    },
  },
```

## Basic example
```javascript
<FHTabs>
  <FHTab name="tab button name">
    // Use other components or HTML here!
  <FHTab>
</FHTabs>
```

## Tabs with before/after templates 
Using VueJS `slots` :heart_eyes:

```javascript
<FHTabs>
  <template #before-tablist>Before Tablist</template>
  <template #after-tablist>After Tablist</template>
  <template #before-panels>Before Panels</template>
  <template #after-panels>After Panels</template>
  <FHTab name="tab button name">
    // Use other components or HTML here!
  <FHTab>
</FHTabs>
```
npm package: @forlagshuset/v-term-popup
Description: **Plugin install** `main.js` `import TermPopup from '@forlagshuset/v-term-popup'`
Author: Forlagshuset
Latest version: 0.1.14

# FH Term Popup component

**Plugin install**
`main.js`
`import TermPopup from '@forlagshuset/v-term-popup'`

`TermPopupComponentSlots.vue`
`import { FHTermPopup } from '@forlagshuset/v-term-popup'`

**Events**
`close` - after clicking 'X' icon

**Props**
```
ariaLabelCloseButton: {
  type: String,
  default: 'close button'
}
ariaLabel: {
  type: String,
  default: ''
}
```

**Component**
```
<FHTermPopup ariaDescribedBy="elementWhichOwnsPopup">
  <template #close>
  <!-- if close button needs to be changed -->
  </template>

  Some content

  <template #pointer>
  <!-- if pointer element needs to be changed -->
  </template>
</FHTermPopup>
```
npm package: @forlagshuset/v-video-player-vjs
Description: ## Installation
Author: Forlagshuset
Latest version: 0.2.16

# Customizable VideoPlayer component

## Installation

`npm install @forlagshuset/v-video-player-vjs`

## Usage
```javascript
import FHVideoPlayer from '@forlagshuset/v-video-player-vjs'

export default {
  data() {
    return {
      videoUrl: '',
      videoType: 'video/mp4',
      videoAttributes: {
        poster: '',
        crossorigin: '',
        playsinline: '',
        controls: ''
      },
      captions: [
        {
          label: 'Norwegian Nynorsk',
          srclang: 'nn',
          src: '',
        },
        {
          label: 'Norwegian Bokmål',
          srclang: 'nb',
          src: ''
        }
      ],
      options: {
        playbackRates: [0.5, 1, 1.5, 2],
        language: 'nb'
      }
    }
  },

  components: {
    FHVideoPlayer
  }
}
```

## Props
FHVideoPlayerVJS accepts these props:

```javascript
  props: {
    videoUrl: {
      type: String,
      default: null,
      required: true
    },
    videoType: {
      type: String,
      default: 'video/mp4'
    },
    videoAttributes: {
      type: Object,
      default: null
    },
    captions: {
      type: Array,
      default: null,
      required: true
    },
    chapters: {
      type: Array
    },
    options: {
      type: Object,
      default: obj => {
        /*
          Available options from VJS: https://docs.videojs.com/tutorial-options.html

          Component specific:
          skipTime: Number
        */
      }
    }
  },
```

Uses `video.js` plugin.
npm package: @forlagshuset/v-writing-tool
Description: Reusable Vue Components =============================
Author: Forlagshuset
Latest version: 0.2.24

Reusable Vue Components
=============================

## Introduction

This is a composite to render writing tool from forlagshuset.

### Installation
```
npm install
```

### Previewing components locally

Now you can add your component to application:
```
import WT from '@forlagshuset/v-writing-tool'
```

### Running tests
```
npm run test:unit
```

### Launch storybook
```
npm run storybook
```

### Props

> <WT :data="data" />

Data should be JSON formatted and include:
- *steps* - Array of object, to render step navigation and steps component
- *introduction* - Object having title and html text, to render "step zero" before first step and first element on toolbox
- *example_text* - for @forlagshuset/v-selection-tool, to render example text wrapped in modals in toolbox
- *video* - for @forlagshuset/v-video-content, to render video in modal in toolbox
- *visual_structure* - picture link, to render visual structure image in toolbox
- *checklist* - to render checklist on right side
npm package: @form-atoms/chakra-ui
Description: <div align="center">   <div align="center">     <img width="120" style="margin: 32px" src="https://raw.githubusercontent.com/MiroslavPetrik/form-atoms-field/main/form-atoms-field.svg">     <img width="120" style="margin: 32px" src="https://raw.githubuserc
Author: Miroslav Petrik
Latest version: 1.0.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

<div align="center">
  <div align="center">
    <img width="120" style="margin: 32px" src="https://raw.githubusercontent.com/MiroslavPetrik/form-atoms-field/main/form-atoms-field.svg">
    <img width="120" style="margin: 32px" src="https://raw.githubusercontent.com/form-atoms/flowbite/main/public/plus-dark.svg#gh-light-mode-only">
    <img width="120" style="margin: 32px" src="https://raw.githubusercontent.com/form-atoms/flowbite/main/public/plus-light.svg#gh-dark-mode-only">
    <img width="110" style="margin: 32px" src="https://raw.githubusercontent.com/chakra-ui/chakra-ui/main/media/logomark-colored.svg">
  </div>
  <h1>Form Atoms bindings to <a href="https://chakra-ui.com/docs/components">chakra-ui</a></h1>
</div>

<a aria-label="NPM version" href="https://www.npmjs.com/package/%40form-atoms/chakra-ui">
  <img alt="NPM Version" src="https://img.shields.io/npm/v/%40form-atoms/chakra-ui?style=for-the-badge&labelColor=24292e">
</a>

### Prerequisites

This package binds to headless components which must be installed first [Check `@form-atoms/field`](https://github.com/MiroslavPetrik/form-atoms-field#readme).

```
yarn add jotai jotai-effects form-atoms @form-atoms/field
```

### Installation

```
yarn add @form-atoms/chakra-ui
```
npm package: @form-atoms/flowbite
Description: <div align="center"> <div align="center">   <img width="120" style="margin: 32px" src="https://raw.githubusercontent.com/form-atoms/field/main/public/form-atoms-field.svg">    <img width="120" style="margin: 32px" src="https://raw.githubusercontent.com/fo
Author: Miroslav Petrik
Latest version: 5.5.0

<div align="center">
<div align="center">
  <img width="120" style="margin: 32px" src="https://raw.githubusercontent.com/form-atoms/field/main/public/form-atoms-field.svg">
   <img width="120" style="margin: 32px" src="https://raw.githubusercontent.com/form-atoms/flowbite/main/public/plus-dark.svg#gh-light-mode-only">
   <img width="120" style="margin: 32px" src="https://raw.githubusercontent.com/form-atoms/flowbite/main/public/plus-light.svg#gh-dark-mode-only">
   <img width="110" style="margin: 32px" src="https://github.com/themesberg/flowbite-react/blob/main/apps/web/public/android-chrome-192x192.png?raw=true">
   </div>
  <h1>Form Atoms with Flowbite React style</h1>
</div>

<a aria-label="Minzipped size" href="https://bundlephobia.com/result?p=%40form-atoms/flowbite">
  <img alt="Bundlephobia" src="https://img.shields.io/bundlephobia/minzip/%40form-atoms/flowbite?style=for-the-badge&labelColor=24292e">
</a>
<a aria-label="NPM version" href="https://www.npmjs.com/package/%40form-atoms/flowbite">
  <img alt="NPM Version" src="https://img.shields.io/npm/v/%40form-atoms/flowbite?style=for-the-badge&labelColor=24292e">
</a>

### Demo

Visit project's [🎨 Storybook](https://form-atoms.github.io/flowbite/)

### Prerequisites

1. Install the headless form components [@form-atoms/field](https://github.com/form-atoms/field#readme).

2. Install the [flowbite-react](https://github.com/themesberg/flowbite-react) components.

### 📦 Installation

```
yarn add @form-atoms/flowbite
```
npm package: @form-create/ant-design-vue
Description: AntDesignVue版本低代码表单|FormCreate 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的低代码表单生成组件。支持6个UI框架，适配移动端，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。
Author: xaboy
Latest version: 2.6.3
npm package: @form-create/arco-design
Description: ArcoDesign版本低代码表单|FormCreate 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的低代码表单生成组件。支持6个UI框架，适配移动端，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。
Author: xaboy
Latest version: 3.2.38
npm package: @form-create/core
Description: FormCreate低代码表单渲染引擎，可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的低代码表单。支持6个UI框架，适配移动端，并且支持生成任何 Vue 组件。
Author: xaboy
Latest version: 2.6.3
npm package: @form-create/element-ui
Description: Element UI版本低代码表单|FormCreate 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的低代码表单生成组件。支持6个UI框架，适配移动端，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。
Author: xaboy
Latest version: 2.6.3
npm package: @form-create/iview
Description: Iview版本低代码表单|FormCreate 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的低代码表单生成组件。支持6个UI框架，适配移动端，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。
Author: xaboy
Latest version: 2.6.3
npm package: @form-create/iview4
Description: ViewDesign版本低代码表单|FormCreate 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的低代码表单生成组件。支持6个UI框架，适配移动端，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。
Author: xaboy
Latest version: 2.6.3
npm package: @form-create/naive-ui
Description: NaiveUI版本低代码表单|FormCreate 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的低代码表单生成组件。支持6个UI框架，适配移动端，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。
Author: xaboy
Latest version: 3.2.38
npm package: @form-create/vant
Description: VantUI版本低代码表单|FormCreate 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的低代码表单生成组件。支持6个UI框架，适配移动端，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。
Author: xaboy
Latest version: 3.2.38
npm package: @form-create/view-design
Description: ViewDesign版本低代码表单|FormCreate 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的低代码表单生成组件。支持6个UI框架，适配移动端，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。
Author: xaboy
Latest version: 2.6.3