playbook_ui 14.17.0 → 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/_advanced_table.scss +365 -143
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +14 -1
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb +6 -1
- 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_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 +10 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +6 -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_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_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/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 +68 -0
- 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/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 +23 -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_layout/_layout.scss +70 -1
- data/app/pb_kits/playbook/pb_layout/_layout.tsx +29 -2
- data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx +322 -118
- data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md +1 -1
- data/app/pb_kits/playbook/pb_layout/subcomponents/_game.tsx +74 -43
- data/app/pb_kits/playbook/pb_layout/subcomponents/_participant.tsx +79 -0
- data/app/pb_kits/playbook/pb_layout/subcomponents/_round.tsx +21 -4
- 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_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_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_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/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_typeahead/docs/_typeahead_error_state.html.erb +8 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.jsx +6 -2
- data/dist/chunks/_typeahead-D8CsVBZO.js +22 -0
- data/dist/chunks/_weekday_stacked-D3oLTSkH.js +45 -0
- data/dist/chunks/lazysizes-B7xYodB-.js +1 -0
- data/dist/chunks/lib-BmTAc7Nc.js +29 -0
- data/dist/chunks/{pb_form_validation-BiHyZedy.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/version.rb +2 -2
- metadata +92 -21
- 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-CPM091Hj.js +0 -22
- data/dist/chunks/_weekday_stacked-BzIANIYX.js +0 -45
- data/dist/chunks/lazysizes-DHz07jlL.js +0 -1
- data/dist/chunks/lib-Bg2KFzpz.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
@@ -0,0 +1,34 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import DatePicker from "../_date_picker";
|
3
|
+
|
4
|
+
const DatePickerRangePattern = (props) => {
|
5
|
+
return (
|
6
|
+
<>
|
7
|
+
<DatePicker
|
8
|
+
controlsEndId="end-date-picker"
|
9
|
+
controlsStartId="start-date-picker"
|
10
|
+
mode="range"
|
11
|
+
pickerId="quickpick-for-range"
|
12
|
+
placeholder="Select a Range"
|
13
|
+
selectionType="quickpick"
|
14
|
+
{...props}
|
15
|
+
/>
|
16
|
+
|
17
|
+
<DatePicker
|
18
|
+
pickerId="start-date-picker"
|
19
|
+
placeholder="Select a Start Date"
|
20
|
+
syncStartWith="quickpick-for-range"
|
21
|
+
{...props}
|
22
|
+
/>
|
23
|
+
|
24
|
+
<DatePicker
|
25
|
+
pickerId="end-date-picker"
|
26
|
+
placeholder="Select a End Date"
|
27
|
+
syncEndWith="quickpick-for-range"
|
28
|
+
{...props}
|
29
|
+
/>
|
30
|
+
</>
|
31
|
+
);
|
32
|
+
};
|
33
|
+
|
34
|
+
export default DatePickerRangePattern;
|
@@ -0,0 +1,14 @@
|
|
1
|
+
You can link a Quickpick DatePicker to standard DatePickers using the following props:
|
2
|
+
|
3
|
+
**For the Quickpick DatePicker**:
|
4
|
+
`controlsStartId`: ID of the DatePicker that should receive the start date.
|
5
|
+
|
6
|
+
`controlsEndId`: ID of the DatePicker that should receive the end date.
|
7
|
+
|
8
|
+
When a quickpick option like “This Year” is selected, it automatically populates the linked start and end inputs.
|
9
|
+
|
10
|
+
**For the Start/End DatePickers**:
|
11
|
+
`syncStartWith`: ID of the quickpick this start date is synced to.
|
12
|
+
`syncEndWith`: ID of the quickpick this end date is synced to.
|
13
|
+
|
14
|
+
When a user manually edits the start or end date, it clears the selected quickpick to prevent conflicting values.
|
@@ -0,0 +1,20 @@
|
|
1
|
+
<%= pb_rails("date_picker", props: {
|
2
|
+
mode: "range",
|
3
|
+
picker_id: "quick-pick-date-range",
|
4
|
+
placeholder: "Select a Date Range",
|
5
|
+
selection_type: "quickpick",
|
6
|
+
controls_end_id: "quick-pick-date-range-end",
|
7
|
+
controls_start_id: "quick-pick-date-range-start",
|
8
|
+
}) %>
|
9
|
+
|
10
|
+
<%= pb_rails("date_picker", props: {
|
11
|
+
picker_id: "quick-pick-date-range-start",
|
12
|
+
placeholder: "Select a Start Date",
|
13
|
+
sync_start_with:"quick-pick-date-range",
|
14
|
+
}) %>
|
15
|
+
|
16
|
+
<%= pb_rails("date_picker", props: {
|
17
|
+
picker_id: "quick-pick-date-range-end",
|
18
|
+
placeholder: "Select an End Date",
|
19
|
+
sync_end_with:"quick-pick-date-range",
|
20
|
+
}) %>
|
@@ -0,0 +1,14 @@
|
|
1
|
+
You can link a Quickpick DatePicker to standard DatePickers using the following props:
|
2
|
+
|
3
|
+
**For the Quickpick DatePicker**:
|
4
|
+
`controls_start_id`: ID of the DatePicker that should receive the start date.
|
5
|
+
|
6
|
+
`controls_end_id`: ID of the DatePicker that should receive the end date.
|
7
|
+
|
8
|
+
When a quickpick option like “This Year” is selected, it automatically populates the linked start and end inputs.
|
9
|
+
|
10
|
+
**For the Start/End DatePickers**:
|
11
|
+
`sync_start_with`: ID of the quickpick this start date is synced to.
|
12
|
+
`sync_end_with`: ID of the quickpick this end date is synced to.
|
13
|
+
|
14
|
+
When a user manually edits the start or end date, it clears the selected quickpick to prevent conflicting values.
|
@@ -15,6 +15,7 @@ examples:
|
|
15
15
|
- date_picker_quick_pick_custom: Custom Quick Pick Dates
|
16
16
|
- date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
|
17
17
|
- date_picker_quick_pick_default_date: Range (Quick Pick w/ Default Date)
|
18
|
+
- date_picker_range_pattern_rails: Range with 2 Date Pickers and a Quick Pick
|
18
19
|
- date_picker_format: Format
|
19
20
|
- date_picker_disabled: Disabled Dates
|
20
21
|
- date_picker_min_max: Min Max
|
@@ -47,6 +48,7 @@ examples:
|
|
47
48
|
- date_picker_quick_pick_custom: Custom Quick Pick Dates
|
48
49
|
- date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
|
49
50
|
- date_picker_quick_pick_default_date: Range (Quick Pick w/ Default Date)
|
51
|
+
- date_picker_range_pattern: Range with 2 Date Pickers and a Quick Pick
|
50
52
|
- date_picker_format: Format
|
51
53
|
- date_picker_disabled: Disabled Dates
|
52
54
|
- date_picker_min_max: Min Max
|
@@ -26,3 +26,4 @@ export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'
|
|
26
26
|
export { default as DatePickerQuickPickCustom } from './_date_picker_quick_pick_custom'
|
27
27
|
export { default as DatePickerQuickPickCustomOverride } from './_date_picker_quick_pick_custom_override'
|
28
28
|
export { default as DatePickerQuickPickDefaultDate } from './_date_picker_quick_pick_default_date'
|
29
|
+
export { default as DatePickerRangePattern } from './_date_picker_range_pattern'
|
@@ -238,6 +238,16 @@ const quickPickPlugin = (thisRangesEndToday: boolean, customQuickPickDates: cust
|
|
238
238
|
},
|
239
239
|
|
240
240
|
onClose(selectedDates: Array<Date>) {
|
241
|
+
// Patch .clear() to also remove active state if cleared
|
242
|
+
const originalClear = fp.clear;
|
243
|
+
fp.clear = function (...args: any) {
|
244
|
+
const current = pluginData.rangesNav.querySelector('.active');
|
245
|
+
if (current) {
|
246
|
+
current.classList.remove('active');
|
247
|
+
}
|
248
|
+
activeLabel = "";
|
249
|
+
return originalClear.apply(this, args);
|
250
|
+
};
|
241
251
|
// remove the active class from the button if the selected dates don't match the label
|
242
252
|
if (!isLabelMatchingSelectedDates(selectedDates)) {
|
243
253
|
pluginData.rangesButtons[activeLabel]?.classList.remove('active');
|
@@ -1,7 +1,16 @@
|
|
1
1
|
<div
|
2
2
|
class="pb_dialog_wrapper_rails <%= object.full_height_style %>"
|
3
3
|
data-pb-dialog-wrapper="true"
|
4
|
-
data-overlay-click=
|
4
|
+
data-overlay-click="<%= object.overlay_close %>"
|
5
|
+
<% if object.custom_event_type.present? %>
|
6
|
+
data-custom-event-type="<%= object.custom_event_type %>"
|
7
|
+
<% end %>
|
8
|
+
<% if object.confirm_button_id.present? %>
|
9
|
+
data-confirm-button-id="<%= object.confirm_button_id %>"
|
10
|
+
<% end %>
|
11
|
+
<% if object.cancel_button_id.present? %>
|
12
|
+
data-cancel-button-id="<%= object.cancel_button_id %>"
|
13
|
+
<% end %>
|
5
14
|
>
|
6
15
|
<%= pb_content_tag(:dialog) do %>
|
7
16
|
<% if object.status === "" && object.title %>
|
@@ -21,6 +21,8 @@ module Playbook
|
|
21
21
|
prop :status, type: Playbook::Props::Enum,
|
22
22
|
values: ["info", "caution", "delete", "error", "success", "default", ""],
|
23
23
|
default: ""
|
24
|
+
prop :custom_event_type, type: Playbook::Props::String,
|
25
|
+
default: ""
|
24
26
|
|
25
27
|
def classname
|
26
28
|
generate_classname("pb_dialog pb_dialog_rails pb_dialog_#{size}_#{placement}")
|
@@ -0,0 +1,117 @@
|
|
1
|
+
<%= pb_rails("flex", props:{ gap: "xs", wrap:true}) do %>
|
2
|
+
<%= pb_rails("button", props: { id: "button-open-example-turbo-frames", margin_right: "md", text: "Open Dialog via Custom Event" }) %>
|
3
|
+
<%= pb_rails("button", props: { id: "open-dialog-button", data: { open_dialog: "dialog-confirm-turbo-frames" }, margin_right: "md", text: "Custom Event Linked to Confirm Button" }) %>
|
4
|
+
<%= pb_rails("button", props: { id: "button-open-multi-dialog", text: "Mutliple Events Example" }) %>
|
5
|
+
<% end %>
|
6
|
+
|
7
|
+
<!-- Example 1: Basic dialog with custom event opening -->
|
8
|
+
<%= pb_rails("dialog", props: {
|
9
|
+
id: "dialog-open-turbo-frames",
|
10
|
+
title: "Click Event Simulation",
|
11
|
+
text: "Demonstrating Opening the Dialog with a Custom Event.",
|
12
|
+
custom_event_type: "dialogOpen",
|
13
|
+
cancel_button: "Cancel Button",
|
14
|
+
confirm_button: "Okay",
|
15
|
+
confirm_button_id: "confirm-button-turbo-frames"
|
16
|
+
}) %>
|
17
|
+
|
18
|
+
<script>
|
19
|
+
document.getElementById("button-open-example-turbo-frames").addEventListener("click", () => {
|
20
|
+
console.log("📣 Dispatching 'dialogOpen' custom event")
|
21
|
+
|
22
|
+
window.dispatchEvent(new CustomEvent("dialogOpen", {
|
23
|
+
bubbles: true,
|
24
|
+
detail: {
|
25
|
+
dialogId: "dialog-open-turbo-frames",
|
26
|
+
action: "open"
|
27
|
+
}
|
28
|
+
}))
|
29
|
+
|
30
|
+
console.log("✅ Custom event dispatched - dialog should open")
|
31
|
+
})
|
32
|
+
</script>
|
33
|
+
|
34
|
+
<!-- Example 2: Dialog with custom event linking confirm button to closing the dialog-->
|
35
|
+
<%= pb_rails("dialog", props: {
|
36
|
+
id: "dialog-confirm-turbo-frames",
|
37
|
+
title: "Custom Event Button Action",
|
38
|
+
text: "Clicking this dialog's confirm button triggers closing the dialog as well.",
|
39
|
+
custom_event_type: "turboResponse",
|
40
|
+
cancel_button: "Cancel",
|
41
|
+
cancel_button_id: "cancel-button-id-turbo-frames",
|
42
|
+
confirm_button: "Confirm Button",
|
43
|
+
confirm_button_id: "confirm-button-id-turbo-frames"
|
44
|
+
}) %>
|
45
|
+
|
46
|
+
<script>
|
47
|
+
window.addEventListener("turboResponse", (event) => {
|
48
|
+
const { dialogId, action, cancelButtonId } = event.detail || {}
|
49
|
+
console.log("📦 turboResponse event triggered:", { dialogId, action, cancelButtonId })
|
50
|
+
|
51
|
+
if (action === "close" && cancelButtonId) {
|
52
|
+
const dialog = document.getElementById(dialogId)
|
53
|
+
if (dialog?.close) {
|
54
|
+
console.log("🚪 Closing dialog programmatically")
|
55
|
+
dialog.close()
|
56
|
+
}
|
57
|
+
}
|
58
|
+
})
|
59
|
+
|
60
|
+
document.getElementById("confirm-button-id-turbo-frames").addEventListener("click", function () {
|
61
|
+
console.log("✅ Confirm button clicked! Triggering cancel via turboResponse")
|
62
|
+
|
63
|
+
window.dispatchEvent(new CustomEvent("turboResponse", {
|
64
|
+
detail: {
|
65
|
+
dialogId: "dialog-confirm-turbo-frames",
|
66
|
+
action: "close",
|
67
|
+
cancelButtonId: "cancel-button-id-turbo-frames"
|
68
|
+
}
|
69
|
+
}))
|
70
|
+
})
|
71
|
+
</script>
|
72
|
+
|
73
|
+
<!-- Example 3: Dialog with multiple custom event types -->
|
74
|
+
<%= pb_rails("dialog", props: {
|
75
|
+
id: "multi-event-dialog",
|
76
|
+
title: "Multiple Event Types",
|
77
|
+
text: "This dialog responds to multiple custom event types - see console logs.",
|
78
|
+
custom_event_type: "dialogOpenMutli,turboResponseMulti",
|
79
|
+
cancel_button: "Cancel",
|
80
|
+
cancel_button_id: "multi-event-cancel",
|
81
|
+
confirm_button: "Confirm",
|
82
|
+
confirm_button_id: "multi-event-confirm"
|
83
|
+
}) %>
|
84
|
+
|
85
|
+
<script>
|
86
|
+
document.getElementById("button-open-multi-dialog").addEventListener("click", () => {
|
87
|
+
console.log("📣 Dispatching 'dialogOpenMutli' custom event")
|
88
|
+
window.dispatchEvent(new CustomEvent("dialogOpenMutli", {
|
89
|
+
detail: {
|
90
|
+
dialogId: "multi-event-dialog",
|
91
|
+
action: "open"
|
92
|
+
}
|
93
|
+
}))
|
94
|
+
})
|
95
|
+
|
96
|
+
document.getElementById("multi-event-confirm")?.addEventListener("click", function() {
|
97
|
+
console.log("✅ Confirm clicked — dispatching 'turboResponseMulti' to simulate dialog close")
|
98
|
+
|
99
|
+
window.dispatchEvent(new CustomEvent("turboResponseMulti", {
|
100
|
+
detail: {
|
101
|
+
dialogId: "multi-event-dialog",
|
102
|
+
action: "close",
|
103
|
+
cancelButtonId: "multi-event-cancel"
|
104
|
+
}
|
105
|
+
}))
|
106
|
+
})
|
107
|
+
|
108
|
+
window.addEventListener("turboResponseMulti", (event) => {
|
109
|
+
const { dialogId, action, cancelButtonId } = event.detail || {}
|
110
|
+
|
111
|
+
if (action === "close" && dialogId) {
|
112
|
+
const dialog = document.getElementById(dialogId)
|
113
|
+
dialog.close?.()
|
114
|
+
console.log("🚪 Closing dialog programmatically")
|
115
|
+
}
|
116
|
+
})
|
117
|
+
</script>
|
@@ -0,0 +1,9 @@
|
|
1
|
+
The `custom_event_type` prop allows you to specify custom events that will trigger the dialog's initialization or control its behavior. This is especially useful when working with Turbo Frame updates where standard DOM events might not suffice.
|
2
|
+
|
3
|
+
The examples demonstrate two use cases:
|
4
|
+
1) Opening a dialog via custom event dispatch: The first example shows how to configure a dialog to listen for a specific custom event (dialogOpen). When this event is dispatched, the dialog will automatically open, making it easy to trigger the dialog from JavaScript or after Turbo Frame operations.
|
5
|
+
2) Controlling dialog button actions with custom events: The second example demonstrates how to set up a dialog that can have its confirm button triggered through external events (turboResponse). This pattern is useful when you need to programmatically confirm a dialog after some background operation completes.
|
6
|
+
3) Multiple custom events: The third example combines the first two to show how `custom_event_type` prop can support multiple event types separated by a comma.
|
7
|
+
|
8
|
+
For Turbo integration, you can use standard Turbo events like turbo:frame-load or turbo:submit-end as your `custom_event_type` to ensure the dialog responds properly after Turbo navigation or form submissions. The dialog component will listen for these events automatically.
|
9
|
+
The implementation handles various actions including 'open', 'close', 'clickConfirm', and 'clickCancel', making it flexible for different interaction patterns in your Turbo-enhanced application.
|
@@ -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
|
}
|
@@ -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 %>
|