@mekari/pixel3-autocomplete 0.0.5 → 0.0.6-dev.1

package/dist/autocomplete.d.mts

@@ -15,7 +15,7 @@ declare const MpAutocomplete: vue.DefineComponent<{
     modelValue: {
         type: vue.PropType<StringNumberAnyObject | undefined>;
     };
-    defaultValue: (ObjectConstructor | StringConstructor | NumberConstructor)[];
+    defaultValue: (StringConstructor | NumberConstructor | ObjectConstructor)[];
     placeholder: {
         type: vue.PropType<string>;
     };
@@ -128,7 +128,7 @@ declare const MpAutocomplete: vue.DefineComponent<{
         type: vue.PropType<boolean>;
         default: boolean;
     };
-}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("input" | "change" | "enter" | "update:modelValue" | "scrollEnd" | "buttonAction")[], "input" | "change" | "enter" | "update:modelValue" | "scrollEnd" | "buttonAction", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("update:modelValue" | "input" | "change" | "enter" | "scrollEnd" | "buttonAction" | "focus" | "clear")[], "update:modelValue" | "input" | "change" | "enter" | "scrollEnd" | "buttonAction" | "focus" | "clear", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     id: {
         type: vue.PropType<string>;
         default: string;
@@ -140,7 +140,7 @@ declare const MpAutocomplete: vue.DefineComponent<{
     modelValue: {
         type: vue.PropType<StringNumberAnyObject | undefined>;
     };
-    defaultValue: (ObjectConstructor | StringConstructor | NumberConstructor)[];
+    defaultValue: (StringConstructor | NumberConstructor | ObjectConstructor)[];
     placeholder: {
         type: vue.PropType<string>;
     };
@@ -254,39 +254,41 @@ declare const MpAutocomplete: vue.DefineComponent<{
         default: boolean;
     };
 }>> & {
-    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onInput?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
     onEnter?: ((...args: any[]) => any) | undefined;
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onScrollEnd?: ((...args: any[]) => any) | undefined;
     onButtonAction?: ((...args: any[]) => any) | undefined;
+    onFocus?: ((...args: any[]) => any) | undefined;
+    onClear?: ((...args: any[]) => any) | undefined;
 }, {
-    data: unknown[];
     id: string;
-    usePortal: boolean;
-    isKeepAlive: boolean;
-    isAdaptiveWidth: boolean;
-    isDisabled: boolean;
-    isLoading: boolean;
+    data: unknown[];
+    labelProp: string;
+    valueProp: string;
     isReadOnly: boolean;
+    isDisabled: boolean;
     isInvalid: boolean;
     isRequired: boolean;
     isFullWidth: boolean;
-    isClearable: boolean;
-    keyCode: string[];
-    isGroupSuggestions: boolean;
-    isInfinityScroll: boolean;
-    isManualFilter: boolean;
-    labelProp: string;
-    valueProp: string;
+    isLoading: boolean;
     isContentLoading: boolean;
+    isClearable: boolean;
     isSearchable: boolean;
     emptyText: string;
     contentLoadingText: string;
+    isInfinityScroll: boolean;
+    isManualFilter: boolean;
+    usePortal: boolean;
     isShowButtonAction: boolean;
     buttonActionText: string;
+    isGroupSuggestions: boolean;
     groupKey: string;
+    keyCode: string[];
     isRawValue: boolean;
+    isKeepAlive: boolean;
+    isAdaptiveWidth: boolean;
 }, {}>;
 
 export { MpAutocomplete };

package/dist/autocomplete.d.ts

@@ -15,7 +15,7 @@ declare const MpAutocomplete: vue.DefineComponent<{
     modelValue: {
         type: vue.PropType<StringNumberAnyObject | undefined>;
     };
-    defaultValue: (ObjectConstructor | StringConstructor | NumberConstructor)[];
+    defaultValue: (StringConstructor | NumberConstructor | ObjectConstructor)[];
     placeholder: {
         type: vue.PropType<string>;
     };
@@ -128,7 +128,7 @@ declare const MpAutocomplete: vue.DefineComponent<{
         type: vue.PropType<boolean>;
         default: boolean;
     };
-}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("input" | "change" | "enter" | "update:modelValue" | "scrollEnd" | "buttonAction")[], "input" | "change" | "enter" | "update:modelValue" | "scrollEnd" | "buttonAction", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("update:modelValue" | "input" | "change" | "enter" | "scrollEnd" | "buttonAction" | "focus" | "clear")[], "update:modelValue" | "input" | "change" | "enter" | "scrollEnd" | "buttonAction" | "focus" | "clear", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     id: {
         type: vue.PropType<string>;
         default: string;
@@ -140,7 +140,7 @@ declare const MpAutocomplete: vue.DefineComponent<{
     modelValue: {
         type: vue.PropType<StringNumberAnyObject | undefined>;
     };
-    defaultValue: (ObjectConstructor | StringConstructor | NumberConstructor)[];
+    defaultValue: (StringConstructor | NumberConstructor | ObjectConstructor)[];
     placeholder: {
         type: vue.PropType<string>;
     };
@@ -254,39 +254,41 @@ declare const MpAutocomplete: vue.DefineComponent<{
         default: boolean;
     };
 }>> & {
-    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onInput?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
     onEnter?: ((...args: any[]) => any) | undefined;
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onScrollEnd?: ((...args: any[]) => any) | undefined;
     onButtonAction?: ((...args: any[]) => any) | undefined;
+    onFocus?: ((...args: any[]) => any) | undefined;
+    onClear?: ((...args: any[]) => any) | undefined;
 }, {
-    data: unknown[];
     id: string;
-    usePortal: boolean;
-    isKeepAlive: boolean;
-    isAdaptiveWidth: boolean;
-    isDisabled: boolean;
-    isLoading: boolean;
+    data: unknown[];
+    labelProp: string;
+    valueProp: string;
     isReadOnly: boolean;
+    isDisabled: boolean;
     isInvalid: boolean;
     isRequired: boolean;
     isFullWidth: boolean;
-    isClearable: boolean;
-    keyCode: string[];
-    isGroupSuggestions: boolean;
-    isInfinityScroll: boolean;
-    isManualFilter: boolean;
-    labelProp: string;
-    valueProp: string;
+    isLoading: boolean;
     isContentLoading: boolean;
+    isClearable: boolean;
     isSearchable: boolean;
     emptyText: string;
     contentLoadingText: string;
+    isInfinityScroll: boolean;
+    isManualFilter: boolean;
+    usePortal: boolean;
     isShowButtonAction: boolean;
     buttonActionText: string;
+    isGroupSuggestions: boolean;
     groupKey: string;
+    keyCode: string[];
     isRawValue: boolean;
+    isKeepAlive: boolean;
+    isAdaptiveWidth: boolean;
 }, {}>;
 
 export { MpAutocomplete };

package/dist/autocomplete.js

@@ -170,7 +170,8 @@ function useAutocomplete(props, emit) {
     valueProp,
     isInfinityScroll,
     placeholder,
-    isAdaptiveWidth
+    isAdaptiveWidth,
+    isInvalid
   } = (0, import_vue.toRefs)(props);
   const scrollEndNode = (0, import_vue.ref)();
   const currentValue = (0, import_vue.ref)();
@@ -239,6 +240,7 @@ function useAutocomplete(props, emit) {
   });
   const getCursorPosition = (0, import_vue.computed)(() => getValueOfSuggestions.value.findIndex((item) => (0, import_pixel3_utils.isEqual)(getValue(item), currentCursor.value)));
   function onOpenPopover(e) {
+    emit("focus", e);
     isPopoverOpen.value = true;
     if (isSearchable.value) {
       const target = e.target;
@@ -425,6 +427,12 @@ function useAutocomplete(props, emit) {
         position: "relative"
       }),
       onClick: handleForceFocusToInput,
+      onMouseenter: () => {
+        isOutside.value = false;
+      },
+      onMouseleave: () => {
+        isOutside.value = true;
+      },
       ...props.contentAttrs
     };
   });
