Skip to content

Commit ecc4ba0

Browse files
adambereczadamberecz
committed
chore: build, cl, version
1 parent 98c5ae8 commit ecc4ba0

File tree

6 files changed

+85
-30
lines changed

6 files changed

+85
-30
lines changed

‎CHANGELOG.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,21 @@
1+
## v2.5.8
2+
3+
> `2022-12-21`
4+
5+
### 🎉 Feature
6+
- Added `--ms-border-width-active` and `--ms-border-color-active` CSS vars #213.
7+
- Added `@max` event #269.
8+
- Added `clearOnBlur` option #251.
9+
10+
### 🐞 Bug Fixes
11+
- Removed `max-height` duplicate from default theme #240.
12+
- Norwegian chars fix #243.
13+
- Trigger `@change` event on updating external value #259.
14+
- Docs fix for 2.7 installation instructions #294.
15+
- Docs fix fiddle url.
16+
- Tags dropdown focus fix #286 #300.
17+
- Stop propagation on tag remove click #295.
18+
119
## v2.5.7
220

321
> `2022-11-21`

‎dist/multiselect.global.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/multiselect.js‎

Lines changed: 32 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ function useData (props, context, dep)
1616

1717
// =============== METHODS ==============
1818

19-
const update = (val) => {
19+
const update = (val, triggerInput = true) => {
2020
// Setting object(s) as internal value
2121
iv.value = makeInternal(val);
2222

@@ -25,8 +25,11 @@ function useData (props, context, dep)
2525
const externalVal = makeExternal(val);
2626

2727
context.emit('change', externalVal, $this);
28-
context.emit('input', externalVal);
29-
context.emit('update:modelValue', externalVal);
28+
29+
if (triggerInput) {
30+
context.emit('input', externalVal);
31+
context.emit('update:modelValue', externalVal);
32+
}
3033
};
3134

3235
// no export
@@ -210,7 +213,13 @@ function usePointer$1 (props, context, dep)
210213
function normalize (str, strict = true) {
211214
return strict
212215
? String(str).toLowerCase().trim()
213-
: String(str).normalize('NFD').replace(/\p{Diacritic}/gu, '').toLowerCase().trim()
216+
: String(str).toLowerCase()
217+
.normalize('NFD')
218+
.trim()
219+
.replace(new RegExp(/æ/g), 'ae')
220+
.replace(new RegExp(/œ/g), 'oe')
221+
.replace(new RegExp(/ø/g), 'o')
222+
.replace(/\p{Diacritic}/gu, '')
214223
}
215224

216225
function isObject (variable) {
@@ -577,6 +586,7 @@ function useOptions (props, context, dep)
577586
}
578587

579588
if (isMax()) {
589+
context.emit('max', $this);
580590
return
581591
}
582592

@@ -605,6 +615,7 @@ function useOptions (props, context, dep)
605615
}
606616

607617
if (isMax()) {
618+
context.emit('max', $this);
608619
return
609620
}
610621

