playbook_ui_docs 13.9.0.pre.alpha.verdaccioregistry1277 → 13.10.0.pre.alpha.PLAY1046multilevelsingleselectphase21328
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_avatar/docs/_avatar_default_swift.md +12 -0
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_monogram_swift.md +12 -0
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_props_swift.md +8 -0
- data/app/pb_kits/playbook/pb_avatar/docs/example.yml +3 -1
- data/app/pb_kits/playbook/pb_badge/docs/_badge_colors_swift.md +1 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb +6 -7
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.jsx +1 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.html.erb +73 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.jsx +87 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.html.erb +74 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.jsx +88 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +5 -2
- data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +3 -1
- data/dist/playbook-doc.js +8 -8
- metadata +9 -3
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_swift.md +0 -82
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: c253a572c95bf8dfeb4c9f06ae4b71c01e4b810142c52cbe704214347c239eda
|
|
4
|
+
data.tar.gz: ca922e05a6b85be7100384bb7484854dcaec1554a55f4d547b7d777dbf59b8e5
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: '08d2b3627c4145886bafff52c4710172c9e9768625d994454131bcf89ec7cdb0fce27d91afef02c64cec2c04bf205db80e5a120f1819c666bab00a3f0050627e'
|
|
7
|
+
data.tar.gz: 9204b9df7a613f1d11baec37c50ba1648fa97ea57c3aaba78106eb86fef84ef3b324bb04d1842d6f8b3cb1d689f004bc3902e582a65a8f98f8a11b2b34ea529d
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
```swift
|
|
4
|
+
VStack(alignment: .leading, spacing: Spacing.small) {
|
|
5
|
+
PBAvatar(image: Image("andrew", bundle: .module), size: .xxSmall, status: .online)
|
|
6
|
+
PBAvatar(image: Image("andrew", bundle: .module), size: .xSmall, status: .away)
|
|
7
|
+
PBAvatar(image: Image("andrew", bundle: .module), size: .small, status: .online)
|
|
8
|
+
PBAvatar(image: Image("andrew", bundle: .module), size: .medium, status: .away)
|
|
9
|
+
PBAvatar(image: Image("andrew", bundle: .module), size: .large, status: .online)
|
|
10
|
+
PBAvatar(image: Image("andrew", bundle: .module), size: .xLarge, status: .offline)
|
|
11
|
+
}
|
|
12
|
+
```
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
```swift
|
|
4
|
+
VStack(alignment: .leading, spacing: Spacing.small) {
|
|
5
|
+
PBAvatar(name: "Tim Wenhold", size: .xxSmall, status: .online)
|
|
6
|
+
PBAvatar(name: "Tim Wenhold", size: .xSmall, status: .away)
|
|
7
|
+
PBAvatar(name: "Tim Wenhold", size: .small, status: .online)
|
|
8
|
+
PBAvatar(name: "Tim Wenhold", size: .medium, status: .away)
|
|
9
|
+
PBAvatar(name: "Tim Wenhold", size: .large, status: .online)
|
|
10
|
+
PBAvatar(name: "Tim", size: .xLarge, status: .offline)
|
|
11
|
+
}
|
|
12
|
+
```
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
### Props
|
|
2
|
+
| Name | Type | Description | Default | Values |
|
|
3
|
+
| --- | ----------- | --------- | --------- | --------- |
|
|
4
|
+
| **Image** | `Image` | Sets the Avatar image | | |
|
|
5
|
+
| **Name** | `String` | Used to display user's initails when image is blank | | |
|
|
6
|
+
| **Size** | `Size` | Adjusts the Avatar image size | `.medium` | `.xxSmall` `.xSmall` `.small` `.medium` `.large` `.xLarge` |
|
|
7
|
+
| **Status** | `PresenceStatus` | Sets user's activity status | | `away` `offline` `online` |
|
|
8
|
+
| **Wrapped** | `Bool` | Displays the wrapped variant | `false` | `true` `false` |
|
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
label: "People",
|
|
9
9
|
value: "People",
|
|
10
10
|
id: "101",
|
|
11
|
+
expanded: true,
|
|
11
12
|
children: [
|
|
12
13
|
{
|
|
13
14
|
label: "Talent Acquisition",
|
|
@@ -63,10 +64,8 @@
|
|
|
63
64
|
],
|
|
64
65
|
}] %>
|
|
65
66
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
tree_data: treeData
|
|
72
|
-
}) %>
|
|
67
|
+
<%= pb_rails("multi_level_select", props: {
|
|
68
|
+
id: "multi-level-select-default-rails",
|
|
69
|
+
name: "my_array",
|
|
70
|
+
tree_data: treeData
|
|
71
|
+
}) %>
|
|
@@ -77,7 +77,7 @@ const MultiLevelSelectSelectedIds = (props) => {
|
|
|
77
77
|
console.log("Selected Items with Return All Selected Data", selectedNodes)
|
|
78
78
|
}
|
|
79
79
|
returnAllSelected
|
|
80
|
-
selectedIds={["energy1","talent1"]}
|
|
80
|
+
selectedIds={["energy1", "talent1"]}
|
|
81
81
|
treeData={treeData}
|
|
82
82
|
{...props}
|
|
83
83
|
/>
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
<% treeData = [{
|
|
2
|
+
label: "Power Home Remodeling",
|
|
3
|
+
value: "Power Home Remodeling",
|
|
4
|
+
id: "200",
|
|
5
|
+
expanded: true,
|
|
6
|
+
children: [
|
|
7
|
+
{
|
|
8
|
+
label: "People",
|
|
9
|
+
value: "People",
|
|
10
|
+
id: "201",
|
|
11
|
+
expanded: true,
|
|
12
|
+
children: [
|
|
13
|
+
{
|
|
14
|
+
label: "Talent Acquisition",
|
|
15
|
+
value: "Talent Acquisition",
|
|
16
|
+
id: "202",
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
label: "Business Affairs",
|
|
20
|
+
value: "Business Affairs",
|
|
21
|
+
id: "203",
|
|
22
|
+
children: [
|
|
23
|
+
{
|
|
24
|
+
label: "Initiatives",
|
|
25
|
+
value: "Initiatives",
|
|
26
|
+
id: "204",
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
label: "Learning & Development",
|
|
30
|
+
value: "Learning & Development",
|
|
31
|
+
id: "205",
|
|
32
|
+
},
|
|
33
|
+
],
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
label: "People Experience",
|
|
37
|
+
value: "People Experience",
|
|
38
|
+
id: "206",
|
|
39
|
+
},
|
|
40
|
+
],
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
label: "Contact Center",
|
|
44
|
+
value: "Contact Center",
|
|
45
|
+
id: "207",
|
|
46
|
+
children: [
|
|
47
|
+
{
|
|
48
|
+
label: "Appointment Management",
|
|
49
|
+
value: "Appointment Management",
|
|
50
|
+
id: "208",
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
label: "Customer Service",
|
|
54
|
+
value: "Customer Service",
|
|
55
|
+
id: "209",
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
label: "Energy",
|
|
59
|
+
value: "Energy",
|
|
60
|
+
id: "210",
|
|
61
|
+
},
|
|
62
|
+
],
|
|
63
|
+
},
|
|
64
|
+
],
|
|
65
|
+
}] %>
|
|
66
|
+
|
|
67
|
+
<%= pb_rails("multi_level_select", props: {
|
|
68
|
+
id: "multi-level-select-single-rails",
|
|
69
|
+
name: "my_single_select_array",
|
|
70
|
+
tree_data: treeData,
|
|
71
|
+
input_name: "Power",
|
|
72
|
+
variant: "single"
|
|
73
|
+
}) %>
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import MultiLevelSelect from "../_multi_level_select";
|
|
3
|
+
|
|
4
|
+
const treeData = [
|
|
5
|
+
{
|
|
6
|
+
label: "Power Home Remodeling",
|
|
7
|
+
value: "Power Home Remodeling",
|
|
8
|
+
id: "powerhome2",
|
|
9
|
+
expanded: true,
|
|
10
|
+
children: [
|
|
11
|
+
{
|
|
12
|
+
label: "People",
|
|
13
|
+
value: "People",
|
|
14
|
+
id: "people2",
|
|
15
|
+
expanded: true,
|
|
16
|
+
children: [
|
|
17
|
+
{
|
|
18
|
+
label: "Talent Acquisition",
|
|
19
|
+
value: "Talent Acquisition",
|
|
20
|
+
id: "talent2",
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
label: "Business Affairs",
|
|
24
|
+
value: "Business Affairs",
|
|
25
|
+
id: "business2",
|
|
26
|
+
children: [
|
|
27
|
+
{
|
|
28
|
+
label: "Initiatives",
|
|
29
|
+
value: "Initiatives",
|
|
30
|
+
id: "initiative2",
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
label: "Learning & Development",
|
|
34
|
+
value: "Learning & Development",
|
|
35
|
+
id: "development2",
|
|
36
|
+
},
|
|
37
|
+
],
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
label: "People Experience",
|
|
41
|
+
value: "People Experience",
|
|
42
|
+
id: "experience2",
|
|
43
|
+
},
|
|
44
|
+
],
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
label: "Contact Center",
|
|
48
|
+
value: "Contact Center",
|
|
49
|
+
id: "contact2",
|
|
50
|
+
children: [
|
|
51
|
+
{
|
|
52
|
+
label: "Appointment Management",
|
|
53
|
+
value: "Appointment Management",
|
|
54
|
+
id: "appointment2",
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
label: "Customer Service",
|
|
58
|
+
value: "Customer Service",
|
|
59
|
+
id: "customer2",
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
label: "Energy",
|
|
63
|
+
value: "Energy",
|
|
64
|
+
id: "energy2",
|
|
65
|
+
},
|
|
66
|
+
],
|
|
67
|
+
},
|
|
68
|
+
],
|
|
69
|
+
},
|
|
70
|
+
];
|
|
71
|
+
|
|
72
|
+
const MultiLevelSelectSingle = (props) => {
|
|
73
|
+
return (
|
|
74
|
+
<div>
|
|
75
|
+
<MultiLevelSelect
|
|
76
|
+
id="multiselect-single"
|
|
77
|
+
inputName="Power"
|
|
78
|
+
onSelect={(selectedNode) => console.log("Selected Node", selectedNode)}
|
|
79
|
+
treeData={treeData}
|
|
80
|
+
variant="single"
|
|
81
|
+
{...props}
|
|
82
|
+
/>
|
|
83
|
+
</div>
|
|
84
|
+
)
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
export default MultiLevelSelectSingle;
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
<% treeData = [{
|
|
2
|
+
label: "Power Home Remodeling",
|
|
3
|
+
value: "Power Home Remodeling",
|
|
4
|
+
id: "300",
|
|
5
|
+
expanded: true,
|
|
6
|
+
children: [
|
|
7
|
+
{
|
|
8
|
+
label: "People",
|
|
9
|
+
value: "People",
|
|
10
|
+
id: "301",
|
|
11
|
+
expanded: true,
|
|
12
|
+
children: [
|
|
13
|
+
{
|
|
14
|
+
label: "Talent Acquisition",
|
|
15
|
+
value: "Talent Acquisition",
|
|
16
|
+
id: "302",
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
label: "Business Affairs",
|
|
20
|
+
value: "Business Affairs",
|
|
21
|
+
id: "303",
|
|
22
|
+
children: [
|
|
23
|
+
{
|
|
24
|
+
label: "Initiatives",
|
|
25
|
+
value: "Initiatives",
|
|
26
|
+
id: "304",
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
label: "Learning & Development",
|
|
30
|
+
value: "Learning & Development",
|
|
31
|
+
id: "305",
|
|
32
|
+
},
|
|
33
|
+
],
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
label: "People Experience",
|
|
37
|
+
value: "People Experience",
|
|
38
|
+
id: "306",
|
|
39
|
+
},
|
|
40
|
+
],
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
label: "Contact Center",
|
|
44
|
+
value: "Contact Center",
|
|
45
|
+
id: "307",
|
|
46
|
+
children: [
|
|
47
|
+
{
|
|
48
|
+
label: "Appointment Management",
|
|
49
|
+
value: "Appointment Management",
|
|
50
|
+
id: "308",
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
label: "Customer Service",
|
|
54
|
+
value: "Customer Service",
|
|
55
|
+
id: "309",
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
label: "Energy",
|
|
59
|
+
value: "Energy",
|
|
60
|
+
id: "310",
|
|
61
|
+
},
|
|
62
|
+
],
|
|
63
|
+
},
|
|
64
|
+
],
|
|
65
|
+
}] %>
|
|
66
|
+
|
|
67
|
+
<%= pb_rails("multi_level_select", props: {
|
|
68
|
+
id: "multi-level-select-single-children-only-rails",
|
|
69
|
+
name: "my_single_children_only_select_array",
|
|
70
|
+
tree_data: treeData,
|
|
71
|
+
input_name: "PowerChildren",
|
|
72
|
+
ultimate_children_only: true,
|
|
73
|
+
variant: "single"
|
|
74
|
+
}) %>
|
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.jsx
ADDED
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import MultiLevelSelect from "../_multi_level_select";
|
|
3
|
+
|
|
4
|
+
const treeData = [
|
|
5
|
+
{
|
|
6
|
+
label: "Power Home Remodeling",
|
|
7
|
+
value: "Power Home Remodeling",
|
|
8
|
+
id: "powerhome3",
|
|
9
|
+
expanded: true,
|
|
10
|
+
children: [
|
|
11
|
+
{
|
|
12
|
+
label: "People",
|
|
13
|
+
value: "People",
|
|
14
|
+
id: "people3",
|
|
15
|
+
expanded: true,
|
|
16
|
+
children: [
|
|
17
|
+
{
|
|
18
|
+
label: "Talent Acquisition",
|
|
19
|
+
value: "Talent Acquisition",
|
|
20
|
+
id: "talent3",
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
label: "Business Affairs",
|
|
24
|
+
value: "Business Affairs",
|
|
25
|
+
id: "business3",
|
|
26
|
+
children: [
|
|
27
|
+
{
|
|
28
|
+
label: "Initiatives",
|
|
29
|
+
value: "Initiatives",
|
|
30
|
+
id: "initiative3",
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
label: "Learning & Development",
|
|
34
|
+
value: "Learning & Development",
|
|
35
|
+
id: "development3",
|
|
36
|
+
},
|
|
37
|
+
],
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
label: "People Experience",
|
|
41
|
+
value: "People Experience",
|
|
42
|
+
id: "experience3",
|
|
43
|
+
},
|
|
44
|
+
],
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
label: "Contact Center",
|
|
48
|
+
value: "Contact Center",
|
|
49
|
+
id: "contact3",
|
|
50
|
+
children: [
|
|
51
|
+
{
|
|
52
|
+
label: "Appointment Management",
|
|
53
|
+
value: "Appointment Management",
|
|
54
|
+
id: "appointment3",
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
label: "Customer Service",
|
|
58
|
+
value: "Customer Service",
|
|
59
|
+
id: "customer3",
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
label: "Energy",
|
|
63
|
+
value: "Energy",
|
|
64
|
+
id: "energy3",
|
|
65
|
+
},
|
|
66
|
+
],
|
|
67
|
+
},
|
|
68
|
+
],
|
|
69
|
+
},
|
|
70
|
+
];
|
|
71
|
+
|
|
72
|
+
const MultiLevelSelectSingleChildrenOnly = (props) => {
|
|
73
|
+
return (
|
|
74
|
+
<div>
|
|
75
|
+
<MultiLevelSelect
|
|
76
|
+
id="multiselect-single-children-only"
|
|
77
|
+
inputName="PowerChildren"
|
|
78
|
+
onSelect={(selectedNode) => console.log("Selected Node", selectedNode)}
|
|
79
|
+
treeData={treeData}
|
|
80
|
+
ultimateChildrenOnly
|
|
81
|
+
variant="single"
|
|
82
|
+
{...props}
|
|
83
|
+
/>
|
|
84
|
+
</div>
|
|
85
|
+
)
|
|
86
|
+
};
|
|
87
|
+
|
|
88
|
+
export default MultiLevelSelectSingleChildrenOnly;
|
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
examples:
|
|
2
2
|
rails:
|
|
3
3
|
- multi_level_select_default: Default
|
|
4
|
+
- multi_level_select_single: Single Select
|
|
5
|
+
- multi_level_select_single_children_only: Single Select Ultimate Children Only
|
|
4
6
|
- multi_level_select_return_all_selected: Return All Selected
|
|
5
7
|
- multi_level_select_selected_ids: Selected Ids
|
|
6
8
|
- multi_level_select_with_form: With Form
|
|
7
|
-
|
|
9
|
+
|
|
8
10
|
react:
|
|
9
11
|
- multi_level_select_default: Default
|
|
12
|
+
- multi_level_select_single: Single Select
|
|
13
|
+
- multi_level_select_single_children_only: Single Select Ultimate Children Only
|
|
10
14
|
- multi_level_select_return_all_selected: Return All Selected
|
|
11
15
|
- multi_level_select_selected_ids: Selected Ids
|
|
12
|
-
|
|
@@ -1,3 +1,5 @@
|
|
|
1
1
|
export { default as MultiLevelSelectDefault } from './_multi_level_select_default.jsx'
|
|
2
|
+
export { default as MultiLevelSelectSingle } from './_multi_level_select_single.jsx'
|
|
3
|
+
export { default as MultiLevelSelectSingleChildrenOnly } from './_multi_level_select_single_children_only.jsx'
|
|
2
4
|
export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
|
|
3
|
-
export { default as MultiLevelSelectSelectedIds } from "./_multi_level_select_selected_ids.jsx"
|
|
5
|
+
export { default as MultiLevelSelectSelectedIds } from "./_multi_level_select_selected_ids.jsx"
|