WUI/JS Main Lib

https://github.com/wui-js/wuijs-main-lib
Admin
WUI/JS Main Lib, an acronym for "Web User Interface JavaScript library", is an open source...
Tokens:110,411
Snippets:591
Trust Score:1.6
License:Apache-2.0
Update:5 months ago
Show doc for...
Tokens:
Raw
### WUIBody Implementation Example

Source: https://github.com/wui-js/wuijs-main-lib/blob/main/docs/README-en.md

Example demonstrating the initialization and usage of the WUIBody class, including content import and preparation.

```APIDOC
## WUIBody Implementation Example

### Description
This example shows how to initialize `WUIBody` and use its `import` and `prepare` methods.

### HTML
```html
<section id="testContent"></section>
<div class="my-output"><pre>loading content...</pre></div>
```

### JavaScript
```javascript
const testContentLog = (content) => {
	const output = document.body.querySelector(".my-output");
	output.innerHTML = `<pre>${content}</pre>`;
}

const init = () => {
	const body = new WUIBody({
		//environment: "web",
		importDirectory: "./modules/",
		//importMode: "fetch",
		onCompleted: () => {
			body.prepare();
		},
		debug: true
	});
	body.import("testContent", "test/module", () => {
		testContentLog("test content loaded");
	});
}

window.addEventListener("DOMContentLoaded", init);
```

### Modules
#### ./modules/test/module.css
```css
.test a,
.test a:visited {
	text-decoration: none;
	font-size: 20px;
	color: blue;
}
```

#### ./modules/test/module.htm
```html
<section id="testContent" class="test">
	<a href="https://wuijs.dev" target="_blank">go to WUI/JS Project website!</a>
</section>
```

#### ./modules/test/module.js
```javascript
const testContentLog = (content) => {
	const output = document.body.querySelector(".my-output");
	output.innerHTML = `<pre>${content}</pre>`;
}
```
```

--------------------------------

### WUIBody Implementation Example

Source: https://github.com/wui-js/wuijs-main-lib/blob/main/README.md

Example demonstrating the implementation of the WUIBody module for importing content.

```APIDOC
## WUIBody Implementation Example

### Description
Example demonstrating the implementation of the WUIBody module for importing content.

### HTML
```html
<section id="testContent"></section>

<div class="my-output"><pre>loading content...</pre></div>
```

### JavaScript
```javascript
const testContentLog = (content) => {
	const output = document.body.querySelector(".my-output");
	output.innerHTML = `<pre>${content}</pre>`;
}

const init = () => {
	const body = new WUIBody({
		//environment: "web",
		importDirectory: "./modules/",
		//importMode: "fetch",
		onCompleted: () => {
			body.prepare();
		},
		debug: true
	});
	body.import("testContent", "test/module", () => {
		testContentLog("test content loaded");
	});
}

window.addEventListener("DOMContentLoaded", init);
```

### Module Files
#### CSS (`./modules/test/module.css`)
```css
.test a, .test a:visited {
	text-decoration: none;
	font-size: 20px;
	color: blue;
}
```

#### HTML (`./modules/test/module.htm`)
```html
<section id="testContent" class="test">
	<a href="https://wuijs.dev" target="_blank">go to WUI/JS Project website!</a>
</section>
```

#### JS (`./modules/test/module.js`)
```javascript
const testContentLog = (content) => {
	const output = document.body.querySelector(".my-output");
	output.innerHTML = `<pre>${content}</pre>`;
}
```
```

--------------------------------

### Install WUI/JS Library

Source: https://context7.com/wui-js/wuijs-main-lib/llms.txt

Install the WUI/JS library using npm or by cloning the GitHub repository and copying the source files.

```bash
# Install via npm
npm i @wui-js/main

# Or install from GitHub source
git clone https://git@github.com/wui-js/wuijs-main-lib.git
cp -r ./wuijs-main-lib/src/wui-js/ ./src/libraries/
```

--------------------------------

### Install WUI/JS using npm

Source: https://github.com/wui-js/wuijs-main-lib/blob/main/docs/README-es.md

This bash command installs the WUI/JS Main Library package using npm, making its resources available in the ./node_modules/@wui-js/main directory.

```bash
npm i @wui-js/main
```

--------------------------------

### Responsive HTML5 Setup

Source: https://github.com/wui-js/wuijs-main-lib/blob/main/docs/README-en.md

Recommends initializing responsive HTML5 for WUI components to ensure proper functionality across devices. This includes setting up the viewport meta tag in the HTML head.

```css
html,
body {
	height: 100%;
	margin: 0;
	padding: 0;
}

```

--------------------------------

### WUILanguage Initialization and Usage Example

Source: https://github.com/wui-js/wuijs-main-lib/blob/main/README.md

Example of how to initialize WUILanguage and load translations in a web page.

