playbook_ui_docs 14.12.0.pre.alpha.PBNTR779railsdraggablecrosscontainer5863 → 14.12.0.pre.alpha.PBNTR8335887

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.
Files changed (6) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_draggable/docs/example.yml +5 -1
  3. data/dist/playbook-doc.js +1 -1
  4. metadata +2 -4
  5. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.html.erb +0 -193
  6. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.md +0 -1
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.12.0.pre.alpha.PBNTR779railsdraggablecrosscontainer5863
4
+ version: 14.12.0.pre.alpha.PBNTR8335887
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-02-03 00:00:00.000000000 Z
12
+ date: 2025-02-04 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: playbook_ui
@@ -696,8 +696,6 @@ files:
696
696
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.md
697
697
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx
698
698
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.md
699
- - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.html.erb
700
- - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.md
701
699
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.jsx
702
700
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.md
703
701
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.html.erb
data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.html.erb DELETED
@@ -1,193 +0,0 @@
1
- <% content_for :helper_methods do %>
2
- <% def badge_properties(container)
3
- case container
4
- when "To Do"
5
- { text: "queue", variant: "warning" }
6
- when "In Progress"
7
- { text: "progress", variant: "primary" }
8
- else
9
- { text: "done", variant: "success" }
10
- end
11
- end %>
12
- <% end %>
13
-
14
- <% containers = [
15
- "To Do",
16
- "In Progress",
17
- "Done"
18
- ] %>
19
-
20
- <% items_data = [
21
- {
22
- id: "11",
23
- container: "To Do",
24
- title: "Task 1",
25
- description: "Bug fixes",
26
- assignee_name: "Terry Miles",
27
- assignee_img: "https://randomuser.me/api/portraits/men/44.jpg",
28
- },
29
- {
30
- id: "12",
31
- container: "To Do",
32
- title: "Task 2",
33
- description: "Documentation",
34
- assignee_name: "Sophia Miles",
35
- assignee_img: "https://randomuser.me/api/portraits/women/8.jpg",
36
- },
37
- {
38
- id: "13",
39
- container: "In Progress",
40
- title: "Task 3",
41
- description: "Add a variant",
42
- assignee_name: "Alice Jones",
43
- assignee_img: "https://randomuser.me/api/portraits/women/10.jpg",
44
- },
45
- {
46
- id: "14",
47
- container: "To Do",
48
- title: "Task 4",
49
- description: "Add jest tests",
50
- assignee_name: "Mike James",
51
- assignee_img: "https://randomuser.me/api/portraits/men/8.jpg",
52
- },
53
- {
54
- id: "15",
55
- container: "Done",
56
- title: "Task 5",
57
- description: "Alpha testing",
58
- assignee_name: "James Guy",
59
- assignee_img: "https://randomuser.me/api/portraits/men/18.jpg",
60
- },
61
- {
62
- id: "16",
63
- container: "In Progress",
64
- title: "Task 6",
65
- description: "Release",
66
- assignee_name: "Sally Jones",
67
- assignee_img: "https://randomuser.me/api/portraits/women/28.jpg",
68
- },
69
- ] %>
70
-
71
- <%= pb_rails("draggable", props: { initial_items: items_data }) do %>
72
- <%= pb_rails("flex", props: { justify_content: "center" }) do %>
73
- <% containers.each do |container| %>
74
- <%= pb_rails("draggable/draggable_container", props: {
75
- container: container,
76
- width: "xs",
77
- height: "xs",
78
- padding: "sm",
79
- data: { container: container }
80
- }) do %>
81
- <%= pb_rails("caption", props: { text_align: "center" }) do %><%= container %><% end %>
82
- <%= pb_rails("flex", props: {align_items: "stretch", orientation: "column"}) do %>
83
- <% items_data.select { |item| item[:container] == container }.each do |item| %>
84
- <%= pb_rails("draggable/draggable_item", props: {
85
- container: container,
86
- drag_id: item[:id]
87
- }) do %>
88
- <%= pb_rails("card", props: { margin_bottom: "sm", padding: "sm"}) do %>
89
- <%= pb_rails("flex", props: { justify: "between" }) do %>
90
- <%= pb_rails("flex/flex_item") do %>
91
- <%= pb_rails("flex") do %>
92
- <%= pb_rails("avatar", props: {
93
- image_url: item[:assignee_img],
94
- name: item[:assignee_name],
95
- size: "xxs"
96
- }) %>
97
- <%= pb_rails("title", props: {
98
- padding_left: "xs",
99
- size: 4,
100
- text: item[:title]
101
- }) %>
102
- <% end %>
103
- <% end %>
104
- <%= pb_rails("badge", props: {
105
- margin_left: "sm",
106
- rounded: true,
107
- text: badge_properties(container)[:text],
108
- variant: badge_properties(container)[:variant],
109
- data: {
110
- pb_status_badge: true,
111
- pb_tag_type: "badge"
112
- }
113
- }) %>
114
- <% end %>
115
- <%= pb_rails("body", props: { padding_top: "xs", text: item[:description] }) %>
116
- <% end %>
117
- <% end %>
118
- <% end %>
119
- <% end %>
120
- <% end %>
121
- <% end %>
122
- <% end %>
123
- <% end %>
124
-
125
- <script>
126
- const initBadgeUpdates = function() {
127
- const updateBadge = function(container) {
128
- switch (container) {
129
- case 'To Do':
130
- return { text: 'queue', variant: 'warning' };
131
- case 'In Progress':
132
- return { text: 'progress', variant: 'primary' };
133
- case 'Done':
134
- return { text: 'done', variant: 'success' };
135
- default:
136
- return { text: 'queue', variant: 'warning' };
137
- }
138
- };
139
-
140
- let draggedElement = null;
141
- let startContainer = null;
142
-
143
- document.querySelectorAll('.pb_draggable_item').forEach(function(item) {
144
- item.addEventListener('dragstart', function(event) {
145
- draggedElement = event.target;
146
- startContainer = draggedElement.closest('.pb_draggable_container');
147
- });
148
- });
149
-
150
- document.querySelectorAll('.pb_draggable_container').forEach(function(container) {
151
- container.addEventListener('drop', function(event) {
152
- event.preventDefault();
153
-
154
- if (draggedElement) {
155
- setTimeout(function() {
156
- const currentContainer = container;
157
-
158
- if (currentContainer && startContainer && currentContainer !== startContainer) {
159
- const containerData = currentContainer.getAttribute('data-container');
160
- const badge = draggedElement.querySelector('[data-pb-status-badge]');
161
-
162
- if (badge && containerData) {
163
- const newProperties = updateBadge(containerData);
164
- const span = badge.querySelector('span');
165
-
166
- if (span) {
167
- span.textContent = newProperties.text;
168
- }
169
-
170
- badge.classList.forEach(function(className) {
171
- if (className.includes('pb_badge_kit_') || className === 'ml_sm') {
172
- badge.classList.remove(className);
173
- }
174
- });
175
-
176
- badge.className = `pb_badge_kit_${newProperties.variant}_rounded ml_sm`;
177
- }
178
- }
179
-
180
- draggedElement = null;
181
- startContainer = null;
182
- }, 50);
183
- }
184
- });
185
- });
186
- };
187
-
188
- if (document.readyState === 'loading') {
189
- document.addEventListener('DOMContentLoaded', initBadgeUpdates);
190
- } else {
191
- initBadgeUpdates();
192
- }
193
- </script>
data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.md DELETED
@@ -1 +0,0 @@
1
- The Draggable kit can also be used to achieve more complex, multiple container functionality as shown here. This complex usage requires the full subcomponent structure.