css-zero 0.0.77 → 0.0.79
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 +0 -3
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/layouts.css +2 -12
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/popover.css +2 -17
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/table.css +1 -1
- data/lib/generators/css_zero/add/templates/app/javascript/controllers/popover_controller.js +22 -28
- metadata +2 -4
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/tooltip.css +0 -22
- data/lib/generators/css_zero/add/templates/app/javascript/controllers/tooltip_controller.js +0 -14
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: ac5381f999fc236eaa78ad29eb8a89ee368cbb1414740bf14fbda48793a74118
|
|
4
|
+
data.tar.gz: dfbd29593d603f29321d5a015a1016af4868b5d0ffaf0161bf7a3161de227684
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 7fc56726cef33481158b4aca435b109b8f277ab1079e1c1efbcf6067d9101d47ef8bc25ea27df22ecadb3c5363186e0b1530ebc04f8c19fcee40b97001a5952f
|
|
7
|
+
data.tar.gz: 2d3edb86abcd3440ab003b4cd57981a5e28776113ddd1cccd9a83df20a2270627b25899e0dc0e00cd87b198403ac932388ace41276c030fd7465abae73d6f463
|
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 autoanimate autosave avatar badge breadcrumb button card carousel chart check_all combobox command collapsible datepicker dialog dropdown flash form fullscreen group hotkey input input_concerns inputmask layouts lightbox local_time navigation pagination progress prose sheet skeleton sortable switch table tabs
|
|
5
|
+
accordion alert autoanimate autosave avatar badge breadcrumb button card carousel chart check_all combobox command collapsible datepicker dialog dropdown flash form fullscreen group hotkey input input_concerns inputmask layouts lightbox local_time navigation pagination progress prose sheet skeleton sortable switch table tabs trix upload_preview toggle web_share
|
|
6
6
|
|
|
7
7
|
Example:
|
|
8
8
|
bin/rails generate css_zero:add [components...]
|
|
@@ -120,9 +120,6 @@ table:
|
|
|
120
120
|
tabs:
|
|
121
121
|
- app/assets/stylesheets/tabs.css
|
|
122
122
|
- app/javascript/controllers/tabs_controller.js
|
|
123
|
-
tooltip:
|
|
124
|
-
- app/assets/stylesheets/tooltip.css
|
|
125
|
-
- app/javascript/controllers/tooltip_controller.js
|
|
126
123
|
trix:
|
|
127
124
|
- app/assets/stylesheets/ztrix.css
|
|
128
125
|
upload_preview:
|
|
@@ -7,13 +7,11 @@
|
|
|
7
7
|
|
|
8
8
|
@media (width >= 48rem) {
|
|
9
9
|
--sidebar-border-width: var(--border);
|
|
10
|
-
--sidebar-padding: var(--size-2);
|
|
11
10
|
--sidebar-width: 220px;
|
|
12
11
|
}
|
|
13
12
|
|
|
14
13
|
@media (width >= 64rem) {
|
|
15
14
|
--sidebar-border-width: var(--border);
|
|
16
|
-
--sidebar-padding: var(--size-4);
|
|
17
15
|
--sidebar-width: 280px;
|
|
18
16
|
}
|
|
19
17
|
}
|
|
@@ -43,13 +41,9 @@
|
|
|
43
41
|
border-block-end-width: var(--border);
|
|
44
42
|
block-size: var(--size-16);
|
|
45
43
|
display: flex;
|
|
46
|
-
gap: var(--size-
|
|
44
|
+
gap: var(--size-2);
|
|
47
45
|
grid-area: header;
|
|
48
46
|
padding-inline: var(--size-4);
|
|
49
|
-
|
|
50
|
-
@media (width >= 64rem) {
|
|
51
|
-
padding-inline: var(--size-6);
|
|
52
|
-
}
|
|
53
47
|
}
|
|
54
48
|
|
|
55
49
|
#sidebar {
|
|
@@ -60,7 +54,7 @@
|
|
|
60
54
|
grid-area: sidebar;
|
|
61
55
|
gap: var(--size-2);
|
|
62
56
|
overflow-x: hidden;
|
|
63
|
-
padding: var(--
|
|
57
|
+
padding: var(--size-2);
|
|
64
58
|
}
|
|
65
59
|
|
|
66
60
|
#main {
|
|
@@ -70,8 +64,4 @@
|
|
|
70
64
|
grid-area: main;
|
|
71
65
|
overflow: auto;
|
|
72
66
|
padding: var(--size-4);
|
|
73
|
-
|
|
74
|
-
@media (width >= 64rem) {
|
|
75
|
-
gap: var(--size-6); padding: var(--size-6);
|
|
76
|
-
}
|
|
77
67
|
}
|
|
@@ -4,10 +4,7 @@
|
|
|
4
4
|
border-width: var(--border);
|
|
5
5
|
box-shadow: var(--shadow-md);
|
|
6
6
|
color: var(--color-text);
|
|
7
|
-
margin-block: var(--size-1);
|
|
8
7
|
inline-size: var(--popover-size, max-content);
|
|
9
|
-
inset-inline-start: var(--popover-position, 0);
|
|
10
|
-
z-index: 1;
|
|
11
8
|
|
|
12
9
|
/* Setup animation */
|
|
13
10
|
opacity: 0;
|
|
@@ -17,26 +14,14 @@
|
|
|
17
14
|
transition-property: display, overlay, opacity, transform;
|
|
18
15
|
|
|
19
16
|
/* In animation */
|
|
20
|
-
|
|
17
|
+
&:popover-open {
|
|
21
18
|
opacity: 1; transform: var(--scale-100);
|
|
22
19
|
}
|
|
23
20
|
|
|
24
21
|
/* Out animation */
|
|
25
22
|
@starting-style {
|
|
26
|
-
|
|
23
|
+
&:popover-open {
|
|
27
24
|
opacity: 0; transform: var(--scale-95);
|
|
28
25
|
}
|
|
29
26
|
}
|
|
30
27
|
}
|
|
31
|
-
|
|
32
|
-
.popover--flip {
|
|
33
|
-
inset-block-end: 100%;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
.popover--start {
|
|
37
|
-
--popover-position: 0;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
.popover--end {
|
|
41
|
-
--popover-position: auto;
|
|
42
|
-
}
|
|
@@ -1,43 +1,37 @@
|
|
|
1
1
|
import { Controller } from "@hotwired/stimulus"
|
|
2
|
-
|
|
3
|
-
const BOTTOM_THRESHOLD = 0
|
|
2
|
+
import { computePosition, flip, shift, offset, autoUpdate } from "https://cdn.skypack.dev/@floating-ui/dom@1.6.12?min"
|
|
4
3
|
|
|
5
4
|
export default class extends Controller {
|
|
6
5
|
static targets = [ "button", "menu" ]
|
|
7
|
-
static
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
this.
|
|
11
|
-
this.#updateExpanded()
|
|
12
|
-
this.#orient()
|
|
6
|
+
static values = { placement: { type: String, default: "bottom" } }
|
|
7
|
+
|
|
8
|
+
initialize() {
|
|
9
|
+
this.orient = this.orient.bind(this)
|
|
13
10
|
}
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
this.menuTarget.
|
|
17
|
-
this.#updateExpanded()
|
|
11
|
+
|
|
12
|
+
connect() {
|
|
13
|
+
this.cleanup = autoUpdate(this.buttonTarget, this.menuTarget, this.orient)
|
|
18
14
|
}
|
|
19
15
|
|
|
20
|
-
|
|
21
|
-
this.
|
|
16
|
+
disconnect() {
|
|
17
|
+
this.cleanup()
|
|
22
18
|
}
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
#orient() {
|
|
29
|
-
this.menuTarget.classList.toggle(this.flipClass, this.#distanceToBottom < BOTTOM_THRESHOLD)
|
|
19
|
+
|
|
20
|
+
show() {
|
|
21
|
+
this.menuTarget.showPopover()
|
|
30
22
|
}
|
|
31
23
|
|
|
32
|
-
|
|
33
|
-
this.
|
|
24
|
+
hide() {
|
|
25
|
+
this.menuTarget.hidePopover()
|
|
34
26
|
}
|
|
35
27
|
|
|
36
|
-
|
|
37
|
-
|
|
28
|
+
orient() {
|
|
29
|
+
computePosition(this.buttonTarget, this.menuTarget, this.#options).then(({x, y}) => {
|
|
30
|
+
Object.assign(this.menuTarget.style, { insetInlineStart: `${x}px`, insetBlockStart: `${y}px` })
|
|
31
|
+
})
|
|
38
32
|
}
|
|
39
|
-
|
|
40
|
-
get #
|
|
41
|
-
return this.
|
|
33
|
+
|
|
34
|
+
get #options() {
|
|
35
|
+
return { placement: this.placementValue, middleware: [offset(4), flip(), shift({padding: 4})] }
|
|
42
36
|
}
|
|
43
37
|
}
|
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.79
|
|
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:
|
|
11
|
+
date: 2025-01-05 00:00:00.000000000 Z
|
|
12
12
|
dependencies: []
|
|
13
13
|
description:
|
|
14
14
|
email: lazaronixon@hotmail.com
|
|
@@ -84,7 +84,6 @@ files:
|
|
|
84
84
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/tabs.css
|
|
85
85
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/toggle.css
|
|
86
86
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/tom-select.css
|
|
87
|
-
- lib/generators/css_zero/add/templates/app/assets/stylesheets/tooltip.css
|
|
88
87
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/zcombobox.css
|
|
89
88
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/zdatepicker.css
|
|
90
89
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/ztrix.css
|
|
@@ -115,7 +114,6 @@ files:
|
|
|
115
114
|
- lib/generators/css_zero/add/templates/app/javascript/controllers/revealable_input_controller.js
|
|
116
115
|
- lib/generators/css_zero/add/templates/app/javascript/controllers/sortable_controller.js
|
|
117
116
|
- lib/generators/css_zero/add/templates/app/javascript/controllers/tabs_controller.js
|
|
118
|
-
- lib/generators/css_zero/add/templates/app/javascript/controllers/tooltip_controller.js
|
|
119
117
|
- lib/generators/css_zero/add/templates/app/javascript/controllers/upload_preview_controller.js
|
|
120
118
|
- lib/generators/css_zero/add/templates/app/javascript/controllers/web_share_controller.js
|
|
121
119
|
- lib/generators/css_zero/authentication/authentication_generator.rb
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
.tippy-box {
|
|
2
|
-
background-color: var(--color-bg);
|
|
3
|
-
border: 1px solid var(--color-border);
|
|
4
|
-
border-radius: var(--rounded-md);
|
|
5
|
-
box-shadow: var(--shadow-md);
|
|
6
|
-
color: var(--color-text);
|
|
7
|
-
font-size: var(--text-sm);
|
|
8
|
-
line-height: var(--leading-normal);
|
|
9
|
-
transition-property: transform, visibility, opacity;
|
|
10
|
-
|
|
11
|
-
&[data-state=hidden] {
|
|
12
|
-
opacity: 0;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
&[data-state=visible] {
|
|
16
|
-
transition-timing-function: var(--ease-in);
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
.tippy-content {
|
|
20
|
-
padding: var(--size-1_5) var(--size-3);
|
|
21
|
-
}
|
|
22
|
-
}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { Controller } from "@hotwired/stimulus"
|
|
2
|
-
import tippy from "https://cdn.skypack.dev/tippy.js@6.3.7?min"
|
|
3
|
-
|
|
4
|
-
export default class extends Controller {
|
|
5
|
-
static values = { content: String }
|
|
6
|
-
|
|
7
|
-
connect() {
|
|
8
|
-
this.tooltip = tippy(this.element, { content: this.contentValue, arrow: false, interactive: true, delay: [700, 0], offset: [0, 3] })
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
disconnect() {
|
|
12
|
-
this.tooltip.destroy()
|
|
13
|
-
}
|
|
14
|
-
}
|