@mekari/pixel3-autocomplete 0.0.4 → 0.0.6-dev.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/autocomplete.d.mts +3 -1
- package/dist/autocomplete.d.ts +3 -1
- package/dist/autocomplete.js +14 -2
- package/dist/autocomplete.mjs +3 -3
- package/dist/{chunk-OGP7WQRE.mjs → chunk-35YHPTDD.mjs} +13 -1
- package/dist/{chunk-OX7ZBBEQ.mjs → chunk-Q7SGQCOH.mjs} +1 -1
- package/dist/{chunk-NO5EOKPD.mjs → chunk-VLFDLMUO.mjs} +3 -3
- package/dist/index.js +14 -2
- package/dist/index.mjs +3 -3
- package/dist/metafile-cjs.json +1 -1
- package/dist/metafile-esm.json +1 -1
- package/dist/modules/autocomplete.hooks.d.mts +4 -0
- package/dist/modules/autocomplete.hooks.d.ts +4 -0
- package/dist/modules/autocomplete.hooks.js +13 -1
- package/dist/modules/autocomplete.hooks.mjs +1 -1
- package/dist/modules/autocomplete.props.d.mts +1 -1
- package/dist/modules/autocomplete.props.d.ts +1 -1
- package/dist/modules/autocomplete.props.js +1 -1
- package/dist/modules/autocomplete.props.mjs +1 -1
- package/package.json +9 -9
package/dist/autocomplete.d.mts
CHANGED
|
@@ -128,7 +128,7 @@ declare const MpAutocomplete: vue.DefineComponent<{
|
|
|
128
128
|
type: vue.PropType<boolean>;
|
|
129
129
|
default: boolean;
|
|
130
130
|
};
|
|
131
|
-
}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("update:modelValue" | "input" | "change" | "enter" | "scrollEnd" | "buttonAction")[], "update:modelValue" | "input" | "change" | "enter" | "scrollEnd" | "buttonAction", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
131
|
+
}, () => 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<{
|
|
132
132
|
id: {
|
|
133
133
|
type: vue.PropType<string>;
|
|
134
134
|
default: string;
|
|
@@ -260,6 +260,8 @@ declare const MpAutocomplete: vue.DefineComponent<{
|
|
|
260
260
|
onEnter?: ((...args: any[]) => any) | undefined;
|
|
261
261
|
onScrollEnd?: ((...args: any[]) => any) | undefined;
|
|
262
262
|
onButtonAction?: ((...args: any[]) => any) | undefined;
|
|
263
|
+
onFocus?: ((...args: any[]) => any) | undefined;
|
|
264
|
+
onClear?: ((...args: any[]) => any) | undefined;
|
|
263
265
|
}, {
|
|
264
266
|
id: string;
|
|
265
267
|
data: unknown[];
|
package/dist/autocomplete.d.ts
CHANGED
|
@@ -128,7 +128,7 @@ declare const MpAutocomplete: vue.DefineComponent<{
|
|
|
128
128
|
type: vue.PropType<boolean>;
|
|
129
129
|
default: boolean;
|
|
130
130
|
};
|
|
131
|
-
}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("update:modelValue" | "input" | "change" | "enter" | "scrollEnd" | "buttonAction")[], "update:modelValue" | "input" | "change" | "enter" | "scrollEnd" | "buttonAction", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
131
|
+
}, () => 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<{
|
|
132
132
|
id: {
|
|
133
133
|
type: vue.PropType<string>;
|
|
134
134
|
default: string;
|
|
@@ -260,6 +260,8 @@ declare const MpAutocomplete: vue.DefineComponent<{
|
|
|
260
260
|
onEnter?: ((...args: any[]) => any) | undefined;
|
|
261
261
|
onScrollEnd?: ((...args: any[]) => any) | undefined;
|
|
262
262
|
onButtonAction?: ((...args: any[]) => any) | undefined;
|
|
263
|
+
onFocus?: ((...args: any[]) => any) | undefined;
|
|
264
|
+
onClear?: ((...args: any[]) => any) | undefined;
|
|
263
265
|
}, {
|
|
264
266
|
id: string;
|
|
265
267
|
data: unknown[];
|
package/dist/autocomplete.js
CHANGED
|
@@ -170,7 +170,8 @@ function useAutocomplete(props, emit) {
|
|
|
170
170
|
valueProp,
|
|
171
171
|
isInfinityScroll,
|
|
172
172
|
placeholder,
|
|
173
|
-
isAdaptiveWidth
|
|
173
|
+
isAdaptiveWidth,
|
|
174
|
+
isInvalid
|
|
174
175
|
} = (0, import_vue.toRefs)(props);
|
|
175
176
|
const scrollEndNode = (0, import_vue.ref)();
|
|
176
177
|
const currentValue = (0, import_vue.ref)();
|
|
@@ -239,6 +240,7 @@ function useAutocomplete(props, emit) {
|
|
|
239
240
|
});
|
|
240
241
|
const getCursorPosition = (0, import_vue.computed)(() => getValueOfSuggestions.value.findIndex((item) => (0, import_pixel3_utils.isEqual)(getValue(item), currentCursor.value)));
|
|
241
242
|
function onOpenPopover(e) {
|
|
243
|
+
emit("focus", e);
|
|
242
244
|
isPopoverOpen.value = true;
|
|
243
245
|
if (isSearchable.value) {
|
|
244
246
|
const target = e.target;
|
|
@@ -425,6 +427,12 @@ function useAutocomplete(props, emit) {
|
|
|
425
427
|
position: "relative"
|
|
426
428
|
}),
|
|
427
429
|
onClick: handleForceFocusToInput,
|
|
430
|
+
onMouseenter: () => {
|
|
431
|
+
isOutside.value = false;
|
|
432
|
+
},
|
|
433
|
+
onMouseleave: () => {
|
|
434
|
+
isOutside.value = true;
|
|
435
|
+
},
|
|
428
436
|
...props.contentAttrs
|
|
429
437
|
};
|
|
430
438
|
});
|
|
@@ -438,6 +446,7 @@ function useAutocomplete(props, emit) {
|
|
|
438
446
|
isReadOnly: !isSearchable.value || isReadOnly.value,
|
|
439
447
|
isFullWidth: isFullWidth.value,
|
|
440
448
|
placeholder: placeholder == null ? void 0 : placeholder.value,
|
|
449
|
+
isInvalid: isInvalid.value,
|
|
441
450
|
onInput: onInputChange,
|
|
442
451
|
onKeydown,
|
|
443
452
|
onFocus: onOpenPopover,
|
|
@@ -445,6 +454,9 @@ function useAutocomplete(props, emit) {
|
|
|
445
454
|
if (isOutside.value) {
|
|
446
455
|
onBlur();
|
|
447
456
|
}
|
|
457
|
+
},
|
|
458
|
+
clear: (e) => {
|
|
459
|
+
emit("clear", e);
|
|
448
460
|
}
|
|
449
461
|
};
|
|
450
462
|
});
|
|
@@ -546,7 +558,7 @@ var import_css2 = require("@mekari/pixel3-styled-system/css");
|
|
|
546
558
|
var MpAutocomplete = (0, import_vue3.defineComponent)({
|
|
547
559
|
name: "MpAutocomplete",
|
|
548
560
|
props: autocompleteProps,
|
|
549
|
-
emits: ["update:modelValue", "input", "change", "enter", "scrollEnd", "buttonAction"],
|
|
561
|
+
emits: ["update:modelValue", "input", "change", "enter", "scrollEnd", "buttonAction", "focus", "clear"],
|
|
550
562
|
setup(props, {
|
|
551
563
|
emit,
|
|
552
564
|
slots
|
package/dist/autocomplete.mjs
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import {
|
|
2
2
|
MpAutocomplete
|
|
3
|
-
} from "./chunk-
|
|
4
|
-
import "./chunk-
|
|
5
|
-
import "./chunk-
|
|
3
|
+
} from "./chunk-VLFDLMUO.mjs";
|
|
4
|
+
import "./chunk-35YHPTDD.mjs";
|
|
5
|
+
import "./chunk-Q7SGQCOH.mjs";
|
|
6
6
|
import "./chunk-QZ7VFGWC.mjs";
|
|
7
7
|
export {
|
|
8
8
|
MpAutocomplete
|
|
@@ -19,7 +19,8 @@ function useAutocomplete(props, emit) {
|
|
|
19
19
|
valueProp,
|
|
20
20
|
isInfinityScroll,
|
|
21
21
|
placeholder,
|
|
22
|
-
isAdaptiveWidth
|
|
22
|
+
isAdaptiveWidth,
|
|
23
|
+
isInvalid
|
|
23
24
|
} = toRefs(props);
|
|
24
25
|
const scrollEndNode = ref();
|
|
25
26
|
const currentValue = ref();
|
|
@@ -88,6 +89,7 @@ function useAutocomplete(props, emit) {
|
|
|
88
89
|
});
|
|
89
90
|
const getCursorPosition = computed(() => getValueOfSuggestions.value.findIndex((item) => isEqual(getValue(item), currentCursor.value)));
|
|
90
91
|
function onOpenPopover(e) {
|
|
92
|
+
emit("focus", e);
|
|
91
93
|
isPopoverOpen.value = true;
|
|
92
94
|
if (isSearchable.value) {
|
|
93
95
|
const target = e.target;
|
|
@@ -274,6 +276,12 @@ function useAutocomplete(props, emit) {
|
|
|
274
276
|
position: "relative"
|
|
275
277
|
}),
|
|
276
278
|
onClick: handleForceFocusToInput,
|
|
279
|
+
onMouseenter: () => {
|
|
280
|
+
isOutside.value = false;
|
|
281
|
+
},
|
|
282
|
+
onMouseleave: () => {
|
|
283
|
+
isOutside.value = true;
|
|
284
|
+
},
|
|
277
285
|
...props.contentAttrs
|
|
278
286
|
};
|
|
279
287
|
});
|
|
@@ -287,6 +295,7 @@ function useAutocomplete(props, emit) {
|
|
|
287
295
|
isReadOnly: !isSearchable.value || isReadOnly.value,
|
|
288
296
|
isFullWidth: isFullWidth.value,
|
|
289
297
|
placeholder: placeholder == null ? void 0 : placeholder.value,
|
|
298
|
+
isInvalid: isInvalid.value,
|
|
290
299
|
onInput: onInputChange,
|
|
291
300
|
onKeydown,
|
|
292
301
|
onFocus: onOpenPopover,
|
|
@@ -294,6 +303,9 @@ function useAutocomplete(props, emit) {
|
|
|
294
303
|
if (isOutside.value) {
|
|
295
304
|
onBlur();
|
|
296
305
|
}
|
|
306
|
+
},
|
|
307
|
+
clear: (e) => {
|
|
308
|
+
emit("clear", e);
|
|
297
309
|
}
|
|
298
310
|
};
|
|
299
311
|
});
|
|
@@ -118,7 +118,7 @@ var autocompleteProps = {
|
|
|
118
118
|
default: true
|
|
119
119
|
}
|
|
120
120
|
};
|
|
121
|
-
var autocompleteEmit = ["update:modelValue", "input", "change", "enter", "scrollEnd", "buttonAction"];
|
|
121
|
+
var autocompleteEmit = ["update:modelValue", "input", "change", "enter", "scrollEnd", "buttonAction", "focus", "clear"];
|
|
122
122
|
|
|
123
123
|
export {
|
|
124
124
|
autocompleteProps,
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import {
|
|
2
2
|
useAutocomplete
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-35YHPTDD.mjs";
|
|
4
4
|
import {
|
|
5
5
|
autocompleteProps
|
|
6
|
-
} from "./chunk-
|
|
6
|
+
} from "./chunk-Q7SGQCOH.mjs";
|
|
7
7
|
|
|
8
8
|
// src/autocomplete.tsx
|
|
9
9
|
import { createTextVNode as _createTextVNode, createVNode as _createVNode } from "vue";
|
|
@@ -18,7 +18,7 @@ import { css } from "@mekari/pixel3-styled-system/css";
|
|
|
18
18
|
var MpAutocomplete = defineComponent({
|
|
19
19
|
name: "MpAutocomplete",
|
|
20
20
|
props: autocompleteProps,
|
|
21
|
-
emits: ["update:modelValue", "input", "change", "enter", "scrollEnd", "buttonAction"],
|
|
21
|
+
emits: ["update:modelValue", "input", "change", "enter", "scrollEnd", "buttonAction", "focus", "clear"],
|
|
22
22
|
setup(props, {
|
|
23
23
|
emit,
|
|
24
24
|
slots
|
package/dist/index.js
CHANGED
|
@@ -172,7 +172,8 @@ function useAutocomplete(props, emit) {
|
|
|
172
172
|
valueProp,
|
|
173
173
|
isInfinityScroll,
|
|
174
174
|
placeholder,
|
|
175
|
-
isAdaptiveWidth
|
|
175
|
+
isAdaptiveWidth,
|
|
176
|
+
isInvalid
|
|
176
177
|
} = (0, import_vue.toRefs)(props);
|
|
177
178
|
const scrollEndNode = (0, import_vue.ref)();
|
|
178
179
|
const currentValue = (0, import_vue.ref)();
|
|
@@ -241,6 +242,7 @@ function useAutocomplete(props, emit) {
|
|
|
241
242
|
});
|
|
242
243
|
const getCursorPosition = (0, import_vue.computed)(() => getValueOfSuggestions.value.findIndex((item) => (0, import_pixel3_utils.isEqual)(getValue(item), currentCursor.value)));
|
|
243
244
|
function onOpenPopover(e) {
|
|
245
|
+
emit("focus", e);
|
|
244
246
|
isPopoverOpen.value = true;
|
|
245
247
|
if (isSearchable.value) {
|
|
246
248
|
const target = e.target;
|
|
@@ -427,6 +429,12 @@ function useAutocomplete(props, emit) {
|
|
|
427
429
|
position: "relative"
|
|
428
430
|
}),
|
|
429
431
|
onClick: handleForceFocusToInput,
|
|
432
|
+
onMouseenter: () => {
|
|
433
|
+
isOutside.value = false;
|
|
434
|
+
},
|
|
435
|
+
onMouseleave: () => {
|
|
436
|
+
isOutside.value = true;
|
|
437
|
+
},
|
|
430
438
|
...props.contentAttrs
|
|
431
439
|
};
|
|
432
440
|
});
|
|
@@ -440,6 +448,7 @@ function useAutocomplete(props, emit) {
|
|
|
440
448
|
isReadOnly: !isSearchable.value || isReadOnly.value,
|
|
441
449
|
isFullWidth: isFullWidth.value,
|
|
442
450
|
placeholder: placeholder == null ? void 0 : placeholder.value,
|
|
451
|
+
isInvalid: isInvalid.value,
|
|
443
452
|
onInput: onInputChange,
|
|
444
453
|
onKeydown,
|
|
445
454
|
onFocus: onOpenPopover,
|
|
@@ -447,6 +456,9 @@ function useAutocomplete(props, emit) {
|
|
|
447
456
|
if (isOutside.value) {
|
|
448
457
|
onBlur();
|
|
449
458
|
}
|
|
459
|
+
},
|
|
460
|
+
clear: (e) => {
|
|
461
|
+
emit("clear", e);
|
|
450
462
|
}
|
|
451
463
|
};
|
|
452
464
|
});
|
|
@@ -548,7 +560,7 @@ var import_css2 = require("@mekari/pixel3-styled-system/css");
|
|
|
548
560
|
var MpAutocomplete = (0, import_vue3.defineComponent)({
|
|
549
561
|
name: "MpAutocomplete",
|
|
550
562
|
props: autocompleteProps,
|
|
551
|
-
emits: ["update:modelValue", "input", "change", "enter", "scrollEnd", "buttonAction"],
|
|
563
|
+
emits: ["update:modelValue", "input", "change", "enter", "scrollEnd", "buttonAction", "focus", "clear"],
|
|
552
564
|
setup(props, {
|
|
553
565
|
emit,
|
|
554
566
|
slots
|
package/dist/index.mjs
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import {
|
|
2
2
|
MpAutocomplete
|
|
3
|
-
} from "./chunk-
|
|
4
|
-
import "./chunk-
|
|
5
|
-
import "./chunk-
|
|
3
|
+
} from "./chunk-VLFDLMUO.mjs";
|
|
4
|
+
import "./chunk-35YHPTDD.mjs";
|
|
5
|
+
import "./chunk-Q7SGQCOH.mjs";
|
|
6
6
|
import "./chunk-QZ7VFGWC.mjs";
|
|
7
7
|
export {
|
|
8
8
|
MpAutocomplete
|
package/dist/metafile-cjs.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"src/modules/autocomplete.props.ts":{"bytes":
|
|
1
|
+
{"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":4688,"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":5122},"src/modules/autocomplete.props.ts":{"bytesInOutput":1882},"src/modules/autocomplete.hooks.ts":{"bytesInOutput":12562}},"bytes":20689},"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":4962},"src/modules/autocomplete.props.ts":{"bytesInOutput":1882},"src/modules/autocomplete.hooks.ts":{"bytesInOutput":12562}},"bytes":20679},"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
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"src/modules/autocomplete.props.ts":{"bytes":
|
|
1
|
+
{"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":4688,"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-VLFDLMUO.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-VLFDLMUO.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-VLFDLMUO.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":4251}},"bytes":4424},"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}}}
|
|
@@ -26,6 +26,8 @@ declare function useAutocomplete(props: AutocompleteProps, emit: AutocompleteEmi
|
|
|
26
26
|
isDark?: boolean | undefined;
|
|
27
27
|
isUnstyled?: boolean | undefined;
|
|
28
28
|
onClick: () => void;
|
|
29
|
+
onMouseenter: () => void;
|
|
30
|
+
onMouseleave: () => void;
|
|
29
31
|
}>;
|
|
30
32
|
inputAtrrs: vue.ComputedRef<{
|
|
31
33
|
id: string | undefined;
|
|
@@ -35,10 +37,12 @@ declare function useAutocomplete(props: AutocompleteProps, emit: AutocompleteEmi
|
|
|
35
37
|
isReadOnly: boolean;
|
|
36
38
|
isFullWidth: boolean;
|
|
37
39
|
placeholder: string | undefined;
|
|
40
|
+
isInvalid: boolean;
|
|
38
41
|
onInput: (e: Event) => void;
|
|
39
42
|
onKeydown: (e: KeyboardEvent) => void;
|
|
40
43
|
onFocus: (e: Event) => void;
|
|
41
44
|
onBlur: () => void;
|
|
45
|
+
clear: (e: Event) => void;
|
|
42
46
|
}>;
|
|
43
47
|
buttonActionAttrs: vue.ComputedRef<{
|
|
44
48
|
class: string;
|
|
@@ -26,6 +26,8 @@ declare function useAutocomplete(props: AutocompleteProps, emit: AutocompleteEmi
|
|
|
26
26
|
isDark?: boolean | undefined;
|
|
27
27
|
isUnstyled?: boolean | undefined;
|
|
28
28
|
onClick: () => void;
|
|
29
|
+
onMouseenter: () => void;
|
|
30
|
+
onMouseleave: () => void;
|
|
29
31
|
}>;
|
|
30
32
|
inputAtrrs: vue.ComputedRef<{
|
|
31
33
|
id: string | undefined;
|
|
@@ -35,10 +37,12 @@ declare function useAutocomplete(props: AutocompleteProps, emit: AutocompleteEmi
|
|
|
35
37
|
isReadOnly: boolean;
|
|
36
38
|
isFullWidth: boolean;
|
|
37
39
|
placeholder: string | undefined;
|
|
40
|
+
isInvalid: boolean;
|
|
38
41
|
onInput: (e: Event) => void;
|
|
39
42
|
onKeydown: (e: KeyboardEvent) => void;
|
|
40
43
|
onFocus: (e: Event) => void;
|
|
41
44
|
onBlur: () => void;
|
|
45
|
+
clear: (e: Event) => void;
|
|
42
46
|
}>;
|
|
43
47
|
buttonActionAttrs: vue.ComputedRef<{
|
|
44
48
|
class: string;
|
|
@@ -40,7 +40,8 @@ function useAutocomplete(props, emit) {
|
|
|
40
40
|
valueProp,
|
|
41
41
|
isInfinityScroll,
|
|
42
42
|
placeholder,
|
|
43
|
-
isAdaptiveWidth
|
|
43
|
+
isAdaptiveWidth,
|
|
44
|
+
isInvalid
|
|
44
45
|
} = (0, import_vue.toRefs)(props);
|
|
45
46
|
const scrollEndNode = (0, import_vue.ref)();
|
|
46
47
|
const currentValue = (0, import_vue.ref)();
|
|
@@ -109,6 +110,7 @@ function useAutocomplete(props, emit) {
|
|
|
109
110
|
});
|
|
110
111
|
const getCursorPosition = (0, import_vue.computed)(() => getValueOfSuggestions.value.findIndex((item) => (0, import_pixel3_utils.isEqual)(getValue(item), currentCursor.value)));
|
|
111
112
|
function onOpenPopover(e) {
|
|
113
|
+
emit("focus", e);
|
|
112
114
|
isPopoverOpen.value = true;
|
|
113
115
|
if (isSearchable.value) {
|
|
114
116
|
const target = e.target;
|
|
@@ -295,6 +297,12 @@ function useAutocomplete(props, emit) {
|
|
|
295
297
|
position: "relative"
|
|
296
298
|
}),
|
|
297
299
|
onClick: handleForceFocusToInput,
|
|
300
|
+
onMouseenter: () => {
|
|
301
|
+
isOutside.value = false;
|
|
302
|
+
},
|
|
303
|
+
onMouseleave: () => {
|
|
304
|
+
isOutside.value = true;
|
|
305
|
+
},
|
|
298
306
|
...props.contentAttrs
|
|
299
307
|
};
|
|
300
308
|
});
|
|
@@ -308,6 +316,7 @@ function useAutocomplete(props, emit) {
|
|
|
308
316
|
isReadOnly: !isSearchable.value || isReadOnly.value,
|
|
309
317
|
isFullWidth: isFullWidth.value,
|
|
310
318
|
placeholder: placeholder == null ? void 0 : placeholder.value,
|
|
319
|
+
isInvalid: isInvalid.value,
|
|
311
320
|
onInput: onInputChange,
|
|
312
321
|
onKeydown,
|
|
313
322
|
onFocus: onOpenPopover,
|
|
@@ -315,6 +324,9 @@ function useAutocomplete(props, emit) {
|
|
|
315
324
|
if (isOutside.value) {
|
|
316
325
|
onBlur();
|
|
317
326
|
}
|
|
327
|
+
},
|
|
328
|
+
clear: (e) => {
|
|
329
|
+
emit("clear", e);
|
|
318
330
|
}
|
|
319
331
|
};
|
|
320
332
|
});
|
|
@@ -129,7 +129,7 @@ declare const autocompleteProps: {
|
|
|
129
129
|
default: boolean;
|
|
130
130
|
};
|
|
131
131
|
};
|
|
132
|
-
declare const autocompleteEmit: readonly ["update:modelValue", "input", "change", "enter", "scrollEnd", "buttonAction"];
|
|
132
|
+
declare const autocompleteEmit: readonly ["update:modelValue", "input", "change", "enter", "scrollEnd", "buttonAction", "focus", "clear"];
|
|
133
133
|
type AutocompleteProps = ExtractPropTypes<typeof autocompleteProps>;
|
|
134
134
|
type AutocompleteEmits = (e: (typeof autocompleteEmit)[number], value?: unknown, value2?: unknown) => void;
|
|
135
135
|
|
|
@@ -129,7 +129,7 @@ declare const autocompleteProps: {
|
|
|
129
129
|
default: boolean;
|
|
130
130
|
};
|
|
131
131
|
};
|
|
132
|
-
declare const autocompleteEmit: readonly ["update:modelValue", "input", "change", "enter", "scrollEnd", "buttonAction"];
|
|
132
|
+
declare const autocompleteEmit: readonly ["update:modelValue", "input", "change", "enter", "scrollEnd", "buttonAction", "focus", "clear"];
|
|
133
133
|
type AutocompleteProps = ExtractPropTypes<typeof autocompleteProps>;
|
|
134
134
|
type AutocompleteEmits = (e: (typeof autocompleteEmit)[number], value?: unknown, value2?: unknown) => void;
|
|
135
135
|
|
|
@@ -143,7 +143,7 @@ var autocompleteProps = {
|
|
|
143
143
|
default: true
|
|
144
144
|
}
|
|
145
145
|
};
|
|
146
|
-
var autocompleteEmit = ["update:modelValue", "input", "change", "enter", "scrollEnd", "buttonAction"];
|
|
146
|
+
var autocompleteEmit = ["update:modelValue", "input", "change", "enter", "scrollEnd", "buttonAction", "focus", "clear"];
|
|
147
147
|
// Annotate the CommonJS export names for ESM import in node:
|
|
148
148
|
0 && (module.exports = {
|
|
149
149
|
autocompleteEmit,
|
package/package.json
CHANGED
|
@@ -1,19 +1,20 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mekari/pixel3-autocomplete",
|
|
3
|
-
"
|
|
3
|
+
"description": "Autocomplete component for mekari pixel 3",
|
|
4
|
+
"version": "0.0.6-dev.0",
|
|
4
5
|
"main": "dist/index.js",
|
|
5
6
|
"license": "MIT",
|
|
6
7
|
"files": [
|
|
7
8
|
"dist"
|
|
8
9
|
],
|
|
9
10
|
"dependencies": {
|
|
10
|
-
"@mekari/pixel3-styled-system": "0.0.
|
|
11
|
-
"@mekari/pixel3-
|
|
12
|
-
"@mekari/pixel3-
|
|
13
|
-
"@mekari/pixel3-spinner": "0.0.
|
|
14
|
-
"@mekari/pixel3-icon": "0.0.
|
|
15
|
-
"@mekari/pixel3-popover": "0.0.
|
|
16
|
-
"@mekari/pixel3-text": "0.0.
|
|
11
|
+
"@mekari/pixel3-styled-system": "0.0.4-dev.0",
|
|
12
|
+
"@mekari/pixel3-utils": "0.0.4",
|
|
13
|
+
"@mekari/pixel3-input": "0.0.6-dev.0",
|
|
14
|
+
"@mekari/pixel3-spinner": "0.0.6-dev.0",
|
|
15
|
+
"@mekari/pixel3-icon": "0.0.6-dev.0",
|
|
16
|
+
"@mekari/pixel3-popover": "0.0.6-dev.0",
|
|
17
|
+
"@mekari/pixel3-text": "0.0.6-dev.0"
|
|
17
18
|
},
|
|
18
19
|
"peerDependencies": {
|
|
19
20
|
"vue": "^3.4.9"
|
|
@@ -38,7 +39,6 @@
|
|
|
38
39
|
"build": "tsup && pnpm build:types",
|
|
39
40
|
"build:fast": "tsup",
|
|
40
41
|
"build:types": "tsup src --dts-only",
|
|
41
|
-
"build:external": "tsup src/index.tsx --external @acme-org/styled-system",
|
|
42
42
|
"types:check": "tsc --noEmit",
|
|
43
43
|
"replace-config": "clean-package",
|
|
44
44
|
"restore-config": "clean-package restore"
|