@mekari/pixel3-autocomplete 0.0.22-dev.0 → 0.0.22
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/autocomplete.js +23 -13
- package/dist/autocomplete.mjs +2 -2
- package/dist/{chunk-GNDEHE7F.mjs → chunk-56BVVD65.mjs} +23 -13
- package/dist/{chunk-WCITJGYW.mjs → chunk-PAF63OPQ.mjs} +1 -1
- package/dist/index.js +23 -13
- package/dist/index.mjs +2 -2
- package/dist/metafile-cjs.json +1 -1
- package/dist/metafile-esm.json +1 -1
- package/dist/modules/autocomplete.hooks.d.mts +1 -0
- package/dist/modules/autocomplete.hooks.d.ts +1 -0
- package/dist/modules/autocomplete.hooks.js +23 -13
- package/dist/modules/autocomplete.hooks.mjs +1 -1
- package/package.json +8 -8
package/dist/autocomplete.js
CHANGED
|
@@ -178,6 +178,7 @@ function useAutocomplete(props, emit) {
|
|
|
178
178
|
const {
|
|
179
179
|
isNextTheme
|
|
180
180
|
} = (0, import_pixel3_utils.usePixelTheme)();
|
|
181
|
+
const inputNode = (0, import_vue.ref)();
|
|
181
182
|
const scrollEndNode = (0, import_vue.ref)();
|
|
182
183
|
const currentValue = (0, import_vue.ref)();
|
|
183
184
|
const currentLabel = (0, import_vue.ref)("");
|
|
@@ -267,9 +268,9 @@ function useAutocomplete(props, emit) {
|
|
|
267
268
|
}
|
|
268
269
|
__name(onOpenPopover, "onOpenPopover");
|
|
269
270
|
function onBlur() {
|
|
271
|
+
var _a, _b;
|
|
270
272
|
isPopoverOpen.value = false;
|
|
271
|
-
|
|
272
|
-
inputEl == null ? void 0 : inputEl.blur();
|
|
273
|
+
(_b = (_a = inputNode == null ? void 0 : inputNode.value) == null ? void 0 : _a.$el.childNodes[0]) == null ? void 0 : _b.blur();
|
|
273
274
|
setInputValueToCurrentSelection();
|
|
274
275
|
currentSearch.value = "";
|
|
275
276
|
if (isInfinityScroll.value) {
|
|
@@ -327,16 +328,24 @@ function useAutocomplete(props, emit) {
|
|
|
327
328
|
}
|
|
328
329
|
__name(onModelValueChange, "onModelValueChange");
|
|
329
330
|
function setInputValueToCurrentSelection() {
|
|
330
|
-
var _a, _b;
|
|
331
|
-
const inputEl =
|
|
332
|
-
inputEl.value = (
|
|
331
|
+
var _a, _b, _c;
|
|
332
|
+
const inputEl = (_a = inputNode == null ? void 0 : inputNode.value) == null ? void 0 : _a.$el.childNodes[0];
|
|
333
|
+
inputEl.value = (_c = (_b = currentLabel.value) != null ? _b : currentValue.value) != null ? _c : "";
|
|
333
334
|
}
|
|
334
335
|
__name(setInputValueToCurrentSelection, "setInputValueToCurrentSelection");
|
|
335
336
|
function handleForceFocusToInput() {
|
|
336
|
-
|
|
337
|
-
|
|
337
|
+
var _a, _b;
|
|
338
|
+
(_b = (_a = inputNode == null ? void 0 : inputNode.value) == null ? void 0 : _a.$el.childNodes[0]) == null ? void 0 : _b.focus();
|
|
338
339
|
}
|
|
339
340
|
__name(handleForceFocusToInput, "handleForceFocusToInput");
|
|
341
|
+
function handleClickChevronsDown() {
|
|
342
|
+
if (isPopoverOpen.value) {
|
|
343
|
+
onBlur();
|
|
344
|
+
} else {
|
|
345
|
+
handleForceFocusToInput();
|
|
346
|
+
}
|
|
347
|
+
}
|
|
348
|
+
__name(handleClickChevronsDown, "handleClickChevronsDown");
|
|
340
349
|
function onKeydown(e) {
|
|
341
350
|
if (e.code === "Enter") {
|
|
342
351
|
if (getSuggestionDatas.value.length) {
|
|
@@ -416,12 +425,11 @@ function useAutocomplete(props, emit) {
|
|
|
416
425
|
__name(isListItemActive, "isListItemActive");
|
|
417
426
|
const rootAttrs = (0, import_vue.computed)(() => {
|
|
418
427
|
return {
|
|
419
|
-
|
|
428
|
+
"data-pixel-component": "MpAutocomplete",
|
|
429
|
+
class: classes.root,
|
|
420
430
|
style: {
|
|
421
|
-
width: props.isFullWidth ? "100%" : "fit-content"
|
|
422
|
-
position: "relative"
|
|
431
|
+
width: props.isFullWidth ? "100%" : "fit-content"
|
|
423
432
|
},
|
|
424
|
-
"data-pixel-component": "MpAutocomplete",
|
|
425
433
|
onMouseenter: () => {
|
|
426
434
|
isOutside.value = false;
|
|
427
435
|
},
|
|
@@ -455,6 +463,7 @@ function useAutocomplete(props, emit) {
|
|
|
455
463
|
});
|
|
456
464
|
const inputAtrrs = (0, import_vue.computed)(() => {
|
|
457
465
|
return {
|
|
466
|
+
ref: inputNode,
|
|
458
467
|
id: getId,
|
|
459
468
|
class: classes.input,
|
|
460
469
|
modelValue: currentLabel.value,
|
|
@@ -474,9 +483,10 @@ function useAutocomplete(props, emit) {
|
|
|
474
483
|
}
|
|
475
484
|
},
|
|
476
485
|
onClear: (e) => {
|
|
486
|
+
var _a;
|
|
477
487
|
onSelectListItem("");
|
|
478
488
|
currentLabel.value = "";
|
|
479
|
-
const inputEl =
|
|
489
|
+
const inputEl = (_a = inputNode == null ? void 0 : inputNode.value) == null ? void 0 : _a.$el.childNodes[0];
|
|
480
490
|
if (inputEl)
|
|
481
491
|
inputEl.value = "";
|
|
482
492
|
emit("clear", e);
|
|
@@ -491,7 +501,7 @@ function useAutocomplete(props, emit) {
|
|
|
491
501
|
style: {
|
|
492
502
|
cursor: "pointer"
|
|
493
503
|
},
|
|
494
|
-
onClick:
|
|
504
|
+
onClick: handleClickChevronsDown
|
|
495
505
|
};
|
|
496
506
|
});
|
|
497
507
|
const buttonActionAttrs = (0, import_vue.computed)(() => {
|
package/dist/autocomplete.mjs
CHANGED
|
@@ -27,6 +27,7 @@ function useAutocomplete(props, emit) {
|
|
|
27
27
|
const {
|
|
28
28
|
isNextTheme
|
|
29
29
|
} = usePixelTheme();
|
|
30
|
+
const inputNode = ref();
|
|
30
31
|
const scrollEndNode = ref();
|
|
31
32
|
const currentValue = ref();
|
|
32
33
|
const currentLabel = ref("");
|
|
@@ -116,9 +117,9 @@ function useAutocomplete(props, emit) {
|
|
|
116
117
|
}
|
|
117
118
|
__name(onOpenPopover, "onOpenPopover");
|
|
118
119
|
function onBlur() {
|
|
120
|
+
var _a, _b;
|
|
119
121
|
isPopoverOpen.value = false;
|
|
120
|
-
|
|
121
|
-
inputEl == null ? void 0 : inputEl.blur();
|
|
122
|
+
(_b = (_a = inputNode == null ? void 0 : inputNode.value) == null ? void 0 : _a.$el.childNodes[0]) == null ? void 0 : _b.blur();
|
|
122
123
|
setInputValueToCurrentSelection();
|
|
123
124
|
currentSearch.value = "";
|
|
124
125
|
if (isInfinityScroll.value) {
|
|
@@ -176,16 +177,24 @@ function useAutocomplete(props, emit) {
|
|
|
176
177
|
}
|
|
177
178
|
__name(onModelValueChange, "onModelValueChange");
|
|
178
179
|
function setInputValueToCurrentSelection() {
|
|
179
|
-
var _a, _b;
|
|
180
|
-
const inputEl =
|
|
181
|
-
inputEl.value = (
|
|
180
|
+
var _a, _b, _c;
|
|
181
|
+
const inputEl = (_a = inputNode == null ? void 0 : inputNode.value) == null ? void 0 : _a.$el.childNodes[0];
|
|
182
|
+
inputEl.value = (_c = (_b = currentLabel.value) != null ? _b : currentValue.value) != null ? _c : "";
|
|
182
183
|
}
|
|
183
184
|
__name(setInputValueToCurrentSelection, "setInputValueToCurrentSelection");
|
|
184
185
|
function handleForceFocusToInput() {
|
|
185
|
-
|
|
186
|
-
|
|
186
|
+
var _a, _b;
|
|
187
|
+
(_b = (_a = inputNode == null ? void 0 : inputNode.value) == null ? void 0 : _a.$el.childNodes[0]) == null ? void 0 : _b.focus();
|
|
187
188
|
}
|
|
188
189
|
__name(handleForceFocusToInput, "handleForceFocusToInput");
|
|
190
|
+
function handleClickChevronsDown() {
|
|
191
|
+
if (isPopoverOpen.value) {
|
|
192
|
+
onBlur();
|
|
193
|
+
} else {
|
|
194
|
+
handleForceFocusToInput();
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
__name(handleClickChevronsDown, "handleClickChevronsDown");
|
|
189
198
|
function onKeydown(e) {
|
|
190
199
|
if (e.code === "Enter") {
|
|
191
200
|
if (getSuggestionDatas.value.length) {
|
|
@@ -265,12 +274,11 @@ function useAutocomplete(props, emit) {
|
|
|
265
274
|
__name(isListItemActive, "isListItemActive");
|
|
266
275
|
const rootAttrs = computed(() => {
|
|
267
276
|
return {
|
|
268
|
-
|
|
277
|
+
"data-pixel-component": "MpAutocomplete",
|
|
278
|
+
class: classes.root,
|
|
269
279
|
style: {
|
|
270
|
-
width: props.isFullWidth ? "100%" : "fit-content"
|
|
271
|
-
position: "relative"
|
|
280
|
+
width: props.isFullWidth ? "100%" : "fit-content"
|
|
272
281
|
},
|
|
273
|
-
"data-pixel-component": "MpAutocomplete",
|
|
274
282
|
onMouseenter: () => {
|
|
275
283
|
isOutside.value = false;
|
|
276
284
|
},
|
|
@@ -304,6 +312,7 @@ function useAutocomplete(props, emit) {
|
|
|
304
312
|
});
|
|
305
313
|
const inputAtrrs = computed(() => {
|
|
306
314
|
return {
|
|
315
|
+
ref: inputNode,
|
|
307
316
|
id: getId,
|
|
308
317
|
class: classes.input,
|
|
309
318
|
modelValue: currentLabel.value,
|
|
@@ -323,9 +332,10 @@ function useAutocomplete(props, emit) {
|
|
|
323
332
|
}
|
|
324
333
|
},
|
|
325
334
|
onClear: (e) => {
|
|
335
|
+
var _a;
|
|
326
336
|
onSelectListItem("");
|
|
327
337
|
currentLabel.value = "";
|
|
328
|
-
const inputEl =
|
|
338
|
+
const inputEl = (_a = inputNode == null ? void 0 : inputNode.value) == null ? void 0 : _a.$el.childNodes[0];
|
|
329
339
|
if (inputEl)
|
|
330
340
|
inputEl.value = "";
|
|
331
341
|
emit("clear", e);
|
|
@@ -340,7 +350,7 @@ function useAutocomplete(props, emit) {
|
|
|
340
350
|
style: {
|
|
341
351
|
cursor: "pointer"
|
|
342
352
|
},
|
|
343
|
-
onClick:
|
|
353
|
+
onClick: handleClickChevronsDown
|
|
344
354
|
};
|
|
345
355
|
});
|
|
346
356
|
const buttonActionAttrs = computed(() => {
|
package/dist/index.js
CHANGED
|
@@ -180,6 +180,7 @@ function useAutocomplete(props, emit) {
|
|
|
180
180
|
const {
|
|
181
181
|
isNextTheme
|
|
182
182
|
} = (0, import_pixel3_utils.usePixelTheme)();
|
|
183
|
+
const inputNode = (0, import_vue.ref)();
|
|
183
184
|
const scrollEndNode = (0, import_vue.ref)();
|
|
184
185
|
const currentValue = (0, import_vue.ref)();
|
|
185
186
|
const currentLabel = (0, import_vue.ref)("");
|
|
@@ -269,9 +270,9 @@ function useAutocomplete(props, emit) {
|
|
|
269
270
|
}
|
|
270
271
|
__name(onOpenPopover, "onOpenPopover");
|
|
271
272
|
function onBlur() {
|
|
273
|
+
var _a, _b;
|
|
272
274
|
isPopoverOpen.value = false;
|
|
273
|
-
|
|
274
|
-
inputEl == null ? void 0 : inputEl.blur();
|
|
275
|
+
(_b = (_a = inputNode == null ? void 0 : inputNode.value) == null ? void 0 : _a.$el.childNodes[0]) == null ? void 0 : _b.blur();
|
|
275
276
|
setInputValueToCurrentSelection();
|
|
276
277
|
currentSearch.value = "";
|
|
277
278
|
if (isInfinityScroll.value) {
|
|
@@ -329,16 +330,24 @@ function useAutocomplete(props, emit) {
|
|
|
329
330
|
}
|
|
330
331
|
__name(onModelValueChange, "onModelValueChange");
|
|
331
332
|
function setInputValueToCurrentSelection() {
|
|
332
|
-
var _a, _b;
|
|
333
|
-
const inputEl =
|
|
334
|
-
inputEl.value = (
|
|
333
|
+
var _a, _b, _c;
|
|
334
|
+
const inputEl = (_a = inputNode == null ? void 0 : inputNode.value) == null ? void 0 : _a.$el.childNodes[0];
|
|
335
|
+
inputEl.value = (_c = (_b = currentLabel.value) != null ? _b : currentValue.value) != null ? _c : "";
|
|
335
336
|
}
|
|
336
337
|
__name(setInputValueToCurrentSelection, "setInputValueToCurrentSelection");
|
|
337
338
|
function handleForceFocusToInput() {
|
|
338
|
-
|
|
339
|
-
|
|
339
|
+
var _a, _b;
|
|
340
|
+
(_b = (_a = inputNode == null ? void 0 : inputNode.value) == null ? void 0 : _a.$el.childNodes[0]) == null ? void 0 : _b.focus();
|
|
340
341
|
}
|
|
341
342
|
__name(handleForceFocusToInput, "handleForceFocusToInput");
|
|
343
|
+
function handleClickChevronsDown() {
|
|
344
|
+
if (isPopoverOpen.value) {
|
|
345
|
+
onBlur();
|
|
346
|
+
} else {
|
|
347
|
+
handleForceFocusToInput();
|
|
348
|
+
}
|
|
349
|
+
}
|
|
350
|
+
__name(handleClickChevronsDown, "handleClickChevronsDown");
|
|
342
351
|
function onKeydown(e) {
|
|
343
352
|
if (e.code === "Enter") {
|
|
344
353
|
if (getSuggestionDatas.value.length) {
|
|
@@ -418,12 +427,11 @@ function useAutocomplete(props, emit) {
|
|
|
418
427
|
__name(isListItemActive, "isListItemActive");
|
|
419
428
|
const rootAttrs = (0, import_vue.computed)(() => {
|
|
420
429
|
return {
|
|
421
|
-
|
|
430
|
+
"data-pixel-component": "MpAutocomplete",
|
|
431
|
+
class: classes.root,
|
|
422
432
|
style: {
|
|
423
|
-
width: props.isFullWidth ? "100%" : "fit-content"
|
|
424
|
-
position: "relative"
|
|
433
|
+
width: props.isFullWidth ? "100%" : "fit-content"
|
|
425
434
|
},
|
|
426
|
-
"data-pixel-component": "MpAutocomplete",
|
|
427
435
|
onMouseenter: () => {
|
|
428
436
|
isOutside.value = false;
|
|
429
437
|
},
|
|
@@ -457,6 +465,7 @@ function useAutocomplete(props, emit) {
|
|
|
457
465
|
});
|
|
458
466
|
const inputAtrrs = (0, import_vue.computed)(() => {
|
|
459
467
|
return {
|
|
468
|
+
ref: inputNode,
|
|
460
469
|
id: getId,
|
|
461
470
|
class: classes.input,
|
|
462
471
|
modelValue: currentLabel.value,
|
|
@@ -476,9 +485,10 @@ function useAutocomplete(props, emit) {
|
|
|
476
485
|
}
|
|
477
486
|
},
|
|
478
487
|
onClear: (e) => {
|
|
488
|
+
var _a;
|
|
479
489
|
onSelectListItem("");
|
|
480
490
|
currentLabel.value = "";
|
|
481
|
-
const inputEl =
|
|
491
|
+
const inputEl = (_a = inputNode == null ? void 0 : inputNode.value) == null ? void 0 : _a.$el.childNodes[0];
|
|
482
492
|
if (inputEl)
|
|
483
493
|
inputEl.value = "";
|
|
484
494
|
emit("clear", e);
|
|
@@ -493,7 +503,7 @@ function useAutocomplete(props, emit) {
|
|
|
493
503
|
style: {
|
|
494
504
|
cursor: "pointer"
|
|
495
505
|
},
|
|
496
|
-
onClick:
|
|
506
|
+
onClick: handleClickChevronsDown
|
|
497
507
|
};
|
|
498
508
|
});
|
|
499
509
|
const buttonActionAttrs = (0, import_vue.computed)(() => {
|
package/dist/index.mjs
CHANGED
package/dist/metafile-cjs.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"src/modules/autocomplete.props.ts":{"bytes":3480,"imports":[],"format":"esm"},"src/modules/autocomplete.hooks.ts":{"bytes":
|
|
1
|
+
{"inputs":{"src/modules/autocomplete.props.ts":{"bytes":3480,"imports":[],"format":"esm"},"src/modules/autocomplete.hooks.ts":{"bytes":13228,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/autocomplete.tsx":{"bytes":5026,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-popover","kind":"import-statement","external":true},{"path":"@mekari/pixel3-input","kind":"import-statement","external":true},{"path":"@mekari/pixel3-spinner","kind":"import-statement","external":true},{"path":"@mekari/pixel3-icon","kind":"import-statement","external":true},{"path":"@mekari/pixel3-text","kind":"import-statement","external":true},{"path":"src/modules/autocomplete.props.ts","kind":"import-statement","original":"./modules/autocomplete.props"},{"path":"src/modules/autocomplete.hooks.ts","kind":"import-statement","original":"./modules/autocomplete.hooks"},{"path":"@mekari/pixel3-styled-system/patterns","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true}],"format":"esm"},"src/index.ts":{"bytes":133,"imports":[{"path":"src/autocomplete.tsx","kind":"import-statement","original":"./autocomplete"}],"format":"esm"}},"outputs":{"dist/autocomplete.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-popover","kind":"require-call","external":true},{"path":"@mekari/pixel3-input","kind":"require-call","external":true},{"path":"@mekari/pixel3-spinner","kind":"require-call","external":true},{"path":"@mekari/pixel3-icon","kind":"require-call","external":true},{"path":"@mekari/pixel3-text","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/patterns","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/autocomplete.tsx","inputs":{"src/autocomplete.tsx":{"bytesInOutput":5438},"src/modules/autocomplete.props.ts":{"bytesInOutput":1882},"src/modules/autocomplete.hooks.ts":{"bytesInOutput":13671}},"bytes":22114},"dist/index.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-popover","kind":"require-call","external":true},{"path":"@mekari/pixel3-input","kind":"require-call","external":true},{"path":"@mekari/pixel3-spinner","kind":"require-call","external":true},{"path":"@mekari/pixel3-icon","kind":"require-call","external":true},{"path":"@mekari/pixel3-text","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/patterns","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":133},"src/autocomplete.tsx":{"bytesInOutput":5278},"src/modules/autocomplete.props.ts":{"bytesInOutput":1882},"src/modules/autocomplete.hooks.ts":{"bytesInOutput":13671}},"bytes":22104},"dist/modules/autocomplete.hooks.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/modules/autocomplete.hooks.ts","inputs":{"src/modules/autocomplete.hooks.ts":{"bytesInOutput":13851}},"bytes":14887},"dist/modules/autocomplete.props.js":{"imports":[],"exports":[],"entryPoint":"src/modules/autocomplete.props.ts","inputs":{"src/modules/autocomplete.props.ts":{"bytesInOutput":2231}},"bytes":3199}}}
|
package/dist/metafile-esm.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"src/modules/autocomplete.props.ts":{"bytes":3480,"imports":[],"format":"esm"},"src/modules/autocomplete.hooks.ts":{"bytes":
|
|
1
|
+
{"inputs":{"src/modules/autocomplete.props.ts":{"bytes":3480,"imports":[],"format":"esm"},"src/modules/autocomplete.hooks.ts":{"bytes":13228,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/autocomplete.tsx":{"bytes":5026,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-popover","kind":"import-statement","external":true},{"path":"@mekari/pixel3-input","kind":"import-statement","external":true},{"path":"@mekari/pixel3-spinner","kind":"import-statement","external":true},{"path":"@mekari/pixel3-icon","kind":"import-statement","external":true},{"path":"@mekari/pixel3-text","kind":"import-statement","external":true},{"path":"src/modules/autocomplete.props.ts","kind":"import-statement","original":"./modules/autocomplete.props"},{"path":"src/modules/autocomplete.hooks.ts","kind":"import-statement","original":"./modules/autocomplete.hooks"},{"path":"@mekari/pixel3-styled-system/patterns","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true}],"format":"esm"},"src/index.ts":{"bytes":133,"imports":[{"path":"src/autocomplete.tsx","kind":"import-statement","original":"./autocomplete"}],"format":"esm"}},"outputs":{"dist/autocomplete.mjs":{"imports":[{"path":"dist/chunk-PAF63OPQ.mjs","kind":"import-statement"},{"path":"dist/chunk-56BVVD65.mjs","kind":"import-statement"},{"path":"dist/chunk-Q7SGQCOH.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpAutocomplete"],"entryPoint":"src/autocomplete.tsx","inputs":{},"bytes":179},"dist/index.mjs":{"imports":[{"path":"dist/chunk-PAF63OPQ.mjs","kind":"import-statement"},{"path":"dist/chunk-56BVVD65.mjs","kind":"import-statement"},{"path":"dist/chunk-Q7SGQCOH.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpAutocomplete"],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":0}},"bytes":179},"dist/chunk-PAF63OPQ.mjs":{"imports":[{"path":"dist/chunk-56BVVD65.mjs","kind":"import-statement"},{"path":"dist/chunk-Q7SGQCOH.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-popover","kind":"import-statement","external":true},{"path":"@mekari/pixel3-input","kind":"import-statement","external":true},{"path":"@mekari/pixel3-spinner","kind":"import-statement","external":true},{"path":"@mekari/pixel3-icon","kind":"import-statement","external":true},{"path":"@mekari/pixel3-text","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/patterns","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true}],"exports":["MpAutocomplete"],"inputs":{"src/autocomplete.tsx":{"bytesInOutput":4589}},"bytes":4762},"dist/modules/autocomplete.hooks.mjs":{"imports":[{"path":"dist/chunk-56BVVD65.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["useAutocomplete"],"entryPoint":"src/modules/autocomplete.hooks.ts","inputs":{},"bytes":121},"dist/chunk-56BVVD65.mjs":{"imports":[{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true}],"exports":["useAutocomplete"],"inputs":{"src/modules/autocomplete.hooks.ts":{"bytesInOutput":13027}},"bytes":13145},"dist/modules/autocomplete.props.mjs":{"imports":[{"path":"dist/chunk-Q7SGQCOH.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["autocompleteEmit","autocompleteProps"],"entryPoint":"src/modules/autocomplete.props.ts","inputs":{},"bytes":165},"dist/chunk-Q7SGQCOH.mjs":{"imports":[],"exports":["autocompleteEmit","autocompleteProps"],"inputs":{"src/modules/autocomplete.props.ts":{"bytesInOutput":2003}},"bytes":2093},"dist/chunk-QZ7VFGWC.mjs":{"imports":[],"exports":["__name"],"inputs":{},"bytes":151}}}
|
|
@@ -48,6 +48,7 @@ function useAutocomplete(props, emit) {
|
|
|
48
48
|
const {
|
|
49
49
|
isNextTheme
|
|
50
50
|
} = (0, import_pixel3_utils.usePixelTheme)();
|
|
51
|
+
const inputNode = (0, import_vue.ref)();
|
|
51
52
|
const scrollEndNode = (0, import_vue.ref)();
|
|
52
53
|
const currentValue = (0, import_vue.ref)();
|
|
53
54
|
const currentLabel = (0, import_vue.ref)("");
|
|
@@ -137,9 +138,9 @@ function useAutocomplete(props, emit) {
|
|
|
137
138
|
}
|
|
138
139
|
__name(onOpenPopover, "onOpenPopover");
|
|
139
140
|
function onBlur() {
|
|
141
|
+
var _a, _b;
|
|
140
142
|
isPopoverOpen.value = false;
|
|
141
|
-
|
|
142
|
-
inputEl == null ? void 0 : inputEl.blur();
|
|
143
|
+
(_b = (_a = inputNode == null ? void 0 : inputNode.value) == null ? void 0 : _a.$el.childNodes[0]) == null ? void 0 : _b.blur();
|
|
143
144
|
setInputValueToCurrentSelection();
|
|
144
145
|
currentSearch.value = "";
|
|
145
146
|
if (isInfinityScroll.value) {
|
|
@@ -197,16 +198,24 @@ function useAutocomplete(props, emit) {
|
|
|
197
198
|
}
|
|
198
199
|
__name(onModelValueChange, "onModelValueChange");
|
|
199
200
|
function setInputValueToCurrentSelection() {
|
|
200
|
-
var _a, _b;
|
|
201
|
-
const inputEl =
|
|
202
|
-
inputEl.value = (
|
|
201
|
+
var _a, _b, _c;
|
|
202
|
+
const inputEl = (_a = inputNode == null ? void 0 : inputNode.value) == null ? void 0 : _a.$el.childNodes[0];
|
|
203
|
+
inputEl.value = (_c = (_b = currentLabel.value) != null ? _b : currentValue.value) != null ? _c : "";
|
|
203
204
|
}
|
|
204
205
|
__name(setInputValueToCurrentSelection, "setInputValueToCurrentSelection");
|
|
205
206
|
function handleForceFocusToInput() {
|
|
206
|
-
|
|
207
|
-
|
|
207
|
+
var _a, _b;
|
|
208
|
+
(_b = (_a = inputNode == null ? void 0 : inputNode.value) == null ? void 0 : _a.$el.childNodes[0]) == null ? void 0 : _b.focus();
|
|
208
209
|
}
|
|
209
210
|
__name(handleForceFocusToInput, "handleForceFocusToInput");
|
|
211
|
+
function handleClickChevronsDown() {
|
|
212
|
+
if (isPopoverOpen.value) {
|
|
213
|
+
onBlur();
|
|
214
|
+
} else {
|
|
215
|
+
handleForceFocusToInput();
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
__name(handleClickChevronsDown, "handleClickChevronsDown");
|
|
210
219
|
function onKeydown(e) {
|
|
211
220
|
if (e.code === "Enter") {
|
|
212
221
|
if (getSuggestionDatas.value.length) {
|
|
@@ -286,12 +295,11 @@ function useAutocomplete(props, emit) {
|
|
|
286
295
|
__name(isListItemActive, "isListItemActive");
|
|
287
296
|
const rootAttrs = (0, import_vue.computed)(() => {
|
|
288
297
|
return {
|
|
289
|
-
|
|
298
|
+
"data-pixel-component": "MpAutocomplete",
|
|
299
|
+
class: classes.root,
|
|
290
300
|
style: {
|
|
291
|
-
width: props.isFullWidth ? "100%" : "fit-content"
|
|
292
|
-
position: "relative"
|
|
301
|
+
width: props.isFullWidth ? "100%" : "fit-content"
|
|
293
302
|
},
|
|
294
|
-
"data-pixel-component": "MpAutocomplete",
|
|
295
303
|
onMouseenter: () => {
|
|
296
304
|
isOutside.value = false;
|
|
297
305
|
},
|
|
@@ -325,6 +333,7 @@ function useAutocomplete(props, emit) {
|
|
|
325
333
|
});
|
|
326
334
|
const inputAtrrs = (0, import_vue.computed)(() => {
|
|
327
335
|
return {
|
|
336
|
+
ref: inputNode,
|
|
328
337
|
id: getId,
|
|
329
338
|
class: classes.input,
|
|
330
339
|
modelValue: currentLabel.value,
|
|
@@ -344,9 +353,10 @@ function useAutocomplete(props, emit) {
|
|
|
344
353
|
}
|
|
345
354
|
},
|
|
346
355
|
onClear: (e) => {
|
|
356
|
+
var _a;
|
|
347
357
|
onSelectListItem("");
|
|
348
358
|
currentLabel.value = "";
|
|
349
|
-
const inputEl =
|
|
359
|
+
const inputEl = (_a = inputNode == null ? void 0 : inputNode.value) == null ? void 0 : _a.$el.childNodes[0];
|
|
350
360
|
if (inputEl)
|
|
351
361
|
inputEl.value = "";
|
|
352
362
|
emit("clear", e);
|
|
@@ -361,7 +371,7 @@ function useAutocomplete(props, emit) {
|
|
|
361
371
|
style: {
|
|
362
372
|
cursor: "pointer"
|
|
363
373
|
},
|
|
364
|
-
onClick:
|
|
374
|
+
onClick: handleClickChevronsDown
|
|
365
375
|
};
|
|
366
376
|
});
|
|
367
377
|
const buttonActionAttrs = (0, import_vue.computed)(() => {
|
package/package.json
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mekari/pixel3-autocomplete",
|
|
3
3
|
"description": "Autocomplete component for mekari pixel 3",
|
|
4
|
-
"version": "0.0.22
|
|
4
|
+
"version": "0.0.22",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"files": [
|
|
8
8
|
"dist"
|
|
9
9
|
],
|
|
10
10
|
"dependencies": {
|
|
11
|
-
"@mekari/pixel3-styled-system": "0.1.
|
|
12
|
-
"@mekari/pixel3-utils": "0.0.8
|
|
13
|
-
"@mekari/pixel3-input": "0.0.22
|
|
14
|
-
"@mekari/pixel3-icon": "0.0.22
|
|
15
|
-
"@mekari/pixel3-spinner": "0.0.22
|
|
16
|
-
"@mekari/pixel3-popover": "0.0.22
|
|
17
|
-
"@mekari/pixel3-text": "0.0.20
|
|
11
|
+
"@mekari/pixel3-styled-system": "0.1.6",
|
|
12
|
+
"@mekari/pixel3-utils": "0.0.8",
|
|
13
|
+
"@mekari/pixel3-input": "0.0.22",
|
|
14
|
+
"@mekari/pixel3-icon": "0.0.22",
|
|
15
|
+
"@mekari/pixel3-spinner": "0.0.22",
|
|
16
|
+
"@mekari/pixel3-popover": "0.0.22",
|
|
17
|
+
"@mekari/pixel3-text": "0.0.20"
|
|
18
18
|
},
|
|
19
19
|
"peerDependencies": {
|
|
20
20
|
"vue": "^3.4.9"
|