css-zero 0.0.40 → 0.0.42

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.
Files changed (20) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +1 -1
  3. data/lib/css_zero/version.rb +1 -1
  4. data/lib/generators/css_zero/add/USAGE +1 -1
  5. data/lib/generators/css_zero/add/resources.yml +4 -3
  6. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/breadcrumb.css +3 -3
  7. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/button.css +2 -1
  8. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/carousel.css +3 -2
  9. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/command.css +10 -0
  10. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/dialog.css +1 -0
  11. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/flash.css +17 -2
  12. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/input.css +1 -1
  13. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/sheet.css +2 -3
  14. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/tabs.css +1 -2
  15. data/lib/generators/css_zero/add/templates/app/javascript/controllers/check_all_controller.js +34 -0
  16. data/lib/generators/css_zero/add/templates/app/javascript/controllers/copyable_input_controller.js +1 -1
  17. data/lib/generators/css_zero/add/templates/app/javascript/controllers/tabs_controller.js +4 -4
  18. metadata +4 -4
  19. data/lib/generators/css_zero/add/templates/app/assets/images/maximize.svg +0 -1
  20. /data/lib/generators/css_zero/add/templates/app/javascript/controllers/{command_controller.js → filter_controller.js} +0 -0
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 4b3d3e06335e4a698ebc061696a679ed778bb627ec9d7d7ecf860aab7e802212
4
- data.tar.gz: f78370339a7f2608e198498814810f3601b5ee77556fc548edf6461a611a7e4d
3
+ metadata.gz: 9147bdaa40d0da67f7bfa6c4ee6ec20485051188a857184f858c051148a544b6
4
+ data.tar.gz: efc47b5ed912f4a6739482d492e65523ffa95dea8d5c237e44ff1a94ce2b9f88
5
5
  SHA512:
6
- metadata.gz: 25d4acd29c0c630f307c20e49d1650b4f54df0f5afe49cfd20016c293edbdc54e296b631fa3e66cad4b5f90adec0fd3383f9252107716bc90c9fd353cad7c736
7
- data.tar.gz: d4b932c7b8114c315634fe90f52f30f6570faa360c6ef9bdeaabf2fe1432b1ea791cff439b8d97a0b2aa1ed78da940c1eb0633d698c3dfdbb3de8eea9ea88693
6
+ metadata.gz: cec2e300f215ab9f92d50cd61b6336ccbdb6189e071eb266841198fbda4b7ac6f20385832065674a4732f3e35677cb4e4382e483c0f6334423e082f4b73538fd
7
+ data.tar.gz: 16f064b7bc328519e52e58c635a1fc6941176d7e7098852072fb1dd7a209ccc7107e20108372a3bfba5037fe4101824d1fe77ae62a24a8f0e0d285c4e44385fb
data/README.md CHANGED
@@ -19,7 +19,7 @@ bin/rails generate css_zero:install
19
19
  Add only the components you need. (Optional)
20
20
 
21
21
  ```
22
- bin/rails generate css_zero:add accordion alert avatar badge breadcrumb button card carousel command collapsible dialog flash fullscreen hotkey input input_concerns layouts lightbox local_time pagination progress prose sheet skeleton switch table tabs upload_preview toggle web_share
22
+ bin/rails generate css_zero:add accordion alert avatar badge breadcrumb button card carousel check_all command collapsible dialog flash fullscreen hotkey input input_concerns layouts lightbox local_time pagination progress prose sheet skeleton switch table tabs upload_preview toggle web_share
23
23
  ```
24
24
 
25
25
  ### Requirements
data/lib/css_zero/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module CssZero
2
- VERSION = "0.0.40"
2
+ VERSION = "0.0.42"
3
3
  end
data/lib/generators/css_zero/add/USAGE CHANGED
@@ -2,7 +2,7 @@ Description:
2
2
  This will add components into your project.
3
3
 
4
4
  Components:
5
- accordion alert avatar badge breadcrumb button card carousel command collapsible dialog flash fullscreen hotkey input input_concerns layouts lightbox local_time pagination progress prose sheet skeleton switch table tabs upload_preview toggle web_share
5
+ accordion alert avatar badge breadcrumb button card carousel check_call command collapsible dialog flash fullscreen hotkey input input_concerns layouts lightbox local_time pagination progress prose sheet skeleton switch table tabs upload_preview toggle web_share
6
6
 
7
7
  Example:
8
8
  bin/rails generate css_zero:add [components...]
data/lib/generators/css_zero/add/resources.yml CHANGED
@@ -20,9 +20,11 @@ carousel:
20
20
  - app/javascript/controllers/carousel_controller.js
