playbook_ui 12.24.0.pre.alpha.play824733 → 12.24.0.pre.alpha.railsmultilevelimprovements739

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,12 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Playbook
4
+ module Forms
5
+ class Builder
6
+ def multi_level_select(id, _options = {}, _html_options = {}, props: {})
7
+ props[:id] = id
8
+ @template.pb_rails("multi_level_select", props: props)
9
+ end
10
+ end
11
+ end
12
+ end
@@ -10,7 +10,7 @@ module Playbook
10
10
  require_relative "builder/form_field_builder"
11
11
  require_relative "builder/select_field"
12
12
  require_relative "builder/typeahead_field"
13
- require_relative "builder/intl_telephone_field"
13
+ require_relative "builder/multi_level_select_field"
14
14
 
15
15
  prepend(FormFieldBuilder.new(:email_field, kit_name: "text_input"))
16
16
  prepend(FormFieldBuilder.new(:number_field, kit_name: "text_input"))
@@ -20,6 +20,7 @@ module Playbook
20
20
  prepend(FormFieldBuilder.new(:password_field, kit_name: "text_input"))
21
21
  prepend(FormFieldBuilder.new(:url_field, kit_name: "text_input"))
22
22
  prepend(FormFieldBuilder.new(:text_area, kit_name: "textarea"))
23
+ prepend(FormFieldBuilder.new(:multi_level_select, kit_name: "multi_level_select"))
23
24
 
24
25
  def actions
25
26
  context = @template.respond_to?(:view_context) ? @template.view_context : @template
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "12.24.0"
5
- VERSION = "12.24.0.pre.alpha.play824733"
5
+ VERSION = "12.24.0.pre.alpha.railsmultilevelimprovements739"
6
6
  end
data/lib/playbook.rb CHANGED
@@ -8,10 +8,9 @@ require "playbook/props"
8
8
  require "playbook/forms"
9
9
  require "playbook/pb_forms_helper"
10
10
  require "playbook/pb_kit_helper"
11
- require "playbook/pb_doc_helper"
11
+ require "playbook/pb_doc_helper" # Duplicated from website (Temp)
12
12
  require "playbook/kit_base"
13
13
  require "playbook/kit_resolver"
14
- require "playbook/markdown"
15
14
 
16
15
  module Playbook
17
16
  ROOT_PATH = Pathname.new(File.join(__dir__, ".."))
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 12.24.0.pre.alpha.play824733
4
+ version: 12.24.0.pre.alpha.railsmultilevelimprovements739
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -67,34 +67,6 @@ dependencies:
67
67
  - - '='
68
68
  - !ruby/object:Gem::Version
69
69
  version: 2.6.1
70
- - !ruby/object:Gem::Dependency
71
- name: redcarpet
72
- requirement: !ruby/object:Gem::Requirement
73
- requirements:
74
- - - "~>"
75
- - !ruby/object:Gem::Version
76
- version: '3.6'
77
- type: :runtime
78
- prerelease: false
79
- version_requirements: !ruby/object:Gem::Requirement
80
- requirements:
81
- - - "~>"
82
- - !ruby/object:Gem::Version
83
- version: '3.6'
84
- - !ruby/object:Gem::Dependency
85
- name: rouge
86
- requirement: !ruby/object:Gem::Requirement
87
- requirements:
88
- - - "~>"
89
- - !ruby/object:Gem::Version
90
- version: '3.15'
91
- type: :runtime
92
- prerelease: false
93
- version_requirements: !ruby/object:Gem::Requirement
94
- requirements:
95
- - - "~>"
96
- - !ruby/object:Gem::Version
97
- version: '3.15'
98
70
  - !ruby/object:Gem::Dependency
99
71
  name: view_component
100
72
  requirement: !ruby/object:Gem::Requirement
@@ -283,7 +255,9 @@ dependencies:
283
255
  - - '='
284
256
  - !ruby/object:Gem::Version
285
257
  version: 3.3.1
286
- description: Playbook Design System. Built for Nitro, but powering all.
258
+ description: Playbook UI is built out in Ruby View Components and React Components.
259
+ Playbook takes a modern design approach and applies it in a way that makes it easy
260
+ to support bleeding edge or legacy systems.
287
261
  email:
