playbook_ui 14.12.0.pre.alpha.play1862buttondisabledlinkbug5714 → 14.12.0.pre.alpha.playrailsinputmaskissue5775
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_advanced_table/_advanced_table.scss +3 -4
- data/app/pb_kits/playbook/pb_advanced_table/index.js +9 -6
- data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +8 -5
- data/app/pb_kits/playbook/pb_button/button.rb +1 -1
- data/app/pb_kits/playbook/pb_date/_date.tsx +14 -4
- data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx +2 -1
- data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx +13 -5
- data/app/pb_kits/playbook/pb_text_input/index.js +54 -55
- data/dist/chunks/_weekday_stacked-CttHBFW3.js +45 -0
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +3 -3
- data/dist/chunks/_weekday_stacked-VKMYuo6-.js +0 -45
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: de7208175abf0a46f5e58efc8312394ab84fc8f454a224f8045676d48208a40a
|
4
|
+
data.tar.gz: 7b857a0d2a20366771b4847913b7839bc8e9d193bc02b3194e6a5cd506a7458a
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: cbf931fe07a9c9aaeea6298d2ad681d1f9cec77bb92602b0b2f687acc4c07acae6cb744fbea44b211edb5c154bc52a025c95bbda18f5d333d2c1755732015d8f
|
7
|
+
data.tar.gz: 643b4e402cb2b9a4b11bd637740fcc197eeefbfbacf37410da46f9ab5b4cb047333bdcf8a72b112afc7717b6afc57bd84cf1cd1c59829843efff643a05d7a6c1
|
@@ -89,7 +89,6 @@
|
|
89
89
|
}
|
90
90
|
}
|
91
91
|
|
92
|
-
|
93
92
|
.table-header-cells-active:first-child {
|
94
93
|
color: $primary !important;
|
95
94
|
}
|
@@ -179,7 +178,7 @@
|
|
179
178
|
}
|
180
179
|
|
181
180
|
// Responsive Styles
|
182
|
-
@media only screen and (max-width: $screen-xl-min) {
|
181
|
+
@media only screen and (max-width: $screen-xl-min) {
|
183
182
|
&[class*="advanced-table-responsive-scroll"] {
|
184
183
|
border-radius: 4px;
|
185
184
|
box-shadow: 1px 0 0 0px $border_light,
|
@@ -215,7 +214,7 @@
|
|
215
214
|
.bg-white td:first-child {
|
216
215
|
background-color: $white;
|
217
216
|
}
|
218
|
-
|
217
|
+
|
219
218
|
}
|
220
219
|
}
|
221
220
|
@media only screen and (min-width: $screen-xl-min) {
|
@@ -306,4 +305,4 @@
|
|
306
305
|
}
|
307
306
|
}
|
308
307
|
}
|
309
|
-
}
|
308
|
+
}
|
@@ -133,15 +133,18 @@ export default class PbAdvancedTable extends PbEnhancedElement {
|
|
133
133
|
if (!elements.length) return;
|
134
134
|
|
135
135
|
const isVisible = elements[0].classList.contains("is-visible");
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
136
|
+
|
137
|
+
isVisible ? this.hideElement(elements) : this.showElement(elements);
|
138
|
+
isVisible ? this.displayDownArrow() : this.displayUpArrow();
|
139
|
+
|
140
|
+
const row = this.element.closest("tr");
|
141
|
+
if (row) {
|
142
|
+
row.classList.toggle("bg-silver", !isVisible);
|
143
|
+
row.classList.toggle("bg-white", isVisible);
|
142
144
|
}
|
143
145
|
}
|
144
146
|
|
147
|
+
|
145
148
|
displayDownArrow() {
|
146
149
|
this.element.querySelector(DOWN_ARROW_SELECTOR).style.display =
|
147
150
|
"inline-block";
|
@@ -14,10 +14,13 @@
|
|
14
14
|
<div style="padding-left: <%= depth * 1.25 %>em">
|
15
15
|
<%= pb_rails("flex", props:{align: "center", column_gap: "xs"}) do %>
|
16
16
|
<% if index.zero? && object.row[:children].present? %>
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
17
|
+
<button
|
18
|
+
id="<%= "#{object.id}_#{object.row.object_id}" %>"
|
19
|
+
class="gray-icon expand-toggle-icon"
|
20
|
+
data-advanced-table="true">
|
21
|
+
<%= pb_rails("icon", props: { id: "advanced-table_open_icon", icon: "circle-play", cursor: "pointer" }) %>
|
22
|
+
<%= pb_rails("icon", props: { id: "advanced-table_close_icon", display: "none", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
|
23
|
+
</button>
|
21
24
|
<% end %>
|
22
25
|
<%= pb_rails("flex/flex_item", props:{padding_left: index.zero? && object.row[:children].present? ? "none" : "xs"}) do %>
|
23
26
|
<% if column[:custom_renderer].present? %>
|
@@ -42,4 +45,4 @@
|
|
42
45
|
<% end %>
|
43
46
|
<% end %>
|
44
47
|
<% end %>
|
45
|
-
<% end %>
|
48
|
+
<% end %>
|
@@ -14,6 +14,7 @@ type PbDateProps = {
|
|
14
14
|
alignment?: "left" | "center" | "right";
|
15
15
|
aria?: { [key: string]: string };
|
16
16
|
className?: string;
|
17
|
+
dark?: boolean;
|
17
18
|
data?: { [key: string]: string };
|
18
19
|
htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
|
19
20
|
id?: string;
|
@@ -29,6 +30,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
|
|
29
30
|
aria = {},
|
30
31
|
alignment = "left",
|
31
32
|
className,
|
33
|
+
dark = false,
|
32
34
|
data = {},
|
33
35
|
htmlOptions = {},
|
34
36
|
id,
|
@@ -56,7 +58,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
|
|
56
58
|
);
|
57
59
|
|
58
60
|
return (
|
59
|
-
<div
|
61
|
+
<div
|
60
62
|
{...ariaProps}
|
61
63
|
{...dataProps}
|
62
64
|
{...htmlProps}
|
@@ -93,7 +95,9 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
|
|
93
95
|
</>
|
94
96
|
: size == "md" || size == "lg"
|
95
97
|
? (
|
96
|
-
<Title
|
98
|
+
<Title
|
99
|
+
dark={dark}
|
100
|
+
size={4}
|
97
101
|
tag="h4"
|
98
102
|
>
|
99
103
|
{showIcon && (
|
@@ -127,6 +131,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
|
|
127
131
|
<>
|
128
132
|
{showIcon && (
|
129
133
|
<Caption className="pb_icon_kit_container"
|
134
|
+
dark={dark}
|
130
135
|
tag="span"
|
131
136
|
>
|
132
137
|
<Icon fixedWidth
|
@@ -138,15 +143,20 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
|
|
138
143
|
|
139
144
|
{showDayOfWeek && (
|
140
145
|
<>
|
141
|
-
<Caption
|
146
|
+
<Caption dark={dark}
|
147
|
+
tag="div">
|
148
|
+
{weekday}
|
149
|
+
</Caption>
|
142
150
|
<Caption color="light"
|
151
|
+
dark={dark}
|
143
152
|
tag="div"
|
144
153
|
text=" • "
|
145
154
|
/>
|
146
155
|
</>
|
147
156
|
)}
|
148
157
|
|
149
|
-
<Caption
|
158
|
+
<Caption dark={dark}
|
159
|
+
tag="span">
|
150
160
|
{month} {day}
|
151
161
|
{currentYear != year && <>{`, ${year}`}</>}
|
152
162
|
</Caption>
|
@@ -18,7 +18,7 @@ const DateDefault = (props) => {
|
|
18
18
|
value={"2012-08-03"}
|
19
19
|
{...props}
|
20
20
|
/>
|
21
|
-
<Caption>{"(Hyphenated Date)"}</Caption>
|
21
|
+
<Caption {...props}>{"(Hyphenated Date)"}</Caption>
|
22
22
|
</div>
|
23
23
|
|
24
24
|
<br />
|
@@ -56,6 +56,7 @@ const DateDefault = (props) => {
|
|
56
56
|
<Title
|
57
57
|
size={4}
|
58
58
|
text={"(Hyphenated Date)"}
|
59
|
+
{...props}
|
59
60
|
/>
|
60
61
|
</div>
|
61
62
|
|
@@ -4,7 +4,8 @@ import { Caption, Date as FormattedDate, Title } from 'playbook-ui'
|
|
4
4
|
const DateUnstyled = (props) => {
|
5
5
|
return (
|
6
6
|
<>
|
7
|
-
<Caption
|
7
|
+
<Caption {...props}
|
8
|
+
size="xs"
|
8
9
|
text="Basic unstyled example"
|
9
10
|
/>
|
10
11
|
<FormattedDate
|
@@ -15,10 +16,14 @@ const DateUnstyled = (props) => {
|
|
15
16
|
|
16
17
|
<br />
|
17
18
|
|
18
|
-
<Caption
|
19
|
+
<Caption {...props}
|
20
|
+
|
21
|
+
size="xs"
|
19
22
|
text="Example with wrapping typography kit"
|
20
23
|
/>
|
21
|
-
<Title
|
24
|
+
<Title {...props}
|
25
|
+
size={1}
|
26
|
+
>
|
22
27
|
<FormattedDate
|
23
28
|
unstyled
|
24
29
|
value={new Date('25 Dec 1995')}
|
@@ -28,10 +33,13 @@ const DateUnstyled = (props) => {
|
|
28
33
|
|
29
34
|
<br />
|
30
35
|
|
31
|
-
<Caption
|
36
|
+
<Caption {...props}
|
37
|
+
size="xs"
|
32
38
|
text="Example with icon + subcaption"
|
33
39
|
/>
|
34
|
-
<Caption
|
40
|
+
<Caption {...props}
|
41
|
+
size="xs"
|
42
|
+
>
|
35
43
|
<FormattedDate
|
36
44
|
showDayOfWeek
|
37
45
|
showIcon
|
@@ -1,65 +1,67 @@
|
|
1
|
-
|
2
|
-
static start() {
|
3
|
-
const inputElements = document.querySelectorAll('[data-pb-input-mask="true"]');
|
1
|
+
import PbEnhancedElement from "../pb_enhanced_element";
|
4
2
|
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
let rawValue = event.target.value;
|
11
|
-
let formattedValue = rawValue;
|
12
|
-
|
13
|
-
// Apply formatting based on the mask type
|
14
|
-
switch (maskType) {
|
15
|
-
case "currency":
|
16
|
-
formattedValue = formatCurrency(rawValue);
|
17
|
-
break;
|
18
|
-
case "ssn":
|
19
|
-
formattedValue = formatSSN(rawValue);
|
20
|
-
break;
|
21
|
-
case "postal_code":
|
22
|
-
formattedValue = formatPostalCode(rawValue);
|
23
|
-
break;
|
24
|
-
case "zip_code":
|
25
|
-
formattedValue = formatZipCode(rawValue);
|
26
|
-
break;
|
27
|
-
}
|
28
|
-
|
29
|
-
// Update the sanitized input field in the same wrapper
|
30
|
-
const sanitizedInput = inputElement
|
31
|
-
.closest(".text_input_wrapper")
|
32
|
-
?.querySelector('[data="sanitized-pb-input"]');
|
3
|
+
export default class PbTextInput extends PbEnhancedElement {
|
4
|
+
static get selector() {
|
5
|
+
return '[data-pb-input-mask="true"]';
|
6
|
+
}
|
33
7
|
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
break;
|
39
|
-
case "currency":
|
40
|
-
sanitizedInput.value = sanitizeCurrency(formattedValue);
|
41
|
-
break;
|
42
|
-
default:
|
43
|
-
sanitizedInput.value = formattedValue;
|
44
|
-
}
|
45
|
-
}
|
8
|
+
connect() {
|
9
|
+
this.handleInput = this.handleInput.bind(this);
|
10
|
+
this.element.addEventListener("input", this.handleInput);
|
11
|
+
}
|
46
12
|
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
});
|
13
|
+
disconnect() {
|
14
|
+
this.element.removeEventListener("input", this.handleInput);
|
15
|
+
}
|
51
16
|
|
17
|
+
handleInput() {
|
18
|
+
const maskType = this.element.getAttribute("mask");
|
19
|
+
const cursorPosition = this.element.selectionStart;
|
20
|
+
const rawValue = this.element.value;
|
21
|
+
let formattedValue = rawValue;
|
22
|
+
|
23
|
+
switch (maskType) {
|
24
|
+
case "currency":
|
25
|
+
formattedValue = formatCurrency(rawValue);
|
26
|
+
break;
|
27
|
+
case "ssn":
|
28
|
+
formattedValue = formatSSN(rawValue);
|
29
|
+
break;
|
30
|
+
case "postal_code":
|
31
|
+
formattedValue = formatPostalCode(rawValue);
|
32
|
+
break;
|
33
|
+
case "zip_code":
|
34
|
+
formattedValue = formatZipCode(rawValue);
|
35
|
+
break;
|
36
|
+
}
|
37
|
+
|
38
|
+
const sanitizedInput = this.element
|
39
|
+
.closest(".text_input_wrapper")
|
40
|
+
?.querySelector('[data="sanitized-pb-input"]');
|
41
|
+
|
42
|
+
if (sanitizedInput) {
|
43
|
+
switch (maskType) {
|
44
|
+
case "ssn":
|
45
|
+
sanitizedInput.value = sanitizeSSN(formattedValue);
|
46
|
+
break;
|
47
|
+
case "currency":
|
48
|
+
sanitizedInput.value = sanitizeCurrency(formattedValue);
|
49
|
+
break;
|
50
|
+
default:
|
51
|
+
sanitizedInput.value = formattedValue;
|
52
|
+
}
|
53
|
+
}
|
54
|
+
|
55
|
+
this.element.value = formattedValue;
|
56
|
+
setCursorPosition(this.element, cursorPosition, rawValue, formattedValue);
|
52
57
|
}
|
53
58
|
}
|
54
59
|
|
55
60
|
function formatCurrency(value) {
|
56
61
|
const numericValue = value.replace(/[^0-9]/g, "").slice(0, 15);
|
57
|
-
|
58
62
|
if (!numericValue) return "";
|
59
|
-
|
60
63
|
const dollars = parseFloat((parseInt(numericValue) / 100).toFixed(2));
|
61
64
|
if (dollars === 0) return "";
|
62
|
-
|
63
65
|
return new Intl.NumberFormat("en-US", {
|
64
66
|
style: "currency",
|
65
67
|
currency: "USD",
|
@@ -84,19 +86,16 @@ function formatPostalCode(value) {
|
|
84
86
|
}
|
85
87
|
|
86
88
|
function sanitizeSSN(input) {
|
87
|
-
return input.replace(/\D/g, "");
|
89
|
+
return input.replace(/\D/g, "");
|
88
90
|
}
|
89
91
|
|
90
92
|
function sanitizeCurrency(input) {
|
91
|
-
return input.replace(/[$,]/g, "");
|
93
|
+
return input.replace(/[$,]/g, "");
|
92
94
|
}
|
93
95
|
|
94
|
-
// function to set cursor position
|
95
96
|
function setCursorPosition(inputElement, cursorPosition, rawValue, formattedValue) {
|
96
97
|
const difference = formattedValue.length - rawValue.length;
|
97
|
-
|
98
98
|
const newPosition = Math.max(0, cursorPosition + difference);
|
99
|
-
|
100
99
|
requestAnimationFrame(() => {
|
101
100
|
inputElement.setSelectionRange(newPosition, newPosition);
|
102
101
|
});
|