wilday_ui 0.6.0 → 0.7.0
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/assets/builds/wilday_ui/index.js +223 -0
- data/app/assets/builds/wilday_ui/index.js.map +3 -3
- data/app/assets/stylesheets/wilday_ui/components/button/features/clipboard.css +108 -0
- data/app/assets/stylesheets/wilday_ui/components/button/features/confirmation.css +136 -0
- data/app/assets/stylesheets/wilday_ui/components/button/features/variants.css +5 -0
- data/app/assets/stylesheets/wilday_ui/components/button/index.css +3 -0
- data/app/assets/stylesheets/wilday_ui/tokens/colors.css +109 -0
- data/app/helpers/wilday_ui/application_helper.rb +1 -0
- data/app/helpers/wilday_ui/components/button_helper.rb +120 -2
- data/app/helpers/wilday_ui/theme_helper.rb +19 -0
- data/app/javascript/wilday_ui/controllers/clipboard_controller.js +76 -0
- data/app/javascript/wilday_ui/controllers/confirmation_controller.js +216 -0
- data/app/javascript/wilday_ui/controllers/index.js +4 -1
- data/lib/wilday_ui/version.rb +1 -1
- metadata +8 -2
@@ -0,0 +1,216 @@
|
|
1
|
+
import { Controller } from "@hotwired/stimulus";
|
2
|
+
|
3
|
+
export default class extends Controller {
|
4
|
+
static targets = ["dialog", "confirmButton", "cancelButton"];
|
5
|
+
static values = {
|
6
|
+
title: String,
|
7
|
+
message: String,
|
8
|
+
iconColor: String,
|
9
|
+
confirmText: String,
|
10
|
+
cancelText: String,
|
11
|
+
confirmStyles: String,
|
12
|
+
cancelStyles: String,
|
13
|
+
};
|
14
|
+
|
15
|
+
// Store the original event to be used later
|
16
|
+
originalEvent = null;
|
17
|
+
|
18
|
+
connect() {
|
19
|
+
// Create and append dialog if it doesn't exist
|
20
|
+
if (!this.hasDialogTarget) {
|
21
|
+
this.element.insertAdjacentHTML("beforeend", this.dialogHTML);
|
22
|
+
}
|
23
|
+
}
|
24
|
+
|
25
|
+
disconnect() {
|
26
|
+
this.originalEvent = null;
|
27
|
+
this.isConfirmed = false;
|
28
|
+
}
|
29
|
+
|
30
|
+
showDialog(event) {
|
31
|
+
// Don't show dialog if already confirmed
|
32
|
+
if (this.isConfirmed) {
|
33
|
+
this.isConfirmed = false;
|
34
|
+
return;
|
35
|
+
}
|
36
|
+
|
37
|
+
// console.log("Show dialog triggered", event);
|
38
|
+
event.preventDefault();
|
39
|
+
// Store the original event and element
|
40
|
+
this.originalEvent = {
|
41
|
+
type: event.type,
|
42
|
+
element: event.currentTarget,
|
43
|
+
ctrlKey: event.ctrlKey,
|
44
|
+
metaKey: event.metaKey,
|
45
|
+
};
|
46
|
+
// console.log("Original event stored:", this.originalEvent);
|
47
|
+
this.dialogTarget.showModal();
|
48
|
+
this.focusConfirmButton();
|
49
|
+
}
|
50
|
+
|
51
|
+
confirm(event) {
|
52
|
+
// console.log("Confirm clicked");
|
53
|
+
event.preventDefault();
|
54
|
+
this.dialogTarget.close();
|
55
|
+
|
56
|
+
if (this.originalEvent?.element) {
|
57
|
+
const element = this.originalEvent.element;
|
58
|
+
// console.log("Processing element:", element);
|
59
|
+
|
60
|
+
// Let Turbo handle its own elements
|
61
|
+
if (
|
62
|
+
this.hasTurbo &&
|
63
|
+
!element.hasAttribute("data-turbo") &&
|
64
|
+
!element.hasAttribute("data-turbo-method")
|
65
|
+
) {
|
66
|
+
this.resumeOriginalEvent();
|
67
|
+
return;
|
68
|
+
}
|
69
|
+
|
70
|
+
// Dispatch standard DOM custom event
|
71
|
+
const confirmEvent = new CustomEvent("confirm", {
|
72
|
+
bubbles: true,
|
73
|
+
cancelable: true,
|
74
|
+
detail: {
|
75
|
+
element: element,
|
76
|
+
originalEvent: this.originalEvent,
|
77
|
+
},
|
78
|
+
});
|
79
|
+
|
80
|
+
const wasHandled = !element.dispatchEvent(confirmEvent);
|
81
|
+
if (wasHandled) return;
|
82
|
+
|
83
|
+
// If not handled by custom event, resume original event
|
84
|
+
this.resumeOriginalEvent();
|
85
|
+
}
|
86
|
+
}
|
87
|
+
|
88
|
+
resumeOriginalEvent() {
|
89
|
+
if (!this.originalEvent) return;
|
90
|
+
|
91
|
+
const element = this.originalEvent.element;
|
92
|
+
// console.log("Resuming original event for:", element);
|
93
|
+
|
94
|
+
// Set flag before triggering the event
|
95
|
+
this.isConfirmed = true;
|
96
|
+
|
97
|
+
// Handle form submissions
|
98
|
+
if (element.closest("form")) {
|
99
|
+
const form = element.closest("form");
|
100
|
+
// console.log("Submitting form:", form);
|
101
|
+
const submitEvent = new Event("submit", {
|
102
|
+
bubbles: true,
|
103
|
+
cancelable: true,
|
104
|
+
});
|
105
|
+
form.dispatchEvent(submitEvent); // This will trigger the event listener
|
106
|
+
this.originalEvent = null;
|
107
|
+
return;
|
108
|
+
}
|
109
|
+
|
110
|
+
// Handle links
|
111
|
+
if (element.tagName === "A" || element.hasAttribute("href")) {
|
112
|
+
// console.log("Processing link click");
|
113
|
+
const click = new MouseEvent("click", {
|
114
|
+
bubbles: true,
|
115
|
+
cancelable: true,
|
116
|
+
ctrlKey: this.originalEvent.ctrlKey,
|
117
|
+
metaKey: this.originalEvent.metaKey,
|
118
|
+
});
|
119
|
+
element.dispatchEvent(click);
|
120
|
+
this.originalEvent = null;
|
121
|
+
return;
|
122
|
+
}
|
123
|
+
|
124
|
+
// Handle regular button click
|
125
|
+
if (
|
126
|
+
!element.closest("form") &&
|
127
|
+
!(element.tagName === "A" || element.hasAttribute("href"))
|
128
|
+
) {
|
129
|
+
// console.log("Processing button click");
|
130
|
+
element.click();
|
131
|
+
this.originalEvent = null;
|
132
|
+
return;
|
133
|
+
}
|
134
|
+
}
|
135
|
+
|
136
|
+
cancel(event) {
|
137
|
+
event.preventDefault();
|
138
|
+
this.closeDialog();
|
139
|
+
}
|
140
|
+
|
141
|
+
closeDialog() {
|
142
|
+
this.dialogTarget.close();
|
143
|
+
this.originalEvent = null;
|
144
|
+
}
|
145
|
+
|
146
|
+
handleKeydown(event) {
|
147
|
+
if (event.key === "Escape") {
|
148
|
+
this.cancel(event);
|
149
|
+
}
|
150
|
+
}
|
151
|
+
|
152
|
+
handleClickOutside(event) {
|
153
|
+
if (event.target === this.dialogTarget) {
|
154
|
+
this.cancel(event);
|
155
|
+
}
|
156
|
+
}
|
157
|
+
|
158
|
+
focusConfirmButton() {
|
159
|
+
this.confirmButtonTarget.focus();
|
160
|
+
}
|
161
|
+
|
162
|
+
get hasTurbo() {
|
163
|
+
return typeof Turbo !== "undefined";
|
164
|
+
}
|
165
|
+
|
166
|
+
get dialogHTML() {
|
167
|
+
return `
|
168
|
+
<dialog class="w-button-confirmation-dialog"
|
169
|
+
data-confirmation-target="dialog"
|
170
|
+
data-action="click->confirmation#handleClickOutside keydown->confirmation#handleKeydown">
|
171
|
+
<div class="w-button-confirmation-dialog-content">
|
172
|
+
<div class="w-button-confirmation-dialog-icon ${this.iconColorValue}">
|
173
|
+
${this.iconHTML}
|
174
|
+
</div>
|
175
|
+
|
176
|
+
<h3 class="w-button-confirmation-dialog-title">
|
177
|
+
${this.titleValue}
|
178
|
+
</h3>
|
179
|
+
|
180
|
+
<div class="w-button-confirmation-dialog-message">
|
181
|
+
${this.messageValue}
|
182
|
+
</div>
|
183
|
+
|
184
|
+
<div class="w-button-confirmation-dialog-actions">
|
185
|
+
<button data-confirmation-target="cancelButton"
|
186
|
+
data-action="click->confirmation#cancel"
|
187
|
+
class="w-button w-button-subtle w-button-medium w-button-rounded"
|
188
|
+
style="${this.cancelStylesValue}">
|
189
|
+
${this.cancelTextValue}
|
190
|
+
</button>
|
191
|
+
|
192
|
+
<button data-confirmation-target="confirmButton"
|
193
|
+
data-action="click->confirmation#confirm"
|
194
|
+
class="w-button w-button-solid w-button-medium w-button-rounded"
|
195
|
+
style="${this.confirmStylesValue}">
|
196
|
+
${this.confirmTextValue}
|
197
|
+
</button>
|
198
|
+
</div>
|
199
|
+
</div>
|
200
|
+
</dialog>
|
201
|
+
`;
|
202
|
+
}
|
203
|
+
|
204
|
+
get iconHTML() {
|
205
|
+
const icons = {
|
206
|
+
info: '<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>',
|
207
|
+
success:
|
208
|
+
'<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>',
|
209
|
+
warning:
|
210
|
+
'<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>',
|
211
|
+
danger:
|
212
|
+
'<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>',
|
213
|
+
};
|
214
|
+
return icons[this.iconColorValue] || icons.info;
|
215
|
+
}
|
216
|
+
}
|
@@ -1,7 +1,8 @@
|
|
1
1
|
import { Application } from "@hotwired/stimulus";
|
2
2
|
import ButtonController from "./button_controller";
|
3
3
|
import DropdownController from "./dropdown_controller";
|
4
|
-
|
4
|
+
import ClipboardController from "./clipboard_controller";
|
5
|
+
import ConfirmationController from "./confirmation_controller";
|
5
6
|
// Initialize Stimulus
|
6
7
|
const application = Application.start();
|
7
8
|
window.Stimulus = application;
|
@@ -9,6 +10,8 @@ window.Stimulus = application;
|
|
9
10
|
// Register the button controller
|
10
11
|
application.register("button", ButtonController);
|
11
12
|
application.register("dropdown", DropdownController);
|
13
|
+
application.register("clipboard", ClipboardController);
|
14
|
+
application.register("confirmation", ConfirmationController);
|
12
15
|
// Debug check to ensure Stimulus is loaded
|
13
16
|
// if (window.Stimulus) {
|
14
17
|
// console.log("✅ Stimulus is loaded and initialized.");
|
data/lib/wilday_ui/version.rb
CHANGED
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: wilday_ui
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 0.7.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- davidwinalda
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2024-12-
|
11
|
+
date: 2024-12-21 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: rails
|
@@ -45,6 +45,8 @@ files:
|
|
45
45
|
- app/assets/stylesheets/wilday_ui/application.css
|
46
46
|
- app/assets/stylesheets/wilday_ui/button.css
|
47
47
|
- app/assets/stylesheets/wilday_ui/components/button/base.css
|
48
|
+
- app/assets/stylesheets/wilday_ui/components/button/features/clipboard.css
|
49
|
+
- app/assets/stylesheets/wilday_ui/components/button/features/confirmation.css
|
48
50
|
- app/assets/stylesheets/wilday_ui/components/button/features/dropdown.css
|
49
51
|
- app/assets/stylesheets/wilday_ui/components/button/features/gradients.css
|
50
52
|
- app/assets/stylesheets/wilday_ui/components/button/features/icons.css
|
@@ -54,12 +56,16 @@ files:
|
|
54
56
|
- app/assets/stylesheets/wilday_ui/components/button/features/sizes.css
|
55
57
|
- app/assets/stylesheets/wilday_ui/components/button/features/variants.css
|
56
58
|
- app/assets/stylesheets/wilday_ui/components/button/index.css
|
59
|
+
- app/assets/stylesheets/wilday_ui/tokens/colors.css
|
57
60
|
- app/controllers/wilday_ui/application_controller.rb
|
58
61
|
- app/helpers/wilday_ui/application_helper.rb
|
59
62
|
- app/helpers/wilday_ui/components/button_helper.rb
|
60
63
|
- app/helpers/wilday_ui/javascript_helper.rb
|
64
|
+
- app/helpers/wilday_ui/theme_helper.rb
|
61
65
|
- app/javascript/wilday_ui/components/button.js
|
62
66
|
- app/javascript/wilday_ui/controllers/button_controller.js
|
67
|
+
- app/javascript/wilday_ui/controllers/clipboard_controller.js
|
68
|
+
- app/javascript/wilday_ui/controllers/confirmation_controller.js
|
63
69
|
- app/javascript/wilday_ui/controllers/dropdown_controller.js
|
64
70
|
- app/javascript/wilday_ui/controllers/index.js
|
65
71
|
- app/javascript/wilday_ui/index.js
|