21
21
  - app/assets/images/arrow-left.svg
22
22
  - app/assets/images/arrow-right.svg
23
+ check_all:
24
+ - app/assets/stylesheets/check_all_controller.js
23
25
  command:
24
26
  - app/assets/stylesheets/command.css
25
- - app/javascript/controllers/command_controller.js
27
+ - app/javascript/controllers/filter_controller.js
26
28
  - app/assets/images/search.svg
27
29
  collapsible:
28
30
  - app/javascript/controllers/collapsible_controller.js
@@ -35,13 +37,13 @@ flash:
35
37
  - app/javascript/controllers/element_removal_controller.js
36
38
  fullscreen:
37
39
  - app/javascript/controllers/fullscreen_controller.js
38
- - app/assets/images/maximize.svg
39
40
  hotkey:
40
41
  - app/javascript/controllers/hotkey_controller.js
41
42
  input:
42
43
  - app/assets/stylesheets/input.css
43
44
  - app/assets/images/select-arrow.svg
44
45
  input_concerns:
46
+ - app/javascript/controllers/autoselect_controller.js
45
47
  - app/javascript/controllers/copyable_input_controller.js
46
48
  - app/assets/images/copy.svg
47
49
  - app/assets/images/check.svg
@@ -50,7 +52,6 @@ input_concerns:
50
52
  - app/javascript/controllers/revealable_input_controller.js
51
53
  - app/assets/images/eye.svg
52
54
  - app/assets/images/eye-off.svg
53
- - app/javascript/controllers/autoselect_controller.js
54
55
  layouts:
55
56
  - app/assets/stylesheets/layouts.css
56
57
  - app/assets/images/menu.svg
data/lib/generators/css_zero/add/templates/app/assets/stylesheets/breadcrumb.css CHANGED
@@ -4,7 +4,7 @@
4
4
  display: flex;
5
5
  flex-wrap: wrap;
6
6
  font-size: var(--text-sm);
7
- gap: var(--size-2);
7
+ gap: var(--size-1);
8
8
  overflow-wrap: break-word;
9
9
 
10
10
  img {
@@ -15,7 +15,7 @@
15
15
  color: var(--color-text);
16
16
  }
17
17
 
18
- @media (width < 40rem) {
19
- gap: var(--size-1);
18
+ @media (width >= 40rem) {
19
+ gap: var(--size-2);
20
20
  }
21
21
  }
data/lib/generators/css_zero/add/templates/app/assets/stylesheets/button.css CHANGED
@@ -9,10 +9,11 @@
9
9
  font-size: var(--btn-font-size, var(--text-sm));
10
10
  font-weight: var(--btn-font-weight, var(--font-medium));
11
11
  gap: var(--size-2);
12
+ inline-size: var(--btn-inline-size, auto);
12
13
  justify-content: var(--btn-justify-content, center);
13
- white-space: nowrap;
14
14
  padding: var(--btn-padding, 0.5rem 1rem);
15
15
  text-align: center;
16
+ white-space: nowrap;
16
17
 
17
18
  img:not([class]) {
18
19
  filter: var(--btn-icon-color, var(--color-filter-text));
data/lib/generators/css_zero/add/templates/app/assets/stylesheets/carousel.css CHANGED
@@ -1,13 +1,14 @@
1
1
  .carousel__content {
2
2
  display: flex;
3
3
  gap: var(--size-6);
4
+ inline-size: var(--size-full);
4
5
  overflow: hidden;
5
6
  padding: var(--size-1);
6
7
  scroll-snap-type: x mandatory;
7
8
 
8
9
  > * {
9
- flex: 0 0 100%;
10
+ flex: 0 0 var(--carousel-item-size, 100%);
10
11
  scroll-snap-stop: always;
11
- scroll-snap-align: center;
12
+ scroll-snap-align: start;
12
13
  }
13
14
  }
data/lib/generators/css_zero/add/templates/app/assets/stylesheets/command.css CHANGED
@@ -10,9 +10,11 @@
10
10
  --input-background: transparent;
11
11
  --input-border-color: transparent;
12
12
  --input-outline-size: 0;
13
+ --input-padding: 0.75rem 1rem;
13
14
  }
14
15
 
15
16
  .command__list {
17
+ border-block-start-width: var(--border);
16
18
  max-block-size: 300px;
17
19
  overflow-y: auto;
18
20
  }
@@ -30,6 +32,13 @@
30
32
  padding: var(--size-1_5) var(--size-2);
31
33
  }
32
34
 
