### HTML Page Setup with Aventus Component (HTML)
Source: https://aventusjs.com/docs/wc/style
An example of an index.html file configured to load an AventusJS application. It includes script tags for the application's JavaScript and a link to a stylesheet. It also demonstrates how to instantiate a custom Aventus component () in the body.
```html
Style
```
--------------------------------
### Example Component TypeScript
Source: https://aventusjs.com/docs/ui/tabs
A basic example component that extends 'Aventus.WebComponent' and 'Aventus.DefaultComponent'. This serves as a placeholder or starting point for integrating the tabs system into a larger application.
```typescript
export class Example extends Aventus.WebComponent implements Aventus.DefaultComponent {
//#region static
//#endregion
//#region props
//#endregion
//#region variables
//#endregion
//#region constructor
//#endregion
//#region methods
//#endregion
}
```
--------------------------------
### Full Custom Binding Example - Index HTML
Source: https://aventusjs.com/docs/wc/binding
The main HTML file for the binding examples, setting up the page title and including the AventusJS demo script. It renders the 'av-example' component.
```html
Binding
```
--------------------------------
### Local Container Query Example (HTML)
Source: https://aventusjs.com/docs/ui/col_row
An example of using the 'use_container' attribute on an to enable container query mode for that specific column. The column's responsiveness is based on its parent 's width.
```html
Responsive to its container width
```
--------------------------------
### Aventus Project Configuration (JSON)
Source: https://aventusjs.com/docs/advanced/template
Configures the Aventus build process for the project. It specifies the module name, component prefix, build settings including source files and output, and defines aliases for easier path management.
```json
{
"module": "Tailwind",
"componentPrefix": "av",
"build": [
{
"name": "Main",
"src": [
"./src/*"
],
"compile": [{
"output": "./dist/Tailwind.js"
}]
}
],
"aliases": {
"@":"./src" // using alias to always have the right root folder
}
}
```
--------------------------------
### HTML: Basic Grid Helper Initialization
Source: https://aventusjs.com/docs/ui/grid_helper
Initializes the av-grid-helper component within a div element. This example demonstrates setting various attributes like step size, column/row dimensions, magnetic snapping threshold, and lock state.
```html
```
--------------------------------
### Aventus Configuration File (aventus.conf.avt)
Source: https://aventusjs.com/docs/install/first_app
Defines the project structure and build settings for Aventus. It specifies the module name, component prefix, and build configurations including source files and output paths. This is the minimal configuration to start a project.
```json
{
"module": "HelloAventus",
"componentPrefix": "ha",
"build": [
{
"name": "Main",
"src": [],
"compile": [{
"output": "./dist/helloaventus.js"
}]
}
]
}
```
--------------------------------
### Basic Controller Example - TypeScript
Source: https://aventusjs.com/docs/http/route
An example demonstrating a basic controller, AuthLoginController, extending HttpRoute. It sends a POST request to the /api/login endpoint using the router from the base class and returns a typed response.
```typescript
export class AuthLoginController extends Aventus.HttpRoute {
@BindThis()
public async request(body: Request): Promise> {
const request = new Aventus.HttpRequest(
`${this.getPrefix()}/api/login`,
Aventus.HttpMethod.POST
);
request.setBody(body);
return await request.queryJSON(this.router);
}
}
```
--------------------------------
### TypeScript Animation Class Example
Source: https://aventusjs.com/docs/lib/animation
Demonstrates the implementation of the Aventus Animation class within a Web Component. It includes methods to start animations at different frames per second (fps) and manages the animation state. Dependencies include the Aventus framework.
```typescript
export class Example extends Aventus.WebComponent implements Aventus.DefaultComponent {
//#region static
//#endregion
//#region props
//#endregion
//#region variables
@ViewElement()
protected squareEl!: HTMLDivElement;
protected animation?: Aventus.Animation;
//#endregion
//#region constructor
//#endregion
//#region methods
protected startAnimation(fps: number) {
const max = 200;
const step = 10;
let value = 0;
if(this.animation) {
this.animation.immediateStop();
}
let animation = new Aventus.Animation({
animate: () => {
value += step;
this.squareEl.style.left = value + 'px';
if(value >= max) {
animation.stop();
}
},
fps: fps,
stopped: () => {
// trigger when the animation is ended
}
});
this.animation = animation;
animation.start();
}
protected startAnimation1fps() {
this.startAnimation(1);
}
protected startAnimation10fps() {
this.startAnimation(10);
}
protected startAnimation30fps() {
this.startAnimation(30);
}
protected startAnimation60fps() {
this.startAnimation(60);
}
//#endregion
}
```
--------------------------------
### Full Custom Binding Example - HTML
Source: https://aventusjs.com/docs/wc/binding
The HTML template for the 'Example' component in a full custom binding scenario. It uses 'av-input' with '@bind_newVal:val' to bind to the parent's 'value' and displays the synchronized value.
```html
{{ this.value }}
```
--------------------------------
### Install Aventus CLI using npm
Source: https://aventusjs.com/docs/install/installation
This command installs the Aventus Command Line Interface (CLI) package using npm. The CLI is useful for DevOps tasks and automation. Ensure you have Node.js and npm installed.
```bash
npm i @aventusjs/cli
```
--------------------------------
### Full Web Component Example with Watch - TypeScript
Source: https://aventusjs.com/docs/wc/watch
A complete TypeScript example of an AventusJS web component demonstrating the @Watch decorator. It includes initializing the 'person' object and a method to change its name, triggering the watch callback.
```typescript
import { Person } from "../Person.data.avt";
export class Example extends Aventus.WebComponent implements Aventus.DefaultComponent {
//#region static
//#endregion
//#region props
@Watch((target: Example, action: Aventus.WatchAction, path: string, value: any) => {
console.log(Aventus.WatchAction[action] + " on " + path + " with value " + value);
})
public person?: Person;
//#endregion
//#region variables
//#endregion
//#region constructor
//#endregion
//#region methods
protected change() {
if(this.person)
this.person.name = "Changed Name";
}
protected override postCreation(): void {
this.person = new Person()
}
//#endregion
}
```
--------------------------------
### CSS Styling for Animation Example
Source: https://aventusjs.com/docs/lib/animation
Provides the CSS styles for the animation example component. It defines the appearance and positioning of the animated square element and the host element. This CSS is scoped to the web component.
```css
:host {
position: relative;
padding-top: 30px;
.square {
background-color: red;
height: 20px;
left: 0;
position: absolute;
top: 0;
width: 20px;
}
}
```
--------------------------------
### HTML Structure for Web Component Example (HTML)
Source: https://aventusjs.com/docs/wc/injection
This HTML file sets up a basic web page to host the AventusJS web component. It includes the necessary script tag to load the compiled component and a custom element '' to render it. This serves as the entry point for the application.
```html
Injection
```
--------------------------------
### Example Modal Usage in Aventus Component
Source: https://aventusjs.com/docs/ui/modal
This TypeScript code demonstrates how to use the Modal component within an Aventus Web Component. It shows how to instantiate a Modal, set its properties, and await its resolution using the `show()` method. The result (accepted or refused) updates a component property.
```typescript
import { Modal } from "../Modal/Modal.wcl.avt";
export class Example extends Aventus.WebComponent implements Aventus.DefaultComponent {
//#region static
//#endregion
//#region props
//#endregion
//#region variables
@Watch()
public txt?: string;
//#endregion
//#region constructor
//#endregion
//#region methods
/**
*
*/
protected async openModal() {
const confirm = new Modal();
confirm.question = "Do you accept?"
const isAccepted = await confirm.show();
if(isAccepted) {
this.txt = "Accepted"
}
else {
this.txt = "Refused"
}
}
//#endregion
}
```
--------------------------------
### Base Tailwind Web Component Styles (CSS)
Source: https://aventusjs.com/docs/advanced/template
Provides the basic CSS styling for the base Tailwind web component. This file is intended to be the entry point for Tailwind CSS integration within the Aventus framework.
```css
:host {}
```
--------------------------------
### AventusJs Component Style Example (SCSS)
Source: https://aventusjs.com/docs/overview
This snippet illustrates the style definition for an AventusJs component using SCSS. It uses the `:host` selector to apply styles to the component itself and demonstrates scoped styling for internal elements like the `span`.
```css
:host {
display: block;
span { color: blue; }
}
```
--------------------------------
### Create Basic RAM Class with Numeric Index Key in TypeScript
Source: https://aventusjs.com/docs/ram/create
Demonstrates the creation of a basic RAM class for a 'Person' data model using TypeScript. It extends Aventus.Data and implements Aventus.IData, defining a numeric 'id' as the index key. This setup is suitable for simple data storage with a numeric primary key.
```typescript
export class Person extends Aventus.Data implements Aventus.IData {
public id: number = 0;
public firstname!: string;
public lastname!: string;
}
```
```typescript
import { Person } from "./Person.data.avt";
export class PersonRAM extends Aventus.Ram implements Aventus.IRam {
/**
* Create a singleton to store data
*/
public static getInstance() {
return Aventus.Instance.get(PersonRAM);
}
/**
* @inheritdoc
*/
public override defineIndexKey(): keyof Person {
return 'id';
}
/**
* @inheritdoc
*/
protected override getTypeForData(objJson: Aventus.KeysObject | Person): new () => Person {
return Person;
}
}
```
```json
{
"module": "ExampleRAM",
"build": [
{
"name": "Main",
"src": [
"./src/*"
]
}
]
}
```
--------------------------------
### HTML Structure for Animation Example
Source: https://aventusjs.com/docs/lib/animation
Defines the HTML structure for the animation example web component. It includes a `div` element that will be animated and buttons to control the animation's start and speed. Event listeners are attached to the buttons.
```html
```
--------------------------------
### Index HTML for Inheritance Demo
Source: https://aventusjs.com/docs/wc/inheritance
The main HTML file for the 'Inheritance' demo. It sets up the basic HTML structure, includes meta tags for character set and viewport, and links to the demo JavaScript file.
```html
Inheritance
```
--------------------------------
### Configure Aventus Build Settings
Source: https://aventusjs.com/docs/state/create
This JSON configuration file sets up the Aventus build process. It defines the module name as 'StateExample' and specifies that the 'Main' build should include all files from the './src/' directory.
```json
{
"module": "StateExample",
"build": [
{
"name": "Main",
"src": [
'./src/*'
]
}
]
}
```
--------------------------------
### Property Initializers in AventusJS Data Classes
Source: https://aventusjs.com/docs/data/create
Demonstrates the requirement for all properties in an AventusJS data class to have an initializer. It shows examples of valid initializers and a commented-out example that would trigger an error.
```typescript
export class Person extends Aventus.Data implements Aventus.IData {
public id: number = 0; // This is ok
public firstname?: string; // This will trigger an error
public lastname: string = ''; // This is ok
public fullname?: string = undefined; // This is ok
public birthday!: string; // This is ok
}
```
--------------------------------
### HTML for State Management Demo Page
Source: https://aventusjs.com/docs/wc/state
This HTML file serves as the entry point for the state management demo. It includes basic meta tags, links to the compiled JavaScript file ('demo.js'), and embeds the custom web component '' which utilizes the state management features.
```html
State
```
--------------------------------
### SCSS Styling for Web Components
Source: https://aventusjs.com/docs/wc/create
Demonstrates basic SCSS styling for a web component. Styles must be wrapped within the :host{} selector to apply correctly to the component.
```css
:host {
color: red; // This ll change the behavior of the current webcomponent
}
```
--------------------------------
### Bind Child Field with Custom Synchronization - TypeScript
Source: https://aventusjs.com/docs/wc/binding
Defines a parent component 'Example' that synchronizes its 'value' property with a child component's field. This example uses the '@bind:val' syntax for synchronization.
```typescript
export class Example extends Aventus.WebComponent implements Aventus.DefaultComponent {
//#region static
//#endregion
//#region props
//#endregion
//#region variables
@Watch()
public value: string = "My value";
//#endregion
//#region constructor
//#endregion
//#region methods
//#endregion
}
```
--------------------------------
### Importing Predefined Aventus Library (JSON)
Source: https://aventusjs.com/docs/config/lib
Demonstrates how to import a predefined Aventus library, 'Aventus@UI', using an empty configuration object. Predefined libraries like Aventus@Main, Aventus@UI, Aventus@I18n, Aventus@Php, and Aventus@Sharp do not require a version when imported.
```json
{
"dependances": {
"Aventus@UI": {}
}
}
```
--------------------------------
### Configure Aventus Build Process
Source: https://aventusjs.com/docs/wc/create
Defines the build configuration for the Aventus project using 'aventus.conf.avt'. It specifies the module name, component prefix, and defines build targets for compiling components and handling static assets. The 'Main' build compiles source files from './src/*' into './dist/demo.js', and the 'Static' build copies files from './static/*' to './dist/'.
```json
{
"module": "ComponentExample",
"componentPrefix": "av",
"build": [
{
"name": "Main",
"src": [
"./src/*"
],
"compile": [
{
"output": "./dist/demo.js"
}
]
}
],
"static": [{
"name": "Static",
"input": "./static/*",
"output": "./dist/"
}]
}
```
--------------------------------
### Handle Validation with Aventus.VoidWithError
Source: https://aventusjs.com/docs/error/void
This example demonstrates how to use Aventus.VoidWithError to handle the outcome of a validation process. It checks for success and logs errors if validation fails.
```typescript
const validation = SomeValidation.validate(data);
if (validation.success) {
// Proceed with further operations
} else {
// Handle validation errors
console.error("Validation errors:", validation.errors);
}
```
--------------------------------
### HTML Structure for ResizeObserver Demo
Source: https://aventusjs.com/docs/lib/resize_observer
This HTML file sets up a basic page to demonstrate the ResizeObserver functionality. It includes a script tag to load the compiled demo JavaScript and a custom element `` which is likely where the ResizeObserver is applied.
```html
ResizeObserver
```
--------------------------------
### Aventus.ResultWithError Usage Example
Source: https://aventusjs.com/docs/error/result
Demonstrates how to use Aventus.ResultWithError to execute an operation and handle both success and error cases. It checks the 'success' property and accesses 'result' or 'errors' accordingly.
```typescript
const result = SomeOperation.execute();
if (result.success) {
// Handle successful result
console.log("Result:", result.result);
} else {
// Handle errors
console.error("Error:", result.errors[0].message);
}
```
--------------------------------
### Configure Aventus Build and Static Files
Source: https://aventusjs.com/docs/wc/create
This JSON configuration file sets up the Aventus build process and static file handling. It defines the module name, component prefix, build targets with source files and compilation outputs, and static file copying. This configuration is essential for compiling and serving Aventus projects.
```json
{
"module": "ComponentExample",
"componentPrefix": "av",
"build": [
{
"name": "Main",
"src": [
"./src/*"
],
"compile": [
{
"output": "./dist/demo.js"
}
]
}
],
"static": [{
"name": "Static",
"input": "./static/*",
"output": "./dist/"
}]
```
--------------------------------
### Aventus Build Configuration (JSON)
Source: https://aventusjs.com/docs/install/first_app
Configures the Aventus build process. It defines a 'Main' build that compiles all files in the './src/' directory to './dist/helloaventus.js'. It also includes a 'Static' build to export files from './static/' to './dist/'.
```json
{
"module": "HelloAventus",
"componentPrefix": "ha",
"build": [
{
"name": "Main",
"src": [
"./src/*"
],
"compile": [
{
"output": "./dist/helloaventus.js"
}
]
}
],
"static": [
{
"name": "Static",
"input": "./static/*",
"output": "./dist/"
}
]
}
```
--------------------------------
### Aventus Web Component Template (HTML)
Source: https://aventusjs.com/docs/wc/attribute
A simple HTML template for an Aventus web component, displaying 'I'm an example'. This is typically used within a *.wcv.avt file.
```html
I'm an example
```
--------------------------------
### Define Default Base URL in TypeScript
Source: https://aventusjs.com/docs/http/router
Demonstrates how to define the default base URL for an HttpRouter using TypeScript. This example shows subclassing HttpRouter and setting the URL in the defineOptions method.
```typescript
location.protocol + "//" + location.host
```
```typescript
export class PersonRouter extends Aventus.HttpRouter {
protected override defineOptions(options: Aventus.HttpRouterOptions): Aventus.HttpRouterOptions {
options.url = location.protocol + "//" + location.host + "/person";
return options;
}
}
// Usage:
const router = new PersonRouter();
const result = await router.get("/units");
```
--------------------------------
### Create a Basic Data Class in AventusJS
Source: https://aventusjs.com/docs/data/create
Demonstrates the creation of a simple 'Person' data class that extends 'Aventus.Data' and implements 'Aventus.IData'. This serves as a fundamental example for defining data structures.
```typescript
export class Person extends Aventus.Data implements Aventus.IData {
public id: number = 0;
}
```
--------------------------------
### HTML for Styling Demonstration
Source: https://aventusjs.com/docs/wc/style
An HTML file demonstrating the usage of AventusJS web components and their styling. It includes two instances of the 'av-example' component, one with the 'active' attribute and one without, showcasing how conditional styling based on attributes works. This file is typically served to view the components in a browser.
```html
Style
```
--------------------------------
### Main State Manager Implementation in TypeScript
Source: https://aventusjs.com/docs/wc/state
Implements a singleton StateManager for the Aventus application. It extends Aventus.StateManager and provides a static method to get its instance. No external dependencies beyond Aventus core.
```typescript
export class MainStateManager extends Aventus.StateManager implements Aventus.IStateManager {
/**
* Get the instance of the StateManager
*/
public static getInstance() {
return Aventus.Instance.get(MainStateManager);
}
}
```
--------------------------------
### Main HTML File (HTML)
Source: https://aventusjs.com/docs/install/first_app
The main HTML file for the 'Hello Aventus' application. It sets up the basic HTML structure, includes the compiled 'helloaventus.js' script, and renders the custom web component ''.
```html
Hello Aventus
```
--------------------------------
### Configure Global Aventus Router Settings
Source: https://aventusjs.com/docs/ui/router
Globally configures default behaviors for the Aventus Router. This example sets a custom 404 page and enables automatic destruction of page components when they are no longer active.
```typescript
Router.configure({
page404: NotFoundPage,
destroyPage: true,
});
```
--------------------------------
### PressManager Initialization with Callbacks (TypeScript)
Source: https://aventusjs.com/docs/lib/press_manager
Demonstrates how to instantiate the PressManager class in TypeScript, configuring event handlers like 'onPress' for custom behavior. It requires the Aventus library and specifies the target element for event listeners.
```typescript
export class Example extends Aventus.WebComponent implements Aventus.DefaultComponent {
//#region static
//#endregion
//#region props
//#endregion
//#region variables
@ViewElement()
protected buttonEl!: HTMLButtonElement;
//#endregion
//#region constructor
//#endregion
//#region methods
/**
*
*/
protected onPress() {
alert("Press with @press");
}
protected override postCreation(): void {
new Aventus.PressManager({
element: this.buttonEl,
onPress: () => {
alert("Press with Aventus.PressManager");
}
});
}
//#endregion
}
```
--------------------------------
### Create Base Tailwind Web Component (TypeScript)
Source: https://aventusjs.com/docs/advanced/template
Defines the base web component class 'Tailwind' that other components will inherit from. This component is designed to integrate with Tailwind CSS. It implements Aventus.DefaultComponent and extends Aventus.WebComponent.
```typescript
/**
* This class is the root for all components using tailwind
*/
export class Tailwind extends Aventus.WebComponent implements Aventus.DefaultComponent {
//#region static
//#endregion
//#region props
//#endregion
//#region variables
//#endregion
//#region constructor
//#endregion
//#region methods
//#endregion
}
```
--------------------------------
### Main HTML Page for Callback Demo (HTML)
Source: https://aventusjs.com/docs/lib/callback
The main HTML file for the Callback demo. It sets up the page title, includes a script for demo functionality, and defines custom Aventus elements for emitter and receiver.
```html
Callback
```
--------------------------------
### HTML Page Structure (HTML)
Source: https://aventusjs.com/docs/wc/inheritance
This HTML file sets up a basic web page structure, including meta tags, a title, and a script reference to 'demo.js'. It also includes a custom AventusJS component, ``, demonstrating its usage.
```html
Inheritance
```
--------------------------------
### Handle Unmapped Validation Errors (TypeScript)
Source: https://aventusjs.com/docs/ui/form
Provides an example of a callback function to handle validation errors that are not associated with any registered UI input element. This is useful for logging or displaying global errors.
```typescript
handleValidateNoInputError: (errors) => {
console.warn("Unmapped validation errors:", errors);
}
```
--------------------------------
### Create a Web Component in a Single File (Aventus)
Source: https://aventusjs.com/docs/wc/create
This snippet demonstrates creating an Aventus web component within a single '.wc.avt' file. It includes the script for the component's logic, the template for its HTML structure, and the style for its presentation. The component extends Aventus.Component and implements Aventus.DefaultComponent.
```html
```
--------------------------------
### Importing Libraries with Specific URIs (JSON)
Source: https://aventusjs.com/docs/config/lib
Shows how to import libraries by specifying their exact file URIs. This allows importing local files (e.g., './myLibs/Lib1@Main.package.avt') or files from specific paths (e.g., 'C:\myLibs\Lib2@Main.package.avt'). The 'uri' property is crucial here.
```json
{
"dependances": {
"Lib1@Main": {
"uri": "./myLibs/Lib1@Main.package.avt"
},
"Lib2@Main": {
"uri": "C:\\myLibs\\Lib2@Main.package.avt"
}
}
}
```
--------------------------------
### Advanced Usage with Custom Router - TypeScript
Source: https://aventusjs.com/docs/http/route
An example showcasing advanced usage by extending both HttpRouter and HttpRoute. SettingsRouter customizes the base URL, and SettingsRoute defines methods for saving and retrieving settings, utilizing the custom router.
```typescript
export class SettingsRouter extends Aventus.HttpRouter {
protected override defineOptions(options: Aventus.HttpRouterOptions): Aventus.HttpRouterOptions {
options.url = location.protocol + "//" + location.host + "/settings";
return options;
}
}
export class SettingsRoute extends Aventus.HttpRoute {
public constructor(router?: Aventus.HttpRouter) {
super(router ?? new SettingsRouter());
}
@BindThis()
public async save(body: Settings | FormData): Promise {
const request = new Aventus.HttpRequest(`${this.getPrefix()}/save`, Aventus.HttpMethod.POST);
request.setBody(body);
return await request.queryVoid(this.router);
}
@BindThis()
public async get(): Promise> {
const request = new Aventus.HttpRequest(`${this.getPrefix()}/get`, Aventus.HttpMethod.GET);
return await request.queryJSON(this.router);
}
}
```
--------------------------------
### Basic Row and Column Layout (HTML)
Source: https://aventusjs.com/docs/ui/col_row
Demonstrates the fundamental usage of and to create a two-column layout. Each column takes up half the available space within the row.
```html
Column 1Column 2
```
--------------------------------
### AventusJs Component Logic Example (TypeScript)
Source: https://aventusjs.com/docs/overview
This snippet demonstrates the logic part of an AventusJs component using TypeScript. It defines a 'Counter' component with a reactive 'count' property and an 'increment' method. The `@Property()` decorator synchronizes the 'count' with HTML attributes.
```typescript
export class Counter extends Aventus.WebComponent implements Aventus.DefaultComponent {
@Property()
private count: number = 0; // Syncs with
private increment() {
this.count++;
}
}
```
--------------------------------
### Create Global Themes with *.gs.avt Files (CSS)
Source: https://aventusjs.com/docs/wc/style
Illustrates the creation of a global style file (*.gs.avt) for defining project-wide variables. These files should be placed in the 'static' directory and declare global properties within the :root selector, such as --primary-color. This practice centralizes theme definitions for consistent styling across the application.
```css
:root {
--primary-color: red;
}
```
--------------------------------
### Generated Tailwind Component (Web Component Logic)
Source: https://aventusjs.com/docs/advanced/template
This TypeScript file represents a generated Tailwind CSS component named 'NewComp'. It follows the standard structure for Aventus components, extending the Tailwind base class and implementing Aventus.DefaultComponent.
```typescript
import { Tailwind } from '@/Tailwind/Tailwind.wcl.avt'
export class NewComp extends Tailwind implements Aventus.DefaultComponent {
//#region static
//#endregion
//#region props
//#endregion
//#region variables
//#endregion
//#region constructor
//#endregion
//#region methods
//#endregion
}
```
--------------------------------
### Configure Aventus Build in JSON
Source: https://aventusjs.com/docs/ram/listen_changes
Configuration file for the Aventus build process. It specifies the module name as 'ExampleRAM' and defines a build target named 'Main' that includes all files in the './src/' directory.
```json
{
"module": "ExampleRAM",
"build": [
{
"name": "Main",
"src": [
"./src/*"
]
}
]
}
```
--------------------------------
### Configure Aventus Build (TypeScript/JSON)
Source: https://aventusjs.com/docs/advanced/npm_export
Sets up the Aventus build configuration, specifying the module name, component prefix, and build output paths for both development and npm deployment.
```typescript
{
"module": "test",
"componentPrefix": "av",
"build": [
{
"name": "Main",
"src": [
"./src/*"
],
"compile": [
{
"output": "./dist/test.js",
"outputNpm": "./npm"
}
]
}
]
}
```
--------------------------------
### Configure PageForm Behavior (TypeScript)
Source: https://aventusjs.com/docs/ui/page_form
This example shows how to override the `pageConfig` method in a PageForm component to customize its behavior, such as enabling automatic loading states for submit buttons and automatic form submission when the Enter key is pressed.
```typescript
protected override pageConfig(): Aventus.Navigation.PageFormConfig {
return {
autoLoading: true, // if true, any registered submit buttons will automatically show a loading state during form submission. Default is true.
submitWithEnter: true, // if true, pressing Enter on the last registered form field automatically submits the form. Default is true.
}
}
```
--------------------------------
### Bind Child Field with Custom Synchronization - HTML
Source: https://aventusjs.com/docs/wc/binding
The HTML template for the 'Example' component, demonstrating the usage of the custom input component 'av-input' and binding its 'val' property to the parent's 'value'. It also displays the synchronized value.
```html
{{ this.value }}
```
--------------------------------
### Index HTML for Clock Demo
Source: https://aventusjs.com/docs/wc/create
The main HTML file for the Clock component demo. It includes the Aventus script and a placeholder for the custom 'av-clock' component.
```html
Aventus Demo
```
--------------------------------
### Configure Aventus Build and Static Files
Source: https://aventusjs.com/docs/lib/callback
This JSON configuration file outlines the build process and static file handling for an AventusJS project. It defines modules, component prefixes, build targets with source and compile outputs, and static file copying.
```json
{
"module": "Callback",
"componentPrefix": "av",
"build": [
{
"name": "Main",
"src": [
"./src/*"
],
"compile": [
{
"output": "./dist/demo.js"
}
]
}
],
"static": [{
"name": "Static",
"input": "./static/*",
"output": "./dist/"
}]
}
```
--------------------------------
### AventusJs Component View Example (HTML)
Source: https://aventusjs.com/docs/overview
This snippet shows the view definition for an AventusJs component using HTML. It displays the current count using template syntax `{{ this.count }}` and includes a button that triggers the 'increment' method on click using the `@click` directive.
```html
Current count: {{ this.count }}
```
--------------------------------
### Column Offsets and Centering (HTML)
Source: https://aventusjs.com/docs/ui/col_row
Shows how to use the 'offset' and 'offset_right' attributes to create spacing before or after a column, and the 'center' attribute to horizontally center content within a column.
```html
Offset by 2Offset to the rightCentered content
```
--------------------------------
### Define Local Component Structure (HTML)
Source: https://aventusjs.com/docs/wc/style
Defines the HTML structure for a local web component. This file contains the elements that will be rendered by the component. The example shows a simple paragraph with a 'title' class, which can then be targeted by the component's SCSS styles.
```html
I am an example
```
--------------------------------
### Generated Main Index JS (JavaScript)
Source: https://aventusjs.com/docs/advanced/npm_export
The main JavaScript entry point for the entire package, exporting the 'test' module which contains the Button component.
```javascript
import * as test from "./test/index.js";
export { test };
```
--------------------------------
### Aventus Web Component Logic (MyComponent.wcl.avt)
Source: https://aventusjs.com/docs/install/first_app
The TypeScript file defining the logic for a custom Aventus web component. It extends Aventus.WebComponent and implements Aventus.DefaultComponent, providing a structure for component methods and properties.
```typescript
export class MyComponent extends Aventus.WebComponent implements Aventus.DefaultComponent {
//#region static
//#endregion
//#region props
//#endregion
//#region variables
//#endregion
//#region constructor
//#endregion
//#region methods
//#endregion
}
```
--------------------------------
### Create RAM Class with String Index Key in TypeScript
Source: https://aventusjs.com/docs/ram/create
Illustrates how to create a RAM class for a 'Person' data model where the index key is a string. This example extends Aventus.GenericRam, allowing for non-numeric primary keys, and defines the 'id' field as a string. This is useful when unique identifiers are not numerical.
```typescript
export class Person extends Aventus.Data implements Aventus.IData {
public id: string = "";
public firstname!: string;
public lastname!: string;
}
```
```typescript
import { Person } from "./Person.data.avt";
// now the key to identify a person must be a string
export class PersonRAM extends Aventus.GenericRam implements Aventus.IRam {
/**
* Create a singleton to store data
*/
public static getInstance() {
return Aventus.Instance.get(PersonRAM);
}
/**
* @inheritdoc
*/
public override defineIndexKey(): keyof Person {
return 'id';
}
/**
* @inheritdoc
*/
protected override getTypeForData(objJson: Aventus.KeysObject | Person): new () => Person {
return Person;
}
}
```
```json
{
"module": "ExampleRAM",
"build": [
{
"name": "Main",
"src": [
"./src/*"
]
}
]
}
```
--------------------------------
### Implement Person RAM Singleton in TypeScript
Source: https://aventusjs.com/docs/ram/listen_changes
Implements the PersonRAM, a singleton class for managing Person data. It extends Aventus.Ram and implements Aventus.IRam, providing methods for getting an instance, defining an index key, and specifying the data type.
```typescript
import { Person } from "./Person.data.avt";
export class PersonRAM extends Aventus.Ram implements Aventus.IRam {
/**
* Create a singleton to store data
*/
public static getInstance() {
return Aventus.Instance.get(PersonRAM);
}
/**
* @inheritdoc
*/
public override defineIndexKey(): keyof Person {
return 'id';
}
/**
* @inheritdoc
*/
protected override getTypeForData(objJson: Aventus.KeysObject | Person): new () => Person {
return Person;
}
}
```
--------------------------------
### Aventus Configuration for ResizeObserver Module
Source: https://aventusjs.com/docs/lib/resize_observer
This JSON configuration file defines the build process for the ResizeObserver module within Aventus. It specifies the module name, component prefix, source files, compilation output, and static file handling. This configuration is essential for building and deploying the Aventus application.
```json
{
"module": "ResizeObserver",
"componentPrefix": "av",
"build": [
{
"name": "Main",
"src": [
"./src/*"
],
"compile": [
{
"output": "./dist/demo.js"
}
]
}
],
"static": [{
"name": "Static",
"input": "./static/*",
"output": "./dist/"
}]
}
```
--------------------------------
### HTML Structure for State Management Example
Source: https://aventusjs.com/docs/wc/state
This HTML snippet defines the basic structure for a web component that interacts with state management. It includes a div element to display logs and a button to trigger state changes, linking them to component methods via AventusJS directives.
```html
```
--------------------------------
### Basic Library Import Configuration (JSON)
Source: https://aventusjs.com/docs/config/lib
Defines a simple dependency on a library named 'MaterialIcon' with version '1.0.0'. This format is used for importing libraries from the Aventus store by default.
```json
{
"dependances": {
"MaterialIcon": "1.0.0"
}
}
```