diff --git a/README.md b/README.md
index cf0bc5c..84c9ff2 100644
--- a/README.md
+++ b/README.md
@@ -18,7 +18,7 @@ In your template:
```
diff --git a/demo/dist/index.html b/demo/dist/index.html
index 1c090df..1a69ede 100644
--- a/demo/dist/index.html
+++ b/demo/dist/index.html
@@ -5,7 +5,7 @@
- Vue Tab Complete
+ Vue NextHint - a tab-to-complete component
diff --git a/demo/index.html b/demo/index.html
index 8e443d7..37a0441 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -5,7 +5,7 @@
- Vue Tab Complete
+ Vue NextHint - a tab-to-complete component
diff --git a/dist/index.css b/dist/index.css
deleted file mode 100644
index e69de29..0000000
diff --git a/dist/main.es.js b/dist/main.es.js
index 31f2c26..251138b 100644
--- a/dist/main.es.js
+++ b/dist/main.es.js
@@ -1,35 +1,38 @@
-import { defineComponent as m, ref as f, computed as o, watch as x, openBlock as y, createElementBlock as _, withDirectives as h, createElementVNode as a, vModelText as b, toDisplayString as n } from "vue";
-const w = { class: "relative" }, R = { class: "absolute left-3 top-1/2 -translate-y-1/2" }, g = { class: "ml-0.5 py-1 text-xl text-black" }, C = { class: "text-xl text-gray-400" }, k = /* @__PURE__ */ m({
- __name: "TabComplete",
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".vue-tab-complete-wrapper{position:relative}.vue-tab-complete-wrapper input{z-index:10;padding:.5rem;padding-left:14px;width:100%;height:100%;color:#fff;border-color:#ced7d0;caret-color:#63666c}.vue-tab-complete-wrapper .input-overlay{position:absolute;left:.75rem;top:50%;transform:translateY(-50%)}.vue-tab-complete-wrapper .input-overlay .result-query{padding-top:.25rem;padding-bottom:.25rem;margin-left:.125rem;color:#000}.vue-tab-complete-wrapper .input-overlay .result-suggest{color:#9ca3af}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
+import { defineComponent as _, ref as m, computed as a, watch as f, openBlock as h, createElementBlock as g, withDirectives as y, createElementVNode as n, vModelText as x, toDisplayString as u } from "vue";
+const R = { class: "vue-tab-complete-wrapper" }, w = ["placeholder"], b = { class: "input-overlay" }, D = { class: "result-query" }, N = { class: "result-suggest" }, C = /* @__PURE__ */ _({
+ __name: "NextHint",
props: {
- results: { default: () => [] }
+ suggestions: { default: () => [] },
+ placeholder: { default: "" }
},
emits: ["change"],
- setup(r, { emit: u }) {
- const c = r, i = u, e = f(""), l = o(() => e.value === "" ? null : c.results.find((s) => s.toLowerCase().startsWith(e.value.toLowerCase()))), p = o(() => {
+ setup(r, { emit: c }) {
+ const o = r, i = c, e = m(""), s = a(() => e.value === "" ? null : o.suggestions.find((l) => l.toLowerCase().startsWith(e.value.toLowerCase()))), p = a(() => {
var t;
- return e.value === "" || l.value === null ? null : (t = l.value) == null ? void 0 : t.substring(e.value.length);
+ return e.value === "" || s.value === null ? null : (t = s.value) == null ? void 0 : t.substring(e.value.length);
}), d = (t) => {
- t.key === "Tab" && (t.preventDefault(), l.value && (e.value = l.value));
+ t.key === "Tab" && (t.preventDefault(), s.value && (e.value = s.value));
};
- return x(e, () => {
+ return f(e, () => {
i("change", e.value);
- }), (t, s) => (y(), _("div", w, [
- h(a("input", {
- "onUpdate:modelValue": s[0] || (s[0] = (v) => e.value = v),
+ }), (t, l) => (h(), g("div", R, [
+ y(n("input", {
+ "onUpdate:modelValue": l[0] || (l[0] = (v) => e.value = v),
type: "text",
- class: "z-10 h-[76px] w-full rounded border border-[#CED7D0] p-2 pl-3.5 text-xl text-white caret-gray-600",
- onKeydown: d
- }, null, 544), [
- [b, e.value]
+ class: "vue-tab-complete-input",
+ onKeydown: d,
+ placeholder: o.placeholder
+ }, null, 40, w), [
+ [x, e.value]
]),
- a("div", R, [
- a("span", g, n(e.value), 1),
- a("span", C, n(p.value), 1)
+ n("div", b, [
+ n("span", D, u(e.value), 1),
+ n("span", N, u(p.value), 1)
])
]));
}
});
export {
- k as TabComplete
+ C as NextHint
};
diff --git a/dist/main.umd.js b/dist/main.umd.js
index 6f3e5cc..04219e3 100644
--- a/dist/main.umd.js
+++ b/dist/main.umd.js
@@ -1 +1,2 @@
-(function(l,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(l=typeof globalThis<"u"?globalThis:l||self,e(l.VueTabComplete={},l.Vue))})(this,function(l,e){"use strict";const _="",a={class:"relative"},r={class:"absolute left-3 top-1/2 -translate-y-1/2"},i={class:"ml-0.5 py-1 text-xl text-black"},u={class:"text-xl text-gray-400"},c=e.defineComponent({__name:"TabComplete",props:{results:{default:()=>[]}},emits:["change"],setup(d,{emit:p}){const f=d,m=p,t=e.ref(""),o=e.computed(()=>t.value===""?null:f.results.find(s=>s.toLowerCase().startsWith(t.value.toLowerCase()))),y=e.computed(()=>{var n;return t.value===""||o.value===null?null:(n=o.value)==null?void 0:n.substring(t.value.length)}),x=n=>{n.key==="Tab"&&(n.preventDefault(),o.value&&(t.value=o.value))};return e.watch(t,()=>{m("change",t.value)}),(n,s)=>(e.openBlock(),e.createElementBlock("div",a,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":s[0]||(s[0]=h=>t.value=h),type:"text",class:"z-10 h-[76px] w-full rounded border border-[#CED7D0] p-2 pl-3.5 text-xl text-white caret-gray-600",onKeydown:x},null,544),[[e.vModelText,t.value]]),e.createElementVNode("div",r,[e.createElementVNode("span",i,e.toDisplayString(t.value),1),e.createElementVNode("span",u,e.toDisplayString(y.value),1)])]))}});l.TabComplete=c,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})});
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".vue-tab-complete-wrapper{position:relative}.vue-tab-complete-wrapper input{z-index:10;padding:.5rem;padding-left:14px;width:100%;height:100%;color:#fff;border-color:#ced7d0;caret-color:#63666c}.vue-tab-complete-wrapper .input-overlay{position:absolute;left:.75rem;top:50%;transform:translateY(-50%)}.vue-tab-complete-wrapper .input-overlay .result-query{padding-top:.25rem;padding-bottom:.25rem;margin-left:.125rem;color:#000}.vue-tab-complete-wrapper .input-overlay .result-suggest{color:#9ca3af}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
+(function(n,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(n=typeof globalThis<"u"?globalThis:n||self,e(n.VueNextHint={},n.Vue))})(this,function(n,e){"use strict";const v="",i={class:"vue-tab-complete-wrapper"},r=["placeholder"],u={class:"input-overlay"},c={class:"result-query"},d={class:"result-suggest"},p=e.defineComponent({__name:"NextHint",props:{suggestions:{default:()=>[]},placeholder:{default:""}},emits:["change"],setup(f,{emit:m}){const a=f,_=m,t=e.ref(""),l=e.computed(()=>t.value===""?null:a.suggestions.find(o=>o.toLowerCase().startsWith(t.value.toLowerCase()))),h=e.computed(()=>{var s;return t.value===""||l.value===null?null:(s=l.value)==null?void 0:s.substring(t.value.length)}),y=s=>{s.key==="Tab"&&(s.preventDefault(),l.value&&(t.value=l.value))};return e.watch(t,()=>{_("change",t.value)}),(s,o)=>(e.openBlock(),e.createElementBlock("div",i,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":o[0]||(o[0]=g=>t.value=g),type:"text",class:"vue-tab-complete-input",onKeydown:y,placeholder:a.placeholder},null,40,r),[[e.vModelText,t.value]]),e.createElementVNode("div",u,[e.createElementVNode("span",c,e.toDisplayString(t.value),1),e.createElementVNode("span",d,e.toDisplayString(h.value),1)])]))}}),x="";n.NextHint=p,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});
diff --git a/package.json b/package.json
index c9b80d3..4817263 100644
--- a/package.json
+++ b/package.json
@@ -1,11 +1,12 @@
{
- "name": "vue-tab-complete",
+ "name": "vue-nexthint",
"version": "1.0.0",
- "description": "A Vue 3 component for tab completion",
+ "description": "A Vue component that creates autocomplete functionality for your input fields, but works as tab suggestions instead of dropdown.",
"author": {
"name": "Phuc Hong.",
"email": "dshongphuc@gmail.com"
},
+ "license": "MIT",
"type": "module",
"main": "./dist/main.umd.js",
"module": "./dist/main.es.js",
@@ -17,18 +18,19 @@
"preview": "vite preview"
},
"dependencies": {
- "vue": "^3.3.4",
- "tailwindcss": "^3.3.2",
- "postcss": "^8.4.23",
+ "@headlessui/vue": "^1.7.13",
"autoprefixer": "^10.4.14",
- "@headlessui/vue": "^1.7.13"
+ "postcss": "^8.4.23",
+ "tailwindcss": "^3.3.2",
+ "vite-plugin-css-injected-by-js": "^3.4.0",
+ "vue": "^3.3.4"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.2.3",
- "typescript": "^5.0.2",
- "vite": "^4.4.5",
"sass": "^1.38.0",
"sass-loader": "^10.0.0",
+ "typescript": "^5.0.2",
+ "vite": "^4.4.5",
"vue-tsc": "^1.8.5"
}
}
diff --git a/vite.config.ts b/vite.config.ts
index 7aecdbe..3688dab 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,6 +1,7 @@
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path"
+import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
// https://vitejs.dev/config/
export default defineConfig(() => {
@@ -12,7 +13,10 @@ export default defineConfig(() => {
}
return {
- plugins: [vue()],
+ plugins: [
+ vue(),
+ cssInjectedByJsPlugin(),
+ ],
resolve: {
dedupe: [
'vue'
@@ -35,11 +39,11 @@ export default defineConfig(() => {
globals: {
vue: "Vue",
},
- // Use `index.css` for css
- assetFileNames: assetInfo => {
- if (assetInfo.name == "style.css") return "index.css"
- return assetInfo.name
- },
+ // // Use `index.css` for css
+ // assetFileNames: assetInfo => {
+ // if (assetInfo.name == "style.css") return "index.css"
+ // return assetInfo.name
+ // },
},
},
},
diff --git a/yarn.lock b/yarn.lock
index 275896b..dcecf8c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1086,6 +1086,7 @@ signal-exit@^4.0.1:
integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
+ name string-width-cjs
version "4.2.3"
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -1104,6 +1105,7 @@ string-width@^5.0.1, string-width@^5.1.2:
strip-ansi "^7.0.1"
"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+ name strip-ansi-cjs
version "6.0.1"
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -1214,6 +1216,11 @@ util-deprecate@^1.0.2:
resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
+vite-plugin-css-injected-by-js@^3.4.0:
+ version "3.4.0"
+ resolved "https://registry.yarnpkg.com/vite-plugin-css-injected-by-js/-/vite-plugin-css-injected-by-js-3.4.0.tgz#b09a571ab50744623736a4b056ecc85d7516311a"
+ integrity sha512-wS5+UYtJXQ/vNornsqTQxOLBVO/UjXU54ZsYMeX0mj2OrbStMQ4GLgvneVDQGPwyGJcm/ntBPawc2lA7xx+Lpg==
+
vite@^4.4.5:
version "4.5.2"
resolved "https://registry.yarnpkg.com/vite/-/vite-4.5.2.tgz#d6ea8610e099851dad8c7371599969e0f8b97e82"