@vue/compat 3.2.41 → 3.2.43
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/dist/vue.cjs.js +196 -164
- package/dist/vue.cjs.prod.js +200 -298
- package/dist/vue.esm-browser.js +106 -73
- package/dist/vue.esm-browser.prod.js +1 -1
- package/dist/vue.esm-bundler.js +123 -78
- package/dist/vue.global.js +105 -72
- package/dist/vue.global.prod.js +1 -1
- package/dist/vue.runtime.esm-browser.js +80 -58
- package/dist/vue.runtime.esm-browser.prod.js +1 -1
- package/dist/vue.runtime.esm-bundler.js +95 -61
- package/dist/vue.runtime.global.js +79 -57
- package/dist/vue.runtime.global.prod.js +1 -1
- package/package.json +2 -2
package/dist/vue.esm-browser.js
CHANGED
|
@@ -92,27 +92,6 @@ function generateCodeFrame(source, start = 0, end = source.length) {
|
|
|
92
92
|
return res.join('\n');
|
|
93
93
|
}
|
|
94
94
|
|
|
95
|
-
/**
|
|
96
|
-
* On the client we only need to offer special cases for boolean attributes that
|
|
97
|
-
* have different names from their corresponding dom properties:
|
|
98
|
-
* - itemscope -> N/A
|
|
99
|
-
* - allowfullscreen -> allowFullscreen
|
|
100
|
-
* - formnovalidate -> formNoValidate
|
|
101
|
-
* - ismap -> isMap
|
|
102
|
-
* - nomodule -> noModule
|
|
103
|
-
* - novalidate -> noValidate
|
|
104
|
-
* - readonly -> readOnly
|
|
105
|
-
*/
|
|
106
|
-
const specialBooleanAttrs = `itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly`;
|
|
107
|
-
const isSpecialBooleanAttr = /*#__PURE__*/ makeMap(specialBooleanAttrs);
|
|
108
|
-
/**
|
|
109
|
-
* Boolean attributes should be included if the value is truthy or ''.
|
|
110
|
-
* e.g. `<select multiple>` compiles to `{ multiple: '' }`
|
|
111
|
-
*/
|
|
112
|
-
function includeBooleanAttr(value) {
|
|
113
|
-
return !!value || value === '';
|
|
114
|
-
}
|
|
115
|
-
|
|
116
95
|
function normalizeStyle(value) {
|
|
117
96
|
if (isArray(value)) {
|
|
118
97
|
const res = {};
|
|
@@ -137,10 +116,14 @@ function normalizeStyle(value) {
|
|
|
137
116
|
}
|
|
138
117
|
}
|
|
139
118
|
const listDelimiterRE = /;(?![^(]*\))/g;
|
|
140
|
-
const propertyDelimiterRE = /:(
|
|
119
|
+
const propertyDelimiterRE = /:([^]+)/;
|
|
120
|
+
const styleCommentRE = /\/\*.*?\*\//gs;
|
|
141
121
|
function parseStringStyle(cssText) {
|
|
142
122
|
const ret = {};
|
|
143
|
-
cssText
|
|
123
|
+
cssText
|
|
124
|
+
.replace(styleCommentRE, '')
|
|
125
|
+
.split(listDelimiterRE)
|
|
126
|
+
.forEach(item => {
|
|
144
127
|
if (item) {
|
|
145
128
|
const tmp = item.split(propertyDelimiterRE);
|
|
146
129
|
tmp.length > 1 && (ret[tmp[0].trim()] = tmp[1].trim());
|
|
@@ -222,6 +205,27 @@ const isSVGTag = /*#__PURE__*/ makeMap(SVG_TAGS);
|
|
|
222
205
|
*/
|
|
223
206
|
const isVoidTag = /*#__PURE__*/ makeMap(VOID_TAGS);
|
|
224
207
|
|
|
208
|
+
/**
|
|
209
|
+
* On the client we only need to offer special cases for boolean attributes that
|
|
210
|
+
* have different names from their corresponding dom properties:
|
|
211
|
+
* - itemscope -> N/A
|
|
212
|
+
* - allowfullscreen -> allowFullscreen
|
|
213
|
+
* - formnovalidate -> formNoValidate
|
|
214
|
+
* - ismap -> isMap
|
|
215
|
+
* - nomodule -> noModule
|
|
216
|
+
* - novalidate -> noValidate
|
|
217
|
+
* - readonly -> readOnly
|
|
218
|
+
*/
|
|
219
|
+
const specialBooleanAttrs = `itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly`;
|
|
220
|
+
const isSpecialBooleanAttr = /*#__PURE__*/ makeMap(specialBooleanAttrs);
|
|
221
|
+
/**
|
|
222
|
+
* Boolean attributes should be included if the value is truthy or ''.
|
|
223
|
+
* e.g. `<select multiple>` compiles to `{ multiple: '' }`
|
|
224
|
+
*/
|
|
225
|
+
function includeBooleanAttr(value) {
|
|
226
|
+
return !!value || value === '';
|
|
227
|
+
}
|
|
228
|
+
|
|
225
229
|
function looseCompareArrays(a, b) {
|
|
226
230
|
if (a.length !== b.length)
|
|
227
231
|
return false;
|
|
@@ -725,8 +729,9 @@ function trigger(target, type, key, newValue, oldValue, oldTarget) {
|
|
|
725
729
|
deps = [...depsMap.values()];
|
|
726
730
|
}
|
|
727
731
|
else if (key === 'length' && isArray(target)) {
|
|
732
|
+
const newLength = toNumber(newValue);
|
|
728
733
|
depsMap.forEach((dep, key) => {
|
|
729
|
-
if (key === 'length' || key >=
|
|
734
|
+
if (key === 'length' || key >= newLength) {
|
|
730
735
|
deps.push(dep);
|
|
731
736
|
}
|
|
732
737
|
});
|
|
@@ -2780,7 +2785,7 @@ function emit$2(instance, event, ...rawArgs) {
|
|
|
2780
2785
|
const modifiersKey = `${modelArg === 'modelValue' ? 'model' : modelArg}Modifiers`;
|
|
2781
2786
|
const { number, trim } = props[modifiersKey] || EMPTY_OBJ;
|
|
2782
2787
|
if (trim) {
|
|
2783
|
-
args = rawArgs.map(a => a.trim());
|
|
2788
|
+
args = rawArgs.map(a => (isString(a) ? a.trim() : a));
|
|
2784
2789
|
}
|
|
2785
2790
|
if (number) {
|
|
2786
2791
|
args = rawArgs.map(toNumber);
|
|
@@ -3883,7 +3888,9 @@ function doWatch(source, cb, { immediate, deep, flush, onTrack, onTrigger } = EM
|
|
|
3883
3888
|
callWithErrorHandling(fn, instance, 4 /* ErrorCodes.WATCH_CLEANUP */);
|
|
3884
3889
|
};
|
|
3885
3890
|
};
|
|
3886
|
-
let oldValue = isMultiSource
|
|
3891
|
+
let oldValue = isMultiSource
|
|
3892
|
+
? new Array(source.length).fill(INITIAL_WATCHER_VALUE)
|
|
3893
|
+
: INITIAL_WATCHER_VALUE;
|
|
3887
3894
|
const job = () => {
|
|
3888
3895
|
if (!effect.active) {
|
|
3889
3896
|
return;
|
|
@@ -3905,7 +3912,10 @@ function doWatch(source, cb, { immediate, deep, flush, onTrack, onTrigger } = EM
|
|
|
3905
3912
|
callWithAsyncErrorHandling(cb, instance, 3 /* ErrorCodes.WATCH_CALLBACK */, [
|
|
3906
3913
|
newValue,
|
|
3907
3914
|
// pass undefined as the old value when it's changed for the first time
|
|
3908
|
-
oldValue === INITIAL_WATCHER_VALUE
|
|
3915
|
+
oldValue === INITIAL_WATCHER_VALUE ||
|
|
3916
|
+
(isMultiSource && oldValue[0] === INITIAL_WATCHER_VALUE)
|
|
3917
|
+
? []
|
|
3918
|
+
: oldValue,
|
|
3909
3919
|
onCleanup
|
|
3910
3920
|
]);
|
|
3911
3921
|
oldValue = newValue;
|
|
@@ -3953,12 +3963,13 @@ function doWatch(source, cb, { immediate, deep, flush, onTrack, onTrigger } = EM
|
|
|
3953
3963
|
else {
|
|
3954
3964
|
effect.run();
|
|
3955
3965
|
}
|
|
3956
|
-
|
|
3966
|
+
const unwatch = () => {
|
|
3957
3967
|
effect.stop();
|
|
3958
3968
|
if (instance && instance.scope) {
|
|
3959
3969
|
remove(instance.scope.effects, effect);
|
|
3960
3970
|
}
|
|
3961
3971
|
};
|
|
3972
|
+
return unwatch;
|
|
3962
3973
|
}
|
|
3963
3974
|
// this.$watch
|
|
3964
3975
|
function instanceWatch(source, value, options) {
|
|
@@ -4140,7 +4151,11 @@ const BaseTransitionImpl = {
|
|
|
4140
4151
|
// return placeholder node and queue update when leave finishes
|
|
4141
4152
|
leavingHooks.afterLeave = () => {
|
|
4142
4153
|
state.isLeaving = false;
|
|
4143
|
-
|
|
4154
|
+
// #6835
|
|
4155
|
+
// it also needs to be updated when active is undefined
|
|
4156
|
+
if (instance.update.active !== false) {
|
|
4157
|
+
instance.update();
|
|
4158
|
+
}
|
|
4144
4159
|
};
|
|
4145
4160
|
return emptyPlaceholder(child);
|
|
4146
4161
|
}
|
|
@@ -4661,7 +4676,8 @@ const KeepAliveImpl = {
|
|
|
4661
4676
|
: comp);
|
|
4662
4677
|
const { include, exclude, max } = props;
|
|
4663
4678
|
if ((include && (!name || !matches(include, name))) ||
|
|
4664
|
-
(exclude && name && matches(exclude, name))
|
|
4679
|
+
(exclude && name && matches(exclude, name)) ||
|
|
4680
|
+
(hmrDirtyComponents.has(comp))) {
|
|
4665
4681
|
current = vnode;
|
|
4666
4682
|
return rawVNode;
|
|
4667
4683
|
}
|
|
@@ -4941,23 +4957,25 @@ function withDirectives(vnode, directives) {
|
|
|
4941
4957
|
const bindings = vnode.dirs || (vnode.dirs = []);
|
|
4942
4958
|
for (let i = 0; i < directives.length; i++) {
|
|
4943
4959
|
let [dir, value, arg, modifiers = EMPTY_OBJ] = directives[i];
|
|
4944
|
-
if (
|
|
4945
|
-
dir
|
|
4946
|
-
|
|
4947
|
-
|
|
4948
|
-
|
|
4949
|
-
|
|
4950
|
-
|
|
4951
|
-
|
|
4960
|
+
if (dir) {
|
|
4961
|
+
if (isFunction(dir)) {
|
|
4962
|
+
dir = {
|
|
4963
|
+
mounted: dir,
|
|
4964
|
+
updated: dir
|
|
4965
|
+
};
|
|
4966
|
+
}
|
|
4967
|
+
if (dir.deep) {
|
|
4968
|
+
traverse(value);
|
|
4969
|
+
}
|
|
4970
|
+
bindings.push({
|
|
4971
|
+
dir,
|
|
4972
|
+
instance,
|
|
4973
|
+
value,
|
|
4974
|
+
oldValue: void 0,
|
|
4975
|
+
arg,
|
|
4976
|
+
modifiers
|
|
4977
|
+
});
|
|
4952
4978
|
}
|
|
4953
|
-
bindings.push({
|
|
4954
|
-
dir,
|
|
4955
|
-
instance,
|
|
4956
|
-
value,
|
|
4957
|
-
oldValue: void 0,
|
|
4958
|
-
arg,
|
|
4959
|
-
modifiers
|
|
4960
|
-
});
|
|
4961
4979
|
}
|
|
4962
4980
|
return vnode;
|
|
4963
4981
|
}
|
|
@@ -6784,7 +6802,7 @@ function normalizePropsOptions(comp, appContext, asMixin = false) {
|
|
|
6784
6802
|
if (validatePropName(normalizedKey)) {
|
|
6785
6803
|
const opt = raw[key];
|
|
6786
6804
|
const prop = (normalized[normalizedKey] =
|
|
6787
|
-
isArray(opt) || isFunction(opt) ? { type: opt } : opt);
|
|
6805
|
+
isArray(opt) || isFunction(opt) ? { type: opt } : Object.assign({}, opt));
|
|
6788
6806
|
if (prop) {
|
|
6789
6807
|
const booleanIndex = getTypeIndex(Boolean, prop.type);
|
|
6790
6808
|
const stringIndex = getTypeIndex(String, prop.type);
|
|
@@ -7154,7 +7172,7 @@ function createCompatVue(createApp, createSingletonApp) {
|
|
|
7154
7172
|
return vm;
|
|
7155
7173
|
}
|
|
7156
7174
|
}
|
|
7157
|
-
Vue.version = `2.6.14-compat:${"3.2.
|
|
7175
|
+
Vue.version = `2.6.14-compat:${"3.2.43"}`;
|
|
7158
7176
|
Vue.config = singletonApp.config;
|
|
7159
7177
|
Vue.use = (p, ...options) => {
|
|
7160
7178
|
if (p && isFunction(p.install)) {
|
|
@@ -10710,6 +10728,9 @@ function getExposeProxy(instance) {
|
|
|
10710
10728
|
else if (key in publicPropertiesMap) {
|
|
10711
10729
|
return publicPropertiesMap[key](instance);
|
|
10712
10730
|
}
|
|
10731
|
+
},
|
|
10732
|
+
has(target, key) {
|
|
10733
|
+
return key in target || key in publicPropertiesMap;
|
|
10713
10734
|
}
|
|
10714
10735
|
})));
|
|
10715
10736
|
}
|
|
@@ -10940,7 +10961,7 @@ const useSSRContext = () => {
|
|
|
10940
10961
|
const ctx = inject(ssrContextKey);
|
|
10941
10962
|
if (!ctx) {
|
|
10942
10963
|
warn$1(`Server rendering context not provided. Make sure to only call ` +
|
|
10943
|
-
|
|
10964
|
+
`useSSRContext() conditionally in the server build.`);
|
|
10944
10965
|
}
|
|
10945
10966
|
return ctx;
|
|
10946
10967
|
}
|
|
@@ -11163,7 +11184,7 @@ function isMemoSame(cached, memo) {
|
|
|
11163
11184
|
}
|
|
11164
11185
|
|
|
11165
11186
|
// Core API ------------------------------------------------------------------
|
|
11166
|
-
const version = "3.2.
|
|
11187
|
+
const version = "3.2.43";
|
|
11167
11188
|
/**
|
|
11168
11189
|
* SSR utils for \@vue/server-renderer. Only exposed in ssr-possible builds.
|
|
11169
11190
|
* @internal
|
|
@@ -11727,7 +11748,7 @@ class VueElement extends BaseClass {
|
|
|
11727
11748
|
}
|
|
11728
11749
|
}).observe(this, { attributes: true });
|
|
11729
11750
|
const resolve = (def) => {
|
|
11730
|
-
const { props, styles } = def;
|
|
11751
|
+
const { props = {}, styles } = def;
|
|
11731
11752
|
const hasOptions = !isArray(props);
|
|
11732
11753
|
const rawKeys = props ? (hasOptions ? Object.keys(props) : props) : [];
|
|
11733
11754
|
// cast Number-type props set before resolve
|
|
@@ -11774,10 +11795,11 @@ class VueElement extends BaseClass {
|
|
|
11774
11795
|
}
|
|
11775
11796
|
_setAttr(key) {
|
|
11776
11797
|
let value = this.getAttribute(key);
|
|
11777
|
-
|
|
11798
|
+
const camelKey = camelize(key);
|
|
11799
|
+
if (this._numberProps && this._numberProps[camelKey]) {
|
|
11778
11800
|
value = toNumber(value);
|
|
11779
11801
|
}
|
|
11780
|
-
this._setProp(
|
|
11802
|
+
this._setProp(camelKey, value, false);
|
|
11781
11803
|
}
|
|
11782
11804
|
/**
|
|
11783
11805
|
* @internal
|
|
@@ -12205,11 +12227,11 @@ function getTransitionInfo(el, expectedType) {
|
|
|
12205
12227
|
const styles = window.getComputedStyle(el);
|
|
12206
12228
|
// JSDOM may return undefined for transition properties
|
|
12207
12229
|
const getStyleProperties = (key) => (styles[key] || '').split(', ');
|
|
12208
|
-
const transitionDelays = getStyleProperties(TRANSITION
|
|
12209
|
-
const transitionDurations = getStyleProperties(TRANSITION
|
|
12230
|
+
const transitionDelays = getStyleProperties(`${TRANSITION}Delay`);
|
|
12231
|
+
const transitionDurations = getStyleProperties(`${TRANSITION}Duration`);
|
|
12210
12232
|
const transitionTimeout = getTimeout(transitionDelays, transitionDurations);
|
|
12211
|
-
const animationDelays = getStyleProperties(ANIMATION
|
|
12212
|
-
const animationDurations = getStyleProperties(ANIMATION
|
|
12233
|
+
const animationDelays = getStyleProperties(`${ANIMATION}Delay`);
|
|
12234
|
+
const animationDurations = getStyleProperties(`${ANIMATION}Duration`);
|
|
12213
12235
|
const animationTimeout = getTimeout(animationDelays, animationDurations);
|
|
12214
12236
|
let type = null;
|
|
12215
12237
|
let timeout = 0;
|
|
@@ -12244,7 +12266,7 @@ function getTransitionInfo(el, expectedType) {
|
|
|
12244
12266
|
: 0;
|
|
12245
12267
|
}
|
|
12246
12268
|
const hasTransform = type === TRANSITION &&
|
|
12247
|
-
/\b(transform|all)(,|$)/.test(
|
|
12269
|
+
/\b(transform|all)(,|$)/.test(getStyleProperties(`${TRANSITION}Property`).toString());
|
|
12248
12270
|
return {
|
|
12249
12271
|
type,
|
|
12250
12272
|
timeout,
|
|
@@ -13633,7 +13655,10 @@ function injectProp(node, prop, context) {
|
|
|
13633
13655
|
// if doesn't override user provided keys
|
|
13634
13656
|
const first = props.arguments[0];
|
|
13635
13657
|
if (!isString(first) && first.type === 15 /* NodeTypes.JS_OBJECT_EXPRESSION */) {
|
|
13636
|
-
|
|
13658
|
+
// #6631
|
|
13659
|
+
if (!hasProp(prop, first)) {
|
|
13660
|
+
first.properties.unshift(prop);
|
|
13661
|
+
}
|
|
13637
13662
|
}
|
|
13638
13663
|
else {
|
|
13639
13664
|
if (props.callee === TO_HANDLERS) {
|
|
@@ -13650,14 +13675,7 @@ function injectProp(node, prop, context) {
|
|
|
13650
13675
|
!propsWithInjection && (propsWithInjection = props);
|
|
13651
13676
|
}
|
|
13652
13677
|
else if (props.type === 15 /* NodeTypes.JS_OBJECT_EXPRESSION */) {
|
|
13653
|
-
|
|
13654
|
-
// check existing key to avoid overriding user provided keys
|
|
13655
|
-
if (prop.key.type === 4 /* NodeTypes.SIMPLE_EXPRESSION */) {
|
|
13656
|
-
const propKeyName = prop.key.content;
|
|
13657
|
-
alreadyExists = props.properties.some(p => p.key.type === 4 /* NodeTypes.SIMPLE_EXPRESSION */ &&
|
|
13658
|
-
p.key.content === propKeyName);
|
|
13659
|
-
}
|
|
13660
|
-
if (!alreadyExists) {
|
|
13678
|
+
if (!hasProp(prop, props)) {
|
|
13661
13679
|
props.properties.unshift(prop);
|
|
13662
13680
|
}
|
|
13663
13681
|
propsWithInjection = props;
|
|
@@ -13692,6 +13710,16 @@ function injectProp(node, prop, context) {
|
|
|
13692
13710
|
}
|
|
13693
13711
|
}
|
|
13694
13712
|
}
|
|
13713
|
+
// check existing key to avoid overriding user provided keys
|
|
13714
|
+
function hasProp(prop, props) {
|
|
13715
|
+
let result = false;
|
|
13716
|
+
if (prop.key.type === 4 /* NodeTypes.SIMPLE_EXPRESSION */) {
|
|
13717
|
+
const propKeyName = prop.key.content;
|
|
13718
|
+
result = props.properties.some(p => p.key.type === 4 /* NodeTypes.SIMPLE_EXPRESSION */ &&
|
|
13719
|
+
p.key.content === propKeyName);
|
|
13720
|
+
}
|
|
13721
|
+
return result;
|
|
13722
|
+
}
|
|
13695
13723
|
function toValidAssetId(name, type) {
|
|
13696
13724
|
// see issue#4422, we need adding identifier on validAssetId if variable `name` has specific character
|
|
13697
13725
|
return `_${type}_${name.replace(/[^\w]/g, (searchValue, replaceValue) => {
|
|
@@ -13963,13 +13991,18 @@ function parseChildren(context, mode, ancestors) {
|
|
|
13963
13991
|
const next = nodes[i + 1];
|
|
13964
13992
|
// Remove if:
|
|
13965
13993
|
// - the whitespace is the first or last node, or:
|
|
13966
|
-
// - (condense mode) the whitespace is
|
|
13994
|
+
// - (condense mode) the whitespace is between twos comments, or:
|
|
13995
|
+
// - (condense mode) the whitespace is between comment and element, or:
|
|
13967
13996
|
// - (condense mode) the whitespace is between two elements AND contains newline
|
|
13968
13997
|
if (!prev ||
|
|
13969
13998
|
!next ||
|
|
13970
13999
|
(shouldCondense &&
|
|
13971
|
-
(prev.type === 3 /* NodeTypes.COMMENT */
|
|
13972
|
-
next.type === 3 /* NodeTypes.COMMENT */ ||
|
|
14000
|
+
((prev.type === 3 /* NodeTypes.COMMENT */ &&
|
|
14001
|
+
next.type === 3 /* NodeTypes.COMMENT */) ||
|
|
14002
|
+
(prev.type === 3 /* NodeTypes.COMMENT */ &&
|
|
14003
|
+
next.type === 1 /* NodeTypes.ELEMENT */) ||
|
|
14004
|
+
(prev.type === 1 /* NodeTypes.ELEMENT */ &&
|
|
14005
|
+
next.type === 3 /* NodeTypes.COMMENT */) ||
|
|
13973
14006
|
(prev.type === 1 /* NodeTypes.ELEMENT */ &&
|
|
13974
14007
|
next.type === 1 /* NodeTypes.ELEMENT */ &&
|
|
13975
14008
|
/[\r\n]/.test(node.content))))) {
|
|
@@ -17173,7 +17206,7 @@ function processSlotOutlet(node, context) {
|
|
|
17173
17206
|
};
|
|
17174
17207
|
}
|
|
17175
17208
|
|
|
17176
|
-
const fnExpRE = /^\s*([\w$_]+|(async\s*)?\([^)]*?\))\s
|
|
17209
|
+
const fnExpRE = /^\s*([\w$_]+|(async\s*)?\([^)]*?\))\s*(:[^=]+)?=>|^\s*(async\s+)?function(?:\s+[\w$]+)?\s*\(/;
|
|
17177
17210
|
const transformOn = (dir, node, context, augmentor) => {
|
|
17178
17211
|
const { loc, modifiers, arg } = dir;
|
|
17179
17212
|
if (!dir.exp && !modifiers.length) {
|
|
@@ -17187,10 +17220,10 @@ const transformOn = (dir, node, context, augmentor) => {
|
|
|
17187
17220
|
if (rawName.startsWith('vue:')) {
|
|
17188
17221
|
rawName = `vnode-${rawName.slice(4)}`;
|
|
17189
17222
|
}
|
|
17190
|
-
const eventString = node.tagType
|
|
17223
|
+
const eventString = node.tagType !== 0 /* ElementTypes.ELEMENT */ ||
|
|
17191
17224
|
rawName.startsWith('vnode') ||
|
|
17192
17225
|
!/[A-Z]/.test(rawName)
|
|
17193
|
-
? // for
|
|
17226
|
+
? // for non-element and vnode lifecycle event listeners, auto convert
|
|
17194
17227
|
// it to camelCase. See issue #2249
|
|
17195
17228
|
toHandlerKey(camelize(rawName))
|
|
17196
17229
|
: // preserve case for plain element listeners that have uppercase
|