@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.
@@ -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 import_css = require("@mekari/pixel3-styled-system/css");
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: (0, import_css.css)({
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: (0, import_css.css)({
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: (0, import_css.css)({
504
- px: 3,
505
- py: 2
506
- })
494
+ class: classes.emptyText
507
495
  };
508
496
  const contentLoadingAttrs = {
509
- class: (0, import_css.css)({
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 import_css2 = require("@mekari/pixel3-styled-system/css");
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": (0, import_css2.css)({
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, {
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  MpAutocomplete
3
- } from "./chunk-RG5ONV6A.mjs";
4
- import "./chunk-LSNIK4FE.mjs";
3
+ } from "./chunk-O3OHBZY3.mjs";
4
+ import "./chunk-PMJPOHWJ.mjs";
5
5
  import "./chunk-Q7SGQCOH.mjs";
6
6
  import "./chunk-QZ7VFGWC.mjs";
7
7
  export {
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  useAutocomplete
3
- } from "./chunk-LSNIK4FE.mjs";
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 { css } from "@mekari/pixel3-styled-system/css";
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": css({
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 { css } from "@mekari/pixel3-styled-system/css";
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: css({
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: css({
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: css({
353
- px: 3,
354
- py: 2
355
- })
343
+ class: classes.emptyText
356
344
  };
357
345
  const contentLoadingAttrs = {
358
- class: css({
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 import_css = require("@mekari/pixel3-styled-system/css");
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: (0, import_css.css)({
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: (0, import_css.css)({
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: (0, import_css.css)({
506
- px: 3,
507
- py: 2
508
- })
496
+ class: classes.emptyText
509
497
  };
510
498
  const contentLoadingAttrs = {
511
- class: (0, import_css.css)({
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 import_css2 = require("@mekari/pixel3-styled-system/css");
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": (0, import_css2.css)({
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
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  MpAutocomplete
3
- } from "./chunk-RG5ONV6A.mjs";
4
- import "./chunk-LSNIK4FE.mjs";
3
+ } from "./chunk-O3OHBZY3.mjs";
4
+ import "./chunk-PMJPOHWJ.mjs";
5
5
  import "./chunk-Q7SGQCOH.mjs";
6
6
  import "./chunk-QZ7VFGWC.mjs";
7
7
  export {
@@ -1 +1 @@
1
- {"inputs":{"src/modules/autocomplete.props.ts":{"bytes":3480,"imports":[],"format":"esm"},"src/modules/autocomplete.hooks.ts":{"bytes":12798,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/css","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/css","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/css","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/patterns","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/autocomplete.tsx","inputs":{"src/autocomplete.tsx":{"bytesInOutput":5197},"src/modules/autocomplete.props.ts":{"bytesInOutput":1882},"src/modules/autocomplete.hooks.ts":{"bytesInOutput":12902}},"bytes":21104},"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/css","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/patterns","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":133},"src/autocomplete.tsx":{"bytesInOutput":5037},"src/modules/autocomplete.props.ts":{"bytesInOutput":1882},"src/modules/autocomplete.hooks.ts":{"bytesInOutput":12902}},"bytes":21094},"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/css","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/modules/autocomplete.hooks.ts","inputs":{"src/modules/autocomplete.hooks.ts":{"bytesInOutput":13082}},"bytes":14118},"dist/modules/autocomplete.props.js":{"imports":[],"exports":[],"entryPoint":"src/modules/autocomplete.props.ts","inputs":{"src/modules/autocomplete.props.ts":{"bytesInOutput":2231}},"bytes":3199}}}
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}}}
@@ -1 +1 @@
1
- {"inputs":{"src/modules/autocomplete.props.ts":{"bytes":3480,"imports":[],"format":"esm"},"src/modules/autocomplete.hooks.ts":{"bytes":12798,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/css","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/css","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-RG5ONV6A.mjs","kind":"import-statement"},{"path":"dist/chunk-LSNIK4FE.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-RG5ONV6A.mjs","kind":"import-statement"},{"path":"dist/chunk-LSNIK4FE.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-RG5ONV6A.mjs":{"imports":[{"path":"dist/chunk-LSNIK4FE.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/css","kind":"import-statement","external":true}],"exports":["MpAutocomplete"],"inputs":{"src/autocomplete.tsx":{"bytesInOutput":4337}},"bytes":4510},"dist/modules/autocomplete.hooks.mjs":{"imports":[{"path":"dist/chunk-LSNIK4FE.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-LSNIK4FE.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/css","kind":"import-statement","external":true}],"exports":["useAutocomplete"],"inputs":{"src/modules/autocomplete.hooks.ts":{"bytesInOutput":12241}},"bytes":12359},"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}}}
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 import_css = require("@mekari/pixel3-styled-system/css");
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: (0, import_css.css)({
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: (0, import_css.css)({
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: (0, import_css.css)({
374
- px: 3,
375
- py: 2
376
- })
364
+ class: classes.emptyText
377
365
  };
378
366
  const contentLoadingAttrs = {
379
- class: (0, import_css.css)({
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,
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  useAutocomplete
3
- } from "../chunk-LSNIK4FE.mjs";
3
+ } from "../chunk-PMJPOHWJ.mjs";
4
4
  import "../chunk-QZ7VFGWC.mjs";
5
5
  export {
6
6
  useAutocomplete
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.11",
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.9",
11
+ "@mekari/pixel3-styled-system": "0.0.10-dev.0",
12
12
  "@mekari/pixel3-utils": "0.0.6",
13
- "@mekari/pixel3-input": "0.0.11",
14
- "@mekari/pixel3-spinner": "0.0.11",
15
- "@mekari/pixel3-icon": "0.0.11",
16
- "@mekari/pixel3-popover": "0.0.11",
17
- "@mekari/pixel3-text": "0.0.11"
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"