odt-ui-rails 2.2.5 → 2.2.7

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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: fcba58b390c748340a5bfd2d50e9f54c90684e481c5973801d6747a5dd5aa646
4
- data.tar.gz: f87d24815c3a9748d1afc89bb11687f655d2022890d9ca53f0589575e25ab20e
3
+ metadata.gz: 576f435740a5fc583b9244f47adc475748a7843658b76764b443a5f7caa5b917
4
+ data.tar.gz: 21ad6994530162a7306247be749cbf1b9d967f641a34a2918d14e55c2b86900e
5
5
  SHA512:
6
- metadata.gz: 89b0db215f2b52c3e046d0b16ea1bd9098ff4f896f4e19f31d4d1c078173444e9143da6497d491baba8ce6761fc0c419e3d4d2251eb76bad0dfc157427595c17
7
- data.tar.gz: 607db973d0fea09189079c15e88c1810e45bed02f20c3b9bb6577521cc0c09776e5fac940a3f3c866de85f6d16f401553b07826ea12c486f91bedf3368787789
6
+ metadata.gz: b5560e963ac612963700a5085121f5cc3148548d65f2bb4537932870174e3accf015c1bb29f36903e1ee1ac4ff8f04db138cd48cdeb490ed69faa9dd55adc4ca
7
+ data.tar.gz: 969d280cbc4b2ab61ffbb68b3d935929a3effd21fac519521c2ba80e82a1f401aa127567f1d6357caa8471e4728bfd27895120f631b322b4bc12595347e04565
data/README.md CHANGED
@@ -58,7 +58,7 @@
58
58
  Add the gem to your application's `Gemfile`:
59
59
 
60
60
  ```ruby
61
- gem "odt-ui-rails", "~> 2.2.5"
61
+ gem "odt-ui-rails", "~> 2.2.6"
62
62
  ```
63
63
 
64
64
  Install dependencies:
@@ -74,6 +74,7 @@ bin/rails g odt:install
74
74
  ```
75
75
 
76
76
  The generator will:
77
+
77
78
  1. Inject `<%= stylesheet_link_tag "odt_ui", "data-turbo-track": "reload" %>` into your `app/views/layouts/application.html.erb`.
78
79
  2. Configure Tailwind CSS v4 `@theme` (`odt_theme.css`) if Tailwind is detected.
79
80
  3. Copy `sig/odt_ui.rbs` for Ruby LSP IDE autocompletion.
@@ -104,7 +105,7 @@ If using Tailwind CSS v4 and you want ODT design token utilities (`bg-primary-50
104
105
  @import "./odt_theme.css";
