playbook_ui 14.17.0.pre.rc.1 → 14.18.0.pre.alpha.PLAY2037selectinlinecareterror7490
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx +23 -3
- data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +67 -3
- data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableActions.ts +1 -2
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx +29 -19
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/types.ts +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +429 -137
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +97 -3
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb +6 -1
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +20 -7
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color.jsx +80 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color.md +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.html.erb +58 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.md +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.jsx +66 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.md +10 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.jsx +90 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.md +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.jsx +58 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.md +6 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.jsx +64 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.md +8 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.jsx +55 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.md +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.html.erb +33 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.md +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +1 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_rails.md +2 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_react.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md +6 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md +6 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +11 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +7 -1
- data/app/pb_kits/playbook/pb_advanced_table/index.js +7 -0
- data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss +97 -0
- data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +1 -1
- data/app/pb_kits/playbook/pb_background/_background.scss +26 -0
- data/app/pb_kits/playbook/pb_background/_background.tsx +5 -3
- data/app/pb_kits/playbook/pb_background/background.test.js +5 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_overlay.jsx +35 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_overlay.md +1 -0
- data/app/pb_kits/playbook/pb_background/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_background/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/circleChart.test.js +2 -2
- data/app/pb_kits/playbook/pb_circle_chart/circleChartTheme.ts +53 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.html.erb +2 -2
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.html.erb +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.html.erb +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx +2 -2
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx +38 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md +1 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +2 -3
- data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss +39 -1
- data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx +4 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb +9 -1
- data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.test.js +14 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_size.html.erb +28 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_size.jsx +42 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_size.md +1 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_collapsible/__snapshots__/collapsible.test.js.snap +14 -7
- data/app/pb_kits/playbook/pb_contact/contact.test.js +7 -7
- data/app/pb_kits/playbook/pb_copy_button/_copy_button.tsx +19 -45
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.jsx +54 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.md +3 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook_rails.html.erb +14 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook_rails.md +3 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_copy_button/index.js +46 -20
- data/app/pb_kits/playbook/pb_copy_button/usePBCopy.ts +45 -0
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +12 -0
- data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +12 -0
- data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +50 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb +2 -2
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx +4 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.md +4 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md +1 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.md +5 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.jsx +34 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.md +14 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.html.erb +20 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.md +14 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +10 -0
- data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.test.js +2 -2
- data/app/pb_kits/playbook/pb_date_range_stacked/date_range_stacked.test.js +1 -1
- data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +10 -1
- data/app/pb_kits/playbook/pb_dialog/dialog.rb +2 -0
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_turbo_frames.html.erb +117 -0
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_turbo_frames_rails.md +9 -0
- data/app/pb_kits/playbook/pb_dialog/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_dialog/index.js +106 -14
- data/app/pb_kits/playbook/pb_draggable/_draggable.scss +43 -20
- data/app/pb_kits/playbook/pb_draggable/context/index.tsx +58 -17
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.html.erb +43 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.jsx +102 -105
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.html.erb +55 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.jsx +50 -48
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_rails.md +1 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_react.md +1 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.jsx +110 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.md +5 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_react.md +5 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.html.erb +42 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.md +1 -0
- data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_table_react.jsx → _draggable_with_table.jsx} +1 -1
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md +3 -1
- data/app/pb_kits/playbook/pb_draggable/docs/example.yml +12 -7
- data/app/pb_kits/playbook/pb_draggable/docs/index.js +4 -1
- data/app/pb_kits/playbook/pb_draggable/draggable.rb +9 -1
- data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx +71 -3
- data/app/pb_kits/playbook/pb_draggable/index.js +139 -142
- data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableContainer.tsx +4 -3
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb +5 -2
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx +4 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +6 -6
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx +6 -6
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +6 -6
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb +8 -8
- data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx +3 -3
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +1 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.html.erb +41 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.md +1 -0
- data/app/pb_kits/playbook/pb_filter/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_form_group/_error_state_mixin.scss +22 -18
- data/app/pb_kits/playbook/pb_form_group/_form_group.scss +45 -3
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.html.erb +15 -5
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx +39 -6
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.jsx +30 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.md +1 -0
- data/app/pb_kits/playbook/pb_gauge/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_gauge/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_gauge/gaugeTheme.ts +85 -0
- data/app/pb_kits/playbook/pb_icon/icon.test.js +9 -9
- data/app/pb_kits/playbook/pb_icon_circle/icon_circle.test.js +1 -1
- data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.test.js +1 -1
- data/app/pb_kits/playbook/pb_icon_value/icon_value.test.js +1 -1
- data/app/pb_kits/playbook/pb_label_value/label_value.test.js +1 -1
- data/app/pb_kits/playbook/pb_layout/_layout.scss +127 -0
- data/app/pb_kits/playbook/pb_layout/_layout.tsx +47 -7
- data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx +394 -0
- data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md +5 -0
- data/app/pb_kits/playbook/pb_layout/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_layout/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_layout/layout.test.js +4 -0
- data/app/pb_kits/playbook/pb_layout/subcomponents/_game.tsx +121 -0
- data/app/pb_kits/playbook/pb_layout/subcomponents/_participant.tsx +79 -0
- data/app/pb_kits/playbook/pb_layout/subcomponents/_round.tsx +74 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.jsx +52 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.md +1 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_line_graph/lineGraphTheme.ts +110 -0
- data/app/pb_kits/playbook/pb_link/link.test.jsx +2 -2
- data/app/pb_kits/playbook/pb_nav/_nav_item.test.js +5 -3
- data/app/pb_kits/playbook/pb_overlay/_overlay.scss +83 -22
- data/app/pb_kits/playbook/pb_overlay/_overlay.tsx +39 -7
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.jsx +63 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.md +3 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.md +1 -7
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_background.jsx +49 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_background.md +1 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_opacity.jsx +81 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_opacity.md +1 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.jsx +39 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.md +1 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.jsx +40 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.md +5 -0
- data/app/pb_kits/playbook/pb_overlay/docs/example.yml +5 -0
- data/app/pb_kits/playbook/pb_overlay/docs/index.js +5 -0
- data/app/pb_kits/playbook/pb_overlay/overlay.test.jsx +39 -1
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +13 -0
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +3 -1
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.html.erb +10 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.jsx +20 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.md +1 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx +8 -1
- data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb +3 -0
- data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.test.js +19 -0
- data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.html.erb +46 -0
- data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.md +1 -0
- data/app/pb_kits/playbook/pb_popover/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_popover/index.ts +13 -1
- data/app/pb_kits/playbook/pb_popover/popover.rb +2 -0
- data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_vertical.md +1 -0
- data/app/pb_kits/playbook/pb_select/_select.scss +10 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_error.html.erb +1 -1
- data/app/pb_kits/playbook/pb_select/docs/_select_error.jsx +7 -2
- data/app/pb_kits/playbook/pb_stat_change/stat_change.test.js +8 -4
- data/app/pb_kits/playbook/pb_table/_table.tsx +2 -2
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.md +3 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.md +3 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md +3 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md +3 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.html.erb +34 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_rails.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating.html.erb +36 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_rails.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_react.md +1 -1
- data/app/pb_kits/playbook/pb_table/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss +1 -1
- data/app/pb_kits/playbook/pb_table/styles/_headers.scss +19 -7
- data/app/pb_kits/playbook/pb_table/styles/_striped.scss +3 -3
- data/app/pb_kits/playbook/pb_table/table.rb +13 -1
- data/app/pb_kits/playbook/pb_table/table_header.rb +13 -1
- data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +13 -5
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.html.erb +1 -1
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.jsx +9 -1
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.jsx +94 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.md +1 -0
- data/app/pb_kits/playbook/pb_text_input/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_text_input/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_text_input/inputMask.ts +8 -1
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.html.erb +5 -1
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx +7 -1
- data/app/pb_kits/playbook/pb_tooltip/tooltip.html.erb +2 -5
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.html.erb +8 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.jsx +6 -2
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +4 -4
- data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb +2 -5
- data/app/pb_kits/playbook/pb_user/user.html.erb +1 -6
- data/app/pb_kits/playbook/pb_user_badge/user_badge.html.erb +1 -6
- data/dist/chunks/_typeahead-D8CsVBZO.js +22 -0
- data/dist/chunks/_weekday_stacked-D3oLTSkH.js +45 -0
- data/dist/chunks/lib-BmTAc7Nc.js +29 -0
- data/dist/chunks/{pb_form_validation-BvNy9Bd6.js → pb_form_validation-BWjy4bFn.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +2 -2
- data/dist/playbook-doc.js +19 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/kit_base.rb +4 -4
- data/lib/playbook/version.rb +2 -2
- metadata +98 -20
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.md +0 -5
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.md +0 -1
- data/dist/chunks/_typeahead-Djo6qCne.js +0 -22
- data/dist/chunks/_weekday_stacked-DIIHW0OV.js +0 -45
- data/dist/chunks/lib-BGzBzFZX.js +0 -29
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_default_rails.html.erb → _draggable_default.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_default.md → _draggable_default_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_multiple_containers_rails.html.erb → _draggable_multiple_containers.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_multiple_containers.md → _draggable_multiple_containers_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_cards_rails.html.erb → _draggable_with_cards.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_cards.md → _draggable_with_cards_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_list_rails.html.erb → _draggable_with_list.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_list.md → _draggable_with_list_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_selectable_list_rails.html.erb → _draggable_with_selectable_list.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_selectable_list.md → _draggable_with_selectable_list_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_table.md → _draggable_with_table_rails.md} +0 -0
@@ -10,6 +10,81 @@ export default class PbDialog extends PbEnhancedElement {
|
|
10
10
|
connect() {
|
11
11
|
window.addEventListener("DOMContentLoaded", () => this.setupDialog())
|
12
12
|
window.addEventListener("turbo:frame-load", () => this.setupDialog())
|
13
|
+
|
14
|
+
// Code for custom_event_type setup (can take multiple events in a string separated by commas)
|
15
|
+
const customEventTypeString = this.element.dataset.customEventType
|
16
|
+
if (customEventTypeString && !this.element.hasAttribute("data-custom-event-handled")) {
|
17
|
+
this.customEventTypes = customEventTypeString.split(",").map(e => e.trim()).filter(Boolean)
|
18
|
+
this.customEventTypes.forEach(eventType => {
|
19
|
+
window.addEventListener(eventType, this.handleCustomEvent)
|
20
|
+
})
|
21
|
+
|
22
|
+
this.element.setAttribute("data-custom-event-handled", "true")
|
23
|
+
}
|
24
|
+
}
|
25
|
+
|
26
|
+
disconnect() {
|
27
|
+
if (this.customEventTypes && Array.isArray(this.customEventTypes)) {
|
28
|
+
this.customEventTypes.forEach(eventType => {
|
29
|
+
window.removeEventListener(eventType, this.handleCustomEvent)
|
30
|
+
})
|
31
|
+
}
|
32
|
+
}
|
33
|
+
|
34
|
+
handleCustomEvent = (event) => {
|
35
|
+
const dialogId = event.detail?.dialogId || this.element.querySelector("dialog")?.id
|
36
|
+
const dialog = dialogId && document.getElementById(dialogId)
|
37
|
+
|
38
|
+
if (!dialog) {
|
39
|
+
console.warn(`[PbDialog] Could not find dialog with ID '${dialogId}'`)
|
40
|
+
return
|
41
|
+
}
|
42
|
+
|
43
|
+
this.setupDialog()
|
44
|
+
|
45
|
+
const action = event.detail?.action || 'open'
|
46
|
+
|
47
|
+
// Known Actions - four "standard" dialog actions that felt like things devs might want to do
|
48
|
+
const knownActions = ['open', 'close', 'clickConfirm', 'clickCancel'];
|
49
|
+
|
50
|
+
if (knownActions.includes(action)) {
|
51
|
+
switch (action) {
|
52
|
+
case 'open':
|
53
|
+
if (!dialog.open) dialog.showModal()
|
54
|
+
break
|
55
|
+
case 'close':
|
56
|
+
if (dialog.open) dialog.close(event.detail?.returnValue)
|
57
|
+
break
|
58
|
+
case 'clickConfirm':
|
59
|
+
this.triggerButtonClick(dialog, event, 'confirm')
|
60
|
+
break
|
61
|
+
case 'clickCancel':
|
62
|
+
this.triggerButtonClick(dialog, event, 'cancel')
|
63
|
+
break
|
64
|
+
}
|
65
|
+
}
|
66
|
+
// Custom Actions - flexible for Turbo or other integration
|
67
|
+
else if (typeof event.detail?.customAction === 'function') {
|
68
|
+
event.detail.customAction({ dialog, event })
|
69
|
+
} else if (window.pbDialogActions?.[action]) {
|
70
|
+
// Can register custom actions globally
|
71
|
+
window.pbDialogActions[action]({ dialog, event })
|
72
|
+
} else {
|
73
|
+
console.warn(`[PbDialog] Unknown action: ${action}`)
|
74
|
+
}
|
75
|
+
}
|
76
|
+
|
77
|
+
triggerButtonClick(dialog, event, type) {
|
78
|
+
const buttonId = event.detail?.[`${type}ButtonId`] ||
|
79
|
+
dialog.closest('[data-pb-dialog-wrapper]')?.dataset[`${type}ButtonId`]
|
80
|
+
const button = buttonId ? document.getElementById(buttonId) :
|
81
|
+
dialog.querySelector(`[data-${type}-button]`)
|
82
|
+
|
83
|
+
if (button) {
|
84
|
+
button.click()
|
85
|
+
} else {
|
86
|
+
console.warn(`[PbDialog] Could not find ${type} button for dialog`)
|
87
|
+
}
|
13
88
|
}
|
14
89
|
|
15
90
|
setupDialog() {
|
@@ -18,7 +93,7 @@ export default class PbDialog extends PbEnhancedElement {
|
|
18
93
|
const dialogs = document.querySelectorAll(".pb_dialog_rails")
|
19
94
|
|
20
95
|
const loadingButton = document.querySelector('[data-disable-with="Loading"]');
|
21
|
-
if (loadingButton) {
|
96
|
+
if (loadingButton && !loadingButton.dataset.listenerAttached) {
|
22
97
|
loadingButton.addEventListener("click", function () {
|
23
98
|
const okayLoadingButton = document.querySelector('[data-disable-with="Loading"]');
|
24
99
|
const cancelButton = document.querySelector('[data-disable-cancel-with="Loading"]');
|
@@ -35,27 +110,42 @@ export default class PbDialog extends PbEnhancedElement {
|
|
35
110
|
okayLoadingButton.className = newClass;
|
36
111
|
if (cancelButton) cancelButton.className = newCancelClass;
|
37
112
|
});
|
113
|
+
|
114
|
+
// Prevent multiple registrations
|
115
|
+
loadingButton.dataset.listenerAttached = "true";
|
38
116
|
}
|
39
|
-
|
117
|
+
|
40
118
|
openTrigger.forEach((open) => {
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
119
|
+
const originalClickHandler = open._openDialogClickHandler
|
120
|
+
if (originalClickHandler) open.removeEventListener("click", originalClickHandler)
|
121
|
+
|
122
|
+
open._openDialogClickHandler = () => {
|
123
|
+
const openTriggerData = open.dataset.openDialog;
|
124
|
+
const targetDialogOpen = document.getElementById(openTriggerData)
|
125
|
+
if (targetDialogOpen && !targetDialogOpen.open) targetDialogOpen.showModal()
|
126
|
+
};
|
127
|
+
|
128
|
+
open.addEventListener("click", open._openDialogClickHandler)
|
47
129
|
});
|
48
130
|
|
49
131
|
closeTrigger.forEach((close) => {
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
132
|
+
const originalClickHandler = close._closeDialogClickHandler
|
133
|
+
if (originalClickHandler) close.removeEventListener("click", originalClickHandler)
|
134
|
+
|
135
|
+
close._closeDialogClickHandler = () => {
|
136
|
+
const closeTriggerData = close.dataset.closeDialog;
|
137
|
+
const targetDialogClose = document.getElementById(closeTriggerData)
|
138
|
+
if (targetDialogClose) targetDialogClose.close();
|
139
|
+
};
|
140
|
+
|
141
|
+
close.addEventListener("click", close._closeDialogClickHandler)
|
54
142
|
});
|
55
143
|
|
56
144
|
// Close dialog box on outside click
|
57
145
|
dialogs.forEach((dialogElement) => {
|
58
|
-
|
146
|
+
const originalMousedownHandler = dialogElement._outsideClickHandler
|
147
|
+
if (originalMousedownHandler) dialogElement.removeEventListener("mousedown", originalMousedownHandler)
|
148
|
+
dialogElement._outsideClickHandler = (event) => {
|
59
149
|
const dialogParentDataset = dialogElement.parentElement.dataset
|
60
150
|
if (dialogParentDataset.overlayClick === "overlay_close") return
|
61
151
|
|
@@ -69,7 +159,9 @@ export default class PbDialog extends PbEnhancedElement {
|
|
69
159
|
dialogElement.close()
|
70
160
|
event.stopPropagation()
|
71
161
|
}
|
72
|
-
}
|
162
|
+
}
|
163
|
+
|
164
|
+
dialogElement.addEventListener("mousedown", dialogElement._outsideClickHandler);
|
73
165
|
})
|
74
166
|
}
|
75
167
|
}
|
@@ -1,5 +1,6 @@
|
|
1
1
|
@import "../tokens/colors";
|
2
2
|
@import "../tokens/opacity";
|
3
|
+
@import "../tokens/border_radius";
|
3
4
|
|
4
5
|
.pb_draggable_container {
|
5
6
|
.pb_draggable_item {
|
@@ -34,7 +35,7 @@
|
|
34
35
|
width: 100%;
|
35
36
|
height: 100%;
|
36
37
|
border: 2px dashed $neutral;
|
37
|
-
border-radius: $
|
38
|
+
border-radius: $border_radius_sm;
|
38
39
|
box-sizing: border-box;
|
39
40
|
z-index: 10;
|
40
41
|
pointer-events: none;
|
@@ -64,7 +65,7 @@
|
|
64
65
|
width: 100%;
|
65
66
|
height: 100%;
|
66
67
|
background-color: rgba($neutral, $opacity_5);
|
67
|
-
border-radius: $
|
68
|
+
border-radius: $border_radius_sm;
|
68
69
|
z-index: 10;
|
69
70
|
pointer-events: none;
|
70
71
|
}
|
@@ -73,48 +74,70 @@
|
|
73
74
|
&.drop_zone_color_primary::before { background-color: rgba($primary, $opacity_5); }
|
74
75
|
&.drop_zone_color_purple::before { background-color: rgba($purple, $opacity_5); }
|
75
76
|
}
|
76
|
-
|
77
|
-
|
77
|
+
}
|
78
|
+
}
|
79
|
+
// Line default - Vertical orientation (horizontal line for draggable items in vertical layout)
|
80
|
+
&.line_vertical {
|
81
|
+
.pb_draggable_item {
|
82
|
+
position: relative;
|
78
83
|
&.drop_zone_line {
|
79
|
-
// Hide the original content to show the line
|
84
|
+
// Hide the original content to show the line only (held draggable item should not take up space in drop zone)
|
85
|
+
position: relative;
|
86
|
+
z-index: 2;
|
80
87
|
& > * {
|
81
88
|
opacity: 0;
|
82
89
|
}
|
83
|
-
|
90
|
+
height: 4px;
|
84
91
|
// Style for horizontal line (default)
|
85
92
|
&::before {
|
86
93
|
content: '';
|
87
94
|
position: absolute;
|
88
95
|
left: 0;
|
89
96
|
top: 0;
|
90
|
-
width:
|
91
|
-
height:
|
97
|
+
width: 100%;
|
98
|
+
height: 4px;
|
92
99
|
background-color: $neutral;
|
93
|
-
border-radius:
|
100
|
+
border-radius: $border_radius_rounded;
|
94
101
|
z-index: 10;
|
95
102
|
pointer-events: none;
|
103
|
+
transform: translateY(-50%);
|
96
104
|
}
|
97
|
-
|
98
|
-
// Apply color variants
|
105
|
+
// Apply color variants to the ::before element
|
99
106
|
&.drop_zone_color_primary::before { background-color: $primary; }
|
100
107
|
&.drop_zone_color_purple::before { background-color: $purple; }
|
101
108
|
}
|
102
109
|
}
|
103
110
|
}
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
.pb_draggable_item {
|
109
|
-
&.is_dragging {
|
110
|
-
// Line variant for vertical layouts (horizontal line)
|
111
|
+
// Line variant - Horizontal orientation (vertical line for draggable items in horizontal layout)
|
112
|
+
&.line_horizontal {
|
113
|
+
.pb_draggable_item {
|
114
|
+
position: relative;
|
111
115
|
&.drop_zone_line {
|
116
|
+
position: relative;
|
117
|
+
z-index: 2;
|
118
|
+
& > * {
|
119
|
+
opacity: 0;
|
120
|
+
}
|
121
|
+
width: 4px;
|
122
|
+
height: auto;
|
123
|
+
// Style for vertical line
|
112
124
|
&::before {
|
113
|
-
|
114
|
-
|
125
|
+
content: '';
|
126
|
+
position: absolute;
|
115
127
|
left: 0;
|
116
128
|
top: 0;
|
129
|
+
width: 4px;
|
130
|
+
height: 100%;
|
131
|
+
background-color: $neutral;
|
132
|
+
border-radius: $border_radius_rounded;
|
133
|
+
z-index: 10;
|
134
|
+
pointer-events: none;
|
135
|
+
transform: translateX(-50%);
|
117
136
|
}
|
137
|
+
|
138
|
+
// Apply color variants to the ::before element
|
139
|
+
&.drop_zone_color_primary::before { background-color: $primary; }
|
140
|
+
&.drop_zone_color_purple::before { background-color: $purple; }
|
118
141
|
}
|
119
142
|
}
|
120
143
|
}
|
@@ -1,11 +1,11 @@
|
|
1
|
-
import React, { createContext, useReducer, useContext, useEffect, useMemo } from "react";
|
1
|
+
import React, { createContext, useReducer, useContext, useEffect, useMemo, useRef, useState } from "react";
|
2
2
|
import { InitialStateType, ActionType, DraggableProviderType } from "./types";
|
3
3
|
|
4
4
|
const initialState: InitialStateType = {
|
5
5
|
items: [],
|
6
6
|
dragData: { id: "", initialGroup: "" },
|
7
7
|
isDragging: "",
|
8
|
-
activeContainer: ""
|
8
|
+
activeContainer: "",
|
9
9
|
};
|
10
10
|
|
11
11
|
const reducer = (state: InitialStateType, action: ActionType) => {
|
@@ -31,9 +31,23 @@ const reducer = (state: InitialStateType, action: ActionType) => {
|
|
31
31
|
const { dragId, targetId } = action.payload;
|
32
32
|
const newItems = [...state.items];
|
33
33
|
const draggedItem = newItems.find(item => item.id === dragId);
|
34
|
-
const
|
34
|
+
const targetItem = newItems.find(item => item.id === targetId);
|
35
|
+
|
36
|
+
if (!draggedItem || !targetItem || draggedItem.container !== targetItem.container) {
|
37
|
+
return state;
|
38
|
+
}
|
39
|
+
|
40
|
+
if (dragId === targetId) {
|
41
|
+
return state;
|
42
|
+
}
|
43
|
+
|
44
|
+
const draggedIndex = newItems.findIndex(item => item.id === dragId);
|
35
45
|
const targetIndex = newItems.findIndex(item => item.id === targetId);
|
36
46
|
|
47
|
+
if (draggedIndex === -1 || targetIndex === -1) {
|
48
|
+
return state;
|
49
|
+
}
|
50
|
+
|
37
51
|
newItems.splice(draggedIndex, 1);
|
38
52
|
newItems.splice(targetIndex, 0, draggedItem);
|
39
53
|
|
@@ -48,7 +62,11 @@ const reducer = (state: InitialStateType, action: ActionType) => {
|
|
48
62
|
const DragContext = createContext<any>({});
|
49
63
|
|
50
64
|
export const DraggableContext = () => {
|
51
|
-
|
65
|
+
const context = useContext(DragContext);
|
66
|
+
if (context === undefined) {
|
67
|
+
throw new Error('DraggableContext must be used within a DraggableProvider');
|
68
|
+
}
|
69
|
+
return context;
|
52
70
|
};
|
53
71
|
|
54
72
|
export const DraggableProvider = ({
|
@@ -63,7 +81,11 @@ export const DraggableProvider = ({
|
|
63
81
|
dropZone = { type: 'ghost', color: 'neutral', direction: 'vertical' }
|
64
82
|
}: DraggableProviderType) => {
|
65
83
|
const [state, dispatch] = useReducer(reducer, initialState);
|
66
|
-
|
84
|
+
|
85
|
+
// Store initial items in a ref to use if needed (for consistency when needed in future updates)
|
86
|
+
const initialItemsRef = useRef(initialItems);
|
87
|
+
const [isDragging, setIsDragging] = useState(false);
|
88
|
+
|
67
89
|
// Parse dropZone prop - handle both string format (backward compatibility) and object format
|
68
90
|
let dropZoneType = 'ghost';
|
69
91
|
let dropZoneColor = 'neutral';
|
@@ -86,45 +108,64 @@ export const DraggableProvider = ({
|
|
86
108
|
|
87
109
|
useEffect(() => {
|
88
110
|
dispatch({ type: 'SET_ITEMS', payload: initialItems });
|
111
|
+
initialItemsRef.current = initialItems;
|
89
112
|
}, [initialItems]);
|
90
113
|
|
91
114
|
useEffect(() => {
|
92
|
-
onReorder
|
93
|
-
|
115
|
+
if (onReorder) {
|
116
|
+
onReorder(state.items);
|
117
|
+
}
|
118
|
+
}, [state.items, onReorder]);
|
94
119
|
|
95
120
|
const handleDragStart = (id: string, container: string) => {
|
96
|
-
|
121
|
+
setIsDragging(true);
|
122
|
+
dispatch({ type: 'SET_DRAG_DATA', payload: { id, initialGroup: container } });
|
97
123
|
dispatch({ type: 'SET_IS_DRAGGING', payload: id });
|
124
|
+
dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: container });
|
98
125
|
if (onDragStart) onDragStart(id, container);
|
99
126
|
};
|
100
127
|
|
101
128
|
const handleDragEnter = (id: string, container: string) => {
|
102
|
-
if (
|
103
|
-
|
104
|
-
|
129
|
+
if (!isDragging || container !== state.activeContainer) return;
|
130
|
+
|
131
|
+
if (state.dragData.id === id) return;
|
132
|
+
|
133
|
+
const draggedItem = state.items.find(item => item.id === state.dragData.id);
|
134
|
+
const targetItem = state.items.find(item => item.id === id);
|
135
|
+
|
136
|
+
if (!draggedItem || !targetItem || draggedItem.container !== targetItem.container) {
|
137
|
+
return;
|
105
138
|
}
|
139
|
+
|
140
|
+
dispatch({ type: 'REORDER_ITEMS', payload: { dragId: state.dragData.id, targetId: id } });
|
141
|
+
|
106
142
|
if (onDragEnter) onDragEnter(id, container);
|
107
143
|
};
|
108
144
|
|
109
145
|
const handleDragEnd = () => {
|
146
|
+
setIsDragging(false);
|
110
147
|
dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
|
111
148
|
dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
|
112
149
|
if (onDragEnd) onDragEnd();
|
113
150
|
};
|
114
151
|
|
115
|
-
const changeCategory = (itemId: string, container: string) => {
|
116
|
-
dispatch({ type: 'CHANGE_CATEGORY', payload: { itemId, container } });
|
117
|
-
};
|
118
|
-
|
119
152
|
const handleDrop = (container: string) => {
|
153
|
+
const draggedItem = state.items.find(item => item.id === state.dragData.id);
|
154
|
+
|
155
|
+
if (draggedItem && draggedItem.container !== container) {
|
156
|
+
dispatch({ type: 'CHANGE_CATEGORY', payload: { itemId: state.dragData.id, container } });
|
157
|
+
}
|
158
|
+
|
120
159
|
dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
|
121
160
|
dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
|
122
|
-
|
161
|
+
|
162
|
+
setIsDragging(false);
|
123
163
|
if (onDrop) onDrop(container);
|
124
164
|
};
|
125
165
|
|
126
166
|
const handleDragOver = (e: Event, container: string) => {
|
127
167
|
e.preventDefault();
|
168
|
+
e.stopPropagation();
|
128
169
|
dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: container });
|
129
170
|
if (onDragOver) onDragOver(e, container);
|
130
171
|
};
|
@@ -144,7 +185,7 @@ export const DraggableProvider = ({
|
|
144
185
|
handleDragEnd,
|
145
186
|
handleDrop,
|
146
187
|
handleDragOver
|
147
|
-
}), [state, dropZoneType, dropZoneColor, dropZoneDirection]);
|
188
|
+
}), [state, dropZoneType, dropZoneColor, dropZoneDirection, handleDragStart, handleDragEnter, handleDragEnd, handleDrop, handleDragOver]);
|
148
189
|
|
149
190
|
return (
|
150
191
|
<DragContext.Provider value={contextValue}>{children}</DragContext.Provider>
|
@@ -0,0 +1,43 @@
|
|
1
|
+
<% data_shadow = [
|
2
|
+
{ id: "51", text: "Task 1" },
|
3
|
+
{ id: "52", text: "Task 2" },
|
4
|
+
{ id: "53", text: "Task 3" }
|
5
|
+
] %>
|
6
|
+
|
7
|
+
<% data_outline = [
|
8
|
+
{ id: "61", text: "Task 1" },
|
9
|
+
{ id: "62", text: "Task 2" },
|
10
|
+
{ id: "63", text: "Task 3" }
|
11
|
+
] %>
|
12
|
+
|
13
|
+
<%= pb_rails("flex", props: { justify: "around" }) do %>
|
14
|
+
<%= pb_rails("flex/flex_item", props: { margin_right: "xl" }) do %>
|
15
|
+
<%= pb_rails("draggable", props: { drop_zone_type: "shadow", initial_items: data_shadow }) do %>
|
16
|
+
<%= pb_rails("caption", props: { margin_bottom: "xs", text: "Shadow", text_align: "center" }) %>
|
17
|
+
<%= pb_rails("draggable/draggable_container", props: { html_options: { style: { width: "200px" } } }) do %>
|
18
|
+
<% data_shadow.each do |item| %>
|
19
|
+
<%= pb_rails("card", props: { drag_id: item[:id], draggable_item: true, margin_bottom: "xs", padding: "xs", padding_right: "xl" }) do %>
|
20
|
+
<%= pb_rails("flex", props: { align_items: "stretch", flex_direction: "column" }) do %>
|
21
|
+
<%= pb_rails("body", props: { text: item[:text] }) %>
|
22
|
+
<% end %>
|
23
|
+
<% end %>
|
24
|
+
<% end %>
|
25
|
+
<% end %>
|
26
|
+
<% end %>
|
27
|
+
<% end %>
|
28
|
+
|
29
|
+
<%= pb_rails("flex/flex_item", props: { margin_right: "xl" }) do %>
|
30
|
+
<%= pb_rails("draggable", props: { drop_zone_type: "outline", initial_items: data_outline }) do %>
|
31
|
+
<%= pb_rails("caption", props: { margin_bottom: "xs", text: "Outline", text_align: "center" }) %>
|
32
|
+
<%= pb_rails("draggable/draggable_container", props: { html_options: { style: { width: "200px" } } }) do %>
|
33
|
+
<% data_outline.each do |item| %>
|
34
|
+
<%= pb_rails("card", props: { drag_id: item[:id], draggable_item: true, margin_bottom: "xs", padding: "xs", padding_right: "xl" }) do %>
|
35
|
+
<%= pb_rails("flex", props: { align_items: "stretch", flex_direction: "column" }) do %>
|
36
|
+
<%= pb_rails("body", props: { text: item[:text] }) %>
|
37
|
+
<% end %>
|
38
|
+
<% end %>
|
39
|
+
<% end %>
|
40
|
+
<% end %>
|
41
|
+
<% end %>
|
42
|
+
<% end %>
|
43
|
+
<% end %>
|