pict-section-formeditor
v1.0.17
Published
Pict visual editor for pict-section-form configurations
Downloads
239
Keywords
Readme
pict-section-formeditor
Read the Pict-Section-Formeditor Documentation - interactive docs with the full API reference.
A visual editor for pict-section-form configuration manifests. Build, edit, and preview form layouts in the browser with a drag-and-drop interface, inline property editing, solver expression authoring, and live form preview.
Features
- Visual Editor -- Drag-and-drop sections, groups, rows, and inputs in a structured layout
- JSON Editor -- Edit the raw manifest JSON with syntax highlighting via CodeJar
- Properties Panel -- Inline editing of section, group, row, and input properties
- Solver Editor -- Author solver expressions with a built-in expression linter and token inspector
- Live Preview -- Render the form as it will appear to end users using a child pict instance
- Embedded Help -- Context-sensitive documentation for all 127+ solver functions, input types, and editor features
- Input Type Picker -- Browse all available pict-section-form input types organized by category
- Display Modes -- Toggle between human-readable names and manifest hash identifiers
- Light / Dark Theming -- Ships both appearances, follows the OS or the host's
data-theme, and adopts the host palette when one is defined
Installation
npm install pict-section-formeditorQuick Start
Add the form editor view to any pict application:
const libPict = require('pict');
const libPictApplication = require('pict-application');
const libPictSectionFormEditor = require('pict-section-formeditor');
class MyApp extends libPictApplication
{
onAfterInitializeAsync(fCallback)
{
// Provide a manifest object at a known AppData address
this.pict.AppData.FormConfig =
{
Scope: 'MyForm',
Sections: [],
Descriptors: {}
};
// Add the form editor view
this.pict.addView('FormEditor',
{
ViewIdentifier: 'FormEditor',
ManifestDataAddress: 'AppData.FormConfig',
DefaultDestinationAddress: '#FormEditor-Container',
ActiveTab: 'visual'
}, libPictSectionFormEditor);
// Initialize and render
this.pict.views.FormEditor.initialize();
this.pict.views.FormEditor.render();
return super.onAfterInitializeAsync(fCallback);
}
}In your HTML, provide a container element and the Pict CSS style block:
<style id="PICT-CSS"></style>
<div id="FormEditor-Container"></div>Configuration Options
| Option | Type | Default | Description |
|---|---|---|---|
| ManifestDataAddress | String | 'FormEditor.Manifest' | AppData address where the manifest object lives |
| DefaultDestinationAddress | String | -- | CSS selector for the editor container element |
| ActiveTab | String | 'visual' | Initial tab: 'visual', 'json', or 'preview' |
Manifest Format
The editor works with standard pict-section-form manifests:
{
"Scope": "MyForm",
"Sections": [
{
"Hash": "Details",
"Name": "Contact Details"
}
],
"Descriptors": {
"Name": {
"Name": "Full Name",
"Hash": "Name",
"DataType": "String",
"PictForm": { "Section": "Details", "Row": 1, "Width": 1 }
}
}
}Theming
The editor ships a complete light and dark appearance and adopts the host application's palette when one is present.
<!-- follows the OS setting with no configuration -->
<html>
<!-- or drive it explicitly -->
<html data-theme="dark">
<html class="theme-dark">Define any of the ecosystem's --theme-color-* tokens on :root and the
editor picks them up:
:root
{
--theme-color-background-panel: #ffffff;
--theme-color-text-primary: #1f2733;
--theme-color-brand-primary: #156dd1;
}Every colour resolves through a --pfe-* alias that consults the host token
first and falls back to a mode-appropriate value, so partial overrides work and
nothing has to be defined for the editor to look right.
See docs/theming.md for the full token list, the alias naming convention, icon colour overrides, and notes on maintaining the layer.
Running the Example Application
cd example_applications/form_editor
npm install
npx quack build
# Open html/index.html in a browserThe example header carries a light / dark / system toggle, so the theming can be exercised without a host application.
Building
npm test # Run tests
npx quack build # Bundle the libraryLicense
MIT