@cocreate/events 1.27.0 → 1.27.1
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.
- package/CHANGELOG.md +11 -0
- package/demo/click.html +83 -83
- package/demo/hover.html +65 -65
- package/demo/index.html +124 -124
- package/demo/observer.html +36 -33
- package/demo/selected.html +78 -78
- package/demo/set-value.html +2 -2
- package/docs/index.html +350 -346
- package/package.json +8 -12
- package/src/index.js +86 -57
- package/webpack.config.js +65 -90
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
## [1.27.1](https://github.com/CoCreate-app/CoCreate-events/compare/v1.27.0...v1.27.1) (2025-04-30)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* added css-loader ([bc0861e](https://github.com/CoCreate-app/CoCreate-events/commit/bc0861e3c58e72dee5c02353142528243e40bf4c))
|
|
7
|
+
* build error ([f2f1774](https://github.com/CoCreate-app/CoCreate-events/commit/f2f1774b4808abe3953e4279cef509c1daab7ee7))
|
|
8
|
+
* update query attributes ([5acc01b](https://github.com/CoCreate-app/CoCreate-events/commit/5acc01b00729265f24be91a5255e51a31f2496d3))
|
|
9
|
+
* updated cocreate modules versions ([a3c9613](https://github.com/CoCreate-app/CoCreate-events/commit/a3c9613380c4eae9bcca2b6290d09627b4bd468e))
|
|
10
|
+
* webpack.config and devdependencies ([0e101a7](https://github.com/CoCreate-app/CoCreate-events/commit/0e101a79632f4fc09c73b6b8382f56fb6c6a8647))
|
|
11
|
+
|
|
1
12
|
# [1.27.0](https://github.com/CoCreate-app/CoCreate-events/compare/v1.26.0...v1.27.0) (2025-04-11)
|
|
2
13
|
|
|
3
14
|
|
package/demo/click.html
CHANGED
|
@@ -1,91 +1,91 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en">
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
<head>
|
|
4
|
+
<title>Events | CoCreateJS</title>
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
6
|
+
<!-- CoCreate Favicon -->
|
|
7
|
+
<link
|
|
8
|
+
rel="icon"
|
|
9
|
+
type="image/png"
|
|
10
|
+
sizes="32x32"
|
|
11
|
+
href="../assets/favicon.ico" />
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
13
|
+
<!-- Custom CSS -->
|
|
14
|
+
<style type="text/css">
|
|
15
|
+
.test {
|
|
16
|
+
background: red;
|
|
17
|
+
}
|
|
18
|
+
.new {
|
|
19
|
+
background: yellow;
|
|
20
|
+
}
|
|
21
|
+
.active {
|
|
22
|
+
background-color: blue;
|
|
23
|
+
}
|
|
24
|
+
.hidden {
|
|
25
|
+
display: none;
|
|
26
|
+
}
|
|
27
|
+
</style>
|
|
28
|
+
<link rel="manifest" href="/manifest.webmanifest" />
|
|
29
|
+
</head>
|
|
30
|
+
<body>
|
|
31
|
+
<div click="active" class="test">
|
|
32
|
+
hhh
|
|
33
|
+
<!--<div class="test">click me</div><br/>-->
|
|
34
|
+
</div>
|
|
35
35
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
36
|
+
<i
|
|
37
|
+
class="fas fa-plus-circle"
|
|
38
|
+
click="fa-minus-circle, fa-plus-circle"></i>
|
|
39
39
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
40
|
+
<article>
|
|
41
|
+
<div id="div-01" class="vdom-item">
|
|
42
|
+
<p>Here is div-01 i should get class hidden</p>
|
|
43
|
+
<div>
|
|
44
|
+
<div class="vdom-item">some content1</div>
|
|
45
|
+
<span click="test" click-query="$closest .vdom-item"
|
|
46
|
+
><i class="height:16px" src="/assets/svg/caret-down.svg"
|
|
47
|
+
>test</i
|
|
48
|
+
></span
|
|
49
|
+
>
|
|
50
|
+
</div>
|
|
51
|
+
<div class="vdom-item">some content2</div>
|
|
52
|
+
</div>
|
|
53
|
+
<div class="vdom-item">some content3</div>
|
|
54
|
+
<div id="div-03">Here is div-03</div>
|
|
55
|
+
</article>
|
|
56
|
+
<br />
|
|
57
|
+
<hr />
|
|
58
|
+
<div class="vdom-item" click="active" click-query="article > div">
|
|
59
|
+
some content
|
|
60
|
+
</div>
|
|
61
|
+
<br />
|
|
62
|
+
<hr />
|
|
63
|
+
<div
|
|
64
|
+
class="vdom-item"
|
|
65
|
+
click-attribute="class"
|
|
66
|
+
click="active"
|
|
67
|
+
click-query=".vdom-item">
|
|
68
|
+
click for active
|
|
69
|
+
</div>
|
|
70
|
+
<br />
|
|
71
|
+
<hr />
|
|
72
|
+
TEST HERE
|
|
73
|
+
<div
|
|
74
|
+
class="vdom-item"
|
|
75
|
+
id="hey"
|
|
76
|
+
data-test=""
|
|
77
|
+
click-attribute="value"
|
|
78
|
+
click-query="#tester"
|
|
79
|
+
click-value="active, other, hi, jean">
|
|
80
|
+
some content
|
|
81
|
+
</div>
|
|
82
|
+
<form>
|
|
83
|
+
<input id="tester" />
|
|
84
|
+
<a actions="reset">reset</a>
|
|
85
|
+
</form>
|
|
86
86
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
87
|
+
<!-- <script src="../dist/CoCreate-events.js"></script> -->
|
|
88
|
+
<!-- <script src="../../../CoCreateJS/dist/CoCreate.js"></script> -->
|
|
89
|
+
<script src="https://CoCreate.app/dist/CoCreate.js"></script>
|
|
90
|
+
</body>
|
|
91
91
|
</html>
|
package/demo/hover.html
CHANGED
|
@@ -1,72 +1,72 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en">
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
<head>
|
|
4
|
+
<title>Hover | CoCreateJS</title>
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
6
|
+
<!-- Custom CSS -->
|
|
7
|
+
<style type="text/css">
|
|
8
|
+
.test {
|
|
9
|
+
background: red;
|
|
10
|
+
}
|
|
11
|
+
.new {
|
|
12
|
+
background: yellow;
|
|
13
|
+
}
|
|
14
|
+
.active {
|
|
15
|
+
background-color: blue;
|
|
16
|
+
}
|
|
17
|
+
.hidden {
|
|
18
|
+
display: none;
|
|
19
|
+
}
|
|
20
|
+
</style>
|
|
21
|
+
<link rel="manifest" href="/manifest.webmanifest" />
|
|
22
|
+
</head>
|
|
23
|
+
<body>
|
|
24
|
+
<div hover="active" class="test">
|
|
25
|
+
hhh
|
|
26
|
+
<!--<div class="test">click me</div><br/>-->
|
|
27
|
+
</div>
|
|
28
28
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
29
|
+
<article>
|
|
30
|
+
<div id="div-01" class="vdom-item">
|
|
31
|
+
<p>Here is div-01 i should get class hidden</p>
|
|
32
|
+
<div>
|
|
33
|
+
<div class="vdom-item">some content1</div>
|
|
34
|
+
<span hover="test" hover-query="$closest .vdom-item"
|
|
35
|
+
><i
|
|
36
|
+
class="height:16px"
|
|
37
|
+
src="/assets/svg/caret-down.svg"></i
|
|
38
|
+
></span>
|
|
39
|
+
</div>
|
|
40
|
+
<div class="vdom-item">some content2</div>
|
|
41
|
+
</div>
|
|
42
|
+
<div class="vdom-item">some content3</div>
|
|
43
|
+
<div id="div-03">Here is div-03</div>
|
|
44
|
+
</article>
|
|
45
|
+
<br />
|
|
46
|
+
<hr />
|
|
47
|
+
<div class="vdom-item" hover="active" hover-query="article > div">
|
|
48
|
+
some content
|
|
49
|
+
</div>
|
|
50
|
+
<br />
|
|
51
|
+
<hr />
|
|
52
|
+
<div
|
|
53
|
+
class="vdom-item"
|
|
54
|
+
hover-attribute="class"
|
|
55
|
+
hover="active"
|
|
56
|
+
hover-query=".vdom-item">
|
|
57
|
+
click for active
|
|
58
|
+
</div>
|
|
59
59
|
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
60
|
+
<div
|
|
61
|
+
class="vdom-item"
|
|
62
|
+
id="hey"
|
|
63
|
+
data-test=""
|
|
64
|
+
hover-attribute="data-test"
|
|
65
|
+
hover="active, other, hi, jean">
|
|
66
|
+
some content
|
|
67
|
+
</div>
|
|
68
68
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
69
|
+
<!--<script src="../dist/CoCreate-events.js"></script>-->
|
|
70
|
+
<script src="https://CoCreate.app/dist/CoCreate.js"></script>
|
|
71
|
+
</body>
|
|
72
72
|
</html>
|
package/demo/index.html
CHANGED
|
@@ -1,135 +1,135 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en">
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
<head>
|
|
4
|
+
<title>Events | CoCreateJS</title>
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
6
|
+
<!-- CoCreate Favicon -->
|
|
7
|
+
<link
|
|
8
|
+
rel="icon"
|
|
9
|
+
type="image/png"
|
|
10
|
+
sizes="32x32"
|
|
11
|
+
href="../assets/favicon.ico" />
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
13
|
+
<!-- Custom CSS -->
|
|
14
|
+
<style type="text/css">
|
|
15
|
+
.test {
|
|
16
|
+
background: red;
|
|
17
|
+
}
|
|
18
|
+
.new {
|
|
19
|
+
background: yellow;
|
|
20
|
+
}
|
|
21
|
+
.active {
|
|
22
|
+
background-color: blue;
|
|
23
|
+
}
|
|
24
|
+
.hidden {
|
|
25
|
+
display: none;
|
|
26
|
+
}
|
|
27
|
+
</style>
|
|
28
|
+
<link rel="manifest" href="/manifest.webmanifest" />
|
|
29
|
+
</head>
|
|
30
|
+
<body>
|
|
31
|
+
<div toggle="active" class="test">
|
|
32
|
+
hhh
|
|
33
|
+
<!--<div class="test">click me</div><br/>-->
|
|
34
|
+
</div>
|
|
35
35
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
36
|
+
<i
|
|
37
|
+
class="fas fa-plus-circle"
|
|
38
|
+
toggle="fa-minus-circle, fa-plus-circle"></i>
|
|
39
39
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
40
|
+
<article>
|
|
41
|
+
<div id="div-01" class="vdom-item">
|
|
42
|
+
<p>Here is div-01 i should get class hidden</p>
|
|
43
|
+
<div>
|
|
44
|
+
<div class="vdom-item">some content1</div>
|
|
45
|
+
<span toggle="test" toggle-query="$closest .vdom-item">
|
|
46
|
+
<i
|
|
47
|
+
class="height:16px"
|
|
48
|
+
src="/assets/svg/caret-down.svg"></i>
|
|
49
|
+
</span>
|
|
50
|
+
</div>
|
|
51
|
+
<div class="vdom-item">some content2</div>
|
|
52
|
+
</div>
|
|
53
|
+
<div class="vdom-item">some content3</div>
|
|
54
|
+
<div id="div-03">Here is div-03</div>
|
|
55
|
+
</article>
|
|
56
|
+
<br />
|
|
57
|
+
<hr />
|
|
58
|
+
<div class="vdom-item" toggle="active" toggle-query="article > div">
|
|
59
|
+
some content
|
|
60
|
+
</div>
|
|
61
|
+
<br />
|
|
62
|
+
<hr />
|
|
63
|
+
<div
|
|
64
|
+
class="vdom-item"
|
|
65
|
+
toggle-attribute="class"
|
|
66
|
+
toggle="active"
|
|
67
|
+
toggle-query=".vdom-item">
|
|
68
|
+
click for active
|
|
69
|
+
</div>
|
|
70
|
+
<br />
|
|
71
|
+
<hr />
|
|
72
|
+
TEST HERE
|
|
73
|
+
<div
|
|
74
|
+
class="vdom-item"
|
|
75
|
+
id="hey"
|
|
76
|
+
data-test=""
|
|
77
|
+
toggle-attribute="id"
|
|
78
|
+
toggle="active, other, hi, jean">
|
|
79
|
+
some content
|
|
80
|
+
</div>
|
|
81
81
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
82
|
+
<!-- custom event example -->
|
|
83
|
+
<div test-value="active" test-events="click" event>other content</div>
|
|
84
|
+
<!-- defining key example -->
|
|
85
|
+
<div click-query="#testing" click-value="hello, bye" click-key="ty">
|
|
86
|
+
click here
|
|
87
|
+
</div>
|
|
88
|
+
<div id="testing" class="{{ty}}">
|
|
89
|
+
<span class="{{ty}}"><b a="{{ty}}">other content {{ty}}</b></span>
|
|
90
|
+
<span class="{{ty}}"><b a="{{ty}}">other content {{ty}}</b></span>
|
|
91
|
+
</div>
|
|
92
92
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
93
|
+
<!-- defining key example -->
|
|
94
|
+
<div>
|
|
95
|
+
<div observe-query=".testing" observe-attribute="value">
|
|
96
|
+
testing this new value
|
|
97
|
+
</div>
|
|
98
|
+
<input
|
|
99
|
+
input-query=".testing"
|
|
100
|
+
input-attribute="value"
|
|
101
|
+
input-events="input, onload"
|
|
102
|
+
value="great test" />
|
|
103
|
+
<input class="testing {{ty}}" />
|
|
104
|
+
<div class="testing {{ty}}">other content</div>
|
|
105
|
+
</div>
|
|
106
106
|
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
107
|
+
<span
|
|
108
|
+
id="keyname"
|
|
109
|
+
clone-data="{'attributes': {'key': '{{keyname}}', 'value': ''}}"
|
|
110
|
+
{{keyname}}="test"
|
|
111
|
+
style="margin-right: 10px; padding: 5px">
|
|
112
|
+
<svg
|
|
113
|
+
class="svg"
|
|
114
|
+
width="12"
|
|
115
|
+
height="12"
|
|
116
|
+
viewBox="0 0 12 12"
|
|
117
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
118
|
+
<path
|
|
119
|
+
d="M5 5V0h1v5h5v1H6v5H5V6H0V5h5z"
|
|
120
|
+
fill-rule="nonzero"
|
|
121
|
+
fill-opacity="1"
|
|
122
|
+
fill="#fff"
|
|
123
|
+
stroke="none"></path>
|
|
124
|
+
</svg>
|
|
125
|
+
</span>
|
|
126
|
+
<input
|
|
127
|
+
placeholder="Search all attributes"
|
|
128
|
+
input-value
|
|
129
|
+
input-key="keyname"
|
|
130
|
+
input-query="#keyname" />
|
|
131
131
|
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
132
|
+
<!--<script src="../dist/CoCreate-events.js"></script>-->
|
|
133
|
+
<script src="https://CoCreate.app/dist/CoCreate.js"></script>
|
|
134
|
+
</body>
|
|
135
135
|
</html>
|