```APIDOC
## WUILanguage Initialization and Usage Example

### Description
Example of how to initialize WUILanguage and load translations in a web page.

### HTML Setup

Include the WUI Language script in your HTML head:
```html
<script type="text/javascript" src="./libraries/wui-js/main/language/wui-language-0.3.js"></script>
```

Define HTML elements with translation keys:
```html
<h1 class="wui-language" data-key="titles.test"></h1>
<div class="wui-language" data-key="texts.test"></div>
```

### JavaScript Initialization

Initialize the `WUILanguage` class and load translations:
```js
const init = () => {
	const language = new WUILanguage({
		// Optional properties can be uncommented and configured:
		// selector: ".wui-language",
		// directory: "./languages/",
		// sets: ["main"],
		lang: "en",
		// mode: "js",
		// dataKey: "key",
		// dataOutput: "text",
		onLoad: (...args) => {
			[lang, languages] = args;
			console.log("Language loaded:", lang, languages);
		}
	});

	let lang = language.lang;
	let languages = {};

	// Load translations (choose one option):
	language.load();                  // Option 1: Uses default properties
	// language.load("en");            // Option 2: Specify language
	// language.load("en", ["main"]);  // Option 3: Specify language and sets
}

window.addEventListener("DOMContentLoaded", init);
```

### Combining Language Sets

To load multiple language sets for the same language:

**Option 1: Update `sets` property and reload**:
```js
language.sets = ["main", "main2"];
language.load();
```

**Option 2: Pass combined sets as a parameter**:
```js
language.load("en", ["main", "main2"]);
```

### Dynamic Content in Translations

For dynamic content, use JavaScript template literals within JS language files:
```js
// In a JS language file:
mykey: `My ${variable} text`
```
```

--------------------------------

### Install WUI/JS from Source using Git

Source: https://github.com/wui-js/wuijs-main-lib/blob/main/docs/README-es.md

This bash command sequence demonstrates how to clone the WUI/JS Main Library repository from GitHub and copy its source files into a project's libraries directory.

```bash
git clone https://git@github.com/wui-js/wuijs-main-lib.git
cp -r ./wuijs-main-lib/src/wui-js/ ../src/libraries/
```

--------------------------------

### WUIFade Toggle Visibility Example

Source: https://context7.com/wui-js/wuijs-main-lib/llms.txt

Implement a practical example of toggling element visibility using WUIFade's prototype methods with an event listener.

```javascript
// Practical example: Toggle visibility
const toggleButton = document.getElementById("toggle");
let isVisible = false;

toggleButton.addEventListener("click", () => {
    if (isVisible) {
        element.wuiFadeout({ delay: 200 });
    } else {
        element.wuiFadein({ delay: 200, display: "flex" });
    }
    isVisible = !isVisible;
});
```

--------------------------------

### WUI Slider Implementation Example

Source: https://github.com/wui-js/wuijs-main-lib/blob/main/docs/README-es.md

Example of how to implement and use the WUI Slider in an HTML page.

```APIDOC
## WUI Slider Implementation Example

### Description
This section provides a complete example of integrating the WUI Slider into an HTML page, including HTML structure, CSS styling, and JavaScript initialization.

### HTML Structure

```html
<div class="wui-slider">
	<div class="body">
		<div class="slide slide1">Diapositiva 1</div>
		<div class="slide slide2">Diapositiva 2</div>
		<div class="slide slide3">Diapositiva 3</div>
	</div>
	<div class="paging dots"></div>
</div>

<nav>
	<button class="my-button prev">&#9204; enterior</button>
	<button class="my-button next">siguiente &#9205;</button>
</nav>

<div class="my-output"></div>
```

### CSS Styling

```css
.my-slider {
	width: 100%;
	max-height: 400px;
}

.my-slider .slide {
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
}

.slide1 {
	background-color: #FF5C8A;
}

.slide2 {
	background-color: #8B5CF6;
}

.slide3 {
	background-color: #4DA3FF;
}

nav {
	display: flex;
	width: 100%;
	justify-content: center;
	margin-top: 10px;
	gap: 10px;
}

.my-output {
	width: 100%;
	height: 40px;
	margin: 10px;
	font-family: monospace;
}
```

### JavaScript Initialization

```js
const init = () => {
	const prevButton = document.body.querySelector(".my-button.prev");
	const nextButton = document.body.querySelector(".my-button.next");
	const output = document.body.querySelector(".my-output");
	const slider = new WUISlider({
		selector: ".wui-slider.my-slider",
		onChange: (index) => {
			output.textContent = `Cambio a: ${index}`;
		}
	});
	sslider.init();

	prevButton.addEventListener("click", () => {
		slider.prev();
	});

	nextButton.addEventListener("click", () => {
		slider.next();
	});
}

window.addEventListener("DOMContentLoaded", init);
```

### Important Notes

> [!IMPORTANT]
> If the selector defines an element that is not of type `HTMLDivElement`, the object will not be initialized.

> [!TIP]
> You can review this functional example on CodeSandbox at the link: [https://codesandbox.io/p/sandbox/github/wui-js/wuijs-lab/tree/main/demos/main/slider/basic](https://codesandbox.io/p/sandbox/github/wui-js/wuijs-lab/tree/main/demos/main/slider/basic).
```

--------------------------------

### Install WUI/JS from Source using ZIP Download

Source: https://github.com/wui-js/wuijs-main-lib/blob/main/docs/README-es.md

This bash command sequence shows how to download the WUI/JS Main Library as a ZIP archive, extract it, and then copy the source files into a project's libraries directory.

```bash
wget https://github.com/wui-js/wuijs-main-lib/archive/refs/heads/main.zip
unzip main.zip
cp -r ./wuijs-main-lib-main/src/wui-js/ ../src/libraries/
```