288
262
  - nitroux@powerhrg.com
289
263
  - dev@powerhrg.com
@@ -905,8 +879,6 @@ files:
905
879
  - app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_default.jsx
906
880
  - app/pb_kits/playbook/pb_distribution_bar/docs/example.yml
907
881
  - app/pb_kits/playbook/pb_distribution_bar/docs/index.js
908
- - app/pb_kits/playbook/pb_docs/kit_api.html.erb
909
- - app/pb_kits/playbook/pb_docs/kit_api.rb
910
882
  - app/pb_kits/playbook/pb_docs/kit_example.html.erb
911
883
  - app/pb_kits/playbook/pb_docs/kit_example.rb
912
884
  - app/pb_kits/playbook/pb_enhanced_element/element_observer.ts
@@ -1607,8 +1579,6 @@ files:
1607
1579
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.html.erb
1608
1580
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.jsx
1609
1581
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md
1610
- - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb
1611
- - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx
1612
1582
  - app/pb_kits/playbook/pb_phone_number_input/docs/example.yml
1613
1583
  - app/pb_kits/playbook/pb_phone_number_input/docs/index.js
1614
1584
  - app/pb_kits/playbook/pb_phone_number_input/phone_number_input.html.erb
@@ -2417,7 +2387,6 @@ files:
2417
2387
  - app/pb_kits/playbook/utilities/flexbox_global_props/_justify_self.scss
2418
2388
  - app/pb_kits/playbook/utilities/flexbox_global_props/_order.scss
2419
2389
  - app/pb_kits/playbook/utilities/globalProps.ts
2420
- - app/pb_kits/playbook/utilities/object.ts
2421
2390
  - app/pb_kits/playbook/utilities/props.ts
2422
2391
  - app/pb_kits/playbook/utilities/test-utils.js
2423
2392
  - app/pb_kits/playbook/utilities/test/globalProps/alignContent.test.js
@@ -2434,6 +2403,7 @@ files:
2434
2403
  - app/pb_kits/playbook/utilities/test/globalProps/order.test.js
2435
2404
  - app/pb_kits/playbook/utilities/text.ts
2436
2405
  - dist/menu.yml
2406
+ - dist/playbook-rails.js
2437
2407
  - dist/reset.css
2438
2408
  - lib/playbook.rb
2439
2409
  - lib/playbook/align_content.rb
@@ -2455,7 +2425,7 @@ files:
2455
2425
  - lib/playbook/forms/builder/collection_select_field.rb
2456
2426
  - lib/playbook/forms/builder/date_picker_field.rb
2457
2427
  - lib/playbook/forms/builder/form_field_builder.rb
2458
- - lib/playbook/forms/builder/intl_telephone_field.rb
2428
+ - lib/playbook/forms/builder/multi_level_select_field.rb
2459
2429
  - lib/playbook/forms/builder/select_field.rb
2460
2430
  - lib/playbook/forms/builder/typeahead_field.rb
2461
2431
  - lib/playbook/justify_content.rb
@@ -2463,8 +2433,6 @@ files:
2463
2433
  - lib/playbook/kit_base.rb
2464
2434
  - lib/playbook/kit_resolver.rb
2465
2435
  - lib/playbook/line_height.rb
2466
- - lib/playbook/markdown.rb
2467
- - lib/playbook/markdown/helper.rb
2468
2436
  - lib/playbook/number_spacing.rb
2469
2437
  - lib/playbook/order.rb
2470
2438
  - lib/playbook/pagination_renderer.rb
@@ -2492,7 +2460,7 @@ files:
2492
2460
  - lib/playbook/version.rb
2493
2461
  - lib/playbook/z_index.rb
2494
2462
  - lib/playbook_ui.rb
2495
- homepage: http://playbook.powerapp.cloud
2463
+ homepage: https://playbook.powerapp.cloud/
2496
2464
  licenses:
2497
2465
  - ISC
2498
2466
  metadata: {}