@@ -438,6 +446,7 @@ function useAutocomplete(props, emit) {
       isReadOnly: !isSearchable.value || isReadOnly.value,
       isFullWidth: isFullWidth.value,
       placeholder: placeholder == null ? void 0 : placeholder.value,
+      isInvalid: isInvalid.value,
       onInput: onInputChange,
       onKeydown,
       onFocus: onOpenPopover,
@@ -445,6 +454,9 @@ function useAutocomplete(props, emit) {
         if (isOutside.value) {
           onBlur();
         }
+      },
+      clear: (e) => {
+        emit("clear", e);
       }
     };
   });
@@ -546,7 +558,7 @@ var import_css2 = require("@mekari/pixel3-styled-system/css");
 var MpAutocomplete = (0, import_vue3.defineComponent)({
   name: "MpAutocomplete",
   props: autocompleteProps,
-  emits: ["update:modelValue", "input", "change", "enter", "scrollEnd", "buttonAction"],
+  emits: ["update:modelValue", "input", "change", "enter", "scrollEnd", "buttonAction", "focus", "clear"],
   setup(props, {
     emit,
     slots
@@ -579,7 +591,7 @@ var MpAutocomplete = (0, import_vue3.defineComponent)({
           "data-category": group.key,
           "class": (0, import_patterns.flex)({
             direction: "column",
-            alignItems: "start",
+            alignItems: "flex-start",
             width: "full"
           })
         }, [slots.group ? slots.group({

package/dist/autocomplete.mjs

@@ -1,8 +1,8 @@
 import {
   MpAutocomplete
-} from "./chunk-NO5EOKPD.mjs";
-import "./chunk-OGP7WQRE.mjs";
-import "./chunk-OX7ZBBEQ.mjs";
+} from "./chunk-ESXC6LD2.mjs";
+import "./chunk-35YHPTDD.mjs";
+import "./chunk-Q7SGQCOH.mjs";
 import "./chunk-QZ7VFGWC.mjs";
 export {
   MpAutocomplete

package/dist/{chunk-OGP7WQRE.mjs → chunk-35YHPTDD.mjs}

@@ -19,7 +19,8 @@ function useAutocomplete(props, emit) {
     valueProp,
     isInfinityScroll,
     placeholder,
-    isAdaptiveWidth
+    isAdaptiveWidth,
+    isInvalid
   } = toRefs(props);
   const scrollEndNode = ref();
   const currentValue = ref();
@@ -88,6 +89,7 @@ function useAutocomplete(props, emit) {
   });
   const getCursorPosition = computed(() => getValueOfSuggestions.value.findIndex((item) => isEqual(getValue(item), currentCursor.value)));
   function onOpenPopover(e) {
+    emit("focus", e);
     isPopoverOpen.value = true;
     if (isSearchable.value) {
       const target = e.target;
@@ -274,6 +276,12 @@ function useAutocomplete(props, emit) {
         position: "relative"
       }),
       onClick: handleForceFocusToInput,
+      onMouseenter: () => {
+        isOutside.value = false;
+      },
+      onMouseleave: () => {
+        isOutside.value = true;
+      },
       ...props.contentAttrs
     };
   });
@@ -287,6 +295,7 @@ function useAutocomplete(props, emit) {
       isReadOnly: !isSearchable.value || isReadOnly.value,
       isFullWidth: isFullWidth.value,
       placeholder: placeholder == null ? void 0 : placeholder.value,
+      isInvalid: isInvalid.value,
       onInput: onInputChange,
       onKeydown,
       onFocus: onOpenPopover,
@@ -294,6 +303,9 @@ function useAutocomplete(props, emit) {
         if (isOutside.value) {
           onBlur();
         }
+      },
+      clear: (e) => {
+        emit("clear", e);
       }
     };
   });

package/dist/{chunk-NO5EOKPD.mjs → chunk-ESXC6LD2.mjs}

@@ -1,9 +1,9 @@
 import {
   useAutocomplete
-} from "./chunk-OGP7WQRE.mjs";
+} from "./chunk-35YHPTDD.mjs";
 import {
   autocompleteProps
-} from "./chunk-OX7ZBBEQ.mjs";
+} from "./chunk-Q7SGQCOH.mjs";
 
 // src/autocomplete.tsx
 import { createTextVNode as _createTextVNode, createVNode as _createVNode } from "vue";
@@ -18,7 +18,7 @@ import { css } from "@mekari/pixel3-styled-system/css";
 var MpAutocomplete = defineComponent({
   name: "MpAutocomplete",
   props: autocompleteProps,
-  emits: ["update:modelValue", "input", "change", "enter", "scrollEnd", "buttonAction"],
+  emits: ["update:modelValue", "input", "change", "enter", "scrollEnd", "buttonAction", "focus", "clear"],
   setup(props, {
     emit,
     slots
@@ -51,7 +51,7 @@ var MpAutocomplete = defineComponent({
           "data-category": group.key,
           "class": flex({
             direction: "column",
-            alignItems: "start",
+            alignItems: "flex-start",
             width: "full"
           })
         }, [slots.group ? slots.group({

package/dist/{chunk-OX7ZBBEQ.mjs → chunk-Q7SGQCOH.mjs}

@@ -118,7 +118,7 @@ var autocompleteProps = {
     default: true
   }
 };
-var autocompleteEmit = ["update:modelValue", "input", "change", "enter", "scrollEnd", "buttonAction"];
+var autocompleteEmit = ["update:modelValue", "input", "change", "enter", "scrollEnd", "buttonAction", "focus", "clear"];
 
 export {
   autocompleteProps,

package/dist/index.js

@@ -172,7 +172,8 @@ function useAutocomplete(props, emit) {
     valueProp,
     isInfinityScroll,
     placeholder,
-    isAdaptiveWidth
+    isAdaptiveWidth,
+    isInvalid
   } = (0, import_vue.toRefs)(props);
   const scrollEndNode = (0, import_vue.ref)();
   const currentValue = (0, import_vue.ref)();
@@ -241,6 +242,7 @@ function useAutocomplete(props, emit) {
   });
   const getCursorPosition = (0, import_vue.computed)(() => getValueOfSuggestions.value.findIndex((item) => (0, import_pixel3_utils.isEqual)(getValue(item), currentCursor.value)));
   function onOpenPopover(e) {
+    emit("focus", e);
     isPopoverOpen.value = true;
     if (isSearchable.value) {
       const target = e.target;
@@ -427,6 +429,12 @@ function useAutocomplete(props, emit) {
         position: "relative"
       }),
       onClick: handleForceFocusToInput,
+      onMouseenter: () => {
+        isOutside.value = false;
+      },
+      onMouseleave: () => {
+        isOutside.value = true;
+      },
       ...props.contentAttrs
     };
   });
@@ -440,6 +448,7 @@ function useAutocomplete(props, emit) {
       isReadOnly: !isSearchable.value || isReadOnly.value,
       isFullWidth: isFullWidth.value,
       placeholder: placeholder == null ? void 0 : placeholder.value,
+      isInvalid: isInvalid.value,
       onInput: onInputChange,
       onKeydown,
       onFocus: onOpenPopover,
@@ -447,6 +456,9 @@ function useAutocomplete(props, emit) {
         if (isOutside.value) {
           onBlur();
         }
+      },
+      clear: (e) => {
+        emit("clear", e);
       }
     };
   });
@@ -548,7 +560,7 @@ var import_css2 = require("@mekari/pixel3-styled-system/css");
 var MpAutocomplete = (0, import_vue3.defineComponent)({
   name: "MpAutocomplete",
   props: autocompleteProps,
-  emits: ["update:modelValue", "input", "change", "enter", "scrollEnd", "buttonAction"],
+  emits: ["update:modelValue", "input", "change", "enter", "scrollEnd", "buttonAction", "focus", "clear"],
   setup(props, {
     emit,
     slots
@@ -581,7 +593,7 @@ var MpAutocomplete = (0, import_vue3.defineComponent)({
           "data-category": group.key,
           "class": (0, import_patterns.flex)({
             direction: "column",
-            alignItems: "start",
+            alignItems: "flex-start",
             width: "full"
           })
         }, [slots.group ? slots.group({

package/dist/index.mjs

@@ -1,8 +1,8 @@
 import {
   MpAutocomplete
-} from "./chunk-NO5EOKPD.mjs";
-import "./chunk-OGP7WQRE.mjs";
-import "./chunk-OX7ZBBEQ.mjs";
+} from "./chunk-ESXC6LD2.mjs";
+import "./chunk-35YHPTDD.mjs";
+import "./chunk-Q7SGQCOH.mjs";
 import "./chunk-QZ7VFGWC.mjs";
 export {
   MpAutocomplete

package/dist/metafile-cjs.json

@@ -1 +1 @@
-{"inputs":{"src/modules/autocomplete.props.ts":{"bytes":3462,"imports":[],"format":"esm"},"src/modules/autocomplete.hooks.ts":{"bytes":12037,"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":4670,"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":5104},"src/modules/autocomplete.props.ts":{"bytesInOutput":1882},"src/modules/autocomplete.hooks.ts":{"bytesInOutput":12295}},"bytes":20404},"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":4944},"src/modules/autocomplete.props.ts":{"bytesInOutput":1882},"src/modules/autocomplete.hooks.ts":{"bytesInOutput":12295}},"bytes":20394},"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":12475}},"bytes":13511},"dist/modules/autocomplete.props.js":{"imports":[],"exports":[],"entryPoint":"src/modules/autocomplete.props.ts","inputs":{"src/modules/autocomplete.props.ts":{"bytesInOutput":2213}},"bytes":3181}}}
+{"inputs":{"src/modules/autocomplete.props.ts":{"bytes":3480,"imports":[],"format":"esm"},"src/modules/autocomplete.hooks.ts":{"bytes":12442,"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":4693,"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":5127},"src/modules/autocomplete.props.ts":{"bytesInOutput":1882},"src/modules/autocomplete.hooks.ts":{"bytesInOutput":12562}},"bytes":20694},"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":4967},"src/modules/autocomplete.props.ts":{"bytesInOutput":1882},"src/modules/autocomplete.hooks.ts":{"bytesInOutput":12562}},"bytes":20684},"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":12742}},"bytes":13778},"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