--------------------------------

### Responsive HTML5 Setup

Source: https://github.com/wui-js/wuijs-main-lib/blob/main/docs/README-en.md

Provides the basic HTML structure for a responsive page, including the viewport meta tag for optimal display on various devices. This is recommended for all WUI component implementations.

```html
<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover">
	...
</head>
<body>
	...
</body>
</html>

```

--------------------------------

### WUI Slider Implementation Example

Source: https://github.com/wui-js/wuijs-main-lib/blob/main/README.md

Example of how to implement and use the WUI Slider component in HTML, CSS, and JavaScript.

```APIDOC
## WUI Slider Implementation Example

### HTML Header

```html
<link type="text/css" rel="stylesheet" href="./libraries/wui-js/main/slider/wui-slider-0.4.css">
<script type="text/javascript" src="./libraries/wui-js/main/slider/wui-slider-0.4.js"></script>
```

### HTML Code

```html
<div class="wui-slider my-slider">
	<div class="body">
		<div class="slide slide1">Slide 1</div>
		<div class="slide slide2">Slide 2</div>
		<div class="slide slide3">Slide 3</div>
	</div>
	<div class="paging dots"></div>
</div>

<nav>
	<button class="my-button prev">&#9204; prev</button>
	<button class="my-button next">next &#9205;</button>
</nav>

<div class="my-output"></div>
```

### CSS Code

```css
html,
body {
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-size: 14px;
}

.my-slider {
	width: 100%;
	max-height: 400px;
}

.my-slider .slide {
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
}

.slide1 {
	background-color: #FF5C8A;
}

.slide2 {
	background-color: #8B5CF6;
}

.slide3 {
	background-color: #4DA3FF;
}

nav {
	display: flex;
	width: 100%;
	justify-content: center;
	margin-top: 10px;
	gap: 10px;
}

.my-output {
	width: 100%;
	height: 40px;
	margin: 10px;
	font-family: monospace;
}
```

### JS Code

```js
const init = () => {
	const prevButton = document.body.querySelector(".my-button.prev");
	const nextButton = document.body.querySelector(".my-button.next");
	const output = document.body.querySelector(".my-output");
	const slider = new WUISlider({
		selector: ".wui-slider.my-slider",
		onChange: (index) => {
			output.textContent = `Change to: ${index}`;
		}
	});
	slider.init();
	prevButton.addEventListener("click", () => {
		slider.prev();
	});
	nextButton.addEventListener("click", () => {
		slider.next();
	});
}

window.addEventListener("DOMContentLoaded", init);
```

### Important Notes

> [!IMPORTANT]
> If the selector defines an element that is not of type `HTMLDivElement`, the object will not be initialized.

### Tips

> [!TIP]
> You can check this functional example on CodeSandbox at the link: [https://codesandbox.io/p/sandbox/github/wui-js/wuijs-lab/tree/main/demos/main/slider/basic](https://codesandbox.io/p/sandbox/github/wui-js/wuijs-lab/tree/main/demos/main/slider/basic).
```

--------------------------------

### NPM Installation Path for WUI JS

Source: https://github.com/wui-js/wuijs-main-lib/blob/main/README.md

If WUI is installed via NPM, use this path for including JavaScript files. This differs from the GitHub installation path.

```html
<script src="node_modules/@wui-js/main/button/wui-button-0.3.js"></script>
```

--------------------------------

### Language File Formats

Source: https://github.com/wui-js/wuijs-main-lib/blob/main/README.md

Examples and requirements for JS and JSON language files.

```APIDOC
## Language File Formats

### Description
Examples and requirements for JS and JSON language files.

### JS Language File Format

- **Requirement**: Must be initialized with the `return` keyword followed by a JavaScript object.

**Example (`main-en.js`)**:
```js
return {
	titles: {
		test: "Test title"
	},
	texts: {
		test: "Test text"
	}
};
```

### JSON Language File Format

**Example (`main-en.json`)**:
```json
{
	"titles": {
		"test": "Test title"
	},
	"texts": {
		"test": "Test text"
	}
}
```

### File Naming Convention

Language files must follow the pattern `{set}-{lang}.{mode}` (e.g., `main-en.js`, `messages-es.json`).
```

--------------------------------

### Language File Formats

Source: https://github.com/wui-js/wuijs-main-lib/blob/main/docs/README-en.md

Examples and specifications for JS and JSON language files.

```APIDOC
## Language File Formats

### Description
This section details the structure and format for language files, supporting both JavaScript (`.js`) and JSON (`.json`) formats.

### JS Language File Format

#### Implementation
JS code file `main-en.js`:

```js
return {
	titles: {
		test: "Test title"
	},
	texts: {
		test: "Test text"
	}
};
```

> [!IMPORTANT]
> If `js` is used as the format for language files, said file must be initialized by the `return` keyword followed by a `{}` object.

### JSON Language File Format

#### Implementation
JSON code file `main-en.json`:

```json
{
	"titles": {
		"test": "Test title"
	},
	"texts": {
		"test": "Test text"
	}
}
```

### File Naming Convention

> [!IMPORTANT]
> The language file must be in the path `./languages/{set}-{lang}.{mode}` (e.g., `./languages/main-en.js` or `./languages/main-en.json`) depending on the set, language, and mode used. It is important that language files follow this naming convention for the library to import them correctly.
```

