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 +4 -4
- data/lib/css_zero/version.rb +1 -1
- data/lib/generators/css_zero/add/USAGE +1 -1
- data/lib/generators/css_zero/add/resources.yml +4 -2
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/accordion.css +2 -2
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/input.css +1 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/zcombobox.css +3 -3
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/zdatepicker.css +7 -5
- data/lib/generators/css_zero/add/templates/app/javascript/controllers/autosave_controller.js +2 -2
- data/lib/generators/css_zero/add/templates/app/javascript/controllers/chart_controller.js +33 -0
- data/lib/generators/css_zero/add/templates/app/javascript/controllers/combobox_controller.js +8 -4
- data/lib/generators/css_zero/add/templates/app/javascript/controllers/datepicker_controller.js +8 -17
- data/lib/generators/css_zero/add/templates/app/javascript/controllers/inputmask_controller.js +8 -4
- metadata +3 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: dda2e775427e1ef39365fd7d86e67435f9a7b9537772871544b05f675ef1fab3
|
4
|
+
data.tar.gz: 382243e0f4441e706606aac3b8a646b163ef38642e17dcc9a620358b8925a3aa
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 5b44ccc95deabacf46b16f71f2ce72112104d3c4dc223bcb9f73e2ac7ad354e95cf18ee2efd07e236f7e5ba674d8d1b3b9ae38a47193ef144b68330df30eefdd
|
7
|
+
data.tar.gz: 63c113d51c33d46a9d26a3e73865f201d1083cae21797eb2b2d9b22f29e307bb94079b104c163d9fb49c0982e22fa8febefefba798a82481f6cf490c3be239d6
|
data/lib/css_zero/version.rb
CHANGED
@@ -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
|
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
|
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
|
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-
|
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:
|
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
|
-
|
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
|
-
|
124
|
-
height: var(--size
|
125
|
-
|
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(
|
data/lib/generators/css_zero/add/templates/app/javascript/controllers/autosave_controller.js
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
import { Controller } from "@hotwired/stimulus"
|
2
|
-
import { FetchRequest } from "
|
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
|
+
}
|
data/lib/generators/css_zero/add/templates/app/javascript/controllers/combobox_controller.js
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
import { Controller } from "@hotwired/stimulus"
|
2
|
-
import { get } from "
|
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
|
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
|
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
|
}
|
data/lib/generators/css_zero/add/templates/app/javascript/controllers/datepicker_controller.js
CHANGED
@@ -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
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
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
|
+
}
|
data/lib/generators/css_zero/add/templates/app/javascript/controllers/inputmask_controller.js
CHANGED
@@ -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
|
18
|
+
Inputmask({ mask: this.maskValue }).mask(this.element)
|
19
19
|
} else if (this.aliasValue == "numeric") {
|
20
|
-
Inputmask
|
20
|
+
Inputmask(this.#numericOptions).mask(this.element)
|
21
21
|
} else if (this.aliasValue == "datetime") {
|
22
|
-
Inputmask
|
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.
|
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-
|
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
|