playbook_ui_docs 15.5.0.pre.alpha.draggablefix12577 → 15.5.0.pre.alpha.typeaheadfix12605
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/docs/_advanced_table_table_props.html.erb +1 -163
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +0 -190
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb +31 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_dropzone.jsx +1 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_dropzone.md +3 -1
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 1bec13ccbabaf58119f5debd509cdb34ce179d3e54486eadafaf1c3089748c4e
|
|
4
|
+
data.tar.gz: cec4da25a4b4391cd40f76116c481283398b40de26ebb72126ff348da47c3177
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 218454ec88593328445ec69ae2ed20eae9b0fa3ff8fbd9e3a0161868a8f0fc055c18e41bc2765caad296f67696f242a2b6975b1322b8f59439bcc7ebd3b1ca4c
|
|
7
|
+
data.tar.gz: e1adf27bc836bebd4696fab554be89e820f4ace94795b8a711e900a15b431db94045b20d3640b5a1ae83741423c258a8d71f5cf8a3f5aed6aa62f98e94b19056
|
|
@@ -29,167 +29,5 @@
|
|
|
29
29
|
label: "Graduated Students",
|
|
30
30
|
}
|
|
31
31
|
] %>
|
|
32
|
-
<%= pb_rails("caption", props: { text: "Advanced Table Vertical Border Table Props" }) %>
|
|
33
|
-
<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, margin_bottom: "md", column_definitions: column_definitions, table_props: { vertical_border: true, container: false }}) %>
|
|
34
32
|
|
|
35
|
-
|
|
36
|
-
{
|
|
37
|
-
accessor: "year",
|
|
38
|
-
label: "Year",
|
|
39
|
-
cellAccessors: ["quarter", "month", "day"],
|
|
40
|
-
},
|
|
41
|
-
{
|
|
42
|
-
label: "Enrollment Data",
|
|
43
|
-
columns: [
|
|
44
|
-
{
|
|
45
|
-
accessor: "newEnrollments",
|
|
46
|
-
label: "New Enrollments",
|
|
47
|
-
},
|
|
48
|
-
{
|
|
49
|
-
accessor: "scheduledMeetings",
|
|
50
|
-
label: "Scheduled Meetings",
|
|
51
|
-
},
|
|
52
|
-
],
|
|
53
|
-
},
|
|
54
|
-
{
|
|
55
|
-
label: "Performance Data",
|
|
56
|
-
columns: [
|
|
57
|
-
{
|
|
58
|
-
accessor: "attendanceRate",
|
|
59
|
-
label: "Attendance Rate",
|
|
60
|
-
},
|
|
61
|
-
{
|
|
62
|
-
accessor: "completedClasses",
|
|
63
|
-
label: "Completed Classes",
|
|
64
|
-
},
|
|
65
|
-
{
|
|
66
|
-
accessor: "classCompletionRate",
|
|
67
|
-
label: "Class Completion Rate",
|
|
68
|
-
},
|
|
69
|
-
{
|
|
70
|
-
accessor: "graduatedStudents",
|
|
71
|
-
label: "Graduated Students",
|
|
72
|
-
},
|
|
73
|
-
],
|
|
74
|
-
},
|
|
75
|
-
] %>
|
|
76
|
-
<%= pb_rails("caption", props: { text: "Advanced Table Vertical Border Multi Header" }) %>
|
|
77
|
-
<%= pb_rails("advanced_table", props: { id: "table_multi_headers_vertical_borders", margin_bottom: "md", table_data: @table_data, column_definitions: column_definitions_two, table_props: { vertical_border: true } }) %>
|
|
78
|
-
|
|
79
|
-
<% column_definitions_three = [
|
|
80
|
-
{
|
|
81
|
-
accessor: "year",
|
|
82
|
-
label: "Year",
|
|
83
|
-
cellAccessors: ["quarter", "month", "day"],
|
|
84
|
-
},
|
|
85
|
-
{
|
|
86
|
-
label: "Enrollment Data",
|
|
87
|
-
columns: [
|
|
88
|
-
{
|
|
89
|
-
label: "Enrollment Stats",
|
|
90
|
-
columns: [
|
|
91
|
-
{
|
|
92
|
-
accessor: "newEnrollments",
|
|
93
|
-
label: "New Enrollments",
|
|
94
|
-
},
|
|
95
|
-
{
|
|
96
|
-
accessor: "scheduledMeetings",
|
|
97
|
-
label: "Scheduled Meetings",
|
|
98
|
-
},
|
|
99
|
-
],
|
|
100
|
-
},
|
|
101
|
-
],
|
|
102
|
-
},
|
|
103
|
-
{
|
|
104
|
-
label: "Performance Data",
|
|
105
|
-
columns: [
|
|
106
|
-
{
|
|
107
|
-
label: "Completion Metrics",
|
|
108
|
-
columns: [
|
|
109
|
-
{
|
|
110
|
-
accessor: "completedClasses",
|
|
111
|
-
label: "Completed Classes",
|
|
112
|
-
},
|
|
113
|
-
{
|
|
114
|
-
accessor: "classCompletionRate",
|
|
115
|
-
label: "Class Completion Rate",
|
|
116
|
-
},
|
|
117
|
-
],
|
|
118
|
-
},
|
|
119
|
-
{
|
|
120
|
-
label: "Attendance",
|
|
121
|
-
columns: [
|
|
122
|
-
{
|
|
123
|
-
accessor: "attendanceRate",
|
|
124
|
-
label: "Attendance Rate",
|
|
125
|
-
},
|
|
126
|
-
{
|
|
127
|
-
accessor: "scheduledMeetings",
|
|
128
|
-
label: "Scheduled Meetings",
|
|
129
|
-
},
|
|
130
|
-
],
|
|
131
|
-
},
|
|
132
|
-
],
|
|
133
|
-
},
|
|
134
|
-
] %>
|
|
135
|
-
<%= pb_rails("caption", props: { text: "Advanced Table Vertical Border Multi Header with Column Group Border Color" }) %>
|
|
136
|
-
<%= pb_rails("advanced_table", props: { id: "beta_table_with_color_headers", margin_bottom: "md", table_data: @table_data, column_definitions: column_definitions_three, column_group_border_color: "text_lt_default", table_props: { vertical_border: true } }) %>
|
|
137
|
-
|
|
138
|
-
<% column_definitions_four = [
|
|
139
|
-
{
|
|
140
|
-
accessor: "year",
|
|
141
|
-
label: "Year",
|
|
142
|
-
cellAccessors: ["quarter", "month", "day"],
|
|
143
|
-
},
|
|
144
|
-
{
|
|
145
|
-
label: "Enrollment Data",
|
|
146
|
-
columns: [
|
|
147
|
-
{
|
|
148
|
-
label: "Enrollment Stats",
|
|
149
|
-
columns: [
|
|
150
|
-
{
|
|
151
|
-
accessor: "newEnrollments",
|
|
152
|
-
label: "New Enrollments",
|
|
153
|
-
},
|
|
154
|
-
{
|
|
155
|
-
accessor: "scheduledMeetings",
|
|
156
|
-
label: "Scheduled Meetings",
|
|
157
|
-
},
|
|
158
|
-
],
|
|
159
|
-
},
|
|
160
|
-
],
|
|
161
|
-
},
|
|
162
|
-
{
|
|
163
|
-
label: "Performance Data",
|
|
164
|
-
columns: [
|
|
165
|
-
{
|
|
166
|
-
label: "Completion Metrics",
|
|
167
|
-
columns: [
|
|
168
|
-
{
|
|
169
|
-
accessor: "completedClasses",
|
|
170
|
-
label: "Completed Classes",
|
|
171
|
-
},
|
|
172
|
-
{
|
|
173
|
-
accessor: "classCompletionRate",
|
|
174
|
-
label: "Class Completion Rate",
|
|
175
|
-
},
|
|
176
|
-
],
|
|
177
|
-
},
|
|
178
|
-
{
|
|
179
|
-
label: "Attendance",
|
|
180
|
-
columns: [
|
|
181
|
-
{
|
|
182
|
-
accessor: "attendanceRate",
|
|
183
|
-
label: "Attendance Rate",
|
|
184
|
-
},
|
|
185
|
-
{
|
|
186
|
-
accessor: "scheduledMeetings",
|
|
187
|
-
label: "Scheduled Meetings",
|
|
188
|
-
},
|
|
189
|
-
],
|
|
190
|
-
},
|
|
191
|
-
],
|
|
192
|
-
},
|
|
193
|
-
] %>
|
|
194
|
-
<%= pb_rails("caption", props: { text: "Advanced Table Vertical Border Multi Header No Vertical Border" }) %>
|
|
195
|
-
<%= pb_rails("advanced_table", props: {id: "beta_table_with_muilti_headers", table_data: @table_data, column_definitions: column_definitions_four }) %>
|
|
33
|
+
<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, table_props: { vertical_border: true, container: false }}) %>
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React from "react"
|
|
2
2
|
import AdvancedTable from '../../pb_advanced_table/_advanced_table'
|
|
3
3
|
import MOCK_DATA from "./advanced_table_mock_data.json"
|
|
4
|
-
import Caption from "../../pb_caption/_caption"
|
|
5
4
|
|
|
6
5
|
const AdvancedTableTableProps = (props) => {
|
|
7
6
|
const columnDefinitions = [
|
|
@@ -41,203 +40,14 @@ const AdvancedTableTableProps = (props) => {
|
|
|
41
40
|
verticalBorder: true
|
|
42
41
|
}
|
|
43
42
|
|
|
44
|
-
const columnDefinitionsTwo = [
|
|
45
|
-
{
|
|
46
|
-
accessor: "year",
|
|
47
|
-
label: "Year",
|
|
48
|
-
cellAccessors: ["quarter", "month", "day"],
|
|
49
|
-
},
|
|
50
|
-
{
|
|
51
|
-
label: "Enrollment Data",
|
|
52
|
-
columns: [
|
|
53
|
-
{
|
|
54
|
-
accessor: "newEnrollments",
|
|
55
|
-
label: "New Enrollments",
|
|
56
|
-
},
|
|
57
|
-
{
|
|
58
|
-
accessor: "scheduledMeetings",
|
|
59
|
-
label: "Scheduled Meetings",
|
|
60
|
-
},
|
|
61
|
-
],
|
|
62
|
-
},
|
|
63
|
-
{
|
|
64
|
-
label: "Performance Data",
|
|
65
|
-
columns: [
|
|
66
|
-
{
|
|
67
|
-
accessor: "attendanceRate",
|
|
68
|
-
label: "Attendance Rate",
|
|
69
|
-
},
|
|
70
|
-
{
|
|
71
|
-
accessor: "completedClasses",
|
|
72
|
-
label: "Completed Classes",
|
|
73
|
-
},
|
|
74
|
-
{
|
|
75
|
-
accessor: "classCompletionRate",
|
|
76
|
-
label: "Class Completion Rate",
|
|
77
|
-
},
|
|
78
|
-
{
|
|
79
|
-
accessor: "graduatedStudents",
|
|
80
|
-
label: "Graduated Students",
|
|
81
|
-
},
|
|
82
|
-
],
|
|
83
|
-
},
|
|
84
|
-
];
|
|
85
|
-
|
|
86
|
-
const tablePropsTwo = {
|
|
87
|
-
verticalBorder: true,
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
const columnDefinitionsThree = [
|
|
91
|
-
{
|
|
92
|
-
accessor: "year",
|
|
93
|
-
label: "Year",
|
|
94
|
-
cellAccessors: ["quarter", "month", "day"],
|
|
95
|
-
},
|
|
96
|
-
{
|
|
97
|
-
label: "Enrollment Data",
|
|
98
|
-
columns: [
|
|
99
|
-
{
|
|
100
|
-
label: "Enrollment Stats",
|
|
101
|
-
columns: [
|
|
102
|
-
{
|
|
103
|
-
accessor: "newEnrollments",
|
|
104
|
-
label: "New Enrollments",
|
|
105
|
-
},
|
|
106
|
-
{
|
|
107
|
-
accessor: "scheduledMeetings",
|
|
108
|
-
label: "Scheduled Meetings",
|
|
109
|
-
},
|
|
110
|
-
],
|
|
111
|
-
},
|
|
112
|
-
],
|
|
113
|
-
},
|
|
114
|
-
{
|
|
115
|
-
label: "Performance Data",
|
|
116
|
-
columns: [
|
|
117
|
-
{
|
|
118
|
-
label: "Completion Metrics",
|
|
119
|
-
columns: [
|
|
120
|
-
{
|
|
121
|
-
accessor: "completedClasses",
|
|
122
|
-
label: "Completed Classes",
|
|
123
|
-
},
|
|
124
|
-
{
|
|
125
|
-
accessor: "classCompletionRate",
|
|
126
|
-
label: "Class Completion Rate",
|
|
127
|
-
},
|
|
128
|
-
],
|
|
129
|
-
},
|
|
130
|
-
{
|
|
131
|
-
label: "Attendance",
|
|
132
|
-
columns: [
|
|
133
|
-
{
|
|
134
|
-
accessor: "attendanceRate",
|
|
135
|
-
label: "Attendance Rate",
|
|
136
|
-
},
|
|
137
|
-
{
|
|
138
|
-
accessor: "scheduledMeetings",
|
|
139
|
-
label: "Scheduled Meetings",
|
|
140
|
-
},
|
|
141
|
-
],
|
|
142
|
-
},
|
|
143
|
-
],
|
|
144
|
-
},
|
|
145
|
-
];
|
|
146
|
-
|
|
147
|
-
const tablePropsThree = {
|
|
148
|
-
verticalBorder: true
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
const columnDefinitionsFour = [
|
|
152
|
-
{
|
|
153
|
-
accessor: "year",
|
|
154
|
-
label: "Year",
|
|
155
|
-
cellAccessors: ["quarter", "month", "day"],
|
|
156
|
-
},
|
|
157
|
-
{
|
|
158
|
-
label: "Enrollment Data",
|
|
159
|
-
columns: [
|
|
160
|
-
{
|
|
161
|
-
label: "Enrollment Stats",
|
|
162
|
-
columns: [
|
|
163
|
-
{
|
|
164
|
-
accessor: "newEnrollments",
|
|
165
|
-
label: "New Enrollments",
|
|
166
|
-
},
|
|
167
|
-
{
|
|
168
|
-
accessor: "scheduledMeetings",
|
|
169
|
-
label: "Scheduled Meetings",
|
|
170
|
-
},
|
|
171
|
-
],
|
|
172
|
-
},
|
|
173
|
-
],
|
|
174
|
-
},
|
|
175
|
-
{
|
|
176
|
-
label: "Performance Data",
|
|
177
|
-
columns: [
|
|
178
|
-
{
|
|
179
|
-
label: "Completion Metrics",
|
|
180
|
-
columns: [
|
|
181
|
-
{
|
|
182
|
-
accessor: "completedClasses",
|
|
183
|
-
label: "Completed Classes",
|
|
184
|
-
},
|
|
185
|
-
{
|
|
186
|
-
accessor: "classCompletionRate",
|
|
187
|
-
label: "Class Completion Rate",
|
|
188
|
-
},
|
|
189
|
-
],
|
|
190
|
-
},
|
|
191
|
-
{
|
|
192
|
-
label: "Attendance",
|
|
193
|
-
columns: [
|
|
194
|
-
{
|
|
195
|
-
accessor: "attendanceRate",
|
|
196
|
-
label: "Attendance Rate",
|
|
197
|
-
},
|
|
198
|
-
{
|
|
199
|
-
accessor: "scheduledMeetings",
|
|
200
|
-
label: "Scheduled Meetings",
|
|
201
|
-
},
|
|
202
|
-
],
|
|
203
|
-
},
|
|
204
|
-
],
|
|
205
|
-
},
|
|
206
|
-
];
|
|
207
|
-
|
|
208
43
|
return (
|
|
209
44
|
<div>
|
|
210
|
-
<Caption text="Advanced Table Vertical Border Table Props" />
|
|
211
45
|
<AdvancedTable
|
|
212
46
|
columnDefinitions={columnDefinitions}
|
|
213
|
-
marginBottom="md"
|
|
214
47
|
tableData={MOCK_DATA}
|
|
215
48
|
tableProps={tableProps}
|
|
216
49
|
{...props}
|
|
217
50
|
/>
|
|
218
|
-
<Caption text="Advanced Table Vertical Border Multi Header" />
|
|
219
|
-
<AdvancedTable
|
|
220
|
-
columnDefinitions={columnDefinitionsTwo}
|
|
221
|
-
marginBottom="md"
|
|
222
|
-
tableData={MOCK_DATA}
|
|
223
|
-
tableProps={tablePropsTwo}
|
|
224
|
-
{...props}
|
|
225
|
-
/>
|
|
226
|
-
<Caption text="Advanced Table Vertical Border Multi Header with Column Group Border Color" />
|
|
227
|
-
<AdvancedTable
|
|
228
|
-
columnDefinitions={columnDefinitionsThree}
|
|
229
|
-
columnGroupBorderColor="text_lt_default"
|
|
230
|
-
marginBottom="md"
|
|
231
|
-
tableData={MOCK_DATA}
|
|
232
|
-
tableProps={tablePropsThree}
|
|
233
|
-
{...props}
|
|
234
|
-
/>
|
|
235
|
-
<Caption text="Advanced Table Vertical Border Multi Header No Vertical Border" />
|
|
236
|
-
<AdvancedTable
|
|
237
|
-
columnDefinitions={columnDefinitionsFour}
|
|
238
|
-
tableData={MOCK_DATA}
|
|
239
|
-
{...props}
|
|
240
|
-
/>
|
|
241
51
|
</div>
|
|
242
52
|
)
|
|
243
53
|
}
|
|
@@ -1,3 +1,24 @@
|
|
|
1
|
+
<%
|
|
2
|
+
options = [
|
|
3
|
+
{
|
|
4
|
+
label: "United States",
|
|
5
|
+
value: "unitedStates",
|
|
6
|
+
id: "us"
|
|
7
|
+
},
|
|
8
|
+
{
|
|
9
|
+
label: "United Kingdom",
|
|
10
|
+
value: "unitedKingdom",
|
|
11
|
+
id: "gb"
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
label: "Pakistan",
|
|
15
|
+
value: "pakistan",
|
|
16
|
+
id: "pk"
|
|
17
|
+
}
|
|
18
|
+
]
|
|
19
|
+
%>
|
|
20
|
+
|
|
21
|
+
|
|
1
22
|
<%= pb_rails("button", props: { text: "Open Complex Dialog", data:{"open-dialog": "dialog-complex"} }) %>
|
|
2
23
|
|
|
3
24
|
<%= pb_rails("dialog", props: { id:"dialog-complex", size: "lg", full_height: true }) do %>
|
|
@@ -10,6 +31,16 @@
|
|
|
10
31
|
<%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
|
|
11
32
|
<%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
|
|
12
33
|
<%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
|
|
34
|
+
<%= pb_rails("dropdown", props: {options: options, autocomplete: true}) %>
|
|
35
|
+
<%= pb_rails("typeahead", props: {
|
|
36
|
+
id: "typeahead-default",
|
|
37
|
+
placeholder: "Select one...",
|
|
38
|
+
options: options,
|
|
39
|
+
name: :foo,
|
|
40
|
+
margin_top: "sm",
|
|
41
|
+
is_multi: false
|
|
42
|
+
})
|
|
43
|
+
%>
|
|
13
44
|
|
|
14
45
|
<% end %>
|
|
15
46
|
<%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-complex"}) %>
|
|
@@ -83,6 +83,7 @@ const DraggableMultipleContainersDropzone = (props) => {
|
|
|
83
83
|
return (
|
|
84
84
|
<DraggableProvider
|
|
85
85
|
dropZone={{type: "outline"}}
|
|
86
|
+
enableCrossContainerPreview
|
|
86
87
|
initialItems={data}
|
|
87
88
|
onDragEnd={(draggedItemId, finalContainer, originalContainer, itemAbove, itemBelow) => {
|
|
88
89
|
console.log(`Dragged Item ID: ${draggedItemId}`);
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
The multiple container functionality also supports customized dropzone styling as shown here.
|
|
2
2
|
|
|
3
|
-
In addition to this, the `
|
|
3
|
+
In addition to this, the `enableCrossContainerPreview` prop can be used on the `DraggableProvider` as shown here to enable dropzone preview for cross-container dragging.
|
|
4
|
+
|
|
5
|
+
With `enableCrossContainerPreview`, the `onDrop` and `onDragEnd` event listeners will also provide several arguments to allow developers more context from the drag event.
|
|
4
6
|
|
|
5
7
|
The `onDrop` callback is triggered when an item is successfully dropped into a container. It provides the following arguments:
|
|
6
8
|
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: playbook_ui_docs
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 15.5.0.pre.alpha.
|
|
4
|
+
version: 15.5.0.pre.alpha.typeaheadfix12605
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Power UX
|
|
@@ -9,7 +9,7 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2025-11-
|
|
12
|
+
date: 2025-11-26 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: playbook_ui
|