@@ -715,7 +726,7 @@ function useOptions (props, context, dep)
715726
// no export
716727
const filterGroups = (groups) => {
717728
// If the search has value we need to filter among
718-
// he ones that are visible to the user to avoid
729+
// the ones that are visible to the user to avoid
719730
// displaying groups which technically have options
720731
// based on search but that option is already selected.
721732
return groupHideEmpty.value
@@ -922,21 +933,21 @@ function useOptions (props, context, dep)
922933

923934
watch(ev, (newValue) => {
924935
if (isNullish(newValue)) {
925-
iv.value = makeInternal(newValue);
936+
update(makeInternal(newValue), false);
926937
return
927938
}
928939

929940
switch (mode.value) {
930941
case 'single':
931942
if (object.value ? newValue[valueProp.value] != iv.value[valueProp.value] : newValue != iv.value[valueProp.value]) {
932-
iv.value = makeInternal(newValue);
943+
update(makeInternal(newValue), false);
933944
}
934945
break
935946

936947
case 'multiple':
937948
case 'tags':
938949
if (!arraysEqual(object.value ? newValue.map(o => o[valueProp.value]) : newValue, iv.value.map(o => o[valueProp.value]))) {
939-
iv.value = makeInternal(newValue);
950+
update(makeInternal(newValue), false);
940951
}
941952
break
942953
}
@@ -1290,7 +1301,7 @@ function useDropdown (props, context, dep)
12901301

12911302
function useMultiselect (props, context, dep)
12921303
{
1293-
const { searchable, disabled } = toRefs(props);
1304+
const { searchable, disabled, clearOnBlur } = toRefs(props);
12941305

12951306
// ============ DEPENDENCIES ============
12961307

@@ -1352,13 +1363,16 @@ function useMultiselect (props, context, dep)
13521363
setTimeout(() => {
13531364
if (!isActive.value) {
13541365
close();
1355-
clearSearch();
1366+
1367+
if (clearOnBlur.value) {
1368+
clearSearch();
1369+
}
13561370
}
13571371
}, 1);
13581372
};
13591373

13601374
const handleFocusIn = (e) => {
1361-
if (e.target.closest('[data-tags]') || e.target.closest('[data-clear]')) {
1375+
if ((e.target.closest('[data-tags]') && e.target.nodeName !== 'INPUT') || e.target.closest('[data-clear]')) {
13621376
return
13631377
}
13641378

@@ -1383,7 +1397,6 @@ function useMultiselect (props, context, dep)
13831397
deactivate();
13841398
}, 0);
13851399
} else if (document.activeElement.isEqualNode(wrapper.value) && !isOpen.value) {
1386-
console.log(e.target.closest('[data-tags]'));
13871400
activate();
13881401
}
13891402

@@ -2107,7 +2120,7 @@ var script = {
21072120
emits: [
21082121
'paste', 'open', 'close', 'select', 'deselect',
21092122
'input', 'search-change', 'tag', 'option', 'update:modelValue',
2110-
'change', 'clear', 'keydown', 'keyup',
2123+
'change', 'clear', 'keydown', 'keyup', 'max',
21112124
],
21122125
props: {
21132126
value: {
@@ -2392,6 +2405,11 @@ var script = {
23922405
type: Object,
23932406
default: () => ({}),
23942407
},
2408+
clearOnBlur: {
2409+
required: false,
2410+
type: Boolean,
2411+
default: true,
2412+
},
23952413
},
23962414
setup(props, context)
23972415
{
@@ -2506,7 +2524,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
25062524
? (openBlock(), createElementBlock("span", {
25072525
key: 0,
25082526
class: normalizeClass(_ctx.classList.tagRemove),
2509-
onClick: $event => (_ctx.handleTagRemove(option, $event))
2527+
onClick: withModifiers($event => (_ctx.handleTagRemove(option, $event)), ["stop"])
25102528
}, [
25112529
createElementVNode("span", {
25122530
class: normalizeClass(_ctx.classList.tagRemoveIcon)

‎dist/multiselect.vue2.global.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/multiselect.vue2.js‎

Lines changed: 32 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ function useData (props, context, dep)
1616

1717
// =============== METHODS ==============
1818

19-
const update = (val) => {
19+
const update = (val, triggerInput = true) => {
2020
// Setting object(s) as internal value
2121
iv.value = makeInternal(val);
2222

@@ -25,8 +25,11 @@ function useData (props, context, dep)
2525
const externalVal = makeExternal(val);
2626

2727
context.emit('change', externalVal, $this);
28-
context.emit('input', externalVal);
29-
context.emit('update:modelValue', externalVal);
28+
29+
if (triggerInput) {
30+
context.emit('input', externalVal);
31+
context.emit('update:modelValue', externalVal);
32+
}
3033
};
3134

3235
// no export
@@ -210,7 +213,13 @@ function usePointer$1 (props, context, dep)
210213
function normalize (str, strict = true) {
211214
return strict
212215
? String(str).toLowerCase().trim()
213-
: String(str).normalize('NFD').replace(/\p{Diacritic}/gu, '').toLowerCase().trim()
216+
: String(str).toLowerCase()
217+
.normalize('NFD')
218+
.trim()
219+
.replace(new RegExp(/æ/g), 'ae')
220+
.replace(new RegExp(/œ/g), 'oe')
221+
.replace(new RegExp(/ø/g), 'o')
222+
.replace(/\p{Diacritic}/gu, '')
214223
}
215224

216225
function isObject (variable) {
@@ -577,6 +586,7 @@ function useOptions (props, context, dep)
577586
}
578587

579588
if (isMax()) {
589+
context.emit('max', $this);
580590
return
581591
}
582592

@@ -605,6 +615,7 @@ function useOptions (props, context, dep)
605615
}
606616

607617
if (isMax()) {
618+
context.emit('max', $this);
608619
return
609620
}
610621

@@ -715,7 +726,7 @@ function useOptions (props, context, dep)
715726
// no export
716727
const filterGroups = (groups) => {
717728
// If the search has value we need to filter among
718-
// he ones that are visible to the user to avoid
729+
// the ones that are visible to the user to avoid
719730
// displaying groups which technically have options
720731
// based on search but that option is already selected.
721732
return groupHideEmpty.value
@@ -922,21 +933,21 @@ function useOptions (props, context, dep)
922933

923934
watch(ev, (newValue) => {
924935
if (isNullish(newValue)) {
925-
iv.value = makeInternal(newValue);
936+
update(makeInternal(newValue), false);
926937
return
927938
}
928939

929940
switch (mode.value) {
930941
case 'single':
931942
if (object.value ? newValue[valueProp.value] != iv.value[valueProp.value] : newValue != iv.value[valueProp.value]) {
932-
iv.value = makeInternal(newValue);
943+
update(makeInternal(newValue), false);
933944
}
934945
break
935946

936947
case 'multiple':
937948
case 'tags':
938949
if (!arraysEqual(object.value ? newValue.map(o => o[valueProp.value]) : newValue, iv.value.map(o => o[valueProp.value]))) {
939-
iv.value = makeInternal(newValue);
950+
update(makeInternal(newValue), false);
940951
}
941952
break
942953
}
@@ -1290,7 +1301,7 @@ function useDropdown (props, context, dep)
12901301

12911302
function useMultiselect (props, context, dep)
12921303
{
1293-
const { searchable, disabled } = toRefs(props);
1304+
const { searchable, disabled, clearOnBlur } = toRefs(props);
12941305

12951306
// ============ DEPENDENCIES ============
12961307

@@ -1352,13 +1363,16 @@ function useMultiselect (props, context, dep)
13521363
setTimeout(() => {
13531364
if (!isActive.value) {
13541365
close();
1355-
clearSearch();
1366+
1367+
if (clearOnBlur.value) {
1368+
clearSearch();
1369+
}
13561370
}
13571371
}, 1);
13581372
};
13591373

13601374
const handleFocusIn = (e) => {
1361-
if (e.target.closest('[data-tags]') || e.target.closest('[data-clear]')) {
1375+
if ((e.target.closest('[data-tags]') && e.target.nodeName !== 'INPUT') || e.target.closest('[data-clear]')) {
13621376
return
13631377
}
13641378

@@ -1383,7 +1397,6 @@ function useMultiselect (props, context, dep)
13831397
deactivate();
13841398
}, 0);
13851399
} else if (document.activeElement.isEqualNode(wrapper.value) && !isOpen.value) {
1386-
console.log(e.target.closest('[data-tags]'));
13871400
activate();
13881401
}
13891402

@@ -2109,7 +2122,7 @@ function resolveDeps (props, context, features, deps = {}) {
21092122
emits: [
21102123
'paste', 'open', 'close', 'select', 'deselect',
21112124
'input', 'search-change', 'tag', 'option', 'update:modelValue',
2112-
'change', 'clear', 'keydown', 'keyup',
2125+
'change', 'clear', 'keydown', 'keyup', 'max',
21132126
],
21142127
props: {
21152128
value: {
@@ -2394,6 +2407,11 @@ function resolveDeps (props, context, features, deps = {}) {
23942407
type: Object,
23952408
default: () => ({}),
23962409
},
2410+
clearOnBlur: {
2411+
required: false,
2412+
type: Boolean,
2413+
default: true,
2414+
},
23972415
},
23982416
setup(props, context)
23992417
{
@@ -2633,6 +2651,7 @@ var __vue_render__ = function () {
26332651
class: _vm.classList.tagRemove,
26342652
on: {
26352653
click: function ($event) {
2654+
$event.stopPropagation();
26362655
return _vm.handleTagRemove(
26372656
option,
26382657
$event

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@vueform/multiselect",
3-
"version": "2.5.7",
3+
"version": "2.5.8",
44
"private": false,
55
"description": "Vue 3 multiselect component with single select, multiselect and tagging options.",
66
"license": "MIT",

0 commit comments

Comments
 (0)