vue-typeahead3 - npm Package Compare versions

Comparing version 1.1.3 to 1.2.0

dist/vue-typeahead.es.js

@@ -1,33 +0,34 @@
-import { defineComponent, ref, toRefs, computed, watch, openBlock, createElementBlock, createElementVNode, withDirectives, normalizeClass, unref, withKeys, vModelText, Fragment, renderList, toDisplayString, createTextVNode, createCommentVNode, pushScopeId, popScopeId } from "vue";
+import { defineComponent, ref, toRefs, computed, watch, openBlock, createElementBlock, createElementVNode, withDirectives, normalizeClass, withKeys, vModelText, Fragment, renderList, toDisplayString, createTextVNode, unref, createCommentVNode, pushScopeId, popScopeId } from "vue";
 var Typeahead_vue_vue_type_style_index_0_scoped_true_lang = "";
 var _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
   for (const [key, val] of props) {
-    sfc[key] = val;
+    target[key] = val;
   }
-  return sfc;
+  return target;
 };
-const _withScopeId = (n) => (pushScopeId("data-v-5fa132ca"), n = n(), popScopeId(), n);
+const _withScopeId = (n) => (pushScopeId("data-v-2a84c8ab"), n = n(), popScopeId(), n);
 const _hoisted_1 = { class: "typeahead-container" };
 const _hoisted_2 = { class: "search-container" };
 const _hoisted_3 = ["placeholder", "onKeyup"];
-const _hoisted_4 = { class: "results-container" };
-const _hoisted_5 = {
+const _hoisted_4 = {
   key: 0,
-  class: "results"
+  class: "results-container"
 };
+const _hoisted_5 = { class: "results" };
 const _hoisted_6 = ["onClick", "onMouseover"];
 const _hoisted_7 = { class: "category" };
 const _hoisted_8 = { key: 1 };
-const _hoisted_9 = {
-  key: 1,
-  class: "results"
-};
-const _hoisted_10 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("li", null, "No results found!", -1));
+const _hoisted_9 = { key: 1 };
+const _hoisted_10 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("ul", { class: "results" }, [
+  /* @__PURE__ */ createElementVNode("li", null, "No results found!")
+], -1));
 const _hoisted_11 = [
   _hoisted_10
 ];
