librasteve

#!/usr/bin/env raku

#this example inspired by https://lit.dev/playground/
#untested

use Air::Functional :BASE;
use Air::Base;
use Air::Component;

class Simple-Greeting does Component {

librasteve

import {html, css, LitElement} from 'lit';
import {customElement, property} from 'lit/decorators.js';

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
  static styles = css`p { color: blue }`;

  @property()
  name = 'Somebody';

librasteve

#`[
Here's how to make an Air custom component, based on the Air::Base::Elements::Lightbox as an example
https://github.com/librasteve/Air/blob/4f52315079c1acb78607289920f7e4d009c8e816/lib/Air/Base/Elements.rakumod#L528

The key tools to do this are:
 - inherit from Air::Component (class XX is Component or role YY does Component)
 - method MM is controller {} (the trait will make a route ... the example in https://harcstack.org shows this)
 - method HTML {} to return the HTML (required)
 - method SCRIPT, SCRIPT-HEAD, CSS, SCSS (return JavaScript and CSS as needed - see Lightbox example below)

librasteve

broke my raku

clean rakubrew 2024.10

zef install Red --exclude="pq:ver<5>"

usual DBIish failure

---

librasteve

class Cell is export {
	has $.data is required;

	multi method new($data) {
		$.new: :$data
	}

	method RENDER {
		q:to/END/
			<td><.data></td>

librasteve

use HTML::Functional;    # :CRO exclusions not needed here

my @components = <Results ActiveTable Table Grid>;
#warn self.thead.raku; $*ERR.flush;

role THead {
	has @.thead;

	method thead( --> Str() ) {
		thead do for @!thead -> $cell {

librasteve

class Cell {
	has $.data;
	
	multi method new($data) {
		$.new: :$data
	}

	method RENDER {
		q:to/END/
			<td><.data></td>

librasteve

use Cro::HTTP::Router;
use Cro::WebApp::Template;

sub happy_tm_xmas-routes() is export {

    route {

        $cromponent.add: Results, ActiveTable, THead, HCell, Row, Cell;

librasteve

use Cromponent;
use Cromponent::MyLib;

my $cromponent = Cromponent.new;
my ($index, $topic);

{  #block to avoid namespace collision

 use HTML::Functional;

librasteve

class ActiveTable is export {
	has THead() $.thead;

	method RENDER {
		q:to/END/
			<table class="striped">
				<?.thead>
					<&THead(.thead)>
 ?&gt;