--------------------------------

### Basic CSS Setup for WUI Components

Source: https://github.com/wui-js/wuijs-main-lib/blob/main/README.md

This CSS sets up basic page styles, including body margins, font, and navigation layout. It also applies custom classes for the selectpicker and output elements.

```css
html,
body {
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-size: 14px;
}

nav {
	display: flex;
	margin: 10px;
	align-items: center;
	gap: 10px;
}

.my-selectpicker {
	max-width: 200px;
}

.my-output {
	font-family: monospace;
}

```

--------------------------------

### Basic CSS for WUI Timepicker Example

Source: https://github.com/wui-js/wuijs-main-lib/blob/main/README.md

This CSS sets up basic page and navigation styles, and customizes the WUI Timepicker element and output display.

```css
html,
body {
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-size: 14px;
}

nav {
	display: flex;
	margin: 10px;
	align-items: center;
	gap: 10px;
}

.my-timepicker {
	max-width: 90px;
}

.my-output {
	font-family: monospace;
}

```

--------------------------------

### Basic HTML Structure for Fade Animation Example

Source: https://github.com/wui-js/wuijs-main-lib/blob/main/README.md

This HTML sets up navigation buttons to trigger fade animations and a target div element. It also includes the necessary script tag for the WUI-JS fade library.

```html
<script type="text/javascript" src="./libraries/wui-js/main/fade/wui-fade-0.2.js"></script>
```

```html
<nav>
	<button class="my-button fadein">fade-in</button>
	<button class="my-button fadeout">fade-out</button>
</nav>

<div id="myElement" class="my-element"></div>
```

--------------------------------

### Initialize and Configure WUIPaging

Source: https://context7.com/wui-js/wuijs-main-lib/llms.txt

Instantiate WUIPaging with options for navigation and callbacks for page changes. Call init() to activate.

```javascript
const paging = new WUIPaging({
    selector: ".wui-paging.my-paging",
    index: 0,
    dataTarget: "target",
    onSelect: (inputIndex, inputTarget, outputIndex, outputTarget) => {
        console.log(`Navigating from ${outputTarget} to ${inputTarget}`);
    },
    onChange: (index, target) => {
        console.log(`Now showing: ${target} (index: ${index})`);
        updateNavigation(target);
    },
    onBack: (index, target) => {
        console.log(`Went back to: ${target}`);
    },
    onScrolling: (scrollTop) => {
        console.log(`Page scrolled to: ${scrollTop}px`);
    }
});

paging.init();
```

--------------------------------

### Initialize WUIColorpicker

Source: https://context7.com/wui-js/wuijs-main-lib/llms.txt

Sets up a color picker component with palette support.

```javascript
const colorpicker = new WUIColorpicker({
    selector: ".wui-colorpicker.my-color",
    value: "#1e90ff",
    lang: "en",
    enabled: true,
    onChange: (value) => {
        console.log("Color selected:", value);
        document.body.style.backgroundColor = value;
    }
});

colorpicker.init();
```

```html
<div class="wui-colorpicker my-color">
    <input type="color" name="theme_color" value="#1e90ff">
</div>
```

--------------------------------

### Initialize and Use WUILoader

Source: https://context7.com/wui-js/wuijs-main-lib/llms.txt

Instantiate WUILoader with custom options for styling and size. Use init() to apply it to elements and getElements() to retrieve them.

```javascript
const loader = new WUILoader({
    selector: ".wui-loader",
    style: "ring",      // "ring", "dualring", "spinner", "roller", "ellipsis", "grid"
    size: 60,           // Size in pixels
    dataStyle: "style", // data-* attribute for style
    dataSize: "size"    // data-* attribute for size
});

loader.init();

// Get all loader elements
const elements = loader.getElements();
```

--------------------------------

### Initialize and Use WUIHead

Source: https://github.com/wui-js/wuijs-main-lib/blob/main/docs/README-es.md

JavaScript code to initialize WUIHead and set the document title, application name, and theme color. Ensure the WUIHead library is included.

```javascript
const init = () => {
	const head = new WUIHead();
	head.setTitle("Título de prueba");
	head.setApplicationName("Aplicación de prueba");
	head.setThemeColor("#1e90ff");
}

window.addEventListener("DOMContentLoaded", init);
```

--------------------------------

### WUICookie API

Source: https://github.com/wui-js/wuijs-main-lib/blob/main/docs/README-en.md

The WUICookie library provides methods for encoding, setting, getting, and removing cookies.

