@mekari/pixel3-autocomplete 0.0.12-dev.0 → 0.0.12-dev.2

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.
Files changed (11) hide show
  1. package/dist/autocomplete.js +9 -41
  2. package/dist/autocomplete.mjs +2 -2
  3. package/dist/{chunk-YL3NPIQ3.mjs → chunk-O3OHBZY3.mjs} +4 -6
  4. package/dist/{chunk-F4X5O2JZ.mjs → chunk-PMJPOHWJ.mjs} +6 -36
  5. package/dist/index.js +9 -41
  6. package/dist/index.mjs +2 -2
  7. package/dist/metafile-cjs.json +1 -1
  8. package/dist/metafile-esm.json +1 -1
  9. package/dist/modules/autocomplete.hooks.js +6 -36
  10. package/dist/modules/autocomplete.hooks.mjs +1 -1
  11. 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 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;
@@ -483,25 +480,7 @@ function useAutocomplete(props, emit) {
483
480
  });
484
481
  const buttonActionAttrs = (0, import_vue.computed)(() => {
485
482
  return {
486
- class: (0, import_css.css)({
487
- cursor: "pointer",
488
- width: "full",
489
- textAlign: "center",
490
- roundedTop: "0",
491
- borderTopWidth: "1px",
492
- borderColor: "blue.50",
493
- color: "blue.400",
494
- position: "sticky",
495
- bottom: "0px",
496
- bg: "white",
497
- fontSize: "md",
498
- zIndex: "999",
499
- py: 2,
500
- height: "9.5",
501
- _hover: {
502
- color: "blue.500"
503
- }
504
- }),
483
+ class: classes.buttonAction,
505
484
  onClick: (e) => {
506
485
  e.stopPropagation();
507
486
  emit("buttonAction", getSuggestionDatas.value, currentSearch.value);
@@ -512,19 +491,10 @@ function useAutocomplete(props, emit) {
512
491
  });
513
492
  const emptyTextAttrs = {
514
493
  color: "gray.400",
515
- class: (0, import_css.css)({
516
- px: 3,
517
- py: 2
518
- })
494
+ class: classes.emptyText
519
495
  };
520
496
  const contentLoadingAttrs = {
521
- class: (0, import_css.css)({
522
- px: 3,
523
- py: 2,
524
- display: "flex",
525
- alignItems: "center",
526
- gap: 3
527
- })
497
+ class: classes.contentLoading
528
498
  };
529
499
  const popoverListItemAttrs = /* @__PURE__ */ __name((item, index) => {
530
500
  const innerValue = getValue(item);
@@ -576,7 +546,7 @@ __name(useAutocomplete, "useAutocomplete");
576
546
 
577
547
  // src/autocomplete.tsx
578
548
  var import_patterns = require("@mekari/pixel3-styled-system/patterns");
579
- var import_css2 = require("@mekari/pixel3-styled-system/css");
549
+ var import_recipes2 = require("@mekari/pixel3-styled-system/recipes");
580
550
  var MpAutocomplete = (0, import_vue3.defineComponent)({
581
551
  name: "MpAutocomplete",
582
552
  inheritAttrs: false,
@@ -587,6 +557,7 @@ var MpAutocomplete = (0, import_vue3.defineComponent)({
587
557
  slots,
588
558
  attrs
589
559
  }) {
560
+ const classes = (0, import_recipes2.autocompleteSlotRecipe)();
590
561
  const {
591
562
  getSuggestionDatas,
592
563
  getGroupSuggestions,
@@ -624,10 +595,7 @@ var MpAutocomplete = (0, import_vue3.defineComponent)({
624
595
  }) : (0, import_vue2.createVNode)(import_pixel3_text.MpText, {
625
596
  "size": "body-small",
626
597
  "color": "gray.600",
627
- "class": (0, import_css2.css)({
628
- px: 3,
629
- py: 2
630
- })
598
+ "class": classes.groupText
631
599
  }, {
632
600
  default: () => [group.key]
633
601
  }), group.values.map((item) => {
package/dist/autocomplete.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  MpAutocomplete
3
- } from "./chunk-YL3NPIQ3.mjs";
4
- import "./chunk-F4X5O2JZ.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 {
package/dist/{chunk-YL3NPIQ3.mjs → chunk-O3OHBZY3.mjs} RENAMED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  useAutocomplete
3
- } from "./chunk-F4X5O2JZ.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,
@@ -62,10 +63,7 @@ var MpAutocomplete = defineComponent({
62
63
  }) : _createVNode(MpText, {
63
64
  "size": "body-small",
64
65
  "color": "gray.600",
65
- "class": css({
66
- px: 3,
67
- py: 2
68
- })
66
+ "class": classes.groupText
69
67
  }, {
70
68
  default: () => [group.key]
71
69
  }), group.values.map((item) => {
package/dist/{chunk-F4X5O2JZ.mjs → chunk-PMJPOHWJ.mjs} RENAMED
@@ -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;
@@ -332,25 +329,7 @@ function useAutocomplete(props, emit) {
332
329
  });
333
330
  const buttonActionAttrs = computed(() => {
334
331
  return {
335
- class: css({
336
- cursor: "pointer",
337
- width: "full",
338
- textAlign: "center",
339
- roundedTop: "0",
340
- borderTopWidth: "1px",
341
- borderColor: "blue.50",
342
- color: "blue.400",
343
- position: "sticky",
344
- bottom: "0px",
345
- bg: "white",
346
- fontSize: "md",
347
- zIndex: "999",
348
- py: 2,
349
- height: "9.5",
350
- _hover: {
351
- color: "blue.500"
352
- }
353
- }),
332
+ class: classes.buttonAction,
354
333
  onClick: (e) => {
355
334
  e.stopPropagation();
356
335
  emit("buttonAction", getSuggestionDatas.value, currentSearch.value);
@@ -361,19 +340,10 @@ function useAutocomplete(props, emit) {
361
340
  });
362
341
  const emptyTextAttrs = {
363
342
  color: "gray.400",
364
- class: css({
365
- px: 3,
366
- py: 2
367
- })
343
+ class: classes.emptyText
368
344
  };
369
345
  const contentLoadingAttrs = {
370
- class: css({
371
- px: 3,
372
- py: 2,
373
- display: "flex",
374
- alignItems: "center",
375
- gap: 3
376
- })
346
+ class: classes.contentLoading
377
347
  };
378
348
  const popoverListItemAttrs = /* @__PURE__ */ __name((item, index) => {
379
349
  const innerValue = getValue(item);
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;
@@ -485,25 +482,7 @@ function useAutocomplete(props, emit) {
485
482
  });
486
483
  const buttonActionAttrs = (0, import_vue.computed)(() => {
487
484
  return {
488
- class: (0, import_css.css)({
489
- cursor: "pointer",
490
- width: "full",
491
- textAlign: "center",
492
- roundedTop: "0",
493
- borderTopWidth: "1px",
494
- borderColor: "blue.50",
495
- color: "blue.400",
496
- position: "sticky",
497
- bottom: "0px",
498
- bg: "white",
499
- fontSize: "md",
500
- zIndex: "999",
501
- py: 2,
502
- height: "9.5",
503
- _hover: {
504
- color: "blue.500"
505
- }
506
- }),
485
+ class: classes.buttonAction,
507
486
  onClick: (e) => {
508
487
  e.stopPropagation();
509
488
  emit("buttonAction", getSuggestionDatas.value, currentSearch.value);
@@ -514,19 +493,10 @@ function useAutocomplete(props, emit) {
514
493
  });
515
494
  const emptyTextAttrs = {
516
495
  color: "gray.400",
517
- class: (0, import_css.css)({
518
- px: 3,
519
- py: 2
520
- })
496
+ class: classes.emptyText
521
497
  };
522
498
  const contentLoadingAttrs = {
523
- class: (0, import_css.css)({
524
- px: 3,
525
- py: 2,
526
- display: "flex",
527
- alignItems: "center",
528
- gap: 3
529
- })
499
+ class: classes.contentLoading
530
500
  };
531
501
  const popoverListItemAttrs = /* @__PURE__ */ __name((item, index) => {
532
502
  const innerValue = getValue(item);
@@ -578,7 +548,7 @@ __name(useAutocomplete, "useAutocomplete");
578
548
 
579
549
  // src/autocomplete.tsx
580
550
  var import_patterns = require("@mekari/pixel3-styled-system/patterns");
581
- var import_css2 = require("@mekari/pixel3-styled-system/css");
551
+ var import_recipes2 = require("@mekari/pixel3-styled-system/recipes");
582
552
  var MpAutocomplete = (0, import_vue3.defineComponent)({
583
553
  name: "MpAutocomplete",
584
554
  inheritAttrs: false,
@@ -589,6 +559,7 @@ var MpAutocomplete = (0, import_vue3.defineComponent)({
589
559
  slots,
590
560
  attrs
591
561
  }) {
562
+ const classes = (0, import_recipes2.autocompleteSlotRecipe)();
592
563
  const {
593
564
  getSuggestionDatas,
594
565
  getGroupSuggestions,
@@ -626,10 +597,7 @@ var MpAutocomplete = (0, import_vue3.defineComponent)({
626
597
  }) : (0, import_vue2.createVNode)(import_pixel3_text.MpText, {
627
598
  "size": "body-small",
628
599
  "color": "gray.600",
629
- "class": (0, import_css2.css)({
630
- px: 3,
631
- py: 2
632
- })
600
+ "class": classes.groupText
633
601
  }, {
634
602
  default: () => [group.key]
635
603
  }), group.values.map((item) => {
package/dist/index.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  MpAutocomplete
3
- } from "./chunk-YL3NPIQ3.mjs";
4
- import "./chunk-F4X5O2JZ.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 {
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":13122,"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":4808,"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":5166},"src/modules/autocomplete.props.ts":{"bytesInOutput":1882},"src/modules/autocomplete.hooks.ts":{"bytesInOutput":13220}},"bytes":21391},"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":5006},"src/modules/autocomplete.props.ts":{"bytesInOutput":1882},"src/modules/autocomplete.hooks.ts":{"bytesInOutput":13220}},"bytes":21381},"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":13400}},"bytes":14436},"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}}}
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":13122,"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":4808,"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-YL3NPIQ3.mjs","kind":"import-statement"},{"path":"dist/chunk-F4X5O2JZ.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-YL3NPIQ3.mjs","kind":"import-statement"},{"path":"dist/chunk-F4X5O2JZ.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-YL3NPIQ3.mjs":{"imports":[{"path":"dist/chunk-F4X5O2JZ.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":4306}},"bytes":4479},"dist/modules/autocomplete.hooks.mjs":{"imports":[{"path":"dist/chunk-F4X5O2JZ.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-F4X5O2JZ.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":12543}},"bytes":12661},"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}}}
package/dist/modules/autocomplete.hooks.js CHANGED
@@ -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;
@@ -353,25 +350,7 @@ function useAutocomplete(props, emit) {
353
350
  });
354
351
  const buttonActionAttrs = (0, import_vue.computed)(() => {
355
352
  return {
356
- class: (0, import_css.css)({
357
- cursor: "pointer",
358
- width: "full",
359
- textAlign: "center",
360
- roundedTop: "0",
361
- borderTopWidth: "1px",
362
- borderColor: "blue.50",
363
- color: "blue.400",
364
- position: "sticky",
365
- bottom: "0px",
366
- bg: "white",
367
- fontSize: "md",
368
- zIndex: "999",
369
- py: 2,
370
- height: "9.5",
371
- _hover: {
372
- color: "blue.500"
373
- }
374
- }),
353
+ class: classes.buttonAction,
375
354
  onClick: (e) => {
376
355
  e.stopPropagation();
377
356
  emit("buttonAction", getSuggestionDatas.value, currentSearch.value);
@@ -382,19 +361,10 @@ function useAutocomplete(props, emit) {
382
361
  });
383
362
  const emptyTextAttrs = {
384
363
  color: "gray.400",
385
- class: (0, import_css.css)({
386
- px: 3,
387
- py: 2
388
- })
364
+ class: classes.emptyText
389
365
  };
390
366
  const contentLoadingAttrs = {
391
- class: (0, import_css.css)({
392
- px: 3,
393
- py: 2,
394
- display: "flex",
395
- alignItems: "center",
396
- gap: 3
397
- })
367
+ class: classes.contentLoading
398
368
  };
399
369
  const popoverListItemAttrs = /* @__PURE__ */ __name((item, index) => {
400
370
  const innerValue = getValue(item);
package/dist/modules/autocomplete.hooks.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  useAutocomplete
3
- } from "../chunk-F4X5O2JZ.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.12-dev.0",
4
+ "version": "0.0.12-dev.2",
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.1",
12
12
  "@mekari/pixel3-utils": "0.0.6",
13
- "@mekari/pixel3-input": "0.0.12-dev.0",
14
- "@mekari/pixel3-spinner": "0.0.12-dev.0",
15
- "@mekari/pixel3-icon": "0.0.12-dev.0",
16
- "@mekari/pixel3-popover": "0.0.12-dev.0",
17
- "@mekari/pixel3-text": "0.0.11"
13
+ "@mekari/pixel3-input": "0.0.12-dev.2",
14
+ "@mekari/pixel3-spinner": "0.0.12-dev.2",
15
+ "@mekari/pixel3-icon": "0.0.12-dev.2",
16
+ "@mekari/pixel3-popover": "0.0.12-dev.2",
17
+ "@mekari/pixel3-text": "0.0.12-dev.1"
18
18
  },
19
19
  "peerDependencies": {
20
20
  "vue": "^3.4.9"