@mekari/pixel3-autocomplete 0.0.11 → 0.0.12-dev.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/dist/autocomplete.js +24 -45
- package/dist/autocomplete.mjs +2 -2
- package/dist/{chunk-RG5ONV6A.mjs → chunk-O3OHBZY3.mjs} +6 -10
- package/dist/{chunk-LSNIK4FE.mjs → chunk-PMJPOHWJ.mjs} +19 -36
- package/dist/index.js +24 -45
- 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 +10 -0
- package/dist/modules/autocomplete.hooks.d.ts +10 -0
- package/dist/modules/autocomplete.hooks.js +19 -36
- package/dist/modules/autocomplete.hooks.mjs +1 -1
- package/package.json +7 -7
package/dist/autocomplete.js
CHANGED
|
@@ -156,7 +156,7 @@ var autocompleteProps = {
|
|
|
156
156
|
// src/modules/autocomplete.hooks.ts
|
|
157
157
|
var import_vue = require("vue");
|
|
158
158
|
var import_pixel3_utils = require("@mekari/pixel3-utils");
|
|
159
|
-
var
|
|
159
|
+
var import_recipes = require("@mekari/pixel3-styled-system/recipes");
|
|
160
160
|
function useAutocomplete(props, emit) {
|
|
161
161
|
const {
|
|
162
162
|
data,
|
|
@@ -174,6 +174,7 @@ function useAutocomplete(props, emit) {
|
|
|
174
174
|
isInvalid,
|
|
175
175
|
isDisabled
|
|
176
176
|
} = (0, import_vue.toRefs)(props);
|
|
177
|
+
const classes = (0, import_recipes.autocompleteSlotRecipe)();
|
|
177
178
|
const scrollEndNode = (0, import_vue.ref)();
|
|
178
179
|
const currentValue = (0, import_vue.ref)();
|
|
179
180
|
const currentLabel = (0, import_vue.ref)("");
|
|
@@ -426,11 +427,7 @@ function useAutocomplete(props, emit) {
|
|
|
426
427
|
});
|
|
427
428
|
const popoverContentAtrrs = (0, import_vue.computed)(() => {
|
|
428
429
|
return {
|
|
429
|
-
class:
|
|
430
|
-
maxHeight: "300px",
|
|
431
|
-
overflowY: "auto",
|
|
432
|
-
position: "relative"
|
|
433
|
-
}),
|
|
430
|
+
class: classes.popoverContent,
|
|
434
431
|
onClick: handleForceFocusToInput,
|
|
435
432
|
onMouseenter: () => {
|
|
436
433
|
isOutside.value = false;
|
|
@@ -469,27 +466,21 @@ function useAutocomplete(props, emit) {
|
|
|
469
466
|
}
|
|
470
467
|
};
|
|
471
468
|
});
|
|
469
|
+
const iconChevronsDownAttrs = (0, import_vue.computed)(() => {
|
|
470
|
+
return {
|
|
471
|
+
"aria-label": "dropdown button",
|
|
472
|
+
name: "chevrons-down",
|
|
473
|
+
size: "sm",
|
|
474
|
+
color: "gray.400",
|
|
475
|
+
style: {
|
|
476
|
+
cursor: "pointer"
|
|
477
|
+
},
|
|
478
|
+
onClick: handleForceFocusToInput
|
|
479
|
+
};
|
|
480
|
+
});
|
|
472
481
|
const buttonActionAttrs = (0, import_vue.computed)(() => {
|
|
473
482
|
return {
|
|
474
|
-
class:
|
|
475
|
-
cursor: "pointer",
|
|
476
|
-
width: "full",
|
|
477
|
-
textAlign: "center",
|
|
478
|
-
roundedTop: "0",
|
|
479
|
-
borderTopWidth: "1px",
|
|
480
|
-
borderColor: "blue.50",
|
|
481
|
-
color: "blue.400",
|
|
482
|
-
position: "sticky",
|
|
483
|
-
bottom: "0px",
|
|
484
|
-
bg: "white",
|
|
485
|
-
fontSize: "md",
|
|
486
|
-
zIndex: "999",
|
|
487
|
-
py: 2,
|
|
488
|
-
height: "9.5",
|
|
489
|
-
_hover: {
|
|
490
|
-
color: "blue.500"
|
|
491
|
-
}
|
|
492
|
-
}),
|
|
483
|
+
class: classes.buttonAction,
|
|
493
484
|
onClick: (e) => {
|
|
494
485
|
e.stopPropagation();
|
|
495
486
|
emit("buttonAction", getSuggestionDatas.value, currentSearch.value);
|
|
@@ -500,19 +491,10 @@ function useAutocomplete(props, emit) {
|
|
|
500
491
|
});
|
|
501
492
|
const emptyTextAttrs = {
|
|
502
493
|
color: "gray.400",
|
|
503
|
-
class:
|
|
504
|
-
px: 3,
|
|
505
|
-
py: 2
|
|
506
|
-
})
|
|
494
|
+
class: classes.emptyText
|
|
507
495
|
};
|
|
508
496
|
const contentLoadingAttrs = {
|
|
509
|
-
class:
|
|
510
|
-
px: 3,
|
|
511
|
-
py: 2,
|
|
512
|
-
display: "flex",
|
|
513
|
-
alignItems: "center",
|
|
514
|
-
gap: 3
|
|
515
|
-
})
|
|
497
|
+
class: classes.contentLoading
|
|
516
498
|
};
|
|
517
499
|
const popoverListItemAttrs = /* @__PURE__ */ __name((item, index) => {
|
|
518
500
|
const innerValue = getValue(item);
|
|
@@ -552,6 +534,7 @@ function useAutocomplete(props, emit) {
|
|
|
552
534
|
popoverAtrrs,
|
|
553
535
|
popoverContentAtrrs,
|
|
554
536
|
inputAtrrs,
|
|
537
|
+
iconChevronsDownAttrs,
|
|
555
538
|
buttonActionAttrs,
|
|
556
539
|
emptyTextAttrs,
|
|
557
540
|
contentLoadingAttrs,
|
|
@@ -563,7 +546,7 @@ __name(useAutocomplete, "useAutocomplete");
|
|
|
563
546
|
|
|
564
547
|
// src/autocomplete.tsx
|
|
565
548
|
var import_patterns = require("@mekari/pixel3-styled-system/patterns");
|
|
566
|
-
var
|
|
549
|
+
var import_recipes2 = require("@mekari/pixel3-styled-system/recipes");
|
|
567
550
|
var MpAutocomplete = (0, import_vue3.defineComponent)({
|
|
568
551
|
name: "MpAutocomplete",
|
|
569
552
|
inheritAttrs: false,
|
|
@@ -574,6 +557,7 @@ var MpAutocomplete = (0, import_vue3.defineComponent)({
|
|
|
574
557
|
slots,
|
|
575
558
|
attrs
|
|
576
559
|
}) {
|
|
560
|
+
const classes = (0, import_recipes2.autocompleteSlotRecipe)();
|
|
577
561
|
const {
|
|
578
562
|
getSuggestionDatas,
|
|
579
563
|
getGroupSuggestions,
|
|
@@ -583,6 +567,7 @@ var MpAutocomplete = (0, import_vue3.defineComponent)({
|
|
|
583
567
|
popoverAtrrs,
|
|
584
568
|
popoverContentAtrrs,
|
|
585
569
|
inputAtrrs,
|
|
570
|
+
iconChevronsDownAttrs,
|
|
586
571
|
buttonActionAttrs,
|
|
587
572
|
emptyTextAttrs,
|
|
588
573
|
contentLoadingAttrs,
|
|
@@ -610,10 +595,7 @@ var MpAutocomplete = (0, import_vue3.defineComponent)({
|
|
|
610
595
|
}) : (0, import_vue2.createVNode)(import_pixel3_text.MpText, {
|
|
611
596
|
"size": "body-small",
|
|
612
597
|
"color": "gray.600",
|
|
613
|
-
"class":
|
|
614
|
-
px: 3,
|
|
615
|
-
py: 2
|
|
616
|
-
})
|
|
598
|
+
"class": classes.groupText
|
|
617
599
|
}, {
|
|
618
600
|
default: () => [group.key]
|
|
619
601
|
}), group.values.map((item) => {
|
|
@@ -639,10 +621,7 @@ var MpAutocomplete = (0, import_vue3.defineComponent)({
|
|
|
639
621
|
default: () => [slots.leftAddon && (0, import_vue2.createVNode)(import_pixel3_input.MpInputLeftAddon, null, {
|
|
640
622
|
default: () => [(0, import_vue2.createTextVNode)(" "), slots.leftAddon(), (0, import_vue2.createTextVNode)(" ")]
|
|
641
623
|
}), (0, import_vue2.createVNode)(import_pixel3_input.MpInput, (0, import_vue2.mergeProps)(inputAtrrs.value, attrs), null), (0, import_vue2.createVNode)(import_pixel3_input.MpInputRightAddon, null, {
|
|
642
|
-
default: () => [props.isLoading ? (0, import_vue2.createVNode)(import_pixel3_spinner.MpSpinner, null, null) : (0, import_vue2.createVNode)(import_pixel3_icon.MpIcon,
|
|
643
|
-
"name": "chevrons-down",
|
|
644
|
-
"size": "sm"
|
|
645
|
-
}, null)]
|
|
624
|
+
default: () => [props.isLoading ? (0, import_vue2.createVNode)(import_pixel3_spinner.MpSpinner, null, null) : (0, import_vue2.createVNode)(import_pixel3_icon.MpIcon, iconChevronsDownAttrs.value, null)]
|
|
646
625
|
})]
|
|
647
626
|
})]
|
|
648
627
|
}), (0, import_vue2.createVNode)(import_pixel3_popover.MpPopoverContent, popoverContentAtrrs.value, {
|
package/dist/autocomplete.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
useAutocomplete
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-PMJPOHWJ.mjs";
|
|
4
4
|
import {
|
|
5
5
|
autocompleteProps
|
|
6
6
|
} from "./chunk-Q7SGQCOH.mjs";
|
|
@@ -14,7 +14,7 @@ import { MpSpinner } from "@mekari/pixel3-spinner";
|
|
|
14
14
|
import { MpIcon } from "@mekari/pixel3-icon";
|
|
15
15
|
import { MpText } from "@mekari/pixel3-text";
|
|
16
16
|
import { flex } from "@mekari/pixel3-styled-system/patterns";
|
|
17
|
-
import {
|
|
17
|
+
import { autocompleteSlotRecipe } from "@mekari/pixel3-styled-system/recipes";
|
|
18
18
|
var MpAutocomplete = defineComponent({
|
|
19
19
|
name: "MpAutocomplete",
|
|
20
20
|
inheritAttrs: false,
|
|
@@ -25,6 +25,7 @@ var MpAutocomplete = defineComponent({
|
|
|
25
25
|
slots,
|
|
26
26
|
attrs
|
|
27
27
|
}) {
|
|
28
|
+
const classes = autocompleteSlotRecipe();
|
|
28
29
|
const {
|
|
29
30
|
getSuggestionDatas,
|
|
30
31
|
getGroupSuggestions,
|
|
@@ -34,6 +35,7 @@ var MpAutocomplete = defineComponent({
|
|
|
34
35
|
popoverAtrrs,
|
|
35
36
|
popoverContentAtrrs,
|
|
36
37
|
inputAtrrs,
|
|
38
|
+
iconChevronsDownAttrs,
|
|
37
39
|
buttonActionAttrs,
|
|
38
40
|
emptyTextAttrs,
|
|
39
41
|
contentLoadingAttrs,
|
|
@@ -61,10 +63,7 @@ var MpAutocomplete = defineComponent({
|
|
|
61
63
|
}) : _createVNode(MpText, {
|
|
62
64
|
"size": "body-small",
|
|
63
65
|
"color": "gray.600",
|
|
64
|
-
"class":
|
|
65
|
-
px: 3,
|
|
66
|
-
py: 2
|
|
67
|
-
})
|
|
66
|
+
"class": classes.groupText
|
|
68
67
|
}, {
|
|
69
68
|
default: () => [group.key]
|
|
70
69
|
}), group.values.map((item) => {
|
|
@@ -90,10 +89,7 @@ var MpAutocomplete = defineComponent({
|
|
|
90
89
|
default: () => [slots.leftAddon && _createVNode(MpInputLeftAddon, null, {
|
|
91
90
|
default: () => [_createTextVNode(" "), slots.leftAddon(), _createTextVNode(" ")]
|
|
92
91
|
}), _createVNode(MpInput, _mergeProps(inputAtrrs.value, attrs), null), _createVNode(MpInputRightAddon, null, {
|
|
93
|
-
default: () => [props.isLoading ? _createVNode(MpSpinner, null, null) : _createVNode(MpIcon,
|
|
94
|
-
"name": "chevrons-down",
|
|
95
|
-
"size": "sm"
|
|
96
|
-
}, null)]
|
|
92
|
+
default: () => [props.isLoading ? _createVNode(MpSpinner, null, null) : _createVNode(MpIcon, iconChevronsDownAttrs.value, null)]
|
|
97
93
|
})]
|
|
98
94
|
})]
|
|
99
95
|
}), _createVNode(MpPopoverContent, popoverContentAtrrs.value, {
|
|
@@ -5,7 +5,7 @@ import {
|
|
|
5
5
|
// src/modules/autocomplete.hooks.ts
|
|
6
6
|
import { ref, computed, toRefs, nextTick, watch, onMounted } from "vue";
|
|
7
7
|
import { isDef, isUndef, isElementVisible, scrollToTargetElement, isEqual, isObject, getUniqueId, useIntersectionObserver, groupBy } from "@mekari/pixel3-utils";
|
|
8
|
-
import {
|
|
8
|
+
import { autocompleteSlotRecipe } from "@mekari/pixel3-styled-system/recipes";
|
|
9
9
|
function useAutocomplete(props, emit) {
|
|
10
10
|
const {
|
|
11
11
|
data,
|
|
@@ -23,6 +23,7 @@ function useAutocomplete(props, emit) {
|
|
|
23
23
|
isInvalid,
|
|
24
24
|
isDisabled
|
|
25
25
|
} = toRefs(props);
|
|
26
|
+
const classes = autocompleteSlotRecipe();
|
|
26
27
|
const scrollEndNode = ref();
|
|
27
28
|
const currentValue = ref();
|
|
28
29
|
const currentLabel = ref("");
|
|
@@ -275,11 +276,7 @@ function useAutocomplete(props, emit) {
|
|
|
275
276
|
});
|
|
276
277
|
const popoverContentAtrrs = computed(() => {
|
|
277
278
|
return {
|
|
278
|
-
class:
|
|
279
|
-
maxHeight: "300px",
|
|
280
|
-
overflowY: "auto",
|
|
281
|
-
position: "relative"
|
|
282
|
-
}),
|
|
279
|
+
class: classes.popoverContent,
|
|
283
280
|
onClick: handleForceFocusToInput,
|
|
284
281
|
onMouseenter: () => {
|
|
285
282
|
isOutside.value = false;
|
|
@@ -318,27 +315,21 @@ function useAutocomplete(props, emit) {
|
|
|
318
315
|
}
|
|
319
316
|
};
|
|
320
317
|
});
|
|
318
|
+
const iconChevronsDownAttrs = computed(() => {
|
|
319
|
+
return {
|
|
320
|
+
"aria-label": "dropdown button",
|
|
321
|
+
name: "chevrons-down",
|
|
322
|
+
size: "sm",
|
|
323
|
+
color: "gray.400",
|
|
324
|
+
style: {
|
|
325
|
+
cursor: "pointer"
|
|
326
|
+
},
|
|
327
|
+
onClick: handleForceFocusToInput
|
|
328
|
+
};
|
|
329
|
+
});
|
|
321
330
|
const buttonActionAttrs = computed(() => {
|
|
322
331
|
return {
|
|
323
|
-
class:
|
|
324
|
-
cursor: "pointer",
|
|
325
|
-
width: "full",
|
|
326
|
-
textAlign: "center",
|
|
327
|
-
roundedTop: "0",
|
|
328
|
-
borderTopWidth: "1px",
|
|
329
|
-
borderColor: "blue.50",
|
|
330
|
-
color: "blue.400",
|
|
331
|
-
position: "sticky",
|
|
332
|
-
bottom: "0px",
|
|
333
|
-
bg: "white",
|
|
334
|
-
fontSize: "md",
|
|
335
|
-
zIndex: "999",
|
|
336
|
-
py: 2,
|
|
337
|
-
height: "9.5",
|
|
338
|
-
_hover: {
|
|
339
|
-
color: "blue.500"
|
|
340
|
-
}
|
|
341
|
-
}),
|
|
332
|
+
class: classes.buttonAction,
|
|
342
333
|
onClick: (e) => {
|
|
343
334
|
e.stopPropagation();
|
|
344
335
|
emit("buttonAction", getSuggestionDatas.value, currentSearch.value);
|
|
@@ -349,19 +340,10 @@ function useAutocomplete(props, emit) {
|
|
|
349
340
|
});
|
|
350
341
|
const emptyTextAttrs = {
|
|
351
342
|
color: "gray.400",
|
|
352
|
-
class:
|
|
353
|
-
px: 3,
|
|
354
|
-
py: 2
|
|
355
|
-
})
|
|
343
|
+
class: classes.emptyText
|
|
356
344
|
};
|
|
357
345
|
const contentLoadingAttrs = {
|
|
358
|
-
class:
|
|
359
|
-
px: 3,
|
|
360
|
-
py: 2,
|
|
361
|
-
display: "flex",
|
|
362
|
-
alignItems: "center",
|
|
363
|
-
gap: 3
|
|
364
|
-
})
|
|
346
|
+
class: classes.contentLoading
|
|
365
347
|
};
|
|
366
348
|
const popoverListItemAttrs = /* @__PURE__ */ __name((item, index) => {
|
|
367
349
|
const innerValue = getValue(item);
|
|
@@ -401,6 +383,7 @@ function useAutocomplete(props, emit) {
|
|
|
401
383
|
popoverAtrrs,
|
|
402
384
|
popoverContentAtrrs,
|
|
403
385
|
inputAtrrs,
|
|
386
|
+
iconChevronsDownAttrs,
|
|
404
387
|
buttonActionAttrs,
|
|
405
388
|
emptyTextAttrs,
|
|
406
389
|
contentLoadingAttrs,
|
package/dist/index.js
CHANGED
|
@@ -158,7 +158,7 @@ var autocompleteProps = {
|
|
|
158
158
|
// src/modules/autocomplete.hooks.ts
|
|
159
159
|
var import_vue = require("vue");
|
|
160
160
|
var import_pixel3_utils = require("@mekari/pixel3-utils");
|
|
161
|
-
var
|
|
161
|
+
var import_recipes = require("@mekari/pixel3-styled-system/recipes");
|
|
162
162
|
function useAutocomplete(props, emit) {
|
|
163
163
|
const {
|
|
164
164
|
data,
|
|
@@ -176,6 +176,7 @@ function useAutocomplete(props, emit) {
|
|
|
176
176
|
isInvalid,
|
|
177
177
|
isDisabled
|
|
178
178
|
} = (0, import_vue.toRefs)(props);
|
|
179
|
+
const classes = (0, import_recipes.autocompleteSlotRecipe)();
|
|
179
180
|
const scrollEndNode = (0, import_vue.ref)();
|
|
180
181
|
const currentValue = (0, import_vue.ref)();
|
|
181
182
|
const currentLabel = (0, import_vue.ref)("");
|
|
@@ -428,11 +429,7 @@ function useAutocomplete(props, emit) {
|
|
|
428
429
|
});
|
|
429
430
|
const popoverContentAtrrs = (0, import_vue.computed)(() => {
|
|
430
431
|
return {
|
|
431
|
-
class:
|
|
432
|
-
maxHeight: "300px",
|
|
433
|
-
overflowY: "auto",
|
|
434
|
-
position: "relative"
|
|
435
|
-
}),
|
|
432
|
+
class: classes.popoverContent,
|
|
436
433
|
onClick: handleForceFocusToInput,
|
|
437
434
|
onMouseenter: () => {
|
|
438
435
|
isOutside.value = false;
|
|
@@ -471,27 +468,21 @@ function useAutocomplete(props, emit) {
|
|
|
471
468
|
}
|
|
472
469
|
};
|
|
473
470
|
});
|
|
471
|
+
const iconChevronsDownAttrs = (0, import_vue.computed)(() => {
|
|
472
|
+
return {
|
|
473
|
+
"aria-label": "dropdown button",
|
|
474
|
+
name: "chevrons-down",
|
|
475
|
+
size: "sm",
|
|
476
|
+
color: "gray.400",
|
|
477
|
+
style: {
|
|
478
|
+
cursor: "pointer"
|
|
479
|
+
},
|
|
480
|
+
onClick: handleForceFocusToInput
|
|
481
|
+
};
|
|
482
|
+
});
|
|
474
483
|
const buttonActionAttrs = (0, import_vue.computed)(() => {
|
|
475
484
|
return {
|
|
476
|
-
class:
|
|
477
|
-
cursor: "pointer",
|
|
478
|
-
width: "full",
|
|
479
|
-
textAlign: "center",
|
|
480
|
-
roundedTop: "0",
|
|
481
|
-
borderTopWidth: "1px",
|
|
482
|
-
borderColor: "blue.50",
|
|
483
|
-
color: "blue.400",
|
|
484
|
-
position: "sticky",
|
|
485
|
-
bottom: "0px",
|
|
486
|
-
bg: "white",
|
|
487
|
-
fontSize: "md",
|
|
488
|
-
zIndex: "999",
|
|
489
|
-
py: 2,
|
|
490
|
-
height: "9.5",
|
|
491
|
-
_hover: {
|
|
492
|
-
color: "blue.500"
|
|
493
|
-
}
|
|
494
|
-
}),
|
|
485
|
+
class: classes.buttonAction,
|
|
495
486
|
onClick: (e) => {
|
|
496
487
|
e.stopPropagation();
|
|
497
488
|
emit("buttonAction", getSuggestionDatas.value, currentSearch.value);
|
|
@@ -502,19 +493,10 @@ function useAutocomplete(props, emit) {
|
|
|
502
493
|
});
|
|
503
494
|
const emptyTextAttrs = {
|
|
504
495
|
color: "gray.400",
|
|
505
|
-
class:
|
|
506
|
-
px: 3,
|
|
507
|
-
py: 2
|
|
508
|
-
})
|
|
496
|
+
class: classes.emptyText
|
|
509
497
|
};
|
|
510
498
|
const contentLoadingAttrs = {
|
|
511
|
-
class:
|
|
512
|
-
px: 3,
|
|
513
|
-
py: 2,
|
|
514
|
-
display: "flex",
|
|
515
|
-
alignItems: "center",
|
|
516
|
-
gap: 3
|
|
517
|
-
})
|
|
499
|
+
class: classes.contentLoading
|
|
518
500
|
};
|
|
519
501
|
const popoverListItemAttrs = /* @__PURE__ */ __name((item, index) => {
|
|
520
502
|
const innerValue = getValue(item);
|
|
@@ -554,6 +536,7 @@ function useAutocomplete(props, emit) {
|
|
|
554
536
|
popoverAtrrs,
|
|
555
537
|
popoverContentAtrrs,
|
|
556
538
|
inputAtrrs,
|
|
539
|
+
iconChevronsDownAttrs,
|
|
557
540
|
buttonActionAttrs,
|
|
558
541
|
emptyTextAttrs,
|
|
559
542
|
contentLoadingAttrs,
|
|
@@ -565,7 +548,7 @@ __name(useAutocomplete, "useAutocomplete");
|
|
|
565
548
|
|
|
566
549
|
// src/autocomplete.tsx
|
|
567
550
|
var import_patterns = require("@mekari/pixel3-styled-system/patterns");
|
|
568
|
-
var
|
|
551
|
+
var import_recipes2 = require("@mekari/pixel3-styled-system/recipes");
|
|
569
552
|
var MpAutocomplete = (0, import_vue3.defineComponent)({
|
|
570
553
|
name: "MpAutocomplete",
|
|
571
554
|
inheritAttrs: false,
|
|
@@ -576,6 +559,7 @@ var MpAutocomplete = (0, import_vue3.defineComponent)({
|
|
|
576
559
|
slots,
|
|
577
560
|
attrs
|
|
578
561
|
}) {
|
|
562
|
+
const classes = (0, import_recipes2.autocompleteSlotRecipe)();
|
|
579
563
|
const {
|
|
580
564
|
getSuggestionDatas,
|
|
581
565
|
getGroupSuggestions,
|
|
@@ -585,6 +569,7 @@ var MpAutocomplete = (0, import_vue3.defineComponent)({
|
|
|
585
569
|
popoverAtrrs,
|
|
586
570
|
popoverContentAtrrs,
|
|
587
571
|
inputAtrrs,
|
|
572
|
+
iconChevronsDownAttrs,
|
|
588
573
|
buttonActionAttrs,
|
|
589
574
|
emptyTextAttrs,
|
|
590
575
|
contentLoadingAttrs,
|
|
@@ -612,10 +597,7 @@ var MpAutocomplete = (0, import_vue3.defineComponent)({
|
|
|
612
597
|
}) : (0, import_vue2.createVNode)(import_pixel3_text.MpText, {
|
|
613
598
|
"size": "body-small",
|
|
614
599
|
"color": "gray.600",
|
|
615
|
-
"class":
|
|
616
|
-
px: 3,
|
|
617
|
-
py: 2
|
|
618
|
-
})
|
|
600
|
+
"class": classes.groupText
|
|
619
601
|
}, {
|
|
620
602
|
default: () => [group.key]
|
|
621
603
|
}), group.values.map((item) => {
|
|
@@ -641,10 +623,7 @@ var MpAutocomplete = (0, import_vue3.defineComponent)({
|
|
|
641
623
|
default: () => [slots.leftAddon && (0, import_vue2.createVNode)(import_pixel3_input.MpInputLeftAddon, null, {
|
|
642
624
|
default: () => [(0, import_vue2.createTextVNode)(" "), slots.leftAddon(), (0, import_vue2.createTextVNode)(" ")]
|
|
643
625
|
}), (0, import_vue2.createVNode)(import_pixel3_input.MpInput, (0, import_vue2.mergeProps)(inputAtrrs.value, attrs), null), (0, import_vue2.createVNode)(import_pixel3_input.MpInputRightAddon, null, {
|
|
644
|
-
default: () => [props.isLoading ? (0, import_vue2.createVNode)(import_pixel3_spinner.MpSpinner, null, null) : (0, import_vue2.createVNode)(import_pixel3_icon.MpIcon,
|
|
645
|
-
"name": "chevrons-down",
|
|
646
|
-
"size": "sm"
|
|
647
|
-
}, null)]
|
|
626
|
+
default: () => [props.isLoading ? (0, import_vue2.createVNode)(import_pixel3_spinner.MpSpinner, null, null) : (0, import_vue2.createVNode)(import_pixel3_icon.MpIcon, iconChevronsDownAttrs.value, null)]
|
|
648
627
|
})]
|
|
649
628
|
})]
|
|
650
629
|
}), (0, import_vue2.createVNode)(import_pixel3_popover.MpPopoverContent, popoverContentAtrrs.value, {
|
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":12612,"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":4839,"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}],"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}],"exports":[],"entryPoint":"src/autocomplete.tsx","inputs":{"src/autocomplete.tsx":{"bytesInOutput":5186},"src/modules/autocomplete.props.ts":{"bytesInOutput":1882},"src/modules/autocomplete.hooks.ts":{"bytesInOutput":12651}},"bytes":20842},"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}],"exports":[],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":133},"src/autocomplete.tsx":{"bytesInOutput":5026},"src/modules/autocomplete.props.ts":{"bytesInOutput":1882},"src/modules/autocomplete.hooks.ts":{"bytesInOutput":12651}},"bytes":20832},"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":12831}},"bytes":13867},"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":12612,"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":4839,"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}],"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-O3OHBZY3.mjs","kind":"import-statement"},{"path":"dist/chunk-PMJPOHWJ.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-O3OHBZY3.mjs","kind":"import-statement"},{"path":"dist/chunk-PMJPOHWJ.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-O3OHBZY3.mjs":{"imports":[{"path":"dist/chunk-PMJPOHWJ.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}],"exports":["MpAutocomplete"],"inputs":{"src/autocomplete.tsx":{"bytesInOutput":4337}},"bytes":4510},"dist/modules/autocomplete.hooks.mjs":{"imports":[{"path":"dist/chunk-PMJPOHWJ.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-PMJPOHWJ.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":12033}},"bytes":12151},"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}}}
|
|
@@ -45,6 +45,16 @@ declare function useAutocomplete(props: AutocompleteProps, emit: AutocompleteEmi
|
|
|
45
45
|
onBlur: () => void;
|
|
46
46
|
onClear: (e: Event) => void;
|
|
47
47
|
}>;
|
|
48
|
+
iconChevronsDownAttrs: vue.ComputedRef<{
|
|
49
|
+
'aria-label': string;
|
|
50
|
+
name: "chevrons-down";
|
|
51
|
+
size: "sm";
|
|
52
|
+
color: string;
|
|
53
|
+
style: {
|
|
54
|
+
cursor: string;
|
|
55
|
+
};
|
|
56
|
+
onClick: () => void;
|
|
57
|
+
}>;
|
|
48
58
|
buttonActionAttrs: vue.ComputedRef<{
|
|
49
59
|
class: string;
|
|
50
60
|
onClick: (e: Event) => void;
|
|
@@ -45,6 +45,16 @@ declare function useAutocomplete(props: AutocompleteProps, emit: AutocompleteEmi
|
|
|
45
45
|
onBlur: () => void;
|
|
46
46
|
onClear: (e: Event) => void;
|
|
47
47
|
}>;
|
|
48
|
+
iconChevronsDownAttrs: vue.ComputedRef<{
|
|
49
|
+
'aria-label': string;
|
|
50
|
+
name: "chevrons-down";
|
|
51
|
+
size: "sm";
|
|
52
|
+
color: string;
|
|
53
|
+
style: {
|
|
54
|
+
cursor: string;
|
|
55
|
+
};
|
|
56
|
+
onClick: () => void;
|
|
57
|
+
}>;
|
|
48
58
|
buttonActionAttrs: vue.ComputedRef<{
|
|
49
59
|
class: string;
|
|
50
60
|
onClick: (e: Event) => void;
|
|
@@ -26,7 +26,7 @@ __export(autocomplete_hooks_exports, {
|
|
|
26
26
|
module.exports = __toCommonJS(autocomplete_hooks_exports);
|
|
27
27
|
var import_vue = require("vue");
|
|
28
28
|
var import_pixel3_utils = require("@mekari/pixel3-utils");
|
|
29
|
-
var
|
|
29
|
+
var import_recipes = require("@mekari/pixel3-styled-system/recipes");
|
|
30
30
|
function useAutocomplete(props, emit) {
|
|
31
31
|
const {
|
|
32
32
|
data,
|
|
@@ -44,6 +44,7 @@ function useAutocomplete(props, emit) {
|
|
|
44
44
|
isInvalid,
|
|
45
45
|
isDisabled
|
|
46
46
|
} = (0, import_vue.toRefs)(props);
|
|
47
|
+
const classes = (0, import_recipes.autocompleteSlotRecipe)();
|
|
47
48
|
const scrollEndNode = (0, import_vue.ref)();
|
|
48
49
|
const currentValue = (0, import_vue.ref)();
|
|
49
50
|
const currentLabel = (0, import_vue.ref)("");
|
|
@@ -296,11 +297,7 @@ function useAutocomplete(props, emit) {
|
|
|
296
297
|
});
|
|
297
298
|
const popoverContentAtrrs = (0, import_vue.computed)(() => {
|
|
298
299
|
return {
|
|
299
|
-
class:
|
|
300
|
-
maxHeight: "300px",
|
|
301
|
-
overflowY: "auto",
|
|
302
|
-
position: "relative"
|
|
303
|
-
}),
|
|
300
|
+
class: classes.popoverContent,
|
|
304
301
|
onClick: handleForceFocusToInput,
|
|
305
302
|
onMouseenter: () => {
|
|
306
303
|
isOutside.value = false;
|
|
@@ -339,27 +336,21 @@ function useAutocomplete(props, emit) {
|
|
|
339
336
|
}
|
|
340
337
|
};
|
|
341
338
|
});
|
|
339
|
+
const iconChevronsDownAttrs = (0, import_vue.computed)(() => {
|
|
340
|
+
return {
|
|
341
|
+
"aria-label": "dropdown button",
|
|
342
|
+
name: "chevrons-down",
|
|
343
|
+
size: "sm",
|
|
344
|
+
color: "gray.400",
|
|
345
|
+
style: {
|
|
346
|
+
cursor: "pointer"
|
|
347
|
+
},
|
|
348
|
+
onClick: handleForceFocusToInput
|
|
349
|
+
};
|
|
350
|
+
});
|
|
342
351
|
const buttonActionAttrs = (0, import_vue.computed)(() => {
|
|
343
352
|
return {
|
|
344
|
-
class:
|
|
345
|
-
cursor: "pointer",
|
|
346
|
-
width: "full",
|
|
347
|
-
textAlign: "center",
|
|
348
|
-
roundedTop: "0",
|
|
349
|
-
borderTopWidth: "1px",
|
|
350
|
-
borderColor: "blue.50",
|
|
351
|
-
color: "blue.400",
|
|
352
|
-
position: "sticky",
|
|
353
|
-
bottom: "0px",
|
|
354
|
-
bg: "white",
|
|
355
|
-
fontSize: "md",
|
|
356
|
-
zIndex: "999",
|
|
357
|
-
py: 2,
|
|
358
|
-
height: "9.5",
|
|
359
|
-
_hover: {
|
|
360
|
-
color: "blue.500"
|
|
361
|
-
}
|
|
362
|
-
}),
|
|
353
|
+
class: classes.buttonAction,
|
|
363
354
|
onClick: (e) => {
|
|
364
355
|
e.stopPropagation();
|
|
365
356
|
emit("buttonAction", getSuggestionDatas.value, currentSearch.value);
|
|
@@ -370,19 +361,10 @@ function useAutocomplete(props, emit) {
|
|
|
370
361
|
});
|
|
371
362
|
const emptyTextAttrs = {
|
|
372
363
|
color: "gray.400",
|
|
373
|
-
class:
|
|
374
|
-
px: 3,
|
|
375
|
-
py: 2
|
|
376
|
-
})
|
|
364
|
+
class: classes.emptyText
|
|
377
365
|
};
|
|
378
366
|
const contentLoadingAttrs = {
|
|
379
|
-
class:
|
|
380
|
-
px: 3,
|
|
381
|
-
py: 2,
|
|
382
|
-
display: "flex",
|
|
383
|
-
alignItems: "center",
|
|
384
|
-
gap: 3
|
|
385
|
-
})
|
|
367
|
+
class: classes.contentLoading
|
|
386
368
|
};
|
|
387
369
|
const popoverListItemAttrs = /* @__PURE__ */ __name((item, index) => {
|
|
388
370
|
const innerValue = getValue(item);
|
|
@@ -422,6 +404,7 @@ function useAutocomplete(props, emit) {
|
|
|
422
404
|
popoverAtrrs,
|
|
423
405
|
popoverContentAtrrs,
|
|
424
406
|
inputAtrrs,
|
|
407
|
+
iconChevronsDownAttrs,
|
|
425
408
|
buttonActionAttrs,
|
|
426
409
|
emptyTextAttrs,
|
|
427
410
|
contentLoadingAttrs,
|
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.
|
|
4
|
+
"version": "0.0.12-dev.1",
|
|
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.0.
|
|
11
|
+
"@mekari/pixel3-styled-system": "0.0.10-dev.0",
|
|
12
12
|
"@mekari/pixel3-utils": "0.0.6",
|
|
13
|
-
"@mekari/pixel3-input": "0.0.
|
|
14
|
-
"@mekari/pixel3-spinner": "0.0.
|
|
15
|
-
"@mekari/pixel3-icon": "0.0.
|
|
16
|
-
"@mekari/pixel3-popover": "0.0.
|
|
17
|
-
"@mekari/pixel3-text": "0.0.
|
|
13
|
+
"@mekari/pixel3-input": "0.0.12-dev.1",
|
|
14
|
+
"@mekari/pixel3-spinner": "0.0.12-dev.1",
|
|
15
|
+
"@mekari/pixel3-icon": "0.0.12-dev.1",
|
|
16
|
+
"@mekari/pixel3-popover": "0.0.12-dev.1",
|
|
17
|
+
"@mekari/pixel3-text": "0.0.12-dev.0"
|
|
18
18
|
},
|
|
19
19
|
"peerDependencies": {
|
|
20
20
|
"vue": "^3.4.9"
|