35
+ .command__empty {
36
+ display: none;
37
+ font-size: var(--text-sm);
38
+ justify-content: center;
39
+ padding-block: var(--size-6);
40
+ }
41
+
33
42
  .command__item {
34
43
  --btn-border-color: transparent;
35
44
  --btn-font-weight: var(--font-normal);
@@ -49,6 +58,7 @@
49
58
  }
50
59
 
51
60
  .command__list--filtering {
61
+ &:not(:has(.selected)) > .command__empty { display: flex; }
52
62
  .command__group { display: none; }
53
63
  .command__group:has(.selected) { display: flex; }
54
64
  .command__item { display: none; }
data/lib/generators/css_zero/add/templates/app/assets/stylesheets/dialog.css CHANGED
@@ -46,6 +46,7 @@
46
46
  }
47
47
  }
48
48
 
49
+ /* Drawer component on mobile */
49
50
  @media (width < 40rem) {
50
51
  border-end-end-radius: 0;
51
52
  border-end-start-radius: 0;
data/lib/generators/css_zero/add/templates/app/assets/stylesheets/flash.css CHANGED
@@ -1,13 +1,28 @@
1
1
  .flash {
2
+ align-items: center;
2
3
  animation: appear-then-fade 4s 300ms both;
3
4
  background-color: var(--color-text);
4
5
  border-radius: var(--rounded-full);
5
6
  color: var(--color-text-reversed);
6
- margin-block-start: var(--size-4);
7
+ display: flex;
8
+ gap: var(--size-2);
9
+ inset: 0;
10
+ justify-content: center;
11
+ line-height: var(--leading-none);
12
+ margin-block-start: var(--flash-position, 0);
7
13
  margin-inline: auto;
8
- padding: var(--size-2) var(--size-4);
14
+ min-block-size: var(--size-11);
15
+ padding: var(--size-1) var(--size-4);
9
16
  position: fixed;
10
17
  text-align: center;
18
+
19
+ @media (width >= 40rem) {
20
+ font-size: var(--text-lg);
21
+ }
22
+
23
+ @media (width >= 64rem) {
24
+ font-size: var(--text-xl);
25
+ }
11
26
  }
12
27
 
13
28
  @keyframes appear-then-fade {
data/lib/generators/css_zero/add/templates/app/assets/stylesheets/input.css CHANGED
@@ -8,7 +8,7 @@
8
8
  padding: var(--input-padding, 0.5rem 1rem);
9
9
 
10
10
  option {
11
- padding-block: revert;
11
+ padding-block: 2px;
12
12
  }
13
13
 
14
14
  &:is(textarea[rows=auto]) {
data/lib/generators/css_zero/add/templates/app/assets/stylesheets/sheet.css CHANGED
@@ -7,7 +7,6 @@
7
7
  inline-size: var(--size-3-4);
8
8
  margin-inline: var(--sheet-margin);
9
9
  max-block-size: unset;
10
- max-inline-size: var(--max-i-sm);
11
10
 
12
11
  &::backdrop {
13
12
  background-color: rgba(0, 0, 0, .8);
@@ -46,8 +45,8 @@
46
45
  }
47
46
  }
48
47
 
49
- @media (width < 40rem) {
50
- max-inline-size: none;
48
+ @media (width >= 40rem) {
49
+ max-inline-size: var(--max-i-sm);
51
50
  }
52
51
  }
53
52
 
data/lib/generators/css_zero/add/templates/app/assets/stylesheets/tabs.css CHANGED
@@ -12,8 +12,7 @@
12
12
  --btn-background: transparent;
13
13
  --btn-border-color: transparent;
14
14
  --btn-hover-lightness: 100%;
15
-
16
- inline-size: var(--size-full);
15
+ --btn-inline-size: var(--size-full);
17
16
 
18
17
  &[aria-selected=true] {
19
18
  --btn-background: var(--color-bg);
data/lib/generators/css_zero/add/templates/app/javascript/controllers/check_all_controller.js ADDED
@@ -0,0 +1,34 @@
1
+ import { Controller } from "@hotwired/stimulus"
2
+
3
+ export default class extends Controller {
4
+ static targets = [ "dependee", "dependant" ]
5
+
6
+ connect() {
7
+ this.#checkDependee()
8
+ }
9
+
10
+ check({ target }) {
11
+ target === this.dependeeTarget ? this.#checkDependants() : this.#checkDependee()
12
+ }
13
+
14
+ #checkDependants() {
15
+ this.dependantTargets.forEach(e => e.checked = this.dependeeTarget.checked)
16
+ }
17
+
18
+ #checkDependee() {
19
+ this.dependeeTarget.checked = this.#allChecked
20
+ this.dependeeTarget.indeterminate = this.#indeterminate
21
+ }
22
+
23
+ get #indeterminate() {
24
+ return this.#atLeastOneChecked && !this.#allChecked;
25
+ }
26
+
27
+ get #atLeastOneChecked() {
28
+ return this.dependantTargets.some(e => e.checked)
29
+ }
30
+
31
+ get #allChecked() {
32
+ return this.dependantTargets.every(e => e.checked)
33
+ }
34
+ }
data/lib/generators/css_zero/add/templates/app/javascript/controllers/copyable_input_controller.js CHANGED
@@ -32,7 +32,7 @@ export default class extends Controller {
32
32
  }
