@formsible/element NPM

`@formsible/element`

@formsible/element is a Vue.js component library designed to provide highly customizable elements for form-building applications. This library leverages the best UI practices, optimized performance, and offers a range of form-related components.

Note: This library is used in the form-building application Formsible. You can use it in any Vue or Nuxt applications. The project is sponsored by WellCare.

Features

📦 Lightweight and modular form-building components
🎨 Customizable themes with Tailwind CSS
🖼️ Integration with Codemirror, Google Maps, and PayPal Checkout
💻 Works seamlessly with Vue 3
🔌 Extensible and built with flexibility in mind

Installation
Usage
Components
Development
Contributing
License

Installation

To install @formsible/element via pnpm:

pnpm add @formsible/element

or using npm:

npm install @formsible/element

or with yarn:

yarn add @formsible/element

Usage

Import the components you need in your Vue.js app:

import { createApp } from 'vue';
import { ElementComponent } from '@formsible/element';
import '@formsible/element/dist/style.css'; // Import the library's styles

const app = createApp(App);
app.component('ElementComponent', ElementComponent);
app.mount('#app');

Now you can use the component in your template:

<template>
  <ElementComponent :prop="value" />
</template>

Example with Tailwind CSS

Make sure to install and configure Tailwind CSS if you're using the included styles:

pnpm add tailwindcss postcss autoprefixer
npx tailwindcss init

Then, add this to your tailwind.config.js:

module.exports = {
  content: [
    './index.html',
    './src/**/*.{vue,js,ts,jsx,tsx}',
    './node_modules/@formsible/element/**/*.{vue,js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [require('@tailwindcss/typography')],
};

Components

@formsible/element includes a variety of components that can be used to enhance your form-building application. Here are a few examples:

ElementComponent: A core form element component.
GoogleMap: Google Maps integration.
PayPalCheckout: PayPal Checkout integration for payment forms.
SignaturePad: A signature pad for capturing signatures.

You can find a detailed list of components in the documentation (link to docs or components folder).

Development

Setup

To start developing locally:

Clone the repository:

git clone https://github.com/formsible/element.git
cd element

Install dependencies using pnpm:
```
pnpm install
```
Start the development server:
```
pnpm run dev
```
Build the library for production:
```
pnpm run build
```
Run tests:
```
pnpm run test
```

Publishing to NPM

The library is automatically published to NPM when pull requests are merged into the main branch. The CI/CD pipeline uses GitHub Actions to ensure all tests pass before publishing.

To publish manually:

Build the project:
```
pnpm run build
```
Publish to NPM:
```
pnpm publish --access public
```

Contributing

We welcome contributions! Follow these steps to contribute:

Fork the repository.
Create a new branch: git checkout -b feature-branch-name
Make your changes.
Push the changes to your forked repository: git push origin feature-branch-name
Create a pull request.