view release on metacpan or  search on metacpan

examples/form_example.pl  view on Meta::CPAN

            var msg = document.getElementById('result');
            msg.textContent = 'Settings saved!';
            msg.style.display = 'block';
            setTimeout(function(){ msg.style.display='none'; }, 3000);
        });
    },
);

$form->text('username', {
    label       => 'Username',
    placeholder => 'Enter your username',
    required    => 1,
    value       => 'alice',
    maxlength   => 50,
});

$form->email('email', {
    label => 'Email Address',
    value => 'alice@example.com',
});

$form->password('password', {
    label       => 'New Password',
    minlength   => 8,
    placeholder => 'Leave blank to keep current',
});

$form->group('Appearance' => sub {
    $form->select('theme', {
        label   => 'Theme',
        options => [
            { value => 'light', label => 'Light' },
            { value => 'dark',  label => 'Dark' },
            { value => 'auto',  label => 'System' },
        ],
        value => 'dark',
    });

    $form->number('font_size', {
        label => 'Font Size (px)',
        min   => 8,
        max   => 72,
        step  => 1,
        value => 14,
    });

    $form->range('opacity', {
        label => 'UI Opacity',
        min   => 20,
        max   => 100,
        value => 90,
    });
});

$form->group('Notifications' => sub {
    $form->checkbox('notify_email', {
        label   => 'Email notifications',
        checked => 1,
    });

    $form->checkbox('notify_desktop', {
        label => 'Desktop notifications',
    });

    $form->radio('frequency', {
        label   => 'Digest Frequency',
        options => [
            { value => 'instant', label => 'Instant' },
            { value => 'daily',   label => 'Daily' },
            { value => 'weekly',  label => 'Weekly' },
        ],
        value => 'daily',
    });
});

$form->textarea('bio', {
    label => 'Biography',
    rows  => 4,
    value => 'Hello, I am Alice.',
});

$form->hidden('csrf_token', { value => 'abc123def456' });

$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;
  }