feat(vue3): various upgrades for vue 3

Upgrades dependencies, migrates to storybook + vite, removes default export.

BREAKING CHANGE: Users will have to use es6-style named imports instead.

closes #44, closes #52

.eslintignore

@@ -0,0 +1,9 @@
+/dist/
+/coverage
+.vscode
+.yalc
+yalc.lock
+*.timestamp-*
+
+# Storybook Build
+storybook-static/

.eslintrc.cjs

@@ -0,0 +1,46 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true
+  },
+  globals: {
+    vi: true
+  },
+  parserOptions: {
+    ecmaVersion: 'latest',
+    parser: require.resolve('@typescript-eslint/parser'),
+    sourceType: 'module'
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:vue/vue3-recommended',
+    'plugin:storybook/recommended',
+    'plugin:prettier/recommended'
+  ],
+  plugins: ['vue'],
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'vue/component-tags-order': [
+      'error',
+      {
+        order: ['script', 'template', 'style']
+      }
+    ],
+    'vue/multi-word-component-names': 'off'
+  },
+  overrides: [
+    {
+      files: ['vitest.setup.ts', '**/__tests__/*.{j,t}s', '**/tests/**/*.{spec,test}.{j,t}s'],
+      env: {
+        jest: true
+      },
+      plugins: ['vitest'],
+      extends: ['plugin:vitest/recommended'],
+      rules: {
+        'vitest/no-commented-out-tests': 'off'
+      }
+    }
+  ]
+}

.github/workflows/release.yml

@@ -17,7 +17,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: 14
+          node-version: 16
       - name: Install
         run: npm ci
       - name: Test

.gitignore

@@ -1,8 +1,10 @@
 .DS_Store
 node_modules
 /dist
-/build
 /coverage
+.yalc
+yalc.lock
+*.timestamp-*
 
 # local env files
 .env.local
@@ -21,3 +23,6 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw?
+
+# Storybook Build
+storybook-static/

.nvmrc

@@ -0,0 +1 @@
+16.16.0

.prettierignore

@@ -0,0 +1,18 @@
+## directories
+/dist/
+backstop_data
+test/unit/coverage/
+
+## file extensions
+*.*
+!.storybook/
+!*.cjs
+!*.cts
+!*.js
+!*.json
+!*.jsonc
+!*.mjs
+!*.mts
+!*.vue
+!*.ts
+!*.yml

.prettierrc.json

@@ -0,0 +1,7 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 120,
+  "arrowParens": "always",
+  "trailingComma": "none"
+}

.storybook/main.ts

@@ -0,0 +1,35 @@
+import { type StorybookConfig } from '@storybook/vue3-vite'
+import { mergeConfig } from 'vite'
+import { execSync } from 'child_process'
+
+const STORYBOOK_VERSION_NUM = execSync('git describe --tags --abbrev=0').toString().trim()
+const STORYBOOK_COMMIT_HASH = execSync('git rev-parse --short HEAD').toString().trim()
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  core: {
+    builder: '@storybook/builder-vite',
+    disableTelemetry: true
+  },
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {}
+  },
+  docs: {
+    autodocs: 'tag'
+  },
+  env: (config) => ({
+    ...config,
+    STORYBOOK_VERSION_NUM,
+    STORYBOOK_COMMIT_HASH
+  }),
+  async viteFinal(config, { configType }) {
+    // return the customized config
+    return mergeConfig(config, {
+      // customize the Vite config here
+    })
+  }
+}
+
+export default config

.storybook/manager.ts

@@ -0,0 +1,11 @@
+import { addons } from '@storybook/manager-api'
+
+addons.setConfig({
+  sidebar: {
+    filters: {
+      patterns: (item: any) => {
+        return !item.tags.includes('hidden')
+      }
+    }
+  }
+})

.storybook/preview.ts

@@ -0,0 +1,43 @@
+import { type Preview, setup } from '@storybook/vue3'
+import { type App } from 'vue'
+import { plugin as InputFacade } from '@/plugin.js'
+import Checkbox from '@/stories/components/Checkbox.vue'
+import Display from '@/stories/components/Display.vue'
+import Field from '@/stories/components/Field.vue'
+
+import './styles.scss'
+
+const versionNum = import.meta.env.STORYBOOK_VERSION_NUM
+const commitHash = import.meta.env.STORYBOOK_COMMIT_HASH
+
+setup((app: App) => {
+  app.use(InputFacade)
+  app.component('Checkbox', Checkbox)
+  app.component('Display', Display)
+  app.component('Field', Field)
+})
+
+const preview: Preview = {
+  globalTypes: {
+    version: {
+      name: 'Version',
+      description: 'Vue Input Facade version',
+      defaultValue: versionNum,
+      toolbar: {
+        icon: 'info',
+        items: [
+          {
+            value: versionNum,
+            title: `${versionNum}`
+          },
+          {
+            value: commitHash,
+            title: `Commit Hash: ${commitHash}`
+          }
+        ]
+      }
+    }
+  }
+}
+
+export default preview

README.md

@@ -36,7 +36,7 @@ yarn add vue-input-facade@beta
 Installs the component and directive for your entire application.
 
 ```javascript
-import InputFacade from 'vue-input-facade'
+import { plugin as InputFacade } from 'vue-input-facade'
 app.use(InputFacade)
 ```
 
@@ -74,7 +74,7 @@ See the [token source file](https://github.com/RonaldJerez/vue-input-facade/blob
 <div class="hide" markdown="1">
 
 ## Note about special input types
-The masking library does not currently work on special input types such as number, email etc.  This is due to browsers treating these special inputs differently than text input and not supporting the same API.  As such, only use vue-input-facade with `<input type="text|tel|search">`.
+The masking library does not currently work on special input types such as number, email etc. This is due to browsers treating these special inputs differently than text input and not supporting the same API. As such, only use vue-input-facade with `<input type="text|tel|search">`.
 
 ## Usage
 
@@ -94,10 +94,10 @@ The masking library does not currently work on special input types such as numbe
 
 ### Migrating existing projects
 
-If you are migrating an existing project to vue-input-facade from another plugin and dont want to touch the whole codebase.  You may pass options during plugin installation to override the default tokens or directive name.
+If you are migrating an existing project to vue-input-facade from another plugin and dont want to touch the whole codebase. You may pass options during plugin installation to override the default tokens or directive name.
 
 ```javascript
-import InputFacade from 'vue-input-facade'
+import { plugin as InputFacade } from 'vue-input-facade'
 
 // migrating from v-mask
 const options = {
@@ -113,15 +113,15 @@ const options = {
   }
 }
 
-Vue.use(InputFacade, options)
+app.use(InputFacade, options)
 ```
 
 
 See [demo page](https://ronaldjerez.github.io/vue-input-facade) for more usage examples
 
 ## Contribution
 
-You're free to contribute to this project by submitting issues and/or pull requests. This project is test-driven, so keep in mind that every change and new feature should be covered by tests.  The project uses [semantic-release](https://github.com/semantic-release/semantic-release) to release new versions, therefore all commit messages should follow [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/#summary), we are using [commitizen](https://github.com/commitizen/cz-cli) to facilitate writting the commit messages.
+You're free to contribute to this project by submitting issues and/or pull requests. This project is test-driven, so keep in mind that every change and new feature should be covered by tests. The project uses [semantic-release](https://github.com/semantic-release/semantic-release) to release new versions, therefore all commit messages should follow [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/#summary), we are using [commitizen](https://github.com/commitizen/cz-cli) to facilitate writting the commit messages.
 
 ## License