feat(vite): bundle js & css into the same file

dshongphuc · Feb 16, 2024 · d3f304a · d3f304a
1 parent 47fde22
commit d3f304a
Show file tree

Hide file tree

Showing 9 changed files with 55 additions and 38 deletions.
diff --git a/README.md b/README.md
@@ -18,7 +18,7 @@ In your template:
 <NextHint
   placeholder="Type 'Vue'"
   @change="onChangeHandler"
-  :suggestions="['Vue.js', 'React', "Hello world"]"
+  :suggestions="['Vue.js', 'React', 'Hello world']"
 />
 ```
 

diff --git a/demo/dist/index.html b/demo/dist/index.html
@@ -5,7 +5,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.jpg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vue Tab Complete</title>
+    <title>Vue NextHint - a tab-to-complete component</title>
   <script type="module" crossorigin src="/assets/index-4d71a3e1.js"></script>
   <link rel="stylesheet" href="/assets/index-9285e695.css">
 </head>

diff --git a/demo/index.html b/demo/index.html
@@ -5,7 +5,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.jpg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vue Tab Complete</title>
+    <title>Vue NextHint - a tab-to-complete component</title>
 </head>
 
 <body>

diff --git a/dist/index.css b/dist/index.css
diff --git 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
diff --git 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": "[email protected]"
   },
+  "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
@@ -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
@@ -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"