css-zero 0.0.54 → 0.0.56

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: 7ed27e158f8a76846339dfa69f1c174dea2af1fdadae6a3b63373da5b8c71f7b
4
- data.tar.gz: b3969c7185bd0508fe1c63ec94a48c9d96243d614d2cc30a2dd5469fb0be959f
3
+ metadata.gz: dda2e775427e1ef39365fd7d86e67435f9a7b9537772871544b05f675ef1fab3
4
+ data.tar.gz: 382243e0f4441e706606aac3b8a646b163ef38642e17dcc9a620358b8925a3aa
5
5
  SHA512:
6
- metadata.gz: 623658c4fba2326aabdd9313c80f8fb1d2fdeb46d2f48d6181f5d1fc9701f1be82173f15956c194d680d9800f13984fda6151c3d11dd9b02ff00d3bb1aa5bffc
7
- data.tar.gz: d1a40430b67b9084a6f40de4c32907b19f31c157baed20f9f27538b4017d9ce3e2e9ca837d649e7659c8b12512b9f6d3339d1ad739a1b6ed4947615b89f2bfe0
6
+ metadata.gz: 5b44ccc95deabacf46b16f71f2ce72112104d3c4dc223bcb9f73e2ac7ad354e95cf18ee2efd07e236f7e5ba674d8d1b3b9ae38a47193ef144b68330df30eefdd
7
+ data.tar.gz: 63c113d51c33d46a9d26a3e73865f201d1083cae21797eb2b2d9b22f29e307bb94079b104c163d9fb49c0982e22fa8febefefba798a82481f6cf490c3be239d6
@@ -1,3 +1,3 @@
1
1
  module CssZero
2
- VERSION = "0.0.54"
2
+ VERSION = "0.0.56"
3
3
  end
@@ -2,7 +2,7 @@ Description:
2
2
  This will add components into your project.
3
3
 
4
4
  Components:
5
- accordion alert autosave avatar badge breadcrumb button card carousel combobox check_all command collapsible datepicker dialog dropdown flash form fullscreen hotkey input input_concerns inputmask layouts lightbox local_time pagination progress prose sheet skeleton switch table tabs trix upload_preview toggle web_share
5
+ accordion alert autosave avatar badge breadcrumb button card carousel chart check_all combobox command collapsible datepicker dialog dropdown flash form fullscreen hotkey input input_concerns inputmask layouts lightbox local_time pagination progress prose sheet skeleton switch table tabs trix upload_preview toggle web_share
6
6
 
7
7
  Example:
8
8
  bin/rails generate css_zero:add [components...]
@@ -22,13 +22,15 @@ carousel:
22
22
  - app/javascript/controllers/carousel_controller.js
23
23
  - app/assets/images/arrow-left.svg
24
24
  - app/assets/images/arrow-right.svg
25
+ chart:
26
+ - app/javascript/controllers/chart_controller.js
27
+ check_all:
28
+ - app/javascript/controllers/check_all_controller.js
25
29
  combobox:
26
30
  - app/assets/stylesheets/tom-select.css
27
31
  - app/assets/stylesheets/zcombobox.css
28
32
  - app/javascript/controllers/combobox_controller.js
29
33
  - app/assets/images/select-arrow.svg
30
- check_all:
31
- - app/javascript/controllers/check_all_controller.js
32
34
  command:
33
35
  - app/assets/stylesheets/command.css
34
36
  - app/javascript/controllers/filter_controller.js
