view release on metacpan or  search on metacpan

examples/form_example.pl  view on Meta::CPAN

$form->submit('Save Settings');

# ---- Change handlers ----

$form->on_change(sub {
    my ($field, $value) = @_;
    print "[Perl] Changed: $field => $value\n";
});

$form->on_change('theme', sub {
    my ($value) = @_;
    print "[Perl] Theme switched to: $value\n";
    my $bg = $value eq 'dark' ? '#1e1e1e' : '#ffffff';
    my $fg = $value eq 'dark' ? '#d4d4d4' : '#333333';
    $app->dispatch_eval(qq{
        document.body.style.background = '$bg';
        document.body.style.color      = '$fg';
    });
});

# ---- CSS ----

my $css = <<'CSS';
<style>
  * { box-sizing: border-box; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    margin: 0; padding: 24px;
    background: #1e1e1e; color: #d4d4d4;
    transition: background 0.3s, color 0.3s;
  }
  h1 { font-size: 20px; margin: 0 0 16px; }
  .chandra-form { max-width: 460px; }
  .chandra-field { margin-bottom: 14px; }
  .chandra-label {
    display: block; margin-bottom: 4px;
    font-size: 13px; font-weight: 600;
  }
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], select, textarea {
    width: 100%; padding: 8px 10px;
    font-size: 14px; border: 1px solid #555;
    border-radius: 4px; background: #2d2d2d; color: #d4d4d4;
  }
  input[type="range"] { width: 100%; }
  .chandra-field-checkbox, .chandra-radio-option {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px;
  }
  .chandra-radio-option { margin: 4px 0; }
  fieldset.chandra-group {
    border: 1px solid #444; border-radius: 6px;
    padding: 12px 14px; margin: 16px 0;
  }
  fieldset.chandra-group legend {
    font-size: 14px; font-weight: 600; padding: 0 6px;
  }
  .chandra-submit {
    padding: 10px 28px; font-size: 14px; font-weight: 600;
    background: #0078d4; color: #fff; border: none;
    border-radius: 4px; cursor: pointer; margin-top: 8px;
  }
  .chandra-submit:hover { background: #106ebe; }
  .chandra-error {
    display: block; font-size: 12px; color: #f44;
    min-height: 16px; margin-top: 2px;
  }
  #result {
    display: none; margin-top: 12px; padding: 10px;
    background: #1b5e20; border-radius: 4px;
    font-size: 14px; text-align: center;
  }
</style>
CSS

# ---- Render and launch ----

my $html = $css
    . "<h1>Settings</h1>"
    . $form->render
    . '<div id="result"></div>';

$app->set_content($html);

# Attach form to app - binds bridge events and injects two-way binding JS
$form->attach($app);

print "Starting form example...\n";
$app->run;
print "Done.\n";