```APIDOC
## WUICookie Methods

### encode

Encodes the string of a cookie.

### Method

`encode(name, value[, options])`

### Parameters

#### Path Parameters

*   **name** (string) - Required - The name of the cookie.
*   **value** (string) - Required - The value of the cookie.
*   **options** (object) - Optional - Additional options for encoding.

### Response

#### Success Response (200)

*   **string** - The encoded string of the cookie.

### encode Example

```javascript
const cookie = new WUICookie();
const encoded = cookie.encode('mycookie', 'myvalue');
console.log(encoded); // Output: "mycookie=myvalue"
```

## WUICookie Methods

### set

Adds or modifies a cookie and returns its encoded string.

### Method

`set(name, value[, options])`

### Parameters

#### Path Parameters

*   **name** (string) - Required - The name of the cookie.
*   **value** (string) - Required - The value of the cookie.
*   **options** (object) - Optional - Additional options for setting the cookie.

### Response

#### Success Response (200)

*   **string** - The encoded string of the cookie.

### set Example

```javascript
const cookie = new WUICookie();
const encoded = cookie.set('mycookie', 'myvalue');
console.log(encoded); // Output: "mycookie=myvalue"
```

## WUICookie Methods

### get

Reads the contents of a cookie by its name.

### Method

`get(name)`

### Parameters

#### Path Parameters

*   **name** (string) - Required - The name of the cookie to retrieve.

### Response

#### Success Response (200)

*   **string** - The value of the cookie.

### get Example

```javascript
const cookie = new WUICookie();
const value = cookie.get('mycookie');
console.log(value); // Output: "myvalue"
```

## WUICookie Methods

### remove

Removes a cookie by its name.

### Method

`remove(name)`

### Parameters

#### Path Parameters

*   **name** (string) - Required - The name of the cookie to remove.

### Response

#### Success Response (200)

*   **void** - This method does not return a value.

### remove Example

```javascript
const cookie = new WUICookie();
cookie.remove('mycookie');
```
```

--------------------------------

### Get WUILoader Elements

Source: https://github.com/wui-js/wuijs-main-lib/blob/main/docs/README-en.md

The getElements method returns a NodeList of all HTML elements that are containers for loading animations.

```javascript
getElements()
```

--------------------------------

### Initialize and Configure WUIModal

Source: https://context7.com/wui-js/wuijs-main-lib/llms.txt

Create a WUIModal instance with various event handlers for managing modal behavior. Call init() to prepare the modal.

```javascript
const modal = new WUIModal({
    selector: ".wui-modal.my-modal",
    openDelay: 200,
    onStartOpen: () => console.log("Opening..."),
    onOpen: () => console.log("Opened!"),
    onMaximize: () => console.log("Maximized!"),
    onScrolling: (scrollTop) => console.log(`Scrolled to ${scrollTop}px`),
    onStartClose: () => console.log("Closing..."),
    onClose: () => console.log("Closed!"),
    onBack: () => console.log("Back button pressed")
});

modal.init();
```

--------------------------------

### Field Value and Type Manipulation

Source: https://github.com/wui-js/wuijs-main-lib/blob/main/README.md

Methods for getting and setting field values, types, and enabling/disabling fields.

```APIDOC
## GET /form/field/{name}/value

### Description
Retrieves the value of the input field or output field.

### Method
GET

### Endpoint
/form/field/{name}/value

### Parameters
#### Path Parameters
- **name** (string) - Required - The name of the field.

### Response
#### Success Response (200)
- **value** (string) - The value of the field.

#### Response Example
```json
{
  "value": "field value"
}
```

## POST /form/field/{name}/type

### Description
Sets the type of the input field using the `type` attribute of the `<input>` tag.

### Method
POST

### Endpoint
/form/field/{name}/type

### Parameters
#### Path Parameters
- **name** (string) - Required - The name of the field.
#### Request Body
- **type** (string) - Required - The desired input type (e.g., 'text', 'password', 'email').

### Request Example
```json
{
  "type": "email"
}
```

### Response
#### Success Response (200)
- **message** (string) - Confirmation message.

#### Response Example
```json
{
  "message": "Field type updated successfully."
}
```

## POST /form/field/{name}/value

### Description
Sets the value of the input field.

### Method
POST

### Endpoint
/form/field/{name}/value

### Parameters
#### Path Parameters
- **name** (string) - Required - The name of the field.
#### Request Body
- **value** (string) - Required - The new value for the field.

### Request Example
```json
{
  "value": "new field value"
}
```

### Response
#### Success Response (200)
- **message** (string) - Confirmation message.

#### Response Example
```json
{
  "message": "Field value updated successfully."
}
```

## POST /form/field/{name}/data

### Description
Sets the value of the HTML element in the data section of the field.

### Method
POST

### Endpoint
/form/field/{name}/data

### Parameters
#### Path Parameters
- **name** (string) - Required - The name of the field.
#### Request Body
- **value** (mixed) - Required - The new value for the data element.

### Request Example
```json
{
  "value": "some data"
}
```

### Response
#### Success Response (200)
- **message** (string) - Confirmation message.

#### Response Example
```json
{
  "message": "Field data updated successfully."
}
```

## POST /form/field/{name}/text

### Description
Sets the content of the auxiliary text HTML element.

### Method
POST

### Endpoint
/form/field/{name}/text

### Parameters
#### Path Parameters
- **name** (string) - Required - The name of the field.
#### Request Body
- **value** (string) - Required - The new text content.

### Request Example
```json
{
  "value": "updated text"
}
```

### Response
#### Success Response (200)
- **message** (string) - Confirmation message.

#### Response Example
```json
{
  "message": "Field text updated successfully."
}
```

## POST /form/field/{name}/enabled

### Description
Enables or disables the field identified by the input field name.

### Method
POST

### Endpoint
/form/field/{name}/enabled

### Parameters
#### Path Parameters
- **name** (string) - Required - The name of the field.
#### Request Body
- **value** (boolean) - Required - `true` to enable, `false` to disable.

### Request Example
```json
{
  "value": false
}
```

### Response
#### Success Response (200)
- **message** (string) - Confirmation message.

#### Response Example
```json
{
  "message": "Field enabled status updated successfully."
}
```
```

