para

use Selkie::UI::Base;
use Selkie::Widget;
use Selkie::Widget::CardList;
use Selkie::UI::Helpers;

unit class Selkie::UI::CardListBuilder is Selkie::UI::Base;

has Selkie::Widget::CardList $.obj .= new;
has &.block;
has $.select-first;
has $.select-last;

submethod TWEAK(:&block, :$select-first, :$select-last, |) {
	return unless &block.defined;
	my $*UI-PARENT = self;
	my @*UI-NODES;
	self.set-items: $_ with &block;

	$!select-first = with-ui-context $select-first if $select-first ~~ Callable;
	$!select-last  = with-ui-context $select-last  if $select-last  ~~ Callable;

	self.select-first: $!select-first;
	self.select-last:  $!select-last;

	self
}

multi method add-item($widget, :$height, :$root = $*UI-PARENT, :$border) {
	$!obj.add-item(
		$widget.&selkie-obj,
		:root($root.&selkie-obj),
		|(:$height with $height),
		|(:border(.&selkie-obj) with $border));

	unless $*UI-MULTIPLE-ADD-ITEMS {
		$.select-first: $_ with $!select-first;
		$.select-last:  $_ with $!select-last;
	}
	self
}

multi method add-item(&block, :$height, :$root = $*UI-PARENT, :$border) {
	my $caller-parent = CALLERS::<$*UI-PARENT> // $*UI-PARENT;
	my $local-root = $root // $caller-parent;
	$.auto-subscribe: "add-items", with-ui-context {
		my @values = block self;
		for @values -> $node {
			self.add-item: $node, :root($local-root), |(:$height with $height), |(:$border with $border);
		}
	}
	self
}

multi method set-items(@items) {
	my $*UI-MULTIPLE-ADD-ITEMS = True;
	self.clear-items;
	for @items -> % (:$widget, :$root, :$border, :$height = $widget.fixed-size-value) {
		self.add-item(
			$widget,
			|(:$root   with $root  ),
			|(:$border with $border),
			|(:$height with $height),
		);
	}
	{
		my @*UI-PATHS;
		$.select-first: $_ with $!select-first;
		$.select-last:  $_ with $!select-last;
	}
	self
}

multi method set-items(&block) {
	$.auto-subscribe: "set-items", with-ui-context {
		my @*UI-NODES;
		my @items = block self;
		if @items.are: Associative {
			self.set-items: @items
		} else {
			my @nodes = do for @*UI-NODES -> $item {
				my $height = $item.fixed-size-value;
				my :($widget, $border) := do if $item.^can: "get-content" {
					$item.?get-content, $item;
				} else {
					$item
				}
				%(
					:$widget,
					:root($border),
					:$border,
					|(:$height with $height),
				)
			}
			self.set-items: @nodes
		}
	}
	self
}

method clear-items {
	$!obj.clear-items;
	self
}

multi method set-item-height(Int :$idx!, Int :$height!) {
	$!obj.set-item-height($idx, $height);
	self
}

multi method set-item-height(Int $idx, Int $height) {
	self.set-item-height(:$idx, :$height)
}

multi method set-item-height(&block) {
	$.auto-subscribe: "set-item-height", with-ui-context {
		self.set-item-height: |block self;
	}
}

multi method select-index(Int() $idx) {
	$!obj.select-index($idx);
	self
}

multi method select-index(&block) {
	$.auto-subscribe: "select-index", with-ui-context {
		self.select-index: block self
	}
}

multi method select-first(&block) {
	self.select-first: block self
}

multi method select-first(Bool() $select-first = True) {
	$!obj.select-first if $select-first;
	self
}

multi method select-last(&block) {
	self.select-last: block self
}

multi method select-last(Bool() $select-last = True) {
	$!obj.select-last;
	self
}

method scroll-up {
	$!obj.scroll-up;
	self
}

method scroll-down {
	$!obj.scroll-down;
	self
}

method on-select(&block) is idempotent {
	$!obj.on-select.tap: with-ui-context -> $idx {
		block self, $idx
	}
	self
}



head

Builder for a card list widget — a vertically scrollable list of items
with configurable heights and optional borders.


C<add-item($widget, :$height!, :$root, :$border)>


Adds a widget as a card item. C<:$height> is required (in rows).
C<:$root> defaults to C<$*UI-PARENT>. C<:$border> adds an optional border.


C<add-item(&block, :$height!, :$root, :$border)>


Reactive variant — block is re-evaluated when subscribed state changes.


C<set-items(@items)> / C<set-items(&block)>


Replaces all items. Each item is a hash with C<:widget>, C<:root>, C<:height>,
and optional C<:border>. The block variant supports reactive subscriptions.


C<set-item-height(Int $idx, Int $height)> / C<set-item-height(&block)>


Changes the height of the item at C<$idx>. Block variant supports reactive
subscriptions and receives C<($builder)> returning C<(:$idx, :$height)>.


