playbook_ui 14.18.0.pre.alpha.PLAY20787400 → 14.18.0.pre.alpha.play2034zonesandcolors7407
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_date_picker/_date_picker.tsx +0 -12
- data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +0 -12
- data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +1 -50
- 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 +0 -4
- 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 +1 -5
- data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_date_picker/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +0 -10
- 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_colors.html.erb +55 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_rails.md +1 -0
- data/app/pb_kits/playbook/pb_draggable/docs/example.yml +2 -1
- data/app/pb_kits/playbook/pb_draggable/draggable.rb +9 -1
- data/app/pb_kits/playbook/pb_draggable/index.js +139 -142
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx +4 -1
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx +8 -1
- data/app/pb_kits/playbook/pb_select/docs/_select_error.jsx +7 -2
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.jsx +9 -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.jsx +6 -2
- data/dist/chunks/{_typeahead-BX8IifKY.js → _typeahead-CvkGr9xV.js} +1 -1
- data/dist/chunks/_weekday_stacked-B-ran-L1.js +45 -0
- data/dist/chunks/{lib-96_ZmvAo.js → lib-yWHJ_8mm.js} +1 -1
- data/dist/chunks/{pb_form_validation-Vv2TqXVC.js → pb_form_validation-CFPfX89U.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +2 -2
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +10 -11
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.jsx +0 -34
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.md +0 -14
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.html.erb +0 -20
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.md +0 -14
- data/dist/chunks/_weekday_stacked-DfMD7HJz.js +0 -45
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_drop_zones_colors.md → _draggable_drop_zones_colors_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_drop_zones.md → _draggable_drop_zones_react.md} +0 -0
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 82af6f41e074ccd0c1072ae79ddb0855e52a009457ef0bba28f1e69184b1e1c9
|
4
|
+
data.tar.gz: 37b9ca3d21cbe1ef755604dac8072152649e5f8311860b5bcd02e12144153ec2
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: ead03cac479441c769277d456c4caec0f7709340dfeec40acee19d00b55053cd16d6eb5332472958b89f928db25063cb748bd8149d4593b052303fd9a88900a2
|
7
|
+
data.tar.gz: f231e8c3219d2968d1632f2663c911f3331624c7bfe3da26adc3105ad26154d701543ccb8b8b83f2b6233bf2f175a37fada397697b5f814ccc1ff2b5959f8634
|
@@ -50,10 +50,6 @@ type DatePickerProps = {
|
|
50
50
|
timeFormat?: string,
|
51
51
|
type?: string,
|
52
52
|
yearRange?: number[],
|
53
|
-
controlsStartId?: string,
|
54
|
-
controlsEndId?: string,
|
55
|
-
syncStartWith?: string,
|
56
|
-
syncEndWith?: string,
|
57
53
|
} & GlobalProps
|
58
54
|
|
59
55
|
const DatePicker = (props: DatePickerProps): React.ReactElement => {
|
@@ -102,10 +98,6 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
|
|
102
98
|
staticPosition = true,
|
103
99
|
thisRangesEndToday = false,
|
104
100
|
yearRange = [1900, 2100],
|
105
|
-
controlsStartId,
|
106
|
-
controlsEndId,
|
107
|
-
syncStartWith,
|
108
|
-
syncEndWith,
|
109
101
|
} = props
|
110
102
|
|
111
103
|
const ariaProps = buildAriaProps(aria)
|
@@ -142,10 +134,6 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
|
|
142
134
|
staticPosition,
|
143
135
|
thisRangesEndToday,
|
144
136
|
yearRange,
|
145
|
-
controlsStartId,
|
146
|
-
controlsEndId,
|
147
|
-
syncStartWith,
|
148
|
-
syncEndWith,
|
149
137
|
required: false,
|
150
138
|
}, scrollContainer)
|
151
139
|
}, initializeOnce ? [] : undefined)
|
@@ -77,14 +77,6 @@ module Playbook
|
|
77
77
|
default: ""
|
78
78
|
prop :validation_message, type: Playbook::Props::String,
|
79
79
|
default: ""
|
80
|
-
prop :controls_start_id, type: Playbook::Props::String,
|
81
|
-
default: ""
|
82
|
-
prop :controls_end_id, type: Playbook::Props::String,
|
83
|
-
default: ""
|
84
|
-
prop :sync_start_with, type: Playbook::Props::String,
|
85
|
-
default: ""
|
86
|
-
prop :sync_end_with, type: Playbook::Props::String,
|
87
|
-
default: ""
|
88
80
|
|
89
81
|
def classname
|
90
82
|
default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
|
@@ -116,10 +108,6 @@ module Playbook
|
|
116
108
|
staticPosition: static_position,
|
117
109
|
thisRangesEndToday: this_ranges_end_today,
|
118
110
|
yearRange: year_range,
|
119
|
-
controlsStartId: controls_start_id,
|
120
|
-
controlsEndId: controls_end_id,
|
121
|
-
syncStartWith: sync_start_with,
|
122
|
-
syncEndWith: sync_end_with,
|
123
111
|
}.to_json.html_safe
|
124
112
|
end
|
125
113
|
|
@@ -32,11 +32,7 @@ type DatePickerConfig = {
|
|
32
32
|
thisRangesEndToday?: boolean,
|
33
33
|
timeCaption?: string,
|
34
34
|
timeFormat?: string,
|
35
|
-
yearRange: number[]
|
36
|
-
controlsStartId?: string,
|
37
|
-
controlsEndId?: string,
|
38
|
-
syncStartWith?: string,
|
39
|
-
syncEndWith?: string,
|
35
|
+
yearRange: number[]
|
40
36
|
} & Pick<BaseOptions, "allowInput" | "defaultDate" | "enableTime" | "maxDate" | "minDate" | "mode" | "plugins" | "position" | "positionElement" >
|
41
37
|
|
42
38
|
const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HTMLElement) => {
|
@@ -71,10 +67,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
|
|
71
67
|
timeCaption = 'Select Time',
|
72
68
|
timeFormat = 'at h:i K',
|
73
69
|
yearRange,
|
74
|
-
controlsStartId,
|
75
|
-
controlsEndId,
|
76
|
-
syncStartWith,
|
77
|
-
syncEndWith,
|
78
70
|
} = config
|
79
71
|
|
80
72
|
// ===========================================================
|
@@ -283,47 +275,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
|
|
283
275
|
})
|
284
276
|
}
|
285
277
|
|
286
|
-
// === Automatic Sync Logic for 3 input range pattern===
|
287
|
-
|
288
|
-
// If this is a quickpick that controls start and end
|
289
|
-
if (selectionType === "quickpick" && (controlsStartId || controlsEndId)) {
|
290
|
-
picker.config.onClose.push((selectedDates:string) => {
|
291
|
-
const [start, end] = selectedDates;
|
292
|
-
|
293
|
-
if (controlsStartId) {
|
294
|
-
const startPicker = (document.querySelector(`#${controlsStartId}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
|
295
|
-
startPicker?.setDate(start, true);
|
296
|
-
}
|
297
|
-
|
298
|
-
if (controlsEndId) {
|
299
|
-
const endPicker = (document.querySelector(`#${controlsEndId}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
|
300
|
-
endPicker?.setDate(end, true);
|
301
|
-
}
|
302
|
-
});
|
303
|
-
}
|
304
|
-
|
305
|
-
// If this is a start picker that syncs with a quickpick
|
306
|
-
if (syncStartWith) {
|
307
|
-
picker.config.onClose.push((selectedDates: string) => {
|
308
|
-
if (selectedDates?.length) {
|
309
|
-
const quickpick = (document.querySelector(`#${syncStartWith}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
|
310
|
-
quickpick?.clear();
|
311
|
-
}
|
312
|
-
});
|
313
|
-
}
|
314
|
-
|
315
|
-
// If this is an end picker that syncs with a quickpick
|
316
|
-
if (syncEndWith) {
|
317
|
-
picker.config.onClose.push((selectedDates: string) => {
|
318
|
-
if (selectedDates?.length) {
|
319
|
-
const quickpick = (document.querySelector(`#${syncEndWith}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
|
320
|
-
quickpick?.clear();
|
321
|
-
}
|
322
|
-
});
|
323
|
-
}
|
324
|
-
// === End of Automatic Sync Logic ===
|
325
|
-
|
326
|
-
|
327
278
|
// Adding dropdown icons to year and month select
|
328
279
|
dropdown.insertAdjacentHTML('afterend', `<i class="year-dropdown-icon">${angleDown}</i>`)
|
329
280
|
if (picker.monthElements[0].parentElement) {
|
@@ -1,11 +1,14 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
|
3
3
|
import DatePicker from '../_date_picker'
|
4
|
+
import Icon from '../../pb_icon/_icon'
|
4
5
|
|
5
6
|
const DatePickerError = (props) => (
|
6
7
|
<div>
|
7
8
|
<DatePicker
|
8
|
-
error=
|
9
|
+
error={<>
|
10
|
+
<Icon icon="warning" /> Invalid date. Please pick a valid date.
|
11
|
+
</>}
|
9
12
|
pickerId="date-picker-error"
|
10
13
|
{...props}
|
11
14
|
/>
|
@@ -1,7 +1,3 @@
|
|
1
|
-
To use the `quickpick`:
|
2
|
-
- prop `mode` must be set to `range`
|
3
|
-
- prop `selection_type` must be set to `quickpick`
|
4
|
-
|
5
1
|
This date range variant uses hidden inputs to handle start and end dates. While they are not required props, it is advisable to specify a unique `start_date_id`, `start_date_name`, `end_date_id`, and `end_date_name` for each quick pick instance you place in a form and/or on a page.
|
6
2
|
|
7
3
|
Like all other date pickers, the quick pick does require a `picker_id`.
|
@@ -1 +1 @@
|
|
1
|
-
|
1
|
+
Because the Quick Pick variant has `allowInput` set to `true` by default, use the `onClose` handler function to access the startDate and endDate values. See the `onClose` example for details.
|
@@ -1,5 +1 @@
|
|
1
|
-
|
2
|
-
- prop `mode` must be set to `range`
|
3
|
-
- prop `selectionType` must be set to `quickpick`
|
4
|
-
|
5
|
-
Use the `onClose` handler function to access the startDate and endDate values. Check the [`onClose` example](https://playbook.powerapp.cloud/kits/date_picker/react#onclose) for more information.
|
1
|
+
Use the `onChange` handler function to access the startDate and endDate values. Check the [`onChange` example](https://playbook.powerapp.cloud/kits/date_picker/react#onchange) for more information.
|
@@ -15,7 +15,6 @@ 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
|
19
18
|
- date_picker_format: Format
|
20
19
|
- date_picker_disabled: Disabled Dates
|
21
20
|
- date_picker_min_max: Min Max
|
@@ -48,7 +47,6 @@ examples:
|
|
48
47
|
- date_picker_quick_pick_custom: Custom Quick Pick Dates
|
49
48
|
- date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
|
50
49
|
- 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
|
52
50
|
- date_picker_format: Format
|
53
51
|
- date_picker_disabled: Disabled Dates
|
54
52
|
- date_picker_min_max: Min Max
|
@@ -26,4 +26,3 @@ 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,16 +238,6 @@ 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
|
-
};
|
251
241
|
// remove the active class from the button if the selected dates don't match the label
|
252
242
|
if (!isLabelMatchingSelectedDates(selectedDates)) {
|
253
243
|
pluginData.rangesButtons[activeLabel]?.classList.remove('active');
|
@@ -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 %>
|
@@ -0,0 +1,55 @@
|
|
1
|
+
<% initial_items = [
|
2
|
+
{
|
3
|
+
id: "141",
|
4
|
+
url: "https://unsplash.it/500/400/?image=633",
|
5
|
+
},
|
6
|
+
{
|
7
|
+
id: "142",
|
8
|
+
url: "https://unsplash.it/500/400/?image=634",
|
9
|
+
},
|
10
|
+
{
|
11
|
+
id: "143",
|
12
|
+
url: "https://unsplash.it/500/400/?image=637",
|
13
|
+
},
|
14
|
+
] %>
|
15
|
+
|
16
|
+
<% next_init_items = [
|
17
|
+
{
|
18
|
+
id: "151",
|
19
|
+
url: "https://unsplash.it/500/400/?image=633",
|
20
|
+
},
|
21
|
+
{
|
22
|
+
id: "152",
|
23
|
+
url: "https://unsplash.it/500/400/?image=634",
|
24
|
+
},
|
25
|
+
{
|
26
|
+
id: "153",
|
27
|
+
url: "https://unsplash.it/500/400/?image=637",
|
28
|
+
},
|
29
|
+
] %>
|
30
|
+
|
31
|
+
<%= pb_rails("draggable", props: {initial_items: initial_items, drop_zone_type: "shadow", drop_zone_color: "primary"}) do %>
|
32
|
+
<%= pb_rails("draggable/draggable_container") do %>
|
33
|
+
<%= pb_rails("flex", props: { gap: "sm" }) do %>
|
34
|
+
<% initial_items.each do |item| %>
|
35
|
+
<%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
|
36
|
+
<%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url] }) %>
|
37
|
+
<% end %>
|
38
|
+
<% end %>
|
39
|
+
<% end %>
|
40
|
+
<% end %>
|
41
|
+
<% end %>
|
42
|
+
|
43
|
+
<br/>
|
44
|
+
|
45
|
+
<%= pb_rails("draggable", props: {initial_items: next_init_items, drop_zone_type: "outline", drop_zone_color: "purple"}) do %>
|
46
|
+
<%= pb_rails("draggable/draggable_container") do %>
|
47
|
+
<%= pb_rails("flex", props: { gap: "sm" }) do %>
|
48
|
+
<% initial_items.each do |item| %>
|
49
|
+
<%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
|
50
|
+
<%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url] }) %>
|
51
|
+
<% end %>
|
52
|
+
<% end %>
|
53
|
+
<% end %>
|
54
|
+
<% end %>
|
55
|
+
<% end %>
|
@@ -0,0 +1 @@
|
|
1
|
+
The default `color` for Draggable kit drop zones is "neutral", with "primary" or "purple" as additional options.
|
@@ -17,5 +17,6 @@ examples:
|
|
17
17
|
- draggable_with_cards: Draggable with Cards
|
18
18
|
- draggable_with_table: Draggable with Table
|
19
19
|
- draggable_multiple_containers: Dragging Across Multiple Containers
|
20
|
+
- draggable_drop_zones: Draggable Drop Zones
|
21
|
+
- draggable_drop_zones_colors: Draggable Drop Zones Colors
|
20
22
|
- draggable_event_listeners: Draggable Event Listeners
|
21
|
-
|
@@ -5,9 +5,17 @@ module Playbook
|
|
5
5
|
class Draggable < ::Playbook::KitBase
|
6
6
|
prop :initial_items, type: Playbook::Props::Array,
|
7
7
|
default: []
|
8
|
+
prop :drop_zone_type, type: Playbook::Props::Enum,
|
9
|
+
values: %w[ghost shadow outline line],
|
10
|
+
default: "ghost"
|
11
|
+
prop :drop_zone_color, type: Playbook::Props::Enum,
|
12
|
+
values: %w[neutral primary purple],
|
13
|
+
default: "neutral"
|
8
14
|
|
9
15
|
def data
|
10
|
-
Hash(prop(:data)).merge(pb_draggable: true
|
16
|
+
Hash(prop(:data)).merge(pb_draggable: true,
|
17
|
+
drop_zone_type: drop_zone_type,
|
18
|
+
drop_zone_color: drop_zone_color)
|
11
19
|
end
|
12
20
|
|
13
21
|
def classname
|