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.
@@ -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.");
@@ -1,3 +1,3 @@
1
1
  module WildayUi
2
- VERSION = "0.6.0"
2
+ VERSION = "0.7.0"
3
3
  end
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.6.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-18 00:00:00.000000000 Z
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