C<select-index(Int $idx)> / C<select-index(&block)>


Selects the item at C<$idx> (0-based). The block variant supports reactive
subscriptions.


C<select-first(Bool $select-first = True)> / C<select-first(&block)>


Selects the first item when C<True>. Block variant supports reactive
subscriptions.


C<select-last(Bool $select-last = True)> / C<select-last(&block)>


Selects the last item when C<True>. Block variant supports reactive
subscriptions.


Registers a callback for selection changes. Receives C<($builder, $idx)>.


root

Helpers

UI Builder Abstractions for Selkie


React

=begin React :component<HeaderCol> :id<menu> 
=para L<Documentation|/doc/introduction>
=para L<Modules| /mods>
=para L<Examples| file:../examples/index.podlite>
=para L<AI|file:../mcp/index.podlite>
=para L<Download |file:../download/index.podlite>
=para L<About|file:../about/index.podlite>
=para 🔍 K<⌘K>/K<ctrl-K>
=end React


=begin React :component<HeaderCol> :id<footer>  
=begin nested :!nested
=item1 B<Language>
    =item2 L<Get started|file:../getting-started/getting-started.podlite>
    =item2 L<Why Raku?|/doc/language/faq#Why-should-I-learn-Raku-What's-so-great-about-it>
    =item2 L<Try Raku|https://glot.io/new/raku>
    =item2 L<Download | file:../download/index.podlite>
    =item2 L<Raku cheat sheet|https://github.com/Raku/mu/blob/master/docs/Perl6/Cheatsheet/cheatsheet.txt>
    =item2 L<Raku on Exercism|https://exercism.org/tracks/raku>
    =item2 L<Wikipedia|https://en.wikipedia.org/wiki/Raku_(programming_language)>

=end nested
=begin nested :!nested

=item1 B<L<Documentation|/doc>>
    =item2 L<Getting started, Migration guides from other languages, & Tutorials | file:../doc/introduction.podlite>
    =item2 L<Language References|file:../doc/reference.podlite>
    =item2 L<Type Reference| file:../doc/types.podlite>
    =item2 L<Miscellaneous| file:../doc/miscellaneous.podlite>
    =item2 L<FAQs (Frequently Asked Questions)|/doc/language/faq>
    =item2 L<Community|/doc/language/community>
    =item2 L<The list of all documents|file:../doc/index.podlite>
    =item2 L<Hand these documents to an AI assistant|file:../mcp/index.podlite>

=end nested
=begin nested :!nested
=item1 B<Learning>
    =item2 L<The Raku Guide|https://raku.guide/>
    =item2 L<Wikibook |https://en.wikibooks.org/wiki/Raku_Programming>
    =item2 L<Books |https://perl6book.com/>
    =item2 L<Rosetta Code | https://www.raku.org/community/rosettacode>
    =item2 L<Learn Raku in Y minutes|https://learnxinyminutes.com/docs/raku/>
    =item2 L<Golfing |https://github.com/AlexDaniel/raku-golf-cheatsheet>
=end nested
=begin nested :!nested

=item1 B<Explore>
    =item2 L<Raku Blog Aggregator|https://planet.raku.org/>
    =item2 L<Rakudo Weekly|https://rakudoweekly.blog/>
    =item2 L<The Weekly Challenge |https://perlweeklychallenge.org/>
    =item2 L<Raku Advent Calendar|https://raku-advent.blog/>

=end nested
=end React


Built with L<Podlite|https://podlite.org> — the markup and publishing tools behind this site.


=begin React :component<CookieConsent> :id<CookieConsent> :buttonCaption("Got it!")
=para
This website uses cookies for analytics.
=end React


CardListBuilder

Selkie::UI::CardListBuilder

Methods

`add-item($widget, :$height!, :$root, :$border)`

`add-item(&block, :$height!, :$root, :$border)`

`set-items(@items)` / `set-items(&block)`

`clear-items`

`set-item-height(Int $idx, Int $height)` / `set-item-height(&block)`

`select-index(Int $idx)` / `select-index(&block)`

`select-first(Bool $select-first = True)` / `select-first(&block)`

`select-last(Bool $select-last = True)` / `select-last(&block)`

`scroll-up` / `scroll-down`

`on-select(&block)` (idempotent)

Selkie::UI v0.0.4

Authors

License

Dependencies

Test Dependencies

Provides

Documentation

Selkie::UI::CardListBuilder

Methods

add-item($widget, :$height!, :$root, :$border)

add-item(&block, :$height!, :$root, :$border)

set-items(@items) / set-items(&block)

clear-items

set-item-height(Int $idx, Int $height) / set-item-height(&block)

select-index(Int $idx) / select-index(&block)

select-first(Bool $select-first = True) / select-first(&block)

select-last(Bool $select-last = True) / select-last(&block)

scroll-up / scroll-down

on-select(&block) (idempotent)