-const _sfc_main = /* @__PURE__ */ defineComponent({
+const _sfc_main = defineComponent({
+  __name: "Typeahead",
   props: {
-    modelValue: null,
-    suggestions: null,
+    modelValue: {},
+    suggestions: {},
     placeholder: { default: "Type to search..." },
@@ -40,3 +41,3 @@ searchKey: { default: "value" },
   emits: ["update:modelValue"],
-  setup(__props, { emit }) {
+  setup(__props, { expose: __expose, emit }) {
     const props = __props;
@@ -47,8 +48,11 @@ const searchTerm = ref("");
     const { valueKey, suggestions, searchKey, modelValue } = toRefs(props);
-    const results = computed(() => {
-      var _a;
-      if (!((_a = searchTerm.value) == null ? void 0 : _a.length) || selected.value)
-        return [];
-      return suggestions.value.filter((entry) => entry[searchKey.value].toLowerCase().includes(searchTerm.value.toLowerCase()));
-    });
+    const results = computed(
+      () => {
+        if (!searchTerm.value.length || selected.value)
+          return [];
+        return suggestions.value.filter(
+          (entry) => entry[searchKey.value].toLowerCase().includes(searchTerm.value.toLowerCase())
+        );
+      }
+    );
     const select = (result) => {
@@ -59,2 +63,3 @@ searchTerm.value = result[valueKey.value];
     };
+    __expose({ select });
     const handleArrow = (dir) => {
@@ -91,8 +96,8 @@ if (dir < 0) {
     watch(modelValue, (newVal, oldVal) => {
-      if (newVal !== oldVal && newVal !== searchTerm.value) {
-        searchTerm.value = newVal;
+      if (newVal !== oldVal && newVal[props.valueKey] !== searchTerm.value) {
+        select(newVal);
       }
     });
     watch(searchTerm, (newVal) => {
-      if (!newVal || newVal.length === 0) {
+      if (newVal.length === 0) {
         selected.value = false;
@@ -108,3 +113,3 @@ }
             placeholder: props.placeholder,
-            class: normalizeClass({ "has-results": unref(results).length }),
+            class: normalizeClass({ "has-results": results.value.length }),
             onSearch: handleClear,
@@ -121,7 +126,7 @@ onKeyup: [
         ]),
-        createElementVNode("div", _hoisted_4, [
-          unref(results).length && !selected.value ? (openBlock(), createElementBlock("ul", _hoisted_5, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(results), (result, index) => {
+        results.value.length && !selected.value ? (openBlock(), createElementBlock("div", _hoisted_4, [
+          createElementVNode("ul", _hoisted_5, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(results.value, (result, index) => {
               return openBlock(), createElementBlock(Fragment, { key: index }, [
-                index < props.maxResults ? (openBlock(), createElementBlock("li", {
+                index < _ctx.maxResults ? (openBlock(), createElementBlock("li", {
                   key: 0,
@@ -133,10 +138,10 @@ class: normalizeClass({ focused: isFocused(index) }),
                 }, [
-                  createElementVNode("h5", _hoisted_7, toDisplayString(result[__props.categoryKey]), 1),
+                  createElementVNode("h5", _hoisted_7, toDisplayString(result[_ctx.categoryKey]), 1),
                   createTextVNode(" " + toDisplayString(result[unref(valueKey)]), 1)
                 ], 42, _hoisted_6)) : createCommentVNode("", true),
-                unref(results).length === 0 ? (openBlock(), createElementBlock("li", _hoisted_8, "Test")) : createCommentVNode("", true)
+                results.value.length === 0 ? (openBlock(), createElementBlock("li", _hoisted_8, "Test")) : createCommentVNode("", true)
               ], 64);
             }), 128))
-          ])) : searchTerm.value && !unref(results).length && !selected.value ? (openBlock(), createElementBlock("ul", _hoisted_9, _hoisted_11)) : createCommentVNode("", true)
-        ])
+          ])
+        ])) : searchTerm.value && !results.value.length && !selected.value ? (openBlock(), createElementBlock("div", _hoisted_9, _hoisted_11)) : createCommentVNode("", true)
       ]);
@@ -146,3 +151,3 @@ };
 });
-var Typeahead = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5fa132ca"]]);
+var Typeahead = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-2a84c8ab"]]);
 Typeahead.install = function(app) {
@@ -149,0 +154,0 @@ app.component(Typeahead.name, Typeahead);

dist/vue-typeahead.umd.js

@@ -1,1 +0,1 @@
-(function(s,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(s=typeof globalThis!="undefined"?globalThis:s||self,e(s.VueTypeahead={},s.Vue))})(this,function(s,e){"use strict";var b="",B=(n,f)=>{for(const[i,o]of f)n[i]=o;return n};const V=n=>(e.pushScopeId("data-v-5fa132ca"),n=n(),e.popScopeId(),n),E={class:"typeahead-container"},K={class:"search-container"},C=["placeholder","onKeyup"],T={class:"results-container"},N={key:0,class:"results"},w=["onClick","onMouseover"],S={class:"category"},v={key:1},M={key:1,class:"results"},x=[V(()=>e.createElementVNode("li",null,"No results found!",-1))];var u=B(e.defineComponent({props:{modelValue:null,suggestions:null,placeholder:{default:"Type to search..."},searchKey:{default:"value"},categoryKey:{default:"category"},valueKey:{default:"value"},maxResults:{default:5}},emits:["update:modelValue"],setup(n,{emit:f}){const i=n,o=e.ref(""),d=e.ref(!1),a=e.ref(-1),{valueKey:h,suggestions:$,searchKey:I,modelValue:D}=e.toRefs(i),c=e.computed(()=>{var t;return!((t=o.value)==null?void 0:t.length)||d.value?[]:$.value.filter(l=>l[I.value].toLowerCase().includes(o.value.toLowerCase()))}),m=t=>(o.value=t[h.value],d.value=!0,f("update:modelValue",t)),y=t=>{t<0?a.value>0&&a.value--:t>0&&a.value<c.value.length-1&&a.value++},_=()=>(o.value="",d.value=!1,a.value=-1,f("update:modelValue",void 0)),F=()=>{o.value||_()},L=()=>{const t=c.value[a.value];m(t)},k=t=>{a.value=t},R=t=>t===a.value;return e.watch(D,(t,l)=>{t!==l&&t!==o.value&&(o.value=t)}),e.watch(o,t=>{(!t||t.length===0)&&(d.value=!1)}),(t,l)=>(e.openBlock(),e.createElementBlock("div",E,[e.createElementVNode("div",K,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":l[0]||(l[0]=r=>o.value=r),type:"search",placeholder:i.placeholder,class:e.normalizeClass({"has-results":e.unref(c).length}),onSearch:F,onKeyup:[l[1]||(l[1]=e.withKeys(r=>y(-1),["up"])),l[2]||(l[2]=e.withKeys(r=>y(1),["down"])),e.withKeys(_,["esc"]),e.withKeys(L,["enter"])]},null,42,C),[[e.vModelText,o.value]])]),e.createElementVNode("div",T,[e.unref(c).length&&!d.value?(e.openBlock(),e.createElementBlock("ul",N,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(c),(r,p)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:p},[p<i.maxResults?(e.openBlock(),e.createElementBlock("li",{key:0,class:e.normalizeClass({focused:R(p)}),onClick:g=>m(r),onMouseover:g=>k(p),onMouseleave:l[3]||(l[3]=g=>k(-1))},[e.createElementVNode("h5",S,e.toDisplayString(r[n.categoryKey]),1),e.createTextVNode(" "+e.toDisplayString(r[e.unref(h)]),1)],42,w)):e.createCommentVNode("",!0),e.unref(c).length===0?(e.openBlock(),e.createElementBlock("li",v,"Test")):e.createCommentVNode("",!0)],64))),128))])):o.value&&!e.unref(c).length&&!d.value?(e.openBlock(),e.createElementBlock("ul",M,x)):e.createCommentVNode("",!0)])]))}}),[["__scopeId","data-v-5fa132ca"]]);u.install=function(n){n.component(u.name,u)},s.default=u,Object.defineProperty(s,"__esModule",{value:!0}),s[Symbol.toStringTag]="Module"});
+(function(n,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(n=typeof globalThis!="undefined"?globalThis:n||self,e(n.VueTypeahead={},n.Vue))})(this,function(n,e){"use strict";var z="",V=(l,m)=>{const u=l.__vccOpts||l;for(const[i,o]of m)u[i]=o;return u};const B=l=>(e.pushScopeId("data-v-2a84c8ab"),l=l(),e.popScopeId(),l),E={class:"typeahead-container"},K={class:"search-container"},T=["placeholder","onKeyup"],C={key:0,class:"results-container"},N={class:"results"},w=["onClick","onMouseover"],S={class:"category"},M={key:1},x={key:1},$=[B(()=>e.createElementVNode("ul",{class:"results"},[e.createElementVNode("li",null,"No results found!")],-1))],b=e.defineComponent({__name:"Typeahead",props:{modelValue:{},suggestions:{},placeholder:{default:"Type to search..."},searchKey:{default:"value"},categoryKey:{default:"category"},valueKey:{default:"value"},maxResults:{default:5}},emits:["update:modelValue"],setup(l,{expose:m,emit:u}){const i=l,o=e.ref(""),d=e.ref(!1),s=e.ref(-1),{valueKey:_,suggestions:I,searchKey:D,modelValue:F}=e.toRefs(i),c=e.computed(()=>!o.value.length||d.value?[]:I.value.filter(t=>t[D.value].toLowerCase().includes(o.value.toLowerCase()))),h=t=>(o.value=t[_.value],d.value=!0,u("update:modelValue",t));m({select:h});const y=t=>{t<0?s.value>0&&s.value--:t>0&&s.value<c.value.length-1&&s.value++},g=()=>(o.value="",d.value=!1,s.value=-1,u("update:modelValue",void 0)),L=()=>{o.value||g()},R=()=>{const t=c.value[s.value];h(t)},k=t=>{s.value=t},j=t=>t===s.value;return e.watch(F,(t,a)=>{t!==a&&t[i.valueKey]!==o.value&&h(t)}),e.watch(o,t=>{t.length===0&&(d.value=!1)}),(t,a)=>(e.openBlock(),e.createElementBlock("div",E,[e.createElementVNode("div",K,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":a[0]||(a[0]=r=>o.value=r),type:"search",placeholder:i.placeholder,class:e.normalizeClass({"has-results":c.value.length}),onSearch:L,onKeyup:[a[1]||(a[1]=e.withKeys(r=>y(-1),["up"])),a[2]||(a[2]=e.withKeys(r=>y(1),["down"])),e.withKeys(g,["esc"]),e.withKeys(R,["enter"])]},null,42,T),[[e.vModelText,o.value]])]),c.value.length&&!d.value?(e.openBlock(),e.createElementBlock("div",C,[e.createElementVNode("ul",N,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(c.value,(r,f)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:f},[f<t.maxResults?(e.openBlock(),e.createElementBlock("li",{key:0,class:e.normalizeClass({focused:j(f)}),onClick:v=>h(r),onMouseover:v=>k(f),onMouseleave:a[3]||(a[3]=v=>k(-1))},[e.createElementVNode("h5",S,e.toDisplayString(r[t.categoryKey]),1),e.createTextVNode(" "+e.toDisplayString(r[e.unref(_)]),1)],42,w)):e.createCommentVNode("",!0),c.value.length===0?(e.openBlock(),e.createElementBlock("li",M,"Test")):e.createCommentVNode("",!0)],64))),128))])])):o.value&&!c.value.length&&!d.value?(e.openBlock(),e.createElementBlock("div",x,$)):e.createCommentVNode("",!0)]))}});var p=V(b,[["__scopeId","data-v-2a84c8ab"]]);p.install=function(l){l.component(p.name,p)},n.default=p,Object.defineProperties(n,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package.json

 {
   "name": "vue-typeahead3",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "files": [
@@ -67,3 +67,3 @@ "dist"
     "vue-eslint-parser": "^8.0.1",
-    "vue-tsc": "^0.28.10"
+    "vue-tsc": "^0.29.5"
   },
@@ -70,0 +70,0 @@ "description": "A super lightweight typeahead / autocompletion component for Vue.js 3. It's written in TypeScript using Vue.js 3 Composition API.",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

18327

increased by0.99%

Lines of code

169

increased by3.68%

No dependency changes