@@ -2,13 +2,13 @@
2
2
  details {
3
3
  border-block-end-width: var(--border);
4
4
  interpolate-size: allow-keywords;
5
+ overflow: hidden;
5
6
 
6
7
  &::details-content {
7
8
  block-size: 0;
8
- overflow-y: clip;
9
9
  transition-behavior: allow-discrete;
10
10
  transition-duration: var(--time-150);
11
- transition-property: content-visibility height;
11
+ transition-property: content-visibility block-size;
12
12
  }
13
13
 
14
14
  &[open]::details-content {
@@ -5,7 +5,7 @@
5
5
  border-radius: var(--input-radius, var(--rounded-md));
6
6
  font-size: var(--input-font-size, var(--text-sm));
7
7
  inline-size: var(--size-full);
8
- padding: var(--input-padding, 0.5rem 1rem);
8
+ padding: var(--input-padding, 0.5rem 0.75rem);
9
9
 
10
10
  option {
11
11
  padding-block: 2px;
@@ -5,12 +5,11 @@
5
5
  border-radius: var(--rounded-md);
6
6
  min-block-size: var(--size-10);
7
7
  color: var(--color-text);
8
- display: flex;
8
+ display: inline-flex;
9
9
  font-size: var(--text-sm);
10
- font-weight: var(--font-medium);
11
10
  gap: var(--size-1);
12
11
  line-height: inherit;
13
- padding: var(--size-1_5) var(--size-2);
12
+ padding: var(--size-2) var(--size-3);
14
13
 
15
14
  > input {
16
15
  color: inherit; font-size: inherit;
@@ -85,6 +84,7 @@
85
84
  background: var(--color-secondary);
86
85
  border-radius: var(--rounded-md);
87
86
  color: inherit;
87
+ line-height: var(--leading-tight);
88
88
  margin: 0;
89
89
  }
90
90
 
@@ -8,7 +8,7 @@
8
8
  border-radius: var(--rounded-md);
9
9
  box-shadow: var(--shadow-md);
10
10
  font-size: var(--text-sm);
11
- inline-size: 280px;
11
+ inline-size: 285px;
12
12
  padding: var(--size-3);
13
13
 
14
14
  :is(.dayContainer, .flatpickr-days) {
@@ -115,14 +115,15 @@
115
115
  }
116
116
 
117
117
  .flatpickr-day {
118
- align-items: center;
118
+ --day-size: var(--size-9);
119
119
  border-radius: var(--rounded-md);
120
120
  border-color: transparent !important;
121
121
  box-shadow: none !important;
122
122
  color: var(--color-text);
123
- display: inline-flex;
124
- height: var(--size-9);
125
- max-width: 100%;
123
+ height: var(--day-size);
124
+ line-height: var(--day-size);
125
+ margin-block-start: 1px;
126
+ max-width: var(--day-size);
126
127
 
127
128
  &:is(.inRange) {
128
129
  border-radius: 0;
@@ -130,6 +131,7 @@
130
131
 
131
132
  &:is(.today, .inRange, :hover, :focus) {
132
133
  background: var(--color-secondary);
134
+ color: var(--color-text);
133
135
  }
134
136
 
135
137
  &:is(
@@ -1,5 +1,5 @@
1
1
  import { Controller } from "@hotwired/stimulus"
2
- import { FetchRequest } from "@rails/request.js"
2
+ import { FetchRequest } from "https://cdn.skypack.dev/@rails/request.js@0.0.11"
3
3
 
4
4
  const AUTOSAVE_INTERVAL = 3000
5
5
 
@@ -61,4 +61,4 @@ async function submitForm(form) {
61
61
  })
62
62
 
63
63
  return await request.perform()
64
- }
64
+ }
@@ -0,0 +1,33 @@
1
+ import { Controller } from "@hotwired/stimulus"
2
+ import { Chart, Colors, registerables } from "https://cdn.skypack.dev/chart.js@4.4.6"
3
+
4
+ Chart.register(...registerables)
5
+
6
+ Chart.defaults.backgroundColor = getCssVariableValue("--color-primary")
7
+ Chart.defaults.borderColor = getCssVariableValue("--color-border")
8
+ Chart.defaults.color = getCssVariableValue("--color-text")
9
+
10
+ Chart.defaults.font.family = getCssVariableValue("--font-system-ui")
11
+ Chart.defaults.font.size = 12
12
+
13
+ export default class extends Controller {
14
+ static values = { type: { type: String, default: "line" }, data: Object, options: Object }
15
+
16
+ connect() {
17
+ this.chart = new Chart(this.element, this.#settings)
18
+ }
19
+
20
+ disconnect() {
21
+ this.chart.destroy()
22
+ }
23
+
24
+ get #settings() {
25
+ return { type: this.typeValue, data: this.dataValue, options: this.optionsValue }
26
+ }
27
+ }
28
+
29
+ // Helpers
30
+
31
+ function getCssVariableValue(variableName) {
32
+ return getComputedStyle(document.documentElement).getPropertyValue(variableName).trim()
33
+ }
@@ -1,6 +1,6 @@
1
1
  import { Controller } from "@hotwired/stimulus"
2
- import { get } from "@rails/request.js"
3
- import TomSelect from "tom-select"
2
+ import { get } from "https://cdn.skypack.dev/@rails/request.js@0.0.11"
3
+ import TomSelect from "https://cdn.skypack.dev/tom-select@2.3.1"
4
4
 
5
5
  export default class extends Controller {
6
6
  static values = { url: String, optionCreate: { type: String, default: "Add" }, noResults: { type: String, default: "No results found" } }
@@ -28,11 +28,11 @@ export default class extends Controller {
28
28
  }
29
29
 
30
30
  get #inputSettings() {
31
- return { render: this.#render, load: this.hasUrlValue && this.load, persist: false, createOnBlur: true, create: true }
31
+ return { render: this.#render, load: this.#loadSetting, persist: false, createOnBlur: true, create: true }
32
32
  }
33
33
 
34
34
  get #selectSettings() {
35
- return { render: this.#render, load: this.hasUrlValue && this.load }
35
+ return { render: this.#render, load: this.#loadSetting }
36
36
  }
37
37
 
38
38
  get #render() {
@@ -45,4 +45,8 @@ export default class extends Controller {
45
45
  }
46
46
  }
47
47
  }
48
+
49
+ get #loadSetting() {
50
+ return this.hasUrlValue && this.load
51
+ }
48
52
  }
@@ -1,5 +1,5 @@
1
1
  import { Controller } from "@hotwired/stimulus"
2
- import flatpickr from "flatpickr"
2
+ import flatpickr from "https://cdn.skypack.dev/flatpickr@4.6.13"
3
3
 
4
4
  export default class extends Controller {
5
5
  static targets = [ "details" ]
@@ -30,23 +30,14 @@ export default class extends Controller {
30
30
  }
31
31
 
32
32
  get #dateTimeOptions() {
33
- return {
34
- altInput: true,
35
- altFormat: this.dateTimeFormatValue,
36
- dateFormat: "Y-m-d H:i",
37
- disable: this.disableValue,
38
- mode: this.modeValue,
39
- enableTime: true
40
- }
33
+ return { ...this.#baseOptions, altFormat: this.dateTimeFormatValue, dateFormat: "Y-m-d H:i", enableTime: true }
41
34
  }
42
35
 
43
36
  get #basicOptions() {
44
- return {
45
- altInput: true,
46
- altFormat: this.dateFormatValue,
47
- dateFormat: "Y-m-d",
48
- disable: this.disableValue,
49
- mode: this.modeValue
50
- }
37
+ return { ...this.#baseOptions, altFormat: this.dateFormatValue, dateFormat: "Y-m-d" }
38
+ }
39
+
40
+ get #baseOptions() {
41
+ return { altInput: true, disable: this.disableValue, mode: this.modeValue }
51
42
  }
52
- }
43
+ }
@@ -1,5 +1,5 @@
1
1
  import { Controller } from "@hotwired/stimulus"
