Restructures...everything

Author: syropian

.eslintignore

@@ -0,0 +1,3 @@
+dist
+dist-demo
+node_modules

.github/workflows/tests.yml

@@ -18,6 +18,6 @@ jobs:
       - name: Cypress tests
         uses: cypress-io/github-action@v2
         with:
-          start: yarn demo
+          start: yarn dev
           command: yarn cypress
-          wait-on: "http://localhost:3001"
+          wait-on: 'http://localhost:3000'

.gitignore

@@ -1,6 +1,7 @@
 node_modules
 .DS_Store
 dist
+dist-demo
 dist-ssr
 *.local
 cypress

.prettierignore

@@ -1,3 +1,3 @@
-src/dist
-demo/dist
+dist
+dist-demo
 node_modules

cypress.json

@@ -1,5 +1,5 @@
 {
-  "baseUrl": "http://localhost:3001",
+  "baseUrl": "http://localhost:3000",
   "integrationFolder": "tests",
   "pluginsFile": false,
   "supportFile": false,

demo/.gitignore

@@ -1,32 +1,19 @@
 <template>
   <div class="px-8 my-32 md:px-0">
     <div class="flex items-center justify-between w-full mx-auto mt-8 max-w-prose">
-      <h1 class="text-4xl font-bold">
-        <span class="relative inline-block top-1">↔️</span>
-        <span class="inline-block ml-2">vue-input-autowidth</span>
+      <h1 class="flex items-center text-4xl font-bold">
+        <Logo class="text-purple-500 w-auto h-8 fill-current relative top-0.5" aria-hidden="true" />
+        <span class="inline-block ml-4 text-gray-600">vue-input-autowidth</span>
       </h1>
       <nav class="flex items-center">
         <a
           href="https://github.com/syropian/vue-input-autowidth"
           target="_blank"
           rel="noopener noreferrer"
           class="inline-block transition-colors hover:text-purple-500"
+          aria-label="GitHub"
         >
-          <svg
-            viewBox="0 0 24 24"
-            width="24"
-            height="24"
-            stroke="currentColor"
-            stroke-width="2"
-            fill="none"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="css-i6dzq1"
-          >
-            <path
-              d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"
-            ></path>
-          </svg>
+          <GitHubIcon class="w-6 h-6 stroke-current" />
         </a>
       </nav>
     </div>
@@ -69,8 +56,14 @@
 
 <script>
 import { defineComponent, ref } from 'vue'
+import Logo from './Logo.vue'
+import GitHubIcon from './GitHubIcon.vue'
 
 export default defineComponent({
+  components: {
+    Logo,
+    GitHubIcon,
+  },
   setup() {
     const msg = ref('')
 

demo/.vscode/extensions.json

@@ -0,0 +1,15 @@
+<template>
+  <svg
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+    stroke-width="2"
+    fill="none"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path
+      d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"
+    ></path>
+  </svg>
+</template>

demo/src/App.vue demo/App.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 93 32">
+    <path
+      d="M18.585 3H87a3 3 0 013 3v20a3 3 0 01-3 3H18.585c.28.488.44 1.054.44 1.657 0 .478-.1.932-.281 1.343H87a6 6 0 006-6V6a6 6 0 00-6-6H18.743c.181.41.281.865.281 1.343 0 .603-.16 1.169-.44 1.657zM15.025 30.657c0 .742-.604 1.343-1.343 1.343h-2.89a4.61 4.61 0 01-3.28-1.37A4.61 4.61 0 014.232 32h-2.89C.605 32 0 31.399 0 30.657c0-.741.604-1.342 1.343-1.342h2.89a1.94 1.94 0 001.936-1.937v.128c0 .037 0 .074.007.11-.003-.08-.007-.158-.007-.238V17.341H4.491a1.342 1.342 0 110-2.685h1.678V4.622a1.94 1.94 0 00-1.936-1.937h-2.89C.604 2.685 0 2.085 0 1.343 0 .6.604 0 1.343 0h2.89a4.61 4.61 0 013.28 1.37C8.35.523 9.512 0 10.791 0h2.89c.738 0 1.342.6 1.342 1.342 0 .742-.604 1.343-1.342 1.343h-2.89a1.94 1.94 0 00-1.937 1.937v10.033h1.678a1.342 1.342 0 110 2.685H8.855v10.038c0 .08-.003.157-.007.238.007-.037.007-.074.007-.111v-.127a1.94 1.94 0 001.937 1.936h2.89c.738 0 1.343.601 1.343 1.343z"
+    />
+    <path
+      d="M21.371 17.391a1.256 1.256 0 010-1.782l6.273-6.24a1.272 1.272 0 011.792 0c.495.492.495 1.29 0 1.783l-4.11 4.087H55v2.522H25.327l4.109 4.087c.495.492.495 1.29 0 1.783a1.272 1.272 0 01-1.792 0l-6.273-6.24z"
+    />
+    <path
+      d="M83.629 17.391a1.256 1.256 0 000-1.782l-6.273-6.24a1.272 1.272 0 00-1.792 0 1.256 1.256 0 000 1.783l4.11 4.087H50v2.522h29.673l-4.109 4.087a1.256 1.256 0 000 1.783 1.272 1.272 0 001.792 0l6.273-6.24z"
+    />
+  </svg>
+</template>

demo/GitHubIcon.vue

@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
+    <script type="module" src="/demo/main.ts"></script>
   </body>
 </html>

demo/Logo.vue

@@ -1,6 +1,6 @@
 import { createApp } from 'vue'
 import App from './App.vue'
-import { plugin as VueInputAutowidth } from '../../src/'
+import { plugin as VueInputAutowidth } from '../lib'
 import 'highlight.js/lib/common'
 import hljsVuePlugin from '@highlightjs/vue-plugin'
 import 'highlight.js/styles/atom-one-dark.css'