Pode.Web

Pode.Web bundles several JavaScript and CSS libraries directly within the module. This bundling is designed to simplify hosting websites in restrictive domains by reducing the need for external asset fetching.

The following primary libraries are included and available for use:

• highlightjs: For syntax highlighting.
• mdi (Material Design Icons): For icon sets.
• bootstrap: For UI components and styling.
• bs-stepper: For stepper components.
• chart.js: For data visualization.
• jquery: For DOM manipulation.
• jquery-ui: For interactive UI widgets.
• moment: For date and time manipulation.
• monaco: For the Monaco Editor (code editing).

When using elements like New-PodeWebButton, you can provide an icon in two ways:

1. Static Name: Pass a string representing the icon name (e.g., -Icon 'github').
2. Dynamic Icon Object: Pass an object created by New-PodeWebIcon. This allows you to apply properties like -Spin to the icon before assigning it to the element.

$icon = New-PodeWebIcon -Name 'github' -Spin
New-PodeWebButton -Name 'Repository' -Icon $icon -Url 'https://github.com/Badgerati/Pode.Web'

An Element Group is a logical grouping mechanism that has no impact on styling or rendering (similar to a Span). Its primary purpose is to enable data serialization. When a Button or an Event within an Element Group is triggered, all other elements in that same group (such as Textbox elements) are serialized, and their values are sent up to the triggering element's scriptblock via the $WebEvent.Data object.

While Element Groups can be applied to any element, only Buttons and Events can take advantage of this serialization feature.

New-PodeWebElementGroup -Content @(
    New-PodeWebTextbox -Name 'Name' -Type Text
    New-PodeWebButton -Name 'Click Me' -ScriptBlock {
        # The value of the textbox is available via $WebEvent.Data.Name
        Show-PodeWebToast -Message "Hi, $($WebEvent.Data.Name)!"
    }
)

Tasks, Timers, and Schedules do not have access to the $WebEvent scope. To send updates from these background processes, you must manually create and set an 'AsyncEvent' scope using helper functions.

Key helper functions include:

• Set-PodeWebAsyncEvent: Sets the async scope for events to use.
• Get-PodeWebAsyncEvent: Retrieves an existing async event.
• New-PodeWebAsyncEvent: Creates a new async event (can target -All, -Group, or -ClientId).
• Export-PodeWebAsyncEvent: Used within a $WebEvent scope to build an AsyncEvent object for passing to background tasks.
• Set-PodeWebAsyncHeader: Informs the frontend that a request (like populating a table) will be completed asynchronously.

By default, the label for a Radio element and the text for its options are taken from the -Name property. To show a different visual label while keeping the underlying data key the same, use the -DisplayName parameter.

• For the Radio element: -Name is the key used in $WebEvent.Data, while -DisplayName is what the user sees.
• For Radio options: -Name is the value submitted, while -DisplayName is the visual text.

Both New-PodeWebSelect and New-PodeWebOption support a -DisplayName parameter.

• -Name: This is the functional identifier. It is used to retrieve the submitted value from $WebEvent.Data and is used as the default label if no display name is provided.
• -DisplayName: This is a purely visual label shown to the user in the UI. Changing the display name does not change the underlying data key used for form submission.

Parameters ending in -Width, -Height, or -Size in Pode.Web accept either a plain number or a pure CSS string.

• Plain Numbers: When a number is provided, Pode.Web appends a default unit (such as px or %) to the value.
• CSS Values: You can provide a string containing a specific CSS unit (e.g., '25%', '10em', '50vw').

Note: If 0 is supplied, some elements may default to auto instead of a zero-unit value. Check the specific element's documentation to see its default unit behavior.

# Using plain numbers (appends default unit, e.g., px)
New-PodeWebImage -Source '/url/to/image.png' -Width 100 -Height 100

# Using CSS strings for specific units
New-PodeWebImage -Source '/url/to/image.png' -Width '25%' -Height '10em'