33
33
 
34
34
  #update() {
35
- this.copyIconTarget.hidden = this.copiedValue
35
+ this.copyIconTarget.hidden = this.copiedValue
36
36
  this.successIconTarget.hidden = !this.copiedValue
37
37
  }
38
38
  }
data/lib/generators/css_zero/add/templates/app/javascript/controllers/tabs_controller.js CHANGED
@@ -20,10 +20,6 @@ export default class extends Controller {
20
20
  if (this.indexValue < this.#lastIndex) this.indexValue++
21
21
  }
22
22
 
23
- get #lastIndex() {
24
- return this.tabTargets.length -1
25
- }
26
-
27
23
  #showSelectedTab() {
28
24
  this.buttonTargets.forEach((element, index) => {
29
25
  element.ariaSelected = index === this.indexValue
@@ -33,4 +29,8 @@ export default class extends Controller {
33
29
  element.hidden = index !== this.indexValue
34
30
  })
35
31
  }
32
+
33
+ get #lastIndex() {
34
+ return this.tabTargets.length -1
35
+ }
36
36
  }
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: css-zero
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.40
4
+ version: 0.0.42
5
5
  platform: ruby
6
6
  authors:
7
7
  - Lázaro Nixon
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2024-10-01 00:00:00.000000000 Z
11
+ date: 2024-10-04 00:00:00.000000000 Z
12
12
  dependencies: []
13
13
  description:
14
14
  email: lazaronixon@hotmail.com
@@ -50,7 +50,6 @@ files:
50
50
  - lib/generators/css_zero/add/templates/app/assets/images/eye-off.svg
51
51
  - lib/generators/css_zero/add/templates/app/assets/images/eye.svg
52
52
  - lib/generators/css_zero/add/templates/app/assets/images/loader-circle.svg
53
- - lib/generators/css_zero/add/templates/app/assets/images/maximize.svg
54
53
  - lib/generators/css_zero/add/templates/app/assets/images/menu.svg
55
54
  - lib/generators/css_zero/add/templates/app/assets/images/minus.svg
56
55
  - lib/generators/css_zero/add/templates/app/assets/images/search.svg
@@ -81,12 +80,13 @@ files:
81
80
  - lib/generators/css_zero/add/templates/app/assets/stylesheets/toggle.css
82
81
  - lib/generators/css_zero/add/templates/app/javascript/controllers/autoselect_controller.js
83
82
  - lib/generators/css_zero/add/templates/app/javascript/controllers/carousel_controller.js
83
+ - lib/generators/css_zero/add/templates/app/javascript/controllers/check_all_controller.js
84
84
  - lib/generators/css_zero/add/templates/app/javascript/controllers/clearable_input_controller.js
85
85
  - lib/generators/css_zero/add/templates/app/javascript/controllers/collapsible_controller.js
86
- - lib/generators/css_zero/add/templates/app/javascript/controllers/command_controller.js
87
86
  - lib/generators/css_zero/add/templates/app/javascript/controllers/copyable_input_controller.js
88
87
  - lib/generators/css_zero/add/templates/app/javascript/controllers/dialog_controller.js
89
88
  - lib/generators/css_zero/add/templates/app/javascript/controllers/element_removal_controller.js
89
+ - lib/generators/css_zero/add/templates/app/javascript/controllers/filter_controller.js
90
90
  - lib/generators/css_zero/add/templates/app/javascript/controllers/form_controller.js
91
91
  - lib/generators/css_zero/add/templates/app/javascript/controllers/fullscreen_controller.js
92
92
  - lib/generators/css_zero/add/templates/app/javascript/controllers/hotkey_controller.js
data/lib/generators/css_zero/add/templates/app/assets/images/maximize.svg DELETED
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize"><path d="M8 3H5a2 2 0 0 0-2 2v3"/><path d="M21 8V5a2 2 0 0 0-2-2h-3"/><path d="M3 16v3a2 2 0 0 0 2 2h3"/><path d="M16 21h3a2 2 0 0 0 2-2v-3"/></svg>