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 +4 -4
- data/README.md +3 -2
- data/app/assets/stylesheets/odt_ui/tokens.css +44 -44
- data/app/assets/stylesheets/odt_ui.css +44 -44
- data/lib/generators/odt/templates/odt_toaster_controller.js +81 -0
- data/lib/odt_ui/version.rb +1 -1
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 576f435740a5fc583b9244f47adc475748a7843658b76764b443a5f7caa5b917
|
|
4
|
+
data.tar.gz: 21ad6994530162a7306247be749cbf1b9d967f641a34a2918d14e55c2b86900e
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
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.
|
|
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
|
-
|
|
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(
|
|
6
|
-
--color-primary-50: hsl(
|
|
7
|
-
--color-primary-100: hsl(
|
|
8
|
-
--color-primary-200: hsl(
|
|
9
|
-
--color-primary-300: hsl(
|
|
10
|
-
--color-primary-400: hsl(
|
|
11
|
-
--color-primary-500: hsl(
|
|
12
|
-
--color-primary-600: hsl(
|
|
13
|
-
--color-primary-700: hsl(
|
|
14
|
-
--color-primary-800: hsl(
|
|
15
|
-
--color-primary-900: hsl(240 78
|
|
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(
|
|
21
|
-
--color-secondary-50: hsl(47 100% 95%);
|
|
22
|
-
--color-secondary-100: hsl(47 100%
|
|
23
|
-
--color-secondary-200: hsl(47 100%
|
|
24
|
-
--color-secondary-300: hsl(47 100%
|
|
25
|
-
--color-secondary-400: hsl(47 100%
|
|
26
|
-
--color-secondary-500: hsl(47 100%
|
|
27
|
-
--color-secondary-600: hsl(47 100%
|
|
28
|
-
--color-secondary-700: hsl(47 100%
|
|
29
|
-
--color-secondary-800: hsl(47 100%
|
|
30
|
-
--color-secondary-900: hsl(47 100%
|
|
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
|
|
288
|
-
--color-primary-50: hsla(
|
|
289
|
-
--color-primary-100: hsla(
|
|
290
|
-
--color-primary-200: hsl(240 78
|
|
291
|
-
--color-primary-300: hsl(
|
|
292
|
-
--color-primary-400: hsl(
|
|
293
|
-
--color-primary-500: hsl(
|
|
294
|
-
--color-primary-600: hsl(
|
|
295
|
-
--color-primary-700: hsl(
|
|
296
|
-
--color-primary-800: hsl(
|
|
297
|
-
--color-primary-900: hsl(
|
|
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%,
|
|
304
|
-
--color-secondary-100: hsla(47, 100%,
|
|
305
|
-
--color-secondary-200: hsl(47 100%
|
|
306
|
-
--color-secondary-300: hsl(47 100%
|
|
307
|
-
--color-secondary-400: hsl(47 100%
|
|
308
|
-
--color-secondary-500: hsl(47 100%
|
|
309
|
-
--color-secondary-600: hsl(47 100% 68%);
|
|
310
|
-
--color-secondary-700: hsl(47 100% 75%);
|
|
311
|
-
--color-secondary-800: hsl(47 100%
|
|
312
|
-
--color-secondary-900: hsl(47 100%
|
|
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(
|
|
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(
|
|
11
|
-
--color-primary-50: hsl(
|
|
12
|
-
--color-primary-100: hsl(
|
|
13
|
-
--color-primary-200: hsl(
|
|
14
|
-
--color-primary-300: hsl(
|
|
15
|
-
--color-primary-400: hsl(
|
|
16
|
-
--color-primary-500: hsl(
|
|
17
|
-
--color-primary-600: hsl(
|
|
18
|
-
--color-primary-700: hsl(
|
|
19
|
-
--color-primary-800: hsl(
|
|
20
|
-
--color-primary-900: hsl(240 78
|
|
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(
|
|
26
|
-
--color-secondary-50: hsl(47 100% 95%);
|
|
27
|
-
--color-secondary-100: hsl(47 100%
|
|
28
|
-
--color-secondary-200: hsl(47 100%
|
|
29
|
-
--color-secondary-300: hsl(47 100%
|
|
30
|
-
--color-secondary-400: hsl(47 100%
|
|
31
|
-
--color-secondary-500: hsl(47 100%
|
|
32
|
-
--color-secondary-600: hsl(47 100%
|
|
33
|
-
--color-secondary-700: hsl(47 100%
|
|
34
|
-
--color-secondary-800: hsl(47 100%
|
|
35
|
-
--color-secondary-900: hsl(47 100%
|
|
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
|
|
293
|
-
--color-primary-50: hsla(
|
|
294
|
-
--color-primary-100: hsla(
|
|
295
|
-
--color-primary-200: hsl(240 78
|
|
296
|
-
--color-primary-300: hsl(
|
|
297
|
-
--color-primary-400: hsl(
|
|
298
|
-
--color-primary-500: hsl(
|
|
299
|
-
--color-primary-600: hsl(
|
|
300
|
-
--color-primary-700: hsl(
|
|
301
|
-
--color-primary-800: hsl(
|
|
302
|
-
--color-primary-900: hsl(
|
|
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%,
|
|
309
|
-
--color-secondary-100: hsla(47, 100%,
|
|
310
|
-
--color-secondary-200: hsl(47 100%
|
|
311
|
-
--color-secondary-300: hsl(47 100%
|
|
312
|
-
--color-secondary-400: hsl(47 100%
|
|
313
|
-
--color-secondary-500: hsl(47 100%
|
|
314
|
-
--color-secondary-600: hsl(47 100% 68%);
|
|
315
|
-
--color-secondary-700: hsl(47 100% 75%);
|
|
316
|
-
--color-secondary-800: hsl(47 100%
|
|
317
|
-
--color-secondary-900: hsl(47 100%
|
|
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(
|
|
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() {
|
data/lib/odt_ui/version.rb
CHANGED