playbook_ui 14.14.0.pre.alpha.PBNTR890typeahead6390 → 14.14.0.pre.alpha.PBNTR894allowingcurrencyzero6405
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_text_input/inputMask.ts +2 -3
- data/app/pb_kits/playbook/pb_title/_title.scss +0 -35
- data/app/pb_kits/playbook/pb_title/_title.tsx +1 -10
- data/app/pb_kits/playbook/pb_title/docs/_title_default.html.erb +2 -1
- data/app/pb_kits/playbook/pb_title/docs/_title_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_title/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_title/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_title/title.rb +1 -10
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +1 -34
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_typeahead/index.ts +8 -61
- data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +1 -13
- data/dist/chunks/{_typeahead-DkFE6eZr.js → _typeahead-DXmDhfga.js} +3 -3
- data/dist/chunks/{_weekday_stacked-BXq4AGmy.js → _weekday_stacked-Cb1DOlft.js} +1 -1
- data/dist/chunks/{lib-Dmay5Z6U.js → lib-Fr78pbpF.js} +1 -1
- data/dist/chunks/{pb_form_validation-DdP7BnVX.js → pb_form_validation-CN51bfsD.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +6 -13
- data/app/pb_kits/playbook/pb_title/docs/_title_display_size.html.erb +0 -7
- data/app/pb_kits/playbook/pb_title/docs/_title_display_size.jsx +0 -54
- data/app/pb_kits/playbook/pb_title/docs/_title_display_size.md +0 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options.html.erb +0 -45
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options.md +0 -5
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options_pure_rails.html.erb +0 -33
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options_pure_rails.md +0 -3
data/lib/playbook/version.rb
CHANGED
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: 14.14.0.pre.alpha.
|
4
|
+
version: 14.14.0.pre.alpha.PBNTR894allowingcurrencyzero6405
|
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-
|
12
|
+
date: 2025-03-03 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -3025,9 +3025,6 @@ files:
|
|
3025
3025
|
- app/pb_kits/playbook/pb_title/docs/_title_default.html.erb
|
3026
3026
|
- app/pb_kits/playbook/pb_title/docs/_title_default.jsx
|
3027
3027
|
- app/pb_kits/playbook/pb_title/docs/_title_default.md
|
3028
|
-
- app/pb_kits/playbook/pb_title/docs/_title_display_size.html.erb
|
3029
|
-
- app/pb_kits/playbook/pb_title/docs/_title_display_size.jsx
|
3030
|
-
- app/pb_kits/playbook/pb_title/docs/_title_display_size.md
|
3031
3028
|
- app/pb_kits/playbook/pb_title/docs/_title_light_weight.html.erb
|
3032
3029
|
- app/pb_kits/playbook/pb_title/docs/_title_light_weight.jsx
|
3033
3030
|
- app/pb_kits/playbook/pb_title/docs/_title_light_weight.md
|
@@ -3164,10 +3161,6 @@ files:
|
|
3164
3161
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_menu_list.jsx
|
3165
3162
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb
|
3166
3163
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.jsx
|
3167
|
-
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options.html.erb
|
3168
|
-
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options.md
|
3169
|
-
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options_pure_rails.html.erb
|
3170
|
-
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options_pure_rails.md
|
3171
3164
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.html.erb
|
3172
3165
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.jsx
|
3173
3166
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.md
|
@@ -3374,11 +3367,11 @@ files:
|
|
3374
3367
|
- app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
|
3375
3368
|
- app/pb_kits/playbook/utilities/text.ts
|
3376
3369
|
- app/pb_kits/playbook/utilities/validEmojiChecker.ts
|
3377
|
-
- dist/chunks/_typeahead-
|
3378
|
-
- dist/chunks/_weekday_stacked-
|
3370
|
+
- dist/chunks/_typeahead-DXmDhfga.js
|
3371
|
+
- dist/chunks/_weekday_stacked-Cb1DOlft.js
|
3379
3372
|
- dist/chunks/lazysizes-B7xYodB-.js
|
3380
|
-
- dist/chunks/lib-
|
3381
|
-
- dist/chunks/pb_form_validation-
|
3373
|
+
- dist/chunks/lib-Fr78pbpF.js
|
3374
|
+
- dist/chunks/pb_form_validation-CN51bfsD.js
|
3382
3375
|
- dist/chunks/vendor.js
|
3383
3376
|
- dist/menu.yml
|
3384
3377
|
- dist/playbook-doc.js
|
@@ -1,7 +0,0 @@
|
|
1
|
-
<%= pb_rails("title", props: { text: "Display Size xs", tag: "h1", display_size: "xs" }) %>
|
2
|
-
<%= pb_rails("title", props: { text: "Display Size sm", tag: "h1", display_size: "sm" }) %>
|
3
|
-
<%= pb_rails("title", props: { text: "Display Size md", tag: "h1", display_size: "md" }) %>
|
4
|
-
<%= pb_rails("title", props: { text: "Display Size lg", tag: "h1", display_size: "lg" }) %>
|
5
|
-
<%= pb_rails("title", props: { text: "Display Size xl", tag: "h1", display_size: "xl" }) %>
|
6
|
-
<%= pb_rails("title", props: { text: "Display Size xxl", tag: "h1", display_size: "xxl" }) %>
|
7
|
-
<%= pb_rails("title", props: { text: "This is a size of display", tag: "h1", size: "display"}) %>
|
@@ -1,54 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
|
3
|
-
import Title from '../_title'
|
4
|
-
|
5
|
-
const TitleDisplaySize = (props) => {
|
6
|
-
return (
|
7
|
-
<div>
|
8
|
-
<Title
|
9
|
-
displaySize="xs"
|
10
|
-
tag="h1"
|
11
|
-
text="Display Size xs"
|
12
|
-
{...props}
|
13
|
-
/>
|
14
|
-
<Title
|
15
|
-
displaySize="sm"
|
16
|
-
tag="h1"
|
17
|
-
text="Display Size sm"
|
18
|
-
{...props}
|
19
|
-
/>
|
20
|
-
<Title
|
21
|
-
displaySize="md"
|
22
|
-
tag="h1"
|
23
|
-
text="Display Size md"
|
24
|
-
{...props}
|
25
|
-
/>
|
26
|
-
<Title
|
27
|
-
displaySize="lg"
|
28
|
-
tag="h1"
|
29
|
-
text="Display Size lg"
|
30
|
-
{...props}
|
31
|
-
/>
|
32
|
-
<Title
|
33
|
-
displaySize="xl"
|
34
|
-
tag="h1"
|
35
|
-
text="Display Size xl"
|
36
|
-
{...props}
|
37
|
-
/>
|
38
|
-
<Title
|
39
|
-
displaySize="xxl"
|
40
|
-
tag="h1"
|
41
|
-
text="Display Size xxl"
|
42
|
-
{...props}
|
43
|
-
/>
|
44
|
-
<Title
|
45
|
-
size="display"
|
46
|
-
tag="h1"
|
47
|
-
text="This is a size of display"
|
48
|
-
{...props}
|
49
|
-
/>
|
50
|
-
</div>
|
51
|
-
)
|
52
|
-
}
|
53
|
-
|
54
|
-
export default TitleDisplaySize
|
@@ -1 +0,0 @@
|
|
1
|
-
Responsive sizes for large screens and tablets, perfect for digital signage.
|
@@ -1,45 +0,0 @@
|
|
1
|
-
<%= pb_rails("select", props: {
|
2
|
-
id:"color_context_2",
|
3
|
-
label: "Choose a Color",
|
4
|
-
name: "color_name",
|
5
|
-
options: [
|
6
|
-
{ value: "red", value_text: "Red" },
|
7
|
-
{ value: "blue", value_text: "Blue" },
|
8
|
-
{ value: "green", value_text: "Green" }
|
9
|
-
],
|
10
|
-
}) %>
|
11
|
-
|
12
|
-
<%= pb_rails("typeahead", props: {
|
13
|
-
label: "Pick a Shade",
|
14
|
-
is_multi: false,
|
15
|
-
search_context_selector: "color_context_2",
|
16
|
-
options_by_context: {
|
17
|
-
"red": [
|
18
|
-
{ label: "Scarlet", value: "scarlet" },
|
19
|
-
{ label: "Mahogany", value: "mahogany" },
|
20
|
-
{ label: "Crimson", value: "crimson" }
|
21
|
-
],
|
22
|
-
"blue": [
|
23
|
-
{ label: "Sky Blue", value: "sky" },
|
24
|
-
{ label: "Cerulean", value: "cerulean" },
|
25
|
-
{ label: "Navy", value: "navy" }
|
26
|
-
],
|
27
|
-
"green": [
|
28
|
-
{ label: "Emerald", value: "emerald" },
|
29
|
-
{ label: "Mint", value: "mint" },
|
30
|
-
{ label: "Olive", value: "olive" }
|
31
|
-
]
|
32
|
-
},
|
33
|
-
id: "typeahead-dynamic-options",
|
34
|
-
}) %>
|
35
|
-
|
36
|
-
|
37
|
-
<%= javascript_tag defer: "defer" do %>
|
38
|
-
document.addEventListener("pb-typeahead-kit-typeahead-dynamic-options-result-option-select", function(event) {
|
39
|
-
console.log('Single Option selected')
|
40
|
-
console.dir(event.detail)
|
41
|
-
})
|
42
|
-
document.addEventListener("pb-typeahead-kit-typeahead-dynamic-options-result-clear", function() {
|
43
|
-
console.log('All options cleared')
|
44
|
-
})
|
45
|
-
<% end %>
|
@@ -1,5 +0,0 @@
|
|
1
|
-
You can also set up a typeahead to render options dynamically based on input from a select. To achieve this:
|
2
|
-
- The typeahead must have a unique `id`
|
3
|
-
- Use the `search_context_selector` prop on the typeahead. The value here must match the id of the select so the Typeahead knows where to read the current "context" from.
|
4
|
-
- Use `options_by_context` to pass in a hash whose keys match the possible values of your “context” select. Each key maps to an array of { label, value } objects. The typeahead automatically displays only the subset of options matching the current context.
|
5
|
-
- Additionally, the optional `clear_on_context_change` prop controls whether the typeahead clears or not when a change happens in the linked select. This prop is set to true by default so that whenever a selection is made in the select, the Typeahead automatically clears its current input/selection.
|
@@ -1,33 +0,0 @@
|
|
1
|
-
<%= pb_rails("select", props: {
|
2
|
-
id:"color_context",
|
3
|
-
label: "Choose a Color",
|
4
|
-
name: "color_name_2",
|
5
|
-
options: [
|
6
|
-
{ value: "red", value_text: "Red" },
|
7
|
-
{ value: "blue", value_text: "Blue" },
|
8
|
-
{ value: "green", value_text: "Green" }
|
9
|
-
],
|
10
|
-
}) %>
|
11
|
-
|
12
|
-
<%= pb_rails("typeahead", props: {
|
13
|
-
label: "Pick a Shade",
|
14
|
-
search_context_selector: "color_context",
|
15
|
-
options_by_context: {
|
16
|
-
"red": [
|
17
|
-
{ label: "Scarlet", value: "scarlet" },
|
18
|
-
{ label: "Mahogany", value: "mahogany" },
|
19
|
-
{ label: "Crimson", value: "crimson" }
|
20
|
-
],
|
21
|
-
"blue": [
|
22
|
-
{ label: "Sky Blue", value: "sky" },
|
23
|
-
{ label: "Cerulean", value: "cerulean" },
|
24
|
-
{ label: "Navy", value: "navy" }
|
25
|
-
],
|
26
|
-
"green": [
|
27
|
-
{ label: "Emerald", value: "emerald" },
|
28
|
-
{ label: "Mint", value: "mint" },
|
29
|
-
{ label: "Olive", value: "olive" }
|
30
|
-
]
|
31
|
-
},
|
32
|
-
search_term_minimum_length: 0,
|
33
|
-
}) %>
|
@@ -1,3 +0,0 @@
|
|
1
|
-
The dynamic rendering of options for the typeahead can also be achieved with a pure Rails implementation (not react rendered). For this implementation, use all the props as above with the following additions:
|
2
|
-
|
3
|
-
- `search_term_minimum_length`: this sets the minimum input in the typeahead needed to display the dropdown. This is set to 3 by default. Set it to 0 for the dropdown to always display when the typeahead is interacted with.
|