--------------------------------

### Initialize and Manage WUIList

Source: https://context7.com/wui-js/wuijs-main-lib/llms.txt

Configures a data list with pagination, custom row buttons, and dynamic row management. Requires a corresponding HTML container element.

```javascript
const list = new WUIList({
    selector: ".wui-list.my-list",
    paging: 10,  // Rows per page (0 = no pagination)
    columns: [
        { width: 50, align: "center" },
        { width: "auto", align: "left" },
        { width: 100, align: "right" }
    ],
    rows: [
        { id: "user1", data: ["#1", "John Doe", "$1,200"], enabled: true },
        { id: "user2", data: ["#2", "Jane Smith", "$980"], enabled: true },
        { id: "user3", data: ["#3", "Bob Wilson", "$1,500"], innerContent: "Additional details here", innerOpened: false }
    ],
    buttons: [{
        iconClass: "wui-icon pencil-fill",
        bgcolor: "#1e90ff",
        enabled: (index, id) => index !== 1,  // Disable for specific row
        onClick: (index, id) => {
            console.log(`Edit row ${index}, id: ${id}`);
            editItem(id);
        }
    }, {
        iconClass: "wui-icon trash-fill",
        bgcolor: "#f44343",
        onClick: (index, id) => {
            console.log(`Delete row ${index}, id: ${id}`);
            deleteItem(id);
        }
    }],
    buttonsStyle: "round",  // "round" or "stretch"
    onPrint: (page, pages, total) => {
        console.log(`Page ${page}/${pages}, Total: ${total}`);
        updatePagingInfo(page, pages, total);
    },
    onClick: (index, id, enabled, options) => {
        if (enabled) {
            console.log(`Row clicked: ${id}`);
            showDetails(id);
        }
    }
});

list.init();

// Add items dynamically
list.addRow({ id: "user4", data: ["#4", "Alice Brown", "$2,000"] });

// Pagination controls
list.firstPage();
list.prevPage();
list.nextPage();
list.lastPage();
list.print(2);  // Go to specific page

// Check pagination state
if (list.isPrevEnable()) { /* show prev button */ }
if (list.isNextEnable()) { /* show next button */ }

// Row controls
list.enableRow(0, false);      // Disable first row
list.openInnerRow(2, true);    // Open inner content

// Destroy
list.destroy();
```

--------------------------------

### Initialize WUIDatepicker

Source: https://context7.com/wui-js/wuijs-main-lib/llms.txt

Sets up a calendar-based date picker with custom formatting and change callbacks.

```javascript
const datepicker = new WUIDatepicker({
    selector: ".wui-datepicker.my-date",
    value: "",
    format: "yyyy-mm-dd",
    lang: "en",
    openDirection: "down",
    enabled: true,
    onOpen: (value) => console.log("Opened:", value),
    onChange: (value) => {
        console.log("Date selected:", value);
        validateDateRange(value);
    }
});

datepicker.init();

// Get/set value
datepicker.value = "2024-06-15";
const selectedDate = datepicker.value;

// Control
datepicker.open();
datepicker.close();
datepicker.toggle();
```

```html
<div class="wui-datepicker my-date">
    <input type="date" name="birthdate" value="">
</div>
```

--------------------------------

### JSON Language File Format

Source: https://github.com/wui-js/wuijs-main-lib/blob/main/README.md

Example of a language file in JSON format, containing translations for titles and texts.

```json
{
	"titles": {
		"test": "Test title"
	},
	"texts": {
		"test": "Test text"
	}
}
```

--------------------------------

### WUITimepicker Constructor and Properties

Source: https://github.com/wui-js/wuijs-main-lib/blob/main/docs/README-en.md

Details on how to initialize the WUITimepicker and its configurable properties.

```APIDOC
## WUITimepicker Constructor

### Description
Initializes a new instance of the WUITimepicker.

### Method
`WUITimepicker([properties])`

### Parameters
#### Arguments
- **properties** (object) - *optional* - An object containing initial configuration properties for the time picker.

## WUITimepicker Properties

### Description
Properties that can be set or retrieved to configure the WUITimepicker.

#### Path Parameters
- **selector** (string) - *get/set* - CSS selector that defines the HTML container element of the object. Defaults to `".wui-timepicker"`.
- **value** (string) - *get/set* - Selected time in `hh:mm` format (24 hours). Defaults to `""`.
- **min** (string) - *get/set* - Minimum allowed time in `hh:mm` format. Defaults to `"00:00"`.
- **max** (string) - *get/set* - Maximum allowed time in `hh:mm` format. Defaults to `"23:59"`.
- **lang** (string) - *get/set* - Component language. Defaults to `"en"`. Values: `"de"`, `"en"`, `"es"`.
- **texts** (object) - *get/set* - Custom texts for the component buttons and messages. Defaults to `{}`.
- **openDirection** (string) - *get/set* - Opening direction of the time picker. Defaults to `"down"`. Values: `"up"`, `"down"`.
- **boxAlign** (string) - *get/set* - Horizontal alignment of the calendar relative to the input. Defaults to `"left"`. Values: `"left"`, `"center"`, `"right"`.
- **enabled** (boolean) - *get/set* - Defines whether the input is enabled. Defaults to `true`.
- **onOpen** (function) - *get/set* - Function run when the time picker is opened. Receives the current selected value. Defaults to `null`.
- **onChange** (function) - *get/set* - Function run when the selected value changes. Receives the new selected value. Defaults to `null`.
```