105
106
  ```
106
107
 
107
- *(Note: `odt_theme.css` is placed in your tailwind assets folder by `bin/rails g odt:install`)*
108
+ _(Note: `odt_theme.css` is placed in your tailwind assets folder by `bin/rails g odt:install`)_
108
109
 
109
110
  ---
110
111
 
@@ -2,32 +2,32 @@
2
2
  /* ==========================================================================
3
3
  * Primary Brand Colors (ODT)
4
4
  * ========================================================================== */
5
- --color-primary-0: hsl(240 78.3% 100%);
6
- --color-primary-50: hsl(240 78.3% 95%);
7
- --color-primary-100: hsl(240 78.3% 90%);
8
- --color-primary-200: hsl(240 78.3% 85%);
9
- --color-primary-300: hsl(240 78.3% 80%);
10
- --color-primary-400: hsl(240 78.3% 75%);
11
- --color-primary-500: hsl(240 78.3% 65%);
12
- --color-primary-600: hsl(240 78.3% 60%);
13
- --color-primary-700: hsl(240 78.3% 55%);
14
- --color-primary-800: hsl(240 78.3% 45%);
15
- --color-primary-900: hsl(240 78.3% 34.3%);
5
+ --color-primary-0: hsl(0 0% 100%);
6
+ --color-primary-50: hsl(222.5 100% 96.2%);
7
+ --color-primary-100: hsl(222.6 100% 93%);
8
+ --color-primary-200: hsl(222.8 75.9% 85.4%);
9
+ --color-primary-300: hsl(223.3 68.7% 76.7%);
10
+ --color-primary-400: hsl(224 63.5% 67.6%);
11
+ --color-primary-500: hsl(225.1 58.6% 58.4%);
12
+ --color-primary-600: hsl(226.9 53.8% 50.1%);
13
+ --color-primary-700: hsl(229.7 65% 43%);
14
+ --color-primary-800: hsl(234.2 73.9% 37.4%);
15
+ --color-primary-900: hsl(240 78% 34%);
16
16
 
17
17
  /* ==========================================================================
18
18
  * Secondary Brand Colors (ODT)
19
19
  * ========================================================================== */
20
- --color-secondary-0: hsl(47 100% 100%);
21
- --color-secondary-50: hsl(47 100% 95%);
22
- --color-secondary-100: hsl(47 100% 85%);
23
- --color-secondary-200: hsl(47 100% 80%);
24
- --color-secondary-300: hsl(47 100% 75%);
25
- --color-secondary-400: hsl(47 100% 70%);
26
- --color-secondary-500: hsl(47 100% 65%);
27
- --color-secondary-600: hsl(47 100% 60%);
28
- --color-secondary-700: hsl(47 100% 55%);
29
- --color-secondary-800: hsl(47 100% 50%);
30
- --color-secondary-900: hsl(47 100% 45%);
20
+ --color-secondary-0: hsl(0 0% 100%);
21
+ --color-secondary-50: hsl(47 100% 95.6%);
22
+ --color-secondary-100: hsl(47 100% 93.1%);
23
+ --color-secondary-200: hsl(47 100% 87.8%);
24
+ --color-secondary-300: hsl(47 100% 81.6%);
25
+ --color-secondary-400: hsl(47 100% 75.2%);
26
+ --color-secondary-500: hsl(47 100% 68.6%);
27
+ --color-secondary-600: hsl(47 100% 62.6%);
28
+ --color-secondary-700: hsl(47 100% 57.3%);
29
+ --color-secondary-800: hsl(47 100% 52.9%);
30
+ --color-secondary-900: hsl(47 100% 50%);
31
31
 
32
32
  /* ==========================================================================
33
33
  * Neutral Palette
@@ -284,32 +284,32 @@
284
284
  /* ==========================================================================
285
285
  * Primary Brand Colors (Dark Scale)
286
286
  * ========================================================================== */
287
- --color-primary-0: hsl(240 78.3% 10%);
288
- --color-primary-50: hsla(240, 78.3%, 65%, 0.18);
289
- --color-primary-100: hsla(240, 78.3%, 65%, 0.28);
290
- --color-primary-200: hsl(240 78.3% 34.3%);
291
- --color-primary-300: hsl(240 78.3% 45%);
292
- --color-primary-400: hsl(240 78.3% 55%);
293
- --color-primary-500: hsl(240 78.3% 65%);
294
- --color-primary-600: hsl(240 78.3% 72%);
295
- --color-primary-700: hsl(240 78.3% 80%);
296
- --color-primary-800: hsl(240 78.3% 88%);
297
- --color-primary-900: hsl(240 78.3% 96%);
287
+ --color-primary-0: hsl(240 78% 10%);
288
+ --color-primary-50: hsla(225.1, 58.6%, 58.4%, 0.18);
289
+ --color-primary-100: hsla(225.1, 58.6%, 58.4%, 0.28);
290
+ --color-primary-200: hsl(240 78% 34%);
291
+ --color-primary-300: hsl(234.2 73.9% 37.4%);
292
+ --color-primary-400: hsl(229.7 65% 43%);
293
+ --color-primary-500: hsl(226.9 53.8% 50.1%);
294
+ --color-primary-600: hsl(225.1 58.6% 58.4%);
295
+ --color-primary-700: hsl(224 63.5% 67.6%);
296
+ --color-primary-800: hsl(223.3 68.7% 76.7%);
297
+ --color-primary-900: hsl(222.5 100% 96.2%);
298
298
 
299
299
  /* ==========================================================================
300
300
  * Secondary Brand Colors (Dark Scale)
301
301
  * ========================================================================== */
302
302
  --color-secondary-0: hsl(47 100% 10%);
303
- --color-secondary-50: hsla(47, 100%, 60%, 0.16);
304
- --color-secondary-100: hsla(47, 100%, 60%, 0.25);
305
- --color-secondary-200: hsl(47 100% 30%);
306
- --color-secondary-300: hsl(47 100% 40%);
307
- --color-secondary-400: hsl(47 100% 50%);
308
- --color-secondary-500: hsl(47 100% 60%);
309
- --color-secondary-600: hsl(47 100% 68%);
310
- --color-secondary-700: hsl(47 100% 75%);
311
- --color-secondary-800: hsl(47 100% 82%);
312
- --color-secondary-900: hsl(47 100% 90%);
303
+ --color-secondary-50: hsla(47, 100%, 68.6%, 0.16);
304
+ --color-secondary-100: hsla(47, 100%, 68.6%, 0.25);
305
+ --color-secondary-200: hsl(47 100% 50%);
306
+ --color-secondary-300: hsl(47 100% 52.9%);
307
+ --color-secondary-400: hsl(47 100% 57.3%);
308
+ --color-secondary-500: hsl(47 100% 62.6%);
309
+ --color-secondary-600: hsl(47 100% 68.6%);
310
+ --color-secondary-700: hsl(47 100% 75.2%);
311
+ --color-secondary-800: hsl(47 100% 81.6%);
312
+ --color-secondary-900: hsl(47 100% 95.6%);
313
313
 
314
314
  /* ==========================================================================
315
315
  * Neutral Palette (Dark Scale)
@@ -414,7 +414,7 @@
414
414
  --gradient-hero-vibrant: var(--gradient-vibrant);
415
415
 
416
416
  /* Card surface gradients */
417
- --gradient-card: linear-gradient(to bottom, hsla(240, 78.3%, 65%, 0.25), var(--color-neutral-50));
417
+ --gradient-card: linear-gradient(to bottom, hsla(225.1, 58.6%, 58.4%, 0.25), var(--color-neutral-50));
418
418
  --gradient-primary-to-white: linear-gradient(to bottom, var(--color-primary-50), var(--color-surface));
419
419
  --gradient-secondary-to-white: linear-gradient(to bottom, var(--color-secondary-50), var(--color-surface));
420
420
  --gradient-primary-h: linear-gradient(to right, var(--color-primary-50), var(--color-surface));
@@ -7,32 +7,32 @@
7
7
  /* ==========================================================================
8
8
  * Primary Brand Colors (ODT)
9
9
  * ========================================================================== */
10
- --color-primary-0: hsl(240 78.3% 100%);
11
- --color-primary-50: hsl(240 78.3% 95%);
12
- --color-primary-100: hsl(240 78.3% 90%);
13
- --color-primary-200: hsl(240 78.3% 85%);
14
- --color-primary-300: hsl(240 78.3% 80%);
15
- --color-primary-400: hsl(240 78.3% 75%);
16
- --color-primary-500: hsl(240 78.3% 65%);
17
- --color-primary-600: hsl(240 78.3% 60%);
18
- --color-primary-700: hsl(240 78.3% 55%);
19
- --color-primary-800: hsl(240 78.3% 45%);
20
- --color-primary-900: hsl(240 78.3% 34.3%);
10
+ --color-primary-0: hsl(0 0% 100%);
11
+ --color-primary-50: hsl(222.5 100% 96.2%);
12
+ --color-primary-100: hsl(222.6 100% 93%);
13
+ --color-primary-200: hsl(222.8 75.9% 85.4%);
14
+ --color-primary-300: hsl(223.3 68.7% 76.7%);
15
+ --color-primary-400: hsl(224 63.5% 67.6%);
16
+ --color-primary-500: hsl(225.1 58.6% 58.4%);
17
+ --color-primary-600: hsl(226.9 53.8% 50.1%);
18
+ --color-primary-700: hsl(229.7 65% 43%);
19
+ --color-primary-800: hsl(234.2 73.9% 37.4%);
20
+ --color-primary-900: hsl(240 78% 34%);
21
21
 
22
22
  /* ==========================================================================
23
23
  * Secondary Brand Colors (ODT)
24
24
  * ========================================================================== */
25
- --color-secondary-0: hsl(47 100% 100%);
26
- --color-secondary-50: hsl(47 100% 95%);
27
- --color-secondary-100: hsl(47 100% 85%);
28
- --color-secondary-200: hsl(47 100% 80%);
29
- --color-secondary-300: hsl(47 100% 75%);
30
- --color-secondary-400: hsl(47 100% 70%);
31
- --color-secondary-500: hsl(47 100% 65%);
32
- --color-secondary-600: hsl(47 100% 60%);
33
- --color-secondary-700: hsl(47 100% 55%);
34
- --color-secondary-800: hsl(47 100% 50%);
35
- --color-secondary-900: hsl(47 100% 45%);
25
+ --color-secondary-0: hsl(0 0% 100%);
26
+ --color-secondary-50: hsl(47 100% 95.6%);
27
+ --color-secondary-100: hsl(47 100% 93.1%);
28
+ --color-secondary-200: hsl(47 100% 87.8%);
29
+ --color-secondary-300: hsl(47 100% 81.6%);
30
+ --color-secondary-400: hsl(47 100% 75.2%);
31
+ --color-secondary-500: hsl(47 100% 68.6%);
32
+ --color-secondary-600: hsl(47 100% 62.6%);
33
+ --color-secondary-700: hsl(47 100% 57.3%);
34
+ --color-secondary-800: hsl(47 100% 52.9%);
35
+ --color-secondary-900: hsl(47 100% 50%);
36
36
 
37
37
  /* ==========================================================================
38
38
  * Neutral Palette
@@ -289,32 +289,32 @@
289
289
  /* ==========================================================================
290
290
  * Primary Brand Colors (Dark Scale)
291
291
  * ========================================================================== */
292
- --color-primary-0: hsl(240 78.3% 10%);
293
- --color-primary-50: hsla(240, 78.3%, 65%, 0.18);
294
- --color-primary-100: hsla(240, 78.3%, 65%, 0.28);
295
- --color-primary-200: hsl(240 78.3% 34.3%);
296
- --color-primary-300: hsl(240 78.3% 45%);
297
- --color-primary-400: hsl(240 78.3% 55%);
298
- --color-primary-500: hsl(240 78.3% 65%);
299
- --color-primary-600: hsl(240 78.3% 72%);
300
- --color-primary-700: hsl(240 78.3% 80%);
301
- --color-primary-800: hsl(240 78.3% 88%);
302
- --color-primary-900: hsl(240 78.3% 96%);
292
+ --color-primary-0: hsl(240 78% 10%);
293
+ --color-primary-50: hsla(225.1, 58.6%, 58.4%, 0.18);
294
+ --color-primary-100: hsla(225.1, 58.6%, 58.4%, 0.28);
295
+ --color-primary-200: hsl(240 78% 34%);
296
+ --color-primary-300: hsl(234.2 73.9% 37.4%);
297
+ --color-primary-400: hsl(229.7 65% 43%);
298
+ --color-primary-500: hsl(226.9 53.8% 50.1%);
299
+ --color-primary-600: hsl(225.1 58.6% 58.4%);
300
+ --color-primary-700: hsl(224 63.5% 67.6%);
301
+ --color-primary-800: hsl(223.3 68.7% 76.7%);
302
+ --color-primary-900: hsl(222.5 100% 96.2%);
303
303
 
304
304
  /* ==========================================================================
305
305
  * Secondary Brand Colors (Dark Scale)
306
306
  * ========================================================================== */
307
307
  --color-secondary-0: hsl(47 100% 10%);
308
- --color-secondary-50: hsla(47, 100%, 60%, 0.16);
309
- --color-secondary-100: hsla(47, 100%, 60%, 0.25);
310
- --color-secondary-200: hsl(47 100% 30%);
311
- --color-secondary-300: hsl(47 100% 40%);
312
- --color-secondary-400: hsl(47 100% 50%);
313
- --color-secondary-500: hsl(47 100% 60%);
314
- --color-secondary-600: hsl(47 100% 68%);
315
- --color-secondary-700: hsl(47 100% 75%);
316
- --color-secondary-800: hsl(47 100% 82%);
317
- --color-secondary-900: hsl(47 100% 90%);
308
+ --color-secondary-50: hsla(47, 100%, 68.6%, 0.16);
309
+ --color-secondary-100: hsla(47, 100%, 68.6%, 0.25);
310
+ --color-secondary-200: hsl(47 100% 50%);
311
+ --color-secondary-300: hsl(47 100% 52.9%);
312
+ --color-secondary-400: hsl(47 100% 57.3%);
313
+ --color-secondary-500: hsl(47 100% 62.6%);
314
+ --color-secondary-600: hsl(47 100% 68.6%);
315
+ --color-secondary-700: hsl(47 100% 75.2%);
316
+ --color-secondary-800: hsl(47 100% 81.6%);
317
+ --color-secondary-900: hsl(47 100% 95.6%);
318
318
 
319
319
  /* ==========================================================================
320
320
  * Neutral Palette (Dark Scale)
@@ -419,7 +419,7 @@
419
419
  --gradient-hero-vibrant: var(--gradient-vibrant);
420
420
 
421
421
  /* Card surface gradients */
422
- --gradient-card: linear-gradient(to bottom, hsla(240, 78.3%, 65%, 0.25), var(--color-neutral-50));
422
+ --gradient-card: linear-gradient(to bottom, hsla(225.1, 58.6%, 58.4%, 0.25), var(--color-neutral-50));
423
423
  --gradient-primary-to-white: linear-gradient(to bottom, var(--color-primary-50), var(--color-surface));
424
424
  --gradient-secondary-to-white: linear-gradient(to bottom, var(--color-secondary-50), var(--color-surface));
425
425
  --gradient-primary-h: linear-gradient(to right, var(--color-primary-50), var(--color-surface));
@@ -12,6 +12,29 @@ export default class extends Controller {
12
12
  this.mutationObserver = new MutationObserver(() => this.handleMutations())
13
13
  this.mutationObserver.observe(this.element, { childList: true })
14
14
  this.handleMutations()
15
+
16
+ this.boundTriggerHandler = (event) => {
17
+ const trigger = event.target.closest("[data-odt-toast-message], [data-odt-toast-title]")
18
+ if (trigger) {
19
+ event.preventDefault()
20
+ this.show({
21
+ title: trigger.dataset.odtToastTitle,
22
+ message: trigger.dataset.odtToastMessage,
23
+ type: trigger.dataset.odtToastType || "default",
24
+ variant: trigger.dataset.odtToastVariant || "elevated",
25
+ duration: Number(trigger.dataset.odtToastDuration) || 4000
26
+ })
27
+ }
28
+ }
29
+ document.addEventListener("click", this.boundTriggerHandler)
30
+
31
+ window.odtToast = {
32
+ show: (options) => this.show(options),
33
+ success: (title, message) => this.show({ title, message, type: "success" }),
34
+ error: (title, message) => this.show({ title, message, type: "danger" }),
35
+ warning: (title, message) => this.show({ title, message, type: "warning" }),
36
+ info: (title, message) => this.show({ title, message, type: "info" })
37
+ }
15
38
  }
16
39
 
17
40
  disconnect() {
@@ -21,6 +44,64 @@ export default class extends Controller {
21
44
  if (this.leaveTimeout) {
22
45
  clearTimeout(this.leaveTimeout)
23
46
  }
47
+ if (this.boundTriggerHandler) {
48
+ document.removeEventListener("click", this.boundTriggerHandler)
49
+ }
50
+ if (window.odtToast) {
51
+ delete window.odtToast
52
+ }
53
+ }
54
+
55
+ show(eventOrOptions = {}) {
56
+ const options = eventOrOptions?.params || eventOrOptions || {}
57
+ const title = options.title || ""
58
+ const message = options.message || ""
59
+ const type = options.type || "default"
60
+ const variant = options.variant || "elevated"
61
+ const duration = options.duration !== undefined ? Number(options.duration) : 4000
62
+
63
+ const toast = document.createElement("div")
64
+ toast.className = `odt-toast odt-toast--variant-${variant}`
65
+ toast.setAttribute("role", "status")
66
+ toast.setAttribute("data-controller", "odt-toast")
67
+ toast.setAttribute("data-odt-toast-duration-value", duration.toString())
68
+
69
+ const parts = []
70
+
71
+ const icons = {
72
+ success: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>',
73
+ info: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>',
74
+ warning: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>',
75
+ danger: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>',
76
+ error: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>',
77
+ loading: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 11-6.219-8.56"/></svg>'
78
+ }
79
+
80
+ if (icons[type]) {
81
+ parts.push(`<span class="odt-toast__icon odt-toast__icon--${type}">${icons[type]}</span>`)
82
+ }
83
+
84
+ let bodyHtml = '<div class="odt-toast__body">'
85
+ if (title) {
86
+ bodyHtml += `<div class="odt-toast__title">${title}</div>`
87
+ }
88
+ if (message) {
89
+ bodyHtml += `<div class="odt-toast__description">${message}</div>`
90
+ }
91
+ bodyHtml += '</div>'
92
+ parts.push(bodyHtml)
93
+
94
+ parts.push(`
95
+ <button type="button" class="odt-toast__close" aria-label="Close" data-action="click->odt-toast#dismiss">
96
+ <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
97
+ <line x1="18" y1="6" x2="6" y2="18"></line>
98
+ <line x1="6" y1="6" x2="18" y2="18"></line>
99
+ </svg>
100
+ </button>
101
+ `)
102
+
103
+ toast.innerHTML = parts.join("")
104
+ this.element.appendChild(toast)
24
105
  }
25
106
 
26
107
  handleMutations() {
@@ -1,5 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module OdtUi
4
- VERSION = "2.2.5"
4
+ VERSION = "2.2.7"
5
5
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: odt-ui-rails
3
3
  version: !ruby/object:Gem::Version
4
- version: 2.2.5
4
+ version: 2.2.7
5
5
  platform: ruby
6
6
  authors:
7
7
  - Pixel