@@ -1,311 +0,0 @@
1
- <% if !local_prop_data.present? %>
2
- <div data-action="toggle" data-togglable="prop_example" class="pb--propsTable">
3
- <%= pb_rails("title", props: { text: "Available Props", size: 3, margin_bottom: "sm" }) %>
4
- <%= pb_rails("card", props: { padding: "none" }) do %>
5
- <%= pb_rails("card/card_body", props: { padding: "sm" }) do %>
6
- <%= pb_rails("nav", props: { orientation: "horizontal", variant: "subtle" }) do %>
7
- <%= pb_rails("nav/item", props: { text: "Global Props", link: "#", active: true }) %>
8
- <% end %>
9
- <% end %>
10
- <%= pb_rails("section_separator") %>
11
- <%= pb_rails("card/card_body", props: {}) do %>
12
- <%= pb_rails("table", props: {container: false, disable_hover: true }) do %>
13
- <thead>
14
- <tr>
15
- <th>Props</th>
16
- <th>Type</th>
17
- <th>Values</th>
18
- </tr>
19
- </thead>
20
- <tbody>
21
- <% global_prop_data.each do |key, value|%>
22
- <tr>
23
- <td>
24
- <%= pb_rails("title", props: { text: key, tag: "h4", size: 4 }) %>
25
- </td>
26
- <td>
27
- <%= pb_rails("card", props: {
28
- classname: "card",
29
- padding: "xxs",
30
- background: "light",
31
- border_none: true,
32
- border_radius: "sm"
33
- }) do %>
34
- <%= pb_rails("body", props: {
35
- classname: "kearning"
36
- }) do %>
37
- <% if key =~ /^padding|^margin/ %>
38
- <%= "array" %>
39
- <% else %>
40
- <%= value[:type].to_s.downcase %>
41
- <% end %>
42
- <% end %>
43
- <% end %>
44
- </td>
45
- <td>
46
- <% if key =~ /^padding|^margin/ %>
47
- <% padding_margin_values.each do |item| %>
48
- <%= pb_rails("card", props: {
49
- flex_direction: "row",
50
- classname: "card",
51
- padding: "xxs",
52
- background: "light",
53
- border_none: true,
54
- border_radius: "sm",
55
- margin: "xxs"
56
- }) do %>
57
- <%= pb_rails("body", props: {
58
- classname: "kearning"
59
- }) do %>
60
- <%= item %>
61
- <% end %>
62
- <% end %>
63
- <% end %>
64
- <% else %>
65
- <% if value[:values].present? %>
66
- <% value[:values].each do |item| %>
67
- <% if item != nil %>
68
- <%= pb_rails("card", props: {
69
- flex_direction: "row",
70
- classname: "card",
71
- padding: "xxs",
72
- background: "light",
73
- border_none: true,
74
- border_radius: "sm",
75
- margin: "xxs"
76
- }) do %>
77
- <%= pb_rails("body", props: {
78
- classname: "kearning"
79
- }) do %>
80
- <%= item %>
81
- <% end %>
82
- <% end %>
83
- <% end %>
84
- <% end %>
85
- <% end %>
86
- <% end %>
87
- </td>
88
- </tr>
89
- <% end %>
90
- </tbody>
91
- <% end %>
92
- <% end %>
93
- <% end %>
94
- </div>
95
- <% else %>
96
- <div data-action="toggle" data-togglable="prop_example" class="pb--propsTable">
97
- <%= pb_rails("title", props: { text: "Available Props", size: 3, margin_bottom: "sm" }) %>
98
- <%= pb_rails("card", props: { padding: "none" }) do %>
99
- <%= pb_rails("card/card_body", props: { padding: "sm" }) do %>
100
- <%= pb_rails("nav", props: { orientation: "horizontal", variant: "subtle" }) do %>
101
- <% if local_prop_data.present? %>
102
- <%= pb_rails("nav/item", props: { text: "Kit Props", link: "#", active: true, id: "local-button-active", classname: "local-active" }) %>
103
- <% end %>
104
- <% if local_prop_data.present? %>
105
- <%= pb_rails("nav/item", props: { text: "Kit Props", link: "#", id: "local-button", classname: "global-active" }) %>
106
- <% end %>
107
- <%= pb_rails("nav/item", props: { text: "Global Props", link: "#", active: true, id: "global-button-active", classname: "global-active" }) %>
108
- <%= pb_rails("nav/item", props: { text: "Global Props", link: "#", id: "global-button", classname: "local-active" }) %>
109
- <% end %>
110
- <% end %>
111
- <%= pb_rails("section_separator") %>
112
- <%= pb_rails("card/card_body", props: {}) do %>
113
- <%= pb_rails("table", props: {container: false, disable_hover: true, id: "global-prop-table", classname: "global-active"}) do %>
114
- <thead>
115
- <tr>
116
- <th>Props</th>
117
- <th>Type</th>
118
- <th>Values</th>
119
- </tr>
120
- </thead>
121
- <tbody>
122
- <% global_prop_data.each do |key, value|%>
123
- <tr>
124
- <td>
125
- <%= pb_rails("title", props: { text: key, tag: "h4", size: 4 }) %>
126
- </td>
127
- <td>
128
- <%= pb_rails("card", props: {
129
- classname: "card",
130
- padding: "xxs",
131
- background: "light",
132
- border_none: true,
133
- border_radius: "sm"
134
- }) do %>
135
- <%= pb_rails("body", props: {
136
- classname: "kearning"
137
- }) do %>
138
- <% if key =~ /^padding|^margin/ %>
139
- <%= "array" %>
140
- <% else %>
141
- <%= value[:type].to_s.downcase %>
142
- <% end %>
143
- <% end %>
144
- <% end %>
145
- </td>
146
- <td>
147
- <% if key =~ /^padding|^margin/ %>
148
- <% padding_margin_values.each do |item| %>
149
- <%= pb_rails("card", props: {
150
- flex_direction: "row",
151
- classname: "card",
152
- padding: "xxs",
153
- background: "light",
154
- border_none: true,
155
- border_radius: "sm",
156
- margin: "xxs"
157
- }) do %>
158
- <%= pb_rails("body", props: {
159
- classname: "kearning"
160
- }) do %>
161
- <%= item %>
162
- <% end %>
163
- <% end %>
164
- <% end %>
165
- <% else %>
166
- <% if value[:values].present? %>
167
- <% value[:values].each do |item| %>
168
- <% if item != nil %>
169
- <%= pb_rails("card", props: {
170
- flex_direction: "row",
171
- classname: "card",
172
- padding: "xxs",
173
- background: "light",
174
- border_none: true,
175
- border_radius: "sm",
176
- margin: "xxs"
177
- }) do %>
178
- <%= pb_rails("body", props: {
179
- classname: "kearning"
180
- }) do %>
181
- <%= item %>
182
- <% end %>
183
- <% end %>
184
- <% end %>
185
- <% end %>
186
- <% end %>
187
- <% end %>
188
- </td>
189
- </tr>
190
- <% end %>
191
- </tbody>
192
- <% end %>
193
- <%= pb_rails("table", props: {container: false, disable_hover: true, id: "local-prop-table", classname: "local-active"}) do %>
194
- <thead>
195
- <tr>
196
- <th>Props</th>
197
- <th>Type</th>
198
- <th>Values</th>
199
- <th>Default</th>
200
- </tr>
201
- </thead>
202
- <tbody>
203
- <% local_prop_data.each do |key, value|%>
204
- <tr>
205
- <td>
206
- <%= pb_rails("title", props: { text: key, tag: "h4", size: 4 }) %>
207
- </td>
208
- <td>
209
- <%= pb_rails("card", props: {
210
- classname: "card",
211
- padding: "xxs",
212
- background: "light",
213
- border_none: true,
214
- border_radius: "sm"
215
- }) do %>
216
- <%= pb_rails("body", props: {
217
- classname: "kearning"
218
- }) do %>
219
- <%= value[:type].downcase %>
220
- <% end %>
221
- <% end %>
222
- </td>
223
- <td>
224
- <% if value[:values].present? %>
225
- <% value[:values].each do |item| %>
226
- <% if item != nil %>
227
- <%= pb_rails("card", props: {
228
- flex_direction: "row",
229
- classname: "card",
230
- padding: "xxs",
231
- background: "light",
232
- border_none: true,
233
- border_radius: "sm",
234
- margin: "xxs"
235
- }) do %>
236
- <%= pb_rails("body", props: {
237
- classname: "kearning"
238
- }) do %>
239
- <%= item %>
240
- <% end %>
241
- <% end %>
242
- <% end %>
243
- <% end %>
244
- <% end %>
245
- </td>
246
- <td>
247
- <% if value[:default].present? || value[:default].is_a?(TrueClass) || value[:default].is_a?(FalseClass) %>
248
- <%= pb_rails("card", props: {
249
- classname: "card",
250
- padding: "xxs",
251
- background: "light",
252
- border_none: true,
253
- border_radius: "sm"
254
- }) do %>
255
- <%= pb_rails("body", props: {
256
- classname: "kearning"
257
- }) do %>
258
- <%= value[:default] %>
259
- <% end %>
260
- <% end %>
261
- <% end %>
262
- </td>
263
- </tr>
264
- <% end %>
265
- </tbody>
266
- <% end %>
267
- <% end %>
268
- <% end %>
269
- </div>
270
- <% end %>
271
-
272
- <script>
273
-
274
- const globalNavAndTable = document.querySelectorAll('.global-active');
275
- const localNavAndTable = document.querySelectorAll('.local-active');
276
-
277
- globalNavAndTable.forEach(element => {
278
- element.style.display = 'none';
279
- });
280
-
281
- const globalButton = document.getElementById("global-button");
282
- if (globalButton) {
283
- globalButton.addEventListener("click", showGlobal);
284
- }
285
-
286
- const localButton = document.getElementById("local-button");
287
- if (localButton) {
288
- localButton.addEventListener("click", showLocal);
289
- }
290
-
291
- function showGlobal() {
292
- localNavAndTable.forEach(element => {
293
- element.style.display = 'none';
294
- });
295
-
296
- globalNavAndTable.forEach(element => {
297
- element.style.display = 'table';
298
- });
299
- }
300
-
301
- function showLocal() {
302
- localNavAndTable.forEach(element => {
303
- element.style.display = 'table';
304
- });
305
-
306
- globalNavAndTable.forEach(element => {
307
- element.style.display = 'none';
308
- });
309
- }
310
-
311
- </script>
@@ -1,149 +0,0 @@
1
- # frozen_string_literal: true
2
-
3
- module Playbook
4
- module PbDocs
5
- class KitApi < Playbook::KitBase
6
- prop :kit, type: Playbook::Props::String, required: true
7
-
8
- def kit_local_props
9
- local = []
10
- kit_props.each do |key, value|
11
- value.kit != Playbook::KitBase && local.push({ key: key, value: value })
12
- end
13
- local
14
- end
15
-
16
- def padding_margin_values
17
- %w[none xxs xs sm md lg xl]
18
- end
19
-
20
- def local_prop_data
21
- local_props = {}
22
-
23
- kit_local_props.each do |key, _value|
24
- name = key[:value].instance_variable_get(:@name)
25
- type = key[:value].class.to_s.split("::").last
26
- default = key[:value].instance_variable_get(:@default)
27
- values = key[:value].instance_variable_get(:@values)
28
- local_props[name.to_sym] = { "type": type, "default": default, "values": values }
29
- end
30
- local_props
31
- end
32
-
33
- def kit_global_props
34
- global_props = {}
35
- global_prop_names = []
36
- global_prop_values = {}
37
- global_props_with_values = {}
38
- global_props_without_values = []
39
- parent_child_object = {}
40
- updated_global_props_with_values = {}
41
-
42
- # extracts the modules from kit_base.rb, which is where we import all the global props that we inject into every rails kit
43
- pb_module = Playbook::KitBase.included_modules.select { |mod| mod.to_s.include?("Playbook::") }
44
-
45
- # loops through the kits and extracts each prop with its values and pushes that to the global_props hash
46
- kit_props.each do |key, value|
47
- value.kit == Playbook::KitBase && global_props[key.to_sym] = value
48
- end
49
-
50
- # loops through the global_props and extracts the name of each prop and pushes that to global_prop_names array
51
- global_props.each do |name, _values|
52
- global_prop_names.push(name)
53
- end
54
-
55
- # Loops through each module in pb_module and searches for methods that end in _values, as these methods hold the values for each prop
56
- # we then save the values and type and push that to the values hash as a key value pair
57
- pb_module.each do |mod|
58
- mod.instance_methods.each do |method_name|
59
- next unless method_name.to_s.end_with?("_values")
60
-
61
- value = send(method_name)
62
- type = value.class
63
- global_prop_values[method_name.to_s.chomp("_values").to_sym] = { "type": type, "values": value }
64
- end
65
- end
66
-
67
- # loops through the global_prop_names array
68
- # then loops through the global_prop_values hash and extracts the values that have the same name found in global_prop_names
69
- # this loop helps ensure only global props values are actually extracted, as there could be other methods that end in _values in the modules we are iterating over
70
- # these verified global props with values are then pushed to the global_props_with_values hash
71
- global_prop_names.each do |name, _prop|
72
- global_prop_values.each do |key, value|
73
- global_props_with_values[key] = value if key == name
74
- end
75
- end
76
-
77
- # now we grab all the global_prop_names that do not have a matching key in global_prop_values.
78
- # This gives us any global prop that did not have any predefined value. like classname and dark
79
- global_props_without_values = global_prop_names - global_prop_values.keys
80
-
81
- # Loops through each module in pb_module and searches for methods that end in _options, as these methods hold all the props in the module
82
- # save the prop names prop values and and parent module name to parent_child_object hash
83
- # this is a comprehensive list of all parent module and children props for edge cases like spacing.rb, that is not named after the props it represents
84
- pb_module.each do |mod|
85
- mod.instance_methods.each do |method_name|
86
- next unless method_name.to_s.end_with?("_options")
87
-
88
- props = send(method_name)
89
- parent = mod.to_s.split("::").last
90
- values = send("#{parent.underscore}_values")
91
- parent_child_object[parent] = { "props": props, "values": values }
92
- end
93
- end
94
-
95
- # loops through each object in parent_child_object and extracts its children (props and values)
96
- # loops through each child and extracts the individual props
97
- # Checks if the props match any of the props in global_props_without_values
98
- # if it does, then we push that prop to global_props_with_values hash
99
- # This extracts the props in the spacing.rb file and any file that is not named after the props it represents
100
- parent_child_object.each do |_parent, children|
101
- children.each do |_child, props|
102
- props.each do |prop, _value|
103
- type = children[:values].class
104
- values = children[:values]
105
- global_props_with_values[prop] = { "type": type, "values": values } if global_props_without_values.include?(prop)
106
- end
107
- end
108
- end
109
-
110
- # loop through the global_props hash and the global_props_with_values hash.
111
- # extract the props from global_props that are not found in global_props_with_values into updated_global_props_with_values
112
- # This is the last piece that grabs the global props that did not have values at all, like classname and dark, and adds it to our hash
113
- global_props.each do |prop, value|
114
- unless global_props_with_values.include?(prop)
115
- type = value.class.to_s.split("::").last
116
- updated_global_props_with_values[prop] = { "type": type }
117
- end
118
- end
119
-
120
- # Merge updated_global_props_with_values into global_props_with_values
121
- # global_props_with_values will now hold all the global props thier values and type
122
- global_props_with_values.merge!(updated_global_props_with_values)
123
-
124
- global_props_with_values
125
- end
126
-
127
- def global_prop_data
128
- global_props = {}
129
-
130
- kit_global_props.each do |key, value|
131
- type = value[:type]
132
- values = value[:values]
133
- global_props[key] = { "type": type, "values": values }
134
- end
135
- global_props
136
- end
137
-
138
- def kit_props
139
- kit_class.props
140
- end
141
-
142
- private
143
-
144
- def kit_class
145
- @kit_class ||= Playbook::KitResolver.resolve(kit.to_s)
146
- end
147
- end
148
- end
149
- end
@@ -1,14 +0,0 @@
1
- <form id="example-form-validation" action="" method="get">
2
- <%= pb_rails("phone_number_input", props: { error: "Missing phone number.", id: "validation", initial_country: "af", value: "", required: true }) %>
3
- <%= pb_rails("button", props: {html_type: "submit", text: "Save Phone Number"}) %>
4
- </form>
5
-
6
- <% content_for(:pb_js) do %>
7
- <%= javascript_tag do %>
8
- document.addEventListener('DOMContentLoaded', function () {
9
- document.querySelector('#example-form-validation').addEventListener('submit', function (e) {
10
- if (e.target.querySelectorAll('[error]:not([error=""])').length > 0) e.preventDefault();
11
- })
12
- })
13
- <% end %>
14
- <% end %>