--------------------------------

### Get WUIPaging Information

Source: https://context7.com/wui-js/wuijs-main-lib/llms.txt

Retrieve the current page index, target, all page elements, or a specific page element.

```javascript
// Get page info
const currentIndex = paging.getIndex();
const currentTarget = paging.getTarget();
const allPages = paging.getPages();
const specificPage = paging.getPage("settings");
```

--------------------------------

### Cookie Management with WUICookie

Source: https://github.com/wui-js/wuijs-main-lib/blob/main/README.md

Demonstrates setting, getting, and encoding cookies using the WUICookie class. Ensure the WUICookie library is included.

```js
const init = () => {
	const output = document.body.querySelector(".my-output");
	const cookie = new WUICookie({
		//domain: location.hostname,
		//path: "./",
		//minutes: 365*24*60,
		//overssl: false
	});
	const encode = cookie.set("mycookie", "test");
	const value = cookie.get("mycookie");
	output.innerHTML = "<pre>"
		+ `Encoded value : ${encode}\n`
		+ `Readed value  : ${value}\n`
		+ "</pre>";
}

window.addEventListener("DOMContentLoaded", init);
```

--------------------------------

### Initialize WUIBody and Import Content

Source: https://github.com/wui-js/wuijs-main-lib/blob/main/README.md

Initializes the WUIBody component with specified import settings and triggers content import. The 'prepare' method is called upon completion of content loading.

```javascript
const init = () => {
	const body = new WUIBody({
		//environment: "web",
		importDirectory: "./modules/",
		//importMode: "fetch",
		onCompleted: () => {
			body.prepare();
		},
		debug: true
	});
	body.import("testContent", "test/module", () => {
		testContentLog("test content loaded");
	});
}

window.addEventListener("DOMContentLoaded", init);
```

--------------------------------

### WUIDatepicker Constructor and Properties

Source: https://github.com/wui-js/wuijs-main-lib/blob/main/README.md

Information about how to instantiate the WUIDatepicker and its configurable properties.

```APIDOC
## WUIDatepicker Component

### Description
Component for the implementation of date type data inputs based on HTML element `<input type="date">`.

### Constructor
`WUIDatepicker([properties])`

Arguments:
* **properties:** `object` *optional* - An object containing initial configuration properties.

### Properties

#### Selector
- **selector** (`string`) - Default: `".wui-datepicker"` - (get/set) CSS selector that defines the HTML container element of the object. If more than one element matches the selector, only the first match will be included.

#### Locales
- **locales** (`string`) - Default: `"en-US"` - (get/set) Locale code in `<ISO 639-1>-<ISO 3166-1 alpha-2>` format. For example: `es-CL`, `en-US`, `fr-FR`, etc.

#### Value
- **value** (`string`) - Default: `""` - (get/set) Selected date in `yyyy-mm-dd` format.

#### Minimum Date
- **min** (`string`) - Default: `""` - (get/set) Minimum allowed date in `yyyy-mm-dd` format.

#### Maximum Date
- **max** (`string`) - Default: `""` - (get/set) Maximum allowed date in `yyyy-mm-dd` format.

#### Custom Month Names
- **monthsNames** (`array`) - Default: `[]` - (get/set) Custom names for months. If defined, overwrites names generated by `locales`.

#### Custom Week Day Names
- **weekDaysNames** (`array`) - Default: `[]` - (get/set) Custom names for days of the week. If defined, overwrites names generated by `locales`.

#### Custom Texts
- **texts** (`object`) - Default: `{}` - (get/set) Custom texts for the component buttons and messages.

#### Open Direction
- **openDirection** (`string`) - Default: `"down"` - (get/set) Opening direction of the calendar. Values: `"up"`, `"down"`.

#### Box Alignment
- **boxAlign** (`string`) - Default: `"left"` - (get/set) Horizontal alignment of the calendar relative to the input. Values: `"left"`, `"center"`, `"right"`.

#### Enabled
- **enabled** (`boolean`) - Default: `true` - (get/set) Defines whether the input is enabled.

#### On Open Event
- **onOpen** (`function`) - Default: `null` - (get/set) Function run when the calendar is opened. The function receives the current selected value as a parameter.

#### On Change Event
- **onChange** (`function`) - Default: `null` - (get/set) Function run when the selected value changes. The function receives the new selected value as a parameter.
```

--------------------------------

### HTML Structure for WUI Datepicker

Source: https://github.com/wui-js/wuijs-main-lib/blob/main/docs/README-es.md

Basic HTML setup for integrating the WUI Datepicker. It requires a container div with the 'wui-datepicker' class and an input element.

```html
<nav>
	<div class="wui-datepicker my-datepicker">
		<input type="date" name="myDate">
	</div>
	<div class="my-output"></div>
</nav>

```

--------------------------------

### Initialization and Selection

Source: https://github.com/wui-js/wuijs-main-lib/blob/main/README.md

Methods for initializing the object and managing button selection states.

