Skip to content

widget

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

widget

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
src
src
 
 
CHANGELOG.md
CHANGELOG.md
 
 
README.md
README.md
 
 
package.json
package.json
 
 
tsconfig.json
tsconfig.json
 
 
tsup.config.ts
tsup.config.ts
 
 

README.md

@linkforty/aasa-widget

A framework-agnostic <aasa-validator> web component. Drop it into any page — plain HTML, React, Vue, Svelte — with a single element. It renders the form and results; a backend does the actual cross-origin fetch.

Plain HTML (one script tag)

<script type="module" src="https://unpkg.com/@linkforty/aasa-widget/dist/aasa-validator.global.js"></script>

<aasa-validator endpoint="https://your-backend.example/validate" advanced></aasa-validator>

With a bundler

npm install @linkforty/aasa-widget
import '@linkforty/aasa-widget'; // registers <aasa-validator>
<aasa-validator endpoint="/validate"></aasa-validator>

Attributes

Attribute Description
endpoint Backend /validate URL (default /validate).
advanced Show optional App ID / Team ID / Bundle ID fields.

Events

Emits an aasa-result CustomEvent (detail = the ValidationResult) after each validation.

Theming

The component uses Shadow DOM and is themeable via CSS custom properties on the element:

aasa-validator {
  --aasa-color-accent: #6d28d9;
  --aasa-color-pass: #15803d;
  --aasa-font: 'Inter', sans-serif;
}

Available variables: --aasa-color-accent, --aasa-color-pass, --aasa-color-warn, --aasa-color-fail, --aasa-color-skip, --aasa-color-border, --aasa-color-bg, --aasa-color-fg, --aasa-font.

License

MIT