@@ -1 +1 @@
-{"inputs":{"src/modules/autocomplete.props.ts":{"bytes":3462,"imports":[],"format":"esm"},"src/modules/autocomplete.hooks.ts":{"bytes":12037,"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":4670,"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-NO5EOKPD.mjs","kind":"import-statement"},{"path":"dist/chunk-OGP7WQRE.mjs","kind":"import-statement"},{"path":"dist/chunk-OX7ZBBEQ.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-NO5EOKPD.mjs","kind":"import-statement"},{"path":"dist/chunk-OGP7WQRE.mjs","kind":"import-statement"},{"path":"dist/chunk-OX7ZBBEQ.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-NO5EOKPD.mjs":{"imports":[{"path":"dist/chunk-OGP7WQRE.mjs","kind":"import-statement"},{"path":"dist/chunk-OX7ZBBEQ.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":4233}},"bytes":4406},"dist/modules/autocomplete.hooks.mjs":{"imports":[{"path":"dist/chunk-OGP7WQRE.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-OGP7WQRE.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":11634}},"bytes":11752},"dist/modules/autocomplete.props.mjs":{"imports":[{"path":"dist/chunk-OX7ZBBEQ.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-OX7ZBBEQ.mjs":{"imports":[],"exports":["autocompleteEmit","autocompleteProps"],"inputs":{"src/modules/autocomplete.props.ts":{"bytesInOutput":1985}},"bytes":2075},"dist/chunk-QZ7VFGWC.mjs":{"imports":[],"exports":["__name"],"inputs":{},"bytes":151}}}
+{"inputs":{"src/modules/autocomplete.props.ts":{"bytes":3480,"imports":[],"format":"esm"},"src/modules/autocomplete.hooks.ts":{"bytes":12442,"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":4693,"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-ESXC6LD2.mjs","kind":"import-statement"},{"path":"dist/chunk-35YHPTDD.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-ESXC6LD2.mjs","kind":"import-statement"},{"path":"dist/chunk-35YHPTDD.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-ESXC6LD2.mjs":{"imports":[{"path":"dist/chunk-35YHPTDD.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":4256}},"bytes":4429},"dist/modules/autocomplete.hooks.mjs":{"imports":[{"path":"dist/chunk-35YHPTDD.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-35YHPTDD.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":11901}},"bytes":12019},"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.d.mts

@@ -26,6 +26,8 @@ declare function useAutocomplete(props: AutocompleteProps, emit: AutocompleteEmi
         isDark?: boolean | undefined;
         isUnstyled?: boolean | undefined;
         onClick: () => void;
+        onMouseenter: () => void;
+        onMouseleave: () => void;
     }>;
     inputAtrrs: vue.ComputedRef<{
         id: string | undefined;
@@ -35,10 +37,12 @@ declare function useAutocomplete(props: AutocompleteProps, emit: AutocompleteEmi
         isReadOnly: boolean;
         isFullWidth: boolean;
         placeholder: string | undefined;
+        isInvalid: boolean;
         onInput: (e: Event) => void;
         onKeydown: (e: KeyboardEvent) => void;
         onFocus: (e: Event) => void;
         onBlur: () => void;
+        clear: (e: Event) => void;
     }>;
     buttonActionAttrs: vue.ComputedRef<{
         class: string;

package/dist/modules/autocomplete.hooks.d.ts

@@ -26,6 +26,8 @@ declare function useAutocomplete(props: AutocompleteProps, emit: AutocompleteEmi
         isDark?: boolean | undefined;
         isUnstyled?: boolean | undefined;
         onClick: () => void;
+        onMouseenter: () => void;
+        onMouseleave: () => void;
     }>;
     inputAtrrs: vue.ComputedRef<{
         id: string | undefined;
@@ -35,10 +37,12 @@ declare function useAutocomplete(props: AutocompleteProps, emit: AutocompleteEmi
         isReadOnly: boolean;
         isFullWidth: boolean;
         placeholder: string | undefined;
+        isInvalid: boolean;
         onInput: (e: Event) => void;
         onKeydown: (e: KeyboardEvent) => void;
         onFocus: (e: Event) => void;
         onBlur: () => void;
+        clear: (e: Event) => void;
     }>;
     buttonActionAttrs: vue.ComputedRef<{
         class: string;

package/dist/modules/autocomplete.hooks.js

@@ -40,7 +40,8 @@ function useAutocomplete(props, emit) {
     valueProp,
     isInfinityScroll,
     placeholder,
-    isAdaptiveWidth
+    isAdaptiveWidth,
+    isInvalid
   } = (0, import_vue.toRefs)(props);
   const scrollEndNode = (0, import_vue.ref)();
   const currentValue = (0, import_vue.ref)();
@@ -109,6 +110,7 @@ function useAutocomplete(props, emit) {
   });
   const getCursorPosition = (0, import_vue.computed)(() => getValueOfSuggestions.value.findIndex((item) => (0, import_pixel3_utils.isEqual)(getValue(item), currentCursor.value)));
   function onOpenPopover(e) {
+    emit("focus", e);
     isPopoverOpen.value = true;
     if (isSearchable.value) {
       const target = e.target;
@@ -295,6 +297,12 @@ function useAutocomplete(props, emit) {
         position: "relative"
       }),
       onClick: handleForceFocusToInput,
+      onMouseenter: () => {
+        isOutside.value = false;
+      },
+      onMouseleave: () => {
+        isOutside.value = true;
+      },
       ...props.contentAttrs
     };
   });
@@ -308,6 +316,7 @@ function useAutocomplete(props, emit) {
       isReadOnly: !isSearchable.value || isReadOnly.value,
       isFullWidth: isFullWidth.value,
       placeholder: placeholder == null ? void 0 : placeholder.value,
+      isInvalid: isInvalid.value,
       onInput: onInputChange,
       onKeydown,
       onFocus: onOpenPopover,
@@ -315,6 +324,9 @@ function useAutocomplete(props, emit) {
         if (isOutside.value) {
           onBlur();
         }
+      },
+      clear: (e) => {
+        emit("clear", e);
       }
     };
   });

package/dist/modules/autocomplete.hooks.mjs

@@ -1,6 +1,6 @@
 import {
   useAutocomplete
-} from "../chunk-OGP7WQRE.mjs";
+} from "../chunk-35YHPTDD.mjs";
 import "../chunk-QZ7VFGWC.mjs";
 export {
   useAutocomplete

package/dist/modules/autocomplete.props.d.mts

@@ -22,7 +22,7 @@ declare const autocompleteProps: {
     modelValue: {
         type: PropType<StringNumberAnyObject | undefined>;
     };
-    defaultValue: (ObjectConstructor | StringConstructor | NumberConstructor)[];
+    defaultValue: (StringConstructor | NumberConstructor | ObjectConstructor)[];
     placeholder: {
         type: PropType<string>;
     };
@@ -129,7 +129,7 @@ declare const autocompleteProps: {
         default: boolean;
     };
 };
-declare const autocompleteEmit: readonly ["update:modelValue", "input", "change", "enter", "scrollEnd", "buttonAction"];
+declare const autocompleteEmit: readonly ["update:modelValue", "input", "change", "enter", "scrollEnd", "buttonAction", "focus", "clear"];
 type AutocompleteProps = ExtractPropTypes<typeof autocompleteProps>;
 type AutocompleteEmits = (e: (typeof autocompleteEmit)[number], value?: unknown, value2?: unknown) => void;
 

package/dist/modules/autocomplete.props.d.ts

@@ -22,7 +22,7 @@ declare const autocompleteProps: {
     modelValue: {
         type: PropType<StringNumberAnyObject | undefined>;
     };
-    defaultValue: (ObjectConstructor | StringConstructor | NumberConstructor)[];
+    defaultValue: (StringConstructor | NumberConstructor | ObjectConstructor)[];
     placeholder: {
         type: PropType<string>;
     };
@@ -129,7 +129,7 @@ declare const autocompleteProps: {
         default: boolean;
     };
 };
-declare const autocompleteEmit: readonly ["update:modelValue", "input", "change", "enter", "scrollEnd", "buttonAction"];
+declare const autocompleteEmit: readonly ["update:modelValue", "input", "change", "enter", "scrollEnd", "buttonAction", "focus", "clear"];
 type AutocompleteProps = ExtractPropTypes<typeof autocompleteProps>;
 type AutocompleteEmits = (e: (typeof autocompleteEmit)[number], value?: unknown, value2?: unknown) => void;
 

package/dist/modules/autocomplete.props.js

@@ -143,7 +143,7 @@ var autocompleteProps = {
     default: true
   }
 };
-var autocompleteEmit = ["update:modelValue", "input", "change", "enter", "scrollEnd", "buttonAction"];
+var autocompleteEmit = ["update:modelValue", "input", "change", "enter", "scrollEnd", "buttonAction", "focus", "clear"];
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   autocompleteEmit,

package/dist/modules/autocomplete.props.mjs

@@ -1,7 +1,7 @@
 import {
   autocompleteEmit,
   autocompleteProps
-} from "../chunk-OX7ZBBEQ.mjs";
+} from "../chunk-Q7SGQCOH.mjs";
 import "../chunk-QZ7VFGWC.mjs";
 export {
   autocompleteEmit,

package/package.json

@@ -1,19 +1,20 @@
 {
   "name": "@mekari/pixel3-autocomplete",
-  "version": "0.0.5",
+  "description": "Autocomplete component for mekari pixel 3",
+  "version": "0.0.6-dev.1",
   "main": "dist/index.js",
   "license": "MIT",
   "files": [
     "dist"
   ],
   "dependencies": {
-    "@mekari/pixel3-styled-system": "0.0.3",
+    "@mekari/pixel3-styled-system": "0.0.4-dev.1",
     "@mekari/pixel3-utils": "0.0.4",
-    "@mekari/pixel3-input": "0.0.5",
-    "@mekari/pixel3-spinner": "0.0.5",
-    "@mekari/pixel3-icon": "0.0.5",
-    "@mekari/pixel3-popover": "0.0.5",
-    "@mekari/pixel3-text": "0.0.5"
+    "@mekari/pixel3-input": "0.0.6-dev.1",
+    "@mekari/pixel3-spinner": "0.0.6-dev.1",
+    "@mekari/pixel3-icon": "0.0.6-dev.1",
+    "@mekari/pixel3-popover": "0.0.6-dev.1",
+    "@mekari/pixel3-text": "0.0.6-dev.1"
   },
   "peerDependencies": {
     "vue": "^3.4.9"
@@ -38,7 +39,6 @@
     "build": "tsup && pnpm build:types",
     "build:fast": "tsup",
     "build:types": "tsup src --dts-only",
-    "build:external": "tsup src/index.tsx --external @acme-org/styled-system",
     "types:check": "tsc --noEmit",
     "replace-config": "clean-package",
     "restore-config": "clean-package restore"