@vs-form/react-mat

Schema Form Generator with materialize.css

Usage no npm install needed!

<script type="module">
  import vsFormReactMat from 'https://cdn.skypack.dev/@vs-form/react-mat';
</script>

README

react-mat

Schema Form Generator with materialize.css

Features

  • uses materialize.css
  • Components: input, checkbox, button, link, select, radio, label,html,tabs, chips, errorpanel, icon, slider (multilselect), date
    • Autocomplete: input with option, filter
    • nur input; kein autocomplete
    • autocomplete nur string[] options
    • Select options with strings or objects like {value: 1, text: 'one'}...
    • common properties: label, field, width, style, default
    • types defined for component
    • multiselect
    • datatype: number, float..
  • Containers: form, panel, expansionpanel
    • Card Grid
  • label,hint, placeholder etc. as function
  • default value
  • Values Object
  • Validation
    • required, function
    • validate per field
    • validate all (on submit)
    • requrired fields with *
  • properties can be functions or value
  • check if form has changed (enable button)
  • switch language (settings)
  • switch schema at runtime
  • switch values at runtime
  • refresh UI
  • load external js file (schema)
  • text-mask
  • grid system (cols-property)
  • onResize in schemaManager
  • datatable
  • not validate bug in grid
  • events in schemaManager (Observables)
  • focus input
  • teil-Schema einbinden (mit ...)
  • tabs set selected index
  • panel mit all errors, (mit Feldnamen am anfang)
  • drag-drop data-table rows
  • appearance form field
  • getstyle: remove 100% , instead make class
  • Dokumente vergleichen
  • inherit from Base-Schema
  • settings objekt
  • übersetzung (label, titel, hint, placeholder als funktion)
  • min max length bei input
  • . in field => sub object z.B. verwaltung.name

todo:

  • icons von react-icons svg
  • linting reactg hooks
  • layout: flex, grid custom, none
  • design nur 1 spalte, fixe breite der inputs (s. TAG )
  • side-navigator
  • hide panels based on menu
  • class
  • sidenav content bei zuklappen full width
  • unbound property falls field nicht im Values gespeichert werden soll
  • library oder npm
  • table-view
    • getcellheader und getCellValue as function on schema (can give back component)
  • field in exp tabs um zustand zu speichern
  • lesen (getValue) & speichern (updateValue, onChange) event auf schema eines anderen wertes
  • tooltip überall
  • error in tabs
  • ev. mehr evens wie blur click dblclick focus
  • highlight diff in tables und arrays
  • removeAllErrors per comp (nach delete row)
  • input prefix und suffix (icon, button oder text)
  • tests für checkschema funktion
  • style for all tags
  • readonly
  • unbound Fields (not in Values)
  • show loader
  • filter propertys by value
  • hover-effekt bei table
  • extra advantage for using vs-form: errorpanel, diff-view, filter by property of value