DataEntry

A dynamic web component for creating data entry forms with JSON schema validation, internationalization support, and auto-save functionality.

Installation

npm install @browser.style/data-entry

Usage

import '@browser.style/data-entry';

<!-- Basic usage -->
<data-entry
  data="/api/data"
  schema="/api/schema"
  i18n="/api/i18n"
  lang="en">
</data-entry>

<!-- With all features -->
<data-entry
  auto-save="30"
  data="/api/data"
  debug
  i18n="/api/i18n"
  lang="en"
  lookup="/api/lookup"
  messages="/api/messages"
  primary-keys="id,code"
  schema="/api/schema"
  shadow>
</data-entry>

Attributes

• auto-save: Auto-save interval in seconds
• data: URL to fetch form data
• debug: Enable debug logging
• i18n: URL to fetch translations
• lang: Language code (default: 'en')
• lookup: URL to fetch lookup data
• messages: URL to fetch validation messages
• primary-keys: Comma-separated primary key fields
• schema: URL to fetch JSON schema
• shadow: Use shadow DOM

Properties

• data: Get/set form data object
• schema: Get/set JSON schema object
• lookup: Get/set lookup data array
• i18n: Get/set translations object
• constants: Get/set constants object
• validateMethod: Set custom validation function

Events

• de:custom: Custom button clicked
• de:entry: Form data processed
• de:notify: Notification triggered
• de:resetfields: Fields reset
• de:submit: Form submitted
• de:record-created: New record created
• de:record-deleted: Record deleted
• de:record-upserted: Record updated

Form Integration

<form>
  <data-entry name="entry"></data-entry>
</form>

Access form values:

const form = document.querySelector('form');
const entry = form.elements.entry;
console.log(entry.value); // Current form data

Custom Validation

const entry = document.querySelector('data-entry');
entry.validateMethod = (schema, data) => {
  // Custom validation logic
  return {
    valid: true,
    errors: []
  };
};

Schema Example

{
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "type": "object",
  "properties": {
    "name": {
      "type": "string",
      "title": "Name",
      "render": {
        "method": "input",
        "attributes": [
          { "type": "text" },
          { "required": "required" }
        ]
      }
    }
  }
}