css-zero 0.0.51 → 0.0.53
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/assets/stylesheets/_reset.css +1 -1
- 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 -0
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/badge.css +2 -2
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/zcombobox.css +1 -0
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/ztrix.css +1 -1
- data/lib/generators/css_zero/add/templates/app/javascript/controllers/autosave_controller.js +64 -0
- data/lib/generators/css_zero/add/templates/app/javascript/controllers/combobox_controller.js +4 -4
- data/lib/generators/css_zero/add/templates/app/javascript/controllers/inputmask_controller.js +46 -0
- data/lib/generators/css_zero/install/templates/app/assets/stylesheets/base.css +9 -9
- metadata +4 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: a72defe42c53e4ac968ad017ddeb0c5970eac4e0a09ed1020e6b90ff3a6c6ebb
|
|
4
|
+
data.tar.gz: 05d5825c6877fda791e327c798f38d0a6439e61498f119f293f9cc0099e3917c
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 7bb725692ed68662630937439825131b9414711d1d08706bbb54c3c9f4c06bdba2f6a4fa27bd7af1b03f8a5dcebe295cd30209e2c48d7f3c73899a4b45f82d8a
|
|
7
|
+
data.tar.gz: 8e669345840292d54b0752d8f68adf428b65bd280b3cfcf47682d961072632ea45e93bbe3935ecf009e1278594d1f45c97b4bcc68174f3d8001f92ae4024c2b6
|
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 avatar badge breadcrumb button card carousel combobox check_all command collapsible dialog dropdown flash form fullscreen hotkey input input_concerns 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 combobox check_all command collapsible 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...]
|
|
@@ -3,6 +3,8 @@ accordion:
|
|
|
3
3
|
- app/assets/images/chevron-down.svg
|
|
4
4
|
alert:
|
|
5
5
|
- app/assets/stylesheets/alert.css
|
|
6
|
+
autosave:
|
|
7
|
+
- app/javascript/controllers/autosave_controller.js
|
|
6
8
|
avatar:
|
|
7
9
|
- app/assets/stylesheets/avatar.css
|
|
8
10
|
badge:
|
|
@@ -65,6 +67,8 @@ input_concerns:
|
|
|
65
67
|
- app/javascript/controllers/revealable_input_controller.js
|
|
66
68
|
- app/assets/images/eye.svg
|
|
67
69
|
- app/assets/images/eye-off.svg
|
|
70
|
+
inputmask:
|
|
71
|
+
- app/javascript/controllers/inputmask_controller.js
|
|
68
72
|
layouts:
|
|
69
73
|
- app/assets/stylesheets/layouts.css
|
|
70
74
|
- app/assets/images/menu.svg
|
|
@@ -24,11 +24,11 @@
|
|
|
24
24
|
.badge--positive {
|
|
25
25
|
--badge-background: var(--color-positive);
|
|
26
26
|
--badge-border-color: transparent;
|
|
27
|
-
--badge-color:
|
|
27
|
+
--badge-color: var(--color-text-reversed);
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
.badge--negative {
|
|
31
31
|
--badge-background: var(--color-negative);
|
|
32
32
|
--badge-border-color: transparent;
|
|
33
|
-
--badge-color:
|
|
33
|
+
--badge-color: var(--color-text-reversed);
|
|
34
34
|
}
|
|
@@ -66,7 +66,7 @@ trix-editor {
|
|
|
66
66
|
padding-block: var(--size-6) var(--size-2);
|
|
67
67
|
|
|
68
68
|
&:empty:not(:focus)::before {
|
|
69
|
-
color: color-mix(in
|
|
69
|
+
color: color-mix(in oklch, currentColor 50%, transparent);
|
|
70
70
|
}
|
|
71
71
|
|
|
72
72
|
[data-trix-mutable].attachment img,
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import { Controller } from "@hotwired/stimulus"
|
|
2
|
+
import { FetchRequest } from "@rails/request.js"
|
|
3
|
+
|
|
4
|
+
const AUTOSAVE_INTERVAL = 3000
|
|
5
|
+
|
|
6
|
+
export default class extends Controller {
|
|
7
|
+
static targets = [ "submitter" ]
|
|
8
|
+
|
|
9
|
+
#timer
|
|
10
|
+
|
|
11
|
+
disconnect() {
|
|
12
|
+
this.#submit()
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
change() {
|
|
16
|
+
!this.#dirty && this.#scheduleSave()
|
|
17
|
+
!this.#dirty && this.#updateAppearance()
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
async #submit() {
|
|
21
|
+
this.#dirty && await this.#save()
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
async #save() {
|
|
25
|
+
this.#updateAppearance(true)
|
|
26
|
+
this.#resetTimer()
|
|
27
|
+
await submitForm(this.element)
|
|
28
|
+
this.#updateAppearance()
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
#updateAppearance(saving = false) {
|
|
32
|
+
if (saving) {
|
|
33
|
+
this.element.setAttribute("aria-busy", true)
|
|
34
|
+
this.submitterTarget.setAttribute("aria-disabled", true)
|
|
35
|
+
this.submitterTarget.disabled = true
|
|
36
|
+
} else {
|
|
37
|
+
this.element.removeAttribute("aria-busy")
|
|
38
|
+
this.submitterTarget.removeAttribute("aria-disabled")
|
|
39
|
+
this.submitterTarget.disabled = false
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
#scheduleSave() {
|
|
44
|
+
this.#timer = setTimeout(() => this.#save(), AUTOSAVE_INTERVAL)
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
#resetTimer() {
|
|
48
|
+
clearTimeout(this.#timer); this.#timer = null
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
get #dirty() {
|
|
52
|
+
return !!this.#timer
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
// Helpers
|
|
57
|
+
|
|
58
|
+
async function submitForm(form) {
|
|
59
|
+
const request = new FetchRequest(form.method, form.action, {
|
|
60
|
+
body: new FormData(form)
|
|
61
|
+
})
|
|
62
|
+
|
|
63
|
+
return await request.perform()
|
|
64
|
+
}
|
data/lib/generators/css_zero/add/templates/app/javascript/controllers/combobox_controller.js
CHANGED
|
@@ -3,7 +3,7 @@ import { get } from "@rails/request.js"
|
|
|
3
3
|
import TomSelect from "tom-select"
|
|
4
4
|
|
|
5
5
|
export default class extends Controller {
|
|
6
|
-
static values = { url: String,
|
|
6
|
+
static values = { url: String, optionCreate: { type: String, default: "Add" }, noResults: { type: String, default: "No results found" } }
|
|
7
7
|
|
|
8
8
|
initialize() {
|
|
9
9
|
this.load = this.load.bind(this)
|
|
@@ -28,17 +28,17 @@ export default class extends Controller {
|
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
get #inputSettings() {
|
|
31
|
-
return { render: this.#render, load:
|
|
31
|
+
return { render: this.#render, load: this.hasUrlValue && this.load, persist: false, createOnBlur: true, create: true }
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
get #selectSettings() {
|
|
35
|
-
return { render: this.#render, load:
|
|
35
|
+
return { render: this.#render, load: this.hasUrlValue && this.load }
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
get #render() {
|
|
39
39
|
return {
|
|
40
40
|
option_create: (data, escape) => {
|
|
41
|
-
return `<div class="create">${this.
|
|
41
|
+
return `<div class="create">${this.optionCreateValue} <b>${escape(data.input)}</b>...</div>`
|
|
42
42
|
},
|
|
43
43
|
no_results: () => {
|
|
44
44
|
return `<div class="no-results">${this.noResultsValue}</div>`
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { Controller } from "@hotwired/stimulus"
|
|
2
|
+
import Inputmask from "inputmask"
|
|
3
|
+
|
|
4
|
+
export default class extends Controller {
|
|
5
|
+
static values = {
|
|
6
|
+
mask: String,
|
|
7
|
+
alias: String,
|
|
8
|
+
groupSeparator: { type: String, default: "" },
|
|
9
|
+
radixPoint: { type: String, default: "." },
|
|
10
|
+
digits: { type: String, default: "*" },
|
|
11
|
+
digitsOptional: { type: Boolean, default: true },
|
|
12
|
+
inputFormat: { type: String, default: "mm/dd/yyyy HH:MM" },
|
|
13
|
+
outputFormat: { type: String, default: "yyyy-mm-dd HH:MM" }
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
connect() {
|
|
17
|
+
if (this.hasMaskValue) {
|
|
18
|
+
Inputmask.default({ mask: this.maskValue }).mask(this.element)
|
|
19
|
+
} else if (this.aliasValue == "numeric") {
|
|
20
|
+
Inputmask.default(this.#numericOptions).mask(this.element)
|
|
21
|
+
} else if (this.aliasValue == "datetime") {
|
|
22
|
+
Inputmask.default(this.#datetimeOptions).mask(this.element)
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
get #numericOptions() {
|
|
27
|
+
return {
|
|
28
|
+
alias: "numeric",
|
|
29
|
+
unmaskAsNumber: true,
|
|
30
|
+
removeMaskOnSubmit: true,
|
|
31
|
+
groupSeparator: this.groupSeparatorValue,
|
|
32
|
+
radixPoint: this.radixPointValue,
|
|
33
|
+
digits: this.digitsValue,
|
|
34
|
+
digitsOptional: this.digitsOptionalValue
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
get #datetimeOptions() {
|
|
39
|
+
return {
|
|
40
|
+
alias: "datetime",
|
|
41
|
+
removeMaskOnSubmit: true,
|
|
42
|
+
inputFormat: this.inputFormatValue,
|
|
43
|
+
outputFormat: this.outputFormatValue
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
/* Abstractions */
|
|
3
3
|
--color-bg: white;
|
|
4
|
-
--color-text:
|
|
4
|
+
--color-text: black;
|
|
5
5
|
--color-text-reversed: white;
|
|
6
6
|
--color-text-subtle: var(--zinc-500);
|
|
7
7
|
--color-link: var(--blue-700);
|
|
@@ -18,17 +18,17 @@
|
|
|
18
18
|
--color-positive: var(--green-600);
|
|
19
19
|
|
|
20
20
|
/* SVG color values */
|
|
21
|
-
--color-filter-text: invert(
|
|
22
|
-
--color-filter-text-reversed: invert(
|
|
21
|
+
--color-filter-text: invert(0);
|
|
22
|
+
--color-filter-text-reversed: invert(1);
|
|
23
23
|
--color-filter-text-subtle: invert(46%) sepia(8%) saturate(371%) hue-rotate(202deg) brightness(93%) contrast(85%);
|
|
24
24
|
--color-filter-negative: invert(22%) sepia(85%) saturate(1790%) hue-rotate(339deg) brightness(105%) contrast(108%);
|
|
25
25
|
--color-filter-positive: invert(44%) sepia(89%) saturate(409%) hue-rotate(89deg) brightness(94%) contrast(97%);
|
|
26
26
|
|
|
27
27
|
@media (prefers-color-scheme: dark) {
|
|
28
28
|
/* Abstractions */
|
|
29
|
-
--color-bg:
|
|
29
|
+
--color-bg: black;
|
|
30
30
|
--color-text: white;
|
|
31
|
-
--color-text-reversed:
|
|
31
|
+
--color-text-reversed: black;
|
|
32
32
|
--color-text-subtle: var(--zinc-400);
|
|
33
33
|
--color-link: var(--sky-400);
|
|
34
34
|
--color-border-light: var(--zinc-800);
|
|
@@ -44,11 +44,11 @@
|
|
|
44
44
|
--color-positive: var(--green-400);
|
|
45
45
|
|
|
46
46
|
/* SVG color values */
|
|
47
|
-
--color-filter-text: invert(
|
|
48
|
-
--color-filter-text-reversed: invert(
|
|
47
|
+
--color-filter-text: invert(1);
|
|
48
|
+
--color-filter-text-reversed: invert(0);
|
|
49
49
|
--color-filter-text-subtle: invert(76%) sepia(8%) saturate(230%) hue-rotate(201deg) brightness(84%) contrast(87%);
|
|
50
|
-
--color-filter-negative: invert(
|
|
51
|
-
--color-filter-positive: invert(
|
|
50
|
+
--color-filter-negative: invert(54%) sepia(16%) saturate(2119%) hue-rotate(313deg) brightness(111%) contrast(94%);
|
|
51
|
+
--color-filter-positive: invert(81%) sepia(23%) saturate(1237%) hue-rotate(80deg) brightness(95%) contrast(83%);
|
|
52
52
|
}
|
|
53
53
|
}
|
|
54
54
|
|
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.53
|
|
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-
|
|
11
|
+
date: 2024-10-27 00:00:00.000000000 Z
|
|
12
12
|
dependencies: []
|
|
13
13
|
description:
|
|
14
14
|
email: lazaronixon@hotmail.com
|
|
@@ -83,6 +83,7 @@ files:
|
|
|
83
83
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/tom-select.css
|
|
84
84
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/zcombobox.css
|
|
85
85
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/ztrix.css
|
|
86
|
+
- lib/generators/css_zero/add/templates/app/javascript/controllers/autosave_controller.js
|
|
86
87
|
- lib/generators/css_zero/add/templates/app/javascript/controllers/autoselect_controller.js
|
|
87
88
|
- lib/generators/css_zero/add/templates/app/javascript/controllers/carousel_controller.js
|
|
88
89
|
- lib/generators/css_zero/add/templates/app/javascript/controllers/check_all_controller.js
|
|
@@ -96,6 +97,7 @@ files:
|
|
|
96
97
|
- lib/generators/css_zero/add/templates/app/javascript/controllers/form_controller.js
|
|
97
98
|
- lib/generators/css_zero/add/templates/app/javascript/controllers/fullscreen_controller.js
|
|
98
99
|
- lib/generators/css_zero/add/templates/app/javascript/controllers/hotkey_controller.js
|
|
100
|
+
- lib/generators/css_zero/add/templates/app/javascript/controllers/inputmask_controller.js
|
|
99
101
|
- lib/generators/css_zero/add/templates/app/javascript/controllers/lightbox_controller.js
|
|
100
102
|
- lib/generators/css_zero/add/templates/app/javascript/controllers/list_controller.js
|
|
101
103
|
- lib/generators/css_zero/add/templates/app/javascript/controllers/local_time_controller.js
|