diff --git a/ui-demo/README.md b/ui-demo/README.md index 0e5b60df9..89bf5f07a 100644 --- a/ui-demo/README.md +++ b/ui-demo/README.md @@ -40,6 +40,7 @@ tab shows both positions for every outline color. Toggles are compact with softened corners by default. Pass `round => 1` for a fully rounded track and thumb; it works with every color and with `outline => 1`. +Bulk-selection links and the default filter appear at nine entries. In a `ui_multi_select_list` example on the Choices tab, click an entry and Shift-click another to select or clear the range between them. Checkboxes, labels and row backgrounds work alike; filtered, folded and @@ -59,12 +60,18 @@ The empty server example uses `empty_label` to replace the default The "Option attributes" example passes legacy `[ value, label, attributes ]` entries. Two rows are disabled, including a checked membership; the other rows remain editable. Titles and styles apply to the row, so the optional -membership is italic and shows a tooltip. +membership is italic and shows a tooltip. This example also passes `count => 0` +to omit the selection counter, which is enabled by default. -"Label comparison" passes `staff (Office accounts)` in the options of one -list and only in the selected values of a legacy positional call. Both -show the full description and submit `staff`. Positional calls also retain -selected-value order and accept pre-escaped labels from existing callers. +"HTML labels" uses `html => 1` to render trusted markup, including an italic +"Entire website" label. Filtering matches the label text. Labels are escaped +by default; submitted values, suffixes and tags stay escaped in either mode. + +"Label comparison" shows `ui_multi_select_list` beside the original dual-list +`ui_multi_select`. It passes `staff (Office accounts)` in the new list's options +and the old widget's selected values. Both show the full description and submit +`staff`. Positional list calls also retain selected-value order and accept +pre-escaped labels from existing callers. ## Page chrome diff --git a/ui-demo/lang/en b/ui-demo/lang/en index 28819e118..648630801 100644 --- a/ui-demo/lang/en +++ b/ui-demo/lang/en @@ -243,6 +243,9 @@ index_tab_choices=Choices index_choices_desc=ui_choice keeps all option fields visible, ui_select_switch shows the chosen option's fields, and ui_radio_list uses compact radio rows. ui_multi_select_list provides searchable checkbox lists for servers and groups, plus a plain label when empty. index_choices_more=Click the funnel to open the filter and Shift-click entries to select or clear a range. The cross clears the query, or closes an empty filter; Escape closes and clears it. The server example starts with a parent and two children selected. Turn on "Include sub-servers" to fold the children and change the count from three to one; expanding restores their selections. Filtering does not change the selection count. The empty example uses a custom message. index_c_backup=Backup settings +index_c_html=HTML labels +index_c_entire=Entire website +index_c_private=Private directory index_c_dest=Backup destination index_c_local=Local file index_c_ftp=FTP server diff --git a/ui-demo/ui-demo-pages.pl b/ui-demo/ui-demo-pages.pl index bda25b5a1..31569fb60 100644 --- a/ui-demo/ui-demo-pages.pl +++ b/ui-demo/ui-demo-pages.pl @@ -797,7 +797,7 @@ $rv .= ui_table_row($text{'index_c_secgroups'}, ui_multi_select_list('groups', [ 'wheel', 'docker' ], [ map { [ $_, $_ ] } ( 'adm', 'audio', 'backup', 'cdrom', 'dialout', 'docker', - 'lp', 'plugdev', 'sudo', 'video', 'wheel', 'www-data' ) ]), + 'lp', 'plugdev', 'sudo', 'video', 'wheel', 'www-data' ) ], {}), 2); # Legacy option attributes: locked selections, unavailable entries and row styling. my $locked = "disabled title=\"".html_escape($text{'index_c_managed'})."\""; @@ -807,7 +807,12 @@ $rv .= ui_table_row($text{'index_c_attrs'}, [ 'docker', 'docker', $locked ], [ 'audio', 'audio', "style='font-style:italic' title=\"". html_escape($text{'index_c_optional'})."\"" ], - [ 'wheel', 'wheel' ] ], { 'search' => 1 }), 2); + [ 'wheel', 'wheel' ] ], { 'search' => 1, 'count' => 0 }), 2); +$rv .= ui_table_row($text{'index_c_html'}, + ui_multi_select_list('html_labels', [ 'root' ], [ + [ 'root', ''.html_escape($text{'index_c_entire'}).'' ], + [ 'private', ''.html_escape($text{'index_c_private'}).'' ] ], + { 'html' => 1, 'count' => 0, 'search' => 1 }), 2); $rv .= ui_table_end(); # Both APIs retain descriptions in their respective label arguments. @@ -815,9 +820,9 @@ my $staff_label = text('index_c_staff_desc', 'staff'); $rv .= ui_table_start($text{'index_c_labels'}, 'width=100%', 4); $rv .= ui_table_row($text{'index_c_option_label'}, ui_multi_select_list('option_label', [ [ 'staff', 'staff' ] ], - [ [ 'staff', $staff_label ] ])); + [ [ 'staff', $staff_label ] ], {})); $rv .= ui_table_row($text{'index_c_selected_label'}, - ui_multi_select_list('selected_label', [ [ 'staff', $staff_label ] ], + ui_multi_select('selected_label', [ [ 'staff', $staff_label ] ], [ [ 'staff', 'staff' ] ], 5)); $rv .= ui_table_end(); $rv .= ui_form_end([ [ undef, $text{'save'} ] ]);