2
- import Inputmask from "inputmask"
2
+ import Inputmask from "https://cdn.skypack.dev/inputmask@5.0.9"
3
3
 
4
4
  export default class extends Controller {
5
5
  static values = {
@@ -15,14 +15,18 @@ export default class extends Controller {
15
15
 
16
16
  connect() {
17
17
  if (this.hasMaskValue) {
18
- Inputmask.default({ mask: this.maskValue }).mask(this.element)
18
+ Inputmask({ mask: this.maskValue }).mask(this.element)
19
19
  } else if (this.aliasValue == "numeric") {
20
- Inputmask.default(this.#numericOptions).mask(this.element)
20
+ Inputmask(this.#numericOptions).mask(this.element)
21
21
  } else if (this.aliasValue == "datetime") {
22
- Inputmask.default(this.#datetimeOptions).mask(this.element)
22
+ Inputmask(this.#datetimeOptions).mask(this.element)
23
23
  }
24
24
  }
25
25
 
26
+ disconnect() {
27
+ Inputmask.remove(this.element)
28
+ }
29
+
26
30
  get #numericOptions() {
27
31
  return {
28
32
  alias: "numeric",
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.54
4
+ version: 0.0.56
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-29 00:00:00.000000000 Z
11
+ date: 2024-11-03 00:00:00.000000000 Z
12
12
  dependencies: []
13
13
  description:
14
14
  email: lazaronixon@hotmail.com
@@ -88,6 +88,7 @@ files:
88
88
  - lib/generators/css_zero/add/templates/app/javascript/controllers/autosave_controller.js
89
89
  - lib/generators/css_zero/add/templates/app/javascript/controllers/autoselect_controller.js
90
90
  - lib/generators/css_zero/add/templates/app/javascript/controllers/carousel_controller.js
91
+ - lib/generators/css_zero/add/templates/app/javascript/controllers/chart_controller.js
91
92
  - lib/generators/css_zero/add/templates/app/javascript/controllers/check_all_controller.js
92
93
  - lib/generators/css_zero/add/templates/app/javascript/controllers/clearable_input_controller.js
93
94
  - lib/generators/css_zero/add/templates/app/javascript/controllers/collapsible_controller.js