playbook_ui_docs 14.18.0.pre.alpha.PLAY2107phonenumberlabeljumpbug7435 → 14.18.0.pre.alpha.PLAY2107phonenumberlabeljumpbug7445
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_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
- metadata +6 -3
- /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: d842c5f132d8fa77a340283283ce6d4e0f6191cf44b935057bca8b0483f49859
|
4
|
+
data.tar.gz: 04b4e8481f4cd7e6bd7414b828701b3ca64572fdd091f1b956e7fa50b22a0b27
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 00624f43a7fcc270924dc75217db7e3d9b153fdd5dcde98e8ae6f07be6b57c68962a92bf38892e4324022042d9ab644ca5e63cb1e7c9a289bedae0704af8c26f
|
7
|
+
data.tar.gz: 2c96bf498e4c81d0173495a9df466c26ff7cc40ac1ba88ae509499c168cde84acf479900dde308a3cf1abe00b8eada82796a913b7c5c5855ec336a063d68f4e0
|
@@ -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
|
-
|
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: 14.18.0.pre.alpha.
|
4
|
+
version: 14.18.0.pre.alpha.PLAY2107phonenumberlabeljumpbug7445
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Power UX
|
@@ -737,12 +737,15 @@ files:
|
|
737
737
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx
|
738
738
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.md
|
739
739
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_default_react.md
|
740
|
+
- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.html.erb
|
740
741
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.jsx
|
741
|
-
- app/pb_kits/playbook/pb_draggable/docs/
|
742
|
+
- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.html.erb
|
742
743
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.jsx
|
743
|
-
- app/pb_kits/playbook/pb_draggable/docs/
|
744
|
+
- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_rails.md
|
745
|
+
- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_react.md
|
744
746
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.jsx
|
745
747
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.md
|
748
|
+
- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_react.md
|
746
749
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.html.erb
|
747
750
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.md
|
748
751
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.html.erb
|
File without changes
|
File without changes
|