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