# hk-form-bootstrap

> bootstrap UI backend for hk-forms. hk-forms renders forms from single json-schema like structure

Latest version **0.1.0** (published 2021-06-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install hk-form-bootstrap
pnpm add hk-form-bootstrap
yarn add hk-form-bootstrap
bun add hk-form-bootstrap
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2021-06-09 |
| First published | 2021-06-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 117.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Harish Karumuthil |
| Maintainers | harish2704 |
| Keywords | vue, json-schema-form, jsonschema |

## Links

- npm: https://www.npmjs.com/package/hk-form-bootstrap
- Repository: https://github.com/harish2704/hk-forms-bootstrap
- Homepage: https://github.com/harish2704/hk-forms-bootstrap#readme
- Issues: https://github.com/harish2704/hk-forms-bootstrap/issues
- npm.io page: https://npm.io/package/hk-form-bootstrap

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 0.1.0 (latest) — 2021-06-09

## README

# hk-forms-bootstrap

Bootstrap UI backend for `hk-forms` package.
`hk-forms` is a vue component which render form from json-schema like strucure. 

Behind the scene, hk-forms generates json-schema and ui-schema from a single schema defnition and renders the from using [ vue-form-json-schema ](https://github.com/jarvelov/vue-form-json-schema)

### List of form components

1. `AppArrayContainer`: Array container with add / remove buttons
2. `AppImageSelect`: File input widget for image input fields. supports cropping using cropper.js
3. `AppInput`: Bootstrap input element which supportss validation errors
4. `AppRadioSelect`: Bootstrap radio group component to render enum fields
5. `AppSelect`: Bootstrap select component to render enum fields
6. `AppTextarea`: Bootstrap textarea element which supports validation errors


### Example

Run `npm run serve` or `yarn serve` from project directory to see the example

```javascript

<template>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <form class="">
          <hk-form :schema="schema" v-model="formData"></hk-form>
          <button class="btn btn-primary" type="submit">Submit</button>
        </form>
      </div>
    </div>
    <div class="row">
      <pre>{{ formData }}</pre>
    </div>
  </div>
</template>

<script>
const schema = {
  type: "object",
  required: [
    "name",
    "phone",
    "email",
    "gender",
    "blood_group",
    "year_of_birth",
    "address",
    "photo",
  ],
  properties: {
    name: {
      title: "Name of the operator",
      description: "Please enter your full name",
      minLength: 3,
      type: "string",
    },
    phone: {
      type: "string",
      maxLength: 10,
      minLength: 7,
      title: "Phone number",
      ui: {
        type: "tel",
      },
    },
    email: {
      type: "string",
      title: "Email Address",
      format: "email",
    },
    gender: {
      title: "Gender",
      enum: [
        { text: "Male", value: "M" },
        { text: "Female", value: "F" },
        { text: "Others", value: "O" },
      ],
      type: "string",
      ui: {
        component: "app-radio-select",
      },
    },
    blood_group: {
      title: "Blood group",
      enum: ["AB+", "AB-", "A+", "A-", "B+", "B-", "O+", "O-"],
      type: "string",
    },
    year_of_birth: {
      title: "Year of birth",
      maximum: 2021,
      minimum: 1900,
      type: "integer",
    },
    address: {
      type: "string",
      title: "Address of the patient",
      minLength: 10,
      ui: {
        component: "app-textarea",
      },
    },
    photo: {
      type: "object",
      title: "Photo of user",
      ui: {
        component: "app-image-select",
      },
    },
  },
  additionalProperties: false,
  errorMessage: {
    // required: 'should have property foo',
  }
};

import { HkForm } from "@/lib-components/";
export default {
  data() {
    return {
      schema,
      formData: {},
    };
  },
  components: {
    HkForm,
  },
};
</script>

```

---
_Source: https://npm.io/package/hk-form-bootstrap · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._