css-zero 2.0.1 → 2.0.3
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/stylesheets/css-zero/utilities.css +1 -0
- data/lib/css_zero/version.rb +1 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/alert.css +1 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/button.css +2 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/card.css +1 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/combobox.css +3 -3
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/command.css +1 -0
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/datepicker.css +1 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/input.css +1 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/menu.css +1 -0
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/popover.css +1 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/toggle.css +4 -0
- data/lib/generators/css_zero/add/templates/app/javascript/controllers/command_controller.js +5 -8
- data/lib/generators/css_zero/add/templates/app/javascript/controllers/menu_controller.js +9 -2
- data/lib/generators/css_zero/install/templates/app/assets/stylesheets/base.css +1 -0
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: fa9ca9000edaf107ed438323c5fdefddeea838a1b36efa39e9a2a029812c68cb
|
|
4
|
+
data.tar.gz: 752434ab79f9206188ceb2a8e84f1937f97e4208a6dedf9fd5b2d76850055f98
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 5d7e99672500e6b4c191d0dac69b333826932965b649d6ea14b4e9c5f7aed832a6ceccaef16d24d07ac86c2fd95627b5eff3ee3bc12b24ec07b849004a43513f
|
|
7
|
+
data.tar.gz: 9fd690f5c8b8a8be0623cf004f042c2f337302e023811735de343c37c36fe835af5a4473106928975baf42ac770d9253192d186a79a3b179d0b9ad4f088183fd
|
|
@@ -89,6 +89,7 @@
|
|
|
89
89
|
* Background
|
|
90
90
|
*****************************************************************/
|
|
91
91
|
.bg-main { background-color: var(--color-bg); }
|
|
92
|
+
.bg-surface { background-color: var(--color-surface); }
|
|
92
93
|
.bg-black { background-color: var(--color-text); }
|
|
93
94
|
.bg-white { background-color: var(--color-text-reversed); }
|
|
94
95
|
.bg-shade { background-color: var(--color-border-light); }
|
data/lib/css_zero/version.rb
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
.alert {
|
|
2
|
-
background-color: var(--alert-background, var(--color-
|
|
2
|
+
background-color: var(--alert-background, var(--color-surface));
|
|
3
3
|
border-radius: var(--rounded-lg);
|
|
4
4
|
border: 1px solid var(--alert-border-color, var(--color-border));
|
|
5
5
|
color: var(--alert-color, var(--color-text));
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
.btn {
|
|
2
2
|
align-items: center;
|
|
3
|
-
background-color: var(--btn-background, var(--color-
|
|
3
|
+
background-color: var(--btn-background, var(--color-surface));
|
|
4
4
|
block-size: var(--btn-block-size, auto);
|
|
5
5
|
border-radius: var(--btn-radius, var(--rounded-md));
|
|
6
6
|
border: 1px solid var(--btn-border-color, var(--color-border));
|
|
@@ -45,6 +45,7 @@
|
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
.btn--borderless {
|
|
48
|
+
--btn-background: transparent;
|
|
48
49
|
--btn-border-color: transparent;
|
|
49
50
|
--btn-box-shadow: none;
|
|
50
51
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
.ts-control {
|
|
4
4
|
align-items: center;
|
|
5
|
-
background-color: var(--color-
|
|
5
|
+
background-color: var(--color-surface);
|
|
6
6
|
border: 1px solid var(--color-border);
|
|
7
7
|
border-radius: var(--rounded-md);
|
|
8
8
|
min-block-size: var(--size-9);
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
.ts-dropdown {
|
|
21
|
-
background-color: var(--color-
|
|
21
|
+
background-color: var(--color-surface);
|
|
22
22
|
border: 1px solid var(--color-border);
|
|
23
23
|
border-radius: var(--rounded-md);
|
|
24
24
|
box-shadow: var(--shadow-md);
|
|
@@ -95,7 +95,7 @@
|
|
|
95
95
|
}
|
|
96
96
|
|
|
97
97
|
.ts-wrapper.single .ts-control {
|
|
98
|
-
background-color: var(--color-
|
|
98
|
+
background-color: var(--color-surface) !important;
|
|
99
99
|
background-image: url("chevron-down-zinc-500.svg") !important;
|
|
100
100
|
background-position: center right var(--size-2) !important;
|
|
101
101
|
background-repeat: no-repeat !important;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
.input {
|
|
2
2
|
appearance: none;
|
|
3
|
-
background-color: var(--input-background, var(--color-
|
|
3
|
+
background-color: var(--input-background, var(--color-surface));
|
|
4
4
|
block-size: var(--input-block-size, auto);
|
|
5
5
|
border: 1px solid var(--input-border-color, var(--color-border));
|
|
6
6
|
border-radius: var(--input-radius, var(--rounded-md));
|
|
@@ -12,20 +12,13 @@ export default class extends Controller {
|
|
|
12
12
|
|
|
13
13
|
connect() {
|
|
14
14
|
this.combobox = new Combobox(this.inputTarget, this.listTarget, { firstOptionSelectionMode: "selected" })
|
|
15
|
+
this.combobox.start()
|
|
15
16
|
}
|
|
16
17
|
|
|
17
18
|
disconnect() {
|
|
18
19
|
this.combobox.destroy()
|
|
19
20
|
}
|
|
20
21
|
|
|
21
|
-
start() {
|
|
22
|
-
this.combobox.start()
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
stop() {
|
|
26
|
-
this.combobox.stop()
|
|
27
|
-
}
|
|
28
|
-
|
|
29
22
|
filter({ target }) {
|
|
30
23
|
this.#reset()
|
|
31
24
|
|
|
@@ -37,6 +30,10 @@ export default class extends Controller {
|
|
|
37
30
|
}
|
|
38
31
|
}
|
|
39
32
|
|
|
33
|
+
commit({ target }) {
|
|
34
|
+
Turbo.visit(target.dataset.href, { action: "advance" })
|
|
35
|
+
}
|
|
36
|
+
|
|
40
37
|
#reset() {
|
|
41
38
|
this.listTarget.querySelectorAll(`.${this.selectedClass}`).forEach(it => {
|
|
42
39
|
it.classList.remove(this.selectedClass)
|
|
@@ -20,6 +20,11 @@ export default class extends Controller {
|
|
|
20
20
|
|
|
21
21
|
navigate(event) {
|
|
22
22
|
switch (event.key) {
|
|
23
|
+
case " ":
|
|
24
|
+
case "Enter":
|
|
25
|
+
this.#cancel(event)
|
|
26
|
+
this.#activate(event.target)
|
|
27
|
+
break
|
|
23
28
|
case "ArrowUp":
|
|
24
29
|
this.#cancel(event)
|
|
25
30
|
this.#prev()
|
|
@@ -28,12 +33,10 @@ export default class extends Controller {
|
|
|
28
33
|
this.#cancel(event)
|
|
29
34
|
this.#next()
|
|
30
35
|
break
|
|
31
|
-
case "PageUp":
|
|
32
36
|
case "Home":
|
|
33
37
|
this.#cancel(event)
|
|
34
38
|
this.#first()
|
|
35
39
|
break
|
|
36
|
-
case "PageDown":
|
|
37
40
|
case "End":
|
|
38
41
|
this.#cancel(event)
|
|
39
42
|
this.#last()
|
|
@@ -46,6 +49,10 @@ export default class extends Controller {
|
|
|
46
49
|
event.preventDefault()
|
|
47
50
|
}
|
|
48
51
|
|
|
52
|
+
#activate(menuItem) {
|
|
53
|
+
menuItem.click()
|
|
54
|
+
}
|
|
55
|
+
|
|
49
56
|
#reset([ entry ]) {
|
|
50
57
|
entry.isIntersecting && this.#first()
|
|
51
58
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
--color-bg: light-dark(white, var(--zinc-950));
|
|
3
|
+
--color-surface: light-dark(white, var(--zinc-900));
|
|
3
4
|
--color-text: light-dark(var(--zinc-950), white);
|
|
4
5
|
--color-text-reversed: light-dark(white, var(--zinc-950));
|
|
5
6
|
--color-text-subtle: light-dark(var(--zinc-500), var(--zinc-400));
|
metadata
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: css-zero
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 2.0.
|
|
4
|
+
version: 2.0.3
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Lázaro Nixon
|
|
8
8
|
bindir: bin
|
|
9
9
|
cert_chain: []
|
|
10
|
-
date: 2025-08-
|
|
10
|
+
date: 2025-08-08 00:00:00.000000000 Z
|
|
11
11
|
dependencies: []
|
|
12
12
|
email: lazaronixon@hotmail.com
|
|
13
13
|
executables: []
|