This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

@schukai/component-form

3.52.0 • Public • Published

Form Components

Form is a lightweight, robust and easy-to-use form library with modest ambitions. The component easily integrates with your existing websites without taking over everything.

One design target is to reach the shiny sun with as little JavaScript as possible.

Monster was built with ES6 modules and uses import and export.

For some functions, you need additional polyfills.

Documentation

To check out docs and examples, visit monsterjs.org/en/doc/component-form/.

Installation

npm install @schukai/component-form, yarn install @schukai/component-form or pnpm install @schukai/component-form

Usage

A simple example of the use of functionality from Monster. We create a small file index.mjs. The m in .mjs stands for module. In the example we want to make substitutions in a string.

const button = document.createElement('monster-button');
button.setOption('labels.button', 'click me');
button.setOption('actions.click', (e) => {
    document.getElementById('example-result').innerText = "clicked!";
    setTimeout(() => {
       document.getElementById('example-result').innerText = "";
    }, 2000)
})

To integrate this function into a website it is recommended to use a bundler like esbuild.

esbuild index.mjs --outfile dist.js

We can now integrate that into our website.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Monster</title>
    <script src="dist.js"></script>
</head>
<body>

Voila!

Polyfill

We do try to work around some browser bugs, but on the whole we don't use polyfills and feature detection.

However, many functions can be mapped via polyfill.io and thus the compatibility can be increased.

<script id="polyfill" src="https://polyfill.io/v3/polyfill.min.js?features=Array.from,Array.isArray,Array.prototype.entries,Array.prototype.every,Array.prototype.fill,Array.prototype.filter,Array.prototype.find,Array.prototype.forEach,Array.prototype.indexOf,Array.prototype.keys,Array.prototype.lastIndexOf,Array.prototype.map,Array.prototype.reduce,Array.prototype.some,Array.prototype.sort,ArrayBuffer,atob,console,CustomEvent,DataView,document,DocumentFragment,Element,Event,fetch,globalThis,HTMLDocument,HTMLTemplateElement,IntersectionObserver,JSON,Map,Math.log2,MutationObserver,Number.isInteger,Object.assign,Object.defineProperty,Object.entries,Object.getOwnPropertyDescriptor,Object.getPrototypeOf,Object.keys,Promise,Reflect,Reflect.defineProperty,Reflect.get,Reflect.getOwnPropertyDescriptor,Reflect.setPrototypeOf,ResizeObserver,Set,String.prototype.endsWith,String.prototype.matchAll,String.prototype.padStart,String.prototype.startsWith,String.prototype.trim,Symbol,Symbol.for,Symbol.hasInstance,Symbol.iterator,Uint8Array,URL,WeakMap,WeakSet"
       crossorigin="anonymous"
       referrerpolicy="no-referrer"></script>

Development

This repos use devenv to manage the development environment. To get started, run:

devenv up

Now you can access the development environment at localhost:8080.

Questions

For questions and commercial support, please contact schukai GmbH. The issue list of this repo is exclusively for bug reports and feature requests.

Issues

Please make sure to read the Issue Reporting Checklist before opening an issue. Issues not conforming to the guidelines may be closed immediately.

License

Copyright © 2022 schukai GmbH

AGPL

You can also purchase a commercial license.

Changelog

Detailed changes for each release are documented in the CHANGELOG.

Dependents (1)

Package Sidebar

Install

npm i @schukai/component-form

Weekly Downloads

4

Version

3.52.0

License

AGPL 3.0

Unpacked Size

5.12 MB

Total Files

82

Last publish

Collaborators

  • volker.schukai