```APIDOC
## POST /wui-js/wuijs-main-lib/init

### Description
Initializes the Wuijs object.

### Method
POST

### Endpoint
/wui-js/wuijs-main-lib/init

### Parameters
None

### Response
#### Success Response (200)
- **void** - No content returned upon successful initialization.

### Response Example
(No content)
```

```APIDOC
## POST /wui-js/wuijs-main-lib/button/select

### Description
Selects or unselects a menu button and optionally runs associated callbacks.

### Method
POST

### Endpoint
/wui-js/wuijs-main-lib/button/select

### Parameters
#### Request Body
- **id** (string) - Required - The unique identifier of the button.
- **selected** (boolean) - Optional - The desired selection state of the button. Defaults to `true`.
- **runCallback** (boolean) - Optional - Whether to run the `onClick` and `onSelect` callbacks. Defaults to `true`.

### Request Example
```json
{
  "id": "button1",
  "selected": true,
  "runCallback": false
}
```

### Response
#### Success Response (200)
- **void** - No content returned upon successful selection change.

### Response Example
(No content)
```

--------------------------------

### Include WUI Colorpicker CSS and JS

Source: https://github.com/wui-js/wuijs-main-lib/blob/main/README.md

Links the necessary CSS and JavaScript files for the WUI Colorpicker component. Ensure these paths are correct for your project setup.

```html
<link type="text/css" rel="stylesheet" href="./libraries/wui-js/main/colorpicker/wui-colorpicker-0.4.css">
<script type="text/javascript" src="./libraries/wui-js/main/colorpicker/wui-colorpicker-0.4.js"></script>

```

--------------------------------

### Initialize WUITimepicker

Source: https://context7.com/wui-js/wuijs-main-lib/llms.txt

Configures a time picker component with hour and minute selection.

```javascript
const timepicker = new WUITimepicker({
    selector: ".wui-timepicker.my-time",
    value: "",
    format: "hh:MM",
    lang: "en",
    openDirection: "down",
    enabled: true,
    onChange: (value) => {
        console.log("Time selected:", value);
    }
});

timepicker.init();
```

```html
<div class="wui-timepicker my-time">
    <input type="time" name="appointment" value="">
</div>
```

--------------------------------

### HTML Structure for WUIForm

Source: https://context7.com/wui-js/wuijs-main-lib/llms.txt

Example HTML structure for a form using the WUIForm component, including fields, labels, input elements, and buttons within a standard form layout.

```html
<nav>
    <form class="wui-form my-form">
        <div class="header">
            <div class="title">User Registration</div>
        </div>
        <div class="body scroll">
            <fieldset>
                <legend>Personal Information</legend>

                <div class="field icon-left">
                    <div class="icon wui-icon person-fill"></div>
                    <label for="name">Full Name</label>
                    <input id="name" type="text" name="name" placeholder="Enter your name">
                </div>

                <div class="field icon-left">
                    <div class="icon wui-icon mail-close-fill"></div>
                    <label for="email">Email</label>
                    <input id="email" type="email" name="email" placeholder="email@example.com">
                </div>

                <div class="field">
                    <label for="bio">Biography</label>
                    <textarea id="bio" name="bio" rows="3" placeholder="Tell us about yourself"></textarea>
                </div>

                <div class="field icon-left inline noborder">
                    <div class="icon wui-icon check-line"></div>
                    <label for="terms" class="pointer">Accept terms</label>
                    <input id="terms" type="checkbox" name="terms" value="1">
                </div>

                <div class="text">
                    By submitting, you agree to our privacy policy.
                </div>

                <div class="message highlight center">
                    All fields are required.
                </div>
            </fieldset>
        </div>
        <div class="footer">
            <button type="button" class="wui-button cancel">Cancel</button>
            <button type="submit" class="wui-button submit">Submit</button>
        </div>
    </form>
</nav>
```

--------------------------------

### WUIForm Constructor and Properties

Source: https://github.com/wui-js/wuijs-main-lib/blob/main/docs/README-en.md

Details on how to initialize the WUIForm component and its configurable properties.

```APIDOC
## WUIForm

Version: `0.3`

Component for the implementation of data forms. This component allows the implementation of HTML data input elements such as `<input>`, `<select>`, and `<textarea>`, and WUI library objects such as `WUISelectpicker`, `WUIDatepicker`, `WUITimepicker`, `WUIColorpicker`, `WUISwitch`, `WUIIntensity`, and `WUIButton`.

### Constructor

| Type    | Description |
| ------- | ----------- |
| WUIForm | `WUIForm([properties])`<br><br>Arguments:<br>**• properties:** `object` |

### Properties

| Property    | Type       | Default value | Description |
| ----------- | ---------- | ------------- | ----------- |
| selector    | `string`   | `".wui-form"` | (get/set)<br><br>CSS selector that defines the HTML container element of the form. If more than one element matches the selector, only the first match will be included. |
| submit      | `boolean`  | `true`        | (get/set)<br><br>Defines whether the form should be submitted natively when the submit event occurs. |
| onScrolling | `function` | `null`        | (get/set)<br><br>Function run when the content of the form body is scrolled. |
| onSubmit    | `function` | `null`        | (get/set)<br><br>Function run when the form is submitted. |
```
Tokens:
Raw