@cocreate/events 1.20.0 → 1.21.0
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 +20 -0
- package/demo/click.html +1 -3
- package/demo/hover.html +1 -1
- package/demo/index.html +1 -1
- package/docs/index.html +13 -35
- package/package.json +5 -5
- package/src/index.js +17 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,23 @@
|
|
|
1
|
+
# [1.21.0](https://github.com/CoCreate-app/CoCreate-events/compare/v1.20.1...v1.21.0) (2024-06-12)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* bump cocreate dependencies ([c4ae1f6](https://github.com/CoCreate-app/CoCreate-events/commit/c4ae1f6fd54fc9de71ffd039014c86d2b490d985))
|
|
7
|
+
* svg icon class ([26265ec](https://github.com/CoCreate-app/CoCreate-events/commit/26265ece8a975bb0901f3243baddf9d0e4bb35ff))
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
### Features
|
|
11
|
+
|
|
12
|
+
* send event details to setValue to process mouseout logic ([9b5b499](https://github.com/CoCreate-app/CoCreate-events/commit/9b5b4998c3a24f68df41c6fabd69fa2fec80b8fc))
|
|
13
|
+
|
|
14
|
+
## [1.20.1](https://github.com/CoCreate-app/CoCreate-events/compare/v1.20.0...v1.20.1) (2024-05-19)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### Bug Fixes
|
|
18
|
+
|
|
19
|
+
* getValue from element else fallback to value ([c8e06af](https://github.com/CoCreate-app/CoCreate-events/commit/c8e06afb6d88ab382cead8065dea88cdec3300ca))
|
|
20
|
+
|
|
1
21
|
# [1.20.0](https://github.com/CoCreate-app/CoCreate-events/compare/v1.19.5...v1.20.0) (2024-05-08)
|
|
2
22
|
|
|
3
23
|
|
package/demo/click.html
CHANGED
|
@@ -43,9 +43,7 @@
|
|
|
43
43
|
<div>
|
|
44
44
|
<div class="vdom-item">some content1</div>
|
|
45
45
|
<span click="test" click-closest=".vdom-item"
|
|
46
|
-
><i
|
|
47
|
-
class="height:16px fill:#505050"
|
|
48
|
-
src="/assets/svg/caret-down.svg"
|
|
46
|
+
><i class="height:16px" src="/assets/svg/caret-down.svg"
|
|
49
47
|
>test</i
|
|
50
48
|
></span
|
|
51
49
|
>
|
package/demo/hover.html
CHANGED
package/demo/index.html
CHANGED
package/docs/index.html
CHANGED
|
@@ -81,43 +81,33 @@
|
|
|
81
81
|
class="margin-right:15px"
|
|
82
82
|
share-network="twitter"
|
|
83
83
|
title="Share on twitter"
|
|
84
|
-
><i
|
|
85
|
-
class="height:20px fill:#505050"
|
|
86
|
-
src="/assets/svg/twitter.svg"></i
|
|
84
|
+
><i src="/assets/svg/twitter.svg"></i
|
|
87
85
|
></a>
|
|
88
86
|
<a
|
|
89
87
|
class="margin-right:15px"
|
|
90
88
|
share-network="facebook"
|
|
91
89
|
title="Share on Facebook"
|
|
92
|
-
><i
|
|
93
|
-
class="height:20px fill:#505050"
|
|
94
|
-
src="/assets/svg/facebook.svg"></i
|
|
90
|
+
><i src="/assets/svg/facebook.svg"></i
|
|
95
91
|
></a>
|
|
96
92
|
<a
|
|
97
93
|
class="margin-right:15px"
|
|
98
94
|
share-network="instagram"
|
|
99
95
|
title="Share on instagram"
|
|
100
|
-
><i
|
|
101
|
-
class="height:20px fill:#505050"
|
|
102
|
-
src="/assets/svg/instagram.svg"></i
|
|
96
|
+
><i src="/assets/svg/instagram.svg"></i
|
|
103
97
|
></a>
|
|
104
98
|
</div>
|
|
105
99
|
<a
|
|
106
100
|
class="margin-right:15px"
|
|
107
101
|
share-network="share"
|
|
108
102
|
title="Share on share"
|
|
109
|
-
><i
|
|
110
|
-
class="height:20px fill:#505050"
|
|
111
|
-
src="/assets/svg/share-alt.svg"></i
|
|
103
|
+
><i src="/assets/svg/share-alt.svg"></i
|
|
112
104
|
></a>
|
|
113
105
|
</div>
|
|
114
106
|
<a
|
|
115
107
|
href="https://github.com/CoCreate-app/CoCreate-events"
|
|
116
108
|
target="_blank"
|
|
117
109
|
class="margin-right:15px"
|
|
118
|
-
><i
|
|
119
|
-
class="height:20px fill:#505050"
|
|
120
|
-
src="/assets/svg/github.svg"></i
|
|
110
|
+
><i src="/assets/svg/github.svg"></i
|
|
121
111
|
></a>
|
|
122
112
|
</div>
|
|
123
113
|
</div>
|
|
@@ -143,9 +133,7 @@
|
|
|
143
133
|
<a
|
|
144
134
|
class="margin-left:10px display:none"
|
|
145
135
|
href="#events-install"
|
|
146
|
-
><i
|
|
147
|
-
class="height:20px fill:#505050"
|
|
148
|
-
src="/assets/svg/link.svg"></i
|
|
136
|
+
><i src="/assets/svg/link.svg"></i
|
|
149
137
|
></a>
|
|
150
138
|
</span>
|
|
151
139
|
</div>
|
|
@@ -169,9 +157,7 @@
|
|
|
169
157
|
<a
|
|
170
158
|
class="margin-left:10px display:none"
|
|
171
159
|
href="#events-usage"
|
|
172
|
-
><i
|
|
173
|
-
class="height:20px fill:#505050"
|
|
174
|
-
src="/assets/svg/link.svg"></i
|
|
160
|
+
><i src="/assets/svg/link.svg"></i
|
|
175
161
|
></a>
|
|
176
162
|
</span>
|
|
177
163
|
</div>
|
|
@@ -224,9 +210,7 @@
|
|
|
224
210
|
<a
|
|
225
211
|
class="margin-left:10px display:none"
|
|
226
212
|
href="#events-attributes"
|
|
227
|
-
><i
|
|
228
|
-
class="height:20px fill:#505050"
|
|
229
|
-
src="/assets/svg/link.svg"></i
|
|
213
|
+
><i src="/assets/svg/link.svg"></i
|
|
230
214
|
></a>
|
|
231
215
|
</span>
|
|
232
216
|
</div>
|
|
@@ -315,9 +299,7 @@
|
|
|
315
299
|
<a
|
|
316
300
|
class="margin-left:10px display:none"
|
|
317
301
|
href="#events-demo"
|
|
318
|
-
><i
|
|
319
|
-
class="height:20px fill:#505050"
|
|
320
|
-
src="/assets/svg/link.svg"></i
|
|
302
|
+
><i src="/assets/svg/link.svg"></i
|
|
321
303
|
></a>
|
|
322
304
|
</span>
|
|
323
305
|
</div>
|
|
@@ -361,7 +343,7 @@
|
|
|
361
343
|
events="code-height"
|
|
362
344
|
events-selector="#demo-code"
|
|
363
345
|
><i
|
|
364
|
-
class="height:18px
|
|
346
|
+
class="height:18px"
|
|
365
347
|
src="/assets/svg/eye.svg"></i
|
|
366
348
|
></a>
|
|
367
349
|
<a
|
|
@@ -372,18 +354,14 @@
|
|
|
372
354
|
hide="#eye-slash"
|
|
373
355
|
events="code-height"
|
|
374
356
|
events-selector="#demo-code"
|
|
375
|
-
><i
|
|
376
|
-
class="height:20px fill:#505050"
|
|
377
|
-
src="/assets/svg/eye-slash.svg"></i
|
|
357
|
+
><i src="/assets/svg/eye-slash.svg"></i
|
|
378
358
|
></a>
|
|
379
359
|
<a
|
|
380
360
|
class="margin-right:10px"
|
|
381
361
|
id="code"
|
|
382
362
|
show="#code-slash"
|
|
383
363
|
hide="#code, #demo-code"
|
|
384
|
-
><i
|
|
385
|
-
class="height:20px fill:#505050"
|
|
386
|
-
src="/assets/svg/code.svg"></i
|
|
364
|
+
><i src="/assets/svg/code.svg"></i
|
|
387
365
|
></a>
|
|
388
366
|
<a
|
|
389
367
|
class="margin-right:10px"
|
|
@@ -392,7 +370,7 @@
|
|
|
392
370
|
show="#code, #demo-code"
|
|
393
371
|
hide="#code-slash"
|
|
394
372
|
><i
|
|
395
|
-
class="
|
|
373
|
+
class="height:18px"
|
|
396
374
|
src="/assets/svg/code.svg"></i
|
|
397
375
|
></a>
|
|
398
376
|
<a
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cocreate/events",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.21.0",
|
|
4
4
|
"description": "A simple events component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"events",
|
|
@@ -58,9 +58,9 @@
|
|
|
58
58
|
"webpack-log": "^3.0.1"
|
|
59
59
|
},
|
|
60
60
|
"dependencies": {
|
|
61
|
-
"@cocreate/actions": "^1.18.
|
|
62
|
-
"@cocreate/element-prototype": "^1.
|
|
63
|
-
"@cocreate/observer": "^1.16.
|
|
64
|
-
"@cocreate/utils": "^1.33.
|
|
61
|
+
"@cocreate/actions": "^1.18.2",
|
|
62
|
+
"@cocreate/element-prototype": "^1.23.0",
|
|
63
|
+
"@cocreate/observer": "^1.16.1",
|
|
64
|
+
"@cocreate/utils": "^1.33.7"
|
|
65
65
|
}
|
|
66
66
|
}
|
package/src/index.js
CHANGED
|
@@ -196,7 +196,7 @@ const CoCreateEvents = {
|
|
|
196
196
|
return;
|
|
197
197
|
// if (target.closest(`[actions*="${prefix}"]`))
|
|
198
198
|
// return;
|
|
199
|
-
self.__updateElements(target, prefix);
|
|
199
|
+
self.__updateElements(target, prefix, null, prefixes[prefix].events);
|
|
200
200
|
|
|
201
201
|
let selector = `[${prefix}], [${prefix}-key], [${prefix}-value], [${prefix}-selector], [${prefix}-closest], [${prefix}-parent], [${prefix}-next], [${prefix}-previous]`
|
|
202
202
|
|
|
@@ -205,7 +205,7 @@ const CoCreateEvents = {
|
|
|
205
205
|
do {
|
|
206
206
|
parentElement = parentElement.closest(selector)
|
|
207
207
|
if (parentElement) {
|
|
208
|
-
self.__updateElements(parentElement, prefix);
|
|
208
|
+
self.__updateElements(parentElement, prefix, null, prefixes[prefix].events);
|
|
209
209
|
parentElement = parentElement.parentElement
|
|
210
210
|
}
|
|
211
211
|
}
|
|
@@ -221,7 +221,7 @@ const CoCreateEvents = {
|
|
|
221
221
|
}
|
|
222
222
|
},
|
|
223
223
|
|
|
224
|
-
__updateElements: async function (element, prefix, target) {
|
|
224
|
+
__updateElements: async function (element, prefix, target, events) {
|
|
225
225
|
const self = this;
|
|
226
226
|
// TODO: support empty value when prefix-attribute defined, add and remove the attribute
|
|
227
227
|
let targetAttribute = element.getAttribute(`${prefix}-attribute`);
|
|
@@ -277,7 +277,7 @@ const CoCreateEvents = {
|
|
|
277
277
|
|
|
278
278
|
let ifValue = element.getAttribute(`${prefix}-if-value`)
|
|
279
279
|
if (!ifValue && ifValue !== "")
|
|
280
|
-
ifValue = values // await element.getValue()
|
|
280
|
+
ifValue = await element.getValue() || values //values // await element.getValue()
|
|
281
281
|
else if (ifValue || ifValue === "")
|
|
282
282
|
ifValue = [ifValue]
|
|
283
283
|
else
|
|
@@ -324,10 +324,10 @@ const CoCreateEvents = {
|
|
|
324
324
|
let groupKey = el.getAttribute(`${prefix}-key`)
|
|
325
325
|
|
|
326
326
|
// el.removeAttribute(prefix)
|
|
327
|
-
self.setValue(prefix, el, groupAttribute, groupValues, groupKey, 'deactivate')
|
|
327
|
+
self.setValue(prefix, el, groupAttribute, groupValues, groupKey, 'deactivate', events)
|
|
328
328
|
let targetElements = queryElements({ el, prefix });
|
|
329
329
|
for (let i = 0; i < targetElements.length; i++)
|
|
330
|
-
self.setValue(prefix, targetElements[i], groupAttribute, groupValues, groupKey, 'deactivate')
|
|
330
|
+
self.setValue(prefix, targetElements[i], groupAttribute, groupValues, groupKey, 'deactivate', events)
|
|
331
331
|
|
|
332
332
|
});
|
|
333
333
|
}
|
|
@@ -352,7 +352,7 @@ const CoCreateEvents = {
|
|
|
352
352
|
if (!targetAttribute && targetAttribute !== '' && ['click', 'focus', 'blur'].includes(prefix)) {
|
|
353
353
|
targetElements[i][prefix]()
|
|
354
354
|
} else
|
|
355
|
-
this.setValue(prefix, targetElements[i], targetAttribute, values, targetKey)
|
|
355
|
+
this.setValue(prefix, targetElements[i], targetAttribute, values, targetKey, null, events)
|
|
356
356
|
}
|
|
357
357
|
|
|
358
358
|
document.dispatchEvent(new CustomEvent(`${prefix}End`, {
|
|
@@ -361,7 +361,16 @@ const CoCreateEvents = {
|
|
|
361
361
|
|
|
362
362
|
},
|
|
363
363
|
|
|
364
|
-
setValue: async function (prefix, element, attrName, values, key, deactivate) {
|
|
364
|
+
setValue: async function (prefix, element, attrName, values, key, deactivate, events) {
|
|
365
|
+
if (events && events.includes('mouseout')) {
|
|
366
|
+
if (element.matches(':hover')) {
|
|
367
|
+
element.addEventListener('mouseout', () => {
|
|
368
|
+
this.setValue(prefix, element, attrName, values, key, deactivate, events);
|
|
369
|
+
}, { once: true });
|
|
370
|
+
return;
|
|
371
|
+
}
|
|
372
|
+
}
|
|
373
|
+
|
|
365
374
|
let attrValues, oldValue;
|
|
366
375
|
if (key) {
|
|
367
376
|
key = `{{${key}}}`;
|