src/datastar_gleam/lustre.gleam

/// Helper functions to generate Datastar HTML attributes for [Lustre](https://hexdocs.pm/lustre) views.
///
/// These functions return standard Lustre `Attribute` values that render the
/// `data-*` directives Datastar recognises in the browser.

import lustre/attribute

/// `data-on:click="@get('/path')"`
///
/// Trigger a GET request to `path` when the element is clicked.
pub fn on_get(path: String) {
  attribute.attribute("data-on:click", "@get('" <> path <> "')")
}

/// `data-on:click="@post('/path')"`
///
/// Trigger a POST request to `path` when the element is clicked.
pub fn on_post(path: String) {
  attribute.attribute("data-on:click", "@post('" <> path <> "')")
}

/// `data-signals:key="value"`
///
/// Initialise a reactive signal with the given key and value.
pub fn signal(key: String, value: String) {
  attribute.attribute("data-signals:" <> key, value)
}

/// `data-bind:key`
///
/// Two-way bind the element's value to the signal named `key`.
pub fn bind(key: String) {
  attribute.attribute("data-bind:" <> key, "")
}

/// `data-text="$key"`
///
/// Set the element's text content to the value of the signal `key`.
pub fn text(key: String) {
  attribute.attribute("data-text", "$" <> key)
}

/// `data-attr:disabled="$condition"`
///
/// Toggle an HTML attribute based on a signal expression.
pub fn attr(name: String, expression: String) {
  attribute.attribute("data-attr:" <> name, expression)
}

/// `data-class="{ 'class-name': $condition }"`
///
/// Toggle CSS classes based on a signal expression.
pub fn class(expression: String) {
  attribute.attribute("data-class", expression)
}