shadcn_phlexcomponents 0.1.17 → 0.1.18
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/javascript/controllers/accordion_controller.js +90 -100
- data/app/javascript/controllers/alert_dialog_controller.js +4 -4
- data/app/javascript/controllers/avatar_controller.js +11 -11
- data/app/javascript/controllers/checkbox_controller.js +26 -25
- data/app/javascript/controllers/collapsible_controller.js +36 -34
- data/app/javascript/controllers/combobox_controller.js +231 -262
- data/app/javascript/controllers/command_controller.js +184 -204
- data/app/javascript/controllers/date_picker_controller.js +257 -240
- data/app/javascript/controllers/date_range_picker_controller.js +200 -188
- data/app/javascript/controllers/dialog_controller.js +78 -78
- data/app/javascript/controllers/dropdown_menu_controller.js +208 -228
- data/app/javascript/controllers/dropdown_menu_sub_controller.js +97 -110
- data/app/javascript/controllers/form_field_controller.js +16 -16
- data/app/javascript/controllers/hover_card_controller.js +71 -68
- data/app/javascript/controllers/loading_button_controller.js +10 -10
- data/app/javascript/controllers/popover_controller.js +78 -84
- data/app/javascript/controllers/progress_controller.js +11 -11
- data/app/javascript/controllers/radio_group_controller.js +74 -74
- data/app/javascript/controllers/select_controller.js +232 -246
- data/app/javascript/controllers/sidebar_controller.js +27 -26
- data/app/javascript/controllers/sidebar_trigger_controller.js +9 -12
- data/app/javascript/controllers/slider_controller.js +74 -73
- data/app/javascript/controllers/switch_controller.js +23 -22
- data/app/javascript/controllers/tabs_controller.js +61 -60
- data/app/javascript/controllers/theme_switcher_controller.js +27 -27
- data/app/javascript/controllers/toast_container_controller.js +31 -44
- data/app/javascript/controllers/toast_controller.js +18 -18
- data/app/javascript/controllers/toggle_controller.js +17 -16
- data/app/javascript/controllers/toggle_group_controller.js +17 -16
- data/app/javascript/controllers/tooltip_controller.js +77 -74
- data/app/javascript/shadcn_phlexcomponents.js +58 -58
- data/app/javascript/utils/command.js +334 -392
- data/app/javascript/utils/floating_ui.js +108 -147
- data/app/javascript/utils/index.js +190 -253
- data/app/stylesheets/date_picker.css +1 -1
- data/app/stylesheets/shadcn_phlexcomponents.css +173 -0
- data/app/typescript/controllers/combobox_controller.ts +0 -1
- data/app/typescript/controllers/date_picker_controller.ts +25 -7
- data/app/typescript/controllers/tooltip_controller.ts +1 -1
- data/app/typescript/utils/command.ts +0 -2
- data/app/typescript/utils/floating_ui.ts +11 -20
- data/app/typescript/utils/index.ts +0 -7
- data/lib/shadcn_phlexcomponents/components/accordion.rb +1 -1
- data/lib/shadcn_phlexcomponents/components/alert_dialog.rb +6 -6
- data/lib/shadcn_phlexcomponents/components/base.rb +2 -2
- data/lib/shadcn_phlexcomponents/components/combobox.rb +13 -13
- data/lib/shadcn_phlexcomponents/components/command.rb +13 -13
- data/lib/shadcn_phlexcomponents/components/date_picker.rb +18 -12
- data/lib/shadcn_phlexcomponents/components/date_range_picker.rb +7 -3
- data/lib/shadcn_phlexcomponents/components/dialog.rb +6 -6
- data/lib/shadcn_phlexcomponents/components/sheet.rb +7 -7
- data/lib/shadcn_phlexcomponents/components/toggle.rb +1 -1
- data/lib/shadcn_phlexcomponents/version.rb +1 -1
- metadata +2 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: bc485b4a5567a237dd094c0dd76b2c1457c57dec5f62fff98718b6b174e07da2
|
4
|
+
data.tar.gz: 816bda190d7fab68ae7b551165b1da2e5cc913fe1a16095fa1b5f966f43b6785
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 19ea1d9584e4d004d8ae4db402f3dea2dc423ad5d893075eff90222214ba6c3cf14e292521e47699c6e9c64718bee03861729f8d9a2ae3729f32f3c49cb36d1b
|
7
|
+
data.tar.gz: 818a134df559fb86fe46a4bb4d757786a4efe77ff31738c1f59f21f7315321a0f6cd5d5e1814bdbc279c096ceae58200d43ee940492edc0937eaf7f5de52ec15
|
@@ -1,107 +1,97 @@
|
|
1
|
-
import { Controller } from
|
2
|
-
import {
|
3
|
-
showContent,
|
4
|
-
hideContent,
|
5
|
-
getNextEnabledIndex,
|
6
|
-
getPreviousEnabledIndex,
|
7
|
-
} from "../utils";
|
1
|
+
import { Controller } from '@hotwired/stimulus';
|
2
|
+
import { showContent, hideContent, getNextEnabledIndex, getPreviousEnabledIndex, } from '../utils';
|
8
3
|
const AccordionController = class extends Controller {
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
}
|
16
|
-
contentTargetConnected(content) {
|
17
|
-
setTimeout(() => {
|
18
|
-
this.setContentHeight(content);
|
19
|
-
}, 100);
|
20
|
-
}
|
21
|
-
toggle(event) {
|
22
|
-
const trigger = event.currentTarget;
|
23
|
-
const item = this.itemTargets.find((item) => {
|
24
|
-
return item.contains(trigger);
|
25
|
-
});
|
26
|
-
if (!item) return;
|
27
|
-
const value = item.dataset.value;
|
28
|
-
const isOpen = this.openItemsValue.includes(value);
|
29
|
-
if (isOpen) {
|
30
|
-
this.openItemsValue = this.openItemsValue.filter((v) => v !== value);
|
31
|
-
} else {
|
32
|
-
if (this.multiple) {
|
33
|
-
this.openItemsValue = [...this.openItemsValue, value];
|
34
|
-
} else {
|
35
|
-
this.openItemsValue = [value];
|
36
|
-
}
|
4
|
+
// targets
|
5
|
+
static targets = ['item', 'trigger', 'content'];
|
6
|
+
// values
|
7
|
+
static values = { openItems: Array };
|
8
|
+
connect() {
|
9
|
+
this.multiple = this.element.dataset.multiple === 'true';
|
37
10
|
}
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
const focusableTriggers = this.triggerTargets.filter(
|
43
|
-
(trigger) => !trigger.disabled,
|
44
|
-
);
|
45
|
-
const index = focusableTriggers.indexOf(trigger);
|
46
|
-
let newIndex = 0;
|
47
|
-
if (key === "ArrowUp") {
|
48
|
-
newIndex = getPreviousEnabledIndex({
|
49
|
-
items: focusableTriggers,
|
50
|
-
currentIndex: index,
|
51
|
-
wrapAround: true,
|
52
|
-
});
|
53
|
-
} else {
|
54
|
-
newIndex = getNextEnabledIndex({
|
55
|
-
items: focusableTriggers,
|
56
|
-
currentIndex: index,
|
57
|
-
wrapAround: true,
|
58
|
-
});
|
11
|
+
contentTargetConnected(content) {
|
12
|
+
setTimeout(() => {
|
13
|
+
this.setContentHeight(content);
|
14
|
+
}, 100);
|
59
15
|
}
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
const itemValue = item.dataset.value;
|
65
|
-
const trigger = this.triggerTargets.find((trigger) =>
|
66
|
-
item.contains(trigger),
|
67
|
-
);
|
68
|
-
const content = this.contentTargets.find((content) =>
|
69
|
-
item.contains(content),
|
70
|
-
);
|
71
|
-
if (openItems.includes(itemValue)) {
|
72
|
-
showContent({
|
73
|
-
trigger,
|
74
|
-
content: content,
|
75
|
-
contentContainer: content,
|
16
|
+
toggle(event) {
|
17
|
+
const trigger = event.currentTarget;
|
18
|
+
const item = this.itemTargets.find((item) => {
|
19
|
+
return item.contains(trigger);
|
76
20
|
});
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
21
|
+
if (!item)
|
22
|
+
return;
|
23
|
+
const value = item.dataset.value;
|
24
|
+
const isOpen = this.openItemsValue.includes(value);
|
25
|
+
if (isOpen) {
|
26
|
+
this.openItemsValue = this.openItemsValue.filter((v) => v !== value);
|
27
|
+
}
|
28
|
+
else {
|
29
|
+
if (this.multiple) {
|
30
|
+
this.openItemsValue = [...this.openItemsValue, value];
|
31
|
+
}
|
32
|
+
else {
|
33
|
+
this.openItemsValue = [value];
|
34
|
+
}
|
35
|
+
}
|
36
|
+
}
|
37
|
+
focusTrigger(event) {
|
38
|
+
const trigger = event.currentTarget;
|
39
|
+
const key = event.key;
|
40
|
+
const focusableTriggers = this.triggerTargets.filter((trigger) => !trigger.disabled);
|
41
|
+
const index = focusableTriggers.indexOf(trigger);
|
42
|
+
let newIndex = 0;
|
43
|
+
if (key === 'ArrowUp') {
|
44
|
+
newIndex = getPreviousEnabledIndex({
|
45
|
+
items: focusableTriggers,
|
46
|
+
currentIndex: index,
|
47
|
+
wrapAround: true,
|
48
|
+
});
|
49
|
+
}
|
50
|
+
else {
|
51
|
+
newIndex = getNextEnabledIndex({
|
52
|
+
items: focusableTriggers,
|
53
|
+
currentIndex: index,
|
54
|
+
wrapAround: true,
|
55
|
+
});
|
56
|
+
}
|
57
|
+
focusableTriggers[newIndex].focus();
|
58
|
+
}
|
59
|
+
openItemsValueChanged(openItems) {
|
60
|
+
this.itemTargets.forEach((item) => {
|
61
|
+
const itemValue = item.dataset.value;
|
62
|
+
const trigger = this.triggerTargets.find((trigger) => item.contains(trigger));
|
63
|
+
const content = this.contentTargets.find((content) => item.contains(content));
|
64
|
+
if (openItems.includes(itemValue)) {
|
65
|
+
showContent({
|
66
|
+
trigger,
|
67
|
+
content: content,
|
68
|
+
contentContainer: content,
|
69
|
+
});
|
70
|
+
}
|
71
|
+
else {
|
72
|
+
hideContent({
|
73
|
+
trigger,
|
74
|
+
content: content,
|
75
|
+
contentContainer: content,
|
76
|
+
});
|
77
|
+
}
|
78
|
+
});
|
79
|
+
}
|
80
|
+
setContentHeight(element) {
|
81
|
+
const height = this.getContentHeight(element) || element.getBoundingClientRect().height;
|
82
|
+
element.style.setProperty('--radix-accordion-content-height', `${height}px`);
|
83
|
+
}
|
84
|
+
getContentHeight(el) {
|
85
|
+
const clone = el.cloneNode(true);
|
86
|
+
Object.assign(clone.style, {
|
87
|
+
display: 'block',
|
88
|
+
position: 'absolute',
|
89
|
+
visibility: 'hidden',
|
82
90
|
});
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
this.getContentHeight(element) || element.getBoundingClientRect().height;
|
89
|
-
element.style.setProperty(
|
90
|
-
"--radix-accordion-content-height",
|
91
|
-
`${height}px`,
|
92
|
-
);
|
93
|
-
}
|
94
|
-
getContentHeight(el) {
|
95
|
-
const clone = el.cloneNode(true);
|
96
|
-
Object.assign(clone.style, {
|
97
|
-
display: "block",
|
98
|
-
position: "absolute",
|
99
|
-
visibility: "hidden",
|
100
|
-
});
|
101
|
-
document.body.appendChild(clone);
|
102
|
-
const height = clone.getBoundingClientRect().height;
|
103
|
-
document.body.removeChild(clone);
|
104
|
-
return height;
|
105
|
-
}
|
91
|
+
document.body.appendChild(clone);
|
92
|
+
const height = clone.getBoundingClientRect().height;
|
93
|
+
document.body.removeChild(clone);
|
94
|
+
return height;
|
95
|
+
}
|
106
96
|
};
|
107
97
|
export { AccordionController };
|
@@ -1,7 +1,7 @@
|
|
1
|
-
import { DialogController } from
|
1
|
+
import { DialogController } from './dialog_controller';
|
2
2
|
const AlertDialogController = class extends DialogController {
|
3
|
-
|
4
|
-
|
5
|
-
|
3
|
+
onDOMClick() {
|
4
|
+
return;
|
5
|
+
}
|
6
6
|
};
|
7
7
|
export { AlertDialogController };
|
@@ -1,14 +1,14 @@
|
|
1
|
-
import { Controller } from
|
1
|
+
import { Controller } from '@hotwired/stimulus';
|
2
2
|
const AvatarController = class extends Controller {
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
3
|
+
// targets
|
4
|
+
static targets = ['image', 'fallback'];
|
5
|
+
connect() {
|
6
|
+
this.imageTarget.onerror = () => {
|
7
|
+
if (this.hasFallbackTarget) {
|
8
|
+
this.fallbackTarget.classList.remove('hidden');
|
9
|
+
}
|
10
|
+
this.imageTarget.classList.add('hidden');
|
11
|
+
};
|
12
|
+
}
|
13
13
|
};
|
14
14
|
export { AvatarController };
|
@@ -1,29 +1,30 @@
|
|
1
|
-
import { Controller } from
|
1
|
+
import { Controller } from '@hotwired/stimulus';
|
2
2
|
const CheckboxController = class extends Controller {
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
3
|
+
// targets
|
4
|
+
static targets = ['input', 'indicator'];
|
5
|
+
// values
|
6
|
+
static values = {
|
7
|
+
isChecked: Boolean,
|
8
|
+
};
|
9
|
+
toggle() {
|
10
|
+
this.isCheckedValue = !this.isCheckedValue;
|
11
|
+
}
|
12
|
+
preventDefault(event) {
|
13
|
+
event.preventDefault();
|
14
|
+
}
|
15
|
+
isCheckedValueChanged(isChecked) {
|
16
|
+
if (isChecked) {
|
17
|
+
this.element.ariaChecked = 'true';
|
18
|
+
this.element.dataset.state = 'checked';
|
19
|
+
this.inputTarget.checked = true;
|
20
|
+
this.indicatorTarget.classList.remove('hidden');
|
21
|
+
}
|
22
|
+
else {
|
23
|
+
this.element.ariaChecked = 'false';
|
24
|
+
this.element.dataset.state = 'unchecked';
|
25
|
+
this.inputTarget.checked = false;
|
26
|
+
this.indicatorTarget.classList.add('hidden');
|
27
|
+
}
|
26
28
|
}
|
27
|
-
}
|
28
29
|
};
|
29
30
|
export { CheckboxController };
|
@@ -1,39 +1,41 @@
|
|
1
|
-
import { Controller } from
|
2
|
-
import { hideContent, showContent } from
|
1
|
+
import { Controller } from '@hotwired/stimulus';
|
2
|
+
import { hideContent, showContent } from '../utils';
|
3
3
|
const CollapsibleController = class extends Controller {
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
4
|
+
// targets
|
5
|
+
static targets = ['trigger', 'content'];
|
6
|
+
// values
|
7
|
+
static values = {
|
8
|
+
isOpen: Boolean,
|
9
|
+
};
|
10
|
+
toggle() {
|
11
|
+
if (this.isOpenValue) {
|
12
|
+
this.close();
|
13
|
+
}
|
14
|
+
else {
|
15
|
+
this.open();
|
16
|
+
}
|
15
17
|
}
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
18
|
+
open() {
|
19
|
+
this.isOpenValue = true;
|
20
|
+
}
|
21
|
+
close() {
|
22
|
+
this.isOpenValue = false;
|
23
|
+
}
|
24
|
+
isOpenValueChanged(isOpen) {
|
25
|
+
if (isOpen) {
|
26
|
+
showContent({
|
27
|
+
trigger: this.triggerTarget,
|
28
|
+
content: this.contentTarget,
|
29
|
+
contentContainer: this.contentTarget,
|
30
|
+
});
|
31
|
+
}
|
32
|
+
else {
|
33
|
+
hideContent({
|
34
|
+
trigger: this.triggerTarget,
|
35
|
+
content: this.contentTarget,
|
36
|
+
contentContainer: this.contentTarget,
|
37
|
+
});
|
38
|
+
}
|
36
39
|
}
|
37
|
-
}
|
38
40
|
};
|
39
41
|
export { CollapsibleController };
|